/* Operator intake («پرونده‌ی تازه»): progressive sheet (message box first, fields when there is text, the rest behind «جزئیاتِ بیشتر»)
   + sticky glass bar on a phone / the save button in the title row on a laptop. Tokens come from app.css. */
body:has(.intake) .tabbar, body:has(.intake) .fab { display: none; }

.intake { display: flex; flex-direction: column; min-height: calc(100dvh - 8px); margin: -6px -16px 0; min-width: 0; }
/* bottom room = height of the sticky bar, so the last control is never under it */
.isheet { flex: 1; background: var(--card); border-radius: 38px 38px 0 0; box-shadow: 0 -8px 30px -14px rgba(0,0,0,.14); padding: 12px 20px 70px; min-width: 0; }
.intake .grab { width: 42px; height: 5px; border-radius: 99px; background: var(--track); margin: 0 auto 14px; }
.intake h1 { font-size: 28px; margin-bottom: 6px; }
.in-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.in-top { display: none; }
:is(.intake, .efields) .in-sec { margin-top: 26px; }
:is(.intake, .efields) .in-sec.first { margin-top: 14px; }
:is(.intake, .efields) .in-sec > h3, :is(.intake, .efields) .in-sub > h3 { font-size: 12px; font-weight: 500; color: var(--ink3); margin: 0 6px 10px; }

:is(.intake, .efields) .in { background: var(--field); border-radius: 22px; padding: 11px 18px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; min-width: 0; text-align: start; }
:is(.intake, .efields) .in small { font-size: 12px; color: var(--ink3); line-height: 1.5; }
:is(.intake, .efields) .in input, :is(.intake, .efields) .in textarea { width: 100%; font-size: 16px; line-height: 1.6; text-align: start; outline: none; background: none; min-width: 0; }
:is(.intake, .efields) .in:focus-within { box-shadow: 0 0 0 2px var(--em); background: var(--card); }
:is(.intake, .efields) .in.bad { box-shadow: 0 0 0 2px var(--danger); }
:is(.intake, .efields) .in.ta { min-height: 120px; justify-content: flex-start; padding-top: 14px; border-radius: 26px; }
:is(.intake, .efields) .in textarea { resize: none; min-height: 90px; line-height: 1.9; font-family: inherit; color: inherit; border: 0; }
.errtext { color: var(--crit-t); font-size:12px; line-height: 1.5; margin: 6px 8px 0; }
.cap { font-size:12px; color: var(--ink3); margin: 12px 6px 8px; }
.cap.first { margin-top: 0; }
.cap.tight { margin-top: 6px; }
.in-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }

.sg { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--mint); color: var(--em-t); font-size:12px; font-weight: 500; white-space: nowrap; }
.sg .i { width: 14px; height: 14px; stroke-width: 2.6; }
.sg.ok { opacity: .6; }
.sg.all { background: var(--em); color: #fff; }
.ch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; background: var(--field); font-size: 14px; white-space: nowrap; }
.ch.on { background: var(--em); color: #fff; font-weight: 500; }
.ch i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ch.on i { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
:is(.intake, .efields) .in-sec > .stack:first-of-type, :is(.intake, .efields) .in-sub > .stack:first-of-type, :is(.intake, .efields) .in-sub > h3 + .r2, .acc-b > .stack:first-child, .acc-b > .r2:first-child { margin-top: 0; }

/* fields the message chips can fill: phone, place, family size, the first need */
.in-fill { margin-top: 22px; }
.in-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; min-width: 0; }
.in-grid > * { min-width: 0; }
.r2.loc { margin-top: 0; }
:is(.intake, .efields) .in.city { cursor: pointer; width: 100%; }
.in.city .cv { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.6; }
.in.city .cv .i { width: 16px; height: 16px; color: var(--em-t); }

.in-seg { display: flex; background: var(--field); border-radius: 99px; padding: 4px; height: 44px; margin-top: 10px; }
.in-seg button { flex: 1; display: grid; place-items: center; border-radius: 99px; font-size: 14px; color: var(--ink3); }
.in-seg button.on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.in-step { display: flex; align-items: center; justify-content: space-between; background: var(--field); border-radius: 99px; padding: 6px; height: 56px; }
.in-step .lb { padding: 0 14px; font-size:14px; }
.in-step .ct { display: flex; align-items: center; gap: 4px; }
.in-step button { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.in-step button:disabled { opacity: .45; box-shadow: none; }
.in-step .v { min-width: 44px; text-align: center; font-size: 26px; font-weight: 600; line-height: 1; }
.in-step .v.z { color: var(--ink2); }
.in-step.bad { box-shadow: 0 0 0 2px var(--danger); }

/* one need = one row: category chip, پول/کالا, amount; «ماهانه» small under it */
.needs { display: flex; flex-direction: column; gap: 14px; }
.needc { position: relative; min-width: 0; }
.need { display: flex; align-items: center; gap: 8px; min-width: 0; }
.need .catbtn { display: grid; flex: none; border-radius: 14px; }
.need .amt { flex: 1; min-width: 0; }
.need .gin { flex: 1; min-width: 0; height: 48px; font-size: 16px; outline: none; border-radius: 16px; background: var(--field); padding: 0 14px; text-align: start; }
.need .gin:focus { box-shadow: 0 0 0 2px var(--em); background: var(--card); }
.tg { display: inline-flex; background: var(--field); border-radius: 99px; padding: 3px; height: 36px; flex: none; }
.tg button { display: grid; place-items: center; padding: 0 12px; border-radius: 99px; font-size:12px; color: var(--ink3); }
.tg button.on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.needc .amt .field { height: 48px; font-size: 16px; padding-left: 62px; }
.needc .amt .money .unit { inset-inline-end: 14px; }
.needfoot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mini { height: 30px; padding: 0 14px; border-radius: 99px; background: var(--field); color: var(--ink2); font-size: 12px; white-space: nowrap; }
.mini.on { background: var(--mint); color: var(--em-t); font-weight: 500; }
.mini.ghost { background: none; color: var(--ink3); margin-inline-start: auto; }
.tb { color: var(--em-t); font-size:14px; font-weight: 500; margin: 14px 6px 0; display: flex; align-items: center; gap: 6px; }
.tb .i { width: 16px; height: 16px; stroke-width: 2.6; }
.tb.more { margin: 0 6px; min-height: 44px; }

/* «جزئیاتِ بیشتر» body: an accordion, one row per group, one open at a time; hairlines, no boxes */
.in-dbody { display: flex; flex-direction: column; margin-top: 6px; min-width: 0; }
.in-sub { min-width: 0; }
.acc { border-top: 1px solid var(--sep); }
.acc:last-child { border-bottom: 1px solid var(--sep); }
.acc-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 6px; text-align: start; }
.acc-h .t { font-size: 14px; font-weight: 500; flex: none; }
.acc-h .s { flex: 1; min-width: 0; font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.acc-h .i { width: 18px; height: 18px; color: var(--ink3); margin-inline-start: auto; flex: none; }
.acc-h .s + .i { margin-inline-start: 0; }
.acc.open .acc-h .t { color: var(--em-t); }
.acc-b { padding: 4px 0 20px; min-width: 0; }
.acc-b .tb { margin-inline: 6px; }

.swrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 6px 4px; font-size:14px; text-align: start; }
.swrow.big { margin-top: 12px; padding: 4px 6px; }
.sw { width: 51px; height: 31px; border-radius: 99px; background: var(--track); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: inset .2s; }
.sw.on { background: var(--em); }
.sw.on::after { inset-inline-start: 22px; }

.up { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.bigt { position: relative; width: 104px; height: 104px; border-radius: 26px; background: var(--mint); color: var(--em-t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size:12px; font-weight: 500; text-align: center; flex: none; line-height: 1.5; cursor: pointer; overflow: hidden; }
.bigt .i { width: 26px; height: 26px; }
.bigt input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
/* camera tile: phone only (a laptop has the file picker; no hiding below 900px) */
@media (min-width: 900px) { .bigt.cam { display: none; } }
.up.pics { margin-top: 14px; }
.up.pics:not(:has(.ph)) { display: none; }
.ph { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ph .im { width: 76px; height: 76px; border-radius: 14px; background: var(--field); position: relative; overflow: hidden; display: grid; place-items: center; color: var(--ink3); }
.ph .im img { width: 100%; height: 100%; object-fit: cover; }
.ph .im .x { position: absolute; top: 4px; inset-inline-start: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.ph .im .x .i { width: 12px; height: 12px; stroke-width: 2.6; }
.ph .in-pill { font-size: 12px; padding: 0 10px; height: 24px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--mint); color: var(--em-t); white-space: nowrap; font-weight: 500; }

.in-cta { position: sticky; bottom: max(14px, env(safe-area-inset-bottom)); margin: 22px 16px 14px; border-radius: 34px; padding: 8px; z-index: 5; }
.in-cta .btn { height: 54px; font-size:16px; width: 100%; }
.in-cta .btn:disabled, .in-top .btn:disabled { opacity: .6; }
.gap { height: 10px; }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat { display: flex; align-items: center; gap: 12px; background: var(--field); border-radius: 20px; padding: 10px 12px; font-size: 14px; font-weight: 500; text-align: start; }
.cat.sel { box-shadow: 0 0 0 2px var(--em); }

.in-cta.saved, .in-top .sv-b { display: flex; }
.in-cta.saved { flex-direction: column; gap: 8px; }
.in-cta .sv-t, .in-top .sv-t { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--em-t); }
.in-cta .sv-t { padding-top: 4px; }
.sv-b { display: flex; gap: 8px; }
.in-cta .sv-b .btn { flex: 1; height: 48px; font-size:14px; }

@media (min-width: 900px) {
  .intake { max-width: 620px; margin: 0 auto; min-height: calc(100dvh - 32px); }
  .isheet { border-radius: 38px 38px 0 0; padding: 20px 32px 70px; box-shadow: var(--shadow); }
  .in-cta { margin: 22px 16px 0; }
}

/* laptop: a normal page inside the 1040px cap (no drag handle, no sheet chrome); the save button sits in the title row */
@media (min-width: 1024px) {
  .intake { max-width: none; margin: 0; min-height: 0; }
  .intake .grab { display: none; }
  .isheet { border-radius: 28px; box-shadow: var(--shadow); padding: 28px 36px 36px; flex: none; }
  .in-head { margin-bottom: 4px; }
  .in-top { display: flex; align-items: center; gap: 16px; }
  .in-top .btn { height: 46px; padding: 0 28px; font-size: 16px; }
  .in-top .sv-b .btn { height: 46px; font-size: 14px; padding: 0 22px; }
  .in-cta, .in-cta.saved { display: none; }
  :is(.intake, .efields) .in-sec { margin-top: 22px; }
  :is(.intake, .efields) .in-sec.first { margin-top: 10px; }
  .in-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; align-items: start; }
}

/* the sticky save bar must not cover the field being typed: a focused input scrolls to above it (bar ~ 54 + 16 + 14 + margin) */
html:has(.intake) { scroll-padding-bottom: 120px; }