/* =====================================================================================
   RJ DTC Admin · Round 2 kit · families/form-controls/family.css
   Prefix: fc-  ·  Values from tokens.css only (cloth/garment fills live in assets/cloth.css).
   Desktop (.kit-d) and phone (.kit-m) are two compositions; no size media queries anywhere.
   ===================================================================================== */

/* ---------- small layout helpers ---------- */
.fc-row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.fc-row.g3{gap:var(--s-3)}
.fc-row.end{justify-content:flex-end}
.fc-stack{display:flex;flex-direction:column;gap:var(--s-4)}
.fc-stack.tight{gap:var(--s-2)}
.fc-sub{font:var(--w-semibold) var(--text-small)/1.3 var(--font-voice);color:hsl(var(--muted-foreground));margin-bottom:var(--s-3)}
.fc-note{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-div{height:1px;background:hsl(var(--border));margin:var(--s-5) 0}
.fc-w-xs{max-width:180px}.fc-w-s{max-width:260px}.fc-w-m{max-width:360px}.fc-w-l{max-width:520px}
.fc-room{min-height:236px}
.fc-room.tall{min-height:330px}
.fc-room.xl{min-height:400px}
.fc-mono{font-family:var(--font-code);font-size:var(--text-code)}
.fc-muted{color:hsl(var(--muted-foreground))}
.fc-grow{flex:1;min-width:0}

/* ---------- buttons: ranking toolbar, icon text, button group ---------- */
.fc-rank{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background))}
.fc-rank .fc-rank-t{margin-right:auto;min-width:0}
.fc-rank .fc-rank-t b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.fc-rank .fc-rank-t span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.fc-bgroup{display:inline-flex}
.fc-bgroup .btn{border-radius:0;margin-left:-1px}
.fc-bgroup .btn:first-child{border-radius:var(--r-control) 0 0 var(--r-control);margin-left:0}
.fc-bgroup .btn:last-child{border-radius:0 var(--r-control) var(--r-control) 0}
.is-focus.icon-btn{outline:2px solid hsl(var(--ring));outline-offset:2px}
.is-hover.icon-btn{background:hsl(var(--muted))}
.is-hover.btn-danger{filter:brightness(.92)}
.is-hover.btn-danger-quiet{background:hsl(var(--destructive)/.07)}
.icon-btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn.danger{color:hsl(var(--destructive))}

/* ---------- field layout ---------- */
.fc-f{min-width:0}
.fc-lrow{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:7px}
.fc-lrow .lbl{margin-bottom:0}
.fc-lrow .r{margin-left:auto;display:flex;align-items:baseline;gap:var(--s-3)}
.fc-req{color:hsl(var(--destructive));margin-left:2px;font-weight:var(--w-semibold)}
.fc-link{font:var(--w-medium) var(--text-small)/1 var(--font-ui);color:hsl(var(--ring));text-decoration:underline;text-decoration-color:hsl(var(--ring)/.35);text-underline-offset:3px;border-radius:var(--r-chip)}
.fc-link:hover{text-decoration-color:hsl(var(--ring))}
.help.err,.fc-err{display:flex;align-items:flex-start;gap:6px}
.help.err svg{margin-top:1px}
.fc-hz{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s-6);padding:var(--s-4) 0;border-top:1px solid hsl(var(--border))}
.fc-hz:first-child{border-top:0;padding-top:0}
.fc-hz .lbl{margin:10px 0 2px}
.fc-hz .fc-hz-h{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .fc-hz{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.kit-m .fc-hz .lbl{margin-top:0}

/* ---------- input (shared .input / .field + family states) ---------- */
.fc-in{transition:border-color var(--motion-hover),box-shadow var(--motion-focus),background-color var(--motion-hover)}

.fc-in.err:focus,.fc-in.err:focus-within,.fc-in.err.is-focus{border-color:hsl(var(--destructive));box-shadow:0 0 0 1px hsl(var(--destructive)),0 0 0 4px hsl(var(--destructive)/.12)}
.fc-in[readonly],.fc-in.ro{background:hsl(var(--muted)/.55);border-color:hsl(var(--border));color:hsl(var(--foreground))}
.fc-in[readonly]:hover,.fc-in.ro:hover{border-color:hsl(var(--border))}
.fc-in[readonly]:focus{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.fc-in input{border:0;outline:0;background:transparent;min-width:0;flex:1;height:100%}
.fc-in input::placeholder,.fc-ta::placeholder{color:hsl(var(--muted-foreground))}
.fc-in input[disabled]{color:inherit}
.fc-in>svg{color:hsl(var(--muted-foreground))}
.fc-in.ro>svg.fc-lock{color:hsl(var(--muted-foreground))}
.fc-aff{display:flex;align-items:center;align-self:stretch;margin:-1px 0 -1px calc(-1 * var(--s-3));padding:0 var(--s-3);color:hsl(var(--muted-foreground));
  background:hsl(var(--muted));border-right:1px solid hsl(var(--input));border-radius:var(--r-control) 0 0 var(--r-control);font-size:var(--text-small);white-space:nowrap}
.fc-aff.r{margin:-1px calc(-1 * var(--s-3)) -1px 0;border-right:0;border-left:1px solid hsl(var(--input));border-radius:0 var(--r-control) var(--r-control) 0}
.fc-aff.code{font-family:var(--font-code);font-size:var(--text-code)}
.fc-in .spin{color:hsl(var(--muted-foreground));width:13px;height:13px}

/* ---------- textarea + counter ---------- */
.fc-ta{display:block;width:100%;min-height:84px;resize:vertical;padding:9px var(--s-3);border:1px solid hsl(var(--input));border-radius:var(--r-control);
  background:hsl(var(--background));font:var(--text-body)/var(--lh-body) var(--font-ui);outline:none}
.fc-ta:focus,.fc-ta.is-focus{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.fc-ta.err{border-color:hsl(var(--destructive))}
.fc-ta[disabled]{background:hsl(var(--muted));color:hsl(var(--muted-foreground));opacity:.8;resize:none}

.fc-count{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}
.fc-count.near{color:hsl(var(--warning))}
.fc-count.over{color:hsl(var(--destructive))}
.fc-meter{height:2px;border-radius:var(--r-pill);background:hsl(var(--border));margin-top:6px;overflow:hidden}
.fc-meter i{display:block;height:100%;background:hsl(var(--muted-foreground)/.55);border-radius:var(--r-pill);transition:width var(--motion-hover),background-color var(--motion-hover)}
.fc-meter.near i{background:hsl(var(--warning))}
.fc-meter.over i{background:hsl(var(--destructive))}
.fc-serp{border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-3) var(--s-4);background:hsl(var(--background))}
.fc-serp small{display:block;font-size:var(--text-small);color:hsl(var(--success))}
.fc-serp b{display:block;font:var(--w-medium) 15px/1.35 var(--font-ui);color:hsl(var(--info));margin:2px 0}
.fc-serp p{font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.45}

/* ---------- select / dropdown (board 3 dropdown, frozen motion from base.css .k-pop) ---------- */
.fc-dd{position:relative;min-width:0}
.fc-trigger{cursor:pointer;text-align:left;width:100%}
.fc-trigger .grow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-trigger .fc-ph{color:hsl(var(--muted-foreground))}
.fc-trigger>svg:last-child{color:hsl(var(--muted-foreground))}
.fc-dd.open>.fc-trigger{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.fc-pop{position:absolute;left:0;right:0;top:calc(100% + var(--s-1));z-index:var(--z-pop);max-height:300px;overflow:auto}  /* surface = shared .menu */
.fc-pop.wide{right:auto;width:340px}
.fc-pop-s{display:flex;align-items:center;gap:var(--s-2);height:36px;margin:calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) var(--s-1);padding:0 var(--s-3);
  border-bottom:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
.fc-pop-s input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:var(--text-body);color:hsl(var(--foreground))}
.fc-pop-s input::placeholder{color:hsl(var(--muted-foreground))}
.fc-pop-g{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));padding:var(--s-3) 10px 6px}
.fc-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 10px;border-radius:var(--r-chip);text-align:left;font-size:var(--text-body);
  color:hsl(var(--popover-foreground));transition:background-color var(--motion-hover)}
.fc-opt:hover,.fc-opt.is-hover{background:hsl(var(--muted))}
.fc-opt.on{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.fc-opt .grow{flex:1;min-width:0;line-height:1.3}
.fc-opt .grow b{font-weight:var(--w-medium)}
.fc-opt small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-opt>svg:last-child{color:hsl(var(--primary));visibility:hidden}
.fc-opt.on>svg:last-child{visibility:visible}
.fc-opt[aria-disabled=true]{color:hsl(var(--muted-foreground));pointer-events:none}
.fc-opt mark{background:hsl(var(--warning)/.16);color:inherit;border-radius:2px}
.fc-pop-f{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin:var(--s-1) calc(-1 * var(--s-1)) calc(-1 * var(--s-1));padding:8px 10px;
  border-top:1px solid hsl(var(--border));font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.fc-pop-empty{padding:var(--s-4) 10px;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
/* status dots on the select */
.fc-stat{width:8px;height:8px;border-radius:50%;flex:none;background:hsl(var(--neutral))}
.fc-stat.draft{background:hsl(var(--draft))}
.fc-stat.available{background:hsl(var(--available))}
.fc-stat.retired{background:hsl(var(--retired))}
.fc-opt.st-draft .grow b{color:hsl(var(--draft))}
.fc-opt.st-available .grow b{color:hsl(var(--available))}
.fc-opt.st-retired .grow b{color:hsl(var(--retired))}

/* ---------- combobox tokens in trigger ---------- */
.fc-sel-n{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);padding:4px 6px;border-radius:var(--r-chip);background:hsl(var(--accent));color:hsl(var(--accent-foreground))}

/* ---------- cloth picker (searchable, paginated, ~3,600 rows) ---------- */
.fc-cp{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background));overflow:hidden}
.fc-cp-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.fc-cp-head h3{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.fc-cp-head .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.fc-cp-tools{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);flex-wrap:wrap;border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.45)}
.fc-cp-tools .field{height:var(--control-h-sm)}
.fc-cp-tools .fc-cp-q{flex:0 1 280px}
.fc-cp-tools .fc-dd{flex:0 0 220px}
.fc-cp-tools .fc-dd.sm{flex:0 0 170px}
.fc-cp-tools .fc-sw-l{margin-left:auto}
.fc-hues{display:flex;gap:6px;align-items:center}
.fc-hue{width:26px;height:26px;border-radius:50%;border:2px solid hsl(var(--background));box-shadow:0 0 0 1px hsl(var(--secondary-border));transition:box-shadow var(--motion-hover)}
.fc-hue:hover{box-shadow:0 0 0 1px hsl(var(--muted-foreground))}
.fc-hue.on{box-shadow:0 0 0 2px hsl(var(--primary))}
.fc-cp-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.fc-cp-tbl{width:100%;font-size:var(--text-body)}
.fc-cp-tbl th{height:var(--row-th);text-align:left;font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));padding:0 var(--s-3);
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--background));position:sticky;top:0;z-index:1}
.fc-cp-tbl td{height:46px;padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border));white-space:nowrap}
.fc-cp-tbl tbody tr{cursor:pointer;transition:background-color var(--motion-hover)}
.fc-cp-tbl tbody tr:hover{background:hsl(var(--muted)/.7)}
.fc-cp-tbl tbody tr[aria-selected=true]{background:hsl(var(--accent))}
.fc-cp-tbl tbody tr[aria-selected=true] td:first-child{box-shadow:var(--e-rail)}
.fc-cp-tbl tbody tr.oos{color:hsl(var(--muted-foreground))}
.fc-cp-tbl td.num{text-align:right}
.fc-cp-tbl .fc-ok{color:hsl(var(--primary));visibility:hidden}
.fc-cp-tbl tr[aria-selected=true] .fc-ok{visibility:visible}
.fc-cp-scroll{overflow:auto}
.fc-sw8{display:block;width:28px;height:28px;border-radius:var(--r-media);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.1);flex:none}
.fc-sw8.lg{width:44px;height:44px}
.fc-sw8.xl{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-card)}
.fc-cp-foot{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-cp-foot .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.fc-cp-side{border-left:1px solid hsl(var(--border));padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);background:hsl(var(--background))}
.fc-cp-side h4{font:var(--w-semibold) var(--text-section)/1.25 var(--font-voice);letter-spacing:var(--tr-section)}
.fc-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--s-3);font-size:var(--text-small)}
.fc-dl dt{color:hsl(var(--muted-foreground))}
.fc-dl dd{text-align:right}
.fc-cp-empty{padding:var(--s-10) var(--s-6);text-align:center;color:hsl(var(--muted-foreground))}
.fc-cp-empty b{display:block;color:hsl(var(--foreground));font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);margin-bottom:4px}
.fc-skel{display:block;height:10px;border-radius:var(--r-chip);background:hsl(var(--foreground)/.07)}
.fc-skel.sq{width:28px;height:28px;border-radius:var(--r-media)}
.fc-mini{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden;background:hsl(var(--background))}
.fc-mini .fc-cp-tbl td{height:40px}
.fc-banner{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);font-size:var(--text-body)}
.fc-banner.danger{background:hsl(var(--destructive)/.07);color:hsl(var(--foreground))}
.fc-banner.danger>svg{color:hsl(var(--destructive));margin-top:2px}
.fc-banner.warning{background:hsl(var(--warning)/.08)}
.fc-banner.warning>svg{color:hsl(var(--warning));margin-top:2px}
.fc-banner b{font-weight:var(--w-semibold)}
.fc-banner .r{margin-left:auto}

/* ---------- checkbox + radio ---------- */
.fc-ck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--text-body);line-height:1.35;min-width:0}
.fc-ck .t{padding-top:1px;min-width:0}
.fc-ck .t small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}

.fc-ck.dis{color:hsl(var(--muted-foreground));cursor:not-allowed}

.fc-ck.lock{cursor:default}
.fc-ck .fc-lockt{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-left:6px}
.fc-group{display:flex;flex-direction:column;gap:var(--s-3)}
.fc-group.h{flex-direction:row;flex-wrap:wrap;gap:var(--s-3) var(--s-6)}
.fc-gl{font:var(--w-semibold) var(--text-label)/1.3 var(--font-voice);margin-bottom:var(--s-3)}
.fc-rcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.fc-rcard{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border:1px solid hsl(var(--input));border-radius:var(--r-card);cursor:pointer;
  transition:border-color var(--motion-hover),background-color var(--motion-hover),box-shadow var(--motion-focus)}
.fc-rcard:hover{border-color:hsl(var(--muted-foreground)/.55)}
.fc-rcard:has(input:checked){border-color:hsl(var(--primary));box-shadow:inset 0 0 0 1px hsl(var(--primary))}
.fc-rcard b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.fc-rcard span.d{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:3px}
.kit-m .fc-rcards{grid-template-columns:minmax(0,1fr)}
.kit-m .fc-ck{min-height:var(--control-h-m);align-items:center}

/* ---------- switch ---------- */

.fc-sw-l{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-body);cursor:pointer}

.fc-combos{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.fc-combo{display:grid;grid-template-columns:minmax(0,1.3fr) 56px minmax(0,1fr) minmax(0,1.5fr);gap:var(--s-4);align-items:center;padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border))}
.fc-combo:first-child{border-top:0}
.fc-combo.hd{background:hsl(var(--muted));padding-top:9px;padding-bottom:9px;font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
.fc-combo b{font-weight:var(--w-medium)}
.fc-combo small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-combo.off{color:hsl(var(--muted-foreground))}
.fc-lv{font-variant-numeric:tabular-nums}
.fc-lv small{display:block}
.kit-m .fc-combo{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-3)}
.kit-m .fc-combo .fc-lv,.kit-m .fc-combo .fc-ov{grid-column:1 / -1}

/* ---------- segmented control ---------- */

/* ---------- date + range ---------- */
.fc-cal{width:288px;padding:var(--s-3)}
.fc-cal.two{width:auto;display:grid;grid-template-columns:150px 264px 264px;gap:var(--s-4);padding:var(--s-3)}
.fc-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-2)}
.fc-cal-h b{font:var(--w-semibold) var(--text-card)/1 var(--font-voice)}
.fc-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;text-align:center;font-variant-numeric:tabular-nums}
.fc-cal-g span{font:var(--w-medium) var(--text-micro)/28px var(--font-ui);color:hsl(var(--muted-foreground))}
.fc-cal-g button{height:34px;font-size:var(--text-body);border-radius:var(--r-control);transition:background-color var(--motion-hover)}
.fc-cal-g button:hover{background:hsl(var(--muted))}
.fc-cal-g button.out{color:hsl(var(--muted-foreground)/.7)}
.fc-cal-g button.today{font-weight:var(--w-semibold);box-shadow:inset 0 0 0 1px hsl(var(--secondary-border))}
.fc-cal-g button.sel,.fc-cal-g button.a,.fc-cal-g button.b{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.fc-cal-g button.in{background:hsl(var(--accent));border-radius:0}
.fc-cal-g button.a{border-radius:var(--r-control) 0 0 var(--r-control)}
.fc-cal-g button.b{border-radius:0 var(--r-control) var(--r-control) 0}
.fc-cal-g button[disabled]{color:hsl(var(--muted-foreground)/.5);text-decoration:line-through;cursor:not-allowed}
.fc-presets{display:flex;flex-direction:column;gap:2px;border-right:1px solid hsl(var(--border));padding-right:var(--s-3)}
.fc-cal-f{display:flex;align-items:center;gap:var(--s-2);border-top:1px solid hsl(var(--border));margin:var(--s-3) calc(-1 * var(--s-3)) calc(-1 * var(--s-3));padding:var(--s-2) var(--s-3)}
.fc-cal-f .r{margin-left:auto;display:flex;gap:var(--s-2)}
.fc-range{display:flex;align-items:center;gap:0}
.fc-range .field{border-radius:0}
.fc-range .field:first-child{border-radius:var(--r-control) 0 0 var(--r-control)}
.fc-range .field:last-child{border-radius:0 var(--r-control) var(--r-control) 0;margin-left:-1px}
.fc-pop.cal{right:auto;padding:0}

/* ---------- money + currency ---------- */
.fc-money{padding:0}
.fc-money .fc-cur{display:flex;align-items:center;gap:6px;align-self:stretch;padding:0 10px 0 var(--s-3);border-right:1px solid hsl(var(--input));
  font:var(--w-semibold) var(--text-small)/1 var(--font-code);color:hsl(var(--foreground));border-radius:var(--r-control) 0 0 var(--r-control);transition:background-color var(--motion-hover)}
.fc-money .fc-cur:hover{background:hsl(var(--muted))}
.fc-money .fc-cur svg{color:hsl(var(--muted-foreground))}
.fc-money .fc-sym{padding-left:var(--s-3);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.fc-money input{text-align:right;padding:0 var(--s-3) 0 4px;font-variant-numeric:tabular-nums;font-size:var(--text-body)}

.fc-money.ro .fc-cur{cursor:default}
.fc-money.ro .fc-cur:hover{background:transparent}
.fc-unv{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--r-chip);font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);
  color:hsl(var(--warning));background:hsl(var(--warning)/var(--status-soft-alpha));white-space:nowrap}
.fc-money.unv{border-color:hsl(var(--warning)/.7)}
.fc-money.unv .fc-cur{color:hsl(var(--warning))}
.fc-confirm{border:1px solid hsl(var(--warning)/.45);background:hsl(var(--warning)/.06);border-radius:var(--r-card);padding:var(--s-4)}
.fc-confirm h4{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.fc-confirm h4 svg{color:hsl(var(--warning))}
.fc-confirm p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin:4px 0 var(--s-3)}
.fc-confirm ul{list-style:none;border-top:1px solid hsl(var(--warning)/.25);margin-bottom:var(--s-3)}
.fc-confirm li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--warning)/.25);font-size:var(--text-body)}
.fc-confirm li .r{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- multi-currency price group ---------- */
.fc-pg{display:flex;flex-direction:column;gap:var(--s-2)}
.fc-pl{display:grid;grid-template-columns:150px minmax(0,1fr) 92px 36px;gap:var(--s-2);align-items:center}
.fc-pl .fc-prim{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--accent-foreground));background:hsl(var(--accent));padding:5px 7px;border-radius:var(--r-chip);justify-self:start}
.fc-pl .fc-conv{font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.fc-pg-h{display:grid;grid-template-columns:150px minmax(0,1fr) 92px 36px;gap:var(--s-2);font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
.kit-m .fc-pl{grid-template-columns:116px minmax(0,1fr) var(--control-h-m)}
.kit-m .fc-pl .fc-prim{grid-column:1 / -1;order:-1}

/* ---------- tag input ---------- */
.fc-tags{height:auto;min-height:var(--control-h);flex-wrap:wrap;padding:5px var(--s-2);gap:6px;cursor:text}
.fc-tags input{flex:1 0 120px;height:28px;padding:0 4px}
.fc-tag{display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 2px 0 var(--s-2);border-radius:var(--r-chip);background:hsl(var(--accent));
  color:hsl(var(--accent-foreground));font:var(--w-medium) var(--text-small)/1 var(--font-ui);white-space:nowrap}
.fc-tag button{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:var(--r-chip);color:hsl(var(--muted-foreground));transition:background-color var(--motion-hover)}
.fc-tag button:hover{background:hsl(var(--primary)/.08);color:hsl(var(--foreground))}
.fc-tags.ro .fc-tag,.fc-tags[aria-disabled=true] .fc-tag{padding-right:var(--s-2)}
.kit-m .fc-tags{min-height:var(--control-h-m)}
.kit-m .fc-tag{height:32px;font-size:13px}
.kit-m .fc-tag button{width:28px;height:28px}

/* ---------- uploaders ---------- */
.fc-drop{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5);border:1.5px dashed hsl(var(--secondary-border));border-radius:var(--r-card);background:hsl(var(--muted)/.35);
  transition:border-color var(--motion-hover),background-color var(--motion-hover)}
.fc-drop .ic{width:40px;height:40px;border-radius:var(--r-control);display:grid;place-items:center;background:hsl(var(--background));border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));flex:none}
.fc-drop b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.fc-drop span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-drop .r{margin-left:auto}
.fc-drop:hover,.fc-drop.over{border-color:hsl(var(--ring));background:hsl(var(--accent)/.6)}
.fc-drop.err{border-color:hsl(var(--destructive))}
.fc-file{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background))}
.fc-file .ic{color:hsl(var(--muted-foreground))}
.fc-file b{display:block;font:var(--w-medium) var(--text-body)/1.3 var(--font-ui)}
.fc-file small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-file .fc-meter{width:160px;margin:0}
.fc-file .fc-meter i{background:hsl(var(--primary))}
.fc-file.err{border-color:hsl(var(--destructive)/.5)}
.fc-file.err small{color:hsl(var(--destructive))}
.fc-file.done .ic{color:hsl(var(--success))}
.fc-ph-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.fc-ph-head .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.fc-cov{display:flex;gap:3px}
.fc-cov i{width:14px;height:4px;border-radius:var(--r-pill);background:hsl(var(--border))}
.fc-cov i.on{background:hsl(var(--success))}
.fc-slots{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--s-3)}
.fc-slot{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.fc-slot .fc-media{position:relative;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;background:var(--studio);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.08);
  transition:box-shadow var(--motion-hover),transform var(--motion-press),opacity var(--motion-hover)}
.fc-slot[draggable=true] .fc-media{cursor:grab}
.fc-slot.dragging .fc-media{opacity:.4}
.fc-slot.target .fc-media{box-shadow:inset 0 0 0 2px hsl(var(--ring))}
.fc-slot.target .fc-empty{border-color:hsl(var(--ring));background:hsl(var(--accent)/.7)}
.fc-gar{position:absolute;inset:12% 14% 8%}
.fc-gar>div{position:absolute;inset:0}
.fc-gar.close{inset:-30% -40% -10%}
.fc-gar.fold>div{-webkit-mask:none;mask:none;border-radius:var(--r-media)}
.fc-grip{position:absolute;top:6px;left:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--r-chip);background:hsl(var(--background)/.9);color:hsl(var(--muted-foreground));
  opacity:0;transition:opacity var(--motion-hover)}
.fc-slot:hover .fc-grip,.fc-slot.is-hover .fc-grip,.kit-m .fc-grip{opacity:1}
.fc-slot .fc-num{position:absolute;top:6px;right:6px;font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);padding:4px 6px;border-radius:var(--r-chip);background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.fc-slot-l{display:flex;align-items:center;gap:4px;font:var(--w-semibold) var(--text-small)/1.2 var(--font-voice)}
.fc-slot-l .alt{margin-left:auto;font:var(--w-medium) var(--text-micro)/1 var(--font-ui)}
.fc-slot-l .alt.ok{color:hsl(var(--success))}
.fc-slot-l .alt.no{color:hsl(var(--warning))}
.fc-empty{aspect-ratio:3/4;border:1.5px dashed hsl(var(--secondary-border));border-radius:var(--r-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.3);transition:border-color var(--motion-hover),background-color var(--motion-hover)}
.fc-empty:hover{border-color:hsl(var(--muted-foreground))}
.fc-empty.up{border-style:solid;border-color:hsl(var(--border));background:hsl(var(--muted)/.6)}
.fc-empty.up .fc-meter{width:70%;margin:0}
.fc-empty.up .fc-meter i{background:hsl(var(--primary))}
.fc-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.6);background:hsl(var(--destructive)/.05);color:hsl(var(--destructive))}
.fc-prow{display:grid;grid-template-columns:48px 150px 220px minmax(0,1fr) auto;gap:var(--s-3);align-items:end;padding:var(--s-3) 0;border-top:1px solid hsl(var(--border))}
.fc-prow .fc-media{width:48px;aspect-ratio:3/4;border-radius:var(--r-media);overflow:hidden;position:relative;background:var(--studio)}
.fc-prow .lbl{font-size:var(--text-small)}
.kit-m .fc-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}

/* ---------- form section layout ---------- */
.fc-form{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-8);padding:var(--s-6) 0;border-top:1px solid hsl(var(--border))}
.fc-form:first-child{border-top:0;padding-top:0}
.fc-form-h h3{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.fc-form-h p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:4px;max-width:30ch}
.fc-form-h .fc-link{display:inline-block;margin-top:var(--s-3)}
.fc-form-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-5)}
.fc-form-b .full{grid-column:1 / -1}
.fc-savebar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-6);border-top:1px solid hsl(var(--border));background:hsl(var(--background)/.94);backdrop-filter:blur(var(--actbar-blur))}
.fc-savebar .fc-dirty{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-savebar .fc-dirty i{width:6px;height:6px;border-radius:50%;background:hsl(var(--warning))}
.fc-savebar .r{margin-left:auto;display:flex;gap:var(--s-2)}
.kit-m .fc-form{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0}
.kit-m .fc-form-b{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.kit-m .fc-savebar{padding:var(--s-3) var(--s-4)}
.kit-m .fc-savebar .r{width:100%}
.kit-m .fc-savebar .r .btn{flex:1}

/* =================================== PHONE-ONLY =================================== */
/* bottom sheet: the phone's select / picker / date. Same tokens as the side sheet, travelling up. */

.fc-bs-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);flex:none}
.fc-bs-h b{font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.fc-bs-h .r{margin-left:auto}
.fc-bs-b{overflow:auto;padding:0 var(--s-2) var(--s-2)}
.fc-bs-f{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid hsl(var(--border));flex:none}
.fc-bs-f .btn{flex:1}
.fc-bs-s{margin:0 var(--s-4) var(--s-2)}
.fc-bopt{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:52px;padding:6px var(--s-3);border-radius:var(--r-control);text-align:left;font-size:15px}
.fc-bopt:active{background:hsl(var(--muted))}
.fc-bopt.on{background:hsl(var(--accent))}
.fc-bopt .grow{flex:1;min-width:0;line-height:1.3}
.fc-bopt small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-bopt>svg:last-child{color:hsl(var(--primary));visibility:hidden}
.fc-bopt.on>svg:last-child{visibility:visible}
.fc-stage{height:600px;border:1px solid hsl(var(--border));border-radius:var(--r-frame);background:hsl(var(--background))}
.fc-stage .fc-scr{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4)}
.fc-mrow{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border))}
.fc-mrow:last-child{border-bottom:0}
.fc-mrow .grow{flex:1;min-width:0}
.fc-mrow .grow b{display:block;font-weight:var(--w-medium);font-size:var(--text-14)}
.fc-mrow .grow small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-mrow>.r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.fc-mlist{border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:0 var(--s-3);background:hsl(var(--background))}
.fc-mcl{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-2) var(--s-1);border-bottom:1px solid hsl(var(--border));width:100%;text-align:left}
.fc-mcl:last-child{border-bottom:0}
.fc-mcl .grow{flex:1;min-width:0}
.fc-mcl .grow b{display:block;font-family:var(--font-code);font-size:13px;font-weight:var(--w-medium)}
.fc-mcl .grow small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-mcl[aria-selected=true]{background:hsl(var(--accent));margin:0 calc(-1 * var(--s-3));padding:var(--s-2) var(--s-4);width:calc(100% + 2 * var(--s-3))}
.fc-mcl .fc-ok{color:hsl(var(--primary));visibility:hidden}
.fc-mcl[aria-selected=true] .fc-ok{visibility:visible}
.fc-mcl.oos{color:hsl(var(--muted-foreground))}
.fc-hscroll{display:flex;gap:var(--s-2);overflow-x:auto;margin:0 calc(-1 * var(--s-4));padding:0 var(--s-4) 2px;scrollbar-width:none}
.fc-hscroll::-webkit-scrollbar{display:none}
.fc-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s-3);border:1px solid hsl(var(--secondary-border));border-radius:var(--r-control);font-size:13px;white-space:nowrap;flex:none;background:hsl(var(--background))}
.fc-pill.on{border-color:hsl(var(--primary)/.5);background:hsl(var(--accent))}
.fc-pill .fc-sw8{width:16px;height:16px;border-radius:50%}
.kit-m .fc-cal{width:auto;padding:0 var(--s-2)}
.kit-m .fc-cal-g button{height:44px;font-size:15px}
.kit-m .fc-pg-h{display:none}
.kit-m .fc-drop{flex-direction:column;align-items:stretch;text-align:center}
.kit-m .fc-drop .ic{margin:0 auto}
.kit-m .fc-drop .r{margin:0}
.kit-m .fc-drop .r .btn{width:100%}
.kit-m .fc-file .fc-meter{width:72px}
.fc-reorder{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.fc-ro-i{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);border-top:1px solid hsl(var(--border));background:hsl(var(--background))}
.fc-ro-i:first-child{border-top:0}
.fc-ro-i .fc-media{width:36px;aspect-ratio:3/4;border-radius:var(--r-media);overflow:hidden;position:relative;background:var(--studio);flex:none}
.fc-ro-i .grow{flex:1;min-width:0}
.fc-ro-i .grow b{display:block;font:var(--w-semibold) var(--text-14)/1.3 var(--font-voice)}
.fc-ro-i .grow small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.fc-ro-i.fc-lifted{box-shadow:var(--e-pop);position:relative;z-index:1;border-radius:var(--r-control)}
.fc-ro-i .icon-btn{color:hsl(var(--muted-foreground));cursor:grab}
.fc-mbtns{display:flex;flex-direction:column;gap:var(--s-2)}
.fc-mbtns .btn{width:100%}

/* page index under the lede */
.fc-toc{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:var(--text-small)}
.fc-toc a{color:hsl(var(--muted-foreground));text-decoration:none;border-bottom:1px solid hsl(var(--border))}
.fc-toc a:hover{color:hsl(var(--foreground));border-bottom-color:hsl(var(--foreground)/.4)}
.fc-pop.cal{max-height:none;overflow:visible}
.fc-money>.fc-lock{margin-right:var(--s-3)}
.fc-gar>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.fc-tags input{flex-basis:56px}

/* phone: 16px text in fields so iOS never zooms on focus */

.kit-m .fc-trigger .grow{font-size:15px}
.kit-m .state>.state-v{min-width:0}
.kit-m .state-v>.field,.kit-m .state-v>.input,.kit-m .state-v>.fc-ta{flex:1;min-width:0}
/* phone section heads stack (base keeps them on one row, which splits short titles) */

.kit-m .spec-body.flush .fc-stage{border:0;border-radius:0;height:580px}

.kit-m .fc-tags{height:auto}
.kit-m .fc-savebar{flex-wrap:wrap}
