/* ================================================================
   UI KIT WORK — kit-work.css
   The three surface-shapers. Pairs with kit-work.js.
   Requires tokens.css + kit-ext.css loaded first (the lifecycle
   palette and .lc-* / .lc-sw live there).
   Components: record shell (.fc) · typed table (.kt) · commit
   sheet (.cs).  Tokens only — no hex, no invented radii,
   durations or shadows. Nothing here animates on an idle loop.
   ================================================================ */

/* ---------- shared plates & marks ----------
   Self-contained copies of the shell's plate/mark vocabulary so the
   components render identically in the gallery (which has no shell.css)
   and in the product. Same geometry, same tokens. */
.kw-plate{display:inline-block;font-family:var(--mono);font-size:var(--fs-mark,10px);font-weight:700;letter-spacing:.08em;color:var(--ink-3);border:1.5px solid var(--hairline);border-radius:4px;padding:2.5px 7px;white-space:nowrap}
.kw-plate.miss{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 55%,transparent)}
.kw-mk{display:inline-block;width:11px;height:11px;border-radius:3px;flex:none;vertical-align:-1px}
.kw-mk.ok{background:var(--lc-use)}
.kw-mk.prov{background:repeating-linear-gradient(45deg,var(--lc-use) 0 2.5px,color-mix(in srgb,var(--lc-use) 22%,var(--surface)) 2.5px 5px);border:1px solid color-mix(in srgb,var(--lc-use) 60%,var(--surface))}
.kw-mk.gap{background:var(--lc-missing-bg);border:1.5px dashed var(--lc-missing)}
/* a state, as a dot and a word -- see the `signal` cell in kit-work.js */
.kw-sig{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kw-sig>i{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-4,#9aa0a6)}
.kw-sig.ok>i{background:var(--lc-use,#1a7f37)}
.kw-sig.warn>i{background:var(--warn,#b26a00)}
.kw-sig.bad>i{background:var(--lc-missing,#c0392b)}
.kw-sig.none>i{background:transparent;border:1.5px solid var(--ink-4,#9aa0a6)}
.kw-lc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--lc-ink);white-space:nowrap}
.kw-lnk{cursor:pointer;border-bottom:1px dotted transparent;transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.kw-lnk:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}

/* ================================================================
   1 · RECORD SHELL  (.fc) — verdict first, faces beneath
   ================================================================ */
/* identity is a strip, not a card — one dense line, mono identifiers */
.fc-subject{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 2px 0}
.fc-title{font-size:20px;font-weight:600;letter-spacing:-.02em;font-family:var(--mono)}
/* subject.kind:'name' — a non-mono subject (a person, a desk, a policy) */
.fc.fc-name .fc-title{font-family:var(--sans);letter-spacing:-.022em}
.fc-tag{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.03em}
.fc-sub{font-size:12.5px;color:var(--ink-2)}
.fc-marks{display:inline-flex;gap:6px;align-items:center}
.fc-mark{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--hairline);border-radius:99px;padding:1.5px 9px;white-space:nowrap;background:var(--surface);transition:border-color var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.fc-mark:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--hairline));transform:translateY(-1px)}
.fc-mark.hold{color:var(--lc-hold-ink);border-color:color-mix(in srgb,var(--lc-hold) 40%,var(--hairline))}
.fc-mark.miss{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 45%,var(--hairline))}
.fc-mark.warn{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 45%,var(--hairline))}

/* the verdict — the answer, stated in the first screenful, with the mark
   that proves it drawn beside it. Chrome per tone, prose from the caller. */
.fc-verdict{--fv-c:var(--ink-3);--fv-ink:var(--ink-2);position:relative;margin-top:12px;padding:13px 16px 12px;border:1px solid var(--hairline);border-left:3px solid var(--fv-c);border-radius:10px;background:color-mix(in srgb,var(--fv-c) 4%,var(--surface));transition:border-color var(--t-med) ease,background .35s ease}
.fc-verdict[data-tone="ok"]{--fv-c:var(--s-good);--fv-ink:var(--s-good-ink)}
.fc-verdict[data-tone="warn"]{--fv-c:var(--warn);--fv-ink:var(--warn-ink)}
.fc-verdict[data-tone="bad"]{--fv-c:var(--lc-missing);--fv-ink:var(--lc-missing-ink)}
.fc-verdict[data-tone="unknown"]{border-style:dashed;border-left-style:dashed;background:var(--surface)}
.fc-vline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc-vdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--fv-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--fv-c) 16%,transparent)}
.fc-verdict[data-tone="unknown"] .fc-vdot{background:transparent;border:1.5px dashed var(--ink-3);box-shadow:none}
.fc-vtext{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.fc-vmark{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%}
.fc-vmark:empty{display:none}
.fc-vactions{margin-left:auto;display:flex;gap:7px;align-items:center}
.fc-vdetail{margin-top:5px;padding-left:19px;font-size:12px;color:var(--ink-2);max-width:88ch}
.fc-vdetail:empty{display:none}
/* an `ok` verdict is not drawn — no tint, no rule, no dot, no words. Only
   what it carried survives, on a plain row: the mark and the actions. */
.fc-verdict.quiet{padding:0;border:0;border-radius:0;background:none}
.fc-verdict.quiet .fc-vline{gap:8px}
.fc-verdict.quiet .fc-vactions{margin-left:0}
.fc-verdict.quiet .fc-vactions:empty{display:none}
/* carried nothing, so it takes no room at all */
.fc-verdict.bare{margin:0}

/* the faces rail — a quiet hairline row; count and tone dot only where
   something needs attention. One shared underline that SLIDES
   (.seg-thumb's exact physics), so both selection controls move alike. */
.fc-rail{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--hairline);margin-top:16px;overflow-x:auto;scrollbar-width:none}
.fc-rail::-webkit-scrollbar{display:none}
.fc-thumb{position:absolute;bottom:0;left:0;height:2px;width:60px;background:var(--ink);border-radius:2px 2px 0 0;transition:transform var(--t-med) var(--ease-spring),width var(--t-med) var(--ease-spring)}
.fc-thumb.still{transition:none}
.fc-face{display:inline-flex;align-items:center;gap:7px;padding:9px 12px 10px;font-size:12.5px;font-weight:550;color:var(--ink-3);white-space:nowrap;border-radius:7px 7px 0 0;cursor:pointer;transition:color var(--t-fast) ease,background var(--t-fast) ease}
.fc-face:hover{color:var(--ink-2);background:var(--surface-2)}
.fc-face.on{color:var(--ink);font-weight:600}
.fc-face .fc-n{font-size:10.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:99px;padding:0 7px;line-height:16px;transition:color var(--t-fast) ease,background var(--t-fast) ease}
.fc-face.on .fc-n{color:var(--ink-2);background:var(--surface);border-color:var(--hairline)}
/* a failed count is a dash, never a zero — with the warn dot naming it */
.fc-face .fc-n.fail{color:var(--warn-ink);background:transparent;border-style:dashed}
.fc-face .fc-dot{width:6px;height:6px;border-radius:50%;flex:none}
.fc-face .fc-dot.warn{background:var(--warn)}
.fc-face .fc-dot.bad{background:var(--lc-missing)}
.fc-face .fc-dot.ok{background:var(--s-good)}
/* sequencing without a wizard: done · current · locked, all routable */
.fc-face .fc-done{flex:none;color:var(--s-good-ink)}
.fc-face.current .fc-cur{width:6px;height:6px;border-radius:50%;flex:none;background:var(--accent)}
.fc-face.locked{color:var(--ink-3)}
.fc-face.locked .fc-lk{flex:none;opacity:.6;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.fc-face.locked:hover .fc-lk{opacity:.95;transform:translateY(-1px)}

.fc-panel{padding-top:16px}
@keyframes fc-in{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
.fc-panel.fc-swap>*{animation:fc-in var(--t-med) var(--ease-out) both}
/* a locked face, opened — it explains itself and routes to what unlocks it */
.fc-locked{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px;color:var(--ink-3)}
.fc-locked .fc-lock-ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1.5px dashed var(--hairline);display:grid;place-items:center;margin-bottom:12px;color:var(--ink-3);transition:transform var(--t-med) var(--ease-spring)}
.fc-locked:hover .fc-lock-ic{transform:translateY(-2px)}
.fc-locked b{color:var(--ink-2);font-size:13px;font-weight:600}
.fc-locked p{font-size:12px;margin-top:3px;max-width:340px;line-height:1.55}

/* ================================================================
   2 · TYPED TABLE  (.kt)
   ================================================================ */
.kt{position:relative}
/* overflow-x:auto would trap position:sticky inside the wrapper — so the
   scroll container is engaged (by JS) only when the table actually
   overflows; a fitting table keeps its header stuck to the topbar */
.kt-wrap{overflow-x:visible}
.kt-wrap.scroll{overflow-x:auto}
.kt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kt-tbl th{text-align:left;font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.kt-tbl.kt-sticky th{position:sticky;top:var(--topbar-h,54px);z-index:6;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* ⚠ That offset is for a PAGE: it parks the header just below the app topbar so
   rows scroll under it. A drawer has no topbar — it carries its own header and
   its body is the scroll container — so the same offset pushes the header DOWN
   onto the first rows instead. The header is deliberately opaque, so it does not
   look misplaced, it looks like the rows are missing: a one-row drilldown showed
   a header, a sliver of its only row, and "Showing 1-1 of 1" under it.
   Inside an overlay the header sticks to the top of that overlay. */
#drawer .kt-tbl.kt-sticky th,
.sheet .kt-tbl.kt-sticky th,
.drawer .kt-tbl.kt-sticky th{top:0}
/* ⚠ …AND THE HORIZONTAL SCROLLER THEN SWALLOWS IT.
   `.kt-wrap.scroll` sets overflow-x:auto, and CSS computes the other axis from
   `visible` to `auto` the moment one axis is not visible — so the WRAP, not the
   overlay body, becomes the scrollport the sticky header measures itself
   against. The wrap is exactly as tall as its own content, so `top:0` can never
   engage: scroll a wide drilldown and the header does not sit in the wrong
   place, it leaves altogether, which is the worse of the two failures.
   Inside an overlay the scrolling table therefore owns a height, so the header
   sticks to the top of the table it belongs to and the pager stays in view
   under it. Only the wide case is touched — a table that fits keeps no
   scroll container at all and keeps the rule above. */
#drawer .kt-wrap.scroll,
.sheet .kt-wrap.scroll,
.drawer .kt-wrap.scroll{max-height:calc(100vh - 230px)}
.kt-tbl th.sortable{cursor:pointer;user-select:none;transition:color var(--t-fast) ease}
.kt-tbl th.sortable:hover{color:var(--ink)}
.kt-tbl th .sa{display:inline-block;vertical-align:-1px;margin-left:4px;opacity:0;transform:translateY(2px);transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.kt-tbl th.sorted .sa,.kt-tbl th.sortable:hover .sa{opacity:1;transform:none}
.kt-tbl th.sorted{color:var(--ink)}
.kt-hwarn{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-left:5px;vertical-align:1px}
.kt-tbl td{padding:8px 10px;border-bottom:1px solid var(--hairline-2);vertical-align:middle}
.kt-tbl tbody tr{transition:background var(--t-fast) ease,opacity var(--t-fast) ease;will-change:transform}
.kt-tbl tbody tr:hover{background:var(--surface-2)}
.kt-tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.kt-tbl tbody:hover tr:not(:hover):not(.kt-group){opacity:.6}
.kt-tbl tbody tr.click{cursor:pointer}
.kt-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
/* typed cells */
.kt-mono{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.kt-tx b{font-weight:550;font-size:12.5px;display:block}
.kt-tx small,.kt-cell small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.kt-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-age{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.kt-age.capped{color:var(--ink-2);font-weight:550}
.kt-fail{color:var(--ink-3)}
.kt-none{color:var(--ink-3)}
/* new-to-page rows after a re-sort settle in; moved rows FLIP (JS-driven) */
@keyframes kt-in{0%{opacity:0}100%{opacity:1}}
.kt-tbl tbody tr.kt-new{animation:kt-in var(--t-med) ease both}
/* group header: shared context said once */
.kt-tbl tr.kt-group td{padding:12px 10px 6px;border-bottom:1px solid var(--hairline);background:transparent;font-size:10.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.kt-tbl tr.kt-group td b{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600;margin-left:7px;text-transform:none;letter-spacing:0}
.kt-tbl tr.kt-group:hover td{box-shadow:none}
/* totals: an earned footer, not another row */
.kt-tbl tfoot td{padding:9px 10px;border-top:1px solid var(--hairline);border-bottom:0;font-weight:650;font-variant-numeric:tabular-nums;font-size:12.5px}
.kt-tbl tfoot td:first-child{font-size:10.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
/* selection: the check draws itself (same anatomy as the register's) */
.kt-ck{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--hairline);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color var(--t-fast) ease,background var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.kt-ck:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));transform:scale(1.1)}
.kt-ck:active{transform:scale(.92)}
.kt-ck svg{opacity:0}
.kt-ck.on{background:var(--accent);border-color:var(--accent)}
.kt-ck.on svg{opacity:1}
@keyframes kw-tick{to{stroke-dashoffset:0}}
.kt-ck.on svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:kw-tick .25s var(--ease-out) forwards}
.kt-ck.part{background:var(--accent);border-color:var(--accent)}
.kt-ck.part::after{content:"";width:8px;height:2px;border-radius:2px;background:var(--surface)}
/* ⚠ A SELECTED ROW WAS FAINTER THAN A HOVERED ONE, WHICH IS BACKWARDS.
   This was one rule: a background of --accent-bg, which is the accent at 8%
   opacity. Two lines above it, tr:hover paints --surface-2 AND a 2px accent
   left edge. So resting the mouse on a row gave a reader more signal than
   actually selecting it did, and the customer's reviewer could not tell which
   row he had picked while the bulk-action bar sat open underneath.
   A selected row now carries the two marks this product already uses for
   selected everywhere else -- see .mt-row.on, the match sheet's picked row:
   a real background and a left edge. It outranks hover in both directions,
   so the state holds while the pointer moves and while the bar is open. */
.kt-tbl tbody tr.selrow td{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.kt-tbl tbody tr.selrow td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.kt-tbl tbody tr.selrow:hover td{background:color-mix(in srgb,var(--accent) 19%,var(--surface))}
.kt-tbl tbody tr.selrow:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* pager — THE paging strategy, with first/last one click away */
.kt-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--hairline);font-size:12px;color:var(--ink-3)}
.kt-foot b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.kt-foot .pgs{margin-left:auto;display:flex;align-items:center;gap:3px}
.kt-pg{min-width:26px;height:26px;padding:0 7px;border-radius:7px;display:grid;place-items:center;font-size:11.5px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;border:1px solid transparent;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.kt-pg:hover{background:var(--surface-2);color:var(--ink)}
.kt-pg:active{transform:scale(.92)}
.kt-pg.on{background:var(--surface);border-color:var(--hairline);color:var(--ink);font-weight:650;box-shadow:0 1px 2px rgba(var(--shadow-c),.05)}
.kt-pg.dis{opacity:.35;pointer-events:none}
.kt-pg.end{font-weight:650}

@media (max-width:720px){
  .kt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kt-tbl{min-width:max-content}
  .kt-foot{align-items:flex-start;flex-direction:column;padding:10px 8px}
  .kt-foot .pgs{margin-left:0;max-width:100%;overflow-x:auto;padding:2px 0}
  .kt-pg{min-width:34px;height:34px}
}
.kt-gap{color:var(--ink-3);padding:0 2px}
.kt-empty:empty{display:none}

/* ================================================================
   3 · COMMIT SHEET  (.cs) — the only centred overlay in the product
   ================================================================ */
.cs-veil{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 34%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--t-fast) ease;z-index:120}
.cs-veil.on{opacity:1}
.cs{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%) scale(.97);width:560px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 24px 70px -12px rgba(var(--shadow-c),.35);z-index:121;opacity:0;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.cs.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes cs-shake{0%,100%{transform:translate(-50%,-50%)}22%{transform:translate(calc(-50% - 5px),-50%)}55%{transform:translate(calc(-50% + 4px),-50%)}80%{transform:translate(calc(-50% - 2px),-50%)}}
.cs.err-hit{animation:cs-shake .38s var(--ease-out)}
.cs-head{display:flex;align-items:center;gap:10px;padding:15px 18px 12px;border-bottom:1px solid var(--hairline)}
.cs-title{font-size:14.5px;font-weight:600;letter-spacing:-.008em}
.cs-x{margin-left:auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;transition:background var(--t-fast) ease,color var(--t-fast) ease}
.cs-x:hover{background:var(--surface-2);color:var(--ink)}
.cs-subject{display:flex;align-items:baseline;gap:9px;padding:11px 18px 0;flex-wrap:wrap}
.cs-subject .kw-tag{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink-2);border:1px solid var(--hairline);border-radius:5px;padding:2px 7px;background:var(--surface-2)}
.cs-subject span:not(.kw-tag){font-size:12.5px;color:var(--ink-2);line-height:1.55}
.cs-body{flex:1;overflow-y:auto;padding:6px 18px 4px}
/* the consequence ledger — computed from the estate, and it ARRIVES:
   rows settle in once on open, then hold still */
.cs-ledger{margin-top:8px}
.cs-lrow{display:flex;align-items:baseline;gap:12px;padding:7.5px 2px;border-bottom:1px solid var(--hairline-2)}
.cs-ledger .cs-lrow:last-child{border-bottom:0}
@keyframes cs-settle{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
.cs-lrow{animation:cs-settle var(--t-med) var(--ease-out) both}
.cs-ll{font-size:12.5px;color:var(--ink-2)}
/* ⚠ `white-space:nowrap` was right for what this is FOR — a short value, a
   count, a sum, kept on one line against its label. It is silent damage for
   what actually gets passed: two separate builders wrote a sentence into a
   ledger value, and it ran off the edge of the sheet with no ellipsis, no
   wrap and no error. A commit sheet is the last thing a person reads before
   an irreversible act; a clipped word there is the worst place in the product
   to lose text.
   A value that is short still sits on one line, because it has nothing to
   wrap. One that is a sentence now wraps and stays readable, right-aligned
   with its label, rather than disappearing past the edge. */
.cs-lv{margin-left:auto;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;max-width:62ch;overflow-wrap:anywhere}
.cs-lrow.bad .cs-lv{color:var(--lc-missing-ink)}
.cs-lrow.warn .cs-lv{color:var(--warn-ink)}
.cs-lrow.ok .cs-lv{color:var(--s-good-ink)}
/* extra evidence area (tag lists, prose) — the tail stays reachable INSIDE the sheet */
.cs-detail{margin-top:12px}
.cs-detail-h{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:4px 0 7px}
/* ⚠ This capped EVERY commit-sheet detail body at 168px and scrolled the rest.
   Right for what it was written for — a 43-tag evidence list you skim — and
   wrong for the other thing that lands here, a form. On the policies sheet it
   hid the cadence, the recipient, the mode and the impact line behind a scroll
   nobody discovers, which are exactly the controls its refusals are about. A
   reader skims evidence; a reader must SEE a control before they can be
   refused for not setting it.
   So the cap now applies only to a detail body that is a list of things, and a
   body containing form controls is never clipped. */
.cs-detail-b{max-height:168px;overflow-y:auto;scrollbar-width:thin;border:1px solid var(--hairline-2);border-radius:9px;padding:10px 11px;background:var(--surface-2)}
.cs-detail-b:has(input,select,textarea,.fld,[role="radiogroup"],.pu-chips){max-height:none;overflow:visible}

/* ---- matching a reporting machine to a register row ----
   Lives inside a commit sheet's detail area. The list scrolls on its own rather
   than growing the sheet, so the two evidence fields underneath stay reachable
   without hunting for them — a picker that pushes its own confirm off-screen is
   how people end up committing the first row they see. */
.mt-pick{display:flex;flex-direction:column;gap:9px}
.mt-list{max-height:196px;overflow-y:auto;scrollbar-width:thin;border:1px solid var(--hairline-2);border-radius:9px;background:var(--surface)}
.mt-row{display:flex;align-items:center;gap:11px;padding:9px 12px;cursor:pointer;transition:background var(--t-fast) ease}
.mt-row+.mt-row{border-top:1px solid var(--hairline-2)}
.mt-row:hover{background:var(--surface-2)}
.mt-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mt-row.on{background:var(--accent-bg);box-shadow:inset 2px 0 0 var(--accent)}
.mt-r-m{flex:1;min-width:0}
.mt-r-n{font-size:13px;font-weight:620}
.mt-r-s{font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-r-v{flex:none;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mt-none{padding:14px 12px;font-size:12.5px;color:var(--ink-3)}
.mt-picked{font-size:12.5px;line-height:1.6;color:var(--ink-2);min-height:1.2em}
.mt-picked b{color:var(--ink);font-weight:640}
.cs-tags{display:flex;gap:6px;flex-wrap:wrap}
/* what the policy demands before commit is possible */
.cs-req{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.cs-req-h{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.cs-r{border:1px solid var(--hairline-2);border-radius:9px;padding:10px 12px;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.cs-r:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline))}
.cs-r.met{border-color:color-mix(in srgb,var(--s-good) 32%,var(--hairline))}
.cs-r.nudge{animation:cs-shake .38s var(--ease-out);border-color:color-mix(in srgb,var(--warn) 55%,var(--hairline))}
.cs-r .why{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.cs-r-row{display:flex;align-items:center;gap:10px}
.cs-r-row label{font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.cs-r .inp,.cs-r .sel{margin-top:7px;width:100%}
.cs-r .met-mk{margin-left:auto;flex:none;color:var(--s-good-ink);opacity:0;transform:scale(.6);transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.cs-r.met .met-mk{opacity:1;transform:none}
.cs-attach{display:inline-flex;align-items:center;gap:7px;margin-top:7px;height:30px;padding:0 12px;border:1.5px dashed var(--hairline);border-radius:8px;font-size:12px;font-weight:550;color:var(--ink-2);cursor:pointer;background:var(--surface);transition:border-color var(--t-fast) ease,color var(--t-fast) ease}
.cs-attach:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));color:var(--accent-ink)}
.cs-attach.has{border-style:solid;border-color:color-mix(in srgb,var(--s-good) 40%,var(--hairline));color:var(--s-good-ink)}
/* an error stays open and keeps the typed values */
.cs-err{display:none;margin-top:12px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--hairline));border-left-width:3px;border-radius:9px;background:color-mix(in srgb,var(--danger) 5%,var(--surface));font-size:12px;color:var(--lc-missing-ink);line-height:1.5}
.cs-err.on{display:block;animation:cs-settle var(--t-med) var(--ease-out)}
/* denied: locked with its owner, never masked */
.cs-denied{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;border:1.5px dashed var(--hairline);border-radius:9px;font-size:12px;color:var(--ink-2);line-height:1.5}
.cs-denied svg{flex:none;color:var(--ink-3)}
/* foot: the safe choice reads first */
.cs-foot{display:flex;align-items:center;gap:8px;row-gap:10px;padding:13px 18px;border-top:1px solid var(--hairline);flex-wrap:wrap}
.cs-foot .btn{white-space:nowrap}
/* the safe choice and the commit travel as one unit when the foot wraps */
.cs-btns{display:flex;gap:8px;align-items:center;margin-left:auto}
.cs-note{font-size:11px;color:var(--ink-3)}
.cs-note.hard{color:var(--warn-ink);font-weight:550}
.cs-foot .sp{flex:1}
.cs-need{font-size:11px;color:var(--ink-3);text-align:right;margin-right:2px;transition:color var(--t-fast) ease}
.cs-need.hot{color:var(--warn-ink);font-weight:550}
.cs-commit.danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.cs-commit.danger:hover{opacity:.88;color:var(--surface);box-shadow:none}
.cs-commit.dis{opacity:.45;cursor:not-allowed}
.cs-commit.dis:hover{box-shadow:none;border-color:var(--danger)}
.cs-commit.busy{pointer-events:none;opacity:.7}

@media (prefers-reduced-motion:reduce){
  .fc-thumb{transition:none}
  .cs-lrow{animation:none}
}

/* ⚠ AN ACTIONS COLUMN. The row's own controls, kept on one line and pinned to
   the right-hand edge of the table so the last column is where a reader looks
   for it. The column is sized to its content: `width:1%` with nowrap is how a
   table is told "take exactly what these buttons need", which leaves every
   remaining pixel to the columns that carry the reading. */
.kt-tbl td.kt-acts{white-space:nowrap;text-align:right;width:1%}
.kt-tbl td.kt-acts .btn{margin-left:6px}
.kt-tbl td.kt-acts .btn:first-child{margin-left:0}
.kt-tbl th.kt-acts-h{width:1%;white-space:nowrap}