/* A5 CRM — components.css  (DESIGN-STRIPE.md §5, §6.11; colours, focus and selection per DESIGN-CALM.md §3; owner G1)
   Overlay primitives (modal, confirm, drawer, toast, menu / popover, command palette, tooltip), form fields (inputs,
   wrappers, select, checkbox, radio, switch, money prefix, segmented field, stage picker, quick chips, combobox),
   tabs and segmented controls, badges and counts, filter pills, the Stripe table, cards and banners, kbd chips,
   avatars, empty states, skeletons, the Processing pill and the timeline.
   Every colour is a token of base.css. Open/close = .is-open / .is-closing (see js/ui.js).
   Reserved CRM class names that never get a global rule here: pill (clients bulk count), sw (reports legend), tl (reports target). */

/* ── overlay root ── */
#overlay{position:fixed;inset:0;pointer-events:none;z-index:50}
#overlay > *{pointer-events:auto}
#overlay > .peek,#overlay > .is-closing{pointer-events:none}
#overlay > .peek > .drawer{pointer-events:auto}
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.is-open > .scrim,.scrim.is-open{opacity:1}
.is-closing > .scrim{opacity:0;transition:opacity var(--dur-2) var(--ease-in)}

/* generic close «×» */
.x{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:background var(--dur-1),color var(--dur-1)}
.x .ic{width:16px;height:16px;stroke-width:2}
.x:hover{background:var(--surface-hover);color:var(--text-strong)}

/* ── modal (§5.17): short dialogs sit at a third of the free height; enter = fade + 8 px rise ── */
.ov-modal{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;padding:0 40px;overflow:auto}
.ov-modal::before{content:"";flex:1 1 0;min-height:24px}
.ov-modal::after{content:"";flex:2 1 0;min-height:24px}
.modal{position:relative;flex:none;width:min(var(--w,448px),100%);max-height:80vh;display:flex;flex-direction:column;border-radius:var(--radius-m);
  background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-3);overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.is-open > .modal{opacity:1;transform:none}
.is-closing > .modal{opacity:0;transform:translateY(4px);transition:opacity var(--dur-2) var(--ease-in),transform var(--dur-2) var(--ease-in)}
.modal-h{position:relative;flex:none;min-height:60px;display:flex;align-items:center;gap:8px;padding:0 56px 0 16px}
.modal-ht{min-width:0;padding:12px 0}
.modal-h h3{margin:0;display:flex;align-items:center;gap:8px;font:var(--t-heading-s);color:var(--text-strong)}
.modal-h h3 .ic{width:16px;height:16px;flex:none;color:var(--icon)} .modal-h h3 .ic.wa{color:var(--wa)}
.modal-sub{margin:0;font:var(--t-body);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-h > .x{position:absolute;top:16px;right:16px;color:var(--icon-strong)}   /* header close only: other .x inside the body (.ndx-clear) stay in flow */
.modal .x:hover{background:var(--surface-hover-raised)}
.modal-b{flex:1 1 auto;min-height:0;padding:4px 16px 16px;overflow:auto;font:var(--t-body)}   /* §5.17 0 16 16; the 4 px top keeps focus rings of the first field inside the scroll box */
.modal-f{flex:none;min-height:60px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--surface-raised);box-shadow:inset 0 1px 0 var(--border)}
/* footer hint: wraps instead of ellipsizing. When chip + label do not fit on one line the label moves under the chip (flex-wrap),
   so a long last word («проигранной» in the 448 px lost dialog) never runs into the buttons */
.modal-note{flex:1 1 0;min-width:0;margin-right:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;white-space:normal;font:var(--t-caption);color:var(--text-3)}
.modal-note .kbd{flex:none;white-space:nowrap}
.modal-note .mn-t{min-width:0;overflow:visible;text-overflow:clip}
.modal-note.warn{font:var(--t-caption-strong);color:var(--danger);white-space:normal}
.modal-acts{margin-left:auto;display:flex;gap:8px;flex:none}
.modal-b:has(.combo-list:not([hidden])){overflow:visible}
.modal:has(.combo-list:not([hidden])){overflow:visible}
/* confirm: no header / footer dividers, padding 16 20 */
.modal.is-confirm .modal-h{min-height:0;padding:16px 20px 0}
.modal.is-confirm .modal-ht{padding:0}
.modal.is-confirm .x{display:none}
.modal.is-confirm .modal-b{padding:4px 20px 0}
.modal.is-confirm .modal-f{min-height:0;padding:20px 20px 16px;box-shadow:none}
.modal.is-confirm .modal-note:empty{display:none}
.confirm-t{margin:0;font:var(--t-body);color:var(--text)}
/* sectioned dialog (long settings / OAuth explainers): pass cls:'sectioned' */
.modal.sectioned .modal-h{padding:0 56px 0 20px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.modal.sectioned .modal-b{padding:20px;background:var(--surface-sunken)}   /* --surface-offset = --surface-raised in dark; hovers inside keep --surface-hover-raised */
.modal.sectioned .modal-f{padding:0 20px;box-shadow:inset 0 1px 0 var(--border-soft)}
.ui-shake{animation:ui-shake 240ms linear}
@keyframes ui-shake{0%,100%{translate:0}20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}}

/* ── drawer (§5.19): right-docked, no radius, 240 ms in / 160 ms out ── */
.ov-drawer{position:fixed;inset:0}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--w,572px),100vw);display:flex;flex-direction:column;
  background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-3);border-radius:0;
  transform:translateX(100%);transition:transform var(--dur-4) var(--ease-out)}
.is-open > .drawer{transform:none}
.is-closing > .drawer{transform:translateX(100%);transition:transform var(--dur-3) var(--ease-in)}
.drawer-h{flex:none;min-height:60px;display:flex;align-items:center;gap:8px;padding:0 20px;box-shadow:inset 0 -1px 0 var(--border)}
.drawer-h h3{margin:0;min-width:0;display:flex;align-items:center;gap:8px;font:var(--t-heading-s);color:var(--text-strong)}
.drawer-h h3 .ic{width:16px;height:16px;flex:none;color:var(--icon)} .drawer-h h3 .ic.wa{color:var(--wa)}
.drawer-h .x{margin-left:auto}
.drawer-h :is(.x,.tsk-dr-nav button,.aip-dnav button){width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong)}
.drawer-h :is(.x,.tsk-dr-nav button,.aip-dnav button) .ic{width:16px;height:16px}
.drawer-h :is(.x,.tsk-dr-nav button,.aip-dnav button):hover{background:var(--surface-hover-raised)}
.drawer-h :is(.tsk-dr-nav,.aip-dnav){display:flex;gap:4px}
.drawer-h :is(.tsk-dr-nav,.aip-dnav) button:disabled{opacity:.5}
.drawer-b{flex:1 1 auto;min-height:0;padding:20px;overflow:auto;font:var(--t-body)}
.drawer-b > *{animation:ui-rise 260ms var(--ease-out) backwards}   /* backwards: no transform left behind, so fixed popovers inside place right */
.drawer-b > :nth-child(2){animation-delay:30ms}.drawer-b > :nth-child(3){animation-delay:60ms}.drawer-b > :nth-child(4){animation-delay:90ms}.drawer-b > :nth-child(n+5){animation-delay:120ms}
.drawer-f{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:20px;box-shadow:inset 0 1px 0 var(--border);background:var(--surface-raised)}
.drawer-f.aip-dr-f{justify-content:space-between}
@keyframes ui-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── toasts (§5.22): bottom centre, neutral dark, no life bar ── */
#toasts{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:0;max-width:calc(100vw - 32px);pointer-events:none;transition:transform var(--dur-3) var(--ease-out)}
body.is-dragging #toasts{transform:translate(-50%,-72px)}
body.is-dragging #toasts .toast{pointer-events:none;opacity:.55}
.toast{position:relative;pointer-events:auto;display:flex;align-items:stretch;min-height:44px;max-width:560px;margin-top:8px;padding-left:16px;border-radius:var(--radius-s);
  background:var(--surface-inverse);color:var(--on-inverse);font:var(--t-body);box-shadow:var(--toast-shadow);overflow:hidden;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.toast.is-open{opacity:1;transform:none}
.toast.is-closing{opacity:0;transform:translateY(8px);min-height:0;height:0!important;margin-top:0;transition:opacity 150ms var(--ease-in),transform 150ms var(--ease-in),height 180ms var(--ease-move) 80ms,margin-top 180ms var(--ease-move) 80ms}
.toast-bar{display:none}
.toast-ic{display:flex;align-items:flex-start;padding:14px 8px 0 0}
.toast-ic .ic{width:16px;height:16px;stroke-width:2;color:var(--toast-icon)}
.toast-t{flex:1;min-width:0;align-self:center;padding:12px 16px 12px 0}
.toast-t small{display:block;font:var(--t-body);color:var(--on-inverse-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast .act{display:flex;align-items:center;flex:none;padding:0 16px;min-width:64px;font:var(--t-body-strong);color:var(--on-inverse);white-space:nowrap;box-shadow:inset 1px 0 0 var(--toast-divider);transition:background var(--dur-1)}
.toast .act:hover{background:var(--toast-divider)}
.toast .act:focus-visible{box-shadow:inset 1px 0 0 var(--toast-divider),inset 0 0 0 1px var(--focus-color)}   /* the divider inset above outranks the global :focus-visible ring */
.toast .act .kbd{margin-left:8px;background:var(--toast-kbd-bg);color:var(--on-inverse)}   /* E a11y: --on-inverse-2 on the chip is 3.99 / 4.25 */
.toast .x{align-self:center;width:28px;height:28px;margin:0 8px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--on-inverse-2)}
.toast .x:hover{color:var(--on-inverse);background:var(--toast-divider)}
.toast .x .ic{width:12px;height:12px;stroke-width:2.4}
.toast .act + .x{margin-left:0}

/* ── menus and dropdowns (§5.15): r8, no border, large shadow, 28 px rows ── */
.menu{position:fixed;z-index:55;min-width:160px;max-width:340px;padding:8px 0;border:0;border-radius:var(--radius-m);
  background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-3);font:var(--t-body);
  opacity:0;transform:translateY(-4px);transform-origin:top left;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.menu.is-open{opacity:1;transform:none}
.menu.is-closing{opacity:0;transform:translateY(-2px);transition:opacity 90ms var(--ease-in),transform 90ms var(--ease-in)}
.menu.sub{transform:translateX(-4px)}
.menu.sub.is-open{transform:none}
.mi{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:4px 12px;font:var(--t-body);color:var(--text);text-align:left;transition:background var(--dur-1)}
.mi .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2}
.mi:hover,.mi.act,.mi:focus-visible,.mi:focus,.mi[aria-expanded="true"]{background:var(--surface-hover-raised);box-shadow:none;outline:0}
.mi .ml{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi small{display:block;font:var(--t-caption);color:var(--text-3);overflow:hidden;text-overflow:ellipsis}
.mi .mr{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px}
.mi .chev{width:12px;height:12px;margin-left:auto;color:var(--text-3)}
.mi .hint{margin-left:auto;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}   /* counts and meta: sans 400 (§5.11); mono stays only inside .kbd */
.mi .kbd + .kbd{margin-left:-5px}
.mi.on{color:var(--text-strong);font-weight:inherit} .mi .on-mark{display:grid;color:var(--accent-text)}   /* neutral text, the blue tick marks it (DESIGN-CALM §3.12) */
.mi .on-mark .ic{width:12px;height:12px;color:var(--accent-text);stroke-width:2.4}
.mi.danger,.mi.danger .ic{color:var(--danger)}
.mi[disabled],.mi[disabled] > .ic{color:var(--text-disabled);cursor:default}
.mi[disabled]:hover{background:none}
.mi > .av{width:20px;height:20px;font-size:9px}
.mi:is(:hover,.act,:focus-visible,:focus) .cb:not(.on){box-shadow:0 0 0 1px var(--control-border-hover),var(--shadow-control)}   /* keeps ≥ 3:1 on the highlighted row in dark */
.menu .sep{height:1px;margin:4px 0;background:var(--border-soft)}
.menu .mh{padding:8px 12px 4px;font:var(--t-caption-strong);color:var(--text-2)}
.menu .mh:first-child{padding-top:4px}
.menu-s{display:flex;align-items:center;gap:8px;height:32px;margin:-4px 0 4px;padding:4px 12px 8px;box-shadow:inset 0 -1px 0 var(--border-soft);color:var(--text-3)}
.menu-s .ic{width:12px;height:12px;stroke-width:2.4}
.menu-s input{flex:1;min-width:0;height:20px;padding:0;border:0;outline:0;background:transparent;font:var(--t-body);color:var(--text)}
.menu-l{max-height:min(360px,60vh);overflow:auto}
.menu-empty{padding:8px 12px;font:var(--t-body);color:var(--text-3)}
/* two-line settings picker items */
.sg-pop .mi.sg-pi{min-height:44px;padding:6px 12px;align-items:flex-start}
.sg-pop .mi.sg-pi b{display:block;font:var(--t-body-strong);color:var(--text-strong)}
.sg-pop .mi.sg-pi small{font:var(--t-caption);color:var(--text-3)}
/* «…» action menus: neutral rows (--text / --icon), red danger, grey disabled (DESIGN-CALM §3.12) */
.menu.menu-actions .mi.danger,.menu.menu-actions .mi.danger .ic{color:var(--danger)}
.menu.menu-actions .mi[disabled],.menu.menu-actions .mi[disabled] .ic{color:var(--text-disabled)}
/* «+» create menu: neutral 600 items, 12 px icons */
.menu.menu-create .mi{font-weight:600;color:var(--text-strong)}
.menu.menu-create .mi .ic{color:var(--icon);width:12px;height:12px;stroke-width:2.4}
.menu.menu-create .mi small{font-weight:400}
/* account switcher (§4.2): taller rows, grey current-account head */
.menu.menu-acct{padding:0 0 8px}
.menu-acct .mi{min-height:44px;padding:0 24px}
.menu-acct .mi.theme-it{min-height:28px;padding:4px 24px}
.menu-acct .sep{margin:0 20px;background:var(--border-soft)}
.menu-acct .mh{padding:12px 24px 4px}
.menu-acct .mh:first-child{height:32px;margin:6px 0 4px;padding:0 20px;display:flex;align-items:center;background:var(--surface-hover-raised);color:var(--text-strong);font:var(--t-body-strong)}
/* filter popovers (§5.16): 260 wide, 32 px check rows in the list blue */
.menu.fpop{min-width:260px}
/* UI.popover: the menu box around the caller's own panel (no width cap, no padding: the panel lays itself out) */
.menu.pop{max-width:calc(100vw - 16px);padding:0;overflow:hidden}
.menu.pop:focus{outline:0}
.menu.fpop .mi{min-height:32px}
.menu.fpop .mh{padding:4px 12px 8px;font:var(--t-body-strong);color:var(--text-strong)}
/* hint popover (rich explanation) */
.popover{max-width:312px;padding:12px 16px;border-radius:var(--radius-m);background:var(--surface-raised);color:var(--text);font:var(--t-small);box-shadow:var(--shadow-3)}
.popover b{font-weight:600;color:var(--text-strong)}

/* ── command palette = Stripe search dropdown (§5.20): anchored to the top-bar search field. Insets as search-results.jpg
   (owner OK over the §5.20 values): rows, headers, tabs, empty line and footer 20 px from the panel sides, highlight 12 px ── */
.ov-cmdk{position:fixed;inset:0}
.ov-cmdk > .scrim{background:transparent}
.cmdk-in{position:fixed;z-index:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--radius-s);background:var(--surface-offset);color:var(--text-3)}
.cmdk-in > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.cmdk-in input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;font:var(--t-body);color:var(--text)}
.cmdk-in input::placeholder{color:var(--text-3)}   /* = the top-bar .search text it opens over (5.29 on --surface-offset; --text-4 was 3.18) */
.cmdk-in .kbd{display:none}
.cmdk-panel{position:fixed;z-index:1;display:flex;flex-direction:column;max-height:min(600px,74vh);border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-3);overflow:hidden;
  opacity:0;transform:translateY(-4px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.is-open > .cmdk-panel{opacity:1;transform:none}
.is-closing > .cmdk-panel{opacity:0;transition:opacity 90ms var(--ease-in)}
.cmdk-tabs{flex:none;display:flex;gap:6px;padding:8px 20px;overflow-x:auto;scrollbar-width:none}
.cmdk-tabs::-webkit-scrollbar{display:none}
.cmdk-tab{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;flex:none;border-radius:var(--radius-pill);border:1px dashed var(--border);background:transparent;font:var(--t-caption-strong);color:var(--text-2);white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.cmdk-tab:hover{border-style:solid;background:var(--surface-hover-raised)}
.cmdk-tab.on{border-style:solid;background:var(--surface-hover-raised);color:var(--text-strong)}
.cmdk-tab .n{font-weight:400;color:var(--text-3)}
.cmdk-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:0 0 8px;overscroll-behavior:contain}
.cmdk-hl{position:absolute;left:12px;right:12px;top:0;height:32px;z-index:0;border-radius:var(--radius-s);background:var(--surface-hover-raised);pointer-events:none;opacity:0;transition:transform 80ms var(--ease-out),height 80ms var(--ease-out),opacity 80ms linear}
.cmdk-hl.no-anim{transition:none}
.cmdk-g.lbl,.cmdk-g{position:relative;z-index:1;padding:12px 20px 4px;font:500 12px/16px var(--font-sans);color:var(--text-3);text-transform:uppercase;letter-spacing:.02em}
/* full-width rules between groups and under «Показать все…» (Stripe search-results.jpg; the spec is silent) */
.cmdk-g:not(.cmdk-hl + .cmdk-g){box-shadow:inset 0 1px 0 var(--border-soft)}
.cmdk-it{position:relative;z-index:1;display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 20px;text-align:left;font:var(--t-body);color:var(--text-strong)}
.cmdk-ic{display:grid;place-items:center;width:16px;height:16px;flex:none;color:var(--icon)}
.cmdk-ic .ic{width:16px;height:16px;stroke-width:2}
.cmdk-ic .ic.wa{color:var(--wa)}
.cmdk-it .tt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.cmdk-it .tt b{flex:0 1 auto;min-width:0;max-width:70%;font-weight:400;color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cmdk-it .tt small{flex:1 1 0;min-width:0;font:var(--t-body);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cmdk-m{flex:none;font:var(--t-caption);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmdk-m.wait{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption-strong);color:var(--text-2)}   /* status mark (DESIGN-CALM §3.7), as the inbox / clients «waiting» */
.cmdk-m.wait .ic{width:12px;height:12px;flex:none;stroke-width:2.4;color:var(--warning)}
.cmdk-m.over{color:var(--danger)}
.cmdk-it.danger b,.cmdk-it.danger .cmdk-ic{color:var(--danger)}
.cmdk-it .go{width:12px;height:12px;flex:none;color:var(--text-3);opacity:0;transition:opacity var(--dur-1)}
.cmdk-it.act .go{opacity:1}
.cmdk-it.all b{max-width:none;color:var(--text)} .cmdk-it.all b strong{font-weight:600;color:var(--text-strong)}
.cmdk-it mark{background:none;color:var(--text-strong);font-weight:600}   /* the combobox match style: no fill (Attio typed results) */
.cmdk-it:not(.danger) .tt b:has(mark){color:var(--text-2)}   /* as .combo-it b:has(mark), one step lighter so the title stays above the --text-3 sub */
.cmdk-empty{position:relative;z-index:1;padding:16px 20px;font:var(--t-body);color:var(--text-3)}
.cmdk-empty b{font-weight:600;color:var(--text-strong)}
.cmdk-f{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;min-height:32px;padding:4px 20px;background:var(--surface-offset);box-shadow:inset 0 1px 0 var(--border-soft);font:var(--t-caption);color:var(--text-3)}
.cmdk-f span{display:inline-flex;align-items:center;gap:4px}

/* ── tooltip ([data-tip], §5.18): white card, 12/16, no arrow ── */
.tooltip,.ni .tip{z-index:70;max-width:280px;padding:6px 8px;border-radius:var(--radius-s);white-space:nowrap;
  background:var(--surface-raised);color:var(--text);font:var(--t-small);box-shadow:var(--shadow-3)}
.tooltip{position:fixed;display:flex;align-items:center;white-space:normal;pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.tooltip[data-pos="top"]{transform:translateY(2px)}
.tooltip[data-pos="right"]{transform:translateX(-2px)}
.tooltip[data-pos="left"]{transform:translateX(2px)}
.tooltip.is-open{opacity:1;transform:none}
.ni .tip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);align-items:center;gap:0;pointer-events:none;font-weight:400}
.tooltip .kbd,.ni .tip .kbd{margin-left:8px}
.ni .tip::before{display:none}

/* ── form layout (§5.3) ── */
.fields{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;column-gap:16px}
.fields.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* two-column rows share the controls' top edge when one label wraps («Ожидаемое закрытие необязательно»): fields sit on
   the row's bottom line. Grids with help text under a field keep the top alignment (the help line would shift its control). */
.fields.two:not(:has(> .field > .help)){align-items:end}
.fields .span2{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0;align-content:start}
.field > .lbl{display:block;font:var(--t-body-strong);color:var(--text-title)}
.field > .lbl .opt{margin-left:4px;font:var(--t-body);color:var(--text-3)}
.field .help{margin-top:-4px;font:var(--t-body);color:var(--text-3)}
.field .err-t{font:var(--t-body);color:var(--danger)}
.field > :is(input,textarea,select){width:100%}
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-inner-spin-button,.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* 1. standalone controls */
:is(.input, .field > input, .field > textarea, .field > select, select, .tsk-in, .tk-title, .tk-due, .tk-owner, .cp-ed){
  height:var(--control-h);padding:0 8px;border:0;border-radius:var(--radius-s);
  background:var(--surface);color:var(--text);font:var(--t-body);
  box-shadow:0 0 0 1px var(--control-border);outline:0;transition:box-shadow var(--dur-1)}
:is(.input, .field > input, .field > textarea, .field > select, select, .tsk-in, .tk-title, .tk-due, .tk-owner, .cp-ed):hover{box-shadow:0 0 0 1px var(--control-border-hover)}
:is(.input, .field > input, .field > textarea, .field > select, select, .tsk-in, .tk-title, .tk-due, .tk-owner, .cp-ed, .sg-ie):focus{box-shadow:var(--focus-ring)}
::placeholder{color:var(--text-4);opacity:1}

/* 2. wrappers: keyline at rest, ring on focus-within */
:is(.fx,.combo-in,.cl-search,.isearch,.aip-search,.tsk-cbx-in,.cm-rbox,.asst-in,.cp-comp){
  border-radius:var(--radius-s);background:var(--surface);box-shadow:0 0 0 1px var(--control-border);transition:box-shadow var(--dur-1)}
:is(.fx,.combo-in,.cl-search,.isearch,.aip-search,.tsk-cbx-in,.cm-rbox,.cp-comp):hover{box-shadow:0 0 0 1px var(--control-border-hover)}
:is(.fx,.combo-in,.cl-search,.isearch,.aip-search,.tsk-cbx-in,.cm-rbox,.asst-in,.cp-comp):focus-within{box-shadow:var(--focus-ring)}
:is(.fx,.combo-in,.cl-search,.isearch,.aip-search,.tsk-cbx-in,.cm-rbox,.asst-in,.cp-comp) :is(input,textarea){
  border:0;box-shadow:none;background:transparent;height:100%;min-width:0;flex:1;font:var(--t-body);color:var(--text);outline:0}
/* a wrapper sizes its own textarea (composers grow with JS): no standalone min-height or resize handle inside */
:is(.fx,.combo-in,.cl-search,.isearch,.aip-search,.tsk-cbx-in,.cm-rbox,.asst-in,.cp-comp) textarea{min-height:0;resize:none}

/* 3. other borderless inner fields: never a ring of their own */
:is(.cmdk-in,.menu-s,.em-grid) input, .iq-subj{box-shadow:none;background:transparent}
.em-grid input, .iq-subj{height:28px;padding:0 2px;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--border-soft)}
.em-grid input:focus, .iq-subj:focus{box-shadow:inset 0 -1px 0 var(--border-strong)}   /* line fields: no accent underline (DESIGN-CALM §3.8) */

/* 4. states */
.field.err > :is(input,textarea,select), .field.err :is(.fx,.combo-in), [aria-invalid="true"]{box-shadow:0 0 0 1px var(--danger)}
.field.err > :is(input,textarea,select):focus, .field.err :is(.fx,.combo-in):focus-within{box-shadow:0 0 0 1px var(--danger),inset 0 0 0 1px var(--danger)}   /* focused error = 2 px red, no blue */
textarea{height:auto;min-height:64px;padding:4px 8px;line-height:20px;resize:vertical}
:is(.field > textarea, textarea.input){height:auto;min-height:64px;padding:4px 8px;line-height:20px}
:is(.input.lg,.tsk-in.tsk-in-lg){height:40px;padding:0 12px;font:var(--t-lead)}   /* (0,2,0): outranks rule 1 (0,1,1) */

/* select (§5.4). :is(select,.field select) is (0,1,1), as rule 1 above, so this later block wins for every select, in or out of a .field */
:is(select,.field select){appearance:none;-webkit-appearance:none;height:var(--control-h);padding:0 26px 0 8px;border:0;border-radius:var(--radius-s);cursor:pointer;
  background:var(--surface) var(--select-chevron) no-repeat right 8px center/12px 12px;
  color:var(--text-strong);font:var(--t-body-strong);
  box-shadow:0 0 0 1px var(--control-border),var(--shadow-control)}
:is(select,.field select):hover{box-shadow:0 0 0 1px var(--control-border-hover),var(--shadow-control)}
:is(select,.field select):focus{box-shadow:var(--focus-ring),var(--shadow-control)}
select option{background:var(--surface-raised);color:var(--text)}
/* disabled (§5.3 states), after the select block so a disabled select keeps the fill; background-color keeps its chevron */
:is(input,textarea,select):disabled{background-color:var(--surface-disabled);color:var(--text-disabled)}
:is(select,.field select):disabled{cursor:default}

/* money / unit prefix (§5.3) */
.fx{display:flex;align-items:center;gap:6px;height:var(--control-h);min-width:0}
.fx-p{flex:none;padding-left:8px;font:var(--t-body);color:var(--text-3)}
.fx input{padding:0 8px 0 0;font-variant-numeric:tabular-nums}
/* note textarea (UI.newNote) */
.field.note-ta textarea{background:var(--note-bg);box-shadow:0 0 0 1px var(--note-border);color:var(--text)}
.field.note-ta textarea:focus{box-shadow:var(--focus-ring)}

/* segmented field (radio buttons in forms) */
.seg.seg-f{display:flex;width:100%}
.seg.seg-f > button{flex:1;justify-content:center;min-width:0;white-space:nowrap}
/* five or more options in a 496 px dialog (task types): text only, 6 px apart, so every label fits */
.seg.seg-f:has(> button:nth-child(5)){gap:6px}
.seg.seg-f:has(> button:nth-child(5)) > button{padding:0 4px}
.seg.seg-f:has(> button:nth-child(5)) > button .ic{display:none}
.seg .ic.wa{color:var(--wa)}

/* stage picker (§6.11): 7 segments of 4 px coloured by the stage bar rule */
.stg-pick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
.stg-pick button{display:grid;gap:8px;align-content:start;padding:2px 0;text-align:left;min-width:0;font:var(--t-caption-strong);color:var(--text-2);border-radius:var(--radius-xs)}
.stg-pick i{height:4px;border-radius:2px;background:var(--step-future);transition:background var(--dur-3) var(--ease-out)}
.stg-pick span{padding-right:6px;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto;transition:color var(--dur-1)}
.stg-pick button:hover span{color:var(--text-strong)}
.stg-pick button.past i{background:var(--step-done)}
.stg-pick button.on i{background:var(--step-current)}
.stg-pick button.on span{color:var(--text-strong)}
.stg-pick button:focus-visible{box-shadow:var(--focus-ring)}

/* quick chips (due presets) = filter pills */
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.due-row{display:grid;gap:8px}

/* client combobox (new deal, §5.16) */
.combo{position:relative}
.combo-in{display:flex;align-items:center;gap:8px;height:var(--control-h);padding:0 2px 0 8px}
.combo-in > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.field .combo-in input{padding:0}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:300px;overflow:auto;padding:4px 0;border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-3);animation:ui-pop var(--dur-2) var(--ease-out)}
@keyframes ui-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.combo-it{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 12px;text-align:left;color:var(--text)}
.combo-it.act{background:var(--surface-hover-raised)}
.combo-it .tt{min-width:0;flex:1}
.combo-it .tt b{display:block;font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.combo-it .tt small{display:block;font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.combo-it .tt b:has(mark){font-weight:400;color:var(--text-3)}
.combo-it mark,.tsk-cbx-it mark{background:none;color:var(--text-strong);font-weight:600}
.combo-m{flex:none;font:var(--t-caption);color:var(--text-3)}
.combo-add{min-height:32px;margin-top:4px;padding:0 12px;box-shadow:inset 0 1px 0 var(--border-soft)}
.combo-add > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.combo-add .tt{display:flex;align-items:baseline;gap:8px;overflow:hidden}
.combo-add .tt b{flex:none;font:var(--t-body-strong);color:var(--text-strong)}
.combo-add .tt small{flex:1;min-width:0;font:var(--t-caption)}

/* quick compose: quoted last message (§6.11) */
.cmp-q{margin:0 0 16px;padding:8px 12px;border-left:2px solid var(--border);border-radius:var(--radius-s);background:var(--surface-offset);font:var(--t-body);color:var(--text-2)}
.cmp-q .lbl{color:var(--text-3)}
.cmp-q p{margin:4px 0 0;font:var(--t-body);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── checkbox (§5.6): 16 px, radius 4; one blue for every checkbox (DESIGN-CALM §3.11, --check-list = --accent) ── */
.cb,.cl-cb,.asst-cb,.menu .cb,input[type="checkbox"]:not(.switch){appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;flex:none;border:0;border-radius:var(--radius-xs);
  background:var(--surface);box-shadow:0 0 0 1px var(--control-border),var(--shadow-control);display:inline-grid;place-items:center;cursor:pointer;transition:transform var(--dur-1),background var(--dur-1)}
:is(.cb,.cl-cb,.asst-cb,input[type="checkbox"]):hover:not(.on,[aria-checked="true"],:checked,:disabled){box-shadow:0 0 0 1px var(--control-border-hover),var(--shadow-control)}
:is(.cb,.cl-cb,.asst-cb,input[type="checkbox"]):focus-visible{outline:var(--focus-outline);outline-offset:2px}
:is(.cl-cb,.cb,.task .cb):active{transform:scale(.9)}
:is(.cb,.cl-cb,.asst-cb,input[type="checkbox"]):is(.on,[aria-checked="true"],:checked,[aria-checked="mixed"]){background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
:is(.cl-cb, .tbl .cb, .fpop .cb):is(.on,[aria-checked="true"],:checked,[aria-checked="mixed"]){background:var(--check-list);box-shadow:0 0 0 1px var(--check-list)}
:is(.cb,.cl-cb,.asst-cb,input[type="checkbox"]):disabled{background:var(--surface-pressed);box-shadow:0 0 0 1px var(--border-soft)}
.cb .ic,.menu .cb .ic{width:10px;height:10px;stroke-width:2.6;color:var(--on-accent);opacity:0;transform:scale(.6);transition:opacity var(--dur-2) var(--ease-out),transform 160ms var(--ease-spring)}
.cb.on .ic,.cb[aria-checked="true"] .ic{opacity:1;transform:none}
/* native checkbox glyphs: a tick drawn with borders (no image, no colour literal), the indeterminate bar */
input[type="checkbox"]:not(.switch)::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity var(--dur-2) var(--ease-out),transform 160ms var(--ease-spring)}
input[type="checkbox"]:not(.switch):checked::after{opacity:1;transform:rotate(45deg)}
input[type="checkbox"]:not(.switch):indeterminate{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
input[type="checkbox"]:not(.switch):indeterminate::after{width:8px;height:2px;margin:0;border:0;background:var(--on-accent);transform:none;opacity:1}
.aic-ck input{accent-color:auto}

/* ── radio (§5.7) ── */
input[type="radio"]{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;flex:none;border:0;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--control-border);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--dur-1)}
input[type="radio"]:hover:not(:checked){box-shadow:0 0 0 1px var(--control-border-hover)}
input[type="radio"]:focus-visible{outline:var(--focus-outline);outline-offset:2px}
input[type="radio"]:checked{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
input[type="radio"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-accent);transform:scale(0);transition:transform var(--dur-2) var(--ease-out)}
input[type="radio"]:checked::after{transform:none}
/* radio cards */
.rcard{display:grid;gap:2px;padding:12px;border-radius:var(--radius-s);box-shadow:0 0 0 1px var(--border);background:var(--surface);cursor:pointer;text-align:left}
.rcard b{font:var(--t-body-strong);color:var(--text-strong)}
.rcard small{font:var(--t-caption);color:var(--text-3)}
.rcard:hover{box-shadow:0 0 0 1px var(--border-strong)}
/* choice card: the one coloured «selected» (Attio view-type cards): accent tint + 1 px accent, neutral title (DESIGN-CALM §3.5) */
.rcard.on,.rcard[aria-checked="true"]{background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent)}
.rcard.on b,.rcard[aria-checked="true"] b{color:var(--text-strong)}

/* ── switch (§5.8): <button class="switch|sg-sw" role="switch"><i></i></button> ── */
.sg-sw,.switch{position:relative;width:36px;height:20px;flex:none;padding:0;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface-pressed);box-shadow:0 0 0 1px var(--control-border);transition:background var(--dur-3),box-shadow var(--dur-1)}
:is(.sg-sw,.switch) > i{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;
  background:var(--switch-thumb);box-shadow:0 0 0 1px var(--border-strong),var(--shadow-control);transition:transform var(--dur-3) var(--ease-out)}
:is(.sg-sw,.switch):hover{box-shadow:0 0 0 1px var(--control-border-hover)}
:is(.sg-sw,.switch):is(.on,[aria-checked="true"]){background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
:is(.sg-sw,.switch):is(.on,[aria-checked="true"]):hover{background:var(--accent-hover);box-shadow:0 0 0 1px var(--accent-ring-hover)}
:is(.sg-sw,.switch):is(.on,[aria-checked="true"]) > i{transform:translateX(16px);box-shadow:0 0 0 1px var(--accent)}
:is(.sg-sw,.switch):focus-visible{outline:var(--focus-outline);outline-offset:2px}
:is(.sg-sw,.switch):is([disabled],[aria-disabled="true"]){opacity:.5;pointer-events:none}

/* ── underline tabs (§5.9) ── */
.tabs{position:relative;display:flex;gap:24px;box-shadow:inset 0 -1px 0 var(--border)}
.tab{position:relative;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1)}
.tab:hover{color:var(--text-strong)}
.tab.on,.tab[aria-selected="true"]{color:var(--text-strong)}   /* monochrome: no accent in a tab bar (DESIGN-CALM §3.2) */
.tab .n{margin-left:6px;font-weight:400;color:var(--text-3)}
.tab:focus-visible{box-shadow:none;outline:var(--focus-outline);outline-offset:2px;border-radius:var(--radius-xs)}   /* a 2 px gap around label, count and ink */
.tabs.sm .tab{font:var(--t-caption-strong);padding-bottom:4px}
.ink{position:absolute;bottom:0;height:2px;background:var(--tab-ink);border-radius:1px}

/* ── segmented control (§5.9): separate buttons, selected = a pressed grey button (DESIGN-CALM §3.3) ── */
.seg{display:inline-flex;gap:8px}
.seg > button{height:var(--control-h);padding:0 8px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-s);
  background:var(--btn-bg);font:var(--t-body-strong);color:var(--text-2);box-shadow:var(--shadow-control),0 0 0 1px var(--border);white-space:nowrap;transition:box-shadow var(--dur-1),color var(--dur-1),background var(--dur-1)}
.seg > button:hover{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong);color:var(--text-strong)}
.seg > button.on,.seg > button[aria-pressed="true"]{background:var(--surface-pressed);color:var(--text-strong);box-shadow:0 0 0 1px var(--border)}
.seg > button.on:hover,.seg > button[aria-pressed="true"]:hover{box-shadow:0 0 0 1px var(--border-strong)}
.seg > button:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}
.seg > button .ic{width:12px;height:12px;stroke-width:2.4}
.seg > button .n{font-weight:400;color:var(--text-3)}

/* ── badges and status pills (§5.10) ── */
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--radius-xs);white-space:nowrap;vertical-align:middle;
  font:var(--t-caption-strong);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.badge .ic{width:12px;height:12px;stroke-width:2.4}
.badge.success{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.badge.warning{background:var(--badge-warning-bg);color:var(--badge-warning-text);box-shadow:inset 0 0 0 1px var(--badge-warning-border)}
.badge.danger {background:var(--badge-danger-bg); color:var(--badge-danger-text); box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.badge.info   {background:var(--badge-info-bg);   color:var(--badge-info-text);   box-shadow:inset 0 0 0 1px var(--badge-info-border)}
.badge.purple {background:var(--badge-purple-bg); color:var(--badge-purple-text); box-shadow:inset 0 0 0 1px var(--badge-purple-border)}
.badge.urgent {background:var(--badge-urgent-bg); color:var(--badge-urgent-text); box-shadow:inset 0 0 0 1px var(--badge-danger-border)}   /* pastel red, no solid badge */
.badge.danger .ic{color:var(--danger)}
.badge.dashed{background:transparent;box-shadow:none;border:1px dashed var(--border)}   /* «unclear»: 20 px badge with a dashed keyline (the dashed BOX helper is .dash-box) */
.badge.mono{font:var(--t-mono)}                                                          /* model tags: mono 12/16 400 */
.badge.inverse{background:var(--surface-inverse);color:var(--on-inverse);box-shadow:none}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font:var(--t-caption-strong);font-variant-numeric:tabular-nums;background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.count.accent{background:var(--accent-bg-2);color:var(--accent-soft-text);box-shadow:none}   /* attention = soft tint, never a filled accent (DESIGN-CALM §3.6) */
.count.danger{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
/* legacy chips / labels, restyled to the badge looks */
.lab{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--radius-xs);vertical-align:middle;white-space:nowrap;
  font:var(--t-caption-strong);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.lab.hot{background:var(--badge-warning-bg);color:var(--badge-warning-text);box-shadow:inset 0 0 0 1px var(--badge-warning-border)}
.lab.ok{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.lab.dark{background:var(--surface-inverse);color:var(--on-inverse);box-shadow:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot-red);flex:none}   /* decorative: always next to a label */
.dot.ok{background:var(--dot-green)}
.dot.mute{background:var(--dot-neutral)}

/* ── filter pills (§5.11): dashed idle, solid when set ── */
.fpills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fpill,.chip,.qchip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-pill);
  border:1px dashed var(--border);background:transparent;font:var(--t-caption-strong);color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.fpill{padding:0 8px 0 6px}
.fpill .ic,.chip .ic,.qchip .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.fpill:hover,.chip:hover,.qchip:hover{border-style:solid;background:var(--surface-hover)}
.fpill.on,.chip.on,.qchip.on{border-style:solid;background:var(--surface)}
/* a selected choice chip = the pressed grey + dark text (DESIGN-CALM §1.2, as the «seg selected» recipe); .fpill.on is a
   filter with a value, not a selection, and keeps the plain solid edge */
.chip.on,.qchip.on{background:var(--surface-pressed);border-color:var(--border);color:var(--text-strong)}
.chip.on:hover,.qchip.on:hover{border-color:var(--border-strong)}
.fpill .sep{width:1px;height:12px;background:var(--border);margin:0}
.fpill .v{color:var(--text-strong)}
.fpill .n,.chip .n{font-weight:400;color:var(--text-3)}
/* focus = the pill's own edge turns solid accent (one line; a ring outside the dashed edge read as two) */
.fpill:focus-visible,.chip:focus-visible,.qchip:focus-visible{border-style:solid;border-color:var(--focus-color);box-shadow:none}
.fpill.on:has(> button:last-child){padding-right:4px}
.fpill > button{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:var(--icon)}
.fpill > button:hover{background:var(--surface-hover)}
.fpill > button .ic{width:12px;height:12px}
.fpills .clear{margin-left:4px;font:var(--t-body-strong);color:var(--text-3)}   /* ghost action (DESIGN-CALM §3.10) */
.fpills .clear:hover{color:var(--text-strong)}

/* ── raised surfaces (§2.4, §7.4 #15): inside menus, modals, drawers, the palette and popovers the hover / open fills use
   --surface-hover-raised (in dark --surface-hover = --surface-offset = --surface-raised, so those fills would vanish) ── */
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) :is(.btn.q:is(:hover,.on,[aria-expanded="true"]),.fpill > button:hover,.x:hover){background:var(--surface-hover-raised)}
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) :is(.fpill,.chip,.qchip):hover{background:var(--surface-hover-raised)}
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) .fpill.on{background:var(--surface-raised)}
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) :is(.chip,.qchip).on{background:var(--surface-pressed)}
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) .empty > .ic,
:is(.modal,.drawer,.menu,.cmdk-panel,.popover) .skel{background:var(--surface-hover-raised)}

/* ── tables (§5.12) ── */
.tbl{width:100%;border-collapse:collapse;font:var(--t-body);color:var(--text-2)}
.tbl thead th{position:sticky;top:0;z-index:2;height:var(--row-h);padding:0 6px;background:var(--bg);text-align:left;white-space:nowrap;
  font:var(--t-caption-strong);color:var(--text-strong);box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.tbl tbody td{height:var(--row-h);padding:0 6px;vertical-align:middle;background:var(--surface);border-bottom:1px solid var(--border-soft)}
.tbl tbody tr:last-child td{border-bottom-color:var(--border)}
.tbl tbody tr:hover td{background:var(--surface-hover)}
.tbl tbody tr:is(.sel,[aria-selected="true"]) td{background:var(--row-selected)}   /* one step above hover in dark (1.17:1 vs 1.08 against the dark --bg) */
:is(.drawer,.modal) .tbl tbody tr:hover td{background:var(--surface-hover-raised)}
:is(.drawer,.modal) .tbl tbody tr:is(.sel,[aria-selected="true"]) td{background:var(--surface-pressed)}   /* one step above hover, so the selection survives a hovered neighbour */
:is(.drawer,.modal) .tbl thead th{background:var(--surface-raised)}
:is(.drawer,.modal) .tbl tbody td{background:var(--surface-raised)}
:is(.tbl tbody tr, .tsk-r, .irow, .sg-row, .sg-rr, .sg-mr, .aip-t tbody tr):focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
/* the TR outline is painted under the sticky actions cell: that cell redraws the 1 px ring (right border, top inset, bottom
   border; no bottom inset, which would make that edge 2 px); the other cells drop their divider so the ring is the only line */
.tbl tbody tr:focus-visible > td{border-bottom-color:transparent}
.tbl tbody tr:focus-visible > td.row-act{padding-right:5px;border-right:1px solid var(--focus-color);border-bottom-color:var(--focus-color);box-shadow:inset 0 1px 0 var(--focus-color)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .primary,.tbl .amt{font-weight:600;color:var(--text-strong)}
.tbl .cur{color:var(--text-2);font-weight:400;padding-left:12px}
.tbl .id{color:var(--text)}
.tbl .empty-v{color:var(--text-3)}   /* «—»: §2.3 keeps --text-disabled for disabled controls; an empty value is information (5.07 / 6.22) */
.tbl td.two{height:var(--row-h-2)}
.tbl td.two small{display:block;font:var(--t-caption);color:var(--text-3)}
.tbl tfoot td{height:var(--row-h);padding:0 6px;background:var(--bg);box-shadow:inset 0 1px 0 var(--border);font:var(--t-body);color:var(--text-3)}
.tbl tfoot .num,.tbl tfoot .amt{font-weight:600;color:var(--text-strong)}
.tbl .grp td{height:var(--row-h);padding:0 12px;background:var(--surface-offset);font:var(--t-body-strong);color:var(--text-strong)}
/* sort header: <th aria-sort="ascending|descending"><button class="sort">Label<svg class="ic"><use href="#sort"/></svg></button></th>
   stacked 6×8 chevrons in --text-3, 6 px after the label; the active sort keeps ONE chevron (up = ascending) in --text-strong */
.tbl .sort{display:inline-flex;align-items:center;gap:6px;color:inherit;font:inherit;cursor:pointer}
.tbl .sort .ic{width:6px;height:8px;flex:none;color:var(--text-3);stroke-width:1.25}
.tbl :is(th[aria-sort="ascending"] .sort,.sort.asc) .ic{color:var(--text-strong);clip-path:inset(0 0 50% 0);transform:translateY(2px)}
.tbl :is(th[aria-sort="descending"] .sort,.sort.desc) .ic{color:var(--text-strong);clip-path:inset(50% 0 0 0);transform:translateY(-2px)}
/* sticky actions column: <td class="row-act"><button type="button" aria-label="…"><svg class="ic"><use href="#dots"/></svg></button></td>
   a 24×24 ghost «…» (16 px dots in --icon-strong, radius 4), shown on row hover and for the focused / selected row */
.tbl .row-act{position:sticky;right:0;z-index:1;width:36px;padding:0 6px;text-align:center}
.tbl thead th.row-act{z-index:3}
.tbl .row-act > :is(button,.btn){width:24px;height:24px;padding:0;display:inline-grid;place-items:center;vertical-align:middle;border:0;border-radius:var(--radius-xs);
  background:transparent;box-shadow:none;color:var(--icon-strong);opacity:0;transition:opacity var(--dur-1),background var(--dur-1)}
.tbl .row-act > :is(button,.btn) .ic{width:16px;height:16px;stroke-width:2;color:var(--icon-strong)}
.tbl tbody tr:is(:hover,:focus-within,:focus-visible,.sel,[aria-selected="true"]) .row-act > :is(button,.btn),
.tbl .row-act > :is(button,.btn):is(:focus-visible,[aria-expanded="true"]){opacity:1}
.tbl .row-act > :is(button,.btn):is(:hover,[aria-expanded="true"]){background:var(--surface-hover)}
.tbl .row-act > :is(button,.btn):focus-visible{box-shadow:var(--focus-ring)}   /* the box-shadow:none above outranks the global ring (§3.9 ghost) */
/* on a hovered row (already --surface-hover) the button's own hover steps to the offset-hover fill, on a selected row (--row-selected)
   to --row-selected-hover, so it stays visible [E] */
.tbl tbody tr:hover .row-act > :is(button,.btn):is(:hover,[aria-expanded="true"]){background:var(--surface-offset-hover)}
.tbl tbody tr:is(.sel,[aria-selected="true"]) .row-act > :is(button,.btn):is(:hover,[aria-expanded="true"]){background:var(--row-selected-hover)}
/* 10 px fade on the column's left edge while rows scroll under it: the scroll box (or the table) carries .is-scrolled */
.tbl .row-act::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:10px;background:linear-gradient(to left,var(--fade-shadow),transparent);opacity:0;pointer-events:none;transition:opacity var(--dur-1)}
:is(.is-scrolled > .tbl,.tbl.is-scrolled) .row-act::before{opacity:1}
.results{margin-top:8px;font:var(--t-body);color:var(--text)}

/* ── cards and banners (§5.14) ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px}
.card > h3,.card-t{margin:0;font:var(--t-heading-s);color:var(--text-strong)}
.card.metric{padding:24px}
.card.metric .v{margin-top:8px;font:var(--t-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.card.raised{border:0;background:var(--surface-card);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-2)}
.card.raised:hover{box-shadow:var(--shadow-hover)}
.card.info{border:0;background:var(--surface-offset)}
.sumcard{display:grid;align-content:center;height:68px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);text-align:left;font:var(--t-body);color:var(--text-2);transition:border-color var(--dur-1),background var(--dur-1)}
.sumcard b{margin-top:2px;font:var(--t-heading-s);color:var(--text-2)}
.sumcard:hover{border-color:var(--border-strong)}
.sumcard.on{border-color:var(--border-strong);box-shadow:none;background:var(--row-selected);color:var(--text-strong);font-weight:600}
.sumcard.on b{color:var(--text-strong)}
.banner{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);font:var(--t-body);color:var(--text)}
.banner > .ic{width:16px;height:16px;margin-top:2px;flex:none;color:currentColor}
.banner b,.banner .bt{font-weight:600;color:var(--text-strong)}
.banner.critical{background:var(--banner-critical-bg);border-color:var(--banner-critical-border);color:var(--badge-danger-text)}
.banner.caution{background:var(--banner-caution-bg);border-color:var(--banner-caution-border);color:var(--badge-warning-text)}
.banner.success{background:var(--banner-success-bg);border-color:var(--banner-success-border);color:var(--badge-success-text)}
.banner:is(.critical,.caution,.success) :is(b,.bt){color:inherit}
.reco{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px 0 12px;border-radius:var(--radius-s);background:var(--surface-hover);font:var(--t-body);color:var(--text)}
.reco > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.reco > b{font:var(--t-caption-strong);color:var(--text-strong)}

/* ── keyboard chips (§5.21) ── */
.kbd,kbd.kbd{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-xs);border:0;white-space:nowrap;
  background:var(--kbd-bg);color:var(--kbd-text);font:500 11px/16px var(--font-mono);letter-spacing:0}
.btn.g .kbd{background:transparent;box-shadow:inset 0 0 0 1px var(--kbd-on-accent-ring);color:var(--on-accent)}
.btn .kbd{margin-left:8px}

/* ── avatars (§5.23): palette index in data-c ── */
:is(.av,.cl-av,.cp-av,.iav){background:var(--av-bg,var(--av-6-bg));color:var(--av-text,var(--av-6-text));box-shadow:none}
:is(.av,.cl-av,.cp-av,.iav)[data-c="1"]{--av-bg:var(--av-1-bg);--av-text:var(--av-1-text)}
:is(.av,.cl-av,.cp-av,.iav)[data-c="2"]{--av-bg:var(--av-2-bg);--av-text:var(--av-2-text)}
:is(.av,.cl-av,.cp-av,.iav)[data-c="3"]{--av-bg:var(--av-3-bg);--av-text:var(--av-3-text)}
:is(.av,.cl-av,.cp-av,.iav)[data-c="4"]{--av-bg:var(--av-4-bg);--av-text:var(--av-4-text)}
:is(.av,.cl-av,.cp-av,.iav)[data-c="5"]{--av-bg:var(--av-5-bg);--av-text:var(--av-5-text)}
:is(.av,.cl-av,.cp-av,.iav)[data-c="6"]{--av-bg:var(--av-6-bg);--av-text:var(--av-6-text)}
/* the stage glyph (UI.stageRing, Linear's status circle): a ring, the pie inside = the stage's odds; «Сдан» full and green */
.stg-ring{flex:none;width:14px;height:14px}
.stg-ring .o{fill:none;stroke:var(--text-3);stroke-width:1.5}
.stg-ring .f{fill:none;stroke:var(--accent);stroke-width:4.5}
.stg-ring.full .o,.stg-ring.full .f{stroke:var(--success)}
.av{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;font:600 10px/1 var(--font-sans);letter-spacing:0}
.av.xs{width:18px;height:18px;font-size:9px} .av.sm{width:20px;height:20px;font-size:9px}
.av.md{width:32px;height:32px;font-size:12px} .av.lg{width:40px;height:40px;font-size:15px}
.av.tm{--av-bg:var(--av-6-bg);--av-text:var(--av-6-text)}
.av .ic{width:12px;height:12px}
:is(.av,.cl-av,.iav) > i{position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--info);box-shadow:0 0 0 2px var(--surface)}

/* ── empty states (§5.24) ── */
.empty{display:grid;justify-items:start;align-content:start;gap:0;width:100%;max-width:448px;margin:120px auto 48px;padding:0;text-align:left;font:var(--t-body);color:var(--text-3);animation:ui-rise 240ms var(--ease-out) both}
.empty > .ic{box-sizing:border-box;width:48px;height:48px;padding:14px;margin-bottom:16px;border-radius:var(--radius-m);background:var(--surface-offset);color:var(--text-3);stroke-width:1.6}
.empty > b{display:block;margin-bottom:4px;font:var(--t-heading);color:var(--text-strong)}
.empty > p{margin:0;max-width:448px}
.empty > .btn,.empty > .acts{margin-top:16px}
.empty.ok > .ic{color:var(--success)}
:is(.drawer,.modal,.menu) .empty{margin:32px auto}
/* dashed box: sections without content. Named .dash-box (not .dashed) so it never collides with the «unclear» .badge.dashed */
.dash-box,.stub{display:grid;place-items:center;min-height:80px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius-m);font:var(--t-body);color:var(--text-3);text-align:center}
.stub{margin:20px}
.dash-box a,.dash-box .lnk,.stub a,.stub .lnk{font-weight:600;color:var(--link)}
/* in-card empty */
.empty-in{display:grid;place-items:center;align-content:center;gap:8px;min-height:160px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius-m);text-align:center}
.empty-in > .ic{width:20px;height:20px;color:var(--text-3);stroke-width:1.6}
.empty-in b{font:var(--t-body-strong);color:var(--text-strong)}
.empty-in span{max-width:300px;font:var(--t-caption);color:var(--text-3)}

/* ── skeletons and loading (§5.25): static, no shimmer ── */
.skel{display:block;height:16px;border-radius:var(--radius-xs);background:var(--surface-hover)}
.skel.s{height:12px}
.skel.l{height:16px}
/* «processing» = a neutral working pill, spinners in grey (DESIGN-CALM §3.13, §3.14) */
.proc{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);font:600 12px/16px var(--font-sans);white-space:nowrap}
.proc::before{content:"";width:12px;height:12px;flex:none;box-sizing:border-box;border:2px solid var(--border-strong);border-top-color:var(--text-2);border-radius:50%;animation:ui-spin .8s linear infinite}
.spin{display:inline-block;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--border-soft);border-top-color:var(--text-3);border-radius:50%;animation:ui-spin .8s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ── timeline / feed (§5.26) ── */
.timeline{position:relative;display:flex;flex-direction:column;gap:16px}
.tl-it{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:14px}
.tl-it .tl-ic{width:12px;height:12px;margin-top:4px;color:var(--text-3);stroke-width:2.4}
.tl-it::before{content:"";position:absolute;left:5.5px;top:20px;bottom:-14px;width:1px;background:var(--border-soft)}
.tl-it:last-child::before{display:none}
.tl-it.ok .tl-ic{color:var(--success)} .tl-it.bad .tl-ic{color:var(--danger)} .tl-it.note .tl-ic{color:var(--note-label)} .tl-it.wa .tl-ic{color:var(--wa)}
.tl-t{font:var(--t-body);color:var(--text)} .tl-t b{font-weight:500;color:var(--text-strong)}
.tl-time{margin-top:2px;font:var(--t-caption);color:var(--text-3)}

@media (prefers-reduced-motion: reduce){
  .modal,.drawer,.cmdk-panel,.menu,.toast,.tooltip,.is-open > .modal,.is-closing > .modal,.is-closing > .drawer,.toast.is-closing{transform:none!important}
  .is-closing > .drawer{opacity:0}
  .drawer{transform:none!important;opacity:0;transition:opacity 120ms linear}
  .is-open > .drawer{opacity:1}
  .ui-shake{animation:none}
  .drawer-b > *,.empty,.combo-list{animation:none}
  :is(.sg-sw,.switch),:is(.sg-sw,.switch) > i{transition:none}
  .proc::before,.spin{animation-duration:2s!important;animation-iteration-count:infinite!important}
}