/* stelaah.css */
/* ============================================================
   STELAAH — the modern operating system for teams
   Warm, editorial, calm. Cream surfaces, deep-olive accent,
   serif display headings, Inter for UI.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --accent: #3d3d3d;          /* monochrome charcoal (lightened) — primary actions / buttons (light) */
  --accent-600: #4d4d4d;
  --accent-700: #272727;
  --accent-fg: #ffffff;
  --lime: #45b54a;            /* success / charts — stays colorful */
  --lime-soft: #e2f3e0;
  --accent-soft: #efeff0;
  --accent-soft-strong: #e3e3e5;

  /* ---- @mention identity (light) ----
     A dedicated, always-legible "tagged person" color (blue) that stays
     recognizable no matter what the workspace --accent is (it may be neutral
     charcoal). Self-mentions get a warm amber "this is about you" cue; Aria
     mentions get a violet "AI" cue. Single source of truth for the .mention
     treatment used app-wide. */
  --mention-fg: #2477bf;
  --mention-bg: rgba(59, 154, 217, 0.13);
  --mention-bg-hover: rgba(59, 154, 217, 0.22);
  --mention-me-fg: #96631a;
  --mention-me-bg: rgba(227, 173, 40, 0.20);
  --mention-me-bg-hover: rgba(227, 173, 40, 0.32);
  --mention-aria-fg: #7a4fc0;
  --mention-aria-bg: rgba(139, 92, 199, 0.15);
  --mention-aria-bg-hover: rgba(139, 92, 199, 0.24);
  /* record mentions (@a client/project/task/doc/lead/invoice) — teal, distinct from
     a tagged person (blue) so the two read as different kinds of reference at a glance */
  --mention-entity-fg: #1f8a76;
  --mention-entity-bg: rgba(31, 138, 118, 0.13);
  --mention-entity-bg-hover: rgba(31, 138, 118, 0.22);

  /* ---- Surfaces (light) ----
     Near-white, clean neutral ramp. Keep the canvas neutral so displays do
     not read it as pink or red; warmth belongs in intentional accents. */
  --bg: #fdfdfd;              /* page — clean neutral near-white */
  --bg-sidebar: #f5f5f5;      /* sidebar / rails */
  --bg-sunken: #f3f3f3;
  --bg-hover: rgba(32, 33, 36, 0.045);
  --bg-active: rgba(32, 33, 36, 0.07);
  --surface: #ffffff;         /* cards */
  --surface-2: #fbfbfb;       /* nested / inputs */
  --overlay: #ffffff;

  /* ---- Ink ---- */
  --ink: #202124;             /* neutral graphite */
  --ink-2: #5f6368;           /* body / secondary */
  --ink-3: #7b8087;           /* muted icons / meta */
  --ink-4: #9aa0a6;           /* faint / placeholder */

  /* ---- Lines ---- */
  --border: rgba(32, 33, 36, 0.11);
  --border-strong: rgba(32, 33, 36, 0.17);
  --border-subtle: rgba(32, 33, 36, 0.06);

  /* ---- Shadows — soft, neutral ---- */
  --shadow-xs: 0 1px 0 rgba(32, 33, 36, 0.03);
  --shadow-sm: 0 1px 2px rgba(32, 33, 36, 0.05), 0 1px 0 rgba(32, 33, 36, 0.03);
  --shadow-md: 0 6px 18px rgba(32, 33, 36, 0.06), 0 1px 3px rgba(32, 33, 36, 0.05);
  --shadow-lg: 0 18px 44px rgba(32, 33, 36, 0.12), 0 3px 10px rgba(32, 33, 36, 0.06);
  --shadow-pop: 0 30px 70px rgba(32, 33, 36, 0.18), 0 6px 16px rgba(32, 33, 36, 0.08);

  /* ---- Radii ---- */
  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* ---- Micro-interaction timing ---- */
  /* SUPERSEDED by --dur-micro (v2 layer, §11), and kept only as an alias for
     the call sites that already read it. It described the same intent — "a
     press feels intentional rather than instant" — while carrying its own
     100ms, so it was itself one of the stray durations the motion sweep
     existed to remove. New code reaches for `var(--dur-micro) var(--ease)`. */
  --transition-micro: var(--dur-micro) var(--ease);

  /* ---- Inset Inspector (inspect / inset / apple panel) ---- */
  --inset-inspector-bg: #fcfcfc;
  --inset-inspector-border: rgba(32, 33, 36, 0.06);
  --inset-inspector-radius: 22px;
  --inset-inspector-shadow: 0 1px 2px rgba(32, 33, 36, 0.03), 0 12px 40px rgba(32, 33, 36, 0.04);
  --inset-inspector-gap: 20px;

  /* ---- Smart Modal (shared by window.Modal + feature overlays) ---- */
  --modal-radius: 20px;
  --modal-rim: color-mix(in srgb, var(--ink) 7%, transparent);
  /* The scrim IS the material ladder's veil (SET 9 §9). Kept as its own name
     because ten call sites already read it; both now resolve to one rung, so
     tuning the veil tunes every backdrop. Values live in the v2 layer at the
     END of this file (§12) and are redeclared there for dark. */
  --modal-scrim-bg: var(--material-veil-bg);
  --modal-scrim-blur: var(--material-veil-blur);
  --modal-shadow:
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent) inset,
    0 2px 4px rgba(32, 33, 36, 0.04),
    0 18px 40px -12px rgba(32, 33, 36, 0.15),
    0 48px 80px -36px rgba(32, 33, 36, 0.18);
  --modal-shadow-drawer:
    -12px 0 40px -18px rgba(32, 33, 36, 0.15),
    -4px 0 16px rgba(32, 33, 36, 0.04);

  /* ---- Notification card (toasts · Aria chip · proposal cards) ---- */
  --notif-bg: var(--surface);
  --notif-border: color-mix(in srgb, var(--ink) 10%, transparent);
  /* Same drop shadows as --elev-2 but WITHOUT its `0 0 0 1px` ring: that ring exists for
     surfaces with no border of their own, and every --notif-* card already draws
     --notif-border. Stacked, the two hairlines read as a thick outline (David, 2026-08-17). */
  --notif-shadow: 0 2px 4px rgba(22,24,29,.04), 0 8px 16px -4px rgba(22,24,29,.08);
  --notif-shadow-sm: 0 1px 2px rgba(22,24,29,.04);
  --notif-radius: 16px;
  --notif-pad: 14px;
  --notif-title-size: 13.5px;
  --notif-title-weight: 550;
  --notif-body-size: 13px;
  --notif-pill-bg: color-mix(in srgb, var(--ink) 7%, transparent);
  --notif-pill-border: color-mix(in srgb, var(--ink) 8%, transparent);
  --notif-pill-fg: var(--ink);
  --notif-pill-hover-bg: color-mix(in srgb, var(--ink) 11%, transparent);
  --notif-icon-hover-bg: var(--bg-hover);
  --notif-progress-track: color-mix(in srgb, var(--ink) 6%, transparent);
  --notif-cta-bg: var(--ink);
  --notif-cta-fg: var(--bg);

  /* ---- Spacing — 4pt grid (see DESIGN.md → Spacing & Grid Law) ----
     Every gap, margin and padding comes from this scale. Odd values
     (3/5/7/9/11/13) are forbidden: if a spacing wants to be 7px, the type
     size or line-height is wrong, not the gap. The only sanctioned
     exception is a documented optical nudge (see --sp-optical below). */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Named roles. Reach for these first — the numeric scale is the raw
     material, these are the decisions. */
  --space-page: var(--sp-10);      /* canvas edge to content */
  --space-section: var(--sp-8);    /* between major page sections */
  --space-block: var(--sp-6);      /* between blocks inside a section */
  --space-group: var(--sp-4);      /* related elements */
  --space-item: var(--sp-3);       /* list rows, form fields */
  --space-inline: var(--sp-2);     /* icon to label, chip internals */
  --space-tight: var(--sp-1);      /* glyph nudges only */

  /* Vertical rhythm: a heading owns the space above it more than below.
     Applying these two together is what makes sections read as grouped
     rather than evenly striped. */
  --space-head-above: var(--sp-8);
  --space-head-below: var(--sp-4);

  /* Optical alignment escape hatch. Legitimate only for centering a glyph
     against a text baseline or a rounded shape against a square one. Any
     use must carry a comment saying what it is aligning to. */
  --sp-optical: 1px;

  /* ---- Grid ----
     Canonical gutter + column ladder for the .sgrid card grid. Column
     counts are designed integers, never emergent from auto-fill. */
  --grid-gutter: var(--sp-6);
  --grid-cols: 4;
  --grid-cols-dense: 6;
  --grid-cols-wide: 3;

  /* ---- Motion ---- */
  --t-fast: 120ms;            /* hover / small state changes */
  --t-med: 200ms;            /* menus, pops, toggles */
  --t-slow: 300ms;           /* rises, larger transitions */
  --t-drawer: 420ms;         /* drawer / panel slide */
  --ease: cubic-bezier(.32,.72,0,1);   /* signature easing */

  /* ---- Type ---- */
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji';
  /* One app typeface. Aptos (Microsoft's default — what the reference shows) renders
     for anyone who has it installed locally; Onest is the web fallback (closest free
     match — same humanist proportions + single-story g). Swap here to restyle every
     heading + body at once: `--font-app` is the single source of truth. To embed exact
     Aptos for ALL visitors, drop aptos.woff2 in and add an @font-face above. */
  --font-app: 'Aptos', 'Onest', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, var(--emoji);
  /* THE DISPLAY SERIF — the Editorial Calm signature (SET 9 §7, 2026-08-29).
     This token resolved to `var(--font-app)` for months, which silently turned
     every serif surface back into the sans and erased the one typographic move
     that separates Stelaah from a generic SaaS shell. Source Serif 4 is ALREADY
     loaded in Stelaah.html with optical sizing (opsz 8..60, weights 300-700), so
     restoring it costs zero additional requests.
     WHERE IT LANDS — display surfaces only, and this list is closed:
       .h-serif · .page-title-serif · .stat-val · .tmetric-val · .empty-title
       · .drawer-title.h-serif · .mc-title · PageHead serif titles · docmaker
       heads (which override via --docm-font-head) · the SET 5 itinerary
       day-sheet headers.
     Body copy, UI chrome and every control STAY sans — they read --font-app,
     --font-ui or inherit. Do not add new serif surfaces without a design call.
     Gallery and Portal keep their own type systems and never read this token. */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif, var(--emoji);
  --font-title: var(--font-app);
  --font-ui: var(--font-app);
  --font-sans: var(--font-app);
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace, var(--emoji);
  --font-script: 'Caveat', 'Segoe Script', cursive, var(--emoji);
  --font-scribble: 'Gloria Hallelujah', 'Comic Sans MS', cursive, var(--emoji);

  --fs-micro: 11px; --fs-tiny: 12px; --fs-sm: 13px; --fs-body: 14px;
  --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px;
  --fs-3xl: 34px; --fs-4xl: 44px;
  /* de-facto half-step scale used across dense UI */
  --fs-105: 10.5px; --fs-115: 11.5px; --fs-125: 12.5px; --fs-135: 13.5px;

  /* ---- Category / chart palette — vibrant "Sundae" hues ---- */
  --c-blue:  #3b9ad9;
  --c-teal:  #1fb3a6;
  --c-sage:  #84c45f;
  --c-olive: #5fbb4d;
  --c-gold:  #e3ad28;
  --c-clay:  #ee8c5e;
  --c-mauve: #e07a9e;
  --c-brown: #d18a3c;
  --c-plum:  #8b5cc7;
  --c-rust:  #e0556a;
  --c-ink:   #4b4e48;

  /* ---- Planner category palette — Editorial Calm (tinted paper, not blocks) ----
     Each category exposes exactly three tokens: surface (card fill), border
     (1px ring) and accent (dot + label). Values are hand-tuned pastels, not
     derived, so keep them as literal hex in light mode. */
  --cat-meeting-surface:   #F6FBFE; --cat-meeting-border:   #D9EEF7; --cat-meeting-accent:   #78B8D1;
  --cat-client-surface:    #F7FCF8; --cat-client-border:    #DCEFD9; --cat-client-accent:    #8CBF93;
  --cat-review-surface:    #FFFBF5; --cat-review-border:    #F4E6CC; --cat-review-accent:    #D8B97A;
  --cat-design-surface:    #FFF8FA; --cat-design-border:    #F3DCE4; --cat-design-accent:    #D9A6B8;
  --cat-research-surface:  #F6FCFB; --cat-research-border:  #DBF0EA; --cat-research-accent:  #8CBFAF;
  --cat-focus-surface:     #FAF8FF; --cat-focus-border:     #E6DDF8; --cat-focus-accent:     #B4A3D6;
  --cat-admin-surface:     #FCF8F7; --cat-admin-border:     #E9DEDB; --cat-admin-accent:     #BFA8A2;
  --cat-finance-surface:   #FAFDF6; --cat-finance-border:   #E4F1D6; --cat-finance-accent:   #A8C47B;
  --cat-marketing-surface: #FFF9F4; --cat-marketing-border: #F5E2CF; --cat-marketing-accent:  #D9B08C;
  --cat-personal-surface:  #FAFBFC; --cat-personal-border:  #E6EBEF; --cat-personal-accent:  #AAB4BF;
  --cat-content-surface:   #FFF8F5; --cat-content-border:   #F5DFD3; --cat-content-accent:   #D89A85;

  /* ---- Vibrant data-viz palette — bright, saturated hues for charts ONLY
     (sparklines, areas, donuts, KPI numbers). Kept separate from the muted
     --c-* category palette so tags/dots stay editorial while charts pop. ---- */
  --viz-green:  #45b54a;
  --viz-blue:   #2f8fe0;
  --viz-purple: #8b5cc7;
  --viz-teal:   #14b3a4;
  --viz-gold:   #f0a92e;
  --viz-clay:   #ef8a52;
  --viz-rust:   #e0556a;
  --viz-pink:   #ec5f9e;

  /* ---- Tag palette — Notion-style soft bg + readable fg + solid dot.
     Derived from the brand hues, tuned for AA contrast in both modes. ---- */
  --tag-stone-bg: #ece9e3; --tag-stone-fg: #57534a; --tag-stone-dot: #8e8676;
  --tag-sage-bg:  #e6ecdc; --tag-sage-fg:  #54663a; --tag-sage-dot:  #8d9a7d;
  --tag-olive-bg: #e3eec6; --tag-olive-fg: #4a6016; --tag-olive-dot: #6f9233;
  --tag-blue-bg:  #dde9ef; --tag-blue-fg:  #386076; --tag-blue-dot: #5d829a;
  --tag-teal-bg:  #dcece7; --tag-teal-fg:  #3a675d; --tag-teal-dot:  #6f867f;
  --tag-gold-bg:  #f2e9d1; --tag-gold-fg:  #745d22; --tag-gold-dot:  #ab9156;
  --tag-clay-bg:  #f3e1d4; --tag-clay-fg:  #8a4d2c; --tag-clay-dot:  #ab6e4f;
  --tag-mauve-bg: #f1e1de; --tag-mauve-fg: #855750; --tag-mauve-dot: #a87d75;
  --tag-plum-bg:  #ebe1ef; --tag-plum-fg:  #69497a; --tag-plum-dot:  #8a6f9c;
  --tag-rust-bg:  #f4ddd5; --tag-rust-fg:  #9a4023; --tag-rust-dot:  #bc5f44;

  /* ---- Status ---- */
  --st-todo: #8e8676;
  --st-progress: #3b9ad9;
  --st-review: #e3ad28;
  --st-done: #45b54a;
  --st-planning: #8a96a8;
  --st-blocked: #e0556a;
  --st-todo-soft: #ece7db;
  --st-progress-soft: #e3f0f9;
  --st-review-soft: #faf0d6;
  --st-done-soft: #e2f3e0;
  --st-planning-soft: #e7eaf0;
  --st-blocked-soft: #fbe3e6;

  /* ---- Priority ---- */
  --pr-high: #e0556a;
  --pr-med: #e3ad28;
  --pr-low: #8a96a8;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 38px;
  --rail-w: 320px;
}

/* Staged reveal (s-reveal.jsx window.useStagedReveal) — a surface fading in
   one notch up, used for ordered "the page wakes up" mount sequences. */
@keyframes stagedReveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { [style*="stagedReveal"] { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* Ambient breathe (s-reveal.jsx) — an hourly, barely-perceptible pulse on the
   app shell. Subtle by design: a hairline brightness shift, not a scale or
   color change, so it never reads as a UI state or grabs attention. */
@keyframes stelaahBreathe { 0% { filter:brightness(1); } 45% { filter:brightness(1.006); } 100% { filter:brightness(1); } }
body.stelaah-breathe { animation: stelaahBreathe 1.2s ease-in-out; }

/* Hover context chip (s-hoverpreview.jsx consumers, e.g. client row hover) —
   a small read-only fact panel, no accent bar, bare icons. */
.chov { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-control); box-shadow: 0 16px 34px -14px rgba(32,33,36,.35); padding: var(--space-tight); min-width: 200px; pointer-events: none; animation: stagedReveal var(--dur-over) var(--ease) forwards; }
.chov-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-2); }
.chov-row svg { flex-shrink: 0; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .chov { animation: none; } }


.dark {
  --accent: #f5f5f5;          /* monochrome — primary actions (dark) */
  --accent-600: #ffffff;
  --accent-700: #e2e2e2;
  --accent-fg: #121212;
  --lime: #9ecb57;
  --lime-soft: #2b3a1c;
  --accent-soft: #2c2c2c;
  --accent-soft-strong: #383838;

  /* ---- @mention identity (dark) ---- */
  --mention-fg: #79bdf2;
  --mention-bg: rgba(95, 176, 232, 0.17);
  --mention-bg-hover: rgba(95, 176, 232, 0.28);
  --mention-me-fg: #efce76;
  --mention-me-bg: rgba(236, 198, 88, 0.17);
  --mention-me-bg-hover: rgba(236, 198, 88, 0.28);
  --mention-aria-fg: #c1a3ec;
  --mention-aria-bg: rgba(168, 136, 221, 0.18);
  --mention-aria-bg-hover: rgba(168, 136, 221, 0.28);
  --mention-entity-fg: #52c7ac;
  --mention-entity-bg: rgba(82, 199, 172, 0.16);
  --mention-entity-bg-hover: rgba(82, 199, 172, 0.26);

  /* ---- Notion dark ramp — perfectly NEUTRAL grays (no blue/warm tint), even
         elevation steps (sunken < page < rails < card < input ≈ overlay).
         Matched to Notion's dark theme: #191919 page, #202020 rails, #252525
         peek cards, #2f2f2f inputs/menus. ---- */
  --bg: #191919;             /* page — Notion neutral */
  --bg-sidebar: #202020;     /* sidebar / rails */
  --bg-sunken: #161616;      /* wells, tracks */
  --bg-hover: rgba(255, 255, 255, 0.055);
  --bg-active: rgba(255, 255, 255, 0.09);
  --surface: #252525;        /* cards — Notion peek panel */
  --surface-2: #2f2f2f;      /* nested / inputs */
  --overlay: #2f2f2f;        /* menus / popovers */

  /* Translucent soft-white text — the signature of Notion dark. Never pure
     white; layers calmly over every neutral surface. */
  --ink: rgba(255, 255, 255, 0.82);    /* primary */
  --ink-2: rgba(255, 255, 255, 0.55);  /* body / secondary */
  --ink-3: rgba(255, 255, 255, 0.40);  /* muted / meta */
  --ink-4: rgba(255, 255, 255, 0.28);  /* faint / placeholder */

  --border: rgba(255, 255, 255, 0.094);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.055);

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.10);
  --shadow-md: 0 8px 22px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.4);
  --shadow-lg: 0 22px 50px rgba(0,0,0,0.62), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-pop: 0 32px 74px rgba(0,0,0,0.72), 0 8px 18px rgba(0,0,0,0.5);

  --inset-inspector-bg: #282828;
  --inset-inspector-border: rgba(255, 255, 255, 0.06);
  --inset-inspector-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 12px 40px rgba(0, 0, 0, 0.32);

  /* Redeclared here, not inherited: --modal-scrim-bg aliases the material
     veil, and an alias declared on :root freezes the LIGHT veil (a custom
     property substitutes var() on the element that declares it). The alias has
     to be restated on every element that carries a mode. */
  --modal-scrim-bg: var(--material-veil-bg);
  --modal-rim: color-mix(in srgb, #fff 8%, transparent);
  --modal-shadow:
    0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset,
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 48px 90px rgba(0, 0, 0, 0.5);
  --modal-shadow-drawer:
    -16px 0 48px -12px rgba(0, 0, 0, 0.55),
    -4px 0 16px rgba(0, 0, 0, 0.35);

  /* Notification cards — Cursor charcoal (toasts · Aria · proposals) */
  --notif-bg: #2c2c2c;
  --notif-border: rgba(255, 255, 255, 0.12);
  --notif-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --notif-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --notif-pill-bg: rgba(255, 255, 255, 0.09);
  --notif-pill-border: rgba(255, 255, 255, 0.12);
  --notif-pill-fg: rgba(255, 255, 255, 0.88);
  --notif-pill-hover-bg: rgba(255, 255, 255, 0.14);
  --notif-icon-hover-bg: rgba(255, 255, 255, 0.08);
  --notif-progress-track: rgba(255, 255, 255, 0.08);
  --notif-cta-bg: rgba(255, 255, 255, 0.92);
  --notif-cta-fg: #1a1a1a;

  /* category hues — lift for charcoal */
  --c-blue:  #5fb0e8; --c-teal:  #45c8ba; --c-sage:  #9bd47a; --c-olive: #72cf5e;
  --c-gold:  #ecc658; --c-clay:  #f0a172; --c-mauve: #ec90b0; --c-brown: #dca05a;
  --c-plum:  #a888dd; --c-rust:  #ec7282; --c-ink:   #b6b3aa;

  /* Planner category palette — dark: accent brightened for contrast, surface
     and border re-derived from the dark surface tokens so cards stay "tinted
     paper" instead of hand-picked hex (no light-mode literals to maintain here). */
  --cat-meeting-accent:   color-mix(in srgb, #78B8D1 82%, white);
  --cat-client-accent:    color-mix(in srgb, #8CBF93 82%, white);
  --cat-review-accent:    color-mix(in srgb, #D8B97A 82%, white);
  --cat-design-accent:    color-mix(in srgb, #D9A6B8 82%, white);
  --cat-research-accent:  color-mix(in srgb, #8CBFAF 82%, white);
  --cat-focus-accent:     color-mix(in srgb, #B4A3D6 82%, white);
  --cat-admin-accent:     color-mix(in srgb, #BFA8A2 82%, white);
  --cat-finance-accent:   color-mix(in srgb, #A8C47B 82%, white);
  --cat-marketing-accent: color-mix(in srgb, #D9B08C 82%, white);
  --cat-personal-accent:  color-mix(in srgb, #AAB4BF 82%, white);
  --cat-content-accent:   color-mix(in srgb, #D89A85 82%, white);
  --cat-meeting-surface:   color-mix(in srgb, var(--cat-meeting-accent) 11%, var(--surface));
  --cat-client-surface:    color-mix(in srgb, var(--cat-client-accent) 11%, var(--surface));
  --cat-review-surface:    color-mix(in srgb, var(--cat-review-accent) 11%, var(--surface));
  --cat-design-surface:    color-mix(in srgb, var(--cat-design-accent) 11%, var(--surface));
  --cat-research-surface:  color-mix(in srgb, var(--cat-research-accent) 11%, var(--surface));
  --cat-focus-surface:     color-mix(in srgb, var(--cat-focus-accent) 11%, var(--surface));
  --cat-admin-surface:     color-mix(in srgb, var(--cat-admin-accent) 11%, var(--surface));
  --cat-finance-surface:   color-mix(in srgb, var(--cat-finance-accent) 11%, var(--surface));
  --cat-marketing-surface: color-mix(in srgb, var(--cat-marketing-accent) 11%, var(--surface));
  --cat-personal-surface:  color-mix(in srgb, var(--cat-personal-accent) 11%, var(--surface));
  --cat-content-surface:   color-mix(in srgb, var(--cat-content-accent) 11%, var(--surface));
  --cat-meeting-border:   color-mix(in srgb, var(--cat-meeting-accent) 32%, var(--surface));
  --cat-client-border:    color-mix(in srgb, var(--cat-client-accent) 32%, var(--surface));
  --cat-review-border:    color-mix(in srgb, var(--cat-review-accent) 32%, var(--surface));
  --cat-design-border:    color-mix(in srgb, var(--cat-design-accent) 32%, var(--surface));
  --cat-research-border:  color-mix(in srgb, var(--cat-research-accent) 32%, var(--surface));
  --cat-focus-border:     color-mix(in srgb, var(--cat-focus-accent) 32%, var(--surface));
  --cat-admin-border:     color-mix(in srgb, var(--cat-admin-accent) 32%, var(--surface));
  --cat-finance-border:   color-mix(in srgb, var(--cat-finance-accent) 32%, var(--surface));
  --cat-marketing-border: color-mix(in srgb, var(--cat-marketing-accent) 32%, var(--surface));
  --cat-personal-border:  color-mix(in srgb, var(--cat-personal-accent) 32%, var(--surface));
  --cat-content-border:   color-mix(in srgb, var(--cat-content-accent) 32%, var(--surface));

  /* vibrant viz palette — lifted for charcoal bg */
  --viz-green:  #56c85a; --viz-blue:   #56a4f0; --viz-purple: #a888dd; --viz-teal:   #3fd0c2;
  --viz-gold:   #f5c14a; --viz-clay:   #f59a64; --viz-rust:   #ec7282; --viz-pink:   #f078ad;

  /* status softs */
  --st-todo-soft: #2a2c25; --st-progress-soft: #1f2c33; --st-review-soft: #312c1d;
  --st-done-soft: #2a3a1a; --st-planning-soft: #232831; --st-blocked-soft: #38241a;

  /* tag palette — charcoal: deep saturated bg + bright readable fg */
  --tag-stone-bg: #2d2d2d; --tag-stone-fg: #b6b6b3; --tag-stone-dot: #8f8f8b;
  --tag-sage-bg:  #2a311f; --tag-sage-fg:  #bcca9c; --tag-sage-dot:  #abb88f;
  --tag-olive-bg: #2d3c17; --tag-olive-fg: #b3d472; --tag-olive-dot: #93bf52;
  --tag-blue-bg:  #1f3039; --tag-blue-fg:  #a3c5d7; --tag-blue-dot:  #7da7bd;
  --tag-teal-bg:  #1f342f; --tag-teal-fg:  #a0cabe; --tag-teal-dot:  #8aa79f;
  --tag-gold-bg:  #342f1d; --tag-gold-fg:  #dcc488; --tag-gold-dot:  #c7ab6f;
  --tag-clay-bg:  #38271b; --tag-clay-fg:  #dba684; --tag-clay-dot:  #c5896a;
  --tag-mauve-bg: #352724; --tag-mauve-fg: #d9ada4; --tag-mauve-dot: #c0958c;
  --tag-plum-bg:  #2e2636; --tag-plum-fg:  #c6a6d2; --tag-plum-dot:  #ad8fbe;
  --tag-rust-bg:  #3a231a; --tag-rust-fg:  #e69b7d; --tag-rust-dot:  #d6795a;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
  overflow: hidden;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* Scrollbars are HOVER-ONLY, everywhere (sidebar, panes, lists, menus, drawers).
   The gutter is always reserved (fixed 10px track) so revealing the thumb never
   reflows content — only the thumb's paint changes. Overriding this per-surface
   is a bug: if a scroll area needs a permanent bar, it needs a shorter max-height. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
  transition: background-color var(--dur-micro) var(--ease);
}
:hover::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }
:hover::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }
/* Firefox has no thumb-only pseudo-element, so the whole bar fades in on hover. */
* { scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--border-strong) transparent; }
/* Keyboard scrolling and active dragging must keep the thumb visible even with
   the pointer off the surface, or a drag that leaves the element goes invisible. */
:focus-visible::-webkit-scrollbar-thumb,
:focus-within::-webkit-scrollbar-thumb,
:active::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }
@media (prefers-reduced-motion: reduce) { ::-webkit-scrollbar-thumb { transition: none; } }

/* ============================================================
   App layout
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh; width: 100vw;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  transition: grid-template-columns .24s var(--ease);
}
.app.chat-dock-pinned {
  grid-template-columns: var(--sidebar-w) var(--chat-dock-pin-w) minmax(0, 1fr);
}
.app.aria-dock-pinned .main-col {
  grid-template-columns: minmax(0, 1fr) var(--aria-dock-pin-w);
}
.app.aria-dock-pinned .shell-chrome-stack {
  grid-column: 1 / -1;
}
.app.aria-dock-pinned .main-col > :last-child {
  grid-column: 1;
}
.app.task-drawer-pinned .main-col {
  /* min() mirrors the same clamp on `.tdw.pinned` in s-task-drawer.css — keeps
     the reserved column in step with the drawer's actual on-screen width
     instead of the raw (possibly viewport-exceeding) --tdw-pin-w value. */
  grid-template-columns: minmax(0, 1fr) min(var(--tdw-pin-w, 440px), 100vw);
}
.app.task-drawer-pinned .shell-chrome-stack {
  grid-column: 1 / -1;
}
.app.task-drawer-pinned .main-col > :last-child {
  grid-column: 1;
}
.app.task-drawer-pinned.aria-dock-pinned .main-col {
  grid-template-columns: minmax(0, 1fr) var(--tdw-pin-w, 440px) var(--aria-dock-pin-w);
}
.main-col { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.shell-chrome-stack { min-width: 0; position: relative; z-index: 20; }
.shell-topline {
  display: flex; align-items: stretch; min-width: 0; height: var(--topbar-h);
  border-bottom: 1px solid var(--border-subtle); background: var(--bg);
}
.shell-topline > .wtabs { flex: 1 1 auto; min-width: 0; height: 100%; border-bottom: 0; background: transparent; }
.shell-topline > .topbar { flex: 0 0 auto; height: 100%; margin-left: auto; border-bottom: 0; background: transparent; }
.shell-topline.has-tabs > .topbar { border-left: 1px solid var(--border-subtle); }
.main-col > :last-child { min-height: 0; min-width: 0; }
/* Messages (and other roots that mount .mx-wrap) must own the full grid cell so the chat composer docks to the bottom like WhatsApp. */
.main-col > :has(> .mx-wrap),
.main-col > .fb-fill {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}
.main-col > :has(> .mx-wrap) > .mx-wrap,
.main-col > .fb-fill > .mx-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.main-col.detail-open { grid-template-rows: 1fr; }
/* ── workspace tab bar ── */
.ws-split { display: grid; grid-template-columns: 1fr 7px 1fr; min-height: 0; min-width: 0; overflow: hidden; }
.ws-split-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.ws-split-scroll { overflow: auto; min-height: 0; height: 100%; }
.ws-split-div { background: var(--border); cursor: col-resize; }
.ws-split-div:hover { background: var(--accent); }
.ws-split-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); height: 34px; padding: 0 var(--space-inline) 0 var(--space-item); background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-split-label { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-split-x { border: none; background: none; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: var(--space-tight); border-radius: 6px; }
.ws-split-x:hover { background: var(--surface); color: var(--ink); }
.ws-split-board { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cv-droptarget { outline: 3px dashed var(--accent); outline-offset: -8px; }
.cv-droptarget::after { content: "Drop to add a linked card"; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 700; padding: var(--space-tight) var(--space-item); border-radius: var(--r-modal); box-shadow: 0 6px 16px -6px rgba(60,40,25,.4); pointer-events: none; }
.cv-lib-ent[draggable] { cursor: grab; }
.cv-lib-ent[draggable]:active { cursor: grabbing; }
/* typed connection relationship picker */
.cv-rel-wrap { position: relative; }
.cv-rel-btn { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-inline); border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; }
.cv-rel-btn.on { color: var(--ink); border-color: var(--accent); }
.cv-rel-btn:hover { border-color: var(--accent); }
.cv-rel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong, #c9bfb2); flex-shrink: 0; }
.cv-rel-bd { position: fixed; inset: 0; z-index: 120; }
.cv-rel-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 121; min-width: 168px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-control); box-shadow: var(--shadow-lg); padding: var(--space-tight); max-height: 280px; overflow-y: auto; }
.cv-rel-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.cv-rel-row:hover { background: var(--surface-2); }
.cv-rel-row.on { background: var(--accent-soft); color: var(--accent); }
/* Tab bar (.wtabs / .wtab / .wtabs-tool / .wtab-new) styling lives in s-tabs2.css,
   the tab system v2 stylesheet — single source of truth, loaded after this file. */
.wtab.dragging { opacity: .4; }
.wtab-drop { width: 3px; align-self: center; height: 20px; border-radius: 99px; background: var(--accent); flex-shrink: 0; margin: 0 1px; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); animation: wtabDrop var(--dur-micro) var(--ease); }
@keyframes wtabDrop { from { transform: scaleY(.4); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.wtab-menu-colors { padding: var(--space-inline) var(--space-inline) var(--space-tight); border-top: 1px solid var(--border-subtle); margin-top: var(--space-tight); }
.wtab-menu-clabel { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.wtab-menu-swatches { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-inline); }
.wtab-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; transition: transform .1s; }
.wtab-sw:hover { transform: scale(1.12); }
.wtab-sw.on { border-color: var(--ink); }
.wtab-sw.reset { background: var(--bg-sunken); color: var(--ink-4); border-color: var(--border); }
/* Phase 6: sidebar shortcuts */
.sb-sc { display: flex; flex-direction: column; margin-top: var(--space-tight); }
.sb-sc-hd { display: flex; align-items: center; justify-content: space-between; }
.sb-sc-actions { display: flex; gap: 2px; }
.sb-sc-add { width: 22px; height: 22px; border: none; background: none; border-radius: 6px; color: var(--sb-ink-icon); cursor: pointer; display: grid; place-items: center; }
.sb-sc-add:hover { background: var(--bg-hover); color: var(--ink); }
.sb-sc-item .sb-item-ico { transition: color .12s; }
.sb-sc-item.child { padding-left: 28px; }
.sb-sc-more { margin-left: auto; opacity: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--sb-ink-icon); flex-shrink: 0; }
.sb-sc-item:hover .sb-sc-more { opacity: 1; }
.sb-sc-more:hover { background: var(--bg-hover); color: var(--ink); }

/* Workspace Gravity (s-gravity.js) — a soft magnetic nudge while a dragged
   file hovers a project shortcut. Transform only, no accent border/fill. */
.sb-sc-item.gravity-near { transform: translateX(3px) scale(1.02); background: var(--bg-hover); transition: transform .16s var(--ease, ease), background .16s; }
@media (prefers-reduced-motion: reduce) { .sb-sc-item.gravity-near { transition: none; transform: none; } }
.sb-sc-empty { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: none; color: var(--sb-ink-quiet); font-size: var(--t-caption-size); cursor: pointer; margin-top: 2px; }
.sb-sc-empty:hover { color: var(--ink-2); border-color: var(--ink-4); }
.sbsc-kinds { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.sbsc-kind { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sbsc-kind:hover { background: var(--bg-hover); color: var(--ink); }
.sbsc-kind.on { border-color: var(--border); background: var(--bg-sunken); color: var(--ink); }
.sbsc-icons { display: flex; flex-wrap: wrap; gap: 2px; }
.sbsc-ico { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s, border-color .12s; }
.sbsc-ico:hover { background: var(--bg-hover); color: var(--ink); }
.sbsc-ico.on { border-color: var(--border); color: var(--ink); background: var(--bg-sunken); }
.sbsc-colors { display: flex; gap: var(--space-inline); }
.sbsc-color { width: 26px; height: 26px; border-radius: var(--r-control); border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; }
.sbsc-color.on { border-color: var(--ink); }
.wtab-menu-bd { position: fixed; inset: 0; z-index: 200; }
.wtab-menu { position: fixed; z-index: 201; min-width: 168px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-control); box-shadow: var(--shadow-lg); padding: var(--space-tight); }
.wtab-menu-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.wtab-menu-row:hover { background: var(--accent-soft); color: var(--accent); }
.wsp-mobile { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wsp-mobile-bar { display: flex; flex-direction: column; gap: var(--space-item); padding: var(--space-item) var(--space-group) var(--space-item); border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--surface) 78%, var(--bg)); }
.wsp-mobile-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-item); flex-wrap: wrap; }
.wsp-mobile-title { font-size: var(--t-label-size); font-weight: 700; letter-spacing: -0.005em; color: var(--ink-2); }
.wsp-mobile-copy { font-size: var(--t-caption-size); line-height: 1.45; color: var(--ink-4); }
.wsp-mobile-tabs { display: flex; gap: var(--space-inline); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wsp-mobile-tabs::-webkit-scrollbar { display: none; }
.wsp-mobile-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-inline); min-width: 0; max-width: min(260px, calc(100vw - 140px)); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 600; }
.wsp-mobile-tab.on { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wsp-mobile-tabic { display: inline-flex; flex-shrink: 0; }
.wsp-mobile-tablabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-mobile-pane { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
/* tab switcher + new-tab menu */
.tabsw-bd { position: fixed; inset: 0; z-index: 240; background: rgba(40,30,22,.18); }
.tabsw { position: fixed; z-index: 241; left: 50%; top: 14vh; transform: translateX(-50%); width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 30px 70px -20px rgba(40,28,20,.5); overflow: hidden; }
.tabsw-search { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--ink) 7%, transparent)); color: var(--ink-3); }
.tabsw-search input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: var(--t-body-size); color: var(--ink); }
.tabsw-list { max-height: 320px; overflow-y: auto; padding: var(--space-tight); }
.tabsw-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; cursor: pointer; text-align: left; }
.tabsw-row.on { background: var(--accent-soft); }
.tabsw-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.tabsw-l { flex: 1; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.tabsw-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); background: var(--surface-2); padding: 1px var(--space-tight); border-radius: 5px; }
.wtab.entity .wtab-l { max-width: 130px; }
.tabsw-empty { padding: var(--space-block); text-align: center; color: var(--ink-4); font-size: var(--t-label-size); }
.tabnew { position: fixed; z-index: 241; left: 50%; top: 16vh; transform: translateX(-50%); width: min(460px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 30px 70px -20px rgba(40,28,20,.5); padding: var(--space-group); }
.tabnew-h { font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-item); }
.tabnew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-inline); }
.tabnew-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-inline); border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.tabnew-tile:hover { border-color: transparent; transform: none; box-shadow: none; background: var(--bg-hover); }
.tabnew-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; background: transparent !important; }
.tabnew-l { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.content { overflow-y: auto; overflow-x: hidden; min-height: 0; min-width: 0; }
.content-pad, .screen-pad { padding: var(--space-section) var(--space-page) 80px; max-width: 1480px; margin: 0 auto; width: 100%; min-width: 0; box-sizing: border-box; }
.content-pad > *, .screen-pad > * { min-width: 0; max-width: 100%; }
.content img, .content video, .content iframe,
.content-pad img, .content-pad video, .content-pad iframe,
.screen-pad img, .screen-pad video, .screen-pad iframe { max-width: 100%; }
.content-pad.narrow, .screen-pad.narrow { max-width: 1100px; }
@media (max-width: 1180px){ .content-pad, .screen-pad { padding: var(--space-block) var(--space-block) 64px; } }
@media (max-width: 760px){ .content-pad, .screen-pad { padding: var(--space-group) var(--space-group) 56px; } }

/* ── .sgrid — the canonical card/tile grid ──────────────────────────────
   One grid for every card or tile collection in the app. The column count
   is a designed integer at each breakpoint, never emergent from auto-fill,
   so cards land on predictable widths and every screen in the app reflows
   at the same moment. This is what makes a grid read as Apple/Linear
   rather than "whatever fits".

   Do NOT write repeat(auto-fill, minmax(Npx, 1fr)) in new code. It makes
   column count and card width continuous functions of the viewport, so no
   card is ever a width anyone chose. See DESIGN.md → Spacing & Grid Law.

   Usage:
     <div className="sgrid">          4 → 3 → 2 → 1   default cards
     <div className="sgrid dense">    6 → 4 → 3 → 2   thumbnail walls, files
     <div className="sgrid wide">     3 → 2 → 2 → 1   large preview cards

   Canonical breakpoints (the ONLY four): 1480 · 1180 · 900 · 640.

   minmax(0, 1fr) not 1fr: a bare 1fr resolves to minmax(auto, 1fr), so one
   long unbroken string in a single card can blow its track out and
   desynchronize the whole grid.

   Specificity note: the variant rules below are .sgrid.dense / .sgrid.wide
   (0,2,0), so the media-query overrides must repeat both classes or the
   base .sgrid (0,1,0) rule can never win against them. */
.sgrid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  align-items: start;
  min-width: 0;
}
.sgrid.dense { --grid-gutter: var(--sp-3); --grid-cols: var(--grid-cols-dense); }
.sgrid.wide { --grid-cols: var(--grid-cols-wide); }

@media (max-width: 1180px) {
  .sgrid { --grid-cols: 3; }
  .sgrid.dense { --grid-cols: 4; }
  .sgrid.wide { --grid-cols: 2; }
}
@media (max-width: 900px) {
  .sgrid { --grid-cols: 2; }
  .sgrid.dense { --grid-cols: 3; }
  .sgrid.wide { --grid-cols: 2; }
}
@media (max-width: 640px) {
  .sgrid { --grid-gutter: var(--sp-4); --grid-cols: 1; }
  .sgrid.dense { --grid-gutter: var(--sp-2); --grid-cols: 2; }
  .sgrid.wide { --grid-gutter: var(--sp-4); --grid-cols: 1; }
}

/* Vertical rhythm helpers. A section heading owns more space above it than
   below, which is what groups a heading with its content instead of
   striping the page evenly. */
.s-section + .s-section { margin-top: var(--space-section); }
.s-section > :is(h2, h3, .h-serif, .sec-label):first-child { margin-top: 0; }
.s-stack { display: flex; flex-direction: column; gap: var(--space-block); min-width: 0; }
.s-stack.group { gap: var(--space-group); }
.s-stack.item { gap: var(--space-item); }
@media (max-width: 760px){
  .tabnew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row,
  .ws-method-grid,
  .acct-plans,
  .pd-cv-grid,
  .appr-meta-grid,
  .docblk-columns,
  .docblk-columns.three,
  .dw-fin-cols,
  .dw-fin-cr-foot,
  .dw-proj-leads,
  .md-facts,
  .role-grid,
  .pto-typegrid,
  .team-pto-grid,
  .dw-fin-leg.cols2,
  .mkt-stats,
  .mkt-grid2,
  .mo-grid,
  .dw-mw-stats,
  .dos-gallery,
  .act-side-stats,
  .sd-overview,
  .sd-files,
  .sd-metarow,
  .dw-week,
  .dw-moods,
  .ks-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .tmetrics,
  .mstats,
  .pmetrics,
  .plan-stats,
  .rpt-kpirow,
  .mo-stats,
  .tm-stats,
  .emp-stats,
  .dos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wsp-mobile-bar { padding: var(--space-item) var(--space-item) var(--space-inline); gap: var(--space-inline); }
  .wsp-mobile-head { align-items: flex-start; }
  .wsp-mobile-copy { width: 100%; }
  .ph-actions { width: 100%; justify-content: flex-start !important; }
  .cp-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .cp-preview { grid-column: auto; position: static; }
  .dl-list-hd,
  .dl-row { grid-template-columns: minmax(0, 1fr) 96px 40px; gap: var(--space-inline); padding-left: var(--space-item); padding-right: var(--space-item); }
  .dl-list-hd > :nth-child(3),
  .dl-list-hd > :nth-child(4),
  .dl-row > :nth-child(3),
  .dl-row > :nth-child(4) { display: none; }
}

/* Team Cover generation */
.team-cover-modal { max-height: min(820px, calc(100vh - 24px)); }
.team-cover-modal .modal-body { padding: 0; overflow: hidden; }
.team-cover-layout { display:grid; grid-template-columns:minmax(0, .92fr) minmax(320px, 1.08fr); min-height:520px; }
.team-cover-compose, .team-cover-gallery { min-width:0; padding:20px; }
.team-cover-compose { border-right:1px solid var(--border-subtle); overflow-y:auto; }
.team-cover-gallery { background:var(--bg-sunken); overflow-y:auto; }
.team-cover-preview { position:relative; height:104px; border-radius:var(--r-card); overflow:hidden; background:var(--bg); margin-bottom:var(--space-item); }
.team-cover-preview img { width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; filter:saturate(.92); }
.team-cover-preview span { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:var(--space-tight); color:#fff; background:rgba(20,22,16,.72); border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.02em; }
.team-cover-lock-copy { display:flex; gap:var(--space-inline); align-items:flex-start; color:var(--ink-2); font-size:var(--t-micro-size); line-height:1.5; padding-bottom:var(--space-group); border-bottom:1px solid var(--border-subtle); }
.team-cover-lock-copy svg { flex:none; color:var(--accent); margin-top:2px; }
.team-cover-meta { display:flex; justify-content:space-between; gap:var(--space-item); padding:var(--space-item) 0 var(--space-inline); color:var(--ink-3); font-size:var(--t-micro-size); text-transform:uppercase; letter-spacing:.055em; }
.team-cover-meta b { color:var(--ink-2); font-weight:700; }
.team-cover-label { display:block; color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; margin:var(--space-inline) 0 var(--space-inline); }
.team-cover-backgrounds { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-inline); }
.team-cover-backgrounds button { border:1px solid var(--border-subtle); background:transparent; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); text-align:left; color:var(--ink); cursor:pointer; font:inherit; transition:border-color .14s, background .14s; }
.team-cover-backgrounds button:hover { background:var(--bg-hover); border-color:var(--border); }
.team-cover-backgrounds button.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.team-cover-backgrounds b, .team-cover-backgrounds small { display:block; }
.team-cover-backgrounds b { font-size:var(--t-micro-size); }
.team-cover-backgrounds small { color:var(--ink-3); font-size:var(--t-micro-size); line-height:1.35; margin-top:var(--space-tight); }
.team-cover-prompt { width:100%; resize:vertical; min-height:88px; font-size:var(--t-caption-size); line-height:1.45; }
.team-cover-confirm { display:flex; gap:var(--space-inline); align-items:flex-start; margin-top:var(--space-item); color:var(--ink-2); font-size:var(--t-micro-size); line-height:1.45; }
.team-cover-confirm input { margin-top:2px; flex:none; }
.team-cover-error { display:flex; align-items:flex-start; gap:var(--space-inline); margin-top:var(--space-item); color:var(--st-blocked); font-size:var(--t-micro-size); line-height:1.45; }
.team-cover-error svg { flex:none; margin-top:2px; }
.team-cover-error .btn { margin-left:auto; flex:none; }
.team-cover-gallery-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); margin-bottom:var(--space-item); }
.team-cover-gallery-head b, .team-cover-gallery-head span { display:block; }
.team-cover-gallery-head b { font-size:var(--t-label-size); }
.team-cover-gallery-head span { color:var(--ink-3); font-size:var(--t-micro-size); margin-top:var(--space-tight); }
.team-cover-gallery-head strong { color:var(--ink-2); font-size:var(--t-caption-size); white-space:nowrap; }
.team-cover-grid { display:grid; grid-template-columns:1fr; gap:var(--space-item); }
.team-cover-card { position:relative; overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--r-card); background:var(--bg); }
.team-cover-card.active { border-color:var(--accent); }
.team-cover-card img { display:block; width:100%; aspect-ratio:3 / 1; object-fit:cover; }
.team-cover-active { position:absolute; left:9px; top:9px; color:#fff; background:rgba(20,22,16,.72); border-radius:6px; padding:var(--space-tight) var(--space-inline); font-size:var(--t-micro-size); font-weight:700; }
.team-cover-card-actions { display:flex; justify-content:flex-end; gap:var(--space-tight); padding:var(--space-inline); }
.team-cover-gallery-empty { min-height:220px; display:grid; place-items:center; text-align:center; color:var(--ink-3); font-size:var(--t-caption-size); padding:var(--space-block); }
.team-cover-gate { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px; color:var(--ink-2); }
.team-cover-gate > svg { color:var(--accent); margin-bottom:var(--space-item); }
.team-cover-gate h3 { margin:0 0 var(--space-inline); color:var(--ink); font:600 20px/1.2 var(--font-serif, Georgia, serif); }
.team-cover-gate p { max-width:400px; margin:0 0 var(--space-group); font-size:var(--t-label-size); line-height:1.55; }
@media (max-width: 760px){
  .team-cover-modal { max-height:calc(100vh - 16px); }
  .team-cover-modal .modal-body { overflow-y:auto; }
  .team-cover-layout { display:block; min-height:0; }
  .team-cover-compose { border-right:0; border-bottom:1px solid var(--border-subtle); }
  .team-cover-gallery { min-height:300px; }
}
@media (max-width: 520px){
  .tabnew-grid,
  .tmetrics,
  .mstats,
  .pmetrics,
  .plan-stats,
  .rpt-kpirow,
  .mo-stats,
  .tm-stats,
  .emp-stats,
  .dos-kpis,
  .dos-posts,
  .team-grid,
  .grp-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .dl-list-hd { display: none; }
  .dl-row { grid-template-columns: minmax(0, 1fr) 40px; gap: var(--space-inline); }
  .dl-row > :nth-child(2) { display: none; }
  .dl-row-name { gap: var(--space-inline); }
  .dl-row-thumb { width: 34px; height: 44px; }
  .dl-row-sub { line-height: 1.35; }
}

/* split layout: main + right rail */
.with-rail { display: grid; grid-template-columns: 1fr var(--rail-w); gap: 28px; align-items: start; }
.with-rail > * { min-width: 0; }   /* let the 1fr column shrink so rows never bleed into the rail */
@media (max-width: 1240px){ .with-rail { grid-template-columns: 1fr; } .with-rail > .rail { display: none; } }

/* ============================================================
   Typography helpers
   ============================================================ */
.page-title {
  font-family: var(--font-title);
  font-size: var(--t-title-size);            /* canonical page H1 — matches .th-title */
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
  font-feature-settings: "cv11", "ss01";
}
.page-sub { color: var(--ink-3); font-size: var(--fs-125); margin: 2px 0 0; }
.page-title-serif { font-family: var(--font-serif); font-weight: 440; font-size: var(--t-display-size); letter-spacing: -0.02em; line-height: 1.1; font-feature-settings: normal; }
.h-serif { font-family: var(--font-serif); font-weight: 440; letter-spacing: -0.015em; }
.sec-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.eyebrow { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); }

/* ============================================================
   Primitives
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline);
  height: 38px; padding: 0 var(--space-group);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform var(--transition-micro);
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(.97); transition: transform var(--transition-micro); }
.icn { display: block; }
/* icon-only buttons: kill UA padding so glyphs sit dead-center */
.tb-icon-btn, .gs-face-add, .gs-icon-btn, .th-icon, .dw-icon-btn, .res-pin-x, .act-hover-acts button { padding: 0; }
/* Flaticon "check" ink is slightly low-right in its em-box. Use PIXELS — % transforms
   on ::before collapse when the pseudo has no explicit box (reads as identity). */
.icn.fi-rr-check::before { transform: translate(-0.5px, -1px); }
/* Same asymmetric-ink issue on the self-contained check-circle / checkbox glyphs
   (used by Icon name="checkCircle") — the tick inside the drawn circle/square sits
   visibly high and right of true-center without this. */
.icn.fi-rr-check-circle::before { transform: translate(-1px, -1px); }
.icn.fi-rr-checkbox::before { transform: translate(-1px, -1.5px); }
/* Icon-based check boxes: kill line-box/baseline drift so the lifted check glyph
   stays geometrically centered inside the square (place-items alone isn't enough).
   ──────────────────────────────────────────────────────────────────────────────
   THIS RULE IS A BANDAID AND IS BEING RETIRED. It existed because eighteen
   hand-rolled check boxes each reimplemented one 16px square and each drifted
   the same way. window.FormKit (s-formkit.jsx) centres by layout, so a migrated
   control needs nothing here. Three entries were dropped on 2026-08-16 as their
   classes were retired: .kb-check-box (-> ChecklistItem), .rq-check-box (->
   Checkbox), .sn-check-box (-> ChecklistItem tone="custom").
   DELETE THIS RULE ENTIRELY once the remaining names below are migrated. Do not
   add a new name to it — build the primitive in the kit instead.
   Migration queue: claude/specs/form-kit.md. */
.nbk-checkbox, .plan-check-box, .plan-chk-box, .plan-shot-box,
.tp-check-box, .pv-check-box, .fk-box, .dlk-check, .tdw-sub-check,
.ds-check, .ds-cb, .dst-cb, .poll-radio, .ib-av-check .ib-av-box, .fx-check {
  line-height: 0;
}
.nbk-checkbox .icn, .plan-check-box .icn,
.plan-chk-box .icn, .plan-shot-box .icn, .tp-check-box .icn, .pv-check-box .icn,
.fk-box .icn, .dlk-check .icn, .tdw-sub-check .icn,
.ds-check .icn, .ds-cb .icn, .dst-cb .icn, .poll-radio .icn, .ib-av-check .ib-av-box .icn,
.fx-check .icn {
  display: block;
}
.btn .icn { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-600); }
.btn.secondary { background: var(--surface); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--surface); border-color: var(--ink-4); }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.danger { background: var(--st-blocked-soft); color: var(--st-blocked-ink); box-shadow: var(--shadow-sm); }
.btn.danger:hover { background: color-mix(in srgb, var(--st-blocked) 88%, #000); }
.btn.ghost.danger { color: var(--st-blocked); }
.btn.ghost.danger:hover { background: color-mix(in srgb, var(--st-blocked) 12%, transparent); }
/* The v2 block at the end of this file already overrides this, but leaving the
   stale opacity here meant two rules disagreeing about the same state. One
   truth: the fill lives here, and the v2 block no longer has to undo it. */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-border); pointer-events: none; box-shadow: none; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--accent-fg); animation: btnspin .6s linear infinite;
}
.btn.secondary.loading::after, .btn.ghost.loading::after { color: var(--ink-2); }
@keyframes btnspin { to { transform: rotate(360deg); } }
.btn.sm { height: 32px; padding: 0 var(--space-item); font-size: var(--fs-tiny); }
.btn.lg { height: 46px; padding: 0 20px; font-size: var(--fs-body); }
.btn.icon { width: 38px; padding: 0; }
.btn.icon.sm { width: 32px; height: 32px; }

/* ---- Smart tips (portaled) ----
   SmartTipHost mounts body.has-smart-tips and portals `.smart-tip`.
   CSS ::after tip bubbles are suppressed so tips never clip under chrome
   or overflow:hidden ancestors. Prefer data-tip + aria-label; never title=. */
/* IMPORTANT: `:not(.switch)`. This rule exists to hide CSS ::after tooltip
   BUBBLES once SmartTipHost is portaling real ones, but it was written as a
   blanket over every pseudo-element on every [data-tip] element — and a
   pseudo-element is not always a bubble. `.switch` builds its KNOB out of
   ::after, so every switch carrying data-tip (18 of them across weather,
   conditions and the context engine) rendered as a solid pill with no knob:
   on and off looked identical apart from colour, and there was nothing on
   screen to grab. Nothing errored; the control simply lost its moving part.
   The gate that found the rest: .nbk-imgblk-rs and .nbk-float-rs draw the
   diagonal grip marks on notebook resize handles, and .vr-marker::before is an
   inset:-12px HIT AREA — deleting that one did not just look wrong, it made
   video-review markers measurably harder to click.
   Any future component whose ::after is structural rather than a bubble must
   be added here too — see scripts/verify-tip-pseudo-collisions.mjs, which
   fails the build when a new one appears instead of letting it go unnoticed. */
body.has-smart-tips [data-tip]:not(.switch, .nbk-imgblk-rs, .nbk-float-rs, .vr-marker)::after,
body.has-smart-tips [data-tip]:not(.switch, .nbk-imgblk-rs, .nbk-float-rs, .vr-marker)::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.smart-tip {
  position: fixed;
  left: 0; top: 0;
  z-index: 9200;
  max-width: min(280px, calc(100vw - 24px));
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  transform-origin: center bottom;
  animation: smartTipIn var(--dur-micro) var(--ease);
}
/* Explanation-length tips wrap; label-length tips keep the single-line
   ellipsis they were designed for. Set by SmartTipHost on text length. */
.smart-tip.wrap { white-space: normal; overflow: visible; text-overflow: clip; font-weight: 500; }
.smart-tip[data-place="below"] { transform-origin: center top; }
.dark .smart-tip { background: #f5f5f5; color: #202124; }
@keyframes smartTipIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .smart-tip { animation: none; }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  height: 24px; padding: 0 var(--space-inline);
  font-size: var(--t-micro-size); font-weight: 550; border-radius: var(--r-pill);
  white-space: nowrap; letter-spacing: -0.005em;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.chip.soft { background: var(--bg-sunken); color: var(--ink-2); }

/* AI Observations — quiet, click-if-interested chip + expanded panel. */
.aria-obs-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border: 1px solid var(--notif-border); border-radius: var(--r-pill); background: var(--notif-bg); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; }
.aria-obs-chip:hover { background: var(--notif-icon-hover-bg); }
.aria-obs-panel { background: var(--notif-bg); border: 1px solid var(--notif-border); border-radius: var(--notif-radius); box-shadow: var(--notif-shadow); padding: var(--notif-pad); }
.aria-obs-title { font-size: var(--notif-title-size); font-weight: var(--notif-title-weight); color: var(--ink); }
.aria-obs-detail { margin-top: var(--space-tight); font-size: var(--notif-body-size); color: var(--ink-3); line-height: 1.4; }
.aria-obs-trust { margin-top: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); }
.aria-obs-actions { margin-top: var(--space-inline); display: flex; gap: var(--space-inline); }

/* Soft Confirmation — a deleted row fades out instead of vanishing instantly. */
.soft-removing { opacity: 0; transform: scale(.98); transition: opacity var(--dur-over) var(--ease), transform var(--dur-over) var(--ease); pointer-events: none; }

/* Hover Resume — small "last edited → Continue" popover on a project card. */
.fy-resume-pop { position: fixed; z-index: 700; background: var(--notif-bg); border: 1px solid var(--notif-border); border-radius: var(--r-md); box-shadow: var(--notif-shadow); padding: var(--space-inline) var(--space-item); animation: fyResumeIn var(--dur-micro) var(--ease) backwards; }
@keyframes fyResumeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
.fy-resume-ago { font-size: var(--t-caption-size); color: var(--ink-3); }
.fy-resume-cta { margin-top: var(--space-tight); display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
.fy-resume-cta:hover { text-decoration: underline; }

/* Dynamic Icons — a settled invoice's row icon tints to confirm paid. */
.ivb-thumb.paid { color: var(--c-olive); }

/* Smart Clipboard — the "you copied more than this" paste menu. */
.smart-paste-menu { position: fixed; z-index: 1199; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); padding: var(--space-tight); display: flex; flex-direction: column; min-width: 180px; animation: pop-menu var(--dur-over) var(--ease); transform-origin: top; }
.smart-paste-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: 6px; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.smart-paste-menu button:hover { background: var(--bg-hover); }
.smart-paste-v { font-weight: 500; color: var(--ink-4); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hidden Details — due date's deepest hover stage. */
.tdw-due-creator { color: var(--ink-4); font-weight: 500; }

/* Smarter Dragging — the Kanban column under the dragged card glows softly. */
.kbn-col-target { background: var(--bg-sunken); border-radius: var(--r-md); transition: background var(--dur-micro) var(--ease); }

/* ---- Notion-style colored tags ---- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  height: 22px; padding: 0 var(--space-inline); max-width: 100%;
  font-size: var(--t-micro-size); font-weight: 550; border-radius: 6px;
  white-space: nowrap; letter-spacing: -0.005em;
  background: var(--tag-stone-bg); color: var(--tag-stone-fg);
}
.tag .tag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--tag-stone-dot); }
.tag .tag-label { overflow: hidden; text-overflow: ellipsis; }
.tag.stone { background: var(--tag-stone-bg); color: var(--tag-stone-fg); }  .tag.stone .tag-dot { background: var(--tag-stone-dot); }
.tag.sage  { background: var(--tag-sage-bg);  color: var(--tag-sage-fg); }   .tag.sage .tag-dot  { background: var(--tag-sage-dot); }
.tag.olive { background: var(--tag-olive-bg); color: var(--tag-olive-fg); }  .tag.olive .tag-dot { background: var(--tag-olive-dot); }
.tag.blue  { background: var(--tag-blue-bg);  color: var(--tag-blue-fg); }   .tag.blue .tag-dot  { background: var(--tag-blue-dot); }
.tag.teal  { background: var(--tag-teal-bg);  color: var(--tag-teal-fg); }   .tag.teal .tag-dot  { background: var(--tag-teal-dot); }
.tag.gold  { background: var(--tag-gold-bg);  color: var(--tag-gold-fg); }   .tag.gold .tag-dot  { background: var(--tag-gold-dot); }
.tag.clay  { background: var(--tag-clay-bg);  color: var(--tag-clay-fg); }   .tag.clay .tag-dot  { background: var(--tag-clay-dot); }
.tag.mauve { background: var(--tag-mauve-bg); color: var(--tag-mauve-fg); }  .tag.mauve .tag-dot { background: var(--tag-mauve-dot); }
.tag.plum  { background: var(--tag-plum-bg);  color: var(--tag-plum-fg); }   .tag.plum .tag-dot  { background: var(--tag-plum-dot); }
.tag.rust  { background: var(--tag-rust-bg);  color: var(--tag-rust-fg); }   .tag.rust .tag-dot  { background: var(--tag-rust-dot); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.card.raised { box-shadow: var(--shadow-sm); }
.card.flat { box-shadow: none; border-color: var(--border-subtle); }
.card-pad { padding: 20px; }

.input {
  height: var(--control-h); padding: 0 var(--space-item);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--fs-body); width: 100%; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--accent); }
textarea.input { height: auto; padding: var(--space-inline) var(--space-item); resize: vertical; line-height: 1.5; }

/* range slider — themed so it never renders a native white track in dark mode */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--bg-sunken);
  border-radius: 999px; outline: none; cursor: pointer; accent-color: var(--accent);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]:focus-visible { outline: none; box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-tight);
  font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-3);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 5px; font-family: var(--font-ui);
}

.divider { height: 1px; background: var(--border); width: 100%; }
.row { display: flex; align-items: center; gap: var(--space-inline); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.stack { display: flex; flex-direction: column; }
.row > *, .between > *, .stack > * { min-width: 0; }
.grow { flex: 1; min-width: 0; }

/* segmented tabs */
.seg { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: var(--space-tight); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  height: 30px; padding: 0 var(--space-item); border: none; background: transparent; flex-shrink: 0; white-space: nowrap;
  border-radius: var(--r-control); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: background .14s, color .14s;
}
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button:hover:not(.active) { color: var(--ink); }

/* underline tabs — horizontally slidable so they never overflow a drawer/modal */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border-subtle); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none; padding: var(--space-item) 0; font-size: var(--fs-body); flex-shrink: 0; white-space: nowrap; scroll-snap-align: start;
  font-weight: 500; color: var(--ink-3); position: relative; transition: color .14s;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button.active { color: var(--ink); }
.tabs button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1.5px;
  background: var(--accent); border-radius: 2px;
}

/* ============================================================
   Slidable tab bars — every horizontal tab row scrolls instead of
   overflowing its drawer/modal. Buttons never shrink; scrollbar hidden.
   ============================================================ */
.docs-tabs, .sc-tabs, .inv-tabs, .inv-dtabs, .em-tabs, .act-tabs, .ct-tabs,
.an-tabs, .rq-tabs, .tax-tabs, .md-tabs, .mdt-tabs, .fx-ins-tabs, .appr-tabs,
.wsc-tabs, .tpi-tabs, .dw-sched-tabs, .pv-tabs, .pv-rail-tabs, .rx-detail-tabs,
.cv-lib-tabs, .cv-cpanel-tabs, .sc-prev-tabs, .seo-seg-tabs, .rq-portal-tabs,
.set-tabs, .md-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.docs-tabs::-webkit-scrollbar, .sc-tabs::-webkit-scrollbar, .inv-tabs::-webkit-scrollbar,
.inv-dtabs::-webkit-scrollbar, .em-tabs::-webkit-scrollbar, .act-tabs::-webkit-scrollbar,
.ct-tabs::-webkit-scrollbar, .an-tabs::-webkit-scrollbar, .rq-tabs::-webkit-scrollbar,
.tax-tabs::-webkit-scrollbar, .md-tabs::-webkit-scrollbar, .mdt-tabs::-webkit-scrollbar,
.fx-ins-tabs::-webkit-scrollbar, .appr-tabs::-webkit-scrollbar, .wsc-tabs::-webkit-scrollbar,
.tpi-tabs::-webkit-scrollbar, .dw-sched-tabs::-webkit-scrollbar, .pv-tabs::-webkit-scrollbar,
.pv-rail-tabs::-webkit-scrollbar, .rx-detail-tabs::-webkit-scrollbar, .cv-lib-tabs::-webkit-scrollbar,
.cv-cpanel-tabs::-webkit-scrollbar, .sc-prev-tabs::-webkit-scrollbar, .seo-seg-tabs::-webkit-scrollbar,
.rq-portal-tabs::-webkit-scrollbar, .set-tabs::-webkit-scrollbar { display: none; }
.docs-tabs > button, .sc-tabs > button, .inv-tabs > button, .inv-dtabs > button,
.em-tabs > button, .act-tabs > button, .ct-tabs > button, .an-tabs > button,
.rq-tabs > button, .tax-tabs > button, .md-tabs > button, .mdt-tabs > button,
.fx-ins-tabs > button, .appr-tabs > button, .wsc-tabs > button, .tpi-tabs > button,
.dw-sched-tabs > button, .pv-tabs > button, .pv-rail-tabs > button, .rx-detail-tabs > button,
.cv-lib-tabs > button, .cv-cpanel-tabs > button, .sc-prev-tabs > button, .seo-seg-tabs > button,
.rq-portal-tabs > button, .set-tabs > button {
  flex-shrink: 0; white-space: nowrap; scroll-snap-align: start;
}

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; background: var(--bg-sunken);
  overflow: hidden;
  display: inline-grid; place-items: center; flex-shrink: 0;
  font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); overflow: hidden;
}
.avatar.xs { width: 26px; height: 26px; font-size: var(--t-micro-size); }
.avatar.sm { width: 31px; height: 31px; font-size: var(--t-caption-size); }
.avatar.lg { width: 52px; height: 52px; font-size: var(--t-heading-size); }
.avatar.xl { width: 78px; height: 78px; font-size: var(--t-display-size); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.av-glyph { width: 100%; height: 100%; display: block; }
.avatar.av-sil { color: transparent; }
.avatar.av-face { background-repeat: no-repeat; background-size: 455%; color: transparent; }
.av-grid-faces { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

/* reporting & approvals */
.rep { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item); align-items: start; }
@media (max-width: 900px){ .rep { grid-template-columns: 1fr; } }
.rep-policy { grid-column: 1 / -1; }
.rep-badge { font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); }
.rep-badge.on { background: var(--st-done-soft); color: var(--st-done); }
.rep-modes { display: flex; flex-direction: column; gap: var(--space-inline); }
.rep-mode { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; text-align: left; transition: all .12s; }
.rep-mode:hover { border-color: var(--border-strong); }
.rep-mode.on { border-color: var(--accent); background: var(--accent-soft); }
.rep-mode-ic { width: 32px; height: 32px; border-radius: var(--r-control); background: var(--bg-active); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.rep-mode.on .rep-mode-ic { background: var(--accent); color: var(--accent-fg); }
.rep-mode-name { display: block; font-size: var(--t-label-size); font-weight: 600; }
.rep-mode-desc { display: block; font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.rep-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-fg); }
.rep-radio.on { background: var(--accent); border-color: var(--accent); }
.rep-fallback { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); font-size: var(--t-caption-size); color: var(--ink-2); cursor: pointer; }
.rep-fallback input { width: 16px; height: 16px; accent-color: var(--accent); }
.rep-leadrow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 0; }
.rep-select { height: 32px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-size: var(--t-caption-size); padding: 0 var(--space-inline); max-width: 150px; }
.rep-chart-card { grid-column: 1 / -1; }
.rep-offnow { color: var(--c-gold); font-weight: 600; font-size: var(--t-caption-size); }
.rep-cover-note { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); font-size: var(--t-micro-size); color: var(--ink-3); }
.rep-cover-pref { display: flex; align-items: flex-start; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); cursor: pointer; user-select: none; line-height: 1.35; }
.rep-cover-pref input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.rep-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-inline); }
.rep-node { border: 1px solid var(--border-subtle); border-radius: var(--r-control); padding: var(--space-item); background: var(--bg-sidebar); }
.rep-super { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.rep-super-n { font-size: var(--t-label-size); font-weight: 650; }
.rep-super-t { font-size: var(--t-micro-size); color: var(--ink-3); }
.rep-reports { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.rep-rep { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border-subtle); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border-radius: 999px; }
.appr-route-note { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); background: transparent; padding: var(--space-tight) 0; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.appr-route-note .icn { color: var(--accent); flex-shrink: 0; }
.appr-route-note b { font-weight: 650; }

/* advanced team page — sections, dept tags, groups */
.team-sec-hd { display: flex; align-items: center; justify-content: space-between; margin: var(--space-block) 0 var(--space-item); }
.team-sec-hd .sec-title { display: flex; align-items: center; gap: var(--space-inline); }
.team-sec-hd .org-dot { width: 10px; height: 10px; border-radius: 50%; }
.team-sec-n { min-width: 20px; height: 20px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 600; display: grid; place-items: center; }
.team-sec-lead { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-group); }
@media (max-width: 1080px){ .team-grid, .grp-grid { grid-template-columns: repeat(2,minmax(0, 1fr)) !important; } }
.dept-tag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.dept-tag.sm { font-size: var(--t-micro-size); padding: 2px var(--space-inline); }
.dept-tag-dot { width: 7px; height: 7px; border-radius: 50%; }
.dept-tag.lead { color: var(--ink-2); background: transparent; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px var(--space-inline); }

.grp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-item); }
.grp-card { text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--space-group); box-shadow: var(--shadow-xs); transition: border-color .14s, box-shadow .14s; }
.grp-card:not(.new):hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.grp-card-ic { width: 38px; height: 38px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.grp-card-n { font-size: var(--t-body-size); font-weight: 650; }
.grp-card-depts { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.grp-card.new { display: flex; flex-direction: column; gap: var(--space-tight); align-items: flex-start; justify-content: center; border-style: dashed; cursor: pointer; color: var(--ink-3); }
.grp-card.new:hover { border-color: var(--border-strong); color: var(--ink); }

/* new-group modal bits */
.grp-name { display: flex; align-items: center; gap: var(--space-inline); }
.grp-name-ic { width: 36px; height: 36px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.grp-ic { width: 34px; height: 34px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.grp-ic.on { border-color: var(--border-strong); background: var(--bg-active); color: var(--ink); }
.grp-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; color: #fff; display: grid; place-items: center; }
.grp-color.on { box-shadow: 0 0 0 2px var(--ink-3); }
.grp-depts { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.grp-dept { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer; }
.grp-dept-n { font-size: var(--t-micro-size); color: var(--ink-4); background: var(--bg-active); padding: 1px var(--space-tight); border-radius: 999px; }
.grp-preview { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); background: var(--bg-sidebar); border-radius: var(--r-control); }

/* task attachment chip */
.task-att { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.task-att .icn { color: var(--ink-4); }
/* smaller list checkbox */
.trow .tcheck { width: 17px; height: 17px; border-radius: 50%; border-width: 1.5px; justify-self: center; }
.trow .tcheck svg { width: 10px; height: 10px; }
/* Tasks list row: a real SQUARE select checkbox, distinct from the round
   complete-toggle (.tcheck-todo). Scoped to .trow-tasks (not bare .trow, which
   Docs/Canvas/Misc/Portal also use) via an extra grid column so it never
   shifts their layout. Hover-revealed; stays visible once any row is selected
   (see KNOWN_ISSUES: round complete icon mistaken for a select checkbox). */
.trow.trow-tasks { grid-template-columns: 16px 20px 20px 1fr auto; }
.trow.trow-tasks.sel { background: var(--accent-soft); }
.trow-selchk {
  width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--border-strong);
  background: var(--surface); display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--accent-fg); flex-shrink: 0; justify-self: center; opacity: 0;
  transition: opacity .12s, background .12s, border-color .12s;
}
.trow-selchk svg { width: 10px; height: 10px; }
.trow-tasks:hover .trow-selchk,
.trow-tasks.sel-active .trow-selchk,
.trow-selchk.on { opacity: 1; }
.trow-selchk:hover { border-color: var(--accent); }
.trow-selchk.on { background: var(--accent); border-color: var(--accent); }
/* saved views bar */
.tv-bar { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; margin: 0 0 var(--space-group); }
.tv-pill { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 99px; overflow: hidden; transition: border-color .12s, background .12s; }
.tv-pill.on { border-color: var(--accent); background: var(--accent-soft); }
.tv-pill > .tv-pill-main { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; cursor: pointer; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); padding: var(--space-tight) var(--space-item); }
.tv-pill.on > .tv-pill-main { color: var(--accent-700); padding-right: var(--space-inline); }
.tv-pill > .tv-pill-main:hover { color: var(--ink); }
.tv-bar > .tv-pill.on:first-child { padding: var(--space-tight) var(--space-item); }
.tv-bar > button.tv-pill { gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); padding: var(--space-tight) var(--space-item); cursor: pointer; }
.tv-bar > button.tv-pill.on { color: var(--accent-700); }
.tv-pill-menu { display: inline-flex; }
.tv-pill-menu .btn.icon { width: 24px; height: 28px; color: var(--ink-4); }
.tv-save { display: inline-flex; align-items: center; gap: var(--space-tight); border: 1px dashed var(--border-strong); background: none; border-radius: 99px; cursor: pointer; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); padding: var(--space-tight) var(--space-item); transition: border-color .12s, color .12s, background .12s; }
.tv-save:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* Projects saved views read as lightweight view tabs, not icon-backed pills. */
.projects-page .tv-pill {
  position: relative;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.projects-page .tv-pill.on {
  border-color: transparent;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.projects-page .tv-bar > .tv-pill.on:first-child { padding-block: 6px; }
.projects-page .tv-pill-menu .btn.icon,
.projects-page .tv-pill-menu .btn.icon:hover,
.projects-page .tv-pill-menu .btn.icon:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.projects-page .tv-pill-menu .btn.icon:hover,
.projects-page .tv-pill-menu .btn.icon:focus-visible { color: var(--ink-2); }
/* sidebar saved views */
.sb-views { margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.sb-view-item .sb-item-label { font-size: var(--t-caption-size); }
.sb-view-item .sb-view-where { margin-left: auto; color: var(--sb-ink-quiet); display: inline-grid; place-items: center; flex-shrink: 0; }
.sb-view-item:hover .sb-view-where { color: var(--sb-ink-icon); }
/* smooth premium drag clone */
.kbn-clone, .trow-clone { left: 0; top: 0; will-change: transform; transition: none; }
.kbn-clone .kbn-card { box-shadow: 0 22px 50px -12px rgba(32,33,36,.45); transform: none; }
.trow-clone .trow { box-shadow: 0 22px 44px -14px rgba(32,33,36,.4); }
/* MOTION EXCEPTION (SET 9 8) — drag settle. Keeps its own curve on purpose.
   --ease (.32,.72,0,1) starts almost instantly and decelerates hard, which is
   right for a surface ARRIVING but wrong for a card that is following a finger
   already in motion: the near-zero initial slope reads as the card lagging the
   cursor. This gentler ease-out keeps the card under the pointer. */
body.is-dragging .kbn-card, body.is-dragging .trow { transition: transform .19s cubic-bezier(.2,.8,.2,1); }

/* calendar view */
.tcal { border-radius: var(--r-lg); }
.tcal-stickyhead { position: sticky; top: 0; z-index: 5; background: var(--surface); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.tcal-hd { padding: var(--space-item) var(--space-group); }
.tcal-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.tcal-chip.warn { color: var(--st-blocked); background: var(--st-blocked-soft); }
.tcal-cell { min-height: 108px; padding: var(--space-inline); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.tcal-cell.unset { background: var(--bg-sidebar); }
.tcal-cell:not(.unset):hover { background: var(--bg-hover); cursor: pointer; }
.md-recap-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-inline); padding: 28px var(--space-block); }
.md-recap-empty-ic { display: grid; place-items: center; color: var(--ink-4); margin-bottom: var(--space-tight); }
.md-recap-empty-t { font-size: var(--t-strong-size); font-weight: 650; color: var(--ink); }
.md-recap-empty-s { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.5; max-width: 300px; margin-bottom: var(--space-inline); }
.mini-cal-nav { display: inline-flex; gap: 2px; }
.mini-cal-nav button { width: 24px; height: 24px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .12s; }
.mini-cal-nav button:hover { background: var(--bg-hover); color: var(--ink); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7,minmax(0, 1fr)); gap: 2px; text-align: center; }
.mini-cal-dow { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); padding: var(--space-tight) 0; }
.mini-cal-empty { }
.mini-cal-day { position: relative; border: none; background: none; font: inherit; font-size: var(--t-caption-size); color: var(--ink); padding: var(--space-tight) 0; border-radius: var(--r-control); cursor: pointer; transition: background .12s, color .12s; aspect-ratio: 1; display: grid; place-items: center; }
.mini-cal-day:hover { background: var(--bg-hover); }
.mini-cal-day.sel { background: var(--accent-soft); color: var(--accent-700); font-weight: 650; }
.mini-cal-day.today { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.mini-cal-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.mini-cal-day.today .mini-cal-dot { background: var(--accent-fg); }

/* ── Org chart (Team → Organization) ── */
.oc { user-select: none; -webkit-user-select: none; margin-bottom: var(--space-block); }
.oc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin-bottom: var(--space-item); flex-wrap: wrap; }
.oc-bar-l { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.oc-bar-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--accent); flex-shrink: 0; }
.oc-bar-l b { font-size: var(--t-strong-size); display: block; }
.oc-bar-hint { font-size: var(--t-caption-size); color: var(--ink-4); }
.oc-advtog { display: inline-flex; align-items: center; gap: var(--space-tight); height: 32px; padding: 0 var(--space-item); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .12s, color .12s; position: relative; }
.oc-advtog:hover { background: var(--bg-hover); color: var(--accent); }
.oc-advtog.on { background: var(--bg-hover); color: var(--accent); }
.oc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 0 20px; align-items: start; }
.oc-col { border: none; border-radius: 0; background: transparent; padding: var(--space-tight) 2px var(--space-item); display: flex; flex-direction: column; gap: var(--space-inline); transition: background .14s; min-width: 0; border-right: 1px solid var(--border-subtle); }
.oc-col:last-child { border-right: none; }
.oc-col.over { border-color: transparent; box-shadow: none; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: var(--r-control); }
.oc-col-hd { display: flex; align-items: center; gap: var(--space-inline); padding-bottom: var(--space-inline); border-bottom: 1px solid var(--border-subtle); }
.oc-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.oc-col-name { font-weight: 650; font-size: var(--t-label-size); color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-col-n { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); background: transparent; border-radius: 0; padding: 0; }
.oc-col-lead { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); padding: 2px 2px var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.oc-col-lead-lbl { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 9.5px; color: var(--ink-4); }
.oc-col-lead-n { font-weight: 600; color: var(--ink-2); }
.oc-col-body { display: flex; flex-direction: column; gap: 0; min-height: 24px; }
.oc-col-empty { font-size: var(--t-caption-size); color: var(--ink-4); text-align: left; padding: var(--space-item) 2px; border: none; border-radius: 0; }
.oc-col.over .oc-col-empty { border-color: transparent; color: var(--accent-700); }
.oc-col-invite { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight); border: none; background: none; border-radius: var(--r-control); padding: var(--space-inline) var(--space-tight); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background .12s, color .12s; }
.oc-col-invite:hover { color: var(--accent); background: var(--bg-hover); }
.oc-card { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); background: transparent; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; }
.oc-card:last-child { border-bottom: none; }
.oc-card.draggable { cursor: grab; }
.oc-card:hover { background: var(--bg-hover); box-shadow: none; }
.oc-card.dragging { opacity: .45; }
.oc-card-grip { color: var(--ink-4); display: grid; place-items: center; flex-shrink: 0; opacity: 0; transition: opacity .12s; cursor: grab; }
.oc-card:hover .oc-card-grip { opacity: .7; }
.oc-card-av { flex-shrink: 0; }
.oc-card-main { flex: 1; min-width: 0; }
.oc-card-n { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--space-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-card-sub { font-size: var(--t-micro-size); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-away { display: inline-flex; align-items: center; gap: var(--space-tight); margin-left: var(--space-tight); font-weight: 650; color: color-mix(in srgb, var(--c-gold) 76%, var(--ink)); }
.oc-lead-pill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-gold); background: transparent; padding: 0 2px; border-radius: 0; flex-shrink: 0; }
.oc-role { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; padding: 0 2px; border-radius: 0; flex-shrink: 0; color: var(--ink-3); background: transparent; }
.oc-role.click { border: none; cursor: pointer; font: inherit; font-size: var(--t-micro-size); font-weight: 650; border-radius: 6px; padding: var(--space-tight) var(--space-tight); }
.oc-role.click:hover { background: var(--bg-hover); filter: none; color: var(--accent); }
.oc-role.admin { color: var(--c-clay); background: transparent; }
.oc-role.owner { color: var(--c-gold); background: transparent; }
.oc-role.guest { color: var(--c-blue); background: transparent; }
.oc-role.client { color: var(--c-mauve); background: transparent; }
.oc-roles { margin-top: var(--space-group); border: none; border-top: 1px solid var(--border-subtle); border-radius: 0; background: transparent; padding: var(--space-group) 2px var(--space-tight); }
.oc-roles-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink); margin-bottom: var(--space-item); flex-wrap: wrap; }
.oc-roles-sub { font-size: var(--t-caption-size); font-weight: 400; color: var(--ink-4); flex-basis: 100%; }
.oc-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; }
.oc-rolecard { border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: var(--space-item) 2px; background: transparent; }
.oc-rolecard-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); margin-bottom: var(--space-inline); }
.oc-caps { display: flex; flex-direction: column; gap: var(--space-tight); }
.oc-cap { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-2); }
.oc-cap.yes svg { color: var(--st-done, #739837); flex-shrink: 0; }
.oc-cap.no { color: var(--ink-4); }
.oc-cap.no svg { color: var(--c-clay); flex-shrink: 0; }
.oc-advtog[data-tip]::after, .oc .btn.icon[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.oc-advtog[data-tip]:hover::after, .oc .btn.icon[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.oc .btn.icon[data-tip] { position: relative; }

/* ── Roles & permissions matrix (deep role system) ── */
.rp { user-select: none; -webkit-user-select: none; }
.rp-head { margin-bottom: var(--space-item); }
.rp-head-l { display: flex; align-items: flex-start; gap: var(--space-item); }
.rp-head-ic { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.rp-head-l b { font-size: var(--t-body-size); display: block; }
.rp-head-sub { font-size: var(--t-caption-size); color: var(--ink-4); display: block; margin-top: 1px; }
.rp-roles { display: flex; gap: var(--space-inline); flex-wrap: wrap; margin-bottom: var(--space-item); }
.rp-roletab { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item) var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; min-width: 0; }
.rp-roletab:hover { border-color: var(--border-strong); }
.rp-roletab.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.rp-roletab-ic { width: 26px; height: 26px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; color: var(--ink-3); background: var(--bg-active); }
.rp-roletab-ic.owner { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); }
.rp-roletab-ic.admin { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }
.rp-roletab-ic.member { color: var(--accent); background: var(--accent-soft); }
.rp-roletab-ic.limited { color: var(--c-teal); background: color-mix(in srgb, var(--c-teal) 14%, transparent); }
.rp-roletab-ic.guest { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 14%, transparent); }
.rp-roletab-ic.client { color: var(--c-mauve); background: color-mix(in srgb, var(--c-mauve) 14%, transparent); }
.rp-roletab-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rp-roletab-n { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.rp-roletab-cnt { font-size: var(--t-micro-size); color: var(--ink-4); }
.rp-roletab-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px var(--space-tight); border-radius: 5px; flex-shrink: 0; }
.rp-roletab-badge.full { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 16%, transparent); }
.rp-roletab-badge.custom { color: var(--accent); background: var(--accent-soft); }
.rp-panel { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.rp-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-item) var(--space-group); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.rp-panel-hd-l { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.rp-panel-title { font-size: var(--t-body-size); font-weight: 650; display: flex; align-items: center; gap: var(--space-inline); }
.rp-panel-desc { font-size: var(--t-caption-size); color: var(--ink-4); margin-top: 1px; }
.rp-custom-pill { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 2px var(--space-tight); border-radius: 5px; }
.rp-panel-hd-r { display: flex; align-items: center; gap: var(--space-inline); }
.rp-oncount { font-size: var(--t-caption-size); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rp-note { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-group); font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.5; }
.rp-note svg { color: var(--accent); flex-shrink: 0; }
.rp-features { padding: var(--space-tight) var(--space-group) var(--space-group); }
.rp-feat-group { margin-top: var(--space-item); }
.rp-feat-sec { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: var(--space-inline); }
/* Collapsible section header. The matrix is ~54 toggles across 9 sections; opening
   it fully on arrival is what made a capable screen read as overwhelming. Sections
   holding a deviation from the role default open themselves (see the JSX). */
.rp-feat-sec-btn { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: transparent; border-top: 1px solid var(--border-subtle); border-radius: 0; cursor: pointer; text-align: left; transition: color var(--dur-micro) var(--ease); }
.rp-feat-sec-btn:hover { color: var(--ink-2); }
.rp-feat-sec-btn svg { flex-shrink: 0; }
.rp-feat-sec-n { flex: 1; min-width: 0; }
.rp-feat-sec-meta { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.rp-feat-group.is-open .rp-feat-sec-btn { color: var(--ink-2); }
.rp-note-default { padding: var(--space-item) var(--space-tight) var(--space-tight); }
.rp-feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-inline); }
.rp-feat { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--bg-sidebar); cursor: pointer; text-align: left; font: inherit; transition: border-color .12s, background .12s; }
.rp-feat:not(:disabled):hover { border-color: var(--accent); }
.rp-feat-ic { width: 24px; height: 24px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--bg-active); color: var(--ink-3); flex-shrink: 0; }
.rp-feat.on .rp-feat-ic { background: var(--accent-soft); color: var(--accent); }
.rp-feat-n { flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 550; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-feat.on .rp-feat-n { color: var(--ink); }
.rp-feat:disabled { cursor: default; background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.rp-feat.plocked { opacity: .6; }
.rp-feat.changed { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--bg-sidebar)); }
.rp-feat-lock { color: var(--ink-4); display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.rp-feat-lock-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rp-feat-always { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); flex-shrink: 0; }
/* .rp-toggle renders through the shared switch skin — see LEGACY TOGGLE SKINS. */
.inv-prefill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--accent); margin-bottom: var(--space-tight); }
.inv-prefill svg { color: var(--accent); }
.tcal-cell.droptarget { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tcal-daynum { font-size: var(--t-caption-size); font-weight: 600; margin-bottom: var(--space-tight); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.tcal-ev.over { box-shadow: inset 0 0 0 1px var(--st-blocked-soft); }
/* A running billable timer on a calendar event pill — the full elapsed clock
   lives in the hover tooltip and rail (real space); the pill itself only has
   room for a quiet ring, same accent-tint language as the sw-live card/row. */
.tcal-ev.live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.tcal-more { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); padding: 2px var(--space-inline); cursor: pointer; border-radius: 5px; }
.tcal-more:hover { background: var(--bg-active); color: var(--ink); }
.tcal-legend { display: flex; align-items: center; gap: var(--space-item); flex-wrap: wrap; padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border); }
.tcal-leg { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-2); }

/* calendar hover tooltip */
.caltip { position: fixed; z-index: 340; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-item) var(--space-item); animation: caltip-in var(--dur-micro) var(--ease); }
@keyframes caltip-in { from { opacity: 0; transform: translateY(3px); } }
/* calendar day popover (+N more) */
.caldp-scrim { position: fixed; inset: 0; z-index: 1290; }
.caldp { position: fixed; z-index: 1300; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); overflow: hidden; animation: caltip-in var(--dur-micro) var(--ease); }
.caldp-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-inline); border-bottom: 1px solid var(--border-subtle); }
.caldp-hd-t { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.caldp-hd-n { font-size: var(--t-micro-size); color: var(--ink-4); }
.caldp-x { margin-left: auto; width: 24px; height: 24px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); cursor: pointer; display: grid; place-items: center; }
.caldp-x:hover { background: var(--bg-hover); color: var(--ink); }
.caldp-list { max-height: 320px; overflow-y: auto; padding: var(--space-tight); display: flex; flex-direction: column; gap: 1px; }
.caldp-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; text-align: left; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.caldp-row:hover { background: var(--bg-hover); }
.caldp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.caldp-name { font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); }
.caldp-main { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; }
.caldp-type { display: block; max-width: 100%; font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-4); }
.caldp-row.over .caldp-name { color: var(--st-blocked); }
.caldp-add { display: flex; align-items: center; justify-content: center; gap: var(--space-inline); width: calc(100% - 10px); margin: var(--space-tight) var(--space-tight) var(--space-tight); padding: var(--space-inline); border: 1px dashed var(--border-strong); background: none; border-radius: var(--r-control); color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.caldp-add:hover { background: var(--accent-soft); border-color: var(--accent); }

/* calendar month/week segmented toggle */
.tcal-viewseg { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-control); padding: 2px; gap: 2px; }
.tcal-viewseg button { border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); cursor: pointer; transition: background .12s, color .12s; }
.tcal-viewseg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

/* calendar week view */
.tcal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 460px; }
.tcal-wcol { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 0 0 var(--space-inline); min-width: 0; display: flex; flex-direction: column; cursor: pointer; transition: background .12s; }
.tcal-wcol:last-child { border-right: none; }
.tcal-wcol:hover { background: var(--bg-hover); }
.tcal-wcol.offmonth { background: color-mix(in srgb, var(--bg-sunken) 50%, transparent); }
.tcal-wcol.offmonth .tcal-wnum { color: var(--ink-4) !important; }
.tcal-wcol.today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.tcal-wcol.droptarget { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tcal-whd { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-item) var(--space-tight) var(--space-inline); position: sticky; top: 0; }
.tcal-wdow { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.tcal-wnum { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 var(--space-tight); border-radius: 999px; font-size: var(--t-body-size); font-weight: 650; }
.tcal-wbody { display: flex; flex-direction: column; gap: var(--space-tight); padding: 0 var(--space-inline); flex: 1; min-width: 0; }
.tcal-wadd { display: none; align-items: center; justify-content: center; gap: var(--space-tight); margin-top: var(--space-tight); padding: var(--space-inline); border: 1px dashed var(--border); background: none; border-radius: var(--r-control); color: var(--ink-4); font: inherit; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; }
.tcal-wcol:hover .tcal-wadd { display: flex; }
.tcal-wadd:hover { color: var(--accent); border-color: var(--accent); }

/* kanban card — clickable due date */
.kbn-due { border: none; background: none; font: inherit; font-size: var(--t-micro-size); gap: var(--space-tight); padding: 2px var(--space-tight); margin: -2px -4px; border-radius: 6px; cursor: pointer; transition: background .12s; }
.kbn-due:hover { background: var(--bg-hover); color: var(--ink-2); }
/* list row + timeline — clickable due date */
.trow-due { border: none; background: none; font: inherit; font-size: var(--t-caption-size); gap: var(--space-tight); padding: var(--space-tight) var(--space-tight); margin: -4px -4px; border-radius: 6px; cursor: pointer; text-align: left; transition: background .12s; }
.trow-due:hover { background: var(--bg-hover); color: var(--ink-2); }
.ttl-bar-date { display: none; align-items: center; justify-content: center; border: none; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-3); width: 18px; height: 18px; border-radius: 5px; cursor: pointer; flex-shrink: 0; padding: 0; transition: background .12s, color .12s; }
.ttl-bar:hover .ttl-bar-date { display: inline-flex; }
.ttl-bar-date:hover { background: var(--accent-soft); color: var(--accent); }

/* shared due-date popover */
.duepop { position: fixed; z-index: 1300; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); overflow: hidden; animation: caltip-in var(--dur-micro) var(--ease); }
.duepop-modern { overflow-y: auto; scrollbar-width: thin; }
.duepop-modern .duepop-rels { display: flex; gap: var(--space-tight); padding: var(--space-item) var(--space-item) var(--space-tight); }
.duepop-rel { flex: 1; border: none; background: var(--bg-sunken); border-radius: 999px; font: inherit; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); padding: var(--space-inline) var(--space-inline); cursor: pointer; transition: background .12s, color .12s; }
.duepop-rel:hover { color: var(--accent); background: var(--accent-soft); }
.duepop-foot { padding: 2px var(--space-item) var(--space-item); }
.duepop-clear { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; padding: var(--space-tight) 0; }
.duepop-clear:hover { color: var(--st-blocked); }

/* dual-column date picker — preset list (left) linked to a real calendar (right) */
.ddp-pop { position: fixed; z-index: 1300; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); overflow: hidden; animation: caltip-in var(--dur-micro) var(--ease); }
.ddp-presets { flex: none; width: 168px; padding: var(--space-inline); display: flex; flex-direction: column; gap: 2px; background: var(--bg-sunken); border-right: 1px solid var(--border-subtle); overflow-y: auto; }
.ddp-preset { display: flex; align-items: center; gap: var(--space-inline); border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); padding: var(--space-inline); border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.ddp-preset:hover { background: var(--bg-hover); color: var(--ink); }
.ddp-preset.on { background: var(--accent-soft); color: var(--accent-700); }
.ddp-preset-check { flex: none; width: 13px; height: 13px; display: grid; place-items: center; color: var(--accent); }
.ddp-cal { flex: 1 1 auto; min-width: 0; }
.ddp-cal .mini-cal { padding: var(--space-item); }
.caltip-topbar { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.caltip-proj { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.caltip-projn { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.caltip-title { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); line-height: 1.3; }
.caltip-type { font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4); margin-top: 2px; }
.caltip-sub { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.45; margin-top: var(--space-tight); }
.caltip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); }
.caltip-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: 999px; }
.caltip-chip.blk { color: var(--st-blocked); background: var(--st-blocked-soft); }
.caltip-chip.soft { color: var(--ink-3); background: var(--bg-sunken); }
.caltip-chip.live { color: var(--accent-700, var(--accent)); background: color-mix(in srgb, var(--accent) 15%, transparent); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.caltip-due { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.caltip-foot { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.caltip-asn { font-size: var(--t-micro-size); color: var(--ink-2); font-weight: 550; }
.caltip-open { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--accent); }

/* task drag grip — never let touch-scroll hijack a drag */
.trow-grip { touch-action: none; }

/* ── First-run view picker (Tasks + Projects) ──────────────────────────────
   One question, five recognisable screens. The wireframe previews carry all the
   meaning, so the shell around them stays silent: no tinted cards, no section
   rules. The selected card is the ONE accent moment in the dialog, and it earns
   it by also tinting its own preview (--tvm-* below), so the answer is legible
   from across the room. */
.tonb-scrim { position: fixed; inset: 0; z-index: 1100; background: var(--modal-scrim-bg); backdrop-filter: var(--modal-scrim-blur); -webkit-backdrop-filter: var(--modal-scrim-blur); display: grid; place-items: center; padding: var(--space-block); overflow: auto; animation: caltip-in var(--dur-over) var(--ease); }
.tonb { width: min(1020px, 94vw); background: var(--surface); border: 1px solid var(--modal-rim); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); padding: var(--space-section) var(--space-section) var(--space-block); text-align: center; animation: tonb-pop var(--dur-over) var(--ease); }
.tonb-title { font-size: var(--t-title-size); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; margin: 0; }
.tonb-sub { font-size: var(--t-label-size); color: var(--ink-3); line-height: 1.55; margin: var(--space-inline) auto var(--space-section); max-width: 480px; }
.tonb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-item); text-align: left; }
.tonb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tonb-card { display: flex; flex-direction: column; gap: var(--space-inline); padding: var(--space-item); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.tonb-card:hover { border-color: var(--border-strong); transform: none; box-shadow: none; background: var(--surface); }
/* 1px border + 1px inset ring = a 2px selected edge without a layout shift. */
.tonb-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tonb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tonb-mini { position: relative; display: block; width: 100%; border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.tonb-card.on .tonb-mini { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tonb-card-check { position: absolute; top: var(--space-inline); right: var(--space-inline); width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.tonb-card-l { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.tonb-card-l svg, .tonb-card-l .icn { color: var(--ink-3); }
.tonb-card.on .tonb-card-l svg, .tonb-card.on .tonb-card-l .icn { color: var(--accent); }
.tonb-card-d { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.45; }
.tonb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-section); }
.tonb-skip { border: none; background: none; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 550; cursor: pointer; padding: var(--space-inline) var(--space-tight); }
.tonb-skip:hover { color: var(--ink); }
@media (max-width: 900px){ .tonb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px){ .tonb-grid, .tonb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── View wireframes (.tvm) ────────────────────────────────────────────────
   A miniature of the real screen inside a chromed window, so a view is chosen
   by recognition rather than by reading its description. Three greys and one
   hairline do all the work; the hairline under the title bar is the only one,
   and it earns its place by being what makes the frame read as a window.
   Geometry under ~24px is deliberately raw px, not grid tokens — these are
   glyph-scale marks inside an illustration, not layout. */
.tvm { --tvm-line: color-mix(in srgb, var(--ink) 17%, transparent);
       --tvm-ink:  color-mix(in srgb, var(--ink) 34%, transparent);
       --tvm-fill: color-mix(in srgb, var(--ink) 6%, transparent);
       display: flex; flex-direction: column; width: 100%; aspect-ratio: 16 / 11; }
.tvm, .tvm * { box-sizing: border-box; }
.tonb-card.on .tvm { --tvm-line: color-mix(in srgb, var(--accent) 32%, transparent);
                     --tvm-ink:  color-mix(in srgb, var(--accent) 62%, transparent);
                     --tvm-fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.tvm-top { flex: none; display: flex; align-items: center; gap: var(--space-tight); height: var(--sp-4); padding: 0 var(--space-inline); border-bottom: 1px solid var(--tvm-line); }
.tvm-top i { width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--tvm-ink); opacity: .8; }
.tvm-b { flex: 1 1 auto; min-height: 0; display: flex; padding: var(--space-inline); }

/* List — checkbox rows, one already ticked, meta at the right edge */
.tvm-list { flex-direction: column; justify-content: center; gap: var(--space-inline); }
.tvm-lrow { display: flex; align-items: center; gap: var(--space-tight); }
.tvm-ck { flex: none; width: 6px; height: 6px; border-radius: 2px; border: 1px solid var(--tvm-ink); }
.tvm-tx { width: 62%; height: 4px; border-radius: var(--r-pill); background: var(--tvm-line); }
.tvm-pip { margin-left: auto; width: 12px; height: 4px; border-radius: var(--r-pill); background: var(--tvm-fill); }
.tvm-lrow:nth-child(1) .tvm-ck { background: var(--tvm-ink); }
.tvm-lrow:nth-child(2) .tvm-tx { width: 74%; }
.tvm-lrow:nth-child(3) .tvm-tx { width: 54%; }
.tvm-lrow:nth-child(4) .tvm-tx { width: 68%; }

/* Board — three status columns, cards stacked inside them */
.tvm-kanban { gap: var(--space-tight); align-items: stretch; }
.tvm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); padding: var(--space-tight); border-radius: 4px; background: var(--tvm-fill); overflow: hidden; }
.tvm-colh { flex: none; width: 62%; height: 4px; border-radius: var(--r-pill); background: var(--tvm-ink); }
.tvm-kcard { flex: none; height: 16%; min-height: 9px; border-radius: 3px; background: var(--surface); border: 1px solid var(--tvm-ink); }

/* Calendar — weekday strip over a four-week grid, three days carrying work */
.tvm-cal { flex-direction: column; gap: var(--space-tight); }
.tvm-dow { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-tight); }
.tvm-dow i { height: 4px; border-radius: var(--r-pill); background: var(--tvm-ink); }
.tvm-days { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-tight); }
.tvm-days i { position: relative; border-radius: 2px; background: var(--tvm-fill); }
.tvm-days i.ev { background: color-mix(in srgb, var(--tvm-ink) 22%, transparent); }
.tvm-days i.ev::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 4px; border-radius: var(--r-pill); background: var(--tvm-ink); }

/* Table — a real header row over uneven columns (the one hairline a dense
   data table is allowed under the Hairline Budget) */
.tvm-table { flex-direction: column; justify-content: center; gap: var(--space-tight); }
.tvm-trow { display: grid; grid-template-columns: 2.2fr 1fr 1fr .6fr; gap: var(--space-tight); align-items: center; }
.tvm-trow i { height: 4px; border-radius: var(--r-pill); background: var(--tvm-line); }
.tvm-thead { padding-bottom: var(--space-tight); border-bottom: 1px solid var(--tvm-ink); }
.tvm-thead i { height: 4px; background: var(--tvm-ink); }

/* Timeline — project names beside gantt bars on a faint week rule */
.tvm-timeline { gap: var(--space-inline); }
.tvm-tlnames { flex: 0 0 26%; display: grid; grid-auto-rows: 1fr; gap: var(--space-tight); align-items: center; }
.tvm-tlnames i { height: 4px; border-radius: var(--r-pill); background: var(--tvm-line); }
.tvm-tlnames i:nth-child(2){ width: 74%; }
.tvm-tlnames i:nth-child(3){ width: 88%; }
.tvm-tlnames i:nth-child(4){ width: 66%; }
.tvm-tltrack { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-tight); align-items: center;
  background-image: repeating-linear-gradient(to right, var(--tvm-line) 0 1px, transparent 1px 25%); }
.tvm-bar { height: 5px; border-radius: var(--r-pill); background: var(--tvm-ink); }
.tvm-bar.b0 { grid-column: 1 / 5; }
.tvm-bar.b1 { grid-column: 3 / 8; }
.tvm-bar.b2 { grid-column: 2 / 6; }
.tvm-bar.b3 { grid-column: 5 / 9; }

/* task settings — default view picker */
.tset-views { display: flex; flex-direction: column; gap: var(--space-inline); }
.tset-view { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border: 1.5px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; transition: border-color .14s, background .14s; }
.tset-view:hover { border-color: var(--border-strong); }
.tset-view.on { border-color: var(--accent); background: var(--accent-soft); }
.tset-view-ic { width: 36px; height: 36px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-2); flex-shrink: 0; }
.tset-view.on .tset-view-ic { background: var(--accent); color: var(--accent-fg); }
.tset-view-l { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.tset-view-d { display: block; font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
/* The row became a container (choose-as-default + pin-to-header), so the click
   target is the inner button and the row keeps the framing. */
.tset-view-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-item); border: none; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.tset-view-pin { width: 30px; height: 30px; flex-shrink: 0; border: none; background: none; border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink-4); cursor: pointer; transition: background .12s, color .12s; }
.tset-view-pin:hover { background: var(--bg-hover); color: var(--ink-2); }
.tset-view-pin.on { color: var(--accent); }
.tset-view-grouphd { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-top: var(--space-inline); }

/* timeline view */
.ttl-hd { padding: var(--space-item) var(--space-group); }
.ttl-legend { gap: var(--space-item); }
.ttl-leg { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-2); }
.ttl-row { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--border-subtle); }
.ttl-daysrow { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 3; background: var(--surface); }
.ttl-side { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); min-width: 0; }
.ttl-n { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px var(--space-inline); border-radius: 999px; flex-shrink: 0; }
.ttl-track { position: relative; display: grid; grid-template-columns: repeat(31,minmax(0, 1fr)); padding: var(--space-inline) 0; }
.ttl-days { padding: var(--space-inline) 0; }
.ttl-day { text-align: center; font-size: var(--t-micro-size); color: var(--ink-4); border-left: 1px solid var(--border-subtle); }
.ttl-day.today { color: var(--accent); font-weight: 700; }
.ttl-day.wk { background: var(--bg-sunken); }
.ttl-grid { border-left: 1px solid var(--border-subtle); }
.ttl-grid.wk { background: color-mix(in srgb, var(--ink) 2%, transparent); }
.ttl-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .55; z-index: 2; }
.ttl-bar { position: absolute; display: flex; align-items: center; gap: var(--space-tight); height: 24px; padding: 0 var(--space-inline); border: 1px solid; border-radius: var(--r-control); cursor: grab; overflow: visible; box-shadow: var(--shadow-xs); transition: transform .12s, box-shadow .12s; }
.ttl-bar:hover { transform: none; box-shadow: none; filter: brightness(0.98); z-index: 3; }
.ttl-bar.over { outline: 1.5px solid var(--st-blocked); outline-offset: -1px; }
.ttl-bar { touch-action: none; user-select: none; }
.ttl-bar.dragging { cursor: grabbing; z-index: 6; transform: none; box-shadow: var(--shadow-lg); opacity: .97; transition: none; }
.ttl-bar-name { pointer-events: none; }
.ttl-bar-tip { position: absolute; top: -23px; left: 0; background: var(--ink); color: #fff; font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: 6px; white-space: nowrap; box-shadow: var(--shadow-sm); pointer-events: none; }
.ttl-bar-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ttl-bar-name { font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ttl-bar-dur { font-size: 9.5px; font-weight: 600; color: var(--ink-4); flex-shrink: 0; }
.avatar-stack { display: inline-flex; }
.avatar-stack > * { margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; }
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-more {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 600;
}

/* ---- presence ---- */
.presence-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bg); background: var(--ink-4); box-sizing: content-box; }
.presence-dot.online { background: var(--lime); }
.presence-dot.sm { width: 8px; height: 8px; }
.presence-dot.xs { width: 7px; height: 7px; border-width: 1.5px; }
.topbar .presence-dot { border-color: var(--surface); }
.presence-pile { display: inline-flex; align-items: center; padding: 2px 0; }
.presence-pile-btn { display: inline-flex; align-items: center; border: none; background: none; padding: 0; cursor: pointer; }
.presence-pile-btn > * { margin-left: -8px; transition: margin var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.presence-pile-btn > *:first-child { margin-left: 0; }
.presence-pile:hover .presence-pile-btn > * { margin-left: -4px; }
.presence-pile .presence-invite-slot { margin-left: -8px; transition: margin var(--dur-micro) var(--ease), border-color .14s, color .14s, background .14s, transform .14s; }
.presence-pile .presence-invite-slot--solo { margin-left: 0; }
.presence-pile:hover .presence-invite-slot:not(.presence-invite-slot--solo) { margin-left: -4px; }
.presence-invite-slot {
  width: 31px; height: 31px; padding: 0; border-radius: 50%;
  border: 1.5px dashed var(--border-strong); background: var(--surface);
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer;
  flex-shrink: 0; position: relative; box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-subtle) 70%, transparent);
}
.presence-invite-slot--solo { border-style: dashed; }
.presence-invite-slot:hover, .presence-invite-slot:focus-visible {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.presence-invite-slot:focus-visible { outline: none; }
.topbar .presence-invite-slot[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-3px); background: var(--ink); color: var(--surface);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.topbar .presence-invite-slot[data-tip]:hover::after, .topbar .presence-invite-slot[data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .35s;
}
.presence-more { width: 26px; height: 26px; border: 2px solid var(--surface); }
.presence-pop { box-shadow: var(--shadow-lg); }
.presence-pop-foot { padding: var(--space-inline) var(--space-inline) var(--space-inline); border-top: 1px solid var(--border-subtle); }
.presence-pop-invite { width: 100%; justify-content: center; gap: var(--space-tight); font-weight: 600; }
.presence-row.muted-row { opacity: .72; }
.presence-grouphd { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-inline) var(--space-inline) var(--space-tight); }
.presence-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); }
.presence-row:hover { background: var(--bg-hover); }
.presence-name { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-role { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }

/* ============================================================
   Stat card (dashboard tiles)
   ============================================================ */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.stat-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.stat-ico .icn { width: 20px; height: 20px; }
.stat-val { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 460; letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.delta { font-size: var(--fs-tiny); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-tight); }
.delta.up { color: var(--lime); }
.delta.down { color: var(--st-blocked); }

/* progress bar */
.bar { height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); transition: width .5s var(--ease); }

/* mini list rows */
.lrow { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.lrow:last-child { border-bottom: none; }

/* table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-3);
  padding: var(--space-inline) var(--space-item); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr[draggable] { cursor: grab; }
.tbl tbody tr.tbl-drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
.tbl tbody tr.tbl-drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }

/* thumbnail */
.thumb { border-radius: var(--r-control); object-fit: cover; background: var(--bg-sunken); flex-shrink: 0; }

/* icon-tile (rounded square w/ tinted bg) */
.itile { border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; overflow: hidden;
}
/* ---- header ----
   REMOVED 2026-08-14: `.sb-hd` / `.sb-logo-full` / `.sb-logo-mark` and the
   brand-header controls. The rail now opens on the workspace switcher; the
   Stelaah wordmark, the collapse button and the Customize button are gone from
   the top (Customize moved into the pinned bottom tool row, collapse lives in
   the tab bar). Do not restore a header here — see s-sidebar.jsx.
   NOTE: `.sb-brand` in s-sites.css is the WEBSITE BUILDER's site header, a
   different component that happens to share the prefix. Leave it alone. */

/* ---- Stelaah plane loader (boot / auth / page loading) ----
   Two variants (the orbiting "squadron loop" was removed — too busy/cutesy):
   'flock' (2a, big/layered) for the full-app boot splash, and 'breeze' (5c,
   calm/level) for every other wait (auth gate, in-app module/route loads).

   MOTION LAW (2026-08-30) — these animate ONLY `transform` and `opacity`.
   NEVER put a loader back on `offset-path` / `offset-distance` (or on
   stroke-dashoffset, width, top/left). Two things broke when we did:
   1. Motion-path is ticked on the MAIN thread. This page compiles 547
      `text/babel` JSX files in the browser, so the main thread is saturated for
      20-40s at exactly the moment a loader is on screen. On a slower machine
      the planes stopped dead and a normal wait read as a crashed app. Only
      `transform` and `opacity` are handed to the compositor thread by every
      engine, so they keep flying while the main thread is busy.
   2. `offset-path: path()` has no fallback. On a browser that lacks it nothing
      applied at all and the five planes stacked, motionless, in the top-left
      corner.
   The keyframes below are GENERATED from the original quadratic Bezier paths,
   arc-length parameterised (offset-distance was a fraction of arc length, not
   of the Bezier's t) with the old ease-in-out baked into the sample times, so
   the timing function here is `linear`. Flight matches the previous animation
   to within ~2px. Regenerate rather than hand-editing a keyframe.

   Structure: `.st-flyer` is a full-size wrapper that carries the horizontal
   travel + the fade; the `<svg>` inside carries the vertical arc + the heading.
   Splitting them is what lets both stay pure transforms. Keep the
   `animation-delay` identical on the pair or the plane leaves its path. */
.st-planes{
  --st-brand: #739837;
  position: relative; margin: 0 auto;
  color: var(--st-brand); flex-shrink: 0;
}
.st-planes .st-sky{ position: absolute; inset: 0; }

/* -- variant: flock (2a) — big & layered, reserved for the full-app boot splash --
   Planes follow their heading (the old `offset-rotate: auto`), baked into the
   rotate() in the -y keyframes. */
.st-planes.v-flock{ width: 300px; height: 130px; }
.st-planes.v-flock .st-flyer{position:absolute;inset:0;animation-duration:3.2s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.st-planes.v-flock .st-flyer svg{position:absolute;left:0;top:0;display:block;overflow:visible;animation-duration:3.2s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.st-planes.v-flock .st-flyer:nth-child(1){animation-name:st-fk1-x;animation-delay:0s}
.st-planes.v-flock .st-flyer:nth-child(1) svg{width:17%;height:17%;opacity:.9;animation-name:st-fk1-y;animation-delay:0s}
.st-planes.v-flock .st-flyer:nth-child(2){animation-name:st-fk2-x;animation-delay:-.7s}
.st-planes.v-flock .st-flyer:nth-child(2) svg{width:10%;height:10%;opacity:.5;animation-name:st-fk2-y;animation-delay:-.7s}
.st-planes.v-flock .st-flyer:nth-child(3){animation-name:st-fk3-x;animation-delay:-1.35s}
.st-planes.v-flock .st-flyer:nth-child(3) svg{width:15%;height:15%;opacity:.8;animation-name:st-fk3-y;animation-delay:-1.35s}
.st-planes.v-flock .st-flyer:nth-child(4){animation-name:st-fk4-x;animation-delay:-1.98s}
.st-planes.v-flock .st-flyer:nth-child(4) svg{width:9%;height:9%;opacity:.42;animation-name:st-fk4-y;animation-delay:-1.98s}
.st-planes.v-flock .st-flyer:nth-child(5){animation-name:st-fk5-x;animation-delay:-2.62s}
.st-planes.v-flock .st-flyer:nth-child(5) svg{width:12%;height:12%;opacity:.68;animation-name:st-fk5-y;animation-delay:-2.62s}

@keyframes st-fk1-x{0%{transform:translate3d(-13.17%,0,0);opacity:0}10%{transform:translate3d(-11.24%,0,0);opacity:1}20%{transform:translate3d(-5.02%,0,0);opacity:1}30%{transform:translate3d(6.13%,0,0);opacity:1}40%{transform:translate3d(22.05%,0,0);opacity:1}50%{transform:translate3d(41.08%,0,0);opacity:1}60%{transform:translate3d(60.3%,0,0);opacity:1}70%{transform:translate3d(76.82%,0,0);opacity:1}80%{transform:translate3d(88.88%,0,0);opacity:1}88%{transform:translate3d(94.92%,0,0);opacity:1}90%{transform:translate3d(95.93%,0,0);opacity:0.83}100%{transform:translate3d(98.17%,0,0);opacity:0}}
@keyframes st-fk1-y{0%{transform:translate3d(0,84.95px,0) rotate(-32.28deg)}10%{transform:translate3d(0,81.41px,0) rotate(-30.78deg)}20%{transform:translate3d(0,71.26px,0) rotate(-26.32deg)}30%{transform:translate3d(0,57.17px,0) rotate(-19.53deg)}40%{transform:translate3d(0,43.87px,0) rotate(-11.91deg)}50%{transform:translate3d(0,35.51px,0) rotate(-5.09deg)}60%{transform:translate3d(0,33.11px,0) rotate(0.1deg)}70%{transform:translate3d(0,34.77px,0) rotate(3.62deg)}80%{transform:translate3d(0,37.76px,0) rotate(5.78deg)}88%{transform:translate3d(0,39.75px,0) rotate(6.75deg)}90%{transform:translate3d(0,40.12px,0) rotate(6.91deg)}100%{transform:translate3d(0,40.95px,0) rotate(7.25deg)}}
@keyframes st-fk2-x{0%{transform:translate3d(-9.67%,0,0);opacity:0}10%{transform:translate3d(-7.51%,0,0);opacity:1}20%{transform:translate3d(-0.71%,0,0);opacity:1}30%{transform:translate3d(10.96%,0,0);opacity:1}40%{transform:translate3d(27.02%,0,0);opacity:1}50%{transform:translate3d(45.8%,0,0);opacity:1}60%{transform:translate3d(64.6%,0,0);opacity:1}70%{transform:translate3d(80.76%,0,0);opacity:1}80%{transform:translate3d(92.56%,0,0);opacity:1}88%{transform:translate3d(98.48%,0,0);opacity:1}90%{transform:translate3d(99.47%,0,0);opacity:0.83}100%{transform:translate3d(101.67%,0,0);opacity:0}}
@keyframes st-fk2-y{0%{transform:translate3d(0,33.5px,0) rotate(-12.53deg)}10%{transform:translate3d(0,32.09px,0) rotate(-12.02deg)}20%{transform:translate3d(0,28.04px,0) rotate(-10.47deg)}30%{transform:translate3d(0,22.35px,0) rotate(-8.01deg)}40%{transform:translate3d(0,16.9px,0) rotate(-4.96deg)}50%{transform:translate3d(0,13.6px,0) rotate(-1.83deg)}60%{transform:translate3d(0,13.18px,0) rotate(0.92deg)}70%{transform:translate3d(0,14.85px,0) rotate(3.01deg)}80%{transform:translate3d(0,17.15px,0) rotate(4.4deg)}88%{transform:translate3d(0,18.62px,0) rotate(5.07deg)}90%{transform:translate3d(0,18.89px,0) rotate(5.17deg)}100%{transform:translate3d(0,19.5px,0) rotate(5.41deg)}}
@keyframes st-fk3-x{0%{transform:translate3d(-12.17%,0,0);opacity:0}10%{transform:translate3d(-10.03%,0,0);opacity:1}20%{transform:translate3d(-3.3%,0,0);opacity:1}30%{transform:translate3d(8.29%,0,0);opacity:1}40%{transform:translate3d(24.28%,0,0);opacity:1}50%{transform:translate3d(43.07%,0,0);opacity:1}60%{transform:translate3d(61.97%,0,0);opacity:1}70%{transform:translate3d(78.22%,0,0);opacity:1}80%{transform:translate3d(90.07%,0,0);opacity:1}88%{transform:translate3d(95.98%,0,0);opacity:1}90%{transform:translate3d(96.97%,0,0);opacity:0.83}100%{transform:translate3d(99.17%,0,0);opacity:0}}
@keyframes st-fk3-y{0%{transform:translate3d(0,106.25px,0) rotate(-16.03deg)}10%{transform:translate3d(0,104.43px,0) rotate(-15.63deg)}20%{transform:translate3d(0,99.03px,0) rotate(-14.33deg)}30%{transform:translate3d(0,90.89px,0) rotate(-12.01deg)}40%{transform:translate3d(0,82.12px,0) rotate(-8.66deg)}50%{transform:translate3d(0,75.61px,0) rotate(-4.48deg)}60%{transform:translate3d(0,73.36px,0) rotate(-0.04deg)}70%{transform:translate3d(0,75.01px,0) rotate(3.94deg)}80%{transform:translate3d(0,78.38px,0) rotate(6.91deg)}88%{transform:translate3d(0,80.77px,0) rotate(8.42deg)}90%{transform:translate3d(0,81.21px,0) rotate(8.67deg)}100%{transform:translate3d(0,82.25px,0) rotate(9.23deg)}}
@keyframes st-fk4-x{0%{transform:translate3d(-9.17%,0,0);opacity:0}10%{transform:translate3d(-7.02%,0,0);opacity:1}20%{transform:translate3d(-0.27%,0,0);opacity:1}30%{transform:translate3d(11.33%,0,0);opacity:1}40%{transform:translate3d(27.31%,0,0);opacity:1}50%{transform:translate3d(46.05%,0,0);opacity:1}60%{transform:translate3d(64.9%,0,0);opacity:1}70%{transform:translate3d(81.13%,0,0);opacity:1}80%{transform:translate3d(93.01%,0,0);opacity:1}88%{transform:translate3d(98.96%,0,0);opacity:1}90%{transform:translate3d(99.96%,0,0);opacity:0.83}100%{transform:translate3d(102.17%,0,0);opacity:0}}
@keyframes st-fk4-y{0%{transform:translate3d(0,22.15px,0) rotate(15.02deg)}10%{transform:translate3d(0,23.85px,0) rotate(14.65deg)}20%{transform:translate3d(0,28.93px,0) rotate(13.49deg)}30%{transform:translate3d(0,36.63px,0) rotate(11.48deg)}40%{transform:translate3d(0,45.17px,0) rotate(8.71deg)}50%{transform:translate3d(0,52.16px,0) rotate(5.46deg)}60%{transform:translate3d(0,55.96px,0) rotate(2.22deg)}70%{transform:translate3d(0,56.68px,0) rotate(-0.53deg)}80%{transform:translate3d(0,55.73px,0) rotate(-2.52deg)}88%{transform:translate3d(0,54.78px,0) rotate(-3.51deg)}90%{transform:translate3d(0,54.6px,0) rotate(-3.67deg)}100%{transform:translate3d(0,54.15px,0) rotate(-4.04deg)}}
@keyframes st-fk5-x{0%{transform:translate3d(-10.67%,0,0);opacity:0}10%{transform:translate3d(-8.49%,0,0);opacity:1}20%{transform:translate3d(-1.66%,0,0);opacity:1}30%{transform:translate3d(10.02%,0,0);opacity:1}40%{transform:translate3d(26.04%,0,0);opacity:1}50%{transform:translate3d(44.74%,0,0);opacity:1}60%{transform:translate3d(63.51%,0,0);opacity:1}70%{transform:translate3d(79.68%,0,0);opacity:1}80%{transform:translate3d(91.52%,0,0);opacity:1}88%{transform:translate3d(97.46%,0,0);opacity:1}90%{transform:translate3d(98.46%,0,0);opacity:0.83}100%{transform:translate3d(100.67%,0,0);opacity:0}}
@keyframes st-fk5-y{0%{transform:translate3d(0,62.2px,0) rotate(-10.51deg)}10%{transform:translate3d(0,61px,0) rotate(-10.36deg)}20%{transform:translate3d(0,57.35px,0) rotate(-9.86deg)}30%{transform:translate3d(0,51.54px,0) rotate(-8.94deg)}40%{transform:translate3d(0,44.57px,0) rotate(-7.54deg)}50%{transform:translate3d(0,38.05px,0) rotate(-5.66deg)}60%{transform:translate3d(0,33.54px,0) rotate(-3.43deg)}70%{transform:translate3d(0,31.57px,0) rotate(-1.16deg)}80%{transform:translate3d(0,31.43px,0) rotate(0.77deg)}88%{transform:translate3d(0,31.84px,0) rotate(1.84deg)}90%{transform:translate3d(0,31.94px,0) rotate(2.03deg)}100%{transform:translate3d(0,32.2px,0) rotate(2.45deg)}}

/* -- variant: breeze (5c) — calm, level & professional; every other in-app wait --
   Planes hold a fixed heading (the old `offset-rotate: 0deg`) — never tilt or
   spin, even at path end, so there is no rotate() in the -y keyframes.
   NOTE (2026-08-30): no markup in the repo uses `.v-breeze`. It is PARKED, not
   dead — it was the default variant of a `StelaahLoader` that no longer exists
   in this tree (it survives in Stelaah-Crm-demo-isolation-release/s-icons.jsx,
   and Login.html still guards on a `window.StelaahLoader` that never resolves).
   Every part of the variant is now compositor-only — flyers AND wind — so
   adopting it cannot reintroduce the freeze. The markup it expects is pinned by
   tests/fixtures/planes-breeze.html; render that before changing these rules. */
.st-planes.v-breeze{ width: 180px; height: 110px; }
.st-planes.v-breeze .st-flyer{position:absolute;inset:0;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.st-planes.v-breeze .st-flyer svg{position:absolute;left:0;top:0;display:block;overflow:visible;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.st-planes.v-breeze .st-flyer:nth-child(1){animation-name:st-bz1-x;animation-delay:0s}
.st-planes.v-breeze .st-flyer:nth-child(1) svg{width:20%;height:20%;opacity:.9;animation-name:st-bz1-y;animation-delay:0s}
.st-planes.v-breeze .st-flyer:nth-child(2){animation-name:st-bz2-x;animation-delay:-1.1s}
.st-planes.v-breeze .st-flyer:nth-child(2) svg{width:13%;height:13%;opacity:.5;animation-name:st-bz2-y;animation-delay:-1.1s}
.st-planes.v-breeze .st-flyer:nth-child(3){animation-name:st-bz3-x;animation-delay:-2.16s}
.st-planes.v-breeze .st-flyer:nth-child(3) svg{width:16%;height:16%;opacity:.7;animation-name:st-bz3-y;animation-delay:-2.16s}

@keyframes st-bz1-x{0%{transform:translate3d(-16.67%,0,0);opacity:0}10%{transform:translate3d(-14.23%,0,0);opacity:1}20%{transform:translate3d(-6.55%,0,0);opacity:1}30%{transform:translate3d(6.57%,0,0);opacity:1}40%{transform:translate3d(24.53%,0,0);opacity:1}50%{transform:translate3d(45.47%,0,0);opacity:1}60%{transform:translate3d(66.43%,0,0);opacity:1}70%{transform:translate3d(84.45%,0,0);opacity:1}80%{transform:translate3d(97.62%,0,0);opacity:1}88%{transform:translate3d(104.22%,0,0);opacity:1}90%{transform:translate3d(105.32%,0,0);opacity:0.83}100%{transform:translate3d(107.78%,0,0);opacity:0}}
@keyframes st-bz1-y{0%{transform:translate3d(0,51px,0)}10%{transform:translate3d(0,50.46px,0)}20%{transform:translate3d(0,48.87px,0)}30%{transform:translate3d(0,46.54px,0)}40%{transform:translate3d(0,44.14px,0)}50%{transform:translate3d(0,42.5px,0)}60%{transform:translate3d(0,42.11px,0)}70%{transform:translate3d(0,42.77px,0)}80%{transform:translate3d(0,43.84px,0)}88%{transform:translate3d(0,44.56px,0)}90%{transform:translate3d(0,44.69px,0)}100%{transform:translate3d(0,45px,0)}}
@keyframes st-bz2-x{0%{transform:translate3d(-13.17%,0,0);opacity:0}10%{transform:translate3d(-10.72%,0,0);opacity:1}20%{transform:translate3d(-3.02%,0,0);opacity:1}30%{transform:translate3d(10.13%,0,0);opacity:1}40%{transform:translate3d(28.11%,0,0);opacity:1}50%{transform:translate3d(49.04%,0,0);opacity:1}60%{transform:translate3d(69.97%,0,0);opacity:1}70%{transform:translate3d(87.96%,0,0);opacity:1}80%{transform:translate3d(101.12%,0,0);opacity:1}88%{transform:translate3d(107.72%,0,0);opacity:1}90%{transform:translate3d(108.83%,0,0);opacity:0.83}100%{transform:translate3d(111.28%,0,0);opacity:0}}
@keyframes st-bz2-y{0%{transform:translate3d(0,20.85px,0)}10%{transform:translate3d(0,20.54px,0)}20%{transform:translate3d(0,19.64px,0)}30%{transform:translate3d(0,18.35px,0)}40%{transform:translate3d(0,17.08px,0)}50%{transform:translate3d(0,16.35px,0)}60%{transform:translate3d(0,16.41px,0)}70%{transform:translate3d(0,17.09px,0)}80%{transform:translate3d(0,17.96px,0)}88%{transform:translate3d(0,18.52px,0)}90%{transform:translate3d(0,18.62px,0)}100%{transform:translate3d(0,18.85px,0)}}
@keyframes st-bz3-x{0%{transform:translate3d(-14.67%,0,0);opacity:0}10%{transform:translate3d(-12.22%,0,0);opacity:1}20%{transform:translate3d(-4.53%,0,0);opacity:1}30%{transform:translate3d(8.61%,0,0);opacity:1}40%{transform:translate3d(26.58%,0,0);opacity:1}50%{transform:translate3d(47.52%,0,0);opacity:1}60%{transform:translate3d(68.46%,0,0);opacity:1}70%{transform:translate3d(86.45%,0,0);opacity:1}80%{transform:translate3d(99.62%,0,0);opacity:1}88%{transform:translate3d(106.22%,0,0);opacity:1}90%{transform:translate3d(107.32%,0,0);opacity:0.83}100%{transform:translate3d(109.78%,0,0);opacity:0}}
@keyframes st-bz3-y{0%{transform:translate3d(0,77.2px,0)}10%{transform:translate3d(0,76.81px,0)}20%{transform:translate3d(0,75.68px,0)}30%{transform:translate3d(0,74.02px,0)}40%{transform:translate3d(0,72.33px,0)}50%{transform:translate3d(0,71.2px,0)}60%{transform:translate3d(0,70.98px,0)}70%{transform:translate3d(0,71.51px,0)}80%{transform:translate3d(0,72.33px,0)}88%{transform:translate3d(0,72.87px,0)}90%{transform:translate3d(0,72.97px,0)}100%{transform:translate3d(0,73.2px,0)}}
/* -- the wind lanes --
   `stroke-dashoffset` is a MAIN-THREAD-ONLY animated property, so the drift
   froze in exactly the conditions the MOTION LAW block above describes. The
   dash pattern repeats every 48 units (14 on + 34 off), so translating a lane
   by one full period is pixel-identical to advancing its dash offset by one:
   the drift is now a compositor-only transform and the dash pattern is static.

   EACH LANE IS ITS OWN <svg> ROOT, not a <line> inside one shared <svg>, and
   that is the load-bearing detail. Blink composites transform animations on
   HTML boxes and on SVG *roots* only — never on SVG *child* elements — so
   animating the <line> would have kept the freeze while reading as a fix. It
   is the same reason `.st-flyer` is a <span> wrapping an <svg> rather than one
   inner <g> carrying both transforms.

   Each lane is drawn 48 wider on BOTH sides than the 180-wide box (276 = 48 +
   180 + 48) so no gap can enter at either edge across the travel; `.st-wind`
   clips the overhang. Keep width, `left`, and the keyframe distance in step if
   the box width ever changes. */
.st-planes.v-breeze .st-wind{ position: absolute; inset: 0; overflow: hidden; }
.st-planes.v-breeze .st-wind svg{
  position: absolute; left: -48px; width: 276px; height: 4px; overflow: visible;
  animation: st-wind-drift 3.6s linear infinite; will-change: transform;
}
.st-planes.v-breeze .st-wind svg line{
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 14 34;
}
.st-planes.v-breeze .st-wind svg:nth-child(1){ top: 22px; opacity: .15; animation-delay: 0s; }
.st-planes.v-breeze .st-wind svg:nth-child(2){ top: 56px; opacity: .11; animation-delay: -1.1s; }
.st-planes.v-breeze .st-wind svg:nth-child(3){ top: 88px; opacity: .13; animation-delay: -2.3s; }
@keyframes st-wind-drift{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(48px,0,0); } }
@media (prefers-reduced-motion: reduce){
  .st-planes.v-flock .st-flyer, .st-planes.v-breeze .st-flyer,
  .st-planes.v-flock .st-flyer svg, .st-planes.v-breeze .st-flyer svg,
  .st-planes.v-breeze .st-wind svg{ animation: none; }
  .st-planes.v-flock .st-flyer:nth-child(1) svg,
  .st-planes.v-breeze .st-flyer:nth-child(1) svg{
    left: 40%; top: 35%; width: 20%; height: 20%; opacity: 1; transform: none;
  }
  .st-planes.v-flock .st-flyer:not(:first-child),
  .st-planes.v-breeze .st-flyer:not(:first-child){ display: none; }
  .st-planes.v-breeze .st-wind svg:nth-child(n){ opacity: .12; }
}
/* (collapsed-rail brand-header rules removed with the header itself, 2026-08-14) */

/* ---- body ---- */
/* No bottom padding: the sticky Shortcuts bar (.sb-sc, bottom:0) must sit flush
   above .sb-foot. A bottom pad leaves a strip below the sticky bar where scrolled
   nav content peeks through, reading as an empty gap under the shortcuts. */
.sb-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-tight) var(--space-inline) 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar.collapsed .sb-body { padding: var(--space-tight) 0 0; align-items: center; }

/* ---- section labels (interactive .sb-sec buttons are owned by s-sidebar.css) ---- */
.sb-sec > .sb-sec-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* collapsed section cells are owned by s-sidebar.css (icon + label + flyout) */
.sidebar.collapsed .sb-sec > .sb-sec-name { display: none; }

/* ---- nav item ---- */
.sb-item {
  display: flex; align-items: center; gap: var(--space-inline); height: 31px; padding: 0 var(--space-inline);
  border-radius: var(--r-control); color: var(--sb-ink-label); position: relative;
  font-size: var(--t-body-size); font-weight: 500; flex-shrink: 0;
  border: none; background: transparent; width: 100%; text-align: left;
  font-size: var(--t-body-size); font-weight: 500; cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.sb-item-ico { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--sb-ink-icon); }
.sb-item .icn { opacity: 1; transition: color var(--dur-micro) var(--ease); }
.sb-item:hover { background: var(--bg-hover); color: var(--sb-ink); }
.sb-item:hover .sb-item-ico { color: var(--sb-ink-label); }
.sb-item.active { background: var(--bg-active); color: var(--sb-ink); font-weight: 600; }
.sb-item.active .sb-item-ico { color: var(--sb-ink); }
.dark .sb-item.active { background: var(--bg-active); color: var(--sb-ink); }
.sb-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-badge { flex-shrink: 0; min-width: 20px; text-align: center; font-size: var(--t-micro-size); font-weight: 600; padding: 1px var(--space-inline); border-radius: 999px; background: var(--accent); color: var(--accent-fg); }
.sb-badge.muted { background: var(--bg-active); color: var(--ink-2); }
.sb-badge.needs { background: var(--tag-clay-bg); color: var(--tag-clay-fg); }
.sidebar.collapsed .sb-badge.needs { border-color: var(--bg-sidebar); }

/* ---- collapsed nav item → centered icon, label hidden, badge → dot ---- */
.sidebar.collapsed .sb-item { width: 40px; height: 36px; padding: 0; justify-content: center; gap: 0; margin: 2px 0; }
.sidebar.collapsed .sb-item-label { display: none; }
.sidebar.collapsed .sb-badge { position: absolute; top: 4px; right: 6px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; border: 2px solid var(--bg-sidebar); }

/* ---- divider before bottom items ---- */
.sb-divider { height: 1px; background: var(--border-subtle); margin: var(--space-inline) var(--space-tight); flex-shrink: 0; }
.sidebar.collapsed .sb-divider { width: 26px; margin: var(--space-inline) 0; }

/* ---- onboarding "Finish setup" pill ---- */
.sb-setup { display: flex; align-items: center; gap: var(--space-inline); width: 100%; margin: 1px 0 var(--space-tight); padding: var(--space-tight) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .14s; }
.sb-setup:hover { background: var(--bg-hover); }
.sb-setup.active { background: var(--bg-active); }
.sb-setup.collapsed { justify-content: center; padding: var(--space-tight) 0; }
.sb-setup-ring { position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--lime) calc(var(--p) * 1%), var(--border-strong) 0); transition: background .5s var(--ease); }
.sb-setup-ring::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--bg-sidebar); }
.sb-setup:hover .sb-setup-ring::after { background: color-mix(in srgb, var(--bg-sidebar) 84%, var(--ink)); }
.sb-setup-num { position: relative; z-index: 1; font-size: 9px; font-weight: 750; color: var(--ink-2); letter-spacing: -.03em; }
.sb-setup-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.sb-setup-t { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-setup-s { font-size: var(--t-micro-size); color: var(--sb-ink-quiet); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- footer / collapse toggle ---- */
.sb-foot { padding: var(--space-inline) var(--space-item) var(--space-item); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-inline); }
.sidebar.collapsed .sb-foot { padding: var(--space-inline) 0 var(--space-item); align-items: center; }
.upsell-mark { display: none; }
.sidebar.collapsed .upsell { display: none; }
.sb-collapse {
  display: flex; align-items: center; gap: var(--space-item); height: 36px; padding: 0 var(--space-inline); flex-shrink: 0;
  border: none; background: transparent; width: 100%; border-radius: var(--r-control);
  color: var(--ink-3); font-size: var(--t-label-size); font-weight: 500; cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.sb-collapse:hover { background: var(--bg-hover); color: var(--ink); }
.sb-collapse .sb-item-ico { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.sidebar.collapsed .sb-collapse { width: 40px; padding: 0; justify-content: center; gap: 0; }
.sidebar.collapsed .sb-collapse .sb-item-label { display: none; }

/* ============================================================
   Workspace switcher (sidebar header)
   ============================================================ */
.ws-wrap { position: relative; width: 100%; }
.ws-switch { display: flex; align-items: center; gap: var(--space-inline); width: 100%; height: 42px; padding: 0 var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background var(--dur-micro) var(--ease); }
.ws-switch:hover { background: var(--bg-hover); }
/* Sized to sit neatly against the label's own line-height (--t-label-lh: 18px)
   rather than dominate it — one size everywhere (trigger and popover rows
   alike), flat (no shadow), matching the compact reference. Shows a real
   uploaded logo (cropped to fill, corners clipped via overflow:hidden) or the
   workspace's first initial — see WsTile in s-workspace.jsx; never an icon. */
.ws-tile { width: 20px; height: 20px; border-radius: var(--r-xs); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; color: #fff; font-weight: 700; font-size: 11px; }
.ws-tile-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.ws-name { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-plan { font-size: var(--t-micro-size); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-chev { color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.ws-switch.collapsed { width: 40px; padding: 0; justify-content: center; gap: 0; margin: 0 auto; }
.sidebar.collapsed .ws-meta, .sidebar.collapsed .ws-chev { display: none; }

/* ── narrow viewports (≤760px): labeled section rail + tap flyout ── */
@media (max-width: 760px){
  :root { --sidebar-w: 56px !important; }
  .sidebar .sb-item-label, .sidebar .sb-section-label, .sidebar .sb-views,
  .sidebar .upsell, .sidebar .sb-collapse .sb-item-label,
  .sidebar .ws-meta, .sidebar .ws-chev { display: none !important; }
  .sidebar .ws-switch { width: 40px; padding: 0; justify-content: center; gap: 0; margin: 0 auto; }
  .sidebar .sb-item { width: 40px; height: 36px; padding: 0; justify-content: center; gap: 0; margin: 2px auto; }
  .sidebar .sb-badge { position: absolute; top: 4px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; }
}

.ws-scrim { position: fixed; inset: 0; z-index: 690; }
/* Notion-style: fixed-anchored (escapes the sidebar's overflow:hidden), wide, roomy.
   z-index sits in the content-popover band (~690), above Smart Rail flyout (680), below modals (1000). */
.ws-pop { position: fixed; z-index: 691; width: 292px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-tight); animation: pop-menu var(--dur-over) var(--ease); overflow-y: auto; }
.ws-pop-item { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .12s; }
.ws-pop-item:hover { background: var(--bg-hover); }
.ws-pop-item.on { background: var(--bg-active); }
.ws-pop-name { display: block; font-size: var(--t-body-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-pop-plan { display: block; font-size: var(--t-micro-size); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ws-pop-check { color: var(--ink-2); flex-shrink: 0; }
.ws-pop-sep { height: 1px; background: var(--border-subtle); margin: var(--space-tight) var(--space-tight); }
.ws-pop-action { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); color: var(--ink); font-size: var(--t-body-size); font-weight: 450; cursor: pointer; transition: background .12s, color .12s; }
.ws-pop-action:hover { background: var(--bg-hover); color: var(--ink); }
.ws-pop-action .icn { color: var(--ink-2); flex-shrink: 0; }
.ws-pop-action:hover .icn { color: var(--ink); }

/* ---- Invite Teammates modal ---- */
.invt { display: flex; flex-direction: column; gap: var(--space-group); }
.invt-top { display: flex; align-items: flex-start; gap: var(--space-inline); }
.invt-field { position: relative; flex: 1; min-width: 0; }
.invt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); min-height: 42px; padding: var(--space-tight) 2px var(--space-inline); border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; transition: border-color .12s; }
.invt-field:focus-within .invt-chips { border-color: var(--ink); }
.invt-chip { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) 2px var(--space-tight) 0; background: transparent; border: none; border-radius: 0; font-size: var(--t-label-size); font-weight: 500; color: var(--ink); max-width: 220px; }
.invt-chip .avatar { flex-shrink: 0; }
.invt-chip-em { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--ink-3); flex-shrink: 0; }
.invt-chip-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-chip-x { display: grid; place-items: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--ink-4); border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.invt-chip-x:hover { background: var(--bg-hover); color: var(--ink); }
.invt-inp { flex: 1; min-width: 90px; border: none; background: transparent; outline: none; font: inherit; font-size: var(--t-body-size); color: var(--ink); height: 30px; }
.invt-inp::placeholder { color: var(--ink-4); }
.invt-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); flex-shrink: 0; height: 36px; padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: background .12s, border-color .12s; }
.invt-go .icn { color: var(--ink-2); }
.invt-go:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.invt-go:active { transform: none; }
.invt-go.off { opacity: .4; pointer-events: none; }
.invt-sugg { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-tight); }
.invt-sugg-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; }
.invt-sugg-row:hover { background: var(--bg-hover); }
.invt-sugg-add { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--ink-2); flex-shrink: 0; }
.invt-sugg-nm { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-sugg-em { display: block; font-size: var(--t-caption-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-link { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 2px; background: transparent; border-radius: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.invt-link-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; background: transparent; border: none; color: var(--ink-2); flex-shrink: 0; }
.invt-link-ic-bare { color: var(--ink-2); flex-shrink: 0; }
.invt-link-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.invt-link-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-link-b { flex-shrink: 0; height: 32px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: background .12s; }
.invt-link-b:hover { background: var(--bg-hover); }
.invt-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin: 0 -2px; }
.invt-mem { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-tight); }
.invt-mem + .invt-mem { border-top: 1px solid var(--border-subtle); }
.invt-mem-nm { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-body-size); font-weight: 550; color: var(--ink); }
.invt-you { font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); background: transparent; padding: 0; border-radius: 0; }
.invt-mem-em { font-size: var(--t-caption-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.invt-mem-st { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 550; flex-shrink: 0; white-space: nowrap; }
.invt-kebab { display: grid; place-items: center; width: 30px; height: 30px; border: none; background: transparent; color: var(--ink-3); border-radius: var(--r-control); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; }
.invt-kebab:hover { background: var(--bg-hover); color: var(--ink); }
/* Invite people (org roles) — sectioned, icon-led, same visual language */
.invp-sec { display: flex; flex-direction: column; gap: var(--space-inline); }
.invp-sec-hd { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.invp-sec-hd .icn { color: var(--ink-3); }

/* ---- create / customize modal pieces ---- */
.ws-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); }
.ws-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-item) var(--space-item); border: none; border-radius: var(--r-md); background: transparent; cursor: pointer; text-align: left; transition: background .14s; box-shadow: none; }
.ws-method:hover { background: var(--bg-hover); }
.ws-method.on { background: var(--bg-active); box-shadow: none; border: none; }
.ws-method-ic { width: auto; height: auto; border-radius: 0; display: inline-flex; place-items: center; background: transparent; color: var(--ink-2); border: none; margin-bottom: var(--space-tight); padding: 0; }
.ws-method.on .ws-method-ic { background: transparent; color: var(--ink); border: none; }
.ws-method-title { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.ws-method-desc { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.4; }
.ws-note { display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-item); padding: var(--space-item) 2px; border-radius: 0; background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); line-height: 1.45; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.ws-note .icn { flex-shrink: 0; margin-top: 1px; color: var(--ink-3); }
.ws-form { display: flex; flex-direction: column; gap: var(--space-item); margin-top: var(--space-group); }
.ws-accent-row { display: flex; gap: var(--space-inline); }
.ws-accent { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: transparent; display: grid; place-items: center; cursor: pointer; transition: transform .1s; padding: 0; }
.ws-accent:hover { transform: scale(1.08); }
.ws-accent.on { border-color: var(--ink-3); }
.ws-accent-dot { width: 24px; height: 24px; border-radius: 50%; }

/* Settings → Workspace → Navigation (window.NavProfileSettingsCard).
   Hairlines and whitespace, no tinted review panels and no filled choice tiles:
   the active row is carried by weight, a checkmark and an "Active" chip. */
.navset-note { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); color: var(--ink-3); font-size: var(--t-caption-size); }
.navset-choices { margin-top: var(--space-group); }
.navset-choice {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border: none;
  background: transparent; text-align: left; cursor: pointer; color: var(--ink);
  transition: color var(--dur-micro) var(--ease);
}
.navset-choice:disabled { cursor: default; color: var(--ink-4); }
.navset-choice:disabled .navset-choice-title,
.navset-choice:disabled .navset-choice-desc { color: var(--ink-4); }
.navset-choice:not(:disabled):hover .navset-choice-title { color: var(--accent); }
.navset-choice-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.navset-choice-title { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 600; }
.navset-choice.on .navset-choice-title { color: var(--ink); }
.navset-choice-desc { color: var(--ink-3); font-size: var(--t-caption-size); }
.navset-choice-on { padding: 1px var(--space-inline); border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 600; }
.navset-choice-on.quiet { color: var(--ink-3); }
.navset-list { margin-top: var(--space-group); }
.navset-row {
  display: flex; align-items: flex-start; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border: none;
  background: transparent; text-align: left; cursor: pointer; color: var(--ink);
}
.navset-row:hover { background: var(--bg-hover); }
.navset-row-ic { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-3); }
.navset-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.navset-row-name { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 600; }
.navset-row-desc { color: var(--ink-3); font-size: var(--t-caption-size); }
.navset-row-secs { color: var(--ink-4); font-size: var(--t-micro-size); }
.navset-row.on .navset-row-ic { color: var(--accent); }

/* Settings — Editorial Calm preference rows */
.set-app-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 0; }
.set-app-row-stack { flex-direction: column; align-items: stretch; gap: var(--space-item); }
.set-app-row-main { flex: 1; min-width: 0; }
.set-app-row-t { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.settings-timezone-row { align-items: flex-start; flex-wrap: wrap; }
.settings-timezone-row .set-app-row-main { min-width: 220px; }
.settings-timezone-select { flex: 0 0 min(280px, 44vw); width: min(280px, 44vw); }
.set-accent-chip { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); flex-shrink: 0; }
.set-accent-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.set-text-btn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; padding: 0; font: inherit; font-size: var(--t-label-size); font-weight: 550; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.set-text-btn:hover { color: var(--ink); }
.set-text-btn-ic { display: inline-grid; place-items: center; color: var(--ink-3); }
.set-text-btn:hover .set-text-btn-ic { color: var(--ink); }
.set-choice-row { display: flex; gap: var(--space-inline); }
.set-choice { display: inline-flex; align-items: center; gap: var(--space-inline); flex: 1; padding: var(--space-inline) var(--space-item); border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 550; cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.set-choice:hover { background: var(--bg-hover); color: var(--ink); }
.set-choice.on { background: var(--bg-active); color: var(--ink); }
.set-choice-chk { margin-left: auto; color: var(--ink-2); flex-shrink: 0; }
.set-label-cloud { display: flex; flex-wrap: wrap; gap: var(--space-tight); }

/* NOTE: `.acct-ws-act*` (Customize workspace / Invite members inside the topbar
   account menu) was removed 2026-08-14 along with the account menu's workspace
   section. Those actions live in the sidebar workspace switcher's popover
   (`.ws-pop-action`), which already carried its own copy of both. */
.ws-vis-hd { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); margin: 20px 0 var(--space-inline); }
.ws-vis-hd .muted { font-weight: 400; font-size: var(--t-caption-size); }
.ws-vis { display: flex; flex-direction: column; gap: var(--space-item); }
.ws-vis-sec { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); padding: 2px 2px var(--space-tight); }
.ws-vis-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; color: var(--ink); font-size: var(--t-label-size); transition: background .12s, color .12s; }
.ws-vis-row:hover { background: var(--bg-hover); }
.ws-vis-row.off { color: var(--ink-3); }
.ws-vis-ic { display: grid; place-items: center; width: 20px; color: var(--ink-3); flex-shrink: 0; }
/* .ws-toggle is defined in s-ws-access.css (loads after this file and is the
   only consumer's stylesheet); this file no longer duplicates it. */

/* ---- Per-workspace accent themes (light) ---- */
[data-accent="pine"]   { --accent:#22964a; --accent-600:#286659; --accent-700:#173e35; --accent-fg:#f1f6f3; --accent-soft:#e0ebe7; --accent-soft-strong:#cee0da; }
[data-accent="indigo"] { --accent:#34406e; --accent-600:#3e4c81; --accent-700:#28335a; --accent-fg:#eef0f8; --accent-soft:#e4e6f2; --accent-soft-strong:#d2d7ec; }
[data-accent="plum"]   { --accent:#50305a; --accent-600:#5e3a6a; --accent-700:#3d2447; --accent-fg:#f6eef8; --accent-soft:#ece1f0; --accent-soft-strong:#e0cfe8; }
[data-accent="clay"]   { --accent:#6f3d27; --accent-600:#824930; --accent-700:#57301e; --accent-fg:#f8eee7; --accent-soft:#f1e3da; --accent-soft-strong:#e8d2c4; }
[data-accent="olive"]  { --accent:#5c6f33; --accent-600:#6b803c; --accent-700:#445224; --accent-fg:#f4f7ec; --accent-soft:#e9edde; --accent-soft-strong:#dbe3c8; }
/* ---- Per-workspace accent themes (dark) ---- */
[data-accent="pine"].dark   { --accent:#5fb094; --accent-600:#4f9c80; --accent-700:#79c4a8; --accent-fg:#0f1a16; --accent-soft:#1c3a32; --accent-soft-strong:#264a40; }
[data-accent="indigo"].dark { --accent:#929ee0; --accent-600:#7f8cd2; --accent-700:#aab2ea; --accent-fg:#0e1020; --accent-soft:#232842; --accent-soft-strong:#2f3658; }
[data-accent="plum"].dark   { --accent:#c69ed8; --accent-600:#b58aca; --accent-700:#d6b4e4; --accent-fg:#160e1a; --accent-soft:#2e2138; --accent-soft-strong:#3d2a48; }
[data-accent="clay"].dark   { --accent:#d79c7c; --accent-600:#c98a6c; --accent-700:#e3b298; --accent-fg:#1a0f08; --accent-soft:#3a261d; --accent-soft-strong:#4a3328; }
[data-accent="olive"].dark  { --accent:#a6c56a; --accent-600:#95b458; --accent-700:#bad78a; --accent-fg:#151a0a; --accent-soft:#2b331a; --accent-soft-strong:#3b4726; }

/* upgrade card */
.upsell {
  border-radius: 0; background: transparent;
  border: none; border-top: 1px solid var(--border-subtle); padding: var(--space-item) 2px var(--space-tight); position: relative; overflow: visible;
}
.upsell-mark { display: none; }
.upsell h5 { font-family: var(--font-serif); font-size: var(--t-strong-size); font-weight: 500; margin: 0 0 var(--space-tight); color: var(--ink); }
.upsell p { font-size: var(--fs-tiny); color: var(--ink-3); margin: 0 0 var(--space-inline); line-height: 1.45; }
.upsell .btn.primary { background: transparent; color: var(--ink); border: 1px solid var(--border); box-shadow: none; }
.upsell .btn.primary:hover { background: var(--bg-hover); color: var(--ink); }

/* user chip */
.tb-create { width: 28px; height: 28px; padding: 0; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; background: transparent; border: none; color: var(--ink-2); cursor: pointer; position: relative; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tb-create:hover { background: var(--bg-hover); color: var(--ink); }
/* super-clean top-bar tooltip (create + other icon buttons) */
.tb-create[data-tip]::after, .tb-icon-btn[data-tip]::after, .tb-search[data-tip]::after, .wtabs-tool[data-tip]::after, .wtab-new[data-tip]::after, .cmd-tab[data-tip]::after, .tb-conn-pill[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-3px); background: var(--ink); color: var(--surface);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.tb-create[data-tip]:hover::after, .tb-icon-btn[data-tip]:hover::after, .tb-search[data-tip]:hover::after, .wtabs-tool[data-tip]:hover::after, .wtab-new[data-tip]:hover::after, .cmd-tab[data-tip]:hover::after, .tb-conn-pill[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .35s; }
/* connection/sync pill — bare glyph + label, hover-only affordance, no fill/border by default (matches tb-icon-btn's borderless convention) */
.tb-conn-pill { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-inline); border-radius: var(--r-pill); font-size: var(--t-micro-size); font-weight: 650; position: relative; white-space: nowrap; }
.userchip { display: flex; align-items: center; gap: var(--space-tight); padding: 2px var(--space-inline) 2px 2px; min-height: 28px; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; margin-left: 2px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.userchip:hover { background: var(--bg-hover); }
/* Match the topbar icon-button height exactly — the avatar is just another topbar control. */
.userchip .avatar { width: 28px; height: 28px; font-size: var(--t-micro-size); box-shadow: 0 0 0 1px var(--border-strong); }
.userchip:hover .avatar { box-shadow: 0 0 0 1px var(--ink-4); }
.userchip-name { font-size: var(--t-caption-size); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.userchip-chev { color: var(--ink-4); }
@media (max-width: 1180px){ .userchip-name { display: none; } }

/* account dropdown */
.acct {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  max-height: min(720px, calc(100dvh - 88px));
  z-index: 1200;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* no scrollbar-gutter reservation — only show scroll space once content actually overflows max-height */
  /* pop-menu: drawerPop uses translateX(-50%) for centered drawers and flashed this menu left */
  animation: pop-menu var(--dur-over) var(--ease);
}
/* Compact identity header. The avatar is an anchor, not a hero: at 52px with
   16px padding it owned a third of the menu's height for information the two
   lines beside it already carry. 34px + tighter padding matches the density of
   the rows below it. */
.acct-head { display: flex; gap: var(--space-inline); align-items: center; padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); }
/* my-status picker — a single row like the rest of the menu; expands in place */
.acct-status { padding: var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.acct-status-trigger { width: 100%; }
.acct-status-cur { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.acct-status-chev { color: var(--ink-4); flex-shrink: 0; transition: transform var(--dur-micro) var(--ease); }
.acct-status-chev.open { transform: rotate(180deg); }
.acct-status-body { padding: 0 0 var(--space-tight); }
.acct-status-off { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--c-gold); padding: var(--space-tight) var(--space-inline) var(--space-inline); }
/* Status options are plain menu rows — no border, no fill, no colour swatch.
   Affordance is hover background + a check on the selected row, matching the
   `.acct-item` list further down the menu. The 36px left padding aligns each
   option's label with the trigger's own label rather than with its icon:
   `.acct-item` padding-left 10 + a 16px glyph + an 11px gap ≈ 36. */
.acct-status-list { display: flex; flex-direction: column; }
.acct-status-opt { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline) var(--space-inline) 36px; border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 450; cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.acct-status-opt:hover { background: var(--bg-hover); color: var(--ink); }
.acct-status-opt.on { color: var(--ink); font-weight: 550; }
.acct-status-chk { color: var(--ink-2); flex-shrink: 0; }
/* mute-notifications flyout — opens to the left of the account menu, like a submenu */
.acct-sub-chev { color: var(--ink-4); flex-shrink: 0; transition: transform var(--dur-micro) var(--ease); }
.acct-sub-chev.open { transform: rotate(90deg); }
.acct-submenu { position: fixed; width: 208px; max-height: 320px; overflow-y: auto; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-tight); z-index: 1201; animation: pop-menu var(--dur-over) var(--ease); }
.acct-submenu-hd { padding: var(--space-tight) var(--space-inline) var(--space-inline); font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-3); }
.acct-mute-custom { display: flex; gap: var(--space-tight); padding: 2px var(--space-tight) var(--space-tight); }
.acct-mute-input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-caption-size); padding: var(--space-inline) var(--space-inline); }
.acct-mute-input:focus { outline: none; border-color: var(--accent); }
.acct-item[disabled] { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; pointer-events: none; }
/* identity "act as" switcher */
.acct-switch { padding: var(--space-item) var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.acct-switch-hd { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-inline); }
.acct-switch-row { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.acct-switch-av { padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; line-height: 0; transition: transform .12s, border-color .12s; }
.acct-switch-av:hover { border-color: var(--border-strong); }
.acct-switch-av.on { border-color: var(--ink-3); }
.acct-switch-back { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); width: 100%; justify-content: center; padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .12s; }
.acct-switch-back:hover { background: var(--bg-hover); color: var(--ink); }
/* acting-as treatment on the topbar chip */
.userchip.acting { border-color: color-mix(in srgb, var(--c-gold) 55%, var(--border)); }
.userchip-acting { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, transparent); padding: 2px var(--space-tight); border-radius: var(--r-pill); }
/* reusable presence dot + chip */
.pres-dot { display: inline-block; border-radius: 50%; flex-shrink: 0; }
.pres-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; }
.pres-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* avatar-overlay presence dot */
.av-pres { position: relative; display: inline-flex; }
.av-pres > .pres-dot { position: absolute; right: -1px; bottom: -1px; }
.acct-name { font-size: var(--t-label-size); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-email { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Role/department read as quiet metadata on the email line, not as a third
   stacked row of bordered pills. */
.acct-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); margin-top: 2px; }
.acct-tag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); }
.acct-tag.role { color: var(--ink-3); background: transparent; border: none; border-radius: 0; padding: 0; }
.acct-tag-sep { font-size: var(--t-micro-size); color: var(--ink-4); }
.acct-plan { padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.acct-plan-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-inline); }
.acct-plan-stor { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border-subtle); background: transparent; border-radius: 0; padding: var(--space-inline) 2px; margin-bottom: var(--space-inline); cursor: pointer; transition: background .12s; }
.acct-plan-stor:hover { border-color: var(--border-subtle); background: var(--bg-hover); }
.acct-plan-stor-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-caption-size); color: var(--ink-2); }
.acct-plan-stor-top > span:first-child { display: inline-flex; align-items: center; gap: var(--space-tight); font-weight: 550; }
.acct-plan-stor-val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 550; }
.acct-plan-stor-val i { color: var(--ink-4); font-style: normal; font-weight: 500; }
.acct-plan-stor-meter { height: 4px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; margin-top: var(--space-inline); }
.acct-plan-stor-meter i { display: block; height: 100%; background: var(--ink-3); border-radius: 99px; transition: width .3s ease; }
.acct-plan-stor-meter i.warn { background: var(--c-gold, #c2922b); }
.acct-plan-stor-meter i.full { background: var(--c-clay, #c0584e); }
.acct-plan-cur { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-body-size); font-weight: 600; }
.acct-plan-ic { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; }
.acct-plan-tag { font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); background: transparent; padding: 0; border-radius: 0; text-transform: none; letter-spacing: 0; }
.acct-plan-mng { border: none; background: none; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; padding: var(--space-tight) var(--space-tight); border-radius: 6px; }
.acct-plan-mng:hover { background: var(--bg-hover); color: var(--ink); }
.acct-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight); }
.acct-plan-opt { position: relative; display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: all .12s; }
.acct-plan-opt .icn { color: var(--ink-4); }
.acct-plan-opt:hover { border-color: var(--border-strong); }
.acct-plan-opt.on { border-color: var(--border-strong); background: var(--bg-active); color: var(--ink); }
.acct-plan-opt.on .icn { color: var(--ink-2); }
.acct-plan-name { flex: 1; min-width: 0; }
.acct-plan-check { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.acct-items { padding: var(--space-tight); }
.acct-item { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; color: var(--ink); font-size: var(--t-label-size); text-align: left; text-decoration: none; }
.acct-item .icn { color: var(--ink-3); }
.acct-item:hover { background: var(--bg-hover); }
.acct-item-go { color: var(--ink-4) !important; opacity: 0; }
.acct-item:hover .acct-item-go { opacity: 1; }
.acct-theme { font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 600; }
.acct-trash-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 16%, transparent); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 700; }
.acct-item.logout { margin: 0 var(--space-tight) var(--space-inline); width: calc(100% - 12px); color: var(--st-blocked); border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--r-control) var(--r-control); padding-top: var(--space-item); }
.acct-item.logout .icn { color: var(--st-blocked); }
.acct-item.logout:hover { background: var(--st-blocked-soft); }
/* Personal tools — quick-launch shortcuts, below the main action list */
.acct-tools { padding: var(--space-tight); border-top: 1px solid var(--border-subtle); }
.acct-tools-hd { padding: var(--space-inline) var(--space-inline) var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-inline) 0 var(--space-group);
  border-bottom: 1px solid var(--border-subtle); background: var(--bg);
  height: var(--topbar-h);
}
.tb-search {
  width: 28px; height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  border: none; border-radius: var(--r-control);
  background: transparent; color: var(--ink-3); flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tb-search:hover { background: var(--bg-hover); color: var(--ink); }
.tb-icon-btn { width: 28px; height: 28px; border-radius: var(--r-control); display: grid; place-items: center; border: none; background: transparent; color: var(--ink-3); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); position: relative; }
.tb-icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.shell-topline .tb-create,
.shell-topline .tb-icon-btn,
.shell-topline .tb-search { width: 26px; height: 26px; border-radius: var(--r-control); }
.shell-topline .userchip { min-height: 26px; margin-left: var(--space-tight); }
.shell-topline .userchip .avatar { width: 26px; height: 26px; font-size: var(--t-micro-size); }
.shell-topline .tm-pill.idle { height: 26px; min-width: 26px; padding-inline: 5px; }
.shell-topline .presence-pile { transform: scale(.92); transform-origin: right center; margin-inline: -2px; }
@media (max-width: 980px){
  /* Focus stays put (it's already an icon-only circle) — presence is the one that yields. */
  .shell-topline .presence-pile { display: none; }
}
.tb-dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--st-blocked); border: 1.5px solid var(--bg); }
.tb-count { position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--st-blocked-soft); color: var(--st-blocked-ink); font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; border: 1.5px solid var(--bg); }

/* Hold-to-capture — top-bar chip: icon only, slides the label out on hover/focus/listening */
.tb-capture { display: inline-flex; align-items: center; height: 30px; padding: 0; flex-shrink: 0; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.tb-capture:hover, .tb-capture:focus-visible { background: var(--bg-hover); color: var(--ink); outline: none; }
.tb-capture-ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; }
.tb-capture-lbl { max-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-tiny); font-weight: 600; line-height: 1; letter-spacing: -.005em; opacity: 0; transform: translateX(-4px); transition: max-width .24s var(--ease), opacity var(--dur-micro) var(--ease), transform .24s var(--ease), padding .24s var(--ease); }
.tb-capture:hover .tb-capture-lbl, .tb-capture:focus-visible .tb-capture-lbl, .tb-capture.listening .tb-capture-lbl { max-width: 130px; opacity: 1; transform: none; padding-right: var(--space-item); }
.tb-capture.listening { background: var(--ink); color: var(--surface); }
.tb-capture-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #db665a; animation: voice-pulse 1s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .tb-capture-lbl { transition: none; } .tb-capture-dot { animation: none; } }

/* ============================================================
   Right rail (contextual)
   ============================================================ */
.rail { display: flex; flex-direction: column; gap: 20px; }
.rail-card { background: transparent; border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border-subtle); }
.rail-card.floating { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; border-bottom: 1px solid var(--border); }
.rail-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-group) var(--space-group) 0; }
.rail-hd h4 { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.link { color: var(--accent); font-size: var(--fs-tiny); font-weight: 550; }
.dark .link { color: var(--lime); }
.link:hover { text-decoration: underline; }

/* ============================================================
   Drawer / modal
   ============================================================ */
.scrim {
  position: fixed; inset: 0;
  background: var(--modal-scrim-bg);
  z-index: 1000;
  animation: scrimIn var(--dur-over) var(--ease);
  -webkit-backdrop-filter: var(--modal-scrim-blur);
  backdrop-filter: var(--modal-scrim-blur);
}
.scrim.closing { animation: scrimOut var(--dur-micro) var(--ease) both; }
.scrim-modal {
  /* Modals (incl. confirm/prompt dialogs) must always win over a Drawer (z-index:1001)
     so a confirm launched from an open drawer isn't visually trapped underneath it.
     .modal.mc resets its own z-index to auto and relies on this wrapper for stacking —
     see KNOWN_ISSUES: confirm dialogs behind right-side drawers. Stay below the Menu/
     dropdown layer (~1199) so a dropdown opened inside a modal still layers above it. */
  z-index: 1050;
  display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) var(--space-group) max(20px, env(safe-area-inset-bottom));
  overflow: auto; overscroll-behavior: contain;
}
.scrim-modal.scrim-start { place-items: start center; padding-top: max(10vh, 40px); }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrimOut { from { opacity: 1; } to { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--modal-rim);
  z-index: 1001;
  display: flex; flex-direction: column;
  box-shadow: var(--modal-shadow-drawer);
  animation: slideIn .36s var(--ease);
}
.drawer.closing { animation: slideOut var(--dur-over) var(--ease) both; }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: .85; } }
.drawer-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-item);
  padding: var(--space-group) var(--space-group) var(--space-item) var(--space-block); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.drawer-hd-tx { min-width: 0; flex: 1; }
.drawer-hd-acts { gap: var(--space-tight); flex-shrink: 0; margin-top: -2px; }
.drawer-eyebrow {
  font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4);
  margin-bottom: var(--space-tight); letter-spacing: .04em; text-transform: uppercase;
}
.drawer-title {
  margin: 0; font-size: var(--t-heading-size); font-weight: 650; line-height: 1.25;
  letter-spacing: -0.02em; text-wrap: balance; color: var(--ink);
}
.drawer-title.h-serif { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 500; letter-spacing: -0.022em; }
.drawer-sub { margin: var(--space-tight) 0 0; font-size: var(--t-label-size); line-height: 1.4; color: var(--ink-3); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px var(--space-block) 28px; overscroll-behavior: contain; scroll-behavior: smooth; }
.drawer-foot {
  border-top: 1px solid var(--border-subtle); padding: var(--space-item) 20px var(--space-item);
  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; background: var(--surface);
}
.drawer-foot .btn { min-height: 34px; border-radius: var(--r-control); }
/* header icon buttons — quiet until hovered (task-drawer silence) */
.drawer-hd .btn.icon.ghost,
.drawer-hd .drawer-icbtn {
  color: var(--ink-3); width: 36px; height: 36px; min-width: 36px; padding: 0;
  border-radius: var(--r-control); transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.drawer-hd .btn.icon.ghost:hover,
.drawer-hd .drawer-icbtn:hover { color: var(--ink); background: var(--bg-sunken); }
/* Project drawer actions are bare glyphs in every state. Their 36px hit area
   stays intact; only the decorative tile is removed. */
.project-drawer .drawer-hd .btn.icon.ghost,
.project-drawer .drawer-hd .drawer-icbtn,
.project-drawer .drawer-hd .btn.icon.ghost:hover,
.project-drawer .drawer-hd .drawer-icbtn:hover,
.project-drawer .drawer-hd .btn.icon.ghost:focus-visible,
.project-drawer .drawer-hd .drawer-icbtn:focus-visible {
  background: transparent;
  box-shadow: none;
}
.project-drawer .drawer-hd .btn.icon.ghost:hover,
.project-drawer .drawer-hd .drawer-icbtn:hover { color: var(--ink); }
/* Project detail chrome stays bare: full hit areas, no decorative icon tiles. */
.project-drawer .pd-tabs { gap: var(--space-group); }
.project-drawer .pd-tabs > button { font-size: var(--t-caption-size); }
.project-drawer .tact-ic,
.project-drawer .uat .uat-dot {
  width: 22px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.project-drawer .pd-vendor-rm:hover,
.project-drawer .pd-vendor-rm:focus-visible {
  background: transparent;
  box-shadow: none;
  color: var(--st-blocked);
}
/* full-view: drawer expands into a large centered panel */
.drawer.full {
  top: 28px; bottom: 28px; right: auto; left: 50%; transform: translateX(-50%);
  max-width: 94vw; border: 1px solid var(--modal-rim); border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  animation: drawerPop var(--dur-over) var(--ease);
}
.drawer.full.closing { animation: drawerPopOut var(--dur-over) var(--ease) both; }
.drawer.full .drawer-hd, .drawer.full .drawer-foot { padding-left: 28px; padding-right: 28px; }
.drawer.full .drawer-body { padding: var(--space-block) 28px; }
.drawer-expand { color: var(--ink-3); }
.drawer-expand:hover { color: var(--ink); }

/* Event drawer — Editorial Calm */
.edw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-inline); margin: 0 0 var(--space-group); }
.edw-cat {
  font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
.edw-mark {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3);
}
.edw-props { display: flex; flex-direction: column; gap: 2px; }
.edw-notes {
  margin-top: var(--space-group); padding-top: var(--space-item);
  border-top: 1px solid var(--border-subtle);
}
.edw-notes .eyebrow { margin-bottom: var(--space-inline); }
.edw-notes-body {
  margin: 0; font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.55; white-space: pre-wrap;
}
.edw-del {
  margin-top: 20px; padding-top: var(--space-item); border-top: 1px solid var(--border-subtle);
  color: var(--st-blocked) !important; width: 100%; justify-content: flex-start;
}
@keyframes drawerPop { from { opacity: 0; transform: translateX(-50%) scale(.98) translateY(6px); } to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } }
@keyframes drawerPopOut { from { opacity: 1; transform: translateX(-50%) scale(1); } to { opacity: 0; transform: translateX(-50%) scale(.985) translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .scrim, .scrim.closing, .drawer, .drawer.full, .drawer.closing, .drawer.full.closing { animation-duration: .01ms !important; }
  /* gate infinite decorative loops + transform hover-lifts */
  .act-live-dot::after, .cd2-live::after, .inv-scan-line, .mscan-line, .tp-now-tag,
  .inv-scan-view.on .inv-scan-line, .mscan-view.on .mscan-line { animation: none !important; }
  .kb-card:hover, .calw-ev:hover, .cal-agenda-row:hover, .sc-evt:hover, .mcard2-join:hover,
  .gs-qcard:hover, .tcal-cell:hover { transform: none !important; }
}
.modal {
  position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--surface);
  border: 1px solid var(--modal-rim);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  animation: pop var(--dur-over) var(--ease); max-height: min(88vh, 860px);
  display: flex; flex-direction: column;
  overflow: visible;
  color: var(--ink);
}
@keyframes slideIn { from { transform: translateX(100%); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-48%) scale(.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
/* grid-centered modal variant (Modal component sets position:static + centers via scrim grid).
   Must NOT use the translate(-50%,-50%) pop keyframe or it flies in from the upper-left and
   snaps to center. Use a pure opacity/scale/translateY entrance that lands on transform:none. */
.modal.mc {
  position: relative; top: auto; left: auto; transform: none; z-index: auto;
  width: 520px; margin: auto;
  animation: modalPop var(--dur-over) var(--ease) both;
}
.modal.mc.size-sm { width: 400px; }
.modal.mc.size-lg { width: 640px; }
.modal.mc.size-xl { width: 780px; }
@keyframes modalPop {
  from { opacity: 0; transform: scale(.98) translateY(12px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.mc { animation-duration: .01ms; }
  @keyframes modalPop { from { opacity: 0; } to { opacity: 1; } }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise .3s ease both; }

/* form controls */
select.input { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-section); }
.mk-native-select-hidden { display: none !important; }
.mk-cselect { position: relative; width: 100%; }
.mk-cselect-btn {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline);
  padding: var(--space-item) var(--space-item); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-body-size); text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mk-cselect-btn:hover { background: var(--bg-hover); }
.mk-cselect-btn:focus-visible,
.mk-cselect[data-open="true"] .mk-cselect-btn { outline: none; border-color: var(--accent); }
.mk-cselect-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cselect-chev { display: grid; place-items: center; color: var(--ink-4); flex: none; transition: transform var(--t-fast) var(--ease); }
.mk-cselect[data-open="true"] .mk-cselect-chev { transform: rotate(180deg); }
.mk-cselect-menu {
  display: none; position: absolute; z-index: 80; top: calc(100% + 7px); left: 0; right: 0; max-height: 260px; overflow-y: auto;
  padding: var(--space-tight); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--overlay, var(--surface)) 97%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 18px 42px -18px rgba(40,28,18,.34);
  animation: pop-menu var(--dur-over) var(--ease);
}
.mk-cselect[data-open="true"] .mk-cselect-menu { display: block; }
.mk-cselect-opt {
  width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-inline) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--t-label-size); font-weight: 550; text-align: left; cursor: pointer;
}
.mk-cselect-opt:hover { background: var(--accent-soft); color: var(--accent); }
.mk-cselect-opt[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .72; }
.datefield-btn.input {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline);
  width: 100%; min-height: 40px; cursor: pointer; text-align: left;
}
.datefield-btn.input.df-empty { color: var(--ink-4); }
.datefield-btn.input .icn { color: var(--ink-4); flex: none; }
.datefield-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Time column: 118px measured (Team Feed countdown composer) too narrow for
   its own dropdown's labels — "5:00 PM" truncated to "5:00 …". The
   DateTimeInput/TimeInput caller passes className="input" straight through
   to InvSelect's OUTER wrapper (not its inner button), so the wrapper picks
   up `.input`'s own border+padding on top of `.invsel-btn`'s — a real, fixed
   ~26px of double-box overhead this rule cannot remove without touching that
   shared component's className contract. Measured on the live DOM via a
   Range on the text node (not `scrollWidth`, which reports the BOX size once
   content fits — useless for judging margin, only for a yes/no on
   truncation): the widest label, "12:00 PM", renders at ~55-60px true glyph
   width; 150px gives its text box ~79px, a genuine ~20px margin against
   cross-platform font metrics — enough without taking more room than this
   field's neighbor needs (see the `.fcomp-cd-row` breakpoint below, which
   handles the case where there isn't enough combined width for both). */
.datetimefield { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: var(--space-inline); align-items: center; width: 100%; }
.datetimefield .datetimefield-date.input { min-width: 0; }
.datetimefield .datetimefield-time { min-width: 0; }
@media (max-width: 520px) { .datetimefield { grid-template-columns: 1fr; } }
/* Form-control ::before/::after is flaky in Chrome — paint marks with background-image
   so they always sit dead-center in the fill. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background-color: var(--surface-2);
  display: inline-block; vertical-align: middle; cursor: pointer; flex-shrink: 0;
  transition: background-color .14s, border-color .14s; padding: 0; margin: 0;
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
}
input[type="checkbox"]:checked::before { content: none; }
/* Bulk-select "some picked" — centered dash (finance tables, trash, etc.) */
input[type="checkbox"]:indeterminate {
  background-color: var(--accent); border-color: var(--accent);
  background-size: 9px 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 2'%3E%3Crect width='9' height='2' rx='1' fill='%23fff'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate::before { content: none; }
input[type="radio"] {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px;
  border: 1.5px solid var(--border-strong); border-radius: 50%; background-color: var(--surface-2);
  display: inline-block; vertical-align: middle; padding: 0; margin: 0; cursor: pointer; flex-shrink: 0;
  transition: border-color .14s, background-color .14s;
}
input[type="radio"]:hover { border-color: var(--accent); }
input[type="radio"]:checked {
  border-color: var(--accent);
  background-image: radial-gradient(circle at center, var(--accent) 0 4px, transparent 4.5px);
}
input[type="radio"]:checked::before { content: none; }

/* ── TOGGLE SWITCH — the app-wide sliding switch (SET 9 §5) ─────────────────
   218 call sites across 104 files: Settings, Automations, Billing, Contracts,
   Budgets, Notifications, every modal that has an on/off. This is the ONE
   place its look is defined; FormKit's accessible `.fkit-track`/`.fkit-knob`
   skin (s-formkit.css) reads the SAME --sw-* geometry tokens, so the two
   implementations are now pixel-identical and move together.

   WHAT CHANGED FROM THE OLD CONTROL
   The previous version was the round mac-style toggle: a 38x22 pill whose knob
   travelled on `var(--ease)` — an OVERSHOOT curve. Springy
   motion is explicitly rejected by the design language (DESIGN_LANGUAGE.md ->
   Notion: "Springy motion -> No"), and a knob that bounces past its stop reads
   as a toy on a settings page. It now travels on the signature --ease over
   --dur-micro: the control answers immediately and settles without a wobble.
   The track fill crossfades on the same beat, so the switch reads as ONE
   movement rather than a slide plus a separate colour change.

   THE KNOB IS ALWAYS --accent-fg, AND THAT IS THE WHOLE FIX
   The old dark rule had to special-case the on-state to --lime, because dark
   --accent is near-white (#f2f3f5) and a white knob on a white track vanishes.
   But --lime is a colour that only carries meaning in one mode, which is
   exactly the thing a themed system cannot have — and it silently made "on"
   green in dark and near-black in light, in a product whose accent is neutral.
   --accent-fg is by DEFINITION the readable foreground for whatever --accent
   currently is, in every mode, under all six workspace accents and all five
   app themes. Taking it for the knob makes the pairing self-maintaining: a new
   theme cannot break the switch, because it cannot set an accent without also
   setting the foreground that goes on it.

   Footprint moves 38x22 -> 36x20 (sm 30x17 unchanged) to match FormKit's
   published contract, DESIGN.md 14.3. Two pixels inside a flex row, and it
   buys one geometry for both skins instead of two that drift. */
.switch {
  width: var(--sw-w); height: var(--sw-h);
  border-radius: var(--r-pill);
  background: var(--border-strong);
  position: relative; flex-shrink: 0; border: none; cursor: pointer;
  padding: 0;
  transition: background var(--dur-micro) var(--ease);
}
.switch::after {
  content: ""; position: absolute;
  top: var(--sw-inset); left: var(--sw-inset);
  width: var(--sw-knob); height: var(--sw-knob);
  border-radius: var(--r-pill);
  background: var(--accent-fg);
  /* A ring as well as a drop shadow. The knob's contrast against the OFF track
     is deliberately low in both modes (it is the quiet state); the ring is what
     keeps its edge defined so it never reads as a smudge. Same reasoning as the
     elevation ladder, v2 section 8. */
  box-shadow: 0 0 0 1px rgba(22,24,29,.10), 0 1px 2px rgba(22,24,29,.20), 0 2px 6px rgba(22,24,29,.12);
  transition: transform var(--dur-micro) var(--ease),
              width var(--dur-micro) var(--ease),
              background var(--dur-micro) var(--ease);
}
/* The switch is 36x20 by FormKit's published contract (DESIGN.md 14.3), which is
   under the Any-Size Law's 24px floor on its short axis: measured on the
   Notifications route at 1280x900, every switch reported 36x20 (audit UX-016).
   The law's own answer is to grow the HIT AREA, never the glyph, so the footprint
   above is untouched and this adds an invisible one. ::after is already the knob,
   hence ::before. It is centred on the track, so it expands symmetrically and
   cannot drag the control off its row's baseline. */
.switch::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 24px;
}
@media (max-width: 640px) {
  /* Touch wants 44. Widen as well: the track is 36 wide, so width is the short
     axis here. */
  .switch::before { height: 44px; left: -4px; right: -4px; }
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(var(--sw-travel)); }
/* Press: the knob stretches toward where it is going. The travel is reduced by
   exactly the amount it grew, so the leading edge lands on the same pixel and
   the knob cannot overshoot its own track. */
.switch:active::after { width: calc(var(--sw-knob) + 4px); }
.switch.on:active::after { transform: translateX(calc(var(--sw-travel) - 4px)); }
.switch:focus-visible { box-shadow: var(--focus-ring); outline: none; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition-duration: .01ms; } }
/* Dark needs ONE change and it is not a colour: the off-track has to be a touch
   heavier, because --accent-fg is near-black there and a 16% white track does
   not give its edge enough to sit against. Everything else resolves itself.

   `:not(.on)` IS LOAD-BEARING, not tidiness. `.dark .switch` and `.switch.on`
   are BOTH (0,2,0), so at equal specificity the later one wins — and this block
   is later. Without the guard the dark off-track repaints every switch that is
   turned ON, so the toggle flips and never looks like it did. The removed
   `.dark .switch.on { background: var(--lime) }` hack was accidentally the
   thing keeping this correct, at (0,3,0). Scoping to :not(.on) makes the two
   rules mutually exclusive instead of racing on source order — the same
   construction the theme layer uses for :not(.dark). */
.dark .switch:not(.on) { background: rgba(255, 255, 255, 0.24); }
.dark .switch::after { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.44), 0 2px 6px rgba(0,0,0,.30); }

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Single, clean focus indicator policy — NEVER stack rings.
   Form fields & inputs get ONE accent border (no glow + no outline ring).
   The global :focus-visible outline above is for keyboard nav on chrome
   (buttons, links, cards) that has no focus styling of its own. */
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible,
[contenteditable]:focus, [contenteditable]:focus-visible,
.input:focus, .input:focus-visible,
.invsel-btn:focus, .invsel-btn:focus-visible,
.invsel-btn.open,
.tb-search:focus, .tb-search:focus-visible,
.tb-search:focus-within {
  outline: none; box-shadow: none;
}
/* `input[type="search"]` gets a browser-default focus ring (a two-layer
   box-shadow: an inset surface-color ring + an outer blue ring at ~55-60%
   alpha) that every OTHER input type in this file does not. Confirmed live:
   `appearance:none` alone does NOT remove it — Chromium still applies this
   ring at `:focus-visible` even once the field is fully unstyled, and
   even the earlier normal-weight `outline:none; box-shadow:none;` rule above
   (which suppresses every other input's default fine) loses to it. Only an
   explicit `!important` override wins, confirmed by probing with an injected
   stylesheet before writing this rule. Net effect without this block: every
   search box in the app (dashboard widget search, sidebar flyout search,
   workspace feature search, …) showed that native blue ring stacked on top of
   its own `:focus-within` accent border — a real double-ring violation of the
   "one clean focus indicator" rule below. `appearance:none` still belongs here
   too, to drop the native pill shape and cancel/decoration buttons every one
   of these fields already replaces with its own clear button. One rule fixes
   every current and future `type="search"` instance. */
input[type="search"] {
  appearance: none; -webkit-appearance: none;
}
input[type="search"]:focus-visible {
  outline: none !important; box-shadow: none !important;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.tb-search:focus, .tb-search:focus-visible, .tb-search:focus-within,
.tb-icon-btn:focus, .tb-icon-btn:focus-visible,
.tb-create:focus, .tb-create:focus-visible,
.wtabs-tool:focus, .wtabs-tool:focus-visible,
.wtab-new:focus, .wtab-new:focus-visible,
.userchip:focus, .userchip:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* utility */
.pulse-dot { animation: pulse 1.8s ease-in-out infinite; }
.task-card { transition: border-color .14s, background .14s; box-shadow: none; }
.task-card:hover { box-shadow: none; border-color: var(--border-strong); background: var(--bg-hover); }
.task-card:hover .task-card-pin { opacity: 1 !important; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.scroll-y { overflow-y: auto; }
.nowrap { white-space: nowrap; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   Dropdown menus / popovers
   ============================================================ */
.menu {
  position: absolute; z-index: 1; min-width: 200px; padding: var(--space-tight);
  background: color-mix(in srgb, var(--overlay) 97%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: var(--r-card); box-shadow: 0 2px 5px rgba(40,28,18,.08), 0 18px 42px -15px rgba(40,28,18,.34), 0 40px 72px -44px rgba(40,28,18,.4);
  animation: pop-menu var(--dur-over) var(--ease); transform-origin: top;
  max-height: min(72vh, 560px); overflow: hidden;
}
.menu-portal { /* stacking root for menus — always above Smart Modal (1000) */ }
@keyframes pop-menu { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
/* Micro Physics — every window.FloatingPop consumer (reactions, mentions,
   Aria observation panel, etc.) gets the same weighted pop-in as .menu,
   instead of appearing instantly. One fix, every popover benefits. */
.fpop { animation: pop-menu var(--dur-over) var(--ease); transform-origin: top; }
.menu-scroll { max-height: inherit; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 1px var(--space-tight) 1px 1px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.menu-scroll:hover { scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent; }
.menu-scroll::-webkit-scrollbar { width: 7px; }
.menu-scroll::-webkit-scrollbar-track { background: transparent; margin: var(--space-inline) 0; }
/* hover-only, same law as the global bar above */
.menu-scroll::-webkit-scrollbar-thumb { background: transparent; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.menu-scroll:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.menu-scroll:hover::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 36%, transparent); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  min-height: 36px; padding: 0 var(--space-inline); border: 1px solid transparent; background: transparent;
  border-radius: var(--r-control); font-size: var(--t-label-size); font-weight: 560;
  color: var(--ink); cursor: pointer; text-align: left; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: color-mix(in srgb, var(--accent) 19%, transparent); color: var(--accent); outline: none; transform: translateX(1px); }
.menu-item .icn { color: var(--ink-3); flex-shrink: 0; }
.menu-item:hover .icn, .menu-item:focus-visible .icn { color: var(--accent); }
.menu-item.danger { color: var(--st-blocked); }
.menu-item.danger .icn { color: var(--st-blocked); }
.menu-item.danger:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.menu-item.disabled, .menu-item:disabled { color: var(--ink-4); cursor: default; opacity: .5; }
.menu-item.disabled:hover, .menu-item:disabled:hover { background: none; color: var(--ink-4); transform: none; }
.menu-item.disabled .icn, .menu-item:disabled .icn { color: var(--ink-4); }
.menu-item .grow { font-weight: inherit; min-width: 0; }
.menu-item .grow:not(.mmarq) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item .kbd { margin-left: auto; flex: none; }
.menu-item .kbd { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .02em; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 5px; padding: 1px var(--space-tight); line-height: 16px; }
.menu-item:hover .kbd, .menu-item:focus-visible .kbd { color: currentColor; border-color: color-mix(in srgb, currentColor 24%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); }
.menu-label { font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-inline) var(--space-inline) var(--space-tight); }
.menu-sep { height: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin: var(--space-tight) var(--space-inline); }

/* ============================================================
   Toasts — Cursor-style card: icon + copy + close, pill actions,
   bottom progress (no digit-in-ring). Docked low above the Aria fab.
   ============================================================ */
.toast-host {
  position: fixed; bottom: 22px; right: 78px; z-index: 890;
  display: flex; flex-direction: column; gap: var(--space-item); align-items: flex-end;
  pointer-events: none;
  width: var(--toast-host-width, min(400px, calc(100vw - 100px)));
  left: var(--toast-inset-left, auto);
  transition: bottom var(--dur-over) var(--ease), right var(--dur-over) var(--ease), width var(--dur-over) var(--ease), left var(--dur-over) var(--ease);
}
/* Sit on the same baseline as the Aria fab (bottom:22 / ~44px), clear it to the left.
   Narrow width / max-height live in the mobile stack block further down. */
/* Open Aria dock panel owns the bottom-right — park toasts above it. */
body.has-aria-mini .toast-host {
  bottom: 490px; right: 22px; width: min(400px, calc(100vw - 44px));
}
body.has-aria-full .toast-host {
  bottom: 630px; right: 22px; width: min(400px, calc(100vw - 44px));
}
body.has-aria-fab .toast-host {
  bottom: 22px; right: 78px; width: min(400px, calc(100vw - 100px));
}
/* Sit ABOVE the proposal card rather than growing into it. --tprop-h is published
   by ProposalCards from a live measurement (same pattern as MorningBriefCard's
   --brief-h) because its height depends on the suggestion's title/detail length;
   a fixed offset collided with the toast dock the moment the copy got longer than
   the guessed value ("This keeps happening" behind "Back up your workspace"). */
body.has-proposals .toast-host {
  bottom: calc(82px + var(--tprop-h, 150px) + 16px); right: 20px; width: min(400px, calc(100vw - 40px));
}
body.has-proposals.has-aria-mini .toast-host {
  bottom: calc(490px + var(--tprop-h, 150px) + 16px); right: 22px; width: min(400px, calc(100vw - 44px));
}
body.has-proposals.has-aria-full .toast-host {
  bottom: calc(630px + var(--tprop-h, 150px) + 16px); right: 22px; width: min(400px, calc(100vw - 44px));
}
.toast {
  position: relative; display: flex; flex-direction: column; gap: 0;
  width: 100%; max-width: 400px;
  padding: var(--notif-pad) var(--notif-pad) 13px;
  background: var(--notif-bg);
  border: 1px solid var(--notif-border);
  border-radius: var(--notif-radius);
  box-shadow: var(--notif-shadow);
  pointer-events: auto; overflow: hidden;
  animation: toast-in var(--dur-over) var(--ease);
}
.toast.has-foot { padding-bottom: var(--space-item); }
.toast.leaving { animation: toast-out var(--dur-over) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.toast { transition: opacity var(--dur-over) var(--ease); }

/* The card slot — exactly ONE card is on screen; everything else waits behind the
   pager. The slot owns the depth edges so the card itself stays a plain surface, and
   it lifts a leaving card out of flow so its replacement does not jump down and back. */
.toast-slot { position: relative; width: 100%; pointer-events: none; }
.toast-slot > .toast { position: relative; z-index: 1; }
.toast-slot > .toast.leaving { position: absolute; inset: auto 0 0 0; z-index: 2; }
.toast-slot.pk1::after,
.toast-slot.pk2::after,
.toast-slot.pk2::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: color-mix(in srgb, var(--overlay) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-top: none;
  box-shadow: 0 12px 26px -16px rgba(40,28,18,.34);
}
.toast-slot.pk1::after,
.toast-slot.pk2::after { left: var(--space-inline); right: var(--space-inline); bottom: calc(var(--sp-1) * -1); height: var(--sp-4); }
.toast-slot.pk2::before { left: var(--space-item); right: var(--space-item); bottom: calc(var(--sp-2) * -1); height: var(--sp-4); }
/* the edges live outside the card, so reserve their depth in the column */
.toast-slot.pk1 { margin-bottom: var(--sp-1); }
.toast-slot.pk2 { margin-bottom: var(--sp-2); }

.toast-host-tools {
  pointer-events: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: var(--space-tight);
  margin-bottom: 2px; flex-wrap: wrap; justify-content: flex-end;
}
.toast-clear-all {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: pointer;
  font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3);
  background: transparent; border: none; box-shadow: none;
  transition: background .14s, color .14s;
}
.toast-clear-all:hover { color: var(--accent); background: var(--bg-hover); transform: none; }

/* Narrow: one open card + scrollable fan-out so the stack never owns the viewport. */
@media (max-width: 640px){
  .toast-host {
    bottom: 76px; right: 12px; width: calc(100vw - 24px);
    max-height: min(38vh, 280px);
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    gap: var(--space-inline);
  }
  body.has-aria-mini .toast-host, body.has-aria-full .toast-host {
    top: max(12px, env(safe-area-inset-top)); bottom: auto; right: 12px; width: calc(100vw - 24px);
    max-height: min(30vh, 220px);
  }
  /* The desktop `body.has-aria-fab` rule outranks the bare `.toast-host` above on
     specificity (0,2,1 vs 0,1,0), so without this the dock kept its 78px desktop inset
     on a phone and rendered ~275px wide instead of full width. The sibling aria states
     already had their narrow override; this one was simply missed. */
  body.has-aria-fab .toast-host {
    bottom: 76px; right: 12px; width: calc(100vw - 24px);
  }
  body.has-proposals .toast-host { max-height: min(30vh, 220px); }
  .toast-host-tools { gap: var(--space-tight); }
}
/* Touch: grow the HIT AREA to 44px, never the glyph and never the box height — every
   control on the footer row stays --control-h-sm so the row keeps one height. */
@media (max-width: 640px), (hover: none) {
  .toast-pg-btn, .toast-close, .toast-mute-ic, .toast-action, .toast-split-more { position: relative; }
  .toast-pg-btn::before, .toast-close::before, .toast-mute-ic::before, .toast-split-more::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .toast-action::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 44px; transform: translateY(-50%);
  }
}

.toast-main { display: flex; align-items: flex-start; gap: var(--space-item); }
/* bare glyph — no filled tile (Stelaah icon rule) */
.toast-ic {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 0; background: none;
}
.toast-ic.success { color: var(--st-done); }
.toast-ic.error { color: var(--st-blocked); }
.toast-ic.info, .toast-ic.warn { color: var(--accent); }
.toast-ic.mention { color: var(--mention-me-fg); background: var(--mention-me-bg); border-radius: var(--r-control); }
.toast.toast-mention {
  border-color: color-mix(in srgb, var(--mention-me-fg) 22%, var(--border));
}
.toast.toast-mention .toast-title { letter-spacing: -0.01em; }
.toast.toast-mention .toast-action { color: var(--mention-me-fg); }
.toast.toast-mention .toast-secs { color: color-mix(in srgb, var(--mention-me-fg) 60%, var(--ink-4)); }
.tb-icon-btn.tb-mention-pulse { animation: tbMentionPulse 1.6s ease-out 1; }
.tb-count.is-mention { background: var(--mention-me-fg); }
@keyframes tbMentionPulse {
  0%, 100% { background: transparent; }
  30% { background: var(--mention-me-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-icon-btn.tb-mention-pulse { animation: none; }
}
.toast-count {
  position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 var(--space-tight);
  border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg);
  font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--overlay);
  animation: toast-count-pop .3s var(--ease);
}
@keyframes toast-count-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
/* Gentle task-complete bounce — a tiny checkmark pop, not confetti. */
/* `.task-check-pop` (set by window.TaskCheck on the not-done -> done
   transition) is animated once, in s-micro.css, which loads after this file.
   The definition that used to sit here faded the ring in from scale(.5)/
   opacity 0 — a first-appearance animation on a control that is already on
   screen — and lost to s-micro.css anyway. One name, one definition. */
/* Tiny inline "Saved" tick (SaveTick, s-shell.jsx) — fades in, no layout jump. */
.save-tick { display: inline-flex; align-items: center; gap: var(--space-tight); animation: fade-in var(--dur-micro) var(--ease); color: var(--ink-3); }
.toast-title { font-size: var(--notif-title-size); font-weight: var(--notif-title-weight); color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.toast-msg { margin-top: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.toast-tolink { margin-top: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-tight); line-height: 1.2; }
.toast-tolink:hover { text-decoration: underline; }

.toast-close {
  flex-shrink: 0; width: 26px; height: 26px; margin: -4px -4px 0 0; padding: 0;
  border: none; background: none; border-radius: var(--r-control); cursor: pointer;
  display: grid; place-items: center; color: var(--ink-4);
  position: relative;
  transition: background .14s, color .14s;
}
.toast-close:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
.toast-mute-ic {
  flex-shrink: 0; width: 26px; height: 26px; margin: -4px 0 0 0; padding: 0;
  border: none; background: none; border-radius: var(--r-control); cursor: pointer;
  display: grid; place-items: center; color: var(--ink-4); opacity: 0;
  position: relative;
  transition: background .14s, color .14s, opacity .14s;
}
.toast:hover .toast-mute-ic, .toast:focus-within .toast-mute-ic { opacity: 1; }
.toast-mute-ic:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
@media (hover: none) { .toast-mute-ic { opacity: 1; } }

/* One footer row: pager on the left, countdown + action pills on the right. Both edges
   sit on the card gutter (--notif-pad), which is the surface's single left edge. */
.toast-foot {
  display: flex; align-items: center; gap: var(--space-inline);
  margin: var(--space-item) 0 0 0;
}
.toast-foot-sp { flex: 1 1 auto; min-width: 0; }

/* Pager — how you skip a notification without dismissing it. */
.toast-pager { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.toast-pg-btn {
  width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
  display: grid; place-items: center;
  border: none; background: transparent; border-radius: var(--r-control); cursor: pointer;
  color: var(--ink-4); transition: background .14s, color .14s;
}
.toast-pg-btn:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
/* One chevron glyph serves both directions — mirrored, not a second icon path.
   Icon renders either an inline <svg> or an icon-font <i>, so mirror whichever lands. */
.toast-pg-btn.prev > svg,
.toast-pg-btn.prev > i { transform: scaleX(-1); }
.toast-pg-label {
  font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Auto-dismiss countdown — whole seconds, not a bar. Swaps to "Paused" on hover. */
.toast-secs {
  flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Source label above the title on a typed card (Aria, Automation). */
.toast-eyebrow {
  font-size: var(--t-micro-size); font-weight: 500; letter-spacing: 0; color: var(--ink-3);
  line-height: 1.3; margin-bottom: 2px;
}

.toast-action {
  font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2);
  height: var(--control-h-sm); display: inline-flex; align-items: center;
  background: transparent;
  border: none;
  cursor: pointer; padding: 0 var(--space-item); border-radius: var(--r-control); flex-shrink: 0;
  transition: background .14s, color .14s, border-color .14s;
}
.toast-action:hover { background: var(--bg-hover); color: var(--accent); }
.toast-action.primary {
  color: var(--notif-pill-fg); background: var(--notif-pill-bg);
  border: 1px solid var(--notif-pill-border);
}
.toast-action.primary:hover { background: var(--notif-pill-hover-bg); color: var(--notif-pill-fg); }
.toast-action.quiet { color: var(--ink-3); font-weight: 500; }
.toast-action.quiet:hover { color: var(--ink); }

/* Split button — primary pill plus a chevron that opens the remaining actions. */
.toast-split { display: inline-flex; align-items: stretch; flex-shrink: 0; }
.toast-split .toast-action.primary { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.toast-split-more {
  height: var(--control-h-sm); width: var(--control-h-sm); padding: 0;
  display: grid; place-items: center; cursor: pointer;
  color: var(--notif-pill-fg); background: var(--notif-pill-bg);
  border: 1px solid var(--notif-pill-border);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  transition: background .14s;
}
.toast-split-more:hover { background: var(--notif-pill-hover-bg); }

/* Micro capsule — one at a time, replaced in place, never part of the pager. */
.toast-micro {
  pointer-events: auto; align-self: flex-end; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--space-inline);
  max-width: 100%; height: var(--control-h-sm); padding: 0 var(--space-item);
  background: var(--notif-bg); border: 1px solid var(--notif-border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  color: var(--ink-2); animation: toast-in var(--dur-over) var(--ease);
}
.toast-micro > svg,
.toast-micro > i { flex-shrink: 0; color: var(--ink-3); }
.toast-micro.leaving { animation: toast-out var(--dur-over) var(--ease) forwards; }
.toast-micro-txt {
  font-size: var(--t-caption-size); font-weight: 500; line-height: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Visually hidden but screen-reader audible — used for the toast host's dedicated
   "just this one event" live announcement (see FusedToastBody in s-kit.jsx). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Notification fusion — a card that has absorbed a second related event.
   Reuses --notif-* tokens and the existing hairline/small-caps vocabulary;
   no new container styles, no left accent bars (house rules). */
.toast.fusing .toast-fused-body { animation: toast-compress .32s var(--ease); }
@keyframes toast-compress { 0% { transform: scaleY(1); } 40% { transform: scaleY(.985); } 100% { transform: scaleY(1); } }
.toast-ic.fused { color: var(--accent); }
.toast-fused-label { color: var(--ink-2); font-weight: 550; }
.toast-fused-rows { margin-top: var(--space-inline); display: flex; flex-direction: column; }
.toast-fused-row {
  display: flex; align-items: center; gap: var(--space-inline);
  padding: var(--space-inline) 0; color: var(--ink-2); font-size: var(--t-caption-size); line-height: 1.3;
  border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  animation: toast-row-in var(--dur-over) var(--ease);
}
.toast-fused-row:first-child { border-top: none; padding-top: 0; }
.toast-fused-row > svg { flex-shrink: 0; color: var(--ink-4); }
.toast-fused-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-fused-row-count { flex-shrink: 0; color: var(--ink-4); font-size: var(--t-micro-size); font-variant-numeric: tabular-nums; }
.toast-fused-row.is-severe { color: var(--st-blocked); font-weight: 550; }
.toast-fused-row.is-severe > svg { color: var(--st-blocked); }
.toast-fused-row.toast-row-new { animation: toast-row-in var(--dur-over) var(--ease), toast-row-pulse .9s ease-out; }
@keyframes toast-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes toast-row-pulse {
  0%, 100% { background: transparent; }
  25% { background: color-mix(in srgb, var(--accent) 10%, transparent); }
}
.toast-fused-more {
  align-self: flex-start; margin-top: 2px; padding: var(--space-tight) 0 0;
  border: none; background: none; cursor: pointer;
  font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3);
  transition: color .14s;
}
.toast-fused-more:hover { color: var(--accent); }
.toast-fused-tolink { margin-top: var(--space-inline); margin-left: 0; }
/* The small pill that visually "flies into" the card when a new event joins —
   purely decorative (aria-hidden), removed once the join's highlight window ends. */
.toast-chip-in {
  position: absolute; top: 10px; right: 40px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, var(--notif-bg));
  color: var(--accent);
  animation: toast-chip-fly .34s var(--ease) forwards;
  pointer-events: none;
}
@keyframes toast-chip-fly {
  0% { opacity: 0; transform: translate(10px,-6px) scale(.6); }
  55% { opacity: 1; transform: translate(2px,0) scale(1.05); }
  100% { opacity: 0; transform: translate(0,4px) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .toast.fusing .toast-fused-body { animation: none; }
  .toast-fused-row { animation: none; }
  .toast-chip-in { animation: none; opacity: 0; }
}

.toast-close[data-tip]::after,
.toast-mute-ic[data-tip]::after,
.tprop-mute[data-tip]::after,
.tprop-close[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.toast-close[data-tip]:hover::after,
.toast-mute-ic[data-tip]:hover::after,
.tprop-mute[data-tip]:hover::after,
.tprop-close[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The auto-close countdown is `.toast-secs` (whole seconds in the footer), not a bar.
   The old `.toast-progress` scaling hairline is gone: a line draining toward zero read
   as loading/anxious on a confirmation the user did not ask to be timed. */

/* subtle / information toast — quieter */
.toast.toast-subtle { padding: var(--space-item) var(--space-item) var(--space-inline); box-shadow: var(--notif-shadow-sm); }
.toast.toast-subtle .toast-title { font-size: var(--t-label-size); font-weight: 500; color: var(--ink-2); }
.toast.toast-subtle .toast-ic { color: var(--ink-3); }
.toast.toast-subtle .toast-count { top: -6px; right: -8px; min-width: 15px; height: 15px; font-size: 9px; }

/* calm tier (the default) — plain confirmations (Saved, Copied, Synced…) stay legible
   but sit a touch quieter than sys/important/error, which is the actual signal now. */
.toast.toast-calm { box-shadow: var(--notif-shadow-sm); }

/* elevated tier — sys / important toasts are worth pausing for. The weight comes from a
   tinted border and a bolder title ONLY. There is deliberately no second `0 0 0 1px` ring:
   stacked on the card's own 1px border it painted a doubled outline that read as a glow
   (David, 2026-08-17), the same defect the focus-ring rule bans elsewhere. */
.toast.toast-important,
.toast.toast-sys {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--notif-border));
}
.toast.toast-important .toast-title,
.toast.toast-sys .toast-title { font-weight: 650; }
/* errors already read as urgent via the red icon — a tinted border is enough, no extra ring */
.toast:has(.toast-ic.error) {
  border-color: color-mix(in srgb, var(--st-blocked) 22%, var(--notif-border));
}

/* charcoal Cursor-like toast when the app is in dark mode — surface comes from --notif-* */
.dark .toast-slot.pk1::after,
.dark .toast-slot.pk2::after,
.dark .toast-slot.pk2::before {
  background: #262626;
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .toast-clear-all {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.dark .toast-count { box-shadow: 0 0 0 2px var(--notif-bg); }
.dark .toast.toast-subtle { background: #262626; }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; transition: opacity var(--dur-over) var(--ease); }
  .toast.leaving { animation: none; opacity: 0; }
  .toast-micro, .toast-micro.leaving { animation: none; }
  .tprop-progress > i { transition: none; }
  .toast-count { animation: none; }
}

/* ============================================================
   Form fields
   ============================================================ */
/* LEGACY Field — `Field` in s-kit.jsx, 620 call sites across 75 files.
   Brought onto the DESIGN.md §14.1 rhythm and type roles on 2026-08-16, CSS
   ONLY: no DOM change, no JSX touched, so every existing call site is corrected
   without a migration. New code should use the kit instead
   (`window.FormKit.Field` / `.fkit-field` in s-formkit.jsx) — this block exists
   to stop the legacy component being wrong, not to keep it alive.
   Four divergences fixed:
     1. label was --t-caption/600/--ink-2 — quieter than the content it labels,
        the §9 inverted-hierarchy trap. Now the .t-label role (13/18/500/--ink).
     2. hint was --t-micro/--ink-4. Now the .t-caption role (12/16/--ink-3).
     3. control→hint was 8; §14.1 says 4. See the gap note below.
     4. .field-row used bare `1fr` tracks (fixed further down).
   Why the hint is pulled back with a negative margin instead of dropping the
   flex `gap`: `children` here is arbitrary, and a good number of call sites pass
   SEVERAL elements as the control (an input plus a secondary row). The 8 must
   stay between those, so only the hint/error moves to 4. */
.field { display: flex; flex-direction: column; gap: var(--space-inline); }
.field-label { display: block; margin: 0; font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: var(--t-label-weight); letter-spacing: var(--t-label-track); color: var(--ink); }
.field-label .req { color: var(--st-blocked); margin-left: 2px; }
.field-hint { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--ink-3); margin-top: calc(var(--space-tight) - var(--space-inline)); }
/* Status INK, not --st-blocked: #e0556a is a ~3.5:1 fill colour and fails as
   body text on --surface. --st-blocked-ink is the documented readable pair. */
.field-error { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--st-blocked-ink); font-weight: 500; margin-top: calc(var(--space-tight) - var(--space-inline)); }
.input.error, .field.has-error .input { border-color: var(--st-blocked); }
.input.error:focus, .field.has-error .input:focus { box-shadow: none; border-color: var(--st-blocked); }
/* canonical empty state — centered in the middle of the page, contextual illustration */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-item); padding: 48px var(--space-block); width: 100%; margin: auto;
  flex: 1 1 auto; min-height: clamp(340px, 60vh, 580px); box-sizing: border-box;
  animation: emptyIn .42s var(--ease) backwards;
}
.empty.compact { padding: 28px var(--space-group); min-height: 0; flex: 0 0 auto; gap: var(--space-inline); animation: none; }
.empty-ic {
  display: grid; place-items: center;
  color: var(--ink-4);
  margin-bottom: var(--space-tight);
}
.empty.compact .empty-ic { margin-bottom: var(--space-tight); }
/* contextual illustration — "paper & petals" v3.
   Tokens live on .ea-wrap (not .empty) so scenes render correctly anywhere:
   command palette, bell dropdown, dropzones, modals. One green accent moment
   per scene; Aria petals are the only AI glyph. All motion is transform or
   opacity, loops are slow and calm, and everything stops under
   prefers-reduced-motion. Entrance fills are `backwards` (never `both`). */
.ea-wrap {
  width: min(232px, 100%); margin: 0 auto; line-height: 0; pointer-events: none;
  /* paper — light */
  --art-panel: #ffffff;
  --art-fill: #e7e4e0;
  --art-fill-soft: #efedea;
  --art-stroke: #e4e1db;
  --art-dash: #cfccc4;
  --art-shadow: rgba(31, 36, 29, 0.05);
  /* ink */
  --art-glyph: #7d7973;
  --art-txt: #4b473f;
  --art-cursor: #45423c;
  --art-field: #d8d5cd;
  /* the one accent */
  --art-green: #457d51;
  --art-green-soft: color-mix(in srgb, var(--art-green) 12%, transparent);
  --art-check-fg: #ffffff;
  /* seasonal — holiday moments ONLY, never weather. Stelaah has its own
     weather system; sun/rain/snow decorations must never be added here. */
  --art-amber: #e0b13f;
  --art-trunk: #a5876a;
  --art-heart: #e0708a;
  --art-pumpkin: #d98a41;
  --art-burst: #d9a940;
  /* legacy alias (older call sites) */
  --art-accent: var(--art-green);
  --art-accent-fg: var(--art-check-fg);
}
.dark .ea-wrap {
  --art-panel: #202020;
  --art-fill: #333333;
  --art-fill-soft: #262626;
  --art-stroke: #2f2f2f;
  --art-dash: #3f3f3f;
  --art-shadow: rgba(0, 0, 0, 0.32);
  --art-glyph: #9b9b98;
  --art-txt: #d9d7d3;
  --art-cursor: #e8e6e2;
  --art-field: #383838;
  --art-green: #87b98f;
  --art-check-fg: #16211a;
  --art-amber: #d9a940;
  --art-trunk: #8a7258;
  --art-heart: #c76d84;
  --art-pumpkin: #c07f42;
  --art-burst: #d9a940;
}
.empty .ea-wrap { width: min(232px, 62%); margin-bottom: var(--space-tight); }
.empty.compact .ea-wrap { display: none; }
.ea-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* paper */
.ea-card { fill: var(--art-panel); stroke: var(--art-stroke); stroke-width: 2; filter: drop-shadow(0 3px 5px var(--art-shadow)); }
.ea-ghost { fill: color-mix(in srgb, var(--art-panel) 45%, transparent); stroke: var(--art-dash); stroke-width: 2; stroke-dasharray: 5 6; }
.ea-ghost-circle { fill: none; stroke: var(--art-dash); stroke-width: 2; stroke-dasharray: 4 5; }
.ea-dropzone { fill: color-mix(in srgb, var(--art-panel) 40%, transparent); stroke: var(--art-dash); stroke-width: 2; stroke-dasharray: 7 8; }
.ea-tint { fill: var(--art-green-soft); }
.ea-tint-card { fill: var(--art-green-soft); stroke: color-mix(in srgb, var(--art-green) 26%, var(--art-stroke)); stroke-width: 2; }
.ea-bar { fill: var(--art-fill); }
.ea-bar2 { fill: var(--art-fill-soft); }
.ea-panel { fill: var(--art-panel); }
.ea-node { fill: var(--art-fill); }
.ea-shadow { fill: var(--art-shadow); }
.ea-avatar { fill: var(--art-fill-soft); stroke: var(--art-stroke); stroke-width: 2; }
.ea-person { stroke-width: 1.7; }
.ea-swatch-b { fill: var(--art-amber); }
.ea-swatch-c { fill: var(--art-txt); }
.ea-ring { fill: none; stroke: var(--art-fill); stroke-width: 2.2; }
.ea-ring-2 { fill: none; stroke: var(--art-stroke); stroke-width: 2.4; }
.ea-hr { stroke: var(--art-stroke); stroke-width: 1.5; }
.ea-fold { fill: none; stroke: var(--art-stroke); stroke-width: 2; stroke-linejoin: round; }
.ea-tray { fill: none; stroke: var(--art-stroke); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* ink */
.ea-squig { fill: none; stroke: var(--art-fill); stroke-width: 2.2; stroke-linecap: round; }
.ea-squig.soft { stroke: var(--art-fill-soft); }
.ea-glyph { fill: none; stroke: var(--art-glyph); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ea-glyph-soft { fill: none; stroke: var(--art-fill); stroke-width: 1.6; stroke-linecap: round; }
.ea-txt { fill: var(--art-txt); font-family: var(--font-app); font-weight: 600; letter-spacing: -.01em; }
.ea-txt.b { font-weight: 680; }
.ea-txt.soft { fill: var(--art-glyph); font-weight: 500; }
.ea-txt.serif { font-family: var(--font-serif); font-weight: 640; }
.ea-cursor-glyph { fill: var(--art-cursor); stroke: var(--art-panel); stroke-width: 1.4; stroke-linejoin: round; }
/* the green moment */
.ea-accent { fill: var(--art-green); }
.ea-accent-stroke { fill: none; stroke: var(--art-green); stroke-width: 2; stroke-linecap: round; }
.ea-check { fill: none; stroke: var(--art-check-fg); stroke-linecap: round; stroke-linejoin: round; }
.ea-dia { fill: none; stroke: var(--art-green); stroke-width: 1.8; stroke-linejoin: round; }
.ea-dia-fill { fill: var(--art-green); }
.ea-seqglow { fill: var(--art-green); opacity: 0; }
.ea-glow { fill: var(--art-green); opacity: .13; filter: url(#eaBlur); }
.ea-handle { fill: var(--art-panel); stroke: var(--art-green); stroke-width: 1.6; }
.ea-handle-dot { fill: var(--art-panel); stroke: var(--art-green); stroke-width: 1.6; }
.ea-select { fill: none; stroke: var(--art-green); stroke-width: 1.6; }
.ea-shape { fill: var(--art-panel); stroke: var(--art-glyph); stroke-width: 2; }
.ea-shape-soft { fill: var(--art-panel); stroke: var(--art-stroke); stroke-width: 2; }
.ea-glass { fill: var(--art-panel); fill-opacity: .55; stroke: var(--art-glyph); stroke-width: 3.4; }
.ea-glass-in { fill: none; stroke: var(--art-panel); stroke-width: 1.4; opacity: .85; }
.ea-glass-shine { fill: none; stroke: var(--art-glyph); stroke-width: 2.4; stroke-linecap: round; opacity: .35; }
.ea-glass-h { stroke: var(--art-glyph); stroke-width: 4; stroke-linecap: round; }
/* dashed connectors */
.ea-dash { fill: none; stroke: var(--art-dash); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5.5; }
.ea-dash-arrow { fill: none; stroke: var(--art-dash); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Aria petals (the only sanctioned AI glyph) */
.ea-petal { fill: var(--art-green); }
.ea-petal-star { fill: var(--art-panel); opacity: .92; }
/* ambient field */
.ea-field-layer { opacity: .55; }
.ea-field-glyph { fill: none; stroke: var(--art-field); stroke-width: 1.8; stroke-linecap: round; }
.ea-field-dia { fill: var(--art-field); }
/* seasonal micro-moments (holiday only, never weather) */
.ea-tree { fill: var(--art-green); }
.ea-tree-trunk { fill: var(--art-trunk); }
.ea-bauble { fill: var(--art-amber); }
.ea-burst-ray { stroke: var(--art-burst); stroke-width: 2; stroke-linecap: round; }
.ea-burst-ray.alt { stroke: var(--art-green); }
.ea-heart { fill: var(--art-heart); }
.ea-pumpkin { fill: var(--art-pumpkin); }
.ea-pumpkin-mid { fill: color-mix(in srgb, var(--art-pumpkin) 82%, #ffffff); }
.ea-pumpkin-stem { fill: none; stroke: var(--art-green); stroke-width: 2; stroke-linecap: round; }
/* module scenes (learning, contract, form, time, budget, research, site,
   social, email, integration, import, settings, group, approval, booking,
   lead, board, marketplace, feed, offline, error, locked) */
/* draw-in strokes: these carry pathLength=1 in the JSX, so dasharray 1 is the
   whole path and dashoffset 1 -> 0 reveals it. Solid strokes only, never on a
   dashed connector (KNOWN_ISSUES #94). */
.ea-arc { fill: none; stroke: var(--art-green); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; animation: eaDrawCheck .9s ease-out .35s backwards; }
.ea-sign { fill: none; stroke: var(--art-glyph); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ea-draw-sign { stroke-dasharray: 1; animation: eaDrawCheck 1.5s ease-out .7s backwards; }
.ea-field-box { fill: none; stroke: var(--art-stroke); stroke-width: 2; }
.ea-hand { stroke: var(--art-glyph); stroke-width: 2.6; stroke-linecap: round; }
.ea-tick { transform-box: fill-box; transform-origin: 0% 0%; animation: eaTickHand 8s steps(8, end) infinite; }
/* MOTION EXCEPTIONS (SET 9 8) — the empty-state illustration scene (.ea-*).
   These are not UI chrome; they are an authored SVG animation whose beats
   (a fill sweeping in, a stamp landing, a bar growing, a dashed line drawing)
   were choreographed together with individually tuned overshoot and settle
   curves. Putting all six on one --ease would flatten a designed sequence into
   six identical fades. The rest of the file follows the signature; a drawing
   is allowed to be a drawing. */
.ea-fill-in { transform-box: fill-box; transform-origin: 0% 50%; animation: eaFillIn 1.1s cubic-bezier(.2,.9,.35,1) .3s backwards; }
.ea-highlight { fill: var(--art-green); opacity: .16; }
.ea-coin { fill: var(--art-green); opacity: .18; }
.ea-coin-in { fill: none; stroke: var(--art-green); stroke-width: 2.2; }
.ea-heart-accent { fill: var(--art-green); }
.ea-venn { fill: var(--art-green); fill-opacity: .09; stroke: var(--art-green); stroke-width: 2; stroke-opacity: .45; }
.ea-stamp { transform-box: fill-box; transform-origin: 50% 50%; animation: eaStamp .55s cubic-bezier(.2,.9,.35,1.3) .75s backwards; }
.ea-stamp-ring { fill: none; stroke: var(--art-green); stroke-width: 2.4; }
.ea-check-lg { fill: none; stroke: var(--art-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ea-col { fill: var(--art-fill-soft); stroke: none; }
.ea-knob { fill: var(--art-panel); stroke: var(--art-stroke); stroke-width: 2; }
.ea-slash { stroke: var(--art-green); stroke-width: 3.4; stroke-linecap: round; }
.ea-alert-disc { fill: var(--art-green); opacity: .14; }
.ea-alert-mark { stroke: var(--art-green); stroke-width: 3; stroke-linecap: round; }
.ea-alert-dot { fill: var(--art-green); }
.ea-shackle { fill: none; stroke: var(--art-glyph); stroke-width: 3.4; stroke-linecap: round; }
.ea-trend { stroke-width: 2.6; stroke-dasharray: 1; animation: eaDrawCheck 1s ease-out .5s backwards; }
.ea-rise-hold { transform-box: fill-box; transform-origin: 50% 100%; animation: eaRiseHold 5.5s ease-in-out infinite; }
@keyframes eaTickHand { to { transform: rotate(360deg); } }
@keyframes eaFillIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eaStamp { 0% { opacity: 0; transform: scale(1.5) rotate(-12deg); } 60% { opacity: 1; transform: scale(.94) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes eaRiseHold { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* motion — transform-box so scale/rotate anims pivot on each element */
.ea-in, .ea-bob, .ea-breathe, .ea-breathe-slow, .ea-pulse, .ea-dot-pulse, .ea-tw,
.ea-swing, .ea-spin-slow, .ea-spin-think, .ea-settle, .ea-grow, .ea-sway,
.ea-cursor, .ea-slide, .ea-sweep, .ea-burst, .ea-rise, .ea-shim, .ea-blink {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.ea-in { animation: eaIn .55s cubic-bezier(.16,.84,.44,1) var(--d, 0s) backwards; }
.ea-bob { animation: eaBob var(--dur, 5.6s) ease-in-out var(--d, 0s) infinite; }
.ea-breathe { animation: eaBreathe 4.8s ease-in-out infinite; }
.ea-breathe-slow { animation: eaBreathe 7.2s ease-in-out infinite; }
.ea-pulse { animation: eaPulse 3.2s ease-in-out infinite; }
.ea-dot-pulse { animation: eaDotPulse 2.4s ease-in-out infinite; }
.ea-tw { animation: eaTw 3.4s ease-in-out var(--d, 0s) infinite; }
.ea-swing { transform-origin: 50% 4%; animation: eaSwing 6.5s ease-in-out 1.2s infinite; }
.ea-spin-slow { animation: eaSpin 46s linear infinite; }
.ea-spin-think { animation: eaSpin 9s linear infinite; }
.ea-settle { animation: eaSettle .7s cubic-bezier(.2,.9,.35,1.2) .1s backwards; }
.ea-draw-check { stroke-dasharray: 1; animation: eaDrawCheck .5s ease-out .55s backwards; }
.ea-grow { transform-origin: 50% 100%; animation: eaGrow .8s cubic-bezier(.2,.9,.35,1.15) var(--d, 0s) backwards; }
.ea-sway { animation: eaSway 7s ease-in-out var(--d, 0s) infinite; }
.ea-cursor { animation: eaCursor 9s ease-in-out 1s infinite; }
.ea-march { animation: eaMarch 2.4s linear infinite; }
.ea-flow { animation: eaFlow 2s linear infinite; }
.ea-draw { animation: eaDrawDash .9s cubic-bezier(.16,.84,.44,1) var(--d, 0s) backwards; }
.ea-shim { animation: eaShim 2s ease-in-out var(--d, 0s) infinite; }
.ea-blink { animation: eaBlink 1.5s ease-in-out var(--d, 0s) infinite; }
.ea-slide { animation: eaSlideX 6s ease-in-out var(--d, 0s) infinite; }
.ea-sweep { animation: eaSweep 8.5s ease-in-out 1s infinite; }
.ea-faded { opacity: .4; animation: eaFaded 6.5s ease-in-out infinite; }
.ea-glow-breathe { animation: eaGlowBreathe 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.ea-rise { animation: eaRise 5.6s ease-in-out var(--d, 0s) infinite; }
.ea-burst { animation: eaBurst 3.4s ease-out var(--d, 0s) infinite; }
@keyframes eaIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes eaBob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(var(--amp, -3px)) rotate(var(--rot, 0deg)); }
}
@keyframes eaBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes eaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes eaDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
@keyframes eaTw { 0%, 100% { transform: scale(.82); opacity: .45; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes eaSwing {
  0%, 52%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-11deg); } 18% { transform: rotate(8deg); }
  28% { transform: rotate(-5deg); } 38% { transform: rotate(2.5deg); } 46% { transform: rotate(-1deg); }
}
@keyframes eaSpin { to { transform: rotate(360deg); } }
@keyframes eaSettle { 0% { opacity: 0; transform: scale(.9); } 65% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes eaDrawCheck { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eaGrow { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes eaSway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@keyframes eaCursor {
  0%, 10% { transform: translate(0, 0); }
  26%, 38% { transform: translate(-62px, -14px); }
  54%, 66% { transform: translate(-16px, -52px); }
  82%, 100% { transform: translate(0, 0); }
}
@keyframes eaMarch { to { stroke-dashoffset: -30; } }
@keyframes eaFlow { to { stroke-dashoffset: -17; } }
@keyframes eaDrawDash { from { stroke-dashoffset: 26; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes eaShim { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes eaBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes eaSlideX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes eaSweep { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-7px, -5px); } 70% { transform: translate(5px, 4px); } }
@keyframes eaFaded { 0%, 100% { opacity: .32; } 50% { opacity: .46; } }
@keyframes eaGlowBreathe { 0%, 100% { opacity: .1; transform: scale(1); } 50% { opacity: .17; transform: scale(1.05); } }
@keyframes eaRise {
  0% { transform: translateY(6px); opacity: 0; }
  22% { opacity: .9; } 72% { opacity: .5; }
  100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes eaBurst {
  0% { transform: scale(.25); opacity: 0; }
  16% { opacity: .85; }
  58%, 100% { transform: scale(1.15); opacity: 0; }
}
/* scene art embedded in compact chrome (palette, dropdowns, dropzones, modals) */
.cmd-empty .ea-wrap, .mktp-search-ov-empty .ea-wrap { width: 158px; margin: 0 auto 4px; }
.ntfp-empty .ea-wrap { width: 148px; margin: 2px auto 2px; }
.nc-empty .ea-wrap { width: 192px; margin: 0 auto 8px; }
.fx-uphero .ea-wrap { width: 172px; margin: 0 auto 2px; }
.fx-dropover .ea-wrap { width: 204px; margin: 0 auto 6px; }
.gx-dropzone .ea-wrap { width: 172px; margin: 0 auto 4px; }
.fz-empty .ea-wrap { width: 192px; margin: 0 auto 10px; }
.relmap-empty .ea-wrap { width: 152px; margin: 0 auto 6px; }
.invd-art .ea-wrap { width: 152px; margin: 0 auto 6px; }
.ttrash-empty-state .ea-wrap { width: 188px; margin: 0 auto 4px; }
.cmt-empty .ea-wrap { width: 150px; margin: 0 auto 2px; }
.tcon-empty .ea-wrap { width: 152px; margin: 0 auto 4px; }
.orgc-stage-empty .ea-wrap { width: 168px; margin: 0 auto 6px; }
.sb-empty .ea-wrap { width: 200px; margin: 0 auto 10px; }
.dt-empty-state .ea-wrap { width: 176px; margin: 0 auto 2px; }
@media (prefers-reduced-motion: reduce) {
  .ea-wrap *, .ea-svg * { animation: none !important; }
}
.empty-title { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 630; color: var(--ink); letter-spacing: -.02em; }
.empty.compact .empty-title { font-size: var(--fs-md); font-weight: 600; }
.empty-hint { font-size: var(--fs-sm); color: var(--ink-3); max-width: 340px; line-height: 1.6; }
.empty-act { margin-top: var(--space-group); display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; justify-content: center; }
.empty:not(.compact) .empty-act .btn.primary { height: 40px; padding: 0 20px; border-radius: var(--r-control); font-weight: 600; }
@keyframes emptyIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Designer module splash — shown while the Designer bundle is still loading.
   The original artwork is the complete splash screen, not a cropped decorative
   panel. Its natural aspect ratio prevents the composition from being altered. */
.dsplash {
  width: 100%; height: 100%; min-height: 100%; flex: 1 1 auto; box-sizing: border-box;
  display: grid; place-items: center; padding: clamp(18px, 4vw, 56px);
}
.dsplash-screen {
  position: relative; width: min(100%, 560px); aspect-ratio: 1672 / 941;
  overflow: hidden; border-radius: 30px; isolation: isolate;
  box-shadow: 0 20px 48px rgba(31, 28, 24, .16);
}
.dsplash-artwork {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.dsplash-overlay {
  position: relative; z-index: 1; width: 100%; height: 100%; box-sizing: border-box;
  display: flex; align-items: flex-end; padding: clamp(24px, 5.4vw, 40px);
  pointer-events: none;
}
.dsplash-copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-inline);
  width: min(100%, 210px); color: #202124;
}
.dsplash-brandline { display: inline-flex; align-items: center; gap: var(--space-inline); }
.dsplash-mark { color: #5e7b2d; font-size: var(--t-body-size); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.dsplash-beta { padding: 2px var(--space-tight); border: 1px solid rgba(32,33,36,.16); border-radius: 999px; color: #5f6368; font-size: 8px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.dsplash-word { color: #202124; font-size: clamp(25px, 4vw, 30px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.dsplash-description { margin-top: var(--space-tight); color: #5f6368; font-size: var(--t-micro-size); line-height: 1.45; }
.dsplash-progress { width: 100%; height: 3px; margin-top: var(--space-inline); overflow: hidden; border-radius: 999px; background: rgba(32,33,36,.14); }
.dsplash-progress-fill { display: block; width: 44%; height: 100%; border-radius: inherit; background: #5e7b2d; animation: dsplashProgress 1.5s ease-in-out infinite; }
.dsplash-status { color: #7b8087; font-size: 9px; font-weight: 650; letter-spacing: .02em; }
@keyframes dsplashProgress { 0% { transform: translateX(-115%); } 55% { transform: translateX(145%); } 100% { transform: translateX(145%); } }
@media (max-width: 640px) {
  .dsplash { padding: var(--space-group); }
  .dsplash-screen { width: 100%; border-radius: var(--r-modal); }
  .dsplash-overlay { padding: var(--space-block); }
  .dsplash-copy { width: min(52%, 205px); }
}
@media (prefers-reduced-motion: reduce) { .empty, .dsplash-progress-fill { animation: none; } }
/* minmax(0,1fr), never bare 1fr: a bare `1fr` track has min-width:auto, so it
   refuses to shrink below its content and a long value blows the row apart at
   narrow widths (Spacing & Grid Law; DESIGN.md §14.5). Fixed 2026-08-16. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-item); align-items: start; }
/* two-column form layout for create/edit modals — Field's `full` prop spans
   both columns via inline gridColumn, so this was always meant to be a grid
   (Add lead, New deal, email compose all rely on it) but the rule was missing,
   leaving every field stacked full-width in a single column. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item) var(--space-item); align-items: start; }
.opt-grid { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.opt-chip {
  display: inline-flex; align-items: center; gap: var(--space-inline); height: var(--control-h); padding: 0 var(--space-item);
  border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: transparent;
  font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.opt-chip:hover { border-color: var(--border); background: var(--bg-hover); color: var(--ink); }
.opt-chip.sel { border-color: var(--border); background: var(--bg-active); color: var(--ink); }
.opt-chip .dot { width: 8px; height: 8px; }
/* Base modal shares one inset too. It previously ran left 24 / right 16 on the
   header and footer but 24/24 on the body, so the right edge landed on two
   different lines. See the note on .modal-create below. */
.modal { --modal-inset: var(--space-block); }
.modal-hd {
  display: flex; align-items: flex-start; gap: var(--space-item);
  padding: 20px var(--modal-inset) var(--space-item); border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0; background: var(--surface); border-radius: var(--modal-radius) var(--modal-radius) 0 0;
}
.modal-hd-tx { min-width: 0; padding-top: 2px; }
.modal-title {
  margin: 0; font-size: var(--t-heading-size); font-weight: 650; line-height: 1.25;
  letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
}
.modal-sub {
  margin: var(--space-tight) 0 0; font-size: var(--t-label-size); line-height: 1.45; color: var(--ink-3); max-width: 44em;
}
.modal-x {
  flex: none; width: 30px; height: 30px; margin: -2px 2px 0 0;
  border-radius: var(--r-control) !important; color: var(--ink-3) !important;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.modal-x:hover { color: var(--ink) !important; background: var(--bg-sunken) !important; }
.modal-body {
  padding: 20px var(--modal-inset); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0;
  background: var(--surface);
}
/* Share / no-footer modals: body is the bottom edge. Keep shell overflow:visible
   for in-modal pickers, but round the body so its square fill doesn't peek past
   the modal's border-radius (double corner: square + rounded). */
.modal > .modal-body:last-child {
  border-radius: 0 0 var(--modal-radius) var(--modal-radius);
}
.modal-foot {
  display: flex; align-items: center; gap: var(--space-inline); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--space-item) var(--modal-inset) var(--space-group); border-top: 1px solid var(--border-subtle); flex-shrink: 0;
  background: var(--surface); border-radius: 0 0 var(--modal-radius) var(--modal-radius);
}
.modal-foot .grow, .modal-foot .spacer { margin-right: auto; }
.modal-foot .btn { min-height: var(--control-h); border-radius: var(--r-control); padding-inline: 14px; font-weight: 600; }
.modal-foot .btn.primary { min-width: 88px; }
.modal-foot .btn.secondary { background: transparent; border-color: transparent; color: var(--ink-2); }
.modal-foot .btn.secondary:hover { background: var(--bg-sunken); color: var(--ink); border-color: transparent; }
.modal-msg {
  margin: 0; font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-2);
}
.modal-msg.quiet { font-size: var(--t-label-size); color: var(--ink-3); margin-bottom: var(--space-item); }
.modal.modal-create .modal-msg.quiet { margin-bottom: var(--space-inline); font-size: var(--t-label-size); }
.modal.modal-create .create-summary + .modal-check,
.modal.modal-create .modal-msg + .create-summary { margin-top: 2px; }
.modal.modal-create .modal-check { margin-top: var(--space-item); color: var(--ink-3); font-size: var(--t-caption-size); }
.modal-check {
  display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-group);
  font-size: var(--t-label-size); line-height: 1.4; color: var(--ink-2); cursor: pointer; user-select: none;
}
.modal-check input { margin-top: 1px; }
.modal.modal-danger .modal-title { color: var(--ink); }
.modal.modal-danger .modal-foot .btn.danger { min-width: 96px; }

/* Compact create hub — tabs replace the titled header */
.modal.modal-create { --create-hd-pad-y: 8px; }
/* ONE horizontal inset for the whole modal. Header, body and footer previously
   carried three different left values (14 / 20 / 20) and three different right
   values (10 / 20 / 12), so the title, the first field and the buttons each sat
   on their own vertical line — measured 15px vs 21px from the modal edge.

   That misalignment is the mechanical cause of "this looks cheap". Nobody
   names it; they say the modal feels off. A modal reads as crafted when every
   element shares one left edge and one right edge.

   The tighter header/footer insets existed to tuck the close button and the
   action row nearer the edge. Those are local optimisations that break the
   global line, so the button now sits on the shared inset instead. */
.modal.modal-create { --modal-inset: 20px; }
.modal.modal-create .modal-hd,
.modal.modal-create .modal-hd-custom {
  align-items: center;
  gap: var(--space-inline);
  padding: var(--create-hd-pad-y) var(--modal-inset);
}
.modal.modal-create .modal-hd-slot { min-width: 0; padding-top: 0; }
.modal.modal-create .modal-x { margin: 0; width: 28px; height: 28px; border-radius: var(--r-control) !important; }
.modal.modal-create .modal-body { padding: var(--space-item) var(--modal-inset); }
.modal.modal-create .modal-foot {
  padding: var(--space-inline) var(--modal-inset) var(--space-item);
  gap: var(--space-inline);
}
.modal.modal-create .create-foot-hint {
  margin-right: auto; font-size: var(--t-micro-size); font-weight: 550; letter-spacing: 0.01em;
  opacity: .7; user-select: none;
}
.modal.modal-create .field + .field { margin-top: var(--space-item); }
.modal.modal-create .field-row { margin-top: var(--space-item); gap: var(--space-inline); }
/* Side-by-side fields must not inherit the stacked .field + .field gap
   (higher specificity than .modal .field-row > .field would otherwise push
   the second column down — Log time Task/Team member, and every other create modal). */
.modal.modal-create .field-row > .field { margin-top: 0; }
.modal.modal-create .form-grid { margin-top: var(--space-item); }
.modal.modal-create .form-grid:first-child { margin-top: 0; }
.modal.modal-create .form-grid > .field { margin-top: 0; }
/* .stack already spaces its children via flex `gap` — a margin-top here would double up */
.modal.modal-create .stack > .form-grid { margin-top: 0; }
.create-form { display: flex; flex-direction: column; gap: 2px; }
/* Workspace setup — editorial calm sheet */
.modal.modal-wsc { width: min(1280px, calc(100vw - 32px)) !important; max-width: 1280px; }
.modal.modal-wsc .modal-hd { padding: 20px var(--space-block) var(--space-group); }
.modal.modal-wsc .modal-title {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.modal.modal-wsc .modal-sub { margin-top: var(--space-tight); max-width: 36em; }
.modal.modal-wsc .modal-body { padding: 0; }
.modal.modal-wsc .modal-foot { padding: var(--space-item) var(--space-block); }
.modal.modal-wsc .wsc-save-note { display:inline-flex; align-items:center; gap:var(--space-tight); margin-right:auto; color:var(--ink-3); font-size:var(--t-micro-size); font-weight:550; }
.modal.modal-wsc .wsc-save-note .icn { color:var(--st-done,var(--accent)); }

.modal.modal-create .create-title-input .input,
.modal.modal-create .create-title-input input {
  font-size: var(--t-heading-size); font-weight: 600; letter-spacing: -0.02em;
  border: none; background: transparent; padding: 2px 0 var(--space-tight);
  box-shadow: none; min-height: 0; border-radius: 0;
  color: var(--ink);
}
.modal.modal-create .create-title-input .input::placeholder,
.modal.modal-create .create-title-input input::placeholder { color: var(--ink-4); font-weight: 550; }
.modal.modal-create .create-title-input .input:focus,
.modal.modal-create .create-title-input input:focus {
  border-color: transparent; outline: none; box-shadow: none;
}
.modal.modal-create .create-desc-input { position: relative; }
.modal.modal-create .create-desc-input .input,
.modal.modal-create .create-desc-input textarea,
.modal.modal-create .create-desc-input input {
  border: none; background: transparent; padding: 0 72px 0 0;
  min-height: 44px; resize: vertical; box-shadow: none;
  font-size: var(--t-label-size); line-height: 1.45; color: var(--ink-2);
}
.modal.modal-create .create-desc-input input { min-height: 0; padding-bottom: var(--space-tight); }
.modal.modal-create .create-desc-input textarea:focus,
.modal.modal-create .create-desc-input input:focus {
  border-color: transparent; outline: none; box-shadow: none;
}
.modal.modal-create .create-desc-input .field-ai-btn {
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease);
}
.modal.modal-create .create-desc-input.has-text .field-ai-btn,
.modal.modal-create .create-desc-input:hover .field-ai-btn,
.modal.modal-create .create-desc-input:focus-within .field-ai-btn,
.modal.modal-create .create-desc-input .field-ai-btn:hover,
.modal.modal-create .create-desc-input .field-ai-btn:focus-visible {
  opacity: 1;
}
.create-tabs {
  display: flex; align-items: stretch; gap: 0;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
  border-bottom: 1px solid var(--border-subtle);
}
.create-tabs::-webkit-scrollbar { display: none; }
.create-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  flex: none; margin: 0; padding: var(--space-inline) var(--space-item) var(--space-inline);
  font: inherit; font-size: var(--t-label-size); font-weight: 550; color: var(--ink-3);
  letter-spacing: -0.01em; line-height: 1.2;
  border-bottom: 2px solid transparent; border-radius: 0;
  margin-bottom: -1px;
  transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
  user-select: none; white-space: nowrap;
}
.create-tab:hover { color: var(--ink-2); }
.create-tab.on {
  color: var(--ink); font-weight: 650;
  border-bottom-color: var(--ink);
}
.create-tab:focus-visible { outline: none; color: var(--ink); }
.create-props {
  display: flex; flex-wrap: wrap; gap: var(--space-tight); align-items: center;
  margin-top: var(--space-inline); padding-top: var(--space-item);
  border-top: 1px solid var(--border-subtle);
}
.create-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin-top: var(--space-inline); min-height: 16px;
  font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4); line-height: 1.35;
  animation: create-more-in var(--dur-micro) var(--ease);
}
.create-summary-dot {
  display: inline-block; width: 3px; height: 3px; margin: 0 var(--space-inline);
  border-radius: 50%; background: var(--ink-4); opacity: .55; vertical-align: middle;
}
.create-split {
  display: inline-flex; align-items: stretch; border-radius: var(--r-control); overflow: hidden;
}
.create-split .create-split-main {
  border-radius: var(--r-control) 0 0 var(--r-control) !important; min-width: 108px;
}
.create-split .create-split-more {
  border-radius: 0 var(--r-control) var(--r-control) 0 !important; min-width: 28px; width: 28px; padding-inline: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--surface) 28%, transparent) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal.modal-create .modal-foot .create-split .create-split-more {
  min-width: 40px;
  width: 40px;
  padding-inline: 0 !important;
}
.create-split .create-split-more svg { width: 14px; height: 14px; stroke-width: 1.5px; }
.modal.modal-create.create-multi .modal-foot {
  flex-wrap: wrap; align-items: flex-end;
}
.create-foot-related {
  flex-basis: 100%; width: 100%; order: -2;
  font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); line-height: 1.35;
  margin: 0 0 2px; animation: create-more-in var(--dur-micro) var(--ease);
}
.create-connected-summary {
  flex-basis: 100%; width: 100%; order: -1;
  margin: 0 0 var(--space-tight); animation: create-more-in var(--dur-micro) var(--ease);
}
.create-connected-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-tight); font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4); }
.create-connected-line { display: inline-flex; align-items: center; gap: var(--space-tight); }
.create-tab { display: inline-flex; align-items: center; gap: var(--space-tight); }
.create-tab-ind {
  width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--ink-4); opacity: .85;
}
.create-tab-ind.ready { width: auto; height: auto; background: none; color: var(--st-done); opacity: 1; }
.create-tab-ind.attention { width: auto; height: auto; background: none; color: var(--c-gold); opacity: 1; }
.create-sr-ann {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.create-rel-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-inline); align-items: center; font-size: var(--t-label-size); }
.create-rel-lbl { color: var(--ink-2); line-height: 1.35; }
.create-batch-errors { margin: 0; padding-left: var(--space-group); font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.45; }
.modal.modal-create.can-save .create-split-main {
  box-shadow: 0 0 0 0 transparent;
}
.modal.modal-create.leaving {
  animation: create-leave var(--dur-micro) var(--ease) forwards;
}
@keyframes create-leave {
  to { opacity: .55; transform: translateY(4px) scale(.985); }
}
/* Soft hub open: pane + chip stagger (leave already above). Honor reduced motion. */
.create-hub-pane {
  animation: create-pane-in var(--dur-micro) var(--ease) both;
}
@keyframes create-pane-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.create-props .create-prop {
  animation: create-chip-in var(--dur-over) var(--ease) both;
}
.create-props .create-prop:nth-child(1) { animation-delay: .02s; }
.create-props .create-prop:nth-child(2) { animation-delay: .04s; }
.create-props .create-prop:nth-child(3) { animation-delay: .06s; }
.create-props .create-prop:nth-child(4) { animation-delay: .08s; }
.create-props .create-prop:nth-child(5) { animation-delay: .1s; }
.create-props .create-prop:nth-child(6) { animation-delay: .12s; }
.create-props .create-prop:nth-child(7) { animation-delay: .14s; }
.create-props .create-prop:nth-child(8) { animation-delay: .16s; }
.create-props .create-prop:nth-child(n+9) { animation-delay: .18s; }
@keyframes create-chip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .create-hub-pane,
  .create-props .create-prop,
  .modal.modal-create.leaving,
  .create-summary,
  .create-more-panel { animation: none !important; }
}
.modal.modal-create .modal { transform-origin: center top; }
.create-prop {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight);
  min-height: 28px; max-width: 148px; padding: 0 var(--space-tight); border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3);
  cursor: pointer; user-select: none; flex: none;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.create-prop.icon-only { width: 28px; padding: 0; }
.create-photo-stack { display: inline-flex; align-items: center; min-width: 22px; }
.create-photo-stack img, .create-photo-stack .icn { width: 18px; height: 18px; margin-left: -4px; border: 2px solid var(--surface); border-radius: 5px; object-fit: cover; background: var(--bg-sunken); }
.create-photo-stack img:first-child, .create-photo-stack .icn:first-child { margin-left: 0; }
.create-prop:hover, .create-prop.open {
  background: var(--bg-hover); color: var(--ink-2);
}
.create-prop.on {
  background: transparent; color: var(--ink); border-color: transparent;
}
.create-prop.prio-high.on, .create-prop.prio-high:hover { color: var(--c-clay, #b07a5b); }
.create-prop.prio-low.on { color: var(--ink-3); }
.create-prop:focus-visible { outline: none; box-shadow: none; color: var(--ink); background: var(--bg-hover); }
.modal.create-project-modal .create-prop,
.modal.create-project-modal .create-prop:hover,
.modal.create-project-modal .create-prop.open,
.modal.create-project-modal .create-prop:focus-visible,
.modal.create-project-modal .create-prop-x:hover {
  background: transparent;
  box-shadow: none;
}
.modal.create-project-modal .create-prop:hover,
.modal.create-project-modal .create-prop.open,
.modal.create-project-modal .create-prop:focus-visible { color: var(--ink); }
.modal.create-project-modal .modal-x,
.modal.create-project-modal .modal-x:hover,
.modal.create-project-modal .modal-x:focus-visible,
.modal.project-edit-modal .modal-x,
.modal.project-edit-modal .modal-x:hover,
.modal.project-edit-modal .modal-x:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
.modal.project-edit-modal .pm-tasklink-row button:hover,
.modal.project-edit-modal .pm-tasklink-row button:focus-visible {
  background: transparent;
  box-shadow: none;
}
.modal.project-milestone-modal .modal-x,
.modal.project-milestone-modal .modal-x:hover,
.modal.project-milestone-modal .modal-x:focus-visible,
.modal.project-quick-edit-modal .modal-x,
.modal.project-quick-edit-modal .modal-x:hover,
.modal.project-quick-edit-modal .modal-x:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
.create-prop-lbl { min-width: 0; max-width: 92px; line-height: 1.2; }
.create-prop-n {
  font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3);
  margin-left: -2px;
}
.create-prop-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin: 0 -4px 0 0; border-radius: 999px;
  color: var(--ink-4); position: relative; z-index: 2; flex: none;
}
.create-prop-x:hover { color: var(--ink); background: var(--bg); }
.create-prop-due { cursor: pointer; }
button.create-prop { font: inherit; }
.modal.modal-create .create-prop[data-tip] { overflow: visible; }
.modal.modal-create .create-prop[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(3px); background: var(--ink); color: var(--bg);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
  z-index: 30; box-shadow: var(--shadow-md);
}
.modal.modal-create .create-prop[data-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .28s;
}
.create-assignee-prop {
  display: inline-flex; align-items: center; flex: none; gap: 2px;
}
.create-assignee-face,
.create-assignee-add {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--ink-3); user-select: none; padding: 0;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.create-assignee-face {
  min-width: 28px; min-height: 28px; border-radius: 6px; gap: var(--space-tight);
}
.create-assignee-face:hover,
.create-assignee-prop.open .create-assignee-face {
  background: var(--bg-hover); color: var(--ink-2);
}
.create-assignee-face:focus-visible {
  outline: none; color: var(--ink); background: var(--bg-hover);
}
.create-assignee-stack {
  display: inline-flex; align-items: center;
}
.create-assignee-stack .avatar {
  margin-left: -4px; border: 2px solid var(--surface); box-sizing: border-box;
}
.create-assignee-stack .avatar:first-child { margin-left: 0; }
.create-assignee-more {
  margin-left: 2px; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3);
}
.create-assignee-add {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px dashed var(--border-strong); margin-left: 1px;
}
.create-assignee-add:hover,
.create-assignee-prop.open .create-assignee-add {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.create-assignee-add:focus-visible {
  outline: none; border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.modal.modal-create .create-assignee-add[data-tip] { overflow: visible; position: relative; }
.modal.modal-create .create-assignee-add[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(3px); background: var(--ink); color: var(--bg);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
  z-index: 30; box-shadow: var(--shadow-md);
}
.modal.modal-create .create-assignee-add[data-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .28s;
}
.create-subs {
  margin-top: var(--space-inline); padding-top: var(--space-inline);
  border-top: 1px solid var(--border-subtle);
}
.create-subs-label {
  font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 var(--space-tight);
}
.create-sub-block {
  padding: var(--space-tight) 0 var(--space-inline);
}
.create-sub-block + .create-sub-block,
.create-subs.has-items .create-sub-add-block {
  border-top: 1px solid var(--border-subtle);
}
.create-sub-head,
.create-sub-add {
  display: flex; align-items: center; gap: var(--space-inline);
  min-height: 32px;
}
/* These two rows collapse behind "Add subtask" via the `hidden` attribute, but
   `hidden` only supplies `display:none` from the UA sheet, which a class rule
   like the one above outranks. Without these the draft input and its note stay
   on screen next to the very button meant to reveal them. */
.create-sub-add[hidden],
.create-sub-draft-desc[hidden] { display: none; }
.create-sub-ix {
  flex: none; width: 16px; text-align: right;
  font-size: var(--t-micro-size); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-4); user-select: none;
}
.create-sub-in {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: var(--t-label-size); font-weight: 500; color: var(--ink-2);
  padding: var(--space-tight) 0; outline: none; box-shadow: none;
}
.create-sub-desc {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 0 var(--space-block); max-width: calc(100% - 24px);
  border: none; background: transparent; outline: none; box-shadow: none;
  font-size: var(--t-caption-size); font-weight: 450; color: var(--ink-3);
  padding: 0 0 2px; line-height: 1.45;
}
.create-sub-desc::placeholder { color: var(--ink-4); }
.create-sub-desc:focus { color: var(--ink-2); }
.create-sub-draft-desc {
  margin-left: 20px; max-width: calc(100% - 20px);
}
.create-sub-files {
  margin: var(--space-tight) 0 0 var(--space-block); max-width: calc(100% - 24px);
  min-height: 26px; display: flex; align-items: center; gap: var(--space-tight);
  flex-wrap: wrap; color: var(--ink-4);
}
.create-sub-add-block .create-sub-files {
  margin-left: 20px; max-width: calc(100% - 20px);
}
/* Subtask due date + priority. Bare glyphs with hover-only affordance (composer
   rule), and the label appears only once the field carries a value, so an
   untouched subtask stays quiet. Priority also takes an inline colour when it
   is deliberately High or Low; that inline value is meant to beat the hover
   colour below. */
.create-sub-meta {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-tight);
  min-width: 0; max-width: 148px; min-height: 26px;
  padding: 0 var(--space-tight);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-control); color: var(--ink-4);
  font-size: var(--t-micro-size); font-weight: 550; line-height: 1;
}
.create-sub-meta .icn { flex: none; }
.create-sub-meta:hover { background: var(--bg-hover); color: var(--ink-2); }
.create-sub-meta.on { color: var(--ink-2); }
.create-sub-file {
  display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 0; max-width: 172px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
  color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 550;
  padding: var(--space-tight) var(--space-tight); line-height: 1;
}
.create-sub-file .icn {
  flex: none; color: var(--ink-4);
}
.create-sub-file button,
.create-sub-file-add {
  flex: none; border: none; background: transparent; color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.create-sub-file button {
  width: 16px; height: 16px; padding: 0; border-radius: 5px;
}
.create-sub-file button:hover {
  background: var(--bg-hover); color: var(--ink-2);
}
.create-sub-file-add {
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
}
.create-sub-file-add:hover {
  background: var(--bg-hover); color: var(--ink-2);
}
.create-sub-files:not(.has-files) .create-sub-file-add {
  opacity: .82;
}
.create-sub-assign {
  display: inline-flex; align-items: center; flex: none; gap: 2px;
}
.create-sub-assign-face {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  border-radius: 6px; min-height: 26px;
}
.create-sub-assign-face:hover { background: var(--bg-hover); }
.create-sub-assign-stack {
  display: inline-flex; align-items: center;
}
.create-sub-assign-stack .avatar {
  margin-left: -4px; border: 2px solid var(--surface); box-sizing: border-box;
}
.create-sub-assign-stack .avatar:first-child { margin-left: 0; }
.create-sub-assign-more {
  margin-left: 2px; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3);
}
.create-sub-assign-add {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1px dashed var(--border-strong); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); cursor: pointer; padding: 0;
  transition: border-color .12s, color .12s, background .12s;
}
.create-sub-assign-add:hover,
.create-sub-block.assign-open .create-sub-assign-add {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.create-sub-assign-add:focus-visible {
  outline: none; border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.modal.modal-create .create-sub-assign-add[data-tip] { position: relative; overflow: visible; }
.modal.modal-create .create-sub-assign-add[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px); background: var(--ink); color: var(--bg);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
  z-index: 30; box-shadow: var(--shadow-md);
}
.modal.modal-create .create-sub-assign-add[data-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .28s;
}
.create-sub-in::placeholder { color: var(--ink-4); font-weight: 450; }
.create-sub-in:focus { color: var(--ink); }
.create-sub-add { color: var(--ink-4); padding: 2px 0; }
.create-sub-add-block { padding: 2px 0 var(--space-tight); }
.create-sub-add .icn { flex: none; opacity: .85; }
.create-sub-rm {
  flex: none; width: 24px; height: 24px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-4); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.create-sub-block:hover .create-sub-rm,
.create-sub-block:focus-within .create-sub-rm { opacity: 1; }
.create-sub-rm:hover { background: var(--bg-hover); color: var(--ink-2); }
.create-sub-commit {
  flex: none; border: none; background: none; padding: 0 2px;
  font-size: var(--t-caption-size); font-weight: 650; color: var(--accent); cursor: pointer;
}
.create-sub-commit:hover { text-decoration: underline; }
/* ---- progressive disclosure: everything that has a working default ----
   Shared across every create modal (task, project, event, doc, client, vendor).
   Visually this is the treatment proven by .inv-more-toggle in s-inventory.css,
   but it is deliberately a SEPARATE class set: s-inventory.css ships only in
   the lazy inventory chunk, so these modals (shared chunk) cannot reference an
   .inv-* class without rendering unstyled outside Inventory. */
.create-more-toggle {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%;
  margin-top: 20px; padding: var(--space-item);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--bg-sunken); cursor: pointer; text-align: left;
}
.create-more-toggle:hover { background: var(--bg-hover); }
/* Expanded: the fill drops away and the row becomes a hairline section header. */
.create-more-toggle.on {
  background: transparent; border-color: transparent;
  padding-left: 2px; padding-right: 2px;
  border-bottom: 1px solid var(--border-subtle); border-radius: 0;
}
.create-more-toggle.on:hover { background: transparent; }
.create-more-toggle .icn { color: var(--ink-4); flex-shrink: 0; }
/* This opens a whole section, so the label takes the label role rather than
   caption, matching the option titles it sits above. */
.create-more-t { font-size: var(--t-label-size); font-weight: var(--t-label-weight); color: var(--ink); flex-shrink: 0; }
.create-more-d {
  flex: 1; min-width: 0; font-size: var(--t-caption-size); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.create-more-toggle.on .create-more-d { display: none; }
.create-more-body .field:first-child { margin-top: var(--space-item); }
.create-more-body .field + .field { margin-top: var(--space-item); }
.create-more-body .field-row { margin-top: var(--space-item); }
.create-more-body .field-row > .field { margin-top: 0; }
.create-more-body .create-tmpl-list { max-height: 200px; }

.create-more-panel {
  margin-top: var(--space-inline); padding: var(--space-item) 0 2px;
  border-top: 1px solid var(--border-subtle);
  animation: create-more-in var(--dur-micro) var(--ease);
}
@keyframes create-more-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.create-more-label {
  font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 var(--space-inline);
}
.create-more-panel .field + .field { margin-top: var(--space-item); }
.create-more-panel .field-row { margin-top: var(--space-item); }
.create-more-panel .field-row > .field { margin-top: 0; }
.create-swatches { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.create-swatch {
  width: 24px; height: 24px; border-radius: var(--r-control); border: 2px solid transparent;
  cursor: pointer; padding: 0; appearance: none;
}
.create-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--surface) inset; }
.create-tmpl-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; max-height: 220px; overflow-y: auto; }
.create-more-panel .create-tmpl-list { max-height: 200px; }
.create-tmpl-row {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%;
  padding: var(--space-inline) 2px; border: none; border-radius: 0; border-bottom: 1px solid var(--border-subtle);
  background: transparent; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.create-tmpl-row:last-child { border-bottom: none; }
.create-tmpl-row:hover { background: var(--bg-hover); }
.create-tmpl-row.on { background: var(--bg-active); }
.create-tmpl-row .create-tmpl-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.create-tmpl-row .create-tmpl-desc { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }

/* Form rhythm inside every modal */
.modal .field { margin: 0; }
.modal .field + .field { margin-top: var(--space-item); }
.modal .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-item); margin-top: var(--space-item); align-items: start; }
.modal .field-row > .field,
.modal .field-row > .field + .field { margin-top: 0; }
.modal .stack { gap: var(--space-item) !important; }
/* `.modal .field-label` / `.modal .field-hint` LIVED HERE and were deleted on
   2026-08-16. Their rationale is preserved and now applies EVERYWHERE, on the
   base `.field-label` / `.field-hint` rules near the top of this file:

     the label was 12 / 650 / --ink-3, smaller, heavier and lower-contrast than
     the 13px option titles it organises. A label rendering quieter than its own
     contents is inverted hierarchy, and 650-weight at caption size in muted ink
     is the worst combination on all three axes at once. The label role
     (13 / 500 / --ink) is calmer AND clearer. Hints were micro (badge size) in
     placeholder ink; a hint is a sentence, so it takes caption size and the
     meta ink that passes AA. DESIGN.md §3.

   Why they were removed rather than left in place: scoping that fix to `.modal`
   created a two-tier Field. The same component rendered correctly inside a modal
   and at the old 12/650/--ink-3 in every drawer, inspector and settings panel.
   The base rules now carry these values, so these overrides were duplicates that
   only differed by re-adding a 4px margin — which pushed the rhythm to 12/12
   instead of the §14.1 8-then-4. One definition, applied everywhere. */
/* One control height per modal. Inputs rendered 40px while .btn was 36 and the
   footer buttons 34 — four heights for the same class of thing, in one 520px
   box. Six distinct control heights measured overall.

   That is what reads as CROWDED. Linear and Cal.com feel compact at the same
   density because they keep one repeating beat: when every control is the same
   height, rows line up and the eye settles. Mixed heights break the beat, and
   no amount of extra spacing fixes it. */
/* A field states itself once, not twice. These carried BOTH a --bg-sunken fill
   and a visible border — belt-and-braces, and five of the clients modal's 27
   borders. The fill alone is 1.13:1 against the modal surface, the same band
   the entity tiles read at, so it delineates the field on its own.

   The border stays in the box model (transparent) so nothing shifts, and it is
   still the interaction affordance: it appears on hover and turns accent on
   focus. Linear and Cal.com both work this way — a filled field with no resting
   outline. Apple's ordering is the same principle: negative space and
   background shapes before separator lines. */
.modal .input, .modal textarea.input, .modal select.input {
  border-radius: var(--r-control); min-height: var(--control-h); border-color: transparent;
  background: var(--bg-sunken); transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.modal .input:hover, .modal textarea.input:hover { border-color: color-mix(in srgb, var(--ink-4) 55%, var(--border-subtle)); }
.modal .input:focus, .modal .input:focus-visible,
.modal textarea.input:focus, .modal textarea.input:focus-visible {
  border-color: var(--accent); background: var(--surface); outline: none; box-shadow: none;
}
.modal textarea.input { min-height: 88px; padding-top: var(--space-inline); padding-bottom: var(--space-inline); line-height: 1.45; }
.modal .invsel-btn {
  border-radius: var(--r-control); min-height: var(--control-h); background: var(--bg-sunken); border-color: transparent;
}
.modal .invsel-btn.open, .modal .invsel-btn:focus-visible {
  border-color: var(--accent); background: var(--surface);
}

@media (max-width: 640px) {
  .scrim-modal { padding: var(--space-inline); align-items: end; }
  .modal.mc, .modal.mc.size-sm, .modal.mc.size-lg, .modal.mc.size-xl {
    width: 100% !important; max-width: 100% !important;
    max-height: min(92vh, 900px);
    border-radius: var(--r-modal) var(--r-modal) var(--r-card) var(--r-card);
    margin: 0;
  }
  .modal-hd { padding: var(--space-group) var(--space-group) var(--space-item); border-radius: var(--r-modal) var(--r-modal) 0 0; }
  .modal-body { padding: var(--space-group) var(--space-group) var(--space-group); }
  .modal-foot {
    /* Right inset matches .modal-body above (--space-group), NOT --space-item.
       It was --space-item (12) against the body's 16, so at <=560 every modal in
       the app ended its footer buttons 4px past the content edge that every
       label, control and hint in the body sits on. One left/right edge per
       surface is the Alignment Law (DESIGN.md §14.2); the mismatch is invisible
       to a CSS-text verifier and was found by scripts/verify-alignment.mjs
       measuring the golden modal at 375px. Vertical padding unchanged. */
    padding: var(--space-item) var(--space-group) var(--space-item) var(--space-group); border-radius: 0 0 var(--r-card) var(--r-card);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .modal .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* file-drop zone */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); padding: 28px; text-align: center; transition: all .14s; cursor: pointer; background: var(--surface-2); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   Tasks — animated board + refined list (Framer Motion)
   ============================================================ */
.kbn-col { background: var(--bg-sunken); border: none; border-radius: var(--r-card); padding: var(--space-inline); transition: background var(--dur-micro) var(--ease); user-select: none; }
/* board layout — 4 equal columns; horizontal scroll on small screens */
.kbn-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-item); align-items: start; }
.kbn-board.kbn-zoom-pending { opacity: 0; transform: scale(.97); }
.kbn-board.kbn-zoomed-in { opacity: 1; transform: scale(1); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
@media (prefers-reduced-motion: reduce) { .kbn-board.kbn-zoom-pending, .kbn-board.kbn-zoomed-in { opacity: 1; transform: none; transition: none; } }
/* type-filtered board: one column per type status (often ≠4), scroll horizontally */
.kbn-board.type-mode {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-inline);
  scroll-snap-type: x proximity;
}
.kbn-board.type-mode .kbn-col { scroll-snap-align: start; }
@media (max-width: 940px) {
  .kbn-board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(264px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--space-inline); scroll-snap-type: x proximity; margin: 0 -4px; padding-left: var(--space-tight); padding-right: var(--space-tight); }
  .kbn-col { scroll-snap-align: start; }
}
/* card footer — clean hairline divider, fixed people cluster, sheds secondary meta when narrow */
.kbn-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); flex-wrap: nowrap; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); }
.kf-meta { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; overflow: hidden; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.kf-meta > * { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; white-space: nowrap; }
.kf-prio { font-weight: 700; }
.kf-people { display: flex; align-items: center; flex-shrink: 0; }
.kbn-foot .kbn-subbtn { min-width: 0; }
@container kcard (max-width: 212px) { .kf-att { display: none; } }
@container kcard (max-width: 180px) { .kbn-foot .kbn-subbtn { display: none; } }
/* The tools sit on the title line and reserve their width so nothing shifts or
   gets occluded on hover. On a narrow card that reservation costs the title too
   much, so the stopwatch drops out first and the menu always survives. */
@container kcard (max-width: 212px) { .kbn-cardtools .kbn-sw { display: none; } }
.kbn-col.drop-active { background: color-mix(in srgb, var(--accent) 8%, var(--bg-sunken)); }
/* Even top/bottom padding. The old 4px top only looked balanced because the
   dead tool row padded the title down; with the title now first, it needs real
   breathing room of its own. .kbn-cover's negative top margin tracks this. */
.kbn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); cursor: grab; user-select: none; box-shadow: none; transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), padding var(--dur-micro) var(--ease); container: kcard / inline-size; position: relative; }
.kbn-card.sel { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent); }

/* Smart Zoom — zoomed out (browser zoom), Kanban cards drop non-essential
   detail so more of the board fits without scrolling. Title/priority/due/
   assignees stay — everything genuinely secondary hides. */
.kbn-density-compact .kbn-card { padding: var(--space-tight) var(--space-inline); }
.kbn-density-compact .kbn-cover,
.kbn-density-compact .kbn-type,
.kbn-density-compact .kbn-sub,
.kbn-density-compact .kbn-tags { display: none; }
.kbn-card:hover { box-shadow: none; border-color: var(--border-strong); background: var(--bg-hover); }
.kbn-card:active { cursor: grabbing; }
.kbn-card.dragging { cursor: grabbing; box-shadow: none; border-color: var(--accent); opacity: .42; z-index: 50; position: relative; }
.kbn-grip { color: var(--ink-4); opacity: .18; transition: opacity .14s, color .14s, transform .14s; cursor: grab; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.kbn-grip-inline { margin-left: auto; margin-right: var(--space-tight); align-self: baseline; }
.kbn-grip-cover { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 72%, rgba(255,255,255,.18)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--ink-4) 16%, transparent); }
.kbn-card:hover .kbn-grip { opacity: .45; }
.kbn-grip:hover { color: var(--accent); opacity: 1; transform: scale(1.06); }
body.is-dragging .kbn-grip { color: #fff; opacity: 1; transform: scale(1.06); }
/* drop placeholder shown in the target column while dragging */
.kbn-drop { display: flex; align-items: center; justify-content: center; gap: var(--space-inline); border-radius: var(--r-control); border: 1.5px dashed var(--border-strong); background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; overflow: hidden; animation: kbn-drop-in var(--dur-micro) var(--ease); }
@keyframes kbn-drop-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.kbn-drop .icn { animation: none; }
@keyframes kbn-nudge { 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(2px); } }
.kbn-add { width: 100%; display: flex; align-items: center; gap: var(--space-tight); justify-content: center; padding: var(--space-inline); margin-top: var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-4); font-size: var(--t-caption-size); font-weight: 600; transition: color .14s, background .14s; }
.kbn-add:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kbn-list { display: flex; flex-direction: column; gap: var(--space-inline); min-height: 8px; }
.kbn-empty { padding: var(--space-group) var(--space-inline); text-align: center; color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 500; }
/* drop placeholder — dashed outline of where the card will land */
.kbn-ph { border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--r-control); background: color-mix(in srgb, var(--accent) 5%, transparent); box-sizing: border-box; flex-shrink: 0; }
/* column header */
.kbn-colhd { gap: var(--space-tight); margin-bottom: var(--space-inline); padding: 2px 2px 2px var(--space-tight); }
.kbn-colhd > .row { min-width: 0; flex: 1; }
.kbn-colhd .dot { flex-shrink: 0; }
.kbn-coltitle { font-weight: 650; font-size: var(--t-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--ink-2); }
.kbn-count { flex-shrink: 0; }
.kbn-colhd .btn.icon { flex-shrink: 0; }
/* floating clone that follows the cursor */
.kbn-clone { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; transform: rotate(1.2deg); will-change: left, top; }
.kbn-clone .kbn-card { margin: 0; opacity: 1; background: var(--surface); border-color: var(--border-strong); box-shadow: 0 18px 36px -14px rgba(32,33,36,.28); cursor: grabbing; }
.kbn-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-sunken); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); }

/* refined list rows */
.tlist-wrap { min-width: 0; }
.tlist { display: flex; flex-direction: column; user-select: none; }
/* Hairline Budget 2026-08-29: rows carry NO divider — row rhythm + the hover
   wash separates; radius matches the .prow treatment. */
.trow { display: grid; grid-template-columns: 16px 20px 1fr auto; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); background: transparent; border-radius: var(--r-control); cursor: pointer; position: relative; }
.trow:hover { background: var(--bg-hover); }
.trow-grip { width: 16px; height: 24px; color: var(--ink-4); opacity: 0; transition: opacity .14s, color .14s, background .14s; cursor: grab; display: grid; place-items: center; border-radius: 5px; justify-self: center; }
.trow:hover .trow-grip { opacity: .5; }
.trow:hover .trow-grip:hover { color: var(--accent); opacity: 1; background: var(--bg-active); }
.trow-grip:active { cursor: grabbing; }
/* An explicit sort overrules manual order, so the grip is hidden rather than
   removed — .trow is a fixed-column grid and dropping the cell would shift
   every following column. */
.trow.no-reorder .trow-grip { visibility: hidden; pointer-events: none; }
.trow.dragging-row { box-shadow: var(--shadow-lg); border-radius: var(--r-md); border-bottom-color: transparent; z-index: 20; }
/* animated check — padding:0 is required: UA button padding pushes the tick low */
.tcheck { width: 20px; height: 20px; padding: 0; margin: 0; box-sizing: border-box; border-radius: 6px; border: 1.6px solid var(--border-strong); background: var(--surface-2); display: inline-grid; place-items: center; cursor: pointer; transition: border-color .15s, background .15s; flex-shrink: 0; line-height: 0; vertical-align: middle; -webkit-appearance: none; appearance: none; }
.tcheck:hover { border-color: var(--accent); }
.tcheck.on { background: var(--accent); border-color: var(--accent); }
.tcheck svg { width: 11px; height: 11px; overflow: visible; display: block; margin: 0; transform: translateY(-0.5px); }
.tcheck svg path { stroke: var(--accent-fg); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--dur-over) var(--ease) .02s; vector-effect: non-scaling-stroke; }
.tcheck.on svg path { stroke-dashoffset: 0; }
/* tick legibility safety-net: every check-toggle centres its glyph as a block */
.fx-check svg, .tcheck-todo svg { display: block; }
.row-meta { display: flex; align-items: center; gap: var(--space-item); }
/* Columnar meta for the Tasks list (2026-08-29): fixed-width columns so
   priority, due date, assignees and actions align down the whole list. Every
   cell is assigned its column explicitly, so a missing optional cell (no
   attachment, no subtasks) leaves an empty slot instead of shifting the row.
   The meta block is right-anchored by the .trow grid, so the fixed columns
   line up across rows while the flexible labels column grows leftward. */
.trow-tasks .row-meta { display: grid; grid-template-columns: minmax(0, max-content) 76px 96px 56px 28px 28px minmax(28px, max-content) 28px; gap: var(--space-inline); align-items: center; justify-items: start; }
.trow-tasks .row-meta > .trow-labels { grid-column: 1; justify-self: end; }
.trow-tasks .row-meta > .chip { grid-column: 2; }
.trow-tasks .row-meta > .trow-due { grid-column: 3; text-align: left; }
.trow-tasks .row-meta > .avatar-stack { grid-column: 4; }
.trow-tasks .row-meta > .task-att { grid-column: 5; justify-self: center; }
.trow-tasks .row-meta > .subt-caret { grid-column: 6; justify-self: center; }
.trow-tasks .row-meta > .trow-sw-wrap { grid-column: 7; justify-self: center; }
.trow-tasks .row-meta > div:last-child { grid-column: 8; justify-self: end; }
/* Below the 760 rung the fixed columns cost more than they earn; fall back to
   the flex cluster (the 680/480 shedding rules below still apply). */
@container tlist (max-width: 760px) { .trow-tasks .row-meta { display: flex; } }
.trow-sw-wrap { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.trow-sw {
  opacity: 0; width: 26px; height: 26px; border: none; border-radius: var(--r-control);
  background: transparent; color: var(--ink-4); display: grid; place-items: center;
  cursor: pointer; transition: opacity .14s, background .12s, color .12s; flex-shrink: 0;
}
.trow:hover .trow-sw, .trow:focus-within .trow-sw, .trow-sw.live, .trow-sw.parked { opacity: 1; }
.trow-sw:hover { background: var(--bg-hover); color: var(--ink-2); }
.trow-sw.live { color: var(--accent-700, var(--accent)); }
.trow-sw.parked { color: var(--ink-3); }
/* refined list — responsive: shed lower-priority meta as the list narrows */
.tlist { container: tlist / inline-size; }
@container tlist (max-width: 680px) { .row-meta { gap: var(--space-inline); } .row-meta > span:first-child { display: none; } }
@container tlist (max-width: 480px) { .row-meta .task-att { display: none; } .row-meta { gap: var(--space-inline); } }
/* narrow: drop the drag gutter (reorder via context menu on touch), tighten padding */
@container tlist (max-width: 440px) { .trow { grid-template-columns: 20px 1fr auto; gap: var(--space-inline); padding: var(--space-item) var(--space-item); } .trow-grip { display: none; } }
/* list drag — placeholder + floating clone */
.trow-ph { border: 2px dashed var(--accent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 6%, transparent); margin: var(--space-tight) var(--space-inline); box-sizing: border-box; }
.trow-clone { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
.trow-clone .trow { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 22px 44px -14px rgba(32,33,36,.4); background: var(--surface); }

/* ── Tasks Trash / recycle bin ── */
.ttrash { display: flex; flex-direction: column; container: ttrash / inline-size; }
.ttrash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: 0 2px var(--space-item); margin-bottom: var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.ttrash-bar-note { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); }
.ttrash-bar-note .icn { color: var(--ink-4); }
.ttrash-empty { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--st-blocked); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); transition: background .14s; }
.ttrash-empty:hover { background: var(--st-blocked-soft); }
.ttrash-list { display: flex; flex-direction: column; }
.ttrash-row { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.ttrash-row:last-child { border-bottom: none; }
.ttrash-row:hover { background: var(--bg-hover); }
.ttrash-ic { color: var(--ink-4); display: grid; place-items: center; justify-self: center; }
/* select checkbox swaps in for the glyph on hover / when selected */
.ttrash-check { display: grid; place-items: center; justify-self: center; width: 24px; height: 24px; cursor: pointer; }
.ttrash-check > * { grid-area: 1 / 1; }
.ttrash-check input { opacity: 0; transition: opacity .12s; }
.ttrash-check .ttrash-ic { transition: opacity .12s; }
.ttrash-row:hover .ttrash-check input, .ttrash-row.sel .ttrash-check input { opacity: 1; }
.ttrash-row:hover .ttrash-check .ttrash-ic, .ttrash-row.sel .ttrash-check .ttrash-ic { opacity: 0; }
.ttrash-row.sel { background: var(--bg-active); }
/* selection action bar */
.ttrash-bar.selbar { gap: var(--space-inline); }
.ttrash-selall { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ttrash-act.ghost { border-color: transparent; background: transparent; color: var(--ink-4); padding: var(--space-tight) var(--space-inline); }
.ttrash-act.ghost:hover { background: transparent; color: var(--ink-2); }
.ttrash-main { min-width: 0; }
.ttrash-name { font-weight: 550; font-size: var(--t-label-size); color: var(--ink-2); }
.ttrash-meta { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); min-width: 0; }
.ttrash-meta .avatar { flex-shrink: 0; }
.ttrash-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ttrash-sub { padding: 1px var(--space-inline); border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); font-weight: 600; flex-shrink: 0; }
.ttrash-left { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ttrash-left.soon { color: var(--c-gold); }
.ttrash-actions { display: flex; align-items: center; gap: var(--space-tight); }
.ttrash-act { display: inline-flex; align-items: center; gap: var(--space-tight); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); transition: background .14s, border-color .14s, color .14s; }
.ttrash-act:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.ttrash-act.danger { padding: var(--space-tight) var(--space-inline); color: var(--ink-4); }
.ttrash-act.danger:hover { color: var(--st-blocked); border-color: var(--st-blocked); background: var(--st-blocked-soft); }
.projects-page .ttrash-actions .ttrash-act.danger,
.projects-page .ttrash-actions .ttrash-act.danger:hover,
.projects-page .ttrash-actions .ttrash-act.danger:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.projects-page .ttrash-actions .ttrash-act.danger:hover,
.projects-page .ttrash-actions .ttrash-act.danger:focus-visible { color: var(--st-blocked); }
.ttrash-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; gap: var(--space-tight); }
.ttrash-empty-ic { display: grid; place-items: center; color: var(--ink-4); margin-bottom: var(--space-tight); }
.ttrash-empty-t { font-size: var(--t-strong-size); font-weight: 600; color: var(--ink-2); }
.ttrash-empty-s { font-size: var(--t-caption-size); color: var(--ink-4); }
@container ttrash (max-width: 560px) { .ttrash-left { display: none; } }
@container ttrash (max-width: 440px) { .ttrash-act span, .ttrash-meta > span:last-child { display: none; } }

/* ── Task calendar: left rail (To-do / Scheduled) + calendar ── */
.tcal-shell { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: var(--space-group); align-items: start; }
.tcal-rail { position: sticky; top: 0; display: flex; flex-direction: column; max-height: calc(100vh - 150px); min-width: 0; }
.tcr-head { display: flex; align-items: center; gap: var(--space-inline); padding: 2px 2px var(--space-item); }
.tcr-count { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-4); background: var(--bg-sunken); border-radius: 999px; padding: 1px var(--space-inline); }
.tcr-seg { display: flex; gap: 2px; background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight); margin-bottom: var(--space-item); }
.tcr-seg button { flex: 1; border: none; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 6px; cursor: pointer; transition: background .14s, color .14s; }
.tcr-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.tcr-body { overflow-y: auto; flex: 1; padding-right: 2px; margin-right: -2px; }
.tcr-sec { margin-bottom: var(--space-item); }
.tcr-sec-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 0 2px var(--space-tight); }
.tcr-sec-h.warn { color: var(--st-blocked); }
/* clickable section header (highlights matching calendar days) */
button.tcr-sec-h { width: 100%; border: none; background: transparent; cursor: pointer; border-radius: 6px; padding: var(--space-tight) var(--space-tight); margin: 0 -4px 2px; transition: background .12s, color .12s; }
button.tcr-sec-h:hover { background: var(--bg-hover); }
button.tcr-sec-h.on { background: var(--accent-soft); color: var(--accent); }
button.tcr-sec-h.warn.on { background: var(--st-blocked-soft); color: var(--st-blocked); }
.tcr-event .tcr-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: var(--space-tight); }
.tcal-cell.rfocus, .tcal-wcol.rfocus { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); animation: rfocus-pulse .5s ease; }
@keyframes rfocus-pulse { 0% { background: color-mix(in srgb, var(--accent) 28%, transparent); } 100% { background: var(--accent-soft); } }

/* ── Unified Trash hub (Settings → Trash) ── */
.trh-tabs { display: flex; gap: 2px; background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight); margin-bottom: var(--space-group); width: fit-content; }
/* retention policy selector in the hub header */
.trh-ret { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.trh-ret select { font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); cursor: pointer; transition: border-color .14s; }
.trh-ret select:hover { border-color: var(--border-strong); }
.trh-ret select:focus { outline: none; border-color: var(--accent); }
.trh-tab { display: inline-flex; align-items: center; gap: var(--space-inline); border: none; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: 6px; cursor: pointer; transition: background .14s, color .14s; }
.trh-tab .icn { color: var(--ink-4); }
.trh-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.trh-tab.on .icn { color: var(--accent); }
.trh-tab-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 16%, transparent); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 700; }
.trh-tab.on .trh-tab-n { background: var(--accent-soft); color: var(--accent); }
.set-tab-n { margin-left: auto; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 15%, transparent); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; }
.sb-item.active .set-tab-n { background: var(--accent-soft); color: var(--accent); }
/* deletion log (audit trail) inside the Trash hub */
.trh-audit { margin-top: 20px; border-top: 1px solid var(--border-subtle); padding-top: var(--space-item); }
.trh-audit-h { display: flex; align-items: center; gap: var(--space-inline); width: 100%; border: none; background: transparent; cursor: pointer; padding: var(--space-tight) 2px; font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.trh-audit-h .icn:first-child { color: var(--ink-4); }
.trh-audit-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 14%, transparent); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; }
.trh-audit-caret { transition: transform .16s; color: var(--ink-4); }
.trh-audit-caret.open { transform: rotate(180deg); }
.trh-audit-list { margin-top: var(--space-tight); }
.trh-audit-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 2px; font-size: var(--t-caption-size); color: var(--ink-2); }
.trh-audit-ic { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-sunken); color: var(--ink-4); flex-shrink: 0; }
.trh-audit-text { min-width: 0; flex: 1; }
.trh-audit-when { font-size: var(--t-micro-size); color: var(--ink-4); white-space: nowrap; flex-shrink: 0; }
.trh-audit-more { border: none; background: transparent; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) 2px; }
.trh-audit-more:hover { text-decoration: underline; }
.tcr-sec-n { font-weight: 600; color: var(--ink-4); }
.tcr-item { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.tcr-item:hover { background: var(--bg-hover); }
.tcr-item .tcheck { margin-top: 1px; flex-shrink: 0; }
.tcr-main { min-width: 0; flex: 1; }
.tcr-item .avatar-stack { margin-left: auto; flex-shrink: 0; margin-top: 1px; padding-left: var(--space-tight); }
.tcr-name { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); line-height: 1.3; }
.tcr-item.done .tcr-name { text-decoration: line-through; color: var(--ink-4); }
.tcr-meta { display: flex; align-items: center; gap: var(--space-tight); margin-top: 2px; font-size: var(--t-micro-size); color: var(--ink-4); min-width: 0; }
.tcr-type { flex-shrink: 0; font-weight: 500; color: var(--ink-4); }
.tcr-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tcr-due { white-space: nowrap; }
.tcr-due.over { color: var(--st-blocked); font-weight: 600; }
.tcr-empty { font-size: var(--t-caption-size); color: var(--ink-4); padding: var(--space-block) var(--space-tight); text-align: center; }
.tcr-hint { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); padding: var(--space-inline) var(--space-tight) 2px; border-top: 1px solid var(--border-subtle); margin-top: var(--space-tight); }
@media (max-width: 920px) { .tcal-shell { grid-template-columns: 1fr; } .tcal-rail { position: static; max-height: none; order: 2; } }

/* compact task metrics — flush strip, spacing separates cells (Hairline Budget 2026-08-29: no vertical dividers) */
.tmetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.tmetric { display: flex; align-items: center; gap: var(--space-item); background: none; border: none; border-radius: 0; padding: var(--space-tight) 20px; box-shadow: none; }
.tmetric:first-child { padding-left: 2px; }
.tmetric-ico { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.tmetric-body { min-width: 0; }
.tmetric-label { font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 500; margin-bottom: var(--space-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmetric-row { display: flex; align-items: baseline; gap: var(--space-inline); }
.tmetric-val { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 460; letter-spacing: -0.02em; line-height: 1; }

/* ============================================================
   Approvals
   ============================================================ */
.appr-card { background: transparent; border: none; border-radius: 0; padding: var(--space-item) 2px; box-shadow: none; border-bottom: 1px solid var(--border-subtle); }
.appr-scope { display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 var(--space-tight); border-radius: 0; font-size: var(--t-micro-size); font-weight: 600; background: transparent; }
.appr-status { display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 2px; border-radius: 0; font-size: var(--t-micro-size); font-weight: 600; background: transparent; }
.appr-status.pending { background: transparent; color: var(--st-review); }
.appr-status.approved { background: transparent; color: var(--st-done); }
.appr-status.changes { background: transparent; color: var(--st-planning); }
.appr-status.rejected { background: transparent; color: var(--st-blocked); }
.ext-pill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--c-blue); background: transparent; padding: 2px var(--space-tight); border-radius: 0; }
.seg-gear { width: 34px; height: 34px; border-radius: var(--r-sm); border: none; background: transparent; display: grid; place-items: center; color: var(--ink-2); transition: background .14s, color .14s; }
.seg-gear:hover { background: var(--bg-hover); color: var(--accent); }

/* approval card → clickable + files hint */
.appr-card.clickable { cursor: pointer; transition: background .14s; }
.appr-card.clickable:hover { box-shadow: none; transform: none; background: var(--bg-hover); }
.appr-card-files { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); background: transparent; padding: var(--space-tight) 2px; border-radius: 0; white-space: nowrap; margin-bottom: var(--space-item); }

/* ===== Approvals redesign ===== */
.appr-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.appr-kpi { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) var(--space-group); border: none; border-radius: 0; background: transparent; box-shadow: none; }
.appr-kpi + .appr-kpi { border-left: 1px solid var(--border-subtle); }
.appr-kpi.accent { background: transparent; border-color: transparent; }
.appr-kpi-ic { width: 28px; height: 28px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.appr-kpi-v { font-size: var(--t-title-size); font-weight: 700; letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.appr-kpi-k { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); line-height: 1.2; }

.appr-tabs { display: flex; align-items: center; gap: var(--space-tight); border-bottom: 1px solid var(--border); margin-bottom: var(--space-item); }
.appr-tab { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: none; background: none; color: var(--ink-3); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .14s; }
.appr-tab:hover { color: var(--ink-2); }
.appr-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.appr-tab-n { min-width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 650; display: inline-grid; place-items: center; }
.appr-tab.on .appr-tab-n { background: transparent; color: var(--accent); }

.appr-toolbar { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-item); }
.appr-search { display: flex; align-items: center; gap: var(--space-inline); height: 36px; padding: 0 var(--space-item); border: 1px solid transparent; border-radius: var(--r-control); background: var(--bg-sunken); width: 248px; transition: border-color .14s, background .14s; }
.appr-search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: none; }
.appr-search .icn { color: var(--ink-4); flex-shrink: 0; }
.appr-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); font-family: inherit; }
.appr-search button { border: none; background: none; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 5px; position: relative; }
.appr-search button:hover { color: var(--accent); background: var(--bg-hover); }
.appr-tool { display: inline-flex; align-items: center; gap: var(--space-inline); height: 36px; padding: 0 var(--space-item); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.appr-tool:hover { background: var(--bg-hover); color: var(--accent); }
.appr-tool.on { color: var(--accent); background: var(--bg-hover); }
.appr-tool-n { min-width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: var(--t-micro-size); font-weight: 700; display: inline-grid; place-items: center; }

.appr-bulk { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-radius: 0; background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-item); animation: appr-slidedown var(--dur-over) var(--ease); }
@keyframes appr-slidedown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.appr-bulk-n { font-size: var(--t-label-size); font-weight: 700; color: var(--accent); }

/* redesigned card */
.appr-card-anim { animation: rise var(--dur-over) var(--ease) both; }
.appr-card2 { background: transparent; border: none; border-radius: 0; padding: var(--space-item) 2px; box-shadow: none; border-bottom: 1px solid var(--border-subtle); }
.appr-card2.clickable { cursor: pointer; transition: background .14s; }
.appr-card2.clickable:hover { box-shadow: none; transform: none; background: var(--bg-hover); }
.appr-card2.sel { border-color: transparent; box-shadow: none; background: var(--bg-hover); }
.appr-card2-top { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-item); }
.appr-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: #fff; transition: all .12s; }
.appr-check.on { background: var(--accent); border-color: var(--accent); }
.appr-prio { display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 2px; border-radius: 0; font-size: var(--t-micro-size); font-weight: 700; background: transparent; }
.appr-vchip { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: transparent; padding: 0 2px; border-radius: 0; font-variant-numeric: tabular-nums; }
.appr-due { display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 2px; border-radius: 0; font-size: var(--t-micro-size); font-weight: 700; white-space: nowrap; background: transparent; }
.appr-due.overdue { color: var(--st-blocked); background: transparent; }
.appr-due.today { color: var(--st-planning); background: transparent; }
.appr-due.soon { color: var(--c-gold); background: transparent; }
.appr-due.later { color: var(--ink-3); background: transparent; }
.appr-card2-title { font-size: var(--t-strong-size); font-weight: 650; letter-spacing: -0.01em; margin-bottom: var(--space-tight); }
.appr-card2-note { font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.5; margin: 0 0 var(--space-item); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.appr-rel { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-bottom: var(--space-item); }
.appr-rel-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 24px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: transparent; border: none; font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-2); transition: background .12s; }
.appr-rel-chip:hover { background: var(--bg-hover); }
.appr-rel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.appr-fstrip { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-bottom: var(--space-item); }
.appr-fchip { display: inline-flex; align-items: center; gap: var(--space-inline); max-width: 190px; height: 28px; padding: 0 var(--space-inline) 0 2px; border-radius: var(--r-control); background: transparent; border: none; font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-2); }
.appr-fchip:hover { background: var(--bg-hover); }
.appr-fchip-thumb { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: var(--accent); flex-shrink: 0; background: transparent !important; }
.appr-fchip.more { padding: 0 var(--space-inline); color: var(--ink-3); font-weight: 700; height: 28px; align-items: center; }
.appr-flow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) 0 0; border-top: 1px solid var(--border-subtle); }
.appr-flow-side { display: inline-flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.appr-flow-side.right { margin-left: auto; justify-content: flex-end; }
.appr-flow-name { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); white-space: nowrap; }
.appr-flow-role { font-size: var(--t-micro-size); color: var(--ink-4); white-space: nowrap; }
.appr-flow-arrow { color: var(--ink-4); display: inline-flex; align-items: center; flex-shrink: 0; }
.appr-flow-ext { width: 22px; height: 22px; border-radius: 0; background: transparent; color: var(--c-blue); display: grid; place-items: center; flex-shrink: 0; }
.appr-chain-mini { display: inline-flex; align-items: center; }
.appr-chain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.appr-chain-dot.approved { background: var(--st-done); }
.appr-chain-dot.pending { background: var(--st-review); box-shadow: 0 0 0 3px var(--st-review-soft); }
.appr-chain-line { width: 12px; height: 2px; background: var(--border); }
.appr-card2-actions { display: flex; gap: var(--space-inline); margin-top: var(--space-item); }
.appr-card2-decision { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); font-size: var(--t-caption-size); color: var(--ink-3); font-style: italic; }

/* rail */
.appr-rail-h { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--space-item); }
.appr-break-row { padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.appr-break-row:last-child { border-bottom: none; }
.appr-break-lbl { font-size: var(--t-label-size); font-weight: 550; }
.appr-timeline { display: flex; flex-direction: column; gap: 2px; }
.appr-tl-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.appr-tl-row:hover { background: var(--bg-hover); }
.appr-safe { margin-top: 2px; }
.appr-safe-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-2); margin-bottom: var(--space-tight); }
.appr-safe-hd .icn, .appr-safe-hd svg { color: var(--ink-3); flex-shrink: 0; }
.appr-safe-tx { margin: 0; font-size: var(--t-caption-size); line-height: 1.5; color: var(--ink-3); }
.appr-tl-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.appr-tl-t { font-size: var(--t-caption-size); font-weight: 600; }
.appr-tl-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }

/* approval chain (drawer) */
.appr-chain { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.appr-chain-step { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 2px; background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); position: relative; }
.appr-chain-step:first-child { border-radius: 0; }
.appr-chain-step:last-child { border-radius: 0; border-bottom: none; }
.appr-chain-step:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.appr-chain-step.approved { background: transparent; }
.appr-chain-step.pending { background: transparent; }
.appr-chain-node { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: transparent; color: var(--ink-3); border: 1.5px solid var(--border-strong); }
.appr-chain-step.approved .appr-chain-node { background: var(--st-done-soft); border-color: var(--st-done); color: var(--st-done-ink); }
.appr-chain-step.pending .appr-chain-node { background: transparent; border-color: var(--border-strong); color: var(--ink-3); }
.appr-chain-num { font-size: var(--t-micro-size); font-weight: 700; }
.appr-chain-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: md-pulse 1.6s infinite; }
.appr-chain-body { flex: 1; min-width: 0; }
.appr-chain-name { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 600; }
.appr-chain-ext { width: 20px; height: 20px; border-radius: 0; background: transparent; color: var(--c-blue); display: grid; place-items: center; }
.appr-chain-role { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
/* multi-step chain: only the ACTIVE step reads as "reviewing"; later steps wait, halted steps show clay, skipped fade */
.appr-chain-step.pending { background: transparent; }
.appr-chain-step.pending .appr-chain-node { background: transparent; color: var(--ink-3); }
.appr-chain-step.pending.active { background: transparent; }
.appr-chain-step.pending.active .appr-chain-node { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.appr-chain-step.changes, .appr-chain-step.rejected { background: transparent; }
.appr-chain-step.changes .appr-chain-node, .appr-chain-step.rejected .appr-chain-node { background: var(--tag-clay-bg); border-color: var(--c-clay); color: var(--tag-clay-fg); }
.appr-chain-step.skipped { opacity: .55; }
.appr-chain-step.skipped .appr-chain-name { color: var(--ink-3); }
/* row mini-dots: only the active step glows */
.appr-chain-dot.pending { background: color-mix(in srgb, var(--st-review) 45%, var(--border-strong)); box-shadow: none; }
.appr-chain-dot.pending.active { background: var(--st-review); box-shadow: 0 0 0 3px var(--st-review-soft); }
.appr-chain-dot.changes, .appr-chain-dot.rejected { background: var(--c-clay); }
.appr-chain-dot.skipped { background: var(--border); opacity: .6; }
.appr-chain-step-lbl { margin-left: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
/* SendApprovalModal ordered approver builder */
.appr-chain-build { display: flex; flex-direction: column; gap: 0; }
.appr-chain-build-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 2px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.appr-chain-build-n { width: 18px; height: 18px; border-radius: 50%; background: transparent; color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border)); font-size: var(--t-micro-size); font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.appr-chain-build-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.appr-chain-build-x { width: 22px; height: 22px; border: none; background: transparent; color: var(--ink-4); border-radius: 6px; cursor: pointer; display: grid; place-items: center; position: relative; }
.appr-chain-build-x:hover { color: var(--st-blocked); background: var(--bg-hover); }

/* related items (drawer) */
.appr-related { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.appr-rel-card { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) 2px; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; cursor: pointer; text-align: left; transition: background .12s; }
.appr-rel-card:hover { border-color: transparent; transform: none; background: var(--bg-hover); }
.appr-rel-card:last-child { border-bottom: none; }
.appr-rel-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.appr-rel-ic.bare { background: transparent !important; }
.appr-rel-t { font-size: var(--t-label-size); font-weight: 600; }
.appr-rel-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }

/* discussion thread (drawer) */
.appr-thread { display: flex; flex-direction: column; gap: var(--space-item); margin-bottom: 20px; }
.appr-comment { display: flex; gap: var(--space-inline); }
.appr-comment-head { display: flex; align-items: baseline; gap: var(--space-inline); margin-bottom: var(--space-tight); }
.appr-comment-head b { font-size: var(--t-caption-size); font-weight: 700; }
.appr-comment-head .muted { font-size: var(--t-micro-size); }
.appr-comment-tx { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); }
.appr-comment-box { display: flex; align-items: flex-start; gap: var(--space-inline); }
.appr-comment-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.appr-comment-box input { flex: 1; width: 100%; min-width: 0; height: 38px; padding: 0 var(--space-item); border: 1px solid transparent; border-radius: var(--r-control); background: var(--bg-sunken); font-size: var(--t-label-size); color: var(--ink); outline: none; font-family: inherit; transition: border-color .14s, background .14s; box-shadow: none; }
.appr-comment-box input:focus { border-color: var(--accent); background: var(--surface); box-shadow: none; outline: none; }
.appr-comment-col .create-summary { margin-top: 2px; padding-left: 2px; }
.appr-comment-box > .fcomp-send { margin-top: 2px; flex-shrink: 0; }
.appr-comment-send { width: 34px; height: 34px; border-radius: var(--r-control); border: none; background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .14s, opacity .14s, color .14s; position: relative; }
.appr-comment-send:hover { background: var(--bg-hover); color: var(--accent); }
.appr-comment-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }

@media (max-width: 1180px){ .appr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Approvals — Editorial Calm redesign ===== */
/* borderless hairline stat strip */
.appr-mstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.appr-mcell { padding: 2px 20px; min-width: 0; }
.appr-mcell:first-child { padding-left: 2px; }
.appr-mcell + .appr-mcell { border-left: 1px solid var(--border-subtle); }
.appr-mcell-btn { display: block; width: 100%; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-control); transition: background .12s; }
.appr-mcell-btn:hover { background: var(--bg-sunken); }
.appr-mcell-v { font-size: var(--t-title-size); font-weight: 680; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.appr-mcell.accent .appr-mcell-v { color: var(--accent); }
.appr-mcell-k { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-inline); display: flex; align-items: center; gap: var(--space-tight); line-height: 1.2; }
.appr-mcell-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 1180px){ .appr-mstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-group); } }

/* group headers */
.appr-list { margin-top: 2px; }
.appr-group-hd { display: flex; align-items: center; gap: var(--space-inline); padding: 20px var(--space-tight) var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.appr-group-hd:first-child { padding-top: var(--space-tight); }
.appr-group-n { font-weight: 600; letter-spacing: 0; color: var(--ink-4); }

/* borderless rows */
.appr-row-anim { animation: rise var(--dur-over) var(--ease) both; }
.appr-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-tight); border-radius: 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .14s; user-select: none; }
.appr-row:hover { background: var(--bg-hover); }
.appr-row.sel { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.appr-list > .appr-row-anim:last-child .appr-row { border-bottom: none; }
.appr-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: var(--accent-fg); padding: 0; }
.appr-check.on { background: var(--accent); border-color: var(--accent); }
.appr-row-glyph { width: 28px; flex-shrink: 0; display: grid; place-items: center; }
.appr-row-main { flex: 1 1 auto; min-width: 0; }
.appr-row-titleline { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.appr-row-title { font-size: var(--t-body-size); font-weight: 620; letter-spacing: -0.01em; color: var(--ink); min-width: 0; }
.appr-flag { color: var(--pr-high); display: inline-flex; flex-shrink: 0; }
.appr-tag { font-size: var(--t-micro-size); font-weight: 700; padding: 0 2px; border-radius: 0; background: transparent; color: var(--ink-3); flex-shrink: 0; }
.appr-tag.ext { background: transparent; color: var(--c-blue); display: inline-flex; align-items: center; gap: var(--space-tight); }
.appr-tag.warn { background: transparent; color: var(--c-clay); display: inline-flex; align-items: center; gap: var(--space-tight); }
.appr-tag.esc { background: transparent; color: var(--c-gold-700, #9a7d2e); display: inline-flex; align-items: center; gap: var(--space-tight); }
.appr-row-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--accent-fg); padding: 0; transition: background .12s, border-color .12s; }
.appr-row-check:hover { border-color: var(--accent); }
.appr-row-check.on { background: var(--accent); border-color: var(--accent); }
.appr-row-check.sm { width: 16px; height: 16px; }
.appr-row.selected { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.appr-bulkbar { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); margin-bottom: var(--space-inline); border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); font-size: var(--t-label-size); color: var(--ink-2); position: sticky; top: 6px; z-index: 5; box-shadow: none; }
.appr-bulk-all { border: none; background: none; padding: 0; cursor: pointer; display: inline-flex; position: relative; }
.appr-bulk-x { border: none; background: none; cursor: pointer; color: var(--ink-4); padding: var(--space-tight); border-radius: 6px; display: inline-flex; position: relative; }
.appr-bulk-x:hover { background: var(--bg-hover); color: var(--ink-2); }
.appr-bulk-all[data-tip]::after,
.appr-bulk-x[data-tip]::after,
.appr-row-check[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.appr-bulk-all[data-tip]:hover::after,
.appr-bulk-x[data-tip]:hover::after,
.appr-row-check[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.appr-row-check[data-tip] { position: relative; }
.appr-row-meta { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); flex-wrap: wrap; }
.appr-row-meta .row { color: var(--ink-3); }
.appr-row-scope { font-weight: 600; }
.appr-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.appr-mini-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.appr-row-flow { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.appr-statp { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.appr-statp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.appr-row-acts { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; opacity: 0; transition: opacity .14s; }
.appr-row:hover .appr-row-acts, .appr-row.selmode .appr-row-acts { opacity: 1; }
.appr-row-acts .btn.icon { border: none; background: transparent; box-shadow: none; color: var(--ink-2); }
.appr-row-acts .btn.icon:hover { background: var(--bg-hover); color: var(--accent); }
.appr-row-acts button[data-tip] { position: relative; }
.appr-row-acts button[data-tip]::after,
.appr-chain-build-x[data-tip]::after,
.appr-comment-send[data-tip]::after,
.appr-search button[data-tip]::after,
.appr-fchip[data-tip]::after,
.appr-flag[data-tip]::after,
.appr-tag[data-tip]::after,
.appr-chain-mini[data-tip]::after,
.appr-row-flow[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.appr-row-acts button[data-tip]:hover::after,
.appr-row-acts button[data-tip]:focus-visible::after,
.appr-chain-build-x[data-tip]:hover::after,
.appr-comment-send[data-tip]:hover::after,
.appr-search button[data-tip]:hover::after,
.appr-fchip[data-tip]:hover::after,
.appr-flag[data-tip]:hover::after,
.appr-tag[data-tip]:hover::after,
.appr-chain-mini[data-tip]:hover::after,
.appr-row-flow[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.appr-fchip[data-tip], .appr-flag[data-tip], .appr-tag[data-tip], .appr-chain-mini[data-tip], .appr-row-flow[data-tip] { position: relative; }
.appr-row-open { flex-shrink: 0; }
.appr-empty { min-height: 200px; display: grid; place-items: center; text-align: center; color: var(--ink-2); padding: var(--space-page) 0; }

/* phone: keep list rows single-band; decide acts via context menu / open */
@media (max-width: 760px) {
  .appr-row { gap: var(--space-inline); padding: var(--space-item) 2px; }
  .appr-row-flow,
  .appr-due,
  .appr-row-acts { display: none; }
  .appr-statp .muted { display: none; }
  .appr-row-meta { gap: var(--space-tight); }
  .appr-bulk { flex-wrap: wrap; gap: var(--space-inline); }
  .appr-bulk .btn { flex: 1 1 auto; }
}

/* send modal — due presets */
.appr-due-opts { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.appr-due-opt { height: 32px; padding: 0 var(--space-item); border-radius: var(--r-control); border: none; background: transparent; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color .12s, background .12s, box-shadow .12s; display: inline-flex; align-items: center; gap: var(--space-tight); }
.appr-due-opt:hover { background: var(--bg-hover); color: var(--ink); }
.appr-due-opt.sel { background: var(--bg-hover); color: var(--accent); }
/* sunken segment for Send-approval chips (scope / route / prio / video / due) */
.appr-seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  padding: var(--space-tight); border-radius: var(--r-control);
  background: var(--bg-sunken); max-width: 100%;
}
.appr-seg--wrap { display: flex; width: 100%; }
.appr-seg .appr-due-opt { height: 30px; padding: 0 var(--space-item); border-radius: var(--r-control); font-weight: 550; }
.appr-seg .appr-due-opt.sel {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-xs);
}

/* ── Send-for-approval modal (s-tasks-extra.jsx SendApprovalModal) ──
   Three questions in order: what, who, when. Hairline-separated sections with
   small-caps labels instead of one undifferentiated wall of stacked segmented
   controls. No cards, no fills. */
.aprm { display: flex; flex-direction: column; }
.aprm-sec { display: flex; flex-direction: column; gap: var(--space-item); padding: var(--space-block) 0 0; }
.aprm-sec:first-of-type { padding-top: 0; }
.aprm-sec + .aprm-sec { border-top: 1px solid var(--border-subtle); margin-top: var(--space-block); }
.aprm-sec-h {
  margin: 0; font-size: var(--t-micro-size); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4);
}
/* the "needed by" options are choices, not a mode switch — chips read lighter
   than a fourth sunken segmented control in the same column */
.aprm-chips { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.aprm-chip {
  padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.aprm-chip:hover { border-color: var(--border-strong); }
.aprm-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.modal-appr .aprm-sec .field-row { gap: var(--space-block); align-items: flex-start; }

/* ── task dependencies (blocked-by) ─────────────────────────── */
.dep-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 500; padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: pointer; max-width: 100%; transition: background .12s; }
.dep-chip.open { background: var(--st-blocked-soft); color: var(--st-blocked); }
.dep-chip.done { background: var(--bg-sunken); color: var(--ink-3); }
.dep-chip.done .clamp1 { text-decoration: line-through; }
.dep-chip.docref { background: var(--bg-sunken); color: var(--ink-2); }
.dep-chip:hover { filter: brightness(.97); }
.dep-x { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; opacity: .6; }
.dep-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
.dep-add { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); background: none; border: 1px dashed var(--border-strong); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); cursor: pointer; transition: all .12s; }
.dep-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.task-blocked-banner { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--st-blocked-soft); color: var(--st-blocked); font-size: var(--t-label-size); font-weight: 550; margin-bottom: var(--space-group); }
/* Connection Pulse nudge — quiet, no fill/border by default, hover only. */
.tdw-connect-nudge { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); padding: var(--space-tight) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer; }
.tdw-connect-nudge:hover { background: var(--bg-hover); color: var(--ink-2); }
.task-blocking-note { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent-700); font-size: var(--t-caption-size); font-weight: 550; margin-bottom: var(--space-group); }
.tact-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-sunken); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.pwl-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.pwl-row:last-child { border-bottom: none; }
.pwl-track { height: 9px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.pwl-track i { display: block; height: 100%; border-radius: 99px; transition: width .2s; }
.pwl-flag { font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: 999px; flex-shrink: 0; }
.pwl-flag.over { color: var(--st-blocked); background: var(--st-blocked-soft); }
.pwl-flag.high { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }
/* project drawer — budget tab */
.pbud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-item); }
.pbud-spent { font-size: var(--t-title-size); font-weight: 730; color: var(--ink); letter-spacing: -.01em; }
.pbud-of { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.pbud-tier { font-size: var(--t-caption-size); font-weight: 700; padding: var(--space-tight) var(--space-inline); border-radius: 999px; white-space: nowrap; }
.pbud-track { height: 10px; border-radius: 6px; background: var(--bg-sunken); overflow: hidden; }
.pbud-track i { display: block; height: 100%; border-radius: 6px; transition: width .4s var(--ease); }
/* Was a bordered card around 2-3 rows — the last thing in the redesigned
   drawer still boxing plain data. A hairline top divider does the same job
   of separating this from the progress track above it. */
.pbud-split { display: flex; flex-direction: column; gap: var(--space-inline); border-top: 1px solid var(--border-subtle); padding-top: var(--space-item); }
.pbud-split-item { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink-2); }
.pbud-split-item b { color: var(--ink); }
.pbud-split-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.pbud-split-item.total { border-top: 1px solid var(--border-subtle); padding-top: var(--space-inline); margin-top: 2px; font-weight: 600; color: var(--ink); }
/* Same box removal as .pbud-split above. */
.pbud-forecast { border-top: 1px solid var(--border-subtle); padding-top: var(--space-item); }
.pbud-fc-hd { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-item); }
.pbud-fc-chart { display: flex; align-items: flex-end; gap: var(--space-tight); height: 46px; margin-bottom: var(--space-item); }
.pbud-fc-bar { flex: 1; border-radius: 3px 3px 2px 2px; background: var(--c-olive); opacity: .55; }
.pbud-fc-bar:last-child { opacity: .95; }
.pbud-fc-figs { display: flex; gap: var(--space-block); }
.pbud-fc-fig { display: flex; flex-direction: column; gap: 2px; }
.pbud-fc-v { font-size: var(--t-strong-size); font-weight: 700; color: var(--ink); }
.pbud-fc-v.neg { color: var(--st-blocked); }
.pbud-fc-k { font-size: var(--t-micro-size); color: var(--ink-3); }
/* project drawer — Tasks tab view switch (At risk · All · By person).
   Was .pd-risk-* when it only toggled the at-risk filter; it now also carries
   the view that used to be the Workload tab, so the name follows the job. */
.pd-seg { display: inline-flex; gap: 2px; background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight); margin-bottom: var(--space-tight); }
.pd-seg-tab { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-item); border: none; background: transparent; border-radius: var(--r-control); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.pd-seg-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.pd-seg-tab:hover:not(.on) { color: var(--ink-2); }
.pd-seg-n { font-size: var(--t-micro-size); font-weight: 700; min-width: 16px; height: 16px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); display: inline-grid; place-items: center; }
.pd-seg-tab.on .pd-seg-n { background: var(--accent-soft); color: var(--accent); }
.pd-tflag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.pd-tflag.over { color: var(--st-blocked); background: var(--st-blocked-soft); }
.pd-tflag.blocked { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }
.pd-tflag.soon { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); }
.pd-tflag.high { color: var(--c-mauve); background: color-mix(in srgb, var(--c-mauve) 14%, transparent); }
.pd-reassign { display: inline-flex; align-items: center; gap: 2px; border: none; background: transparent; padding: 2px var(--space-tight) 2px 2px; border-radius: 999px; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.pd-reassign:hover { background: var(--bg-hover); }
.pd-check { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--accent-fg); transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); padding: 0; }
.pd-check:hover { border-color: var(--accent); }
.pd-check.on { background: var(--accent); border-color: var(--accent); }
/* Bulk select is a table interaction. Keeping a permanent empty checkbox on
   every row of a 540px drawer reads as clutter, so the box only appears on
   hover, on keyboard focus, or once a selection is live — the capability is
   unchanged, its resting-state cost is not. */
.pd-task-row .pd-check { opacity: 0; }
.pd-task-row:hover .pd-check,
.pd-task-row .pd-check:focus-visible,
.pd-task-row .pd-check.on { opacity: 1; }
/* A touch device has no hover, so a hover-revealed control is simply an
   unreachable one. Show it outright there. */
@media (hover: none) { .pd-task-row .pd-check { opacity: 1; } }
.pd-task-sel { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pd-bulk { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--accent-soft); }
.pd-bulk-n { font-size: var(--t-caption-size); font-weight: 650; color: var(--accent); }

/* ── drawer folds ───────────────────────────────────────────────────────
   Shared across every record drawer (project, client, task): one collapsed
   line per secondary section, driven by the DrawerFold component + the
   DrawerFoldPrefs store in s-kit.jsx. Structure is hairlines and rhythm, not
   containers — no border box, no fill, affordance is hover only. The count on
   the header is what earns the closed default. .pd-folds (plural, the outer
   wrapper) stays project-drawer-specific markup, not part of the component. */
.pd-folds { margin-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.dw-fold { border-bottom: 1px solid var(--border-subtle); }
.dw-fold-hd { display: flex; align-items: center; gap: var(--space-inline); }
.dw-fold-tg {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-inline);
  padding: var(--space-item) 0; border: none; background: transparent; cursor: pointer;
  font: inherit; color: var(--ink-2); text-align: left; transition: color var(--dur-micro) var(--ease);
}
.dw-fold-tg:hover { color: var(--ink); }
.dw-fold-chev { flex-shrink: 0; color: var(--ink-4); transition: transform var(--dur-micro) var(--ease); }
.dw-fold.open .dw-fold-chev { transform: rotate(90deg); }
.dw-fold-ic { flex-shrink: 0; color: var(--ink-4); }
.dw-fold-lb { font-size: var(--t-label-size); font-weight: 600; }
.dw-fold-n { font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dw-fold-act {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-tight);
  height: 24px; padding: 0 var(--space-inline); border: none; border-radius: var(--r-control);
  background: transparent; color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: var(--t-caption-size); font-weight: 600;
  opacity: 0; transition: opacity var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.dw-fold-hd:hover .dw-fold-act,
.dw-fold.open .dw-fold-act,
.dw-fold-act:focus-visible { opacity: 1; }
@media (hover: none) { .dw-fold-act { opacity: 1; } }
.dw-fold-act:hover { background: var(--bg-hover); color: var(--ink); }
.dw-fold-body { padding: 0 0 var(--space-block); animation: dwFoldIn var(--dur-micro) var(--ease); }
.dw-fold-empty { font-size: var(--t-caption-size); color: var(--ink-3); padding: 0 0 var(--space-inline); }
@keyframes dwFoldIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Panels that ship their own section header (FileLinksPanel, ProjectVendors)
   would repeat the fold's label. Drop the duplicated title and let the fold
   header be the only one; a real action in that row (View all) still shows,
   right-aligned now that the label beside it is gone. */
.dw-fold-body .pd-ov-boards,
.dw-fold-body .flp { margin-top: 0; padding-top: 0; border-top: none; }
.dw-fold-body .pd-ov-boards > .row.between,
.dw-fold-body .flp > .row.between { justify-content: flex-end; }
.dw-fold-body .pd-ov-boards > .row.between > .pd-ov-boards-hd,
.dw-fold-body .flp > .row.between > .pd-ov-boards-hd { display: none; }
.dw-fold-body .pd-ov-boards > .row.between:not(:has(button)),
.dw-fold-body .flp > .row.between:not(:has(button)) { display: none; }
.dw-fold-body > .pd-contrib:first-child { border-top: none; margin-top: 0; padding-top: 0; }
/* project drawer — canvas boards grid */
.pd-cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item); align-items: start; }
.pd-cv-grid .cvh-card-thumb { height: 158px; display: grid; place-items: center; }
.pd-cv-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-inline); min-height: 212px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); background: transparent; cursor: pointer; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 600; transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
.pd-cv-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pd-cv-cbadge { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 var(--space-inline); border-radius: 999px; background: var(--c-clay); color: #fff; font-size: var(--t-micro-size); font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.pd-cv-cbadge.sm { top: 6px; right: 6px; height: 18px; padding: 0 var(--space-tight); font-size: var(--t-micro-size); gap: 2px; }
/* project overview — compact boards strip */
.pd-ov-boards { margin-top: var(--space-tight); padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.pd-ov-boards-hd { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-2); }
.pd-ov-boards-hd .muted { font-weight: 600; }
.pd-mtg-row {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-inline) var(--space-tight); border: none; border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; cursor: pointer; transition: background .12s;
}
.pd-mtg-row:hover { border-color: var(--border-subtle); background: var(--bg-hover); }
.pd-mtg-ic { flex-shrink: 0; display: inline-flex; }
.pd-mtg-t { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.pd-mtg-s { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.trow-blocked { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 1px var(--space-inline); border-radius: 999px; }
.kbn-blocked { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 2px var(--space-inline); border-radius: 999px; margin-bottom: var(--space-inline); }
/* ── highlight + subtasks ─────────────────────────────────── */
.hl-flag { position: absolute; top: 0; right: 14px; width: 16px; height: 22px; border-radius: 0 0 4px 4px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.hl-flag::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:6px; background:inherit; clip-path: polygon(0 0, 100% 0, 50% 70%); }
.task-card { position: relative; overflow: hidden; }
.kbn-card.hl { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 38%, transparent), var(--shadow-xs); }
.trow.hl { box-shadow: none; }
.trow .hl-flag { display: none; }
.trow.hl { position: relative; }
.kbn-card.hl { position: relative; }

.hl-picker { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; padding: 2px 2px var(--space-tight); }
.hl-sw { width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s, box-shadow .12s; flex-shrink: 0; }
.hl-sw:hover { transform: scale(1.1); }
.hl-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.hl-sw.none { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hl-sw.none.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-3); }

.subt-wrap { padding-top: 2px; }
.subt-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); transition: background .12s; }
.subt-row:hover { background: var(--bg-hover); }
.subt-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: var(--t-label-size); font-weight: 500; padding: 2px 0; }
.subt-input:focus { border-bottom: 1px solid var(--accent); }
.subt-x { width: 24px; height: 24px; border: none; background: transparent; color: var(--ink-4); border-radius: 6px; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; flex-shrink: 0; }
.subt-row:hover .subt-x { opacity: 1; }
.subt-x:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.subt-add { display: inline-flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px dashed var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.subt-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.sub-assign-btn { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-inline); border: none; background: var(--surface-2); border-radius: var(--r-pill); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .12s; flex-shrink: 0; }
.sub-assign-btn:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.sub-assign-empty { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-active); color: var(--ink-3); display: grid; place-items: center; }

/* approval review drawer */
.appr-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 20px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.appr-meta { display: flex; flex-direction: column; gap: var(--space-tight); padding: var(--space-item) var(--space-item) var(--space-item) 2px; background: transparent; border-radius: 0; }
.appr-meta:nth-child(even) { border-left: 1px solid var(--border-subtle); padding-left: var(--space-item); }
.appr-meta:nth-child(odd) { padding-left: 2px; }
.appr-meta:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
.appr-meta-k { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.appr-meta-v { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.appr-sec-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-2); margin: var(--space-group) 0 var(--space-item); }
.appr-sec-hd .icn { color: var(--ink-3); }
.appr-note { font-size: var(--t-label-size); line-height: 1.6; color: var(--ink-2); background: transparent; padding: var(--space-tight) 2px var(--space-item); border-radius: 0; margin: 0; border-bottom: 1px solid var(--border-subtle); }
.appr-files { display: flex; flex-direction: column; gap: 0; }
.appr-file { display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left; border: none; padding: var(--space-inline) 2px; background: transparent; border-radius: var(--r-control); border-bottom: 1px solid var(--border-subtle); cursor: pointer; box-shadow: none; transition: background .12s; }
.appr-file:last-child { border-bottom: none; }
.appr-file:hover { box-shadow: none; transform: none; background: var(--bg-hover); }
.appr-file-thumb { position: relative; width: 44px; height: 44px; border-radius: var(--r-control); display: grid; place-items: center; color: #fff; flex-shrink: 0; overflow: hidden; }
.appr-file-thumb.bare { width: 28px; height: 28px; border-radius: 0; background: transparent !important; color: var(--ink-3); }
.appr-file-badge { position: absolute; bottom: 3px; right: 3px; font-size: 7.5px; font-weight: 700; letter-spacing: .04em; background: rgba(0,0,0,.4); color: #fff; padding: 1px var(--space-tight); border-radius: 3px; }
.appr-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.appr-file-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appr-file-sub { font-size: var(--t-micro-size); color: var(--ink-3); }
.appr-file-eye { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; transition: background .14s, color .14s; background: transparent; position: relative; }
.appr-file:hover .appr-file-eye { background: var(--bg-hover); color: var(--accent); }
.appr-file-eye[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.appr-file:hover .appr-file-eye[data-tip]::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.appr-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(20,18,16,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--space-page); animation: fade-in var(--dur-micro) var(--ease); }
.appr-boardlink {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; margin-bottom: var(--space-group); border: none; border-radius: 0;
  border-bottom: 1px solid var(--border-subtle); background: transparent; cursor: pointer;
  transition: background .12s;
}
.appr-boardlink:hover { border-color: var(--border-subtle); background: var(--bg-hover); }
.appr-boardlink-ic { width: auto; height: auto; border-radius: 0; display: inline-flex; place-items: center; background: none; color: var(--c-mauve); flex-shrink: 0; }
.appr-boardlink-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.appr-boardlink-s { font-size: var(--t-caption-size); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appr-lightbox-card { width: min(560px, 90vw); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.appr-lightbox-img { position: relative; height: 360px; display: grid; place-items: center; color: var(--ink-3); background: var(--bg-sunken); gap: var(--space-inline); }
.appr-lightbox-img--real { padding: 0; overflow: hidden; background: #111; }
.appr-lightbox-img--real img { width: 100%; height: 100%; object-fit: contain; display: block; }
.appr-lightbox-img--empty { flex-direction: column; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; text-align: center; padding: var(--space-block); }
.appr-lightbox-img--empty span { max-width: 260px; line-height: 1.45; color: var(--ink-4); }
.appr-lightbox-bar { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-group); }
.appr-lightbox-bar > div:first-child { flex: 1; min-width: 0; }
.appr-lightbox-bar .btn.icon[data-tip] { position: relative; }
.appr-lightbox-bar .btn.icon[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.appr-lightbox-bar .btn.icon[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── quick planning tools row ─────────────────────────────── */
.plan-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-group); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 760px){ .plan-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-tool { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item) var(--space-item) var(--space-tight); background: transparent; border: none; border-radius: 0; border-right: 1px solid var(--border-subtle); box-shadow: none; cursor: pointer; text-align: left; transition: background .12s; font: inherit; }
.plan-tool:last-child { border-right: none; }
@media (max-width: 760px){
  .plan-tool:nth-child(2n) { border-right: none; }
  .plan-tool:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}
.plan-tool:hover { background: var(--bg-hover); box-shadow: none; transform: none; }
.plan-tool-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--accent); flex-shrink: 0; }
.plan-tool-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-tool-label { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.plan-tool-desc { font-size: var(--t-micro-size); color: var(--ink-3); }

/* ── mini month calendar ──────────────────────────────────── */
.mini-cal { padding: var(--space-item); overflow: visible; position: relative; }
.mc-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-item); gap: var(--space-inline); }
.mc-title-wrap { display: flex; align-items: baseline; gap: var(--space-tight); min-width: 0; }
.mc-title { font-family: var(--font-serif); font-size: var(--t-strong-size); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.mc-year { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.mc-hd-actions { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.mc-nav-group { display: inline-flex; gap: 2px; }
.mc-today {
  border: none; background: transparent; font: inherit; cursor: pointer;
  font-size: var(--t-micro-size); font-weight: 650; color: var(--accent);
  padding: var(--space-tight) var(--space-inline); border-radius: 999px; transition: background .12s, color .12s;
}
.mc-today:hover { background: var(--accent-soft); }
.mc-nav { width: 26px; height: 26px; border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.mc-nav:hover { background: var(--bg-hover); color: var(--ink); }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.duepop .mc-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.duepop .mc-days { grid-auto-rows: 34px; }
.mc-dow { margin-bottom: var(--space-tight); }
.mc-dowc { text-align: center; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); padding: 2px 0; }
.mc-cell { position: relative; aspect-ratio: 1; border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); transition: background .12s; }
.duepop .mc-cell { aspect-ratio: auto; min-height: 34px; width: 100%; }
.mc-cell.empty { cursor: default; }
.mc-cell:not(.empty):hover { background: var(--bg-hover); }
.mc-num { font-size: var(--t-caption-size); font-weight: 550; font-variant-numeric: tabular-nums; }
.mc-cell.has .mc-num { color: var(--ink); font-weight: 600; }
.mc-cell.today { background: transparent; }
.mc-cell.today .mc-num { color: var(--accent); font-weight: 700; }
.mc-cell.sel { box-shadow: none; }
.mc-cell.sel .mc-num {
  background: var(--accent); color: var(--accent-fg);
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 650;
}
.mc-cell.today:not(.sel) .mc-num {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
}
.mc-ev-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.mc-cell.today .mc-ev-dot { background: var(--accent); }
.mc-cell.sel .mc-ev-dot { background: var(--accent-fg); }
.mc-days { margin-top: 2px; }
.mini-cal-compact { padding: var(--space-tight) var(--space-item) var(--space-tight); }
.mini-cal-compact .mc-hd { margin-bottom: var(--space-inline); }
.mini-cal-compact .mc-title { font-size: var(--t-body-size); }
.mini-cal-rail-shell { overflow: visible; }
/* Rail calendars need an explicit cell track. Without it, the square
   aspect-ratio on flex/grid items can make the auto-sized tracks grow far
   beyond the rail's usable width. */
.mini-cal-rail-shell .mc-days { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 30px; }
.mini-cal-rail-shell .mc-cell { width: 100%; min-width: 0; min-height: 0; height: 30px; aspect-ratio: auto; padding: 0; }
.mini-cal-rail-shell .mc-num { font-size: var(--t-micro-size); }
.mini-cal-rail-shell .mc-cell.sel .mc-num,
.mini-cal-rail-shell .mc-cell.today:not(.sel) .mc-num { width: 24px; height: 24px; }
.mini-cal-rail-shell .mc-ev-dot { position: absolute; bottom: 1px; }
.mc-dots { display: flex; gap: 2px; height: 4px; }
.mc-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.mc-cell.today .mc-dots i { box-shadow: 0 0 0 1px var(--accent-soft); }

.mc-day { margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.mc-day-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-inline); }
.mc-day-date { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.mc-day-list { display: flex; flex-direction: column; gap: var(--space-tight); }
.mc-item { display: flex; align-items: center; gap: var(--space-inline); width: 100%; text-align: left; border: none; background: transparent; border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); cursor: pointer; transition: background .12s; }
.mc-item:hover { background: var(--bg-hover); }
.mc-item-title { display: block; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-item-sub { display: block; font-size: var(--t-micro-size); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-day-empty { font-size: var(--t-caption-size); color: var(--ink-4); font-style: italic; padding: var(--space-tight) 2px; }

.mc-pop { position: absolute; z-index: 40; top: 96px; left: 14px; right: 14px; background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-item) var(--space-item); pointer-events: none; animation: hover-pop var(--dur-over) var(--ease); }
.mc-pop-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); margin-bottom: var(--space-inline); }
.mc-pop-hd .muted { font-weight: 500; }
.mc-pop-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 0; }
.mc-pop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mc-pop-title { font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mc-pop-sub { font-size: var(--t-micro-size); color: var(--ink-4); flex-shrink: 0; }
.mc-pop-more { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-tight); }

/* ============================================================
   Document editor (Notion-style blocks)
   ============================================================ */
.doc-shell { display: flex; gap: 20px; align-items: flex-start; }
.doc-wrap { max-width: 760px; margin: 0 auto; flex: 1; min-width: 0; }
.doc-shell .doc-wrap { margin: 0 auto; }
.doc-title { font-family: var(--docm-font-head, var(--font-serif)); font-size: var(--fs-3xl); font-weight: 600; line-height: 1.12; border: none; background: none; width: 100%; color: var(--ink); padding: 0; margin: 0 0 var(--space-tight); resize: none; overflow: hidden; outline: none; letter-spacing: -0.015em; }
.doc-title::placeholder { color: var(--ink-4); }

.blk-row { display: flex; align-items: flex-start; gap: 2px; position: relative; margin: 0; }
.blk-handle { opacity: 0; display: flex; gap: 0; flex-shrink: 0; padding-top: var(--space-tight); transition: opacity .12s; margin-left: -64px; width: 66px; justify-content: flex-end; }
.blk-row:hover .blk-handle { opacity: 1; }
.blk-handle button:not(.menu-item) { width: 20px; height: 22px; border: none; background: none; border-radius: 5px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; position: relative; }
.blk-handle button:not(.menu-item):hover { background: var(--bg-hover); color: var(--ink-2); }
.blk-content { flex: 1; min-width: 0; transition: background .14s, box-shadow .14s; }
.blk-content[style*="box-shadow"] { padding: var(--space-tight) var(--space-inline); margin: 2px 0; }

/* non-intrusive AI sparkle */
.doc-ai-btn { color: var(--ink-4) !important; }
.doc-ai-btn:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.doc-ai-btn.busy { color: var(--accent) !important; }
.doc-ai-spin { width: 13px; height: 13px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.doc-ai-prompt { position: absolute; z-index: 90; top: calc(100% + 4px); left: 0; display: flex; align-items: center; gap: var(--space-inline); background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-inline) var(--space-inline); width: 340px; }
.doc-ai-prompt input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); }

/* "rewrite with Aria" field affordance (New Project/Task description, etc.) */
.field-ai-wrap { position: relative; }
.field-ai-wrap textarea.input,
.field-ai-wrap textarea { padding-right: 72px; padding-bottom: 28px; }
.field-ai-wrap .input:not(textarea) { padding-right: 72px; }
.field-ai-btn { position: absolute; z-index: 2; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: var(--space-tight); height: 24px; padding: 0 var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-micro-size); font-weight: 550; cursor: pointer; transition: background .12s, color .12s; }
.field-ai-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--ink); }
.field-ai-btn.busy, .field-ai-btn:disabled { color: var(--ink-2); cursor: default; }
.field-ai-btn.mid { bottom: auto; top: 50%; transform: translateY(-50%); }

/* block annotations (team markup) */
.blk-annot { position: absolute; right: -44px; top: 2px; }
.blk-annot-pin { width: 30px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.blk-row:hover .blk-annot-pin, .blk-annot-pin.has { opacity: 1; }
.blk-annot-pin:hover { background: var(--bg-hover); color: var(--ink-2); }
.blk-annot-pin.has { background: var(--accent-soft); }
.blk-annot-avatars { display: inline-flex; align-items: center; }
.blk-annot-avatars .avatar { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--surface); }
.blk-annot-avatars .avatar:first-child { margin-left: 0; }
.blk-annot-more { font-size: 9px; font-weight: 700; color: var(--accent); margin-left: 2px; }
.blk-annot-pop { position: absolute; z-index: 90; top: calc(100% + 4px); right: 0; width: 280px; background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-inline); }
.blk-annot-hd { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-inline); }
.blk-annot-list { display: flex; flex-direction: column; gap: var(--space-inline); max-height: 220px; overflow-y: auto; }
.blk-annot-item { display: flex; gap: var(--space-inline); align-items: flex-start; }
.blk-annot-del { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 2px; border-radius: 4px; flex-shrink: 0; }
.blk-annot-del:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.blk-annot-compose { display: flex; gap: var(--space-tight); margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.blk-annot-compose input { flex: 1; border: none; background: var(--surface-2); border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); outline: none; color: var(--ink); }

/* ── beautiful blocks ───────────────────────────────────────── */
.docblk-banner { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-block) 20px; border-radius: var(--r-md); margin: var(--space-inline) 0; color: #fff; }
.docblk-banner-emoji { border: none; background: rgba(255,255,255,.18); font-size: var(--t-title-size); cursor: pointer; line-height: 1; padding: var(--space-inline); border-radius: var(--r-card); flex-shrink: 0; }
.docblk-banner-emoji:hover { background: rgba(255,255,255,.28); }
.docblk-banner-title { border: none; background: none; outline: none; resize: none; overflow: hidden; color: #fff; font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 700; width: 100%; letter-spacing: -.01em; }
.docblk-banner-title::placeholder { color: rgba(255,255,255,.6); }
.docblk-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-group); margin: var(--space-tight) 0; }
.docblk-columns.three { grid-template-columns: 1fr 1fr 1fr; }
/* progress */
.docblk-progress { margin: var(--space-item) 0; }
.docblk-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-tight); }
.docblk-progress-label { border: none; background: none; outline: none; font-size: var(--t-body-size); font-weight: 550; color: var(--ink); flex: 1; min-width: 0; }
.docblk-progress-label::placeholder { color: var(--ink-4); }
.docblk-progress-pct { border: none; background: none; cursor: pointer; font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 700; }
.docblk-progress-track { height: 10px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; cursor: pointer; }
.docblk-progress-track i { display: block; height: 100%; border-radius: 99px; transition: width .2s; }
/* table of contents */
.docblk-toc { margin: var(--space-item) 0; padding: var(--space-item) var(--space-group); background: var(--surface-2); border-radius: var(--r-md); }
.docblk-toc-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-inline); }
.docblk-toc-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-size: var(--t-body-size); color: var(--ink-2); padding: var(--space-tight) 0; border-radius: 6px; transition: color .12s; }
.docblk-toc-item:hover { color: var(--accent); }
.docblk-toc-item.lvl-h2 { padding-left: var(--space-group); font-size: var(--t-label-size); }
.docblk-toc-item.lvl-h3 { padding-left: var(--space-section); font-size: var(--t-label-size); color: var(--ink-3); }
.docblk-toc-empty { font-size: var(--t-label-size); color: var(--ink-4); font-style: italic; }
/* file attachment */
.docblk-file { display: flex; align-items: center; gap: var(--space-item); margin: var(--space-inline) 0; padding: var(--space-item) var(--space-item); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); position: relative; }
.docblk-file-ic { width: 38px; height: 38px; border-radius: var(--r-control); background: color-mix(in srgb, var(--c-blue) 16%, transparent); color: var(--c-blue); display: grid; place-items: center; flex-shrink: 0; }
.docblk-file-name { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); }
.docblk-file-size { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.docblk-file-dl { width: 32px; height: 32px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.docblk-file-dl:hover { border-color: var(--accent); color: var(--accent); }
.docblk-col { border: none; background: none; outline: none; resize: none; overflow: hidden; font-size: var(--t-strong-size); line-height: 1.6; color: var(--ink); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--surface-2); font-family: inherit; }
.docblk-col::placeholder { color: var(--ink-4); }
.docblk-stats { display: flex; gap: var(--space-item); margin: var(--space-inline) 0; }
.docblk-stat { flex: 1; background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-group) var(--space-item); text-align: center; }
.docblk-stat-val { width: 100%; border: none; background: none; outline: none; text-align: center; font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.docblk-stat-label { width: 100%; border: none; background: none; outline: none; text-align: center; font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-tight); }
.docblk-steps { display: flex; flex-direction: column; gap: var(--space-inline); margin: var(--space-inline) 0; }
.docblk-step { display: flex; align-items: flex-start; gap: var(--space-item); }
.docblk-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: var(--t-label-size); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.docblk-step-tx { flex: 1; border: none; background: none; outline: none; resize: none; overflow: hidden; font-size: var(--t-strong-size); line-height: 1.5; color: var(--ink); padding: var(--space-tight) 0; font-family: inherit; }
.docblk-step-x { border: none; background: none; color: var(--ink-4); cursor: pointer; opacity: 0; transition: opacity .12s; padding: var(--space-tight); }
.docblk-step:hover .docblk-step-x { opacity: 1; }
.docblk-step-add, .docblk-tag-add { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--ink-4); font-size: var(--t-caption-size); cursor: pointer; padding: var(--space-tight) var(--space-tight); border-radius: 6px; align-self: flex-start; }
.docblk-step-add { margin-left: 36px; }
.docblk-step-add:hover, .docblk-tag-add:hover { color: var(--accent); background: var(--accent-soft); }
.docblk-tags { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin: var(--space-inline) 0; align-items: center; }
.docblk-tag { display: inline-flex; align-items: center; gap: var(--space-tight); background: var(--surface-2); border-radius: 999px; padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); box-shadow: inset 0 0 0 1px var(--border); }
.docblk-tag input { border: none; background: none; outline: none; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); }
.docblk-tag button { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 0; display: grid; place-items: center; }
.docblk-tag button:hover { color: var(--st-blocked); }
.docblk-tag-add { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); justify-content: center; }
.docblk-quotecard { position: relative; background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-group) 20px; margin: var(--space-inline) 0; }
.docblk-qc-mark { position: absolute; top: 6px; left: 14px; font-family: var(--font-serif); font-size: var(--fs-4xl); color: var(--accent); opacity: .35; line-height: 1; }
.docblk-qc-text { border: none; background: none; outline: none; resize: none; overflow: hidden; font-family: var(--font-serif); font-size: var(--t-heading-size); font-style: italic; color: var(--ink); width: 100%; line-height: 1.45; padding-left: var(--space-group); }
.docblk-qc-by { display: flex; gap: var(--space-inline); margin-top: var(--space-inline); padding-left: var(--space-group); }
.docblk-qc-author { border: none; background: none; outline: none; font-size: var(--t-label-size); font-weight: 650; color: var(--ink-2); }
.docblk-qc-role { border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink-3); }

/* clean borderless text blocks — subtle focus, no rings/boxes */
.docblk { border: none; background: none; width: 100%; color: var(--ink); resize: none; overflow: hidden; font-family: var(--docm-font-body, inherit); line-height: 1.62; padding: var(--space-tight) 2px; border-radius: 6px; outline: none; font-size: var(--t-strong-size); transition: background .12s; }
.docblk::placeholder { color: var(--ink-4); }
.docblk:focus { background: transparent; }
.docblk.h1 { font-family: var(--docm-font-head, var(--font-serif)); font-size: var(--t-display-size); font-weight: 600; line-height: 1.25; padding-top: var(--space-group); letter-spacing: -0.01em; }
.docblk.h2 { font-family: var(--docm-font-head, var(--font-serif)); font-size: var(--t-title-size); font-weight: 600; padding-top: var(--space-item); }
.docblk.h3 { font-family: var(--docm-font-head, inherit); font-size: var(--t-heading-size); font-weight: 650; padding-top: var(--space-inline); }
.docblk.text { font-size: var(--t-strong-size); }

.docblk-divider { height: 1px; background: var(--border); margin: var(--space-group) 0; }
.docblk-quote { display: flex; gap: var(--space-inline); align-items: flex-start; margin: var(--space-tight) 0; padding: 2px 0 2px var(--space-item); }
.docblk-quote-mark { font-family: var(--font-serif); font-size: var(--t-display-size); line-height: .8; color: var(--accent); opacity: .5; flex-shrink: 0; }
.docblk.quote { font-size: var(--t-heading-size); font-style: italic; color: var(--ink-2); }
.docblk-todo { display: flex; gap: var(--space-inline); align-items: flex-start; padding: 1px 0; }
.docblk-todo .tcheck { margin-top: var(--space-tight); }
.docblk.todo.done { text-decoration: line-through; color: var(--ink-4); }
.docblk-li { display: flex; gap: var(--space-inline); align-items: flex-start; }
.docblk-bullet { padding-top: var(--space-tight); color: var(--ink-2); flex-shrink: 0; font-size: var(--t-heading-size); line-height: 1; width: 14px; text-align: center; }
.docblk-num { padding-top: var(--space-tight); color: var(--ink-3); flex-shrink: 0; font-size: var(--t-body-size); font-variant-numeric: tabular-nums; min-width: 18px; }

/* toggle */
.docblk-toggle { margin: 2px 0; }
.docblk-toggle-hd { display: flex; gap: var(--space-tight); align-items: flex-start; }
.docblk-toggle-caret { border: none; background: none; color: var(--ink-3); cursor: pointer; padding: var(--space-tight) 2px 0; border-radius: 5px; flex-shrink: 0; }
.docblk-toggle-caret:hover { color: var(--ink); }
.docblk.toggle-title { font-weight: 600; }
.docblk.toggle-body { margin-left: var(--space-block); padding: var(--space-tight) var(--space-inline); background: var(--surface-2); border-radius: var(--r-control); font-size: var(--t-body-size); color: var(--ink-2); }

/* callout card */
.docblk-callout { display: flex; gap: var(--space-item); align-items: flex-start; padding: var(--space-item) var(--space-group); border-radius: var(--r-md); margin: var(--space-inline) 0; }
.docblk-callout-emoji { border: none; background: none; font-size: var(--t-heading-size); cursor: pointer; line-height: 1; padding: 2px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; }
.docblk-callout-emoji:hover { background: rgba(0,0,0,.06); }
.docblk.callout-text { font-size: var(--t-body-size); padding: 2px 0; }

/* ── read-only block rendering (window.DocBlockRead) ──────────────────────
   Lives here, next to the editor rules it mirrors, NOT in the consuming
   module's stylesheet: DocBlockRead is shared by Documents, the PDF maker and
   Company Policies, and build-app-runtime.sh scopes a module stylesheet to that
   module's chunk. A shared component whose CSS rides one chunk is the recurring
   unstyled-on-first-visit bug this file already carries several notes about.

   The read path reuses the editor's class names so the whole type scale applies
   unchanged. Only three things genuinely differ: a <textarea> preserves newlines
   where a block element collapses them, an input is display:inline-block where a
   <span> is inline, and the editor's hover/caret affordances are lies on a
   surface nobody can edit. */
.docblk-ro { white-space: pre-wrap; overflow-wrap: anywhere; cursor: default; }
.docblk-ro:hover { background: none; }
span.docblk-ro, div.docblk-ro, pre.docblk-ro, figcaption.docblk-ro { display: block; }
/* The editor scopes these to `input`; give the read-only cell the same reach so
   it keeps its editable twin's geometry instead of collapsing the grid. */
.docblk-table .docblk-ro { width: 100%; min-width: 80px; padding: var(--space-inline); font-size: var(--t-label-size); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.docblk-table .docblk-ro.th { font-weight: 600; color: var(--ink-2); }
.docblk-list-hcell .docblk-ro { flex: 1; min-width: 0; font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.docblk-list-row .docblk-list-checkcol { display: grid; place-items: center; color: var(--ink-3); font-size: var(--t-label-size); }
.docblk-tag .docblk-ro { display: inline; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); }
/* Compound selectors, not a bare `.docblk-ro-emoji`: the editor's emoji rules
   are single-class, so a single-class override would lose the cascade race. */
.docblk-banner-emoji.docblk-ro-emoji,
.docblk-callout-emoji.docblk-ro-emoji { background: none; cursor: default; padding: 0; }
/* <details>/<summary> gives the toggle real keyboard + screen-reader semantics
   for free; the native marker is replaced by the same caret the editor draws. */
.docblk-toggle .docblk-ro-summary { list-style: none; cursor: pointer; }
.docblk-toggle .docblk-ro-summary::-webkit-details-marker { display: none; }
.docblk-toggle .docblk-ro-summary::before { content: '\25B8'; color: var(--ink-3); flex-shrink: 0; padding-top: var(--space-tight); transition: transform var(--dur-micro) var(--ease); }
.docblk-toggle[open] .docblk-ro-summary::before { transform: rotate(90deg); }

/* code card */
.docblk-code { background: #1c1c20; border-radius: var(--r-md); overflow: hidden; margin: var(--space-inline) 0; }
.docblk-code-bar { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-bottom: 1px solid rgba(255,255,255,.07); }
.docblk-code-dots { display: flex; gap: var(--space-tight); }
.docblk-code-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.docblk-code-lang { font-size: var(--t-micro-size); color: rgba(255,255,255,.5); font-family: var(--font-mono); margin-left: var(--space-tight); }
.docblk-code-copy { margin-left: auto; border: none; background: none; color: rgba(255,255,255,.5); cursor: pointer; display: grid; place-items: center; padding: var(--space-tight); border-radius: 5px; }
.docblk-code-copy:hover { background: rgba(255,255,255,.1); color: #fff; }
.docblk.code-area { color: #e6e6e6; font-family: var(--font-mono); font-size: var(--t-label-size); line-height: 1.6; padding: var(--space-item) var(--space-item); }
.docblk.code-area::placeholder { color: rgba(255,255,255,.3); }

/* image */
.docblk-image { position: relative; margin: var(--space-inline) 0; }
.docblk-image img { width: 100%; border-radius: var(--r-md); display: block; }
.docblk-cap { width: 100%; border: none; background: none; outline: none; font-size: var(--t-caption-size); color: var(--ink-3); text-align: center; padding: var(--space-inline) 0 2px; font-style: italic; }
.docblk-img-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: var(--r-control); background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s; }
.docblk-image:hover .docblk-img-x, .docblk-card-wrap:hover .docblk-img-x, .docblk-embed:hover .docblk-img-x { opacity: 1; }
.docblk-img-x.floating { top: 8px; right: 8px; }
.docblk-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); width: 100%; padding: var(--space-block); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); cursor: pointer; border: none; margin: var(--space-inline) 0; transition: background .14s; }
.docblk-placeholder:hover { background: var(--bg-active); color: var(--ink-2); }
.docblk-ph-sub { font-size: var(--t-micro-size); color: var(--ink-4); }

/* bookmark / embed / url entry */
.docblk-card-wrap { position: relative; margin: var(--space-inline) 0; }
.docblk-urlentry { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); background: var(--surface-2); border-radius: var(--r-md); margin: var(--space-inline) 0; }
.docblk-urlentry input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); }
.docblk-embed { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); margin: var(--space-inline) 0; box-shadow: inset 0 0 0 1px var(--border); }
.docblk-embed-hero { height: 130px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; }
.docblk-embed-mono { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 600; opacity: .9; }
.docblk-embed-chip { position: absolute; bottom: 10px; left: 12px; display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; background: rgba(0,0,0,.3); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.docblk-embed-bar { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); }
.docblk-embed-title { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* button block */
.docblk-buttonwrap { margin: var(--space-inline) 0; display: flex; flex-direction: column; gap: var(--space-tight); align-items: flex-start; }
.docblk-button { display: inline-flex; align-items: center; gap: var(--space-inline); background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-sm); padding: var(--space-inline) var(--space-group); cursor: pointer; font-weight: 600; }
.docblk-button-label { border: none; background: none; color: inherit; font: inherit; font-weight: 600; outline: none; width: auto; min-width: 60px; text-align: center; }
.docblk-button-url { border: none; background: none; outline: none; font-size: var(--t-micro-size); color: var(--ink-4); }

/* table */
.docblk-table-wrap { margin: var(--space-inline) 0; overflow-x: auto; }
.docblk-table { border-collapse: collapse; width: 100%; }
.docblk-table td { padding: 0; }
.docblk-table input { width: 100%; min-width: 80px; border: none; outline: none; background: none; padding: var(--space-inline) var(--space-inline); font-size: var(--t-label-size); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.docblk-table input:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.docblk-table input.th, .docblk-table input::placeholder { font-weight: 600; color: var(--ink-2); }
.docblk-table-tools { display: flex; gap: var(--space-tight); margin-top: var(--space-tight); }
.docblk-table-tools button { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); background: var(--surface-2); border: none; border-radius: 6px; padding: var(--space-tight) var(--space-inline); cursor: pointer; }
.docblk-table-tools button:hover { background: var(--bg-active); color: var(--ink); }

/* ── Production blocks: clean hairline row-lists (list · schedule · infogrid) ── */
.docblk-list, .docblk-sched, .docblk-infogrid { margin: var(--space-inline) 0; }
.docblk-list-hd { display: flex; align-items: center; gap: var(--space-inline); padding: 0 0 var(--space-tight); border-bottom: 1px solid var(--border); }
.docblk-list-hcell { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-tight); }
.docblk-list-hcell input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.docblk-list-colx { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 2px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.docblk-list-hcell:hover .docblk-list-colx { opacity: 1; }
.docblk-list-checkcol { width: 20px; flex-shrink: 0; }
.docblk-list-addcol { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: var(--space-tight); border-radius: 5px; flex-shrink: 0; }
.docblk-list-addcol:hover { background: var(--bg-hover); color: var(--accent); }
.docblk-list-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.docblk-list-row .tcheck { flex-shrink: 0; }
.docblk-list-cell { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); padding: 2px 0; }
.docblk-list-cell::placeholder { color: var(--ink-4); font-weight: 400; text-transform: none; letter-spacing: 0; }
.docblk-list-cell.done { color: var(--ink-4); text-decoration: line-through; }
.docblk-list-rowx { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: var(--space-tight); border-radius: 5px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.docblk-list-row:hover .docblk-list-rowx { opacity: 1; }
.docblk-list-rowx:hover { color: var(--st-blocked); }
.docblk-list-add { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--ink-4); font-size: var(--t-caption-size); cursor: pointer; padding: var(--space-inline) 2px 2px; border-radius: 6px; }
.docblk-list-add:hover { color: var(--accent); }

.docblk-sched-hd { display: flex; gap: var(--space-inline); padding: 0 0 var(--space-tight); border-bottom: 1px solid var(--border); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.docblk-sched-hd .w-time { width: 84px; flex-shrink: 0; }
.docblk-sched-hd .w-item { flex: 1.3; }
.docblk-sched-hd .w-owner { width: 120px; flex-shrink: 0; }
.docblk-sched-hd .w-notes { flex: 1; }
.docblk-sched-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.docblk-sched-time { width: 84px; flex-shrink: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.docblk-sched-item { flex: 1.3; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); }
.docblk-sched-owner { width: 120px; flex-shrink: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink-2); }
.docblk-sched-notes { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink-3); }
.docblk-sched-time::placeholder, .docblk-sched-item::placeholder, .docblk-sched-owner::placeholder, .docblk-sched-notes::placeholder { color: var(--ink-4); }

.docblk-infogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-item) 20px; }
.docblk-infocell { position: relative; }
.docblk-infocell-label { width: 100%; border: none; background: none; outline: none; font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-tight); display: block; }
.docblk-infocell-value { width: 100%; border: none; background: none; outline: none; font-size: var(--t-body-size); color: var(--ink); padding: 1px 0; }
.docblk-infocell-x { position: absolute; top: -2px; right: -2px; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: var(--space-tight); border-radius: 5px; opacity: 0; transition: opacity .12s; }
.docblk-infocell:hover .docblk-infocell-x { opacity: 1; }
.docblk-infocell-add { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--ink-4); font-size: var(--t-caption-size); cursor: pointer; padding: var(--space-tight) 2px; border-radius: 6px; justify-self: start; }
.docblk-infocell-add:hover { color: var(--accent); }

/* mini template-preview renderings */
.dm-list { display: flex; flex-direction: column; gap: var(--space-tight); margin: var(--space-tight) 0; }
.dm-list-row { display: flex; gap: var(--space-tight); }
.dm-list-row i { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.dm-sched { display: flex; flex-direction: column; gap: var(--space-tight); margin: var(--space-tight) 0; }
.dm-sched-row { display: flex; align-items: center; gap: var(--space-tight); }
.dm-sched-row em { width: 22px; height: 5px; border-radius: 3px; background: var(--ink-4); flex-shrink: 0; }
.dm-infogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-tight) var(--space-inline); margin: var(--space-tight) 0; }
.dm-infocell { display: flex; flex-direction: column; gap: var(--space-tight); }

.doc-addblock { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-tight); padding: var(--space-inline) var(--space-tight); width: 100%; border: none; background: none; color: var(--ink-4); font-size: var(--t-body-size); cursor: pointer; border-radius: 6px; transition: background .12s; }
.doc-addblock:hover { background: var(--bg-hover); color: var(--ink-2); }
.doc-addblock-hint { font-size: var(--t-micro-size); color: var(--ink-4); margin-left: 2px; }

/* ============================================================
   Strut-style writing experience
   ============================================================ */
/* Clean, Notion-style writing surface: the document sits FLUSH on the app
   page (no cream canvas, no floating paper card, no border/shadow/radius). */
.doc-editor { background-color: var(--bg); min-height: 100%; transition: background-color .2s; }
.dark .doc-editor { background-color: var(--bg); }
.doc-editor .doc-wrap { font-size: var(--t-heading-size); background: transparent; border: none; border-radius: 0; padding: 28px 56px 80px; box-shadow: none; margin-top: 0; }
.dark .doc-editor .doc-wrap { background: transparent; }
.doc-shell.focus .doc-wrap { padding: var(--space-block) 48px 80px; }
.doc-editor .blk-row { transition: opacity var(--dur-over) var(--ease); }
/* Doc / PDF editor chrome — Composer Icon Toolbar (bare glyphs, no border / permanent fill) */
.doc-topbar .doc-top-actions,
.pdfm-topbar .pdfm-top-actions { gap: 2px; align-items: center; }
.doc-topbar .doc-kbd { font-size: var(--t-micro-size); padding: 1px var(--space-tight); border-radius: 5px; background: var(--bg-active); color: var(--ink-3); margin-left: var(--space-tight); letter-spacing: .02em; }
.doc-tool,
.btn.icon.doc-tool,
.btn.icon.ghost.doc-tool {
  width: 34px; height: 34px; padding: 0;
  display: inline-grid; place-items: center;
  border: none; background: transparent; box-shadow: none;
  border-radius: var(--r-control); color: var(--ink-3);
  cursor: pointer; position: relative;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
  font: inherit;
}
.doc-tool:hover,
.btn.icon.doc-tool:hover { background: var(--bg-hover); color: var(--accent); }
.doc-tool.on,
.btn.icon.doc-tool.on { background: var(--bg-hover); color: var(--accent); border: none; }
.doc-tool:disabled { opacity: .45; pointer-events: none; }
.doc-tool-lbl {
  width: auto; height: 34px; padding: 0 var(--space-inline);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline);
  font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.doc-tool-lbl:hover { color: var(--accent); }
.doc-btn-n,
.doc-tool .pdfm-action-count { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }

/* deep focus */
.doc-editor.focus .doc-topbar { display: none; }
.doc-editor.focus .blk-handle, .doc-editor.focus .blk-annot, .doc-editor.focus .doc-addblock { opacity: 0 !important; pointer-events: none; }
.doc-editor.focus .doc-wrap { padding-bottom: 42vh; }
.doc-shell.focus .doc-wrap { max-width: 680px; }
.blk-row.dimmed { opacity: .26; }
.doc-editor.focus:hover .blk-row.dimmed { opacity: .4; }
.doc-focus-exit { position: fixed; top: 16px; right: 20px; z-index: 45; display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border: none; border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; box-shadow: var(--shadow-sm); cursor: pointer; transition: background .14s, color .14s; }
.doc-focus-exit:hover { color: var(--ink); background: var(--bg-hover); }

/* AI collaborator panel */
.doc-side { width: 340px; flex-shrink: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); display: flex; flex-direction: column; position: sticky; top: 12px; max-height: calc(100vh - 120px); }
.doc-side-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.doc-aria-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.doc-aria-dot.sm { width: 22px; height: 22px; }
.doc-aria-tag { font-size: var(--t-micro-size); color: var(--ink-3); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; }
.doc-aichat-body { flex: 1; overflow-y: auto; padding: var(--space-item); display: flex; flex-direction: column; gap: var(--space-item); }
.doc-msg { display: flex; gap: var(--space-inline); align-items: flex-start; }
.doc-msg.me { justify-content: flex-end; }
.doc-msg-bub { font-size: var(--t-label-size); line-height: 1.55; padding: var(--space-inline) var(--space-item); border-radius: var(--r-card); max-width: 84%; white-space: pre-wrap; }
.doc-msg.ai .doc-msg-bub { background: var(--bg-active); color: var(--ink); border-top-left-radius: 4px; }
.doc-msg.me .doc-msg-bub { background: var(--accent); color: var(--accent-fg); border-top-right-radius: 4px; }
.doc-typing { display: inline-flex; gap: var(--space-tight); padding: 2px 0; }
.doc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); animation: docblink 1.2s infinite; }
.doc-typing i:nth-child(2){ animation-delay: .2s; } .doc-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes docblink { 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-2px);} }
.doc-aichat-quick { display: flex; flex-wrap: wrap; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border-top: 1px solid var(--border-subtle); }
.doc-quickchip { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 500; cursor: pointer; transition: all .12s; }
.doc-quickchip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.doc-quickchip:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.doc-aichat-compose { display: flex; gap: var(--space-inline); padding: var(--space-item); border-top: 1px solid var(--border-subtle); align-items: flex-end; }
.doc-aichat-compose textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-inline) var(--space-item); font: inherit; font-size: var(--t-label-size); line-height: 1.45; background: var(--surface-2); color: var(--ink); max-height: 120px; outline: none; }
.doc-aichat-compose textarea:focus { border-color: var(--accent); }

/* ⌘K writing palette */
.docpal-scrim { position: fixed; inset: 0; background: var(--modal-scrim-bg); backdrop-filter: var(--modal-scrim-blur); -webkit-backdrop-filter: var(--modal-scrim-blur); z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fade var(--dur-micro) var(--ease); }
.docpal { width: 560px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--modal-rim); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); overflow: hidden; animation: drawerPop var(--dur-over) var(--ease); }
.docpal-input { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-group) var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.docpal-input input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-strong-size); color: var(--ink); }
.docpal-input input::placeholder { color: var(--ink-4); }
.docpal-spark { color: var(--accent); display: grid; place-items: center; width: 18px; }
.docpal-kbd { font-size: var(--t-micro-size); color: var(--ink-4); border: 1px solid var(--border); border-radius: 5px; padding: 2px var(--space-tight); }
.docpal-body { max-height: 366px; overflow-y: auto; padding: var(--space-inline); }
.docpal-target { font-size: var(--t-micro-size); color: var(--ink-3); padding: var(--space-tight) var(--space-item) var(--space-inline); }
.docpal-target span { color: var(--ink-2); font-style: italic; }
.docpal-empty { padding: var(--space-block); text-align: center; color: var(--ink-4); font-size: var(--t-label-size); }
.docpal-item { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-item); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; color: var(--ink); }
.docpal-item.on { background: var(--bg-hover); }
.docpal-item:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.docpal-ic { width: 30px; height: 30px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.docpal-label { display: block; font-size: var(--t-label-size); font-weight: 500; }
.docpal-hint { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.docpal-go { color: var(--ink-4); opacity: 0; flex-shrink: 0; }
.docpal-item.on .docpal-go { opacity: 1; }

/* inline AI toolbar */
.inline-ai { position: fixed; z-index: 130; display: flex; align-items: center; gap: 1px; flex-wrap: wrap; padding: var(--space-tight); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-control); box-shadow: var(--shadow-pop); }
.inline-ai-spark { color: var(--accent); padding: 0 var(--space-tight); display: grid; place-items: center; }
.inline-ai-btn { border: none; background: none; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-tight); white-space: nowrap; }
.inline-ai-btn:hover { background: var(--bg-hover); color: var(--ink); }
.inline-ai-back { border: none; background: none; cursor: pointer; color: var(--ink-3); padding: var(--space-tight); display: grid; place-items: center; }
.inline-ai-busy { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-item); font-size: var(--t-caption-size); color: var(--ink-2); }
.inline-ai-group { position: relative; display: inline-flex; align-items: center; }
.inline-ai-format { display: inline-flex; align-items: center; gap: var(--space-tight); height: 32px; padding: 0 var(--space-item); border: none; background: var(--bg-sunken); border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.inline-ai-format:hover { background: var(--bg-hover); }
.inline-ai-format-k { max-width: 154px; overflow: hidden; text-overflow: ellipsis; }
.inline-ai-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border-subtle); margin: 0 var(--space-tight); }
.inline-ai-pop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; max-height: min(420px, 60vh); overflow: auto; padding: var(--space-tight); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
.inline-ai-pop-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); text-align: left; font: inherit; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); cursor: pointer; }
.inline-ai-pop-item:hover { background: var(--bg-hover); }
.inline-ai-pop-item.on { background: var(--bg-active); }
.nbk-smartmenu { z-index: 140; }
.nbk-smartmenu-swatches { display: inline-flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-tight); }

/* stage board */
.docbd-board { display: flex; gap: var(--space-item); align-items: flex-start; overflow-x: auto; padding-bottom: var(--space-inline); }
.docbd-col { flex: 1; min-width: 224px; background: var(--bg-sidebar); border-radius: var(--r-lg); padding: var(--space-item) var(--space-inline); display: flex; flex-direction: column; }
.docbd-colhd { margin-bottom: var(--space-inline); padding: 2px 2px 2px var(--space-tight); }
.docbd-coltitle { font-weight: 600; font-size: var(--t-label-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.docbd-list { display: flex; flex-direction: column; gap: var(--space-inline); min-height: 8px; }
.docbd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-item); cursor: grab; box-shadow: var(--shadow-xs); user-select: none; transition: border-color .14s, box-shadow .14s; }
.docbd-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.docbd-title { font-weight: 600; font-size: var(--t-label-size); line-height: 1.35; margin-bottom: var(--space-inline); }
.docbd-meta { display: flex; align-items: center; gap: var(--space-inline); }
.docbd-cm { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); }
.docbd-ph { border: 2px dashed var(--accent); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 6%, transparent); box-sizing: border-box; flex-shrink: 0; }
.docbd-empty { padding: var(--space-group) var(--space-item); text-align: center; color: var(--ink-4); font-size: var(--t-caption-size); border: 1px dashed var(--border); border-radius: var(--r-md); }
.docbd-clone { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; transform: rotate(1.5deg); }
.docbd-clone .docbd-card { box-shadow: var(--shadow-pop); }

/* writing inbox */
.docinbox { max-width: 800px; }
.docinbox-capture { display: flex; align-items: center; gap: var(--space-inline); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-inline) var(--space-item); box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.docinbox-cap-ic { color: var(--accent); display: grid; place-items: center; }
.docinbox-capture input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-body-size); color: var(--ink); }
.docinbox-capture input::placeholder { color: var(--ink-4); }
.docinbox-day { margin-bottom: var(--space-group); }
.docinbox-daylabel { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-inline); }
.docinbox-dayn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); letter-spacing: 0; }
.docinbox-items { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.docinbox-item { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; }
.docinbox-item:last-child { border-bottom: none; }
.docinbox-item:hover { background: var(--bg-hover); }
.docinbox-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.docinbox-title { font-size: var(--t-label-size); font-weight: 550; }
.docinbox-prev { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.docinbox-stage { font-size: var(--t-micro-size); color: var(--ink-3); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; white-space: nowrap; }
.docinbox-time { font-size: var(--t-micro-size); color: var(--ink-4); min-width: 56px; text-align: right; }

/* ============================================================
   Activity log
   ============================================================ */
.act-screen { max-width: 1320px; }
.act-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--space-section); align-items: start; }
@media (max-width: 1080px){ .act-layout { grid-template-columns: 1fr; } .act-rail-side { display: none; } }
.act-col { min-width: 0; }
.act-head-row { margin-bottom: var(--space-group); gap: var(--space-item); flex-wrap: wrap; }
.act-title { font-size: var(--t-title-size); }
.act-live { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--accent); }
.act-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: relative; }
.act-live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: .5; animation: actpulse 1.8s ease-out infinite; }
@keyframes actpulse { 0%{ transform: scale(.6); opacity:.6;} 100%{ transform: scale(1.5); opacity:0;} }
.act-unread-pill { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.act-search { display: flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); width: 200px; transition: border-color .14s; }
.act-search:focus-within { border-color: var(--accent); }
.act-search input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); min-width: 0; }
.act-search input:focus { outline: none; box-shadow: none; }
.act-stack-toggle { display: inline-flex; align-items: center; gap: var(--space-tight); height: 34px; padding: 0 var(--space-inline); border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.act-stack-toggle:hover { background: var(--bg-hover); color: var(--ink); }
.act-stack-toggle.on { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); color: var(--accent); }

/* What Changed: bounded durable facts, presented as calm collection rows. */
.act-changes { margin: var(--space-group) 0 20px; padding: 0 2px var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.act-changes-head { display: flex; align-items: flex-start; gap: var(--space-item); margin-bottom: var(--space-tight); }
.act-changes-head > div { flex: 1; min-width: 0; }
.act-changes-head h2 { margin: 0; color: var(--ink); font-size: var(--t-label-size); font-weight: 700; }
.act-changes-head p { margin: 2px 0 0; color: var(--ink-4); font-size: var(--t-caption-size); }
.act-changes-head > button, .act-change-state button { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; padding: var(--space-tight) var(--space-tight); }
.act-changes-head > button:hover, .act-change-state button:hover { text-decoration: underline; }
.act-change-list { display: flex; flex-direction: column; }
.act-change-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.act-change-row + .act-change-row { border-top: 1px solid var(--border-subtle); }
.act-change-row:hover { background: var(--bg-hover); }
.act-change-icon { width: 26px; height: 26px; display: grid; place-items: center; flex: none; color: var(--ink-3); }
.act-change-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
.act-change-copy b { overflow: hidden; color: var(--ink); font-size: var(--t-label-size); font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.act-change-copy small { overflow: hidden; color: var(--ink-3); font-size: var(--t-micro-size); text-overflow: ellipsis; white-space: nowrap; }
.act-change-row time { flex: none; color: var(--ink-4); font-size: var(--t-micro-size); }
.act-change-row > svg { flex: none; color: var(--ink-4); }
.act-change-state { display: flex; align-items: center; gap: var(--space-inline); min-height: 42px; padding: var(--space-inline) var(--space-tight); color: var(--ink-3); font-size: var(--t-caption-size); }
.act-change-state button { margin-left: auto; }
@media (max-width: 640px) { .act-change-row time { display: none; } }

/* Command Strip — tabs + scope + unread */
.act-cmd { display: flex; align-items: center; gap: var(--space-item); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-group); flex-wrap: wrap; }
.act-cmd-end { display: flex; align-items: center; gap: var(--space-item); flex-shrink: 0; margin-left: auto; padding-bottom: var(--space-inline); }
.act-tabrow { display: flex; align-items: center; gap: var(--space-item); border-bottom: 1px solid var(--border); margin-bottom: var(--space-group); }
.act-tabrow .act-unread-toggle { flex-shrink: 0; padding-bottom: var(--space-inline); }
.act-tabs { display: flex; align-items: center; gap: 2px; padding-bottom: 0; min-width: 0; flex: 1 0 max-content; max-width: 100%; overflow-x: auto; }
.act-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-tight); min-width: max-content; flex-shrink: 0; padding: var(--space-inline) var(--space-inline); border: none; background: none; color: var(--ink-3); font-size: var(--t-label-size); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s; white-space: nowrap; }
.act-tab:hover { color: var(--ink); }
.act-tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.act-tab-n { min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.act-tab:not(.on) .act-tab-n { background: var(--bg-active); color: var(--ink-3); }
.act-unread-toggle { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-3); border: none; background: none; cursor: pointer; }
.act-unread-toggle.on { color: var(--accent); }
/* .act-toggle-track / -knob render through the shared switch skin (small). */

.act-scope { display: flex; justify-content: center; margin-bottom: var(--space-item); }
.act-scope-pill, .act-scope-btn { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.act-scope-pill:hover, .act-scope-btn:hover { background: var(--bg-hover); color: var(--ink); }
.act-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); margin-bottom: var(--space-group); }
.act-filterbar b { color: var(--ink); }
.act-fb-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); background: var(--bg-sunken); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.act-fb-chip button { border: none; background: none; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; padding: 2px; border-radius: 50%; }
.act-fb-chip button:hover { background: var(--bg-active); color: var(--ink); }
.act-proj-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.act-proj-dot.lg { width: 18px; height: 18px; margin: 0 var(--space-tight); }
.act-client-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; color: var(--ink-3); }

.act-daysep { display: flex; align-items: center; gap: var(--space-item); margin: var(--space-inline) 0 var(--space-item); color: var(--ink-4); }
.act-daysep::before, .act-daysep::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.act-daysep span { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.act-list { display: flex; flex-direction: column; gap: var(--space-item); }
.act-loadmore { display: flex; align-items: center; justify-content: center; gap: var(--space-inline); width: 100%; margin-top: var(--space-group); padding: var(--space-item); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.act-loadmore:hover { background: var(--bg-hover); color: var(--ink); }
.act-loadmore-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.act-empty { padding: 56px 20px; text-align: center; color: var(--ink-3); }

/* timeline item — Activity Ribbon (bare glyphs, borderless rows) */
.act-item { display: flex; gap: var(--space-item); position: relative; }
.act-rail { width: 28px; flex-shrink: 0; position: relative; }
.act-rail::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: -14px; width: 1px; background: var(--border-subtle); }
.act-item.last .act-rail::before { display: none; }
.act-node { width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; position: relative; z-index: 1; background: var(--bg); box-shadow: none; color: var(--ink-3); }
.dark .act-node { box-shadow: none; background: var(--bg); }
.act-main { flex: 1; min-width: 0; padding-bottom: 2px; }
.act-head { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; position: relative; }
.act-sys-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent; }
.act-head-tx { flex: 1 1 auto; min-width: 0; font-size: var(--t-body-size); color: var(--ink-2); line-height: 1.5; }
.act-head-tx b { color: var(--ink); font-weight: 600; }
.act-you { color: var(--accent) !important; font-weight: 600; }
.act-item.unread .act-head-tx::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: var(--space-inline); vertical-align: middle; }
.act-time-inline { display: inline-flex; align-items: center; gap: var(--space-tight); margin-left: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-4); font-weight: 400; white-space: nowrap; }
.act-dot { color: var(--ink-4); }
.act-item.unread .act-time-inline { color: var(--ink-2); font-weight: 600; }
.act-saved { color: var(--c-gold); flex-shrink: 0; }
.act-src { color: var(--ink-2) !important; font-weight: 600; }
.act-hover-acts { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.act-main:hover .act-hover-acts, .act-hover-acts:focus-within { opacity: 1; transform: translateX(0); pointer-events: auto; }
.act-hover-acts button { width: 28px; height: 28px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; transition: color .12s, background .12s; }
.act-hover-acts button:hover { background: var(--bg-hover); color: var(--ink); }
.act-hover-acts button.on { color: var(--accent); }
.act-hover-acts button[data-tip] { position: relative; }
.act-hover-acts button[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md); }
.act-hover-acts button[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ink); opacity: 0; transition: opacity var(--dur-micro) var(--ease); z-index: 20; }
.act-hover-acts button[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.act-hover-acts button[data-tip]:hover::before { opacity: 1; }
@keyframes actReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes actNodeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* `backwards`, NOT `opacity:0` + `forwards`. A filling animation keeps its
     final keyframe applied forever, and because actReveal animates `transform`
     the row's computed transform stays a matrix instead of `none` — which makes
     EVERY row a permanent stacking context. That trapped the image hover
     preview (.act-image-hover, z-index 40) inside its own row, so rows later in
     the DOM painted on top of it and the preview appeared to slide underneath
     them. With `backwards` the from-keyframe covers the delay and the row
     reverts to its natural style once the animation ends, so no stacking
     context survives. This is the pattern .act-node below already used. */
  .act-list .act-item { animation: actReveal var(--dur-over) var(--ease) backwards; animation-delay: calc(var(--ai, 0) * 36ms); }
  .act-list .act-item .act-node { animation: actNodeIn var(--dur-over) var(--ease) backwards; animation-delay: calc(var(--ai, 0) * 36ms + 30ms); }
  /* Belt and braces: while a row IS still animating it is a stacking context,
     so lift the hovered/focused row above its siblings. Low value on purpose,
     it must stay far below chrome, popovers and modals. */
  .act-list .act-item:hover, .act-list .act-item:focus-within { z-index: 3; }
}
.act-main { border-radius: var(--r-control); margin: -4px -8px; padding: var(--space-tight) var(--space-inline); transition: background var(--dur-micro) var(--ease); }
.act-main:hover { background: var(--bg-hover); transform: none; }
.act-node { transition: color var(--dur-micro) var(--ease); }
.act-item:hover .act-node { transform: none; box-shadow: none; }
.act-hover-acts button { transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); border-radius: var(--r-control); }
.act-hover-acts button:hover { background: var(--bg-sunken); }
.act-hover-acts button:active { transform: none; }
.act-item.unread .act-node { box-shadow: none; color: var(--accent); }

.act-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 22px; padding: 0 var(--space-inline); border: none; border-radius: 6px; background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer; vertical-align: middle; transition: background .12s, color .12s; }
.act-chip:hover { color: var(--ink); background: var(--bg-active); }
.act-chip-x { color: var(--ink-4); margin-left: 1px; flex-shrink: 0; }
.act-chip span { white-space: nowrap; }

.act-quote { background: var(--bg-sunken); border: none; border-radius: var(--r-control); padding: var(--space-item) var(--space-item); margin-top: var(--space-inline); }
.act-quote p { margin: 0; font-size: var(--t-body-size); line-height: 1.6; color: var(--ink); }
.act-voice { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); padding: var(--space-inline) var(--space-item); background: var(--bg-sunken); border: none; border-radius: 999px; max-width: 320px; }
.act-voice-play { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.act-voice-wave { display: flex; align-items: center; gap: 2px; flex: 1; height: 24px; }
.act-voice-wave i { flex: 1; background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2px; min-width: 2px; }
.act-voice-time { font-size: var(--t-micro-size); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.act-actions { display: flex; gap: var(--space-inline); margin-top: var(--space-inline); }
.act-decided { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.act-decided.approved { color: var(--st-done); background: var(--st-done-soft); }
.act-decided.denied { color: var(--st-blocked); background: var(--st-blocked-soft); }
.act-decided.changes { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }

.act-appr { margin-top: var(--space-inline); }
.act-appr-note { font-size: var(--t-label-size); color: var(--ink-2); margin: 0 0 var(--space-inline); line-height: 1.5; max-width: 460px; }
.act-appr-files { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-bottom: var(--space-item); }
.act-appr-file { display: inline-flex; align-items: center; gap: var(--space-inline); max-width: 230px; padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border: none; background: var(--bg-sunken); border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); cursor: pointer; transition: background .14s; }
.act-appr-file:hover { background: var(--bg-active); }
.act-appr-file-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.act-appr-file .clamp1 { min-width: 0; }

.act-events { display: flex; flex-direction: column; gap: var(--space-inline); margin-top: var(--space-inline); }
.act-event { position: relative; display: flex; align-items: center; gap: var(--space-item); background: transparent; border: none; border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); cursor: pointer; box-shadow: none; transition: background .14s; }
.act-event:hover { background: var(--bg-hover); box-shadow: none; }
.act-event-date { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-control); background: var(--bg-sunken); flex-shrink: 0; line-height: 1; }
.act-event-date em { font-size: 8.5px; font-weight: 700; color: var(--c-clay); text-transform: uppercase; letter-spacing: .04em; font-style: normal; }
.act-event-date b { font-size: var(--t-heading-size); font-weight: 600; color: var(--ink); margin-top: 2px; }
.act-event-title { font-size: var(--t-label-size); font-weight: 600; }
.act-event-time { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.act-event-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 250px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-item); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s; z-index: 30; }
.act-event:hover .act-event-pop { opacity: 1; visibility: visible; transform: none; }
.act-event-pop-title { font-size: var(--t-label-size); font-weight: 600; margin-bottom: var(--space-inline); }
.act-event-pop-row { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); margin-bottom: var(--space-tight); }
.act-event-pop-people { display: flex; flex-direction: column; gap: var(--space-tight); margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.act-event-pop-people span { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); }

.act-file { display: flex; align-items: center; gap: var(--space-item); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); background: var(--bg-sunken); border: none; border-radius: var(--r-control); max-width: 420px; }
.act-image-attachment { position: relative; display: inline-flex; flex: 0 0 auto; align-self: stretch; align-items: center; }
.act-image-thumb { width: 42px; min-height: 42px; height: 42px; padding: 0; border: none; border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.act-image-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.act-image-hover { position: absolute; z-index: 40; left: -10px; top: calc(100% + 9px); width: max-content; max-width: min(360px, calc(100vw - 48px)); padding: var(--space-inline); background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), visibility 0s linear .18s; }
.act-image-attachment:hover .act-image-hover, .act-image-attachment:focus-within .act-image-hover { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.act-image-hover img { display: block; width: auto; height: auto; max-width: 340px; max-height: 360px; object-fit: contain; border-radius: var(--r-control); }
.act-image-hover-label { display: flex; align-items: center; gap: var(--space-tight); max-width: 340px; margin: var(--space-inline) 2px 1px; color: var(--ink-2); font-size: var(--t-micro-size); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-attachment-link { display: inline-flex; align-items: center; gap: var(--space-tight); max-width: 190px; padding: 0; border: none; background: none; color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); cursor: pointer; }
.act-attachment-link:hover { color: var(--accent); }
.act-image-attachment + .grow { min-width: 0; }
.act-file-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.act-file-t { font-size: var(--t-label-size); font-weight: 600; }
.act-file-s { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.act-file-name { color: var(--accent); font-weight: 600; }
.act-file-btn { width: 30px; height: 30px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.act-file-btn:hover { background: var(--bg-hover); color: var(--ink); }

.act-status { display: inline-flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); }
.act-spill { font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

.act-task { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); background: var(--bg-sunken); border: none; border-radius: var(--r-control); cursor: pointer; max-width: 440px; transition: background .14s; }
.act-task:hover { background: var(--bg-active); border-color: transparent; }
.act-task-ic { width: auto; height: auto; border-radius: 0; background: transparent !important; color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.act-task-t { font-size: var(--t-label-size); font-weight: 600; }
.act-task-due { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); flex-shrink: 0; }

.act-thread { margin-top: var(--space-inline); display: flex; flex-direction: column; gap: var(--space-item); }
.act-comment { display: flex; gap: var(--space-inline); }
.act-comment-name { font-size: var(--t-label-size); font-weight: 600; margin-bottom: 2px; }
.act-comment-tx { margin: 0; font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); }
.act-thread-view { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: 0; }

.act-foot { display: flex; align-items: center; gap: var(--space-item); margin-top: var(--space-item); flex-wrap: wrap; }
.act-reacts { display: flex; align-items: center; gap: var(--space-tight); }
.act-react { display: inline-flex; align-items: center; gap: var(--space-tight); height: 26px; padding: 0 var(--space-inline); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: var(--t-caption-size); transition: all .12s; }
.act-react b { font-weight: 600; color: var(--ink-2); }
.act-react.mine { border-color: var(--accent); background: var(--accent-soft); }
.act-react.mine b { color: var(--accent); }
.act-react:hover { border-color: var(--border-strong); }
.act-react.add { color: var(--ink-4); padding: 0 var(--space-inline); }
.act-replied { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-tight); margin-top: var(--space-inline); max-width: 480px; width: 100%; }
.act-replies { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; padding: 0; }
.act-replies:hover, .act-replies.on { color: var(--ink); }
.act-replies-chev { opacity: .55; }
.act-replied-snip { display: flex; align-items: center; gap: var(--space-inline); max-width: 440px; width: 100%; border: none; background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); cursor: pointer; text-align: left; transition: background .12s; }
.act-replied-snip:hover { background: var(--bg-active); }
.act-replied-tx { font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.4; min-width: 0; }
.act-mini-thread { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 2px 0 0; }
.act-mini-row { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-inline) 2px; border-top: 1px solid var(--border-subtle); }
.act-mini-row:first-child { border-top: none; padding-top: var(--space-tight); }
.act-mini-body { flex: 1; min-width: 0; }
.act-mini-hd { display: flex; align-items: baseline; gap: var(--space-inline); margin-bottom: 2px; }
.act-mini-hd b { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.act-mini-hd .muted { font-size: var(--t-micro-size); }
.act-mini-tx { font-size: var(--t-label-size); line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.act-mini-acts { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) 2px 2px; }
.act-mini-act { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; padding: 0; }
.act-mini-act:hover { color: var(--accent); }
.act-reply-box { display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-item); }
.act-reply-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.act-reply-box input { flex: 1; width: 100%; height: 36px; border: 1px solid var(--border); border-radius: var(--r-control); padding: 0 var(--space-item); font-size: var(--t-label-size); background: var(--surface); color: var(--ink); outline: none; box-shadow: none; }
.act-reply-box input:focus { border-color: var(--accent); outline: none; box-shadow: none; }
.act-reply-col .create-summary { margin-top: 2px; padding-left: 2px; }

.act-rail-side { display: flex; flex-direction: column; gap: 0; position: sticky; top: 12px; }
.act-side-card { background: none; border: none; border-radius: 0; padding: 0 0 var(--space-group); box-shadow: none; }
.act-side-card + .act-side-card { margin-top: 0; padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.act-side-stats { display: grid; grid-template-columns: repeat(3,minmax(0, 1fr)); gap: var(--space-inline); }
.act-stat { text-align: center; }
.act-stat-btn { border: none; background: none; cursor: pointer; font: inherit; padding: var(--space-tight) 0; border-radius: var(--r-control); transition: background .14s; }
.act-stat-btn:hover { background: var(--bg-hover); }
.act-stat b { display: block; font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 460; color: var(--ink); line-height: 1; }
.act-stat span { font-size: var(--t-micro-size); color: var(--ink-3); }
.act-side-hd { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-inline); }
.act-side-empty { font-size: var(--t-caption-size); color: var(--ink-4); }
.act-person, .act-qfilter { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; color: var(--ink-2); font-size: var(--t-label-size); text-align: left; }
.act-person .grow, .act-qfilter .grow { font-weight: 500; }
.act-person:hover, .act-qfilter:hover { background: var(--bg-hover); }
.act-person.on, .act-qfilter.on { background: var(--bg-sunken); color: var(--ink); }
.act-person-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.act-person.on .act-person-n, .act-qfilter.on .act-person-n { background: var(--accent); color: var(--accent-fg); }
.act-qfilter .icn { color: var(--ink-4); }

.act-reactions { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-inline); }
.act-react { display: inline-flex; align-items: center; gap: var(--space-tight); padding: 2px var(--space-inline) 2px var(--space-inline); border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; line-height: 1.7; transition: border-color .12s, background .12s; }
.act-react:hover { border-color: var(--border-strong); }
.act-react.mine { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.act-react-e { font-size: var(--t-caption-size); }
.act-react-n { font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.act-react.mine .act-react-n { color: var(--accent); }

.act-stack { border-radius: var(--r-control); }
.act-stack.open { background: var(--bg-sunken); }
.act-stack-hd { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; cursor: pointer; text-align: left; border-radius: var(--r-control); transition: background .12s; }
.act-stack-hd:hover { background: var(--bg-hover); }
.act-stack-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-stack-t { font-size: var(--t-label-size); color: var(--ink-2); }
.act-stack-t b { font-weight: 600; color: var(--ink); }
.act-stack-s { font-size: var(--t-caption-size); color: var(--ink-3); }
.act-stack-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.act-stack-chev { color: var(--ink-4); flex-shrink: 0; }
.act-stack-body { display: grid; grid-template-rows: 0fr; padding: 0 var(--space-tight); visibility: hidden; pointer-events: none; transition: grid-template-rows var(--dur-over) var(--ease), padding var(--dur-over) var(--ease), visibility 0s linear .2s; }
.act-stack.open .act-stack-body { grid-template-rows: 1fr; padding: 0 var(--space-tight) var(--space-tight); visibility: visible; pointer-events: auto; transition: grid-template-rows var(--dur-over) var(--ease), padding var(--dur-over) var(--ease); }
.act-stack-body-inner { min-height: 0; overflow: hidden; }

.act-newdiv { display: flex; align-items: center; gap: var(--space-item); margin: var(--space-item) 2px; color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.act-newdiv::before, .act-newdiv::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

.act-muted-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 2px; font-size: var(--t-caption-size); color: var(--ink-2); }
.act-muted-ic { color: var(--ink-4); flex-shrink: 0; }
.act-muted-until { font-size: var(--t-micro-size); color: var(--ink-4); flex-shrink: 0; }
.act-muted-x { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: var(--space-tight); border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.act-muted-x:hover { background: var(--bg-hover); color: var(--ink-2); }

/* ============================================================
   Research — search, results, lists
   ============================================================ */
.res-screen { max-width: 1080px; }
.res-head { margin-bottom: var(--space-group); }
.res-search { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-group); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); margin-bottom: 20px; transition: border-color .15s, box-shadow .15s; }
.res-search:focus-within { border-color: var(--accent); }
.res-search .icn { color: var(--ink-4); flex-shrink: 0; }
.res-search.busy .icn { color: var(--accent); }
.res-search-spin { animation: spin 1.1s linear infinite; }
.res-search input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-strong-size); color: var(--ink); min-width: 0; }
.res-search input::placeholder { color: var(--ink-4); }

.res-results-hd { margin-bottom: var(--space-item); }
.res-count { min-width: 22px; height: 22px; padding: 0 var(--space-inline); border-radius: 999px; background: var(--bg-active); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; display: grid; place-items: center; }
/* borderless hairline rows (Editorial Calm: no default cards for collection items —
   matches the .res-recentco / .prow convention used elsewhere in the app) */
.res-list { display: flex; flex-direction: column; }
.res-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-inline); border-top: 1px solid var(--border-subtle); border-radius: var(--r-control); cursor: pointer; transition: background .14s; }
.res-list .res-row:first-child { border-top: none; }
.res-row:hover { background: var(--bg-hover); }
.res-main { flex: 1; min-width: 0; }
.res-titlerow { display: flex; align-items: center; gap: var(--space-inline); }
.res-name { font-size: var(--t-strong-size); font-weight: 650; color: var(--ink); }
.res-cat { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; }
.res-sub { display: flex; align-items: center; gap: var(--space-item); margin-top: var(--space-tight); }
.res-sub span { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.res-sub .icn { color: var(--ink-4); }
.res-desc { font-size: var(--t-label-size); color: var(--ink-2); margin-top: var(--space-tight); max-width: 560px; }
.res-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-inline); flex-shrink: 0; }
.res-actions { display: flex; align-items: center; gap: var(--space-tight); }

/* logos & stars & socials */
.co-logo { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.co-logo.mono { font-weight: 700; border: none; box-shadow: none; }
.co-logo img { display: block; }
.co-stars { display: inline-flex; align-items: center; gap: 1.5px; }
.co-star { position: relative; display: inline-grid; line-height: 0; }
.co-star-bg { color: var(--border-strong); }
.co-star-fill { position: absolute; inset: 0; overflow: hidden; color: var(--c-gold); display: inline-grid; line-height: 0; }
.co-stars b { margin-left: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.co-socdots { display: inline-flex; gap: var(--space-tight); }
.co-socdot { border-radius: 6px; color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }

/* save popover */
.savepop { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); z-index: 80; padding: var(--space-inline); }
.savepop-hd { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: var(--space-tight) var(--space-tight) var(--space-inline); }
.savepop-list { max-height: 200px; overflow-y: auto; }
.savepop-item { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; color: var(--ink); font-size: var(--t-label-size); text-align: left; }
.savepop-item:hover { background: var(--bg-hover); }
.savepop-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-fg); }
.savepop-check.on { background: var(--accent); border-color: var(--accent); }
.savepop-n { font-size: var(--t-micro-size); color: var(--ink-4); }
.savepop-create { display: flex; gap: var(--space-tight); padding: var(--space-inline) var(--space-tight) var(--space-tight); border-top: 1px solid var(--border-subtle); margin-top: var(--space-tight); }
.savepop-create input { flex: 1; height: 32px; border: 1px solid var(--border); border-radius: var(--r-control); padding: 0 var(--space-inline); font-size: var(--t-caption-size); background: var(--surface); color: var(--ink); outline: none; }
.savepop-create input:focus { border-color: var(--accent); }

/* idle: suggestions + lists */
.res-suggest { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; margin-bottom: 0; }
.res-suggest-lbl { font-size: var(--t-caption-size); color: var(--ink-4); font-weight: 600; }
.res-chip { padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-label-size); font-weight: 500; cursor: pointer; transition: all .14s; }
.res-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.res-chip.recent { display: inline-flex; align-items: center; gap: var(--space-tight); }
.res-chip.recent .icn { color: var(--ink-4); }
.res-chip.recent:hover .icn { color: var(--accent); }
.res-section-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 700; color: var(--ink-2); margin: 28px 0 var(--space-group); padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.res-section-hd .icn { color: var(--ink-3); }
.res-section-clear { margin-left: auto; border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); transition: background .14s, color .14s; }
.res-section-clear:hover { background: var(--bg-hover); color: var(--ink); }
.res-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-item); }
.res-listcard { text-align: left; padding: var(--space-item) var(--space-tight); border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; transition: background .12s; display: flex; flex-direction: column; gap: var(--space-tight); }
.res-listcard:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--bg-hover); }
.res-listcard-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-tight); }
.res-listcard-ic { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--accent); display: grid; place-items: center; }
.res-listcard-more { width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; }
.res-listcard-more:hover { background: var(--bg-hover); color: var(--ink); }
.res-listcard-name { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.res-listcard-meta { font-size: var(--t-caption-size); color: var(--ink-3); }
.res-listcard-logos { display: flex; gap: var(--space-tight); margin-top: var(--space-inline); }
.res-listcard.new { align-items: flex-start; justify-content: center; border-style: dashed; color: var(--ink-3); }
.res-listcard.new:hover { color: var(--accent); border-color: var(--accent); }
.res-empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }

/* ============================================================
   Company dossier
   ============================================================ */
.dos { max-width: 1140px; }
.dos-hero { display: flex; gap: var(--space-group); align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.dos-hero-main { flex: 1; min-width: 0; }
.dos-hero-top { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; }
.dos-name { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 600; letter-spacing: -.01em; }
.dos-cat { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.dos-verified { color: var(--accent); display: inline-grid; }
.dos-hero-sub { display: flex; align-items: center; gap: var(--space-group); flex-wrap: wrap; margin-top: var(--space-inline); }
.dos-hero-sub > span, .dos-hero-sub > a { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-label-size); color: var(--ink-2); }
.dos-hero-sub a { color: var(--accent); text-decoration: none; }
.dos-hero-sub a:hover { text-decoration: underline; }
.dos-hero-sub .icn { color: var(--ink-4); }
.dos-hero-sub a .icn { color: var(--accent); }
.dos-desc { font-size: var(--t-body-size); line-height: 1.6; color: var(--ink-2); margin: var(--space-item) 0 0; max-width: 680px; }
.dos-hero-socials { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-item); }
.dos-socpill { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); text-decoration: none; transition: all .12s; }
.dos-socpill:hover { border-color: var(--border-strong); }
.dos-socpill-ic { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.dos-socpill-n { color: var(--ink-4); font-size: var(--t-micro-size); }
.dos-hero-actions { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; }
.dos-hero-actions .btn.secondary { text-decoration: none; }
.dos-socpill-x { color: var(--ink-4); margin-left: 1px; }
.dos-socpill:hover .dos-socpill-x { color: var(--accent); }

/* honest sourcing note */
.dos-note { display: flex; align-items: flex-start; gap: var(--space-inline); margin: var(--space-group) 0 var(--space-tight); padding: var(--space-item) var(--space-item); background: var(--bg-sunken); border-radius: var(--r-control); font-size: var(--t-caption-size); line-height: 1.5; color: var(--ink-3); }
.dos-note .icn { color: var(--ink-4); flex-shrink: 0; margin-top: 1px; }

/* social profile links */
.dos-proflist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-tight); }
.dos-prof { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); text-decoration: none; transition: background .14s; }
.dos-prof:hover { background: var(--bg-hover); }
.dos-prof-badge { width: 30px; height: 30px; border-radius: var(--r-control); color: #fff; font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.dos-prof-handle { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dos-prof-net { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }

/* outbound research links */
.dos-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-tight); }
.dos-link { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); text-decoration: none; transition: background .14s; }
.dos-link:hover { background: var(--bg-hover); }
.dos-link-ic { width: 32px; height: 32px; border-radius: var(--r-control); background: var(--bg-active); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.dos-link-l { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dos-link-s { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }
.dos-askaria { display: flex; align-items: center; gap: var(--space-item); width: 100%; margin-top: var(--space-item); padding: var(--space-item) var(--space-item); border: none; border-radius: var(--r-card); background: var(--accent-soft); cursor: pointer; transition: background .14s; }
.dos-askaria:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dos-askaria-ic { width: 34px; height: 34px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.dos-askaria b { display: block; font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.dos-askaria span > span { font-size: var(--t-caption-size); color: var(--ink-3); }
.dos-askaria > .icn { color: var(--accent); flex-shrink: 0; }
.dos-deepcta { display: inline-flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-tight); border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .14s; }
.dos-deepcta:hover { color: var(--accent); }
.dos-deepcta .icn { color: var(--ink-4); }
.dos-deepcta:hover .icn { color: var(--accent); }

/* Aria brief — AI-sourced specifics, one calm accent moment */
.dos-brief { margin-bottom: var(--space-group); }
.dos-brief-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; color: var(--accent); margin-bottom: var(--space-inline); }
.dos-brief-ic { width: 22px; height: 22px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dos-brief-tag { margin-left: auto; font-size: var(--t-micro-size); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.dos-brief-refresh { width: 22px; height: 22px; border: none; background: none; border-radius: 6px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s, color .12s; }
.dos-brief-refresh:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.dos-brief-refresh:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.dos-brief-sum { font-size: var(--t-body-size); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--space-item); max-width: 680px; }
.dos-brief-facts { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-block); margin-bottom: var(--space-item); }
.dos-brief-fact { display: flex; flex-direction: column; gap: 1px; }
.dos-brief-fact span { font-size: var(--t-micro-size); color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dos-brief-fact b { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dos-brief-list { margin: 0; padding-left: var(--space-group); display: flex; flex-direction: column; gap: var(--space-tight); }
.dos-brief-list li { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); }
.dos-brief-empty { font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-3); }
.dos-brief-load { display: flex; flex-direction: column; gap: var(--space-inline); }
.dos-brief-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-active) 25%, var(--bg-hover) 50%, var(--bg-active) 75%); background-size: 200% 100%; animation: dosShimmer 1.2s linear infinite; }
@keyframes dosShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.dos-rail-link { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; font-size: var(--t-label-size); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.dos-rail-link:last-child { border-bottom: none; }
.dos-rail-link:hover { color: var(--accent); }
.dos-rail-link .icn { color: var(--ink-4); flex-shrink: 0; }
.dos-rail-link:hover .icn { color: var(--accent); }

.dos-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-item); margin: 20px 0; }
.dos-kpi { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.dos-kpi-ic { width: 34px; height: 34px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dos-kpi-v { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 460; line-height: 1; color: var(--ink); }
.dos-kpi-l { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }

.dos-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: var(--space-tight); flex-wrap: wrap; padding: var(--space-inline) 0; margin-bottom: var(--space-inline); background: var(--bg); backdrop-filter: blur(4px); }
.dos-navpill { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer; transition: all .12s; }
.dos-navpill:hover { border-color: var(--border-strong); }
.dos-navpill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.dos-grid { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: var(--space-block); align-items: start; }
@media (max-width: 1060px){ .dos-grid { grid-template-columns: 1fr; } .dos-kpis { grid-template-columns: repeat(2,minmax(0, 1fr)); } }
.dos-col { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.dos-sec { padding: var(--space-block) 0; }
.dos-sec:first-child { padding-top: var(--space-tight); }
.dos-sec + .dos-sec { border-top: 1px solid var(--border-subtle); }
.dos-sec-hd { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-group); }
.dos-sec-ic { width: 28px; height: 28px; border-radius: var(--r-control); background: var(--bg-active); color: var(--ink-2); display: grid; place-items: center; }
.dos-sec-hd h3 { font-size: var(--t-strong-size); font-weight: 650; }
.dos-sec-meta { font-size: var(--t-caption-size); color: var(--ink-3); }
.dos-about { font-size: var(--t-body-size); line-height: 1.65; color: var(--ink-2); margin: 0 0 var(--space-group); max-width: 680px; }
.dos-facts { display: flex; flex-wrap: wrap; gap: var(--space-item) var(--space-section); }
.dos-fact { background: none; padding: 0; }
.dos-fact-l { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-bottom: var(--space-tight); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dos-fact-v { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dos-fact-v a { color: var(--accent); text-decoration: none; }

/* socials + posts */
.dos-socials { display: flex; flex-direction: column; gap: var(--space-group); }
.dos-soc-hd { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-item); }
.dos-soc-badge { width: 34px; height: 34px; border-radius: var(--r-control); color: #fff; font-size: var(--t-label-size); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.dos-soc-handle { font-size: var(--t-body-size); font-weight: 650; }
.dos-soc-meta { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.dos-soc-followers { text-align: right; }
.dos-soc-followers b { font-size: var(--t-strong-size); font-weight: 700; }
.dos-soc-followers span { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }
.dos-posts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-inline); }
@media (max-width: 760px){ .dos-posts { grid-template-columns: repeat(3,minmax(0, 1fr)); } }
.dos-post { position: relative; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; transition: transform .14s; }
.dos-post:hover { transform: scale(1.03); }
.dos-post-stats { position: absolute; top: 8px; left: 8px; display: flex; gap: var(--space-inline); }
.dos-post-stats span { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.dos-post-cap { padding: var(--space-inline); background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.dos-post-cap span { display: block; font-size: var(--t-micro-size); line-height: 1.3; }
.dos-post-cap em { font-size: 9px; opacity: .8; font-style: normal; }

/* traffic */
.dos-traffic-main { display: flex; align-items: center; gap: 20px; padding-bottom: var(--space-group); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-group); }
.dos-traffic-num { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 460; line-height: 1; }
.dos-traffic-lbl { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-tight); }
.dos-traffic-lbl .up { color: var(--lime); font-weight: 600; }
.dos-traffic-lbl .down { color: var(--st-blocked); font-weight: 600; }
.dos-spark { flex: 1; height: 64px; min-width: 120px; }
.dos-traffic-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .dos-traffic-split { grid-template-columns: 1fr; } }
.dos-mini-hd { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-3); margin-bottom: var(--space-inline); }
.dos-bar-row { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.dos-bar-l { width: 96px; font-size: var(--t-caption-size); color: var(--ink-2); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos-bar-track { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.dos-bar-fill { display: block; height: 100%; border-radius: 999px; }
.dos-bar-v { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 600; width: 34px; text-align: right; flex-shrink: 0; }

/* SEO keyword table */
.dos-kw { width: 100%; border-collapse: collapse; }
.dos-kw th { text-align: left; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 0 var(--space-inline) var(--space-inline); border-bottom: 1px solid var(--border); }
.dos-kw td { padding: var(--space-item) var(--space-inline); border-bottom: 1px solid var(--border-subtle); font-size: var(--t-label-size); }
.dos-kw tr:last-child td { border-bottom: none; }
.dos-kw-term { font-weight: 550; }
.dos-pos { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 var(--space-inline); border-radius: 6px; background: var(--bg-active); font-size: var(--t-caption-size); font-weight: 600; }
.dos-pos.top { background: var(--st-done-soft); color: var(--st-done); }
.dos-up { color: var(--lime); font-weight: 600; }
.dos-down { color: var(--st-blocked); font-weight: 600; }

/* news */
.dos-news { display: flex; flex-direction: column; gap: 2px; }
.dos-news-item { position: relative; display: block; padding: var(--space-item); border-radius: var(--r-control); text-decoration: none; transition: background .12s; }
.dos-news-item:hover { background: var(--bg-hover); }
.dos-news-src { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; color: var(--accent); margin-bottom: var(--space-tight); }
.dos-news-date { color: var(--ink-4); font-weight: 400; }
.dos-news-title { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); margin-bottom: var(--space-tight); padding-right: 20px; }
.dos-news-ex { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.5; }
.dos-news-x { position: absolute; top: 13px; right: 13px; color: var(--ink-4); }

/* mentions */
.dos-mentions { display: flex; flex-direction: column; gap: 2px; }
.dos-mention { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border-radius: var(--r-control); text-decoration: none; transition: background .12s; }
.dos-mention:hover { background: var(--bg-hover); }
.dos-mtype { font-size: var(--t-micro-size); font-weight: 700; padding: var(--space-tight) var(--space-inline); border-radius: 6px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; }
.dos-mtype.blog { background: color-mix(in srgb, var(--c-mauve) 16%, transparent); color: var(--c-mauve); }
.dos-mtype.article { background: color-mix(in srgb, var(--c-blue) 16%, transparent); color: var(--c-blue); }
.dos-mtype.directory { background: color-mix(in srgb, var(--c-gold) 18%, transparent); color: var(--c-gold); }
.dos-mtype.review { background: color-mix(in srgb, var(--c-clay) 16%, transparent); color: var(--c-clay); }
.dos-mention-title { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.dos-mention-src { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.dos-da { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; flex-shrink: 0; }

/* gallery */
.dos-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-inline); }
.dos-gal { aspect-ratio: 4/3; border-radius: var(--r-control); }

/* reviews */
.dos-reviews { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 640px){ .dos-reviews { grid-template-columns: 1fr; } }
.dos-rev-score { text-align: center; padding: var(--space-item); background: var(--bg-sidebar); border-radius: var(--r-card); }
.dos-rev-num { font-family: var(--font-serif); font-size: var(--fs-4xl); font-weight: 460; line-height: 1; }
.dos-rev-count { font-size: var(--t-micro-size); color: var(--ink-3); margin: var(--space-tight) 0 var(--space-item); }
.dos-rev-bars { display: flex; flex-direction: column; gap: var(--space-tight); }
.dos-rev-bar { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-3); }
.dos-rev-bar > span:first-child { width: 22px; text-align: right; }
.dos-rev-bar i { width: 30px; text-align: right; font-style: normal; }
.dos-rev-items { display: flex; flex-direction: column; gap: var(--space-item); }
.dos-rev-item-hd { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-tight); }
.dos-rev-item-hd b { font-size: var(--t-label-size); font-weight: 650; }
.dos-rev-src { font-size: var(--t-micro-size); color: var(--ink-4); }
.dos-rev-item p { margin: 0; font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); }

/* right rail — borderless groups separated by whitespace + hairline, not boxes */
.dos-rail { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 60px; }
.dos-rail-card { padding: 0; }
.dos-rail-card + .dos-rail-card { padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.dos-rail-hd { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-item); }
.dos-rail-fact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-tight) 0; font-size: var(--t-label-size); border-bottom: 1px solid var(--border-subtle); }
.dos-rail-fact:last-child { border-bottom: none; }
.dos-rail-fact span { color: var(--ink-3); }
.dos-rail-fact b { font-weight: 600; color: var(--ink); text-align: right; }
.dos-rail-fact a { color: var(--accent); text-decoration: none; }
.dos-person { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; }
.dos-person-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-micro-size); font-weight: 700; flex-shrink: 0; }
.dos-person-n { font-size: var(--t-label-size); font-weight: 600; }
.dos-person-t { font-size: var(--t-micro-size); color: var(--ink-3); }
.dos-comp { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); margin: 0 -8px; border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .14s; }
.dos-comp:hover { background: var(--bg-hover); }
.dos-comp-n { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dos-comp-note { font-size: var(--t-micro-size); color: var(--ink-3); }
.dos-comp-rate { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--c-gold); flex-shrink: 0; }
.dos-map { position: relative; height: 140px; border-radius: var(--r-control); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 14%, var(--bg-sidebar)), color-mix(in srgb, var(--accent) 12%, var(--bg-sidebar))); margin-bottom: var(--space-item); border: 1px solid var(--border-subtle); }
.dos-map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; }
.dos-pin { position: absolute; transform: translate(-50%, -100%); color: var(--accent); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.dos-loc { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-tight) 0; }
.dos-loc .icn { color: var(--ink-4); margin-top: 2px; flex-shrink: 0; }
.dos-loc-l { font-size: var(--t-label-size); font-weight: 600; }
.dos-loc-a { font-size: var(--t-micro-size); color: var(--ink-3); }

/* compare table */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.cmp { border-collapse: collapse; width: 100%; min-width: 560px; }
.cmp th, .cmp td { border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.cmp th:last-child, .cmp td:last-child { border-right: none; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp-attr { position: sticky; left: 0; z-index: 2; background: var(--bg-sidebar); text-align: left; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); padding: var(--space-item) var(--space-item); white-space: nowrap; min-width: 150px; }
.cmp-corner { background: var(--bg-sidebar); }
.cmp-co { padding: var(--space-group) var(--space-item) var(--space-item); text-align: center; vertical-align: top; min-width: 180px; background: var(--surface); }
.cmp-co .co-logo { margin: 0 auto 8px; }
.cmp-co-name { font-size: var(--t-label-size); font-weight: 650; line-height: 1.3; margin-bottom: var(--space-inline); }
.cmp-co-acts { display: flex; align-items: center; justify-content: center; gap: var(--space-tight); }
.cmp-cell { position: relative; text-align: center; padding: var(--space-item) var(--space-item); font-size: var(--t-label-size); color: var(--ink-2); }
.cmp-cell b { font-weight: 700; color: var(--ink); }
.cmp-cell.best { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.cmp-cell.best b { color: var(--accent); }
.cmp-best-dot { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.cmp-cell .co-socdots { justify-content: center; }
.cmp-cat { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; }
.cmp-link { color: var(--accent); text-decoration: none; font-size: var(--t-caption-size); }
.cmp-link:hover { text-decoration: underline; }

/* scraped photos */
.scraped-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.scraped-photo.on { opacity: 1; }
.dos-gal { position: relative; overflow: hidden; }

/* search autocomplete */
.res-searchwrap { position: relative; margin-bottom: 20px; z-index: 20; }
.res-searchwrap .res-search { margin-bottom: 0; }
.res-ac { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-tight); z-index: 30; max-height: 380px; overflow-y: auto; }
.res-ac-item { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-item); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; color: var(--ink); }
.res-ac-item.on { background: var(--bg-hover); }
.res-ac-ic { width: 30px; height: 30px; border-radius: var(--r-control); background: var(--bg-active); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.res-ac-item:first-child .res-ac-ic { background: var(--accent-soft); color: var(--accent); }
.res-ac-text { display: block; font-size: var(--t-body-size); font-weight: 500; }
.res-ac-sub { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }
.res-ac-tag { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); background: var(--bg-active); padding: 2px var(--space-inline); border-radius: 999px; flex-shrink: 0; }

/* pinned companies */
/* borderless — matches .res-recentco (same underlying data shape, same treatment) */
.res-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-tight); margin-bottom: 0; }
.res-pin { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); background: transparent; cursor: pointer; transition: background .14s; }
.res-pin:hover { background: var(--bg-hover); }
.res-pin-n { font-size: var(--t-label-size); font-weight: 600; }
.res-pin-s { font-size: var(--t-micro-size); color: var(--ink-3); }
.res-pin-x { width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.res-pin:hover .res-pin-x { opacity: 1; }
.res-pin-x:hover { background: var(--surface); color: var(--ink); }

/* recently viewed companies — borderless tiles on the page background */
.res-recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-tight); margin-bottom: 0; }
.res-recentco { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); background: transparent; cursor: pointer; transition: background .14s; }
.res-recentco:hover { background: var(--bg-hover); }
.res-recentco-n { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.res-recentco-s { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }
.res-recentco-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.res-recentco-act { width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.res-recentco:hover .res-recentco-act { opacity: 1; }
.res-recentco-act:hover { background: var(--surface); color: var(--ink); }
.res-recentco-act.on { opacity: 1; color: var(--accent); }

/* resume / continue chip */
.res-resume { display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left; padding: var(--space-item) var(--space-item); border: none; border-radius: var(--r-card); background: var(--bg-sunken); cursor: pointer; margin-bottom: 20px; transition: background .14s; }
.res-resume:hover { background: var(--bg-hover); }
.res-resume-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.res-resume-k { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.res-resume-n { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.res-resume-loc { font-weight: 500; color: var(--ink-3); }
.res-resume-go { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.res-resume:hover .res-resume-go { color: var(--accent); }

/* marketing patterns */
.mkt-aria { display: flex; gap: var(--space-item); padding: var(--space-item) var(--space-group); background: var(--accent-soft); border-radius: var(--r-card); margin-bottom: var(--space-item); }
.mkt-aria-ic { width: 28px; height: 28px; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.mkt-aria-hd { font-size: var(--t-micro-size); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-tight); }
.mkt-aria p { margin: 0; font-size: var(--t-label-size); line-height: 1.55; color: var(--ink); }
.mkt-insights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); margin-bottom: var(--space-group); }
@media (max-width: 640px){ .mkt-insights { grid-template-columns: 1fr; } }
.mkt-insight { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); font-size: var(--t-caption-size); color: var(--ink-2); background: var(--surface); }
.mkt-insight-ic { width: 26px; height: 26px; border-radius: var(--r-control); background: var(--bg-active); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mkt-sub { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-3); margin-bottom: var(--space-item); }
.mkt-sub-meta { font-weight: 400; color: var(--ink-4); margin-left: var(--space-tight); }
.mkt-grid { display: grid; grid-template-columns: 1fr 200px; gap: 20px; padding-bottom: var(--space-group); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-group); }
@media (max-width: 760px){ .mkt-grid { grid-template-columns: 1fr; } }
.mkt-heat { display: grid; gap: var(--space-tight); }
.mkt-hcol { font-size: 9.5px; color: var(--ink-4); text-align: center; }
.mkt-hrow { font-size: var(--t-micro-size); color: var(--ink-3); display: flex; align-items: center; }
.mkt-hcell { aspect-ratio: 1; border-radius: 4px; min-height: 16px; }
.mkt-hcell.peak { box-shadow: inset 0 0 0 2px var(--accent); }
.mkt-legend { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-4); }
.mkt-legend i { width: 14px; height: 12px; border-radius: 3px; }
.mkt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); align-content: start; }
.mkt-stat { padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--surface); }
.mkt-stat-v { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 460; line-height: 1; color: var(--ink); }
.mkt-stat-v.up { color: var(--lime); }
.mkt-stat-v.down { color: var(--st-blocked); }
.mkt-stat-l { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }
.mkt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: var(--space-group); }
@media (max-width: 640px){ .mkt-grid2 { grid-template-columns: 1fr; } }
.mkt-block { min-width: 0; }
.mkt-tags { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.mkt-tag { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: 999px; font-size: var(--t-caption-size); color: var(--accent); font-weight: 500; }
.mkt-tag b { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px var(--space-inline); border-radius: 999px; }

/* ============================================================
   Employee profile
   ============================================================ */
.team-card { cursor: pointer; transition: border-color .14s, background .14s; }
.team-card:hover { box-shadow: none; transform: none; background: var(--bg-hover); }
.emp { max-width: 1080px; }
.emp-cover { height: clamp(238px, 31vw, 310px); border-radius: var(--r-modal); position: relative; overflow: hidden; user-select: none; }
.emp-cover.has-img { background: var(--bg-sunken); }
.emp-cover.focusing { cursor: grab; touch-action: none; }
.emp-cover.focusing.dragging { cursor: grabbing; }
.emp-cover.focusing:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), inset 0 0 0 4px rgba(20,22,16,.45); }
.emp-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: object-position var(--dur-micro) var(--ease); }
.emp-cover.dragging .emp-cover-img { transition: none; }
.emp-cover-glow { position: absolute; inset: 0; background: radial-gradient(120% 140% at 85% -10%, rgba(255,255,255,.28), transparent 55%); }
.emp-cover-tools { position: absolute; z-index: 4; top: 12px; right: 12px; display: flex; gap: var(--space-tight); opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
.emp-cover:hover .emp-cover-tools, .emp-cover:focus-within .emp-cover-tools, .emp-cover.focusing .emp-cover-tools { opacity: 1; }
.emp-cover-btn { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: none; border-radius: var(--r-control); background: rgba(20,22,16,.55); color: #fff; backdrop-filter: blur(6px); font: inherit; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; transition: background .12s; position: relative; }
.emp-cover-btn:hover { background: rgba(20,22,16,.78); }
.emp-cover-btn.on { background: var(--accent); }
.emp-cover-btn.icon-only { width: 29px; padding-inline: 0; justify-content: center; }
.emp-cover-btn:disabled { opacity: .62; cursor: wait; }
.emp-cover-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(-3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.emp-cover-btn[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.emp-focus-pin { position: absolute; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(0,0,0,.4), inset 0 0 0 6px rgba(255,255,255,.2); pointer-events: none; }
.emp-cover-dragger { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: var(--space-inline); color:#fff; background:rgba(20,22,16,.58); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); backdrop-filter:blur(7px); font-size:var(--t-micro-size); font-weight:650; pointer-events:none; opacity:.88; transition:opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.emp-cover.dragging .emp-cover-dragger { opacity:.34; transform:translate(-50%,-50%) scale(.98); }
.emp-focus-hint { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: var(--t-micro-size); font-weight: 600; color: #fff; background: rgba(20,22,16,.58); padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); backdrop-filter: blur(5px); pointer-events: none; white-space: nowrap; }
.cover-presetpop { position: fixed; z-index: 1300; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-item); animation: fade var(--dur-micro) var(--ease); }
.cover-presetpop-hd { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-inline); }
.cover-presetpop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-inline); }
.cover-presetpop-sw { width: 100%; aspect-ratio: 1; border-radius: var(--r-control); border: none; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cover-presetpop-sw:hover { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.18); }
@media (hover:none){ .emp-cover-tools { opacity:1; } }
@media (max-width:1024px){
  .emp-cover { height: clamp(214px, 34vw, 270px); border-radius: var(--r-modal); }
}
@media (max-width:760px){
  .emp-cover { height: 180px; border-radius:var(--r-modal); }
  .emp-cover-tools { top:8px; right:8px; gap:var(--space-tight); max-width:calc(100% - 16px); flex-wrap:wrap; justify-content:flex-end; }
  .emp-cover-btn { padding:var(--space-tight) var(--space-inline); font-size:var(--t-micro-size); }
  .emp-focus-hint { bottom:8px; max-width:calc(100% - 16px); white-space:normal; text-align:center; }
}
.emp-hero-over { padding: 0 var(--space-item) var(--space-block); align-items: flex-start; gap: 20px; }
.emp-hero-over > div:first-child { margin-top: -64px; }
.emp-hero-over .emp-hero-main { padding-top: var(--space-group); }
.emp-hero-avwrap { display: inline-flex; border-radius: 50%; padding: var(--space-tight); background: var(--bg); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.emp-hero-avwrap .avatar { width: 112px; height: 112px; font-size: var(--fs-3xl); }
.emp-hero { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.emp-status-dot { position: absolute; right: 7px; bottom: 7px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg); }
.emp-hero-main { flex: 1; min-width: 0; }
.emp-hero-top { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; }
.emp-name { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 600; }
.emp-pronoun { font-size: var(--t-caption-size); color: var(--ink-4); }
.emp-role-badge { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--accent); background: transparent; padding: 0 2px; border-radius: 0; }
.emp-hero-title { font-size: var(--t-body-size); color: var(--ink-2); margin-top: var(--space-tight); font-weight: 500; }
.emp-hero-meta { display: flex; align-items: center; gap: var(--space-group); flex-wrap: wrap; margin-top: var(--space-inline); }
.emp-hero-meta > span { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.emp-hero-meta .icn { color: var(--ink-4); }
.emp-status { font-weight: 600; }
.emp-status .icn { color: inherit !important; }
.emp-hero-actions { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; }
.emp-hero-over .emp-hero-actions { align-self: flex-start; margin-top: var(--space-group); }
.emp-hero-actions .btn.secondary { text-decoration: none; }
@media (max-width:900px){
  .emp-hero-over { display:grid; grid-template-columns:124px minmax(0,1fr); gap:var(--space-item) var(--space-group); }
  .emp-hero-over > div:first-child { grid-column:1; grid-row:1 / span 2; }
  .emp-hero-over .emp-hero-main { grid-column:2; padding-top:var(--space-item); }
  .emp-hero-over .emp-hero-actions { grid-column:2; margin-top:0; }
}
@media (max-width:640px){
  .emp-hero-over { grid-template-columns:88px minmax(0,1fr); padding-inline:2px; gap:var(--space-inline) var(--space-item); }
  .emp-hero-avwrap { padding:var(--space-tight); }
  .emp-hero-avwrap .avatar { width:80px; height:80px; font-size:var(--t-title-size); }
  .emp-hero-over > div:first-child { margin-top:-40px; }
  .emp-hero-over .emp-hero-main { padding-top:var(--space-inline); }
  .emp-hero-over .emp-hero-actions { grid-column:1 / -1; }
  .emp-hero-meta { gap:var(--space-inline) var(--space-item); }
}
.emp-bday { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-group); padding: var(--space-inline) 2px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); color: var(--c-mauve); font-size: var(--t-label-size); font-weight: 600; }

.emp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-item); margin: 20px 0; }
@media (max-width: 900px){ .emp-stats { grid-template-columns: repeat(2,minmax(0, 1fr)); } }
.emp-stat { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-group); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.emp-stat-ic { width: 36px; height: 36px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.emp-stat-v { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 460; line-height: 1; }
.emp-stat-l { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }

.emp-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-group); align-items: start; }
@media (max-width: 900px){ .emp-grid { grid-template-columns: 1fr; } }
.emp-col { display: flex; flex-direction: column; gap: var(--space-group); min-width: 0; }
.emp-rail { display: flex; flex-direction: column; gap: var(--space-group); }
.emp-card { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); padding: var(--space-group) var(--space-group); box-shadow: var(--shadow-xs); }
.emp-card-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-body-size); font-weight: 650; margin-bottom: var(--space-item); }
.emp-card-hd .icn { color: var(--ink-3); }
.emp-pto-req { margin-left:auto; display:inline-flex; align-items:center; gap:var(--space-tight); padding:var(--space-tight) var(--space-inline); border:none; border-radius:var(--r-control); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--t-micro-size); font-weight:600; cursor:pointer; transition:background .12s, color .12s; }
.emp-pto-req:hover { background:var(--bg-hover); color:var(--accent); }
.emp-n { min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; display: inline; margin-left: auto; }
.emp-empty { padding: var(--space-item) 2px; text-align: left; color: var(--ink-4); font-size: var(--t-label-size); border: none; border-radius: 0; }

.emp-tasks { display: flex; flex-direction: column; }
.emp-task { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; border-radius: var(--r-control); }
.emp-task:last-child { border-bottom: none; }
.emp-task:hover { background: var(--bg-hover); }
.emp-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.emp-task-name { font-size: var(--t-label-size); font-weight: 550; }
.emp-task-proj { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.emp-task-due { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); flex-shrink: 0; white-space: nowrap; }
.emp-task-due.over { color: var(--st-blocked); font-weight: 600; }

.emp-skills { display: flex; flex-wrap: wrap; gap: var(--space-tight) var(--space-item); }
.emp-skill { padding: 2px 0; border: none; border-radius: 0; font-size: var(--t-caption-size); color: var(--ink-2); background: transparent; }

.emp-pto { margin-bottom: var(--space-item); }
.emp-pto-bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin-bottom: var(--space-inline); }
.emp-pto-fill { display: block; height: 100%; border-radius: 999px; background: var(--c-olive); }
.emp-pto-meta { font-size: var(--t-caption-size); color: var(--ink-3); }
.emp-pto-meta b { color: var(--ink); font-weight: 700; }
.emp-off { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border-top: 1px solid var(--border-subtle); }
.emp-off-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.emp-off-t { font-size: var(--t-label-size); font-weight: 600; }
.emp-off-w { font-size: var(--t-micro-size); color: var(--ink-3); }
.emp-off-st { font-size: var(--t-micro-size); font-weight: 600; padding: 0 2px; border-radius: 0; flex-shrink: 0; background: transparent; }
.emp-off-st.approved { color: var(--st-done); background: transparent; }
.emp-off-st.pending { color: var(--st-review); background: transparent; }

.emp-facts { display: flex; flex-direction: column; }
.emp-fact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--t-label-size); }
.emp-fact:last-child { border-bottom: none; }
.emp-fact > span { display: inline-flex; align-items: center; gap: var(--space-inline); color: var(--ink-3); }
.emp-fact > span .icn { color: var(--ink-4); }
.emp-fact b { font-weight: 600; color: var(--ink); text-align: right; }
.emp-fact b a { color: var(--accent); text-decoration: none; }
.emp-sub2 { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin: var(--space-item) 0 var(--space-tight); }
.emp-person { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; cursor: pointer; border-radius: var(--r-control); transition: background .12s; }
.emp-person:hover { background: var(--bg-hover); }
.emp-person-n { font-size: var(--t-label-size); font-weight: 600; }
.emp-person-t { font-size: var(--t-micro-size); color: var(--ink-3); }
.emp-cover-sec { margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.emp-cover-note { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; color: color-mix(in srgb, var(--c-gold) 74%, var(--ink)); }
.emp-cover-status { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 2px; border-radius: 0; background: transparent !important; }

/* assigned breakdown + conflicts + at-rest */
.emp-breakdown { display: flex; align-items: center; gap: var(--space-item); flex-wrap: wrap; margin: -4px 0 20px; padding: var(--space-inline) 2px var(--space-item); border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; }
.emp-bd-total { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); margin-right: var(--space-tight); }
.emp-bd { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-2); }
.emp-bd i { width: 8px; height: 8px; border-radius: 50%; }
.emp-bd.warn { color: var(--st-blocked); font-weight: 600; }
.emp-hd-note { font-size: var(--t-micro-size); font-weight: 400; color: var(--ink-4); margin-left: auto; }
.emp-n.warn { background: transparent; color: var(--st-blocked); }
.emp-rest-note { color: var(--ink-4); }

.emp-conflicts { border-color: transparent; }
.emp-conflict { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 2px; border-radius: 0; margin-bottom: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); }
.emp-conflict:last-child { margin-bottom: 0; border-bottom: none; }
.emp-conflict.high { background: transparent; }
.emp-conflict-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent; color: var(--st-blocked); }
.emp-conflict.med .emp-conflict-ic { background: transparent; color: var(--st-review); }
.emp-conflict-t { font-size: var(--t-label-size); font-weight: 600; }
.emp-conflict-d { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.emp-sev { font-size: var(--t-micro-size); font-weight: 700; padding: 0 2px; border-radius: 0; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; background: transparent; }
.emp-sev.high { background: transparent; color: var(--st-blocked); }
.emp-sev.med { background: transparent; color: var(--st-review); }

/* collaborators + comments */
.doc-collab-pile { display: inline-flex; align-items: center; gap: 2px; }
.btn.on { background: var(--accent-soft); color: var(--accent); }
.doc-invite-btn { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-item) var(--space-item); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--ink-2); font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: border-color .14s, background .14s; }
.doc-invite-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.doc-invite-btn .chevDown, .doc-invite-btn > .icn:last-child { margin-left: auto; }
.doc-collab-list { display: flex; flex-direction: column; gap: 2px; }
.doc-collab-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); }
.doc-collab-row:hover { background: var(--bg-hover); }
.doc-collab-name { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.doc-collab-sub { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }
.doc-role { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.doc-role.owner { color: var(--accent); background: var(--accent-soft); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.doc-role-btn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: pointer; }
.doc-role-btn:hover { background: var(--bg-active); }
.doc-access-desc { display: block; font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 400; margin-top: 1px; }

.doc-comments { width: 320px; flex-shrink: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); display: flex; flex-direction: column; position: sticky; top: 18px; }
.doc-comments-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.doc-comments-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--t-micro-size); font-weight: 600; }
.doc-comments-body { flex: 1; overflow-y: visible; padding: var(--space-item); display: flex; flex-direction: column; gap: var(--space-tight); }
.doc-comments-empty { text-align: center; color: var(--ink-3); padding: var(--space-page) 20px; }
.doc-comment { padding: var(--space-inline); border-radius: var(--r-control); transition: background .12s; }
.doc-comment:hover { background: var(--bg-hover); }
.doc-comment.resolved { opacity: .5; }
.doc-comment-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.doc-comment-text { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); margin: var(--space-tight) 0 var(--space-tight); }
.doc-comment-actions { display: flex; gap: var(--space-item); }
.doc-comment-actions button { border: none; background: none; color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 550; cursor: pointer; padding: 0; }
.doc-comment-actions button:hover { color: var(--accent); }
.doc-reply { display: flex; gap: var(--space-inline); align-items: flex-start; margin-top: var(--space-inline); padding-left: var(--space-tight); }
.doc-reply-box { display: flex; gap: var(--space-tight); margin-top: var(--space-inline); }
.doc-reply-box input { flex: 1; border: none; background: var(--surface-2); border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); outline: none; color: var(--ink); }
.doc-comments-compose { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); border-top: 1px solid var(--border-subtle); }
.doc-comments-compose input { flex: 1; border: none; background: var(--surface-2); border-radius: var(--r-pill); padding: var(--space-inline) var(--space-item); font-size: var(--t-label-size); outline: none; color: var(--ink); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── document library (modern grid + list, live mini render) ── */
.dl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin-bottom: 20px; flex-wrap: wrap; }
.dl-filters { display: flex; gap: var(--space-tight); flex-wrap: wrap; }
.dl-pill { display: inline-flex; align-items: center; gap: var(--space-tight); height: 32px; padding: 0 var(--space-item); border: none; background: var(--surface-2); border-radius: var(--r-pill); font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: background .14s, color .14s, box-shadow .14s; }
.dl-pill:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dl-pill.on { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.dl-pill-n { font-size: var(--t-micro-size); opacity: .7; font-weight: 600; }
.dl-pill.on .dl-pill-n { opacity: .8; }
.dl-viewtoggle { display: flex; background: transparent; border-radius: 0; padding: 0; gap: 2px; box-shadow: none; }
.dl-viewtoggle button { width: 30px; height: 28px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; position: relative; }
.dl-viewtoggle button:hover { background: var(--bg-hover); color: var(--ink); }
.dl-viewtoggle button.on { background: var(--bg-hover); color: var(--accent); box-shadow: none; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; }
.dl-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .12s, background .12s; }
.dl-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--border-strong); background: var(--bg-hover); }
.dl-thumb { position: relative; height: 190px; padding: var(--space-group) var(--space-group) 0; overflow: hidden; background: color-mix(in srgb, var(--dc) 5%, var(--surface-2)); display: flex; justify-content: center; }
.dark .dl-thumb { background: color-mix(in srgb, var(--dc) 10%, var(--bg-sunken)); }
.dl-star { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--c-gold); display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 2; }
.dl-thumb-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: var(--space-tight); opacity: 0; transition: opacity .14s; z-index: 2; }
.dl-card:hover .dl-thumb-actions { opacity: 1; }
.dl-quick { width: 28px; height: 28px; border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: none; position: relative; }
.dl-quick:hover { background: var(--bg-hover); color: var(--accent); }
.dl-body { padding: var(--space-item) var(--space-group) var(--space-group); }
.dl-titlerow { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.dl-glyph { display: inline-flex; align-items: center; flex-shrink: 0; }
.dl-title { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.dl-metarow { display: flex; align-items: center; gap: var(--space-inline); }
.dl-chip { font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; white-space: nowrap; background: var(--bg-sunken); color: var(--ink-3); }
.dl-updated { font-size: var(--t-micro-size); color: var(--ink-4); white-space: nowrap; }
.dl-stat { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.dl-collab { display: inline-flex; align-items: center; gap: 2px; }

/* the live mini "page" */
.docmini { width: 100%; max-width: 200px; height: 100%; border-radius: var(--r-control) var(--r-control) 0 0; overflow: hidden; box-shadow: 0 8px 22px -8px rgba(20,20,30,.30), 0 0 0 1px rgba(20,20,30,.05); background: var(--surface); }
.docmini-page { padding: var(--space-group) var(--space-group) 0; transform-origin: top center; }
.dm-title { font-family: var(--font-serif); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: var(--space-inline); letter-spacing: -.012em; }
.dm-h1 { font-family: var(--font-serif); font-size: 9px; font-weight: 700; color: var(--ink); margin: var(--space-tight) 0 var(--space-tight); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-h2 { font-family: var(--font-serif); font-size: 8px; font-weight: 700; color: var(--ink-2); margin: var(--space-tight) 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-h3 { font-size: 7.5px; font-weight: 700; color: var(--ink-2); margin: var(--space-tight) 0 2px; }
.dm-p { font-size: 6.5px; color: var(--ink-3); line-height: 1.5; margin: 2px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-tx { font-size: 6.5px; color: var(--ink-3); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-plines, .dm-bm-lines { display: flex; flex-direction: column; gap: var(--space-tight); margin: var(--space-tight) 0; flex: 1; }
.dm-line { height: 3px; border-radius: 2px; background: var(--bg-active); display: block; }
.dm-row { display: flex; align-items: center; gap: var(--space-tight); margin: var(--space-tight) 0; }
.dm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.dm-caret { font-size: 6px; color: var(--ink-3); flex-shrink: 0; }
.dm-check { width: 6px; height: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--border-strong); flex-shrink: 0; }
.dm-check.on { background: var(--accent); box-shadow: none; }
.dm-quote { font-size: 6.5px; font-style: italic; color: var(--ink-3); padding-left: var(--space-tight); margin: var(--space-tight) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-callout { display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-tight); border-radius: 5px; margin: var(--space-tight) 0; font-size: 6px; }
.dm-callout span:first-child { font-size: 8px; }
.dm-code { background: #1c1c20; border-radius: 4px; padding: var(--space-tight) var(--space-tight); margin: var(--space-tight) 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.dm-code i { height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.22); display: block; }
.dm-code i:nth-child(1){ width: 70%; } .dm-code i:nth-child(2){ width: 90%; } .dm-code i:nth-child(3){ width: 50%; }
.dm-image { height: 42px; border-radius: 5px; margin: var(--space-tight) 0; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.dm-bookmark { display: flex; gap: var(--space-tight); align-items: center; padding: var(--space-tight); border-radius: 5px; background: var(--surface-2); margin: var(--space-tight) 0; }
.dm-bm-sq { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.dm-table { display: flex; flex-direction: column; gap: 2px; margin: var(--space-tight) 0; }
.dm-trow { display: flex; gap: 2px; }
.dm-trow i { flex: 1; height: 5px; background: var(--bg-active); border-radius: 1px; }
.dm-trow:first-child i { background: var(--border-strong); }
.dm-divider { height: 1px; background: var(--border); margin: var(--space-tight) 0; }
.dm-btn { font-size: 6px; color: #fff; padding: var(--space-tight) var(--space-inline); border-radius: 4px; display: inline-block; margin: var(--space-tight) 0; font-weight: 600; }
.dm-banner { display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border-radius: 5px; margin: var(--space-tight) 0; color: #fff; }
.dm-banner span:first-child { font-size: 9px; }
.dm-banner-tx { font-family: var(--font-serif); font-size: 7.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight); margin: var(--space-tight) 0; }
.dm-col { display: flex; flex-direction: column; gap: 2px; }
.dm-stats { display: flex; gap: var(--space-tight); margin: var(--space-tight) 0; }
.dm-stat { flex: 1; background: var(--surface-2); border-radius: 3px; padding: var(--space-tight) 2px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.dm-stat b { font-family: var(--font-serif); font-size: 8px; color: var(--ink); }
.dm-stat i { font-size: 4.5px; color: var(--ink-3); font-style: normal; }
.dm-steps { display: flex; flex-direction: column; gap: 2px; margin: var(--space-tight) 0; }
.dm-step { display: flex; align-items: center; gap: var(--space-tight); }
.dm-step em { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 4.5px; font-style: normal; display: grid; place-items: center; flex-shrink: 0; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--space-tight) 0; }
.dm-tag { background: var(--surface-2); border-radius: 999px; padding: 1px var(--space-tight); font-size: 5px; color: var(--ink-3); box-shadow: inset 0 0 0 .5px var(--border); }
.dm-quotecard { background: var(--surface-2); border-radius: 4px; padding: var(--space-tight) var(--space-inline); margin: var(--space-tight) 0; font-family: var(--font-serif); font-style: italic; font-size: 6.5px; color: var(--ink-2); }
.dm-qc-by { display: block; font-style: normal; font-size: 5px; color: var(--ink-4); margin-top: 2px; }

/* paused state */
.paused-pill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 16%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; margin-bottom: var(--space-inline); }
.paused-pill.sm { margin-bottom: 0; padding: 2px var(--space-inline); font-size: 9.5px; }

/* ── template gallery ───────────────────────────────────────── */
.tmpl-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; min-height: 420px; }
.tmpl-list { display: flex; flex-direction: column; gap: var(--space-tight); max-height: 460px; overflow-y: auto; padding-right: var(--space-tight); }
.tmpl-item { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border: none; background: transparent; border-radius: var(--r-md); cursor: pointer; text-align: left; transition: background .12s; }
.tmpl-item:hover { background: var(--bg-hover); }
.tmpl-item.on { background: var(--accent-soft); }
.tmpl-ic { width: 30px; display: grid; place-items: center; flex-shrink: 0; }
.tmpl-name { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.tmpl-desc { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }
.tmpl-preview { display: flex; flex-direction: column; }
.tmpl-preview-frame { flex: 1; background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--space-group) var(--space-group) 0; display: flex; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); min-height: 340px; }
.tmpl-preview-frame .docmini { max-width: 220px; }

/* list view */
.dl-list { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.dl-list-hd, .dl-row { display: grid; grid-template-columns: 1fr 130px 110px 110px 40px; align-items: center; gap: var(--space-item); padding: 0 var(--space-group); }
.dl-list-hd { height: 40px; font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--border-subtle); }
.dl-row { padding-top: var(--space-item); padding-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; }
.dl-row:last-child { border-bottom: none; }
.dl-row:hover { background: var(--bg-hover); }
.dl-row-name { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.dl-row-thumb { width: 40px; height: 50px; border-radius: 6px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); position: relative; background: color-mix(in srgb, var(--dc) 5%, var(--surface-2)); }
.dark .dl-row-thumb { background: color-mix(in srgb, var(--dc) 10%, var(--bg-sunken)); }
.dl-row-thumb .docmini { max-width: 100%; box-shadow: none; border-radius: 4px; }
.dl-row-thumb .docmini-page { padding: var(--space-tight) var(--space-tight) 0; }
.dl-row-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   Calendar — clean month chips, mini avatars, hover overview
   (NEVER a left colored border on events)
   ============================================================ */
.cal-cell { min-height: 90px; padding: var(--space-tight) var(--space-tight) var(--space-inline); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .14s, box-shadow var(--dur-micro) var(--ease); -webkit-user-select: none; user-select: none; }
.cal-cell.out { background: var(--bg-sidebar); cursor: default; }
.cal-cell:not(.out):hover { background: var(--bg-hover); }
/* During range selection the compact event preview is the only selection mark.
   Suppress the ordinary hovered-cell fill so the grid itself stays quiet. */
.cal-grid-dragging .cal-cell:not(.out):hover { background: transparent; }
/* The drag-select preview bar: same .cal-ev.span/-start/-mid/-end structure and
   sizing as a real multi-day event (see the matching JSX in s-calendar.jsx), so
   it reads as "this is the event you're about to create" rather than a plain
   highlighted region. Accent-toned, dashed to read as provisional, and inert
   so the drag keeps tracking mouse events through it instead of over it. */
/* .cal-ev.span sets border:none at (0,2,0); .cal-ev-pending always also carries
   .span (see the JSX), so the override needs the same specificity to win. */
.cal-ev.cal-ev-pending { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-top: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-left: 0; border-right: 0; pointer-events: none; transition: none; }
.cal-ev.cal-ev-pending.span-start { border-left: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.cal-ev.cal-ev-pending.span-end { border-right: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.cal-ev-pending .cal-ev-title { color: var(--accent-700, var(--accent)); }
.cal-conflict { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, var(--surface)); padding: 1px var(--space-tight); border-radius: 999px; cursor: pointer; z-index: 2; }
.cal-cell { position: relative; }
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-tight); gap: var(--space-tight); }
.cal-day-count { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border: none; border-radius: 999px; padding: 1px var(--space-inline); min-width: 18px; text-align: center; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.cal-day-count.today { background: var(--accent-soft); color: var(--accent); }
.cal-day-count:hover { background: var(--accent); color: var(--accent-fg); }
.cal-day-wx { display: inline-flex; align-items: center; opacity: .82; flex-shrink: 0; }
.cal-conflict-warn { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: color-mix(in srgb, var(--c-clay) 12%, transparent); color: var(--c-clay); font-size: var(--t-caption-size); font-weight: 600; }
.cal-load-nudge { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: color-mix(in srgb, var(--c-gold) 13%, transparent); color: var(--c-gold); font-size: var(--t-caption-size); line-height: 1.45; }
.cal-load-nudge .icn { flex-shrink: 0; margin-top: 1px; }
.cal-load-nudge .grow { display: flex; flex-direction: column; gap: var(--space-inline); align-items: flex-start; }
.cal-load-sugg { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: color-mix(in srgb, var(--c-gold) 20%, transparent); color: var(--c-gold); font-weight: 650; font-size: var(--t-micro-size); padding: var(--space-tight) var(--space-inline); border-radius: 999px; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.cal-load-sugg:hover { background: var(--tag-gold-bg); color: var(--tag-gold-fg); }
/* team utilization meter */
.cal-util-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-tight); gap: var(--space-inline); }
.cal-util-l { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); min-width: 0; }
.cal-util-v { font-size: var(--t-strong-size); font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-util-v.low { color: var(--c-olive); }
.cal-util-v.mid { color: var(--accent); }
.cal-util-v.over { color: var(--c-clay); }
.cal-util-track { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.cal-util-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s var(--ease); }
.cal-util-fill.low { background: var(--c-olive); }
.cal-util-fill.mid { background: var(--c-gold); }
.cal-util-fill.over { background: var(--c-clay); }
/* member profile capacity card */
.emp-capacity { background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: var(--space-tight) 2px var(--space-group); margin-bottom: var(--space-group); }
.emp-cap-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.emp-cap-l { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.emp-cap-sub { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-tight); }
/* workload-this-week load bars */
.cal-lb-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; border: none; background: none; padding: var(--space-tight); border-radius: var(--r-control); cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.cal-lb-row:hover { background: var(--bg-hover); }
.cal-lb-name { font-size: var(--t-caption-size); font-weight: 550; width: 46px; flex-shrink: 0; text-align: left; }
.cal-lb-track { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.cal-lb-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s var(--ease); }
.cal-lb-fill.low { background: var(--c-olive); }
.cal-lb-fill.mid { background: var(--accent); }
.cal-lb-fill.over { background: var(--c-clay); }
.cal-lb-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); min-width: 30px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-lb-n i { font-style: normal; font-weight: 600; color: var(--ink-4); }
.cal-lb-n.over { color: var(--c-clay); }
.cal-lb-n.over i { color: color-mix(in srgb, var(--c-clay) 55%, var(--ink-4)); }
.cal-avail-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-tight); width: 100%; border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.cal-avail-row:hover { background: var(--bg-hover); }
.cal-avail-add { color: var(--ink-4); opacity: 0; flex-shrink: 0; transition: opacity .12s; }
.cal-avail-row:hover .cal-avail-add { opacity: 1; color: var(--accent); }
.cal-avail-free { font-size: var(--t-micro-size); font-weight: 600; color: var(--st-done); flex-shrink: 0; }
.cal-avail-busy { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); flex-shrink: 0; }
/* team availability — week strip */
.cal-wk-head { display: grid; grid-template-columns: 1fr repeat(5, 24px); gap: var(--space-tight); align-items: center; margin-bottom: var(--space-inline); padding: 0 var(--space-tight); }
.cal-wk-dow { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-align: center; letter-spacing: .02em; }
.cal-wk-dow.focus { color: var(--accent); }
.cal-avail-row2 { display: grid; grid-template-columns: 1fr repeat(5, 24px); gap: var(--space-tight); align-items: center; padding: var(--space-tight); border-radius: var(--r-control); transition: background .12s; }
.cal-avail-row2:hover { background: var(--bg-hover); }
.cal-cov { margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.cal-cov-head { margin-bottom: 0; }
.cal-cov-lbl { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); letter-spacing: .02em; text-transform: uppercase; }
.cal-cov-cell { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.cal-cov-cell.focus { color: var(--accent); }
.cal-cov-cell.thin { color: var(--c-clay); }
.cal-cov-note { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; color: color-mix(in srgb, var(--c-gold) 74%, var(--ink)); }
.cal-cov-note .icn { color: var(--c-gold); }
.cal-avail-who { display: flex; align-items: center; gap: var(--space-inline); border: none; background: none; padding: 0; cursor: pointer; min-width: 0; text-align: left; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); }
.cal-avail-who .clamp1 { min-width: 0; }
.cal-avail-who:hover { color: var(--accent); }
.cal-wk-cell { width: 24px; height: 24px; border-radius: var(--r-control); border: none; cursor: pointer; font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; padding: 0; transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.cal-wk-cell.free { background: var(--bg-sunken); color: transparent; }
.cal-wk-cell.busy { background: color-mix(in srgb, var(--c-clay) 22%, transparent); color: var(--c-clay); }
.cal-wk-cell.focus { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.cal-wk-cell.off { cursor: default; background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-4) 9%, transparent) 0 4px, transparent 4px 8px); color: transparent; }
.cal-wk-cell.off:hover { transform: none; box-shadow: none; }
.cal-wk-cell:hover { transform: scale(1.14); box-shadow: 0 0 0 1.5px var(--accent); z-index: 1; position: relative; }
.cal-cell.droppable { outline: 1.5px dashed transparent; transition: outline-color .12s, background .12s; }
.cal-cell.droppable:hover { background: var(--accent-soft); outline-color: var(--accent); }
.cal-ev.dragging { opacity: .4; }
/* multi-day span bars */
.cal-ev.span { border-radius: 0; margin-left: -8px; margin-right: -8px; padding-left: var(--space-inline); padding-right: var(--space-inline); border: none; box-shadow: none; }
.cal-ev.span:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--ec); }
.cal-ev.span-start { border-radius: var(--r-control) 0 0 var(--r-control); margin-left: 0; padding-left: var(--space-inline); }
.cal-ev.span-end { border-radius: 0 var(--r-control) var(--r-control) 0; margin-right: 0; padding-right: var(--space-inline); }
/* A multi-day bar has to be the SAME height on every day it covers. The titled
   segment is sized by .cal-ev-title's line box (11px text on the inherited 1.5
   ratio = 16.5px); this continuation segment held a hardcoded 12px, so every
   day after the one carrying the name rendered 4.5px shorter and the bar
   stepped down mid-span. Mirror the title's type instead of pinning a height,
   so the two can't drift apart again if the title's size changes. */
.cal-ev-cont { display: block; font-size: var(--t-micro-size); }
/* all-day toggle */
.cal-allday-toggle { display: flex; align-items: center; gap: var(--space-inline); height: 40px; padding: 0 var(--space-item); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--t-label-size); color: var(--ink-2); width: 100%; }
.cal-allday-toggle.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* .cal-allday-knob renders through the shared switch skin. */

/* New / Edit event modal — compact density, same fields.
   Density is the ONE inset, declared once: overriding body/foot alone left the
   header on the base 24 while the fields sat at 16, so the title and the first
   field stood on two different lines. */
.modal.cal-event-modal { --modal-inset: var(--space-group); }
.modal.cal-event-modal .modal-body { padding: var(--space-inline) var(--modal-inset); }
.modal.cal-event-modal .modal-foot { padding: var(--space-inline) var(--modal-inset); }
.modal.cal-event-modal .field { gap: var(--space-tight); }
.modal.cal-event-modal .field-label { font-size: var(--t-micro-size); margin: 0; }
.modal.cal-event-modal .field + .field { margin-top: var(--space-inline); }
.modal.cal-event-modal .field-row > .field { margin-top: 0; }
.modal.cal-event-modal .field-row { margin-top: var(--space-inline); gap: var(--space-inline); }
.modal.cal-event-modal .field-row:first-of-type { margin-top: var(--space-tight); }
.modal.cal-event-modal .create-title-input + .field-row { margin-top: var(--space-tight); }
.modal.cal-event-modal .create-title-input .input,
.modal.cal-event-modal .create-title-input input { font-size: var(--t-strong-size); padding: 0 0 2px; min-height: 0; }
.modal.cal-event-modal .field-hint { margin-top: 2px; font-size: var(--t-micro-size); line-height: 1.3; }
.modal.cal-event-modal .input,
.modal.cal-event-modal select.input,
.modal.cal-event-modal .invsel-btn,
.modal.cal-event-modal .cal-allday-toggle {
  min-height: 34px; height: 34px; border-radius: var(--r-control);
}
.modal.cal-event-modal textarea.input { height: auto; min-height: 52px; padding-top: var(--space-inline); padding-bottom: var(--space-inline); }
.modal.cal-event-modal .cal-allday-toggle { gap: var(--space-inline); padding: 0 var(--space-inline); font-size: var(--t-caption-size); }
/* The event modal takes the SMALL switch. One token swap now, instead of three
   restated pixel values that had drifted 1px off their own inset. */
.modal.cal-event-modal .cal-allday-knob { width: var(--sw-w-sm); height: var(--sw-h-sm); }
.modal.cal-event-modal .cal-allday-knob::after { width: var(--sw-knob-sm); height: var(--sw-knob-sm); }
.modal.cal-event-modal .cal-allday-toggle.on .cal-allday-knob::after { transform: translateX(var(--sw-travel-sm)); }
.modal.cal-event-modal .ap-grid { gap: var(--space-tight); }
.modal.cal-event-modal .ap-chip { gap: var(--space-tight); padding: 2px var(--space-inline) 2px 2px; font-size: var(--t-caption-size); }
.modal.cal-event-modal .ap-name { max-width: 72px; }
.modal.cal-event-modal .ap-check { width: 14px; height: 14px; }
.modal.cal-event-modal .ec-grid,
.modal.cal-event-modal .mk-grid { gap: var(--space-tight); }
.modal.cal-event-modal .ec-sw { width: 24px; height: 24px; border-radius: var(--r-control); }
.modal.cal-event-modal .mk-chip { width: 28px; height: 28px; border-radius: var(--r-control); }
.modal.cal-event-modal .cal-conflict-warn,
.modal.cal-event-modal .cal-hol-warn,
.modal.cal-event-modal .cal-load-nudge { margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); }
.modal.cal-event-modal .create-summary { margin-top: var(--space-inline); }
/* customize modal */
.cal-cat-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); }
.cal-cat-row:hover { background: var(--bg-hover); }
.cal-cat-swatch { width: 26px; height: 26px; border-radius: var(--r-control); border: none; cursor: pointer; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.cal-swatch-row { display: flex; gap: var(--space-tight); }
.cal-mini-sw { width: 18px; height: 18px; border-radius: 5px; border: none; cursor: pointer; transition: transform .1s; }
.cal-mini-sw:hover { transform: scale(1.15); }
.cal-mini-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px currentColor; }
.cal-cat-name { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.cal-cat-add { display: flex; gap: var(--space-inline); margin-top: var(--space-inline); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.cal-cat-add .input { height: 36px; }

.cal-ev {
  position: relative; border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline) var(--space-tight); margin-bottom: var(--space-tight); cursor: pointer;
  overflow: hidden;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
  transition: transform var(--dur-micro) var(--ease), box-shadow .14s, border-color .14s, background .14s;
}
.cal-ev:hover { transform: none; box-shadow: none; border-color: var(--border-strong); background: var(--bg-hover); z-index: 3; }
.cal-ev-top { display: flex; align-items: center; gap: var(--space-tight); }
.cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-ev-title { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.cal-ev-bot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-tight); margin-top: var(--space-tight); padding-left: 0; min-width: 0; }
.cal-ev-time { font-size: 9.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-ev-mark-btn { border: none; background: none; padding: 1px 2px; cursor: pointer; font-size: var(--t-micro-size); color: transparent; line-height: 1; border-radius: 3px; transition: color .12s; flex-shrink: 0; }
.cal-ev:hover .cal-ev-mark-btn { color: var(--ink-4); }
.cal-ev-mark-btn.on { color: var(--c-gold); }
.cal-agenda-row { transition: background .14s; }
.cal-agenda-row:hover { background: var(--bg-hover); }

.mini-avs { display: inline-flex; flex-shrink: 0; }
.mini-av {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center; font-size: 7.5px; font-weight: 700; color: #fff;
  border: 1.5px solid var(--surface); margin-left: -4px;
}
.cal-cell:not(.out):hover .mini-av { border-color: var(--bg); }
.cal-ev:hover .mini-av { border-color: var(--surface); }
.mini-av:first-child { margin-left: 0; }
.mini-av.more { background: var(--bg-sunken); color: var(--ink-2); }

.cal-hover {
  position: fixed; z-index: 90; width: 286px; padding: var(--space-group) var(--space-group) var(--space-item);
  background: var(--overlay);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--r-modal); box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 28px rgba(20,18,16,.16), 0 3px 8px rgba(20,18,16,.08);
  cursor: pointer; animation: cal-qa-pop var(--dur-over) var(--ease);
}
@keyframes hover-pop { from { opacity: 0; transform: scale(.97) translateY(2px); } to { opacity: 1; transform: none; } }
.cal-hover-beak { position: absolute; width: 14px; height: 14px; background: var(--overlay); }
.cal-hover.side-right .cal-hover-beak { left: -7px; border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 0 0 0 3px; transform: rotate(45deg); }
.cal-hover.side-left .cal-hover-beak { right: -7px; left: auto; border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 3px 0 0 0; transform: rotate(45deg); }
.cal-hover.side-below .cal-hover-beak { top: -7px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 3px 0 0 0; transform: rotate(45deg); }
.cal-hover-cat { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cal-hover-title { font-family: var(--font-serif, 'Newsreader', serif); font-size: var(--t-heading-size); font-weight: 500; margin: var(--space-inline) 0 var(--space-item); line-height: 1.2; color: var(--ink); }
.cal-hover-meta { display: flex; flex-direction: column; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); }
.cal-hover-people { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-item); margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.cal-hover-notes { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.5; margin: var(--space-item) 0 0; }
.cal-hover-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-tight); margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); white-space: nowrap; }

/* quick-add: compact anchored popover for click/drag-select on the calendar grid,
   standing in for the full "Add to calendar" modal until the user asks for more fields */
/* macOS-style anchored popover: frosted glass, a beak bridging it to the cell
   it came from, and a quick spring-in so it feels attached, not just placed. */
.cal-qa { position: fixed; z-index: 90; width: 268px; padding: var(--space-group) var(--space-group) var(--space-item); background: var(--overlay); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--r-modal); box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 28px rgba(20,18,16,.16), 0 3px 8px rgba(20,18,16,.08); transform-origin: var(--qa-ox, 20%) top; animation: cal-qa-pop var(--dur-over) var(--ease); }
.cal-qa.flipped { transform-origin: var(--qa-ox, 20%) bottom; }
.cal-qa-beak { position: absolute; top: -7px; width: 14px; height: 14px; background: var(--overlay); border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 3px 0 0 0; transform: rotate(45deg); }
.cal-qa.flipped .cal-qa-beak { top: auto; bottom: -7px; border-top: none; border-left: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 0 0 3px 0; }
.cal-qa-date { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-inline); }
.cal-qa input.cal-qa-title { width: 100%; border: none; border-bottom: 1.5px solid var(--border); background: transparent; font-family: var(--font-serif, 'Newsreader', serif); font-size: var(--t-heading-size); color: var(--ink); padding: 2px 0 var(--space-inline); transition: border-color var(--dur-micro) var(--ease); }
.cal-qa input.cal-qa-title:focus { outline: none; border-bottom-color: var(--accent); }
.cal-qa-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-top: var(--space-item); }
.cal-qa-more { border: none; background: none; padding: 0; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color var(--dur-micro) var(--ease); }
.cal-qa-more:hover { color: var(--accent); }
.cal-qa-actions { display: flex; align-items: center; gap: var(--space-tight); }
@keyframes cal-qa-pop { from { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cal-qa { animation: none; } }

/* ============================================================
   Planner — modern time-blocking day planner + Aria AI
   (NEVER a left colored border on blocks)
   ============================================================ */
.plan-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-item); margin-bottom: 20px; }
.plan-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-group) var(--space-group); box-shadow: var(--shadow-sm); }
.plan-stat-val { font-size: var(--t-title-size); font-weight: 700; letter-spacing: -0.02em; margin-top: var(--space-tight); line-height: 1; }
.plan-stat-bar { height: 4px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; margin-top: var(--space-inline); }
.plan-stat-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s var(--ease); }
.plan-stat-sub { font-size: var(--t-micro-size); margin-top: var(--space-inline); }

.plan-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-block); align-items: start; }
@media (max-width: 1180px){ .plan-layout { grid-template-columns: 1fr; } }

.plan-timeline { display: grid; grid-template-columns: 52px 1fr; padding: var(--space-item) var(--space-group) var(--space-group) var(--space-inline); }
.plan-gutter { display: flex; flex-direction: column; }
.plan-hr-label { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-right: var(--space-inline); transform: translateY(-7px); }
.plan-hr-label .mono { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.plan-hr-ap { font-size: 8.5px; color: var(--ink-4); font-weight: 600; }
.plan-grid { position: relative; }
.plan-slot { border-top: 1px solid var(--border-subtle); transition: background .12s; }
.plan-slot:last-child { border-bottom: 1px solid var(--border-subtle); }
.plan-slot.drag-over { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: var(--r-control); border-top-color: transparent; }
.plan-slot-hint { display: block; font-size: var(--t-micro-size); color: var(--ink-4); padding: var(--space-inline) var(--space-inline); font-style: italic; }

.plan-block {
  position: absolute; left: 6px; right: 4px; display: flex; gap: var(--space-inline);
  border-radius: var(--r-card); padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-item); cursor: grab; overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 24%, transparent), 0 1px 2px rgba(20,20,30,.04);
  transition: transform var(--dur-micro) var(--ease), box-shadow .15s, filter .15s;
}
.plan-block::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg, color-mix(in srgb, var(--bc) 12%, transparent), color-mix(in srgb, var(--bc) 4%, transparent)); pointer-events:none; }
.plan-block:hover { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 45%, transparent); z-index: 5; filter: brightness(0.98); }
.plan-block:active { cursor: grabbing; }
.plan-block-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: var(--space-tight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc) 16%, transparent); position: relative; }
.plan-block-body { min-width: 0; flex: 1; display: flex; flex-direction: column; position: relative; }
.plan-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); }
.plan-block-kind { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex: 1; min-width: 0; }
.plan-block-time { font-size: 9.5px; color: var(--ink-3); font-weight: 500; }
.plan-block-title { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); margin-top: 2px; }
.plan-block-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-top: auto; padding-top: var(--space-tight); }
.plan-block-dur { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 600; }
.plan-block-x { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 6px; border: none; background: var(--surface); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s, background .14s; box-shadow: var(--shadow-sm); }
.plan-block:hover .plan-block-x { opacity: 1; }
.plan-block-x:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }

.plan-now { position: absolute; left: -8px; right: 0; z-index: 6; display: flex; align-items: center; pointer-events: none; }
.plan-now-tag { background: var(--st-blocked-soft); color: var(--st-blocked-ink); font-size: 8.5px; font-weight: 700; padding: 1px var(--space-tight); border-radius: 4px; letter-spacing: .04em; }
.plan-now-line { flex: 1; height: 1.5px; background: var(--st-blocked); }

.plan-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; }

/* Aria */
.plan-aria { overflow: hidden; }
.plan-aria-hd { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-group); background: var(--accent-soft); }
.plan-aria-avatar { width: 32px; height: 32px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex-shrink: 0; }
.plan-aria-body { padding: var(--space-item) var(--space-group) var(--space-group); }
.plan-aria-insight { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--space-item); min-height: 19px; }
.plan-aria-actions { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-bottom: var(--space-item); }
.plan-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: all .14s; white-space: nowrap; }
.plan-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: none; }
.plan-aria-ask { display: flex; align-items: center; gap: var(--space-tight); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); }
.plan-typing { display: inline-flex; gap: var(--space-tight); align-items: center; }
.plan-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .4; animation: plan-bounce 1s infinite; }
.plan-typing i:nth-child(2){ animation-delay: .15s; } .plan-typing i:nth-child(3){ animation-delay: .3s; }
@keyframes plan-bounce { 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-4px); opacity:1; } }

/* inbox pool */
.plan-pool { padding: var(--space-inline); display: flex; flex-direction: column; gap: var(--space-tight); max-height: 420px; overflow-y: auto; min-height: 90px; }
.plan-pool-item { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-md); background: var(--surface); cursor: grab; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .14s, transform .14s; }
.plan-pool-item:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: none; background: var(--bg-hover); }
.plan-pool-item:active { cursor: grabbing; }
.plan-pool-grip { color: var(--ink-4); flex-shrink: 0; }
.plan-pool-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.plan-pool-title { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.plan-pool-empty { text-align: center; padding: 28px var(--space-group); }

/* ============================================================
   Task comments — rich threads, attachments, reactions, composer
   (NEVER a left colored border)
   ============================================================ */
.cmt-wrap { display: flex; flex-direction: column; }
.cmt-list { display: flex; flex-direction: column; gap: var(--space-tight); }
.cmt-empty { text-align: center; padding: 36px var(--space-group); color: var(--ink-3); }
/* §12: two lines, left aligned, sitting right above the composer. The old
   centred illustration pushed the composer below the fold on a short panel. */
.cmt-empty--compact { text-align: left; padding: var(--space-item) 0 var(--space-group); }
.cmt-empty-lead { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.cmt-empty-sub { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-tight); }
/* §52a: the way back into a long thread. */
.cmt-earlier { display: block; width: 100%; padding: var(--space-inline); margin-bottom: var(--space-item); border: none; border-radius: var(--r-control); background: none; font: inherit; font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); cursor: pointer; }
.cmt-earlier:hover { background: var(--bg-hover); color: var(--ink); }

.cmt { display: flex; gap: var(--space-item); padding: var(--space-item) var(--space-inline); border-radius: var(--r-md); position: relative; transition: background .14s; }
.cmt-in { animation: cmtIn var(--dur-over) var(--ease) both; }
@keyframes cmtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cmt-in { animation: none; } }
.cmt:hover { background: var(--bg-hover); }
.cmt-main { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: var(--space-inline); flex-wrap: wrap; margin-bottom: var(--space-tight); }
.cmt-author { font-weight: 600; font-size: var(--t-label-size); color: var(--ink); }
.cmt-role { font-size: var(--t-micro-size); color: var(--ink-4); }
.cmt-time { font-size: var(--t-micro-size); color: var(--ink-4); margin-left: auto; }
.cmt-edited { color: var(--ink-4); font-style: italic; }
.cmt-resolved-tag { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--c-olive); }
.cmt-main.cmt-resolved { opacity:.62; }
.cmt-main.cmt-resolved .cmt-text { text-decoration:line-through; text-decoration-color:var(--ink-4); }
.cmt-text { font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
/* Aria helper-comment actions (close it out / wrap project / not now) */
.cmt-aria-actions { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-inline); }
.cmt-aria-act { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.cmt-aria-act:hover:not(:disabled) { background: var(--bg-sunken); border-color: var(--line-2, var(--line)); }
.cmt-aria-act.primary { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.cmt-aria-act.primary:hover:not(:disabled) { background: var(--accent-soft); }
.cmt-aria-act:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: not-allowed; }
.cmt-aria-acted { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-4); }
.cmt-link { color: var(--accent); font-weight: 550; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.cmt-link:hover { border-bottom-color: var(--accent); }
/* inline GIF (pasted image/gif or a .gif link) */
.cmt-gif { position: relative; display: inline-block; vertical-align: middle; margin: var(--space-tight) 0; max-width: 240px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); line-height: 0; }
.cmt-gif img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.cmt-gif-tag { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 9px; font-weight: 800; padding: 1px var(--space-tight); border-radius: 4px; letter-spacing: .06em; }
/* ── @mention — the app-wide "tagged person" highlight (FB / IG / Slack style) ──
   Flows inline with text (blue, semibold, soft lit pill + hairline rim), is
   clickable to open the person's profile, and reads the same everywhere.
   Hover gets a calm sheen; self-mentions settle with a warm pulse once.
   Variants: is-me (warm amber), is-aria (violet), is-entity (teal).
   Single source of truth; .mention-hl / .an-mention / .vr-mention inherit. */
.mention, .mention-hl {
  --_m-fg: var(--mention-fg);
  --_m-bg: var(--mention-bg);
  --_m-bg-h: var(--mention-bg-hover);
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 1px var(--space-tight); margin: 0 0.5px; border-radius: 6px;
  color: var(--_m-fg);
  font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; white-space: normal;
  background-color: var(--_m-bg);
  background-image:
    linear-gradient(115deg,
      transparent 0%,
      color-mix(in srgb, #fff 58%, transparent) 44%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--_m-fg) 11%, transparent) 0%,
      transparent 64%);
  background-size: 70% 100%, auto;
  background-position: -140% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_m-fg) 16%, transparent);
  transition: background-color var(--dur-micro) var(--ease), background-position .55s var(--ease),
    box-shadow var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);
}
.mention[role="button"], .mention-hl[role="button"] { cursor: pointer; }
.mention[role="button"]:hover, .mention-hl[role="button"]:hover {
  background-color: var(--_m-bg-h);
  background-position: 160% 0, 0 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_m-fg) 30%, transparent);
  filter: saturate(1.08);
}
.mention[role="button"]:active, .mention-hl[role="button"]:active {
  filter: saturate(1.02) brightness(.98);
}
.mention:focus-visible, .mention-hl:focus-visible { outline: 2px solid var(--_m-fg); outline-offset: 1px; }
/* you were mentioned — warm "this is about you" cue */
.mention.is-me {
  --_m-fg: var(--mention-me-fg);
  --_m-bg: var(--mention-me-bg);
  --_m-bg-h: var(--mention-me-bg-hover);
}
.mention.is-me:focus-visible { outline-color: var(--mention-me-fg); }
/* Aria — the AI assistant */
.mention.is-aria {
  --_m-fg: var(--mention-aria-fg);
  --_m-bg: var(--mention-aria-bg);
  --_m-bg-h: var(--mention-aria-bg-hover);
}
.mention.is-aria:focus-visible { outline-color: var(--mention-aria-fg); }
/* a linked record (@a client/project/task/doc/lead/invoice) — teal, distinct from a tagged person */
.mention.is-entity {
  --_m-fg: var(--mention-entity-fg);
  --_m-bg: var(--mention-entity-bg);
  --_m-bg-h: var(--mention-entity-bg-hover);
}
.mention.is-entity:focus-visible { outline-color: var(--mention-entity-fg); }
/* soft settle when a mention first paints — once, calm, Editorial */
@media (prefers-reduced-motion: no-preference) {
  .mention, .mention-hl {
    animation: mention-settle .58s var(--ease) backwards;
  }
  .mention.is-me {
    animation: mention-settle .58s var(--ease) backwards,
               mention-you-glow 1.7s ease-out .15s 1;
  }
}
@keyframes mention-settle {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mention-you-glow {
  0%   { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 16%, transparent),
                     0 0 0 0 color-mix(in srgb, var(--mention-me-fg) 0%, transparent); }
  45%  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 34%, transparent),
                     0 0 0 5px color-mix(in srgb, var(--mention-me-fg) 14%, transparent); }
  100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 16%, transparent),
                     0 0 0 0 color-mix(in srgb, var(--mention-me-fg) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .mention, .mention-hl { animation: none; transition: background-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
  .mention[role="button"]:hover, .mention-hl[role="button"]:hover { filter: none; background-position: -140% 0, 0 0; }
}
/* avatar / Aria-mark prefixed: sit as an inline chip; glyph pops in with the pill */
.mention:has(> .avatar),
.mention:has(> .amark),
.mention:has(> .mention-aria-mk) {
  display: inline-flex; align-items: center; gap: var(--space-tight); padding: 1px var(--space-tight) 1px var(--space-tight); vertical-align: -3px;
}
.mention .avatar.xs {
  width: 16px; height: 16px; font-size: 8px; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--_m-fg) 28%, transparent);
  transition: box-shadow var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.mention[role="button"]:hover .avatar.xs {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--_m-fg) 48%, transparent);
}
/* tiny Aria mark inside @Aria chips — calm, no tile, matches person avatar scale */
.mention > .amark.mention-amark,
.mention .mention-aria-mk,
.mention .mention-aria-mk > .amark {
  width: 13px; height: 13px; flex-shrink: 0; display: inline-flex;
  vertical-align: middle; pointer-events: none;
}
.mention .mention-aria-mk { align-items: center; justify-content: center; }
.mention.is-aria[role="button"]:hover > .amark.mention-amark,
.mention.is-aria[role="button"]:hover .mention-aria-mk > .amark {
  filter: saturate(1.12);
}
@media (prefers-reduced-motion: no-preference) {
  .mention > .avatar,
  .mention > .amark.mention-amark,
  .mention > .mention-aria-mk {
    animation: mention-av-in .5s var(--ease) backwards;
    animation-delay: .06s;
  }
}
@keyframes mention-av-in {
  0%   { opacity: 0; transform: scale(.55); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}
/* ephemeral confirm chip when someone is picked from the @ menu */
.mention-pick-flash {
  position: fixed; z-index: 9998; pointer-events: none;
  transform: translate(-50%, -120%);
  animation: mention-pick-pop .72s var(--ease) both;
}
@keyframes mention-pick-pop {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(.88); }
  28%  { opacity: 1; transform: translate(-50%, -130%) scale(1.04); }
  70%  { opacity: 1; transform: translate(-50%, -140%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .mention > .avatar,
  .mention > .amark.mention-amark,
  .mention > .mention-aria-mk { animation: none; }
  .mention-pick-flash { animation: none; opacity: 0; }
}
/* mention picker rows: name inherits the same identity tint */
.mention-opt-name.mention-opt-chip,
.mention-opt .mention,
.mention-row .mention {
  pointer-events: none;
  vertical-align: baseline;
}
/* ── Live mention sheen inside inputs / textareas ──
   Backdrop mirrors plain typed @tokens (no avatar width) so caret stays aligned.
   Aria gets an absolute petal mark that does not shift metrics. */
.mention-ta-parent { position: relative; }
.mention-ta-back {
  position: absolute; z-index: 0; pointer-events: none;
  overflow: hidden; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  background: transparent; margin: 0;
  opacity: 0;
}
.mention-ta-back.on { opacity: 1; }
.mention-ta-front {
  position: relative; z-index: 1;
}
.mention-ta-front.mention-ta-on {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink);
  /* See through to .mention-ta-back (fill is painted there). Opaque inputs
     like .fcmt-input otherwise hide the sheen and the draft goes "white." */
  background-color: transparent !important;
  background-image: none !important;
}
.mention-ta-front.mention-ta-on::placeholder {
  color: var(--ink-4);
  -webkit-text-fill-color: var(--ink-4);
}
.mention-ta-back .mention {
  padding: 0 1px; margin: 0;
  vertical-align: baseline;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.mention-ta-back .mention.is-aria { position: relative; }
.mention-ta-back .mention-ta-amark {
  position: absolute; right: 100%; top: 50%;
  width: 10px; height: 10px; margin: 0;
  transform: translate(-2px, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none; line-height: 0;
}
.mention-ta-back .mention-ta-amark svg { width: 10px; height: 10px; display: block; overflow: visible; }
/* settle pulse when a @token just completed in the composer */
@media (prefers-reduced-motion: no-preference) {
  .mention-ta-back .mention.mention-just {
    animation: mention-settle .5s var(--ease) backwards;
  }
  .mention-ta-back .mention.is-me.mention-just {
    animation: mention-settle .5s var(--ease) backwards,
               mention-you-glow 1.5s ease-out .08s 1;
  }
  .mention-ta-back .mention.is-aria.mention-just {
    animation: mention-settle .5s var(--ease) backwards,
               mention-aria-glow 1.45s ease-out .08s 1;
  }
}
@keyframes mention-aria-glow {
  0%   { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-aria-fg) 16%, transparent),
                     0 0 0 0 color-mix(in srgb, var(--mention-aria-fg) 0%, transparent); }
  45%  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-aria-fg) 36%, transparent),
                     0 0 0 5px color-mix(in srgb, var(--mention-aria-fg) 14%, transparent); }
  100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-aria-fg) 16%, transparent),
                     0 0 0 0 color-mix(in srgb, var(--mention-aria-fg) 0%, transparent); }
}
/* notification center — "mentioned you" gets a calm amber settle */
.ntf-is-mention:not(.read) { animation: ntf-mention-flash 1.5s ease-out 1; }
.ntf-is-mention .ntf-mention-you {
  display: inline;
  padding: 0 var(--space-tight); margin: 0 1px; border-radius: 5px;
  background: var(--mention-me-bg); color: var(--mention-me-fg);
  font-weight: 650; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 18%, transparent);
}
.ntf-is-mention .ntf-mention-ic {
  color: var(--mention-me-fg) !important;
}
/* Jump-in chip on unread mention rows (bell + Notifications Center) */
.ntf-jump {
  flex-shrink: 0; align-self: center;
  margin-top: 2px; padding: 2px var(--space-inline); border-radius: 6px;
  font-size: var(--t-micro-size); font-weight: 700; letter-spacing: -0.01em;
  color: var(--mention-me-fg); background: var(--mention-me-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 18%, transparent);
  white-space: nowrap; pointer-events: none;
}
.ntf-quiet-banner {
  display: flex; align-items: center; gap: var(--space-inline);
  margin: var(--space-tight) var(--space-tight) var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control);
  background: color-mix(in srgb, var(--mention-me-fg) 8%, var(--bg-sunken));
  color: var(--ink-2); border: none; width: auto; text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 12%, transparent);
  font-size: var(--t-caption-size); font-weight: 500; line-height: 1.35;
}
.ntf-quiet-banner svg, .ntf-quiet-banner .icn { color: var(--mention-me-fg); flex-shrink: 0; }
.ntf-quiet-banner--wide {
  width: 100%; margin: 0 0 var(--space-group); padding: var(--space-item) var(--space-item); border-radius: var(--r-control);
  cursor: pointer; font: inherit; font-size: var(--t-label-size); font-weight: 550;
}
.ntf-quiet-banner--wide:hover { filter: brightness(0.99); }
.ntf-quiet-manage {
  margin-left: auto; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-size: var(--t-caption-size); font-weight: 700; color: var(--mention-me-fg);
}
.ntf-quiet-manage:hover { color: var(--ink); }
.ntf-quiet-banner .grow { min-width: 0; }

/* Profile name nudge — frosted Apple-style banner below top chrome */
.pname-banner-wrap {
  padding: 0 var(--space-group);
  max-width: 1120px;
  margin: 0 auto;
  animation: pnameBannerIn .42s var(--ease) both;
}
.pname-banner-wrap.is-out { animation: pnameBannerOut .22s ease-in both; pointer-events: none; }
@keyframes pnameBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pnameBannerOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pname-banner-wrap, .pname-banner-wrap.is-out { animation: none; }
}
.pname-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-item);
  padding: var(--space-item) var(--space-item) var(--space-item) var(--space-item);
  margin: var(--space-tight) 0 2px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset,
    0 10px 28px rgba(15, 18, 12, .06);
}
.dark .pname-banner {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
    0 12px 32px rgba(0, 0, 0, .28);
}
.pname-banner-av { flex-shrink: 0; display: grid; place-items: center; }
.pname-banner-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pname-banner-t {
  font-family: var(--font-serif);
  font-size: var(--t-strong-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.pname-banner-s { font-size: var(--t-caption-size); line-height: 1.35; color: var(--ink-3); }
.pname-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  flex-shrink: 0;
}
.pname-banner-cta {
  border: none;
  cursor: pointer;
  height: 32px;
  padding: 0 var(--space-group);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--t-caption-size);
  font-weight: 650;
  letter-spacing: -.01em;
  transition: filter .14s, transform .14s;
}
.pname-banner-cta:hover { filter: brightness(1.04); }
.pname-banner-cta:active { transform: scale(.98); }
.pname-banner-ghost {
  border: none;
  background: none;
  cursor: pointer;
  height: 32px;
  padding: 0 var(--space-inline);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--t-caption-size);
  font-weight: 600;
  transition: background .12s, color .12s;
}
.pname-banner-ghost:hover { background: var(--bg-hover); color: var(--ink-2); }
.pname-banner-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.pname-banner-x:hover { background: var(--bg-hover); color: var(--ink-2); }
@media (max-width: 760px) {
  .pname-banner { flex-wrap: wrap; align-items: flex-start; padding: var(--space-item) var(--space-item) var(--space-inline); }
  .pname-banner-actions { width: 100%; padding-left: 44px; justify-content: flex-start; }
  .pname-banner-x { position: absolute; right: 10px; top: 10px; }
  .pname-banner-wrap { position: relative; }
  .pname-banner { position: relative; }
}
.fy-mentions-quiet {
  display: flex; align-items: center; gap: var(--space-inline);
  margin: 0 0 var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control);
  background: color-mix(in srgb, var(--mention-me-fg) 8%, var(--bg-sunken));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-me-fg) 12%, transparent);
  color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; line-height: 1.35;
}
.fy-mentions-quiet svg, .fy-mentions-quiet .icn { color: var(--mention-me-fg); flex-shrink: 0; }
.fy-mentions-quiet-act {
  margin-left: auto; flex-shrink: 0; border: none; background: transparent;
  color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; padding: 0;
}
.fy-mentions-quiet-act:hover { color: var(--ink); }
.fy-mentions-caught {
  display: flex; align-items: center; gap: var(--space-inline);
  margin: 0 0 var(--space-inline); padding: var(--space-inline) 2px;
  color: var(--ink-3); font-size: var(--t-label-size); font-weight: 500; line-height: 1.4;
}
.fy-mentions-caught svg, .fy-mentions-caught .icn { color: var(--ink-4); flex-shrink: 0; }
@keyframes ntf-mention-flash {
  0%   { background: color-mix(in srgb, var(--mention-me-fg) 14%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ntf-is-mention:not(.read) { animation: none; }
}

/* ============================================================
   Notifications dropdown — redesigned (tabs · rich rows · footer)
   ============================================================ */
.ntf2 { overflow: hidden; }
.ntf2-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-group) var(--space-group) var(--space-item); }
.ntf2-title { font-size: var(--t-heading-size); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ntf2-markall { border: none; background: transparent; color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: 2px; border-radius: 6px; }
.ntf2-markall:hover { text-decoration: underline; }
.ntf2-markall:disabled { color: var(--ink-4); cursor: default; text-decoration: none; }
.ntf2-tabs { display: flex; align-items: center; gap: var(--space-tight); padding: 0 var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.ntf2-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 550; cursor: pointer; padding: var(--space-inline) var(--space-tight) var(--space-inline); }
.ntf2-tab:hover { color: var(--ink); }
.ntf2-tab.on { color: var(--ink); font-weight: 650; }
.ntf2-tab.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.ntf2-tab-badge { min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: var(--st-blocked-soft); color: var(--st-blocked-ink); font-size: var(--t-micro-size); font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.ntf2-tabs-div { width: 1px; height: 15px; background: var(--border); margin: 0 var(--space-tight); flex-shrink: 0; }
.ntf2-filter { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; }
.ntf2-filter:hover { background: var(--bg-hover); color: var(--ink-2); }
.ntf2-list { max-height: 424px; overflow-y: auto; padding: var(--space-tight) 0; }
/* Notification Center page: rows sit in the page flow (no popover scroll cap), one hairline card per bucket. */
.ntf2-list-page { max-height: none; overflow: visible; padding: 0; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.ntf2-list-page .ntf2-rowmain { padding: var(--space-item) var(--space-group); }
.ntf2-list-page .ntf2-acts { padding: 0 var(--space-group) var(--space-group) 56px; }
.ntf2-row { position: relative; }
.ntf2-row + .ntf2-row { border-top: 1px solid var(--border-subtle); }
.ntf2-rowmain { display: flex; align-items: flex-start; gap: var(--space-item); width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: var(--space-item) var(--space-group); transition: background var(--dur-micro) var(--ease); }
.ntf2-rowmain:hover { background: var(--bg-hover); }
.ntf2-row.read .ntf2-rowmain { opacity: .72; }
.ntf2-av { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.ntf2-av .avatar { box-shadow: 0 0 0 1px var(--border-subtle); }
.ntf2-avstack > span { border-radius: 50%; position: relative; box-shadow: 0 0 0 2px var(--surface); }
.ntf2-unread { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--st-blocked); box-shadow: 0 0 0 2px var(--surface); }
.ntf2-unread.mention { background: var(--mention-me-fg); }
.ntf2-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-tight); }
.ntf2-text { font-size: var(--t-label-size); line-height: 1.4; color: var(--ink-2); }
.ntf2-text b { font-weight: 650; color: var(--ink); }
.ntf2-meta { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-4); min-width: 0; }
.ntf2-time { flex-shrink: 0; white-space: nowrap; }
.ntf2-mdot { color: var(--ink-4); flex-shrink: 0; }
.ntf2-ctx { display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-weight: 550; }
.ntf2-ctx .icn { flex-shrink: 0; }
.ntf2-quote, .ntf2-file { display: inline-flex; align-items: center; margin-top: var(--space-tight); max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-inline) var(--space-item); font-size: var(--t-caption-size); color: var(--ink-2); background: var(--surface); }
.ntf2-quote { line-height: 1.4; }
.ntf2-file { gap: var(--space-inline); font-weight: 550; }
.ntf2-file .icn { color: var(--ink-4); flex-shrink: 0; }
.ntf2-file-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf2-file i { color: var(--ink-4); font-style: normal; }
.ntf2-jump { flex-shrink: 0; align-self: center; font-size: var(--t-micro-size); font-weight: 700; color: var(--mention-me-fg); }
.ntf2-acts { display: flex; gap: var(--space-inline); padding: 0 var(--space-group) var(--space-item) 56px; }
.ntf2-deny, .ntf2-approve { height: 36px; padding: 0 20px; border-radius: var(--r-control); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, filter .12s; }
.ntf2-deny { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.ntf2-deny:hover { background: var(--bg-hover); }
.ntf2-approve { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg, #fff); }
.ntf2-approve:hover { filter: brightness(1.06); }
.ntf2-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: 44px 20px; text-align: center; color: var(--ink-4); }
.ntf2-empty .icn { color: var(--ink-4); }
.ntf2-empty b { font-size: var(--t-label-size); color: var(--ink-2); font-weight: 650; }
.ntf2-empty span { font-size: var(--t-caption-size); }
.ntf-welcome-actions { display: flex; flex-wrap: wrap; gap: var(--space-inline); justify-content: center; margin-top: var(--space-inline); }
.ntf2-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border-subtle); }
.ntf2-foot-hint { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-4); }
.ntf2-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 var(--space-tight); border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--ink-3); }
.ntf2-manage { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight); border-radius: var(--r-control); }
.ntf2-manage .icn { color: var(--ink-4); }
.ntf2-manage:hover { color: var(--ink); }

/* ── Mention hovercard — hover a @mention to preview the person + quick actions ── */
.mention-hc { position: fixed; z-index: 690; width: 250px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-item) var(--space-item) var(--space-item); opacity: 0; transform: translateY(4px) scale(.985); transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); pointer-events: auto; }
.mention-hc.mention-hc-in { opacity: 1; transform: none; }
.mention-hc-hd { display: flex; align-items: center; gap: var(--space-item); }
.mention-hc-av { position: relative; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: var(--t-body-size); font-weight: 700; overflow: hidden; }
.mention-hc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mention-hc-av-aria { background: var(--mention-aria-fg); }
.mention-hc-av-entity { background: var(--mention-entity-fg); border-radius: var(--r-control); }
.mention-hc-init { line-height: 1; }
.mention-hc-id { min-width: 0; flex: 1; }
.mention-hc-name { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: var(--space-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-hc-metag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mention-me-fg); background: var(--mention-me-bg); padding: 1px var(--space-tight); border-radius: 5px; }
.mention-hc-role { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-hc-pres { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); font-size: var(--t-caption-size); color: var(--ink-2); }
.mention-hc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mention-hc-sub { color: var(--ink-4); }
.mention-hc-acts { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); }
.mention-hc-btn { flex: 1; height: 31px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.mention-hc-btn:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--border-strong); }
.mention-hc-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.mention-hc-btn.primary:hover { background: var(--accent-600); color: var(--accent-fg); }
.mention-hc-you { flex: 1; text-align: center; font-size: var(--t-micro-size); color: var(--ink-4); }
.mention-menu { position: absolute; left: 44px; bottom: calc(100% + 8px); width: 250px; z-index: 92; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--space-tight); animation: pop-menu var(--dur-over) var(--ease); }
.mention-opt { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; }
.mention-opt.on { background: var(--accent-soft); }
.mention-opt-name { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-opt-role { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }

/* attachments */
.cmt-atts { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-inline); }
.att { border-radius: var(--r-md); overflow: hidden; max-width: 100%; }
.att-img { width: 240px; max-width: 100%; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); transition: transform .15s, box-shadow .15s; }
.att-img:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border-strong); }
.att-img img { width: 100%; display: block; max-height: 220px; object-fit: cover; }
.att-img-cap { display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-3); border-top: 1px solid var(--border-subtle); }
.att-gif { width: 150px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-tight); position: relative; border: 1px solid var(--border); }
.att-gif-emoji { font-size: var(--fs-3xl); animation: gif-bob 1.4s ease-in-out infinite; }
@keyframes gif-bob { 0%,100%{ transform: translateY(-3px) rotate(-4deg); } 50%{ transform: translateY(3px) rotate(4deg); } }
.att-gif-tag { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9px; font-weight: 700; padding: 1px var(--space-tight); border-radius: 4px; letter-spacing: .06em; }
.att-gif-label { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); }
.att-file { display: flex; align-items: center; gap: var(--space-inline); width: 250px; max-width: 100%; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); background: var(--surface); text-decoration: none; transition: border-color .14s, transform .14s; }
.att-file:hover { border-color: var(--accent); transform: none; }
.att-file-ic { position: relative; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.att-file-ext { position: absolute; bottom: -3px; right: -3px; font-size: 7px; font-weight: 700; background: var(--accent); color: var(--accent-fg); padding: 1px var(--space-tight); border-radius: 3px; }
.att-file-name { display: block; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); }
.att-file-size { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }

/* link preview */
.link-card { display: flex; align-items: center; gap: var(--space-item); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-decoration: none; max-width: 360px; transition: border-color .14s, transform .14s, box-shadow .14s; }
.link-card:hover { border-color: var(--accent); transform: none; box-shadow: none; background: var(--bg-hover); }
.link-fav { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--t-strong-size); flex-shrink: 0; }
.link-title { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.link-dom { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }

/* reactions */
.cmt-reactions { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-inline); }
.reaction-pill { display: inline-flex; align-items: center; gap: var(--space-tight); height: 26px; padding: 0 var(--space-inline); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: transform .12s, background .12s, border-color .12s; }
.reaction-pill:hover { transform: none; background: var(--bg-hover); }
.reaction-pill.mine { background: var(--accent-soft); border-color: var(--accent); }
.reaction-emo { font-size: var(--t-label-size); }
.reaction-n { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); }
.reaction-pill.mine .reaction-n { color: var(--accent); }

/* hover actions */
.cmt-actions { position: absolute; top: 8px; right: 10px; display: flex; gap: 2px; padding: var(--space-tight); background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(-3px); transition: opacity .14s, transform .14s; }
.cmt:hover .cmt-actions { opacity: 1; transform: none; }
.cmt-act { width: 28px; height: 28px; border-radius: var(--r-control); border: none; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.cmt-act:hover { background: var(--bg-hover); color: var(--ink); }
.cmt-act.danger:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }

/* inline edit */
.cmt-edit-ta { width: 100%; min-height: 64px; resize: vertical; font-size: var(--t-label-size); line-height: 1.5; }

/* popovers (emoji / react / gif) */
.cmt-pop-scrim { position: fixed; inset: 0; z-index: 89; }
.cmt-pop { position: absolute; z-index: 90; top: calc(100% + 6px); right: 0; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-inline); animation: pop-menu var(--dur-over) var(--ease); transform-origin: top right; }
.cmt-pop-hd { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 2px var(--space-tight) var(--space-inline); }
.emoji-pop { width: 248px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.emoji-btn { width: 28px; height: 28px; border-radius: var(--r-control); border: none; background: none; font-size: var(--t-heading-size); cursor: pointer; display: grid; place-items: center; transition: transform .1s, background .1s; }
.emoji-btn:hover { background: var(--bg-hover); transform: scale(1.18); }
.gif-pop { width: 280px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-tight); }
.gif-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-tight); height: 70px; border-radius: var(--r-control); border: 1px solid var(--border); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.gif-tile:hover { transform: none; box-shadow: none; background: var(--bg-hover); }
.gif-emoji { font-size: var(--t-title-size); }
.gif-label { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }

/* composer */
.cmt-composer { position: sticky; bottom: 0; margin-top: var(--space-group); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); background: var(--surface); }
.composer-staged { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.staged-chip { display: flex; align-items: center; gap: var(--space-inline); max-width: 220px; padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.staged-chip img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.staged-ic { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-strong-size); }
.staged-name { font-size: var(--t-micro-size); color: var(--ink-2); }
.staged-x { width: 20px; height: 20px; border-radius: 6px; border: none; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.staged-x:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.composer-link { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.composer-box { display: flex; gap: var(--space-inline); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-inline) var(--space-item); box-shadow: 0 1px 2px rgba(32, 33, 36, .04); transition: border-color .14s, box-shadow .14s; }
.composer-box:focus-within { border-color: var(--accent); }
.composer-as { display: flex; align-items: center; gap: var(--space-tight); padding: 2px var(--space-tight) 2px 2px; border: none; background: none; border-radius: 999px; cursor: pointer; transition: background .12s; }
.composer-as:hover { background: var(--bg-hover); }
.cmt-as-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 232px; z-index: 90; max-height: 280px; overflow-y: auto; }
.cmt-assigned-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex-shrink: 0; }
.composer-input { border: none !important; background: transparent !important; box-shadow: none !important; resize: none; padding: var(--space-tight) 0 !important; height: auto; min-height: 26px; line-height: 1.5; font-size: var(--t-label-size); flex: 1; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-top: var(--space-inline); }
/* §12: at rest the toolbar row collapses entirely, so the composer is a single
   line and a placeholder rather than a word processor waiting to be used. */
.composer-toolbar.is-resting { margin-top: 0; min-height: 0; }
/* §12: edit and delete are contextual. Gated on hover capability rather than a
   width breakpoint so touch, which cannot hover at any size, always shows them. */
@media (hover: hover) {
  .cmt-bar-secondary--hover { opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
  .cmt:hover .cmt-bar-secondary--hover,
  .cmt:focus-within .cmt-bar-secondary--hover { opacity: 1; }
}
.composer-tools { display: flex; gap: 2px; }
.composer-tool { width: 34px; height: 34px; border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; position: relative; transition: background .12s, color .12s; }
.composer-tool:hover { background: var(--bg-hover); color: var(--accent); }
.composer-tool.on { background: var(--bg-hover); color: var(--accent); }
.composer-tool[data-tip]::after,
.cmt-reply-tool[data-tip]::after,
.fcmt-send[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.composer-tool[data-tip]:hover::after,
.composer-tool[data-tip]:focus-visible::after,
.cmt-reply-tool[data-tip]:hover::after,
.cmt-reply-tool[data-tip]:focus-visible::after,
.fcmt-send[data-tip]:hover::after,
.fcmt-send[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* comment attachment: Stelaah design (canvas board) */
.att-design { display: flex; align-items: center; gap: var(--space-inline); width: 250px; max-width: 100%; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); transition: border-color .14s, transform .14s; }
.att-design:hover { border-color: var(--c-mauve); transform: none; background: var(--bg-hover); }
.att-design-ic { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
/* design picker popover (comment composer) */
.cmt-designpop { position: absolute; z-index: 90; bottom: calc(100% + 8px); left: 0; width: 300px; max-width: 86vw; background: var(--overlay, var(--surface)); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.cmt-designpop-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-item) var(--space-item) var(--space-inline); }
.cmt-designpop-search { display: flex; align-items: center; gap: var(--space-inline); margin: 0 var(--space-item) var(--space-tight); padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.cmt-designpop-search .icn { color: var(--ink-4); flex-shrink: 0; }
.cmt-designpop-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: var(--t-label-size); color: var(--ink); }
.cmt-designpop-list { max-height: 280px; overflow-y: auto; padding: var(--space-tight) var(--space-inline) var(--space-inline); display: flex; flex-direction: column; gap: 1px; }
.cmt-designpop-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; text-align: left; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.cmt-designpop-row:hover { background: var(--bg-hover); }
.cmt-designpop-ic { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.cmt-designpop-t { display: block; font-size: var(--t-label-size); font-weight: 560; color: var(--ink); }
.cmt-designpop-s { display: block; font-size: var(--t-micro-size); color: var(--ink-4); }
.cmt-designpop-empty { padding: var(--space-group) var(--space-item); text-align: center; font-size: var(--t-caption-size); color: var(--ink-4); }
.composer-gif { font-size: var(--t-micro-size); font-weight: 800; letter-spacing: .03em; }
.composer-hint { font-size: var(--t-micro-size); color: var(--ink-4); }

/* task calendar + timeline chips (no left border) */
.tcal-ev { display: flex; align-items: flex-start; gap: var(--space-tight); border-radius: var(--r-control); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); margin-bottom: var(--space-tight); cursor: grab; background: color-mix(in srgb, var(--evc, var(--accent)) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--evc, var(--accent)) 16%, transparent); transition: transform .12s, box-shadow .12s, background .12s; }
.tcal-ev:hover { transform: none; background: color-mix(in srgb, var(--evc, var(--accent)) 19%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--evc, var(--accent)) 32%, transparent); }
.tcal-ev-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: var(--space-tight); }
.tcal-ev-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.tcal-ev-name { flex: 1; min-width: 0; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink); line-height: 1.25; }
.tcal-ev-type { display: block; max-width: 100%; font-size: 9.5px; font-weight: 500; color: var(--ink-4); line-height: 1.2; margin-top: 1px; }
.tcal-ev-body + * { flex-shrink: 0; transform: scale(.82); transform-origin: right top; margin-top: 1px; }
.tcal-ev.over { background: color-mix(in srgb, var(--st-blocked) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-blocked) 28%, transparent); }
.tcal-ev.over .tcal-ev-name { color: var(--st-blocked); }
.ttl-bar { box-shadow: var(--shadow-xs); transition: transform .12s, box-shadow .12s; }
.ttl-bar:hover { transform: none; box-shadow: none; filter: brightness(0.98); }

/* ============================================================
   Avatar picker
   ============================================================ */
.avatar-picker-modal { max-height: min(780px, calc(100vh - 28px)); }
.avatar-picker-modal .modal-body { display:flex; padding: 0; overflow: hidden; }
.avatar-picker-modal .modal-foot { flex-shrink: 0; }
.av-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); align-items: stretch; flex:1 1 auto; width:100%; min-height:0; }
.av-side { display: flex; flex-direction: column; gap: var(--space-item); align-items: center; padding:var(--space-group) 20px; border-right:1px solid var(--border-subtle); overflow-y:auto; }
.av-preview-wrap { position: relative; }
.av-preview-wrap:hover .av-preview { box-shadow: var(--shadow-md), 0 0 0 1px var(--border-strong); }
.av-preview { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--shadow-md); background: var(--bg-sunken); transition: box-shadow .14s; }
.av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-crop-controls { display:grid; grid-template-columns:88px 1fr; gap:var(--space-inline) var(--space-inline); width:100%; align-items:center; }
.av-crop-controls label { font-size:var(--t-micro-size) !important; }
.av-crop-controls input { width:100%; }
.av-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-item) var(--space-item); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; cursor: pointer; text-align: center; transition: border-color .14s, background .14s; }
.av-drop:hover, .av-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.av-main { min-width:0; padding:var(--space-group) 20px; overflow-y:auto; }
.av-tile-check { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 2px solid var(--surface); }
.av-identity { width:100%; display:flex; flex-direction:column; gap:var(--space-inline); padding-top:var(--space-tight); }
.av-section-label { display:flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:700; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; }
.av-source { width:100%; min-height:54px; display:grid; grid-template-columns:30px minmax(0,1fr) 16px; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-inline); border:1px solid var(--border-subtle); border-radius:var(--r-control); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.av-source:hover:not(:disabled) { background:var(--bg-hover); }
.av-source.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); }
.av-source:disabled { color:var(--disabled-fg); cursor:not-allowed; }
.av-source img,.av-google-badge { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.av-google-badge { display:grid; place-items:center; background:#fff; border:1px solid var(--border-subtle); color:#4285f4; font-size:var(--t-heading-size); font-weight:800; font-family:Arial,sans-serif; }
.av-source span:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
.av-source b { font-size:var(--t-caption-size); font-weight:650; }
.av-source small { margin-top:2px; overflow:hidden; color:var(--ink-4); font-size:var(--t-micro-size); text-overflow:ellipsis; white-space:nowrap; }
.av-source-note { margin:2px 2px 0; color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.4; }
.av-studio-panel { display:flex; flex-direction:column; gap:var(--space-item); min-height:0; }
.av-studio-head { display:flex; align-items:flex-start; gap:var(--space-inline); padding-bottom:var(--space-item); border-bottom:1px solid var(--border-subtle); }
.av-studio-head>svg { color:var(--accent); flex-shrink:0; margin-top:2px; }
.av-studio-head>div { display:flex; flex-direction:column; gap:var(--space-tight); }
.av-studio-head b { font-size:var(--t-body-size); }
.av-studio-head span { color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.4; }
.av-style-chips { display:flex; flex-wrap:wrap; gap:var(--space-tight); }
.av-style-chips button { height:31px; padding:0 var(--space-item); border:1px solid var(--border-subtle); border-radius:999px; background:transparent; color:var(--ink-2); font:600 11.5px/1 inherit; cursor:pointer; }
.av-style-chips button:hover { background:var(--bg-hover); }
.av-style-chips button.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); color:var(--accent); }
.av-customize-toggle { display:grid; grid-template-columns:16px 1fr; align-items:center; gap:var(--space-inline); width:100%; padding:var(--space-inline) 2px; border:0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.av-customize-toggle>span { display:flex; flex-direction:column; gap:2px; }
.av-customize-toggle b { font-size:var(--t-caption-size); }
.av-customize-toggle small { color:var(--ink-4); font-size:var(--t-micro-size); }
.av-customize-body { display:flex; flex-direction:column; gap:var(--space-inline); padding:1px 0 var(--space-tight); }
.av-style-ref { display:flex; align-items:center; gap:var(--space-inline); color:var(--ink-3); font-size:var(--t-micro-size); }
.av-style-ref img { width:36px; height:36px; border-radius:var(--r-control); object-fit:cover; }
.av-style-ref span { flex:1; }
.av-consent { display:flex; flex-direction:column; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); }
.av-consent label { display:flex; align-items:flex-start; gap:var(--space-inline); font-size:var(--t-micro-size); line-height:1.4; }
.av-generate-row { display:flex; align-items:center; gap:var(--space-item); }
.av-generate-row>span { color:var(--ink-4); font-size:var(--t-micro-size); }
.av-gallery-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-inline); margin-top:2px; padding-top:var(--space-item); border-top:1px solid var(--border-subtle); font-size:var(--t-caption-size); font-weight:650; }
.av-gallery-state { min-height:76px; display:grid; place-items:center; color:var(--ink-4); font-size:var(--t-caption-size); }
.av-portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-inline); }
.av-portrait-option { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-sunken); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.av-portrait-option:hover { border-color: var(--border-strong); }
.av-portrait-option.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.av-portrait-option img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av-portrait-ai { position: absolute; left: 6px; bottom: 6px; padding: 2px var(--space-tight); border-radius: 4px; background: rgba(22,23,26,.82); color: #fff; font-size: 9px; font-weight: 750; }
.av-portrait-delete { position:absolute; top:5px; right:5px; width:27px; height:27px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--r-control); background:rgba(22,23,26,.72); color:#fff; opacity:0; cursor:pointer; transition:opacity var(--t-fast),background var(--t-fast); }
.av-portrait-option:hover .av-portrait-delete,.av-portrait-option:focus-within .av-portrait-delete,.av-portrait-option.sel .av-portrait-delete { opacity:1; }
.av-portrait-delete:hover { background:var(--st-blocked); }
.av-inline-error { display:flex; align-items:center; gap:var(--space-inline); color:var(--st-blocked); font-size:var(--t-micro-size); }
.av-inline-error span { flex:1; }
@media (max-width: 760px){
  .avatar-picker-modal { max-height:calc(100vh - 20px); }
  .avatar-picker-modal .modal-body { display:block; overflow-y:auto; }
  .av-layout { grid-template-columns:1fr; }
  .av-side { border-right:0; border-bottom:1px solid var(--border-subtle); overflow:visible; }
  .av-main { overflow:visible; }
}
@media (max-width: 520px){ .av-portrait-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .av-generate-row { align-items:flex-start; flex-direction:column; } }
/* edit-avatar affordance */
.av-editable { position: relative; cursor: pointer; }
.av-edit-badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 2px solid var(--surface); opacity: 0; transform: scale(.8); transition: opacity .14s, transform .14s; }
.av-editable:hover .av-edit-badge { opacity: 1; transform: scale(1); }

/* ============================================================
   Feed — modern, borderless surfaces, live countdowns, threaded comments
   ============================================================ */
.fcard { background: transparent; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border-subtle); }
.fcard.pad { padding: var(--space-group) var(--space-tight); }
.fpost { padding: var(--space-group) var(--space-tight) var(--space-inline); transition: background var(--dur-micro) var(--ease); }
.fpost:hover { box-shadow: none; background: transparent; }
.fpost-pin { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .03em; color: var(--accent); margin-bottom: var(--space-item); }
.dark .fpost-pin { color: var(--lime); }
.fpost-hd { display: flex; align-items: center; gap: var(--space-item); }
.fpost-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.fpost-name { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.fpost-sysav { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg, #fff); }
.fpost-sysbadge { display: inline-block; margin-left: var(--space-inline); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px var(--space-tight); border-radius: 5px; vertical-align: middle; }

/* ── Core client health score card ── */
.chs-card {
  border: none; border-radius: 0; padding: var(--space-item) 0 var(--space-tight);
  background: transparent; border-top: 1px solid var(--border-subtle);
}
.chs-top { display: flex; align-items: center; gap: var(--space-group); margin-bottom: var(--space-group); }
.chs-ring { --p: 0; --c: var(--c-olive); width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg-sunken) 0); }
.chs-ring span { font-size: var(--t-heading-size); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chs-meta { min-width: 0; }
.chs-band { font-size: var(--t-body-size); font-weight: 700; }
.chs-reason { font-size: var(--t-caption-size); color: var(--ink-2); margin-top: 1px; }
.chs-updated { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-tight); text-transform: uppercase; letter-spacing: .04em; }
.chs-budget-chip { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-micro-size); font-weight: 650; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 13%, transparent); border: none; padding: var(--space-tight) var(--space-inline); border-radius: 999px; cursor: pointer; max-width: 100%; }
.chs-budget-chip:hover { background: color-mix(in srgb, var(--c-gold) 22%, transparent); }
.chs-budget-chip.over { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 13%, transparent); }
.chs-budget-chip.over:hover { background: color-mix(in srgb, var(--c-clay) 22%, transparent); }
.chs-bars { display: flex; flex-direction: column; gap: var(--space-inline); }
.chs-bar { display: grid; grid-template-columns: 108px 1fr 26px; align-items: center; gap: var(--space-inline); }
.chs-bar-l { font-size: var(--t-micro-size); color: var(--ink-3); }
.chs-bar-track { height: 7px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; }
.chs-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width .5s var(--ease); }
.chs-bar-v { font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Core Insights dashboard widget ── */
.dw-ti-count { font-size: var(--t-micro-size); font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-modal); padding: 2px var(--space-inline); }
.dw-ti-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .14s; }
.dw-ti-row:hover { background: var(--bg-hover); }
.dw-ti-ic { width: 26px; height: 26px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.dw-ti-go { color: var(--ink-4); opacity: 0; transition: opacity .14s; flex-shrink: 0; }
.dw-ti-row:hover .dw-ti-go { opacity: 1; }

/* ── Proposals / Suggestions inbox ── */
.tpi { display: flex; flex-direction: column; gap: var(--space-inline); }
.tpi-tabs { display: flex; gap: var(--space-tight); }
.tpi-tab { display: inline-flex; align-items: center; gap: var(--space-tight); font: inherit; font-size: var(--t-caption-size); font-weight: 550; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); border: none; background: none; color: var(--ink-3); cursor: pointer; transition: all .14s; }
.tpi-tab:hover { background: var(--bg-hover); }
.tpi-tab.on { background: var(--accent-soft); color: var(--accent); }
.tpi-tabn { font-size: var(--t-micro-size); font-weight: 700; background: var(--accent); color: var(--accent-fg); border-radius: var(--r-modal); padding: 0 var(--space-tight); min-width: 16px; text-align: center; }
.tpi-tab:not(.on) .tpi-tabn { background: var(--ink-4); }
.tpi-list { display: flex; flex-direction: column; gap: var(--space-inline); }
.tpi-row { display: flex; gap: var(--space-item); align-items: flex-start; padding: var(--space-item) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface); transition: all .14s; }
.tpi-row.st-confirmed { opacity: .72; }
.tpi-row.st-dismissed { opacity: .66; background: var(--bg-sunken); }
.tpi-ic { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.tpi-body { flex: 1; min-width: 0; }
.tpi-title { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); line-height: 1.3; }
.tpi-detail { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.tpi-acts { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); }
.tpi-confirm { display: inline-flex; align-items: center; gap: var(--space-tight); font: inherit; font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); border: none; background: var(--accent); color: var(--accent-fg); cursor: pointer; transition: filter .14s; }
.tpi-confirm:hover { filter: brightness(1.06); }
.tpi-dismiss, .tpi-restore { display: inline-flex; align-items: center; gap: var(--space-tight); font: inherit; font-size: var(--t-micro-size); font-weight: 550; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all .14s; }
.tpi-dismiss:hover, .tpi-restore:hover { background: var(--bg-hover); color: var(--ink-2); }
.tpi-restore { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.tpi-done { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 550; color: var(--st-done); }
.tpi-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: 20px var(--space-item); color: var(--ink-4); font-size: var(--t-caption-size); text-align: center; }

/* ── Core "Connected" task panel ── */
.tcon-lead { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-item); }
.tcon-origin { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--accent-soft); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 550; margin-bottom: var(--space-group); }
.tcon-origin svg { color: var(--accent); flex-shrink: 0; }
.tcon-group { margin-bottom: var(--space-group); }
.tcon-group-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-inline); }
.tcon-group-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: var(--r-modal); padding: 1px var(--space-inline); }
.tcon-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--surface); cursor: pointer; transition: all .14s; text-align: left; }
.tcon-row:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.tcon-ic { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; background: var(--bg-sunken); }
.tcon-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tcon-title { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.tcon-sub { font-size: var(--t-micro-size); color: var(--ink-4); }
.tcon-go { color: var(--ink-4); opacity: 0; transition: opacity .14s; flex-shrink: 0; }
.tcon-row:hover .tcon-go { opacity: 1; }
.tcon-empty { text-align: center; padding: 28px var(--space-group); color: var(--ink-4); }
.tcon-compact .tcon-group { margin-bottom: var(--space-item); }
.tcon-compact .tcon-row { padding: var(--space-inline) var(--space-inline); gap: var(--space-inline); }
.tcon-compact .tcon-ic { width: 26px; height: 26px; }
.tcon-compact .tcon-title { font-size: var(--t-caption-size); }
.tcon-compact .tcon-sub { font-size: var(--t-micro-size); }
.tcon-compact .tcon-group-h { margin-bottom: var(--space-tight); }

/* ── universal activity timeline ── */
.uat-title { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-item); }
.uat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); flex-wrap:wrap; margin-bottom:var(--space-item); }
.uat-filters { display:flex; flex-wrap:wrap; gap:var(--space-tight); min-width:0; }
.uat-chip { border:none; background:transparent; color:var(--ink-3); font-size:var(--t-caption-size); font-weight:550; padding:var(--space-tight) 2px; border-radius:0; cursor:pointer; border-bottom:2px solid transparent; user-select:none; }
.uat-chip:hover { color:var(--ink-1); background:transparent; }
.uat-chip.on { color:var(--ink-1); border-bottom-color:var(--ink-1); }
.uat-export { display:flex; gap:var(--space-tight); flex-shrink:0; }
.uat-export-btn { display:inline-flex; align-items:center; gap:var(--space-tight); border:none; background:transparent; color:var(--ink-3); font-size:var(--t-caption-size); font-weight:550; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); cursor:pointer; user-select:none; }
.uat-export-btn:hover { background:var(--bg-hover); color:var(--ink-1); }
.uat-list { display: flex; flex-direction: column; }
.uat-row { display: flex; gap: var(--space-item); }
.uat-row.openable { cursor:pointer; border-radius:var(--r-control); margin:0 -8px; padding:0 var(--space-inline); }
.uat-row.openable:hover { background:var(--bg-hover); }
.uat-rail { width: 24px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.uat-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-sunken); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
.uat-dot.k-done, .uat-dot.k-paid { background: color-mix(in srgb, var(--st-done) 16%, transparent); color: var(--st-done); }
.uat-dot.k-decision, .uat-dot.k-approval { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.uat-dot.k-invoice { background: color-mix(in srgb, var(--c-gold) 16%, transparent); color: var(--c-gold); }
.uat-dot.k-file, .uat-dot.k-request { background: var(--bg-sunken); color: var(--ink-2); }
.uat-line { width: 2px; flex: 1; min-height: 14px; background: var(--border); margin: 2px 0; }
.uat-body { flex: 1; min-width: 0; padding-bottom: var(--space-group); }
.uat-text { font-size: var(--t-label-size); line-height: 1.45; color: var(--ink-2); }
.uat-row.sys .uat-text { color: var(--ink-3); }
.uat-revoked-pill { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:9.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 18%, transparent); padding:1px var(--space-inline); border-radius:999px; margin-left:var(--space-inline); vertical-align:1px; }
.uat-time { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 2px; display:flex; align-items:center; gap:var(--space-inline); }
.uat-open-hint { font-size:var(--t-micro-size); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); opacity:0; transition:opacity var(--dur-micro) var(--ease); }
.uat-row.openable:hover .uat-open-hint { opacity:1; color:var(--ink-2); }
.uat-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: 28px var(--space-group); color: var(--ink-4); font-size: var(--t-caption-size); }
.uat-empty-hint { font-size: var(--t-micro-size); color: var(--ink-4); text-align: center; max-width: 280px; line-height: 1.4; }
.uat-clear { border:none; background:transparent; color:var(--ink-2); font-size:var(--t-caption-size); font-weight:600; cursor:pointer; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); }
.uat-clear:hover { background:var(--bg-hover); }

/* ── narrative report overlay ── */
.nrr-scrim { position: fixed; inset: 0; background: var(--modal-scrim-bg); backdrop-filter: var(--modal-scrim-blur); -webkit-backdrop-filter: var(--modal-scrim-blur); z-index: 9100; display: grid; place-items: center; padding: 28px; animation: ks-fade var(--dur-micro) var(--ease); }
.nrr { width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--modal-rim); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); overflow: hidden; animation: ks-pop var(--dur-over) var(--ease); }
.nrr-top { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.nrr-badge { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-soft); padding: var(--space-tight) var(--space-item); border-radius: var(--r-modal); }
.nrr-loading { padding: 72px 28px; text-align: center; }
.nrr-spark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto var(--space-group); }
.nrr-loading-t { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 550; color: var(--ink); }
.nrr-loading-s { font-size: var(--t-label-size); color: var(--ink-3); margin-top: var(--space-inline); }
.nrr-doc { overflow-y: auto; padding: var(--space-section) var(--space-page) var(--space-page); }
.nrr-eyebrow { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-inline); }
.nrr-headline { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.nrr-summary { font-size: var(--t-strong-size); line-height: 1.6; color: var(--ink-2); margin-top: var(--space-item); text-wrap: pretty; }
.nrr-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-inline); margin: 20px 0 var(--space-block); padding: var(--space-group); background: var(--bg-sunken); border-radius: var(--r-card); }
.nrr-metric { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); text-align: center; }
.nrr-metric-v { font-size: var(--t-heading-size); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nrr-metric-l { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); }
.nrr-sec { margin-bottom: 20px; }
.nrr-h2 { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-inline); }
.nrr-body { font-size: var(--t-body-size); line-height: 1.7; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.nrr-actions { display: flex; flex-direction: column; gap: var(--space-inline); }
.nrr-action { display: flex; gap: var(--space-inline); align-items: flex-start; font-size: var(--t-body-size); line-height: 1.5; color: var(--ink-2); }
.nrr-action-ic { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 640px){ .nrr-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nrr-doc { padding: var(--space-block) 20px 28px; } }

/* ── keyboard cheat sheet ── */
.ks-scrim { position: fixed; inset: 0; background: var(--modal-scrim-bg); backdrop-filter: var(--modal-scrim-blur); -webkit-backdrop-filter: var(--modal-scrim-blur); z-index: 9000; display: grid; place-items: center; animation: ks-fade var(--dur-micro) var(--ease); }
@keyframes ks-fade { from { opacity: 0; } }
.ks-panel { width: min(720px, 92vw); background: var(--surface); border: 1px solid var(--modal-rim); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); overflow: hidden; animation: ks-pop var(--dur-over) var(--ease); }
@keyframes ks-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.ks-head { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-group) 20px var(--space-item) var(--space-block); border-bottom: 1px solid var(--border-subtle); font-size: var(--t-strong-size); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; }
.ks-x { margin-left: auto; border: none; background: none; color: var(--ink-3); cursor: pointer; width: 30px; height: 30px; padding: 0; border-radius: var(--r-control); display: grid; place-items: center; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.ks-x:hover { background: var(--bg-sunken); color: var(--ink); }
.ks-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 20px var(--space-block); }
.ks-group-t { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-item); }
.ks-rows { display: flex; flex-direction: column; gap: var(--space-inline); }
.ks-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.ks-keys { display: flex; gap: var(--space-tight); flex-shrink: 0; }
.ks-desc { font-size: var(--t-caption-size); color: var(--ink-2); text-align: right; }
.ks-panel kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--t-micro-size); font-weight: 600; min-width: 18px; height: 20px; padding: 0 var(--space-tight); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-sunken); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; color: var(--ink-2); }
.ks-foot { padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border-subtle); font-size: var(--t-caption-size); color: var(--ink-4); text-align: center; }
.ks-foot kbd { font-family: var(--font-mono, monospace); font-size: var(--t-micro-size); padding: 1px var(--space-tight); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; }
@media (max-width: 640px){ .ks-cols { grid-template-columns: 1fr; } }
.ks-flash { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 9000; background: var(--ink); color: var(--bg); font-size: var(--t-label-size); font-weight: 600; padding: var(--space-inline) var(--space-group); border-radius: 999px; box-shadow: 0 8px 26px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.ks-flash.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Aria dock — quiet floating presence that opens into a persistent panel ── */
.aria-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 880;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  cursor: pointer; display: grid; place-items: center;
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.aria-fab:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 16px 36px color-mix(in srgb, var(--ink) 14%, transparent); }
.aria-fab-dot {
  position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
}

/* minimized pill (mode='min') */
.adk-min {
  position: fixed; right: 22px; bottom: 22px; z-index: 880;
  display: inline-flex; align-items: center; gap: var(--space-inline);
  max-width: 220px; padding: var(--space-inline) var(--space-item) var(--space-inline) var(--space-inline); border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  cursor: pointer; font-size: var(--t-caption-size); font-weight: 600;
}
.adk-min-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-min .aria-fab-dot { position: static; flex-shrink: 0; }

/* floating host + panel — mini (quick ask) and full (tabs) share the same chrome */
.adk-host {
  position: fixed; right: 22px; bottom: 22px; z-index: 884;
  max-width: calc(100vw - 44px);
  animation: adk-in var(--dur-over) var(--ease);
}
.adk-host.mini { width: 368px; }
.adk-host.full { width: 428px; }
@keyframes adk-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .adk-host { animation: none; } }

.adk-panel {
  display: flex; flex-direction: column;
  background: var(--inset-inspector-bg);
  border: 1px solid var(--inset-inspector-border);
  border-radius: var(--inset-inspector-radius);
  box-shadow: var(--inset-inspector-shadow), 0 20px 50px -14px color-mix(in srgb, var(--ink) 22%, transparent);
  overflow: hidden;
}
.adk-host.mini .adk-panel { height: min(70vh, 460px); }
.adk-host.full .adk-panel { height: min(80vh, 600px); }

/* pinned — an inline rail under the shared top bar. The app reserves the
   matching content column, while workspace tabs and the global top bar stay full width. */
.adk-pin-slot {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 12;
  height: auto; min-width: 0;
  border-left: 1px solid var(--border-subtle);
  background: var(--bg);
}
.adk-panel.pinned {
  height: 100%; border: none; border-radius: 0; box-shadow: none; background: none;
}
/* rail resize grip — sits on the rail's inner (left) edge */
.adk-pin-resize {
  position: absolute; left: -3px; top: 0; width: 7px; height: 100%;
  cursor: col-resize; z-index: 3; background: transparent;
  transition: background var(--dur-micro) var(--ease);
}
.adk-pin-resize:hover, .adk-pin-resize:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
/* while dragging: kill the grid transition so the rail tracks the cursor 1:1 */
body.adk-resizing { cursor: col-resize; user-select: none; }
body.adk-resizing .app { transition: none; }

.adk-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-inline) var(--space-item); flex-shrink: 0; }
.adk-hd-av { width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0; }
/* name over subtitle — a long thread name (a support subject, a group name)
   must truncate on one line, never wrap and squeeze the subtitle beside it */
.adk-hd-id { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1; }
.adk-hd-top { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.adk-hd-name { font-family: var(--font-serif); font-size: var(--t-strong-size); font-weight: 450; letter-spacing: -.015em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.adk-hd-cue { font-size: var(--t-micro-size); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-hd-limited { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: 1px var(--space-inline); border-radius: 999px; white-space: nowrap; flex-shrink: 0; color: var(--st-blocked); background: var(--st-blocked-soft); }
.adk-hd-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.adk-hd-btn {
  position: relative; flex-shrink: 0; border: none; background: none; color: var(--ink-4); cursor: pointer;
  width: 26px; height: 26px; padding: 0; border-radius: var(--r-control);
  display: grid; place-items: center; line-height: 0;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.adk-hd-btn:hover { background: var(--bg-hover); color: var(--accent); }
.adk-hd-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.adk-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--space-tight); padding: 0 var(--space-inline) 0 var(--space-item); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.adk-tabs .ttab-bar { margin-top: 0; border-bottom: none; gap: 0; }
.adk-tabs .ttab { padding: var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); gap: var(--space-tight); }
.adk-new { flex-shrink: 0; border: none; background: none; color: var(--ink-4); cursor: pointer; width: 26px; height: 26px; border-radius: var(--r-control); display: grid; place-items: center; transition: background .12s, color .12s; }
.adk-new:hover { background: var(--bg-hover); color: var(--accent); }

.adk-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.adk-runtime-wait {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-inline);
  color: var(--ink-4); font-size: var(--t-caption-size);
}

.adk-thread { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--space-item) var(--space-item); display: flex; flex-direction: column; gap: var(--space-inline); }
.adk-msg { min-width: 0; max-width: 94%; overflow-wrap: anywhere; word-break: break-word; }
.adk-msg.me { align-self: flex-end; }
.adk-msg.them { align-self: flex-start; }
.adk-msg-p, .adk-msg .aria-md { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.adk-msg .aria-md pre { max-width: 100%; overflow-x: auto; }
.adk-msg .aria-md img, .adk-msg .aria-md video, .adk-msg .aria-md canvas { max-width: 100%; height: auto; }
.adk-msg.me .adk-msg-p { background: var(--bg-sunken); border-radius: var(--r-card); padding: var(--space-inline) var(--space-item); font-size: var(--t-label-size); line-height: 1.45; color: var(--ink); margin: 0; }
.adk-msg.them .aria-md { font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); }
.adk-msg.them .aria-md-p { margin: 0 0 var(--space-tight); }
.adk-msg.them .aria-md-p:last-child { margin-bottom: 0; }
.adk-msg.them .adk-msg-p { font-size: var(--t-label-size); line-height: 1.45; color: var(--ink-2); margin: 0; }
.adk-msg-who { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-tight); }
.adk-thinking { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); }
.adk-msg-attaches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-tight); margin-bottom: var(--space-tight); }
.adk-msg-image { width: 132px; max-width: 100%; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-sunken); }
.adk-msg-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adk-msg-file { display: inline-flex; align-items: center; gap: var(--space-inline); max-width: 210px; min-height: 30px; padding: 0 var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-micro-size); }
.adk-msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adk-ask {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 var(--space-item) var(--space-item); padding: var(--space-item) var(--space-item) var(--space-inline);
  border: 1px solid var(--border-strong); border-radius: var(--r-modal); background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 32%, transparent) inset;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); flex-shrink: 0;
  position: relative;
}
.adk-ask:focus-within { border-color: color-mix(in srgb, var(--ink) 28%, var(--border)); }
.adk-ask.busy { opacity: .82; }
.adk-ask-context {
  display: flex; align-items: center; gap: var(--space-tight); min-height: 32px; max-width: 100%; overflow-x: auto;
  scrollbar-width: none; padding: 0 0 2px;
}
.adk-ask-context::-webkit-scrollbar { display: none; }
.adk-context-chip {
  display: inline-flex; align-items: center; gap: var(--space-inline); min-width: 0; max-width: 190px; height: 30px;
  padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--t-micro-size); font-weight: 550; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.adk-context-chip:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--ink); }
.adk-context-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-context-chip > .avatar { flex-shrink: 0; }
.adk-context-chip.attachment img { width: 17px; height: 17px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
/* NOT the shared canonical ".empty" full-page empty-state component (line ~2648) —
   that class is unscoped and its min-height:clamp(340px,60vh,580px) + flex:1 1 auto
   was leaking onto this small pill button, blowing it up to fill the whole dock
   panel. Renamed to a dock-scoped class so it can never collide with ".empty"
   again, here or anywhere else "empty" is combined with an unrelated class. */
.adk-context-chip.adk-chip-empty { color: var(--ink-3); }
.adk-ask-in {
  flex: 1; min-width: 0; width: 100%; min-height: 40px; max-height: 116px; resize: none; overflow-y: auto;
  border: none; background: transparent; outline: none; box-shadow: none; font: inherit;
  font-size: var(--t-strong-size); line-height: 1.45; letter-spacing: -.01em; color: var(--ink); padding: var(--space-inline) 2px;
}
.adk-ask-in::placeholder { color: var(--ink-4); }
.adk-ask-in:focus, .adk-ask-in:focus-visible { outline: none; box-shadow: none; }
.adk-ask-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); min-height: 28px; margin-top: auto; }
.adk-ask-tools, .adk-ask-actions { display: flex; align-items: center; gap: 0; min-width: 0; }
.adk-ask-tool {
  position: relative; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--r-control);
  background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.adk-ask-tool:hover, .adk-ask-tool.on { background: var(--bg-hover); color: var(--ink); }
.adk-ask-tool.on { color: var(--accent); }
.adk-mode {
  height: 28px; padding: 0 var(--space-inline); border: none; border-radius: var(--r-control); background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer;
}
.adk-mode:hover { background: var(--bg-hover); color: var(--ink); }
.adk-mode.static { display: inline-flex; align-items: center; color: var(--ink-3); cursor: default; }
.adk-ask-go {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.adk-ask-go:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.adk-ask-go:not(:disabled):hover { transform: translateY(-1px); }
.adk-panel.pinned .adk-ask { margin-inline: 14px; }

body.dark .adk-ask {
  background: #202020;
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
}
body.dark .adk-ask:focus-within { border-color: rgba(255,255,255,.27); }
body.dark .adk-ask-go { background: rgba(255,255,255,.94); color: #202020; }
body.dark .adk-ask-go:disabled { background: rgba(255,255,255,.35); color: #202020; background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }

/* Chats tab — sectioned: Aria history · Team (last chats + start new) */
.adk-chats { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-inline); }
.adk-chats-sec { padding: var(--space-tight) 2px var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.adk-chats-sec:last-child { border-bottom: none; }
.adk-chats-sec-lab { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 0 var(--space-inline); margin-bottom: var(--space-tight); }
.adk-chats-new { display: flex; align-items: center; gap: var(--space-tight); width: 100%; text-align: left; padding: var(--space-inline) var(--space-inline); margin-bottom: 2px; border: none; background: none; border-radius: var(--r-control); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .12s; }
.adk-chats-new:hover { background: var(--bg-hover); color: var(--accent); }
.adk-chat-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
button.adk-chat-row { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.adk-chat-row-open { padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.adk-chat-row:focus-visible, .adk-chat-row-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.adk-chat-row:hover { background: var(--bg-hover); }
.adk-chat-row.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Sized to match Avatar's own "sm" (31px) so a real person photo never
   overflows this box and eats into the gap above — a mismatched fixed size
   here was silently shrinking the Apple-style breathing room between the
   avatar and the name/preview text. */
.adk-chat-row-ava { flex-shrink: 0; width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink-3); }
.adk-chat-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.adk-chat-row-t { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-chat-row-p { font-size: var(--t-micro-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-chat-row-x { flex-shrink: 0; border: none; background: none; color: var(--ink-4); cursor: pointer; width: 22px; height: 22px; border-radius: var(--r-control); display: grid; place-items: center; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.adk-chat-row:hover .adk-chat-row-x { opacity: 1; }
.adk-chat-row-x:hover { background: var(--bg-sunken); color: var(--accent); }
.adk-chat-row-badge { flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 700; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; }
/* muted team row — same quiet treatment Messages uses (dimmed text + a small
   bell-off glyph), never a colored badge or left accent */
.adk-chat-row.muted .adk-chat-row-t, .adk-chat-row.muted .adk-chat-row-p { color: var(--ink-4); }
.adk-chat-row-mute { flex-shrink: 0; color: var(--ink-4); }

/* Tools popover — anchored under the gear icon, portaled to document.body */
.adk-tools-pop {
  position: fixed; z-index: 1199; width: 300px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: var(--space-tight) var(--space-item) var(--space-inline);
  animation: adk-in var(--dur-over) var(--ease);
}
.adk-tools-sec { padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.adk-tools-sec:last-child { border-bottom: none; }
.adk-tools-lab { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-inline); }
.adk-tool-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; text-align: left; padding: var(--space-inline) var(--space-tight); margin: 0 -4px; border: none; background: none; border-radius: var(--r-control); font-size: var(--t-label-size); font-weight: 550; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s; }
.adk-tool-row:hover { background: var(--bg-hover); color: var(--ink); }
.adk-tool-row svg { color: var(--ink-3); flex-shrink: 0; }
.adk-tool-count { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); }
.adk-tool-chev { margin-left: auto; color: var(--ink-4) !important; }
.adk-tool-full { color: var(--accent); }
.adk-mem-list { margin-top: var(--space-tight); display: flex; flex-direction: column; gap: 2px; }
.adk-mem-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-inline); padding: var(--space-tight) var(--space-tight) var(--space-tight) 28px; font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.4; }
.adk-mem-row button { flex-shrink: 0; border: none; background: none; color: var(--ink-4); cursor: pointer; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.adk-mem-row button:hover { background: var(--bg-sunken); color: var(--accent); }

.adk-insight { padding: var(--space-inline) 0; }
.adk-insight-text { font-size: var(--t-caption-size); line-height: 1.5; color: var(--ink-2); }
.adk-insight-acts { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); flex-wrap: wrap; }
.adk-insight-go { display: inline-flex; align-items: center; gap: var(--space-tight); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--notif-cta-fg); background: var(--notif-cta-bg); border: none; border-radius: 999px; padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-item); cursor: pointer; }
.adk-insight-go:hover { opacity: .9; }
.adk-insight-dismiss { font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); background: transparent; border: none; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.adk-insight-dismiss:hover { background: var(--bg-hover); color: var(--accent); }

.adk-empty { font-size: var(--t-caption-size); color: var(--ink-3); padding: var(--space-inline) var(--space-tight); }

/* resting-state unread counts — the dock is the app's chat surface, so a closed
   FAB / minimized pill has to carry what is waiting */
.aria-fab-badge, .adk-min-badge {
  min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px;
  background: var(--accent); color: var(--accent-fg, #fff);
  font-size: var(--t-micro-size); font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.aria-fab-badge { position: absolute; top: -3px; right: -3px; border: 2px solid var(--surface); }
.adk-min-badge { flex-shrink: 0; }
.adk-tab-badge {
  min-width: 16px; height: 16px; margin-left: var(--space-tight); padding: 0 var(--space-tight); border-radius: 999px;
  background: var(--accent); color: var(--accent-fg, #fff);
  font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* thread + "jump to latest" — the pill only appears once the reader has
   scrolled away from the end, so it never sits on top of a live answer */
.adk-thread-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.adk-jump {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font: inherit; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2);
  padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-inline); border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 12%, transparent);
  animation: adk-in var(--dur-over) var(--ease);
}
.adk-jump:hover { color: var(--accent); border-color: var(--border-strong); }

/* per-message actions — hover-only so a calm thread stays calm */
.adk-msg-acts { display: flex; align-items: center; gap: 2px; margin-top: var(--space-tight); opacity: 0; transition: opacity var(--dur-micro) var(--ease); }
.adk-msg.them:hover .adk-msg-acts, .adk-msg.them:focus-within .adk-msg-acts { opacity: 1; }
@media (hover: none) { .adk-msg-acts { opacity: 1; } }
.adk-msg-act {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font: inherit; font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4);
  border: none; background: none; cursor: pointer;
  padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); transition: background .12s, color .12s;
}
.adk-msg-act:hover { background: var(--bg-hover); color: var(--ink-2); }

/* conversation starters — only on a genuinely empty Aria thread */
.adk-starters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); padding: 0 var(--space-item) var(--space-inline); flex-shrink: 0; }
.adk-starters-lab { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); width: 100%; margin-bottom: 1px; }
.adk-starter {
  display: inline-flex; align-items: center; gap: var(--space-tight); max-width: 100%;
  font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2);
  padding: var(--space-tight) var(--space-item); border-radius: 999px;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.adk-starter svg { color: var(--ink-4); flex-shrink: 0; }
.adk-starter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adk-starter:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--ink); }
.adk-starter:hover svg { color: var(--accent); }

/* Chats search — single clean accent border on focus, no glow ring */
.adk-chats-search { display: flex; align-items: center; gap: var(--space-inline); margin: 2px 2px var(--space-inline); padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-sunken); }
.adk-chats-search svg { color: var(--ink-4); flex-shrink: 0; }
.adk-chats-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: var(--t-caption-size); color: var(--ink); }
.adk-chats-search input:focus, .adk-chats-search input:focus-visible { outline: none; box-shadow: none; }
.adk-chats-search input::placeholder { color: var(--ink-4); }
.adk-chats-search:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.adk-chats-search button { flex-shrink: 0; border: none; background: none; color: var(--ink-4); cursor: pointer; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
.adk-chats-search button:hover { background: var(--bg-hover); color: var(--accent); }

/* stop-generating swaps in for send, same footprint so the bar never shifts */
.adk-ask-go.stop { background: var(--ink-3); }
.adk-ask-go.stop:hover { background: var(--ink-2); transform: none; }
body.dark .adk-ask-go.stop { background: rgba(255,255,255,.55); color: #202020; }

.adk-tools-kbd { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-4); }
.adk-tools-kbd kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--t-micro-size); font-weight: 600; min-width: 17px; height: 17px; padding: 0 var(--space-tight); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; color: var(--ink-3); }
.adk-tools-kbd span { margin-left: var(--space-tight); }

@media (max-width: 640px){
  .aria-fab, .adk-min { right: 12px; bottom: 12px; }
  /* on a phone the panel is a bottom sheet, not a floating card — a 428px card
     inset from both edges wastes the only screen space there is */
  .adk-host { right: 0; left: 0; bottom: 0; max-width: 100vw; }
  .adk-host.mini, .adk-host.full { width: 100vw; }
  .adk-host.mini .adk-panel, .adk-host.full .adk-panel { height: min(86vh, 640px); border-radius: var(--r-modal) var(--r-modal) 0 0; border-bottom: none; }
  .adk-ask { margin-inline: 9px; padding: var(--space-item) var(--space-item) var(--space-inline); border-radius: var(--r-modal); }
  .adk-ask-in { min-height: 44px; font-size: var(--t-strong-size); } /* 16px keeps iOS from zooming on focus */
  .adk-context-chip { max-width: 148px; }
  .adk-starters { padding-inline: 11px; }
}

/* ── proposal cards (confirmable cascades, bottom-center) ── */
.tprop-stack { position: fixed; left: auto; right: 22px; bottom: 82px; transform: none; z-index: 885; display: flex; flex-direction: column-reverse; gap: var(--space-inline); width: 350px; max-width: calc(100vw - 44px); pointer-events: none; align-items: stretch; }
/* Open Aria dock panel owns the bottom-right — park proposal cards above it. */
body.has-aria-mini .tprop-stack { bottom: 490px; }
body.has-aria-full .tprop-stack { bottom: 630px; }
.tprop { position: relative; display: flex; gap: var(--space-item); align-items: flex-start; padding: var(--notif-pad) var(--notif-pad) 13px; background: var(--notif-bg); border: 1px solid var(--notif-border); border-radius: var(--notif-radius); box-shadow: var(--notif-shadow); pointer-events: auto; animation: tprop-rise var(--dur-over) var(--ease); overflow: hidden; }
.tprop.out { animation: tprop-fall var(--dur-micro) var(--ease) forwards; }
@keyframes tprop-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes tprop-fall { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.tprop-ic { width: 20px; height: 20px; margin-top: 1px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: none; }
.tprop-body { flex: 1; min-width: 0; }
.tprop-title { font-size: var(--notif-title-size); font-weight: var(--notif-title-weight); color: var(--ink); line-height: 1.35; padding-right: 56px; }
.tprop-detail { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.4; margin-top: var(--space-tight); text-wrap: pretty; }
.tprop-acts { display: flex; gap: var(--space-inline); margin-top: var(--space-item); flex-wrap: wrap; }
.tprop-confirm { display: inline-flex; align-items: center; gap: var(--space-tight); font: inherit; font-size: var(--t-caption-size); font-weight: 550; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); border: none; background: var(--accent); color: var(--accent-fg); cursor: pointer; transition: filter .14s; }
.tprop-confirm:hover { filter: brightness(1.06); }
.tprop-dismiss { font: inherit; font-size: var(--t-caption-size); font-weight: 550; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .14s, color .14s; }
.tprop-dismiss:hover { background: var(--bg-hover); color: var(--accent); }
.tprop-x { position: absolute; top: 11px; right: 11px; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: var(--space-tight); border-radius: 6px; line-height: 0; }
.tprop-x:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
.tprop-count { position: absolute; top: -7px; left: -7px; min-width: 19px; height: 19px; padding: 0 var(--space-tight); border-radius: var(--r-modal); background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.tprop:not(:first-child) { transform: scale(.97); opacity: .9; }
/* docked-card controls: mute (hover) + close — countdown is the bottom progress */
.tprop-ctrls { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 2px; }
.tprop-mute { width: 26px; height: 26px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; opacity: 0; position: relative; transition: opacity .14s, background .14s, color .14s; }
.tprop:hover .tprop-mute, .tprop:focus-within .tprop-mute { opacity: 1; }
.tprop-mute:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
.tprop-close { width: 26px; height: 26px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; position: relative; transition: background .14s, color .14s; }
.tprop-close:hover { background: var(--notif-icon-hover-bg); color: var(--accent); }
.tprop-progress {
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--notif-progress-track);
  pointer-events: none; overflow: hidden; border-radius: 2px 2px 0 0;
}
.tprop-progress > i {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: var(--accent); border-radius: 0 1px 1px 0;
  transition: transform .22s linear, background var(--dur-over) var(--ease);
}
.tprop.paused .tprop-progress > i { background: var(--ink-4); }
/* muted-suggestions restore strip in the inbox */
.tpi-muted { margin-top: var(--space-inline); padding: var(--space-inline) var(--space-item); border-top: 1px solid var(--border-subtle); }
.tpi-muted-h { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-tight); }
.tpi-muted-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 0; font-size: var(--t-caption-size); color: var(--ink-2); }
.tpi-unmute { flex-shrink: 0; font: inherit; font-size: var(--t-micro-size); font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.tpi-unmute:hover { background: var(--accent-soft); }
@media (max-width: 640px){ .tprop-stack { right: 12px; bottom: 72px; } body.has-proposals .toast-host { bottom: calc(72px + var(--tprop-h, 150px) + 16px); right: 12px; width: calc(100vw - 24px); } }
.fpost-sub { font-size: var(--t-micro-size); color: var(--ink-3); }
.fpost-text { margin: var(--space-item) 0 var(--space-item); font-size: var(--t-body-size); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.fpost-media { margin-bottom: var(--space-item); }
.fpost-photo { border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--space-item); }
.fpost-photo img { width: 100%; display: block; max-height: 460px; object-fit: cover; }

/* photo gallery — perfect fit, no awkward crop */
.fgal { position: relative; border-radius: var(--r-md); overflow: hidden; display: grid; gap: var(--space-tight); }
.fgal.one { display: block; background: var(--bg-sunken); }
.fgal.two { grid-template-columns: 1fr 1fr; }
.fgal.three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fgal.three .fgal-cell:first-child { grid-row: 1 / 3; }
.fgal.grid { grid-template-columns: 1fr 1fr; }
.fgal-cell { position: relative; border: none; padding: 0; cursor: pointer; background: var(--bg-sunken); overflow: hidden; display: block; width: 100%; min-height: 0; }
.fgal-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.fgal-cell:hover .fgal-img { transform: scale(1.03); }
.fgal.one .fgal-img.contain { width: 100%; height: auto; max-height: 520px; object-fit: contain; transform: none; }
.fgal.two .fgal-cell, .fgal.grid .fgal-cell { aspect-ratio: 4 / 5; }
.fgal.three .fgal-cell { aspect-ratio: auto; }
.fgal.three .fgal-cell:first-child { aspect-ratio: 4 / 5; }
.fgal-more { position: absolute; inset: 0; background: rgba(15,15,20,.55); color: #fff; display: grid; place-items: center; font-size: var(--t-title-size); font-weight: 700; font-family: var(--font-serif); }
.fgal-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20,22,16,.6); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .14s; }
.fgal-cell:hover .fgal-x { opacity: 1; }
/* hero (first) cell — drag-to-reposition, same interaction as the countdown cover */
.fgal-cell.fgal-focusing { cursor: grab; touch-action: none; }
.fgal-cell.fgal-focusing.dragging { cursor: grabbing; }
.fgal-cell.fgal-focusing .fgal-img { transition: none; }
.fgal-reposition { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(20,22,16,.6); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .14s; cursor: pointer; }
.fgal-cell:hover .fgal-reposition { opacity: 1; }
.fgal-hero-dragger { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: var(--space-inline); color: #fff; background: rgba(20,22,16,.58); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); backdrop-filter: blur(7px); font-size: var(--t-micro-size); font-weight: 650; pointer-events: none; opacity: .88; }
.fgal-hero-tools { position: absolute; z-index: 3; left: 6px; bottom: 6px; display: flex; gap: var(--space-tight); }
.fgal-hero-btn { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: none; border-radius: var(--r-control); background: rgba(20,22,16,.55); color: #fff; backdrop-filter: blur(6px); font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; }
.fgal-hero-btn:hover { background: rgba(20,22,16,.78); }
.fgal-hero-btn.on { background: var(--accent); }

/* video embed */
.fvideo { position: relative; border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--space-item); background: #000; aspect-ratio: 16 / 9; }
.fvideo-frame, .fvideo video { width: 100%; height: 100%; display: block; border: none; }
.fvideo-poster { position: absolute; inset: 0; width: 100%; border: none; cursor: pointer; display: grid; place-items: center; }
.fvideo-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: #18181c; display: grid; place-items: center; padding-left: var(--space-tight); box-shadow: 0 8px 28px -6px rgba(0,0,0,.5); transition: transform .16s; }
.fvideo-poster:hover .fvideo-play { transform: scale(1.08); }
.fvideo-chip { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: var(--space-tight) var(--space-item); border-radius: 999px; }
.fmedia-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(20,22,16,.65); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,11,14,.92); display: grid; place-items: center; animation: fade-in var(--dur-micro) var(--ease); }
.lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 70px -16px rgba(0,0,0,.7); }
.lightbox-close { position: fixed; top: 20px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-add { position: fixed; top: 20px; right: 74px; height: 42px; padding: 0 var(--space-group); border-radius: 999px; border: none; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; gap: var(--space-inline); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.lightbox-add:hover { background: rgba(255,255,255,.26); }
.lightbox-counter { position: fixed; top: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: var(--t-label-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .14s; }
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-nav.prev { left: 24px; } .lightbox-nav.next { right: 24px; }
.lightbox-strip { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-inline); padding: var(--space-inline); background: rgba(255,255,255,.08); border-radius: var(--r-card); max-width: 86vw; overflow-x: auto; }
.lightbox-thumb { width: 54px; height: 40px; border-radius: 6px; overflow: hidden; border: none; padding: 0; cursor: pointer; opacity: .5; transition: opacity .14s, box-shadow .14s; flex-shrink: 0; }
.lightbox-thumb.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* composer media */
.fcomp-gallery { margin: var(--space-item) 0 var(--space-tight); }
.fcomp-videoprev { margin: var(--space-item) 0 var(--space-tight); }
.fcomp-videoentry { display: flex; align-items: center; gap: var(--space-inline); margin: var(--space-item) 0 var(--space-tight); padding: var(--space-inline) var(--space-item); background: var(--bg-sunken); border-radius: var(--r-md); }
.fcomp-videoentry input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); }

/* borderless media tiles */
.fmedia-grid { display: grid; grid-template-columns: repeat(4,minmax(0, 1fr)); gap: var(--space-inline); margin-bottom: var(--space-item); }
.fmedia-hero { background: var(--accent); border-radius: var(--r-md); padding: var(--space-item); color: var(--accent-fg); display: flex; flex-direction: column; justify-content: space-between; min-height: 118px; }
.fmedia-stat { background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--space-item); }
.fmedia-lab { font-size: var(--t-micro-size); color: var(--ink-3); }
.fmedia-val { font-size: var(--t-title-size); line-height: 1.1; }
.fmedia-file { display: flex; gap: var(--space-item); align-items: center; background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--space-item); margin-bottom: var(--space-item); }

/* stats + action bar (no border lines) */
.fpost-stats { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 2px var(--space-item); }
.fpost-likepill { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 500; }
.fpost-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.fpost-statbtn { background: none; border: none; color: var(--ink-3); font-size: var(--t-caption-size); cursor: pointer; padding: 0; }
.fpost-statbtn:hover { color: var(--ink); text-decoration: underline; }
.fpost-statn { color: var(--ink-3); font-size: var(--t-caption-size); }
.fpost-bar { display: flex; gap: var(--space-tight); padding: var(--space-tight) 0; }
.fpost-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); height: 38px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-2); font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: background .14s, color .14s; }
.fpost-action:hover { background: var(--bg-hover); color: var(--ink); }
.fpost-action.on { color: var(--accent); }
.dark .fpost-action.on { color: var(--lime); }
/* utility: render a closed-path line icon as a solid fill (e.g. saved bookmark) */
.icn.icn-fill { fill: currentColor; }

/* ---- composer (Loop-style open shell) ---- */
.fcomposer { padding: var(--space-group) var(--space-group); transition: box-shadow var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.fcomposer:not(.open):hover { border-color: var(--border-strong); }
.fcomposer.open { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.fcomp-rest { display: flex; flex-direction: column; gap: var(--space-item); }
.fcomp-collapsed { display: flex; gap: var(--space-item); align-items: center; }
.fcomp-collapsed .avatar { flex-shrink: 0; }
.fcomp-trigger { flex: 1; text-align: left; background: var(--bg-sunken); border: 1px solid transparent; color: var(--ink-3); font-size: var(--t-body-size); padding: var(--space-item) var(--space-group); border-radius: var(--r-pill); cursor: text; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.fcomp-trigger:hover { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
.fcomp-quick { display: flex; gap: var(--space-tight); padding-top: var(--space-item); margin-top: 2px; border-top: 1px solid var(--border-subtle); }
.fcomp-q { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); height: 40px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-2); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.fcomp-q:hover { background: var(--bg-hover); color: var(--ink); }
.fcomp-q-ic { display: grid; place-items: center; color: var(--ink-3); transition: color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.fcomp-q:hover .fcomp-q-ic { color: var(--accent); }
@media (max-width: 640px){ .fcomp-q span:not(.fcomp-q-ic) { display: none; } }

.fcomp-head { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-item); }
.fcomp-head-slim { gap: var(--space-inline); margin-bottom: var(--space-inline); }
.fcomp-head-slim .fcomp-aud2 { margin-top: 0; }
.fcomp-name { font-size: var(--t-body-size); font-weight: 650; letter-spacing: -0.01em; }
.fcomp-aud2 { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); position: relative; }
.fcomp-aud2:hover { border-color: var(--border-strong); background: var(--bg-hover); color: var(--ink); }
.fcomp-aud2 .icn { color: var(--ink-3); }
.fcomp-close { width: 32px; height: 32px; padding: 0; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; position: relative; }
.fcomp-close:hover { background: var(--bg-hover); color: var(--ink); }
.fcomp-types { display: flex; flex-wrap: wrap; gap: var(--space-tight); background: var(--bg-sunken); padding: var(--space-tight); border-radius: var(--r-card); margin-bottom: var(--space-item); max-width: 100%; }
.fcomp-type { display: inline-flex; align-items: center; gap: var(--space-tight); height: 32px; padding: 0 var(--space-item); border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.fcomp-type .icn { color: var(--ink-4); transition: color var(--dur-micro) var(--ease); }
.fcomp-type:hover:not(.on) { background: var(--bg-hover); color: var(--ink); }
.fcomp-type:hover:not(.on) .icn { color: var(--ink-3); }
.fcomp-type.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.fcomp-type.on .icn { color: var(--accent); }
.fcomp-ta { width: 100%; border: none; background: transparent; resize: none; font-family: var(--font-ui); font-size: var(--t-strong-size); line-height: 1.6; color: var(--ink); padding: var(--space-tight) 0 var(--space-inline); outline: none; min-height: 58px; }
.fcomp-ta::placeholder { color: var(--ink-4); }
/* rich (contentEditable) variant — same box, kept-formatting paste result */
.fcomp-ta-rich { white-space: normal; }
.fcomp-ta-rich:empty:before { content: attr(data-placeholder); color: var(--ink-4); pointer-events: none; }
.fcomp-ta-rich p { margin: 0 0 var(--space-inline); }
.fcomp-ta-rich p:last-child { margin-bottom: 0; }
.fcomp-ta-rich ul, .fcomp-ta-rich ol { margin: 0 0 var(--space-inline); padding-left: 20px; }
.fcomp-ta-rich li { margin: 2px 0; }
.fcomp-ta-rich blockquote { margin: 0 0 var(--space-inline); padding-left: var(--space-item); border-left: 2px solid var(--border); color: var(--ink-2); }
.fcomp-ta-rich h2, .fcomp-ta-rich h3 { margin: 0 0 var(--space-tight); font-weight: 650; }
.fcomp-ta-rich a { color: var(--accent); text-decoration: underline; }
.fcomp-rich-x { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: none; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.fcomp-rich-x:hover { background: var(--bg-hover); color: var(--ink); }
.fcomp-richask { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); background: var(--bg-sunken); border-radius: var(--r-md); }
.fcomp-richask-txt { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-2); }
/* posted rich text — same marks, feed-card typography */
.fpost-rich p { margin: 0 0 var(--space-inline); }
.fpost-rich p:last-child { margin-bottom: 0; }
.fpost-rich ul, .fpost-rich ol { margin: 0 0 var(--space-inline); padding-left: 20px; }
.fpost-rich li { margin: 2px 0; }
.fpost-rich blockquote { margin: 0 0 var(--space-inline); padding-left: var(--space-item); border-left: 2px solid var(--border); color: var(--ink-2); }
.fpost-rich h2, .fpost-rich h3 { margin: 0 0 var(--space-tight); font-weight: 650; }
.fpost-rich a { color: var(--accent); text-decoration: underline; }
.fcomp-cd { display: flex; flex-direction: column; gap: var(--space-inline); margin: var(--space-item) 0 var(--space-tight); padding: var(--space-item); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.fcomp-cd-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); }
/* The When|Link-to row is the ONLY consumer of `.fcomp-cd-row` (with Style|
   Color, its less width-sensitive sibling) — used to share the app-wide
   760px collapse group, but that group's breakpoint serves many unrelated
   grids and isn't tunable per member. Below roughly 900px viewport with the
   sidebar still expanded, an even 50/50 split leaves the "When" side too
   narrow for BOTH its date button and its own two-column date|time split at
   once: verified live at 800px, the date text shrank to 0px width (fully
   invisible) even with a corrected, non-truncating time column; 900px
   viewport was already comfortable in two columns. The canonical 900px
   breakpoint (DESIGN.md → Spacing & Grid Law: 1480/1180/900/640) sits right
   at that line, so the row goes single-column there instead of at an
   invented value — each field then gets the full row width. Scoped to this
   class alone so the shared 760px group's other members are untouched. */
@media (max-width: 900px) { .fcomp-cd-row { grid-template-columns: 1fr; } }

/* Loop-style command strip */
.fcomp-actions { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.fcomp-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.fcomp-tdiv { width: 1px; height: 20px; background: var(--border-subtle); margin: 0 var(--space-tight); flex-shrink: 0; }
.fcomp-tool { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-3); cursor: pointer; position: relative; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.fcomp-tool:hover { background: var(--bg-hover); color: var(--accent); }
.fcomp-tool:active { transform: none; }
.fcomp-tool.on { background: var(--bg-hover); color: var(--accent); }
.fcomp-plus { width: 30px; height: 30px; border-radius: 50%; background: transparent; color: var(--ink-2); }
.fcomp-plus:hover { background: var(--bg-hover); color: var(--accent); }
.fcomp-typepill { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border: none; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; position: relative; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); white-space: nowrap; }
.fcomp-typepill:hover { background: var(--bg-hover); color: var(--ink); }
.fcomp-typepill .icn { color: var(--ink-3); }
.fcomp-end { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.fcomp-send { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: none; border-radius: var(--r-control); background: transparent; color: var(--accent); cursor: pointer; position: relative; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.fcomp-send:hover:not(:disabled) { background: var(--accent-soft); }
.fcomp-send:disabled { color: var(--ink-4); cursor: default; background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.fcomp-emo-wrap { position: relative; display: inline-flex; }

/* polished data-tip tooltips (below icons so they clear app chrome) */
.fcomp-tool[data-tip]::after,
.fcomp-send[data-tip]::after,
.fcomp-close[data-tip]::after,
.fcomp-typepill[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.fcomp-tool[data-tip]:hover::after,
.fcomp-tool[data-tip]:focus-visible::after,
.fcomp-send[data-tip]:hover::after,
.fcomp-send[data-tip]:focus-visible::after,
.fcomp-close[data-tip]:hover::after,
.fcomp-close[data-tip]:focus-visible::after,
.fcomp-typepill[data-tip]:hover::after,
.fcomp-typepill[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.fcomp-send:disabled[data-tip]:hover::after { opacity: 1; }

@keyframes fcompIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.fcomposer.open .fcomp-head { animation: fcompIn var(--dur-over) var(--ease) both; }
.fcomposer.open .fcomp-ta { animation: fcompIn var(--dur-over) var(--ease) .04s both; }
.fcomposer.open .fcomp-actions { animation: fcompIn var(--dur-over) var(--ease) .08s both; }
.fcomp-field { display: flex; flex-direction: column; gap: var(--space-tight); min-width: 0; }
.fcomp-field > span { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); }
.fcomp-photo { position: relative; margin: var(--space-item) 0 var(--space-tight); border-radius: var(--r-md); overflow: hidden; }
.fcomp-photo img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.fcomp-photo-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(20,22,16,.6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.fcomp-aud:hover { background: var(--bg-active); }
@media (max-width: 640px){
  .fcomp-typepill span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .fcomp-tdiv { margin: 0 var(--space-tight); }
}
/* (composer actions/tools restyled above) */

/* ---- live countdown ---- */
.cd-card { position: relative; border-radius: var(--r-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow-md); margin: 2px 0 var(--space-group); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-700) 100%); }
.cd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-veil { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(20,22,16,.34) 0%, rgba(20,22,16,.82) 100%); }
.cd-inner { position: relative; padding: 20px 20px; }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-bottom: var(--space-item); }
.cd-kicker { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.cd-live { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: cd-ping 1.6s ease-out infinite; }
@keyframes cd-ping { 0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70%{ box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.cd-linkchip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-title { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-title-size); line-height: 1.15; margin: 0 0 var(--space-group); max-width: 92%; }
.cd-grid { display: flex; gap: var(--space-inline); }
.cd-unit { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-item) var(--space-tight); border-radius: var(--r-md); background: rgba(255,255,255,.14); }
.cd-num { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit.sec .cd-num { animation: cd-beat 1s ease-in-out infinite; }
@keyframes cd-beat { 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
.cd-lab { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.cd-foot { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); font-size: var(--t-caption-size); color: rgba(255,255,255,.85); }
.cd-done { font-family: var(--font-serif); font-size: var(--t-title-size); padding: var(--space-inline) 0 var(--space-tight); }

/* ---- comments + replies (inline, no bubbles — modern) ---- */
.fcmt-wrap { margin-top: var(--space-inline); padding: var(--space-item) 2px var(--space-tight); display: flex; flex-direction: column; gap: var(--space-group); }
.fcmt-new { display: flex; align-items: center; gap: var(--space-inline); }
.fcmt-input { flex: 1; height: 40px; border: 1px solid transparent; background: var(--bg-sunken); border-radius: var(--r-pill); padding: 0 var(--space-group); font-size: var(--t-label-size); color: var(--ink); outline: none; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.fcmt-input:hover { background: var(--surface); border-color: var(--border); }
.fcmt-input:focus { background: var(--surface); border-color: var(--accent); }
.fcmt-input::placeholder { color: var(--ink-4); }
.fcmt-send { width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: var(--r-control); background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer; position: relative; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.fcmt-send:hover:not(:disabled) { background: var(--accent-soft); }
.fcmt-send:active:not(:disabled) { background: var(--bg-hover); }
.fcmt-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; color: var(--ink-4); }
.fcmt { display: flex; gap: var(--space-inline); align-items: flex-start; }
.fcmt-main { flex: 1; min-width: 0; }
.fcmt-head { display: flex; align-items: baseline; gap: var(--space-inline); }
.fcmt-name { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.fcmt-time { font-size: var(--t-micro-size); color: var(--ink-4); }
.fcmt-text { font-size: var(--t-body-size); line-height: 1.5; color: var(--ink); margin-top: 1px; text-wrap: pretty; }
.fcmt-meta { display: flex; align-items: center; gap: var(--space-group); margin-top: var(--space-tight); }
.fcmt-act { background: none; border: none; padding: 0; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .12s; }
.fcmt-act:hover { color: var(--ink); }
.fcmt-act.on { color: var(--accent); }
.dark .fcmt-act.on { color: var(--lime); }
.fcmt-compose { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); animation: fcompIn var(--dur-over) var(--ease) both; }
.fcmt-compose .fcmt-input { height: 36px; font-size: var(--t-label-size); }
.fcmt-compose .fcmt-send { width: 34px; height: 34px; }
.fcmt-replies { display: flex; flex-direction: column; gap: var(--space-item); margin-top: var(--space-item); }

/* ---- countdown: minimal variant, progress, RSVP, actions ---- */
.cd-card.minimal { color: var(--ink); box-shadow: var(--shadow-sm); }
.cd-unit.light { background: var(--surface); box-shadow: var(--shadow-sm); }
.cd-card.minimal .cd-lab { color: var(--ink-3); }
.cd-progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); margin-top: var(--space-group); overflow: hidden; }
.cd-card.minimal .cd-progress { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cd-progress > span { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.cd-foot { display: flex; align-items: center; gap: var(--space-inline); }
.cd-card.minimal .cd-foot { color: var(--ink-3); }
.cd-date { display: inline-flex; align-items: center; gap: var(--space-inline); }
.cd-going { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; }
.cd-going-av { display: inline-flex; }
.cd-going-av > * { margin-left: -4px; box-shadow: 0 0 0 2px rgba(255,255,255,.3); border-radius: 50%; }
.cd-card.minimal .cd-going-av > * { box-shadow: 0 0 0 2px var(--surface); }
.cd-going-av > *:first-child { margin-left: 0; }
.cd-actions { display: flex; gap: var(--space-inline); margin-top: var(--space-group); }
.cd-btn { display: inline-flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-item); border: none; border-radius: var(--r-pill); cursor: pointer; font-size: var(--t-caption-size); font-weight: 600; background: #fff; color: var(--ink); transition: background .14s, filter .12s; }
.cd-btn:hover { filter: brightness(0.97); }
.cd-btn.ghost { background: rgba(255,255,255,.18); color: #fff; }
.cd-card.minimal .cd-btn { background: var(--accent); color: var(--accent-fg); }
.cd-card.minimal .cd-btn.ghost { background: var(--bg-sunken); color: var(--ink-2); }

/* ---- composer countdown customization ---- */
.cd-style-seg { width: 100%; }
.cd-style-seg button { flex: 1; font-size: var(--t-micro-size); padding: 0 var(--space-tight); }
.fcd-themes { display: flex; gap: var(--space-inline); flex-wrap: wrap; align-items: center; height: 38px; }
.fcd-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; transition: transform .1s; padding: 0; }
.fcd-sw:hover { transform: scale(1.12); }
.fcd-sw.on { border-color: var(--ink-3); }

/* ---- reactions ---- */
.fr-cluster { display: inline-flex; align-items: center; gap: var(--space-inline); cursor: default; }
.fr-emojis { display: inline-flex; }
.fr-emoji { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm); display: grid; place-items: center; font-size: var(--t-caption-size); margin-left: -4px; }
.fr-emoji:first-child { margin-left: 0; }
.fr-count { font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 500; }
.fr-wrap { position: relative; flex: 1; display: flex; }
.fr-wrap .fpost-action { flex: 1; }
.fr-myemoji { font-size: var(--t-heading-size); line-height: 1; }
.fr-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: var(--space-tight); background: var(--overlay); border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: 20; animation: fr-pop var(--dur-over) var(--ease); }
@keyframes fr-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.fr-pick { width: 40px; height: 40px; border: none; background: none; border-radius: 50%; cursor: pointer; font-size: var(--t-title-size); line-height: 1; display: grid; place-items: center; transition: transform .12s, background .12s; }
.fr-pick:hover { transform: scale(1.18); background: var(--bg-hover); }

/* ---- feed rail (borderless) ---- */
.frail-h { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.frail-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .12s; }
.frail-row:hover { background: var(--bg-hover); }
.frail-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--ink-3); flex-shrink: 0; }
.frail-ann { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline); border-radius: var(--r-card); background: var(--bg-sunken); }
.frail-rsvp { border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: 999px; }
.frail-contrib { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) var(--space-tight); border-radius: var(--r-control); transition: background .12s; }
.frail-contrib:hover { background: var(--bg-hover); }
.frail-rank { width: 16px; text-align: center; font-family: var(--font-serif); font-size: var(--t-body-size); color: var(--ink-4); }

/* ============================================================
   Org / access — people picker, assignees, invite, visibility, departments
   ============================================================ */
/* lifecycle tabs */
.life-tabs { display: flex; gap: var(--space-tight); margin-bottom: var(--space-group); background: var(--bg-sunken); padding: var(--space-tight); border-radius: var(--r-pill); width: max-content; }
.life-tab { display: inline-flex; align-items: center; gap: var(--space-inline); height: 32px; padding: 0 var(--space-item); border: none; background: transparent; border-radius: var(--r-pill); color: var(--ink-3); font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: background .14s, color .14s; }
.life-tab:hover { color: var(--ink); }
.life-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.life-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); }
.life-tab.on .life-n { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   Feed — redesigned countdown (cd2) + poll
   ============================================================ */
.cd2 { border: none; border-radius: 0; background: transparent; overflow: hidden; margin-top: var(--space-tight); container-type: inline-size; border-top: 1px solid var(--border-subtle); }
.cd2-cover { height: 170px; overflow: hidden; border-radius: var(--r-card); margin-top: var(--space-item); }
.cd2-cover img { width: 100%; height: 100%; object-fit: cover; }
.cd2-strip { display: flex; gap: var(--space-tight); margin-top: var(--space-tight); overflow-x: auto; }
.cd2-strip-th { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-control); overflow: hidden; border: none; padding: 0; cursor: pointer; }
.cd2-strip-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd2-head { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) 2px 0; }
.cd2-kicker { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cd2-live { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); position: relative; box-shadow: none; animation: none; }
.cd2-live.on { background: var(--st-blocked); }
.cd2-live::after { display: none; }
.cd2-linkchip { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid var(--border-subtle); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.cd2-linkchip .icn { color: var(--ink-3); }
.cd2-body { display: grid; grid-template-columns: 1fr; gap: var(--space-group); padding: var(--space-item) 2px var(--space-tight); }
.cd2-main { min-width: 0; }
.cd2-overview { min-width: 0; }
@container (min-width: 680px){ .cd2-body { grid-template-columns: minmax(0,1fr) 248px; } }
.cd2-title { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 560; letter-spacing: -0.01em; margin: 0 0 var(--space-item); line-height: 1.15; }
.cd2-units { display: flex; align-items: stretch; gap: var(--space-tight); }
.cd2-colon { align-self: center; color: var(--ink-4); font-weight: 700; }
.cd2-unit { position: relative; flex: 1; background: var(--bg-sunken); border: none; border-radius: var(--r-card); padding: var(--space-item) var(--space-inline) var(--space-item); text-align: center; box-shadow: none; }
.cd2-num { display: block; font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 560; line-height: 1; letter-spacing: -0.02em; }
.cd2-lab { display: block; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--space-tight); }
.cd2-unit-ic { display: grid; place-items: center; margin: var(--space-inline) auto 0; }
.cd2-done { font-size: var(--t-strong-size); font-weight: 600; color: var(--ink-2); padding: var(--space-item) 0; }
.cd2-done-em { display: none; }
.cd2-progress { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin: var(--space-group) 0 var(--space-inline); }
.cd2-progress span { display: block; height: 100%; border-radius: 999px; background: var(--ink-3); transition: width .5s ease; }
.cd2-progress-meta { display: flex; align-items: center; justify-content: space-between; }
.cd2-pct { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.cd2-due { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.cd2-due .icn { color: var(--ink-4); }
.cd2-overview { border: none; border-radius: 0; background: transparent; padding: var(--space-item) 0 0; border-top: 1px solid var(--border-subtle); }
.cd2-ov-h { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-inline); }
.cd2-ov-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-tight) 0; font-size: var(--t-label-size); }
.cd2-ov-l { display: inline-flex; align-items: center; gap: var(--space-inline); color: var(--ink-3); }
.cd2-ov-l .icn { color: var(--ink-4); }
.cd2-ov-v { font-weight: 600; color: var(--ink); text-align: right; }
.cd2-chip { font-size: var(--t-micro-size); font-weight: 600; padding: 2px var(--space-inline); border-radius: 999px; }
.cd2-chip.ok { color: var(--st-done); background: transparent; }
.cd2-ov-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-tight); width: 100%; margin-top: var(--space-item); padding: var(--space-inline); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.cd2-ov-btn:hover { border-color: var(--border-strong); color: var(--ink); background: var(--bg-hover); }
.cd2-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-item); padding: var(--space-item) 2px; margin-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
@container (max-width: 540px){ .cd2-foot { grid-template-columns: 1fr; } }
.cd2-foot-h { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-inline); }
.cd2-foot-h .icn { color: var(--ink-4); }
.cd2-next { display: flex; align-items: center; gap: var(--space-inline); }
.cd2-next-ic { width: auto; height: auto; border-radius: 0; background: none; color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.cd2-next-t { font-size: var(--t-label-size); font-weight: 600; }
.cd2-next-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.cd2-going { display: flex; flex-direction: column; gap: var(--space-inline); }
.cd2-going-meta { font-size: var(--t-micro-size); color: var(--ink-3); }
.cd2-actions { display: flex; flex-direction: column; gap: var(--space-inline); }
.cd2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); height: 36px; border: 1px solid var(--border); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.cd2-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.cd2-btn.primary { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cd2-btn.primary.on { background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }

/* poll */
.poll { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-sidebar); padding: var(--space-group) var(--space-group); margin-top: var(--space-tight); }
.poll-head { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.poll-ic { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--accent); display: grid; place-items: center; }
.poll-kicker { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; }
.poll-closes, .poll-closed { font-size: var(--t-micro-size); color: var(--ink-4); }
.poll-closed { color: var(--st-blocked); font-weight: 600; }
.poll-q { font-size: var(--t-strong-size); font-weight: 650; margin: 0 0 var(--space-item); }
.poll-opts { display: flex; flex-direction: column; gap: var(--space-inline); }
.poll-opt { position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); overflow: hidden; cursor: pointer; padding: 0; transition: border-color .12s; }
.poll-opt:hover { border-color: var(--border-strong); }
.poll-opt.mine { border-color: var(--accent); }
.poll-opt-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width .5s var(--ease); }
.poll-opt.lead .poll-opt-fill { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.poll-opt-body { position: relative; display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); }
/* --accent-fg, not #fff: the checked state is `.poll-opt.mine`, not a `.on`
   class, which is why the first sweep for this bug missed it. It fills with
   var(--accent) — LIGHT in dark mode — so a hardcoded white tick measured
   1.94:1 against its own fill. Fixed 2026-08-16, see KNOWN_ISSUES #196. */
.poll-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-fg); }
.poll-opt.mine .poll-radio { background: var(--accent); border-color: var(--accent); }
.poll-opt-t { font-size: var(--t-label-size); font-weight: 550; }
.poll-opt-n { font-size: var(--t-micro-size); color: var(--ink-3); }
.poll-opt-pct { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); min-width: 38px; text-align: right; }
.poll-foot { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-item); }
.poll-clear { border: none; background: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: var(--t-caption-size); padding: 0; }
/* composer poll */
.fpoll-opts { display: flex; flex-direction: column; gap: var(--space-inline); margin: var(--space-inline) 0; }
.fpoll-optrow { display: flex; align-items: center; gap: var(--space-inline); }
.fpoll-bullet { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; }
.fpoll-rm { width: 30px; height: 30px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.fpoll-rm:hover { background: var(--bg-hover); color: var(--ink); }
.fpoll-add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) 2px; }
.fpoll-multi { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); cursor: pointer; }
.fpoll-multi input { width: 15px; height: 15px; accent-color: var(--accent); }

/* kudos card */
.kudos { position: relative; border: 1px solid color-mix(in srgb, var(--kv) 30%, var(--border)); border-radius: var(--r-card); background: color-mix(in srgb, var(--kv) 6%, var(--surface)); padding: var(--space-group) 20px; margin-top: var(--space-tight); overflow: hidden; text-align: center; }
.kudos-glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 220px; height: 120px; background: radial-gradient(ellipse, color-mix(in srgb, var(--kv) 26%, transparent), transparent 70%); pointer-events: none; }
.kudos-head { position: relative; display: inline-flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-item); }
.kudos-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--kv); color: #fff; display: grid; place-items: center; }
.kudos-kicker { font-size: var(--t-micro-size); font-weight: 800; letter-spacing: .08em; color: var(--kv); }
.kudos-value { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.kudos-to { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); }
.kudos-names { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 560; }
.kudos-msg { position: relative; font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-2); margin: 12px auto 16px; max-width: 460px; font-style: italic; }
.kudos-cheer { position: relative; display: inline-flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-group); border: 1px solid var(--kv); border-radius: 999px; background: var(--surface); color: var(--kv); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.kudos-cheer:hover { background: color-mix(in srgb, var(--kv) 10%, var(--surface)); }
.kudos-cheer.on { background: var(--kv); color: #fff; }
/* composer kudos pickers */
.fk-people { display: flex; flex-wrap: wrap; gap: var(--space-group) var(--space-inline); }
.fk-person { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); width: 60px; border: none; background: none; padding: 0; cursor: pointer; }
.fk-person-av { position: relative; border: 2px solid transparent; border-radius: 50%; line-height: 0; transition: border-color .12s; }
.fk-person.on .fk-person-av { border-color: var(--accent); }
.fk-person-nm { font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-3); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-person.on .fk-person-nm { color: var(--ink); }
.fk-check { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 2px solid var(--surface); }
.fk-values { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
/* kudos: team picker — editorial checkbox grid (hairlines, charcoal accent, no shadow) */
.fk-teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-inline); }
.fk-teamrow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.fk-teamrow:hover { border-color: var(--border-strong); }
.fk-teamrow.on { border-color: var(--accent); background: var(--accent-soft); }
.fk-teamrow-ic { color: var(--ink-3); display: inline-grid; place-items: center; flex-shrink: 0; }
.fk-teamrow.on .fk-teamrow-ic { color: var(--accent); }
.fk-teamrow-nm { flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-teamrow-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); background: var(--bg-sunken); border-radius: 99px; padding: 0 var(--space-inline); flex-shrink: 0; }
/* --accent-fg, not #fff: the fill is var(--accent), which is LIGHT in dark mode,
   so a hardcoded white check measured 1.94:1 against its own fill (WCAG wants
   3:1 for a graphical object). --accent-fg is the paired ink and inverts with
   it. Fixed 2026-08-16; see claude/KNOWN_ISSUES.md #196. */
.fk-box { width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-fg); transition: all .12s; }
.fk-teamrow.on .fk-box { background: var(--accent); border-color: var(--accent); }
/* redesigned kudos card — NO left accent bar (forbidden); accent via badge + soft tint */
.kudos2 { position: relative; display: flex; border: 1px solid color-mix(in srgb, var(--kv) 22%, var(--border)); border-radius: var(--r-card); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--kv) 7%, var(--surface)), var(--surface)); margin-top: var(--space-item); }
.kudos2-body { flex: 1; padding: var(--space-group) var(--space-group); min-width: 0; }
.kudos2-top { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-item); }
.kudos2-badge { width: 36px; height: 36px; border-radius: var(--r-control); background: var(--kv); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 3px 10px color-mix(in srgb, var(--kv) 35%, transparent); }
.kudos2-vwrap { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.kudos2-kicker { font-size: var(--t-micro-size); font-weight: 800; letter-spacing: .12em; color: var(--kv); }
.kudos2-value { font-size: var(--t-strong-size); font-weight: 700; color: var(--ink); }
.kudos2-emoji { font-size: var(--t-title-size); flex-shrink: 0; }
.kudos2-recipients { display: flex; flex-direction: column; gap: var(--space-inline); margin-bottom: var(--space-item); }
.kudos2-team { display: inline-flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) 0; border: none; border-radius: 0; background: transparent; }
.kudos2-team-ic { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--tc); display: grid; place-items: center; flex-shrink: 0; }
.kudos2-team-main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.kudos2-team-n { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); }
.kudos2-team-meta { font-size: var(--t-micro-size); color: var(--ink-3); }
.kudos2-people { display: flex; align-items: center; gap: var(--space-item); }
.kudos2-names { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.kudos2-msg { font-size: var(--t-body-size); line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-item); font-style: italic; }
.kudos2-foot { display: flex; align-items: center; gap: var(--space-item); }
.kudos2-cheer { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border: 1px solid color-mix(in srgb, var(--kv) 36%, var(--border)); border-radius: 99px; background: var(--surface); color: var(--kv); font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: all .13s; }
.kudos2-cheer:hover { background: color-mix(in srgb, var(--kv) 10%, transparent); }
.kudos2-cheer.on { background: var(--kv); color: #fff; border-color: var(--kv); }
.kudos2-reach { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.fk-value { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.fk-value:hover { border-color: var(--border-strong); }
.fk-value.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.fk-value.on .icn { color: var(--accent); }

/* @mention autocomplete popup */
.mention-pop { position: fixed; z-index: 9999; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-tight); max-height: 280px; overflow-y: auto; }
.mention-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; }
.mention-row.on, .mention-row:hover { background: var(--bg-hover); }
/* .mention-hl now shares the canonical .mention identity (see above) */

/* projects — compact metric strip (flush; spacing separates cells — Hairline
   Budget 2026-08-29: vertical cell dividers removed, single bottom hairline kept) */
.pmetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.pmetric { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) 20px; border: none; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
.pmetric:first-child { padding-left: 2px; }
/* Wrap compensation: the strip reflows 4→2 at 760 and 2→1 at 520 (deliberate,
   off-ladder — these are where the column count actually changes today). The
   first cell of each wrapped ROW must sit on the page edge like :first-child. */
@media (max-width: 760px){
  .pmetric:nth-child(2n+1) { padding-left: 2px; }
}
@media (max-width: 520px){
  .pmetric { padding-left: 2px; }
}
.pmetric-btn { cursor: pointer; font: inherit; color: inherit; text-align: left; transition: background .14s; border-radius: var(--r-control); }
.pmetric-btn:hover { background: var(--bg-hover); }
.pmetric-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; color: var(--ink-3); }
.pmetric-main { flex: 1; min-width: 0; }
.pmetric-val { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 540; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmetric-label { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Meetings / Zoom — feed card (reference style)
   ============================================================ */
.mc2 { border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); padding: var(--space-tight); margin-top: var(--space-tight); }
.mc2.live { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.mc2-head { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-item); }
.mc2-title { font-size: var(--t-heading-size); font-weight: 700; color: var(--ink); }
.mc2-sub { font-size: var(--t-label-size); color: var(--ink-2); margin-top: 2px; opacity: .85; }
.mc2-collapse { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.mc2-card { background: var(--surface); border-radius: var(--r-card); padding: var(--space-group) var(--space-group) var(--space-item); }
.mc2-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 0; }
.mc2-row.top { align-items: flex-start; }
.mc2-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-sunken); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.mc2-tx { font-size: var(--t-body-size); color: var(--ink); min-width: 0; }
.mc2-tx b { font-weight: 600; }
.mc2-muted { color: var(--ink-3); font-weight: 400; }
.mc2-attendees { margin-top: var(--space-inline); }
.mc2-link { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-tight); font-size: var(--t-label-size); color: var(--ink-3); }
.mc2-copy { width: 24px; height: 24px; border: none; background: none; border-radius: 6px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.mc2-copy:hover { background: var(--bg-hover); color: var(--ink); }
.mc2-divider { height: 1px; background: var(--border-subtle); margin: var(--space-item) 0; }
.mc2-join { display: block; text-align: center; padding: var(--space-item); border-radius: var(--r-control); background: var(--ink); color: var(--bg-sidebar); font-size: var(--t-body-size); font-weight: 650; text-decoration: none; transition: filter .12s; }
.mc2-join:hover { filter: brightness(1.1); }
.mc2-rsvp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-inline); }
.mc2-rsvp-q { font-size: var(--t-body-size); font-weight: 500; color: var(--ink-2); }
.mc2-rsvp-btns { display: flex; gap: var(--space-inline); }
.mc2-rsvp-btn { min-width: 56px; height: 34px; padding: 0 var(--space-group); border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.mc2-rsvp-btn:hover { background: var(--accent-soft); }
.mc2-rsvp-btn.yes { background: var(--accent); color: var(--accent-fg); }
.mc2-rsvp-btn.no { background: var(--st-blocked-soft); border-color: var(--st-blocked); color: var(--st-blocked-ink); }

/* redesigned platform-branded feed card (mcard2) — Editorial Calm */
.mcard2 { --pc: var(--accent); border: none; border-top: 1px solid var(--border-subtle); border-radius: 0; background: transparent; overflow: visible; margin-top: var(--space-inline); box-shadow: none; }
.mcard2-band { display: flex; align-items: center; gap: var(--space-inline); padding: 0 0 var(--space-inline); background: transparent; border-bottom: 1px solid var(--border-subtle); }
.mcard2-logo { flex-shrink: 0; display: grid; place-items: center; }
.mcard2-logo svg { border-radius: var(--r-control); box-shadow: none; }
.mcard2-band-tx { min-width: 0; flex: 1; }
.mcard2-band-name { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: var(--space-inline); }
.mcard2-recur { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); background: transparent; padding: 0; border-radius: 0; text-transform: none; letter-spacing: 0; }
.mcard2-band-sub { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.mcard2-state { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-3); background: transparent; padding: 0; border-radius: 0; white-space: nowrap; flex-shrink: 0; }
.mcard2-state.live { color: var(--st-blocked); background: transparent; }
.mcard2-state.ended { color: var(--ink-4); background: transparent; }
.mcard2-collapse { width: 28px; height: 28px; border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; }
.mcard2-collapse:hover { background: var(--bg-hover); color: var(--ink); }
.mcard2.ended { opacity: .96; }
.mcard2-main { padding: var(--space-item) 0 var(--space-tight); }
.mcard2-title { font-size: var(--t-strong-size); font-weight: 650; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; line-height: 1.3; }
.mcard2-title:hover { color: var(--accent); }
.mcard2-agenda { font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.5; margin-top: var(--space-tight); }
.mcard2-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); flex-wrap: wrap; margin: var(--space-item) 0; }
.mcard2-attendees { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.mcard2-att-tx { font-size: var(--t-caption-size); color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--space-tight); }
.mcard2-att-tx b { color: var(--ink); font-weight: 700; }
.mcard2-att-dot { color: var(--ink-4); }
.mcard2-conf { color: var(--ink-2); font-weight: 600; }
.mcard2-maybe { color: var(--ink-3); font-weight: 600; }
.mcard2-proj { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); background: transparent; border: none; padding: 0; border-radius: 0; }
.mcard2-proj-dot { display: none; }
.mcard2-link { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); font-family: var(--font-mono); background: transparent; border: none; border-top: 1px solid var(--border-subtle); border-radius: 0; padding: var(--space-inline) 0; margin-bottom: var(--space-tight); }
.mcard2-actions { display: flex; align-items: center; gap: var(--space-tight); padding-bottom: var(--space-inline); }
.mcard2-join { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline); height: 36px; border-radius: var(--r-control); border: none; background: transparent; color: var(--accent); font-size: var(--t-label-size); font-weight: 650; text-decoration: none; transition: background .12s, color .12s; cursor: pointer; }
.mcard2-join:hover { background: var(--bg-hover); border-color: transparent; filter: none; transform: none; }
.mcard2.ended .mcard2-join { background: transparent; color: var(--ink-2); border-color: transparent; }
.mcard2-join.disabled { color: var(--ink-3); cursor: default; }
.mcard2-join.disabled:hover { background: transparent; }
.mc2-spin { animation: spin .9s linear infinite; }
.mcard2-detail { width: 36px; height: 36px; border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.mcard2-detail:hover { border-color: transparent; color: var(--ink); background: var(--bg-hover); }
.mcard2-rsvp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-inline) 0 2px; border-top: 1px solid var(--border-subtle); background: transparent; }
.mcard2-rsvp-q { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.mcard2-rsvp-btns { display: inline-flex; }
.mcard2-rsvp .seg { margin: 0; }
.mcard2-rsvp-btn { display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 56px; justify-content: center; height: 30px; padding: 0 var(--space-item); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.mcard2-rsvp-btn:hover { border-color: transparent; color: var(--ink); background: var(--bg-hover); }
.mcard2-rsvp-btn.yes { background: var(--bg-hover); border-color: transparent; color: var(--ink); }
.mcard2-rsvp-btn.no { background: var(--bg-hover); border-color: transparent; color: var(--ink); }
.mcard2-rsvp-btn.maybe { background: var(--bg-hover); border-color: transparent; color: var(--ink); }
.mcard2-rsvp-btn.maybe:hover { border-color: transparent; color: var(--ink); }

/* calendar — projected meeting events + sync UI */
.cal-ev-mtg { background: var(--bg-sidebar); }
.cal-ev-plat { display: inline-flex; flex-shrink: 0; }
.cal-ev-plat svg { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
/* passive meeting-chip flags: conflict warning + agenda glyph */
.cal-mtg-flag { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
button.cal-mtg-flag { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; border-radius: 4px; transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
button.cal-mtg-flag:hover { transform: scale(1.18); background: color-mix(in srgb, var(--c-clay) 16%, transparent); }
.cal-mtg-flag.conflict { color: var(--c-clay); }
.cal-mtg-flag.agenda { color: var(--ink-4); }
.calw-ev .cal-mtg-flag, .calw-ev-title .cal-mtg-flag { margin-left: 1px; }
.calw-ev.mtg .cal-mtg-flag.agenda { color: color-mix(in srgb, currentColor 55%, transparent); }

/* calendar header: search + view segment */
.cal-search { display: flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); width: 155px; transition: border-color .14s, box-shadow .14s, width .2s; }
.cal-search:focus-within { border-color: var(--accent); width: 210px; }
.cal-search .icn { color: var(--ink-4); flex-shrink: 0; }
.cal-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); font-family: inherit; }
.cal-search button { border: none; background: none; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 5px; }
.cal-search button:hover { color: var(--ink); background: var(--bg-hover); }
/* ── Canonical segmented control (.seg) ── single source; legacy class names are aliases */
.seg, .cal-vseg, .fin-viewseg, .ct-viewseg, .tp-viewseg {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); padding: var(--space-tight);
}
.seg button, .cal-vseg button, .fin-viewseg button, .ct-viewseg button, .tp-viewseg button {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  height: 28px; padding: 0 var(--space-item); border: none; background: transparent;
  border-radius: var(--r-xs); font: inherit; font-size: var(--fs-125); font-weight: 600;
  color: var(--ink-3); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.seg button:hover:not(.on), .cal-vseg button:hover:not(.on), .fin-viewseg button:hover:not(.on), .ct-viewseg button:hover:not(.on), .tp-viewseg button:hover:not(.on) { color: var(--ink); }
.seg button.on, .cal-vseg button.on, .fin-viewseg button.on, .ct-viewseg button.on, .tp-viewseg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg-n { font-size: var(--fs-105); font-weight: 700; padding: 0 var(--space-tight); border-radius: var(--r-pill); background: var(--bg-active); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg button.on .seg-n { background: var(--accent-soft); color: var(--accent); }

/* ── Page-level view toggles rendered as thin underline tabs (single style
   across the app — same look as .tabs). Bare .seg in modals stays a pill. ── */
.cal-vseg, .fin-viewseg, .ct-viewseg, .tp-viewseg, .seg.th-seg {
  background: none; border: none; border-radius: 0; padding: 0; gap: 20px;
  border-bottom: 1px solid var(--border-subtle); align-self: stretch;
}
.cal-vseg button, .fin-viewseg button, .ct-viewseg button, .tp-viewseg button, .seg.th-seg button {
  height: auto; padding: var(--space-inline) 1px; border-radius: 0; background: none; box-shadow: none;
  color: var(--ink-3); position: relative; font-weight: 500; gap: var(--space-tight);
  /* These tabs are underlines, so they carry 1px of horizontal padding on
     purpose: the label IS the tab and the gap between them is the rhythm. The
     cost is that a SHORT label collapses below the Any-Size 24px floor — the
     Notifications filter "All" measured 17px wide next to "Mentions" at 78
     (audit UX-016). A floor on the box rather than more padding, so the only
     tabs that move are the ones that were too small to hit; every normal label
     keeps its spacing exactly. */
  min-width: 24px; justify-content: center;
}
.cal-vseg button:hover:not(.on):not(.active), .fin-viewseg button:hover:not(.on), .ct-viewseg button:hover:not(.on), .tp-viewseg button:hover:not(.on), .seg.th-seg button:hover:not(.active) { color: var(--ink-2); background: none; }
.cal-vseg button.on, .fin-viewseg button.on, .ct-viewseg button.on, .tp-viewseg button.on, .seg.th-seg button.active {
  background: none; box-shadow: none; color: var(--ink);
}
.cal-vseg button.on::after, .fin-viewseg button.on::after, .ct-viewseg button.on::after, .tp-viewseg button.on::after, .seg.th-seg button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1.5px; background: var(--accent); border-radius: 2px;
}
.cal-focus-chip { display: inline-flex; align-items: center; gap: var(--space-inline); height: 30px; padding: 0 var(--space-inline) 0 var(--space-tight); border: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.cal-focus-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cal-focus-chip .icn:last-child { opacity: .7; }
.cal-more { display: inline-flex; align-items: center; width: 100%; border: none; background: none; color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 700; cursor: pointer; padding: 2px var(--space-tight); border-radius: 5px; }
.cal-more:hover { color: var(--accent); background: var(--accent-soft); }

/* week / day time-grid */
.calw { display: flex; flex-direction: column; }
.calw-head { display: grid; border-bottom: 1px solid var(--border); }
.calw-gutter-h { border-right: 1px solid var(--border-subtle); }
.calw-dayh { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-item) var(--space-tight) var(--space-inline); border-right: 1px solid var(--border-subtle); }
.calw-dow { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.calw-dnum { font-size: var(--t-title-size); font-weight: 600; letter-spacing: -0.02em; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.calw-dayh.today .calw-dow { color: var(--accent); font-weight: 800; }
.calw-dayh.today .calw-dnum { background: var(--accent); color: var(--accent-fg); }
.calw-allday { display: grid; border-bottom: 1px solid var(--border); background: var(--bg-sidebar); max-height: 92px; overflow-y: auto; }
.calw-allday-lbl { font-size: 9.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; padding: var(--space-inline) var(--space-tight); text-align: right; border-right: 1px solid var(--border-subtle); }
.calw-allday-col { padding: var(--space-tight) var(--space-tight); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-tight); min-width: 0; }
.calw-allday-ev { display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); border: none; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; text-align: left; min-width: 0; }
.calw-scroll { overflow-y: auto; min-height: 200px; }
.cal-locked .calw-scroll { flex: 1; max-height: none; min-height: 0; }
.calw-grid { display: grid; position: relative; }
.calw-gutter { position: relative; border-right: 1px solid var(--border-subtle); }
.calw-hr { position: absolute; right: 8px; transform: translateY(-7px); font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 600; white-space: nowrap; letter-spacing: .01em; }
.calw-col { position: relative; border-right: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; }
.calw-col:hover { background: color-mix(in srgb, var(--accent) 2.5%, transparent); }
.calw-col.today { background: color-mix(in srgb, var(--accent) 5.5%, transparent); }
.calw-line { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent); }
/* off-hours shading — the calendar owner's non-working hours (working-hours model) */
.calw-offhours { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-4) 6%, transparent) 0 5px, transparent 5px 10px); }
.calw-offhours.whole { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-4) 8%, transparent) 0 5px, transparent 5px 10px); }
/* availability overlay — a focused teammate's busy time from the shared source */
.calw-avail { position: absolute; left: 3px; right: 3px; z-index: 1; border-radius: var(--r-control); pointer-events: none; overflow: hidden;
  background-color: color-mix(in srgb, var(--c-clay) 9%, transparent);
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--c-clay) 13%, transparent) 6px 12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-clay) 20%, transparent); }
.calw-avail.soft { background-color: transparent; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink-4) 9%, transparent) 6px 12px); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.calw-avail-lbl { display: block; padding: var(--space-tight) var(--space-inline); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: color-mix(in srgb, var(--c-clay) 62%, var(--ink)); }
.calw-avail.soft .calw-avail-lbl { color: var(--ink-4); }
.calw-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 5; pointer-events: none; }
.calw-now-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.calw-ev { position: absolute; display: flex; gap: 0; border-radius: var(--r-control); padding: 0; overflow: hidden; cursor: pointer; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--ec) 26%, var(--border-subtle)); transition: transform .12s, border-color .12s; z-index: 4; text-align: left; }
.calw-ev:hover { transform: none; border-color: color-mix(in srgb, var(--ec) 55%, transparent); z-index: 6; filter: brightness(0.98); }
.calw-ev.marked { border-color: color-mix(in srgb, var(--ec) 60%, transparent); }
.calw-ev-mark { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border: none; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; border-radius: 4px; font-size: var(--t-micro-size); line-height: 1; color: transparent; transition: color .12s; z-index: 8; }
.calw-ev-mark { color: transparent; }
.calw-ev:hover .calw-ev-mark { color: var(--ink-4); }
.calw-ev-mark.on, .calw-ev:hover .calw-ev-mark.on { color: var(--c-gold); }
.calw-ev-mark:hover:not(.on) { color: var(--ink-2); }
.calw-ev-body { padding: var(--space-tight) var(--space-inline); min-width: 0; flex: 1; }
.calw-ev-title { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; color: color-mix(in srgb, var(--ec) 70%, var(--ink)); line-height: 1.3; }
.calw-ev-plat { display: inline-flex; flex-shrink: 0; }
.calw-ev-plat svg { border-radius: 3px; }
.calw-ev-time { display: block; font-size: var(--t-micro-size); color: color-mix(in srgb, var(--ec) 50%, var(--ink-3)); margin-top: 2px; font-weight: 500; }
.calw-ev.mtg { background: var(--bg-sidebar); }
.calw-day .calw-ev-body { padding: var(--space-tight) var(--space-inline); }

/* ---- calendar fixed viewport layout ---- */
.cal-locked { overflow: hidden !important; }
.cal-locked .content-pad { height: 100%; display: flex; flex-direction: column; padding-bottom: var(--space-inline); box-sizing: border-box; max-width: none; }
.cal-locked .with-rail { flex: 1; min-height: 0; align-items: start; overflow: hidden; grid-template-columns: 1fr var(--rail-w) !important; }
.cal-locked .rail { max-height: 100%; overflow-y: auto; display: flex !important; }
.cal-locked .with-rail.cal-rail-collapsed { grid-template-columns: 1fr !important; }
.cal-locked .with-rail.cal-rail-collapsed > .rail { display: none !important; }
.cal-main-card { display: flex; flex-direction: column; min-height: 0; }
/* sticky period bar + DOW row inside the scrolling month/agenda card */
.cal-stickyhead { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.cal-agenda-head { position: sticky; top: 0; z-index: 6; background: var(--surface); }
/* Shared period-header row for Week/Day/Month/Agenda views — was three separate
   inline style objects (11px 18px 10px, gap:12), each a near-copy of the others. */
.cal-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-item) var(--space-group); }
.cal-page-head.bordered { border-bottom: 1px solid var(--border); }
.cal-legend-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-item); padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border); }
.cal-main-card > div[style*="grid"] { min-width: 0; }
.cal-locked .calw { flex: 1; min-height: 0; }
/* narrow viewports: collapse the calendar rail so day cells stay roomy
   (overrides the !important split above — must come after it) */
@media (max-width: 1240px){
  .cal-locked .with-rail { grid-template-columns: 1fr !important; }
  .cal-locked .rail { display: none !important; }
  .cal-rail-toggle { display: none !important; }
}
.csync-twoway { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-3); margin-top: var(--space-inline); cursor: pointer; }
/* ── LEGACY TOGGLE SKINS — six class names, one control (SET 9 §5) ─────────
   Before this, the app carried SEVEN toggle implementations. They ran at five
   different track sizes (38x22, 34x20, 34x20-with-a-rectangular-radius, 32x19,
   30x17, 42x24, 34x20), six knob sizes, eight independently hardcoded knob
   fills, and six
   separate copies of the same dark-mode hack (`background: var(--lime)`), which
   made "on" GREEN in dark and near-black in light in a product whose accent is
   deliberately neutral. One of the seven (.sbx-tog) had no markup at all.

   They are not renamed here. Their markup lives in ten files owned by other
   work, and a rename touching all of them would be a large diff whose only
   product is a different string. What matters is that there is now exactly ONE
   definition of what a toggle looks like, driven by the same --sw-* tokens as
   `.switch` and FormKit — so tuning the switch tunes all of them, and none of
   them can drift again.

   NEW CODE USES FormKit.Switch. This block is a bridge for existing markup,
   not a menu to add to. The two shapes below cover both constructions found in
   the tree: a knob that is a child element, and one that is a ::after.

   NOTE `.act-unread-toggle` and `.cal-allday-toggle` are LABEL WRAPPERS, not
   tracks — their real track is the inner .act-toggle-track / .cal-allday-knob,
   which is why those two appear nested here while the rest are matched
   directly. */
.rp-toggle,
.dq-toggle,
.cc-toggle,
.ws-toggle,
.cal-allday-knob,
.wsc-mini-toggle,
.cv-style-toggle,
.ev-live,
.av-tog,
.bk-switch,
.act-unread-toggle .act-toggle-track {
  width: var(--sw-w); height: var(--sw-h);
  border-radius: var(--r-pill);
  background: var(--border-strong);
  position: relative; flex-shrink: 0;
  border: none; padding: 0; cursor: pointer;
  transition: background var(--dur-micro) var(--ease);
}
/* The small rung. Activity's unread toggle sits in a dense tab row and always
   ran smaller; it keeps that, now from the token rather than from 30/17/13. */
.act-unread-toggle .act-toggle-track,
.wsc-mini-toggle { width: var(--sw-w-sm); height: var(--sw-h-sm); }

.rp-toggle-knob,
.dq-toggle-knob,
.cc-toggle-knob,
.ws-toggle-knob,
.act-toggle-knob,
.cal-allday-knob::after,
.wsc-mini-toggle::after,
.cv-style-toggle span,
.ev-live-knob,
.av-tog-knob,
.bk-switch-knob {
  content: ""; position: absolute;
  top: var(--sw-inset); left: var(--sw-inset);
  width: var(--sw-knob); height: var(--sw-knob);
  border-radius: var(--r-pill);
  background: var(--accent-fg);
  box-shadow: 0 0 0 1px rgba(22,24,29,.10), 0 1px 2px rgba(22,24,29,.20), 0 2px 6px rgba(22,24,29,.12);
  transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.act-toggle-knob,
.wsc-mini-toggle::after { width: var(--sw-knob-sm); height: var(--sw-knob-sm); }

.rp-toggle.on,
.dq-toggle.on,
.cc-toggle.on,
.ws-toggle.on,
.cal-allday-toggle.on .cal-allday-knob,
.wsc-mini-toggle.on,
.cv-style-toggle.on,
.ev-live.on,
.av-tog.on,
.bk-switch-row.on .bk-switch,
.act-unread-toggle.on .act-toggle-track { background: var(--accent); }

.rp-toggle.on .rp-toggle-knob,
.dq-toggle.on .dq-toggle-knob,
.cc-toggle.on .cc-toggle-knob,
.ws-toggle.on .ws-toggle-knob,
.cal-allday-toggle.on .cal-allday-knob::after,
.cv-style-toggle.on span,
.ev-live.on .ev-live-knob,
.av-tog.on .av-tog-knob,
.bk-switch-row.on .bk-switch-knob { transform: translateX(var(--sw-travel)); }
.act-unread-toggle.on .act-toggle-knob,
.wsc-mini-toggle.on::after { transform: translateX(var(--sw-travel-sm)); }

/* Every one of these carries :not(.on) for the reason spelled out on
   `.dark .switch:not(.on)` above: at equal specificity the later rule wins, and
   a dark off-track declared after the on-state repaints switches that are on. */
.dark .rp-toggle:not(.on),
.dark .dq-toggle:not(.on),
.dark .cc-toggle:not(.on),
.dark .ws-toggle:not(.on),
.dark .cal-allday-toggle:not(.on) .cal-allday-knob,
.dark .wsc-mini-toggle:not(.on),
.dark .cv-style-toggle:not(.on),
.dark .ev-live:not(.on),
.dark .av-tog:not(.on),
.dark .bk-switch-row:not(.on) .bk-switch,
.dark .act-unread-toggle:not(.on) .act-toggle-track { background: rgba(255, 255, 255, 0.24); }
.dark .rp-toggle-knob,
.dark .dq-toggle-knob,
.dark .cc-toggle-knob,
.dark .ws-toggle-knob,
.dark .act-toggle-knob,
.dark .cal-allday-knob::after,
.dark .wsc-mini-toggle::after,
.dark .cv-style-toggle span,
.dark .ev-live-knob,
.dark .av-tog-knob,
.dark .bk-switch-knob {
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.44), 0 2px 6px rgba(0,0,0,.30);
}
@media (prefers-reduced-motion: reduce) {
  .rp-toggle, .dq-toggle, .cc-toggle, .ws-toggle, .cal-allday-knob,
  .act-unread-toggle .act-toggle-track,
  .rp-toggle-knob, .dq-toggle-knob, .cc-toggle-knob, .ws-toggle-knob,
  .act-toggle-knob, .cal-allday-knob::after,
  .wsc-mini-toggle, .wsc-mini-toggle::after,
  .cv-style-toggle, .cv-style-toggle span, .ev-live, .ev-live-knob,
  .av-tog, .av-tog-knob, .bk-switch, .bk-switch-knob { transition-duration: .01ms; }
}

/* Small variant — dense rows (calendar sync, inline settings). Tokenised with
   the rest of the control: the old version typed translateX(13px) against a
   30px track, which is 1px past its own 2px inset. --sw-travel-sm derives it. */
.switch.sm { width: var(--sw-w-sm); height: var(--sw-h-sm); }
.switch.sm::after { width: var(--sw-knob-sm); height: var(--sw-knob-sm); }
.switch.sm.on::after { transform: translateX(var(--sw-travel-sm)); }
.switch.sm:active::after { width: calc(var(--sw-knob-sm) + 3px); }
.switch.sm.on:active::after { transform: translateX(calc(var(--sw-travel-sm) - 3px)); }
.csync-now { width: 28px; height: 28px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: all .14s; }
.csync-now:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
.csync-list { display: flex; flex-direction: column; gap: var(--space-inline); }
.csync-item { display: flex; align-items: center; gap: var(--space-inline); }
.csync-item svg { border-radius: var(--r-control); flex-shrink: 0; }
.csync-name { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); }
.csync-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.csync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-done); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-done) 16%, transparent); flex-shrink: 0; }

/* ============================================================
   Meetings / Zoom — page
   ============================================================ */

/* up-next banner — hairline, no platform wash */
.mnext { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); padding: var(--space-group) var(--space-tight) var(--space-group); border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; margin-bottom: var(--space-group); box-shadow: none; }
.mnext-l { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.mnext-kicker { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.mnext-title { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 500; letter-spacing: -0.02em; margin: 2px 0 var(--space-inline); }
.mnext-people { display: flex; align-items: center; gap: var(--space-inline); }
.mnext .btn { text-decoration: none; flex-shrink: 0; }

.mtabs { display: flex; gap: var(--space-tight); border-bottom: 1px solid var(--border); margin-bottom: var(--space-group); }
.mtab { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: none; background: none; color: var(--ink-3); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab.on { color: var(--ink); border-bottom-color: var(--accent); }
.mtab-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.mtab.on .mtab-n { background: var(--accent); color: var(--accent-fg); }
.mlist { display: flex; flex-direction: column; gap: 2px; }
.mempty { padding: 48px; text-align: center; color: var(--ink-3); }
.mrow { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); border: none; border-radius: var(--r-card); background: none; box-shadow: none; transition: background .12s; }
.mrow:hover { background: var(--bg-hover); }
.mrow-logo { flex-shrink: 0; display: grid; place-items: center; }
.mrow-logo svg { border-radius: var(--r-control); box-shadow: var(--shadow-xs); }
.mrow.past .mrow-logo { opacity: .68; filter: saturate(.65); }
.mrow-date { text-align: center; flex-shrink: 0; width: 64px; font-variant-numeric: tabular-nums; }
.mrow-date b { display: block; font-size: var(--t-body-size); font-weight: 700; }
.mrow-date span { font-size: var(--t-micro-size); color: var(--ink-3); }
.mrow-main { flex: 1; min-width: 0; }
.mrow-title { font-size: var(--t-body-size); font-weight: 600; display: flex; align-items: center; gap: var(--space-inline); }
.mrow-tag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: transparent; padding: 1px 0; border-radius: 0; }
.mrow-sub { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.mrow-actions { display: flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; }
.mrow-actions .mcard-btn { height: 32px; padding: 0 var(--space-item); }
.mcard-btn { display: inline-flex; align-items: center; gap: var(--space-tight); height: 36px; padding: 0 var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s, color .12s, border-color .12s; }
.mcard-btn:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--border); }
.mcard-btn.join { background: transparent; border-color: var(--border); color: var(--accent); }
.mcard-btn.join:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--border-strong); filter: none; }

/* schedule modal bits */
.mtg-check, .mtg-sharefeed { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink-2); cursor: pointer; }
.mtg-check input, .mtg-sharefeed input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.mtg-sharefeed { align-items: flex-start; padding: var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-sidebar); }
.mtg-sharefeed b { display: block; font-size: var(--t-label-size); }
.mtg-scope { padding: var(--space-item) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-sidebar); }
.mtg-scope-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-inline); }
.mtg-scope-h .icn, .mtg-scope-h svg { color: var(--accent); }
.mtg-scope-opts { display: flex; gap: var(--space-tight); }
.mtg-scope-opt { flex: 1; height: 34px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.mtg-scope-opt:hover { border-color: var(--border-strong); }
.mtg-scope-opt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mtg-scope-note { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-inline); line-height: 1.45; }
.mtg-sharefeed em { font-style: normal; font-size: var(--t-micro-size); color: var(--ink-3); }
.pm-grid { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.pm-chip { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.pm-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   Meetings — stats, toolbar, search, grouping, platform, detail
   ============================================================ */
.mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.mstat { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-tight) 20px; border: none; border-radius: 0; background: none; box-shadow: none; }
/* Hairline Budget 2026-08-29: no vertical dividers between stat cells */
.mstat:first-child { padding-left: 2px; }
.mstat-click { cursor: pointer; border-radius: var(--r-control); transition: background .12s; }
.mstat-click:hover { background: var(--bg-hover); }
/* action-items rollup */
.mai-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin-bottom: var(--space-item); }
.mai-count { font-size: var(--t-label-size); color: var(--ink-3); }
.mai-count b { color: var(--ink); }
.mai-list { display: flex; flex-direction: column; gap: 2px; }
.mai-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border: none; border-radius: var(--r-control); background: none; box-shadow: none; transition: background .12s; }
.mai-row:hover { background: var(--bg-hover); }
.mai-row.done { opacity: .6; }
.mai-row.done .mai-text { text-decoration: line-through; color: var(--ink-3); }
.mai-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: var(--st-done-fg); flex-shrink: 0; cursor: pointer; padding: 0; }
.mai-row.done .mai-check { background: var(--st-done); border-color: var(--st-done); }
.mai-text { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.mai-src { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-tight); font: inherit; font-size: var(--t-micro-size); color: var(--ink-3); background: none; border: none; padding: 0; cursor: pointer; }
.mai-src:hover { color: var(--accent); }
.mai-owner { flex-shrink: 0; }
.mai-tasked { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 700; color: var(--st-done); background: color-mix(in srgb, var(--st-done) 13%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.mai-totask { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; font: inherit; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; padding: var(--space-tight) var(--space-inline); cursor: pointer; transition: all .12s; }
.mai-totask:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.mstat-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.mstat-v { font-size: var(--t-heading-size); font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.mstat-k { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }

.mtoolbar { display: flex; align-items: center; gap: var(--space-item); border-bottom: 1px solid var(--border); margin-bottom: var(--space-group); }
.mtoolbar .mtabs { border-bottom: none; margin-bottom: 0; }
.msearch { display: flex; align-items: center; gap: var(--space-inline); height: 36px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); width: 230px; transition: border-color .14s, box-shadow .14s; margin-bottom: var(--space-inline); }
.msearch:focus-within { border-color: var(--accent); }
.msearch .icn { color: var(--ink-4); flex-shrink: 0; }
.msearch input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); font-family: inherit; }
.msearch button { border: none; background: none; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 5px; }
.msearch button:hover { color: var(--ink); background: var(--bg-hover); }
.mtoolbar .btn.secondary { margin-bottom: var(--space-inline); }
.mtoolbar .btn.on-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mfilter-n { min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 700; display: inline-grid; place-items: center; margin-left: var(--space-tight); }

.mgroup { margin-bottom: var(--space-group); }
.mgroup-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin: var(--space-tight) 2px var(--space-inline); }
.mgroup-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.mgroup .mrow { margin-bottom: 0; }
.mrow { cursor: pointer; }
.mrow:hover { background: var(--bg-hover); }
.mrow-live { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 1px var(--space-inline) 1px var(--space-tight); border-radius: 999px; }
.mrow-rsvp { font-weight: 600; }
.mrow-rsvp.going { color: var(--accent); }
.mrow-rsvp.no { color: var(--ink-4); }

/* schedule modal — platform picker */
.mtg-platform { display: flex; gap: var(--space-inline); }
.mtg-plat { flex: 1; display: inline-flex; align-items: center; gap: var(--space-inline); height: 48px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: border-color .14s, background .14s; }
.mtg-plat.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); color: var(--ink); }
.mtg-plat .icn { flex-shrink: 0; }
.mtg-plat svg { flex-shrink: 0; }
.mtg-plat-st { display: block; font-style: normal; font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-4); margin-top: 1px; }
.mtg-plat-st.ok { color: var(--accent); }
.mtg-connect-hint { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) 2px; }
.mtg-connect-hint:hover { text-decoration: underline; }

/* row platform chip */
.mrow-plat { display: inline-flex; align-items: center; gap: var(--space-tight); font-weight: 600; color: var(--ink-2); }
.mrow-plat svg { flex-shrink: 0; vertical-align: middle; }

/* connections modal */
/* Inline variant: the meeting editor expands this panel in place instead of
   stacking a second modal over itself (KNOWN_ISSUES #209). It is a SECTION, not
   a card — hairline top rule and rhythm, no border box or fill, per the
   avoid-visual-jumble rule. The provider list is the point here; the five
   workspace-wide preference switches belong to the standalone modal, so they are
   hidden inline rather than doubling the height of a meeting form. */
.conn-panel.inline { margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.conn-panel.inline .conn-prefs { display: none; }
.conn-panel.inline .conn-card { padding: var(--space-inline) 2px; }
/* ── "what needs doing here" banner (KNOWN_ISSUES #229) ──────────────────────
   One outstanding setup step, on the page that owns it. Sits in the shell chrome
   stack beside .pname-banner, so it is page furniture — NOT a floating bubble.
   claude/ONBOARDING_V2_FLOW.md LOCKS out tooltip bubbles and walkthroughs after
   the Reveal, and a card that hovers over the product is exactly what that ban
   is about. Hairline bottom rule, no card, no shadow, no left border. */
.suh {
  display: flex; align-items: center; gap: var(--space-item);
  padding: var(--space-item) var(--space-gutter);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sunken, var(--surface));
  transition: opacity var(--dur-over) var(--ease), transform var(--dur-over) var(--ease);
}
.suh.is-out { opacity: 0; transform: translateY(-4px); }
.suh-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--bg-active); color: var(--ink-2); flex-shrink: 0; }
.suh-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.suh-t { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); }
.suh-s { font-size: var(--t-caption-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suh-go { flex-shrink: 0; }
.suh-x {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-4);
  border-radius: var(--r-control); cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.suh-x:hover { background: var(--bg-hover); color: var(--ink-2); }
@media (max-width: 640px) {
  .suh { gap: var(--space-tight); padding: var(--space-item); }
  .suh-s { display: none; }
}
/* Request attachments (KNOWN_ISSUES #224). Lives in the SHARED sheet, not in a
   module stylesheet: the request form renders on both the internal route and the
   public client portal, and a drop zone that loses its styling when a sheet gets
   route-scoped would degrade silently to a bare label. Mirrors the vendor
   document uploader's treatment so a client meets the same control in both. */
.rq-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-tight); padding: var(--space-block) var(--space-item); border: 1px dashed var(--border); border-radius: var(--r-card); background: var(--bg-sunken, var(--surface)); color: var(--ink-3); cursor: pointer; text-align: center; transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
.rq-drop:hover, .rq-drop.on { border-color: var(--accent); color: var(--ink-2); }
.rq-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rq-drop-t { font-size: var(--t-caption-size); }
.rq-drop-s { font-size: var(--t-micro-size); color: var(--ink-4); }
.rq-atts { display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-tight); }
.rq-att { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border-subtle); border-radius: var(--r-control); font-size: var(--t-caption-size); color: var(--ink-2); }
.rq-att .icn { color: var(--ink-4); flex-shrink: 0; }
.rq-att-x { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: none; background: transparent; color: var(--ink-4); border-radius: var(--r-control); cursor: pointer; }
.rq-att-x:hover { background: var(--bg-hover); color: var(--ink); }

.conn-list { display: flex; flex-direction: column; }
.conn-card { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 2px; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; transition: background .12s; }
.conn-card:last-child { border-bottom: none; }
.conn-card.on { background: transparent; }
.conn-card:hover { background: var(--bg-hover); }
.conn-card svg { flex-shrink: 0; border-radius: var(--r-control); }
.conn-name { font-size: var(--t-body-size); font-weight: 650; display: flex; align-items: center; gap: var(--space-inline); }
.conn-def { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: transparent; padding: 0; border-radius: 0; }
.conn-desc { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.conn-status { display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 0; max-width: 100%; color: var(--ink-2); font-weight: 550; }
.conn-acct { min-width: 0; }
.conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-done); box-shadow: none; }
.conn-actions { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.conn-prefs { border: none; border-top: 1px solid var(--border-subtle); border-radius: 0; overflow: hidden; margin-top: var(--space-inline); padding-top: 2px; }
.conn-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-item) var(--space-group); cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--border-subtle); }
.conn-pref:last-child { border-bottom: none; }
.conn-pref:hover { background: var(--bg-hover); }
.conn-pref-t { font-size: var(--t-label-size); font-weight: 600; }
.conn-pref-d { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
@media (max-width: 640px) {
  .connections-modal .btn,
  .connections-modal .modal-x { min-height: 44px; }
  .connections-modal .modal-x { min-width: 44px; }
  .meetings-screen .ph-actions .btn { height: 44px; min-height: 44px; }
}

/* ── calendar .ics import (Phase 2) ── */
.cal-drop { display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left; padding: var(--space-group); border: 1.5px dashed var(--border); border-radius: var(--r-card); background: var(--bg-sunken); color: var(--ink-2); cursor: pointer; transition: border-color .14s, background .14s; }
.cal-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.cal-drop svg { color: var(--accent); flex-shrink: 0; }
.cal-drop-t { font-size: var(--t-body-size); font-weight: 650; }
.cal-drop-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.cal-or { display: flex; align-items: center; gap: var(--space-item); color: var(--ink-3); font-size: var(--t-micro-size); }
.cal-or::before, .cal-or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.cal-paste { width: 100%; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--t-caption-size); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-1); }
.cal-paste:focus { outline: none; border-color: var(--accent); }
.cal-err { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--st-blocked); }
.cal-sum { display: flex; align-items: center; gap: var(--space-group); padding: 0 2px var(--space-item); font-size: var(--t-label-size); color: var(--ink-2); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.cal-sum b { color: var(--ink-1); }
.cal-sum .warn b { color: var(--st-blocked); }
.cal-sum .muted { color: var(--ink-3); font-size: var(--t-caption-size); }
.cal-rows { display: flex; flex-direction: column; max-height: 340px; overflow: auto; margin: 0 -4px; }
.cal-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.cal-row:last-child { border-bottom: none; }
.cal-row.skipped { opacity: .5; }
.cal-row-t { font-size: var(--t-label-size); font-weight: 600; display: flex; align-items: center; gap: var(--space-inline); }
.cal-row-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.cal-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); background: var(--bg-sunken); padding: 1px var(--space-tight); border-radius: 999px; }
.cal-conflict { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--st-blocked); margin-top: var(--space-tight); }
.cal-row-act { display: flex; gap: 0; flex-shrink: 0; }
.cal-row-act .seg, .seg-group .seg { font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); cursor: pointer; }
.cal-row-act .seg:first-child, .seg-group .seg:first-child { border-radius: var(--r-control) 0 0 var(--r-control); }
.cal-row-act .seg:last-child, .seg-group .seg:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; border-left: none; }
.cal-row-act .seg.on, .seg-group .seg.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.seg-group { display: flex; flex-shrink: 0; }
.cal-done { text-align: center; padding: var(--space-block) var(--space-inline) var(--space-item); }
.cal-done-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto var(--space-group); }
.cal-done-t { font-size: var(--t-strong-size); font-weight: 650; }
.cal-done-s { font-size: var(--t-label-size); color: var(--ink-3); margin-top: var(--space-tight); }
.cal-settings { margin-top: var(--space-tight); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.cal-set-h { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: var(--space-inline); }
.cal-set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-inline) 0; }
.cal-set-t { font-size: var(--t-label-size); font-weight: 600; }
.cal-set-d { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }

/* ── cloud storage import ── */
.cloud-note { display: flex; align-items: flex-start; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); padding: var(--space-inline) var(--space-item); background: var(--bg-sunken); border-radius: var(--r-control); }
.cloud-note svg { flex-shrink: 0; margin-top: 1px; }
.cloud-lbl { display: block; font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-2); margin-bottom: var(--space-tight); }
.cloud-in { width: 100%; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-1); font-size: var(--t-label-size); }
.cloud-in:focus { outline: none; border-color: var(--accent); }
.cloud-detect { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); margin-top: var(--space-inline); }
.cloud-detect.warn { color: var(--ink-3); }
.cloud-detect svg { flex-shrink: 0; }

/* ── detail drawer ── */
.md-status { display: inline-flex; align-items: center; gap: var(--space-tight); height: 26px; padding: 0; border-radius: 0; font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-3); background: none; white-space: nowrap; letter-spacing: .03em; text-transform: uppercase; }
.md-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--st-blocked); box-shadow: none; animation: md-pulse 1.6s infinite; }
@keyframes md-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.md-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); flex-wrap: wrap; padding: var(--space-item) 2px var(--space-group); border-radius: 0; margin-bottom: var(--space-group); background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); }
.md-hero.live { background: transparent; border-bottom-color: color-mix(in srgb, var(--st-blocked) 35%, var(--border-subtle)); }
.md-hero.past { background: transparent; }
.md-hero-l { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.md-hero-ic { width: auto; height: auto; border-radius: 0; background: none; border: none; color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; box-shadow: none; }
.md-hero.live .md-hero-ic { color: var(--st-blocked); }
.md-hero.past .md-hero-ic { color: var(--ink-4); }
.md-hero-k { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.md-hero-v { font-size: var(--t-heading-size); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.md-hero-link { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); font-family: var(--font-mono); background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--r-control); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); min-width: 0; max-width: 100%; }

.md-tabs { display: flex; gap: var(--space-tight); border-bottom: 1px solid var(--border); margin-bottom: var(--space-group); }
.md-tab { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border: none; background: none; color: var(--ink-3); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.md-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.md-tab-n { min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }

.md-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 20px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.md-fact { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-inline); border: none; border-radius: 0; background: transparent; }
.md-fact + .md-fact { border-left: 1px solid var(--border-subtle); }
.md-fact-ic { width: auto; height: auto; border-radius: 0; background: none; border: none; color: var(--ink-3); display: inline-flex; place-items: center; flex-shrink: 0; }
.md-fact b { display: block; font-size: var(--t-label-size); font-weight: 600; line-height: 1.25; }
.md-fact span { font-size: var(--t-micro-size); color: var(--ink-3); }

.md-sec { margin-bottom: 20px; }
.md-sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-bottom: var(--space-item); }
.md-sec-h > span:first-child { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); }
.md-sec-meta { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 500; }
.md-link-btn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) var(--space-tight); border-radius: 6px; }
.md-link-btn:hover { background: var(--accent-soft); }

.md-myrsvp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-item) 2px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-item); }
.md-myrsvp-q { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.md-rsvp-seg { display: flex; gap: var(--space-tight); }
.md-rsvp-b { display: inline-flex; align-items: center; gap: var(--space-tight); height: 32px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.md-rsvp-b:hover { border-color: var(--border-strong); color: var(--ink); }
.md-rsvp-b.yes { background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.md-rsvp-b.no { background: transparent; border-color: color-mix(in srgb, var(--st-blocked) 50%, var(--border)); color: var(--st-blocked); }
.md-rsvp-b.maybe { background: transparent; border-color: color-mix(in srgb, var(--c-gold, #c79a3a) 50%, var(--border)); color: var(--c-gold, #c79a3a); }

.md-att { display: flex; flex-direction: column; gap: 2px; }
.md-att-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); transition: background .12s; }
.md-att-row:hover { background: var(--bg-hover); }
.md-att-name { font-size: var(--t-label-size); font-weight: 600; display: flex; align-items: center; gap: var(--space-inline); }
.md-att-role { font-size: var(--t-micro-size); color: var(--ink-3); }
.md-host-tag, .md-you-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0; border-radius: 0; background: transparent; }
.md-host-tag { color: var(--ink-3); }
.md-you-tag { color: var(--ink-4); }
.md-att-status { font-size: var(--t-micro-size); font-weight: 700; padding: var(--space-tight) var(--space-inline); border-radius: 999px; flex-shrink: 0; }
.md-att-status.going { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.md-att-status.declined { background: var(--st-blocked-soft); color: var(--st-blocked); }
.md-att-status.maybe { background: color-mix(in srgb, var(--c-gold, #c79a3a) 16%, transparent); color: var(--c-gold, #c79a3a); }
.md-att-status.pending { background: var(--bg-active); color: var(--ink-4); }
.md-addatt { display: inline-flex; align-items: center; gap: var(--space-tight); height: 34px; padding: 0 var(--space-item); margin-top: var(--space-inline); border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: none; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.md-addatt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.md-addatt:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.md-addatt-grid { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--bg-sidebar); }
.md-addatt-done { height: 34px; padding: 0 var(--space-item); border: none; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; }

.md-ag { display: flex; flex-direction: column; gap: 0; }
.md-ag-list { display: flex; flex-direction: column; gap: 0; }
/* Hairline Budget 2026-08-29: agenda rows (and the add row that closes the
   list) separate by their 8/8 rhythm plus the hover wash, not a line each. */
.md-ag-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 2px; border: none; border-radius: 0; background: transparent; transition: background .12s; }
.md-ag-row:hover { background: var(--bg-hover); }
.md-ag-row.done { opacity: .6; }
.md-ag-row.done .md-ag-text { text-decoration: line-through; color: var(--ink-3); }
.md-ag-check { width: 18px; height: 18px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 5px; background: transparent; color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-ag-row.done .md-ag-check { background: var(--st-done); border-color: var(--st-done); }
.md-ag-text { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: var(--t-label-size); color: var(--ink); padding: 2px 0; }
.md-ag-mins { flex-shrink: 0; height: 24px; padding: 0 var(--space-inline); border: 1px solid var(--border-subtle); border-radius: 999px; background: transparent; color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 650; cursor: pointer; transition: border-color .12s, color .12s; }
.md-ag-mins:hover { border-color: var(--border-strong); color: var(--ink-2); }
.md-ag-mins.set { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.md-ag-x { width: 24px; height: 24px; flex-shrink: 0; border: none; background: none; color: var(--ink-4); border-radius: 6px; cursor: pointer; display: grid; place-items: center; transition: color .12s, background .12s; }
.md-ag-x:hover { background: var(--bg-hover); color: var(--st-blocked); }
.md-ag-add { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 2px; border: none; border-radius: 0; }
.md-ag-add-ic { color: var(--ink-4); flex-shrink: 0; }
.md-ag-add-in { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: var(--t-label-size); color: var(--ink); }
.md-ag-add-btn { flex-shrink: 0; height: 26px; padding: 0 var(--space-item); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: transparent; color: var(--accent); font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; }
.md-ag-foot { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-3); padding: 2px 2px 0; }
.md-ag-foot .icn, .md-ag-foot svg { color: var(--ink-4); flex-shrink: 0; }
.md-ag-foot.over { color: var(--c-gold); }
.md-ag-foot.over .icn, .md-ag-foot.over svg { color: var(--c-gold); }
.md-ag-foot-cov { margin-left: auto; font-weight: 650; color: var(--st-done); }
/* agenda coverage in recap */
.md-agcov-bar { height: 6px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; margin-bottom: var(--space-item); }
.md-agcov-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--st-done); transition: width .3s ease; }
.md-agcov-list { display: flex; flex-direction: column; gap: var(--space-tight); }
.md-agcov-row { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink); padding: var(--space-tight) 0; }
.md-agcov-row.done { color: var(--ink-3); }
.md-agcov-ic { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-4); }
.md-agcov-ic.yes { background: var(--st-done-soft); color: var(--st-done); }
.md-agcov-min { flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); }
.md-agcov-foot { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); font-size: var(--t-micro-size); color: var(--c-gold); }
.md-agcov-foot .icn, .md-agcov-foot svg { flex-shrink: 0; }
.md-agcov-cta { display: inline-flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: background .12s; }
.md-agcov-cta:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.md-edit { position: relative; font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); padding: var(--space-item) var(--space-section) var(--space-item) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--bg-sidebar); cursor: text; white-space: pre-wrap; transition: border-color .12s; }
.md-edit:hover { border-color: var(--border-strong); }
.md-edit.unset { color: var(--ink-4); font-style: italic; }
.md-edit-ic { position: absolute; top: 11px; right: 11px; color: var(--ink-4); opacity: 0; transition: opacity .12s; }
.md-edit:hover .md-edit-ic { opacity: 1; }
.md-edit-ta { line-height: 1.55; }

/* recap */
.md-canvas-cta {
  display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left;
  padding: var(--space-item) 0; margin-bottom: var(--space-group); border-radius: 0; border: none;
  border-bottom: 1px solid var(--border-subtle); background: transparent; cursor: pointer; transition: background .12s;
}
.md-canvas-cta:hover { border-color: var(--border-subtle); box-shadow: none; transform: none; background: var(--bg-hover); }
.md-canvas-cta-ic { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent); display: inline-flex; place-items: center; flex-shrink: 0; }
.md-canvas-cta-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-canvas-cta-tx b { font-size: var(--t-label-size); color: var(--ink); font-weight: 650; }
.md-canvas-cta-tx span { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.4; }
.md-canvas-cta > svg { color: var(--ink-4); flex-shrink: 0; }
.md-canvas-cta:hover > svg { color: var(--accent); }
.md-ai-badge { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; color: var(--accent); margin-bottom: var(--space-inline); }
.md-ai-dot { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent); display: inline-flex; place-items: center; }
.md-summary { font-size: var(--t-label-size); line-height: 1.62; color: var(--ink-2); margin: 0; }
.md-decisions { display: flex; flex-direction: column; gap: var(--space-inline); }
.md-decision { display: flex; align-items: flex-start; gap: var(--space-inline); font-size: var(--t-label-size); line-height: 1.45; color: var(--ink); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: var(--bg-sidebar); }
.md-decision-ic { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.md-actions-list { display: flex; flex-direction: column; gap: var(--space-inline); }
.md-action { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: var(--surface); transition: border-color .12s; }
.md-action:hover { border-color: var(--border-strong); }
.md-action.done .md-action-t { color: var(--ink-3); text-decoration: line-through; }
.md-action-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: var(--st-done-fg); transition: all .12s; }
.md-action.done .md-action-check { background: var(--st-done); border-color: var(--st-done); }
.md-action-t { font-size: var(--t-label-size); font-weight: 550; line-height: 1.35; }
.md-action-meta { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }
.md-action-add { width: 30px; height: 30px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .12s; }
.md-action-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.md-action-done { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--st-done); background: color-mix(in srgb, var(--st-done) 14%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; flex-shrink: 0; }

.md-ai-answer { font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); padding: var(--space-item) var(--space-item); border-radius: var(--r-control); background: var(--accent-soft); margin-bottom: var(--space-inline); }
.md-ask { display: flex; align-items: center; gap: var(--space-tight); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-control); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); }
.md-ask:focus-within { border-color: var(--accent); }
.md-ask input { flex: 1; min-width: 0; border: none; background: none; outline: none; height: 34px; font-size: var(--t-label-size); color: var(--ink); font-family: inherit; }
.md-ask-send { width: 32px; height: 32px; border-radius: var(--r-control); border: none; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.md-ask-send:hover { background: var(--accent-700); }

/* Playback for the meeting's recording. The bytes live on the linked note; this
   is the meeting-side surface for them (s-meetrec.jsx). */
.md-trans-rec { display: flex; flex-direction: column; gap: var(--space-inline); padding-bottom: var(--space-item); margin-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.md-trans { display: flex; flex-direction: column; gap: var(--space-group); }
.md-trans-row { display: flex; gap: var(--space-item); }
.md-trans-head { display: flex; align-items: baseline; gap: var(--space-inline); margin-bottom: var(--space-tight); }
.md-trans-head b { font-size: var(--t-caption-size); font-weight: 700; }
.md-trans-t { font-size: var(--t-micro-size); color: var(--ink-4); font-family: var(--font-mono); }
.md-trans-tx { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); }
.md-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: 44px 20px; color: var(--ink-3); font-size: var(--t-label-size); }

/* projects — modern borderless list view */
.plist-wrap { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.plist-head, .prow { display: grid; grid-template-columns: minmax(0,1fr) 64px 112px 118px 86px 34px 44px; align-items: center; gap: var(--space-item); }
.plist-head { padding: 0 var(--space-item) var(--space-inline); border-bottom: 1px solid var(--border-subtle); }
.plist-head span { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .045em; color: var(--ink-4); }
.plist { display: flex; flex-direction: column; }
/* Hairline Budget 2026-08-29: rows carry NO divider — row rhythm + hover wash
   separates; the single allowed hairline moved to the column header above. */
.prow { padding: var(--space-item) var(--space-item); cursor: pointer; transition: background .12s; border-radius: var(--r-control); }
.prow:hover { background: var(--bg-hover); }
.prow-main { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.prow-ic { width: 38px; height: 38px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.prow-name-row { display: flex; align-items: center; gap: var(--space-inline); }
.prow-name { font-weight: 600; font-size: var(--t-body-size); }
.prow-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.prow-prog { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.prow-prog-n { font-size: var(--t-caption-size); width: 32px; flex-shrink: 0; }
.prow-due { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.prow-due svg, .prow-due .icn { color: var(--ink-4); flex-shrink: 0; }
.prow-acts { display: flex; align-items: center; gap: 0; justify-content: flex-end; }
.prow-pin { opacity: 0; transition: opacity .12s; }
.prow:hover .prow-pin { opacity: 1; }
.plist-foot { font-size: var(--t-caption-size); color: var(--ink-3); padding: var(--space-item) var(--space-item) 2px; margin-top: var(--space-tight); border-top: 1px solid var(--border-subtle); }
/* Projects keeps collection-row icons as bare glyphs. The template color is
   useful as ink, but it never earns a tile or an oversized empty footprint. */
.projects-page .prow-main { gap: var(--space-inline); }
.projects-page .prow-ic {
  width: 24px;
  height: auto;
  border-radius: 0;
  background: transparent !important;
}
/* Pin and overflow actions keep their hit areas while remaining bare glyphs. */
.projects-page .prow-acts .btn.icon,
.projects-page .prow-acts .btn.icon:hover,
.projects-page .prow-acts .btn.icon:focus-visible,
.projects-page .pcard2-head .btn.icon,
.projects-page .pcard2-head .btn.icon:hover,
.projects-page .pcard2-head .btn.icon:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.projects-page .prow-acts .btn.icon:hover,
.projects-page .prow-acts .btn.icon:focus-visible,
.projects-page .pcard2-head .btn.icon:hover,
.projects-page .pcard2-head .btn.icon:focus-visible { color: var(--ink-2); }
/* graceful degrade by the list's own width — drop secondary columns when cramped */
@container (max-width: 720px){
  .plist-head, .prow { grid-template-columns: minmax(0,1fr) 116px 122px 44px; }
  .ph-team, .prow-team, .ph-due, .prow-due, .ph-owner, .prow-owner { display: none; }
}
@container (max-width: 460px){
  .plist-head, .prow { grid-template-columns: minmax(0,1fr) 116px 44px; }
  .ph-prog, .prow-prog { display: none; }
}

/* projects — richer cards */
/* board-view project card — refreshed: icon-anchored header, chips, hairline footer */
.pcard2 { padding: var(--space-group); }
.pcard2-head { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-item); }
.pcard2-ic { width: 40px; height: 40px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.pcard2-ic-ring { flex-shrink: 0; }
.pcard2-name-row { display: flex; align-items: center; gap: var(--space-tight); min-width: 0; }
.pcard2-name { font-weight: 600; font-size: var(--t-strong-size); letter-spacing: -0.01em; }
.pcard2-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.pcard2-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-bottom: var(--space-item); }
.pcard2-desc { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.5; margin-bottom: var(--space-item); }
.pcard2-labels { margin-bottom: var(--space-item); }
.pcard2-prog { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.pcard2-ms { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-bottom: var(--space-item); }
.pcard2-ms svg, .pcard2-ms .icn { color: var(--ink-4); flex-shrink: 0; }
.pcard2-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.project-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(248px, 1fr));
  gap: var(--space-item);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--space-inline);
}
.project-board-col {
  min-width: 248px;
  padding-top: var(--space-inline);
  border-top: 1px solid var(--border-subtle);
  scroll-snap-align: start;
}
.project-board-head { margin-bottom: var(--space-inline); }
.project-board-head .tnum { font-size: var(--t-caption-size); }
.project-board-list { gap: var(--space-inline); min-height: 76px; }
.project-board-empty { padding: var(--space-item) 0; font-size: var(--t-caption-size); }
.project-card-drag { cursor: grab; }
.project-card-drag:active { cursor: grabbing; }
.project-card-drag.dragging { cursor: grabbing; }
.project-board-col.drag-over {
  border-top-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
/* Drop placeholder — a dashed outline of where the card will land. Matches the
   Kanban board's .kbn-ph so both boards read the same. */
.project-board-ph {
  box-sizing: border-box;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  flex-shrink: 0;
  animation: kbn-drop-in var(--dur-micro) var(--ease);
}
/* The floating card that follows the cursor. It is a real, fully opaque card
   portaled to <body>, NOT the browser's translucent native drag snapshot —
   that is what made the old board look see-through mid-drag. */
.project-board-clone {
  position: fixed; left: 0; top: 0; z-index: 9999;
  box-sizing: border-box;
  pointer-events: none;
  will-change: transform;
}
.project-board-clone .pcard2 {
  margin: 0; opacity: 1;
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 18px 36px -14px rgba(32,33,36,.28);
  cursor: grabbing;
  transform: none;
}
.dark .project-board-clone .pcard2 { box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }
.projects-page .pcard2:focus-visible,
.projects-page .prow:focus-visible,
.projects-page .proj-timeline-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
.projects-page .pcard2:focus-within .task-card-pin,
.projects-page .prow:focus-within .prow-pin { opacity: 1 !important; }
.proj-timeline-months {
  gap: 0;
  margin: 0 0 var(--space-inline) 234px;
  padding-bottom: var(--space-inline);
  border-bottom: 1px solid var(--border-subtle);
}
.proj-timeline-months .eyebrow { font-size: var(--t-micro-size); }
.projects-page .proj-timeline-row > .icn:first-child { background: transparent; }
@media (max-width: 760px) {
  .project-board { grid-template-columns: repeat(4, minmax(min(82vw, 292px), 1fr)); gap: var(--space-inline); }
  .project-board-col { min-width: min(82vw, 292px); }
  .proj-timeline-months { margin-left: 0; }
  .proj-timeline-row { flex-wrap: wrap; gap: var(--space-inline) !important; }
  .proj-timeline-row > .icn:first-child { order: 1; }
  .proj-timeline-row > div:nth-of-type(1) { order: 2; width: calc(100% - 118px) !important; }
  .proj-timeline-row > :last-child { order: 3; margin-left: auto; }
  .proj-timeline-row > div:nth-of-type(2) { order: 4; flex: 1 0 100%; }
}
.pcard-cover { height: 60px; position: relative; }
.pcard-cover-tex { position: absolute; inset: 0; }
/* Inset Inspector — detached floating details panel (inspect / inset / apple panel) */
.inset-inspector {
  display: flex; flex-direction: column; flex-shrink: 0;
  background: var(--inset-inspector-bg);
  border: 1px solid var(--inset-inspector-border);
  border-radius: var(--inset-inspector-radius);
  box-shadow: var(--inset-inspector-shadow);
  overflow: hidden; user-select: none;
  max-height: calc(100vh - var(--inset-inspector-gap) * 2);
}
.inset-inspector-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.inset-inspector-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-tight) var(--space-item) var(--space-group); }
.inset-inspector.compact { width: 48px; min-width: 48px; }
.inset-inspector.compact .inset-inspector-body { display: none; }
.inset-inspector.compact .inset-inspector-hd { border-bottom: none; }
/* projects right rail — borderless sections on the page background.
   Hairline Budget 2026-08-29: the per-section border-bottom is gone; the
   .card-pad 20/20 rhythm already puts 40px between adjacent section contents,
   which separates them without striping the rail. */
.rail-flush { gap: 0; }
.rail-flush .rail-card { background: none; border: none; box-shadow: none; border-radius: 0; }
.rail-flush .card-pad { padding: 20px 2px; }
/* Collapse handle for a page-integrated rail. Bare glyph, aligned to the rail's
   own top edge, revealed on hover so it never competes with the content. */
.rail-collapse { align-self: flex-end; width: 26px; height: 26px; margin-bottom: calc(-1 * var(--space-inline)); border: none; background: none; border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink-4); cursor: pointer; opacity: 0; transition: opacity .14s, background .14s, color .14s; }
.rail:hover .rail-collapse, .rail-collapse:focus-visible { opacity: 1; }
.rail-collapse:hover { background: var(--bg-hover); color: var(--ink-2); }
/* Rail hidden → the list gets the full measure back, no phantom gap. */
.with-rail.rail-off { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cal-up-row { border-radius: var(--r-control); padding: var(--space-inline) var(--space-inline); margin: 0 -8px; transition: background .12s; }
.cal-up-row:hover { background: var(--bg-sunken); }
.rail-flush .rail-card:first-child .card-pad { padding-top: 2px; }
.projects-insights-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 2px 0;
  font: inherit;
  font-size: var(--t-caption-size);
  font-weight: 600;
  cursor: pointer;
}
.projects-insights-link:hover,
.projects-insights-link:focus-visible { background: transparent; color: var(--accent-700); }
.projects-insights .projects-deadline-row {
  margin-inline: -4px;
  padding-inline: 4px;
  border-radius: 0;
}
.projects-insights .rail-card:last-child .lrow > .icn:first-child {
  width: 18px;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 1240px) {
  .projects-page .with-rail > .projects-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-block);
    margin-top: var(--space-block);
  }
  .projects-page .projects-insights .rail-card {
    min-width: 0;
    padding-top: 2px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .projects-page .with-rail > .projects-insights { grid-template-columns: 1fr; gap: var(--space-inline); }
}
.pcard-health { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.proj-attention { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-item); margin-bottom: var(--space-group); background: color-mix(in srgb, var(--c-clay) 7%, var(--surface)); border: 1px solid color-mix( srgb, var(--c-clay) 20%, transparent); border-radius: var(--r-lg); }
.proj-attention-hd { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 700; color: var(--c-clay); flex-shrink: 0; }
.proj-attention-n { background: var(--tag-clay-bg); color: var(--tag-clay-fg); font-size: var(--t-micro-size); min-width: 17px; height: 17px; border-radius: 99px; display: inline-grid; place-items: center; padding: 0 var(--space-tight); }
.proj-attention-list { display: flex; gap: var(--space-inline); flex-wrap: wrap; min-width: 0; }
.proj-attention-chip { display: inline-flex; align-items: center; gap: var(--space-inline); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: var(--space-tight) var(--space-item); cursor: pointer; max-width: 280px; transition: border-color .12s, box-shadow .12s; }
.proj-attention-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.proj-attention-nm { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); }
.proj-attention-rsn { font-size: var(--t-micro-size); font-weight: 500; flex-shrink: 0; }
/* "Needs attention" band (AttentionBand) — clean, Apple-like: borderless, hairline-separated rows, no card, no filled icon tile, NO left accent bar */
.attn { margin-bottom: 20px; }
.attn-hd { display: flex; align-items: center; gap: var(--space-tight); margin-bottom: var(--space-tight); }
.attn-toggle { display: inline-flex; align-items: baseline; gap: var(--space-inline); border: none; background: none; cursor: pointer; padding: var(--space-tight) 2px; font: inherit; }
.attn-chev { color: var(--ink-4); align-self: center; transition: transform .15s; }
.attn-title { font-size: var(--t-micro-size); font-weight: 680; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.attn-n { font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.attn-x { width: 26px; height: 26px; border: none; background: none; border-radius: 999px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: all .14s; flex-shrink: 0; }
.attn:hover .attn-x { opacity: 1; }
.attn-x:hover { background: var(--bg-hover); color: var(--ink-2); }
.projects-page .attn-x,
.projects-page .attn-x:hover,
.projects-page .attn-x:focus-visible { background: transparent; box-shadow: none; }
.projects-page .attn-item { margin-inline: 0; padding-inline: 2px; border-radius: 0; }
.attn-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border-subtle); }
.attn-item { display: flex; align-items: center; gap: var(--space-item); background: none; border: none; border-bottom: 1px solid var(--border-subtle); padding: var(--space-item) var(--space-inline) var(--space-item) var(--space-tight); margin: 0 -8px 0 -4px; cursor: pointer; text-align: left; border-radius: var(--r-control); transition: background .14s; }
.attn-item:hover { background: var(--bg-hover); }
.attn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.attn-nm { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); letter-spacing: -.01em; flex: 1; min-width: 0; }
.attn-rsn { font-size: var(--t-caption-size); font-weight: 500; flex-shrink: 0; }
.attn-go { color: var(--ink-5, var(--ink-4)); opacity: 0; transform: translateX(-3px); transition: all .14s; flex-shrink: 0; }
.attn-item:hover .attn-go { opacity: .85; transform: translateX(0); }
@media (max-width: 760px){ .attn-list { grid-template-columns: 1fr; } }
.pcard-health.sm { font-size: var(--t-micro-size); padding: 2px var(--space-inline); }
.pcard-health-dot { width: 6px; height: 6px; border-radius: 50%; }
.pcard .pcard-cover .pcard-health { position: absolute; top: 10px; right: 10px; box-shadow: var(--shadow-xs); }
.pcard-budget { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; padding: var(--space-tight) var(--space-inline); border-radius: 999px; position: absolute; top: 10px; left: 10px; box-shadow: var(--shadow-xs); }
.pcard-budget.sm { font-size: var(--t-micro-size); padding: 2px var(--space-tight); gap: var(--space-tight); }
.pcard-ms { display: flex; align-items: center; gap: var(--space-tight); }
.pcard-blocked { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 12%, transparent); padding: 2px var(--space-inline) 2px var(--space-tight); border-radius: 99px; flex-shrink: 0; }
.pcard-blocked.sm { font-size: var(--t-micro-size); padding: 1px var(--space-tight) 1px var(--space-tight); }
.pcard-ms .icn { color: var(--ink-4); }
/* milestones */
.pms-list { display: flex; flex-direction: column; }
.pms-item { display: flex; align-items: flex-start; gap: var(--space-item); padding: var(--space-item) 2px; border-bottom: 1px solid var(--border-subtle); }
.pms-item:last-child { border-bottom: none; }
.pms-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--st-done-fg); margin-top: 1px; }
.pms-item.done .pms-check { background: var(--st-done); border-color: var(--st-done); }
.pms-item.done .pms-t { color: var(--ink-3); text-decoration: line-through; }
.pms-t { font-size: var(--t-label-size); font-weight: 550; }
.pms-bar { height: 5px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; margin-top: var(--space-tight); }
.pms-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .2s; }
.pms-at { font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* per-project board */
.pboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-inline); align-items: start; }
.pboard-wrap { display: flex; flex-direction: column; gap: var(--space-item); }
.pboard-bar { display: flex; align-items: center; gap: var(--space-inline); }
.pboard-bar-l { font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); }
.pboard-seg { flex-shrink: 0; }
.pboard-blkfilter { display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; padding: var(--space-tight) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: all .14s; }
.pboard-blkfilter:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c-clay) 45%, var(--border)); color: var(--c-clay); }
.pboard-blkfilter.on { background: color-mix(in srgb, var(--c-clay) 12%, transparent); border-color: color-mix(in srgb, var(--c-clay) 42%, transparent); color: var(--c-clay); }
.pboard-blkfilter:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.pboard-blkn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 99px; background: var(--tag-clay-bg); color: var(--tag-clay-fg); font-size: var(--t-micro-size); font-weight: 800; }
.pboard-blkfilter.on .pboard-blkn { background: var(--c-clay); }
.pboard-empty-blk { color: var(--ink-4); font-size: var(--t-caption-size); font-style: italic; padding: var(--space-inline) var(--space-tight); }
.pboard-scroll { display: flex; gap: var(--space-inline); overflow-x: auto; padding-bottom: var(--space-tight); }
.pboard-scroll .pboard-col { flex: 0 0 232px; }
.pboard-sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pboard-col { background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-inline); min-height: 80px; transition: background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.pboard-col.over { background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunken)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent); }
.pboard-h { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 2px var(--space-tight) var(--space-inline); }
.pboard-scroll .pboard-h { text-transform: none; font-size: var(--t-caption-size); letter-spacing: 0; }
.pboard-hd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pboard-n { margin-left: auto; background: var(--bg-active); color: var(--ink-3); border-radius: 999px; padding: 0 var(--space-tight); font-size: var(--t-micro-size); }
.pboard-body { display: flex; flex-direction: column; gap: var(--space-tight); }
.pboard-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-inline); box-shadow: none; cursor: pointer; transition: border-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease), background .12s; }
.pboard-card:hover { border-color: var(--border-strong); box-shadow: none; transform: none; background: var(--bg-hover); }
.pboard-card.dragging { opacity: .45; transform: scale(.97); }
.pboard-card-t { font-size: var(--t-caption-size); font-weight: 550; line-height: 1.35; }
.pboard-card-foot { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); }
.pboard-subs { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); }
.pboard-subico { color: var(--ink-4); display: grid; place-items: center; flex-shrink: 0; }
.pboard-subbar { flex: 1; height: 4px; border-radius: 99px; background: var(--bg-active); overflow: hidden; }
.pboard-subbar > span { display: block; height: 100%; border-radius: 99px; transition: width var(--dur-over) var(--ease); }
.pboard-subn { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pboard-subn.done { color: var(--st-done); }
.pboard-due { font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 600; }
.pboard-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; padding: 1px var(--space-tight); border-radius: 99px; }
.pboard-chip.over { color: var(--st-blocked); background: var(--st-blocked-soft); }
.pboard-chip.blocked { color: var(--ink-3); background: var(--bg-active); }
.pboard-add { display: flex; align-items: center; gap: var(--space-tight); width: 100%; margin-top: 2px; padding: var(--space-inline) var(--space-inline); border: none; background: none; color: var(--ink-4); font: inherit; font-size: var(--t-micro-size); font-weight: 600; border-radius: var(--r-control); cursor: pointer; transition: all .13s; }
.pboard-add:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pboard-add-form { margin-top: 2px; }
.pboard-add-input { width: 100%; padding: var(--space-inline) var(--space-inline); border: 1px solid var(--accent); border-radius: var(--r-control); background: var(--surface); font: inherit; font-size: var(--t-caption-size); color: var(--ink); outline: none; box-sizing: border-box; }
.pboard-empty { text-align: center; color: var(--ink-4); font-size: var(--t-micro-size); padding: var(--space-tight); min-height: 8px; }
.mention-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.mention-meta { display: flex; flex-direction: column; min-width: 0; }
.mention-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.mention-role { font-size: var(--t-micro-size); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-entity-glyph { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: var(--r-control); background: var(--mention-entity-bg); color: var(--mention-entity-fg); font-size: var(--t-label-size); font-weight: 700; }

/* ============================================================
   Get Started — editorial onboarding (fully borderless)
   ============================================================ */
.content-pad.gs2 { padding-top: 44px; user-select: none; }
.gs2-main { min-width: 0; }
.gs2-rail { gap: 0; position: sticky; top: 16px; }
.gs2-rail-sec + .gs2-rail-sec { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }

/* hero — editorial text + circular progress dial */
.gs2-hero { display: flex; align-items: center; gap: 36px; margin-bottom: 28px; }
.gs2-hero-tx { flex: 1; min-width: 0; }
.gs2-eyebrow { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .16em; margin-bottom: var(--space-group); }
.gs2-title { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 var(--space-group); }
.gs2-wave { display: inline-block; transform-origin: 70% 80%; animation: gsWave 2.6s ease-in-out 1s 2; }
@keyframes gsWave { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .gs2-wave { animation: none; } }
.gs2-sub { color: var(--ink-3); font-size: var(--t-body-size); line-height: 1.6; margin: 0; max-width: 400px; }
.gs2-eta { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-item); padding: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; }
.gs2-eta .icn { color: var(--ink-3); }

.gs2-dial { flex-shrink: 0; position: relative; width: 134px; height: 134px; display: grid; place-items: center; }
.gs2-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gs2-dial-track { fill: none; stroke: var(--border-subtle); stroke-width: 8; }
.gs2-dial-fill { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.gs2-dial-c { position: relative; text-align: center; line-height: 1; }
.gs2-dial-num { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.gs2-dial-num span { font-size: var(--t-strong-size); font-weight: 600; color: var(--ink-3); margin-left: 1px; }
.gs2-dial-cap { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); margin-top: var(--space-tight); letter-spacing: .01em; }
@media (max-width: 640px) { .gs2-hero { flex-direction: column-reverse; align-items: flex-start; gap: 20px; } .gs2-title { font-size: var(--t-display-size); } }

/* required workspace name — borderless */
.gs2-wsname { margin: var(--space-tight) 0 var(--space-inline); }
.gs2-wsname.done { display: flex; align-items: center; gap: var(--space-item); }
.gs2-wsname-check { width: auto; height: auto; border-radius: 0; flex-shrink: 0; display: grid; place-items: center; background: transparent; color: var(--ink-2); }
.gs2-wsname-done-t { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.gs2-wsname-done-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.gs2-wsname-t { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: var(--space-item); letter-spacing: -.015em; }
.gs2-wsname-req { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gs2-wsname-s { font-size: var(--t-label-size); color: var(--ink-3); margin-top: var(--space-inline); line-height: 1.55; max-width: 470px; }
.gs2-wsname-s.tight { margin-top: var(--space-tight); font-size: var(--t-caption-size); max-width: none; }
.gs2-wsname-row { display: flex; gap: var(--space-item); align-items: center; margin-top: var(--space-group); }
.gs2-wsname-input { flex: 1; min-width: 0; border: none; border-bottom: 1.5px solid var(--border-strong); background: none; padding: var(--space-inline) 2px; font: inherit; font-size: var(--t-heading-size); color: var(--ink); transition: border-color .16s; }
.gs2-wsname-input.sm { font-size: var(--t-body-size); padding: var(--space-inline) 2px; border-bottom-width: 1px; border-bottom-color: var(--border-subtle); }
.gs2-wsname-input.area { resize: vertical; min-height: 56px; line-height: 1.45; }
.gs2-wsname-input::placeholder { color: var(--ink-4); }
.gs2-wsname-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
.gs2-wsname-biz { margin-top: var(--space-group); display: flex; flex-direction: column; gap: var(--space-item); padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.gs2-wsname-field { display: flex; flex-direction: column; gap: var(--space-tight); margin: 0; }
.gs2-wsname-flbl { font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); display: flex; align-items: center; gap: var(--space-inline); }
.gs2-wsname-opt { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }

/* section header */
.gs2-h { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; margin: var(--space-page) 0 var(--space-tight); }
.gs2-h.sm { margin: 0 0 var(--space-tight); }

/* checklist — borderless numbered list on hairline dividers */
.gs2-steps { margin: var(--space-inline) -8px 0; }
.gs2-step { display: grid; grid-template-columns: 46px 1fr; align-items: start; gap: var(--space-tight); padding: 20px var(--space-inline); border-top: 1px solid var(--border-subtle); }
.gs2-step:first-child { border-top: none; }
.gs2-num { width: 40px; padding: 1px 0 0; border: none; background: none; text-align: left; cursor: pointer; font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink-4); transition: color .15s; }
.gs2-num:hover { color: var(--ink); }
.gs2-num.auto { cursor: default; }
.gs2-num.auto:hover { color: var(--ink-4); }
.gs2-step.next .gs2-num { color: var(--ink); }

/* entrance — subtle staggered rise on mount (motion only) */
@media (prefers-reduced-motion: no-preference) {
  .gs2-step { opacity: 0; animation: gs2StepIn .5s var(--ease) both; }
}
@keyframes gs2StepIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.gs2-num-check { display: grid; place-items: center; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ink-2); }
.gs2-step-body { min-width: 0; padding-top: 2px; }
.gs2-step-head { display: flex; align-items: baseline; gap: var(--space-group); }
.gs2-step-t { flex: 1; min-width: 0; font-size: var(--t-strong-size); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.gs2-step.done .gs2-step-t { color: var(--ink-3); }
/* marks a checklist step that tracks per-user state, so a teammate seeing a
   different total in a workspace-titled list reads as intended, not broken. */
.gs2-step-scope { margin-left: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); vertical-align: middle; }
.gs2-step-s { font-size: var(--t-label-size); color: var(--ink-3); margin-top: var(--space-tight); line-height: 1.5; max-width: 460px; }
.gs2-step.done .gs2-step-s { color: var(--ink-4); }
.gs2-step-act { flex-shrink: 0; align-self: center; }
.gs2-cta { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; padding: var(--space-tight) 0; font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); cursor: pointer; }
.gs2-cta .icn { transition: transform .15s, color .14s; color: var(--ink-3); }
.gs2-cta:hover .icn { color: var(--ink); transform: translateX(3px); }
.gs2-link { border: none; background: none; padding: var(--space-tight) 0; font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .14s; }
.gs2-link:hover { color: var(--ink); }
/* Skip: a real answer for a step that does not apply, so it sits beside the CTA
   as the quieter of the two. Never louder than the action it declines. */
.gs2-skip { display: inline-flex; align-items: center; min-height: var(--control-h-sm); border: none; background: none; margin-right: var(--space-item); padding: 0; font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-4); cursor: pointer; transition: color .14s; }
.gs2-skip:hover { color: var(--ink-2); }
/* Skipped: out of scope for this workspace, so it reads quieter than a done step
   and never shows a completion check. Still visible, so Undo is reachable.
   Muted with colour, not opacity: `.gs2-step` runs an entrance animation with
   `fill-mode: both`, and an animated property beats a normal declaration in the
   cascade, so an opacity rule here is silently ignored. */
.gs2-step.skipped .gs2-step-t { color: var(--ink-3); }
.gs2-step.skipped .gs2-num { color: var(--ink-4); }
.gs2-donetag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); }
.gs2-donetag.re { border: none; background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); transition: background .14s, color .14s; }
.gs2-donetag.re:hover { background: var(--bg-hover); color: var(--ink); }
.gs2-dt-re { display: none; align-items: center; gap: var(--space-tight); }
.gs2-donetag.re:hover .gs2-dt-check, .gs2-donetag.re:hover .gs2-dt-done { display: none; }
.gs2-donetag.re:hover .gs2-dt-re { display: inline-flex; }
.gs2-faces { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); }
.gs2-face-add { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--border-strong); background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: all .14s; }
.gs2-face-add:hover { border-color: var(--ink); color: var(--ink); }

.gs2-celebrate { display: flex; align-items: center; gap: var(--space-item); margin-top: var(--space-block); padding: var(--space-item) 2px; border-radius: 0; background: transparent; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.gs2-celebrate .icn { color: var(--ink-2); flex-shrink: 0; }
.gs2-celebrate b { display: block; font-size: var(--t-body-size); }
.gs2-celebrate span { font-size: var(--t-caption-size); color: var(--ink-3); }
.gs2-celebrate .btn { margin-left: auto; flex-shrink: 0; }

/* quick actions — borderless rows, no chips */
.gs2-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: var(--space-tight) -12px 0; }
.gs2-qrow { position: relative; display: flex; align-items: center; gap: var(--space-group); text-align: left; padding: var(--space-item) var(--space-item); border: none; background: none; border-radius: var(--r-card); cursor: pointer; transition: background .15s; }
.gs2-qrow:hover { background: var(--bg-hover); }
.gs2-qrow-ic { flex-shrink: 0; }
.gs2-qrow-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gs2-qrow-t { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.gs2-qrow-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.gs2-qrow-go { flex-shrink: 0; color: var(--ink-4); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.gs2-qrow:hover .gs2-qrow-go { opacity: 1; transform: translateX(0); }

/* footer — borderless columns, one hairline divider */
.gs2-brand { margin-top: 28px; }
.gs2-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; padding-top: var(--space-section); border-top: 1px solid var(--border); }
@media (max-width: 640px){ .gs2-quick, .gs2-foot { grid-template-columns: 1fr; } .gs2-foot { gap: 28px; } }
.gs2-res { display: flex; flex-direction: column; margin: 0 -8px; }
.gs2-res-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; color: var(--ink); font-size: var(--t-label-size); font-weight: 500; text-align: left; transition: background .14s; }
.gs2-res-row:hover { background: var(--bg-hover); }
.gs2-res-ic { color: var(--ink-3); flex-shrink: 0; }
.gs2-res-row:hover .gs2-res-ic { color: var(--ink); }
.gs2-res-go { color: var(--ink-4); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.gs2-res-row:hover .gs2-res-go { opacity: 1; transform: translateX(0); }
.gs2-team { display: flex; flex-direction: column; gap: 2px; }
.gs2-person { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 0; }
.gs2-person-av { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; }
.gs2-person-n { font-size: var(--t-label-size); font-weight: 600; }
.gs2-person-r { font-size: var(--t-micro-size); color: var(--ink-3); }
.gs2-icon-btn { width: 32px; height: 32px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; transition: background .14s, color .14s; }
.gs2-icon-btn:hover { background: var(--bg-hover); color: var(--ink); }


/* ============================================================
   Dashboard — widget board
   ============================================================ */
.dash-head { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-block); }

/* Dashboard visual widgets. Cover, moodboard, and brand imagery share the
   board's drag/resize model and reveal bare controls only on hover/focus. */
.dw-image-widget { position:relative; overflow:hidden; padding:0; }
.dw-image-widget > .dw-hd { position:absolute; z-index:5; top:14px; left:14px; right:14px; height:32px; margin:0; padding:0; border:0; pointer-events:none; opacity:0; transition:opacity var(--t-fast) ease-out; }
.dw-image-widget:hover > .dw-hd, .dw-image-widget:focus-within > .dw-hd { opacity:1; }
.dw-image-widget > .dw-hd .dw-title, .dw-image-widget > .dw-hd > :not(.dw-grip):not(.dw-menu-btn) { display:none; }
.dw-image-widget > .dw-hd .dw-grip, .dw-image-widget > .dw-hd .dw-menu-btn { pointer-events:auto; color:#fff; background:rgba(28,28,30,.5); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16); }
.dw-image-widget > .dw-hd .dw-menu-btn { margin-left:auto; opacity:1; }
.dw-image-widget > .dw-body { min-height:0; }
/* Double-class specificity is deliberate: stelaah-editorial.css redefines a
   plain .dw (border/radius/shadow) and loads after stelaah.css, so a single-
   class .dw-cover-borderless rule loses that cascade regardless of where it
   sits in this file. .dw:hover also reintroduces box-shadow/border-color at
   (0,2,0), so the hover state needs its own (0,3,0) override too. The exact
   same trap silently defeated .dw-image-widget's own padding:0 above (a
   single-class rule losing to the later plain .dw padding:var(--space-group) 20px), which
   is why the cover (and Moodboard/Brand spotlight) used to render inside a
   padded card instead of bleeding edge to edge — fixed below with the same
   (0,2,0) trick, applied to every .dw-image-widget so all three stay flush. */
.dw.dw-image-widget { padding:0; }
.dw.dw-cover-borderless { border:0; border-radius:0; box-shadow:none; background:transparent; }
.dw.dw-cover-borderless:hover { border-color:transparent; box-shadow:none; }
.dw.dw-cover-widget { border-color:transparent; background:transparent; box-shadow:none; }
.dw.dw-cover-widget:hover { border-color:transparent; box-shadow:none; }
.dash-cover { position:relative; min-height:136px; overflow:hidden; background:linear-gradient(118deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 58%, color-mix(in srgb, var(--c-gold) 10%, var(--surface))); isolation:isolate; }
.dash-cover.has-image { min-height:min(var(--dash-cover-h, 180px), 66vh); background:var(--bg-sunken); }
.dash-cover-img { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-select:none; transform:scale(1.015); }
.dash-cover.has-image::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(18,20,18,.24), transparent 56%, rgba(18,20,18,.1)); }
/* Borderless means the raw photo, not just a frameless card — drop the
   legibility scrim too, or the tinted edges still read as a wrapper. */
.dash-cover.dash-cover-frameless.has-image::after { display:none; }
.dash-cover-empty { min-height:136px; display:flex; flex-direction:column; justify-content:center; gap:var(--space-tight); padding:var(--space-block) var(--space-block); color:var(--ink-2); }
.dash-cover-empty .icn { color:var(--ink-3); margin-bottom:var(--space-tight); }
.dash-cover-empty span { font-family:var(--font-serif); font-size:var(--t-title-size); letter-spacing:-.015em; color:var(--ink); }
.dash-cover-empty small { font-size:var(--t-caption-size); color:var(--ink-3); }
.dash-cover-loading { min-height:180px; display:flex; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--ink-3); font-size:var(--t-caption-size); }
.dash-cover-loading .icn { color:var(--ink-4); }
.dash-cover-tools { position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:var(--space-inline); opacity:0; transform:translateY(3px); transition:opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.dash-cover:hover .dash-cover-tools, .dash-cover:focus-within .dash-cover-tools, .dash-cover.positioning .dash-cover-tools { opacity:1; transform:none; }
.dash-cover-tool { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:var(--r-control); background:rgba(28,28,30,.5); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16); color:#fff; font:inherit; cursor:pointer; transition:background .14s, color .14s, transform .14s; }
.dash-cover-tool:hover, .dash-cover-tool.on { color:#fff; background:rgba(28,28,30,.78); }
.dash-cover-tool:active { transform:scale(.94); }
.dash-cover-tool:disabled { opacity:.62; cursor:wait; }
.dash-cover-height { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; height:34px; opacity:0; transform:translateY(3px); transition:opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.dash-cover:hover .dash-cover-height, .dash-cover:focus-within .dash-cover-height, .dash-cover.positioning .dash-cover-height { opacity:1; transform:none; }
.dash-cover-slider { width:100%; }
.dash-cover-slider.dark { background:rgba(255,255,255,.3); accent-color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.dash-cover-slider.dark::-webkit-slider-thumb { background:#fff; border-color:rgba(20,22,20,.55); }
.dash-cover-slider.dark::-moz-range-thumb { background:#fff; border-color:rgba(20,22,20,.55); }
/* A little give under the finger, then a soft spring back — the thumb only
   grows on press/hover (a real transform, so it can transition); the browser
   still owns 1:1 drag tracking, this just adds the tactile "catch" on top. */
.dash-cover-slider::-webkit-slider-thumb { transition:transform .2s var(--ease), box-shadow var(--dur-over) var(--ease); }
.dash-cover-slider::-moz-range-thumb { transition:transform .2s var(--ease), box-shadow var(--dur-over) var(--ease); }
.dash-cover-slider:hover::-webkit-slider-thumb { transform:scale(1.1); }
.dash-cover-slider:hover::-moz-range-thumb { transform:scale(1.1); }
.dash-cover-slider:active::-webkit-slider-thumb { transform:scale(1.26); box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dash-cover-slider:active::-moz-range-thumb { transform:scale(1.26); box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dash-cover-heightrow { display:flex; align-items:center; gap:var(--space-group); }
.dash-cover-heightrow.compact { gap:0; }
.dash-cover-heightrow:not(.compact) .dash-cover-slider { flex:1 1 auto; }
.dash-cover-height-step { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-2); cursor:pointer; flex-shrink:0; }
.dash-cover-height-step:hover { background:var(--bg-hover); color:var(--ink); }
.dash-cover-height-step:disabled { opacity:.4; cursor:default; }
.dash-cover-height-readout { display:flex; flex-direction:column; gap:2px; flex-shrink:0; min-width:76px; }
.dash-cover-height-readout strong { font-size:var(--t-label-size); font-weight:700; color:var(--ink); }
.dash-cover-height-readout span { font-size:var(--t-micro-size); color:var(--ink-4); }
.dash-cover-library-hint { margin:-4px 0 var(--space-item); color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.4; }
.dash-cover.positioning { cursor:grab; outline:2px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset:2px; }
.dash-cover.positioning:active { cursor:grabbing; }
@keyframes dash-cover-reframe-pulse { 0%,100% { outline-color:color-mix(in srgb, var(--accent) 48%, transparent); } 50% { outline-color:color-mix(in srgb, var(--accent) 85%, transparent); } }
.dash-cover.reframe-intro { animation:dash-cover-reframe-pulse 1.05s ease-in-out 2; }
@keyframes dash-cover-note-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.dash-cover-drag-note { position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:var(--space-tight); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); color:#fff; background:rgba(28,28,30,.55); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16); font-size:var(--t-micro-size); font-weight:650; pointer-events:none; animation:dash-cover-note-in var(--dur-over) var(--ease); }
.dash-cover-library { display:flex; flex-direction:column; gap:20px; }
.dash-cover-library section { padding-top:var(--space-group); border-top:1px solid var(--border-subtle); }
.dash-cover-library section:first-child { padding-top:0; border-top:0; }
.dash-cover-library-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); margin-bottom:var(--space-item); }
.dash-cover-library-head > div { display:flex; align-items:baseline; gap:var(--space-inline); }
.dash-cover-library b { color:var(--ink); font-size:var(--t-label-size); font-weight:700; }
.dash-cover-library-head span { color:var(--ink-4); font-size:var(--t-micro-size); }
.dash-cover-photo-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-inline); }
.dash-cover-thumb { position:relative; aspect-ratio:1.54; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg-sunken); }
.dash-cover-thumb > button:first-child { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; overflow:hidden; }
.dash-cover-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.dash-cover-thumb.selected { border-color:var(--ink-2); box-shadow:0 0 0 1px var(--ink-2); }
.dash-cover-thumb-current { position:absolute; left:6px; bottom:6px; padding:var(--space-tight) var(--space-tight); border-radius:5px; background:rgba(20,22,20,.68); color:#fff; font-size:9.5px; font-weight:700; }
.dash-cover-thumb-pending { display:grid; place-items:center; width:100%; height:100%; color:var(--ink-4); }
.dash-cover-thumb-remove { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid rgba(255,255,255,.5); border-radius:var(--r-control); background:rgba(20,22,20,.58); color:#fff; cursor:pointer; opacity:0; transition:opacity .14s; }
.dash-cover-thumb:hover .dash-cover-thumb-remove, .dash-cover-thumb:focus-within .dash-cover-thumb-remove { opacity:1; }
.dash-cover-library-section > b { display:block; margin-bottom:var(--space-inline); }
.dash-cover-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-inline); }
.dash-cover-options button { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:var(--space-tight); padding:var(--space-inline) var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-2); font:inherit; text-align:left; cursor:pointer; }
.dash-cover-options button:hover { background:var(--bg-hover); }
.dash-cover-options button.on { border-color:var(--ink-2); background:var(--bg-hover); color:var(--ink); }
.dash-cover-options strong { font-size:var(--t-caption-size); font-weight:700; }
.dash-cover-options span { color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.35; }
.dash-cover-time { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); margin-top:var(--space-item); color:var(--ink-3); font-size:var(--t-caption-size); }
.dash-cover-time input { height:32px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-caption-size); }
.dash-cover-hours { display:flex; flex-wrap:wrap; gap:var(--space-tight); margin-top:var(--space-item); }
.dash-cover-hours button { min-width:64px; height:30px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); font:inherit; font-size:var(--t-micro-size); font-weight:650; cursor:pointer; }
.dash-cover-hours button:hover, .dash-cover-hours button.on { border-color:var(--ink-2); background:var(--bg-hover); color:var(--ink); }
.dash-brand-spotlight, .dash-moodboard { position:relative; min-height:224px; overflow:hidden; background:var(--bg-sunken); }
.dash-brand-spotlight > img, .dash-mood-photo > img { display:block; width:100%; height:100%; object-fit:cover; }
.dash-brand-spotlight > img { position:absolute; inset:0; }
.dash-brand-spotlight.has-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,16,14,.6), transparent 65%); pointer-events:none; }
.dash-brand-copy { position:absolute; z-index:2; left:18px; right:18px; bottom:17px; display:flex; flex-direction:column; gap:2px; color:#fff; }
.dash-brand-copy span { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.dash-brand-copy strong { font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:500; letter-spacing:-.015em; }
.dash-brand-copy small { max-width:70%; margin-top:2px; overflow:hidden; color:rgba(255,255,255,.82); font-size:var(--t-micro-size); line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.dash-brand-colors { display:flex; gap:var(--space-tight); margin-top:var(--space-inline); }
.dash-brand-colors i { width:18px; height:4px; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.24); }
.dash-brand-spotlight:not(.has-image) .dash-brand-copy { display:none; }
.dash-image-empty { min-height:224px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--space-tight); padding:var(--space-block); color:var(--ink-3); }
.dash-image-empty .icn { margin-bottom:var(--space-tight); color:var(--ink-4); }
.dash-image-empty b { color:var(--ink); font-family:var(--font-serif); font-size:var(--t-heading-size); font-weight:500; }
.dash-image-empty span { max-width:290px; font-size:var(--t-caption-size); line-height:1.45; }
.dash-image-empty .dash-brand-colors { margin-top:var(--space-inline); }
.dash-image-tools { position:absolute; z-index:4; right:11px; bottom:11px; display:flex; gap:var(--space-tight); opacity:0; transform:translateY(3px); transition:opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.dash-brand-spotlight:hover .dash-image-tools, .dash-brand-spotlight:focus-within .dash-image-tools, .dash-moodboard:hover .dash-image-tools, .dash-moodboard:focus-within .dash-image-tools { opacity:1; transform:none; }
.dash-image-tools button, .dash-mood-photo-tools button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:var(--r-control); background:rgba(20,22,20,.48); backdrop-filter:blur(8px); color:#fff; cursor:pointer; }
.dash-image-tools button:hover, .dash-mood-photo-tools button:hover { background:rgba(20,22,20,.74); }
.dash-moodboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(112px,1fr); min-height:224px; }
.dash-mood-photo { position:relative; min-width:0; min-height:112px; overflow:hidden; }
.dash-mood-photo-tools { position:absolute; z-index:3; top:8px; right:8px; display:flex; gap:var(--space-tight); opacity:0; transition:opacity var(--t-fast) ease-out; }
.dash-mood-photo-tools button { width:26px; height:26px; }
.dash-mood-photo:hover .dash-mood-photo-tools, .dash-mood-photo:focus-within .dash-mood-photo-tools { opacity:1; }
.dash-image-link-chip { position:absolute; z-index:3; left:9px; bottom:9px; display:flex; max-width:calc(100% - 18px); align-items:center; gap:var(--space-tight); height:26px; padding:0 var(--space-inline); border:0; border-radius:var(--r-control); background:rgba(20,22,20,.52); backdrop-filter:blur(8px); color:#fff; font:inherit; font-size:var(--t-micro-size); cursor:pointer; opacity:0; transform:translateY(2px); transition:opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.dash-image-link-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-image-link-chip:hover { background:rgba(20,22,20,.76); }
.dash-brand-spotlight:hover .dash-image-link-chip, .dash-brand-spotlight:focus-within .dash-image-link-chip, .dash-mood-photo:hover .dash-image-link-chip, .dash-mood-photo:focus-within .dash-image-link-chip { opacity:1; transform:none; }
.dash-brand-spotlight .dash-image-link-chip { top:11px; bottom:auto; }
.dash-entity-picker-trigger { display:inline-flex; }
.dash-entity-picker-scrim { position:fixed; inset:0; z-index:1298; }
.dash-entity-picker { position:fixed; z-index:1299; display:flex; width:310px; max-height:400px; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow-lg); color:var(--ink); }
.dash-entity-picker-search { display:flex; align-items:center; gap:var(--space-inline); margin:var(--space-inline) var(--space-inline) var(--space-inline); padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-4); }
.dash-entity-picker-search:focus-within { border-color:var(--border-strong); background:var(--surface); }
.dash-entity-picker-search input { width:100%; height:34px; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-caption-size); }
.dash-entity-picker-tabs { display:flex; gap:var(--space-tight); padding:0 var(--space-inline) var(--space-inline); overflow-x:auto; }
.dash-entity-picker-tabs button { display:flex; flex:none; align-items:center; gap:var(--space-tight); height:25px; padding:0 var(--space-inline); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-4); font:inherit; font-size:var(--t-micro-size); font-weight:650; cursor:pointer; }
.dash-entity-picker-tabs button:hover, .dash-entity-picker-tabs button.on { background:var(--bg-hover); color:var(--ink); }
.dash-entity-picker-tabs span { color:var(--ink-5); font-variant-numeric:tabular-nums; }
.dash-entity-picker-list { min-height:90px; overflow-y:auto; padding:var(--space-tight) var(--space-inline) var(--space-inline); border-top:1px solid var(--border-subtle); }
.dash-entity-picker-list > button { display:grid; width:100%; grid-template-columns:18px minmax(0,1fr) 18px; align-items:center; gap:var(--space-inline); padding:var(--space-inline); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font:inherit; text-align:left; cursor:pointer; }
.dash-entity-picker-list > button:hover, .dash-entity-picker-list > button.on { background:var(--bg-hover); color:var(--ink); }
.dash-entity-picker-list > button > span { display:flex; min-width:0; flex-direction:column; gap:2px; }
.dash-entity-picker-list b, .dash-entity-picker-list small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-entity-picker-list b { color:var(--ink); font-size:var(--t-micro-size); font-weight:650; }
.dash-entity-picker-list small { color:var(--ink-4); font-size:9.5px; text-transform:capitalize; }
.dash-entity-picker-empty { display:flex; min-height:110px; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-tight); color:var(--ink-4); text-align:center; }
.dash-entity-picker-empty b { color:var(--ink-2); font-size:var(--t-caption-size); }
.dash-entity-picker-empty span { font-size:var(--t-micro-size); }
.dash-entity-picker-clear { display:flex; align-items:center; justify-content:center; gap:var(--space-tight); min-height:36px; border:0; border-top:1px solid var(--border); background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-micro-size); font-weight:650; cursor:pointer; }
.dash-entity-picker-clear:hover { background:var(--bg-hover); color:var(--ink); }
@media (max-width:480px){ .dash-entity-picker { right:8px!important; left:8px!important; width:auto; } }
.dash-moodboard.mood-1 { grid-template-columns:1fr; }
.dash-moodboard.mood-3 .dash-mood-photo:first-child { grid-row:span 2; }
.dash-moodboard .dash-cover-loading { min-height:112px; height:100%; }
@media (max-width:640px){ .dash-cover { min-height:126px; } .dash-cover.has-image { min-height:min(var(--dash-cover-h, 156px), 46vh); } .dash-cover-empty { min-height:126px; padding:20px; } .dash-cover-photo-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .dash-cover-options { grid-template-columns:1fr; } .dash-cover-heightrow:not(.compact) { flex-wrap:wrap; } .dash-cover-heightrow:not(.compact) .dash-cover-height-readout { min-width:0; } .dash-cover-height { width:min(128px, calc(100% - 90px)); } }

/* Daily language widgets */
.dash-widget-actions { display:flex; align-items:center; gap:var(--space-tight); flex-shrink:0; }
.dash-type-btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:26px; height:26px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); cursor:pointer; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.dash-type-btn:hover { background:var(--bg-hover); color:var(--ink); border-color:var(--border-strong); }
.dash-daily-label { flex-shrink:0; font-size:var(--t-micro-size); font-weight:700; letter-spacing:.045em; text-transform:uppercase; color:var(--ink-4); }
.dash-word { display:flex; flex-direction:column; gap:var(--space-inline); }
.dash-word-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); }
.dash-word-top h4 { margin:0; font-family:var(--font-serif); font-size:var(--t-display-size); line-height:1; letter-spacing:-.025em; color:var(--ink); }
.dash-word-top span { display:block; margin-top:var(--space-tight); font-family:var(--font-mono); font-size:var(--t-micro-size); color:var(--ink-4); letter-spacing:.015em; }
.dash-word-top i { margin-left:var(--space-tight); font-family:var(--font-app); color:var(--ink-3); }
.dash-word-top .icn { color:var(--ink-4); }
.dash-word p { margin:0; color:var(--ink-2); font-size:var(--t-label-size); line-height:1.52; }
.dash-word em { padding-top:var(--space-inline); border-top:1px solid var(--border-subtle); color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.45; font-style:normal; }
.dash-motivation { position:relative; padding:2px 2px 1px var(--space-block); }
.dash-motivation-mark { position:absolute; top:-9px; left:0; font-family:var(--font-serif); font-size:var(--fs-3xl); line-height:1; color:var(--ink-4); }
.dash-motivation blockquote { margin:0; font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1.2; letter-spacing:-.018em; color:var(--ink); }
.dash-motivation p { margin:var(--space-item) 0 0; color:var(--ink-3); font-size:var(--t-caption-size); }
.dash-vocab-list { display:flex; flex-direction:column; }
.dash-vocab-row { padding:var(--space-inline) 0; border-top:1px solid var(--border-subtle); }
.dash-vocab-row:first-child { padding-top:1px; border-top:none; }
.dash-vocab-word { display:flex; align-items:center; gap:var(--space-inline); }
.dash-vocab-word b { font-family:var(--font-serif); font-size:var(--t-heading-size); font-weight:550; letter-spacing:-.012em; color:var(--ink); }
.dash-vocab-word span { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.dash-vocab-row p, .dash-vocab-hint { margin:var(--space-tight) 0 0; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.42; }
.dash-vocab-hint { padding:var(--space-inline) 0 2px; }
.dash-vocab-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-inline); margin-top:var(--space-inline); padding-top:var(--space-inline); border-top:1px solid var(--border-subtle); }
.dash-vocab-form { display:grid; grid-template-columns:1fr 1.35fr; gap:var(--space-inline); margin-top:var(--space-item); padding-top:var(--space-item); border-top:1px solid var(--border-subtle); }
.dash-vocab-form input { min-width:0; height:34px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-caption-size); outline:none; }
.dash-vocab-form input:focus { border-color:var(--accent); }
.dash-vocab-form > div { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-tight); }
.dash-vocab-library { display:flex; flex-direction:column; }
.dash-vocab-library-row { display:flex; align-items:flex-start; gap:var(--space-item); padding:var(--space-item) 2px; border-top:1px solid var(--border-subtle); }
.dash-vocab-library-row:first-child { padding-top:2px; border-top:none; }
.dash-vocab-library-row > div { min-width:0; flex:1; }
.dash-vocab-library-row b { font-family:var(--font-serif); font-size:var(--t-heading-size); font-weight:550; color:var(--ink); }
.dash-vocab-library-row p { margin:var(--space-tight) 0 0; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.45; }
.dash-vocab-delete { width:28px; height:28px; display:grid; place-items:center; border:none; border-radius:var(--r-control); background:transparent; color:var(--ink-4); cursor:pointer; }
.dash-vocab-delete:hover { background:var(--bg-hover); color:var(--ink-2); }
@media (max-width:420px){ .dash-vocab-form { grid-template-columns:1fr; } }

/* onboarding nudge — dismissible callout, auto-hides at 100% */
.dash-ob { display: flex; align-items: center; gap: var(--space-group); margin: 0 0 20px; padding: var(--space-item) var(--space-group) var(--space-item) var(--space-group); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.dash-ob-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime) calc(var(--p) * 1%), var(--bg-sunken) 0); transition: background .5s var(--ease); }
.dash-ob-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.dash-ob-ring-n { position: relative; z-index: 1; font-size: var(--t-caption-size); font-weight: 750; color: var(--ink); letter-spacing: -.02em; }
.dash-ob-ring-n i { font-style: normal; font-size: 8px; color: var(--ink-3); margin-left: .5px; }
.dash-ob-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dash-ob-t { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.dash-ob-s { font-size: var(--t-caption-size); color: var(--ink-3); }
.dash-ob-s b { color: var(--ink-2); font-weight: 650; }
.dash-ob-go { flex-shrink: 0; }
.dash-ob-x { flex-shrink: 0; width: 30px; height: 30px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; transition: background .14s, color .14s; }
.dash-ob-x:hover { background: var(--bg-hover); color: var(--ink); }
@media (max-width: 640px) { .dash-ob-go span { display: none; } }

.dash-greet { flex-shrink: 0; min-width: 0; }
.dash-name { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 560; line-height: 1.1; margin: 0; white-space: nowrap; }
.dash-welcome { color: var(--ink-3); font-size: var(--t-strong-size); margin: var(--space-tight) 0 0; white-space: nowrap; }
.dash-wave { display: inline-block; font-size: 1.4em; line-height: 1; transform-origin: 72% 78%; animation: dashWave 2.6s ease-in-out infinite; }
@keyframes dashWave {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(16deg); }
  68% { transform: rotate(-10deg); }
  76% { transform: rotate(16deg); }
  84% { transform: rotate(-6deg); }
  92% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce){ .dash-wave { animation: none; } }
/* awaiting-reply widget rows */
.dw-ar-row { display:flex; align-items:center; gap:var(--space-inline); width:100%; padding:var(--space-tight) var(--space-tight); border-radius:var(--r-control); transition:background .12s; }
.dw-ar-row:hover { background:var(--bg-hover); }
.dw-ar-row.editing { flex-wrap:wrap; background:var(--bg-hover); }
.dw-ar-main { display:flex; align-items:center; gap:var(--space-item); flex:1; min-width:0; border:none; background:none; padding:var(--space-tight) 2px; cursor:pointer; }
.dw-ar-ic { width:30px; height:30px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center; color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 13%, transparent); }
.dw-ar-ic.changes { color:var(--st-blocked); background:color-mix(in srgb, var(--st-blocked) 13%, transparent); }
.dw-ar-n { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.dw-ar-s { font-size:var(--t-micro-size); color:var(--ink-3); margin-top:1px; }
.dw-ar-count { flex-shrink:0; min-width:20px; text-align:center; font-size:var(--t-micro-size); font-weight:700; padding:1px var(--space-inline); border-radius:999px; background:var(--tag-clay-bg); color:var(--tag-clay-fg); }
.dw-ar-count.changes { background:var(--st-blocked); font-size:var(--t-micro-size); font-weight:800; letter-spacing:.02em; text-transform:uppercase; padding:2px var(--space-inline); }
.dw-ar-reply { flex-shrink:0; height:28px; padding:0 var(--space-item); border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-tight); opacity:0; transition:opacity .12s, border-color .12s, color .12s; }
.dw-ar-row:hover .dw-ar-reply, .dw-ar-reply:focus-visible { opacity:1; }
.dw-ar-reply:hover { border-color:var(--accent); color:var(--accent); }
.dw-ar-compose { display:flex; gap:var(--space-inline); width:100%; margin:2px 2px var(--space-tight); }
.dw-ar-compose textarea { flex:1; min-height:36px; max-height:92px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); font:inherit; font-size:var(--t-caption-size); line-height:1.4; color:var(--ink); background:var(--surface); }
.dw-ar-compose textarea:focus { outline:none; border-color:var(--accent); }
.dw-ar-send { flex-shrink:0; align-self:flex-end; height:36px; padding:0 var(--space-item); border:none; border-radius:var(--r-control); background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:var(--t-caption-size); cursor:pointer; transition:opacity .12s; }
.dw-ar-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor:default; }
/* time-off widget */
.dw-off-summary { display:flex; align-items:center; gap:var(--space-inline); justify-content:center; font-size:var(--t-caption-size); color:var(--ink-3); margin-top:var(--space-inline); }
.dw-off-summary b { color:var(--ink); font-weight:700; }
.dw-off-dot { width:3px; height:3px; border-radius:50%; background:var(--ink-4); }
.dw-off-approve { display:flex; align-items:center; justify-content:center; gap:var(--space-inline); width:100%; margin-top:var(--space-item); padding:var(--space-inline); border:1px solid color-mix(in srgb, var(--c-gold) 35%, transparent); border-radius:var(--r-control); background:color-mix(in srgb, var(--c-gold) 9%, transparent); color:var(--ink); font:inherit; font-size:var(--t-caption-size); font-weight:600; cursor:pointer; transition:background .13s; }
.dw-off-approve:hover { background:color-mix(in srgb, var(--c-gold) 16%, transparent); }
/* time-off modal */
.pto-balrow { display:flex; gap:var(--space-inline); }
.pto-bal-chip { display:flex; flex-direction:column; align-items:center; gap:1px; padding:var(--space-inline) var(--space-tight); border-radius:0; background:transparent; color:var(--ink); flex:1; border-right:1px solid var(--border-subtle); }
.pto-bal-chip:last-child { border-right:none; }
.pto-bal-chip.ghost { background:transparent; }
.pto-bal-chip b { font-size:var(--t-heading-size); font-weight:750; line-height:1; }
.pto-bal-chip span { font-size:var(--t-micro-size); color:var(--ink-3); }
.pto-typegrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-inline); }
.pto-typebtn { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border:1.5px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-2); font:inherit; font-size:var(--t-label-size); font-weight:600; cursor:pointer; transition:border-color .13s; }
.pto-typebtn.on { background:var(--surface); }
.pto-daysline { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); color:var(--ink-2); }
.pto-daysline b { color:var(--ink); font-weight:700; }
.pto-over { display:inline-flex; align-items:center; gap:var(--space-tight); margin-left:auto; font-size:var(--t-micro-size); font-weight:600; color:var(--c-clay); }
/* approvals list */
.pto-appr-list { display:flex; flex-direction:column; gap:var(--space-inline); }
.pto-appr { display:flex; align-items:flex-start; gap:var(--space-item); padding:var(--space-item) var(--space-item); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); }
.pto-appr-top { display:flex; align-items:center; gap:var(--space-inline); }
.pto-appr-top b { font-size:var(--t-label-size); font-weight:650; color:var(--ink); }
.pto-typetag { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:700; padding:2px var(--space-inline); border-radius:6px; }
.pto-appr-meta { font-size:var(--t-micro-size); color:var(--ink-3); margin-top:var(--space-tight); }
.pto-appr-reason { font-size:var(--t-caption-size); color:var(--ink-2); margin-top:var(--space-tight); font-style:italic; }
.pto-appr-clash { display:inline-flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-tight); font-size:var(--t-micro-size); font-weight:600; color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 11%, transparent); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); }
.pto-appr-clash.cover { color:color-mix(in srgb, var(--c-gold) 74%, var(--ink)); background:color-mix(in srgb, var(--c-gold) 13%, transparent); margin-left:var(--space-tight); }
.pto-appr-suggest { display:inline-flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-inline); padding:var(--space-tight) 0; border:none; background:transparent; color:var(--ink-2); border-radius:0; font-size:var(--t-micro-size); font-weight:600; cursor:pointer; transition:color .12s; }
.pto-appr-suggest:hover { filter:none; color:var(--ink); }
.pto-clash { margin-top:2px; padding:var(--space-item) var(--space-item); border-radius:var(--r-control); background:color-mix(in srgb, var(--c-clay) 8%, transparent); border:1px solid color-mix(in srgb, var(--c-clay) 22%, transparent); }
.pto-clash-hd { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); font-weight:650; color:var(--c-clay); margin-bottom:var(--space-inline); }
.pto-clash-row { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); color:var(--ink-2); padding:var(--space-tight) 0; }
.pto-clash-ic { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.pto-clash-ic.project { background:var(--c-mauve); }
.pto-clash-ic.task { background:var(--c-blue); }
.pto-clash.cover { background:color-mix(in srgb, var(--c-gold) 9%, transparent); border-color:color-mix(in srgb, var(--c-gold) 26%, transparent); }
.pto-clash.cover .pto-clash-hd { color:color-mix(in srgb, var(--c-gold) 72%, var(--ink)); }
.pto-clash-ic.cover { background:var(--c-gold); }
.pto-clash-note { font-size:var(--t-micro-size); color:var(--ink-3); margin-top:var(--space-inline); }
.pto-clash-suggest { display:inline-flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-inline); padding:var(--space-tight) 0; border:none; background:transparent; color:var(--ink-2); border-radius:0; font-size:var(--t-micro-size); font-weight:600; cursor:pointer; transition:color .12s; }
.pto-clash-suggest:hover { filter:none; color:var(--ink); }
.pto-appr-acts { display:flex; gap:var(--space-tight); flex-shrink:0; }
.pto-btn { width:32px; height:32px; border:none; border-radius:var(--r-control); display:grid; place-items:center; cursor:pointer; transition:filter .13s; }
.pto-btn.yes { background:var(--st-done-soft); color:var(--st-done-ink); }
.pto-btn.no { background:var(--bg-sunken); color:var(--ink-3); }
.pto-btn:hover { filter:brightness(1.07); }
.pto-empty { display:flex; flex-direction:column; align-items:center; gap:var(--space-inline); padding:var(--space-block); color:var(--ink-3); font-size:var(--t-label-size); }
/* approval routing (reporting-line + out-of-office cover aware) */
.pto-routerow { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); font-size:var(--t-caption-size); color:var(--ink-2); }
.pto-routerow.muted { color:var(--ink-3); }
.pto-routerow b { color:var(--ink); font-weight:650; }
.pto-route-chip { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:650; color:var(--ink-2); background:var(--bg-sunken); border-radius:var(--r-modal); padding:2px var(--space-inline) 2px var(--space-tight); }
.pto-route-chip .avatar.xs { width:17px; height:17px; }
.pto-route-chip.you { color:var(--st-done); background:color-mix(in srgb, var(--st-done) 13%, transparent); padding:2px var(--space-inline); }
.pto-route-chip.esc { color:var(--c-gold-700, #9a7d2e); background:color-mix(in srgb, var(--c-gold) 16%, transparent); padding:2px var(--space-inline); }
.pto-appr-wait { display:inline-flex; align-items:center; gap:var(--space-tight); flex-shrink:0; font-size:var(--t-micro-size); font-weight:600; color:var(--ink-3); background:var(--bg-sunken); border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); white-space:nowrap; }
.pto-appr-scope { display:inline-flex; gap:2px; padding:var(--space-tight); background:var(--bg-sunken); border-radius:var(--r-control); margin-bottom:var(--space-item); }
.pto-scope-b { display:inline-flex; align-items:center; gap:var(--space-tight); border:none; background:none; cursor:pointer; font-size:var(--t-caption-size); font-weight:600; color:var(--ink-3); padding:var(--space-tight) var(--space-item); border-radius:var(--r-control); transition:background .13s, color .13s; }
.pto-scope-b.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.pto-scope-n { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 var(--space-tight); border-radius:var(--r-control); background:var(--bg-active); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; }
/* team availability strip */
.pto-avail { border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); padding:var(--space-group) var(--space-group); }
.pto-avail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-item); }
.pto-avail-now { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.pto-avail-dots { display:flex; }
.pto-avail-dots .av { margin-left:-4px; box-shadow:0 0 0 2px var(--surface); border-radius:50%; }
.pto-avail-dots .av:first-child { margin-left:0; }
.pto-avail-rows { display:flex; flex-direction:column; gap:var(--space-inline); }
.pto-avail-row { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:var(--space-item); }
.pto-avail-person { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); font-weight:550; color:var(--ink-2); min-width:0; }
.pto-avail-track { display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:var(--space-tight); }
.pto-cell { height:18px; border-radius:4px; background:var(--bg-sunken); }
.pto-cell.we { background:color-mix(in srgb, var(--bg-sunken) 55%, transparent); }
.pto-cell.on { box-shadow:none; }
.pto-avail-clear { font-size:var(--t-caption-size); color:var(--ink-3); padding:var(--space-tight) 2px; }
.team-pto-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-group); align-items:start; }
/* a waiting queue earns the full width; an empty one does not */
.team-pto-grid.has-pending { grid-template-columns:1fr; }
.team-pto-grid.has-pending .pto-pending { grid-column:1 / -1; }

/* Out today — the names behind the "Away today" number */
.pto-outtoday { display:flex; align-items:flex-start; gap:var(--space-item); flex-wrap:wrap; margin:0 0 var(--space-block); padding:var(--space-item) var(--space-item) var(--space-item) 2px; }
.pto-outtoday-lbl { display:inline-flex; align-items:center; gap:var(--space-inline); flex-shrink:0; padding-top:var(--space-tight); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:600; }
.pto-outtoday-list { display:flex; flex-wrap:wrap; gap:var(--space-inline); min-width:0; }
.pto-outchip { display:inline-flex; align-items:center; gap:var(--space-inline); max-width:100%; padding:var(--space-tight) var(--space-item) var(--space-tight) var(--space-tight); border:1px solid var(--border); border-radius:999px; background:var(--surface); font:inherit; font-size:var(--t-caption-size); color:var(--ink); cursor:pointer; transition:border-color .13s, background .13s; }
.pto-outchip:hover { border-color:var(--border-strong); background:var(--bg-hover); }
.pto-outchip-n { font-weight:650; min-width:0; }
.pto-outchip-s { color:var(--ink-3); font-size:var(--t-micro-size); white-space:nowrap; }
@media (max-width:640px){ .pto-outtoday { flex-direction:column; gap:var(--space-inline); } }
@media (max-width:900px){ .team-pto-grid { grid-template-columns:1fr; } }
.pto-count { min-width:20px; text-align:center; font-size:var(--t-micro-size); font-weight:650; padding:1px var(--space-inline); border-radius:999px; background:var(--bg-active); color:var(--ink-2); }


/* ── Organization tab: status strip + three named views ─────────────────────
   Replaces a single 5,000px column of nine blocks. The strip states what is
   and is not configured in words, and each row is a link to the control that
   changes it — so no setting has to be found by scrolling. */
.orgstate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-block); margin: 2px 0 var(--space-block); padding-bottom: var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.orgstate-item { display: flex; flex-direction: column; gap: var(--space-tight); min-width: 0; padding: var(--space-item); border: none; border-radius: var(--r-control); background: none; font: inherit; text-align: left; cursor: pointer; transition: background .14s; }
.orgstate-item:first-child { padding-left: 2px; }
.orgstate-item:hover { background: var(--bg-hover); }
.orgstate-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.orgstate-k { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgstate-v { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 540; line-height: 1.05; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgstate-v.sm { font-size: var(--t-heading-size); letter-spacing: -.02em; }
.orgstate-s { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.35; }
.orgstate-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.orgstate-s.ok .orgstate-dot { background: var(--c-olive); }
.orgstate-s.warn { color: var(--ink-2); font-weight: 550; }
.orgstate-s.warn .orgstate-dot { background: var(--c-gold); }
.orgstate-go { flex-shrink: 0; color: var(--ink-4); opacity: 0; transform: translateX(-3px); transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.orgstate-item:hover .orgstate-go, .orgstate-item:focus-visible .orgstate-go { opacity: 1; transform: none; }

.orgv-bar { display: flex; align-items: center; gap: var(--space-group); flex-wrap: wrap; margin-bottom: var(--space-block); }
.orgv-seg { display: inline-flex; gap: 2px; padding: var(--space-tight); background: var(--bg-sunken); border-radius: var(--r-control); flex-shrink: 0; }
.orgv-seg button { display: inline-flex; align-items: center; gap: var(--space-inline); height: 32px; padding: 0 var(--space-group); border: none; background: none; border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; transition: color .13s, background .13s; }
.orgv-seg button:hover { color: var(--ink); }
.orgv-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.orgv-say { margin: 0; min-width: 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.45; }
/* the same view bar serves the People tab's Roster / Channels split */
.teamv-bar { margin-bottom: var(--space-group); }
.teamv-n { margin-left: var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); }
.orgv-seg button.on .teamv-n { color: var(--ink-2); }
.team-clearq { display: inline-flex; align-items: center; gap: var(--space-tight); margin-left: var(--space-item); padding: var(--space-tight) var(--space-inline); border: none; border-radius: var(--r-control); background: var(--bg-active); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); cursor: pointer; vertical-align: middle; }
.team-clearq:hover { color: var(--ink); }
.orgv-sec { margin-top: var(--space-section); }
.orgv-sec.first { margin-top: 0; }
@media (max-width: 900px){
  .orgstate { grid-template-columns: 1fr 1fr; gap: var(--space-group); }
  .orgstate-item:nth-child(odd) { padding-left: 2px; }
  .orgv-say { flex-basis: 100%; }
}
@media (max-width: 640px){
  .orgstate { grid-template-columns: 1fr; gap: var(--space-item); }
  .orgstate-item { padding-left: 2px; }
  .orgv-seg { width: 100%; }
  .orgv-seg button { flex: 1; justify-content: center; }
}

/* ── team page: tabs + panes ── */
.team-tabs { display: flex; gap: var(--space-tight); border-bottom: 1px solid var(--border); margin: var(--space-tight) 0 20px; overflow-x: auto; }
.team-tab { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .13s; }
.team-tab:hover { color: var(--ink); }
.team-tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.team-tab-badge { min-width: 18px; text-align: center; font-size: var(--t-micro-size); font-weight: 650; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-2); }
.team-pane { animation: fade-in var(--dur-micro) var(--ease); }
.team-sub-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin: 0 0 var(--space-item); }
.team-dept { margin-top: var(--space-block); }
.team-card-off { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-item); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: color-mix(in srgb, var(--c-gold) 11%, transparent); color: var(--ink-2); font-size: var(--t-caption-size); }
.team-card-off .icn { color: var(--c-gold); flex-shrink: 0; }
.team-card-off b { color: var(--ink); font-weight: 650; }
.team-card-ratio { font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-4); font-family: var(--font-sans); }
.team-card { position: relative; }
.team-card-cover { position: absolute; top: 0; left: 0; right: 0; height: 56px; background-size: cover; background-position: center; border-radius: var(--r-card) var(--r-card) 0 0; opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); pointer-events: none; }
.team-card-cover + .row { position: relative; }
.rep-node { position: relative; overflow: hidden; }
.rep-node-cover { position: absolute; top: 0; left: 0; right: 0; height: 38px; background-size: cover; opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.rep-node .rep-super { position: relative; }

/* ── workload rebalancing ── */
.twl { display: flex; flex-direction: column; gap: var(--space-item); }
.twl-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: var(--space-group) 20px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.twl-sum { text-align: center; }
.twl-sum-v { font-size: var(--t-title-size); font-weight: 760; color: var(--ink); line-height: 1; }
.twl-sum-v.warn { color: var(--c-clay); }
.twl-sum-l { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-tight); }
.twl-hint { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); }
.twl-rows { display: flex; flex-direction: column; gap: var(--space-inline); }
.twl-row { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-group); align-items: start; padding: var(--space-item) var(--space-group); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); transition: border-color .14s, background .14s, box-shadow .14s; }
.twl-row.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.twl-row.off { opacity: .82; }
.twl-person { display: flex; align-items: center; gap: var(--space-item); }
.twl-person-n { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: var(--space-tight); }
.twl-offtag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, transparent); padding: 1px var(--space-tight); border-radius: 5px; }
.twl-meter { position: relative; height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin: var(--space-tight) 0 var(--space-tight); display: flex; }
.twl-meter-fill { height: 100%; border-radius: 999px; transition: width .35s var(--ease); }
.twl-meter-fill.low { background: var(--st-done); }
.twl-meter-fill.mid { background: var(--c-blue); }
.twl-meter-fill.high { background: var(--c-gold); }
.twl-meter-fill.over { background: var(--c-clay); }
.twl-meter-over { height: 100%; background: repeating-linear-gradient(45deg, var(--c-clay), var(--c-clay) 3px, color-mix(in srgb, var(--c-clay) 60%, #000) 3px, color-mix(in srgb, var(--c-clay) 60%, #000) 6px); }
.twl-person-s { font-size: var(--t-micro-size); color: var(--ink-3); }
.twl-person-s b { color: var(--ink-2); font-weight: 650; }
.twl-person-s b.over { color: var(--c-clay); }
.twl-tasks { display: flex; flex-wrap: wrap; gap: var(--space-inline); min-height: 36px; align-content: flex-start; }
.twl-chip { display: inline-flex; align-items: center; gap: var(--space-inline); max-width: 230px; padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-sunken); cursor: grab; font-size: var(--t-caption-size); transition: box-shadow .12s, transform .12s, opacity .12s; }
.twl-chip:hover { box-shadow: var(--shadow-sm); }
.twl-chip:active { cursor: grabbing; }
.twl-chip.dragging { opacity: .4; }
.twl-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.twl-chip-n { font-weight: 550; color: var(--ink); }
.twl-chip-grip { color: var(--ink-4); display: inline-flex; }
.twl-empty { font-size: var(--t-caption-size); color: var(--ink-4); padding: var(--space-inline) var(--space-tight); }

/* ── Workload: reach every action without dragging ──────────────────────────
   Drag stays, but a search, an over-capacity filter and a per-task "Move to"
   menu mean the board is fully operable by click and keyboard too. */
.twl-toolbar { flex-wrap: wrap; }
/* A real search FIELD. `.tb-search` is an inline-grid icon BUTTON, so reusing it
   for a field stacked the magnifier on top of the input — which is what the Team
   header's own "Search people" box was doing. Both use .team-find now. */
.team-find, .twl-search { display: inline-flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); flex-shrink: 0; transition: border-color var(--dur-micro) var(--ease); }
.team-find { width: 210px; }
.twl-search { width: 220px; }
.team-find:focus-within, .twl-search:focus-within { border-color: var(--border-strong); }
.team-find input, .twl-search input { border: none; background: none; outline: none; min-width: 0; font: inherit; font-size: var(--t-label-size); color: var(--ink); }
.twl-search input { font-size: var(--t-caption-size); }
.team-find input::placeholder, .twl-search input::placeholder { color: var(--ink-4); }
.team-find-x, .twl-search-x { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--bg-active); color: var(--ink-3); cursor: pointer; }
.team-find-x:hover, .twl-search-x:hover { color: var(--ink); }
.twl-filter { display: inline-flex; align-items: center; gap: var(--space-inline); height: 32px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; transition: color .13s, background .13s, border-color .13s; }
.twl-filter:hover { color: var(--ink); border-color: var(--border-strong); }
.twl-filter.on { background: var(--bg-active); border-color: var(--border-strong); color: var(--ink); }
.twl-filter-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--c-clay); }
.twl-hint { margin-left: 0; white-space: nowrap; }
.twl-chip-move { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border: none; border-radius: var(--r-control); background: none; color: var(--ink-4); cursor: pointer; opacity: 0; transition: opacity .13s, background .13s, color .13s; }
.twl-chip:hover .twl-chip-move, .twl-chip-move:focus-visible { opacity: 1; }
.twl-chip-move:hover { background: var(--bg-active); color: var(--ink); }
.twl-more { align-self: center; border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: none; padding: var(--space-inline) var(--space-item); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; }
.twl-more:hover { color: var(--ink); background: var(--bg-hover); }
@media (max-width: 640px){ .twl-search { width: 100%; } .twl-hint { display: none; } }

/* ── outings ── */
.out-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-item); }
.out-card { border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; padding: var(--space-item) var(--space-tight); box-shadow: none; transition: background .12s; }
.out-card:hover { box-shadow: none; transform: none; background: var(--bg-hover); }
.out-card-top { display: flex; align-items: flex-start; gap: var(--space-item); }
.out-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.out-title { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.out-meta { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
.out-type { font-weight: 650; }
.out-desc { font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.5; margin: var(--space-item) 0 var(--space-inline); }
.out-loc { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-bottom: var(--space-item); }
.out-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.out-going { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.out-going-n { font-size: var(--t-micro-size); color: var(--ink-3); }
.out-rsvp { display: flex; gap: var(--space-tight); flex-shrink: 0; }
.out-rsvp-b { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-item); border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.out-rsvp-b:hover { background: var(--bg-hover); }
.out-rsvp-b.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #fff); }
.out-rsvp-b.maybe.on { background: var(--tag-gold-bg); border-color: var(--c-gold); color: var(--tag-gold-fg); }
.out-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); }
.out-typebtn { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1.5px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: border-color .12s; }

/* ── Team Culture outings: structured Apple / Linear-style workspace ── */
.culture-workspace { display: flex; flex-direction: column; gap: var(--space-block); }
.culture-outing-shell { display: flex; flex-direction: column; gap: var(--space-group); }
.culture-outing-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-block); padding: 28px 28px; border: 1px solid var(--border-strong); border-radius: var(--r-modal); background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--accent-soft) 34%, var(--surface)) 100%); box-shadow: 0 12px 34px rgba(29,32,25,.07); }
.culture-eyebrow { display: block; color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
/* sentence case, per DESIGN.md "no eyebrow headers" — this label is only used by
   the rebuilt culture surface, so it is safe to bring in line here. */
.culture-section-label { display: block; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; line-height: 1.3; }
.culture-outing-hero h2 { margin: var(--space-inline) 0 var(--space-tight); color: var(--ink); font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.culture-outing-hero p { max-width: 620px; margin: 0; color: var(--ink-2); font-size: var(--t-label-size); line-height: 1.55; }
.culture-outing-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.culture-outing-stats > div { display: flex; flex-direction: column; gap: var(--space-tight); padding: var(--space-group) var(--space-group); }
.culture-outing-stats > div + div { border-left: 1px solid var(--border); }
.culture-outing-stats b { color: var(--ink); font-size: var(--t-title-size); letter-spacing: -.04em; line-height: 1; }
.culture-outing-stats span { color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 650; }
.culture-outing-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: var(--space-group); align-items: start; }
.culture-panel { min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--r-modal); background: var(--surface); box-shadow: 0 8px 24px rgba(29,32,25,.055); }
.culture-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: 20px 20px var(--space-group); border-bottom: 1px solid var(--border); }
.culture-panel-head h3 { margin: var(--space-tight) 0 0; color: var(--ink); font-size: var(--t-heading-size); letter-spacing: -.025em; }
.culture-count { flex-shrink: 0; padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: 999px; color: var(--ink-3); background: var(--bg-sunken); font-size: var(--t-micro-size); font-weight: 700; }
.culture-outing-list { overflow: hidden; }
.culture-outing-list .out-grid { grid-template-columns: 1fr; gap: 0; }
.culture-outing-list .out-card { padding: 20px 20px; border-bottom: 1px solid var(--border); }
.culture-outing-list .out-card:last-child { border-bottom: 0; }
.culture-outing-card { background: var(--surface); }
.culture-outing-card:hover { background: color-mix(in srgb, var(--bg-hover) 64%, var(--surface)); }
.culture-outing-card .out-card-top { align-items: center; }
.culture-outing-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--bg-sunken); }
.culture-outing-date b { color: var(--ink); font-size: var(--t-strong-size); line-height: 1; }
.culture-outing-date span { margin-top: var(--space-tight); color: var(--ink-4); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.culture-outing-card .out-ic { width: 28px; }
.culture-outing-card .out-meta { display: flex; gap: var(--space-inline); align-items: center; margin: 0 0 var(--space-tight); }
.culture-outing-status { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 650; }
.culture-outing-card .out-title { font-size: var(--t-heading-size); letter-spacing: -.025em; }
.culture-outing-facts { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-group); margin: var(--space-group) 0 0 72px; color: var(--ink-3); font-size: var(--t-micro-size); }
.culture-outing-facts span, .culture-feed-outing-facts span, .culture-next-meta span { display: inline-flex; align-items: center; gap: var(--space-tight); }
.culture-outing-facts .icn, .culture-feed-outing-facts .icn, .culture-next-meta .icn { color: var(--ink-4); }
.culture-outing-card .out-desc { margin: var(--space-item) 0 var(--space-inline) 72px; max-width: 680px; }
.culture-outing-card .out-media { margin-left: 72px; }
.culture-outing-card .out-foot { margin-top: var(--space-group); margin-left: 72px; padding-top: var(--space-item); }
.culture-outing-actions { display: flex; justify-content: flex-end; gap: var(--space-tight); margin: var(--space-inline) 0 0 72px; padding-top: var(--space-inline); border-top: 1px solid var(--border); }
.culture-outing-actions .btn { color: var(--ink-3); }
.culture-outing-actions .btn:hover { color: var(--ink); }
.culture-outing-next { padding: 20px; }
.culture-outing-next h3 { margin: var(--space-item) 0 var(--space-inline); color: var(--ink); font-size: var(--t-title-size); letter-spacing: -.035em; }
.culture-next-date { display: flex; align-items: baseline; gap: var(--space-inline); margin-top: var(--space-group); }
.culture-next-date b { color: var(--ink); font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.07em; line-height: .9; }
.culture-next-date span { color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 650; }
.culture-outing-next p { margin: 0; color: var(--ink-2); font-size: var(--t-caption-size); line-height: 1.55; }
.culture-next-meta { display: flex; flex-direction: column; gap: var(--space-inline); margin-top: 20px; padding: var(--space-item) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--ink-2); font-size: var(--t-caption-size); }
.culture-next-att { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-group); color: var(--ink-3); font-size: var(--t-micro-size); }
.culture-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-group); }
.culture-next-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-inline); padding: var(--space-page) 2px var(--space-group); color: var(--ink-3); }
.culture-next-empty b { color: var(--ink); font-size: var(--t-strong-size); }
.culture-next-empty span { max-width: 230px; font-size: var(--t-caption-size); line-height: 1.5; }
.culture-next-empty .icn { color: var(--accent); }
.culture-support-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: var(--space-group); align-items: start; }
.culture-activity-panel { overflow: hidden; }
.culture-activity-panel .tlog { padding: 2px 20px var(--space-inline); }
.culture-culture-note { padding: 20px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 24%, var(--surface))); }
.culture-culture-note h3 { margin: var(--space-inline) 0 var(--space-inline); color: var(--ink); font-size: var(--t-title-size); letter-spacing: -.035em; }
.culture-culture-note p { margin: 0; color: var(--ink-2); font-size: var(--t-caption-size); line-height: 1.6; }
.culture-note-stats { display: flex; flex-direction: column; gap: var(--space-inline); margin-top: 20px; padding-top: var(--space-group); border-top: 1px solid var(--border); color: var(--ink-3); font-size: var(--t-caption-size); }
.culture-note-stats b { color: var(--ink); }
.culture-chat-context { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-sunken); }
.culture-chat-context > .icn { color: var(--accent); }
.culture-chat-context div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.culture-chat-context b { color: var(--ink); font-size: var(--t-caption-size); }
.culture-chat-context span { color: var(--ink-3); font-size: var(--t-micro-size); }
.culture-chat-people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight); max-height: 220px; overflow: auto; margin-top: var(--space-inline); }
.culture-chat-person { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; padding: var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); text-align: left; cursor: pointer; }
.culture-chat-person:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.culture-chat-person.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.culture-chat-person span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.culture-chat-person .icn { margin-left: auto; color: var(--accent); }
.culture-feed-outing-card { margin: var(--space-group) 0 2px; padding: var(--space-group); border: 1px solid var(--border-strong); border-radius: var(--r-card); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 20%, var(--surface))); box-shadow: 0 7px 18px rgba(29,32,25,.07); }
.culture-feed-outing-top { display: flex; align-items: center; gap: var(--space-item); }
.culture-feed-outing-top h3 { margin: var(--space-tight) 0 0; color: var(--ink); font-size: var(--t-heading-size); letter-spacing: -.025em; }
.culture-feed-outing-top .btn { margin-left: auto; }
.culture-feed-outing-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.culture-feed-kicker { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.culture-feed-outing-facts { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-group); margin: var(--space-group) 0 0; padding: var(--space-item) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--ink-3); font-size: var(--t-micro-size); }
.culture-feed-outing-card p { margin: var(--space-item) 0 0; color: var(--ink-2); font-size: var(--t-caption-size); line-height: 1.55; }
.culture-feed-outing-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-top: var(--space-group); }
.culture-feed-outing-att { display: inline-flex; align-items: center; gap: var(--space-inline); color: var(--ink-3); font-size: var(--t-micro-size); }
@media (max-width: 900px){ .culture-outing-layout, .culture-support-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px){ .culture-outing-hero { align-items: flex-start; flex-direction: column; padding: 20px; } .culture-outing-stats { grid-template-columns: 1fr 1fr; } .culture-outing-stats > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); } .culture-outing-stats > div:nth-child(4) { border-top: 1px solid var(--border); } .culture-outing-card .out-desc, .culture-outing-facts, .culture-outing-card .out-media, .culture-outing-card .out-foot, .culture-outing-actions { margin-left: 0; } .culture-outing-card .out-foot { align-items: flex-start; flex-direction: column; } .culture-outing-actions { justify-content: flex-start; } .culture-chat-people { grid-template-columns: 1fr; } .culture-feed-outing-top { align-items: flex-start; flex-wrap: wrap; } .culture-feed-outing-top .btn { margin-left: 44px; } }


/* ── Culture v2: one filterable timeline ────────────────────────────────────
   Replaces the editorial hero + duplicated stat bars. Outings and celebrations
   share one date-ordered stream, so "what's coming up" is answered in one read
   instead of three. Every action the old surface carried is still on the rows. */
.culture2 { display: flex; flex-direction: column; }
.cu-hd { align-items: flex-start; margin-bottom: var(--space-group); }
.cu-hd-sub { margin: var(--space-tight) 0 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.45; }
.cu-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr); gap: var(--space-block); align-items: start; }
.cu-main { min-width: 0; }
.cu-side { display: flex; flex-direction: column; gap: var(--space-group); min-width: 0; }

.cu-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-group); }
.cu-chip { display: inline-flex; align-items: center; gap: var(--space-inline); height: 30px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .13s, background .13s, border-color .13s; }
.cu-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.cu-chip.on { background: var(--bg-active); border-color: var(--border-strong); color: var(--ink); }
.cu-chip-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); }
.cu-chip.on .cu-chip-n { color: var(--ink-2); }
.cu-chip.past { margin-left: auto; }

.cu-stream { display: flex; flex-direction: column; gap: var(--space-block); }
.cu-bucket { min-width: 0; }
.cu-bucket-hd { display: flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-tight); margin-bottom: var(--space-group); }
.cu-bucket-n { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.cu-bucket-body { display: flex; flex-direction: column; }
.cu-bucket-body .out-card, .cu-bucket-body .culture-outing-card { border: none; border-bottom: none; border-radius: var(--r-card); background: transparent; box-shadow: none; padding: var(--space-group) var(--space-item); }
.cu-bucket-body .out-card:hover, .cu-bucket-body .culture-outing-card:hover { background: var(--bg-hover); }
.cu-past { margin-top: var(--space-block); }
.cu-past .cu-bucket-body { opacity: .78; }
.cu-past .cu-bucket-body:hover { opacity: 1; }

/* a celebration reads as one line: who, what, when, and the one thing to do */
.cu-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-group) var(--space-item); min-width: 0; border-radius: var(--r-card); background: transparent; transition: background .13s; }
.cu-row:hover { background: var(--bg-hover); }
.cu-row-date { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--bg-sunken); font-size: 18px; line-height: 1; }
.cu-row-meta { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-tight); }
.cu-row-kind { color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 650; }
.cu-row-when { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 650; }
.cu-row-title { color: var(--ink); font-size: var(--t-label-size); font-weight: 600; }

.cu-next { padding: 20px; }
.cu-next .culture-next-empty { margin-top: var(--space-group); }
.culture2 .culture-activity-panel .tlog { padding: 0 20px var(--space-group); }

@media (max-width: 900px){ .cu-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px){
  .cu-hd { flex-direction: column; gap: var(--space-item); }
  .cu-chip.past { margin-left: 0; }
  .cu-row { flex-wrap: wrap; }
  .cu-row > .btn { margin-left: 54px; }
}

/* ── activity log ── */
.tlog { display: flex; flex-direction: column; }
.tlog-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.tlog-row:last-child { border-bottom: none; }
.tlog-ic { width: 32px; height: 32px; border-radius: var(--r-control); background: var(--bg-sunken); display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; }
.tlog-t { font-size: var(--t-label-size); color: var(--ink-2); }
.tlog-t b { color: var(--ink); font-weight: 650; }
.tlog-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.tlog-time { font-size: var(--t-micro-size); color: var(--ink-4); white-space: nowrap; flex-shrink: 0; }

/* ── celebrations strip ── */
.cel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-item); }
.cel-card { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.cel-emoji { font-size: var(--t-heading-size); flex-shrink: 0; }
.cel-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.cel-when { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.cel-cheer { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--c-gold); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .12s; }
.cel-cheer:hover { background: color-mix(in srgb, var(--c-gold) 12%, transparent); }
.cel-wish { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; flex-shrink: 0; transition: border-color .12s, background .12s, color .12s; }
.cel-wish:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-hover); }
.cel-wish .icn { color: var(--ink-3); }
.cel-wish:hover .icn { color: var(--accent); }

/* ── brand kit ── */
.bk { display: flex; flex-direction: column; gap: 20px; }
.bk-sec-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-item); }
.bk-count { min-width: 18px; text-align: center; font-size: var(--t-micro-size); font-weight: 700; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); }
.bk-logos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item); }
.bk-logo-slot { display: flex; flex-direction: column; gap: var(--space-inline); }
.bk-logo-prev { height: 78px; border-radius: var(--r-card); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); }
.bk-logo-prev.light { background: #fff; }
.bk-logo-prev.dark { background: #1c1d20; }
.bk-logo-prev img { max-width: 80%; max-height: 64%; object-fit: contain; }
.bk-logo-ph { font-size: var(--t-display-size); font-weight: 800; }
.bk-logo-acts { display: flex; gap: var(--space-tight); }
.bk-logo-cap { font-size: var(--t-micro-size); color: var(--ink-4); text-align: center; }
.bk-mini { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; flex: 1; justify-content: center; }
.bk-mini:hover { background: var(--bg-hover); }
.bk-mini.ghost { flex: 0 0 auto; color: var(--ink-3); }
.bk-colors { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-bottom: var(--space-item); }
.bk-color { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.bk-color-sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-subtle); flex-shrink: 0; }
.bk-color-hex { font-size: var(--t-micro-size); font-weight: 600; font-family: var(--font-mono); color: var(--ink); text-transform: uppercase; }
.bk-color-x { width: 22px; height: 22px; border: none; background: none; color: var(--ink-4); border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.bk-color-x:hover { background: var(--bg-hover); color: var(--ink); }
.bk-add { display: flex; align-items: center; gap: var(--space-inline); }
.bk-add-in { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); padding: 0 var(--space-item); font: inherit; font-size: var(--t-caption-size); color: var(--ink); outline: none; }
.bk-add-in:focus { border-color: var(--accent); }
.bk-add-prev { width: 26px; height: 26px; border-radius: var(--r-control); border: 1px solid var(--border); flex-shrink: 0; }
.bk-add-btn { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; }
.bk-add-btn:hover { background: var(--bg-hover); }
.bk-fonts { display: flex; flex-direction: column; gap: var(--space-inline); margin-bottom: var(--space-item); }
.bk-font { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.bk-font-aa { width: 38px; height: 38px; border-radius: var(--r-control); background: var(--bg-sunken); display: grid; place-items: center; font-size: var(--t-heading-size); font-weight: 600; font-family: var(--font-serif); color: var(--ink); flex-shrink: 0; }
.bk-font-n { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.bk-font-r { font-size: var(--t-micro-size); color: var(--ink-3); }
.bk-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-inline); }
.bk-asset { position: relative; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--border); background: var(--bg-sunken); }
.bk-asset img { width: 100%; height: 100%; object-fit: cover; }
.bk-asset-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(20,22,16,.6); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.bk-asset:hover .bk-asset-x { opacity: 1; }
.bk-asset-add { aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-tight); font: inherit; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; }
.bk-asset-add:hover { border-color: var(--accent); color: var(--accent); }
.bk-empty { font-size: var(--t-caption-size); color: var(--ink-4); padding: var(--space-tight) 2px; }
.bk-foot { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-4); }
/* compact chip */
.bk-chip { display: inline-flex; align-items: center; gap: var(--space-tight); }
.bk-chip-logo { max-height: 18px; max-width: 60px; object-fit: contain; }
.bk-chip-sw { display: inline-flex; gap: 2px; }
.bk-chip-sw i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* brand-asset picker */
.bk-pick-client { display: flex; flex-direction: column; gap: var(--space-tight); }
.bk-pick-client > span { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.bk-pick-colors { display: flex; gap: var(--space-tight); }
.bk-pick-sw { width: 28px; height: 28px; border-radius: var(--r-control); border: 1px solid var(--border-subtle); cursor: pointer; }
.bk-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-inline); }
.bk-pick-item { position: relative; display: flex; flex-direction: column; gap: var(--space-inline); padding: var(--space-inline); border: 1.5px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s; }
.bk-pick-item:hover { border-color: var(--border-strong); }
.bk-pick-item.on { border-color: var(--accent); background: var(--accent-soft); }
.bk-pick-img { height: 72px; border-radius: var(--r-control); overflow: hidden; background: var(--bg-sunken); display: grid; place-items: center; }
.bk-pick-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bk-pick-n { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink); }
.bk-pick-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
/* first-run hero (dashFirstRun in s-dashboard.jsx) — a welcome, not a wall:
   the full-page empty min-height is capped so widgets stay in reach below. */
.dash-firstrun { margin-bottom: var(--space-inline); }
.dash-firstrun .empty { min-height: 0; padding: 28px var(--space-block) var(--space-block); }
/* Fixed 3-col grid, not auto-fill: column count is a designed integer that
   matches the .sgrid.wide ladder (3→2→1). This is a CSS-only fallback for
   before the JS masonry packer (relayout() below) runs or if it fails —
   see the comment on .dash-grid.masonry. Breakpoints match the canonical
   four (DESIGN.md → Spacing & Grid Law); the masonry packer's own N=1/2/3
   thresholds are tuned separately to its own container width. */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-group); align-items: start; }
@media (max-width: 1180px){ .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* masonry mode (JS-packed): cards are absolutely positioned into the shortest column — no row-height gaps. The grid rules above remain a safe fallback if the pack hasn't run. */
.dash-grid.masonry { display: block; position: relative; gap: 0; }
.dash-grid.masonry .dw { position: absolute; top: 0; left: 0; margin: 0; }
/* collapsed widget — header only (content hidden) */
.dw-collapsed .dw-body { display: none; }
.dw-collapsed .dw-hd { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.dw.dw-image-widget.dw-collapsed { min-height:54px; padding:var(--space-item) var(--space-group); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-xs); }
.dw.dw-image-widget.dw-collapsed > .dw-hd { position:relative; inset:auto; height:28px; margin:0; padding:0; opacity:1; pointer-events:auto; }
.dw.dw-image-widget.dw-collapsed > .dw-hd .dw-title { display:block; }
.dw.dw-image-widget.dw-collapsed > .dw-hd .dw-grip,
.dw.dw-image-widget.dw-collapsed > .dw-hd .dw-menu-btn { color:var(--ink-3); background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

.dw { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs); min-width: 0; transition: transform .36s cubic-bezier(.22,.68,.24,1), box-shadow var(--dur-over) var(--ease), border-color var(--dur-over) var(--ease); }
.dw:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.dw-tall, .dw-wide, .dw-span { grid-row: auto; grid-column: auto; column-span: none; }
/* team pulse hero */
.dw-team-hero { display: flex; align-items: center; gap: var(--space-group); }
.dw-team-hero > div { min-width: 0; }
/* drag-to-reorder — handle is always visible */
.dw-grip { width: 24px; height: 26px; margin-left: -4px; border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink-4); cursor: grab; opacity: 1; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; transition: color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); flex-shrink: 0; }
.dw:hover .dw-grip { color: var(--ink-3); }
.dw-grip:hover { color: var(--ink); }
.dw-grip:active { cursor: grabbing; transform: scale(.92); }
.dw-dragging { opacity: .4; border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); box-shadow: none !important; }
/* floating clone that follows the pointer during a pointer-drag */
.dw-ghost { box-shadow: 0 26px 52px -12px rgba(40,30,20,.46), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); opacity: .97; will-change: transform; }
.dw-dragimg { border-radius: var(--r-lg); }
/* MOTION EXCEPTION (SET 9 8) — the dashboard widget drop-settle, and the
   reflow of its neighbours during a drag. Same reason as the kanban drag above:
   these describe MASS coming to rest after a physical drop, not chrome
   appearing. --ease would snap them into place and lose the settle. */
.dw-settle { animation: dwSettle .5s cubic-bezier(.22,.68,.24,1); }
@keyframes dwSettle { 0% { transform: scale(.965); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); } 60% { transform: scale(1.008); } 100% { transform: scale(1); box-shadow: var(--shadow-xs); } }
.dw-dragging .dw-grip { color: var(--accent); background: transparent; box-shadow: none; }
/* per-widget overflow menu (hover-revealed, like the grip) */
.dw-menu-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); flex-shrink: 0; }
.dw:hover .dw-menu-btn { opacity: .55; }
.dw-menu-btn:hover { opacity: 1 !important; background: var(--bg-sunken); color: var(--ink-2); }
/* hidden-widgets restore bar */
.dash-hidden-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-group); padding: var(--space-item) var(--space-group); border: 1px dashed var(--border-strong); border-radius: var(--r-card); background: var(--surface); }
.dash-hidden-lead { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-3); flex-shrink: 0; }
.dash-hidden-chips { display: flex; flex-wrap: wrap; gap: var(--space-inline); flex: 1; min-width: 0; }
.dash-hidden-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--r-modal); padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-inline); cursor: pointer; transition: all .14s; font-family: inherit; }
.dash-hidden-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dash-hidden-all { font-size: var(--t-caption-size); font-weight: 700; color: var(--accent); background: none; border: none; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); flex-shrink: 0; font-family: inherit; }
.dash-hidden-all:hover { background: var(--accent-soft); }
.prop-link { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; padding: 2px var(--space-tight); margin-left: -4px; border-radius: 6px; font: inherit; font-size: var(--t-label-size); font-weight: 550; color: var(--accent); cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.prop-link:hover { background: var(--accent-soft); }
.prop-link svg { opacity: .6; }
/* notifications · muted channels footer */
.ntf-muted { border-top: 1px solid var(--border-subtle); padding: var(--space-inline) var(--space-tight) var(--space-item); background: transparent; }
.ntf-muted-hd { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-tight); }
.ntf-muted-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); transition: background var(--dur-micro) var(--ease); }
.ntf-muted-row:hover { background: var(--bg-hover); }
.ntf-muted-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-muted-un { flex-shrink: 0; border: none; background: transparent; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: 6px; transition: background var(--dur-micro) var(--ease); }
.ntf-muted-un:hover { background: var(--accent-soft); }
.dw-over { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dw-over { position: relative; transition: box-shadow var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
.dw-over::before { content: "Drop here"; position: absolute; top: 8px; right: 12px; z-index: 6; font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fg, #fff); background: var(--accent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; box-shadow: var(--shadow-sm); pointer-events: none; animation: dwTagIn var(--dur-micro) var(--ease); }
@keyframes dwTagIn { from { opacity: 0; transform: translateY(-3px) scale(.9); } to { opacity: 1; transform: none; } }
.dash-grid-dragging .dw { transition: box-shadow var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.dash-grid-dragging .dw:hover:not(.dw-over):not(.dw-dragging) { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border); }
.dash-grid-dragging .dw:not(.dw-dragging):not(.dw-over) { opacity: .82; }
.dash-grid-dragging .dw:not(.dw-dragging) { transition: transform .26s cubic-bezier(.2,.75,.3,1), box-shadow var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.dash-grid-dragging .dw-grip { color: var(--accent); }
body.dash-dragging, body.dash-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
@media (prefers-reduced-motion: reduce){ .dw[data-wid] { transition: none !important; } }
/* Dashboard widget browser. The shared Modal owns focus, stacking, and dismissal. */
.modal.modal-dash-browser { width:min(1440px, calc(100vw - 32px)) !important; height:min(88vh, 860px); }
.modal.modal-dash-browser .modal-body { padding:0; overflow:hidden; border-radius:0 0 var(--modal-radius) var(--modal-radius); }
.dwc { display:grid; grid-template-columns:224px minmax(0, 1fr); grid-template-areas:"rail main"; height:100%; min-height:0; }
.dwc-main { grid-area:main; min-width:0; min-height:0; overflow-y:auto; padding:var(--space-block); background:var(--surface); }
.dwc-rail { grid-area:rail; min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--border-subtle); padding:var(--space-group) var(--space-item); background:var(--surface); }
.dwc-rail nav { display:flex; flex-direction:column; gap:var(--space-tight); }
.dwc-rail nav button, .dwc-rail-actions button { width:100%; min-height:40px; display:flex; align-items:center; gap:var(--space-item); padding:0 var(--space-item); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-label-size); text-align:left; }
.dwc-rail nav button:hover, .dwc-rail-actions button:hover { background:var(--bg-hover); color:var(--ink); }
.dwc-rail nav button.on { background:var(--bg-active); color:var(--ink); font-weight:650; }
.dwc-rail nav button .icn, .dwc-rail-actions button .icn { flex:none; }
.dwc-rail nav button span { flex:1; }
.dwc-rail nav button small { color:var(--ink-4); font-size:var(--t-micro-size); font-variant-numeric:tabular-nums; }
.dwc-rail-actions { margin-top:auto; padding-top:var(--space-group); border-top:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:var(--space-tight); }
.dwc-toolbar { position:sticky; top:-24px; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:var(--space-group); margin:-24px -24px var(--space-block); padding:20px var(--space-block) var(--space-group); border-bottom:1px solid var(--border-subtle); background:color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.dwc-heading { display:flex; align-items:center; gap:var(--space-inline); min-width:0; }
.dwc-heading .icn { color:var(--ink-3); }
.dwc-heading h3 { margin:0; font-size:var(--t-strong-size); font-weight:650; color:var(--ink); white-space:nowrap; }
.dwc-heading > span { color:var(--ink-4); font-size:var(--t-caption-size); font-variant-numeric:tabular-nums; }
.dwc-search { width:min(360px, 42vw); height:40px; display:flex; align-items:center; gap:var(--space-inline); padding:0 var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-4); transition:border-color var(--t-fast) ease-out, background var(--t-fast) ease-out; }
.dwc-search:focus-within { border-color:var(--accent); background:var(--surface); color:var(--ink-3); }
.dwc-search input { flex:1; min-width:0; height:100%; border:0; outline:0; box-shadow:none; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-label-size); }
.dwc-search input::placeholder { color:var(--ink-4); }
.dwc-search-x { width:24px; height:24px; display:grid; place-items:center; flex:none; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-4); }
.dwc-search-x:hover { background:var(--bg-hover); color:var(--ink); }
.dwc-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-group); align-items:start; }
.dwc-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); cursor:pointer; transition:border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.dwc-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.dwc-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dwc-card.on { border-color:color-mix(in srgb, var(--accent) 52%, var(--border)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.dwc-card.unavailable { cursor:not-allowed; opacity:.64; }
.dwc-card.unavailable:hover { transform:none; box-shadow:none; border-color:var(--border); }
.dwc-preview { position:relative; height:192px; overflow:hidden; border-bottom:1px solid var(--border-subtle); background:var(--bg-sunken); pointer-events:none; user-select:none; }
.dwc-preview::after { content:""; position:absolute; inset:auto 0 0; height:32px; background:linear-gradient(transparent, color-mix(in srgb, var(--surface) 84%, transparent)); pointer-events:none; }
.dwc-preview-scale { width:142.857%; min-height:272px; padding:var(--space-group); transform:scale(.7); transform-origin:top left; }
.dwc-preview-scale > .dw { width:100%; min-height:232px; margin:0; box-shadow:none; }
.dwc-preview-scale > .dw:hover { transform:none; box-shadow:none; }
.dwc-preview-scale .dw-body { max-height:192px; overflow:hidden; }
.dwc-preview-skeleton { height:100%; display:flex; flex-direction:column; gap:var(--space-item); padding:var(--space-block); }
.dwc-preview-skeleton span { height:16px; border-radius:6px; background:var(--border-subtle); }
.dwc-preview-skeleton span:nth-child(2) { width:72%; }
.dwc-preview-skeleton span:nth-child(3) { width:44%; }
.dwc-card-copy { padding:var(--space-group); }
.dwc-card-title { display:flex; align-items:center; gap:var(--space-inline); min-width:0; }
.dwc-card-title > .icn { color:var(--ink-3); flex:none; }
.dwc-card-title h4 { flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:var(--t-body-size); font-weight:650; }
.dwc-card-state { display:inline-flex; align-items:center; gap:var(--space-tight); flex:none; color:var(--ink-3); font-size:var(--t-micro-size); font-weight:650; }
.dwc-card.on .dwc-card-state { color:var(--accent); }
.dwc-card-copy p { min-height:40px; margin:var(--space-inline) 0 0; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.55; }
.dwc-card-unavailable { display:block; margin-top:var(--space-inline); color:var(--ink-4); font-size:var(--t-micro-size); }
.dwc-empty { min-height:360px; display:grid; place-content:center; justify-items:center; gap:var(--space-group); text-align:center; }

/* Live task-list dashboard widgets. */
.dw-live-list { overflow:hidden; }
.dwl { min-width:0; }
.dwl-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); margin-bottom:var(--space-group); }
.dwl-search { min-width:160px; max-width:320px; height:36px; display:flex; align-items:center; gap:var(--space-inline); flex:1; padding:0 var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-4); }
.dwl-search:focus-within { border-color:var(--accent); background:var(--surface); }
.dwl-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-caption-size); }
.dwl-search button { width:20px; height:20px; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink-4); }
.dwl-tool { min-height:32px; display:inline-flex; align-items:center; gap:var(--space-inline); padding:0 var(--space-inline); border:0; border-radius:6px; background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-caption-size); white-space:nowrap; }
.dwl-tool:hover, .dwl-tool.on { background:var(--bg-hover); color:var(--ink); }
.dwl-groups { max-height:520px; overflow:auto; overscroll-behavior:contain; }
.dwl-group + .dwl-group { margin-top:20px; padding-top:20px; border-top:1px solid var(--border-subtle); }
.dwl-group > header { display:flex; align-items:center; gap:var(--space-inline); min-height:28px; margin-bottom:var(--space-inline); color:var(--ink-3); }
.dwl-group > header h4 { margin:0; color:var(--ink); font-size:var(--t-caption-size); font-weight:650; }
.dwl-group > header > span:last-child { color:var(--ink-4); font-size:var(--t-micro-size); }
.dwl-group.overdue > header { color:var(--st-blocked); }
.dwl-group.done > header { color:var(--st-done); }
.dwl-status-mark { display:grid; place-items:center; }
.dwl-table-head, .dwl-row { display:grid; grid-template-columns:minmax(0, 1fr) 112px 128px; align-items:center; column-gap:var(--space-item); }
.dwl-table-head { min-height:32px; padding:0 var(--space-inline) 0 36px; border-bottom:1px solid var(--border-subtle); color:var(--ink-4); font-size:var(--t-micro-size); }
.dwl-row { position:relative; min-height:44px; padding:0 var(--space-inline) 0 36px; border-bottom:1px solid var(--border-subtle); }
.dwl-row:hover { background:var(--bg-hover); }
.dwl-check { position:absolute; left:8px; top:12px; width:20px; height:20px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-4); }
.dwl-check.on { color:var(--st-done); }
.dwl-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-caption-size); font-weight:550; text-align:left; }
.dwl-prio { display:inline-flex; align-items:center; gap:var(--space-tight); color:var(--ink-3); font-size:var(--t-caption-size); white-space:nowrap; }
.dwl-prio.high { color:var(--c-gold); }
.dwl-due { color:var(--ink-3); font-size:var(--t-caption-size); white-space:nowrap; }
.dwl-due.overdue, .dwl-wide-row > .overdue { color:var(--st-blocked); }
.dwl-add { min-height:36px; display:inline-flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-item); padding:0 var(--space-inline); border:0; border-radius:6px; background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-caption-size); }
.dwl-add:hover { background:var(--bg-hover); color:var(--ink); }
.dwl-wide-head, .dwl-wide-row { display:grid; grid-template-columns:minmax(0, 2fr) minmax(96px, .8fr) minmax(112px, .8fr) minmax(88px, .7fr); align-items:center; gap:var(--space-group); }
.dwl-wide-head { min-height:36px; padding:0 var(--space-item); border-bottom:1px solid var(--border-subtle); color:var(--ink-4); font-size:var(--t-micro-size); }
.dwl-wide-row { width:100%; min-height:56px; padding:var(--space-inline) var(--space-item); border:0; border-bottom:1px solid var(--border-subtle); background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-caption-size); text-align:left; }
.dwl-wide-row:hover { background:var(--bg-hover); }
.dwl-wide-name { min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.dwl-wide-name small, .dwl-wide-row small { color:var(--ink-4); font-size:var(--t-micro-size); font-weight:500; }
.dwl-wide-name b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:var(--t-caption-size); font-weight:600; }
.dwl-foot { display:flex; align-items:center; justify-content:space-between; }

/* Agenda widget. */
.dw-agenda { overflow:hidden; }
.dagenda-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); margin-bottom:var(--space-group); }
.dagenda-nav, .dagenda-view { display:flex; align-items:center; gap:var(--space-tight); }
.dagenda-nav button, .dagenda-view button { min-width:32px; height:32px; display:grid; place-items:center; padding:0 var(--space-inline); border:0; border-radius:6px; background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-caption-size); }
.dagenda-nav button:hover, .dagenda-view button:hover, .dagenda-view button.on { background:var(--bg-hover); color:var(--ink); }
.dagenda-nav strong { margin-left:var(--space-inline); color:var(--ink); font-size:var(--t-label-size); font-weight:650; white-space:nowrap; }
.dagenda-view { padding:var(--space-tight); border-radius:var(--r-control); background:var(--bg-sunken); }
.dagenda-list { max-height:440px; overflow:auto; }
.dagenda-list > button { width:100%; min-height:44px; display:grid; grid-template-columns:72px 8px minmax(0, 1fr) 16px; align-items:center; gap:var(--space-item); padding:0 var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:transparent; color:var(--ink); font:inherit; font-size:var(--t-caption-size); text-align:left; }
.dagenda-list > button:hover { background:var(--bg-hover); }
.dagenda-time { color:var(--ink-4); font-size:var(--t-micro-size); white-space:nowrap; }
.dagenda-dot { width:8px; height:8px; border-radius:50%; }
.dagenda-timeline { max-height:520px; overflow:auto; border-top:1px solid var(--border-subtle); }
.dagenda-allday { display:grid; grid-template-columns:64px minmax(0, 1fr); gap:var(--space-item); align-items:start; padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); }
.dagenda-allday > span { padding-top:var(--space-inline); color:var(--ink-4); font-size:var(--t-micro-size); text-align:right; }
.dagenda-allday > div { display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.dagenda-allday button, .dagenda-event { border:0; border-radius:6px; background:color-mix(in srgb, var(--agenda-color) 14%, var(--surface)); color:var(--ink); font:inherit; font-size:var(--t-micro-size); text-align:left; }
.dagenda-allday button { min-height:32px; padding:0 var(--space-item); }
.dagenda-hours { position:relative; min-height:560px; }
.dagenda-hour { height:40px; display:grid; grid-template-columns:64px minmax(0, 1fr); gap:var(--space-item); align-items:start; }
.dagenda-hour span { transform:translateY(-8px); color:var(--ink-4); font-size:var(--t-micro-size); text-align:right; }
.dagenda-hour i { display:block; border-top:1px solid var(--border-subtle); }
.dagenda-events { position:absolute; top:0; right:0; bottom:0; left:76px; }
.dagenda-event { position:absolute; left:8px; right:8px; min-height:24px; padding:var(--space-tight) var(--space-inline); overflow:hidden; }
.dagenda-event:hover, .dagenda-allday button:hover { background:color-mix(in srgb, var(--agenda-color) 22%, var(--surface)); }
.dagenda-event span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dagenda-now { position:absolute; left:0; right:0; height:2px; background:var(--st-blocked); pointer-events:none; }
.dagenda-now i { position:absolute; left:-4px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--st-blocked); }
.dagenda-now b { position:absolute; right:0; top:-20px; color:var(--st-blocked); font-size:var(--t-micro-size); font-weight:650; }

@media (max-width:1180px) {
  .dwc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .modal.modal-dash-browser { height:min(92vh, 900px); }
  .dwc { grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"rail" "main"; }
  .dwc-rail { border-right:0; border-bottom:1px solid var(--border-subtle); padding:var(--space-inline) var(--space-item); }
  .dwc-rail nav { flex-direction:row; overflow-x:auto; }
  .dwc-rail nav button { width:auto; flex:none; }
  .dwc-rail nav button small, .dwc-rail-actions { display:none; }
  .dwc-main { padding:20px; }
  .dwc-toolbar { top:-20px; margin:-20px -20px 20px; padding:var(--space-group) 20px; }
  .dwl-wide-head, .dwl-wide-row { grid-template-columns:minmax(0, 1.5fr) minmax(88px, .7fr) minmax(104px, .7fr); }
  .dwl-wide-head > :nth-child(2), .dwl-wide-row > :nth-child(2) { display:none; }
}
@media (max-width:640px) {
  .dwc-grid { grid-template-columns:minmax(0, 1fr); }
  .dwc-toolbar { align-items:stretch; flex-direction:column; }
  .dwc-search { width:100%; }
  .dwl-tools { align-items:stretch; flex-direction:column; }
  .dwl-search { max-width:none; }
  .dwl-table-head, .dwl-row { grid-template-columns:minmax(0, 1fr) 104px; }
  .dwl-table-head > :nth-child(2), .dwl-row > :nth-child(3) { display:none; }
  .dwl-wide-head, .dwl-wide-row { grid-template-columns:minmax(0, 1fr) 104px; }
  .dwl-wide-head > :nth-child(4), .dwl-wide-row > :nth-child(4) { display:none; }
  .dagenda-tools { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  .dwc-card { transition:none; }
  .dwc-card:hover { transform:none; }
}

/* ── finance dashboard widgets (Cash flow / Revenue mix / Receivables / Collection) ── */
.dw-fin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dw-fin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); margin-bottom: var(--space-item); }
.dw-fin-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-tight); padding: 0; border: none; background: none; cursor: pointer; text-align: left; min-width: 0; }
.dw-fin-col-l { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 600; }
.dw-fin-col-v { font-size: var(--t-title-size); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dw-fin-delta { font-size: var(--t-micro-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.dw-fin-delta.up { color: var(--viz-green); }
.dw-fin-delta.down { color: var(--viz-rust); }
.dw-fin-line { display: block; width: 100%; height: 92px; overflow: visible; }
.dw-fin-now { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.dw-fin-axis { display: flex; justify-content: space-between; margin-top: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dw-fin-net { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); font-size: var(--t-caption-size); color: var(--ink-3); }
.dw-fin-net b { font-size: var(--t-body-size); font-variant-numeric: tabular-nums; }
.dw-fin-net b.pos { color: var(--viz-green); }
.dw-fin-net b.neg { color: var(--viz-rust); }
.dw-fin-mix { display: flex; align-items: center; gap: var(--space-item); }
.dw-fin-leg { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dw-fin-leg.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight) var(--space-item); margin-top: var(--space-item); }
.dw-fin-legrow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-tight); border: none; background: none; border-radius: var(--r-control); width: 100%; min-width: 0; text-align: left; transition: background .12s; }
button.dw-fin-legrow { cursor: pointer; }
button.dw-fin-legrow:hover { background: var(--bg-hover); }
.dw-fin-legrow.static { padding: var(--space-tight) 2px; }
.dw-fin-legname { flex: 1; min-width: 0; font-size: var(--t-caption-size); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-fin-legv { font-size: var(--t-caption-size); font-weight: 650; font-variant-numeric: tabular-nums; }
.dw-fin-legpct { font-size: var(--t-micro-size); color: var(--ink-3); font-variant-numeric: tabular-nums; width: 32px; text-align: right; flex-shrink: 0; }
/* Revenue-mix stacked figure (value over %), right-aligned — frees width for client names */
.dw-fin-legend-r { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; flex-shrink: 0; }
.dw-fin-legend-r .dw-fin-legpct { width: auto; }
.dw-fin-segbar { display: flex; gap: var(--space-tight); height: 11px; }
.dw-fin-seg { border-radius: 6px; min-width: 7px; }
.dw-fin-recv-hd { margin-bottom: var(--space-item); }
.dw-fin-big { font-size: var(--t-display-size); line-height: 1; letter-spacing: -0.02em; }
.dw-fin-cr-hd { display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-item); }
.dw-fin-cr-sub { font-size: var(--t-caption-size); }
.dw-fin-ticks { display: flex; gap: 2px; align-items: stretch; height: 30px; margin-bottom: var(--space-item); }
.dw-fin-tick { flex: 1; border-radius: 2px; transition: background .3s ease; }
.dw-fin-cr-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.dw-fin-crstat { display: flex; flex-direction: column; gap: 2px; border: none; background: none; cursor: pointer; text-align: left; padding: 0; }
.dw-fin-crstat b { font-size: var(--t-heading-size); font-weight: 750; font-variant-numeric: tabular-nums; }
.dw-fin-crstat span { font-size: var(--t-micro-size); color: var(--ink-3); }

/* Control Center · UI Health */
.uih-note { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); margin: var(--space-tight) 0 var(--space-group); }
.uih-note .icn { color: var(--ink-4); }
.uih-clear { text-align: center; padding: 48px var(--space-group); }
.uih-group { margin-bottom: 20px; }
.uih-group-h { display: flex; align-items: center; gap: var(--space-inline); padding-bottom: var(--space-inline); margin-bottom: var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.uih-group-t { font-family: var(--font-serif); font-size: var(--t-strong-size); font-weight: 600; }
.uih-group-n { min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; display: grid; place-items: center; }
.uih-mini { border: none; background: none; color: var(--ink-4); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.uih-mini:hover { background: var(--bg-hover); color: var(--ink-2); }
.uih-row { display: flex; align-items: flex-start; gap: var(--space-item); padding: var(--space-item) var(--space-tight) var(--space-item) var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.uih-row:last-child { border-bottom: none; }
.uih-sev { width: 6px; align-self: stretch; border-radius: 999px; flex-shrink: 0; margin-top: 2px; min-height: 36px; }
.uih-ty { width: 26px; height: 26px; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.uih-main { flex: 1; min-width: 0; }
.uih-msg { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.uih-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-inline); margin-top: var(--space-tight); }
.uih-where { font-family: var(--font-mono, monospace); font-size: var(--t-micro-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.uih-box { font-size: var(--t-micro-size); color: var(--ink-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.uih-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); font-size: var(--t-micro-size); }
.uih-code .icn { color: var(--ink-4); }
.uih-file { font-weight: 650; color: var(--accent); }
.uih-cls { font-family: var(--font-mono, monospace); color: var(--ink-3); background: var(--bg-sunken); padding: 1px var(--space-inline); border-radius: 6px; }
.uih-vs { font-family: var(--font-mono, monospace); color: var(--ink-4); }
.uih-jump { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-tight); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); cursor: pointer; transition: all .14s; }
.uih-jump:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* the highlighted element when you jump to a fault */
.uihealth-flash { animation: uihFlash 2.2s ease; }
@keyframes uihFlash { 0%, 100% { box-shadow: none; } 18% { box-shadow: 0 0 0 2px var(--st-blocked), 0 0 0 7px color-mix(in srgb, var(--st-blocked) 22%, transparent); } 60% { box-shadow: 0 0 0 2px var(--st-blocked), 0 0 0 7px color-mix(in srgb, var(--st-blocked) 22%, transparent); } }
@media (prefers-reduced-motion: reduce){ .uihealth-flash { animation: none; outline: 2px solid var(--st-blocked); } }

/* courses (compact, column-friendly) */
.dw-courselist { display: flex; flex-direction: column; }
.dw-course { padding: var(--space-item) 0; border-top: 1px solid var(--border-subtle); }
.dw-course:first-child { padding-top: 2px; border-top: none; }
.dw-course-top { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.dw-course-prog { display: flex; align-items: center; gap: var(--space-inline); }
.dw-course-prog .tnum { font-size: var(--t-caption-size); font-weight: 600; width: 34px; text-align: right; color: var(--ink-2); }
.dw-hd { display: flex; align-items: center; gap: var(--space-inline); padding-bottom: var(--space-item); margin-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.dw-ic { width: 28px; height: 28px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dw-title { font-size: var(--t-strong-size); font-weight: 650; margin: 0; line-height: 1.2; flex: 1; min-width: 0; text-wrap: balance; }
.dw-seeall { border: none; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-tight); white-space: nowrap; flex-shrink: 0; transition: color .14s, background .14s; }
.dw-seeall:hover { color: var(--accent); background: var(--accent-soft); }
.dw-seeall.plus { color: var(--accent); }
.dw-divider { height: 1px; background: var(--border-subtle); margin: var(--space-item) 0; }
.dw-field { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--space-tight); }
/* "Needs you" cross-surface roll-up */
.dw-needs { display: flex; flex-direction: column; gap: var(--space-tight); }
.dw-needs-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.dw-needs-row:hover { border-color: var(--border-strong); background: var(--bg-hover); transform: translateX(2px); }
.dw-needs-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.dw-needs-n { font-size: var(--t-heading-size); font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 18px; }
.dw-needs-l { font-size: var(--t-label-size); color: var(--ink-2); }
.dw-needs-clear { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: 20px 0 var(--space-group); color: var(--st-done); }
.dw-needs-clear span { font-size: var(--t-label-size); font-weight: 600; color: var(--ink-3); }
.dw-needs-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg, #fff); font-size: var(--t-micro-size); font-weight: 750; font-variant-numeric: tabular-nums; }
.dw-needs-act { display: inline-flex; align-items: center; gap: var(--space-tight); }
.appr-cross-pane { margin-top: var(--space-group); }
/* Dashboard Inbox today widget. Kept here because Dashboard renders before users open Inbox. */
.dw.dw-inbox-card .dw-body { display: flex; flex-direction: column; min-width: 0; }
.dw.dw-inbox-card .dw-inbox-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: -2px 0 var(--space-inline); padding: 0 0 var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.dw.dw-inbox-card .dw-inbox-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); min-width: 0; padding: 2px var(--space-tight) 0; border: none; border-radius: 0; background: transparent; color: var(--ink); text-align: center; cursor: pointer; box-shadow: none; }
.dw.dw-inbox-card .dw-inbox-stat + .dw-inbox-stat { border-left: 1px solid var(--border-subtle); }
.dw.dw-inbox-card .dw-inbox-stat:hover .dw-inbox-statl { color: var(--ink-2); }
.dw.dw-inbox-card .dw-inbox-statv { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--font-serif, Georgia, serif); font-size: var(--t-title-size); font-weight: 520; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.dw.dw-inbox-card .dw-inbox-stat.active .dw-inbox-statv { color: var(--dw-stat-color, var(--accent)); }
.dw.dw-inbox-card .dw-inbox-statl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: 0; line-height: 1; text-transform: none; transition: color var(--dur-micro) var(--ease); }
.dw.dw-inbox-card .dw-inbox-list { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.dw.dw-inbox-card .dw-inbox-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; min-width: 0; padding: var(--space-inline) var(--space-inline); margin: 0 -8px; border: none; border-radius: var(--r-control); background: transparent; color: inherit; cursor: pointer; text-align: left; transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.dw.dw-inbox-card .dw-inbox-row + .dw-inbox-row { border-top: 1px solid var(--border-subtle); border-radius: 0; }
.dw.dw-inbox-card .dw-inbox-row:hover { background: var(--bg-hover); transform: translateX(1px); }
.dw.dw-inbox-card .dw-inbox-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dw.dw-inbox-card .dw-inbox-row-from { display: block; min-width: 0; color: var(--ink); font-size: var(--t-label-size); font-weight: 650; line-height: 1.25; }
.dw.dw-inbox-card .dw-inbox-row-subj { display: block; min-width: 0; max-width: 100%; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 500; line-height: 1.3; text-align: left; }
.dw.dw-inbox-card .dw-inbox-row-time { flex: 0 0 auto; color: var(--ink-4); font-size: var(--t-micro-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dw.dw-inbox-card .dw-inbox-clear { display: flex; align-items: center; gap: var(--space-inline); min-height: 42px; margin: 0; padding: var(--space-inline) 2px 2px; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.35; background: transparent; border-radius: 0; }
.dw.dw-inbox-card .dw-inbox-clear .icn { flex: 0 0 auto; color: var(--c-olive); }
@media (max-width: 420px){
  .dw.dw-inbox-card .dw-inbox-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-item); }
  .dw.dw-inbox-card .dw-inbox-stat:nth-child(3) { border-left: none; }
  .dw.dw-inbox-card .dw-inbox-row { align-items: flex-start; }
}
/* unified "Approvals routed to me" inbox */
.dw-appr-inbox { display: flex; flex-direction: column; gap: 2px; }
.dw-appr-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; border-radius: var(--r-control); background: none; cursor: pointer; text-align: left; transition: background .12s; }
.dw-appr-row:hover { background: var(--bg-hover); }
.dw-appr-row > .grow { display: flex; flex-direction: column; gap: 1px; }
.dw-appr-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dw-appr-s { font-size: var(--t-micro-size); color: var(--ink-3); }
.dw-appr-chip { flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 700; padding: 2px var(--space-inline); border-radius: var(--r-modal); }
.dw-appr-more { width: 100%; text-align: center; border: none; background: none; cursor: pointer; font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); padding: var(--space-tight); border-radius: var(--r-control); }
.dw-appr-more:hover { background: var(--accent-soft); }
.dw-needs-cog { display: grid; place-items: center; width: 24px; height: 24px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.dw-needs-cog:hover { background: var(--bg-hover); color: var(--ink-2); }
.dw-pulse { animation: dwPulse 1.5s ease; }
@keyframes dwPulse { 0%, 100% { box-shadow: var(--shadow-xs); } 28% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft); } }
.dw-sub2 { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-inline); }
.dw-tag { display: inline-flex; align-items: center; font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; white-space: nowrap; }

/* gauge */
.dw-gauge { position: relative; display: grid; place-items: center; padding: var(--space-tight) 0 2px; }
.dw-gauge-c { position: absolute; top: 46px; text-align: center; }
.dw-gauge-c b { display: block; font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 540; line-height: 1; }
.dw-gauge-c span { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); letter-spacing: .04em; margin-top: var(--space-tight); display: block; }
.dw-off { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; }
.dw-off-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.dw-off-d { font-size: var(--t-label-size); font-weight: 550; }
.dw-off-d em { color: var(--ink-4); font-style: normal; font-weight: 400; }

/* current project */
.dw-proj-name { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-strong-size); font-weight: 650; margin-bottom: var(--space-group); }
.dw-proj-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dw-status { display: inline-flex; align-items: center; gap: var(--space-tight); white-space: nowrap; flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 600; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: 2px var(--space-inline); border-radius: 999px; margin-left: auto; }
.dw-proj-leads { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item); margin-bottom: var(--space-group); }
.dw-lead { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 550; }
.dw-timeline { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 550; margin-bottom: var(--space-group); }
.dw-timeline .icn { color: var(--ink-4); }
.dw-desc { display: flex; align-items: flex-start; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.5; }
.dw-desc .icn { color: var(--ink-4); margin-top: 2px; flex-shrink: 0; }

/* schedule */
.dw-monthbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-inline) var(--space-inline); background: var(--bg-sidebar); border-radius: var(--r-control); font-size: var(--t-label-size); font-weight: 600; margin-bottom: var(--space-item); }
.dw-mb-arrow { width: 26px; height: 26px; border: none; background: var(--surface); border-radius: var(--r-control); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-xs); }
.dw-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-tight); margin-bottom: var(--space-group); }
.dw-day { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-inline) 0; border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: transparent; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.dw-day span { font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 600; }
.dw-day b { font-size: var(--t-strong-size); font-weight: 600; }
.dw-day:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.dw-day.today b { color: var(--accent); }
.dw-day.on { background: transparent; border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.dw-day.on span, .dw-day.on b { color: var(--accent); }
.dw-meeting.past { opacity: .72; }
.dw-empty-sm .btn { margin-top: var(--space-tight); }
.dw-sched-tabs { display: flex; gap: var(--space-tight); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-item); }
.dw-sched-tabs button { border: none; background: none; padding: var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dw-sched-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.dw-meetings { display: flex; flex-direction: column; }
.dw-meeting { padding: var(--space-item) 2px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.dw-meeting:last-child { border-bottom: none; }
.dw-meeting:hover { background: var(--bg-hover); }
.dw-meeting-t { font-size: var(--t-label-size); font-weight: 650; }
.dw-meeting-time { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
.dw-meeting-on { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.dw-meeting-on .icn { color: var(--ink-4); }
.dw-empty-sm { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: 28px; color: var(--ink-4); font-size: var(--t-caption-size); }
.dw .empty.compact { min-height: 0; flex: 0 1 auto; padding: 20px var(--space-item); gap: var(--space-inline); }
.dw .empty.compact .empty-act { margin-top: var(--space-inline); }

/* drawer / sidebar / inspector panel empties (PanelEmpty) */
.panel-empty .empty.compact {
  min-height: 0; flex: 0 1 auto; padding: var(--space-inline) 2px; gap: var(--space-tight);
  align-items: flex-start; text-align: left;
}
.panel-empty .empty.compact .empty-ic { display: none; }
.panel-empty .empty.compact .ea-wrap { display: none; }
.panel-empty .empty.compact .empty-title {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-3); letter-spacing: 0;
}
.panel-empty .empty.compact .empty-hint { font-size: var(--t-caption-size); text-align: left; max-width: none; }
.panel-empty .empty.compact .empty-act { margin-top: var(--space-tight); justify-content: flex-start; }
.panel-empty .empty.compact .empty-act .btn.primary.sm {
  height: auto; padding: 0; border: 0; background: transparent; color: var(--accent);
  font-size: inherit; font-weight: 600; border-radius: 0;
}
.panel-empty .empty.compact .empty-act .btn.primary.sm:hover { background: transparent; color: var(--ink); text-decoration: underline; }

/* status tracker */
.dw-person { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; }
.dw-person-n { font-size: var(--t-label-size); font-weight: 600; }
.dw-person-s { font-size: var(--t-micro-size); color: var(--ink-3); }
.dw-pill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; flex-shrink: 0; }
.dw-pill.off { color: var(--ink-3); background: var(--bg-active); }
.dw-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dw-pill.away { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); }
.dw-away-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-gold); border: 2px solid var(--surface); }

/* notes */
.dw-note { display: flex; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.dw-note:last-child { border-bottom: none; }
.dw-note-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; margin-top: 1px; }
.dw-note-t { font-size: var(--t-label-size); font-weight: 650; }
.dw-note-s { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.dw-note-date { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); }

/* course progress */
.dw-courseprog { display: flex; align-items: center; gap: var(--space-group); }
.dw-cp-title { font-size: var(--t-body-size); font-weight: 650; }
.dw-cp-sub { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.45; margin: var(--space-tight) 0 var(--space-inline); }
.dw-link { border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: 0; }

/* daily work hours */
.dw-hours { font-size: var(--t-body-size); color: var(--ink-2); margin-bottom: var(--space-item); }
.dw-hours b { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 540; color: var(--ink); }
.dw-hours-bar { display: flex; gap: var(--space-tight); height: 12px; margin-bottom: var(--space-item); }
.dw-hours-bar span { border-radius: 4px; }
.dw-hours-leg { display: flex; gap: var(--space-group); }
.dw-hours-leg span { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.dw-hours-leg i { width: 8px; height: 8px; border-radius: 50%; }

/* employee spotlight */
.dw-spot { text-align: center; padding: var(--space-tight) 0; }
.dw-spot-badge { position: relative; display: inline-grid; place-items: center; margin-bottom: var(--space-item); }
.dw-spot-badge::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.dw-spot-ribbon { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 3px solid var(--surface); }
.dw-spot-name { font-size: var(--t-strong-size); font-weight: 650; }
.dw-spot-role { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.dw-spot-tag { display: inline-block; font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: var(--space-tight) var(--space-item); border-radius: 999px; margin-top: var(--space-item); }

/* courses table */
.dw-courses { width: 100%; border-collapse: collapse; }
.dw-courses th { text-align: left; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; padding: 0 var(--space-inline) var(--space-inline); }
.dw-courses td { padding: var(--space-item) var(--space-inline); border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.dw-cinstr { display: flex; align-items: center; gap: var(--space-inline); }
.dw-ci-n { font-size: var(--t-label-size); font-weight: 600; }
.dw-ci-r { font-size: var(--t-micro-size); color: var(--ink-4); }
.dw-ci-course { font-size: var(--t-label-size); font-weight: 550; }
.dw-ci-range { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.dw-cstatus { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: 999px; }
.dw-cstatus.prog { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, transparent); }
.dw-cstatus.done { color: var(--st-done); background: var(--st-done-soft); }

/* time tracker */
.dw-tt-proj { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 600; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); margin-bottom: var(--space-item); }
.dw-tt-head { margin-bottom: var(--space-inline); }
.dw-tt-head.live .dw-tt-label { color: var(--accent-700, var(--accent)); }
.dw-tt-label { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.dw-tt-sub { font-size: var(--t-caption-size); color: var(--ink-4); margin-top: 2px; }
.dw-tt-timer { text-align: center; padding: var(--space-group) var(--space-item) var(--space-item); background: var(--bg-sunken); border-radius: var(--r-card); }
.dw-tt-state { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); letter-spacing: .08em; }
.dw-tt-time { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 500; letter-spacing: .02em; margin: var(--space-tight) 0 var(--space-item); }
.dw-tt-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-inline); flex-wrap: wrap; }
.dw-tt-btn { display: inline-flex; align-items: center; gap: var(--space-inline); border: none; background: var(--accent); color: var(--accent-fg); font-size: var(--t-label-size); font-weight: 600; padding: var(--space-inline) var(--space-group); border-radius: var(--r-control); cursor: pointer; transition: filter .12s, background .12s; font-family: inherit; }
.dw-tt-btn:hover { filter: brightness(1.06); }
.dw-tt-btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--border); }
.dw-tt-btn.ghost:hover { background: var(--bg-hover); color: var(--ink); filter: none; }
.dw-tt-btn.soft { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-700, var(--accent)); }
.dw-tt-prev { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); margin: 0 -4px; border: none; border-radius: var(--r-control); background: transparent; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: background .12s; }
.dw-tt-prev:hover { background: var(--bg-hover); }
.dw-tt-prev-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: transparent; color: var(--ink-3); }
.dw-tt-prev:hover .dw-tt-prev-ic { color: var(--accent-700, var(--accent)); }
.dw-tt-prev-n { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.dw-tt-prev-t { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.dw-icon-btn { width: 28px; height: 28px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.dw-icon-btn:hover { background: var(--bg-hover); color: var(--ink); }

/* ============================================================
   Compact Tasks header
   ============================================================ */
.tasks-head { display: flex; align-items: center; gap: var(--space-item); margin-bottom: 20px; flex-wrap: wrap; }
.th-oneline { margin-bottom: 20px; }
/* generic page H1 title (inventory etc.) — consistent Inter treatment */
.th-title { font-family: var(--font-title); font-size: var(--t-title-size); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin: 0; line-height: 1.12; }
.th-sub { color: var(--ink-3); font-size: var(--t-caption-size); margin: 2px 0 0; }
.tasks-head .th-title { font-family: var(--font-title); font-size: var(--t-title-size); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin: 0; line-height: 1.12; }
.tasks-head .th-sub { color: var(--ink-3); font-size: var(--t-caption-size); margin: 2px 0 0; }
.th-actions { display: flex; align-items: center; gap: var(--space-tight); }
/* ---- Compact page-header actions — applies to every PageHead action row.
   Buttons sit shorter/tighter so headers read clean; icon-only buttons (a .btn
   whose only child is an svg/icon) collapse to a neat square with their title
   attribute as the tooltip. ---- */
.ph-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-inline); margin-left: auto; }
.ph-actions .btn, .tasks-head .th-actions .btn { height: 34px; padding: 0 var(--space-item); font-size: var(--t-label-size); border-radius: var(--r-control); gap: var(--space-tight); }
.ph-actions > .btn.primary { padding-inline: 10px; gap: var(--space-tight); }
.ph-actions .btn svg, .ph-actions .btn .icn, .tasks-head .th-actions .btn svg, .tasks-head .th-actions .btn .icn { width: 15px; height: 15px; }
.ph-actions .btn.icon, .ph-actions .btn.compact-ic, .tasks-head .th-actions .btn.icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
.ph-actions .menu-anchor > .btn { height: 34px; }
@media (max-width: 760px){ .ph-actions, .tasks-head .th-actions { gap: var(--space-tight); } .ph-actions .btn, .tasks-head .th-actions .btn { height: 32px; padding: 0 var(--space-inline); font-size: var(--t-caption-size); } .ph-actions > .btn.primary { padding-inline: 9px; } }
.th-mine-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-inline) 0 var(--space-item); border: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.th-mine-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.th-mine-chip .icn:last-child { opacity: .7; }
.th-icon { width: 34px; height: 34px; border-radius: var(--r-control); border: none; background: transparent; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; transition: background .14s, color .14s; }
.th-icon:hover { background: var(--bg-hover); color: var(--ink); }
.th-icon.on { background: var(--accent-soft); color: var(--accent); }
.th-div { width: 1px; height: 22px; background: var(--border); margin: 0 var(--space-tight); flex-shrink: 0; }
.th-life { display: inline-flex; align-items: center; gap: var(--space-inline); height: 34px; padding: 0 var(--space-item); border-radius: var(--r-control); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: border-color .14s, background .14s; }
.th-life:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.th-life .icn:first-child { color: var(--ink-3); }
.th-life-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--t-micro-size); font-weight: 700; }
.th-seg { flex-shrink: 0; }
.th-life-trash { display: inline-flex; align-items: center; gap: var(--space-tight); height: 18px; padding: 0 var(--space-tight) 0 var(--space-tight); border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 14%, transparent); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 600; }
.th-life-trash .icn { color: var(--ink-4); }
/* On Tasks the trash pip is a shortcut into the Trash scope, not decoration. */
button.th-life > .th-life-trash { border: none; cursor: pointer; font: inherit; font-size: var(--t-micro-size); font-weight: 600; transition: background .14s, color .14s; }
button.th-life > .th-life-trash:hover { background: color-mix(in srgb, var(--ink-4) 24%, transparent); color: var(--ink-2); }

/* Tasks > Suggested work. A scan-friendly review list, not another inbox and
   not a stack of bordered cards. */
.sw-view { min-width: 0; }
.sw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-block); }
.sw-head h2 { margin: 0 0 var(--space-tight); font: var(--t-title); color: var(--ink); }
.sw-head p { margin: 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: var(--t-caption-line); }
.sw-filter { flex: none; }
.sw-list { border-top: 1px solid var(--border-subtle); }
.sw-card { padding: var(--space-block) 0; border-bottom: 1px solid var(--border-subtle); min-width: 0; }
.sw-source-line { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; margin-bottom: var(--space-inline); }
.sw-source { display: inline-flex; align-items: center; gap: var(--space-tight); color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; }
.sw-source .icn { color: var(--accent); }
.sw-time { margin-left: auto; color: var(--ink-4); font-size: var(--t-caption-size); }
.sw-more { width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3); cursor: pointer; }
.sw-more:hover { background: var(--bg-hover); color: var(--ink); }
.sw-title { margin: 0; color: var(--ink); font-size: var(--t-title-size); line-height: var(--t-title-line); font-weight: 650; }
.sw-excerpt { max-width: 760px; margin: var(--space-inline) 0 0; color: var(--ink-2); font-size: var(--t-body-size); line-height: var(--t-body-line); }
.sw-meta { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-item); color: var(--ink-3); font-size: var(--t-caption-size); }
.sw-meta span + span::before { content: '·'; margin-right: var(--space-inline); color: var(--ink-4); }
.sw-match { max-width: 760px; margin-top: var(--space-group); padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.sw-match-kicker, .sw-picker-label { margin-bottom: var(--space-inline); color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sw-match-task, .sw-pick-row { width: 100%; display: flex; align-items: center; gap: var(--space-item); min-width: 0; padding: var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.sw-match-task:hover, .sw-pick-row:hover { background: var(--bg-hover); }
.sw-match-name, .sw-pick-name { display: block; font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.sw-match-meta, .sw-pick-meta { display: block; margin-top: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.sw-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-group); }
.sw-text-action { height: var(--control-h-sm); padding: 0 var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; }
.sw-text-action:hover { background: var(--bg-hover); color: var(--ink); }
.sw-open-email { margin-left: auto; }
.sw-empty { display: grid; justify-items: center; max-width: 520px; margin: var(--space-page) auto; padding: var(--space-section) var(--space-block); text-align: center; }
.sw-empty > .icn { color: var(--accent); margin-bottom: var(--space-group); }
.sw-empty h3 { margin: 0 0 var(--space-inline); font: var(--t-title); color: var(--ink); }
.sw-empty p { margin: 0; color: var(--ink-2); }
.sw-empty span { margin-top: var(--space-tight); color: var(--ink-4); font-size: var(--t-caption-size); }
.sw-filter-empty { padding: var(--space-section) 0; color: var(--ink-3); font-size: var(--t-caption-size); text-align: center; border-top: 1px solid var(--border-subtle); }
.sw-picker { min-width: 0; }
.sw-picker-search { height: var(--control-h); display: flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); color: var(--ink-3); }
.sw-picker-search:focus-within { border-color: var(--accent); }
.sw-picker-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font: inherit; }
.sw-picker-sec { margin-top: var(--space-block); }
.sw-pick-row { border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.sw-pick-row:last-child { border-bottom: none; }
.sw-picker-empty { margin: 0; padding: var(--space-group) var(--space-inline); color: var(--ink-3); font-size: var(--t-caption-size); }

@media (max-width: 640px) {
  .sw-head { align-items: stretch; flex-direction: column; }
  .sw-filter { align-self: flex-start; max-width: 100%; overflow-x: auto; }
  .sw-card { padding: var(--space-group) 0; }
  .sw-actions .btn, .sw-text-action, .sw-more { min-height: 44px; }
  .sw-more { min-width: 44px; }
  .sw-open-email { margin-left: 0; }
}

/* ---- The one Filter control ------------------------------------------------
   A labelled button rather than a bare glyph: it is the only filtering entry
   point on the page now, so it has to name itself. The count is dimensions
   narrowed, so it reads as "how much am I hiding". ---- */
.th-filter { display: inline-flex; align-items: center; gap: var(--space-tight); height: 34px; padding: 0 var(--space-item); border-radius: var(--r-control); border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.th-filter:hover { background: var(--bg-hover); color: var(--ink); }
.th-filter .icn { color: var(--ink-3); }
.th-filter.on { background: var(--accent-soft); color: var(--accent); }
.th-filter.on .icn { color: var(--accent); }
.th-filter-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: var(--t-micro-size); font-weight: 700; }
.th-clear-completed { display:inline-flex; align-items:center; gap:var(--space-tight); height:34px; padding:0 var(--space-item); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-label-size); font-weight:600; cursor:pointer; }
.th-clear-completed:hover { background:var(--bg-hover); color:var(--ink); }
.th-clear-completed > span { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 var(--space-tight); border-radius:999px; background:color-mix(in srgb,var(--c-olive) 16%,transparent); color:var(--c-olive); font-size:var(--t-micro-size); }
.task-draft-mark { display:inline-flex; align-items:center; gap:var(--sp-optical); width:max-content; color:var(--ink-3); font-size:var(--t-micro-size); font-weight:600; line-height:1; }

/* ---- Filter panel (hosted inside window.Menu via a `render` row) -----------
   .menu-flush removes the menu's own row padding so the panel owns its layout
   and can run its sticky header edge to edge. Structure here is hairlines and
   small-caps labels, not nested boxes. ---- */
.menu.menu-flush .menu-scroll { padding: 0; }
.menu.menu-flush .menu-custom { padding: 0; }
.tfil { display: flex; flex-direction: column; min-height: 0; }
.tfil-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-inline); background: var(--surface); border-bottom: 1px solid var(--border-subtle); }
.tfil-title { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.tfil-clear { border: none; background: none; padding: 0; font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); cursor: pointer; }
.tfil-clear:hover { text-decoration: underline; }
/* On-page echo of the panel's sentence. Free text in the vertical rhythm, not a
   boxed banner — it is an explanation, not an alert, and it only exists while a
   filter is on. */
.tfil-active { margin: 0 0 var(--space-group); font-size: var(--t-caption-size); line-height: 1.45; color: var(--ink-3); }
.tfil-active-clear { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.tfil-active-clear:hover { text-decoration: underline; }
/* Carries the AND/OR logic the chips can't show. Sits directly under the sticky
   header so it reads as a caption on the whole panel, not on the first section. */
.tfil-summary { margin: 0; padding: var(--space-inline) var(--space-item); font-size: var(--t-caption-size); line-height: 1.45; color: var(--ink-3); background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); }
.tfil-body { padding: var(--space-item); display: flex; flex-direction: column; gap: var(--space-group); }
.tfil-sec { display: flex; flex-direction: column; gap: var(--space-inline); }
.tfil-lbl { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.tfil-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.tfil-chip { display: inline-flex; align-items: center; gap: var(--space-tight); max-width: 100%; height: 26px; padding: 0 var(--space-inline); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.tfil-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.tfil-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-700); }
.tfil-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tfil-people { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.tfil-person { border: none; background: none; padding: 0; border-radius: 999px; cursor: pointer; line-height: 0; opacity: .55; box-shadow: 0 0 0 2px transparent; transition: opacity .12s, box-shadow .12s; }
.tfil-person:hover { opacity: .85; }
.tfil-person.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.tfil-rule { height: 1px; background: var(--border-subtle); margin: var(--space-tight) 0; }

/* The Trash count is conveyed by its glyph and number, without an icon tile. */
.projects-page .th-life-trash { padding-inline: 2px; background: transparent; }

/* Icon-only Projects header tools stay bare in every state. Active filters use
   color plus a quiet baseline, keeping the state legible without an icon tile. */
.projects-page .th-icon,
.projects-page .th-icon:hover,
.projects-page .th-icon.on { background: transparent; }
.projects-page .th-icon.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

/* ============================================================
   Inline expandable subtasks (list / kanban / drawer)
   ============================================================ */
.subin { padding: var(--space-tight) var(--space-tight) var(--space-tight); display: flex; flex-direction: column; gap: 1px; }
.subin-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: default; transition: background .12s; }
.subin-row:hover { background: var(--bg-hover); }
.subin-title { appearance: none; border: none; background: none; padding: 0; margin: 0; text-align: left; font: inherit; font-size: var(--t-label-size); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; color: inherit; cursor: text; border-radius: 4px; }
.subin-title:hover { color: var(--ink); }
.subin-title-edit { flex: 1; min-width: 120px; max-width: 420px; height: 28px; border: 1px solid var(--accent); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-label-size); font-weight: 500; padding: 0 var(--space-inline); outline: none; box-shadow: none; }
.subin-desc { font-size: var(--t-caption-size); color: var(--ink-3); flex: 1; min-width: 0; }
.subin-status { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); white-space: nowrap; }
.subin-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.subin-go { width: 22px; height: 22px; flex-shrink: 0; border: none; background: transparent; border-radius: 6px; color: var(--ink-4); opacity: 0; display: grid; place-items: center; cursor: pointer; transition: opacity .12s, background .12s, color .12s; }
.subin-row:hover .subin-go { opacity: 1; }
.subin-go:hover { background: var(--bg-hover); color: var(--ink-2); }
.subin-addrow { display: flex; align-items: center; gap: var(--space-inline); margin: var(--space-tight) 0 0 var(--space-inline); padding: var(--space-tight) var(--space-tight); border-radius: var(--r-control); }
.subin-add-ic { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink-4); }
.subin-add-input { flex: 1; min-width: 0; height: 28px; border: none; background: transparent; font: inherit; font-size: var(--t-caption-size); color: var(--ink); outline: none; box-shadow: none; }
.subin-add-input::placeholder { color: var(--ink-4); }
.subin-add-btn { border: none; background: var(--accent); color: var(--accent-fg, #fff); font: inherit; font-size: var(--t-caption-size); font-weight: 650; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); cursor: pointer; flex-shrink: 0; }
.subin-add { display: inline-flex; align-items: center; gap: var(--space-tight); align-self: flex-start; margin: var(--space-tight) 0 0 var(--space-inline); padding: var(--space-tight) var(--space-inline); border: none; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 500; border-radius: var(--r-control); cursor: pointer; }
.subin-add:hover { background: var(--bg-hover); color: var(--accent); }
.subin.compact .subin-row { padding: var(--space-tight) var(--space-inline); gap: var(--space-inline); }
/* Inside a board card the row is ~150px wide, and .subin-title is nowrap with
   no flex basis, so a `.grow` spacer beside it took every spare pixel and the
   title ellipsised to three characters. In compact the title IS the row: it
   takes the slack and the spacer stands down. */
.subin.compact .subin-title { flex: 1 1 auto; min-width: 0; max-width: none; }
.subin.compact .subin-row > .grow { display: none; }
/* .subin-go is opacity-0 until row hover, so in a compact row it was 30px of
   permanently blank layout stealing from the title. Float it over the row's
   right edge instead: same affordance, same hover reveal, no reserved space. */
.subin.compact .subin-row { position: relative; }
.subin.compact .subin-go { position: absolute; right: var(--space-tight); top: 50%; transform: translateY(-50%); background: var(--surface); box-shadow: -6px 0 6px -4px var(--surface); }
.subin.compact .subin-row:hover .subin-go { background: var(--bg-hover); box-shadow: -6px 0 6px -2px var(--bg-hover); }
.subin.compact .subin-title { font-size: var(--t-caption-size); }
.subin.compact .subin-addrow { margin-left: var(--space-tight); }
.tcheck.sm { width: 17px; height: 17px; border-radius: 5px; }
.tcheck.sm svg { width: 10px; height: 10px; transform: translateY(-0.5px); }
/* expand caret on rows/cards */
.subt-caret { width: 22px; height: 22px; border: none; background: transparent; border-radius: 6px; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; transition: background .12s, transform .16s, color .12s; flex-shrink: 0; }
.subt-caret:hover { background: var(--bg-hover); color: var(--ink-2); }
.subt-caret.open { transform: rotate(90deg); color: var(--accent); }
/* Hairline Budget 2026-08-29: no dashed separator — the indent + spacing says "inside". */
.trow-subs { grid-column: 1 / -1; margin: 2px 0 var(--space-tight); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-section); }
.kbn-subs { margin-top: var(--space-inline); padding-top: var(--space-inline); }
.kbn-subbtn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 500; cursor: pointer; padding: 2px var(--space-tight); border-radius: 6px; }
.kbn-subbtn:hover { background: var(--bg-hover); color: var(--ink-2); }
.kbn-subcaret { transition: transform .16s; }
.kbn-subcaret.open { transform: rotate(180deg); }

/* List complete-toggle — a clean solid circle (2026-08-29: dashed read as an
   unfinished/placeholder affordance, not a control; solid quiet ring is the
   Things-style complete toggle). */
.tcheck.tcheck-todo { border-radius: 50%; border: 1.6px solid var(--border-strong); background: transparent; }
.tcheck.tcheck-todo:hover { border-color: var(--accent); }
.tcheck.tcheck-todo.on { background: var(--accent); border-color: var(--accent); }
/* Subtask completion ring. Same round control as the task's own circle, one
   step down in size and weight, so the two read as a hierarchy at a glance:
   the big ring completes the task, the small ring completes a step inside it.
   Subtasks used to carry the SQUARE .tcheck, which is the select-checkbox
   shape (.trow-selchk) — two different meanings sharing one silhouette,
   stacked four rows deep directly under the task that owns them. */
.tcheck.tcheck-sub { width: 14px; height: 14px; border-width: 1.4px; }
.tcheck.tcheck-sub svg { width: 8px; height: 8px; }
.tcheck.tcheck-sub svg path { stroke-width: 2.6; }

/* prevent text selection while dragging anything */
body.is-dragging, body.is-dragging * { user-select: none !important; cursor: grabbing !important; }
body.is-dragging ::selection { background: transparent !important; color: inherit !important; }
body.is-dragging ::-moz-selection { background: transparent !important; color: inherit !important; }

/* ── Global text-selection policy ──
   Disable native selection on app chrome and non-content surfaces (nav, toolbars,
   menus, buttons, cards-as-buttons), then re-enable it intentionally on genuine
   content the user needs to copy. Keeps drags from flakily selecting chrome. */
.sidebar, .topbar, .ws-tabbar, .menu, .menu-item, .acct-menu, .tb-search,
.sb-body, .sb-item, .seg, .tabs, .pagehead-actions, button, .btn,
.fx-tree, .fx-seg, .fx-segview, .dw-sched-tabs, .rp-roles, .oc-bar,
[role="button"], [role="tab"], [role="menuitem"] {
  -webkit-user-select: none; user-select: none;
}
/* content surfaces — selection is opt-in here and contained to the element */
input, textarea, select, [contenteditable="true"], [contenteditable="true"] *,
.selectable, .doc-body, .doc-block, .dblk, .nt-body, .msg-body, .msg-text,
.em-body, .mail-body, .em-msg-body, .tdw-desc, .cmt-body, .comment-body,
code, pre, .mono, .copyable, .id-text {
  -webkit-user-select: text; user-select: text; cursor: auto;
}

/* list row state markers */
.trow-paused, .trow-overdue { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: 1px var(--space-inline); border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.trow-paused { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); }
.trow-overdue { color: var(--st-blocked); background: var(--st-blocked-soft); }
.due-overdue { color: var(--st-blocked) !important; font-weight: 600; }
.due-today { color: var(--c-clay) !important; font-weight: 600; }
.due-soon { color: var(--c-gold) !important; font-weight: 600; }
.due-later { color: var(--ink-3); }

/* ============================================================
   Subtask detail — full page + activity rail
   ============================================================ */
.main-col.detail-open { grid-template-rows: 1fr; }
.sd-wrap { display: grid; grid-template-columns: 1fr 384px; height: 100%; min-height: 0; background: var(--bg); }
.sd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sd-top { display: flex; align-items: center; height: 58px; padding: 0 var(--space-block); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sd-scroll { flex: 1; overflow-y: auto; padding: 28px var(--space-page) 96px; min-height: 0; }
.sd-eyebrow { font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 500; margin-bottom: var(--space-inline); }
.sd-parentlink { border: none; background: none; padding: 0; color: var(--ink-2); font-weight: 600; cursor: pointer; font-size: var(--t-caption-size); }
.sd-parentlink:hover { color: var(--accent); text-decoration: underline; }
.sd-title { width: 100%; border: none; background: transparent; outline: none; font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 460; letter-spacing: -0.02em; color: var(--ink); padding: 0; margin: 0 0 var(--space-group); }
.sd-title::placeholder { color: var(--ink-4); }
.sd-pillrow { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; margin-bottom: 20px; }
.sd-pill { display: inline-flex; align-items: center; gap: var(--space-inline); height: 36px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--t-label-size); color: var(--ink); transition: border-color .14s, background .14s; }
.sd-pill:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.sd-pill.static { cursor: default; }
.sd-pill.static:hover { border-color: var(--border); background: var(--surface); }
.sd-metarow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-item); padding: var(--space-group) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-tight); }
.sd-metacol-k { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-4); font-weight: 500; margin-bottom: var(--space-inline); }
.sd-metacol-v { font-size: var(--t-label-size); }
.sd-tabs { margin: var(--space-inline) 0 20px; }
.sd-overview { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: start; }
@media (max-width: 1320px){ .sd-overview { grid-template-columns: 1fr; gap: 20px; } }
.sd-desc { width: 100%; border: 1px solid transparent; border-radius: var(--r-control); background: transparent; outline: none; resize: vertical; font: inherit; font-size: var(--t-label-size); line-height: 1.6; color: var(--ink-2); padding: var(--space-inline) var(--space-inline); margin: 0 -8px; transition: background .12s, border-color .12s; }
.sd-desc:hover { background: var(--bg-hover); }
.sd-desc:focus { background: var(--surface); border-color: var(--border-strong); }
.sd-ov-side { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-inline) var(--space-item); }
.sd-prop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-inline) 0; font-size: var(--t-label-size); border-bottom: 1px solid var(--border-subtle); }
.sd-prop:last-child { border-bottom: none; }
.sd-prop-k { display: inline-flex; align-items: center; gap: var(--space-inline); color: var(--ink-3); }
.sd-prop-v { color: var(--ink); font-size: var(--t-caption-size); }
.sd-prop-link { border: none; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: var(--t-caption-size); cursor: pointer; }
.sd-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-item); }
.sd-file { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-item); display: flex; flex-direction: column; gap: var(--space-tight); }
.sd-file-ic { width: 36px; height: 36px; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); display: grid; place-items: center; margin-bottom: var(--space-tight); }
.sd-file-n { font-size: var(--t-caption-size); font-weight: 600; }
.sd-file.add { align-items: center; justify-content: center; flex-direction: column; gap: var(--space-inline); border-style: dashed; color: var(--ink-3); cursor: pointer; min-height: 96px; }
.sd-file.add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sd-cmts { display: flex; flex-direction: column; }

.sd-rail { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--surface); }
.sd-rail-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-group) var(--space-group) var(--space-item); flex-shrink: 0; }
.sd-rail-hd h3 { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 480; margin: 0; }
.sd-rail-filters { display: flex; flex-wrap: wrap; gap: var(--space-tight); padding: 0 var(--space-group) var(--space-item); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.sd-chip { height: 28px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sd-chip:hover { border-color: var(--border-strong); }
.sd-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sd-rail-scroll { flex: 1; overflow-y: auto; padding: var(--space-inline) var(--space-group); min-height: 0; }
.sd-act { display: flex; gap: var(--space-item); align-items: flex-start; padding: var(--space-item) 0; }
.sd-act-hd { display: flex; align-items: baseline; gap: var(--space-inline); flex-wrap: wrap; font-size: var(--t-label-size); }
.sd-act-hd b { font-weight: 600; white-space: nowrap; }
.sd-act-hd .muted { font-size: var(--t-micro-size); color: var(--ink-4); white-space: nowrap; }
.sd-act-txt { font-size: var(--t-label-size); color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.sd-act-files { display: flex; flex-direction: column; gap: var(--space-inline); margin-top: var(--space-inline); }
.sd-filechip { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-2); }
.sd-filechip-ic { width: 30px; height: 30px; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.sd-filechip-n { font-size: var(--t-caption-size); font-weight: 600; }
.sd-act-space { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-2); }
.sd-act-space .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sd-composer { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border); flex-shrink: 0; }
.sd-composer input { flex: 1; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface-2); padding: 0 var(--space-group); outline: none; font-size: var(--t-label-size); color: var(--ink); }
.sd-composer input:focus { border-color: var(--accent); }
@media (max-width: 1080px){ .sd-wrap { grid-template-columns: 1fr; } .sd-rail { display: none; } }

/* people picker */
.pp-scrim { position: fixed; inset: 0; z-index: 999; }
.pp-anchor-scrim { z-index: 1198; }
.pp { width: 300px; background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-inline); }
.pp-pop { position: absolute; z-index: 1002; top: calc(100% + 6px); left: 0; animation: pop-menu var(--dur-over) var(--ease); }
.pp-pop-fixed {
  position: fixed; z-index: 1199;
  top: auto; left: auto;
  animation: pop-menu var(--dur-over) var(--ease);
}
.pp-search { display: flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-inline); height: 36px; background: var(--bg-sunken); border-radius: var(--r-sm); margin-bottom: var(--space-tight); }
.pp-search input { flex: 1; border: none; background: transparent; outline: none; font-size: var(--t-label-size); color: var(--ink); }
.pp-list { max-height: 300px; overflow-y: auto; }
.pp-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-tight) var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .12s; }
.pp-row:hover { background: var(--bg-hover); }
.pp-check { width: 18px; height: 18px; border-radius: 6px; background: var(--bg-active); display: grid; place-items: center; color: var(--accent-fg); flex-shrink: 0; transition: background .12s; }
.pp-check.radio { border-radius: 50%; }
.pp-check.on { background: var(--accent); }
.pp-allic { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.pp-name { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sub { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }
.pp-load { flex-shrink: 0; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); min-width: 20px; height: 20px; border-radius: 99px; display: inline-grid; place-items: center; padding: 0 var(--space-tight); }
.pp-load.over { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }
.pp-off { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .02em; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: 2px var(--space-inline); border-radius: 99px; }
.rec-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.rec-row:last-child { border-bottom: none; }
.rec-ic { width: 32px; height: 32px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.rec-cad { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); cursor: pointer; flex-shrink: 0; }
.rec-cad:hover { border-color: var(--accent); color: var(--accent); }
.dw-mw-stats { display: grid; grid-template-columns: repeat(4,minmax(0, 1fr)); gap: var(--space-inline); }
.dw-mw-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-inline) var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.dw-mw-stat:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.dw-mw-stat b { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; line-height: 1; }
.dw-mw-stat span { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 500; }
.dw-mw-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.dw-mw-row:hover { background: var(--bg-hover); }
.dw-mw-row.tracking { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dw-mw-due { font-size: var(--t-micro-size); font-weight: 600; flex-shrink: 0; }
.dw-mw-bl { color: var(--c-clay); display: inline-grid; place-items: center; flex-shrink: 0; }
.dw-mw-timer { width: 24px; height: 24px; border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink-3); background: transparent; flex-shrink: 0; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.dw-mw-row:hover .dw-mw-timer { opacity: 1; }
.dw-mw-timer:hover { color: var(--accent); background: var(--bg-hover); }
.dw-mw-timer.on, .dw-mw-timer.live { opacity: 1; color: var(--accent-700, var(--accent)); }
.dw-mw-timer.live { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dw-qa { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); transition: border-color .12s; }
.dw-qa:focus-within { border-color: var(--accent); }
.dw-qa-input { flex: 1; border: none; background: none; outline: none; font-size: var(--t-label-size); color: var(--ink); font-family: inherit; }
.dw-qa-btn { flex-shrink: 0; border: none; background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); cursor: pointer; }
.dw-qa-dest { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-inline); padding-left: 2px; }
.dw-qa-wrap .create-summary { margin-top: var(--space-tight); padding-left: 2px; }
.dw-qa-pill { display: inline-flex; align-items: center; gap: var(--space-tight); max-width: 170px; padding: var(--space-tight) var(--space-inline); border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-2); cursor: pointer; transition: border-color .12s, color .12s; }
.dw-qa-pill:hover { border-color: var(--border-strong); color: var(--ink); }
.dw-qa-pill.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dw-qa-pill .icn:last-child { color: var(--ink-4); }
.dw-qa-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dw-na-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; }
.dw-na-row:hover { background: var(--bg-hover); }
/* dashboard Needs-Attention reuses the AttentionBand item style, stacked full-width */
.dw-attn-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--space-tight); padding: 0; }
.dw-attn-list .attn-item { max-width: none; width: 100%; }
.dw-attn-list .attn-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-attn-list .attn-rsn { margin-left: auto; }
.dw-stor { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dw-stor-hero { display: flex; align-items: baseline; gap: var(--space-tight); font-size: var(--t-label-size); }
.dw-stor-hero b { font-size: var(--t-heading-size); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.dw-stor-meter { height: 4px; border-radius: 999px; background: var(--border-subtle); margin-top: var(--space-inline); overflow: hidden; }
.dw-stor-meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); }
.dw-stor.lvl-warn .dw-stor-meter i { background: var(--c-gold); }
.dw-stor.lvl-full .dw-stor-meter i { background: var(--c-clay); }
.dw-stor-sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-inline); margin-top: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); }
.dw-stor-warn { color: var(--c-gold); font-weight: 650; }
.dw-stor-full { color: var(--c-clay); font-weight: 650; }
.dw-stor-plan { border: none; background: none; padding: 0; font: inherit; font-size: var(--t-caption-size); color: var(--ink-3); cursor: pointer; }
.dw-stor-plan:hover { color: var(--ink); }
.dw-stor .fx-reclaim-strip.rail { margin-top: var(--space-inline); }
.dw-stor-fallback { margin-top: var(--space-inline); border: none; background: none; padding: 0; font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--c-clay); cursor: pointer; text-align: left; }
.dw-blk-row { padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); background: color-mix(in srgb, var(--c-clay) 5%, transparent); }
.dw-blk-row + .dw-blk-row { margin-top: 2px; }
/* Team standup: no tint fill. Separate people with hairline dividers. */
.dw-standup { display: flex; flex-direction: column; }
.dw-standup-row { padding: var(--space-inline) 0; background: transparent; }
.dw-standup-row + .dw-standup-row { border-top: 1px solid var(--border-subtle); }
.dw-blk-task { display: flex; align-items: center; gap: var(--space-inline); width: 100%; border: none; background: none; padding: 0; cursor: pointer; }
.dw-blk-task .grow { font-size: var(--t-label-size); font-weight: 600; text-align: left; color: var(--ink); }
.dw-blk-task:hover .grow { color: var(--accent); }
.dw-blk-by { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-tight); padding-left: var(--space-group); flex-wrap: wrap; color: var(--c-clay); }
.dw-blk-bylbl { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.dw-blk-chip { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 2px var(--space-inline); cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .12s; }
.dw-blk-chip:hover { border-color: var(--c-clay); color: var(--c-clay); }
.dw-blk-more { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); }
.dw-blk-empty { text-align: center; padding: 20px var(--space-inline); color: var(--st-done); }
.dw-blk-empty .muted { color: var(--ink-3); }
.dw-na-rsn { font-size: var(--t-micro-size); font-weight: 600; flex-shrink: 0; }
.dw-na-clear { text-align: center; padding: var(--space-block) var(--space-inline); }
.dw-board-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; transition: background .12s; text-align: left; }
.dw-board-row:hover { background: var(--bg-hover); }
.dw-board-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.dw-board-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dw-board-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.dw-board-s { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 500; }
.dw-board-new { display: flex; align-items: center; justify-content: center; gap: var(--space-tight); width: 100%; margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: none; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.dw-board-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cl-health-flag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 13%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; margin-bottom: var(--space-item); }
.cl-log-compose { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--space-item); }
.cl-log-item { display: flex; align-items: flex-start; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.cl-log-item:last-child { border-bottom: none; }
.cl-log-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.cl-stmt {
  background: transparent; border: none; border-radius: 0;
  padding: var(--space-tight) 0 var(--space-item); margin-bottom: var(--space-tight);
  border-bottom: 1px solid var(--border-subtle);
}
.cl-stmt-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-tight) 0; font-size: var(--t-label-size); color: var(--ink-2); }
.cl-stmt-row.over { color: var(--c-clay); }
.cl-stmt-row.over span { display: inline-flex; align-items: center; gap: var(--space-tight); }
.cl-followup-flag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; margin-bottom: var(--space-item); }
/* per-client feedback chip — borderless tinted pill, clickable to the client's files */
.cl-feedback-flag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 13%, transparent); padding: var(--space-tight) var(--space-inline); border-radius: 999px; margin-bottom: var(--space-item); border: none; cursor: pointer; transition: background .12s; }
.cl-feedback-flag:hover { background: color-mix(in srgb, var(--c-clay) 22%, transparent); }
.cl-feedback-flag.changes { color: var(--st-blocked); background: color-mix(in srgb, var(--st-blocked) 13%, transparent); }
.cl-feedback-flag.changes:hover { background: color-mix(in srgb, var(--st-blocked) 22%, transparent); }
/* client drawer feedback callout — sunken strip, bare glyph, NO left accent bar */
.cl-fb-callout {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border-radius: 0; border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; cursor: pointer; transition: background .12s;
}
.cl-fb-callout:hover { background: var(--bg-hover); box-shadow: none; transform: none; }
.cl-fb-callout.changes { border-color: var(--border-subtle); background: transparent; }
.cl-fb-ic {
  width: auto; height: auto; border-radius: 0; flex-shrink: 0;
  display: inline-flex; place-items: center; color: var(--c-clay); background: none;
}
.cl-fb-callout.changes .cl-fb-ic { color: var(--st-blocked); background: none; }
.cl-fb-t { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.cl-fb-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
/* client drawer → back-link to the pipeline deal */
.cd-origin {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border-radius: 0; border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; cursor: pointer; transition: background .12s;
}
.cd-origin:hover { background: var(--bg-hover); box-shadow: none; transform: none; }
.cd-origin-ic {
  width: auto; height: auto; border-radius: 0; flex-shrink: 0;
  display: inline-flex; place-items: center; color: #4d7a3e; background: none;
}
/* client drawer list rows — borderless hairline */
.cd-list-row {
  display: flex; align-items: center; gap: var(--space-item);
  padding: var(--space-item) var(--space-tight); cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .12s;
}
.cd-list-row:last-child { border-bottom: none; }
.cd-list-row:hover { background: var(--bg-hover); }
.cd-list-row.between { justify-content: space-between; }
.cd-list-t { font-weight: 600; font-size: var(--t-label-size); color: var(--ink); }
.cd-list-t.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--t-caption-size); }
.cd-list-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.cd-list-amt { font-size: var(--t-label-size); font-weight: 600; margin-bottom: var(--space-tight); }
.pp-group { margin-top: var(--space-tight); }
.pp-grouphd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-inline) var(--space-inline) var(--space-tight); }
.pp-guidance { margin: 0 var(--space-inline) var(--space-tight); padding: var(--space-inline); border-left: 1px solid var(--border-strong); color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.45; }
.pp-row:disabled { cursor: not-allowed; color: var(--ink-4); }
.pp-row:disabled:hover { background: transparent; }
.pp-row:disabled .pp-off { color: var(--ink-4); background: var(--bg-sunken); }
.pp-dept-dot { width: 8px; height: 8px; border-radius: 50%; }
.pp-deptall { margin-left: auto; border: none; background: none; color: var(--accent); font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-inline) var(--space-tight) 2px; margin-top: var(--space-tight); }

/* assignee field */
.af-row { display: flex; flex-wrap: wrap; gap: var(--space-tight); align-items: center; }
.af-chip { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-tight); background: var(--bg-sunken); border-radius: var(--r-pill); font-size: var(--t-caption-size); font-weight: 550; }
.af-chip .avatar { width: 22px; height: 22px; font-size: 9px; }
.af-chip.off { background: color-mix(in srgb, var(--c-gold) 13%, transparent); }
.af-offdot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 2px var(--surface); }
.af-x { width: 18px; height: 18px; border: none; background: transparent; color: var(--ink-3); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.af-x:hover { background: var(--bg-active); color: var(--ink); }
.af-add { display: inline-flex; align-items: center; gap: var(--space-tight); height: 28px; padding: 0 var(--space-item); border: 1px dashed var(--border-strong); background: transparent; border-radius: var(--r-pill); color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.af-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* invite roles — type-picker grid, bare glyphs (no filled icon tiles) */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.role-card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-item) var(--space-item) var(--space-item); border: none; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: transparent; border-radius: 0; cursor: pointer; text-align: left; box-shadow: none; transition: background .14s; }
.role-card:nth-child(2n) { border-right: none; }
.role-card:nth-last-child(-n+2) { border-bottom: none; }
.role-card:hover { background: var(--bg-hover); box-shadow: none; }
.role-card.on { background: var(--bg-active); box-shadow: none; }
.role-ic { display: inline-flex; align-items: center; color: var(--ink-2); margin-bottom: var(--space-tight); }
.role-card.on .role-ic { color: var(--ink); background: none; }
.role-name { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }

/* ───────── Pipeline ───────── */
.pl-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* forecast header — flat, borderless, hairline-divided (Editorial Calm) */
.pl-forecast { display: flex; align-items: center; gap: 28px; padding: 0; margin: 0; background: none; border: none; border-radius: 0; }
.pl-fc-eyebrow { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-tight); }
.pl-fc-nums { display: flex; align-items: baseline; gap: var(--space-inline); font-family: var(--font-serif); }
.pl-fc-committed { font-size: var(--t-title-size); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pl-fc-committed em, .pl-fc-probable em { font-size: var(--t-label-size); font-style: normal; font-weight: 600; color: var(--ink-4); font-family: var(--font-sans); }
.pl-fc-plus { font-size: var(--t-heading-size); color: var(--ink-4); }
.pl-fc-probable { font-size: var(--t-title-size); font-weight: 600; color: var(--ink-2); }
.pl-fc-stats { display: flex; gap: 0; margin-left: auto; align-self: stretch; }
.pl-fc-stat { display: flex; flex-direction: column; gap: var(--space-tight); justify-content: center; padding: 2px 20px; }
.pl-fc-stat + .pl-fc-stat { border-left: 1px solid var(--border-subtle); }
.pl-fc-v { font-size: var(--t-heading-size); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pl-fc-v.warn { color: var(--ink); }
.pl-fc-l { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); }
/* airy transparent columns; cards are the objects */
.pl-board { flex: 1; min-height: 0; display: flex; gap: var(--space-inline); overflow-x: auto; padding: var(--space-inline) 20px 20px; align-items: stretch; }
.pl-col { flex: 0 0 264px; width: 264px; display: flex; flex-direction: column; min-height: 0; background: none; border-radius: var(--r-md); padding: 0 var(--space-tight); }
.pl-col-won, .pl-col-lost { background: none; }
.pl-col-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline) var(--space-inline); margin-bottom: var(--space-tight); flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); }
.pl-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pl-col-name { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.pl-col-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-active); padding: 1px var(--space-inline); border-radius: var(--r-modal); font-variant-numeric: tabular-nums; }
.pl-col-sum { margin-left: auto; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.pl-col-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-inline); padding: 2px var(--space-inline) var(--space-item); }
.pl-col-empty { color: var(--ink-4); font-size: var(--t-caption-size); text-align: center; padding: var(--space-group) 0; border-radius: var(--r-control); }
.pl-board.pl-dragging .pl-col-empty { border: 1.5px dashed var(--border); }
.pl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-item) var(--space-item); cursor: pointer; box-shadow: none; transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.pl-card:hover { box-shadow: none; border-color: var(--border-strong); transform: none; background: var(--bg-hover); }
.pl-card.rot { border-color: color-mix(in srgb, #b0503c 28%, var(--border)); }
.pl-card-top { display: flex; align-items: center; gap: var(--space-tight); margin-bottom: var(--space-tight); min-height: 18px; }
.pl-card-dot { display: none; } /* color dots on client labels are banned */
.pl-card-client { display: block; min-width: 0; max-width: calc(100% - 48px); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .035em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-title { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -0.012em; margin-bottom: 0; }
.pl-card-val { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 600; color: var(--ink); margin: var(--space-tight) 0 var(--space-inline); letter-spacing: -0.01em; }
.pl-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.pl-band { font-size: var(--t-micro-size); font-weight: 700; }
/* passive expected-close chip on cards */
.pl-close-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 18px; padding: 0 var(--space-tight); border-radius: 999px; font-size: var(--t-micro-size); font-weight: 700; white-space: nowrap; }
.pl-close-chip.soon { color: var(--c-clay, #c2734a); background: color-mix(in srgb, var(--c-clay,#c2734a) 13%, transparent); }
.pl-close-chip.over { color: var(--st-blocked, #b0503c); background: color-mix(in srgb, var(--st-blocked,#b0503c) 14%, transparent); }
/* converted → client chip on a deal card */
.pl-conv-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 18px; padding: 0 var(--space-inline); border-radius: 999px; font-size: var(--t-micro-size); font-weight: 700; white-space: nowrap; cursor: pointer; color: #4d7a3e; background: color-mix(in srgb, #5f8a4f 12%, transparent); transition: background .13s; }
.pl-conv-chip:hover { background: color-mix(in srgb, #5f8a4f 20%, transparent); }
/* Convert to Client call-to-action inside the deal drawer */
.pl-convert-cta {
  display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left;
  padding: var(--space-item) 0; margin-top: 2px; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; font: inherit; cursor: pointer; color: var(--ink);
  transition: background .12s;
}
.pl-convert-cta:hover { background: var(--bg-hover); border-color: var(--border-subtle); }
.pl-convert-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; flex-shrink: 0; border-radius: 0;
  background: none; color: #4d7a3e;
}
.pl-convert-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pl-convert-main b { font-size: var(--t-label-size); font-weight: 650; }
.pl-convert-main span { font-size: var(--t-micro-size); color: var(--ink-3); }
.pl-convert-cta > svg { color: var(--ink-4); flex-shrink: 0; }
/* editable value + selects in the deal drawer */
.pl-dr-editval { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: none; cursor: pointer; padding: 2px var(--space-tight); margin: -2px -4px; border-radius: var(--r-control); color: var(--ink); font: inherit; transition: background var(--dur-micro) var(--ease); }
.pl-dr-editval:hover { background: var(--bg-hover); }
.pl-dr-editval svg { color: var(--ink-4); }
.pl-dr-valedit { width: 120px; text-align: right; font-weight: 700; padding: var(--space-tight) var(--space-inline); }
.pl-dr-ownersel, .pl-dr-closesel { min-width: 0; max-width: 220px; }
.pl-dr-closehint { display: flex; align-items: center; gap: var(--space-inline); margin-top: -2px; padding: var(--space-inline) 0; border-radius: 0; font-size: var(--t-caption-size); font-weight: 600; background: none; }
.pl-dr-closehint.soon { color: var(--c-clay, #c2734a); background: none; }
.pl-dr-closehint.over { color: var(--st-blocked, #b0503c); background: none; }
.pl-rot { display: flex; align-items: flex-start; gap: var(--space-tight); margin-top: var(--space-inline); padding: var(--space-inline) var(--space-inline); background: color-mix(in srgb, #b0503c 9%, transparent); border-radius: var(--r-control); font-size: var(--t-micro-size); font-weight: 600; color: #a04a38; line-height: 1.35; cursor: pointer; }
.pl-rot:hover { background: color-mix(in srgb, #b0503c 15%, transparent); }
.pl-rot b { font-weight: 700; }
.pl-advance { display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); width: 100%; justify-content: center; padding: var(--space-inline); border: 1px solid color-mix(in srgb, #5f8a4f 40%, var(--border)); background: color-mix(in srgb, #5f8a4f 10%, transparent); color: #4d7a3e; font: inherit; font-size: var(--t-micro-size); font-weight: 700; border-radius: var(--r-control); cursor: pointer; }
.pl-advance:hover { background: color-mix(in srgb, #5f8a4f 18%, transparent); }
/* deal drawer */
.pl-dr { display: flex; flex-direction: column; gap: var(--space-item); }
.pl-dr-score { display: flex; align-items: center; gap: var(--space-item); }
.pl-dr-prob { font-size: var(--t-strong-size); font-weight: 750; }
.pl-dr-band { font-size: var(--t-caption-size); color: var(--ink-4); margin-top: 2px; line-height: 1.4; }
.pl-dr-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-label-size); color: var(--ink-3); padding-bottom: var(--space-inline); border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--ink) 7%, transparent)); }
.pl-dr-row b { color: var(--ink); font-weight: 700; }
.pl-link { border: none; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.pl-dr-rot {
  display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-item) 0;
  background: transparent; border-radius: 0;
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  color: #a04a38; font-size: var(--t-caption-size); line-height: 1.45;
}
.pl-dr-rot b { display: block; margin-bottom: 2px; }
.pl-dr-h { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.pl-dr-factors { display: flex; flex-direction: column; gap: 1px; }
.pl-dr-factor { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--ink) 6%, transparent)); font-size: var(--t-label-size); }
.pl-dr-fk { color: var(--ink-3); font-weight: 600; }
.pl-dr-fv { color: var(--ink); font-weight: 600; }
.pl-dr-fd { text-align: right; font-weight: 700; font-size: var(--t-caption-size); color: var(--ink-4); }
.pl-dr-fd.pos { color: #4d7a3e; }
.pl-dr-fd.neg { color: #b0503c; }
.pl-dr-scope { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.pl-chip { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-modal); }

/* interactive kanban: toolbar, drag, drop targets, won/lost, drawer controls */
.pl-toolbar { display: flex; align-items: center; gap: var(--space-group); padding: var(--space-group) var(--space-block); border-bottom: 1px solid var(--border-subtle); }
.pl-toolbar .pl-forecast { flex: 1; }
.pl-newbtn { flex-shrink: 0; margin: 0; }
.pl-card-grip { color: var(--ink-4); opacity: 0; cursor: grab; margin-left: -4px; transition: opacity .14s, color .14s; flex-shrink: 0; }
.pl-card:hover .pl-card-grip { opacity: .7; }
.pl-card-grip:active { cursor: grabbing; }
.pl-card { transition: box-shadow var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.pl-card.dragging { opacity: .4; transform: scale(.97); }
.pl-col { transition: background var(--dur-micro) var(--ease); }
.pl-col.over { background: var(--accent-soft); }
.pl-col-won.over { background: color-mix(in srgb, #5f8a4f 12%, transparent); }
.pl-col-lost { background: none; }
.pl-col-lost.over { background: color-mix(in srgb, #b0503c 10%, transparent); }
/* drawer: stage segmented control */
.pl-stageseg { display: flex; gap: var(--space-tight); padding: var(--space-tight); background: var(--bg-sunken); border-radius: var(--r-control); }
.pl-stageseg-b { flex: 1; padding: var(--space-inline) var(--space-tight); border: none; background: transparent; border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-3); cursor: pointer; transition: all .13s; }
.pl-stageseg-b:hover { color: var(--ink); }
.pl-stageseg-b.on { background: var(--surface); color: var(--sc, var(--accent)); box-shadow: 0 1px 3px rgba(60,40,25,.12); }
.pl-dr-outcomes { display: flex; gap: var(--space-inline); }
.pl-out { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight); padding: var(--space-inline); border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: all .13s; }
.pl-out.won { border: 1px solid color-mix(in srgb, #5f8a4f 40%, var(--border)); background: color-mix(in srgb, #5f8a4f 9%, transparent); color: #4d7a3e; }
.pl-out.won:hover { background: color-mix(in srgb, #5f8a4f 18%, transparent); }
.pl-out.lost { border: 1px solid color-mix(in srgb, #b0503c 36%, var(--border)); background: color-mix(in srgb, #b0503c 8%, transparent); color: #b0503c; }
.pl-out.lost:hover { background: color-mix(in srgb, #b0503c 16%, transparent); }
.pl-dr-closed { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) 0; border-radius: 0; font-size: var(--t-label-size); font-weight: 600; border-bottom: 1px solid var(--border-subtle); background: none; }
.pl-dr-closed.won { background: none; color: #4d7a3e; }
.pl-dr-closed.lost { background: none; color: #b0503c; }
.pl-reopen { margin-left: auto; padding: var(--space-tight) var(--space-item); border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-2); cursor: pointer; transition: all .13s; }
.pl-reopen:hover { border-color: var(--border-strong); color: var(--ink); }
.pl-dr-owner { display: inline-flex; align-items: center; gap: var(--space-tight); font-weight: 600; }
.pl-dr-hist { display: flex; flex-direction: column; gap: 2px; }
.pl-dr-hrow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) 2px; }
.pl-dr-hdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pl-dr-hstage { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.pl-dr-htime { margin-left: auto; font-size: var(--t-micro-size); color: var(--ink-4); }

/* ───────── Money overview ───────── */
.mo { display: flex; flex-direction: column; gap: var(--space-group); }
.mo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-item); }
.mo-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-group) var(--space-group); }
.mo-stat-l { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-4); margin-bottom: var(--space-inline); }
.mo-stat-v { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 600; color: var(--ink); line-height: 1; }
.mo-stat-v.warn { color: #b0503c; }
.mo-stat-v.ok { color: #4d7a3e; }
.mo-stat-sub { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); margin-top: var(--space-tight); }
.mo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-item); }
@media (max-width: 900px){ .mo-stats { grid-template-columns: 1fr 1fr; } .mo-grid { grid-template-columns: 1fr; } }
.mo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-group) var(--space-group); }
.mo-card-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 700; color: var(--ink); margin-bottom: var(--space-item); }
.mo-card-n { margin-left: auto; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); background: var(--surface-2); padding: 1px var(--space-inline); border-radius: var(--r-modal); }
.mo-aging { display: flex; flex-direction: column; gap: var(--space-item); }
.mo-ag-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: var(--space-item); }
.mo-ag-l { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.mo-ag-bar { height: 9px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.mo-ag-bar span { display: block; height: 100%; border-radius: 6px; transition: width .3s ease; }
.mo-ag-v { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); text-align: right; }
.mo-od { display: flex; flex-direction: column; gap: 2px; }
.mo-od-row { display: grid; grid-template-columns: 1fr auto 38px 30px; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); cursor: pointer; }
.mo-od-row:hover { background: var(--surface-2); }
.mo-od-client { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-od-amt { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); }
.mo-od-days { font-size: var(--t-micro-size); font-weight: 700; color: var(--c-gold); text-align: right; }
.mo-od-days.bad { color: #b0503c; }
.mo-od-remind { width: 28px; height: 28px; border: none; background: var(--surface-2); color: var(--ink-3); border-radius: var(--r-control); cursor: pointer; display: grid; place-items: center; }
.mo-od-remind:hover { background: var(--accent-soft); color: var(--accent); }
.mo-od-empty { display: flex; align-items: center; gap: var(--space-inline); padding: 20px var(--space-inline); color: #4d7a3e; font-size: var(--t-label-size); font-weight: 600; }

/* ───────── Reports — Pipeline / Win-Loss ───────── */
.rpt-kpirow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-item); }
.rpt-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-group) var(--space-group); }
.rpt-kpi-l { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-4); margin-bottom: var(--space-inline); }
.rpt-kpi-v { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; color: var(--ink); line-height: 1; }
.rpt-kpi-v.ok { color: #4d7a3e; }
.rpt-kpi-v.warn { color: #b0503c; }
.rpt-kpi-d { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); margin-top: var(--space-tight); }
.rpt-funnel { display: flex; flex-direction: column; gap: var(--space-item); }
.rpt-fn-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--space-item); }
.rpt-fn-l { font-size: var(--t-caption-size); font-weight: 700; }
.rpt-fn-bar { height: 12px; background: var(--surface-2); border-radius: var(--r-control); overflow: hidden; }
.rpt-fn-bar span { display: block; height: 100%; border-radius: var(--r-control); transition: width .3s ease; }
.rpt-fn-v { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); white-space: nowrap; }
.rpt-fn-v em { font-style: normal; font-weight: 600; color: var(--ink-4); }
.rpt-reasons { display: flex; flex-direction: column; gap: var(--space-inline); }
.rpt-reason { display: grid; grid-template-columns: 70px 1fr 24px; align-items: center; gap: var(--space-inline); }
.rpt-reason-l { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.rpt-reason-bar { height: 9px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.rpt-reason-bar span { display: block; height: 100%; border-radius: 6px; background: var(--c-clay); }
.rpt-reason-n { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); text-align: right; }
.rpt-reason-note { display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-tight); padding: var(--space-inline) var(--space-item); background: var(--accent-soft); border-radius: var(--r-control); font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); line-height: 1.4; }
.rpt-empty { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; padding: 20px 0; text-align: center; }
.role-desc { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.35; }

/* visibility */
.vis-opts { display: flex; flex-direction: column; gap: var(--space-tight); }
.vis-opt { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: none; background: var(--surface-2); border-radius: var(--r-control); color: var(--ink-2); font-size: var(--t-label-size); font-weight: 500; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .14s, background .14s, color .14s; }
.vis-opt:hover { color: var(--ink); }
.vis-opt.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.vis-opt .icn { color: var(--ink-3); }
.vis-opt.on .icn { color: var(--accent); }
.vis { display: flex; flex-direction: column; gap: var(--space-inline); }

/* ── feed post audience picker ── */
.fpost-aud { display: inline-flex; align-items: center; gap: var(--space-tight); }
.fpost-aud .icn { opacity: .7; }
.aud-modes { display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-tight); }
.aud-mode { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-item) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; cursor: pointer; text-align: left; transition: background .13s; }
.aud-mode:hover { background: var(--bg-hover); border-color: transparent; }
.aud-mode.on { border: none; background: var(--accent-soft); }
.aud-mode-ic { display: grid; place-items: center; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ink-3); flex-shrink: 0; }
.aud-mode.on .aud-mode-ic { background: transparent; color: var(--accent); }
.aud-mode-main { flex: 1; min-width: 0; }
.aud-mode-t { display: block; font-size: var(--t-body-size); font-weight: 650; color: var(--ink); }
.aud-mode-s { display: block; font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 1px; }
.aud-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: var(--accent-fg); flex-shrink: 0; }
.aud-mode.on .aud-radio { background: var(--accent); border-color: var(--accent); }
.aud-custom { margin-top: var(--space-item); border-top: 1px solid var(--border-subtle); padding-top: var(--space-item); }
.aud-allgroups { display: flex; align-items: flex-start; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border: none; border-radius: 0; cursor: pointer; margin-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.aud-allgroups input { margin-top: 2px; accent-color: var(--accent); }
.aud-allgroups b { font-size: var(--t-label-size); }
.aud-allgroups-s { display: block; font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.aud-sec { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); margin: 0 0 var(--space-inline); }
.aud-grouplist { display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-group); }
.aud-grouprow { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; border-radius: var(--r-control); background: transparent; cursor: pointer; text-align: left; transition: background .12s; }
.aud-grouprow:hover { background: var(--bg-hover); }
.aud-grouprow.on { border: none; background: var(--bg-hover); }
.aud-group-ic { display: grid; place-items: center; width: auto; height: auto; border-radius: 0; flex-shrink: 0; background: transparent !important; }
.aud-group-n { display: block; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.aud-group-meta { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 1px; }
.aud-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: var(--accent-fg); flex-shrink: 0; }
.aud-grouprow.on .aud-check { background: var(--accent); border-color: var(--accent); }
.aud-people { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.aud-person { position: relative; display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: 99px; background: var(--surface); cursor: pointer; transition: all .12s; }
.aud-person:hover { border-color: var(--border-strong); }
.aud-person.on { border-color: var(--accent); background: var(--accent-soft); }
.aud-person-n { font-size: var(--t-caption-size); font-weight: 550; max-width: 90px; }
.aud-person-check { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; border: 2px solid var(--surface); }
.aud-empty { font-size: var(--t-caption-size); color: var(--ink-3); padding: var(--space-tight) 2px var(--space-item); }
.org-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); background: var(--surface-2); }
.org-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.org-x { width: 24px; height: 24px; border: none; background: transparent; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.org-x:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.org-add { display: flex; gap: var(--space-inline); margin-top: var(--space-item); }
.org-dot-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.org-dot-btn { border: none; background: none; padding: var(--space-tight); margin: -4px; border-radius: var(--r-control); cursor: pointer; display: grid; place-items: center; transition: background .12s; }
.org-dot-btn:hover { background: var(--bg-hover); }
.org-color-pop-veil { position: fixed; inset: 0; z-index: 40; }
.org-color-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 41; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-tight); padding: var(--space-inline); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); width: 168px; }
.org-color-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.org-color-sw:hover { transform: scale(1.12); }
.org-color-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.org-name-edit { cursor: text; border-radius: 5px; padding: 1px var(--space-tight); margin: -1px -4px; transition: background .12s; }
.org-name-edit:hover { background: var(--bg-hover); }
.org-rename { height: 30px; flex: 1; min-width: 0; }
.org-lead-chip { display: inline-flex; flex-shrink: 0; }
.dept-dest { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); text-align: left; transition: border-color .12s, background .12s; }
.dept-dest:hover { border-color: var(--ink-4); background: var(--bg-hover); }
.dept-dest.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-700); }
.dept-dest.on .org-dot { box-shadow: 0 0 0 2px var(--surface); }
.org-add .input { height: 36px; }
.org-titles { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.org-title { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-item); background: var(--surface-2); border-radius: var(--r-pill); font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); }
.org-title button { width: 18px; height: 18px; border: none; background: transparent; color: var(--ink-4); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.org-title button:hover { background: var(--bg-active); color: var(--ink); }

/* workspace members */
.cap-step { display: inline-flex; align-items: center; gap: 2px; background: transparent; border-radius: var(--r-control); padding: 0; }
.cap-step-b { width: 26px; height: 26px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-3); font-size: var(--t-heading-size); font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); position: relative; }
.cap-step-b:hover { background: var(--bg-hover); color: var(--ink); box-shadow: none; }
.cap-step-b[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.cap-step-b[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.cap-step-v { min-width: 26px; text-align: center; font-size: var(--t-body-size); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ws-mem { margin: var(--space-tight) 0 var(--space-group); }
.ws-mem-list { display: flex; flex-direction: column; gap: var(--space-tight); margin-top: var(--space-inline); }
.ws-mem-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 2px; border-radius: 0; border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.ws-mem-row:hover { background: var(--bg-hover); }
.ws-mem-row:last-child { border-bottom: none; }
.ws-mem-name { display: block; font-size: var(--t-label-size); font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-mem-sub { display: block; font-size: var(--t-micro-size); color: var(--ink-3); }
.ws-mem-owner { font-size: var(--t-micro-size); font-weight: 550; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: transparent; padding: 0; border-radius: 0; }
.pp-pop-right { left: auto; right: 0; }

/* ── feed link previews + entity refs + share ───────────────── */
.fpost-att { margin: var(--space-tight) 0 var(--space-inline); }
.fpost-link { color: var(--accent); font-weight: 550; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.fpost-link:hover { border-bottom-color: var(--accent); }
.fcomp-linkprev { margin: var(--space-tight) 0 var(--space-inline); }

.lpv { display: flex; align-items: stretch; gap: 0; width: 100%; text-align: left; border: none; padding: 0; background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .16s, transform .16s; }
.lpv:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: none; background: var(--bg-hover); }
.lpv-thumb { position: relative; width: 108px; flex-shrink: 0; display: grid; place-items: center; color: #fff; overflow: hidden; }
.lpv.compact .lpv-thumb { width: 76px; }
.lpv-mono { font-family: var(--font-serif); font-size: var(--t-display-size); font-weight: 600; opacity: .96; }
.lpv-play { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(2px); display: grid; place-items: center; padding-left: var(--space-tight); }
.lpv-dots { position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 11px 11px; }
.lpv-body { flex: 1; min-width: 0; padding: var(--space-item) var(--space-item); display: flex; flex-direction: column; gap: var(--space-tight); justify-content: center; }
.lpv-kind { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.lpv-favi { width: 9px; height: 9px; border-radius: 2px; }
.lpv-title { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpv-host { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.lpv-host .icn { opacity: .7; }
.lpv-go { display: grid; place-items: center; padding: 0 var(--space-item); color: var(--ink-4); flex-shrink: 0; transition: color .14s, transform .14s; }
.lpv:hover .lpv-go { color: var(--accent); transform: translateX(2px); }

.eref { display: flex; align-items: center; gap: var(--space-item); width: 100%; text-align: left; border: none; padding: var(--space-item) var(--space-item); background: var(--surface-2); border-radius: var(--r-md); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .16s, transform .16s; }
.eref:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: none; background: var(--bg-hover); }
.eref-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.eref-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eref-kind { font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.eref-title { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eref-sub { font-size: var(--t-caption-size); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eref-go { color: var(--ink-4); flex-shrink: 0; transition: color .14s, transform .14s; }
.eref:hover .eref-go { color: var(--accent); transform: translateX(2px); }

.share-comp { display: flex; gap: var(--space-item); align-items: flex-start; }
.share-comp .fcomp-ta { background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r-md); padding: var(--space-item) var(--space-item); min-height: 76px; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.share-comp .fcomp-ta:hover { border-color: var(--border); }
.share-comp .fcomp-ta:focus { background: var(--surface); border-color: var(--accent); }

/* view-as preview */
.tb-icon-btn.va-on { background: var(--accent-soft); color: var(--accent); }
.va-banner { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); margin-bottom: var(--space-group); border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); font-size: var(--t-label-size); box-shadow: inset 0 0 0 1px var(--accent); }
.va-banner b { font-weight: 650; }
.va-banner .icn { color: var(--accent); flex-shrink: 0; }
.va-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); animation: va-pulse 1.8s ease-in-out infinite; }
@keyframes va-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.va-exit { flex-shrink: 0; border: none; background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-item); border-radius: var(--r-pill); cursor: pointer; transition: filter .14s; }
.va-exit:hover { filter: brightness(1.06); }
.ty-banner-x { flex-shrink: 0; width: 24px; height: 24px; border: none; background: transparent; color: var(--ink-3); border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ty-banner-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* ───────── Client Portal ───────── */
.cp-layout { display: grid; grid-template-columns: 232px 1fr 360px; gap: var(--space-group); align-items: start; }
@media (max-width: 1180px){ .cp-layout { grid-template-columns: 200px 1fr; } .cp-preview { grid-column: 1 / -1; } }
.cp-clients { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-inline); display: flex; flex-direction: column; gap: 2px; }
.cp-clients-h { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-inline) var(--space-inline) var(--space-tight); }
.cp-client { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; }
.cp-client:hover { background: var(--surface-2); }
.cp-client.on { background: var(--accent-soft); }
.cp-client-av { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--t-label-size); flex-shrink: 0; }
.cp-client-n { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-client-s { font-size: var(--t-micro-size); color: var(--ink-4); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, #c9bfb2); flex-shrink: 0; }
.cp-dot.on { background: #5f8a4f; }
.cp-config { display: flex; flex-direction: column; gap: var(--space-item); min-width: 0; }
.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-group) var(--space-group); }
.cp-row.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.cp-card-t { font-size: var(--t-body-size); font-weight: 700; color: var(--ink); }
.cp-card-s { font-size: var(--t-caption-size); color: var(--ink-4); }
.cp-sections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); }
.cp-section { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; }
.cp-section.on { border-color: var(--accent); background: var(--accent-soft); }
.cp-section-ic { width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); flex-shrink: 0; }
.cp-section.on .cp-section-ic { background: var(--accent); color: var(--accent-fg); }
.cp-section-l { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.cp-section-d { font-size: var(--t-micro-size); color: var(--ink-4); }
.cp-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong, #c9bfb2); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-fg); }
.cp-check.on { background: var(--accent); border-color: var(--accent); }
.cp-accents { display: flex; gap: var(--space-inline); margin-bottom: var(--space-item); }
.cp-accent { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.cp-accent.on { box-shadow: 0 0 0 2px var(--ink); }
.cp-welcome { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--space-inline) var(--space-item); font: inherit; font-size: var(--t-caption-size); color: var(--ink); background: var(--surface); outline: none; resize: vertical; }
.cp-welcome:focus { border-color: var(--accent); }
/* preview */
.cp-preview { position: sticky; top: 12px; }
.cp-preview-label { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); margin-bottom: var(--space-inline); }
.cp-frame { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: 0 12px 30px -14px rgba(60,40,25,.3); }
.cp-frame.off { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-inline); color: var(--ink-4); font-size: var(--t-label-size); font-weight: 600; }
.cp-hero { padding: 20px 20px; color: #fff; }
.cp-hero-brand { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cp-hero-client { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 600; margin: var(--space-tight) 0 var(--space-inline); }
.cp-hero-welcome { font-size: var(--t-caption-size); line-height: 1.5; opacity: .92; }
.cp-body { padding: var(--space-group); display: flex; flex-direction: column; gap: var(--space-group); max-height: 440px; overflow-y: auto; }
.cp-sec-h { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); margin-bottom: var(--space-inline); display: flex; align-items: center; justify-content: space-between; }
.cp-bal { font-size: var(--t-micro-size); font-weight: 700; color: var(--cp); }
.cp-proj, .cp-inv { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); padding: var(--space-tight) 0; }
.cp-proj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cp-proj-prog { font-weight: 700; color: var(--ink); }
.cp-pay { border: none; background: var(--cp); color: #fff; font: inherit; font-size: var(--t-micro-size); font-weight: 700; padding: var(--space-tight) var(--space-item); border-radius: var(--r-control); cursor: pointer; }
.cp-files { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.cp-file { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); }
.cp-muted { font-size: var(--t-caption-size); color: var(--ink-4); }

/* ───────── Notifications Center ───────── */
.ntf-viewall { display: flex; align-items: center; justify-content: center; gap: var(--space-tight); width: 100%; padding: var(--space-item); border: none; border-top: 1px solid var(--border-subtle); background: none; font: inherit; font-size: var(--t-caption-size); font-weight: 700; color: var(--accent); cursor: pointer; }
.ntf-viewall:hover { background: var(--bg-hover); }
.nc-aria { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-group) var(--space-group); background: var(--accent-soft); border: none; border-radius: var(--r-card); margin-bottom: 20px; }
.nc-aria-ic { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; background: transparent; color: var(--accent); flex-shrink: 0; }
.nc-aria-t { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.nc-aria-s { font-size: var(--t-label-size); color: var(--ink); line-height: 1.45; margin-top: 2px; }
.nc-aria-go { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--accent); font: inherit; font-size: var(--t-caption-size); font-weight: 700; padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); cursor: pointer; transition: background .14s; }
.nc-aria-go:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nc-group { margin-bottom: 20px; }
.act-digest { margin-bottom: var(--space-group); }
.nc-group-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-tight); padding: 0 var(--space-tight); }
.nc-group-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: transparent !important; }
.nc-group-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); background: transparent; padding: 0 var(--space-tight); border-radius: 0; font-variant-numeric: tabular-nums; }
.nc-list { background: transparent; border: none; border-radius: 0; overflow: visible; }
.nc-row { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-item) var(--space-tight); border: none; background: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; cursor: pointer; text-align: left; transition: background .12s; }
.nc-row:last-child { border-bottom: none; }
.nc-row:hover { background: var(--bg-hover); }
.nc-row.unread { background: transparent; }
.nc-row.unread:hover { background: var(--bg-hover); }
.nc-row-av { position: relative; flex-shrink: 0; }
.nc-row-sys { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--accent); }
.nc-row-ic { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; color: var(--accent); box-shadow: none; }
.nc-row-main { flex: 1; min-width: 0; }
.nc-row-text { font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.4; }
.nc-row-text b { color: var(--ink); font-weight: 650; }
.nc-row-time { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 2px; text-transform: capitalize; }
/* Second, real-meaning line on a notification (e.g. "You're now fully paid for this project."). */
.nc-row-context { display: block; font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.nc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.nc-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: 48px 0 56px; color: var(--ink-3); font-size: var(--t-body-size); font-weight: 600; }
.nc-empty-t { color: var(--ink); font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 640; letter-spacing: -.01em; }
.nc-empty-s { color: var(--ink-3); font-size: var(--t-label-size); font-weight: 500; }

/* Muted notifications manager (Notifications Center) */
.nc-muted-card { margin-top: var(--space-head-above); background: transparent; border: none; border-radius: 0; padding: 0 0 var(--space-inline); }
.nc-muted-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: 0 var(--space-tight); }
.nc-muted-card-t { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 700; color: var(--ink); }
.nc-muted-card-t svg { color: var(--ink-3); }
.nc-muted-card-s { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-tight); }
.nc-muted-sec { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin: var(--space-group) 0 var(--space-inline); }
.nc-muted-rows { display: flex; flex-direction: column; gap: 0; }
.nc-muted-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-tight); border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); }
.nc-muted-row:last-child { border-bottom: none; }
.nc-muted-row-ic { width: 24px; height: 24px; border-radius: var(--r-control); display: grid; place-items: center; background: transparent; color: var(--ink-3); flex-shrink: 0; }
.nc-muted-row .grow { font-size: var(--t-label-size); font-weight: 600; color: var(--ink-2); min-width: 0; }
.nc-muted-row-un { flex-shrink: 0; border: none; background: transparent; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control); cursor: pointer; transition: background .12s, color .12s; }
.nc-muted-row-un:hover { background: var(--bg-hover); color: var(--accent); }

/* Proactive "mute an alert type" picker */
.nc-mute-add { margin-top: var(--space-item); }
.nc-mute-add-btn { display: inline-flex; align-items: center; gap: var(--space-inline); border: none; background: none; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); cursor: pointer; transition: background .12s, color .12s; }
.nc-mute-add-btn:hover { color: var(--accent); background: var(--bg-hover); }
.nc-mute-add-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; margin-top: var(--space-inline); }
.nc-mute-add-opt { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; text-align: left; min-width: 0; transition: background .12s, color .12s; }
.nc-mute-add-opt svg { color: var(--ink-4); flex-shrink: 0; }
.nc-mute-add-opt:hover { background: var(--bg-hover); color: var(--ink); }
.nc-mute-add-opt:hover svg { color: var(--accent); }
.nc-mute-add-empty { margin-top: var(--space-item); font-size: var(--t-caption-size); color: var(--ink-4); font-style: italic; }

/* ── Notifications — topbar dropdown panel (bell icon) ──
   Apple/Linear-clean pass: softer squircle corners, quieter hover, tighter
   type rhythm. `.ntfp-row-thumb` mirrors the app's existing `.staged-chip`
   attachment-preview convention (stelaah.css) — same chip shape, same
   image-vs-icon-fallback logic — so a real photo only ever shows when the
   linked record actually has one; never fabricated. */
.ntfp-panel { width: 400px; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-modal); }
.ntfp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-item) var(--space-group) var(--space-inline); flex-shrink: 0; }
.ntfp-title { font-size: var(--t-strong-size); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.ntfp-tabs { margin: 2px var(--space-group) var(--space-item); flex-shrink: 0; }
.ntfp-tabs button { flex: 1; justify-content: center; }
.ntfp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-tight) var(--space-inline) var(--space-inline); }
.ntfp-row { display: flex; align-items: flex-start; gap: var(--space-item); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-card); cursor: pointer; text-align: left; transition: background var(--dur-micro) var(--ease); }
.ntfp-row:hover { background: var(--bg-hover); }
.ntfp-row:active { background: var(--bg-active); }
.ntfp-row-av { position: relative; flex-shrink: 0; }
.ntfp-row-sys { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--accent); }
.ntfp-row-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 2.5px var(--border-subtle); }
.ntfp-row-stack { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.ntfp-row-main { flex: 1; min-width: 0; padding-top: 1px; }
.ntfp-row-text { font-size: var(--t-label-size); color: var(--ink-2); line-height: 1.42; font-weight: 500; }
.ntfp-row-text b { color: var(--ink); font-weight: 650; }
.ntfp-row-time { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-tight); font-weight: 400; }
.ntfp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: var(--space-inline); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.ntfp-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: 28px 20px 36px; color: var(--ink-4); font-size: var(--t-label-size); font-weight: 600; text-align: center; }
.ntfp-empty-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-3); }
.ntfp-empty-t { color: var(--ink); font-size: var(--t-label-size); font-weight: 650; }
.ntfp-empty-s { color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 500; max-width: 240px; line-height: 1.5; }
.ntfp-row-thumb { display: flex; align-items: center; gap: var(--space-inline); max-width: 100%; margin-top: var(--space-tight); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-2); }
.ntfp-row-thumb img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; }
.ntfp-row-thumb-ic { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink-3); flex-shrink: 0; }
.ntfp-row-thumb-name { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── Settings → Branding (EmailKit + PdfKit) ── */
.dbr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-block); flex-wrap: wrap; }
.dbr-lbl { min-width: 200px; flex: 1; }
.dbr-prevs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-group); }
@media (max-width: 1180px) { .dbr-prevs { grid-template-columns: 1fr; } }
.dbr-prev { min-width: 0; }
.dbr-prev-paper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-block) var(--space-block); box-shadow: 0 1px 2px rgba(60,40,25,.04), 0 14px 30px -22px rgba(60,40,25,.3); overflow: hidden; }
.dbr-prev-paper img { max-width: 100%; }

/* ── Reusable light/dark logo slots (onboarding · finish setup · settings) ── */
.logo-up { border: 1px solid var(--border); border-radius: var(--r-lg, 14px); background: var(--surface); padding: var(--space-group); }
.logo-up.compact { padding: var(--space-item) var(--space-item); }
.logo-up-head { margin-bottom: var(--space-item); }
.logo-up.compact .logo-up-head { margin-bottom: var(--space-item); }
.logo-up-pair { display: flex; align-items: flex-start; gap: var(--space-inline); max-width: 480px; }
.logo-up-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-item); }
.logo-up-prev { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-card); border: 1px solid var(--border-subtle); overflow: hidden; }
.logo-up-prev img { max-width: 48px; max-height: 48px; object-fit: contain; }
.logo-up-mono { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-serif, serif); font-size: var(--t-title-size); font-weight: 600; }
.logo-up-t { font-size: var(--t-label-size); font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: var(--space-inline); }
.logo-up-opt { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); background: var(--bg-sunken); padding: 1px var(--space-inline); border-radius: var(--r-pill, 999px); }
.logo-up-d { font-size: var(--t-caption-size); color: var(--ink-4); line-height: 1.5; margin-top: var(--space-tight); max-width: 220px; }
.logo-up-head .logo-up-d { max-width: 460px; }
.logo-up-acts { display: flex; gap: var(--space-inline); margin-top: var(--space-item); }
.logo-up-swap { flex-shrink: 0; align-self: center; margin-top: var(--space-tight); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-4); cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.logo-up-swap:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-4); background: var(--bg-hover); }
.logo-up-swap:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.logo-up-hint { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-item); }
.workspace-brand-image { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-width: 100%; }
.workspace-brand-image.workspace-brand-plate { padding: var(--sp-1, 4px) var(--sp-2, 8px); border-radius: var(--r-sm, 7px); }
.workspace-brand-image.workspace-brand-plate.dark { background: #fff; }
.workspace-brand-image.workspace-brand-plate.light { background: #171815; }
.workspace-brand-logo { display: block; width: auto; height: auto; max-width: 160px; max-height: 40px; object-fit: contain; }
.logo-up.compact .logo-up-pair { flex-direction: column; align-items: stretch; }
.logo-up.compact .logo-up-swap { align-self: center; margin: 2px 0; }
@media (max-width: 760px) {
  .logo-up-body { width: 100%; }
  .logo-up-pair { flex-direction: column; align-items: stretch; max-width: none; }
  .logo-up-swap { align-self: center; margin: 2px 0; }
}

/* ── Email → Sequences view ── */
.seqv { display: flex; flex-direction: column; gap: 28px; width: 100%; min-width: 0; box-sizing: border-box; }
.seqv-sec-hd { font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-item); display: flex; align-items: center; gap: var(--space-inline); }
.seqv-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: 0; }
.seq-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-item); }
.seq-card { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-group); border: 1px solid var(--border); border-radius: var(--r-lg, 14px); background: var(--surface); transition: opacity .14s; }
.seq-card.paused { opacity: .6; }
.seq-paused-tag { display: inline-block; margin-left: var(--space-inline); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); background: var(--bg-sunken); padding: 1px var(--space-inline); border-radius: 99px; vertical-align: middle; }
.seq-card-click { cursor: pointer; }
.seq-card-click:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.seq-edited { color: var(--c-olive); font-weight: 600; }
/* sequence email editor */
.seqed { display: flex; flex-direction: column; gap: var(--space-group); }
.seqed-step { display: flex; flex-direction: column; gap: var(--space-inline); padding-bottom: var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.seqed-step:last-child { border-bottom: none; padding-bottom: 0; }
.seqed-step-hd { display: flex; align-items: center; gap: var(--space-inline); }
.seqed-step-n { width: 22px; height: 22px; border-radius: var(--r-control); display: grid; place-items: center; font-size: var(--t-micro-size); font-weight: 700; flex-shrink: 0; }
.seqed-step-when { font-size: var(--t-micro-size); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.seqed-subj { width: 100%; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); padding: var(--space-inline) var(--space-item); font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); outline: none; transition: border-color .12s; }
.seqed-subj:focus { border-color: var(--accent); }
.seqed-body { width: 100%; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); padding: var(--space-inline) var(--space-item); font: inherit; font-size: var(--t-label-size); line-height: 1.55; color: var(--ink-2); outline: none; resize: vertical; transition: border-color .12s; }
.seqed-body:focus { border-color: var(--accent); }
.seqv-sec-hd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.seqed-top { display: flex; gap: var(--space-item); align-items: flex-end; padding-bottom: var(--space-group); border-bottom: 1px solid var(--border-subtle); }
.seqed-field { display: flex; flex-direction: column; gap: var(--space-tight); min-width: 0; }
.seqed-lbl { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.seqed-name-ro { font-size: var(--t-body-size); font-weight: 650; color: var(--ink); padding: var(--space-inline) 0; }
.seqed-cad { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink-3); }
.seqed-cadinput { width: 56px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); padding: var(--space-inline) var(--space-inline); font: inherit; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); text-align: center; outline: none; }
.seqed-cadinput:focus { border-color: var(--accent); }
.seqed-stepbtn { width: 26px; height: 26px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.seqed-stepbtn:hover:not(:disabled) { background: var(--bg-hover); color: var(--ink-2); }
.seqed-stepbtn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--st-blocked) 12%, transparent); color: var(--st-blocked); }
.seqed-stepbtn:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.seqed-addstep { display: inline-flex; align-items: center; gap: var(--space-inline); align-self: flex-start; border: 1px dashed var(--border); background: none; color: var(--ink-2); font: inherit; font-size: var(--t-label-size); font-weight: 600; padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); cursor: pointer; transition: all .12s; }
.seqed-addstep:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.seqpick { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-item) var(--space-item); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.seqpick:hover:not(:disabled) { background: var(--bg-hover); }
.seqpick:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }
.seqpick-ic { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.seqpick-t { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.seqpick-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
.seqpick-srclabel { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: var(--space-inline); }
.seqpick-src { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.seqpick-srcchip { display: inline-flex; align-items: center; gap: var(--space-inline); border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: var(--t-caption-size); font-weight: 540; color: var(--ink-2); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-pill); cursor: pointer; transition: all .12s; }
.seqpick-srcchip:hover { border-color: var(--ink-4); }
.seqpick-srcchip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.seqpick-srcdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.seqpick-srcn { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); }
.seqpick-srcchip.on .seqpick-srcn { color: var(--accent); }
.seqpick-divider { height: 1px; background: var(--border-subtle); margin: var(--space-item) 0; }
.seq-card-ic { width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; flex-shrink: 0; }
.seq-card-t { font-size: var(--t-body-size); font-weight: 600; color: var(--ink); }
.seq-card-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
.seq-card-n { font-size: var(--t-heading-size); font-weight: 700; color: var(--ink); text-align: right; line-height: 1; }
.seq-card-n span { display: block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-top: var(--space-tight); }
.seq-hint { display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); font-size: var(--t-caption-size); color: var(--ink-3); }
.seq-hint svg { color: var(--accent); flex-shrink: 0; }
.seq-hint b { color: var(--ink-2); font-weight: 650; }
.seq-rows { display: flex; flex-direction: column; }
.seq-row { display: grid; grid-template-columns: minmax(0,2fr) 1.1fr 1.2fr 1fr 36px; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-inline); border-bottom: 1px solid var(--border-subtle); border-radius: var(--r-control); }
.seq-row:not(.seq-row-hd):hover { background: var(--bg-hover); }
.seq-row-hd { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 0 var(--space-inline) var(--space-inline); border-bottom: 1px solid var(--border); }
.seq-row-hd:hover { background: none; }
.seq-c-who { display: flex; align-items: center; gap: var(--space-item); min-width: 0; }
.seq-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-caption-size); font-weight: 700; flex-shrink: 0; }
.seq-ava.ghost { background: var(--bg-sunken); color: var(--ink-4); }
.seq-who-tx { min-width: 0; display: flex; flex-direction: column; }
.seq-who-tx b { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); }
.seq-who-tx span { font-size: var(--t-caption-size); color: var(--ink-4); }
.seq-chip { display: inline-block; font-size: var(--t-micro-size); font-weight: 650; padding: var(--space-tight) var(--space-inline); border-radius: 99px; white-space: nowrap; }
.seq-chip.ghost { background: var(--bg-sunken); color: var(--ink-4); }
.seq-c-prog { display: flex; align-items: center; gap: var(--space-inline); }
.seq-prog { display: inline-flex; gap: var(--space-tight); }
.seq-pip { width: 13px; height: 5px; border-radius: 3px; }
.seq-step-tx { font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.seq-c-next { font-size: var(--t-caption-size); color: var(--ink-2); font-weight: 550; }
.seq-x { width: 30px; height: 30px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.seq-x:hover { background: color-mix(in srgb, var(--st-blocked) 13%, transparent); color: var(--st-blocked); }
.seq-row.done { opacity: .7; }
.em-empty.sm { padding: 28px var(--space-group); }
@media (max-width: 760px) { .seq-row { grid-template-columns: minmax(0,1.6fr) 1fr 40px; } .seq-c-prog, .seq-c-next { display: none; } }

/* ============================================================
   Organization map — visual org builder (sidebar → Organization)
   ============================================================ */
.orgc-content { padding: 0 !important; }
.orgc-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* header */
.orgc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-group); padding: var(--space-group) var(--space-block) var(--space-inline); flex-wrap: wrap; }
.orgc-head-l { min-width: 0; }
.orgc-title { font-size: var(--t-display-size); margin: 0; line-height: 1.05; }
.orgc-sub { font-size: var(--t-label-size); color: var(--ink-3); margin: var(--space-tight) 0 0; max-width: 620px; line-height: 1.45; }
.orgc-head-r { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; }
.orgc-link { display: inline-flex; align-items: center; gap: var(--space-tight); height: 34px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .14s; }
.orgc-link:hover { border-color: var(--border-strong); color: var(--ink); transform: none; }
.orgc-add { height: 34px; padding: 0 var(--space-group); gap: var(--space-tight); }

/* mode bar */
.orgc-bar { display: flex; align-items: center; gap: var(--space-item); padding: 2px var(--space-block) var(--space-inline); flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); }
.orgc-segs { display: inline-flex; gap: var(--space-tight); padding: var(--space-tight); background: var(--bg-sunken); border-radius: var(--r-control); }
.orgc-seg { display: inline-flex; align-items: center; gap: var(--space-inline); height: 32px; padding: 0 var(--space-item); border: none; background: none; border-radius: var(--r-control); color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: color .14s, background .2s, box-shadow .2s; }
.orgc-seg:hover { color: var(--ink); }
.orgc-seg.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.orgc-bar-hint { font-size: var(--t-caption-size); color: var(--ink-4); flex: 1; min-width: 120px; }
.orgc-zoom { display: inline-flex; align-items: center; gap: 2px; padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.orgc-zoom button { width: 30px; height: 28px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: all .12s; }
.orgc-zoom button:hover { background: var(--bg-active); color: var(--ink); }
.orgc-zbtn.on { background: var(--accent-soft); color: var(--accent-700); }
.orgc-zlabel { width: auto !important; min-width: 46px; font-size: var(--t-micro-size); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-2) !important; }
.orgc-zsep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.orgc-zoom-float { position: absolute; left: 14px; bottom: 14px; z-index: 6; box-shadow: var(--shadow-md); }

/* stage: roster | viewport | inspector */
.orgc-stage { flex: 1; min-height: 0; display: flex; position: relative; }

/* roster rail */
.orgc-roster { width: 246px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; background: var(--bg-sidebar); min-height: 0; }
.orgc-roster-h { display: flex; align-items: center; justify-content: space-between; padding: var(--space-item) var(--space-group) var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.orgc-roster-n { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 999px; padding: 1px var(--space-inline); letter-spacing: 0; }
.orgc-roster-search { display: flex; align-items: center; gap: var(--space-inline); margin: 0 var(--space-item) var(--space-inline); padding: 0 var(--space-inline); height: 34px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-control); color: var(--ink-4); transition: border-color .14s; }
.orgc-roster-search:focus-within { border-color: var(--accent); }
.orgc-roster-search input { border: none; background: none; outline: none; font: inherit; font-size: var(--t-caption-size); color: var(--ink); width: 100%; }
.orgc-roster-list { flex: 1; overflow-y: auto; padding: 0 var(--space-inline) var(--space-item); display: flex; flex-direction: column; gap: 1px; }
.orgc-rrow { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); cursor: grab; transition: background .12s, transform .1s; user-select: none; }
.orgc-rrow:hover { background: var(--bg-hover); }
.orgc-rrow:active { cursor: grabbing; }
.orgc-rrow.dragging { opacity: .4; }
.orgc-rrow-n { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-rrow-s { font-size: var(--t-micro-size); color: var(--ink-4); display: flex; align-items: center; gap: var(--space-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-rrow-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.orgc-rrow-grip { color: var(--ink-4); opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.orgc-rrow:hover .orgc-rrow-grip { opacity: .6; }
.orgc-rempty, .orgc-group-empty { font-size: var(--t-caption-size); color: var(--ink-4); padding: var(--space-item) var(--space-inline); text-align: center; }

/* viewport */
.orgc-viewport { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; background: var(--bg); }
.orgc-viewport.panning { cursor: grabbing; }
.orgc-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 24%, transparent) 1.2px, transparent 1.75px); }
.orgc-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.orgc-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.orgc-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 8; opacity: .38; }
/* soft marching dashes — accent ink only, no glow; slowed for Editorial Calm */
.orgc-edge-flow { fill: none; stroke: var(--accent); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 10; opacity: .42; filter: none; animation: orgcMarch 2.4s linear infinite; }
@keyframes orgcMarch { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce){ .orgc-edge-flow { animation: none; opacity: .28; filter: none; } }

/* generic node */
.orgc-node { position: absolute; box-sizing: border-box; transition: box-shadow .16s, transform .16s, border-color .16s; }

/* root */
.orgc-root { display: flex; align-items: center; gap: var(--space-item); padding: 0 var(--space-group); border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.orgc-root:hover { box-shadow: var(--shadow-md); transform: none; }
.orgc-root-ic { width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--accent); flex-shrink: 0; }
.orgc-root-n { font-size: var(--t-strong-size); font-weight: 680; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-root-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }

/* department node */
.orgc-dept { border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface); box-shadow: none; display: flex; flex-direction: column; overflow: hidden; }
.orgc-dept:hover { box-shadow: var(--shadow-sm); }
.orgc-dept.sel { border-color: var(--accent); box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.orgc-dept.over { border-color: color-mix(in srgb, var(--dc) 55%, var(--border)); box-shadow: none; background: color-mix(in srgb, var(--dc) 8%, var(--surface)); }
.orgc-dept.un { border-style: dashed; background: transparent; }
.orgc-dept-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-item); cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.orgc-dept-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.orgc-dept-n { font-size: var(--t-body-size); font-weight: 660; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-dept-cnt { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); background: transparent; border-radius: 0; padding: 0; }
.orgc-dept-body { padding: var(--space-tight) var(--space-item) var(--space-inline); display: flex; flex-direction: column; gap: 0; }
.orgc-dept-empty { font-size: var(--t-micro-size); color: var(--ink-4); text-align: left; padding: var(--space-item) var(--space-tight); border: none; border-radius: 0; }
.orgc-dept.over .orgc-dept-empty { border-color: transparent; color: var(--dc); }

/* person chip */
.orgc-chip { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-tight); border-radius: var(--r-control); background: transparent; border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.orgc-chip:last-child { border-bottom: none; }
.orgc-chip.grabbable { cursor: grab; }
.orgc-chip.grabbable:active { cursor: grabbing; }
.orgc-chip:hover { background: var(--bg-hover); }
.orgc-chip.dragging { opacity: .4; }
.orgc-chip-grip { color: var(--ink-4); opacity: 0; transition: opacity .12s; flex-shrink: 0; display: grid; place-items: center; }
.orgc-chip:hover .orgc-chip-grip { opacity: .6; }
.orgc-chip-av { position: relative; flex-shrink: 0; }
.orgc-chip-main { flex: 1; min-width: 0; }
.orgc-chip-n { font-size: var(--t-caption-size); font-weight: 620; color: var(--ink); display: flex; align-items: center; gap: var(--space-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-chip-s { font-size: var(--t-micro-size); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-lead-pip { display: inline-grid; place-items: center; color: var(--c-gold); flex-shrink: 0; }
.orgc-away-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-gold); border: 1.5px solid var(--surface); }
.orgc-away-dot.lg { width: 13px; height: 13px; right: 2px; bottom: 2px; border-width: 2px; }

/* pyramid: tier drop-zone + flowing-line skeleton + person */
.orgc-tierzone { position: absolute; box-sizing: border-box; border-radius: var(--r-modal); border: 1.5px dashed transparent; transition: background .16s, border-color .16s; }
.orgc-tierzone.over { background: color-mix(in srgb, var(--bc) 10%, transparent); border-color: color-mix(in srgb, var(--bc) 55%, transparent); }
.orgc-tier-lbl { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; padding: var(--space-inline) var(--space-item); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-xs); white-space: nowrap; }
.orgc-tier-lbl b { font-size: var(--t-caption-size); font-weight: 680; color: var(--ink); display: flex; align-items: center; gap: var(--space-inline); }
.orgc-tier-lbl span:last-child { font-size: var(--t-micro-size); color: var(--ink-4); padding-left: var(--space-group); }
.orgc-band-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.orgc-pn { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding-top: var(--space-tight); cursor: grab; text-align: center; }
.orgc-pn:active { cursor: grabbing; }
.orgc-pn.dragging { opacity: .4; }
.orgc-pn-av { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; transition: transform .14s, box-shadow .16s; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--dc) 50%, transparent); }
.orgc-pn:hover .orgc-pn-av { transform: scale(1.03); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--dc); }
.orgc-pn.sel .orgc-pn-av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.orgc-pn.apex .orgc-pn-av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-gold), 0 0 14px color-mix(in srgb, var(--c-gold) 35%, transparent); }
.orgc-pn.apex .orgc-pn-n { color: var(--ink); font-weight: 700; }
.orgc-pn-lead { position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--tag-gold-bg); color: var(--tag-gold-fg); display: grid; place-items: center; border: 2px solid var(--bg); }
.orgc-pn-n { font-size: var(--t-caption-size); font-weight: 640; color: var(--ink); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-pn-s { font-size: var(--t-micro-size); font-weight: 600; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* group / team node */
.orgc-group { border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface); box-shadow: none; padding: var(--space-item); display: flex; flex-direction: column; gap: var(--space-inline); cursor: pointer; }
.orgc-group:hover { box-shadow: var(--shadow-sm); transform: none; }
.orgc-group.sel { border-color: var(--accent); box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.orgc-group.over { border-color: color-mix(in srgb, var(--gc) 55%, var(--border)); box-shadow: none; background: color-mix(in srgb, var(--gc) 8%, var(--surface)); }
.orgc-group-hd { display: flex; align-items: center; gap: var(--space-item); }
.orgc-group-ic { width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.orgc-group-n { font-size: var(--t-body-size); font-weight: 660; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-group-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-group-desc { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.orgc-group-faces { display: flex; align-items: center; gap: 0; flex: 1; }
.orgc-gf { margin-right: -8px; transition: margin .14s; }
.orgc-gf:hover { z-index: 2; }
.orgc-group:hover .orgc-gf { margin-right: -4px; }
.orgc-group-foot { display: flex; align-items: center; gap: var(--space-item); padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 600; }
.orgc-group-foot span { display: inline-flex; align-items: center; gap: var(--space-tight); }
.orgc-group-open { color: var(--accent-700); opacity: 0; transition: opacity .14s; }
.orgc-group:hover .orgc-group-open { opacity: 1; }

/* hover overview card */
.orgc-hovercard { position: fixed; z-index: 700; width: 268px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--space-item) var(--space-item); animation: orgcPop var(--dur-micro) var(--ease) both; pointer-events: none; }
@keyframes orgcPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.orgc-hc-hd { display: flex; align-items: center; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.orgc-hc-hd b { font-size: var(--t-label-size); font-weight: 660; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-hc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.orgc-hc-dot.sm { width: 8px; height: 8px; }
.orgc-hc-ic { width: 22px; height: 22px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; color: var(--accent); background: transparent; }
.orgc-hc-ic.sm { width: 18px; height: 18px; border-radius: 0; }
.orgc-hc-count { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); background: transparent; border-radius: 0; padding: 0; }
.orgc-hc-desc { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.4; margin-bottom: var(--space-inline); }
.orgc-hc-lead { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-2); margin-bottom: var(--space-inline); font-weight: 600; }
.orgc-hc-faces { display: flex; align-items: center; gap: var(--space-tight); flex-wrap: wrap; }
.orgc-hc-more { font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); }
.orgc-hc-empty { font-size: var(--t-micro-size); color: var(--ink-4); }
.orgc-hc-person { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-inline); }
.orgc-hc-person b { font-size: var(--t-body-size); font-weight: 660; color: var(--ink); }
.orgc-hc-sub { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.orgc-hc-tags { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.orgc-hc-tag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); }
.orgc-hc-tag.lead { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 13%, transparent); }
.orgc-hc-meta { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); margin-top: var(--space-inline); font-weight: 600; }
.orgc-hc-meta.off { color: color-mix(in srgb, var(--c-gold) 80%, var(--ink)); }

/* inspector panel — floats over the canvas so it never crushes it */
.orgc-insp { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 8; border-left: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; min-height: 0; animation: orgcInsp var(--dur-over) var(--ease) both; }
@keyframes orgcInsp { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.orgc-insp-hd { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-group) var(--space-group) var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.orgc-insp-ic { width: 24px; height: 24px; border-radius: 0; display: grid; place-items: center; flex-shrink: 0; background: transparent !important; }
.orgc-insp-t { font-size: var(--t-strong-size); font-weight: 670; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-insp-s { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 1px; }
.orgc-insp-x { width: 30px; height: 30px; border: none; background: none; color: var(--ink-4); border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; position: relative; }
.orgc-insp-x:hover { background: var(--bg-hover); color: var(--ink); }
.orgc-insp-body { flex: 1; overflow-y: auto; padding: var(--space-item) var(--space-group); }
.orgc-insp-foot { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-group); border-top: 1px solid var(--border-subtle); }
.orgc-insp-foot .btn { flex: 1; justify-content: center; }
.orgc-insp-foot .btn.icon, .orgc-insp-foot .menu-wrap { flex: 0 0 auto; }
.orgc-insp-person { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-group); }
.orgc-insp-pn { font-size: var(--t-strong-size); font-weight: 670; color: var(--ink); }
.orgc-insp-ps { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: 2px; }
.orgc-insp-desc { font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.5; margin: 0 0 var(--space-group); }
.orgc-insp-rows { display: flex; flex-direction: column; }
.orgc-irow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-subtle); }
.orgc-irow:last-child { border-bottom: none; }
.orgc-ik { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 600; }
.orgc-iv { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); }
.orgc-insp-sec { margin-top: var(--space-group); }
.orgc-insp-sech { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-inline); }
.orgc-insp-sech.between { display: flex; align-items: center; justify-content: space-between; }
.orgc-mini-add { width: 24px; height: 24px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: all .12s; }
.orgc-mini-add:hover { border-color: var(--accent); color: var(--accent); }
.orgc-insp-mlist { display: flex; flex-direction: column; gap: 1px; }
.orgc-insp-m { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-tight); border-radius: var(--r-control); transition: background .12s; }
.orgc-insp-m:hover { background: var(--bg-hover); }
.orgc-insp-mn { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--space-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-insp-ms { font-size: var(--t-micro-size); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-m-act { width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; position: relative; }
.orgc-m-act:hover { background: var(--bg-hover); color: var(--ink-2); }
.orgc-m-act.on { color: var(--c-gold); }
.orgc-insp-faces, .orgc-insp-chips { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.orgc-insp-face { transition: transform .12s; }
.orgc-insp-face:hover { transform: none; }
.orgc-insp-chip { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); background: transparent; border-radius: 0; padding: 0 2px; }
.orgc-link[data-tip]::after, .orgc-zoom button[data-tip]::after, .orgc-shell .btn.icon[data-tip]::after, .orgc-m-act[data-tip]::after, .orgc-insp-x[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); z-index: 20; box-shadow: var(--shadow-md);
}
.orgc-link[data-tip]:hover::after, .orgc-zoom button[data-tip]:hover::after, .orgc-shell .btn.icon[data-tip]:hover::after, .orgc-m-act[data-tip]:hover::after, .orgc-insp-x[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.orgc-link[data-tip], .orgc-shell .btn.icon[data-tip] { position: relative; }
.orgc-insp-link { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-tight); border: none; background: none; border-radius: var(--r-control); cursor: pointer; text-align: left; transition: background .12s; }
.orgc-insp-link:hover { background: var(--bg-hover); }
.orgc-insp-link .grow { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); }
/* P4: the department inspector's Company Policies section. A status word on a
   linked policy, and the explicit starter-draft backfill. */
.orgc-insp-tag {
  flex-shrink: 0; padding: 0 var(--space-inline); height: 18px;
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  font-size: var(--t-micro-size); font-weight: 650;
  background: color-mix(in srgb, var(--c-gold) 16%, transparent);
  color: color-mix(in srgb, var(--c-gold) 68%, var(--ink));
}
.orgc-insp-seed { color: var(--ink-3); }
.orgc-insp-seed .grow { font-weight: 550; color: var(--ink-3); font-size: var(--t-caption-size); }
.orgc-insp-seed:hover { background: var(--accent-soft); }
.orgc-insp-seed:hover .grow, .orgc-insp-seed:hover svg { color: var(--accent); }
.orgc-swatches { display: flex; gap: var(--space-inline); flex-wrap: wrap; }
.orgc-sw { width: 24px; height: 24px; border-radius: var(--r-control); border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.orgc-sw:hover { transform: scale(1.12); }
.orgc-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }

/* stage empty (groups) */
.orgc-stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-item); color: var(--ink-4); pointer-events: none; }
.orgc-stage-empty > * { pointer-events: auto; }
.orgc-stage-empty div { font-size: var(--t-body-size); font-weight: 600; color: var(--ink-3); }

@media (max-width: 1180px){ .orgc-roster { width: 210px; } .orgc-insp { width: 280px; } }
@media (max-width: 900px){ .orgc-roster { position: absolute; left: 0; top: 0; bottom: 0; z-index: 9; width: 244px; box-shadow: var(--shadow-lg); border-right: 1px solid var(--border); } }

/* ============================================================
   Tasks & Clients — 2026 refresh: tags, kanban, list, calendar
   (single source for the tag look + card chrome; see s-ui.jsx Label,
    s-tasks-extra.jsx KbnCardBody / AnimatedList)
   ============================================================ */

/* ── Tags — clean soft-tint pill, haloed dot, color via --tag-c ───────────── */
.s-tagrow { display: inline-flex; align-items: center; gap: var(--space-tight); flex-wrap: wrap; min-width: 0; }
.s-tag {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  max-width: 168px; height: 22px; padding: 0 var(--space-inline) 0 var(--space-inline); box-sizing: border-box;
  font-size: var(--t-micro-size); font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  border-radius: var(--r-pill); white-space: nowrap;
  color: color-mix(in srgb, var(--tag-c) 64%, var(--ink));
  background: color-mix(in srgb, var(--tag-c) 11%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-c) 15%, transparent);
}
.s-tag .s-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tag-c); flex-shrink: 0; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--tag-c) 17%, transparent); }
.s-tag .s-tag-t { overflow: hidden; text-overflow: ellipsis; }
.s-tag.sm { height: 20px; font-size: var(--t-micro-size); padding: 0 var(--space-inline) 0 var(--space-inline); gap: var(--space-tight); }
.s-tag.sm .s-tag-dot { width: 5.5px; height: 5.5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-c) 17%, transparent); }
.s-tag-more { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-inline); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: var(--r-pill); }
.s-tag-more.sm { height: 20px; font-size: var(--t-micro-size); padding: 0 var(--space-inline); }
.dark .s-tag { background: color-mix(in srgb, var(--tag-c) 18%, var(--surface)); color: color-mix(in srgb, var(--tag-c) 72%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-c) 22%, transparent); }

/* ── Highlight — refined corner ribbon + soft ring (better colors via --hl) ── */
.hl-flag { position: absolute; top: -1px; right: 16px; width: 13px; height: 19px; border-radius: 0 0 3px 3px; flex-shrink: 0; z-index: 2; box-shadow: 0 3px 7px -2px color-mix(in srgb, var(--hl, #000) 55%, transparent); }
.hl-flag::after { content:''; position:absolute; bottom:-5px; left:0; right:0; height:7px; background:inherit; clip-path: polygon(0 0, 100% 0, 50% 62%); }
.kbn-card.hl { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 28%, transparent); }
.kbn-card.hl:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 42%, transparent); }
.trow.hl { box-shadow: none; }
.trow .hl-flag { display: none; }

/* ── Kanban card chrome ───────────────────────────────────────────────────── */
/* Eyebrow row: project label only, and only rendered when there is one. It no
   longer carries the card tools, so it collapses out of the card entirely on a
   projectless card instead of reserving button height. */
.kbn-head { display: flex; align-items: center; gap: var(--space-inline); min-height: 0; margin-bottom: var(--space-tight); }
.kbn-proj { display: block; min-width: 0; max-width: calc(100% - 60px); font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .035em; text-transform: uppercase; color: var(--ink-3); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbn-proj-dot { display: none; } /* color dots on project labels are banned */
.kbn-type, .trow-type, .t-type {
  display: inline-block; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4); letter-spacing: .01em; flex-shrink: 0;
}
/* Inherits the shared 11px/550/--ink-4 above. It used to override that to 15px,
   which made the type label louder than the title's own subtitle and was the
   single biggest source of card bulk. */
.kbn-type { display: block; margin: var(--space-tight) 0 0; max-width: 100%; }
.trow-type { font-size: var(--t-micro-size); color: var(--ink-4); }
.dt-type { font-size: var(--t-caption-size); color: var(--ink-3); font-weight: 550; max-width: none; }
/* Sits on the title line. The negative margins pull the icon buttons' dead box
   area flush to the card padding and optically centre them on the title's first
   line (22px button against an ~19px line box). */
.kbn-cardtools { flex-shrink: 0; display: inline-flex; align-items: center; gap: 1px; margin: calc(var(--sp-optical) * -2) calc(var(--sp-optical) * -4) 0 auto; }
.kbn-cardtools .sw-clock-badge { margin: 0 var(--space-tight); }
.kbn-pin { color: var(--accent); flex-shrink: 0; }
.kbn-more { opacity: 0; transition: opacity .14s, background .12s, color .12s; color: var(--ink-4); }
.btn.icon.kbn-more { width: 22px; height: 22px; border-radius: 6px; }
.kbn-card:hover .kbn-more, .kbn-card:focus-within .kbn-more { opacity: 1; }
.kbn-more:hover { color: var(--ink-2); }
.kbn-sw {
  opacity: 0; width: 22px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-4); display: grid; place-items: center;
  cursor: pointer; transition: opacity .14s, background .12s, color .12s; flex-shrink: 0;
}
.kbn-card.sw-live {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.kbn-card.sw-live:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.trow.sw-live {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.trow.sw-live:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.dt-row.sw-live {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.dt-row.sw-live:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.kbn-sw:hover { background: var(--bg-hover); color: var(--ink-2); }
/* Card simplification: the stopwatch behaves like the ••• beside it — quiet
   until you reach for the card. A running or parked timer is real state and
   stays visible, because that is information, not an affordance.
   (This also supplies the reveal `.kbn-sw` never had: it was declared
   `opacity: 0` with nothing anywhere restoring it, so even a running timer
   rendered invisible while staying clickable.) */
.kbn-card:hover .kbn-sw, .kbn-card:focus-within .kbn-sw, .kbn-sw.live, .kbn-sw.parked { opacity: 1; }
.kbn-sw.live { color: var(--accent-700, var(--accent)); }
.kbn-sw.parked { color: var(--ink-3); }
.kbn-titleline { display: flex; align-items: flex-start; gap: var(--space-inline); margin-bottom: 0; min-height: 0; }
.kbn-titleline .kbn-title { flex: 1; min-width: 0; }
.kbn-title { font-weight: 600; font-size: var(--t-body-size); line-height: 1.35; letter-spacing: -0.008em; margin-bottom: 0; color: var(--ink); }
.kbn-title.done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-4) 65%, transparent); }
.kbn-sub { color: var(--ink-4); font-size: var(--t-micro-size); line-height: 1.4; margin: var(--space-tight) 0 0; font-weight: 500; }
.kbn-tags { margin: var(--space-inline) 0 0; }
.kbn-flags { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin: var(--space-tight) 0 0; }
.kbn-flags .paused-pill,
.kbn-flags .kbn-blocked { margin-bottom: 0; }
.kbn-due.is-empty { color: var(--ink-4); font-weight: 500; }

/* featured image / cover — full-bleed banner, fixed slim aspect so it never
   bloats a card, object-fit cover so it always shows cleanly and never cuts off
   the layout. Lazy + downscaled (see window.coverFromFile) → no board slowdown. */
.kbn-cover { position: relative; margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; aspect-ratio: 16 / 7; background: var(--bg-sunken); }
.kbn-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbn-cover-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(18,16,14,.46); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s, background .14s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kbn-card:hover .kbn-cover-x { opacity: 1; }
.kbn-cover-x:hover { background: rgba(18,16,14,.72); }

/* subtask toggle — quiet meta chip; accent only on hover/open */
.kbn-subbtn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 650; cursor: pointer; padding: 2px var(--space-tight) 2px var(--space-tight); border-radius: 6px; transition: background .14s, color .14s; }
.kbn-subbtn:hover, .kbn-subbtn.open { background: var(--bg-active); color: var(--ink-2); }
.kbn-subbtn .kbn-subn { font-variant-numeric: tabular-nums; }
.kbn-subcaret { transition: transform var(--dur-micro) var(--ease); opacity: .7; }
.kbn-subcaret.open { transform: rotate(180deg); }

/* ── List view — grouped sections (separators, like the board) ────────────── */
.tlist-group + .tlist-group { margin-top: var(--space-tight); }
.tlist-group-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item) var(--space-inline); position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; user-select: none; }
.tlist-group:first-child .tlist-group-hd { padding-top: var(--space-tight); }
.tlist-group-caret { color: var(--ink-4); transition: transform .16s; flex-shrink: 0; display: grid; place-items: center; }
.tlist-group.collapsed .tlist-group-caret { transform: rotate(-90deg); }
.tlist-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tlist-group-title { font-size: var(--t-caption-size); font-weight: 700; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.tlist-group-n { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 var(--space-tight); border-radius: 999px; background: var(--bg-sunken); font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-2); }
.tlist-group-line { flex: 1; height: 1px; background: var(--border-subtle); }
.tlist-group-hd:hover .tlist-group-title { color: var(--accent); }
.tlist-group-body.collapsed { display: none; }

/* ── Calendar — a little more vibe ────────────────────────────────────────── */
.tcal-cell { min-height: 116px; }
.tcal-cell:nth-child(7n+1):not(.unset):not(.today), .tcal-cell:nth-child(7n):not(.unset):not(.today) { background-color: color-mix(in srgb, var(--bg-sunken) 24%, transparent); }
.tcal-cell.today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tcal-cell.today .tcal-daynum { box-shadow: 0 2px 7px -1px color-mix(in srgb, var(--accent) 42%, transparent); }
.tcal-daynum { transition: box-shadow .14s; }
.tcal-ev { border-radius: var(--r-control); }
.tlist-group-empty { padding: var(--space-inline) var(--space-item) var(--space-item) var(--space-page); font-size: var(--t-caption-size); color: var(--ink-4); }

/* ── Task drawer — featured image (cover) ─────────────────────────────────── */
.tdw-cover { position: relative; margin: 0 0 var(--space-group); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 6; background: var(--bg-sunken); }
.tdw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdw-cover.focus-edit { cursor: grab; touch-action: none; }
.tdw-cover.focus-edit.dragging { cursor: grabbing; }
.tdw-cover.focus-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tdw-cover-focus-hint { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-inline); border-radius: 999px; background: rgba(18,16,14,.5); color: #fff; font-size: var(--t-micro-size); opacity: 0; transition: opacity .14s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.tdw-cover.focus-edit:hover .tdw-cover-focus-hint, .tdw-cover.focus-edit:focus-visible .tdw-cover-focus-hint, .tdw-cover.focus-edit.dragging .tdw-cover-focus-hint { opacity: 1; }
.tdw-cover-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: var(--space-tight); opacity: 0; transition: opacity .14s; }
.tdw-cover:hover .tdw-cover-acts { opacity: 1; }
.tdw-cover-acts button { width: 28px; height: 28px; border: none; border-radius: var(--r-control); background: rgba(18,16,14,.5); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .14s; }
.tdw-cover-acts button:hover { background: rgba(18,16,14,.74); }
.tdw-cover-add { display: flex; width: fit-content; align-items: center; gap: var(--space-inline); margin: var(--space-inline) 0 var(--space-group); padding: var(--space-inline) var(--space-item) var(--space-inline) var(--space-item); border: 1px dashed var(--border-strong); border-radius: var(--r-control); background: transparent; color: var(--ink-4); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.tdw-cover-add svg { opacity: .85; }
.tdw-cover-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tdw-cover-add:hover svg { opacity: 1; }

/* ── Table view — Notion / ClickUp-style editable grid (DataTable) ─────────── */
.dt-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.dt { width: 100%; }
.dt-head { display: grid; align-items: center; position: sticky; top: 0; z-index: 4; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); border-radius: var(--r-card) var(--r-card) 0 0; }
.dt-h { padding: var(--space-item) var(--space-item); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; display: flex; align-items: center; }
.dt-h.dt-r { text-align: right; justify-content: flex-end; }
.dt-h-label { display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt-h-sortable .dt-h-label { cursor: pointer; user-select: none; }
.dt-h-sortable .dt-h-label:hover { color: var(--ink-2); }
.dt-h-sorticon { color: var(--accent); flex-shrink: 0; }
.dt-resize-handle { position: absolute; right: -1px; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 1; }
.dt-resize-handle::after { content: ''; position: absolute; right: 3px; top: 20%; bottom: 20%; width: 2px; border-radius: 1px; background: transparent; transition: background .12s; }
.dt-h:hover .dt-resize-handle::after, .dt-resize-handle:active::after { background: var(--border-strong); }
body.dt-resizing { cursor: col-resize !important; user-select: none !important; }
body.dt-resizing * { user-select: none !important; }
.dt-row { display: grid; align-items: center; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; min-height: 47px; }
.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: var(--bg-hover); }
.dt-cell { padding: var(--space-inline) var(--space-item); min-width: 0; display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); color: var(--ink); position: relative; }
.dt-cell.dt-r { justify-content: flex-end; }
.dt-cell-lead { padding: 0 0 0 var(--space-group); justify-content: center; }
.dt-cell-menu, .dt-cell-open { padding: 0; justify-content: center; }
.dt-cell-menu { display: inline-flex; align-items: center; gap: 2px; }
.dt-sw {
  opacity: 0; width: 26px; height: 26px; border: none; border-radius: var(--r-control);
  background: transparent; color: var(--ink-4); display: grid; place-items: center;
  cursor: pointer; transition: opacity .14s, background .12s, color .12s; flex-shrink: 0;
}
.dt-row:hover .dt-sw, .dt-row:focus-within .dt-sw, .dt-sw.live, .dt-sw.parked { opacity: 1; }
.dt-sw:hover { background: var(--bg-hover); color: var(--ink-2); }
.dt-sw.live { color: var(--accent-700, var(--accent)); }
.dt-sw.parked { color: var(--ink-3); }
.dt-editable { cursor: text; border-radius: var(--r-control); }
.dt-editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dt-edit-hint { position: absolute; right: 8px; opacity: 0; color: var(--ink-4); transition: opacity .12s; pointer-events: none; }
.dt-editable:hover .dt-edit-hint { opacity: .65; }
.dt-empty { color: var(--ink-4); }
.dt-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-editing { padding: var(--space-tight) var(--space-inline); }
.dt-input { width: 100%; border: 1px solid var(--accent); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); font: inherit; font-size: var(--t-label-size); background: var(--surface); color: var(--ink); outline: none; box-sizing: border-box; }
.dt-cell-menu-edit { padding: var(--space-tight) var(--space-inline); }
.dt-chipbtn { display: inline-flex; align-items: center; gap: var(--space-tight); border: none; background: transparent; cursor: pointer; padding: var(--space-tight) var(--space-tight); border-radius: var(--r-control); max-width: 100%; min-width: 0; transition: background .12s; }
.dt-chipbtn:hover { background: var(--bg-active); }
.dt-chipcaret { color: var(--ink-4); opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.dt-cell-menu-edit:hover .dt-chipcaret { opacity: 1; }
.dt-task { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-task-name { font-weight: 600; font-size: var(--t-label-size); }
.dt-task-sub { font-size: var(--t-micro-size); color: var(--ink-3); }
.dt-client { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.dt-client-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-proj, .dt-health, .dt-statchip { display: inline-flex; align-items: center; gap: var(--space-tight); min-width: 0; font-size: var(--t-caption-size); font-weight: 500; }
.dt-statchip { font-weight: 600; color: color-mix(in srgb, var(--sc) 62%, var(--ink)); }
.dt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dt-subs { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.dt-due { font-size: var(--t-caption-size); font-weight: 500; }
.dt-money { font-weight: 600; }
.dt-num { color: var(--ink-2); font-weight: 600; }
.dt-openbtn { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-4); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.dt-row:hover .dt-openbtn { opacity: 1; }
.dt-openbtn:hover { background: var(--bg-active); color: var(--accent); }
.dt-empty-state { padding: 56px 20px; text-align: center; color: var(--ink-4); }

/* ── Featured-image thumbnails in List rows + Table name cell ──────────────── */
.trow-content { display: flex; align-items: center; gap: var(--space-item); }
.trow-thumb { flex-shrink: 0; width: 38px; height: 30px; border-radius: var(--r-control); overflow: hidden; background: var(--bg-sunken); }
.trow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-task-wrap { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.dt-thumb { flex-shrink: 0; width: 34px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--bg-sunken); }
.dt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Calendar — richer "vibe" (clearer today, livelier pills) ─────────────── */
/* Today gets a calm focus: soft accent wash + a full hairline ring + a lifted day chip. */
.tcal-cell.today { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 20%, transparent); }
.tcal-wcol.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 20%, transparent); }
.tcal-cell.today .tcal-daynum, .tcal-wcol.today .tcal-wnum { box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--accent) 48%, transparent); }
.tcal-daynum { font-weight: 650; }
/* event pills — a touch more colour presence + bolder label */
.tcal-ev { background: color-mix(in srgb, var(--evc, var(--accent)) 14%, var(--surface)); }
.tcal-ev-name { font-weight: 600; }
/* "+N more" reads as a clean pill instead of bare text */
.tcal-more { background: var(--bg-sunken); color: var(--ink-2); border-radius: 999px; font-weight: 600; padding: 2px var(--space-inline); width: -moz-fit-content; width: fit-content; }
.tcal-more:hover { background: var(--accent-soft); color: var(--accent); }
/* legend chips a touch warmer */
.tcal-leg { font-weight: 600; }

/* ── Table toolbar + Columns customizer (show/hide + drag-reorder) ─────────── */
.dt-outer { display: flex; flex-direction: column; }
.dt-toolbar { display: flex; align-items: center; margin-bottom: var(--space-inline); }
.dt-cols-wrap { position: relative; }
.dt-cols-btn { display: inline-flex; align-items: center; gap: var(--space-inline); height: 32px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.dt-cols-btn:hover, .dt-cols-btn.on { border-color: var(--border-strong); color: var(--ink); background: var(--bg-hover); }
.dt-cols-scrim { position: fixed; inset: 0; z-index: 60; }
.dt-cols-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 61; width: 246px; background: var(--overlay); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-inline); animation: pop-menu var(--dur-over) var(--ease); }
.dt-cols-head { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline) var(--space-inline); }
.dt-cols-title { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.dt-cols-n { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); }
.dt-cols-reset { margin-left: auto; border: none; background: none; color: var(--accent); font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; padding: 2px var(--space-tight); border-radius: 6px; }
.dt-cols-reset:hover { background: var(--accent-soft); }
.dt-cols-list { display: flex; flex-direction: column; gap: 1px; }
.dt-cols-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); transition: background .12s; }
.dt-cols-row:hover { background: var(--bg-hover); }
.dt-cols-row.dragging { opacity: .4; }
.dt-cols-row.off .dt-cols-label { color: var(--ink-4); }
.dt-cols-grip { color: var(--ink-4); cursor: grab; display: grid; place-items: center; touch-action: none; flex-shrink: 0; }
.dt-cols-grip:active { cursor: grabbing; }
.dt-cols-label { flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-cols-eye, .dt-cols-lock { width: 28px; height: 28px; border: none; background: none; border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: var(--ink-4); transition: background .12s, color .12s; }
.dt-cols-eye.on { color: var(--accent); }
.dt-cols-eye:hover { background: var(--bg-active); }
.dt-cols-lock { cursor: default; opacity: .5; }
.dt-cols-drop { height: 2px; margin: 1px var(--space-inline); background: var(--accent); border-radius: 2px; }

/* Documents chrome tips */
.doc-topbar .doc-tool[data-tip]::after,
.dl-viewtoggle button[data-tip]::after,
.dl-quick[data-tip]::after,
.blk-handle button[data-tip]::after,
.doc-focus-exit[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.doc-topbar .doc-tool[data-tip]:hover::after,
.doc-topbar .doc-tool[data-tip]:focus-visible::after,
.dl-viewtoggle button[data-tip]:hover::after,
.dl-viewtoggle button[data-tip]:focus-visible::after,
.dl-quick[data-tip]:hover::after,
.blk-handle button[data-tip]:hover::after,
.doc-focus-exit[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.doc-focus-exit[data-tip] { position: relative; }

/* Stelaah deep-link paste offer (Messages / Feed / comments) */
.st-deeplink-offer{
  display:flex; align-items:center; gap:var(--space-inline);
  margin:var(--space-tight) 0 var(--space-tight); padding:var(--space-inline) var(--space-inline);
  background:var(--bg-sunken); border-radius:var(--r-md);
  font-size:var(--t-label-size); color:var(--ink-2);
}
.st-deeplink-offer .grow{ min-width:0; font-weight:550; color:var(--ink); }
.mx-composer-wrap .st-deeplink-offer,
.mx-thr-composer .st-deeplink-offer,
.fcomposer .st-deeplink-offer,
.composer-input-wrap .st-deeplink-offer{ margin-top:0; }

/* ══════════════════════════════════════════════════════════════
   Context Engine — Morning Brief card + engine settings
   Lives in the docked-notification layer and inherits every --notif-*
   token, so light and dark are correct by construction.
   ══════════════════════════════════════════════════════════════ */

.cbrief-wrap {
  position: fixed; right: 22px; bottom: 82px; z-index: 886;
  width: 348px; max-width: calc(100vw - 44px);
  pointer-events: none;
}
/* Yield to the Aria dock, same as every other docked card. */
body.has-aria-mini .cbrief-wrap { bottom: 490px; }
body.has-aria-full .cbrief-wrap { bottom: 630px; }

/* Docked column stacking order, bottom up: brief, then proposals, then toasts.
   The brief is the day's anchor so it holds the baseline; the transient cards move.
   --brief-h is published by MorningBriefCard from a live measurement, because the
   card's height depends on how many rows the day actually produced. A fixed offset
   collided with the toast dock the moment a row was added. */
body.has-brief .tprop-stack { bottom: calc(94px + var(--brief-h, 240px)); }
body.has-brief .toast-host {
  bottom: calc(94px + var(--brief-h, 240px)); right: 20px; width: min(400px, calc(100vw - 40px));
}
body.has-brief.has-proposals .toast-host { bottom: calc(94px + var(--brief-h, 240px) + var(--tprop-h, 150px) + 16px); }
body.has-brief.has-aria-mini .tprop-stack,
body.has-brief.has-aria-mini .toast-host { bottom: calc(502px + var(--brief-h, 240px)); }
body.has-brief.has-aria-full .tprop-stack,
body.has-brief.has-aria-full .toast-host { bottom: calc(642px + var(--brief-h, 240px)); }
/* The two rules above give the toast dock and the proposal card the SAME bottom,
   which is fine while no proposal is showing (the card isn't in the DOM at all).
   Once a proposal also surfaces, that shared value would stack them exactly on
   top of each other — these higher-specificity overrides push the toast above
   the proposal card instead, using its live measured height. */
body.has-brief.has-aria-mini.has-proposals .toast-host { bottom: calc(502px + var(--brief-h, 240px) + var(--tprop-h, 150px) + 16px); }
body.has-brief.has-aria-full.has-proposals .toast-host { bottom: calc(642px + var(--brief-h, 240px) + var(--tprop-h, 150px) + 16px); }

.cbrief {
  position: relative; pointer-events: auto;
  background: var(--notif-bg);
  border: 1px solid var(--notif-border);
  border-radius: var(--notif-radius);
  box-shadow: var(--notif-shadow);
  overflow: hidden;
  animation: cbrief-rise .38s var(--ease) backwards;
}
.cbrief.out { animation: cbrief-fall var(--dur-micro) var(--ease) forwards; }
@keyframes cbrief-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes cbrief-fall { to { opacity: 0; transform: translateY(8px) scale(.975); } }

.cbrief-head {
  display: flex; align-items: flex-start; gap: var(--space-item);
  padding: var(--notif-pad) var(--notif-pad) 11px;
}
.cbrief-ic { width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; color: var(--ink-3); margin-top: 1px; }
.cbrief-greet { font-size: var(--t-strong-size); font-weight: 560; color: var(--ink); line-height: 1.25; }
.cbrief-date { font-size: var(--t-caption-size); color: var(--ink-4); margin-top: 2px; letter-spacing: .01em; }
.cbrief-close {
  width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control);
  display: grid; place-items: center; color: var(--ink-4); cursor: pointer; flex-shrink: 0;
  transition: background .14s, color .14s;
}
.cbrief-close:hover { background: var(--notif-icon-hover-bg); color: var(--ink); }

.cbrief-rows { padding: 0 var(--space-inline) var(--space-tight); display: flex; flex-direction: column; }
.cbrief-row {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%;
  padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control);
  font: inherit; font-size: var(--t-label-size); color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background .14s, color .14s;
}
.cbrief-row:hover { background: var(--bg-hover); color: var(--ink); }
.cbrief-row-ic { display: grid; place-items: center; flex-shrink: 0; color: var(--ink-4); }
.cbrief-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbrief-row > svg:last-child { opacity: 0; color: var(--ink-4); transition: opacity .14s; flex-shrink: 0; }
.cbrief-row:hover > svg:last-child { opacity: 1; }
.cbrief-row.t-warn .cbrief-row-ic { color: var(--c-clay, #b0603b); }
.cbrief-row.t-good .cbrief-row-ic { color: var(--st-done, #6d9a3f); }

.cbrief-next { padding: 8px var(--notif-pad) var(--notif-pad); border-top: 1px solid var(--notif-border); margin-top: var(--space-tight); }
.cbrief-next-l {
  font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--space-inline);
}
.cbrief-next-btn {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%;
  padding: var(--space-inline) var(--space-item); border: none; border-radius: var(--r-control);
  background: var(--notif-cta-bg); color: var(--notif-cta-fg);
  font: inherit; font-size: var(--t-label-size); font-weight: 550; text-align: left; cursor: pointer;
  transition: filter .14s;
}
.cbrief-next-btn:hover { filter: brightness(1.08); }
.cbrief-next-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbrief-next-s { font-size: var(--t-micro-size); font-weight: 450; opacity: .72; flex-shrink: 0; }
.cbrief-next-btn > svg { flex-shrink: 0; opacity: .8; }

@media (max-width: 640px) {
  .cbrief-wrap { right: 12px; left: 12px; width: auto; bottom: 96px; }
  body.has-brief .toast-host,
  body.has-brief .tprop-stack { bottom: calc(108px + var(--brief-h, 240px)); right: 12px; }
  body.has-brief .toast-host { width: calc(100vw - 24px); }
}

/* Context Engine toasts sit in the ordinary dock. Only the icon tone differs, so
   they read as part of the same family rather than a separate channel. */
.toast.toast-ctx .toast-ic { color: var(--ink-3); }
.toast.toast-ctx .toast-title { font-weight: 560; }

/* ── Context Engine settings (Settings → Notifications) ── */
.ctxs-cap { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; }
.ctxs-cap input[type="range"] { width: 108px; accent-color: var(--accent); }
.ctxs-cap-n { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }

.ctxs-dims { display: flex; flex-direction: column; margin-top: var(--space-tight); }
.ctxs-dim { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 2px; border-top: 1px solid var(--line); }
.ctxs-dim:first-child { border-top: none; }
.ctxs-dim-l { font-size: var(--t-label-size); font-weight: 500; color: var(--ink); }
.ctxs-dim-d { font-size: var(--t-caption-size); color: var(--ink-4); margin-top: 2px; line-height: 1.4; }
.ctxs-dim-rate { font-size: var(--t-micro-size); color: var(--ink-4); opacity: .78; margin-top: var(--space-tight); font-variant-numeric: tabular-nums; }

.ctxs-foot { display: flex; flex-wrap: wrap; gap: var(--space-inline); margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--line); }
/* .switch.sm sizing already exists (calendar sync toggle) — reused as-is, not redefined. */

/* ══════════════════════════════════════════════════════════════
   Aria Inline — anchored micro-suggestions (s-aria-inline.jsx).
   Bare inline row, no border/fill: an observation, not a card.
   ══════════════════════════════════════════════════════════════ */
.ainl { display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-inline); padding: 1px 0; animation: ainl-in .3s ease backwards; }
@keyframes ainl-in { from { opacity: 0; transform: translateY(-3px); } }
.ainl-ic { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.ainl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ainl-t { font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.4; }
.ainl-s { font-size: var(--t-micro-size); color: var(--ink-4); }
.ainl-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ainl-cta { font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; white-space: nowrap; padding: 2px var(--space-tight); border-radius: 6px; }
.ainl-cta:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ainl-x { width: 20px; height: 20px; border: none; background: none; border-radius: 6px; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s, background .14s, color .14s; flex-shrink: 0; }
.ainl:hover .ainl-x, .ainl-x:focus-visible { opacity: 1; }
.ainl-x:hover { background: var(--bg-hover); color: var(--ink); }

/* ── Aria usage (Settings → Usage) ──────────────────────────────────────────
   Editorial Calm: hairline rhythm, no cards around the rows, no accent bars.
   The meter bar is the single accent moment and only appears on metered plans. */
.ausage-metrics { margin-bottom: 20px; }
.ausage-row { padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.ausage-row:last-of-type { border-bottom: none; }
.ausage-row-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-item); }
.ausage-row-l { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.ausage-row-v { font-size: var(--t-caption-size); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ausage-row-v i { font-style: normal; color: var(--ink-3); }
.ausage-track { height: 4px; border-radius: 999px; background: var(--bg-sunken); margin-top: var(--space-inline); overflow: hidden; }
.ausage-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.ausage-unl { margin-top: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); }
.ausage-note { margin-top: var(--space-item); font-size: var(--t-caption-size); color: var(--ink-3); }

.ausage-hist { margin-top: 2px; }
.ausage-hrow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-group); align-items: baseline;
  padding: var(--space-item) 2px; border-bottom: 1px solid var(--border-subtle); }
.ausage-hrow:last-child { border-bottom: none; }
.ausage-hm { font-size: var(--t-label-size); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ausage-hv { font-size: var(--t-caption-size); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ausage-def { margin-top: 2px; }
.ausage-drow { padding: var(--space-item) 0; border-bottom: 1px solid var(--border-subtle); }
.ausage-drow:last-child { border-bottom: none; }
.ausage-dl { display: block; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink); margin-bottom: var(--space-tight); }
.ausage-dd { display: block; font-size: var(--t-caption-size); line-height: 1.55; color: var(--ink-3); max-width: 620px; }

.aria-usage:hover { background: var(--bg-hover) !important; }

@container (max-width: 520px) {
  .ausage-hrow { grid-template-columns: 1fr auto; row-gap: var(--space-tight); }
  .ausage-hm { grid-column: 1 / -1; }
}

/* Token totals block on the Usage page. Hairline rows, tabular numerals so the
   figures align, and a slightly stronger total row. No box, no fill. */
.ausage-tok { margin-top: 2px; }
.ausage-trow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-group);
  padding: var(--space-inline) 2px; border-bottom: 1px solid var(--border-subtle); }
.ausage-trow:last-child { border-bottom: none; }
.ausage-trow.total .ausage-tl,
.ausage-trow.total .ausage-tv { font-weight: 600; color: var(--ink); }
.ausage-tl { font-size: var(--t-caption-size); color: var(--ink-2); }
.ausage-tv { font-size: var(--t-label-size); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Per-model cost breakdown on the Usage page. */
.ausage-models { margin-top: var(--space-item); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
.ausage-mrow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-group); align-items: baseline; padding: var(--space-inline) 2px; }
.ausage-mm { font-size: var(--t-caption-size); color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ausage-mv { font-size: var(--t-caption-size); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 520px) {
  .ausage-mrow { grid-template-columns: 1fr auto; row-gap: 2px; }
  .ausage-mm { grid-column: 1 / -1; }
}


/* ── Shared chrome relocated out of the files chunk (2026-08-10) ────────────
   build-app-runtime.sh scopes s-files.css to the files lazy chunk, but these
   five rules are rendered by modules that never load it, so they had no styling
   on any other route. Found by scripts/verify-route-styles.mjs.

   .menu-custom   custom rows in the app-wide context menu (s-contextmenu.jsx),
                  which CLAUDE.md requires on every page, so it was losing its
                  padding everywhere except Files.
   .fx-iconbtn    icon button reused by s-file-delivery.jsx. Only the base rules
                  move: its [data-tip] tooltip variants sit in a comma-separated
                  list with Files-only selectors (.fx-segview, .fx-qa, .fx-lb-*)
                  and splitting that would mean duplicating a declaration block.
                  s-file-delivery.jsx renders the button without data-tip, so it
                  needs none of them.
   They sit here rather than in a new shared stylesheet because stelaah.css is
   critical and already hosts the .menu-*, .pd-* and .fx-* families. */
.fx-iconbtn { width: 30px; height: 30px; border-radius: var(--r-control); border: none; background: transparent;
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: background .1s, color .1s; flex-shrink: 0; position: relative; }
.fx-iconbtn:hover { color: var(--ink); background: var(--bg-hover); }
.fx-iconbtn.on { background: var(--bg-hover); color: var(--accent); }
.menu-custom { padding: var(--space-tight) var(--space-inline) var(--space-inline); }


/* ═══════════════════════════════════════════════════════════════════════════
   STELAAH DESIGN SYSTEM v2 — "Quiet Precision"
   ───────────────────────────────────────────────────────────────────────────
   Supersedes the v1 :root at the top of this file. Declared LAST on purpose:
   equal specificity, later source wins, so every existing var() call site in
   all 136 stylesheets picks these up with no per-file migration.

   WHY THIS EXISTS — measured entropy in the v1 system:
     68 distinct font-size values   (scale declared 14)
     33 distinct border-radius      (ladder declared 7)
     1,002 distinct hex colors      (doc says "never invent hex")
     6,446 off-grid spacings        (doc estimated ~2,800)
   Refinement is not a taste problem, it is an entropy problem. A system reads
   as premium when the same handful of decisions recur everywhere. This layer
   cuts the decision count and gives every rung a job.

   FOUR RULES THAT DEFINE v2 (full rationale in DESIGN.md):
     1. Type is role-named, never size-named. Sizes go UP: the v1 app ran on
        10–13px gray, and small+gray is the single loudest "cheap" signal.
     2. Every ink is contrast-verified against the surface it lands on.
     3. Objects get identity color, actions stay monochrome.
     4. Disabled is a fill, never an opacity.

   MAINTENANCE CONTRACT — both `dark` and `data-accent` live on <body>, never
   <html> (s-kit.jsx:33). So :root here matches <html> and never competes with
   .dark; <body> inherits these light values and then overrides them. Any token
   whose value differs by mode MUST therefore be redeclared in the .dark block
   below, or dark mode silently inherits the light value.

   Workspace accent themes ([data-accent="olive"] etc, line ~2039) also match
   <body> at equal specificity to the .dark block below, so source order
   decides — and [data-accent].dark at (0,2,0) still wins over it. Verified
   across all six themes in both modes. See DESIGN.md §2.5.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. INK — every step contrast-verified on --bg (#fbfbfc) ─────────────
     v1 shipped two failing steps: --ink-3 at 3.91:1 and --ink-4 at 2.60:1,
     both below the 4.5:1 body-text floor, and --ink-4 was carrying
     placeholder text on the Aria home screen. Faint tiny gray type is the
     most reliable "unfinished" tell in software. Every step now passes. */
  --ink:          #16181d;   /* 17.5:1 — headings, primary labels          */
  --ink-2:        #40454e;   /*  9.5:1 — body copy, descriptions           */
  --ink-3:        #61666f;   /*  5.7:1 — meta, captions, timestamps        */
  --ink-4:        #6e737c;   /*  4.7:1 — placeholder (was 2.60:1, FAILED)  */
  --ink-disabled: #a2a7ae;   /* disabled control text only — WCAG-exempt,
                                and the ONLY legitimate sub-4.5:1 ink      */

  /* ── 2. SURFACES — slightly cooler, one extra step of separation ───────
     v1 ran #fdfdfd / #f5f5f5 / #f3f3f3 / #fff — only 4 lightness values
     inside a 2.5% band, so panels, wells and cards were indistinguishable
     without a border. Widening the band lets structure come from surface
     rather than from adding more hairlines. */
  --bg:          #fbfbfc;    /* workspace canvas                           */
  --bg-sidebar:  #f4f5f7;    /* Smart Rail, static rails                   */
  --bg-sunken:   #eff1f3;    /* wells, tracks, recessed inputs, disabled   */
  --surface:     #ffffff;    /* cards, modals, popovers                    */
  --surface-2:   #f8f9fa;    /* nested panels inside a --surface           */
  --overlay:     #ffffff;

  /* ── 3. LINES ──────────────────────────────────────────────────────────── */
  /* --hairline-w is the WIDTH half of a line; the three colours below are the
     weight half. App theme presets (end of this file) set both, which is how a
     preset can read as "heavier lines" without any component knowing. Declared
     here as the contract + default: new code writes
     `border: var(--hairline-w) solid var(--border)`, not `1px solid`.
     NOTE the --elev-* rings below deliberately keep a literal 1px: they are
     declared on :root (= <html>) and would freeze this value anyway, so each
     theme block restates its own rings on <body> where both resolve together. */
  --hairline-w:    1px;
  --border:        rgba(22, 24, 29, 0.10);
  --border-strong: rgba(22, 24, 29, 0.16);
  --border-subtle: rgba(22, 24, 29, 0.06);

  /* ── 4. ACCENT — near-black, not mid-charcoal ───────────────────────────
     v1 --accent #3d3d3d (10.7:1) read as "gray button" next to a gray UI.
     Near-black at 15.7:1 gives the one primary action per view real
     authority without introducing a brand hue. */
  --accent:        #1f2229;
  --accent-600:    #2c3038;   /* hover  — lighter, so the press reads      */
  --accent-700:    #111318;   /* active — darker                           */
  --accent-fg:     #ffffff;
  --accent-soft:        color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-soft-strong: color-mix(in srgb, var(--accent) 12%, var(--surface));

  /* ── 5. ENTITY IDENTITY PALETTE ─────────────────────────────────────────
     THE refinement lever, and the one thing v1 structurally forbade.

     Objects that have identity — a project, inventory, template, module,
     integration, space — carry a stable hue derived from their id. It shows
     up as a FILLED rounded-square icon tile, and nowhere else. This is what
     makes ClickUp's App Center and Template Center read as a designed system
     while a monochrome equivalent reads as a settings page.

     Tuned so all eight tiles sit at 1.15–1.19 contrast against white. Equal
     lightness across hues is what makes a set feel like one family rather
     than eight unrelated colors; it is the difference between a palette and
     a box of crayons. Every -ink passes >=6.1:1 on its own -tile.

     NOT for: chrome, list-row backgrounds, borders, banners, status. Status
     keeps --st-*, charts keep --viz-*. See DESIGN.md -> Color Law. */
  --e-blue-tile:   #e7f0fd;  --e-blue-ink:   #12539e;  --e-blue-solid:   #2f7fd4;
  --e-teal-tile:   #ddf1ee;  --e-teal-ink:   #0d6055;  --e-teal-solid:   #12968a;
  --e-green-tile:  #e4f2df;  --e-green-ink:  #2b6420;  --e-green-solid:  #4a9b3c;
  --e-amber-tile:  #faeed4;  --e-amber-ink:  #6d4e0d;  --e-amber-solid:  #c08a17;
  --e-orange-tile: #fbe9df;  --e-orange-ink: #8a4218;  --e-orange-solid: #d4692c;
  --e-rose-tile:   #fbe6ea;  --e-rose-ink:   #9a2340;  --e-rose-solid:   #d1476a;
  --e-violet-tile: #eee9fa;  --e-violet-ink: #553093;  --e-violet-solid: #8358cf;
  --e-slate-tile:  #e9ebee;  --e-slate-ink:  #3c454f;  --e-slate-solid:  #68737f;

  /* ── 6. TYPE — role-named, with line-height/weight/tracking locked ──────
     A size alone is not a typographic decision. v1 exposed 10 sizes plus 4
     "de-facto" half-steps and left line-height, weight and tracking to each
     component, which is how 68 distinct sizes happen. Each role below is a
     complete, non-negotiable set. Reach for a ROLE; if none fits, the
     component is wrong, not the scale.

     Sizes are deliberately larger than v1. The dominant sizes in the v1
     codebase were 12.5 / 12 / 11 / 13 — an entire product rendered at
     caption size. */
  --t-display-size: 30px; --t-display-lh: 36px; --t-display-weight: 600; --t-display-track: -0.021em;
  --t-title-size:   22px; --t-title-lh:   28px; --t-title-weight:   600; --t-title-track:   -0.016em;
  --t-heading-size: 17px; --t-heading-lh: 24px; --t-heading-weight: 600; --t-heading-track: -0.011em;
  --t-strong-size:  15px; --t-strong-lh:  22px; --t-strong-weight:  550; --t-strong-track:  -0.005em;
  --t-body-size:    14px; --t-body-lh:    21px; --t-body-weight:    400; --t-body-track:    -0.002em;
  --t-label-size:   13px; --t-label-lh:   18px; --t-label-weight:   500; --t-label-track:    0;
  --t-caption-size: 12px; --t-caption-lh: 16px; --t-caption-weight: 450; --t-caption-track:  0.003em;
  --t-micro-size:   11px; --t-micro-lh:   14px; --t-micro-weight:   600; --t-micro-track:    0.02em;

  /* Legacy --fs-* remap. Keeps ~2,000 existing call sites working while
     snapping them onto real rungs. The four half-steps are the biggest single
     entropy source in v1 (12.5px alone appears 1,569 times) — they now
     collapse onto the nearest real size and are FROZEN: no new use. */
  --fs-micro: var(--t-micro-size);      /* 11   */
  --fs-tiny:  var(--t-caption-size);    /* 12   */
  --fs-sm:    var(--t-label-size);      /* 13   */
  --fs-body:  var(--t-body-size);       /* 14   */
  --fs-md:    var(--t-strong-size);     /* 15   */
  --fs-lg:    var(--t-heading-size);    /* 17   */
  --fs-xl:    var(--t-title-size);      /* 20 -> 22 */
  --fs-2xl:   var(--t-display-size);    /* 26 -> 30 */
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-105: var(--t-micro-size);        /* 10.5 -> 11  DEPRECATED */
  --fs-115: var(--t-caption-size);      /* 11.5 -> 12  DEPRECATED */
  --fs-125: var(--t-label-size);        /* 12.5 -> 13  DEPRECATED */
  --fs-135: var(--t-body-size);         /* 13.5 -> 14  DEPRECATED */

  /* ── 7. RADIUS — four rungs, each with a job ────────────────────────────
     v1 declared 7 rungs and the codebase used 33 values. The Merch & Swag
     modal alone shipped a pill segmented control, a ~14px select, ~14px radio
     cards, a dashed pill button, a 20px modal and ~12px footer buttons: six
     shape languages in one dialog. Four rungs, assigned by ROLE, removes the
     judgement call that produced that. */
  --r-control: 8px;     /* buttons, inputs, selects, chips, menu rows       */
  --r-card:    14px;    /* cards, tiles, radio cards, panels, icon tiles    */
  --r-modal:   20px;    /* modals, drawers, popovers, sheets                */
  --r-pill:    9999px;  /* tags, status, avatars, counts — NEVER buttons    */

  /* Legacy ladder collapsed onto the four rungs. */
  --r-xs:  var(--r-control);   /*  7 ->  8 */
  --r-sm:  var(--r-control);   /*  9 ->  8 */
  --r-md:  var(--r-card);      /* 12 -> 14 */
  --r-lg:  var(--r-card);      /* 16 -> 14 */
  --r-xl:  var(--r-modal);     /* 22 -> 20 */
  --r-2xl: var(--r-modal);     /* 28 -> 20 */

  /* ── 8. ELEVATION — four levels, named by MEANING not by size ───────────
     Every level carries a hairline ring alongside the shadow. A shadow with
     no ring goes muddy at the edge; the ring is what keeps a floating
     surface crisp. This is the most copied detail in Apple/Linear surfaces
     and v1 had it on modals only. */
  --elev-1: 0 1px 2px rgba(22,24,29,.04),
            0 0 0 1px rgba(22,24,29,.045);                 /* rests on canvas   */
  --elev-2: 0 2px 4px rgba(22,24,29,.04),
            0 8px 16px -4px rgba(22,24,29,.08),
            0 0 0 1px rgba(22,24,29,.05);                  /* floats: popover   */
  --elev-3: 0 4px 8px rgba(22,24,29,.04),
            0 16px 32px -8px rgba(22,24,29,.12),
            0 0 0 1px rgba(22,24,29,.06);                  /* overlays: modal   */
  --elev-4: 0 8px 16px rgba(22,24,29,.06),
            0 32px 64px -16px rgba(22,24,29,.20),
            0 0 0 1px rgba(22,24,29,.07);                  /* commands the view */

  --shadow-xs:  var(--elev-1);
  --shadow-sm:  var(--elev-1);
  --shadow-md:  var(--elev-2);
  --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  /* ── 9. STATE LAYER — the layer v1 never had ────────────────────────────
     v1 had --bg-hover and --bg-active and stopped. There was no selected
     token, no focus token, and disabled was `opacity: .45` — which renders
     the near-black primary CTA as #a4a4a4, indistinguishable from a
     secondary button. Opacity-disable is the cheapest-looking pattern in UI
     because it makes a control look half-rendered rather than intentionally
     unavailable. Disabled is now a FILL. */
  --state-hover:    color-mix(in srgb, var(--ink) 4%, transparent);
  --state-active:   color-mix(in srgb, var(--ink) 8%, transparent);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);

  --bg-hover:  var(--state-hover);    /* legacy alias */
  --bg-active: var(--state-active);   /* legacy alias */

  /* Focus is the one place a blue is always allowed, in both modes. It must
     never inherit --accent: a near-black focus ring is invisible against
     near-black chrome, and keyboard users lose the app. */
  --focus:      #2f7fd4;
  --focus-ring: 0 0 0 2px var(--surface),
                0 0 0 4px color-mix(in srgb, var(--focus) 55%, transparent);

  --disabled-bg:     var(--bg-sunken);
  --disabled-fg:     var(--ink-disabled);
  --disabled-border: var(--border-subtle);

  /* ── 10. DENSITY & METRICS ──────────────────────────────────────────────
     Control heights on a 4pt grid so a button, an input and a select set on
     the same row line up without per-component nudges. */
  --control-h-sm: 28px;
  --control-h:    36px;     /* was a freehand 38px */
  --control-h-lg: 44px;
  --row-h:         40px;    /* comfortable list row */
  --row-h-compact: 32px;

  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --tile-sm: 28px;          /* entity icon tile — list rows   */
  --tile-md: 36px;          /* entity icon tile — cards       */
  --tile-lg: 48px;          /* entity icon tile — hero/header */

  /* ── 11. MOTION SIGNATURE ───────────────────────────────────────────────
     `--ease` has existed since v1 and was used by roughly a fifth of the
     transitions in this file; the other four fifths each invented a curve.
     A 2026-08-29 census found 82 var(--ease) literals across 23 DISTINCT
     curves — including three overshoot/bounce curves that the design language
     explicitly rejects ("Springy motion → No", DESIGN_LANGUAGE.md → Notion).
     Twenty-three easings is not a motion design, it is twenty-three separate
     opinions, and the reason menus, drawers and toggles never felt like one
     product.

     There are now exactly TWO durations to reach for, paired with the one
     signature curve. Reach for a ROLE, the same way type reaches for a role:
       --dur-micro  the control answering you   — hovers, toggles, checkboxes,
                    focus rings, chip presses, icon-button fills
       --dur-over   a surface arriving          — menus, popovers, dropdowns,
                    tooltips, drawers, sheets, modals
     Anything slower than --dur-over is a CHOREOGRAPHED move (a drawer slide,
     a route rise) and keeps --t-drawer / --t-slow.

     --dur-micro aliases --t-fast rather than restating 120ms, so the two
     naming generations cannot drift apart. --dur-over is a NEW rung: 200ms
     (--t-med) reads clipped on a surface that has to travel, and 300ms
     (--t-slow) reads sluggish on one that only has to appear. */
  --dur-micro: var(--t-fast);   /* 120ms — the control answers */
  --dur-over:  240ms;           /* a surface arrives           */

  /* ── 12. MATERIAL LADDER ────────────────────────────────────────────────
     Chrome that floats over content is TRANSLUCENT, and translucency is a
     material, not a number. Before this the file carried nine different blur
     radii (2/3/4/5/6/7/8/14/16/22px) in four different pairings with
     saturate(), so two panels doing the same job could sit on visibly
     different glass.

     Two materials, and they mean different things:
       --material-chrome  a SURFACE you read through — the dock, its launcher
                          panel, floating bars, sticky headers. Carries a tint
                          so text on it stays legible over any content.
       --material-veil    a SCRIM you look past — modal backdrops, away-screen
                          covers. Lighter blur; its job is to recede, not to
                          hold text.
     Use the -bg token together with its -blur token. A blur with no tint goes
     muddy over busy content; a tint with no blur reads as flat plastic.
     Saturation is part of the material: it keeps colour underneath from going
     grey when the blur averages it out.

     SET 10's dock and launcher consume these and never declare their own
     blur. --modal-scrim-blur (line ~96) is the pre-existing name for the veil
     radius and is kept pointing here so the ten call sites already using it
     move with the ladder instead of being left behind. */
     The -bg values are LITERAL rgba, not color-mix over --surface, and that is
     deliberate: a custom property containing var() is substituted on the
     element that DECLARES it, so `color-mix(…, var(--surface))` written here
     on :root (= <html>) would freeze the light surface and .dark on <body>
     could never change it. Same trap the maintenance contract names above. */
     The VEIL values are the existing --modal-scrim-* values, adopted rather
     than redesigned: ten scrims already render at exactly this blur and alpha,
     and a ladder that shifts every modal backdrop on the way in is a ladder
     that gets reverted. --modal-scrim-* now alias these, so the two names are
     one thing and SET 10 has a token to consume. Saturation is on the chrome
     only — a scrim exists to recede, and saturating what you are trying to
     de-emphasise works against it. */
  --material-chrome-blur: blur(16px) saturate(1.5);
  --material-chrome-bg:   rgba(255, 255, 255, 0.78);
  --material-veil-blur:   blur(6px);
  --material-veil-bg:     rgba(32, 33, 36, 0.24);

  /* ── 13. SWITCH — one sliding toggle, two skins ─────────────────────────
     The app carries two toggle implementations: `.switch` (218 call sites
     across 104 files, the app-wide one) and FormKit's `.fkit-track/.fkit-knob`
     (the accessible one, with a real focusable <input> behind it). Rewriting
     218 call sites would be a large, low-value, high-regression diff, so
     instead BOTH skins are driven from the tokens below: change a number here
     and every toggle in the product — Settings, modals, drawers, the rail —
     moves together. That is what "restyle at the source" has to mean when the
     source is a shared visual contract rather than a single component.

     Geometry matches FormKit's published contract (DESIGN.md §14.3), so the
     two skins are now pixel-identical and the alignment gate keeps certifying
     the kit for both. --sw-travel is DERIVED, never typed: the old `.switch`
     hardcoded `translateX(16px)` against a 38px track, which is what let the
     small variant drift 1px off its own inset.

     GEOMETRY ONLY. The track fill, the off state and the knob take
     --accent / --border-strong / --surface AT THE POINT OF USE rather than
     through an alias declared here, for two reasons: an alias on :root freezes
     the light value (see the material note above), and the ON fill has to
     follow the WORKSPACE accent, which lives on <body> as [data-accent] and is
     therefore only resolvable further down the tree. */
  --sw-w:     36px;
  --sw-h:     20px;
  --sw-knob:  16px;
  --sw-inset:  2px;
  --sw-travel: calc(var(--sw-w) - var(--sw-knob) - var(--sw-inset) * 2);
  /* Small variant, for dense rows (calendar sync, inline settings). Same
     inset, so the two sizes read as one control at two scales. */
  --sw-w-sm:    30px;
  --sw-h-sm:    17px;
  --sw-knob-sm: 13px;
  --sw-travel-sm: calc(var(--sw-w-sm) - var(--sw-knob-sm) - var(--sw-inset) * 2);
}


/* ═══ DARK — every mode-dependent token above, redeclared ═══════════════════
   This block MUST come after the :root above. See maintenance contract. */
.dark {
  --ink:          #f2f3f5;
  --ink-2:        #b9bec6;
  --ink-3:        #8f959e;
  --ink-4:        #7d838c;
  --ink-disabled: #5a6069;

  --bg:          #131519;
  --bg-sidebar:  #0f1114;
  --bg-sunken:   #1b1e23;
  --surface:     #1a1d22;
  --surface-2:   #212429;
  --overlay:     #1a1d22;

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.17);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --accent:     #f2f3f5;
  --accent-600: #ffffff;
  --accent-700: #d6d9dd;
  --accent-fg:  #131519;

  /* Entity hues derived from the shared -solid so the two modes cannot
     drift apart. Verified >=5.2:1 ink-on-tile. */
  --e-blue-tile:   color-mix(in srgb, var(--e-blue-solid)   22%, #16181d);
  --e-blue-ink:    color-mix(in srgb, var(--e-blue-solid)   70%, #ffffff);
  --e-teal-tile:   color-mix(in srgb, var(--e-teal-solid)   22%, #16181d);
  --e-teal-ink:    color-mix(in srgb, var(--e-teal-solid)   70%, #ffffff);
  --e-green-tile:  color-mix(in srgb, var(--e-green-solid)  22%, #16181d);
  --e-green-ink:   color-mix(in srgb, var(--e-green-solid)  70%, #ffffff);
  --e-amber-tile:  color-mix(in srgb, var(--e-amber-solid)  22%, #16181d);
  --e-amber-ink:   color-mix(in srgb, var(--e-amber-solid)  70%, #ffffff);
  --e-orange-tile: color-mix(in srgb, var(--e-orange-solid) 22%, #16181d);
  --e-orange-ink:  color-mix(in srgb, var(--e-orange-solid) 70%, #ffffff);
  --e-rose-tile:   color-mix(in srgb, var(--e-rose-solid)   22%, #16181d);
  --e-rose-ink:    color-mix(in srgb, var(--e-rose-solid)   70%, #ffffff);
  --e-violet-tile: color-mix(in srgb, var(--e-violet-solid) 22%, #16181d);
  --e-violet-ink:  color-mix(in srgb, var(--e-violet-solid) 70%, #ffffff);
  --e-slate-tile:  color-mix(in srgb, var(--e-slate-solid)  22%, #16181d);
  --e-slate-ink:   color-mix(in srgb, var(--e-slate-solid)  70%, #ffffff);

  /* On dark, hover/active lift toward white instead of sinking toward ink. */
  --state-hover:    rgba(255, 255, 255, 0.055);
  --state-active:   rgba(255, 255, 255, 0.10);
  --state-selected: rgba(255, 255, 255, 0.09);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --focus:      #5aa3e8;
  --focus-ring: 0 0 0 2px var(--surface),
                0 0 0 4px color-mix(in srgb, var(--focus) 60%, transparent);

  --disabled-bg:     var(--bg-sunken);
  --disabled-fg:     var(--ink-disabled);
  --disabled-border: var(--border-subtle);

  /* Shadows alone are invisible on dark; the ring does the work. */
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.055);
  --elev-2: 0 2px 4px rgba(0,0,0,.28), 0 8px 16px -4px rgba(0,0,0,.42),
            0 0 0 1px rgba(255,255,255,.07);
  --elev-3: 0 4px 8px rgba(0,0,0,.30), 0 16px 32px -8px rgba(0,0,0,.50),
            0 0 0 1px rgba(255,255,255,.085);
  --elev-4: 0 8px 16px rgba(0,0,0,.34), 0 32px 64px -16px rgba(0,0,0,.62),
            0 0 0 1px rgba(255,255,255,.10);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  /* Material ladder, dark rendering. Redeclared rather than derived — see the
     :root note: a color-mix over var(--surface) declared on :root would freeze
     the light value here. The chrome tint is the dark --surface at the same
     78%, so the two modes are the same material rather than two different
     ones. The veil goes deeper (24% -> 55%) because a scrim over a dark page
     has far less luminance difference to work with: the alpha that reads as
     "behind glass" on light reads as "nothing happened" on dark. Both numbers
     are the ones --modal-scrim-bg already shipped in each mode. */
  --material-chrome-bg: rgba(26, 29, 34, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.55);
}


/* ═══ STATUS INK — completing a half-built family (KNOWN_ISSUES #176) ═══════
   The status palette shipped `--st-*` (saturated) and `--st-*-soft` (tinted)
   but never an ink to sit on the soft fill. With no ink available, 40 badges
   reached for the saturated fill with white text instead, which measured
   2.64:1 on --st-done and 1.74:1 on the dark-mode --c-* hues.

   A saturated fill is a *dot* colour, not a *badge* colour. The badge pattern
   this system already uses correctly everywhere else is soft fill + dark ink
   (see --tag-*-bg/-fg and the v2 --e-*-tile/-ink). These three inks complete
   that pattern for status. Verified >=6.5:1 light, >=7.0:1 dark. */
:root {
  --st-done-ink:    #2f5c1f;   /* 6.79:1 on --st-done-soft    */
  --st-blocked-ink: #8f2436;   /* 6.97:1 on --st-blocked-soft */
  --st-review-ink:  #6b5214;   /* 6.51:1 on --st-review-soft  */

  /* ── Glyph inks for the SOLID greens (added 2026-08-16) ──────────────────
     The three inks above pair with the SOFT fills. A glyph sitting on the
     SOLID fill is a different pairing and had no token, so nine hand-rolled
     check boxes reached for a hardcoded #fff instead — which measures 2.41:1
     on --c-olive light, 1.94:1 dark, and 2.64:1 on --st-done. WCAG wants 3:1
     for a graphical object, so those checks were failing in BOTH themes.
     Both fills are mid-luminance greens, so the readable ink is DARK in both
     modes and neither token needs a .dark override. Measured for #123018:
       --c-olive  #5fbb4d light 5.95:1 · #72cf5e dark 7.39:1
       --st-done  #45b54a          5.45:1 in both (it does not change by mode)
     Chosen over a near-black (#0d1f0c scored ~7-9:1) because a deep forest
     green reads as intentional rather than harsh, and every value here clears
     4.5:1 — the TEXT threshold, well above the 3:1 this actually needs.
     Use these anywhere a mark sits on the solid green; never #fff.
     See claude/KNOWN_ISSUES.md #196. */
  --c-olive-fg: #123018;
  --st-done-fg: #123018;
  /* Clay is a mid-luminance terracotta in both modes, so like the greens above
     its readable glyph/text ink is DARK and needs no .dark override. White on it
     measures 2.46:1 light / 2.09:1 dark — the portal inbox badges were sitting
     there. #33200f measures 6.31 / 7.42 and stays in the clay hue family. */
  --c-clay-fg: #33200f;
}
.dark {
  /* --st-review-soft had no dark variant at all, so a dark-mode review badge
     was rendering a light cream fill. That gap is why this family could not be
     completed by adding inks alone. */
  --st-review-soft: #3a3320;
  --st-done-ink:    #a8d489;   /* 7.24:1 */
  --st-blocked-ink: #f0a08c;   /* 7.04:1 */
  --st-review-ink:  #e0c98a;   /* 7.70:1 */
}

/* ═══ DOCUMENT INK — FIXED LIGHT, DELIBERATELY NOT THEMED ══════════════════
   Printed and print-preview surfaces do not follow app theming, and must not:
   an A4 sheet is white in dark mode too. `.tmr-sheet` is literally 794px with
   `print-color-adjust: exact`; the same is true of inventory asset labels,
   goods slips, agent documents and the PDF-maker page preview.

   Those surfaces were reaching for v1's ink values as literals, which on white
   paper measure #7b8087 at 3.98:1 and #a39b8b at 2.76:1 — a real legibility
   problem on a printed timesheet, just not an app-chrome one. Tokenising them
   onto --ink-* would be worse: in dark mode the text would go near-white on
   white paper.

   So documents get their own ramp with NO .dark override. That absence is the
   feature, not an omission. Verified on #ffffff. */
:root {
  --doc-ink:    #23251f;   /* 15.5:1 — document body and headings */
  --doc-ink-2:  #4f545b;   /*  7.6:1 — secondary document text    */
  --doc-meta:   #63686f;   /*  5.6:1 — labels, units, footers     */
}

/* ═══ TYPE FALL-THROUGH FIXES ══════════════════════════════════════════════
   Found by auditing the *rendered* DOM rather than the source: two paths were
   still emitting off-scale type after the codemod. Both are systemic, so they
   belong here rather than in the components. */

/* v1 line ~445 gives form controls `font-family: inherit` but NOT font-size,
   so every <button> without an explicit size fell through to Chrome's UA
   default of 13.3333px — 98 such elements on the dashboard alone (.ws-switch,
   .sb-brand-collapse, .ws-meta, .ws-chev …). A browser default is not a
   design decision. line-height is deliberately left alone: inputs rely on
   their own for vertical centring. */
button, input, textarea, select { font-size: inherit; }

/* --notif-title-size was still 13.5px, a frozen half-step, and it feeds
   .toast-title, .tprop-title and .aria-obs-title — every toast, Aria chip and
   proposal card in the app. Title now sits one rung above body so the
   hierarchy survives the move onto the scale. */
:root {
  --notif-title-size: var(--t-body-size);    /* 13.5 -> 14 */
  --notif-body-size:  var(--t-label-size);   /* 13, already on a rung */
}

/* ═══ TYPE UTILITIES ═══════════════════════════════════════════════════════
   Apply a complete role in one class. Prefer these in new markup over
   hand-setting font-size, which is how the 68-value sprawl started. */
.t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--t-display-weight); letter-spacing: var(--t-display-track); color: var(--ink); }
.t-title   { font-size: var(--t-title-size);   line-height: var(--t-title-lh);   font-weight: var(--t-title-weight);   letter-spacing: var(--t-title-track);   color: var(--ink); }
.t-heading { font-size: var(--t-heading-size); line-height: var(--t-heading-lh); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-track); color: var(--ink); }
.t-strong  { font-size: var(--t-strong-size);  line-height: var(--t-strong-lh);  font-weight: var(--t-strong-weight);  letter-spacing: var(--t-strong-track);  color: var(--ink); }
.t-body    { font-size: var(--t-body-size);    line-height: var(--t-body-lh);    font-weight: var(--t-body-weight);    letter-spacing: var(--t-body-track);    color: var(--ink-2); }
.t-label   { font-size: var(--t-label-size);   line-height: var(--t-label-lh);   font-weight: var(--t-label-weight);   letter-spacing: var(--t-label-track);   color: var(--ink); }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-weight: var(--t-caption-weight); letter-spacing: var(--t-caption-track); color: var(--ink-3); }
.t-micro   { font-size: var(--t-micro-size);   line-height: var(--t-micro-lh);   font-weight: var(--t-micro-weight);   letter-spacing: var(--t-micro-track);   color: var(--ink-3); }


/* ═══ ENTITY ICON TILE ═════════════════════════════════════════════════════
   The one sanctioned use of entity color. Pair with window.entityHue(id) so
   an object keeps the same hue on every screen it appears — that stability is
   what turns color into identity rather than decoration.

     <span class="etile" data-hue="blue"><svg …/></span>

   Sizes: .etile (28px, list rows) · .etile.md (36px, cards) · .etile.lg (48px). */
.etile {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--tile-sm); height: var(--tile-sm);
  border-radius: var(--r-control);
  background: var(--e-slate-tile);
  color: var(--e-slate-ink);
}
.etile.md { width: var(--tile-md); height: var(--tile-md); border-radius: var(--r-card); }
.etile.lg { width: var(--tile-lg); height: var(--tile-lg); border-radius: var(--r-card); }
.etile > svg, .etile > .icn { width: var(--icon-sm); height: var(--icon-sm); }
.etile.md > svg, .etile.md > .icn { width: var(--icon-md); height: var(--icon-md); }
.etile.lg > svg, .etile.lg > .icn { width: var(--icon-lg); height: var(--icon-lg); }

.etile[data-hue="blue"]   { background: var(--e-blue-tile);   color: var(--e-blue-ink);   }
.etile[data-hue="teal"]   { background: var(--e-teal-tile);   color: var(--e-teal-ink);   }
.etile[data-hue="green"]  { background: var(--e-green-tile);  color: var(--e-green-ink);  }
.etile[data-hue="amber"]  { background: var(--e-amber-tile);  color: var(--e-amber-ink);  }
.etile[data-hue="orange"] { background: var(--e-orange-tile); color: var(--e-orange-ink); }
.etile[data-hue="rose"]   { background: var(--e-rose-tile);   color: var(--e-rose-ink);   }
.etile[data-hue="violet"] { background: var(--e-violet-tile); color: var(--e-violet-ink); }
.etile[data-hue="slate"]  { background: var(--e-slate-tile);  color: var(--e-slate-ink);  }


/* ═══ STATE CONTRACTS ══════════════════════════════════════════════════════
   Applied to the shared .btn so the fix propagates rather than being
   re-solved per component. */

/* Disabled is a flat fill, never an opacity. */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
  opacity: 1;
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  border-color: var(--disabled-border);
  box-shadow: none;
  pointer-events: none;
}

/* Keyboard focus is visible everywhere; mouse focus stays quiet.
   Text fields (input/select/textarea) are deliberately NOT in this list: the
   "one clean indicator" rule (CLAUDE.md -> Focus rings) gives them a plain
   accent border-color change instead (see line ~2628), never this glow ring.
   This selector used to include them, which stacked its box-shadow on top of
   that border-color change every time — the exact double-ring bug the rule
   bans, and it silently overrode the earlier exclusion since it lands later
   in the cascade at equal specificity. Boxed controls (checkbox/switch) keep
   their own scoped --focus-ring via s-formkit.css, which is correct and
   unaffected by this change. */
.btn:focus-visible,
.etile:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Control geometry on the 4pt grid (v1 shipped 38px height / 7px gap). */
.btn { height: var(--control-h); gap: var(--space-inline); border-radius: var(--r-control); }
.btn.sm { height: var(--control-h-sm); }
.btn.lg { height: var(--control-h-lg); }
.btn.primary:active:not(:disabled) { background: var(--accent-700); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ── Add subtask: collapsed by default, slides open ─────────────────────────
   The draft row used to sit permanently open, so an empty task modal showed a
   nameless input with no sign it was for subtasks. Now an explicit named
   control, matching the rule applied to the property chips: a control says
   what it does rather than relying on a glyph. */
.create-sub-open {
  display: inline-flex; align-items: center; gap: var(--space-inline);
  min-height: var(--control-h); padding: 0 var(--space-item);
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--t-label-size); font-weight: var(--t-label-weight);
  cursor: pointer; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.create-sub-open:hover { background: var(--state-hover); border-color: var(--border-strong); color: var(--ink); }
.create-sub-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.create-sub-open .icn { color: var(--ink-3); }
.create-sub-open:hover .icn { color: var(--ink); }

/* The reveal. Height is not animatable from auto, so the block animates its
   own entrance rather than a max-height guess that clips longer content. */
.create-sub-add-block.open { animation: createSubOpen var(--dur-over) var(--ease) both; }
@keyframes createSubOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .create-sub-add-block.open { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Organization ▸ Access — the department access matrix (P1a)
   Editorial Calm: hairline rows on the page background, small-caps column
   headers, no per-cell card and no grid of bordered boxes. The only accent
   moment is the active level in a cell.
   Lives here beside .orgc-* rather than in its own stylesheet: the
   Organization route is a shared-bundle screen, and an unrouted CSS file
   lands in the deferred module-styles bucket (see stelaah-planner.css in
   scripts/build-app-runtime.sh) where a fast direct navigation renders the
   page unstyled.
   Spacing note: --sp-N are STEP INDICES on the 4pt ladder (--sp-1 is 4px,
   --sp-3 is 12px, --sp-12 is 48px), not pixel counts. Role tokens
   (--space-item / --space-group / --space-block / --space-section) say what
   the spacing is FOR and are preferred.
   ════════════════════════════════════════════════════════════════════ */
.orgc-access { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-page) var(--space-section); }
.axm-wrap { max-width: 1080px; }
.axm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-group); padding: var(--space-block) 0 var(--space-group); }
.axm-h { font: var(--t-h3); margin: 0; }
.axm-sub { margin: var(--space-tight) 0 0; color: var(--ink-3); font-size: var(--t-label-size); max-width: 62ch; }
.axm-state { flex: none; font-size: var(--t-micro-size); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: var(--space-tight) var(--space-item); border-radius: var(--r-pill); background: var(--bg-sunken); }
.axm-state.on { color: var(--accent); background: var(--accent-soft); }
.axm-grandfather { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) var(--space-group); border-radius: var(--r-12); background: var(--bg-sunken); color: var(--ink-2); font-size: var(--t-label-size); margin-bottom: var(--space-block); }
.axm-grandfather > span { flex: 1; min-width: 0; }
.axm-note { color: var(--ink-3); font-size: var(--t-label-size); margin: 0 0 var(--space-group); max-width: 68ch; }

/* the matrix itself — hairlines, never boxes */
.axm-tbl { display: flex; flex-direction: column; }
.axm-r { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border); }
.axm-r-hd { padding: var(--space-inline) 0; border-bottom: 1px solid var(--border-strong); }
.axm-r-hd > * { font-size: var(--t-micro-size); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.axm-row { transition: background var(--dur-fast) var(--ease-out); }
.axm-row:hover { background: var(--bg-hover); }
.axm-c-dept { min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.axm-c { min-width: 0; position: relative; display: flex; align-items: center; gap: var(--space-tight); }
.axm-dept { display: flex; align-items: center; gap: var(--space-inline); background: none; border: 0; padding: 0; font: inherit; font-weight: 550; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.axm-dept:hover { color: var(--accent); }
.axm-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }
.axm-dept-s { font-size: var(--t-caption-size); color: var(--ink-3); padding-left: var(--space-group); }
.axm-person { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; font-weight: 550; }

/* three-state level control — one control, the whole choice visible */
.axm-seg { display: inline-flex; border-radius: var(--r-9); background: var(--bg-sunken); padding: 2px; gap: 2px; }
.axm-seg-b { border: 0; background: none; border-radius: var(--r-7); padding: var(--space-tight) var(--space-inline); font-size: var(--t-caption-size); line-height: 1.4; color: var(--ink-3); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.axm-seg-b:hover:not(:disabled) { color: var(--ink); }
.axm-seg-b.on { background: var(--surface); color: var(--ink); font-weight: 550; box-shadow: var(--shadow-xs); }
.axm-seg-b.on.off { color: var(--ink-3); }
.axm-seg-b:disabled { cursor: default; color: var(--ink-disabled); }
.axm-clear { border: 0; background: none; color: var(--ink-4); cursor: pointer; padding: 0; display: inline-flex; border-radius: var(--r-7); }
.axm-clear:hover { color: var(--ink); background: var(--bg-hover); }

/* sections */
.axm-sec { padding-top: var(--space-section); }
.axm-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.axm-sec-t { font: var(--t-h4); margin: 0; }
.axm-none { color: var(--ink-3); font-size: var(--t-label-size); padding: var(--space-group) 0; }
.axm-add { padding: var(--space-item) 0; max-width: 320px; }
.axm-mrow { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border); }
.axm-mrow-s { font-size: var(--t-caption-size); color: var(--ink-3); }

/* switch — the shared shape used by the rest of the app's toggles */
.axm-switch { width: 40px; height: 24px; border-radius: var(--r-pill); border: 0; background: var(--border-strong); padding: 2px; cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease-out); }
.axm-switch > span { display: block; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur-fast) var(--ease-out); }
.axm-switch.on { background: var(--accent); }
.axm-switch.on > span { transform: translateX(16px); }
.axm-switch:disabled { background: var(--disabled-bg); cursor: default; }
.axm-switch:disabled > span { background: var(--disabled-fg); }

/* empty state */
.axm-empty { text-align: center; padding: var(--sp-12) var(--space-group); max-width: 46ch; margin: 0 auto; }
.axm-empty-t { font: var(--t-h3); margin: var(--space-group) 0 var(--space-inline); }
.axm-empty-b { color: var(--ink-3); font-size: var(--t-label-size); margin: 0 0 var(--space-block); }

/* department detail */
.axm-route { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border); }
.axm-route-ic { color: var(--ink-3); display: inline-flex; }
.axm-route-t { font-weight: 550; font-size: var(--t-label-size); }
.axm-route-f { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.axm-route-lbl { font-size: var(--t-micro-size); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.axm-route-unit { font-size: var(--t-caption-size); color: var(--ink-3); }
.axm-days { width: 60px; height: 32px; text-align: center; }
.axm-route-rung { font-size: var(--t-caption-size); color: var(--ink-3); white-space: nowrap; }
.axm-chips { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.axm-chip { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-item); border-radius: var(--r-pill); background: var(--bg-sunken); font-size: var(--t-caption-size); }
.axm-chip-x { border: 0; background: none; color: var(--ink-4); cursor: pointer; display: inline-flex; padding: 0; }
.axm-chip-x:hover { color: var(--ink); }
.axm-facing { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); padding-top: var(--space-group); border-top: 1px solid var(--border); }
.axm-facing-t { font-weight: 550; font-size: var(--t-label-size); }
.axm-facing-s { color: var(--ink-3); font-size: var(--t-caption-size); max-width: 46ch; }
.axm-crow { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border); }

/* change log */
.axm-log { display: flex; flex-direction: column; }
.axm-log-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border-bottom: 1px solid var(--border); font-size: var(--t-caption-size); color: var(--ink-2); }
.axm-log-d { color: var(--ink-3); }
.axm-log-t { color: var(--ink-4); flex: none; }

/* department template picker in the New department modal */
.dept-tpl { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.dept-tpl-b { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline); border: 0; background: none; border-radius: var(--r-9); cursor: pointer; text-align: left; color: var(--ink); }
.dept-tpl-b:hover { background: var(--bg-hover); }
.dept-tpl-b.on { background: var(--accent-soft); }
.dept-tpl-b > .grow { display: flex; flex-direction: column; min-width: 0; }
.dept-tpl-b b { font-size: var(--t-label-size); font-weight: 550; }
.dept-tpl-b > .grow > span { font-size: var(--t-caption-size); color: var(--ink-3); }

/* Approvals: the type chip row and the rung chain */
.appr-chips { display: flex; flex-wrap: wrap; gap: var(--space-inline); padding: 0 0 var(--space-group); }
.appr-chip { display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-item); border-radius: var(--r-pill); border: 0; background: var(--bg-sunken); color: var(--ink-3); font-size: var(--t-caption-size); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.appr-chip:hover { color: var(--ink); }
.appr-chip.on { background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.appr-chip-n { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.appr-chip.on .appr-chip-n { color: var(--accent); }
.appr-rung { display: inline-flex; align-items: center; gap: var(--space-tight); flex: none; }
.appr-rung-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--border-strong); }
.appr-rung-dot.on { background: var(--accent); }
.appr-rung-line { width: 10px; height: 1px; background: var(--border); }
.appr-rung-lbl { font-size: var(--t-caption-size); color: var(--ink-3); margin-left: var(--space-tight); }
.appr-xrow { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 0; border-bottom: 1px solid var(--border); }
.appr-xrow:hover { background: var(--bg-hover); }
.appr-xrow-ic { flex: none; display: inline-flex; }
.appr-xrow-t { font-weight: 550; font-size: var(--t-label-size); }
.appr-xrow-s { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-3); flex-wrap: wrap; }
.appr-xrow-sep { color: var(--ink-4); }
.appr-xrow-kind { font-size: var(--t-micro-size); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); flex: none; }

@media (max-width: 900px) {
  .axm-r { grid-template-columns: minmax(0, 1fr); gap: var(--space-inline); }
  .axm-r-hd { display: none; }
  .axm-c { justify-content: space-between; }
  .axm-c::before { content: attr(data-label); font-size: var(--t-micro-size); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
  .axm-route { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP THEME PRESETS — SET 9 §1 · §10
   ───────────────────────────────────────────────────────────────────────────
   Five presets on top of the default. A preset is a TOKEN OVERRIDE and nothing
   else: there is not one per-component rule anywhere in this layer, and adding
   one is how this system dies. If a preset seems to need a component rule, the
   component is reading a hardcoded value that should have been a token.

   WHAT A PRESET MAY CHANGE
     ink ramp · surfaces · border colour AND WIDTH (--hairline-w) · the four
     elevation rungs · the state layer · the chrome/veil materials.

   WHAT NO PRESET MAY TOUCH (§10, the theme identity guard)
     · The RADIUS LADDER and the spacing scale. Immutable. A theme is a
       finish, not a different product.
     · --font-serif and the type roles. The serif display stays serif in every
       preset; that signature is not a preference.
     · The HAIRLINE BUDGET. A preset changes how a line LOOKS, never how many
       there are: no preset may reintroduce cards, borders or fills on
       collection rows (CLAUDE.md -> "Avoid visual jumble").
     · --focus / --focus-ring. Focus is the one always-blue, and a theme that
       recoloured it could hide the keyboard ring against its own chrome.
     · --accent and its family. Accent belongs to the WORKSPACE
       ([data-accent], line ~2212) and is the tenant's identity, not the
       viewer's preference. This is also why these blocks and the accent blocks
       can never fight: they touch disjoint token sets. A preset expresses its
       character through surface, line and elevation — which is what actually
       separates Notion from Linear from ClickUp. Their brand hues are
       explicitly rejected for Stelaah (DESIGN_LANGUAGE.md reference tables:
       Notion blue -> No, ClickUp purple -> No, Seline cyan -> No).

   WHY `:not(.dark)` ON EVERY LIGHT BLOCK
     This layer is declared LAST, and `.dark` lives on <body> at (0,1,0). A
     bare `[data-app-theme="paper"]` is also (0,1,0) but comes later, so in
     dark mode it would out-order `.dark` and repaint the whole app with light
     surfaces. `:not(.dark)` makes the two halves MUTUALLY EXCLUSIVE by
     construction instead of by source order — the failure mode this codebase
     has hit repeatedly (focus-ring override, body cascade, sidebar scope).
     Both halves land at (0,2,0), matching the [data-accent].dark precedent.

   WHERE THE ATTRIBUTE GOES
     On <body> AND on the .app wrapper, exactly like data-accent, written by
     AppTheme in s-app-theme.jsx. NEVER on <html>: :root tokens are computed on
     <html> and .dark on <body> overrides them for the whole subtree, so a
     theme on <html> would be invisible in dark mode.

   CONTRAST
     Every ink step in every preset was generated against the theme's own
     surfaces and verified to clear the SHIPPED baseline's worst surface
     (ink >=15.2:1, ink-2 >=8.6, ink-3 >=5.2, ink-4 >=4.3) on --bg,
     --bg-sidebar, --bg-sunken, --surface AND --surface-2, in both modes.
     No preset is legible only on its best surface.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Paper — after Notion.
   Warm paper canvas. Lines do the structuring, shadows stay out of it. */
[data-app-theme="paper"]:not(.dark) {
  --ink:          #13110f;
  --ink-2:        #443d35;
  --ink-3:        #685d50;
  --ink-4:        #75695a;
  --ink-disabled: #a39788;

  --bg:          #f6f5f4;
  --bg-sidebar:  #efedea;
  --bg-sunken:   #eae7e2;
  --surface:     #fcfcfc;
  --surface-2:   #f3f2f1;
  --overlay:     #fcfcfc;

  --hairline-w:    1px;
  --border:        rgba(22,24,29, 0.130);
  --border-strong: rgba(22,24,29, 0.210);
  --border-subtle: rgba(22,24,29, 0.075);

  --elev-1: 0 1px 1px rgba(38,32,26,0.030),
            0 0 0 var(--hairline-w) rgba(38,32,26,0.045);
  --elev-2: 0 1px 2px rgba(38,32,26,0.035), 0 4px 8px -2px rgba(38,32,26,0.060),
            0 0 0 var(--hairline-w) rgba(38,32,26,0.050);
  --elev-3: 0 1px 2px rgba(38,32,26,0.045), 0 9px 18px -4px rgba(38,32,26,0.090),
            0 0 0 var(--hairline-w) rgba(38,32,26,0.060);
  --elev-4: 0 3px 4px rgba(38,32,26,0.060), 0 18px 36px -9px rgba(38,32,26,0.140),
            0 0 0 var(--hairline-w) rgba(38,32,26,0.070);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(22,24,29,0.040);
  --state-active:   rgba(22,24,29,0.080);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(252,252,252, 0.78);
  --material-veil-bg:   rgba(38,32,26, 0.24);
  --modal-scrim-bg:     var(--material-veil-bg);
}
[data-app-theme="paper"].dark {
  --ink:          #f9f9f8;
  --ink-2:        #c2bdb8;
  --ink-3:        #999288;
  --ink-4:        #8c8378;
  --ink-disabled: #5e5951;

  --bg:          #171615;
  --bg-sidebar:  #100f0e;
  --bg-sunken:   #201e1c;
  --surface:     #1d1c1a;
  --surface-2:   #232120;
  --overlay:     #1d1c1a;

  --hairline-w:    1px;
  --border:        rgba(255,255,255, 0.123);
  --border-strong: rgba(255,255,255, 0.199);
  --border-subtle: rgba(255,255,255, 0.071);

  --elev-1: 0 1px 1px rgba(0,0,0,0.078),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.055);
  --elev-2: 0 1px 2px rgba(0,0,0,0.091), 0 4px 8px -2px rgba(0,0,0,0.156),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.070);
  --elev-3: 0 1px 2px rgba(0,0,0,0.117), 0 9px 18px -4px rgba(0,0,0,0.234),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.085);
  --elev-4: 0 3px 4px rgba(0,0,0,0.156), 0 18px 36px -9px rgba(0,0,0,0.364),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.100);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(255,255,255,0.055);
  --state-active:   rgba(255,255,255,0.100);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(29,28,26, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.58);
  --modal-scrim-bg:     var(--material-veil-bg);
}

/* ── Signal — after Linear.
   Cool graphite. Fine lines, tight elevation, nothing loose. */
[data-app-theme="signal"]:not(.dark) {
  --ink:          #141519;
  --ink-2:        #3d404a;
  --ink-3:        #5b616f;
  --ink-4:        #676d7e;
  --ink-disabled: #979caa;

  --bg:          #fafafb;
  --bg-sidebar:  #f1f2f3;
  --bg-sunken:   #eaebed;
  --surface:     #ffffff;
  --surface-2:   #f8f8f8;
  --overlay:     #ffffff;

  --hairline-w:    1px;
  --border:        rgba(22,24,29, 0.090);
  --border-strong: rgba(22,24,29, 0.160);
  --border-subtle: rgba(22,24,29, 0.050);

  --elev-1: 0 1px 1px rgba(16,18,22,0.035),
            0 0 0 var(--hairline-w) rgba(16,18,22,0.045);
  --elev-2: 0 1px 2px rgba(16,18,22,0.045), 0 6px 12px -3px rgba(16,18,22,0.075),
            0 0 0 var(--hairline-w) rgba(16,18,22,0.050);
  --elev-3: 0 2px 3px rgba(16,18,22,0.060), 0 11px 22px -6px rgba(16,18,22,0.110),
            0 0 0 var(--hairline-w) rgba(16,18,22,0.060);
  --elev-4: 0 3px 6px rgba(16,18,22,0.080), 0 22px 44px -11px rgba(16,18,22,0.170),
            0 0 0 var(--hairline-w) rgba(16,18,22,0.070);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(22,24,29,0.040);
  --state-active:   rgba(22,24,29,0.080);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(255,255,255, 0.78);
  --material-veil-bg:   rgba(16,18,22, 0.24);
  --modal-scrim-bg:     var(--material-veil-bg);
}
[data-app-theme="signal"].dark {
  --ink:          #f3f3f4;
  --ink-2:        #b7babf;
  --ink-3:        #8b8f98;
  --ink-4:        #7c818b;
  --ink-disabled: #53575e;

  --bg:          #111213;
  --bg-sidebar:  #0b0b0d;
  --bg-sunken:   #191a1c;
  --surface:     #171719;
  --surface-2:   #1c1d1f;
  --overlay:     #171719;

  --hairline-w:    1px;
  --border:        rgba(255,255,255, 0.085);
  --border-strong: rgba(255,255,255, 0.152);
  --border-subtle: rgba(255,255,255, 0.048);

  --elev-1: 0 1px 1px rgba(0,0,0,0.091),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.055);
  --elev-2: 0 1px 2px rgba(0,0,0,0.117), 0 6px 12px -3px rgba(0,0,0,0.195),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.070);
  --elev-3: 0 2px 3px rgba(0,0,0,0.156), 0 11px 22px -6px rgba(0,0,0,0.286),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.085);
  --elev-4: 0 3px 6px rgba(0,0,0,0.208), 0 22px 44px -11px rgba(0,0,0,0.442),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.100);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(255,255,255,0.055);
  --state-active:   rgba(255,255,255,0.100);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(23,23,25, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.58);
  --modal-scrim-bg:     var(--material-veil-bg);
}

/* ── Bold — after ClickUp.
   Flat and separated. Heavier lines carry the hierarchy, not depth. */
[data-app-theme="bold"]:not(.dark) {
  --ink:          #0f1013;
  --ink-2:        #393e46;
  --ink-3:        #575e6c;
  --ink-4:        #626b7a;
  --ink-disabled: #9198a6;

  --bg:          #f5f5f6;
  --bg-sidebar:  #ebedef;
  --bg-sunken:   #e4e6e9;
  --surface:     #fcfcfd;
  --surface-2:   #f2f3f4;
  --overlay:     #fcfcfd;

  --hairline-w:    1.5px;
  --border:        rgba(22,24,29, 0.180);
  --border-strong: rgba(22,24,29, 0.280);
  --border-subtle: rgba(22,24,29, 0.105);

  --elev-1: 0 1px 1px rgba(20,24,30,0.020),
            0 0 0 var(--hairline-w) rgba(20,24,30,0.045);
  --elev-2: 0 1px 2px rgba(20,24,30,0.025), 0 3px 6px -2px rgba(20,24,30,0.045),
            0 0 0 var(--hairline-w) rgba(20,24,30,0.050);
  --elev-3: 0 1px 2px rgba(20,24,30,0.030), 0 6px 12px -3px rgba(20,24,30,0.060),
            0 0 0 var(--hairline-w) rgba(20,24,30,0.060);
  --elev-4: 0 2px 3px rgba(20,24,30,0.040), 0 13px 26px -6px rgba(20,24,30,0.090),
            0 0 0 var(--hairline-w) rgba(20,24,30,0.070);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(22,24,29,0.040);
  --state-active:   rgba(22,24,29,0.080);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(252,252,253, 0.78);
  --material-veil-bg:   rgba(20,24,30, 0.24);
  --modal-scrim-bg:     var(--material-veil-bg);
}
[data-app-theme="bold"].dark {
  --ink:          #fbfbfc;
  --ink-2:        #bdc0c5;
  --ink-3:        #90959d;
  --ink-4:        #818690;
  --ink-disabled: #565b63;

  --bg:          #171819;
  --bg-sidebar:  #101112;
  --bg-sunken:   #1f2022;
  --surface:     #1c1d1f;
  --surface-2:   #222325;
  --overlay:     #1c1d1f;

  --hairline-w:    1.5px;
  --border:        rgba(255,255,255, 0.171);
  --border-strong: rgba(255,255,255, 0.266);
  --border-subtle: rgba(255,255,255, 0.100);

  --elev-1: 0 1px 1px rgba(0,0,0,0.052),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.055);
  --elev-2: 0 1px 2px rgba(0,0,0,0.065), 0 3px 6px -2px rgba(0,0,0,0.117),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.070);
  --elev-3: 0 1px 2px rgba(0,0,0,0.078), 0 6px 12px -3px rgba(0,0,0,0.156),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.085);
  --elev-4: 0 2px 3px rgba(0,0,0,0.104), 0 13px 26px -6px rgba(0,0,0,0.234),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.100);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(255,255,255,0.055);
  --state-active:   rgba(255,255,255,0.100);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(28,29,31, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.58);
  --modal-scrim-bg:     var(--material-veil-bg);
}

/* ── Linen — Stelaah original.
   Warm and soft. Barely-there lines, generous diffuse shadow. */
[data-app-theme="linen"]:not(.dark) {
  --ink:          #161310;
  --ink-2:        #483d33;
  --ink-3:        #6c5d4d;
  --ink-4:        #7b6957;
  --ink-disabled: #a99785;

  --bg:          #f8f7f5;
  --bg-sidebar:  #f3efeb;
  --bg-sunken:   #eee8e2;
  --surface:     #fefefe;
  --surface-2:   #f6f4f3;
  --overlay:     #fefefe;

  --hairline-w:    1px;
  --border:        rgba(22,24,29, 0.060);
  --border-strong: rgba(22,24,29, 0.120);
  --border-subtle: rgba(22,24,29, 0.035);

  --elev-1: 0 1px 3px rgba(52,40,28,0.040),
            0 0 0 var(--hairline-w) rgba(52,40,28,0.045);
  --elev-2: 0 2px 3px rgba(52,40,28,0.055), 0 11px 22px -5px rgba(52,40,28,0.085),
            0 0 0 var(--hairline-w) rgba(52,40,28,0.050);
  --elev-3: 0 3px 5px rgba(52,40,28,0.075), 0 22px 44px -11px rgba(52,40,28,0.130),
            0 0 0 var(--hairline-w) rgba(52,40,28,0.060);
  --elev-4: 0 6px 11px rgba(52,40,28,0.100), 0 43px 86px -22px rgba(52,40,28,0.200),
            0 0 0 var(--hairline-w) rgba(52,40,28,0.070);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(22,24,29,0.040);
  --state-active:   rgba(22,24,29,0.080);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(254,254,254, 0.78);
  --material-veil-bg:   rgba(52,40,28, 0.24);
  --modal-scrim-bg:     var(--material-veil-bg);
}
[data-app-theme="linen"].dark {
  --ink:          #fbfafa;
  --ink-2:        #c4beb7;
  --ink-3:        #9d9286;
  --ink-4:        #908376;
  --ink-disabled: #61594f;

  --bg:          #181615;
  --bg-sidebar:  #11100f;
  --bg-sunken:   #211f1c;
  --surface:     #1e1c1a;
  --surface-2:   #24221f;
  --overlay:     #1e1c1a;

  --hairline-w:    1px;
  --border:        rgba(255,255,255, 0.057);
  --border-strong: rgba(255,255,255, 0.114);
  --border-subtle: rgba(255,255,255, 0.033);

  --elev-1: 0 1px 3px rgba(0,0,0,0.104),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.055);
  --elev-2: 0 2px 3px rgba(0,0,0,0.143), 0 11px 22px -5px rgba(0,0,0,0.221),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.070);
  --elev-3: 0 3px 5px rgba(0,0,0,0.195), 0 22px 44px -11px rgba(0,0,0,0.338),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.085);
  --elev-4: 0 6px 11px rgba(0,0,0,0.260), 0 43px 86px -22px rgba(0,0,0,0.520),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.100);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(255,255,255,0.055);
  --state-active:   rgba(255,255,255,0.100);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(30,28,26, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.58);
  --modal-scrim-bg:     var(--material-veil-bg);
}

/* ── Depth — Stelaah original.
   Shadow-first. Elevation separates the layers so lines barely have to. */
[data-app-theme="depth"]:not(.dark) {
  --ink:          #16171a;
  --ink-2:        #3e4249;
  --ink-3:        #5c626c;
  --ink-4:        #686f7a;
  --ink-disabled: #989ea7;

  --bg:          #fcfcfc;
  --bg-sidebar:  #f3f3f4;
  --bg-sunken:   #ecedee;
  --surface:     #ffffff;
  --surface-2:   #f9f9f9;
  --overlay:     #ffffff;

  --hairline-w:    1px;
  --border:        rgba(22,24,29, 0.050);
  --border-strong: rgba(22,24,29, 0.110);
  --border-subtle: rgba(22,24,29, 0.030);

  --elev-1: 0 1px 2px rgba(8,10,14,0.050),
            0 0 0 var(--hairline-w) rgba(8,10,14,0.045);
  --elev-2: 0 1px 2px rgba(8,10,14,0.070), 0 9px 18px -5px rgba(8,10,14,0.110),
            0 0 0 var(--hairline-w) rgba(8,10,14,0.050);
  --elev-3: 0 3px 5px rgba(8,10,14,0.100), 0 18px 36px -9px rgba(8,10,14,0.170),
            0 0 0 var(--hairline-w) rgba(8,10,14,0.060);
  --elev-4: 0 6px 9px rgba(8,10,14,0.140), 0 37px 74px -18px rgba(8,10,14,0.260),
            0 0 0 var(--hairline-w) rgba(8,10,14,0.070);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(22,24,29,0.040);
  --state-active:   rgba(22,24,29,0.080);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(255,255,255, 0.78);
  --material-veil-bg:   rgba(8,10,14, 0.24);
  --modal-scrim-bg:     var(--material-veil-bg);
}
[data-app-theme="depth"].dark {
  --ink:          #f0f1f1;
  --ink-2:        #b5b8bc;
  --ink-3:        #898e94;
  --ink-4:        #7b8087;
  --ink-disabled: #52555a;

  --bg:          #0f1011;
  --bg-sidebar:  #09090a;
  --bg-sunken:   #171819;
  --surface:     #141517;
  --surface-2:   #1a1b1c;
  --overlay:     #141517;

  --hairline-w:    1px;
  --border:        rgba(255,255,255, 0.048);
  --border-strong: rgba(255,255,255, 0.104);
  --border-subtle: rgba(255,255,255, 0.028);

  --elev-1: 0 1px 2px rgba(0,0,0,0.130),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.055);
  --elev-2: 0 1px 2px rgba(0,0,0,0.182), 0 9px 18px -5px rgba(0,0,0,0.286),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.070);
  --elev-3: 0 3px 5px rgba(0,0,0,0.260), 0 18px 36px -9px rgba(0,0,0,0.442),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.085);
  --elev-4: 0 6px 9px rgba(0,0,0,0.364), 0 37px 74px -18px rgba(0,0,0,0.676),
            0 0 0 var(--hairline-w) rgba(255,255,255,0.100);
  --shadow-xs: var(--elev-1); --shadow-sm:  var(--elev-1);
  --shadow-md: var(--elev-2); --shadow-lg:  var(--elev-3);
  --shadow-pop: var(--elev-4);

  --state-hover:    rgba(255,255,255,0.055);
  --state-active:   rgba(255,255,255,0.100);
  --state-selected: color-mix(in srgb, var(--accent) 6%, transparent);
  --bg-hover:  var(--state-hover);
  --bg-active: var(--state-active);

  --material-chrome-bg: rgba(20,21,23, 0.78);
  --material-veil-bg:   rgba(0, 0, 0, 0.58);
  --modal-scrim-bg:     var(--material-veil-bg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   APPEARANCE CONTROL — Settings -> Appearance  (SET 9 §2 · §3)
   ───────────────────────────────────────────────────────────────────────────
   One dropdown for mode + theme, and a three-option rail colour row. Custom
   dropdown, never a native <select> (CLAUDE.md hard rule): the OS picker cannot
   carry the live preview, and the preview is the whole reason this is a
   dropdown instead of a list.
   ═══════════════════════════════════════════════════════════════════════════ */

.apth { position: relative; }

.apth-trigger {
  display: flex; align-items: center; gap: var(--space-inline);
  min-width: 232px; height: var(--control-h);
  padding: 0 var(--space-item);
  background: var(--surface);
  border: var(--hairline-w) solid var(--border);
  border-radius: var(--r-control);
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.apth-trigger:hover { border-color: var(--border-strong); }
/* A single accent border change, no ring: this is a field-shaped control and
   the focus-ring law forbids stacking a glow on top of a border change. */
.apth-trigger.on { border-color: var(--accent); }
.apth-trigger-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.apth-trigger-t i { font-style: normal; font-size: var(--t-caption-size); color: var(--ink-3); }
.apth-chev { color: var(--ink-3); flex: none; transition: transform var(--dur-micro) var(--ease); }
.apth-trigger.on .apth-chev { transform: rotate(180deg); }

/* Content-popover band (<=700), so it clears page chrome without entering the
   modal or system-overlay layers. */
.apth-panel {
  /* RIGHT-aligned to the trigger, not left. This control sits at the right end
     of a Settings row, so opening rightwards pushed the panel toward the
     viewport edge; anchoring the right edges keeps it over the row that owns
     it at every width.
     max-height + internal scroll rather than flip-up logic: the panel is 500px
     of fixed content, so on a short window it WILL exceed the space below the
     trigger no matter which way it opens, and a scroll always fits where a flip
     only sometimes does. */
  position: absolute; z-index: 690; top: calc(100% + 6px); right: 0;
  width: 300px; max-width: calc(100vw - 32px);
  max-height: min(66vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-item);
  background: var(--overlay);
  border-radius: var(--r-modal);
  box-shadow: var(--elev-3);
  animation: pop-menu var(--dur-over) var(--ease);
  transform-origin: top right;
}
.apth-lbl {
  font-size: var(--t-micro-size); line-height: var(--t-micro-lh);
  font-weight: var(--t-micro-weight); letter-spacing: var(--t-micro-track);
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--space-inline) var(--space-inline) var(--space-tight);
}
.apth-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-tight); }
.apth-mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-tight); padding: var(--space-item) var(--space-tight);
  border: none; background: transparent; border-radius: var(--r-control);
  color: var(--ink-2); cursor: pointer; font-size: var(--t-caption-size);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.apth-mode:hover { background: var(--state-hover); }
.apth-mode.on { background: var(--state-selected); color: var(--ink); }

.apth-list { display: flex; flex-direction: column; }
.apth-opt {
  display: flex; align-items: center; gap: var(--space-item);
  width: 100%; min-height: var(--row-h);
  padding: var(--space-inline);
  border: none; background: transparent; border-radius: var(--r-control);
  color: var(--ink); cursor: pointer; text-align: left;
  transition: background var(--dur-micro) var(--ease);
}
.apth-opt:hover { background: var(--state-hover); }
.apth-opt.on { background: var(--state-selected); }
.apth-opt-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; font-size: var(--t-label-size); }
.apth-opt-t i { font-style: normal; font-size: var(--t-caption-size); color: var(--ink-3); }
.apth-opt-chk { color: var(--accent); flex: none; }
.apth-note {
  margin: var(--space-inline) 0 0;
  padding: 0 var(--space-inline);
  font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--ink-3);
}

/* ── The preview swatch IS the theme ────────────────────────────────────────
   Three chips carrying the real [data-app-theme] attribute, painted by the same
   block the app uses, so the preview cannot drift from what picking it does. */
.apth-sw {
  display: inline-grid; grid-auto-flow: column; align-items: center;
  width: 34px; height: 22px; flex: none;
  border-radius: 6px;                  /* sub-control ratio: 0.27 x 22 */
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 var(--hairline-w) var(--border) inset;
}
.apth-sw > i { display: block; height: 100%; }
.apth-sw-bg      { width: 12px; background: var(--bg); }
.apth-sw-surface { width: 12px; background: var(--surface); }
.apth-sw-ink     { width: 10px; background: var(--ink-2); }
/* The Calm chip previews the DEFAULT, so it has to escape whichever preset is
   currently painting the app around it. CSS has no "unset back to an ancestor
   layer", so the three default values are restated here for each mode. Six
   numbers, for a 34px preview, sitting next to the presets they are compared
   against. Keep in sync with the v2 :root / .dark blocks above. */
.apth-sw[data-app-theme="calm"] {
  --bg:      #fbfbfc;
  --surface: #ffffff;
  --ink-2:   #40454e;
  --border:  rgba(22, 24, 29, 0.10);
}
.apth-sw[data-app-theme="calm"].dark {
  --bg:      #131519;
  --surface: #1a1d22;
  --ink-2:   #b9bec6;
  --border:  rgba(255, 255, 255, 0.10);
}

/* ── Rail colour: three options, one click each ─────────────────────────── */
.apth-rail { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.apth-rail-opt {
  display: flex; align-items: center; gap: var(--space-inline);
  min-height: var(--control-h);
  padding: var(--space-tight) var(--space-item) var(--space-tight) var(--space-tight);
  background: transparent;
  border: var(--hairline-w) solid var(--border);
  border-radius: var(--r-control);
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.apth-rail-opt:hover { border-color: var(--border-strong); background: var(--state-hover); }
.apth-rail-opt.on { border-color: var(--accent); background: var(--state-selected); }
.apth-rail-sw {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px;                  /* sub-control ratio: 0.27 x 24 */
  box-shadow: 0 0 0 var(--hairline-w) var(--border) inset;
}
/* Charcoal has no hex on purpose: it is the absent state and renders whatever
   --bg-sidebar currently is, which is exactly what choosing it does. */
.apth-rail-sw-follow { background: var(--bg-sidebar); }
.apth-rail-t { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--t-label-size); }
.apth-rail-t i { font-style: normal; font-size: var(--t-caption-size); color: var(--ink-3); }
.apth-rail-chk { color: var(--accent); flex: none; }

@media (max-width: 640px) {
  .apth-trigger { width: 100%; min-width: 0; }
  .apth-panel { right: auto; left: 0; transform-origin: top left; }
  .apth-panel { width: 100%; }
  .apth-rail-opt { flex: 1 1 100%; }
}

/* ── Hit areas for the dense task controls ─────────────────────────────────
   Measured on the Tasks route at 1280x900 (audit UX-016): .tcheck 14-17px,
   .trow-selchk 17px, .subin-go and .subt-caret 22px — all under the Any-Size
   Law's 24px floor, and .tcheck is the completion ring, the single most-used
   control on the page.

   Same treatment as .switch above and for the same reason: the law says grow the
   HIT AREA, never the glyph. These sizes are deliberate (a 14px ring inside a
   dense row is the design), so the box is untouched and an invisible centred
   ::before carries the target. None of these four had a ::before; .tcheck's
   check mark and the carets' glyphs are content or ::after, so nothing is
   displaced. position:relative is required for the overlay to anchor, and is a
   no-op for controls that create no positioned descendants.

   .subin-title is deliberately NOT included: it is a text-cursor inline editor,
   not a button, and widening its hit area would fight text selection.        */
.tcheck, .trow-selchk, .subin-go, .subt-caret { position: relative; }
.tcheck::before, .trow-selchk::before, .subin-go::before, .subt-caret::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}
@media (max-width: 640px) {
  .tcheck::before, .trow-selchk::before, .subin-go::before, .subt-caret::before {
    width: 44px; height: 44px;
  }
}


/* s-formkit.css */
/* ════════════════════════════════════════════════════════════════════════════
   Stelaah — Form Kit (window.FormKit)  ·  s-formkit.css
   ────────────────────────────────────────────────────────────────────────────
   The shared geometry for every small form primitive. Law: CLAUDE.md →
   "Alignment Law". Contract values: DESIGN.md §14.3. Spec: claude/specs/form-kit.md.

   NAMING — read before adding anything here:
     · `s-forms.jsx` / `s-forms.css` are the FORMS BUILDER (window.FormsKit), a
       completely different module. This kit is `s-formkit.*` / window.FormKit.
     · The `.fk-` prefix belongs to the Team Feed kudos modal (s-feed.jsx).
       This kit owns `.fkit-` only.

   WHY THIS FILE EXISTS: stelaah.css carries a bandaid rule listing eighteen
   hand-rolled checkbox classes (.nbk-checkbox, .kb-check-box, .rq-check-box,
   .tp-check-box, .pv-check-box, .sn-check-box, .fk-box, .dlk-check,
   .tdw-sub-check, .ds-check, .ds-cb, .dst-cb, .poll-radio, .fx-check, …) each
   patched with `line-height: 0` because an icon glyph drifted off-centre.
   Eighteen implementations of one 16px box, all wrong the same way. Centering
   here is done by LAYOUT (`display:grid; place-items:center`) so there is
   nothing to drift and nothing to patch.

   RULES THIS FILE KEEPS:
     · No padding / line-height / top: centering. Grid only.
     · Tokens only, no raw hex. Verified in light and dark.
     · Focus: boxed controls get ONE --focus-ring on :focus-visible. Fields get
       an accent border change only. Never both (CLAUDE.md → Focus rings).
     · No horizontal padding or margin on anything that sits on the surface's
       content edge — one left edge per surface (DESIGN.md §14.2).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Geometry constants from DESIGN.md §14.3. These are the CONTRACT; screens
     consume the kit and never restate them. Named as tokens rather than typed
     inline so the acceptance table has exactly one counterpart in code. */
  --fkit-box:       16px;   /* checkbox + radio box                            */
  --fkit-box-r:      4px;   /* sub-control ratio rung: 0.27 x 16 (DESIGN.md §4) */
  --fkit-check:     10px;   /* check glyph inside the box                      */
  --fkit-dot:        6px;   /* radio dot                                       */
  /* Switch geometry. These four ARE the contract values from DESIGN.md 14.3 —
     they are now aliases of the --sw-* tokens in stelaah.css (v2 layer, 13) so
     the kit and the app-wide `.switch` skin cannot drift into two different
     toggles again (SET 9 5). The literal fallback keeps the contract intact if
     this sheet is ever rendered without stelaah.css, which is how the
     alignment fixture used to be able to lie about the kit's geometry. */
  --fkit-sw-w:      var(--sw-w, 36px);     /* switch track width              */
  --fkit-sw-h:      var(--sw-h, 20px);     /* switch track height             */
  --fkit-knob:      var(--sw-knob, 16px);  /* switch knob                     */
  --fkit-sw-inset:  var(--sw-inset, 2px);  /* knob travel inset, both ends    */

  /* The box sits in a cell exactly one label line tall, so it centres against
     the FIRST line of a wrapping label by layout. --t-label-lh is already a px
     value (18px), so this needs no magic number and no nudge. */
  --fkit-line: var(--t-label-lh);

  /* Hit area. The visual box never grows; the interactive wrapper does, via
     symmetric block padding (CLAUDE.md → Any-Size Law; DESIGN.md §14.3).
     --fkit-hit-pad is a calc over --fkit-hit, so overriding --fkit-hit at the
     640 band below re-resolves the padding automatically. */
  --fkit-hit: 24px;
  --fkit-hit-pad: calc((var(--fkit-hit) - var(--fkit-line)) / 2);
  --fkit-hit-pad-sw: calc((var(--fkit-hit) - var(--fkit-sw-h)) / 2);

  /* Readable measure for a form column in a wide modal (DESIGN.md §14.2). A cap
     on the COLUMN, never a freehand width on an input. */
  --fkit-measure: 560px;
}

/* Touch band. Only the one input changes; every derived value follows. */
@media (max-width: 640px) {
  :root { --fkit-hit: 44px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   1. Boxed controls — Checkbox · Radio · Switch
   ────────────────────────────────────────────────────────────────────────────
   Shared skeleton for all three:

     label.fkit-choice            position:relative, the whole clickable region
       input.fkit-native          real <input>, visually hidden, fills the label
       span.fkit-cell             fixed-height cell, grid-centres the box
         span.fkit-box            the 16x16 (or 36x20) visual control
           span.fkit-glyph        check / dot / knob, grid-centred
       span.fkit-lbl              hanging label column, min-width:0

   The native input is real and focusable, so keyboard, screen readers, form
   semantics and label-click forwarding all work without a single handler.
   ════════════════════════════════════════════════════════════════════════════ */

.fkit-choice {
  position: relative;
  display: flex;
  align-items: flex-start;          /* hanging label: wrapped lines never tuck under the box */
  gap: var(--space-inline);
  min-width: var(--fkit-hit);       /* a label-less box still meets the target size */
  padding-block: var(--fkit-hit-pad);
  cursor: pointer;
  /* Chrome, not content: a checkbox row is a button, not text to select. */
  user-select: none;
  -webkit-user-select: none;
}

/* The real control. Fills the label so the entire row is the target, and the
   gate can measure ONE element for the >=44x44 assertion.
   ────────────────────────────────────────────────────────────────────────────
   SPECIFICITY, not preference. stelaah.css styles bare `input[type="checkbox"]`
   and `input[type="radio"]` app-wide with a fixed 17x17 box, a 5px radius and a
   background-image check. That selector is (0,1,1) — element + attribute — so a
   single `.fkit-native` class (0,1,0) LOSES to it: the input stayed 17x17 and
   the hit area silently collapsed to the size of a glyph. Caught by
   scripts/verify-alignment.mjs on its first run. The descendant selector below
   is (0,2,0), which wins. Everything the global rule paints is also reset here,
   so nothing of it can leak back if opacity is ever traded for another
   hiding technique. */
.fkit-choice .fkit-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  cursor: pointer;
  flex-shrink: 1;
  /* Kill the UA control box so it can never contribute layout or a native ring. */
  appearance: none;
  -webkit-appearance: none;
}

/* Fixed-height cell. This is what aligns the box to the label's first line —
   by layout, not by a margin-top nudge. */
.fkit-cell {
  flex: none;
  display: grid;
  place-items: center;
  height: var(--fkit-line);
}

/* ── the visual box ─────────────────────────────────────────────────────── */
.fkit-box {
  display: grid;
  place-items: center;              /* THE rule: glyphs are centred by layout */
  width: var(--fkit-box);
  height: var(--fkit-box);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--accent-fg);
  /* Literal durations, matching .btn / .input in stelaah.css. NOTE: --dur-fast
     and --ease-out are referenced five times in stelaah.css but defined
     nowhere, so those transitions silently no-op. Do not copy that pattern. */
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.fkit-cb .fkit-box { border-radius: var(--fkit-box-r); }
.fkit-rd .fkit-box { border-radius: var(--r-pill); }

.fkit-choice:hover .fkit-box { border-color: var(--ink-4); }

/* Checked / indeterminate fill. */
.fkit-native:checked ~ .fkit-cell .fkit-box,
.fkit-native:indeterminate ~ .fkit-cell .fkit-box {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── the glyph ──────────────────────────────────────────────────────────── */
/* A grid item is blockified, so an inline SVG here has no baseline gap — the
   `line-height: 0` bandaid the eighteen hand-rolled boxes needed is structurally
   unnecessary. Left as a belt-and-braces zero so a future text glyph can't
   reintroduce the drift. */
.fkit-glyph {
  display: grid;
  place-items: center;
  line-height: 0;
  pointer-events: none;
}
.fkit-glyph .icn { display: block; }

/* Radio dot: a plain square with a pill radius, grid-centred like everything else. */
.fkit-dot {
  width: var(--fkit-dot);
  height: var(--fkit-dot);
  border-radius: var(--r-pill);
  background: var(--accent-fg);
}

/* Indeterminate bar (select-all rows). Sized off the check so the two glyphs
   read as one family. */
.fkit-bar {
  width: var(--fkit-check);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent-fg);
}

/* ── focus: exactly ONE indicator, on the box, keyboard only ────────────── */
.fkit-native:focus-visible ~ .fkit-cell .fkit-box {
  box-shadow: var(--focus-ring);
}

/* ── disabled: the v2 disabled law — fill + muted ink, never opacity ────── */
.fkit-choice.is-disabled { cursor: default; }
.fkit-native:disabled ~ .fkit-cell .fkit-box {
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
  color: var(--disabled-fg);
}
.fkit-native:disabled:checked ~ .fkit-cell .fkit-box,
.fkit-native:disabled:indeterminate ~ .fkit-cell .fkit-box {
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
}
.fkit-native:disabled ~ .fkit-cell .fkit-dot,
.fkit-native:disabled ~ .fkit-cell .fkit-bar { background: var(--disabled-fg); }
.fkit-native:disabled ~ .fkit-lbl { color: var(--disabled-fg); }
.fkit-native:disabled { cursor: default; }

/* ── the label column ───────────────────────────────────────────────────── */
.fkit-lbl {
  min-width: 0;                     /* Any-Size Law: shrinkable children shrink */
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: var(--t-label-weight);
  color: var(--ink);
}
.fkit-lbl-sub {
  display: block;
  margin-top: var(--space-tight);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-weight);
  color: var(--ink-3);
}


/* ── Switch ─────────────────────────────────────────────────────────────── */
/* 36x20 track, 16px knob, 2px inset travel. The knob is centred VERTICALLY by
   grid; the horizontal position is the switch's meaning (travel), not a nudge. */
.fkit-sw .fkit-cell { height: var(--fkit-sw-h); }
.fkit-sw { padding-block: var(--fkit-hit-pad-sw); }

.fkit-track {
  display: grid;
  align-items: center;
  justify-items: start;
  width: var(--fkit-sw-w);
  height: var(--fkit-sw-h);
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.fkit-knob {
  width: var(--fkit-knob);
  height: var(--fkit-knob);
  border-radius: var(--r-pill);
  /* --accent-fg, not --surface. The knob has to stay readable against BOTH
     track states, and on dark --accent is near-white, so a --surface knob went
     invisible the moment the switch turned on. --accent-fg is by definition
     the foreground paired with whatever --accent currently is, in every mode,
     accent and app theme — so the pairing maintains itself. Same reasoning and
     same value as the app-wide `.switch`; see stelaah.css for the long note. */
  background: var(--accent-fg);
  box-shadow: 0 0 0 1px rgba(22,24,29,.10), 0 1px 2px rgba(22,24,29,.20), 0 2px 6px rgba(22,24,29,.12);
  transform: translateX(var(--fkit-sw-inset));
  transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.dark .fkit-track { background: rgba(255, 255, 255, 0.24); }
.dark .fkit-knob { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.44), 0 2px 6px rgba(0,0,0,.30); }
.fkit-native:checked ~ .fkit-cell .fkit-track { background: var(--accent); }
.fkit-native:checked ~ .fkit-cell .fkit-knob {
  transform: translateX(calc(var(--fkit-sw-w) - var(--fkit-knob) - var(--fkit-sw-inset)));
}
.fkit-native:focus-visible ~ .fkit-cell .fkit-track { box-shadow: var(--focus-ring); }
.fkit-native:disabled ~ .fkit-cell .fkit-track { background: var(--disabled-border); }
.fkit-native:disabled ~ .fkit-cell .fkit-knob { background: var(--disabled-bg); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .fkit-box, .fkit-track, .fkit-knob { transition: none; }
}


/* ── ChecklistItem ──────────────────────────────────────────────────────────
   A checked-off line of CONTENT, not a form control. Shares the boxed-control
   skeleton above, so the box is grid-centred against the first text line by the
   same fixed-height cell and needs none of the margin nudges the five
   hand-rolled versions used (8px, 2px, 1px).

   TONE. Every tone declares its fill AND its paired ink together, because
   splitting them is precisely how nine hand-rolled boxes ended up with a
   hardcoded #fff measuring as low as 1.45:1 against their own fill
   (claude/KNOWN_ISSUES.md #196). There is no way to set a fill here without
   also setting the ink that reads on it.
   `tone-custom` reads --fkit-tone / --fkit-tone-fg from an ancestor, for a
   per-instance colour such as a sticky note's own ink. */
.fkit-cl { --fkit-tone: var(--accent); --fkit-tone-fg: var(--accent-fg); }
/* Fallbacks are load-bearing, not belt-and-braces: --st-done-fg is defined in
   stelaah.css, which this kit does not own and which may land in a later commit.
   Without the fallback an unresolved --fkit-tone-fg makes the glyph ink invalid
   at computed-value time, which is the exact unpaired-ink failure (#196) the
   tone system exists to prevent. A tone must never be able to set a fill
   without also resolving its ink. */
.fkit-cl.tone-done   { --fkit-tone: var(--st-done, var(--accent));  --fkit-tone-fg: var(--st-done-fg, var(--accent-fg)); }
.fkit-cl.tone-custom { --fkit-tone: var(--fkit-tone, var(--accent)); }

.fkit-cl .fkit-box { border-radius: var(--fkit-box-r); color: var(--fkit-tone-fg); }
.fkit-cl .fkit-native:checked ~ .fkit-cell .fkit-box {
  background: var(--fkit-tone);
  border-color: var(--fkit-tone);
}

/* The label is content, so it wraps and reads at body size — unlike the boxed
   controls above, whose label is a control name. */
.fkit-cl-tx {
  min-width: 0;
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  color: var(--ink);
}
.fkit-cl.is-done.has-strike .fkit-cl-tx {
  text-decoration: line-through;
  color: var(--ink-3);
}


/* ════════════════════════════════════════════════════════════════════════════
   2. Field — label -> control -> hint, on the §14.1 rhythm
   ────────────────────────────────────────────────────────────────────────────
   Gaps are authored as bottom/top margins on the parts rather than a container
   `gap`, because the rhythm is asymmetric (8 above the control, 4 above the
   hint) and a single gap value cannot express that. Vertical margins never move
   a left edge, so the one-content-edge rule is untouched.
   ════════════════════════════════════════════════════════════════════════════ */

.fkit-field { min-width: 0; }

.fkit-field-lbl {
  display: block;
  margin: 0 0 var(--space-inline);
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: var(--t-label-weight);
  color: var(--ink);
}
/* A required mark is a mark, not a decoration — no colour dot, no accent pill. */
.fkit-req { color: var(--ink-3); }

/* The control slot. Inputs FILL the column; never a freehand width (§14.2). */
.fkit-field-ctl { min-width: 0; }
.fkit-field-ctl > .input,
.fkit-field-ctl > textarea,
.fkit-field-ctl > .fkit-grid { width: 100%; }

.fkit-field-hint {
  margin: var(--space-tight) 0 0;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-weight);
  color: var(--ink-3);
}
/* Error is status INK only — no fill, no left accent bar (CLAUDE.md hard rule). */
.fkit-field.has-error .fkit-field-hint { color: var(--st-blocked-ink); }
.fkit-field.has-error .fkit-field-ctl > .input,
.fkit-field.has-error .fkit-field-ctl > textarea { border-color: var(--st-blocked); }


/* ════════════════════════════════════════════════════════════════════════════
   3. FieldGrid — the only sanctioned form layout container
   ────────────────────────────────────────────────────────────────────────────
   Tracks are minmax(0,1fr), never bare 1fr (Spacing & Grid Law). Collapse is
   @container, not @media: a form can live in a drawer or an embed pane whose
   width is independent of the viewport, and a viewport query would reflow it at
   the wrong moment. The wrapper exists purely to establish the container — an
   element cannot query itself.
   ════════════════════════════════════════════════════════════════════════════ */

.fkit-gridwrap { container-type: inline-size; min-width: 0; }
.fkit-gridwrap.is-measured { max-width: var(--fkit-measure); }

.fkit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-group);
  min-width: 0;
}
.fkit-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A field may span the full width inside a two-column grid (a textarea, a note). */
.fkit-grid > .span-2 { grid-column: 1 / -1; }

@container (max-width: 640px) {
  .fkit-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. ModalFooter
   ────────────────────────────────────────────────────────────────────────────
   Sits INSIDE window.Modal's own `.modal-foot`, which already declares the
   surface's horizontal inset (--modal-inset). This element therefore adds NO
   horizontal padding of its own — that is what keeps the footer buttons on the
   same content edge as every label and control in the body.
   ════════════════════════════════════════════════════════════════════════════ */

.fkit-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-inline);
  flex-wrap: wrap;
  min-width: 0;
}
/* Secondary/destructive content pinned left, actions stay right. */
.fkit-foot-lead { margin-right: auto; min-width: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   5. GoldenModal fixture (scripts/verify-alignment.mjs)
   ────────────────────────────────────────────────────────────────────────────
   Styles for the gate's fixture only. Kept here rather than in the script so the
   fixture is styled by the same stylesheet as the kit it certifies.
   ════════════════════════════════════════════════════════════════════════════ */

.fkit-gold-rows { display: grid; gap: var(--space-item); }
.fkit-gold-row {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  min-width: 0;
}
/* Reserved icon box: the text column starts at one x whether or not a row has a
   glyph, so labels in a list never zigzag (DESIGN.md §14.4 rule 4). */
.fkit-gold-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--ink-3);
}
.fkit-gold-tx {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  color: var(--ink);
}
.fkit-gold-inline { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.fkit-gold-inline > .input { min-width: 0; }


/* s-awayscreen.css */
/* Stelaah. Away screen (s-awayscreen.jsx).
 *
 * CRITICAL, NOT ROUTE-SCOPED. Registered in criticalStyleRels in
 * scripts/build-app-runtime.sh. The filename matches no route group, and for a
 * .jsx that means the eager shared bundle while for a .css it means the
 * DEFERRED module-styles bucket. Without that entry the cover's JS would be
 * eager while its stylesheet arrived on an idle callback, so an away screen
 * triggered early would paint as unstyled text over the live workspace: the
 * data it exists to hide, on show, with the timestamp on top of it. Same class
 * of bug as s-formkit.css and s-videoreview.css.
 *
 * POWER. Nothing here animates by default. The only motion in the file is one
 * compositor-only transform on .awy-wallpaper, and it is switched off by both
 * prefers-reduced-motion and .awy-saver. backdrop-filter appears once, under
 * .awy-glass, which is opt-in for exactly that reason.
 */

.awy {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 6vmin;
  isolation: isolate;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  color: var(--awy-ink);

  --awy-ink: #f4f4f2;
  --awy-ink-soft: rgba(244, 244, 242, 0.62);
  --awy-ink-faint: rgba(244, 244, 242, 0.34);
  --awy-hairline: rgba(255, 255, 255, 0.14);
  --awy-fill: rgba(255, 255, 255, 0.07);
}

/* The preview inside Settings is the same component, so it must not be able to
   trap anybody: it sits above the settings pane but below a real cover. */
.awy.awy-preview { z-index: 3200; }

.awy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vmin, 26px);
  text-align: center;
  max-width: 640px;
  width: 100%;
}

/* ── styles ─────────────────────────────────────────────────────────────── */

/* Dim is the default and the cheapest: one flat paint, no filter, no layers.
   Opaque enough that nothing behind it is legible, which is the entire job.
   Deliberately NOT theme-aware. The cover is its own environment, and a light
   cover would defeat the point twice over: a bright full screen is the worst
   thing to leave burning on an unattended display, and dark type on light is
   more readable across a room, not less. Someone who wants a light away screen
   picks the Paper wallpaper, which swaps the whole ink ramp with it.
   (An earlier draft had a `:root:not(.dark)` variant here. It was dead code:
   this app puts `.dark` on <body>, not the root, so the rule matched in both
   themes and the two shades were never telling anyone apart.) */
.awy-dim { background: #16171a; }

/* Glass keeps the shape of the workspace visible while making its text
   unreadable. blur() alone leaves large type readable, so it is paired with a
   saturate/brightness pull and a tint. */
.awy-glass {
  background: rgba(16, 17, 20, 0.58);
  backdrop-filter: blur(34px) saturate(0.6) brightness(0.55);
  -webkit-backdrop-filter: blur(34px) saturate(0.6) brightness(0.55);
}
/* No backdrop-filter support means no obscuring, so fall back to opaque rather
   than shipping a tinted window onto live client data. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .awy-glass { background: #16171a; }
}

/* Wallpapers are gradients, not images: nothing to download, nothing to decode,
   nothing to cache, and they scale to any display without a second asset. */
.awy-wallpaper { background: #14151a; }
/* The layer paints ABOVE .awy-wallpaper's own background, never behind it:
   `.awy` sets isolation:isolate, so a negative z-index here would put the
   gradient behind the element's own paint and render it invisible. */
.awy-wallpaper::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: 0;
  background: var(--awy-wp, none);
}
.awy-inner { position: relative; z-index: 1; }

.awy-wp-dune {
  --awy-wp:
    radial-gradient(120% 90% at 22% 8%, rgba(226, 186, 138, 0.24), transparent 58%),
    radial-gradient(110% 80% at 84% 96%, rgba(122, 92, 66, 0.30), transparent 60%),
    linear-gradient(168deg, #22201e 0%, #17161a 62%, #121216 100%);
}
.awy-wp-horizon {
  --awy-wp:
    radial-gradient(140% 70% at 50% 104%, rgba(112, 146, 168, 0.34), transparent 62%),
    linear-gradient(180deg, #101319 0%, #161b23 54%, #1d242e 100%);
}
.awy-wp-slate {
  --awy-wp:
    radial-gradient(100% 100% at 78% 14%, rgba(150, 158, 174, 0.16), transparent 56%),
    linear-gradient(152deg, #191a1e 0%, #131418 100%);
}
/* Paper is the one light wallpaper. It swaps the whole ink ramp rather than
   trying to make white type work on it. */
.awy-wp-paper {
  --awy-wp:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.9), transparent 62%),
    linear-gradient(160deg, #f0ece5 0%, #e6e1d8 58%, #dcd6cb 100%);
  --awy-ink: #23231f;
  --awy-ink-soft: rgba(35, 35, 31, 0.62);
  --awy-ink-faint: rgba(35, 35, 31, 0.36);
  --awy-hairline: rgba(35, 35, 31, 0.14);
  --awy-fill: rgba(35, 35, 31, 0.05);
}

/* ── mark ───────────────────────────────────────────────────────────────── */
/* Small on purpose. A workspace logo blown up to hero size on an away screen
   reads as branding; at 20px beside the name it reads as "this is whose". */
.awy-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid var(--awy-hairline);
  background: var(--awy-fill);
  color: var(--awy-ink-soft);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.awy-mark-logo {
  width: 20px; height: 20px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.awy-mark-initial {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--awy-fill);
  border: 1px solid var(--awy-hairline);
  color: var(--awy-ink);
  font-size: 11px;
  font-weight: 600;
}
.awy-mark-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── clock faces ────────────────────────────────────────────────────────── */
.awy-clock {
  color: var(--awy-ink);
  line-height: 1;
  /* Tabular figures stop the whole line jittering sideways every minute, which
     on a screen that is on for hours is the difference between calm and twitchy. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.awy-clock-numerals {
  display: flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(64px, 16vmin, 168px);
  letter-spacing: -0.035em;
}
.awy-clock-numerals .awy-colon {
  opacity: 0.42;
  margin: 0 0.04em;
}
.awy-clock-numerals .awy-sec {
  font-size: 0.26em;
  margin-left: 0.22em;
  align-self: flex-end;
  padding-bottom: 0.34em;
  color: var(--awy-ink-faint);
  letter-spacing: 0;
}
.awy-clock-numerals .awy-sfx {
  font-family: var(--font-ui);
  font-size: 0.15em;
  letter-spacing: 0.14em;
  margin-left: 0.24em;
  align-self: flex-end;
  padding-bottom: 0.28em;
  color: var(--awy-ink-faint);
}

.awy-clock-stacked {
  display: grid;
  gap: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(70px, 19vmin, 200px);
  letter-spacing: -0.05em;
}
.awy-clock-stacked .awy-stack-h { font-weight: 400; }
.awy-clock-stacked .awy-stack-m { font-weight: 400; color: var(--awy-ink-soft); margin-top: -0.18em; }

.awy-clock-words {
  display: grid;
  gap: 0.06em;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(30px, 7vmin, 66px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.awy-clock-words span:last-child { color: var(--awy-ink-soft); }

/* One conic-gradient element, repainted once a minute. No SVG, no rAF. */
.awy-clock-ring {
  position: relative;
  width: clamp(180px, 34vmin, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* The band is a masked conic gradient rather than a filled disc with an opaque
   plug over the middle. A plug would need its own colour per style (and would
   be a solid patch on Glass, defeating the blur); the mask cuts a real hole. */
.awy-clock-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--awy-ink) var(--awy-ring, 0deg), var(--awy-hairline) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 93.5%);
  mask: radial-gradient(closest-side, transparent 93%, #000 93.5%);
  pointer-events: none;
}
.awy-ring-face {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
}
.awy-ring-h {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(34px, 7vmin, 58px);
  letter-spacing: -0.03em;
}
.awy-ring-h i { font-style: normal; opacity: 0.42; }
.awy-ring-sfx {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--awy-ink-faint);
}

.awy-date {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--awy-ink-soft);
}

/* ── quiet cards ────────────────────────────────────────────────────────── */
.awy-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  max-width: 100%;
}
.awy-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--awy-hairline);
  background: var(--awy-fill);
  font-size: 12.5px;
  color: var(--awy-ink-soft);
}
.awy-card-ic { display: inline-flex; color: var(--awy-ink-faint); flex: 0 0 auto; }
.awy-card-n { color: var(--awy-ink); font-weight: 600; flex: 0 0 auto; }
.awy-card-time { font-variant-numeric: tabular-nums; }
.awy-card-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awy-card-l em { font-style: normal; margin-left: 8px; color: var(--awy-ink-faint); }
.awy-card-l em.awy-card-flag { color: #e5a06a; }
.awy-wp-paper .awy-card-l em.awy-card-flag { color: #a3572a; }

/* ── passphrase gate ────────────────────────────────────────────────────── */
.awy-gate {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  justify-items: center;
  width: min(340px, 100%);
  user-select: text;
  -webkit-user-select: text;
}
.awy-gate-row { display: flex; gap: 8px; width: 100%; }
.awy-gate-in {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--awy-hairline);
  background: var(--awy-fill);
  color: var(--awy-ink);
  font-size: 13.5px;
  outline: none;
}
.awy-gate-in::placeholder { color: var(--awy-ink-faint); }
.awy-gate-in:focus-visible { border-color: var(--awy-ink-soft); box-shadow: 0 0 0 3px var(--awy-fill); }
.awy-gate-in[aria-invalid="true"] { border-color: #d3785a; }
.awy-gate-go {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--awy-hairline);
  background: var(--awy-ink);
  color: #16171a;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.awy-wp-paper .awy-gate-go { color: #f2efe9; }
.awy-gate-go:disabled { opacity: 0.4; cursor: default; }
.awy-gate-err { font-size: 12px; color: #e59274; }
.awy-wp-paper .awy-gate-err { color: #9d3f1c; }
.awy-gate-hint { font-size: 12px; color: var(--awy-ink-soft); }
.awy-gate-hintbtn {
  background: none; border: 0; padding: 0;
  font-size: 12px;
  color: var(--awy-ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.awy-foot {
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--awy-ink-faint);
}

/* ── ambient motion ─────────────────────────────────────────────────────── */
/* A single transform on a pseudo-element the compositor already owns. It runs
   only on a wallpaper, only outside saver mode, and only when the person has
   not asked for less motion. 90s per cycle: felt, never watched. */
@media (prefers-reduced-motion: no-preference) {
  .awy-wallpaper:not(.awy-saver)::before {
    animation: awy-drift 90s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes awy-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
}

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .awy { padding: 8vmin 6vmin; }
  .awy-clock-numerals { font-size: clamp(52px, 20vmin, 96px); }
  .awy-cards { flex-direction: column; align-items: center; }
  .awy-card { max-width: 100%; }
}

/* ── settings preview tile ──────────────────────────────────────────────── */
/* A static, non-interactive miniature of each style, so the choice is made by
   looking rather than by reading four adjectives. */
.awy-set-styles { display: flex; flex-wrap: wrap; gap: 10px; }
.awy-style {
  position: relative;
  width: 104px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  text-align: left;
}
.awy-style.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.awy-style-swatch {
  display: block;
  height: 58px;
  position: relative;
}
.awy-style-swatch::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 3px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.68);
}
.awy-style[data-wp="paper"] .awy-style-swatch::after { background: rgba(35, 35, 31, 0.5); }
.awy-style-label {
  display: block;
  padding: 7px 9px 8px;
  font-size: 11.5px;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.awy-style-label em { display: block; font-style: normal; color: var(--muted); font-size: 10.5px; margin-top: 1px; }

.awy-set-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, var(--card));
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.awy-set-note strong { color: var(--ink); font-weight: 550; }


/* s-brand-context.css */
/* Brand context summary (window.BrandContextSummary, s-brand-context.jsx) —
   mountable anywhere a client resolves. Split out of s-brandbooks.css: this
   renders in the task drawer's Context panel (s-task-page.jsx TaskContextPanel,
   reachable from Dashboard "My Work" on the very first click) and the client
   drawer, both well outside the brandbooks route. s-brandbooks.css matches no
   route group either, so it rides the deferred module-styles bucket — this
   file is listed in build-app-runtime.sh's criticalStyleRels instead so the
   summary is never unstyled on a fast direct navigation into a task. */
.brctx{ display:flex; flex-direction:column; gap:var(--space-tight); padding:0 0 var(--space-item); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-item); }
.brctx-head{
  display:flex; align-items:center; gap:var(--space-inline); width:100%; border:none; background:transparent;
  padding:var(--space-tight) 0; cursor:pointer; font:inherit; color:inherit; text-align:left; border-radius:var(--r-control);
}
.brctx-head:hover{ background:var(--bg-hover); padding-left:var(--space-tight); padding-right:var(--space-tight); margin:0 -4px; }
.brctx-logo{ width:22px; height:22px; object-fit:contain; border-radius:5px; flex-shrink:0; }
.brctx-mark{
  width:22px; height:22px; border-radius:5px; background:var(--bg-sunken); color:var(--ink);
  display:grid; place-items:center; font-family:var(--font-serif); font-size:var(--t-caption-size); flex-shrink:0;
}
.brctx-name{ display:block; font-size:var(--t-caption-size); font-weight:650; color:var(--ink); }
.brctx-tag{ display:block; font-size:var(--t-micro-size); color:var(--ink-4); }
.brctx-sw{ display:flex; gap:var(--space-tight); }
.brctx-sw i{ width:12px; height:12px; border-radius:4px; display:block; border:1px solid rgba(0,0,0,.08); }
.brctx-link{
  align-self:flex-start; display:inline-flex; align-items:center; gap:4px; border:none; background:transparent;
  padding:0; font:inherit; font-size:var(--t-micro-size); font-weight:650; color:var(--ink-4); cursor:pointer;
}
.brctx-link:hover{ color:var(--accent); }
.brctx.compact{ padding-bottom:var(--space-tight); }


/* s-flex-schedule-editor.css */
/* Stelaah — shared Event / Task / Focus time editor styles.
   Split out of stelaah-planner.css (2026-08-10). These .tp-editor / .tp-when /
   .tp-prop / .tp-form / .tp-amount rules style window.FlexScheduleEditor
   (s-flex-schedule-editor.jsx), which is NOT planner-only: s-calendar.jsx,
   s-meetings.jsx and s-expenses.jsx all render the same editor. They lived in
   stelaah-planner.css, which build-app-runtime.sh pins to the planner lazy
   chunk, so on Calendar / Meetings / Expenses the editor rendered with no
   rules at all — every field fell back to the default full-width input chrome
   and the modal read as a stack of grey pills. Keep this file in
   criticalStyleRels (always loaded) so the editor is styled on every route
   that can open it. See claude/KNOWN_ISSUES.md — misrouted lazy chunks. */
.modal.tp-editor-modal { width: min(720px, calc(100vw - 32px)); max-height: min(90vh, 840px); }
.modal.tp-editor-modal .modal-hd-custom { align-items: center; padding: var(--space-inline) var(--space-group); }
.modal.tp-editor-modal .modal-hd-slot { overflow: hidden; }
.modal.tp-editor-modal .modal-body { padding: 0; }
.modal.tp-editor-modal .modal-foot { padding: var(--space-item) var(--space-group); }
.tp-editor-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tp-editor-tabs::-webkit-scrollbar { display: none; }
.tp-editor-tabs button { flex: none; height: 34px; display: inline-flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-item); border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.tp-editor-tabs button:hover { color: var(--ink); background: var(--bg-hover); }
.tp-editor-tabs button.on { color: var(--ink); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-xs); }
.tp-editor-tabs button .icn { color: currentColor; }
.tp-editor-form { display: flex; flex-direction: column; gap: var(--space-item); padding: var(--space-item) var(--space-group) var(--space-group); }
.tp-editor-title.input { height: auto; min-height: 34px; padding: 2px 2px var(--space-tight); border: 0; border-radius: 0; background: transparent; font-size: var(--t-heading-size); font-weight: 560; letter-spacing: -.015em; line-height: 1.3; }
.tp-editor-title.input::placeholder { color: var(--ink-4); }
.tp-editor-title.input:focus { background: transparent; }
.tp-when { display: flex; flex-direction: column; gap: var(--space-tight); margin-top: -4px; }
.tp-when-line { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.tp-when-date { padding: 0 var(--space-tight); color: var(--ink); font-size: var(--t-body-size); font-weight: 550; white-space: nowrap; }
.tp-when-arrow { color: var(--ink-4); flex: none; margin: 0 var(--space-tight); }
.tp-when-dur { margin-left: var(--space-tight); color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; }
.tp-when-meta { display: flex; align-items: center; gap: var(--space-tight); flex-wrap: wrap; padding-left: var(--space-tight); }
.tp-when-link { border: 0; background: transparent; padding: 2px var(--space-tight); margin: 0 -4px 0 0; border-radius: 6px; color: var(--ink-4); font: inherit; font-size: var(--t-micro-size); font-weight: 550; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.tp-when-link:hover { color: var(--ink-2); background: var(--bg-hover); }
.tp-when-link.on { color: var(--accent); font-weight: 650; }
.tp-when-sep, .tp-when-ends, .tp-when-year { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 550; }
.tp-when-static { color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 550; padding: 2px 0; }
.tp-editor-warning { display: flex; align-items: flex-start; gap: var(--space-inline); padding: 0; color: var(--st-blocked); font-size: var(--t-caption-size); line-height: 1.4; }
.tp-editor-warning .icn { flex: none; margin-top: 1px; }
.tp-form { display: flex; flex-direction: column; gap: var(--space-item); }
.tp-form .tp-editor-title.input { font-size: var(--t-heading-size); }
.tp-when-native.input, .tp-form .tp-when-native.input {
  width: auto; min-width: 0; height: 30px; min-height: 30px; padding: 0 var(--space-tight);
  border: 1px solid transparent; border-radius: var(--r-control); background: transparent;
  font-size: var(--t-body-size); font-weight: 550; color: var(--ink);
}
.tp-when-native.input:hover { background: var(--bg-hover); border-color: transparent; }
.tp-when-native.input:focus, .tp-when-native.input:focus-visible { background: var(--bg-hover); border-color: transparent; outline: none; box-shadow: none; }
.tp-when-native.input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.tp-when:hover .tp-when-native.input::-webkit-calendar-picker-indicator { opacity: .45; }
.tp-when-end { color: var(--ink); font-size: var(--t-body-size); font-weight: 550; white-space: nowrap; }
.tp-amount-wrap { display: inline-flex; align-items: baseline; gap: 2px; }
.tp-amount-cur { color: var(--ink-3); font-size: var(--t-heading-size); font-weight: 600; }
.tp-amount.input, .tp-form .tp-amount.input {
  width: 7ch; height: 34px; min-height: 34px; padding: 0 var(--space-tight);
  border: 1px solid transparent; border-radius: var(--r-control); background: transparent;
  font-size: var(--t-title-size); font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.tp-amount.input:hover { background: var(--bg-hover); border-color: transparent; }
.tp-amount.input:focus, .tp-amount.input:focus-visible { background: var(--bg-hover); border-color: transparent; outline: none; box-shadow: none; }
.tp-amount.input::placeholder { color: var(--ink-4); }
.tp-props { display: flex; flex-direction: column; gap: 1px; padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.tp-prop { display: flex; align-items: center; gap: var(--space-inline); min-height: 32px; }
.tp-prop.top { align-items: flex-start; }
.tp-prop.top .tp-prop-ic { margin-top: var(--space-inline); }
.tp-prop-ic { flex: none; width: 18px; display: grid; place-items: center; color: var(--ink-4); }
.tp-prop-val { flex: 1; min-width: 0; }
.tp-prop-inline { display: flex; align-items: center; gap: var(--space-inline); min-width: 0; }
.tp-prop-inline > .invsel { flex: 0 1 auto; min-width: 0; }
.tp-prop .invsel-btn,
.tp-prop .inv-psel-btn,
.tp-prop .input,
.tp-when .invsel-btn {
  height: 30px; min-height: 30px; padding: 0 var(--space-inline);
  border: 1px solid transparent; border-radius: var(--r-control); background: transparent;
  font-size: var(--t-label-size); font-weight: 500; color: var(--ink);
  transition: background var(--t-fast);
}
.tp-prop .invsel-btn:hover,
.tp-prop .inv-psel-btn:hover,
.tp-prop .input:hover,
.tp-when .invsel-btn:hover { background: var(--bg-hover); border-color: transparent; }
.tp-prop .invsel-btn.open, .tp-prop .invsel-btn:focus-visible,
.tp-prop .inv-psel-btn:focus-visible,
.tp-prop .input:focus, .tp-prop .input:focus-visible,
.tp-when .invsel-btn.open, .tp-when .invsel-btn:focus-visible {
  background: var(--bg-hover); border-color: transparent; outline: none; box-shadow: none;
}
.tp-prop .input::placeholder { color: var(--ink-4); font-weight: 500; }
.tp-prop .invsel-val.ph, .tp-when .invsel-val.ph { color: var(--ink-4); }
.tp-prop .invsel-btn .icn, .tp-when .invsel-btn .icn { opacity: 0; transition: opacity var(--t-fast); }
.tp-prop:hover .invsel-btn .icn, .tp-prop .invsel-btn.open .icn,
.tp-when:hover .invsel-btn .icn, .tp-when .invsel-btn.open .icn { opacity: 1; }
.tp-prop textarea.input, .tp-editor-form .tp-prop textarea.input {
  height: auto; min-height: 32px; padding: var(--space-tight) var(--space-inline); line-height: 1.45; resize: vertical;
  border: 1px solid transparent; background: transparent; border-radius: var(--r-control);
}
.tp-prop textarea.input:hover, .tp-editor-form .tp-prop textarea.input:hover { background: var(--bg-hover); border-color: transparent; }
.tp-prop textarea.input:focus, .tp-editor-form .tp-prop textarea.input:focus,
.tp-prop textarea.input:focus-visible { background: var(--bg-hover); border-color: transparent; outline: none; box-shadow: none; }
.tp-prop textarea.input, .tp-editor-form .tp-prop textarea.input { resize: none; }
.tp-prop .field-ai-wrap textarea.input { padding-right: var(--space-item); padding-bottom: var(--space-tight); }
.tp-prop .field-ai-btn { bottom: 3px; right: 3px; opacity: 0; transition: opacity var(--t-fast); }
.tp-prop:hover .field-ai-btn, .tp-prop:focus-within .field-ai-btn { opacity: 1; }
.tp-prop:hover .field-ai-wrap textarea.input,
.tp-prop:focus-within .field-ai-wrap textarea.input { padding-right: 64px; }
.tp-prop .inv-psel-btn { min-width: 0; font-weight: 500; }
.tp-prop .inv-psel-btn .icn { opacity: 0; transition: opacity var(--t-fast); }
.tp-prop:hover .inv-psel-btn .icn { opacity: 1; }
.tp-prop-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--bg-active); box-shadow: inset 0 0 0 1px var(--border); }
.tp-prop-note { flex: none; margin-left: auto; color: var(--ink-4); font-size: var(--t-micro-size); font-weight: 550; white-space: nowrap; }
.tp-prop-note.ok { color: var(--st-done, var(--accent)); }
.tp-prop-btn .tp-prop-note + .tp-prop-caret { margin-left: var(--space-tight); }
.tp-prop .ecat-manage-link { flex: none; margin-top: 0; }
.tp-prop .ex-receipt { margin: 0; }
.tp-prop .ex-receipt.is-empty { width: 100%; }
.tp-prop .mtg-platform { display: flex; flex-direction: column; gap: var(--space-tight); }
.tp-prop .mtg-connect-hint { margin-top: var(--space-tight); }
.tp-when .invsel { width: auto; flex: none; }
.tp-when .invsel.tiny .invsel-btn { height: 24px; min-height: 24px; padding: 0 var(--space-tight); font-size: var(--t-micro-size); font-weight: 550; color: var(--ink-4); }
.tp-prop-btn { display: flex; align-items: center; gap: var(--space-inline); width: 100%; height: 30px; padding: 0 var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; font-size: var(--t-label-size); font-weight: 500; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.tp-prop-btn:hover { background: var(--bg-hover); }
.tp-prop-btn.ph { color: var(--ink-4); }
.tp-prop-btn .tp-prop-caret { margin-left: auto; flex: none; color: var(--ink-4); opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); }
.tp-prop-btn:hover .tp-prop-caret, .tp-prop-btn[aria-expanded="true"] .tp-prop-caret { opacity: 1; }
.tp-prop-btn .tp-prop-caret.up { transform: rotate(180deg); }
.tp-prop-faces { display: inline-flex; flex: none; }
.tp-prop-faces > * + * { margin-left: -4px; }
.tp-prop-expand { padding: var(--space-tight) 0 var(--space-tight) var(--space-inline); }
.tp-prop-chip { display: inline-flex; align-items: center; gap: var(--space-tight); height: 24px; padding: 0 var(--space-inline); border: 0; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--ink-2); font: inherit; font-size: var(--t-micro-size); font-weight: 550; cursor: pointer; white-space: nowrap; }
.tp-prop-chip:hover { background: var(--bg-active); }
.tp-prop-chip.on { background: var(--accent-soft); color: var(--accent); }
.tp-prop-chip .icn { color: currentColor; }
.tp-prop .ec-grid, .tp-prop .mk-grid { gap: var(--space-tight); }
.tp-prop .ec-sw { width: 22px; height: 22px; border-radius: 6px; }
.tp-prop .mk-chip { width: 26px; height: 26px; border-radius: var(--r-control); }
.tp-prop .ap-grid { gap: var(--space-tight); }
.tp-prop .ap-chip { gap: var(--space-tight); padding: 2px var(--space-inline) 2px 2px; font-size: var(--t-caption-size); }
.tp-editor-toggle { width: 100%; display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 0 0; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tp-editor-toggle > span:last-child { min-width: 0; }
.tp-editor-toggle b { display: block; font-size: var(--t-label-size); font-weight: 650; }
.tp-editor-toggle small { display: block; margin-top: 2px; color: var(--ink-4); font-size: var(--t-micro-size); line-height: 1.35; }
.tp-editor-delete { margin-right: auto; color: var(--st-blocked) !important; }
.tp-editor-key { margin-left: auto; color: var(--ink-4); font-family: var(--font-mono); font-size: var(--t-micro-size); white-space: nowrap; }
@media (max-width: 760px) {
  .modal.tp-editor-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); } 
  .modal.tp-editor-modal .modal-hd-custom { padding-left: var(--space-inline); } 
  .tp-editor-tabs button { padding: 0 var(--space-inline); } 
  .tp-editor-tabs button .icn { display: none; } 
  .tp-editor-form { padding: var(--space-item) var(--space-item) var(--space-group); gap: var(--space-item); } 
  .tp-editor-title.input { font-size: var(--t-heading-size); } 
  .tp-when-dur { display: none; } 
  .tp-prop .invsel-btn .icn, .tp-when .invsel-btn .icn,
  .tp-prop-btn .tp-prop-caret { opacity: 1; } 
  .tp-editor-key { display: none; } }

/* ── Shared planner-origin primitives ──────────────────────────────────────
   Same reason as the editor rules above, found by the second run of
   scripts/verify-route-styles.mjs. .tp-seg (segmented control) is rendered by
   s-holidays.jsx and .tp-typing by s-meeting-detail.jsx, both shared modules
   that never load the planner chunk. The plan-bounce keyframe .tp-typing
   animates with already lives in critical stelaah.css, so it travels fine.
   Note stelaah.css also carries a near-identical .plan-typing; collapsing the
   two duplicates is worth doing, but is a change of behaviour rather than a
   relocation, so it is deliberately not done here. */
.tp-seg { display: flex; background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight); gap: 2px; }
.tp-seg.wrap { flex-wrap: wrap; }
.tp-seg button { flex: 1; min-width: 0; height: 28px; padding: 0 var(--space-inline); border: none; background: transparent; border-radius: var(--r-control); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all .14s; white-space: nowrap; }
.tp-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tp-seg button:hover:not(.on) { color: var(--ink-2); }
.tp-typing { display: inline-flex; gap: var(--space-tight); align-items: center; }
.tp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .4; animation: plan-bounce 1s infinite; }
.tp-typing i:nth-child(2) { animation-delay: .15s; } .tp-typing i:nth-child(3) { animation-delay: .3s; }


/* s-presets.css */
/* Stelaah — Workspace Presets. One-click industry setup. Editorial-Calm: hairlines, soft tints. */
.wp-card-ic,.wp-gs-ic,.wp-set-ic{ --c:#739837; width:40px; height:40px; border-radius:var(--r-control); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--c); background:color-mix(in srgb,var(--c) 13%,transparent); }
.wp-card-ic[data-accent="pine"],.wp-gs-ic[data-accent="pine"],.wp-set-ic[data-accent="pine"]{ --c:#4f7d5e; }
.wp-card-ic[data-accent="indigo"],.wp-gs-ic[data-accent="indigo"],.wp-set-ic[data-accent="indigo"]{ --c:#6a6fb0; }
.wp-card-ic[data-accent="plum"],.wp-gs-ic[data-accent="plum"],.wp-set-ic[data-accent="plum"]{ --c:#8f6fa0; }
.wp-card-ic[data-accent="clay"],.wp-gs-ic[data-accent="clay"],.wp-set-ic[data-accent="clay"]{ --c:#b07a5b; }
.wp-card-ic[data-accent="olive"],.wp-gs-ic[data-accent="olive"],.wp-set-ic[data-accent="olive"]{ --c:#739837; }
.sbx-set .wp-set-ic{ width:28px; height:28px; border-radius:var(--r-control); }
.sbx-set-active.empty{ background:var(--bg-sunken); }
.sbx-set .wp-gs-pack{ margin:0; }

/* Get Started banner */
.wp-gs-wrap{ margin:var(--space-tight) 0 20px; }
.wp-gs{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-group); flex-wrap:wrap; padding:var(--space-group); border-radius:var(--r-card); background:var(--bg-sunken,rgba(0,0,0,.03)); margin:var(--space-tight) 0 20px; }
.wp-gs-acts{ display:flex; align-items:center; gap:var(--space-tight); flex-shrink:0; flex-wrap:wrap; }
.wp-gs-wrap .wp-gs{ margin:0; }
/* matching content Workspace offer (under the banner + in the chooser modal) */
.wp-gs-pack{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; padding:var(--space-item) var(--space-group); margin-top:var(--space-inline); border-radius:var(--r-card); border:1px solid var(--border-subtle,rgba(0,0,0,.07)); font-size:var(--t-label-size); color:var(--ink-3,#8a8a8a); }
.wp-gs-pack > svg{ flex:none; color:var(--ink-4,#a5a5a5); }
.wp-gs-pack-tx{ flex:1; min-width:220px; line-height:1.45; }
.wp-gs-pack-tx b{ color:var(--ink,#111); font-weight:600; }
.modal .wp-gs-pack{ margin:0 0 var(--space-item); }
.wp-gs-main{ display:flex; align-items:center; gap:var(--space-item); min-width:0; }
.wp-gs-ic{ width:44px; height:44px; }
.wp-gs-title{ font-weight:600; font-size:var(--t-strong-size); color:var(--ink,#111); }
.wp-gs-sub{ font-size:var(--t-label-size); color:var(--ink-3,#8a8a8a); margin-top:2px; }

/* recommendation line inside the modal */
.wp-rec-line{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; font-size:var(--t-label-size); color:var(--ink-2,#555); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:color-mix(in srgb,var(--accent,#739837) 8%,transparent); margin-bottom:var(--space-item); }
.wp-rec-line b{ color:var(--ink,#111); }
.wp-rec-line span{ color:var(--ink-3,#8a8a8a); }
.wp-active-note{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); color:var(--ink-2,#555); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:color-mix(in srgb,var(--st-done,#5ea85e) 12%,transparent); margin-bottom:var(--space-item); }
.wp-active-note b{ color:var(--ink,#111); }
.wp-active-note button{ margin-left:auto; flex-shrink:0; }

/* preset cards */
.wp-list{ display:flex; flex-direction:column; }
.wp-card{ border-bottom:1px solid var(--border-subtle,var(--border,#eee)); }
.wp-card:last-child{ border-bottom:none; }
.wp-card-h{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-tight); cursor:pointer; }
.wp-card-h:hover{ background:var(--bg-sunken,rgba(0,0,0,.02)); border-radius:var(--r-control); }
.wp-card-t{ flex:1; min-width:0; }
.wp-card-name{ display:flex; align-items:center; gap:var(--space-inline); font-weight:600; font-size:var(--t-body-size); color:var(--ink,#111); }
.wp-card-blurb{ font-size:var(--t-caption-size); color:var(--ink-3,#8a8a8a); margin-top:2px; }
.wp-rec{ font-size:var(--t-micro-size); font-weight:600; color:var(--accent,#739837); background:color-mix(in srgb,var(--accent,#739837) 13%,transparent); padding:1px var(--space-inline); border-radius:var(--r-modal); }
.wp-on{ font-size:var(--t-micro-size); font-weight:600; color:var(--st-done,#4a8a4a); background:color-mix(in srgb,var(--st-done,#5ea85e) 14%,transparent); padding:1px var(--space-inline); border-radius:var(--r-modal); }
.wp-card-h>.icon,.wp-card-h svg{ color:var(--ink-4,#bbb); flex-shrink:0; }
.wp-card.active{ background:color-mix(in srgb,var(--st-done,#5ea85e) 5%,transparent); border-radius:var(--r-control); }

.wp-card-body{ padding:2px var(--space-tight) var(--space-group) 56px; display:flex; flex-direction:column; gap:var(--space-item); }
.wp-sets{ display:flex; flex-direction:column; gap:var(--space-inline); }
.wp-set{ display:flex; gap:var(--space-inline); align-items:flex-start; }
.wp-set-l{ width:80px; flex-shrink:0; font-size:var(--t-micro-size); text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--ink-4,#aaa); padding-top:var(--space-tight); }
.wp-chips{ display:flex; flex-wrap:wrap; gap:var(--space-tight); }
.wp-chip{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-2,#555); background:var(--bg-sunken,rgba(0,0,0,.04)); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-modal); }
.wp-chip.more{ color:var(--ink-4,#aaa); }
.wp-chip .icon,.wp-chip svg{ color:var(--ink-3,#8a8a8a); }
.wp-apply{ align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-group); border-radius:var(--r-control); border:none; cursor:pointer; background:var(--accent,#739837); color:var(--accent-fg,#fff); font-size:var(--t-label-size); font-weight:600; }
.wp-apply:hover{ filter:brightness(1.04); }
.wp-apply:disabled{ background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor:default; }

@media (max-width:520px){
  .wp-card-body{ padding-left:var(--space-tight); }
  .wp-set{ flex-direction:column; gap:var(--space-tight); }
  .wp-set-l{ width:auto; }
}

/* Preview button on each card row */
.wp-preview-btn{ flex-shrink:0; color:var(--ink-3,#8a8a8a); }
.wp-preview-btn:hover,.wp-preview-btn.active{ color:var(--accent,#739837); background:color-mix(in srgb,var(--accent,#739837) 10%,transparent); }
.wp-card.previewed .wp-card-h{ background:var(--bg-sunken,rgba(0,0,0,.02)); border-radius:var(--r-control); }

/* Modal grows to a two-column split while a live preview is open */
.wp-modal.mc{ transition:width .22s cubic-bezier(.22,1,.36,1); }
.wp-split{ display:flex; align-items:flex-start; gap:0; margin:0 -4px; }
.wp-split-list{ flex:0 0 auto; width:340px; min-width:0; padding-right:var(--space-group); }
.wp-split-preview{ flex:1; min-width:0; border-left:1px solid var(--border-subtle,var(--border,#eee)); padding-left:20px; max-height:min(70vh,700px); overflow:auto; }
@media (max-width:760px){
  .wp-split{ flex-direction:column; }
  .wp-split-list{ width:100%; padding-right:0; }
  .wp-split-preview{ border-left:none; border-top:1px solid var(--border-subtle,var(--border,#eee)); padding-left:0; padding-top:var(--space-group); margin-top:var(--space-inline); }
}

/* Live setup preview panel */
.wp-preview{ display:flex; flex-direction:column; gap:var(--space-group); animation:rise .18s ease both; }
.wp-preview-hd{ display:flex; align-items:center; gap:var(--space-item); }
.wp-preview-hd .wp-card-t{ flex:1; min-width:0; }
.wp-pv-sec{ display:flex; flex-direction:column; gap:var(--space-inline); padding-top:var(--space-item); border-top:1px solid var(--border-subtle,var(--border,#eee)); }
.wp-preview>.wp-pv-sec:first-of-type{ border-top:none; padding-top:0; }
.wp-pv-l{ font-size:var(--t-micro-size); text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--ink-4,#aaa); }

/* mini workflow board — column headers only, status color as a small dot (matches .tag-dot convention) */
.wp-pv-board{ display:flex; gap:var(--space-inline); overflow-x:auto; padding-bottom:2px; }
.wp-pv-col{ flex:1 0 100px; min-width:100px; padding:var(--space-inline) 0; border-top:2px solid var(--pc,var(--border-subtle)); }
.wp-pv-col-t{ font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2,#555); }
.wp-pv-fields{ display:flex; flex-wrap:wrap; gap:var(--space-tight); }

/* starter plan — borderless rows, hairline dividers (no left accent bars) */
.wp-pv-plan{ display:flex; flex-direction:column; }
.wp-pv-task{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle,var(--border,#eee)); font-size:var(--t-caption-size); }
.wp-pv-task:last-child{ border-bottom:none; }
.wp-pv-task-wk{ flex-shrink:0; width:38px; color:var(--ink-4,#aaa); font-size:var(--t-micro-size); }
.wp-pv-task-name{ flex:1; min-width:0; color:var(--ink,#111); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-pv-task-phase{ flex-shrink:0; color:var(--ink-3,#8a8a8a); font-size:var(--t-micro-size); }
.wp-pv-more{ font-size:var(--t-caption-size); color:var(--ink-3,#8a8a8a); padding-top:var(--space-tight); }

/* help center preview — borderless rows */
.wp-pv-kb{ display:flex; flex-direction:column; }
.wp-pv-kb-row{ padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle,var(--border,#eee)); }
.wp-pv-kb-row:last-child{ border-bottom:none; }
.wp-pv-kb-t{ font-size:var(--t-label-size); font-weight:600; color:var(--ink,#111); }
.wp-pv-kb-x{ font-size:var(--t-caption-size); color:var(--ink-3,#8a8a8a); margin-top:2px; }

.wp-pv-apply{ align-self:stretch; justify-content:center; }


/* s-sidebar.css */
/* Stelaah — sidebar v2: brand header, layout sections, bottom toolbar, All-features browser.
   Extends the base .sidebar/.sb-item system in stelaah.css — new classes only. */

/* ── Sidebar ink ramp ───────────────────────────────────────────────────────
   HUE is no longer the reason these exist — the global --ink-3/--ink-4 were
   neutralised at source (stelaah.css) on 2026-07-24. What remains is CONTRAST:
   the global steps are luminance-tuned for white panels, and on the #f5f5f5 rail
   the faintest one lands at ~2.3:1, under any legibility floor for a text label.
   These re-mix the same ink against the RAIL's background instead, lifting the
   section header to ~4.2:1 and the icon to ~4.7:1 without touching other screens.

   DECLARED AT :root ON PURPOSE. `.sb-item` and friends are not sidebar-only: the
   Settings tab strip (s-misc.jsx) and the shell nav sheet (s-shell.jsx) reuse them,
   and the section flyout is PORTALED to document.body. Scoping these tokens to
   .sidebar left every one of those with an unresolved var, which makes `color`
   invalid at computed-value time and silently falls back to INHERIT. So :root
   carries the default (mixed toward --surface, correct for the flyout and for
   anything on a normal panel) and .sidebar overrides for its own rail colour. */
:root {
  --sb-ink:       var(--ink);                                        /* active label */
  --sb-ink-label: color-mix(in srgb, var(--ink) 78%, var(--surface)); /* resting label */
  --sb-ink-icon:  color-mix(in srgb, var(--ink) 64%, var(--surface)); /* resting icon */
  --sb-ink-quiet: color-mix(in srgb, var(--ink) 60%, var(--surface)); /* section header */
}
.sidebar {
  --sb-ink:       var(--ink);                                             /* re-resolve against this subtree's --ink (see note below) */
  --sb-ink-label: color-mix(in srgb, var(--ink) 78%, var(--bg-sidebar)); /* ~7.4:1 on the rail */
  --sb-ink-icon:  color-mix(in srgb, var(--ink) 64%, var(--bg-sidebar)); /* ~4.7:1 */
  --sb-ink-quiet: color-mix(in srgb, var(--ink) 60%, var(--bg-sidebar)); /* ~4.2:1 (was 2.3:1) */
}
/* Dark is already alpha-on-neutral, so there's no hue drift to correct — only the
   faint steps needed lifting off the #202020 rail.
   NOTE: the theme class lives on a wrapper div around `.app`, not on `:root`/`body`,
   so a `--sb-ink: var(--ink)` declared only at `:root` (above) freezes at the LIGHT
   value forever — `--ink` is only overridden further down the tree, past where
   `--sb-ink` already resolved and started inheriting as a fixed value. Every var()
   here must be re-declared on `.sidebar`/`.dark` so it re-resolves inside the themed
   subtree (caught 2026-07-26: hover/active sidebar text stayed light-mode #202124 —
   effectively invisible — over the dark hover/active background). */
.dark, body.dark {
  --sb-ink:       var(--ink);
  --sb-ink-label: rgba(255, 255, 255, 0.70);
  --sb-ink-icon:  rgba(255, 255, 255, 0.56);
  --sb-ink-quiet: rgba(255, 255, 255, 0.46);
}

/* A boolean `.sidebar.sb-dark` rail treatment was explored alongside this and
   dropped before either landed: it painted `.sidebar` too, and
   `body:not(.dark) .sidebar.sb-dark` (0,3,1) outranked `.sidebar[data-sb-surface]`
   (0,2,0), so a light surface with that toggle on rendered dark ink on a #202020
   rail. The personal surface below supersedes it. Kept at
   claude/superseded/dark-rail-207.patch. */

/* ── Personal sidebar surface (16 tuned colours) ────────────────────────────
   Supersedes the boolean `.sb-dark` above and follows its proven shape: the
   surface tokens are overridden ON `.sidebar` ITSELF, never at :root. That
   scoping is the whole safety argument — `--bg-sidebar` is also a generic
   recessed-panel fill for `.rep-node`, `.grp-preview`, `.tcal-cell.unset` and
   `.rp-feat`, none of which live inside the rail, so they keep the global value
   while the rail paints its own. It also means every existing rule that reads
   --bg-hover / --bg-active / --border / --bg-sidebar inside the rail (including
   the collapsed badge RINGS) re-resolves correctly with no sweep.

   Both blocks are gated on [data-sb-surface], which SbAppearance writes only
   once the user actually picks a colour. Absent that attribute every rule here
   is inert and the rail renders byte-identically to before.

   Ink polarity follows the SURFACE, not the app theme: without that, Graphite
   in light mode would render dark-on-dark, because the theme-driven ramp above
   is bound to `.dark`. `data-sb-tone` is DATA carried by each swatch, never
   computed at runtime. */
/* `.dark .sidebar` in stelaah.css paints a GRADIENT, not a flat colour, and it
   ties this rule on specificity (0,2,0) while landing later in the cascade — so
   in dark mode a chosen surface was being replaced by that gradient. It mixes
   --bg-sidebar in, which this rule sets, so the result was a washed-out gradient
   of the user's colour rather than the colour. The `.dark` variant below takes
   it to (0,3,0), and background-image:none is required because `background`
   shorthand alone does not beat a longhand set by a rule that still applies. */
.sidebar[data-sb-surface],
.dark .sidebar[data-sb-surface] {
  --bg-sidebar: var(--sb-bg);
  background: var(--sb-bg);
  background-image: none;
  color: var(--sb-ink-label);
}
.sidebar[data-sb-surface][data-sb-tone="dark"] {
  --ink:           rgba(255, 255, 255, 0.82);
  --ink-2:         rgba(255, 255, 255, 0.72);
  --ink-3:         rgba(255, 255, 255, 0.50);
  --ink-4:         rgba(255, 255, 255, 0.28);
  --bg-hover:      rgba(255, 255, 255, 0.055);
  --bg-active:     rgba(255, 255, 255, 0.09);
  --state-hover:    rgba(255, 255, 255, 0.055);
  --state-active:   rgba(255, 255, 255, 0.09);
  --state-selected: rgba(255, 255, 255, 0.09);
  --border:        rgba(255, 255, 255, 0.094);
  --border-subtle: rgba(255, 255, 255, 0.055);
  --sb-ink:        #ffffff;
  --sb-ink-label:  rgba(255, 255, 255, 0.70);
  --sb-ink-icon:   rgba(255, 255, 255, 0.56);
  --sb-ink-quiet:  rgba(255, 255, 255, 0.46);
}
.sidebar[data-sb-surface][data-sb-tone="light"] {
  --ink:           #1a1a1a;
  --ink-2:         color-mix(in srgb, #1a1a1a 82%, var(--sb-bg));
  --ink-3:         color-mix(in srgb, #1a1a1a 62%, var(--sb-bg));
  --ink-4:         color-mix(in srgb, #1a1a1a 38%, var(--sb-bg));
  --bg-hover:      color-mix(in srgb, #1a1a1a 5%,  transparent);
  --bg-active:     color-mix(in srgb, #1a1a1a 9%,  transparent);
  --state-hover:    color-mix(in srgb, #1a1a1a 5%,  transparent);
  --state-active:   color-mix(in srgb, #1a1a1a 9%,  transparent);
  --state-selected: color-mix(in srgb, #1a1a1a 9%,  transparent);
  --border:        color-mix(in srgb, #1a1a1a 11%, transparent);
  --border-subtle: color-mix(in srgb, #1a1a1a 6%,  transparent);
  --sb-ink:        #1a1a1a;
  --sb-ink-label:  color-mix(in srgb, var(--sb-ink) 78%, var(--sb-bg));
  --sb-ink-icon:   color-mix(in srgb, var(--sb-ink) 64%, var(--sb-bg));
  --sb-ink-quiet:  color-mix(in srgb, var(--sb-ink) 60%, var(--sb-bg));
}
/* A dark rail against a light page loses the page's own hairline divider. */
:root:not(.dark) .sidebar[data-sb-surface][data-sb-tone="dark"],
body:not(.dark) .sidebar[data-sb-surface][data-sb-tone="dark"] {
  border-right-color: rgba(255, 255, 255, 0.094);
}

/* Interaction states derived from the ink/surface pair — used by the tab strip
   and the row hover actions, so those need no per-colour tuning. */
.sidebar, .sb-flyout {
  --sb-hover:  color-mix(in srgb, var(--sb-ink) 6%,  transparent);
  --sb-active: color-mix(in srgb, var(--sb-ink) 10%, transparent);
  --sb-border: color-mix(in srgb, var(--sb-ink) 12%, transparent);
}
/* SET 10: the flyout (and every other popup the dock/rail spawns) is PORTALED
   to document.body and now ALWAYS renders with standard elevated-surface
   tokens (the :root defaults above, or the .dark override), regardless of
   which personal rail colour is chosen. It used to mirror the rail's chosen
   --sb-bg/data-sb-tone onto itself, which inverted its ink to near-white while
   its own background stayed the ordinary light-theme --surface (the rail's
   dark background never travels with it), making text disappear in light app
   theme + a dark rail colour. A popup matching the CHROME it floats over
   (the rail) made no sense anyway — it was never meant to look like a second
   rail. Fixed permanently, not per-theme-patched: this file never re-reads
   data-sb-surface/data-sb-tone on .sb-flyout again. */

/* ── brand header ── */
.sb-brand { display: flex; align-items: center; gap: var(--space-inline); }
.sb-brand .sb-logo-full { display: inline-flex; align-items: center; padding-left: var(--space-tight); }
.sb-hd-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.sb-brand-collapse { display: grid; place-items: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; transition: background .14s ease, color .14s ease; opacity: 0; }
.sidebar:hover .sb-brand-collapse { opacity: 1; }
.sb-brand-collapse:hover { background: var(--bg-hover); color: var(--ink-2); }
.sidebar.collapsed .sb-brand { justify-content: center; padding: var(--space-inline) 0 var(--space-tight); }
.sidebar.collapsed .sb-brand .sb-logo-mark { display: inline-flex; color: var(--lime); width: 28px; height: 28px; align-items: center; justify-content: center; }
.sidebar.collapsed { position: relative; overflow: visible; }
.sidebar.collapsed .sb-body { overflow-x: hidden; overflow-y: auto; }
.sb-logo-expand {
  border: 0; padding: 0; background: transparent; cursor: pointer; color: inherit;
  border-radius: var(--r-control); transition: background .12s ease;
}
.sb-logo-expand:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sb-edge-expand {
  position: absolute; right: 0; top: 50%; z-index: 6;
  display: grid; place-items: center;
  width: 16px; height: 44px; margin: 0; padding: 0;
  transform: translate(50%, -50%);
  border: 1px solid var(--border-subtle);
  border-left: 0; border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--bg-sidebar); color: var(--ink-4);
  cursor: pointer; opacity: 0;
  box-shadow: 4px 0 12px -8px rgba(31, 36, 29, 0.18);
  transition: opacity .14s ease, color .12s ease, background .12s ease;
}
.dark .sb-edge-expand { box-shadow: 4px 0 12px -8px rgba(0, 0, 0, 0.45); }
.sidebar.collapsed:hover .sb-edge-expand,
.sb-edge-expand:focus-visible {
  opacity: 1;
}
.sb-edge-expand:hover,
.sb-edge-expand:focus-visible {
  color: var(--ink); background: color-mix(in srgb, var(--bg-sidebar) 88%, var(--surface));
}
.sb-edge-expand:focus-visible { outline: none; }
.sb-brand-collapse:focus-visible { outline: none; background: var(--bg-hover); color: var(--ink-2); }

/* ── customize / edit mode ── */
.sb-edit-done { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-tight); height: 26px; padding: 0 var(--space-item); border: none; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 650; cursor: pointer; transition: filter .14s ease; }
.sb-edit-done:hover { filter: brightness(1.05); }
.sb-edit-hint { display: flex; align-items: center; gap: var(--space-tight); flex-wrap: wrap; margin: 2px var(--space-tight) var(--space-inline); padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-3); font-size: var(--t-micro-size); line-height: 1.5; }
/* Only the inline hint glyphs are muted. Scoped off `.grow` so the Done button
   that now lives in this row (it moved here when the brand header was removed)
   keeps its own on-accent check rather than inheriting the hint's grey. */
.sb-edit-hint .grow { flex: 1 1 auto; min-width: 0; }
.sb-edit-hint .grow svg { color: var(--ink-4); flex: none; }
.sb-edit .sb-item { cursor: grab; }
.sb-grip { display: inline-grid; place-items: center; width: 16px; margin-left: -4px; margin-right: 2px; color: var(--ink-4); flex: none; cursor: grab; }
.sb-edit .sb-item:hover .sb-grip { color: var(--ink-3); }
.sb-hidebtn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--ink-4); flex: none; transition: background .12s ease, color .12s ease; }
.sb-hidebtn:hover { background: color-mix(in srgb, var(--danger, #c0553f) 14%, transparent); color: var(--danger, #c0553f); }
.sb-hidebtn.locked { opacity: .5; }
.sb-hidebtn.locked:hover { background: none; color: var(--ink-4); }
.sb-add { color: var(--accent); }
.sb-add .sb-item-ico { color: var(--accent); }
.sb-add .sb-item-label { color: var(--accent); font-weight: 600; }

/* ── advanced personal shortcuts ── */
/* position:sticky combined with its OWN overflow-y:auto+max-height breaks this
   element's height calculation (verified: the browser collapses it to ~4px of
   padding while its children keep painting at their natural size) — it then
   bleeds past .sb-body's clipped bottom edge and visually overlaps .sb-tools,
   reading as a stray line/border cutting across the bottom toolbar icons. The
   rail's single scroll container is .sb-body itself; this panel doesn't need
   an independent internal scroller too. */
.sb-sc { position: sticky; bottom: 0; z-index: 2; background: var(--bg-sidebar); padding-top: var(--space-tight); }
.sb-sc.drop { background: var(--bg-active); border-radius: var(--r-control); }
.sb-section-label { display: flex; align-items: center; gap: var(--space-tight); margin: var(--space-inline) var(--space-tight) var(--space-tight); padding: 0 2px; font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-ink-quiet); }
.sb-section-label > span:first-child { flex: 1; min-width: 0; }
.sb-sc-item.unavailable { color: var(--ink-4); opacity: .72; }
.sb-sc-badge { min-width: 17px; height: 17px; padding: 0 var(--space-tight); display: grid; place-items: center; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); font-weight: 700; flex: none; }
.sbsc-manage { display: flex; flex-direction: column; max-height: min(58vh,520px); overflow: auto; }
.sbsc-manage-row { display: flex; align-items: center; gap: var(--space-item); min-height: 48px; padding: var(--space-inline) var(--space-tight); color: var(--ink-3); }
.sbsc-manage-row + .sbsc-manage-row { border-top: 1px solid var(--border-subtle); }
.sbsc-manage-row > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sbsc-manage-row b { color: var(--ink); font-size: var(--t-label-size); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbsc-manage-row small { color: var(--ink-4); font-size: var(--t-micro-size); text-transform: capitalize; }
.sb-mobile-favorites { display: none; }

/* ── workspace switcher row ── */
.sb-ws { padding: 2px var(--space-inline) var(--space-inline); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.sidebar.collapsed .sb-ws { padding: 2px 0 var(--space-inline); display: flex; justify-content: center; }

/* The Work | Tools tab strip lived here until 2026-08-22. Removed with the
   tabs themselves (claude/specs/sidebar-layout-v2.md) — the rail is one list
   now. `.sb-mode` survives ONLY as the collapsed rail's mode cell wrapper;
   `.sb-mode-toggle` below still uses it. */
.sb-mode { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px var(--space-group); flex-shrink: 0; }
.sb-mode.is-rail { justify-content: center; gap: 0; padding: var(--space-inline) 0 var(--space-inline); }
.sb-mode-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: none; background: transparent; border-radius: var(--r-control);
  color: var(--sb-ink-icon); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.sb-mode-toggle:hover, .sb-mode-toggle.is-flyout { background: var(--bg-hover); color: var(--sb-ink); }
/* The mode cell is also the collapsed rail's hover route into the other
   mode's catalog, so it gets the same open-flyout treatment a section cell
   does. Click switches; hover previews. */
.sb-mode-toggle.is-flyout { background: var(--bg-active); color: var(--ink); }
.sb-mode-empty { padding: var(--space-block) var(--space-group); color: var(--sb-ink-quiet); font-size: var(--t-label-size); }
.sb-mode-empty p { margin: 0 0 var(--space-item); }
.sb-mode-empty-act { border: none; background: transparent; padding: 0; color: var(--sb-ink-label); font-size: var(--t-label-size); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sidebar.collapsed .sb-mode-empty { display: none; }

/* ── sections ── */
.sb-secwrap { display: flex; flex-direction: column; margin-top: var(--space-tight); }
.sb-secwrap + .sb-secwrap { margin-top: var(--space-inline); }
.sb-sec { display: flex; align-items: center; gap: var(--space-tight); width: calc(100% - 4px); margin: 0 2px var(--space-tight); padding: 0 var(--space-tight); height: 25px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--r-control); color: var(--sb-ink-quiet); text-transform: none; letter-spacing: -.005em; font-size: var(--t-micro-size); font-weight: 610; transition: background .16s ease-out, color .16s ease-out; }
.sb-sec:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--sb-ink-label); }
.sb-sec:first-child { padding-top: 0; }
.sb-sec:focus-visible { outline: none; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--sb-ink-label); }
.sb-sec-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-micro-size); font-weight: 610; letter-spacing: -.005em; color: currentColor; }
.sb-sec-current { min-width: 0; margin-left: var(--space-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-micro-size); font-weight: 450; color: var(--sb-ink-quiet); }
.sb-sec-current::before { content: '·'; margin-right: var(--space-tight); }
.sb-sec-count { margin-left: auto; min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--sb-ink-quiet); opacity: 0; transition: opacity .16s ease-out; }
.sb-sec:hover .sb-sec-count, .sb-secwrap.is-collapsed .sb-sec-count { opacity: .72; }
.sb-sec-chev { color: currentColor; opacity: .62; flex-shrink: 0; transform: rotate(90deg); transition: transform .2s ease-out, opacity .16s ease-out; }
.sb-secwrap.is-collapsed .sb-sec-chev { transform: rotate(0); }
.sb-sec:hover .sb-sec-chev { opacity: 1; }
.sb-sec-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.sb-sec-dot + .sb-sec-count { margin-left: 0; }
/* the section's own distinct icon (window.NAV_SECTION_ICON) — shown inline
   before the chevron+label in the expanded rail too, not just collapsed/mobile */
.sb-sec-mobile-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: currentColor; opacity: .8; }
.sb-sec-favorite { flex: none; color: var(--sb-ink-quiet); opacity: .65; }
.sb-sec-attn { margin-left: auto; min-width: 17px; height: 20px; padding: 0 var(--space-tight); display: grid; place-items: center; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-sec-attn + .sb-sec-count { margin-left: 0; }
.sb-section-drop .sb-sec { box-shadow: inset 0 2px 0 var(--border-strong); }
.sb-secitems { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .2s ease-out, opacity .16s ease-out; }
.sb-secitems-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.sb-secwrap.is-collapsed .sb-secitems { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.sb-secwrap.has-active:not(.is-collapsed) .sb-sec-name { color: var(--sb-ink-label); }
/* Collapsed Smart Rail — SLIM, icon only (56px rail / 40px cells).
   The two-line text label under each glyph is deliberately gone: it forced a
   62px cell inside a 78px rail and read as a wall of tiny wrapped words. The
   section name now lives in the native tooltip and the flyout header, which is
   where you are already looking the moment you hover. */
.sidebar.collapsed {
  overflow: visible;
}
.sidebar.collapsed .sb-ws {
  padding: 0 0 var(--space-inline); border-bottom-color: var(--border-subtle);
}
.sidebar.collapsed .sb-sec {
  position: relative;
  width: 40px; height: 40px; min-height: 0; max-height: none;
  padding: 0; margin: 0 auto;
  flex-direction: row; align-items: center; justify-content: center; gap: 0;
  border: 0; border-radius: var(--r-control); border-top: none; pointer-events: auto;
  user-select: none; -webkit-user-select: none;
  transition: background .12s ease, color .12s ease;
}
.sidebar.collapsed .sb-sec > .sb-sec-name,
.sidebar.collapsed .sb-sec .sb-sec-chev,
.sidebar.collapsed .sb-sec .sb-sec-dot,
.sidebar.collapsed .sb-sec .sb-sec-favorite,
.sidebar.collapsed .sb-sec .sb-sec-count,
.sidebar.collapsed .sb-sec .sb-sec-current { display: none !important; }
.sidebar.collapsed .sb-sec .sb-sec-attn:not(.is-compact) { display: none !important; }
.sidebar.collapsed .sb-sec-mobile-icon {
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--sb-ink-icon); opacity: 1; flex: none;
}
.sidebar.collapsed .sb-sec:hover,
.sidebar.collapsed .sb-sec:focus-visible {
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
  outline: none;
}
.sidebar.collapsed .sb-sec:hover .sb-sec-mobile-icon,
.sidebar.collapsed .sb-sec.is-flyout .sb-sec-mobile-icon,
.sidebar.collapsed .sb-secwrap.has-active .sb-sec-mobile-icon { color: var(--ink); }
.sidebar.collapsed .sb-sec.is-flyout,
.sidebar.collapsed .sb-secwrap.has-active .sb-sec {
  background: var(--bg-active);
}
.sidebar.collapsed .sb-sec-attn.is-compact {
  position: absolute; top: 1px; right: 1px; display: grid !important; place-items: center;
  min-width: 14px; height: 14px; padding: 0 var(--space-tight); margin: 0;
  border-radius: var(--r-control); border: 1.5px solid var(--bg-sidebar);
  background: var(--bg-sunken); color: var(--ink-2);
  font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  pointer-events: none; z-index: 1;
}
.sidebar.collapsed .sb-secitems { display: none; }
.sidebar.collapsed .sb-secwrap { margin-top: 2px; width: 100%; align-items: center; }
.sidebar.collapsed .sb-secwrap + .sb-secwrap { margin-top: 2px; }
.sidebar.collapsed .sb-body > .sb-secwrap:first-child .sb-sec { border-top: none; margin-top: 0; }
.sidebar.collapsed .sb-body {
  gap: 0; padding: var(--space-tight) 0 var(--space-inline); align-items: center;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar.collapsed .sb-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar.collapsed .sb-tools {
  flex-direction: column; align-items: center; justify-content: center;
  width: 40px; margin: 0 auto; gap: 2px; padding-top: var(--space-block);
  border-top: 0;
}
.sidebar.collapsed .sb-tools .sb-tool-wrap { flex: 0 0 auto; }
.sidebar.collapsed .sb-tool {
  /* matches the collapsed rail's other icon cells (.sb-sec, .sb-mode-toggle
     = 40x40) instead of inheriting the expanded row's shorter 34px height */
  flex: 0 0 auto; width: 40px; max-width: none; height: 40px; border-radius: var(--r-control); color: var(--sb-ink-icon);
}
.sidebar.collapsed .sb-foot { padding: var(--space-inline) 0 var(--space-inline); }

/* Section flyout — floating white panel (ClickUp-style), not a flush rail extension */
.sb-flyout-layer { position: fixed; inset: 0; z-index: 680; pointer-events: none; user-select: none; -webkit-user-select: none; }
.sb-flyout-bridge { position: fixed; pointer-events: auto; background: transparent; }
.sb-flyout-scrim { position: fixed; inset: 0; pointer-events: auto; background: transparent; }
.sb-flyout {
  position: fixed; width: 268px; max-width: calc(100vw - 96px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 2px rgba(31, 36, 29, 0.04),
    0 8px 28px rgba(31, 36, 29, 0.10),
    0 2px 8px rgba(31, 36, 29, 0.05);
  pointer-events: auto; overflow: hidden;
  transform-origin: left center;
  animation: sbFlyIn .18s cubic-bezier(.22,.82,.28,1) both;
}
.sb-flyout.is-leaving {
  animation: sbFlyOut .14s cubic-bezier(.4,0,.7,.4) both;
  pointer-events: none;
}
.sb-flyout.is-pinned {
  box-shadow:
    0 1px 2px rgba(31, 36, 29, 0.05),
    0 12px 36px rgba(31, 36, 29, 0.14),
    0 4px 12px rgba(31, 36, 29, 0.06);
}
.dark .sb-flyout,
body.dark .sb-flyout {
  background: var(--surface);
  border-color: var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 32px rgba(0, 0, 0, 0.5);
}
.dark .sb-flyout.is-pinned,
body.dark .sb-flyout.is-pinned {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 40px rgba(0, 0, 0, 0.58);
}
@keyframes sbFlyIn {
  from { opacity: 0; transform: translateX(-6px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes sbFlyOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(-4px) scale(0.985); }
}
.sb-flyout-hd {
  display: flex; align-items: center; gap: var(--space-tight); flex-shrink: 0;
  padding: var(--space-inline) var(--space-tight) var(--space-tight) var(--space-item);
}
.sb-flyout-title {
  flex: 1; min-width: 0; font-size: var(--t-caption-size); font-weight: 650; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-flyout-actions { display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; }
.sb-flyout-ico {
  display: grid; place-items: center; width: 26px; height: 26px; border: 0;
  border-radius: var(--r-control); background: transparent; color: var(--sb-ink-quiet); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-ico:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-ico:focus-visible { outline: none; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-ico.on { color: var(--ink); background: var(--bg-active); }
.sb-flyout-create-menu {
  flex: none; display: flex; flex-direction: column; gap: 1px;
  margin: 0 var(--space-tight) var(--space-tight); padding: 2px 0 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--border-subtle);
}
.sb-flyout-create-opt {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 34px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-create-opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sb-flyout-create-opt.locked { opacity: .72; }
.sb-flyout-pin .icn,
.sb-flyout-pin svg {
  transition: transform .16s cubic-bezier(.22,.82,.28,1), color .12s ease;
  transform-origin: 50% 18%;
  display: inline-flex;
}
.sb-flyout-pin.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.sb-flyout-pin.on .icn,
.sb-flyout-pin.on svg { transform: rotate(-32deg); color: var(--ink); }
.sb-flyout-filter {
  display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0;
  height: 30px; margin: 0 var(--space-inline) var(--space-tight); padding: 0 var(--space-inline);
  border: 1px solid transparent; border-radius: var(--r-control);
  color: var(--sb-ink-quiet); background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.sb-flyout-filter:focus-within {
  border-color: var(--accent); background: color-mix(in srgb, var(--surface) 70%, var(--bg-sidebar));
}
.sb-flyout-q {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: var(--t-caption-size);
}
.sb-flyout-q::-webkit-search-cancel-button { display: none; }
.sb-flyout-q-clear {
  display: grid; place-items: center; width: 20px; height: 20px; border: 0;
  border-radius: 6px; background: transparent; color: var(--sb-ink-quiet); cursor: pointer; flex: none;
}
.sb-flyout-q-clear:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--sb-ink-label); }
.sb-flyout-list {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-tight) var(--space-tight);
  scrollbar-width: none; -ms-overflow-style: none; scrollbar-color: transparent transparent;
}
.sb-flyout-list::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent; }
.sb-flyout-list::-webkit-scrollbar-thumb { display: none !important; background: transparent; }
.sb-flyout-group {
  /* Sentence case. ALL-CAPS + .07em tracking is the eyebrow-header pattern the
     design language bans, and it was the loudest thing in a panel whose whole
     job is to recede — the labels were shouting over the items they describe. */
  padding: var(--space-item) var(--space-inline) var(--space-tight);
  font-size: 11px; font-weight: 600; letter-spacing: -.005em;
  text-transform: none; color: var(--sb-ink-quiet); user-select: none;
}
.sb-flyout-list > .sb-flyout-group:first-child { padding-top: 2px; }
.sb-flyout-block { display: flex; flex-direction: column; }
.sb-flyout-sep {
  height: 1px; margin: var(--space-inline) var(--space-inline) 2px;
  background: var(--border-subtle); border: 0; flex: none;
}
.sb-flyout-quiet {
  padding: var(--space-tight) var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); line-height: 1.35; color: var(--sb-ink-quiet);
}
.sb-flyout-tasks { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-task {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-task:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-task-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.sb-flyout-task-meta {
  font-size: var(--t-micro-size); font-weight: 500; color: var(--sb-ink-quiet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-flyout-clients { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-client {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-client:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-leads { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-lead {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-lead:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-lead.is-hot .sb-flyout-item-label { color: var(--ink); }
.sb-flyout-deals { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-deal {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-deal:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-deal.is-stale .sb-flyout-item-label { color: var(--ink); }
.sb-flyout-invs { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-inv {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-inv:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-inv.is-overdue .sb-flyout-item-label { color: var(--ink); }
.sb-flyout-inv-st {
  flex: none; font-size: var(--t-micro-size); font-weight: 500; color: var(--sb-ink-quiet);
  white-space: nowrap;
}
.sb-flyout-ests { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight); }
.sb-flyout-est {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 36px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-est:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-est.is-expired .sb-flyout-item-label { color: var(--ink); }
.sb-flyout-client-av { display: grid; place-items: center; width: 22px; flex: none; }
.sb-flyout-client-fallback {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase;
}
.sb-flyout-files {
  display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--space-tight);
}
.sb-flyout-file {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 34px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-file:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-file-thumb {
  width: 28px; height: 28px; border-radius: var(--r-control); flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-3);
}
.sb-flyout-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-flyout-file-name {
  min-width: 0; flex: 1; font-size: var(--t-caption-size); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-flyout-file.more .sb-flyout-file-name { color: var(--sb-ink-icon); }
/* SET 10 item 5: Recent files now follows the same top-of-panel view toggle
   as the section flyout (`flyView`, wired in s-sidebar.jsx), instead of
   always rendering as a fixed 28px list row. Grid follows the masonry spec
   (claude/specs/sidebar-layout-v2.md §7): CSS columns, square media with NO
   radius (a continuous tiled surface, not a scatter of pills -- the small
   radius stays on non-image cards so that contrast keeps meaning), filenames
   on hover only over a bottom gradient. */
.sb-flyout-files.is-grid {
  display: block; column-count: 2; column-gap: var(--space-tight);
}
.sb-flyout-files.is-grid .sb-flyout-file {
  display: block; width: 100%; min-height: 0; padding: 0; margin-bottom: var(--space-tight);
  break-inside: avoid; border-radius: var(--r-control);
}
.sb-flyout-files.is-grid .sb-flyout-file-thumb {
  position: relative; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0;
}
.sb-flyout-files.is-grid .sb-flyout-file:not(.more) .sb-flyout-file-thumb { border-radius: 0; }
.sb-flyout-files.is-grid .sb-flyout-file.more .sb-flyout-file-thumb { border-radius: var(--r-control); aspect-ratio: auto; height: 40px; }
.sb-flyout-files.is-grid .sb-flyout-file-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 14px var(--space-tight) var(--space-tight);
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  color: #fff; opacity: 0; transition: opacity .14s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-flyout-files.is-grid .sb-flyout-file:hover .sb-flyout-file-name,
.sb-flyout-files.is-grid .sb-flyout-file:focus-visible .sb-flyout-file-name { opacity: 1; }
.sb-flyout-files.is-grid .sb-flyout-file.more .sb-flyout-file-name {
  position: static; opacity: 1; background: none; color: var(--sb-ink-icon);
  padding: 0; margin-top: var(--space-tight); text-align: center;
}
.sb-flyout-files.is-grid .sb-flyout-file:hover { background: transparent; }
.sb-flyout-foot { flex-shrink: 0; padding: 0 var(--space-tight) var(--space-inline); background: var(--surface); }
.sb-flyout.is-clamped .sb-flyout-list { overscroll-behavior: contain; }
.sb-flyout.is-clamped .sb-flyout-foot {
  box-shadow: 0 -10px 18px -14px rgba(31, 36, 29, 0.14);
}
.dark .sb-flyout.is-clamped .sb-flyout-foot,
body.dark .sb-flyout.is-clamped .sb-flyout-foot {
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.45);
}
.sb-flyout-quick { padding: 2px 0; }
.sb-flyout-item {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%; min-height: 30px;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--sb-ink-label); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.sb-flyout-item.active { background: var(--bg-active); color: var(--ink); }
.sb-flyout-item:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); outline: none; }
.sb-flyout-item.locked { opacity: .68; }
.sb-flyout-item-ico { display: grid; place-items: center; width: 18px; flex: none; color: var(--sb-ink-icon); }
.sb-flyout-item.active .sb-flyout-item-ico, .sb-flyout-item:hover .sb-flyout-item-ico { color: var(--sb-ink-label); }
.sb-flyout-item-label {
  flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-flyout-badge {
  min-width: 17px; height: 17px; padding: 0 var(--space-tight); display: grid; place-items: center;
  border-radius: var(--r-control); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-3);
  font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none;
}
.sb-flyout-badge.needs { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--sb-ink-label); }
.sb-flyout-badge.muted { background: transparent; color: var(--sb-ink-quiet); }
.sb-flyout-empty { padding: var(--space-item) var(--space-inline); text-align: center; font-size: var(--t-caption-size); color: var(--sb-ink-quiet); }
.sb-flyout-customize {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-inline); width: 100%;
  height: 30px; margin-top: 2px; padding: 0 var(--space-inline); border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--sb-ink-quiet); font-size: var(--t-caption-size); font-weight: 500; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-flyout-customize:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--sb-ink-label); }

@media (prefers-reduced-motion: reduce){
  .sb-sec, .sb-sec-chev, .sb-secitems, .sb-sec-count { transition: none; }
  .sb-flyout, .sb-flyout.is-leaving { animation: none; }
  .sb-flyout-pin .icn, .sb-flyout-pin svg { transition: none; }
}

/* (Command Strip — "Quick actions ⌘K" + sidebar filter search — removed
   2026-08-15. It duplicated the topbar's own search/command entry point.
   `.sb-cmd*` rules removed with it; see s-sidebar.jsx.) */

/* ── Object icons (the ONE color moment in the nav list) ────────────────────
   Attio colors exactly its record objects (Companies, People) and leaves every
   view/function glyph neutral. Stelaah's equivalent pair is Clients + Team, so
   only those two carry color, and they carry `--accent` (the WORKSPACE'S OWN
   colour, set by applyAccent) rather than a hue picked here — the colour belongs
   to the workspace, not to a nav row. Bare glyph, no filled tile.
   To drop this treatment entirely, delete this block. Nothing else depends on it. */
.sb-item[data-nav="clients"] .sb-item-ico,
.sb-item[data-nav="team"] .sb-item-ico { color: var(--accent); }
.sb-item[data-nav="clients"]:hover .sb-item-ico,
.sb-item[data-nav="team"]:hover .sb-item-ico,
.sb-item[data-nav="clients"].active .sb-item-ico,
.sb-item[data-nav="team"].active .sb-item-ico { color: var(--accent); }

/* adaptive density — the rules live WITH the Roomy Rail block further down, so
   the two tiers can never drift apart. Do not re-add heights here. */

/* ── drag-to-reorder (within a section) ── */
.sidebar:not(.collapsed) .sb-item[draggable="true"] { cursor: grab; }
.sb-item.sb-dragging { opacity: .45; }
.sb-item.sb-dropbefore { box-shadow: inset 0 2px 0 var(--border-strong); }

/* (The "All tools" row was removed 2026-08-15 with the Work | Tools mode
   switch; its .sb-more rules went with it. "More" is now an ordinary section
   inside the rail and styles itself as one.) */

/* ── bottom toolbar: configurable personal quick actions ── */
.sb-tools { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding-top: var(--space-inline); border-top: 1px solid var(--border-subtle); }
.sb-tool-wrap { position: relative; display: inline-flex; flex: 1 1 0; min-width: 0; }
/* Bottom utility tab bar: tabs share the width so the row never overflows. */
.sb-tool { position: relative; display: grid; place-items: center; flex: 1 1 0; min-width: 0; width: auto; max-width: 46px; height: 34px; border: none; background: transparent; border-radius: var(--r-control); color: var(--sb-ink-icon); cursor: pointer; transition: background .14s ease, color .14s ease; }
.sb-tool-wrap .sb-tool { width: 100%; max-width: none; }
.sb-tool:hover { background: var(--bg-hover); color: var(--ink); }
.sb-tool:focus-visible { outline: none; background: var(--bg-hover); color: var(--ink); }
.sb-tool.active { background: var(--bg-active); color: var(--ink); }
.sb-tool-locked { color: var(--ink-4); }
.sb-tool-count { position: absolute; top: 2px; right: 3px; min-width: 14px; height: 14px; padding: 0 var(--space-tight); display: grid; place-items: center; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); font-size: 9px; font-weight: 700; line-height: 1; border: 2px solid var(--bg-sidebar); }
.sb-tool-count.muted { background: var(--ink-4); }
.sb-tool-warn { position: absolute; bottom: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #c8a23c; border: 2px solid var(--bg-sidebar); }
.sb-tool-lock { position: absolute; bottom: 4px; right: 5px; display: grid; place-items: center; color: var(--ink-4); }
/* Persistent tool captions (expanded rail only). A hover tooltip names these four
   tools nowhere a touch user can reach, so the expanded rail labels them outright.
   Hidden in the collapsed + narrow rails, which are deliberately icon-only and
   reach the same labels through the flyout. */
.sb-tool-cap { display: none; }
/* padding:0 matters — the UA button default (1px 6px) was eating var(--space-item) of the
   54px tool, leaving the caption a 42px column and clipping "Marketplace". */
.sidebar:not(.collapsed) .sb-tool {
  max-width: none; height: 46px; padding: 0; align-content: center; gap: var(--space-tight);
}
/* justify-self:stretch is load-bearing — the button is `place-items:center`, which
   sizes children to max-content and left the longest label ("Marketplace") clipped
   at 42px inside a 54px tool. Stretching hands the caption the full content box. */
.sidebar:not(.collapsed) .sb-tool-cap {
  display: block; justify-self: stretch; width: 100%; padding: 0; text-align: center;
  font-size: 9px; font-weight: 600; letter-spacing: 0; line-height: 1;
  color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Re-anchor the corner adornments above the caption row so they never sit on the text. */
.sidebar:not(.collapsed) .sb-tool-warn { bottom: 18px; }
.sidebar:not(.collapsed) .sb-tool-lock { bottom: 17px; }
/* notifications panel, re-anchored from the bottom toolbar (the shared panel
   positions itself for the topbar; pin it above the toolbar instead) */
.sb-ntf-anchor { position: fixed; left: 10px; bottom: 60px; width: 360px; max-width: calc(100vw - 24px); z-index: 700; }
.sb-ntf-anchor .menu { position: relative !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; max-height: min(66vh, 560px); overflow: auto; }

/* ── All features / layouts browser (inside the shared Modal) ── */
.modal.sbx-modal { width: min(640px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; }
.modal.sbx-modal .modal-body { padding-top: 2px; }
.sbx-tabs { display: flex; align-items: center; gap: var(--space-tight); padding-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-inline); }
.sbx-tab { display: inline-flex; align-items: center; gap: var(--space-inline); height: 30px; padding: 0 var(--space-item); border: none; background: transparent; border-radius: var(--r-control); color: var(--ink-3); font-size: var(--t-label-size); font-weight: 550; cursor: pointer; transition: background .18s ease, color .18s ease; user-select: none; }
.sbx-tab:hover { background: var(--bg-hover); color: var(--ink); }
.sbx-tab.on { background: var(--bg-active); color: var(--ink); }
.sbx-search { margin-left: auto; display: flex; align-items: center; gap: var(--space-inline); height: 30px; padding: 0 var(--space-inline); border: 1px solid var(--border); border-radius: var(--r-control); color: var(--ink-4); background: var(--surface); transition: border-color .15s ease; }
.sbx-search:focus-within { border-color: var(--accent); }
.sbx-q { border: none; outline: none; background: transparent; font: inherit; font-size: var(--t-label-size); color: var(--ink); width: 160px; }
.sbx-q:focus, .sbx-q:focus-visible { outline: none; box-shadow: none; }

.sbx-note { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); padding: var(--space-tight) 2px var(--space-item); }
.sbx-bottom-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); padding: 2px 0 var(--space-item); }
.sbx-bottom-pill { display: inline-flex; align-items: center; gap: var(--space-tight); min-height: 28px; padding: 0 var(--space-inline); border-radius: 999px; background: var(--bg-active); color: var(--ink); font-size: var(--t-caption-size); font-weight: 600; }
.sbx-tool-row { width: 100%; min-height: 36px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-inline); padding: 0 var(--space-inline); border: none; border-radius: var(--r-control); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.sbx-tool-row:hover { background: var(--bg-hover); }
.sbx-tool-row.on { background: var(--bg-active); }
.sbx-tool-row.off { color: var(--ink-4); }
.sbx-tool-check { display: inline-flex; align-items: center; gap: var(--space-tight); color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; }
.sbx-tool-row.on .sbx-tool-check { color: var(--accent); }

@media (max-width: 760px) {
  .modal.sbx-modal { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; }
  .modal.sbx-modal { --modal-inset: 16px; }
  .modal.sbx-modal .modal-hd { padding-inline: var(--modal-inset); }
  .modal.sbx-modal .modal-body { padding-inline: var(--modal-inset); overflow-x: hidden; }
  .sbx-tabs { flex-wrap: wrap; align-items: flex-start; }
  .sbx-search { width: 100%; margin-left: 0; }
  .sbx-q { width: 100%; min-width: 0; }
  .sbx-tool-row { grid-template-columns: 22px minmax(0, 1fr) auto; padding-inline: 6px; }
}

.sbx-tip {
  display: flex; align-items: flex-start; gap: var(--space-inline);
  padding: var(--space-item) var(--space-item); margin: 0 0 var(--space-item); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink-2); user-select: none;
}
.sbx-tip > svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.sbx-tip-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-caption-size); line-height: 1.4; }
.sbx-tip-tx b { font-weight: 650; color: var(--ink); font-size: var(--t-label-size); }
.sbx-tip-tx span { color: var(--ink-3); }
.sbx-tip-x {
  display: grid; place-items: center; width: 26px; height: 26px; margin: -2px -4px 0 0;
  border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-4); cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.sbx-tip-x:hover { background: var(--bg-hover); color: var(--ink-2); }
.sbx-tip-x:focus-visible { outline: none; background: var(--bg-hover); color: var(--ink); }

/* layouts — selectable cards with mini rail sketches + live peek panel */
.sbx-layouts-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 0 var(--space-group); align-items: stretch; min-height: 0; }
.sbx-layouts { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 2px; min-width: 0; }
.sbx-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); }
.sbx-layout {
  display: flex; flex-direction: column; gap: var(--space-inline); text-align: left;
  padding: var(--space-item) var(--space-item) var(--space-inline); border: 1px solid transparent; border-radius: var(--r-card);
  background: transparent; color: inherit; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  user-select: none;
}
.sbx-layout:hover:not(:disabled), .sbx-layout.peek:not(.active) { background: var(--bg-hover); }
.sbx-layout:focus-visible { outline: none; background: var(--bg-hover); }
.sbx-layout.active { background: var(--bg-active); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.sbx-layout.rec:not(.active) { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sbx-layout:disabled { cursor: default; background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.sbx-layout-top { display: flex; align-items: flex-start; gap: var(--space-inline); }
.sbx-layout-ic { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); flex-shrink: 0; }
.sbx-layout-t { flex: 1; min-width: 0; }
.sbx-layout-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-tight); font-size: var(--t-label-size); font-weight: 600; color: var(--ink); line-height: 1.25; }
.sbx-layout-blurb { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--space-tight); line-height: 1.35; }
.sbx-layout-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex-shrink: 0; }
.sbx-layout-use {
  font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  background: var(--bg-sunken); opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; flex-shrink: 0;
}
.sbx-layout:hover:not(.active):not(:disabled) .sbx-layout-use,
.sbx-layout.peek:not(.active) .sbx-layout-use { opacity: 1; }
.sbx-layout-meta { display: flex; gap: var(--space-inline); font-size: var(--t-micro-size); color: var(--ink-4); padding-top: 2px; border-top: 1px solid var(--border-subtle); }
.sbx-chip { font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-sunken); border-radius: 6px; padding: 2px var(--space-tight); }
.sbx-chip.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sbx-chip.rec { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.sbx-mini { display: flex; gap: var(--space-tight); min-height: 44px; }
.sbx-mini-sec { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.sbx-mini-lab { font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-mini-rows { display: flex; flex-direction: column; gap: 2.5px; }
.sbx-mini-row { display: block; height: 3.5px; border-radius: 2px; background: var(--border); width: 100%; }
.sbx-mini-row:nth-child(2) { width: 78%; }
.sbx-mini-row:nth-child(3) { width: 88%; }
.sbx-mini-row:nth-child(4) { width: 62%; }
.sbx-mini-more { display: block; height: 2px; width: 28%; border-radius: 2px; background: var(--border-subtle); margin-top: 1px; }
.sbx-mini-rest { align-self: flex-end; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); padding-bottom: 2px; }
.sbx-layout.active .sbx-mini-row { background: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.sbx-layout-peek {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--border-subtle); padding-left: var(--space-item); margin: -2px 0 0;
}
.sbx-layout-peek-name {
  margin-left: auto; font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2);
  max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbx-layout-peek-apply { width: 100%; justify-content: center; margin-top: var(--space-inline); }
.sbx-preview-item.static { cursor: default; }
.sbx-preview-item.static .sbx-preview-grip { display: none; }
.sbx-preview-more { font-size: var(--t-micro-size); color: var(--ink-4); padding: 2px var(--space-tight) var(--space-tight); }

/* features — catalog + live rail preview */
.sbx-features { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 0 var(--space-group); align-items: stretch; min-height: 0; }
.sbx-features-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.sbx-summary {
  display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap;
  padding: 2px 2px var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-2); user-select: none;
}
.sbx-summary-stat b { font-weight: 650; color: var(--ink); }
.sbx-summary-stat.muted { color: var(--ink-4); }
.sbx-summary-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); opacity: .55; flex-shrink: 0; }
.sbx-summary-reset {
  margin-left: auto; border: none; background: transparent; color: var(--ink-3);
  font: inherit; font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; padding: 2px var(--space-tight); border-radius: 6px;
}
.sbx-summary-reset:hover { background: var(--bg-hover); color: var(--ink); }

.sbx-filters { display: flex; flex-wrap: wrap; gap: var(--space-tight); padding-bottom: var(--space-inline); }
.sbx-filter {
  display: inline-flex; align-items: center; gap: var(--space-tight); height: 26px; padding: 0 var(--space-inline);
  border: none; border-radius: 999px; background: transparent; color: var(--ink-3);
  font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; transition: background .15s ease, color .15s ease; user-select: none;
}
.sbx-filter em { font-style: normal; font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); }
.sbx-filter:hover { background: var(--bg-hover); color: var(--ink); }
.sbx-filter.on { background: var(--bg-active); color: var(--ink); }
.sbx-filter.on em { color: var(--ink-2); }

.sbx-cat { max-height: min(50vh, 440px); overflow-y: auto; padding-right: 2px; }
.sbx-group { padding-bottom: 2px; }
.sbx-group-hd {
  display: flex; align-items: center; gap: var(--space-tight); width: 100%;
  font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); padding: var(--space-inline) var(--space-tight) var(--space-tight); border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-control); user-select: none;
}
.sbx-group-hd:hover { color: var(--ink-2); background: var(--bg-hover); }
.sbx-group-hd span { flex: 1; text-align: left; }
.sbx-group-hd em { font-style: normal; font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-4); opacity: .75; }
.sbx-row {
  display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  cursor: pointer; transition: background .15s ease; user-select: none;
}
.sbx-row:hover { background: var(--bg-hover); }
.sbx-row.in .sbx-name { color: var(--ink); }
.sbx-row.off .sbx-name, .sbx-row.off .sbx-ico { color: var(--ink-4); }
.sbx-row.flash { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sbx-ico { display: grid; place-items: center; width: 20px; color: var(--ink-3); flex-shrink: 0; }
.sbx-name { flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-pin { display: grid; place-items: center; color: var(--ink-4); flex-shrink: 0; }
.sbx-plan { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); background: var(--bg-sunken); border-radius: var(--r-control); padding: var(--space-tight) var(--space-inline); flex-shrink: 0; }
.sbx-state { font-size: var(--t-micro-size); color: var(--ink-4); flex-shrink: 0; }
.sbx-act {
  display: inline-flex; align-items: center; gap: var(--space-tight); height: 25px; padding: 0 var(--space-inline);
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control);
  font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; flex-shrink: 0;
}
.sbx-act:hover { background: var(--bg-hover); color: var(--ink); }
/* .sbx-tog / .sbx-tog-knob REMOVED (SET 9 §5, 2026-08-30): a seventh toggle
   implementation that nothing rendered. No .jsx in the tree emits either class,
   so it was a maintenance cost with no pixels behind it. */
.sbx-empty { padding: 28px var(--space-item); text-align: center; font-size: var(--t-label-size); color: var(--ink-3); }
.sbx-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-item) var(--space-tight) 2px; border-top: 1px solid var(--border-subtle); margin-top: var(--space-inline); }

/* live rail preview */
.sbx-preview {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--border-subtle); padding-left: var(--space-item); margin: -2px 0 0;
}
.sbx-preview-hd { display: flex; align-items: center; gap: var(--space-inline); padding: 2px 0 var(--space-inline); user-select: none; }
.sbx-preview-title { font-size: var(--t-micro-size); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.sbx-preview-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 var(--space-tight); display: grid; place-items: center;
  border-radius: var(--r-control); background: var(--bg-sunken); font-size: var(--t-micro-size); font-weight: 650; color: var(--ink-2);
}
.sbx-preview-rail { flex: 1; min-height: 0; max-height: min(50vh, 440px); overflow-y: auto; padding-right: 2px; }
.sbx-preview-sec { padding-bottom: var(--space-inline); position: relative; }
.sbx-preview-sec.dragging { opacity: .45; }
.sbx-preview-sec.dropbefore::before {
  content: ''; position: absolute; left: 2px; right: 2px; top: -2px; height: 1px;
  background: var(--accent); border-radius: 1px; pointer-events: none;
}
.sbx-preview-sec-lab {
  display: flex; align-items: center; gap: var(--space-tight);
  font-size: 9.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); padding: 2px 2px var(--space-tight); cursor: grab; user-select: none; border-radius: 6px;
}
.sbx-preview-sec-lab:active { cursor: grabbing; }
.sbx-preview-sec-lab:hover { color: var(--ink-2); background: var(--bg-hover); }
.sbx-preview-sec-lab > span:not(.sbx-preview-sec-grip) { flex: 1; min-width: 0; }
.sbx-preview-sec-grip {
  display: grid; place-items: center; width: 10px; opacity: 0; color: var(--ink-4); flex-shrink: 0;
  transition: opacity .15s ease;
}
.sbx-preview-sec-lab:hover .sbx-preview-sec-grip,
.sbx-preview-rail.sec-dragging .sbx-preview-sec-grip { opacity: .7; }
.sbx-preview-sec-reset {
  display: grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 5px;
  background: transparent; color: var(--ink-4); cursor: pointer; opacity: 0; padding: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.sbx-preview-sec:hover .sbx-preview-sec-reset { opacity: 1; }
.sbx-preview-sec-reset:hover { background: var(--bg-hover); color: var(--ink-2); }
.sbx-preview-item {
  display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-tight) var(--space-tight) 2px; border-radius: var(--r-control);
  font-size: var(--t-caption-size); font-weight: 500; color: var(--ink-2); transition: background .18s ease, opacity .15s ease;
  cursor: grab; user-select: none; position: relative;
}
.sbx-preview-sec-lab:focus { outline: none; }
.sbx-preview-sec-lab:focus-visible {
  outline: none; color: var(--ink-2); background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.sbx-preview-item:focus { outline: none; }
.sbx-preview-item:focus-visible {
  outline: none; background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.sbx-preview-item span.sbx-preview-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-preview-grip {
  display: grid; place-items: center; width: 12px; color: var(--ink-4); opacity: 0; flex-shrink: 0;
  transition: opacity .15s ease;
}
.sbx-preview-item:hover .sbx-preview-grip,
.sbx-preview-rail.dragging .sbx-preview-grip { opacity: .7; }
.sbx-preview-item.flash { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sbx-preview-item.dragging { opacity: .45; background: var(--bg-hover); }
/* drop indicator: 1px hairline above the target — not a colored accent bar */
.sbx-preview-item.dropbefore::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: -1px; height: 1px;
  background: var(--accent); border-radius: 1px; pointer-events: none;
}
.sbx-preview-pin { color: var(--ink-4); flex-shrink: 0; }
.sbx-preview-empty { padding: var(--space-group) var(--space-tight); font-size: var(--t-caption-size); color: var(--ink-4); line-height: 1.4; }
.sbx-preview-hint { margin: var(--space-inline) 0 0; font-size: var(--t-micro-size); color: var(--ink-4); line-height: 1.35; }

@media (max-width: 760px){
  .sbx-features, .sbx-layouts-wrap { grid-template-columns: 1fr; }
  .sbx-preview, .sbx-layout-peek { display: none; }
  .sbx-layout-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .sbx-tab, .sbx-layout, .sbx-row, .sbx-preview-item, .sbx-filter { transition: none; }
}

/* ── Settings → Workspace · Sidebar layout card ── */
.sbx-set { display: flex; flex-direction: column; gap: var(--space-item); }
.sbx-set-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-item); }
.sbx-set-sub { margin: var(--space-tight) 0 0; font-size: var(--t-label-size); line-height: 1.4; max-width: 52ch; }
.sbx-set-acts { display: flex; align-items: center; gap: var(--space-tight); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.sbx-set-active {
  display: flex; align-items: flex-start; gap: var(--space-item); width: 100%; text-align: left;
  padding: var(--space-item) var(--space-item) var(--space-item) var(--space-inline); border: 1px solid transparent; border-radius: var(--r-card);
  background: var(--bg-active); color: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  user-select: none;
}
.sbx-set-active:hover { background: color-mix(in srgb, var(--bg-active) 70%, var(--bg-hover)); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.sbx-set-active:focus-visible { outline: none; border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.sbx-set-active-ic { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; color: var(--ink-2); flex-shrink: 0; }
.sbx-set-active-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); }
.sbx-set-active-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-tight); font-size: var(--t-body-size); font-weight: 600; color: var(--ink); }
.sbx-set-active-blurb { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.35; }
.sbx-set-active-go { display: grid; place-items: center; color: var(--ink-4); margin-top: 2px; flex-shrink: 0; transition: color .15s ease, transform .15s ease; }
.sbx-set-active:hover .sbx-set-active-go { color: var(--ink-2); transform: translateX(2px); }
.sbx-set-mini {
  display: flex; gap: var(--space-inline); padding: var(--space-tight) 2px 2px; min-height: 48px;
  border-top: 1px solid var(--border-subtle); padding-top: var(--space-item);
}
.sbx-set-mini .sbx-mini-sec { flex: 1; min-width: 0; }
.sbx-set-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-inline);
  font-size: var(--t-caption-size); color: var(--ink-2); user-select: none;
}
.sbx-set-meta b { font-weight: 650; color: var(--ink); }
.sbx-set-rec {
  display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap;
  padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: var(--t-caption-size); color: var(--ink-2); line-height: 1.35;
}
.sbx-set-rec > span { flex: 1; min-width: 140px; }
.sbx-set-rec b { font-weight: 650; color: var(--ink); }
@media (max-width: 640px){
  .sbx-set-hd { flex-direction: column; align-items: stretch; }
  .sbx-set-acts { justify-content: flex-start; }
}
@media (max-width: 760px){
  .sb-edge-expand { display: none; }
  .sidebar .sb-brand-collapse { display: none; }
  .sidebar .sb-logo-full { display: none !important; }
  .sidebar .sb-brand .sb-logo-mark { display: inline-flex !important; color: var(--lime); justify-content: center; width: 100%; }
  .sidebar .sb-sec {
    position: relative; width: 40px; height: 40px; min-height: 0; max-height: none;
    padding: 0; margin: 2px auto; flex-direction: row; align-items: center;
    justify-content: center; gap: 0; border: 0; border-radius: var(--r-control); pointer-events: auto;
  }
  .sidebar .sb-sec > .sb-sec-name, .sidebar .sb-sec .sb-sec-chev, .sidebar .sb-sec .sb-sec-dot,
  .sidebar .sb-sec .sb-sec-favorite, .sidebar .sb-sec .sb-sec-attn, .sidebar .sb-sec .sb-sec-count,
  .sidebar .sb-sec .sb-sec-current { display: none !important; }
  .sidebar .sb-sec-mobile-icon { display: grid; place-items: center; width: 18px; height: 18px; opacity: 1; }
  .sidebar .sb-secitems { display: none; }
  .sidebar .sb-tools { flex-direction: column; align-items: center; gap: var(--space-tight); width: 40px; margin: 0 auto; }
  .sidebar .sb-tools .sb-tool-wrap { flex: 0 0 auto; }
  .sidebar .sb-tools .sb-tool { flex: 0 0 auto; width: 40px; max-width: none; height: 34px; }
  /* narrow rail is icon-only — the flyout carries the labels here */
  .sidebar .sb-tools .sb-tool-cap { display: none; }
  .sidebar .sb-tools .sb-tool-warn { bottom: 5px; }
  .sidebar .sb-tools .sb-tool-lock { bottom: 4px; }
  .sidebar .sb-ws { padding: 2px 0 var(--space-inline); display: flex; justify-content: center; }
  .sidebar .sb-sc { display: none; }
  .sb-flyout { width: min(256px, calc(100vw - 96px)); border-radius: var(--r-card); }
  .sb-mobile-favorites { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 89; display: flex; align-items: center; gap: 2px; padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--overlay); box-shadow: var(--shadow-lg); }
  .sb-mobile-favorites button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); }
  .sb-mobile-favorites button:hover { background: var(--bg-hover); }
  .sb-mobile-favorites i { position: absolute; right: 2px; top: 1px; min-width: 14px; height: 14px; padding: 0 var(--space-tight); display: grid; place-items: center; border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); font: 700 8px/1 sans-serif; }
}

/* ── Touch targets ──────────────────────────────────────────────────────────
   The slim rail is tuned for a mouse: 40x40 cells read tight and precise with a
   cursor. On a finger that is under the 44x44 floor (Apple HIG, WCAG 2.5.5), and
   the slim pass shrank these from 64x52, so touch ergonomics regressed even though
   the desktop look improved. Restore 44px wherever the pointer is coarse — the
   desktop rail is untouched.
   The RAIL WIDTH STAYS 56px in every context. `sidebarW` in s-sidebar.jsx is a
   hardcoded 56 that positions the flyout (`left: sidebarW + FLYOUT_GAP`) and its
   hover bridge, so widening the rail in CSS alone silently shrinks that 8px gap
   (measured 4px at a 60px rail) and misplaces the bridge. 44px cells fit inside
   56px with 6px either side, so no width change is needed. If the rail width ever
   does change, `sidebarW` must change with it. */
@media (pointer: coarse) {
  .sidebar.collapsed .sb-sec,
  .sidebar.collapsed .sb-mode.is-rail .sb-mode-toggle { width: 44px; height: 44px; }
  .sidebar.collapsed .sb-item { width: 44px; height: 40px; }
  .sidebar.collapsed .sb-tool { width: 44px; height: 40px; }
  .sidebar.collapsed .sb-tools { width: 44px; }
  .sidebar.collapsed .ws-switch { width: 44px; }
}
/* Match .sidebar.collapsed too: that selector is (0,2,1) and would otherwise
   outrank a bare `.sidebar .sb-sec` (0,1,1) and hold the cells at 40px. */
@media (max-width: 760px) {
  .sidebar .sb-sec, .sidebar.collapsed .sb-sec,
  .sidebar .sb-mode.is-rail .sb-mode-toggle, .sidebar.collapsed .sb-mode.is-rail .sb-mode-toggle { width: 44px; height: 44px; }
  .sidebar .sb-item, .sidebar.collapsed .sb-item { width: 44px; height: 44px; }
  .sidebar .sb-tools, .sidebar.collapsed .sb-tools { width: 44px; }
  .sidebar .sb-tools .sb-tool, .sidebar.collapsed .sb-tool { width: 44px; height: 44px; }
  .sidebar .ws-switch, .sidebar.collapsed .ws-switch { width: 44px; }
}

/* ── row hover actions ──────────────────────────────────────────────────────
   The badge and the actions share one slot at the end of the row. On hover the
   badge gives way and the actions take its place — positioned ABSOLUTELY so
   revealing them never reflows the label, which is the whole reason this isn't
   just two more flex children. They are always in the DOM at opacity:0 rather
   than display:none, so they keep their place in tab order for keyboard users;
   :focus-within is what makes tabbing to them actually reveal them. */
.sb-item { position: relative; }
.sb-acts {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1px;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease-out;
}
.sb-item:hover .sb-acts,
.sb-item:focus-within .sb-acts { opacity: 1; pointer-events: auto; }
.sb-item:hover .sb-badge,
.sb-item:focus-within .sb-badge { opacity: 0; }
.sb-badge { transition: opacity .12s ease-out; }
.sb-act {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-sm); color: var(--sb-ink-icon); cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
}
.sb-act:hover { background: var(--sb-active); color: var(--sb-ink); }
.sb-act.on { color: var(--sb-ink); }
.sb-act:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 1px; }
.sidebar.collapsed .sb-acts { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sb-acts, .sb-badge { transition: none; }
}

/* ── Customize sidebar modal ──────────────────────────────────────────────
   COLOUR LEFT THIS MODAL (SET 9 §4, 2026-08-30). The swatch grid, its hover
   name chip, the meta line, the Advanced custom-hex form and its warning row
   are all deleted here because the markup that rendered them is gone — rail
   colour and the app theme now live in Settings -> Appearance (`.apth-*` in
   stelaah.css). The tab strip went with them: one section does not need tabs.

   Also removed in the same sweep, and NOT related to this change: `.sba-name`,
   `.sba-cards`, `.sba-card`, `.sba-card-img`, `.sba-card-cap`. No .jsx in the
   tree has ever rendered those — a pre-existing orphan family found by grepping
   every class in this block against the markup rather than assuming the ones I
   touched were the only dead ones. */
.sba-sec { display: flex; flex-direction: column; gap: var(--space-item); }
.sba-link { border: none; background: transparent; padding: 0; cursor: pointer; color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-tight); }
.sba-link:hover { color: var(--ink); }
.sba-link.danger:hover { color: var(--st-blocked); }
.sba-note { margin: var(--space-tight) 0 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.55; }
.sba-row { display: flex; align-items: flex-start; gap: var(--space-item); }
.sba-row-main { flex: 1; min-width: 0; }
.sba-row-t { color: var(--ink); font-size: var(--t-label-size); font-weight: 600; }
.sba-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-control); background: var(--bg-active); }
.sba-seg-b { border: none; background: transparent; padding: 5px var(--space-item); border-radius: var(--r-control); cursor: pointer; color: var(--ink-3); font: inherit; font-size: var(--t-caption-size); font-weight: 600; }
.sba-seg-b.on { background: var(--surface); color: var(--ink); }
.sba-slider { display: inline-flex; align-items: center; gap: var(--space-inline); min-width: 160px; }
.sba-slider input[type="range"] { flex: 1; min-width: 0; }
.sba-slider-val { flex: none; width: 34px; text-align: right; color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.sba-icons { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-tight); margin-top: var(--space-inline); }
.sba-ic { display: grid; place-items: center; height: 32px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--bg-active); color: var(--ink-2); cursor: pointer; }
.sba-ic:hover { color: var(--ink); }
.sba-ic.on { border-color: var(--ink); color: var(--ink); }
.sba-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-tight); margin-top: var(--space-inline); max-height: 240px; overflow: auto; }
.sba-pick { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); border: 1px solid var(--border-subtle); border-radius: var(--r-control); background: transparent; cursor: pointer; color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); text-align: left; }
.sba-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sba-pick:hover { background: var(--bg-hover); color: var(--ink); }
.sba-pick.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.sba-pick-chk { flex: none; }
.sba-foot { display: flex; gap: var(--space-block); margin-top: var(--space-block); padding-top: var(--space-item); border-top: 1px solid var(--border-subtle); }
/* SET 10 item 6: two real sections now share this modal, so a tab bar earns
   its place (contrast the single-section removal note above LayoutSection).
   Quiet text tabs with a hairline under the active one, matching the app's
   established "no filled pill" tab language. */
.sba-tabbar { display: flex; gap: var(--space-block); margin-bottom: var(--space-item); border-bottom: 1px solid var(--border-subtle); }
.sba-tab { border: none; background: transparent; padding: var(--space-tight) 0 var(--space-inline); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 600; cursor: pointer; }
.sba-tab:hover { color: var(--ink-2); }
.sba-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 640px) {
  .sba-icons { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sba-picks { grid-template-columns: 1fr; }
}

/* ── badges on a custom rail ────────────────────────────────────────────────
   --accent is a WORKSPACE-chosen colour with no contrast guarantee against a
   personally-chosen rail: the default olive accent on Rosewood is dark-on-dark.
   On a custom surface the filled attention badge therefore inverts the rail's
   own ink/surface pair, which is legible on all sixteen with no per-colour
   tuning — and delivers the "one badge language" cleanup at the same time.
   Quiet counts drop to --sb-ink-quiet; only genuine attention stays filled. */
.sidebar[data-sb-surface] .sb-badge {
  background: var(--sb-ink);
  color: var(--sb-bg);
}
.sidebar[data-sb-surface] .sb-badge.muted {
  background: transparent;
  color: var(--sb-ink-quiet);
}
.sidebar[data-sb-surface] .sb-tool-count { background: var(--sb-ink); color: var(--sb-bg); }

/* Sentence case: the rail's only ALL-CAPS label was the Pinned heading, which
   the no-eyebrow-headers rule bans. .sb-section-label is shared, so this scopes
   the change to the Pinned heading that actually carries it. */
.sb-sc-hd { text-transform: none; letter-spacing: -.005em; font-size: var(--t-micro-size); }



/* The Default swatch moved to Settings as `.apth-rail-sw-follow` (stelaah.css),
   keeping the same idea: paint the live --bg-sidebar so it previews correctly
   in BOTH themes, which is the one thing a fixed hex swatch cannot do. The
   diagonal slash went with the rename — the option is now a labelled row
   ("Charcoal / Follows your theme") rather than a bare circle needing a glyph
   to say it is not a colour. */

/* ── ROOMY RAIL — the ONE secondary-rail row treatment ──────────────────────
   claude/specs/sidebar-layout-v2.md §5, "Amended 2026-08-29"; authored as
   prompt C of claude/PROMPTS_2026-08-29_POLISH_SET.md from a reference David
   supplied and asked for on 2026-08-29. Where §5's original numbers and these
   disagree, THESE WIN.

   This is a visual TREATMENT, not a second sidebar. It rides the existing row
   and group components, so it applies to today's shipped rail and carries into
   the v2 structural build (no tabs, one list, Pinned shelf, Browse all)
   unchanged. Nothing here decides what the rail CONTAINS.

   SINGLE SOURCE — every secondary rail that renders a list of nav rows draws
   its geometry from the ONE block below: the Smart Rail, its section flyout,
   the Settings rail (`.set2`, s-misc.jsx) and the portal customizer nav
   (`.cpm-nav`, s-portal.jsx). Copying these numbers into a per-surface rule is
   a defect — add that surface's selector to the list instead.

   `.set2-*` is authored in stelaah-editorial.css, which loads AFTER this file,
   so its selectors here carry one extra class of weight (`.set2 .set2-item`).
   Winning by specificity rather than by source order is deliberate: order
   breaks the moment a <link> moves, weight does not.

   Numbers, all on the 4pt grid / the token ladder:
     side gutter       --space-inline  (8px)   the pill never touches the edge
     row height        --row-h         (40px)  was 34
     row radius        --r-control     (8px)   the ladder rung for menu rows;
                                               the old freehand 9px was off it
     reserved icon box 24px, grid-centred      one label x for the whole list
     glyph             18px                    set in JSX — Flaticon glyphs
                                               render with an INLINE font-size
                                               that CSS cannot override
     icon -> label     --space-item    (12px)  was 8
     group top         --space-block   (24px)  was 16px PLUS a hairline
     label -> rows     --space-inline  (8px)
     group label       12px, sentence case, --sb-ink-quiet
     washes            --state-hover / --state-selected, never a literal grey

   No group hairline. The Hairline Budget (CODEX_DESIGN_PROTOCOL §3, 2026-08-29)
   supersedes §5's "+1px hairline": one line under every group turned the rail
   into stripes, and 24px of space says "new group" without drawing anything.
   What remains in the panel is the rail's own right edge and the workspace
   switcher's bottom edge — fixed chrome meeting a scroller, which whitespace
   genuinely cannot disambiguate. That is two, inside budget. */
.sidebar .sb-body { padding: var(--space-tight) var(--space-inline) 0; gap: 0; }

/* THE row. `:not(.collapsed)` is load-bearing: the collapsed rail and the
   <=760 rail are icon-only 40x40 cells, and roomy padding + a 24px icon box
   would overflow a 40px cell by 8px. Those two states are re-asserted below. */
.sidebar:not(.collapsed) .sb-item,
.sb-flyout .sb-item,
.set2 .set2-item,
.cpm-nav .sb-item {
  height: var(--row-h);
  gap: var(--space-item);
  padding: 0 var(--space-inline);
  border-radius: var(--r-control);
}
/* Reserved icon box (geometry rule 4): a fixed 24px box means every label in
   the list starts at the same x, including rows whose glyph is missing or is a
   colour chip instead. `place-items:center` is the grid centring rule 1 asks
   for — never padding math. */
.sidebar:not(.collapsed) .sb-item-ico,
.sb-flyout .sb-item-ico,
.cpm-nav .sb-item-ico {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex-shrink: 0;
}
/* The Settings rail passes its className straight to <Icon>, so `.set2-item-ic`
   IS the glyph — there is no wrapper span to size. Sizing the glyph element to
   24px would scale the artwork instead of reserving a box around it, so the row
   becomes a grid and the 24px TRACK is the reserved box; `justify-self:center`
   keeps the glyph at its own size, centred in it. Same result, no JSX change —
   s-misc.jsx is held by another session (see claude/ACTIVE_CLAIMS.md). */
.set2 .set2-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
}
.set2 .set2-item-ic { justify-self: center; }
/* Same 8px gutter as the Smart Rail, so the pill sits off the panel edge by the
   same amount on both surfaces. `.set2-rail`'s own 12px padding is authored in
   stelaah-editorial.css; overriding only the two horizontal sides keeps its
   vertical framing intact. */
.set2 .set2-rail { padding-left: var(--space-inline); padding-right: var(--space-inline); }
/* Washes come from the state tokens so the 16 personal sidebar colours and dark
   mode all re-resolve them in their own subtree. The tone blocks at the top of
   this file define --state-* alongside the legacy --bg-* aliases for exactly
   this reason; a literal grey here would paint light-mode ink on a dark rail. */
.sidebar:not(.collapsed) .sb-item:hover,
.sb-flyout .sb-item:hover,
.set2 .set2-item:hover,
.cpm-nav .sb-item:hover { background: var(--state-hover); }
.sidebar:not(.collapsed) .sb-item.active,
.sb-flyout .sb-item.active,
.set2 .set2-item.on,
.cpm-nav .sb-item.active { background: var(--state-selected); }
/* The rail's selected pill is the reference's "soft NEUTRAL rounded fill", so
   the rails re-point --state-selected at their own ink-derived wash rather than
   the global accent tint. Scoped to the rails, so the accent-tinted selection
   every other surface uses is untouched — and this is what keeps the pill
   readable on all 16 tones, where an accent tint would muddy. */
.sidebar, .sb-flyout, .set2-rail, .cpm-nav { --state-selected: var(--state-active); }

/* Groups separate by SPACE. */
.sidebar .sb-secwrap,
.set2 .set2-grp { margin-top: 0; padding-top: var(--space-block); border-top: 0; }
.sidebar .sb-secwrap + .sb-secwrap { margin-top: 0; }
/* The first group needs no space above it — it sits directly under the
   workspace switcher's own edge, and 24px there reads as a dead gap. */
.sidebar .sb-body > .sb-secwrap:first-of-type,
.set2 .set2-nav > .set2-grp:first-child { padding-top: var(--space-tight); }
.sidebar.collapsed .sb-secwrap { padding-top: var(--space-inline); }
/* .set2-nav already spaces its groups with `gap`; the padding above is the
   rhythm, so zero the gap or the two stack into 40px. */
.set2 .set2-nav { gap: 0; }
.set2 .set2-grp { gap: 0; }

/* Group headers: sentence case, quiet, 8px of air before their rows. The
   eyebrow ban stands — .set2-grp-lbl was ALL-CAPS with .08em tracking, which is
   the exact pattern CODEX_DESIGN_PROTOCOL §9 lists as a gate failure. */
.sidebar .sb-sec { height: var(--control-h-sm); margin: 0 0 var(--space-inline); padding: 0 var(--space-inline); border-radius: var(--r-control); gap: var(--space-inline); }
.sidebar .sb-sec-name { font-size: var(--t-caption-size); font-weight: 600; letter-spacing: -.005em; }
.set2 .set2-grp-lbl {
  font-size: var(--t-caption-size); font-weight: 600;
  letter-spacing: -.005em; text-transform: none;
  color: var(--ink-3);
  padding: 0 var(--space-inline) var(--space-inline);
}
.sidebar .sb-secitems-inner { gap: 0; }
/* The flyout's group label is the same tier as the rail's, so it takes the same
   caption rung and the same 8px of air before its rows. It was already sentence
   case; only the size and the rhythm were out of step. */
.sb-flyout .sb-flyout-group {
  font-size: var(--t-caption-size); font-weight: 600;
  padding: var(--space-block) var(--space-inline) var(--space-inline);
}
.sb-flyout .sb-flyout-list > .sb-flyout-group:first-child { padding-top: var(--space-tight); }

/* Counts and meta: right-aligned, quiet, on the caption rung. 9px and 9.5px are
   below every type role and below the 11px floor — they read as artefacts, not
   as information. The accent stays reserved for .sb-badge, which is the one
   attention moment the panel is allowed. */
.sidebar .sb-sec-count,
.sidebar .sb-sec-attn,
.sidebar .sb-sc-badge { font-size: var(--t-caption-size); color: var(--ink-3); }
.sidebar .sb-sec-attn,
.sidebar .sb-sc-badge { font-weight: 600; }

/* Nested children hang off a 24px indent under a 1px guide.
   HAIRLINE BUDGET EXCEPTION, named: an indent guide is not a page stripe — it
   states parentage, which is a relationship indentation alone leaves ambiguous
   the moment a child row is scrolled away from its parent. It is the only line
   inside the list, it runs vertically (so it cannot read as a row divider), and
   it appears only where nesting actually exists (the Pinned shelf's groups).
   Positioned at 16px = the row's 8px padding + half the 24px icon box, so the
   guide falls exactly under the centre of the parent's glyph. */
.sidebar .sb-sc-item.child { position: relative; padding-left: calc(var(--space-inline) + 24px); }
.sidebar .sb-sc-item.child::before {
  content: ''; position: absolute; left: 16px; top: 0; bottom: 0;
  width: 1px; background: var(--border-subtle); pointer-events: none;
}

/* Panel action buttons are outline controls: --surface fill, one hairline ring,
   the control rung. That ring is an object's own edge, not a page stripe. */
.sidebar .sb-sc-add {
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-control); color: var(--sb-ink-icon);
}
.sidebar .sb-sc-add:hover { background: var(--state-hover); color: var(--ink); }
.sidebar .sb-sc-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Footer: a soft-filled rounded panel affordance, full width minus the gutters,
   replacing the hairline that used to fence it off. Stelaah's foot is a
   three-slot tool bar (one personal shortcut + Customize + Settings) rather
   than the reference's single "Customize sidebar" button, so the fill goes on
   the bar; deleting two shipped slots to match a screenshot would be a
   structural change, not a visual one. */
.sidebar:not(.collapsed) .sb-tools {
  border-top: 0; padding: var(--space-tight);
  /* NOT --bg-sunken. That is a SURFACE token, and the 16 personal sidebar
     colours override only the ink / state / border tokens — a surface token
     painted inside the rail keeps its global light value, which put a #eff1f3
     block at the foot of a #191A1D Midnight rail (measured 2026-08-29).
     --state-active is ink-derived, so it re-resolves in every tone and in dark
     mode, and 8% is the same soft-fill weight the reference foot has. */
  background: var(--state-active); border-radius: var(--r-control);
}

/* Density moves WITH the treatment, not against it. These are (0,3,0) like the
   baseline row above and land later in the file, so they win — but only because
   they are here; a density rule left at 30/34px would silently pin every rail
   back to the old metrics and make the whole pass invisible for anyone who has
   ever opened the density setting. */
.sidebar:not(.collapsed).sb-density-compact .sb-item { height: var(--row-h-compact); font-size: var(--t-label-size); }
.sidebar:not(.collapsed).sb-density-comfortable .sb-item { height: var(--row-h); }
/* Density governs ROW HEIGHT ONLY. The group rhythm stays 24px at every
   density: "sections breathe" is the half of this pass that fixed the cramped
   read, and giving it back to whoever lands on compact would undo the pass for
   most people — `auto` resolves to compact above 26 rail items (s-sidebar.jsx,
   effectiveDensity), which a fully-switched-on workspace clears easily. */
.sidebar.sb-density-compact .sb-secwrap + .sb-secwrap,
.sidebar.sb-density-comfortable .sb-secwrap + .sb-secwrap { margin-top: 0; }

/* <=900: the Settings rail folds into a horizontal strip (stelaah-editorial.css).
   The roomy group rhythm above is vertical rhythm and must not survive the fold —
   24px of padding-top on a horizontal strip is a dead band above the tabs. Same
   weight as the rules above, later in the file, so the strip wins back. */
@media (max-width: 900px) {
  .set2 .set2-grp { padding-top: 0; gap: 2px; }
  .set2 .set2-nav { gap: var(--space-item); }
  .set2 .set2-nav > .set2-grp:first-child { padding-top: 0; }
}

/* <=760: the Smart Rail is a 56px icon-only rail with 40x40 cells. The roomy
   row is expanded-rail geometry — 8px padding + a 24px icon box + a 12px gap
   overflows a 40px cell — so the narrow rail keeps the centred icon cell and
   only inherits the 24px box, which is exactly what centres the glyph in it. */
@media (max-width: 760px) {
  /* The density selectors carry four classes, so they outrank a three-class
     rule here no matter the order — the narrow cell has to match their weight
     or a compact user gets a 32px cell in a rail that is 40px everywhere else. */
  .sidebar:not(.collapsed) .sb-item,
  .sidebar:not(.collapsed).sb-density-compact .sb-item,
  .sidebar:not(.collapsed).sb-density-comfortable .sb-item {
    width: 40px; height: 40px; padding: 0; gap: 0;
    justify-content: center; margin: 2px auto;
  }
  .sidebar:not(.collapsed) .sb-tools {
    background: none; border-radius: 0; padding: var(--space-inline) 0 0;
  }
}

/* A pinned project shows its own colour instead of the generic projects glyph —
   in a shelf of a dozen pins you recognise a project by colour before you read
   the label. Sized to the icon box so rows stay on the same baseline. */
.sb-sc-chip { width: 14px; height: 14px; border-radius: 5px; display: block; flex-shrink: 0; }

/* ── popout grid view ───────────────────────────────────────────────────────
   §7 of claude/specs/sidebar-layout-v2.md. Masonry via CSS columns rather than
   a grid, so tiles keep their natural height and nothing is cropped. Only the
   ITEMS become tiles — group labels and separators stay full width, which is
   what keeps a grouped section readable in grid mode. */
/* Items render as DIRECT children of the list, not inside a block — the block
   only wraps trailing groups — so the columns belong on the list itself.
   Group labels, separators and the block span every column so a grouped
   section still reads top to bottom. */
.sb-flyout-list.is-grid { column-count: 2; column-gap: var(--space-tight); }
.sb-flyout-list.is-grid .sb-flyout-group,
.sb-flyout-list.is-grid .sb-flyout-sep,
.sb-flyout-list.is-grid .sb-flyout-block { column-span: all; }
/* Grouped rows are LIST rows even inside the grid view -- only the top tiles
   get the card treatment. `min-height` beats `height` no matter the specificity,
   so the tile's 72px floor has to be reset here explicitly or these rows silently
   inflate to tile height while every other declaration reads as a list row. */
.sb-flyout-list.is-grid .sb-flyout-block .sb-flyout-item {
  flex-direction: row; align-items: center; justify-content: flex-start;
  height: 34px; min-height: 34px; margin-bottom: 0;
  padding: 0 var(--space-item); gap: var(--space-inline);
  background: transparent;
}
.sb-flyout-list.is-grid .sb-flyout-item {
  break-inside: avoid;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-inline);
  height: auto; padding: var(--space-item); margin-bottom: var(--space-tight);
  background: var(--bg-hover); border-radius: var(--r-sm);
}
.sb-flyout-list.is-grid .sb-flyout-item-label { white-space: normal; line-height: 1.3; }
.sb-flyout-list.is-grid .sb-flyout-badge { position: absolute; top: var(--space-inline); right: var(--space-inline); }
.sb-flyout-list.is-grid .sb-flyout-item { position: relative; }

/* `Clear` on a recents heading. Quiet until wanted — it is a privacy escape
   hatch, not a primary action, and it must never read as "delete". */
.sb-flyout-group { display: flex; align-items: center; gap: var(--space-inline); }
.sb-flyout-clear {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  padding: 2px var(--space-inline); border-radius: 6px;
  font: inherit; font-size: var(--t-micro-size); font-weight: 550;
  color: var(--sb-ink-quiet); opacity: 0; transition: opacity .14s ease-out, background .12s ease-out;
}
.sb-flyout-block:hover .sb-flyout-clear,
.sb-flyout-clear:focus-visible { opacity: 1; }
.sb-flyout-clear:hover { background: var(--bg-hover); color: var(--sb-ink); }

/* ── layout switcher ────────────────────────────────────────────────────────
   §10 of claude/specs/sidebar-layout-v2.md. Wireframes, not descriptions.
   Everything sits in a narrow band of light grey on purpose: the reference
   reads calm because value contrast is compressed, so the eye reads COMPOSITION
   rather than counting elements. A near-black rail here turns four quiet
   thumbnails into four loud ones. */
.sba-lay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-item); }
.sba-lay-opt {
  background: var(--surface); border: 2px solid var(--border-subtle); border-radius: var(--r-sm);
  padding: var(--space-item) var(--space-item) var(--space-inline); cursor: pointer; text-align: left;
  font: inherit; transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.sba-lay-opt:hover { border-color: var(--border); }
.sba-lay-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.sba-lay-name { display: flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-inline); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); }
.sba-lay-chk { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); display: grid; place-items: center; margin-left: auto; }
.sba-lay-opt small { display: block; font-size: var(--t-micro-size); color: var(--ink-4); margin-top: 2px; line-height: 1.4; }

/* the browser frame */
.sba-wire { display: block; border: 1px solid var(--border-subtle); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.sba-wire-bar { display: flex; align-items: center; gap: var(--space-tight); height: 14px; padding: 0 var(--space-tight); border-bottom: 1px solid var(--border-subtle); }
.sba-wire-bar i { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.sba-wire-pane { position: relative; display: flex; gap: var(--space-tight); height: 62px; padding: var(--space-tight); }
.sba-wire-rail { width: 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); flex-shrink: 0; }
.sba-wire-rail.wide { width: 17px; }
.sba-wire-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-tight); padding-top: 2px; }
.sba-wire-body u { display: block; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 9%, transparent); text-decoration: none; }
.sba-wire-body u:nth-child(2) { width: 72%; }
.sba-wire-body u:nth-child(4) { width: 54%; }
.sba-wire-dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--space-tight); width: 30px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.sba-wire-ear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 20px; border-radius: 999px 0 0 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); }

/* SET 10 item 7: animate the previews so each shows what its layout DOES,
   not just its static shape. Kept subtle and slow (2.4-3.6s loops) -- these
   are small thumbnails, not attention-grabbing chrome; the point is a quiet
   "watch, this is what happens" not a flashy demo. */
.sba-wire-rail.wide { animation: sba-prev-sidebar 2.8s ease-in-out infinite; }
@keyframes sba-prev-sidebar {
  0%, 100% { width: 17px; }
  50% { width: 21px; }
}
.sba-wire-popout {
  position: absolute; left: 13px; top: var(--space-tight); bottom: var(--space-tight);
  width: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent);
  opacity: 0; transform: translateX(-4px);
  animation: sba-prev-compact 3.2s ease-in-out infinite;
}
@keyframes sba-prev-compact {
  0%, 20% { opacity: 0; transform: translateX(-4px); }
  40%, 75% { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; transform: translateX(-4px); }
}
.sba-wire-dock { animation: sba-prev-dock 3s ease-in-out infinite; }
@keyframes sba-prev-dock {
  0%, 100% { bottom: var(--space-tight); opacity: .85; }
  50% { bottom: calc(var(--space-tight) + 2px); opacity: 1; }
}
.sba-wire-ear { animation: sba-prev-focus 3.6s ease-in-out infinite; }
@keyframes sba-prev-focus {
  0%, 15% { transform: translateY(-50%) translateX(0); }
  50%, 65% { transform: translateY(-50%) translateX(3px); }
  100% { transform: translateY(-50%) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sba-wire-rail.wide, .sba-wire-popout, .sba-wire-dock, .sba-wire-ear { animation: none; }
  .sba-wire-popout { opacity: .7; transform: none; }
}

/* ── DOCK layout ────────────────────────────────────────────────────────────
   §10 of claude/specs/sidebar-layout-v2.md. Not a new component: the collapsed
   rail is ALREADY an icon-only column (workspace switcher, seven section
   glyphs, tools), so the dock is that same DOM re-laid-out horizontally. One
   nav to maintain, and every behaviour the rail has — flyouts, badges, context
   menus, the colour system — comes along for free.

   It floats (Figma / Apple) rather than reserving a strip, so content is never
   permanently shortened. It uses the rail's OWN surface tokens rather than a
   hardcoded dark, so a Porcelain rail gives a light dock — throwing away the
   colour choice in one layout would be a strange thing to do to it.

   No account and no workspace avatar in the dock: David's rule, and the
   switcher is hidden below for exactly that reason.

   SPECIFICITY: the collapsed rail styles itself with `.sidebar.collapsed X`
   (0,3,0). A dock rule written as `[data-sb-layout] X` is only (0,2,0) and
   loses silently — the switcher stays visible and the tools stay vertical while
   the container itself moves, which looks like the CSS half-applied. Every
   inner rule below therefore goes through `.sidebar.collapsed`. */
[data-sb-layout="dock"] .sidebar {
  /* max-content, or the bar keeps the rail's width and the tools render
     OUTSIDE its rounded box while the box itself still measures correctly. */
  width: max-content;
  /* Centred with auto margins, NOT translateX(-50%). Any non-`none` transform
     makes this rail a containing block, and `position:fixed` children then
     resolve against the RAIL instead of the viewport -- which parked the
     top-left workspace switcher in the middle of the dock. */
  position: fixed; left: 0; right: 0; margin-inline: auto;
  bottom: var(--space-group); top: auto;
  height: auto; max-width: calc(100vw - var(--space-block) * 2);
  flex-direction: row; align-items: center; gap: var(--space-tight);
  padding: var(--space-tight) var(--space-item);
  /* SET 10: detached pill (--r-pill), --elev-3 for the "soft shadow, never a
     separate border on top" rule -- --elev-3 already bundles its own hairline
     ring INTO the shadow value, which is the sanctioned way to get a crisp
     edge on a floating surface without stacking a real `border` on top of it. */
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--elev-3);
  background: transparent;
  overflow: visible; z-index: 700;
}
/* `backdrop-filter` creates a containing block for `position:fixed` descendants
   exactly like `transform` does, so putting the glass on the rail re-parents the
   top-left workspace switcher into the dock. The blur AND the tint live on a
   negative-z pseudo instead; the rail itself paints nothing. */
[data-sb-layout="focus"][data-sb-peek] .sidebar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: var(--bg-sidebar); backdrop-filter: blur(22px);
}
/* SET 10: the dock's OWN chrome stays intentionally dark-translucent in every
   app theme -- "it is chrome, like the [Meta Quest / Windows 11] references"
   -- independent of --bg-sidebar, which flips light in light theme. This is
   deliberately NOT the same fix as the flyout/popup one above: everything the
   dock SPAWNS (its flyouts, the launcher panel, the overflow menu) still uses
   normal theme-adaptive elevated-surface tokens; only the pill itself is
   fixed. Blur comes from the shared material token so a future tuning pass
   only touches one place. */
[data-sb-layout="dock"] .sidebar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  /* item 9: the opacity slider IS the material's alpha channel, set inline
     on <html> by SbAppearance -- not the element's overall `opacity` (that
     would also fade the icons/text, not just the glass). */
  background: rgba(26, 29, 34, var(--sb-dock-opacity, .82));
  backdrop-filter: var(--material-chrome-blur, blur(16px) saturate(1.5));
}
[data-sb-layout="dock"] .sidebar.sb-edit::before,
[data-sb-layout="focus"] .sidebar.sb-edit::before { display: none; }
/* The ink ramp above (`.sidebar{}`, line ~25) mixes against --bg-sidebar, which
   still flips light in light theme -- but the pill's own chrome, right above,
   is unconditionally dark. In light theme with no custom rail colour (the
   default state) every icon/label/Ask-Aria glyph living directly in the pill
   inherited a ramp tuned for a LIGHT rail and rendered on the always-DARK one:
   measured live via rendered pixels at ~1.7:1 (icon glyph vs its own pill
   background), under even the 3:1 non-text-contrast floor. Dark theme never
   showed this -- its OWN formula assumes a dark --bg-sidebar, which is also
   dark in dark theme, so the two coincidentally agreed. Force the same
   light-on-dark ramp the custom dark rail colours already use
   ([data-sb-tone="dark"] above) unconditionally, because the pill's own
   background is unconditional too. Only the pill's DIRECT children -- nothing
   the dock SPAWNS (flyouts/launcher/overflow keep theme-adaptive tokens). */
[data-sb-layout="dock"] .sidebar {
  --sb-ink:       #ffffff;
  --sb-ink-label: rgba(255, 255, 255, 0.70);
  --sb-ink-icon:  rgba(255, 255, 255, 0.56);
  --sb-ink-quiet: rgba(255, 255, 255, 0.46);
  /* .sb-tool-count / .sb-tool-warn cut a ring out of --bg-sidebar to separate a
     badge from the icon behind it -- same mismatch as the ink ramp above, a
     light ring on the always-dark pill. Approximates the pill's own base tint
     (rgba(26,29,34) before the opacity slider); it can't be exact against a
     translucent background, same inherent limit as any glass chrome, but it is
     far closer than the light rail colour it inherited before. */
  --bg-sidebar: #1a1d22;
}

/* The switcher and the edge tab are rail furniture with no place in a dock. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-edge-expand,
[data-sb-layout="dock"] .sidebar.collapsed .sb-brand { display: none; }
/* The workspace switcher does NOT belong in the bar — David's rule, and it is
   also the one control that answers "where am I", which a bottom nav is the
   wrong place for. It escapes to the top-left instead, where it sits in every
   other layout, so moving the nav never costs you your bearings. */
/* Back in the bar. Pinning it to the viewport's top-left put it straight on top
   of the tab strip, which owns that corner -- the dock is a floating bar, so the
   workspace belongs ON it, travelling with it to whichever edge it sits. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-ws,
[data-sb-layout="focus"] .sidebar.collapsed .sb-ws {
  display: flex; position: static; align-items: center; justify-content: center;
  flex: 0 0 auto; width: auto; max-width: none;
  padding: 0; margin: 0; border: 0; z-index: auto;
}
/* SET 10 STRIP anatomy: left cluster (workspace tile + avatar) is set off from
   the module icons by a hairline, not a box -- a fixed light-on-dark hairline
   since the dock pill itself is always dark-translucent regardless of theme. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-ws {
  gap: var(--space-inline);
  padding-right: var(--space-item);
  border-right: 1px solid rgba(255, 255, 255, .12);
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-ws,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-ws {
  padding-right: 0; padding-bottom: var(--space-item);
  border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sb-dock-me { display: inline-flex; }

[data-sb-layout="dock"] .sidebar.collapsed .sb-body {
  flex-direction: row; align-items: center; gap: var(--space-tight);
  padding: 0; overflow: visible; flex: 0 0 auto;
}
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap {
  padding-top: 0; margin-top: 0; border-top: 0;
  flex-direction: row; flex: 0 0 auto;
  /* `flex: 0 0 auto` takes its basis from the WIDTH property, and the rail sets
     that to 100% — so each group kept the full rail width and the glyphs landed
     404px apart with six of them off-screen, while every one of them still
     measured 40px and reported `visible: true`. Measuring the glyph was not
     enough; the container is what was wrong. */
  width: auto; min-width: 0;
}
/* A hairline BETWEEN groups, so the dock keeps the grouping the rail teaches. */
/* NO divider between groups. Seven groups meant six hairlines in a 600px bar,
   which reads as a fence rather than a dock. The rail can afford them because it
   has vertical room; the bar cannot. One rule survives — before the tools —
   because that IS a different kind of thing, the way Apple separates Trash. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap + .sb-secwrap { margin-left: 0; padding-left: 0; border-left: 0; }
[data-sb-layout="dock"] .sidebar.collapsed .sb-secitems { display: none; }

/* SET 10 fix: `effectiveDensity` (s-sidebar.jsx) resolves and its class DOES
   land on `.sidebar` in dock mode, but the rules that consume it
   (`.sidebar:not(.collapsed).sb-density-*`) are scoped to the expanded rail's
   vertical `.sb-item` rows -- dock/focus force `.collapsed`, so the setting
   was silently unreachable there. The dock has no vertical rows to resize;
   its equivalent of density is the icon cell size and the gap between icons
   in the horizontal strip. */
/* Base cell/glyph size lives in a custom property, not a direct width/height,
   so the SET 10 item 9 size slider (--sb-dock-scale, set inline on .sidebar
   by SbAppearance) can multiply whichever density resolved rather than
   fighting it on specificity -- three mutually exclusive selectors set the
   variable, ONE rule below reads it. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec { --sb-sec-base: 40px; --sb-sec-ico-base: 18px; }
[data-sb-layout="dock"] .sidebar.collapsed.sb-density-compact .sb-sec { --sb-sec-base: var(--row-h-compact); --sb-sec-ico-base: 16px; }
[data-sb-layout="dock"] .sidebar.collapsed.sb-density-comfortable .sb-sec { --sb-sec-base: var(--sp-12); --sb-sec-ico-base: 20px; }
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec {
  width: calc(var(--sb-sec-base) * var(--sb-dock-scale, 1));
  height: calc(var(--sb-sec-base) * var(--sb-dock-scale, 1));
}
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec-mobile-icon {
  width: calc(var(--sb-sec-ico-base, 18px) * var(--sb-dock-scale, 1));
  height: calc(var(--sb-sec-ico-base, 18px) * var(--sb-dock-scale, 1));
}
[data-sb-layout="dock"] .sidebar.collapsed.sb-density-comfortable .sb-body,
[data-sb-layout="dock"] .sidebar.collapsed.sb-density-comfortable .sb-secwrap,
[data-sb-layout="dock"] .sidebar.collapsed.sb-density-comfortable .sb-tools {
  gap: var(--space-inline);
}
/* item 9: the size slider also scales the pill's own padding/gap so the bar
   grows as a whole, not just its icons. */
[data-sb-layout="dock"] .sidebar {
  padding: calc(var(--space-tight) * var(--sb-dock-scale, 1)) calc(var(--space-item) * var(--sb-dock-scale, 1));
  gap: calc(var(--space-tight) * var(--sb-dock-scale, 1));
}

/* SET 10 STRIP anatomy supersedes the "space, not a rule" call above (David):
   the right cluster now carries the same hairline treatment as the left
   cluster, so all three clusters read as one deliberate anatomy rather than
   two hairlines and one gap. `.sb-tools` still has its own `border-top` from
   the rail, reset separately below. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-foot {
  width: max-content; min-width: 0; flex: 0 0 auto;
  flex-direction: row; align-items: center; padding: 0;
  margin-left: 0; padding-left: var(--space-item);
  border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
}
[data-sb-layout="dock"] .sidebar.collapsed .sb-tools { flex-direction: row; gap: var(--space-tight); padding: 0; width: max-content; border: 0; padding-top: 0; }
[data-sb-layout="dock"] .sidebar.collapsed .sb-sc,
[data-sb-layout="dock"] .sidebar.collapsed .sb-views,
[data-sb-layout="dock"] .sidebar.collapsed .sb-plan-note { display: none; }
/* Any-Size Law: these two are loose `.sb-body` children, not `.sb-secwrap`
   sections, so the JS width-aware fold (s-sidebar.jsx, dockFoldLabels) never
   sees them -- they still counted toward the strip's non-shrinking natural
   width and could keep the tool cluster off the pill's edge even once every
   real section had folded. Both are redundant chrome in dock specifically,
   not a lost destination: "Browse all" duplicates the always-visible
   all-modules Launcher button (.sb-dock-launcher, same window.NAV catalogue),
   and Support is reachable from the account menu (s-shell.jsx) and every
   right-click menu (s-contextmenu.jsx) regardless of sidebar layout. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-browse-all,
[data-sb-layout="dock"] .sidebar.collapsed .sb-support-entry,
[data-sb-layout="dock"] .sidebar.collapsed .sb-setup { display: none; }

/* `.app` is a GRID (`--sidebar-w 1fr`). Taking the rail out of flow with
   position:fixed does not free its track — it just lets .main-col slide INTO
   the 56px first column, which squeezes the whole app into a thin strip while
   the dock itself looks perfect. Collapse the grid to a single column so the
   content actually reclaims the width. */
[data-sb-layout="dock"] .app { grid-template-columns: minmax(0, 1fr); }
[data-sb-layout="dock"] .main-col { margin-left: 0; }

/* ── FOCUS layout ───────────────────────────────────────────────────────────
   §10 of claude/specs/sidebar-layout-v2.md. Nothing but your work: the nav is
   gone, and an ear hugs the right edge as the only way back.

   Reachable ONLY from the layout switcher, which is the whole safety argument.
   Hiding your navigation from a button inside the navigation is an easy way to
   lose it, so the way out has to be the way back in. The ear itself is not that
   button — it is a temporary reveal, and it never persists. */
[data-sb-layout="focus"] .app { grid-template-columns: minmax(0, 1fr); }
[data-sb-layout="focus"] .sidebar {
  /* max-content, or the bar keeps the rail's width and the tools render
     OUTSIDE its rounded box while the box itself still measures correctly. */
  width: max-content;
  /* Same containing-block rule as the dock: the rail itself never transforms. */
  position: fixed; left: 0; right: 0; margin-inline: auto;
  bottom: var(--space-group); top: auto;
  height: auto; flex-direction: row; align-items: center; gap: 2px;
  padding: var(--space-tight) var(--space-inline);
  border: 0; border-radius: var(--r-modal, 14px);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .5), 0 0 0 .5px color-mix(in srgb, var(--sb-ink) 12%, transparent);
  background: transparent; overflow: visible; z-index: 700;
  pointer-events: none;
}
/* Fade the rail's CONTENTS, not the rail. `opacity: 0` on .sidebar hid the
   workspace switcher too — it is a child — so Focus lost the one control that
   answers "where am I". Hiding the bar's own surface and its contents leaves
   the switcher free to sit at the top-left in every layout. */
[data-sb-layout="focus"] .sidebar {
  background: transparent; box-shadow: none; backdrop-filter: none;
}
[data-sb-layout="focus"] .sidebar > .sb-ws,
[data-sb-layout="focus"] .sidebar > .sb-body,
[data-sb-layout="focus"] .sidebar > .sb-foot {
  opacity: 0; transform: translateY(140%);
  transition: opacity .18s ease-out, transform .26s cubic-bezier(.32, .72, 0, 1);
}
[data-sb-layout="focus"][data-sb-peek] .sidebar {
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .5), 0 0 0 .5px color-mix(in srgb, var(--sb-ink) 12%, transparent);
}
[data-sb-layout="focus"][data-sb-peek] .sidebar > .sb-body,
[data-sb-layout="focus"][data-sb-peek] .sidebar > .sb-foot { opacity: 1; }
/* peeking reuses the dock geometry wholesale — same rail, same layout, one
   transform apart, so there is no second horizontal nav to keep in sync */
[data-sb-layout="focus"][data-sb-peek] .sidebar { pointer-events: auto; }
[data-sb-layout="focus"][data-sb-peek] .sidebar > .sb-ws,
[data-sb-layout="focus"][data-sb-peek] .sidebar > .sb-body,
[data-sb-layout="focus"][data-sb-peek] .sidebar > .sb-foot { opacity: 1; transform: translateY(0); }
[data-sb-layout="focus"] .sidebar.collapsed .sb-edge-expand,
[data-sb-layout="focus"] .sidebar.collapsed .sb-brand,
[data-sb-layout="focus"] .sidebar.collapsed .sb-sc,
[data-sb-layout="focus"] .sidebar.collapsed .sb-views,
[data-sb-layout="focus"] .sidebar.collapsed .sb-secitems { display: none; }
/* Same anchor as the dock. The focus block listed .sb-ws in a DIFFERENT
   multi-selector hide group than the dock block did, so the dock fix matched
   one and silently missed the other — two rules that look alike are not the
   same rule. */

[data-sb-layout="focus"] .sidebar.collapsed .sb-body {
  flex-direction: row; align-items: center; gap: var(--space-tight); padding: 0; overflow: visible; flex: 0 0 auto;
  /* Every container in the chain carries the RAIL's width, not just the groups.
     Fixing .sb-secwrap alone left .sb-body at 394px and .sb-foot at 49px, so the
     tools rendered outside the bar's rounded box while the box itself measured
     correctly — the bar was sized right, to children that were sized wrong. */
  width: max-content; min-width: 0;
}
[data-sb-layout="focus"] .sidebar.collapsed .sb-secwrap {
  padding-top: 0; margin-top: 0; border-top: 0; flex-direction: row; flex: 0 0 auto; width: auto; min-width: 0;
}
/* NO divider between groups. Seven groups meant six hairlines in a 600px bar,
   which reads as a fence rather than a dock. The rail can afford them because it
   has vertical room; the bar cannot. One rule survives — before the tools —
   because that IS a different kind of thing, the way Apple separates Trash. */
[data-sb-layout="focus"] .sidebar.collapsed .sb-secwrap + .sb-secwrap { margin-left: 0; padding-left: 0; border-left: 0; }
/* Separated by SPACE, not a rule. A floating bar of bare glyphs carries no
   other stroke, so a lone hairline reads as a leftover rather than a division.
   And `.sb-tools` has its OWN `border-top` from the rail, which resetting
   `.sb-foot` never touched -- that was the line sitting directly above the
   icons, one element below the one being reset. */
[data-sb-layout="focus"] .sidebar.collapsed .sb-foot {
  width: max-content; min-width: 0; flex: 0 0 auto;
  flex-direction: row; align-items: center; padding: 0;
  margin-left: var(--space-item); padding-left: 0;
  border: 0;
}
[data-sb-layout="focus"] .sidebar.collapsed .sb-tools { flex-direction: row; gap: var(--space-tight); padding: 0; width: max-content; border: 0; padding-top: 0; }

/* the ear: flush to the edge, rounded only on the side you can see */
.sb-ear {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 701;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-inline);
  padding: var(--space-item) var(--space-inline);
  border: 0; border-radius: var(--r-modal, 14px) 0 0 var(--r-modal, 14px);
  background: var(--bg-sidebar); color: var(--ink-3);
  box-shadow: -4px 0 20px -6px rgba(0, 0, 0, .28), 0 0 0 .5px color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(22px); cursor: pointer; font: inherit;
  transition: color .14s ease-out, padding-right .14s ease-out;
}
.sb-ear:hover, .sb-ear.on { color: var(--ink); padding-right: var(--space-item); }
.sb-ear-l {
  writing-mode: vertical-rl; font-size: var(--t-micro-size); font-weight: 600;
  letter-spacing: .06em; color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  [data-sb-layout="focus"] .sidebar > .sb-body,
  [data-sb-layout="focus"] .sidebar > .sb-foot { transition: none; }
  [data-sb-layout="dock"] .sidebar > .sb-body,
  [data-sb-layout="dock"] .sidebar > .sb-foot { animation: none; }
  .sb-ear { transition: none; }
}

/* ── the dock's resting chip ────────────────────────────────────────────────
   §10. The dock shrinks to a tab hugging the bottom edge — rounded on top only,
   flush below, so it reads as attached to the frame rather than floating over
   content. ~26px and covers nothing.

   This is safe to reach FROM the dock (unlike Focus) because the chip is still
   visible: it is a smaller version of itself, not a disappearance. */
[data-sb-layout="dock"][data-sb-dock-chip] .sidebar {
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease-out;
}
[data-sb-layout="dock"][data-sb-dock-chip] .sidebar > .sb-ws,
[data-sb-layout="dock"][data-sb-dock-chip] .sidebar > .sb-body,
[data-sb-layout="dock"][data-sb-dock-chip] .sidebar > .sb-foot {
  transform: translateY(140%);
  transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}
.sb-chip {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 701;
  display: flex; align-items: center; gap: var(--space-inline);
  padding: var(--space-inline) var(--space-item) var(--space-tight);
  border: 0; border-radius: var(--r-modal, 14px) var(--r-modal, 14px) 0 0;
  /* Same fixed dark-translucent material as the pill it represents -- the
     chip is "a smaller version of itself," so it shares the dock's chrome
     rather than following the page theme. */
  background: rgba(26, 29, 34, var(--sb-dock-opacity, .82)); color: rgba(255, 255, 255, .68);
  box-shadow: var(--elev-2);
  backdrop-filter: var(--material-chrome-blur, blur(16px) saturate(1.5)); cursor: pointer; font: inherit;
  transition: color .14s ease-out, padding-bottom .14s ease-out;
}
.sb-chip:hover { color: #fff; padding-bottom: var(--space-inline); }
.sb-chip-l { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .01em; }
/* SET 10 fix: the chip was hardcoded to the bottom edge no matter where the
   dock itself sits, so moving the dock to left/right stranded its reveal
   trigger at the bottom of the screen. It must hug the SAME edge as the dock
   -- same "flush to the edge, rounded only on the visible side" shape .sb-ear
   already uses for Focus, just reading data-sb-dock-side instead of being
   permanently right-edge. */
[data-sb-dock-side="left"] .sb-chip,
[data-sb-dock-side="right"] .sb-chip {
  bottom: 50%; top: auto; transform: translateY(50%);
  flex-direction: column; gap: var(--space-inline);
}
[data-sb-dock-side="left"] .sb-chip {
  left: 0; right: auto;
  padding: var(--space-item) var(--space-tight) var(--space-item) var(--space-inline);
  border-radius: 0 var(--r-modal, 14px) var(--r-modal, 14px) 0;
}
[data-sb-dock-side="right"] .sb-chip {
  left: auto; right: 0;
  padding: var(--space-item) var(--space-inline) var(--space-item) var(--space-tight);
  border-radius: var(--r-modal, 14px) 0 0 var(--r-modal, 14px);
}
[data-sb-dock-side="left"] .sb-chip-l,
[data-sb-dock-side="right"] .sb-chip-l {
  writing-mode: vertical-rl; letter-spacing: .06em;
}
[data-sb-dock-side="left"] .sb-chip:hover { color: #fff; padding-left: var(--space-item); }
[data-sb-dock-side="right"] .sb-chip:hover { color: #fff; padding-right: var(--space-item); }
@media (prefers-reduced-motion: reduce) {
  [data-sb-layout="dock"][data-sb-dock-chip] .sidebar { transition: none; }
  .sb-chip { transition: none; }
}

/* ── bottom-edge collisions ─────────────────────────────────────────────────
   The dock and the demo banner both live at `bottom: 16px` and both are fixed,
   so at any width where they meet they simply overlap — which is exactly what
   they did. The dock is navigation and stays put; anything else that hugs the
   bottom edge gets lifted above it while a bottom nav is on screen.

   65px = the bar's own height (49) plus its 16px offset. */
[data-sb-layout="dock"] .stelaah-demo-banner,
[data-sb-layout="focus"][data-sb-peek] .stelaah-demo-banner {
  bottom: calc(49px + var(--space-group) + var(--space-inline));
}
/* The chip is far shorter, so the banner only needs to clear the chip itself. */
[data-sb-layout="dock"][data-sb-dock-chip] .stelaah-demo-banner {
  bottom: calc(var(--space-block) + var(--space-inline));
}

/* Belt and braces: even if something enters edit mode without switching layout,
   the horizontal bar styling must not apply to an expanded, editable rail. The
   symptom is unmistakable — a full-width panel with the workspace switcher and
   the tools floating outside it. */
[data-sb-layout="dock"] .sidebar.sb-edit,
[data-sb-layout="focus"] .sidebar.sb-edit {
  position: relative; left: auto; right: auto; bottom: auto;
  margin-inline: 0; transform: none;
  width: var(--sidebar-w); max-width: none; height: 100%;
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  opacity: 1; pointer-events: auto; z-index: auto;
}
[data-sb-layout="dock"] .sidebar.sb-edit > .sb-body,
[data-sb-layout="dock"] .sidebar.sb-edit > .sb-foot,
[data-sb-layout="focus"] .sidebar.sb-edit > .sb-body,
[data-sb-layout="focus"] .sidebar.sb-edit > .sb-foot {
  transform: none; opacity: 1; animation: none;
}
[data-sb-layout="dock"] .sidebar.sb-edit .sb-ws,
[data-sb-layout="focus"] .sidebar.sb-edit .sb-ws { display: flex; }
[data-sb-layout="dock"] .sidebar.sb-edit .sb-body,
[data-sb-layout="focus"] .sidebar.sb-edit .sb-body,
[data-sb-layout="dock"] .sidebar.sb-edit .sb-foot,
[data-sb-layout="focus"] .sidebar.sb-edit .sb-foot { flex-direction: column; width: auto; }
[data-sb-layout="dock"] .sidebar.sb-edit .sb-secitems,
[data-sb-layout="focus"] .sidebar.sb-edit .sb-secitems { display: grid; }

/* ── dock: light the GLYPH, never a plate behind it ─────────────────────────
   The rail's hover is a filled rounded rect, which is right for a list of rows
   and wrong for a floating bar of icons -- it turns a clean row of glyphs into
   a row of boxes. Here the icon itself brightens and the magnify carries the
   rest, so nothing draws a second surface inside a surface. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:hover,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:focus-visible,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool.active,
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec,
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="dock"] .sidebar.collapsed .sb-ws:hover { background: transparent; }

[data-sb-layout="dock"] .sidebar.collapsed .sb-tool,
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec { color: var(--sb-ink-icon); }
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:hover,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:focus-visible,
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool.active { color: var(--sb-ink); }

/* The current section and an open flyout are plated by
   `.sidebar.collapsed .sb-secwrap.has-active .sb-sec` (0,5,0), which outranks a
   plain `[data-sb-layout] .sidebar.collapsed .sb-sec` (0,4,0) — so the generic
   reset above silently lost on exactly the one icon that is always visible.
   Match its shape to beat it, then mark the state the way the rest of the bar
   does: brighter glyph plus the dot. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec,
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec.is-flyout,
[data-sb-layout="focus"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec,
[data-sb-layout="focus"] .sidebar.collapsed .sb-sec.is-flyout {
  background: transparent; color: var(--sb-ink);
}
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec::after {
  content: ''; position: absolute; border-radius: 999px;
  width: 4px; height: 4px; background: currentColor; opacity: .85;
  left: 50%; margin-left: -2px; bottom: -6px;
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec::after,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec::after {
  left: auto; margin-left: 0; bottom: auto; top: 50%; margin-top: -2px;
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec::after { right: -6px; }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-secwrap.has-active .sb-sec::after { left: -6px; }
/* the dot needs a positioned box to sit against */
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec { position: relative; }

/* Active is a dot on the edge the bar hugs, the way a dock marks a running app.
   Placed on the OUTER side so magnification never slides it under a neighbour. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool.active::after {
  content: ''; position: absolute; border-radius: 999px;
  width: 4px; height: 4px; background: currentColor; opacity: .85;
  left: 50%; margin-left: -2px; bottom: -6px;
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool.active::after,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool.active::after {
  left: auto; margin-left: 0; bottom: auto;
  top: 50%; margin-top: -2px;
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool.active::after { right: -6px; }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool.active::after { left: -6px; }

/* ── dock: upright against a side ───────────────────────────────────────────
   Same bar, rotated axis. Centred with auto margins on the block axis for the
   same reason the bottom dock uses them on the inline axis: a transform here
   would make the bar a containing block for anything fixed inside it. */
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar {
  flex-direction: column;
  width: max-content; height: max-content;
  max-width: none; max-height: calc(100vh - var(--space-block) * 2);
  top: 0; bottom: 0; margin-block: auto;
  margin-inline: 0;
  padding: var(--space-item) var(--space-tight);
}
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar  { left: var(--space-group); right: auto; }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar { right: var(--space-group); left: auto; }

[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-foot,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-foot,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tools,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tools {
  flex-direction: column; width: max-content; min-width: 0;
}
/* upright: the breathing space between nav and tools moves to the block axis,
   and the cluster hairline rotates from a left border to a top one. */
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-foot,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-foot {
  margin-left: 0; margin-top: var(--space-item);
  padding-left: 0; padding-top: var(--space-item);
  border: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Grow sideways out of an upright bar, not upward through it. */
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool { transform-origin: left center; }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool { transform-origin: right center; }
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool:hover { transform: translateX(4px) scale(1.12); }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool:hover { transform: translateX(-4px) scale(1.12); }
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-secwrap:hover + .sb-secwrap .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-secwrap:has(+ .sb-secwrap:hover) .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool:hover + .sb-tool,
[data-sb-layout="dock"][data-sb-dock-side="left"] .sidebar.collapsed .sb-tool:has(+ .sb-tool:hover) { transform: translateX(1px) scale(1.04); }
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-secwrap:hover + .sb-secwrap .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-secwrap:has(+ .sb-secwrap:hover) .sb-sec,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool:hover + .sb-tool,
[data-sb-layout="dock"][data-sb-dock-side="right"] .sidebar.collapsed .sb-tool:has(+ .sb-tool:hover) { transform: translateX(-1px) scale(1.04); }

/* The chip and the entrance slide along the axis the bar actually hides on. */
[data-sb-layout="dock"][data-sb-dock-side="left"][data-sb-dock-chip] .sidebar > .sb-ws,
[data-sb-layout="dock"][data-sb-dock-side="left"][data-sb-dock-chip] .sidebar > .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="left"][data-sb-dock-chip] .sidebar > .sb-foot { transform: translateX(-140%); }
[data-sb-layout="dock"][data-sb-dock-side="right"][data-sb-dock-chip] .sidebar > .sb-ws,
[data-sb-layout="dock"][data-sb-dock-side="right"][data-sb-dock-chip] .sidebar > .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="right"][data-sb-dock-chip] .sidebar > .sb-foot { transform: translateX(140%); }

/* ── dock motion ────────────────────────────────────────────────────────────
   Apple's dock magnifies the icon under the cursor and eases its NEIGHBOURS a
   little too — that neighbour response is most of why it feels alive rather
   than merely animated. Scaled down here: the hovered glyph lifts and grows,
   the ones either side lift about a third as much.

   transform-origin is the bottom edge so icons grow UPWARD out of the bar
   instead of pushing through it, and the curve overshoots slightly
   (cubic-bezier(.34, 1.56, .64, 1)) which is what reads as spring rather than
   slide. */
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec,
[data-sb-layout="focus"] .sidebar.collapsed .sb-sec,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool,
[data-sb-layout="focus"] .sidebar.collapsed .sb-tool {
  transform-origin: center bottom;
  /* SET 10: 140ms per the design spec ("premium... scale ~1.12 + lift,
     ~140ms"), down from the original 320ms spring -- still a spring curve,
     just a quicker one, so hover reads instant rather than laggy. */
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), background .16s ease-out, color .16s ease-out;
  will-change: transform;
}
[data-sb-layout="dock"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="focus"] .sidebar.collapsed .sb-sec:hover,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:hover,
[data-sb-layout="focus"] .sidebar.collapsed .sb-tool:hover {
  transform: translateY(-4px) scale(1.12);
}
/* the neighbours — a third of the lift, so the row breathes around the cursor */
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap:hover + .sb-secwrap .sb-sec,
[data-sb-layout="dock"] .sidebar.collapsed .sb-secwrap:has(+ .sb-secwrap:hover) .sb-sec,
[data-sb-layout="focus"] .sidebar.collapsed .sb-secwrap:hover + .sb-secwrap .sb-sec,
[data-sb-layout="focus"] .sidebar.collapsed .sb-secwrap:has(+ .sb-secwrap:hover) .sb-sec,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:hover + .sb-tool,
[data-sb-layout="dock"] .sidebar.collapsed .sb-tool:has(+ .sb-tool:hover) {
  transform: translateY(-1px) scale(1.04);
}

/* the bar itself arrives rather than appearing */
/* `both` fill mode leaves the last keyframe's transform applied FOREVER, so an
   entrance animation on the rail is a permanent containing block. Rail fades,
   contents rise. */
/* `backwards`, NOT `both`. A running-or-filled animation outranks normal
   declarations in the cascade, so with `both` the entrance kept `opacity:1` and
   `translateY(0)` applied FOREVER -- and the Hide-the-dock rule below could
   never take effect. The state flipped, the attribute landed, the chip
   rendered, and the dock still sat there at full opacity. */
[data-sb-layout="dock"] .sidebar { animation: sb-dock-fade .42s cubic-bezier(.32, .72, 0, 1) backwards; }
[data-sb-layout="dock"] .sidebar > .sb-body,
[data-sb-layout="dock"] .sidebar > .sb-foot { animation: sb-dock-rise .42s cubic-bezier(.32, .72, 0, 1) backwards; }
@keyframes sb-dock-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-dock-rise {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}
/* the chip and the ear share the curve, so the whole family moves alike */
.sb-chip, .sb-ear { transition: color .14s ease-out, transform .32s cubic-bezier(.34, 1.56, .64, 1), padding .14s ease-out; }
.sb-chip:hover { transform: translateX(-50%) translateY(-3px); }
.sb-ear:hover  { transform: translateY(-50%) translateX(-3px); }
[data-sb-dock-side="left"] .sb-chip:hover  { transform: translateY(50%) translateX(3px); }
[data-sb-dock-side="right"] .sb-chip:hover { transform: translateY(50%) translateX(-3px); }

/* SET 10 item 8: smart-hide while the page scrolls (sb-dock-scrolling is set
   by a debounced scroll listener in s-sidebar.jsx, ~350ms after scroll ends).
   Skipped while the dock is already a resting chip -- nothing to minimize.
   Transform goes on the CHILDREN, not .sidebar itself, matching the dock-chip
   hide rule above: a transform on .sidebar would make it a containing block
   for any position:fixed popover mounted inside it (the workspace switcher's
   own dropdown), re-anchoring that popover to the dock instead of the
   viewport. opacity does not create that containing block, so it is safe
   directly on .sidebar. */
[data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling {
  opacity: .55;
  transition: opacity .2s ease-out;
}
[data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-ws,
[data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-body,
[data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-foot {
  transform: translateY(6px);
  transition: transform .2s ease-out;
}
[data-sb-layout="dock"][data-sb-dock-side="left"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-ws,
[data-sb-layout="dock"][data-sb-dock-side="left"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="left"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-foot {
  transform: translateX(-6px);
}
[data-sb-layout="dock"][data-sb-dock-side="right"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-ws,
[data-sb-layout="dock"][data-sb-dock-side="right"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-body,
[data-sb-layout="dock"][data-sb-dock-side="right"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-foot {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  [data-sb-layout="dock"] .sidebar { animation: none; }
  [data-sb-layout="dock"] .sidebar.collapsed .sb-sec,
  [data-sb-layout="focus"] .sidebar.collapsed .sb-sec,
  [data-sb-layout="dock"] .sidebar.collapsed .sb-tool,
  [data-sb-layout="focus"] .sidebar.collapsed .sb-tool,
  .sb-chip, .sb-ear { transition: none; transform: none; }
  [data-sb-layout="dock"] .sidebar.collapsed .sb-sec:hover,
  [data-sb-layout="dock"] .sidebar.collapsed .sb-tool:hover { transform: none; }
  /* motion swaps for an opacity step per the design spec -- no translate */
  [data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-ws,
  [data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-body,
  [data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling > .sb-foot {
    transform: none; transition: none;
  }
  [data-sb-layout="dock"]:not([data-sb-dock-chip]) .sidebar.sb-dock-scrolling {
    transition: none;
  }
}

/* ── popout spacing pass ────────────────────────────────────────────────────
   The panel had rail-sized padding on a much narrower surface, so labels sat
   far from their items and the grid tiles read as loose boxes rather than a
   set. Tightened as a whole, and the separator now does the section-breaking
   that the extra whitespace was trying to do on its own. */
.sb-flyout-list { padding: var(--space-tight) var(--space-inline) var(--space-inline); }
.sb-flyout-sep { margin: var(--space-inline) 0 var(--space-tight); }
.sb-flyout-list > .sb-flyout-block:first-child > .sb-flyout-sep { display: none; }

/* Grid tiles: square-ish, icon over label, consistent inner padding. The icon
   was small relative to the tile, which made each one read as an empty box with
   something in the corner. */
.sb-flyout-list.is-grid .sb-flyout-item {
  padding: var(--space-item) var(--space-inline);
  gap: var(--space-tight); min-height: 72px; justify-content: center;
}
.sb-flyout-list.is-grid .sb-flyout-item-ico { width: 22px; height: 22px; }
.sb-flyout-list.is-grid .sb-flyout-item-ico .icn { font-size: 19px; }
.sb-flyout-list.is-grid .sb-flyout-item-label { font-size: var(--t-caption-size); font-weight: 550; }
.sb-flyout-list.is-grid .sb-flyout-badge { top: var(--space-tight); right: var(--space-tight); }

/* List rows in the popout get the same 34px rhythm as the rail, so switching
   views does not change how tall a row feels. */
.sb-flyout-list.is-list .sb-flyout-item { height: 34px; padding: 0 var(--space-inline); gap: var(--space-inline); }

/* ── SET 10 item 10: dock 3-dot overflow menu ───────────────────────────────
   A popup the dock SPAWNS, not the dock itself -- normal theme-adaptive
   elevated-surface tokens (item 1's fix direction), portaled to document.body
   (the dock pill has backdrop-filter, which is a position:fixed containing
   block for anything NOT portaled -- the same GOTCHA the flyout already
   works around). 4 icons per row keeps it short instead of a tall single
   column list. */
.sb-dock-overflow-scrim { position: fixed; inset: 0; z-index: 1198; background: transparent; }
.sb-dock-overflow-panel {
  position: fixed; z-index: 1199; width: 168px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  grid-auto-rows: min-content; align-content: start; overflow-y: auto;
  padding: var(--space-tight); background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-modal);
  box-shadow: var(--elev-3);
  animation: sbFlyIn .16s cubic-bezier(.22,.82,.28,1) both;
}
.sb-dock-overflow-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: var(--space-tight) 2px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-dock-overflow-item:hover, .sb-dock-overflow-item:focus-visible, .sb-dock-overflow-item.active { background: var(--bg-hover); color: var(--ink); outline: none; }
.sb-dock-overflow-ico { position: relative; display: grid; place-items: center; width: 100%; height: 22px; }
.sb-dock-overflow-label { font-size: var(--t-micro-size); font-weight: 550; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-dock-overflow-ico .sb-tool-count {
  position: absolute; top: -4px; right: -8px; min-width: 14px; height: 14px; padding: 0 var(--sp-1);
  border-radius: 999px; background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; line-height: 1;
}
.sb-dock-overflow-ntf { position: fixed; }

/* ── SET 10 design-spec LAUNCHER PANEL (all-apps grid button) ───────────────
   Same portal/token rules as the overflow menu above: a popup the dock
   spawns, so normal theme-adaptive elevated-surface tokens, portaled to
   document.body. Search on top, then a two-column list -- each row a small
   colored icon TILE, the explicit bare-glyph-law exception this app reserves
   for a deliberate colour-coded launcher/type-picker grid (CLAUDE.md). */
.sb-dock-launcher-scrim { position: fixed; inset: 0; z-index: 1198; background: transparent; }
.sb-dock-launcher-panel {
  position: fixed; z-index: 1199; display: flex; flex-direction: column;
  width: 320px; max-width: calc(100vw - 16px);
  padding: var(--space-item); background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-modal);
  box-shadow: var(--elev-3); overflow: hidden;
  animation: sbFlyIn .16s cubic-bezier(.22,.82,.28,1) both;
}
.sb-dock-launcher-panel .sbx-tabs { margin-bottom: var(--space-item); flex: none; }
.sb-dock-launcher-panel .sbx-search { margin-left: 0; width: 100%; }
.sb-dock-launcher-panel .sbx-q { width: 100%; }
.sb-dock-launcher-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
  overflow-y: auto; min-height: 0;
}
.sb-dock-launcher-item {
  display: flex; align-items: center; gap: var(--space-inline); min-width: 0;
  padding: var(--space-tight) var(--space-inline); border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sb-dock-launcher-item:hover, .sb-dock-launcher-item:focus-visible { background: var(--bg-hover); color: var(--ink); outline: none; }
.sb-dock-launcher-tile {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--r-control);
  background: hsl(var(--tile-hue) 72% 94%); color: hsl(var(--tile-hue) 55% 38%);
}
.dark .sb-dock-launcher-tile { background: hsl(var(--tile-hue) 40% 22%); color: hsl(var(--tile-hue) 70% 76%); }
.sb-dock-launcher-label { min-width: 0; font-size: var(--t-label-size); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── SET 10 item 12: dock Aria compose box (bottom position only) ──────────
   A compact pill living IN the dock's own chrome (not a popup it spawns), so
   it inherits the dock's ink/opacity rather than normal surface tokens --
   same family as .sb-tool. Send follows the Composer Icon Toolbar rule
   (stelaah.css .fcomp-tool/.fcomp-send): bare glyph, hover-only background,
   a transparent accent-plane send, never a filled circle. */
.sb-dock-ask {
  display: flex; align-items: center; gap: var(--space-tight);
  height: 32px; padding: 0 var(--space-tight) 0 var(--space-inline); margin: 0 var(--space-tight);
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .08);
  color: var(--sb-ink-icon, rgba(255,255,255,.56)); flex: none;
}
.sb-dock-ask:focus-within { background: rgba(255, 255, 255, .13); }
.sb-dock-ask-in {
  width: 108px; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--t-caption-size); color: inherit;
}
.sb-dock-ask-in::placeholder { color: rgba(255, 255, 255, .5); }
.sb-dock-ask-send {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; color: inherit;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.sb-dock-ask-send:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: #fff; }
/* Muted ink, not opacity, per DESIGN.md §6 -- opacity on a disabled control
   also fades its focus ring and any icon detail, where a flat muted colour
   reads as "off" without losing crispness. */
.sb-dock-ask-send:disabled { color: rgba(255, 255, 255, .3); cursor: default; }
@media (max-width: 900px) {
  .sb-dock-ask-in { width: 72px; }
}
/* This rule removes the ONE thing SET 10 added that is safe to drop first at
   narrow widths -- Aria is still reachable from the topbar and the 3-dot
   overflow menu. It does not by itself solve the underlying "too many
   sections for the width" case: that gap (module-icon strip + tool cluster
   together exceeding the pill's own max-width, confirmed reproducible with
   8-9 sections at 390px) is now fixed by the width-aware fold in s-sidebar.jsx
   (search dockFoldLabels) -- excess `.sb-secwrap` sections fold into the
   item-10 overflow menu once they no longer fit, instead of spilling silently
   past the pill's rounded edge (`.sidebar` stays `overflow: visible` for the
   icon hover lift/scale, so nothing here ever relied on clipping to hide it). */
@media (max-width: 760px) {
  .sb-dock-ask { display: none; }
}


/* s-command.css */
/* ============================================================
   Stelaah — Universal Command Palette (Spotlight)  .cmd-*
   ============================================================ */
.cmd-scrim {
  position: fixed; inset: 0; z-index: 9100;
  display: grid; place-items: start center; padding-top: 11vh;
  background: var(--modal-scrim-bg);
  -webkit-backdrop-filter: var(--modal-scrim-blur); backdrop-filter: var(--modal-scrim-blur);
  animation: cmdScrimIn .18s ease;
}
@keyframes cmdScrimIn { from { opacity: 0; } to { opacity: 1; } }

.cmd {
  width: 700px; max-width: 93vw;
  background: var(--surface);
  border: 1px solid var(--modal-rim);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: cmdPop .2s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes cmdPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- search header ---- */
.cmd-search { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-group) var(--space-group); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.cmd-search > .cmd-search-ic { color: var(--ink-3); flex-shrink: 0; display: grid; place-items: center; }
.cmd-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font: inherit; font-size: var(--t-heading-size); color: var(--ink); height: 28px; padding: 0;
  letter-spacing: -0.01em;
}
.cmd-input::placeholder { color: var(--ink-4); }
.cmd-mode {
  display: inline-flex; align-items: center; gap: var(--space-tight); height: 24px; padding: 0 var(--space-inline);
  border-radius: var(--r-control); background: var(--accent-soft, var(--bg-sunken)); color: var(--accent);
  font-size: var(--t-caption-size); font-weight: 600; flex-shrink: 0; letter-spacing: -0.01em;
}
.cmd-mode .cmd-mode-x { display: grid; place-items: center; opacity: .7; cursor: pointer; border-radius: 4px; }
.cmd-mode .cmd-mode-x:hover { opacity: 1; }
.cmd-esc { flex-shrink: 0; }

/* ---- type tabs — jump straight to a real Stelaah entity type, multi-select ---- */
.cmd-tabs {
  display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-group);
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
}
.cmd-tabs::-webkit-scrollbar { display: none; }
.cmd-tabs-sep { width: 1px; height: 16px; background: var(--border-subtle); flex-shrink: 0; margin: 0 var(--space-tight); }
.cmd-tab {
  flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px;
  border: none; border-radius: var(--r-control); background: transparent; color: var(--ink-3);
  cursor: pointer; position: relative; transition: background .13s ease, color .13s ease;
}
.cmd-tab:hover { background: var(--bg-hover); color: var(--ink-2); }
.cmd-tab.active { background: color-mix(in srgb, var(--cmd-tab-tint) 16%, transparent); color: var(--cmd-tab-tint); }
.cmd-tab.all {
  width: auto; padding: 0 var(--space-item); font-size: var(--t-caption-size); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-2); border: 1px solid var(--border-subtle);
}
.cmd-tab.all:hover { background: var(--bg-hover); color: var(--ink); }
.cmd-tab.all.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dark .cmd-tab.all.active { background: var(--ink); color: var(--bg); }

/* ---- body ---- */
.cmd-body { overflow-y: auto; padding: var(--space-inline) var(--space-inline) var(--space-item); min-height: 120px; scroll-padding: 44px 0; }
.cmd-body::-webkit-scrollbar { width: 10px; }
/* hover-only scrollbar, per the global law in stelaah.css */
.cmd-body::-webkit-scrollbar-thumb { background: transparent; border: 3px solid var(--surface); border-radius: var(--r-control); }
.cmd-body:hover::-webkit-scrollbar-thumb { background: var(--border); }

.cmd-group-label {
  font-size: var(--t-micro-size); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-4); padding: var(--space-group) var(--space-inline) var(--space-inline); display: flex; align-items: center; gap: var(--space-inline);
}
.cmd-group-label:first-child { padding-top: var(--space-tight); }
.cmd-group-label .cmd-group-count { font-weight: 600; color: var(--ink-4); opacity: .8; }

/* ---- row ---- */
.cmd-row {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) var(--space-item); border-radius: var(--r-card); cursor: pointer; text-align: left;
  border: none; background: transparent; color: inherit; font: inherit;
  position: relative;
}
.cmd-row + .cmd-row { margin-top: 1px; }
.cmd-row.sel { background: var(--bg-sunken); }
.cmd-row.sel .cmd-row-go { opacity: 1; transform: none; }

/* bare glyph — no filled tile (house rule); avatar/logo rows keep their anchor */
.cmd-ic {
  width: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--ink-3);
}
.cmd-ic.tint { color: var(--cmd-tint); }
.cmd-ic.avatar-wrap { width: 34px; }
.cmd-ic-img { width: 34px; height: 34px; border-radius: var(--r-control); overflow: hidden; background: var(--bg-sunken); }
.cmd-ic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cmd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmd-title { font-size: var(--t-body-size); font-weight: 550; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-title mark { background: transparent; color: var(--accent); font-weight: 700; padding: 0; }
.cmd-sub { font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmd-meta { display: flex; align-items: center; gap: var(--space-inline); flex-shrink: 0; padding-left: var(--space-inline); }
.cmd-tag {
  font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4);
  padding: 2px var(--space-inline); border-radius: 6px; background: var(--bg-sunken); letter-spacing: -0.01em;
}
.cmd-pill { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; padding: 2px var(--space-inline); border-radius: var(--r-modal); }
.cmd-pill .cmd-dot { width: 6px; height: 6px; border-radius: 50%; }
.cmd-row-go { color: var(--ink-4); opacity: 0; transform: translateX(-3px); transition: .14s; display: grid; place-items: center; }

/* enter hint on selected */
.cmd-enter { display: none; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); color: var(--ink-3); font-weight: 600; }
.cmd-row.sel .cmd-enter { display: inline-flex; }
.cmd-row.sel .cmd-row-go { display: none; }

/* ---- NL command banner ---- */
.cmd-nl { display: flex; align-items: center; gap: var(--space-item); width: 100%; padding: var(--space-item) var(--space-item); margin: 2px 2px var(--space-tight); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); background: linear-gradient(120deg, var(--accent-soft), transparent 80%); border-radius: var(--r-card); cursor: pointer; text-align: left; transition: all .14s; }
.cmd-nl:hover { border-color: var(--accent); }
.cmd-nl.answer { cursor: default; }
.cmd-nl-ic { width:auto; height:auto; border-radius:0; background:transparent; color:var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.cmd-nl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmd-nl-title { font-size: var(--t-label-size); color: var(--ink); }
.cmd-nl-sub { font-size: var(--t-caption-size); color: var(--ink-3); }
.cmd-nl-go { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-caption-size); font-weight: 600; color: var(--accent); flex-shrink: 0; }

/* ---- empty / no results ---- */
.cmd-empty { padding: 36px 20px 44px; text-align: center; }
.cmd-empty-ic { display: grid; place-items: center; margin: 0 auto var(--space-group); color: var(--ink-4); }
.cmd-empty h4 { font-size: var(--t-strong-size); color: var(--ink); margin: 0 0 var(--space-tight); font-weight: 600; }
.cmd-empty p { font-size: var(--t-label-size); color: var(--ink-3); margin: 0; }
.cmd-empty .cmd-empty-q { color: var(--ink); font-weight: 600; }
.cmd-empty-suggestions { display:flex; justify-content:center; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-item); }
.cmd-empty-suggestions button { border:1px solid var(--border); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:var(--space-tight) var(--space-inline); font:inherit; font-size:var(--t-caption-size); cursor:pointer; }
.cmd-empty-suggestions button:hover { border-color:var(--ink-4); color:var(--ink); }

/* ---- footer ---- */
.cmd-foot {
  display: flex; align-items: center; gap: var(--space-group); padding: var(--space-inline) var(--space-group);
  border-top: 1px solid var(--border-subtle); flex-shrink: 0;
  background: var(--surface-2); font-size: var(--t-micro-size); color: var(--ink-4);
}
.cmd-foot .cmd-hint { display: inline-flex; align-items: center; gap: var(--space-tight); }
.cmd-foot .cmd-hint .kbd { min-width: 18px; height: 18px; font-size: var(--t-micro-size); }
.cmd-foot .grow { flex: 1; }
.cmd-foot .cmd-brand { display: inline-flex; align-items: center; gap: var(--space-tight); font-weight: 600; color: var(--ink-3); }

/* tighten kbd inside palette */
.cmd .kbd { background: var(--surface); border: 1px solid var(--border); }

/* ---- file hover preview — image/video/audio/pdf get a real preview, other
   file types get a larger detail tile. Portaled + fixed-positioned, clamped
   into the viewport by pvPlacement() in s-command.jsx (mirrors @mention hovercard). ---- */
.cmd-pv {
  position: fixed; z-index: 9150;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-card);
  box-shadow: var(--modal-shadow); overflow: hidden;
  animation: cmdPvIn .12s ease;
  pointer-events: auto;
}
@keyframes cmdPvIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cmd-pv-img { display: block; width: 100%; height: 190px; object-fit: cover; background: var(--bg-sunken); }
.cmd-pv-video { display: block; width: 100%; height: 190px; object-fit: cover; background: #000; }
.cmd-pv-pdf { display: block; width: 100%; height: 190px; border: none; background: var(--bg-sunken); }
.cmd-pv-audio-wrap { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-group) var(--space-item); color: var(--ink-3); }
.cmd-pv-audio { flex: 1; min-width: 0; height: 34px; }
.cmd-pv-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: var(--space-block) var(--space-group); text-align: center; color: var(--ink-3); }
.cmd-pv-tile-name { font-size: var(--t-label-size); font-weight: 600; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-pv-tile-meta { font-size: var(--t-micro-size); color: var(--ink-4); }
.cmd-pv-name { padding: var(--space-inline) var(--space-item); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border-subtle); }
.cmd-pv-loading, .cmd-pv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-inline);
  height: 190px; padding: var(--space-group); text-align: center; color: var(--ink-4); font-size: var(--t-caption-size);
}
.dark .cmd .kbd { background: var(--bg-sunken); }


/* s-record-notes.css */
/* Stelaah — shared team-notes panel styles (RecordNotesPanel).
   Split out of s-sticky-notes.css (2026-08-10). s-record-notes.jsx is already
   shared (its filename doesn't match the notebooks route group), and
   RecordNotesPanel is rendered by s-projects.jsx and s-misc.jsx — neither of
   which ever loads the notebooks chunk. The panel's own .rn-* rules lived here
   anyway, so it rendered fully unstyled outside Notebooks. Found by
   scripts/verify-route-styles.mjs. Keep this file in criticalStyleRels. */
.rn-panel{ display:flex; flex-direction:column; gap:var(--space-inline); }
.rn-compose{ display:flex; flex-direction:column; gap:var(--space-inline); }
.rn-compose-in{ resize:vertical; min-height:52px; font-size:var(--t-caption-size); }
.rn-compose-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-inline); }
.rn-swatches{ display:flex; gap:var(--space-tight); }
.rn-sw{ width:14px; height:14px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:var(--sn-bg); cursor:pointer; padding:0; transition:transform .13s ease; }
.rn-sw:hover{ transform:scale(1.18); }
.rn-sw.sel{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink-3); }
.rn-list{ display:flex; flex-direction:column; gap:2px; }
.rn-row{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline); border-radius:var(--r-control); background:var(--sn-bg); }
.rn-row + .rn-row{ margin-top:var(--space-tight); }
.rn-row .sn-btn{ opacity:0; color:var(--ink-3); flex:none; transition:opacity .12s ease; }
.rn-row:hover .sn-btn{ opacity:1; }
.rn-row-main{ flex:1; min-width:0; }
.rn-row-text{ font-size:var(--t-caption-size); line-height:1.4; color:var(--sn-ink); white-space:pre-wrap; word-break:break-word; }
.rn-row-meta{ font-size:var(--t-micro-size); color:var(--sn-ink-soft); margin-top:var(--space-tight); }
.rn-row-actions{ display:flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-tight); }
.rn-empty{ font-size:var(--t-caption-size); color:var(--ink-3); padding:2px 0; }
.rn-react-wrap{ position:relative; display:inline-flex; }
.rn-react-pop{ z-index:5; }
.rn-replies{ position:relative; }
.rn-reply-thread{ margin-top:var(--space-inline); padding-left:var(--space-tight); border-left:2px solid rgba(0,0,0,.08); display:flex; flex-direction:column; gap:var(--space-inline); }
.rn-reply-row{ display:flex; align-items:flex-start; gap:var(--space-inline); padding-left:var(--space-inline); }
.rn-reply-row .sn-btn{ opacity:0; color:var(--ink-3); flex:none; transition:opacity .12s ease; }
.rn-reply-row:hover .sn-btn{ opacity:1; }
.rn-reply-box{ display:flex; align-items:center; gap:var(--space-tight); padding-left:var(--space-inline); }
.rn-reply-in{ flex:1; height:28px; font-size:var(--t-caption-size); }


/* s-meetbar.css */
/* ============================================================
   Stelaah — Aria Live · floating meeting capture bar  (.mb-*)
   "Nothing"-inspired: pure monochrome, dot-matrix, Space Mono,
   one red record dot. Follows the app's light/dark theme
   (body.dark) — --mb-red is the only constant across both.
   ============================================================ */
.mb-root {
  position: fixed; z-index: 78; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  font-family: 'Space Mono', ui-monospace, monospace;
  /* light (default) palette */
  --mb-bg: var(--surface); --mb-bg-2: var(--surface-2);
  --mb-line: var(--border); --mb-line-2: var(--border-subtle);
  --mb-ink: var(--ink); --mb-ink-2: var(--ink-2); --mb-dim: var(--ink-4); --mb-dot-off: var(--bg-active);
  --mb-red: #ff2b2b;
  --mb-tint: color-mix(in srgb, var(--ink) 4%, transparent);
  --mb-hover: var(--bg-hover); --mb-hover-strong: var(--bg-active); --mb-hover-border: var(--border-strong);
  --mb-grip: var(--border-strong); --mb-scroll: var(--border-strong); --mb-field: var(--surface-2);
  --mb-shadow: var(--shadow-pop);
  will-change: transform; touch-action: none;
}
body.dark .mb-root {
  /* dark palette — the original "Nothing"-inspired look, unchanged */
  --mb-bg: #0b0b0c; --mb-bg-2: #161617;
  --mb-line: rgba(255,255,255,0.12); --mb-line-2: rgba(255,255,255,0.06);
  --mb-ink: #f4f4f3; --mb-ink-2: #d9d9d8; --mb-dim: #7d7d80; --mb-dot-off: #2a2a2d;
  --mb-tint: rgba(255,255,255,0.02);
  --mb-hover: rgba(255,255,255,0.07); --mb-hover-strong: rgba(255,255,255,0.09); --mb-hover-border: rgba(255,255,255,0.24);
  --mb-grip: rgba(255,255,255,0.16); --mb-scroll: rgba(255,255,255,0.12); --mb-field: rgba(255,255,255,0.04);
  --mb-shadow: 0 18px 50px -14px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.04) inset;
}
.mb-root.canvas-safe { bottom: 92px; }
.mb-root.dragging { transition: none; }
.mb-root * { box-sizing: border-box; }

/* ---------- shared shell ---------- */
.mb-shell {
  background: var(--mb-bg); color: var(--mb-ink);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ============================================================
   Collapsed dock — minimized live capture (keeps recording alive)
   ============================================================ */
.mb-dock {
  display: flex; align-items: center; gap: var(--space-tight); height: 52px; padding: 0 var(--space-inline) 0 var(--space-tight);
  border-radius: 26px; animation: mbSlideUp .3s cubic-bezier(.2,.9,.3,1.05);
}
.mb-dock-grip { display: flex; flex-direction: column; gap: var(--space-tight); padding: 0 var(--space-tight); cursor: grab; flex-shrink: 0; align-self: stretch; justify-content: center; }
.mb-dock-grip:active { cursor: grabbing; }
.mb-dock-grip i { width: 3px; height: 3px; border-radius: 50%; background: var(--mb-hover-border); }
.mb-dock-face {
  display: flex; align-items: center; gap: var(--space-item); height: 40px; padding: 0 var(--space-item) 0 var(--space-item); border-radius: var(--r-modal);
  border: none; background: transparent; color: var(--mb-ink); cursor: pointer; position: relative;
  font-family: 'Space Mono', monospace; transition: background .14s;
}
.mb-dock-face:hover { background: var(--mb-hover); }
.mb-dock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mb-red); animation: mbPulse 1.5s infinite; flex-shrink: 0; }
.mb-dock-dot.paused { background: var(--mb-dim); animation: none; }
.mb-dock-timer { font-size: var(--t-strong-size); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.mb-dock-eq { display: flex; align-items: center; gap: 2.5px; height: 18px; }
.mb-dock-eq i { width: 3px; border-radius: 2px; background: var(--mb-ink); height: 5px; animation: mbEq .9s ease-in-out infinite; }
.mb-dock-eq i:nth-child(1){ animation-delay: -.0s; } .mb-dock-eq i:nth-child(2){ animation-delay: -.18s; }
.mb-dock-eq i:nth-child(3){ animation-delay: -.36s; } .mb-dock-eq i:nth-child(4){ animation-delay: -.54s; }
.mb-dock-eq i:nth-child(5){ animation-delay: -.72s; }
.mb-dock-eq.paused i { animation-play-state: paused; opacity: .35; height: 5px; }
@keyframes mbEq { 0%,100% { height: 5px; } 50% { height: 16px; } }
.mb-dock-meta { font-size: 9px; letter-spacing: .12em; color: var(--mb-dim); text-transform: uppercase; min-width: 38px; }
.mb-dock-badge { position: absolute; top: -1px; right: -3px; min-width: 16px; height: 16px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: #6ec1ff; color: #06121d; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; font-family: 'Hanken Grotesk', sans-serif; }
.mb-dock-acts { display: flex; align-items: center; gap: var(--space-tight); padding-right: 2px; }
.mb-icon.xs { width: 30px; height: 30px; }
.mb-dock-stop { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--mb-red); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .14s, transform .1s; }
.mb-dock-stop:hover { background: #ff4444; }
.mb-dock-stop:active { transform: scale(.92); }
.mb-stop-sq { width: 9px; height: 9px; border-radius: 2.5px; background: #fff; display: block; }
.mb-btn.red .mb-stop-sq { width: 8px; height: 8px; }
@keyframes mbPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mbPulse { 0%{ box-shadow: 0 0 0 0 rgba(255,43,43,.45);} 70%{ box-shadow: 0 0 0 7px rgba(255,43,43,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,43,43,0);} }

/* ============================================================
   Detection pill — "meeting detected"
   ============================================================ */
.mb-pill {
  display: flex; align-items: center; gap: var(--space-item); height: 52px; padding: 0 var(--space-inline) 0 var(--space-group);
  border-radius: 26px; animation: mbSlideUp .32s cubic-bezier(.2,.9,.3,1.05);
}
.mb-pill-glyph { display: grid; grid-template-columns: repeat(3, 4px); gap: var(--space-tight); }
.mb-pill-glyph i { width: 4px; height: 4px; border-radius: 50%; background: var(--mb-dim); }
.mb-pill-glyph i:nth-child(3n+1){ background: var(--mb-ink); }
.mb-pill-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-kicker { font-size: 9.5px; letter-spacing: .18em; color: var(--mb-dim); text-transform: uppercase; display: flex; align-items: center; gap: var(--space-tight); }
.mb-kicker .mb-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--mb-red); animation: mbPulse 1.6s infinite; }
.mb-pill-title { font-size: var(--t-label-size); color: var(--mb-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; }
.mb-pill-acts { display: flex; align-items: center; gap: var(--space-tight); margin-left: var(--space-tight); }
@keyframes mbSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* buttons */
.mb-btn {
  height: 36px; padding: 0 var(--space-group); border-radius: var(--r-modal); border: 1px solid var(--mb-line);
  background: transparent; color: var(--mb-ink); font-family: 'Space Mono', monospace;
  font-size: var(--t-micro-size); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-inline); white-space: nowrap;
  transition: background .14s, border-color .14s, transform .1s;
}
.mb-btn:hover { background: var(--mb-hover); border-color: var(--mb-hover-border); }
.mb-btn:active { transform: scale(.97); }
.mb-btn.primary { background: var(--mb-ink); color: var(--mb-bg); border-color: var(--mb-ink); font-weight: 700; }
.mb-btn.primary:hover { filter: brightness(1.08); }
.mb-btn.red { background: var(--mb-red); border-color: var(--mb-red); color: #fff; font-weight: 700; }
.mb-btn.red:hover { background: #ff4444; }
.mb-icon {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--mb-line); background: transparent;
  color: var(--mb-dim); display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: background .14s, color .14s, border-color .14s;
}
.mb-icon:hover { background: var(--mb-hover); color: var(--mb-ink); border-color: var(--mb-hover-border); }
.mb-icon.sm { width: 30px; height: 30px; }

/* ============================================================
   Live capture panel
   ============================================================ */
.mb-panel {
  width: 384px; border-radius: var(--r-modal); overflow: hidden; animation: mbSlideUp .32s cubic-bezier(.2,.9,.3,1.05);
  display: flex; flex-direction: column; max-height: min(74vh, 640px);
}
.mb-grip { height: 22px; display: grid; place-items: center; cursor: grab; flex-shrink: 0; }
.mb-grip:active { cursor: grabbing; }
.mb-grip i { width: 34px; height: 3px; border-radius: 2px; background: var(--mb-grip); }

.mb-head { display: flex; align-items: center; gap: var(--space-item); padding: 2px var(--space-item) var(--space-item); flex-shrink: 0; }
.mb-rec-badge { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); letter-spacing: .16em; color: var(--mb-ink); }
.mb-rec-badge .mb-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-red); animation: mbPulse 1.4s infinite; }
.mb-rec-badge.paused .mb-livedot { background: var(--mb-dim); animation: none; }
.mb-timer { font-size: var(--t-heading-size); letter-spacing: .02em; color: var(--mb-ink); font-variant-numeric: tabular-nums; margin-left: auto; }
.mb-head-meta { font-size: 9.5px; letter-spacing: .12em; color: var(--mb-dim); text-transform: uppercase; }

/* dot-matrix level meter */
.mb-meter { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-tight); height: 64px; padding: 0 var(--space-group) var(--space-item); flex-shrink: 0; }
.mb-meter-col { display: flex; flex-direction: column-reverse; gap: var(--space-tight); }
.mb-meter-col i { width: 5px; height: 5px; border-radius: 50%; background: var(--mb-dot-off); transition: background .08s linear, opacity .08s; }
.mb-meter-col i.on { background: var(--mb-ink); }
.mb-meter-col i.hot { background: var(--mb-red); }

.mb-divide { height: 1px; background: var(--mb-line-2); margin: 0 var(--space-item); flex-shrink: 0; }

/* speakers strip */
.mb-spk-strip { display: flex; gap: var(--space-inline); padding: var(--space-item) var(--space-item); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.mb-spk-strip::-webkit-scrollbar { display: none; }
.mb-spk {
  display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight); border-radius: var(--r-modal);
  border: 1px solid var(--mb-line); background: var(--mb-tint); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color .14s, background .14s;
}
.mb-spk:hover { border-color: var(--mb-hover-border); background: var(--mb-hover); }
.mb-spk.active { border-color: var(--mb-ink); }
.mb-spk-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mb-spk-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-micro-size); color: #0a0a0a; flex-shrink: 0; font-weight: 700; }
.mb-spk-name { font-size: var(--t-micro-size); color: var(--mb-ink); font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.mb-spk-name.unknown { color: var(--mb-dim); font-family: 'Space Mono', monospace; letter-spacing: .04em; }
.mb-spk-edit { color: var(--mb-dim); display: inline-flex; }
.mb-spk-time { font-size: 9px; color: var(--mb-dim); letter-spacing: .04em; }

/* live transcript */
.mb-feed { overflow-y: auto; padding: var(--space-tight) var(--space-item) var(--space-item); min-height: 96px; flex: 1; scrollbar-width: thin; }
.mb-feed::-webkit-scrollbar { width: 6px; }
/* hover-only scrollbar, per the global law in stelaah.css */
.mb-feed::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.mb-feed:hover::-webkit-scrollbar-thumb { background: var(--mb-scroll); }
.mb-line { display: flex; gap: var(--space-inline); padding: var(--space-inline) 0; animation: mbLineIn .3s ease; position: relative; }
.mb-line.flagged { background: rgba(255,214,110,0.07); border-radius: var(--r-control); margin: 0 -8px; padding: var(--space-inline) var(--space-inline); }
.mb-line-flag { position: absolute; top: 5px; right: 0; width: 22px; height: 22px; border-radius: var(--r-control); border: none; background: transparent; color: var(--mb-dim); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .13s; }
.mb-line:hover .mb-line-flag { opacity: .65; }
.mb-line-flag:hover { background: var(--mb-hover); color: var(--mb-ink); opacity: 1; }
.mb-line.flagged .mb-line-flag { opacity: 1; color: #ffd66e; }
.mb-line.flagged .mb-line-flag { right: 6px; }
@keyframes mbLineIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.mb-line-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); flex-shrink: 0; padding-top: 2px; }
.mb-line-swatch { width: 7px; height: 7px; border-radius: 50%; }
.mb-line-t { font-size: 8.5px; color: var(--mb-dim); letter-spacing: .02em; }
.mb-line-body { min-width: 0; }
.mb-line-who { font-size: var(--t-micro-size); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.mb-line-txt { font-size: var(--t-caption-size); line-height: 1.5; color: var(--mb-ink-2); font-family: 'Hanken Grotesk', sans-serif; }
.mb-feed-listening { color: var(--mb-dim); font-size: var(--t-micro-size); letter-spacing: .06em; text-align: center; padding: 20px 0; text-transform: uppercase; }

/* footer controls */
.mb-foot { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-item) var(--space-item); border-top: 1px solid var(--mb-line-2); flex-shrink: 0; }
.mb-foot .mb-spacer { flex: 1; }
.mb-foot-flag { position: relative; }
.mb-foot-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: #ffd66e; color: #1a1500; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; font-family: 'Space Mono', monospace; }

/* ============================================================
   Aria live ask panel (slides over feed)
   ============================================================ */
.mb-ask { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mb-ask-scope { display: flex; gap: var(--space-tight); padding: var(--space-inline) var(--space-item) var(--space-inline); flex-shrink: 0; }
.mb-scope-btn {
  flex: 1; height: 30px; border-radius: var(--r-control); border: 1px solid var(--mb-line); background: transparent;
  color: var(--mb-dim); font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight); transition: .14s;
}
.mb-scope-btn.on { border-color: var(--mb-ink); color: var(--mb-ink); background: var(--mb-field); }
.mb-ask-body { flex: 1; overflow-y: auto; padding: var(--space-tight) var(--space-item); min-height: 110px; scrollbar-width: thin; }
.mb-ask-body::-webkit-scrollbar { width: 6px; }
.mb-ask-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.mb-ask-body:hover::-webkit-scrollbar-thumb { background: var(--mb-scroll); }
.mb-msg { display: flex; gap: var(--space-inline); padding: var(--space-tight) 0; }
.mb-msg-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--mb-line); color: var(--mb-ink); }
.mb-msg-bub { font-size: var(--t-caption-size); line-height: 1.55; font-family: 'Hanken Grotesk', sans-serif; }
.mb-msg.me { flex-direction: row-reverse; }
.mb-msg.me .mb-msg-bub { background: var(--mb-hover); padding: var(--space-inline) var(--space-item); border-radius: var(--r-card); color: var(--mb-ink); }
.mb-msg.ai .mb-msg-bub { color: var(--mb-ink-2); padding-top: 2px; }
.mb-typing { display: inline-flex; gap: var(--space-tight); padding: var(--space-tight) 0; }
.mb-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--mb-dim); animation: mbType 1s infinite; }
.mb-typing i:nth-child(2){ animation-delay: .15s; } .mb-typing i:nth-child(3){ animation-delay: .3s; }
@keyframes mbType { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }
.mb-ask-chips { display: flex; gap: var(--space-tight); flex-wrap: wrap; padding: var(--space-tight) var(--space-item) var(--space-tight); flex-shrink: 0; }
.mb-chip { font-size: var(--t-micro-size); letter-spacing: .03em; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-card); border: 1px solid var(--mb-line); background: transparent; color: var(--mb-dim); cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; transition: .14s; }
.mb-chip:hover { color: var(--mb-ink); border-color: var(--mb-hover-border); }
.mb-ask-compose { display: flex; gap: var(--space-inline); padding: var(--space-inline) var(--space-item) var(--space-item); flex-shrink: 0; align-items: flex-end; }
.mb-ask-compose textarea {
  flex: 1; resize: none; background: var(--mb-field); border: 1px solid var(--mb-line); border-radius: var(--r-card);
  color: var(--mb-ink); font-family: 'Hanken Grotesk', sans-serif; font-size: var(--t-label-size); line-height: 1.4; padding: var(--space-inline) var(--space-item); outline: none; max-height: 90px;
}
.mb-ask-compose textarea::placeholder { color: var(--mb-dim); }
.mb-send { width: 38px; height: 38px; border-radius: var(--r-control); border: none; background: var(--mb-ink); color: var(--mb-bg); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.mb-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; }

/* speaker assign dropdown */
.mb-assign { position: fixed; z-index: 80; background: var(--mb-bg-2); border: 1px solid var(--mb-line); border-radius: var(--r-card); padding: var(--space-tight); width: 210px; box-shadow: var(--mb-shadow); font-family: 'Hanken Grotesk', sans-serif; max-height: 280px; overflow-y: auto; }
.mb-assign-label { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-dim); padding: var(--space-tight) var(--space-inline) var(--space-tight); font-family: 'Space Mono', monospace; }
.mb-assign-item { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border-radius: var(--r-control); border: none; background: transparent; color: var(--mb-ink); cursor: pointer; font-size: var(--t-caption-size); text-align: left; }
.mb-assign-item:hover { background: var(--mb-hover); }
.mb-assign-item .mb-assign-check { margin-left: auto; color: var(--mb-ink); display: inline-flex; }

/* generation overlay */
.mb-gen { padding: var(--space-group) var(--space-group) 20px; }
.mb-gen-h { display: flex; align-items: center; gap: var(--space-item); margin-bottom: var(--space-group); }
.mb-gen-spin { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mb-line); display: grid; place-items: center; color: var(--mb-ink); animation: mbSpin 3s linear infinite; }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-gen-t { font-size: var(--t-label-size); color: var(--mb-ink); font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; }
.mb-gen-s { font-size: var(--t-micro-size); color: var(--mb-dim); margin-top: 2px; }
.mb-gen-step { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; font-size: var(--t-micro-size); letter-spacing: .04em; color: var(--mb-dim); text-transform: uppercase; }
.mb-gen-step.on { color: var(--mb-ink); }
.mb-gen-step.done { color: var(--mb-dim); }
.mb-gen-tick { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--mb-line); display: grid; place-items: center; flex-shrink: 0; }
.mb-gen-step.on .mb-gen-tick { border-color: var(--mb-ink); }
.mb-gen-step.done .mb-gen-tick { background: var(--mb-ink); border-color: var(--mb-ink); color: var(--mb-bg); }

/* tiny toggle row */
.mb-tabs { display: flex; gap: var(--space-tight); padding: 0 var(--space-item) var(--space-inline); flex-shrink: 0; }
.mb-tab { flex: 1; height: 30px; border-radius: var(--r-control); border: 1px solid transparent; background: var(--mb-tint); color: var(--mb-dim); font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight); transition: .14s; padding: 0 var(--space-tight); white-space: nowrap; }
.mb-tab.on { background: var(--mb-hover-strong); color: var(--mb-ink); }
.mb-tab .mb-tab-n { font-size: 9px; opacity: .7; }
.mb-tab .mb-tab-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--mb-red); margin-left: var(--space-tight); }

/* ============================================================
   Workers — one Aria, six background workers (.mb-sys / .mb-wk)
   ============================================================ */
.mb-sys { flex: 1; overflow-y: auto; padding: 2px var(--space-item) var(--space-item); min-height: 130px; scrollbar-width: thin; }
.mb-sys::-webkit-scrollbar { width: 6px; }
.mb-sys::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.mb-sys:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
.mb-sys-hd { display: flex; align-items: center; gap: var(--space-inline); padding: 2px 2px var(--space-item); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-dim); }
.mb-sys-hd b { color: var(--mb-ink); }
.mb-sys-orb { width: 8px; height: 8px; border-radius: 50%; background: #9affc4; animation: mbPulseG 1.8s infinite; flex-shrink: 0; }
@keyframes mbPulseG { 0%{ box-shadow: 0 0 0 0 rgba(154,255,196,.4);} 70%{ box-shadow: 0 0 0 6px rgba(154,255,196,0);} 100%{ box-shadow: 0 0 0 0 rgba(154,255,196,0);} }
.mb-sys-list { display: flex; flex-direction: column; gap: var(--space-inline); }
.mb-wk { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-item); border-radius: var(--r-card); border: 1px solid var(--mb-line); background: rgba(255,255,255,0.02); transition: border-color .25s, background .25s, opacity .25s; }
.mb-wk-ic { width: auto; height: auto; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--mb-dim); flex-shrink: 0; transition: color .25s; }
.mb-wk-main { flex: 1; min-width: 0; }
.mb-wk-top { display: flex; align-items: center; gap: var(--space-inline); }
.mb-wk-name { font-size: var(--t-caption-size); font-weight: 600; color: var(--mb-ink); font-family: 'Hanken Grotesk', sans-serif; letter-spacing: -0.01em; }
.mb-wk-status { font-size: 8px; letter-spacing: .12em; color: var(--mb-dim); margin-left: auto; flex-shrink: 0; }
.mb-wk-read { font-size: var(--t-micro-size); color: var(--mb-dim); margin-top: 2px; font-family: 'Hanken Grotesk', sans-serif; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-wk-ind { display: inline-flex; gap: var(--space-tight); flex-shrink: 0; }
.mb-wk-ind i { width: 4px; height: 4px; border-radius: 50%; background: var(--mb-dot-off); transition: background .25s; }
@keyframes mbWk { 0%,60%,100%{ opacity: .25; } 30%{ opacity: 1; } }
/* working */
.mb-wk.work { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.045); }
.mb-wk.work .mb-wk-ic { background: transparent; color: var(--mb-ink); }
.mb-wk.work .mb-wk-status { color: var(--mb-ink); }
.mb-wk.work .mb-wk-read { color: #c7c7c6; }
.mb-wk.work .mb-wk-ind i { background: var(--mb-ink); animation: mbWk 1s infinite; }
.mb-wk.work .mb-wk-ind i:nth-child(2){ animation-delay: .15s; } .mb-wk.work .mb-wk-ind i:nth-child(3){ animation-delay: .3s; }
/* listening */
.mb-wk.listen .mb-wk-ic { color: #d2d2d1; background: transparent; }
.mb-wk.listen .mb-wk-status { color: #d2d2d1; }
.mb-wk.listen .mb-wk-ind i { background: #d2d2d1; animation: mbWk 1.5s infinite; }
/* ready */
.mb-wk.ready { border-color: rgba(154,255,196,0.3); }
.mb-wk.ready .mb-wk-ic { background: transparent; color: #9affc4; }
.mb-wk.ready .mb-wk-status { color: #9affc4; }
.mb-wk.ready .mb-wk-ind i { background: #9affc4; }
/* dormant */
.mb-wk.idle, .mb-wk.off, .mb-wk.paused { opacity: .5; }

/* creative worker — live ideas surfaced mid-call */
.mb-wk-ideas { display: flex; flex-direction: column; gap: var(--space-tight); margin: var(--space-tight) 0 2px var(--space-inline); padding-left: var(--space-section); }
.mb-idea { display: flex; flex-direction: column; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); border-radius: var(--r-control); background: rgba(154,255,196,0.05); border: 1px solid rgba(154,255,196,0.18); animation: mbLineIn .3s ease; }
.mb-idea-kind { font-size: 8px; letter-spacing: .14em; color: #9affc4; font-family: 'Space Mono', monospace; }
.mb-idea-tx { font-size: var(--t-caption-size); line-height: 1.45; color: #e8e8e7; font-family: 'Hanken Grotesk', sans-serif; }
.mb-idea.thinking { background: transparent; border: none; padding: var(--space-tight) var(--space-tight); }

/* always-on worker strip (under the meter) */
.mb-strip { display: flex; align-items: center; gap: var(--space-tight); margin: 0 var(--space-item) var(--space-item); padding: var(--space-tight) var(--space-inline); border-radius: var(--r-card); border: 1px solid var(--mb-line); background: rgba(255,255,255,0.02); cursor: pointer; flex-shrink: 0; transition: border-color .14s, background .14s; font-family: 'Space Mono', monospace; }
.mb-strip:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.mb-strip-w { width: 25px; height: 25px; border-radius: var(--r-control); display: grid; place-items: center; background: rgba(255,255,255,0.04); color: var(--mb-dot-off); flex-shrink: 0; transition: .25s; }
.mb-strip-w.work { background: rgba(255,255,255,0.1); color: var(--mb-ink); }
.mb-strip-w.listen { color: #d2d2d1; }
.mb-strip-w.ready { background: rgba(154,255,196,0.16); color: #9affc4; }
.mb-strip-w.idle, .mb-strip-w.off, .mb-strip-w.paused { opacity: .45; }
.mb-strip-l { margin-left: auto; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-dim); flex-shrink: 0; padding-right: var(--space-tight); }

/* ============================================================
   Live co-pilot (Coach)
   ============================================================ */
.mb-coach { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mb-coach-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-tight) var(--space-item) var(--space-inline); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-dim); flex-shrink: 0; }
.mb-coach-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-red); animation: mbPulse 1.6s infinite; }
.mb-coach-body { flex: 1; overflow-y: auto; padding: var(--space-tight) var(--space-item) var(--space-inline); min-height: 110px; display: flex; flex-direction: column; gap: var(--space-inline); scrollbar-width: thin; }
.mb-coach-body::-webkit-scrollbar { width: 6px; }
.mb-coach-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.mb-coach-body:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
.mb-coach-empty { color: var(--mb-dim); font-size: var(--t-micro-size); letter-spacing: .04em; text-align: center; padding: var(--space-block) var(--space-inline); text-transform: uppercase; }
.mb-nudge { border: 1px solid var(--mb-line); border-radius: var(--r-card); padding: var(--space-item) var(--space-item); background: rgba(255,255,255,0.025); animation: mbLineIn .32s ease; }
.mb-nudge-tag { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: 9px; letter-spacing: .14em; color: var(--mb-dim); margin-bottom: var(--space-tight); }
.mb-nudge-tx { font-size: var(--t-label-size); line-height: 1.5; color: #e8e8e7; font-family: 'Hanken Grotesk', sans-serif; display: block; }
.mb-nudge.ask { border-left: 0; } /* (house rule: no left accent bars) */
.mb-nudge.ask .mb-nudge-tag { color: #6ec1ff; }
.mb-nudge.handle .mb-nudge-tag { color: #ff8f6e; }
.mb-nudge.talk .mb-nudge-tag { color: #9affc4; }
.mb-nudge.thinking { background: transparent; border: none; padding: var(--space-tight) 2px; }

/* ── real capture states ───────────────────────────────────
   Added with the recorder rewrite (s-meetrec.jsx). These exist because the
   panel now reports things it could not report before: that the microphone
   failed, which wrap-up step is actually running, and where one person's turn
   ends and the next begins. */

/* No audio is being captured. The meter is flat and the badge says so, rather
   than the old behaviour where a blocked microphone still animated. */
.mb-rec-badge.off { color: var(--mb-dim); }
.mb-rec-badge.off .mb-livedot { background: var(--mb-dim); animation: none; }
.mb-dock-dot.off { background: var(--mb-dim); animation: none; }
.mb-feed-listening.bad { color: var(--mb-red); text-transform: none; letter-spacing: .02em; }
.mb-feed-listening { text-transform: none; letter-spacing: .02em; line-height: 1.5; padding: 20px var(--space-tight); }

/* Wrap-up steps track real work, so they need a failed and a skipped state
   alongside running and done. */
.mb-gen-step.failed { color: var(--mb-red); }
.mb-gen-step.failed .mb-gen-tick { border-color: var(--mb-red); color: var(--mb-red); }
.mb-gen-step.skipped { color: var(--mb-dim); opacity: .7; }
.mb-gen-step.skipped .mb-gen-tick { border-style: dashed; }
.mb-gen-lbl { flex: 1; min-width: 0; }
.mb-gen-det { font-size: var(--t-micro-size); letter-spacing: .02em; text-transform: none; color: var(--mb-dim); flex-shrink: 0; }

/* Speaker boundaries are user-marked, so the control lives on the line. */
.mb-line-acts { position: absolute; top: 5px; right: 0; display: flex; gap: 2px; align-items: center; }
.mb-line-flag, .mb-line-split { position: static; width: 22px; height: 22px; border-radius: var(--r-control); border: none; background: transparent; color: var(--mb-dim); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: .13s; }
.mb-line:hover .mb-line-flag, .mb-line:hover .mb-line-split { opacity: .65; }
.mb-line-flag:hover, .mb-line-split:hover { background: var(--mb-hover); color: var(--mb-ink); opacity: 1; }
.mb-line.flagged .mb-line-flag { opacity: 1; color: #ffd66e; }
.mb-line.flagged .mb-line-acts { right: 6px; }


/* s-inbox.css */
/* ============================================================
   Stelaah — Inbox: full email client (warm editorial)  .ib-* / .re-*
   ============================================================ */
.ib { display:grid; grid-template-columns:236px 392px 1fr; height:100%; min-height:0; background:var(--bg); }
.ib-mobile-acct { display:none; }
@media (max-width:1200px){ .ib { grid-template-columns:212px 340px 1fr; } }
/* tablet: drop sidebar to a slim rail */
@media (max-width:900px){
  .ib { grid-template-columns:64px 300px 1fr; }
  .ib-side { padding:var(--space-item) var(--space-inline); align-items:stretch; }
  .ib-compose-btn { font-size:0; gap:0; }
  .ib-folder .grow, .ib-filters-btn .grow, .ib-folder.dq-folder .grow, .ib-side-sec, .ib-labels, .ib-accts-h, .ib-acct .grow, .ib-acct.add, .dq-folder-n, .ib-fu-orb+.grow { display:none; }
  .ib-folder, .ib-filters-btn, .ib-folder.dq-folder { justify-content:center; gap:0; padding:0; height:40px; }
  .ib-unread, .ib-fcount { position:absolute; top:4px; right:6px; }
  .ib-folders .ib-folder { position:relative; }
  .ib-acct { justify-content:center; }
  .ib-acct-wrap .ib-acct { padding-right:var(--space-item); }
  .ib-acct-manage { opacity:1; right:-2px; bottom:-5px; width:20px; height:20px; background:var(--surface); border:1px solid var(--border-subtle); }
}
/* narrow: single column — list, then reading pane as a full slide-over */
@media (max-width:640px){
  .ib { grid-template-columns:0 1fr; }
  .ib-side { display:none; }
  .ib-listcol { border-right:none; }
  .ib-read { position:absolute; inset:0; z-index:40; transform:translateX(100%); transition:transform .22s ease; }
  .ib--reading .ib-read { transform:none; }
  .ib-read-back { display:grid; }
  .ib { position:relative; }
  .ib-list-top { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-inline); }
  .ib-list-top .ib-viewbar,.ib-list-top .ib-search-chips { grid-column:1 / -1; }
  .ib-list-top .ib-search { min-width:0; }
  .ib-mobile-acct { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); }
}

/* ── sidebar ── */
.ib-side { display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-group) var(--space-item); border-right:1px solid var(--border); min-height:0; overflow-y:auto; }
.ib-compose-btn { display:flex; align-items:center; justify-content:center; gap:var(--space-inline); height:42px; border:none; border-radius:var(--r-card); background:var(--accent); color:var(--accent-fg,#fff); font:inherit; font-size:var(--t-body-size); font-weight:650; cursor:pointer; margin-bottom:var(--space-inline); box-shadow:none; transition:filter .14s, background .14s; }
.ib-compose-btn:hover { filter:brightness(1.04); transform:none; }
.ib-folders { display:flex; flex-direction:column; gap:1px; margin-top:var(--space-tight); }
.ib-folder { display:flex; align-items:center; gap:var(--space-item); width:100%; height:38px; padding:0 var(--space-item); border:none; background:none; border-radius:var(--r-control); color:var(--ink-2); font:inherit; font-size:var(--t-label-size); font-weight:550; cursor:pointer; text-align:left; transition:background .12s, color .12s; }
.ib-folder:hover { background:var(--bg-hover); color:var(--ink); }
.ib-folder.on { background:var(--accent-soft); color:var(--accent); font-weight:650; }
.ib-folder.on svg { color:var(--accent); }
.ib-unread { font-size:var(--t-micro-size); font-weight:700; background:var(--accent); color:var(--accent-fg,#fff); border-radius:999px; padding:1px var(--space-inline); min-width:18px; text-align:center; }
.ib-fcount { font-size:var(--t-micro-size); font-weight:600; color:var(--ink-4); }
.ib-side-sec { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); margin:var(--space-group) var(--space-item) var(--space-inline); }
/* collapsible variant: same small-caps label, now a real control. The rail
   hides these entirely below 820px, so this only ever renders at desktop. */
.ib-side-sec-b { display:flex; align-items:center; gap:var(--space-inline); width:calc(100% - var(--space-item) * 2); min-height:var(--control-h-sm); flex:none; padding:0; border:none; background:none; border-radius:var(--r-control); font:inherit; font-size:var(--t-micro-size); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); cursor:pointer; text-align:left; transition:background .12s, color .12s; }
.ib-side-sec-b:hover { background:var(--bg-hover); color:var(--ink-2); }
.ib-side-sec-b svg { flex:none; transform:rotate(90deg); transition:transform .16s ease; }
.ib-side-sec-b.is-closed svg { transform:none; }
.ib-side-sec-n { font-size:var(--t-micro-size); font-weight:600; color:var(--ink-4); letter-spacing:0; }
@media (prefers-reduced-motion:reduce){ .ib-side-sec-b svg { transition:none; } }
.ib-labels { display:flex; flex-direction:column; gap:1px; }
.ib-label { display:flex; align-items:center; gap:var(--space-inline); width:100%; height:32px; padding:0 var(--space-item); border:none; background:none; border-radius:var(--r-control); color:var(--ink-2); font:inherit; font-size:var(--t-caption-size); font-weight:500; cursor:pointer; text-align:left; transition:background .12s; }
.ib-label:hover { background:var(--bg-hover); }
.ib-label.on { background:var(--bg-active); color:var(--ink); font-weight:600; }
.ib-label-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ib-label-n { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-gmail-folder { gap:var(--space-inline); }
.ib-gmail-folder svg { flex:none; color:var(--ink-4); }
.ib-gmail-folder.depth-1 { padding-left:var(--space-block); }
.ib-gmail-folder.depth-2 { padding-left:calc(var(--space-block) + var(--space-item)); }
.ib-gmail-folder.depth-3 { padding-left:calc(var(--space-block) + var(--space-group)); }
.ib-folder-create { margin-top:var(--space-tight); color:var(--accent); font-weight:600; }
.ib-accts-h { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); margin:var(--space-inline) var(--space-item) var(--space-inline); }
.ib-filters-btn { display:flex; align-items:center; gap:var(--space-item); width:100%; height:36px; padding:0 var(--space-item); border:none; background:none; border-radius:var(--r-control); color:var(--ink-2); font:inherit; font-size:var(--t-label-size); font-weight:550; cursor:pointer; text-align:left; transition:background .12s; }
.ib-filters-btn:hover { background:var(--bg-hover); color:var(--ink); }

/* rules manager */
.rl-mgr { width:680px; }
.rl-body { padding:var(--space-inline) 20px; max-height:58vh; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-item); }
.rl-rule { border:none; border-radius:var(--r-card); padding:var(--space-item) var(--space-group); background:var(--bg-sunken); }
.rl-rule.off { opacity:.6; }
/* a just-added rule, scrolled into view so the New rule button visibly lands */
.rl-rule.fresh { box-shadow:0 0 0 1px var(--accent); }
.rl-rule-top { display:flex; align-items:center; gap:var(--space-inline); margin-bottom:var(--space-inline); }
.rl-name { flex:1; border:none; background:none; font:inherit; font-size:var(--t-body-size); font-weight:650; color:var(--ink); outline:none; }
.rl-del { width:30px; height:30px; border:none; background:none; color:var(--ink-4); border-radius:var(--r-control); cursor:pointer; display:grid; place-items:center; }
.rl-del:hover { background:color-mix(in srgb, var(--st-blocked) 14%, transparent); color:var(--st-blocked); }
.rl-cond, .rl-acts { display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-inline); }
.rl-lbl { font-size:var(--t-caption-size); color:var(--ink-4); font-weight:550; }
.rl-cond select, .rl-val, .rl-act-sel { font:inherit; font-size:var(--t-caption-size); color:var(--ink); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); outline:none; }
.rl-cond select:focus, .rl-val:focus, .rl-act-sel:focus { border-color:var(--accent); }
.rl-val { flex:1; min-width:120px; }
.rl-act { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--ink-3); background:transparent; border:none; border-radius:999px; padding:var(--space-tight) var(--space-item); cursor:pointer; transition:background .13s, color .13s; }
.rl-act:hover { background:var(--bg-hover); color:var(--ink); }
.rl-act.on { color:var(--accent); background:var(--bg-hover); }
.rl-act-sel.on { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
.rl-folder-builder { border-radius:var(--r-card); padding:var(--space-item) var(--space-group); background:var(--surface-2); }
.rl-folder-copy,.rl-folder-form { display:flex; align-items:center; gap:var(--space-item); }
.rl-folder-icon { width:var(--control-h-sm); height:var(--control-h-sm); display:grid; place-items:center; flex:none; border-radius:var(--r-pill); color:var(--accent); background:var(--accent-soft); }
.rl-folder-form { margin-top:var(--space-item); }
.rl-folder-form .invsel,
.rl-folder-form > .invsel-btn { flex:0 0 180px; width:180px; }
.rl-folder-form input { min-width:0; flex:1; height:var(--control-h); border:1px solid var(--border); border-radius:var(--r-control); padding:0 var(--space-item); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-caption-size); outline:none; }
.rl-folder-form input:focus-visible { border-color:var(--accent); }
.rl-folder-error { margin-top:var(--space-inline); color:var(--st-blocked); font-size:var(--t-caption-size); }
.rl-sender-picker { position:relative; flex:1; min-width:240px; }
.rl-sender-values { min-height:var(--control-h); display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-tight); padding:var(--space-tight); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); }
.rl-sender-values:focus-within { border-color:var(--accent); }
.rl-sender-values input { flex:1; min-width:130px; height:var(--control-h-sm); border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-caption-size); }
.rl-sender-chip { min-width:0; max-width:100%; display:grid; grid-template-columns:24px minmax(0,1fr) 20px; align-items:center; gap:var(--space-tight); padding:var(--space-tight); border-radius:var(--r-pill); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border-subtle); }
.rl-sender-avatar { position:relative; width:24px; height:24px; display:grid; place-items:center; overflow:hidden; border-radius:var(--r-pill); background:var(--bg-sunken); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; }
.rl-sender-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rl-sender-copy { min-width:0; display:flex; flex-direction:column; }
.rl-sender-copy b { color:var(--ink); font-size:var(--t-micro-size); line-height:1.2; }
.rl-sender-copy small { color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.2; }
.rl-sender-chip > button { width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-4); cursor:pointer; }
.rl-sender-chip > button:hover { background:var(--bg-hover); color:var(--ink); }
.rl-sender-menu { position:absolute; inset:calc(100% + var(--space-tight)) 0 auto; z-index:20; max-height:250px; overflow-y:auto; padding:var(--space-tight); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow-lg); }
.rl-sender-menu > button { width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:var(--space-inline); padding:var(--space-inline); border:0; border-radius:var(--r-control); background:transparent; text-align:left; cursor:pointer; }
.rl-sender-menu > button:hover { background:var(--bg-hover); }
.ib-acct { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); border:none; background:none; width:100%; text-align:left; color:var(--ink); }
.ib-acct.add { color:var(--ink-3); font:inherit; font-size:var(--t-caption-size); cursor:pointer; } .ib-acct.add:hover { background:var(--bg-hover); }
.ib-acct.sw { cursor:pointer; border-radius:var(--r-control); transition:background .12s; }
.ib-acct.sw:hover { background:var(--bg-hover); }
.ib-acct.sw.on { background:var(--accent-soft); }
.ib-acct.sw.on .ib-acct-n { color:var(--accent); }
.ib-acct.sw svg:last-child { color:var(--accent); flex-shrink:0; }
.ib-acct-logo, .ib-acct-all { position:relative; width:26px; height:26px; border-radius:var(--r-control); background:var(--bg-sunken); display:grid; place-items:center; flex-shrink:0; color:var(--ink-3); }
.ib-side-div { height:1px; background:var(--border-subtle); margin:var(--space-inline) var(--space-item) var(--space-tight); }
.ib-acct-live { position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border-radius:50%; background:var(--st-done); border:2px solid var(--surface); }
.ib-acct.sw.on .ib-acct-live { border-color:var(--accent-soft); }
.ib-acct-n-badge { font-size:var(--t-micro-size); font-weight:700; background:var(--accent); color:var(--accent-fg,#fff); border-radius:999px; padding:1px var(--space-tight); min-width:16px; text-align:center; flex-shrink:0; }

/* notification preferences */
.ib-np { width:480px; }
.ib-np-body { padding:var(--space-inline) 20px; }
.ib-np-sec { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); margin:var(--space-inline) 0 var(--space-tight); }
.ib-np-secmeta { font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-4); }
.ib-np-row { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) 0; border-bottom:1px solid var(--border-subtle); }
.ib-np-ic { width:auto; height:auto; border-radius:0; display:grid; place-items:center; background:transparent; color:var(--ink-3); flex-shrink:0; }
.ib-np-label { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.ib-np-desc { font-size:var(--t-micro-size); color:var(--ink-4); margin-top:1px; }
.ib-np-clients { display:flex; flex-direction:column; gap:2px; max-height:200px; overflow-y:auto; }
.ib-np-client { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-inline); border:none; background:none; border-radius:var(--r-control); cursor:pointer; font:inherit; font-size:var(--t-label-size); color:var(--ink); text-align:left; }
.ib-np-client:hover { background:var(--bg-hover); }
.ib-np-client svg { color:var(--ink-4); }
.ib-np-client.muted { color:var(--ink-4); }
.ib-np-client.muted svg { color:var(--c-clay); }
.ib-np-cdot { width:24px; height:24px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; font-size:var(--t-micro-size); font-weight:700; flex-shrink:0; }
.ib-np-client.muted .ib-np-cdot { opacity:.5; }
.ib-np-days { display:flex; gap:var(--space-tight); flex-shrink:0; }
.ib-np-day { width:38px; padding:var(--space-tight) 0; border:none; border-radius:var(--r-control); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--t-micro-size); font-weight:650; cursor:pointer; transition:background .12s, color .12s; }
.ib-np-day:hover { background:var(--bg-hover); }
.ib-np-day.on { background:var(--accent); border-color:var(--accent); color:var(--accent-fg,#fff); }
.ib-acct-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.ib-acct-n { font-size:var(--t-caption-size); font-weight:600; } .ib-acct-e { font-size:var(--t-micro-size); color:var(--ink-4); }

/* ── list column ── */
.ib-listcol { display:flex; flex-direction:column; border-right:1px solid var(--border); min-height:0; min-width:0; }
.ib-list-top { padding:var(--space-item) var(--space-group) var(--space-inline); }
.ib-viewbar { display:flex; align-items:center; gap:var(--space-tight); margin-bottom:var(--space-item); }
.ib-viewbar > button { min-height:var(--control-h-sm); display:inline-flex; align-items:center; gap:var(--space-tight); padding:0 var(--space-item); border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-3); font:inherit; font-size:var(--t-label-size); font-weight:600; cursor:pointer; }
.ib-viewbar > button:hover { background:var(--bg-hover); color:var(--ink); }
.ib-viewbar > button.on { background:var(--bg-active); color:var(--ink); }
.ib-viewbar .ib-view-filter { border:1px solid var(--border); background:var(--surface); }
.ib-search { display:flex; align-items:center; gap:var(--space-inline); background:var(--bg-sunken); border:1px solid transparent; border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); color:var(--ink-4); transition:border-color .14s, background .14s; }
.ib-search:focus-within { background:var(--surface); border-color:var(--accent); }
.ib-search input { flex:1; border:none; background:none; font:inherit; font-size:var(--t-label-size); color:var(--ink); outline:none; }
.ib-search-x { border:none; background:none; color:var(--ink-4); cursor:pointer; display:grid; place-items:center; padding:0; }
.ib-search-x:hover { color:var(--ink); }
.ib-search-chips { display:flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-inline); flex-wrap:wrap; }
.ib-fchip { font:inherit; font-size:var(--t-micro-size); font-weight:600; color:var(--ink-3); background:transparent; border:none; border-radius:999px; padding:var(--space-tight) var(--space-inline); cursor:pointer; transition:background .12s, color .12s; display:inline-flex; align-items:center; gap:var(--space-tight); }
.ib-fchip:hover { background:var(--bg-hover); color:var(--ink); }
.ib-fchip.on { color:var(--accent); background:var(--bg-hover); }
.ib-saved-wrap { position:relative; margin-left:auto; }
.ib-fchip.saved { color:var(--ink-2); }
.ib-saved-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:12; width:250px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:var(--space-inline); }
.ib-saved-hd { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding:var(--space-tight) var(--space-inline) var(--space-tight); }
.ib-saved-row { display:flex; align-items:center; gap:var(--space-tight); border-radius:var(--r-control); }
.ib-saved-row:hover { background:var(--bg-hover); }
.ib-saved-row > button.grow { display:flex; flex-direction:column; align-items:flex-start; border:none; background:none; cursor:pointer; padding:var(--space-inline) var(--space-inline); text-align:left; min-width:0; flex:1; }
.ib-saved-name { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.ib-saved-q { font-size:var(--t-micro-size); color:var(--ink-4); font-family:var(--font-mono,monospace); }
.ib-saved-del { width:28px; height:28px; border:none; background:none; color:var(--ink-4); border-radius:var(--r-control); cursor:pointer; opacity:0; display:grid; place-items:center; flex-shrink:0; margin-right:var(--space-tight); }
.ib-saved-row:hover .ib-saved-del { opacity:1; }
.ib-saved-del:hover { background:color-mix(in srgb, var(--st-blocked) 14%, transparent); color:var(--st-blocked); }
.ib-saved-add { display:flex; align-items:center; gap:var(--space-inline); width:100%; border:none; background:none; cursor:pointer; padding:var(--space-inline) var(--space-inline); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--accent); border-top:1px solid var(--border-subtle); margin-top:var(--space-tight); }
.ib-saved-add:hover { background:var(--bg-hover); }
.ib-list-hd { display:flex; align-items:baseline; justify-content:space-between; padding:var(--space-inline) var(--space-group) var(--space-item); border-bottom:1px solid var(--border-subtle); }
.ib-sync-btn { display:inline-flex; align-items:center; gap:var(--space-tight); border:0; background:none; color:var(--ink-3); font:inherit; font-size:var(--t-micro-size); font-weight:600; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); cursor:pointer; position:relative; }
.ib-sync-btn:hover { background:var(--bg-hover); color:var(--accent); }
.ib-sync-btn:disabled { color:var(--disabled-fg); cursor:default; }
.ib-list-title { font-family:var(--font-sans,inherit); font-size:var(--t-heading-size); font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.ib-list-count { font-size:var(--t-caption-size); color:var(--ink-4); }
.ib-density { display:flex; gap:2px; align-self:center; margin-left:var(--space-item); background:var(--bg-sunken); border-radius:var(--r-control); padding:2px; }
.ib-density-b { display:grid; place-items:center; width:27px; height:23px; border:none; background:transparent; border-radius:6px; color:var(--ink-4); cursor:pointer; position:relative; transition:background .12s, color .12s; }
.ib-density-b:hover { color:var(--ink-2); background:var(--bg-hover); }
.ib-density-b.on { background:var(--bg-hover); color:var(--accent); box-shadow:none; }
.ib-read-back { display:none; width:34px; height:34px; border:none; background:transparent; color:var(--ink-3); border-radius:var(--r-control); cursor:pointer; place-items:center; margin-right:2px; position:relative; }
.ib-read-back:hover { background:var(--bg-hover); color:var(--accent); }
/* compact density — denser rows, no preview line */
.ib--compact .ib-item { padding:var(--space-inline) var(--space-group); gap:var(--space-inline); align-items:center; }
.ib--compact .ib-av { width:28px; height:28px; border-radius:var(--r-pill); font-size:var(--t-micro-size); }
.ib--compact .ib-av-check .ib-av-box { border-radius:var(--r-pill); }
.ib--compact .ib-item-subj { margin-top:0; }
.ib--compact .ib-item-snip { display:none; }
.ib--compact .ib-item-side { justify-content:center; }
.ib-triage { display:flex; gap:var(--space-tight); padding:0 var(--space-group) var(--space-inline); flex-wrap:wrap; }
.ib-tri { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-micro-size); font-weight:600; border:none; background:transparent; border-radius:999px; padding:var(--space-tight) var(--space-inline); cursor:pointer; color:var(--ink-3); transition:background .12s, color .12s; }
.ib-tri:hover { background:var(--bg-hover); }
.ib-tri-dot { width:6px; height:6px; border-radius:50%; }
.ib-tri.on { color:var(--accent); background:var(--bg-hover); }
.ib-list { flex:1; min-height:0; overflow-y:auto; padding:0 0 var(--space-group); }
.ib-day-group { display:block; }
.ib-day-label { margin:0; padding:var(--space-group) var(--space-group) var(--space-inline); color:var(--ink-4); font-size:var(--t-caption-size); font-weight:650; }
.ib-day-label + .ib-item { border-top:0; }
.ib-item { position:relative; display:flex; gap:var(--space-item); width:100%; text-align:left; padding:var(--space-item) var(--space-group); border:none; border-top:1px solid var(--border-subtle); background:none; border-radius:0; cursor:pointer; transition:background .12s; }
.ib-item:first-child { border-top:none; }
.ib-item:hover { background:var(--bg-hover); }
.ib-item.on, .ib-item.on:hover { background:var(--accent-soft); }
.ib-unread-dot { position:absolute; left:6px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--accent); }
.ib-av { position:relative; width:38px; height:38px; overflow:hidden; border-radius:var(--r-pill); flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:var(--t-label-size); font-weight:700; }
.ib-av-photo { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
/* checkbox avatar (bulk select) */
.ib-av-check { position:relative; cursor:pointer; }
.ib-av-check .ib-av-init { transition:opacity .12s; }
.ib-av-check .ib-av-box { position:absolute; inset:0; z-index:2; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; opacity:0; transition:opacity .12s; }
.ib-item:hover .ib-av-check .ib-av-box { opacity:.92; }
.ib-av-check.on .ib-av-box { opacity:1; }
.ib-av-check.on .ib-av-init { opacity:0; }
.ib-item.picked { background:var(--accent-soft); }
.ib-bulkbar { display:flex; align-items:center; gap:var(--space-tight); padding:var(--space-inline) var(--space-item) var(--space-inline); border-bottom:1px solid var(--border); }
.ib-bulk-x { width:32px; height:32px; border:none; background:transparent; border-radius:var(--r-control); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; position:relative; transition:background .12s, color .12s; }
.ib-bulk-x:hover { background:var(--bg-hover); color:var(--accent); }
.ib-bulk-n { font-size:var(--t-label-size); font-weight:650; color:var(--ink); margin-left:var(--space-tight); }
.ib-bulk-btn { width:34px; height:34px; border:none; background:transparent; color:var(--ink-3); border-radius:var(--r-control); cursor:pointer; display:grid; place-items:center; position:relative; transition:background .12s, color .12s; }
.ib-bulk-btn:hover { background:var(--bg-hover); color:var(--accent); }
.ib-bulk-btn.danger:hover { background:color-mix(in srgb, var(--st-blocked) 14%, transparent); color:var(--st-blocked); }
.ib-av.lg { width:46px; height:46px; border-radius:var(--r-pill); font-size:var(--t-strong-size); }
.ib-item-main { flex:1; min-width:0; }
.ib-item-top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-inline); }
.ib-item-from { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.ib-item.unread .ib-item-from { font-weight:750; }
.ib-item-time { font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; }
.ib-receipt { display:inline-flex; align-items:center; gap:var(--space-tight); margin-right:var(--space-tight); vertical-align:-2px; }
.ib-receipt-l { font-size:var(--t-micro-size); font-weight:600; }
.ib-tmsg-time { font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-tight); }
.ib-item-copyline { min-width:0; display:flex; align-items:baseline; gap:var(--space-tight); margin-top:2px; }
.ib-item-subj { min-width:0; flex:0 1 auto; font-size:var(--t-caption-size); color:var(--ink-2); font-weight:600; }
.ib-item.unread .ib-item-subj { color:var(--ink); }
.ib-item-copy-sep { flex:none; color:var(--ink-4); font-size:var(--t-caption-size); }
.ib-item-snip { min-width:0; flex:1 1 auto; font-size:var(--t-caption-size); color:var(--ink-4); }
/* client tag + preview share one line. Neutral by design: a client already has
   a colour on its record, and a coloured dot in front of a plain label is a
   banned pattern here, so the chip carries its meaning as text. */
.ib-item-snipline { display:flex; align-items:center; gap:var(--space-inline); min-width:0; }
.ib-item-snipline:empty { display:none; }
.ib-item-snipline .ib-item-snip { flex:1 1 auto; min-width:0; }
.ib-client-chip { flex:none; max-width:40%; font-size:var(--t-micro-size); font-weight:600; color:var(--ink-3); background:var(--bg-sunken); border-radius:var(--r-pill); padding:0 var(--space-inline); line-height:18px; }
.ib-item-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:var(--space-tight); flex-shrink:0; }
.ib-star { border:none; background:none; color:var(--ink-4); cursor:pointer; opacity:0; transition:opacity .12s, color .12s; padding:2px; }
.ib-item:hover .ib-star, .ib-star.on { opacity:1; }
.ib-star.on { color:var(--c-gold); }
.ib-item-tags { display:flex; align-items:center; gap:var(--space-tight); }
.ib-clip { color:var(--ink-4); }
.ib-item-label { width:7px; height:7px; border-radius:50%; }

/* ── reading pane ── */
.ib-read { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--surface); }
.ib-read-empty { flex:1; display:grid; place-items:center; color:var(--ink-4); }
.ib-read-empty svg { opacity:.35; margin-bottom:var(--space-item); }

/* Today digest (Aria morning summary) */
.ib-digest { max-width:560px; margin:32px auto; padding:0 var(--space-block); width:100%; box-sizing:border-box; animation:ibCn3In .3s ease; }
.ib-digest-hd { display:flex; align-items:center; gap:var(--space-item); margin-bottom:var(--space-group); }
.ib-digest-orb { width:38px; height:38px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--c-mauve))); flex-shrink:0; }
.ib-digest-greet { font-family:var(--font-serif,Georgia,serif); font-size:var(--t-title-size); font-weight:540; color:var(--ink); letter-spacing:-.01em; }
.ib-digest-date { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:1px; }
.ib-digest-x { width:30px; height:30px; border:none; background:transparent; border-radius:var(--r-control); color:var(--ink-4); cursor:pointer; display:grid; place-items:center; flex-shrink:0; position:relative; transition:background .12s, color .12s; }
.ib-digest-x:hover { background:var(--bg-hover); color:var(--accent); }
.ib-digest-aria { font-size:var(--t-body-size); line-height:1.6; color:var(--ink-2); padding:var(--space-item) var(--space-group); background:var(--accent-soft); border-radius:var(--r-card); margin-bottom:var(--space-group); }
.ib-digest-typing { display:inline-flex; gap:var(--space-tight); }
.ib-digest-typing span { width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.5; animation:ibType 1s infinite; }
.ib-digest-typing span:nth-child(2){ animation-delay:.15s; } .ib-digest-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ibType { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.ib-digest-stats { display:grid; grid-template-columns:repeat(4,minmax(0, 1fr)); gap:0; margin-bottom:var(--space-group); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.ib-digest-stat { border:none; border-radius:0; padding:var(--space-item) var(--space-group); text-align:left; }
.ib-digest-stat + .ib-digest-stat { border-left:1px solid var(--border-subtle); }
.ib-digest-statv { font-size:var(--t-title-size); font-weight:540; font-family:var(--font-serif,Georgia),serif; line-height:1; color:var(--ink); }
.ib-digest-statl { font-size:var(--t-micro-size); color:var(--ink-4); margin-top:var(--space-tight); }
.ib-digest-sec { margin-bottom:var(--space-group); }
.ib-digest-sec-h { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--space-inline); }
.ib-digest-row { display:flex; align-items:center; gap:var(--space-inline); width:100%; text-align:left; border:none; background:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); cursor:pointer; transition:background .12s; }
.ib-digest-row:hover { background:var(--bg-hover); }
.ib-digest-row-from { font-size:var(--t-label-size); font-weight:600; color:var(--ink); flex-shrink:0; max-width:120px; }
.ib-digest-row-subj { font-size:var(--t-caption-size); color:var(--ink-4); }
.ib-digest-compose { display:flex; align-items:center; justify-content:center; gap:var(--space-inline); width:100%; height:44px; border:none; border-radius:var(--r-card); background:transparent; font:inherit; font-size:var(--t-label-size); font-weight:600; color:var(--ink); cursor:pointer; margin-top:var(--space-tight); transition:background .14s, color .14s; }
.ib-digest-compose:hover { background:var(--bg-hover); color:var(--accent); }

/* dashboard 'Inbox today' widget — Editorial Calm */
.dw-inbox-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0 0 var(--space-tight); padding:2px 0 var(--space-item); border-bottom:1px solid var(--border-subtle); }
.dw-inbox-stat { text-align:center; padding:var(--space-tight) var(--space-inline); border:none; border-radius:0; background:none; box-shadow:none; min-width:0; }
.dw-inbox-stat + .dw-inbox-stat { border-left:1px solid var(--border-subtle); }
.dw-inbox-stat:first-child { padding-left:2px; }
.dw-inbox-statv { font-size:var(--t-title-size); font-weight:540; font-family:var(--font-serif,Georgia),serif; line-height:1; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dw-inbox-statl { font-size:var(--t-micro-size); color:var(--ink-3); margin-top:var(--space-tight); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dw-inbox-list { display:flex; flex-direction:column; margin-top:var(--space-tight); }
.dw-inbox-row { display:flex; align-items:center; gap:var(--space-inline); width:100%; padding:var(--space-inline) 2px; border:none; border-bottom:1px solid var(--border-subtle); border-radius:0; background:none; cursor:pointer; text-align:left; transition:background .12s; }
.dw-inbox-row:last-child { border-bottom:none; }
.dw-inbox-row:hover { background:var(--bg-hover); }
.dw-inbox-row-from { flex:1; min-width:0; font-size:var(--t-label-size); font-weight:580; color:var(--ink); }
.dw-inbox-row-subj { flex-shrink:0; max-width:46%; font-size:var(--t-micro-size); color:var(--ink-3); text-align:right; }
.dw-inbox-clear { display:flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-inline); padding:var(--space-inline) 2px; font-size:var(--t-caption-size); color:var(--ink-3); background:none; border-radius:0; }
.dw-inbox-clear .icn { color:var(--c-olive); }
.ib-read-top { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) 20px; border-bottom:1px solid var(--border-subtle); }
.ib-read-actions { display:flex; gap:var(--space-inline); }
.ib-rbtn { display:inline-flex; align-items:center; gap:var(--space-inline); font:inherit; font-size:var(--t-label-size); font-weight:600; color:var(--ink-2); background:transparent; border:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); cursor:pointer; transition:background .14s, color .14s; }
.ib-rbtn:hover { color:var(--accent); background:var(--bg-hover); }
.ib-icon { width:34px; height:34px; border-radius:var(--r-control); border:none; background:transparent; color:var(--ink-3); cursor:pointer; display:grid; place-items:center; position:relative; transition:background .14s, color .14s; }
.ib-icon:hover { background:var(--bg-hover); color:var(--accent); }
.ib-icon.danger:hover { background:color-mix(in srgb, var(--st-blocked) 14%, transparent); color:var(--st-blocked); }
.ib-icon[data-tip]::after,
.ib-bulk-x[data-tip]::after,
.ib-cm-x[data-tip]::after,
.ib-digest-x[data-tip]::after,
.ib-bulk-btn[data-tip]::after,
.ib-density-b[data-tip]::after,
.ib-read-back[data-tip]::after,
.ib-sync-btn[data-tip]::after,
.ib-send-cal[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .14s ease, transform .14s ease;
}
.ib-icon[data-tip]:hover::after,
.ib-icon[data-tip]:focus-visible::after,
.ib-bulk-x[data-tip]:hover::after,
.ib-cm-x[data-tip]:hover::after,
.ib-digest-x[data-tip]:hover::after,
.ib-bulk-btn[data-tip]:hover::after,
.ib-density-b[data-tip]:hover::after,
.ib-read-back[data-tip]:hover::after,
.ib-sync-btn[data-tip]:hover::after,
.ib-send-cal[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ib-read-scroll { flex:1; min-height:0; overflow-y:auto; padding:var(--space-block) 28px var(--space-section); }
.ib-read-subj { font-family:var(--font-serif,Georgia,serif); font-size:var(--t-title-size); font-weight:540; color:var(--ink); letter-spacing:-.015em; line-height:1.2; }
.ib-read-labels { display:flex; flex-wrap:wrap; gap:var(--space-inline); margin-top:var(--space-item); }
.ib-read-label { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:650; padding:var(--space-tight) var(--space-inline); border-radius:999px; }

/* thread stack */
.ib-thread-subjrow { display:flex; align-items:center; gap:var(--space-item); flex-wrap:wrap; }
.ib-thread-count { font-size:var(--t-caption-size); font-weight:600; color:var(--ink-4); background:var(--bg-sunken); border-radius:999px; padding:var(--space-tight) var(--space-inline); }
.ib-thread-n { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 var(--space-tight); margin-left:var(--space-tight); border-radius:999px; background:var(--bg-active); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:700; vertical-align:1px; }
.ib-thread { display:flex; flex-direction:column; gap:0; margin:var(--space-group) 0 var(--space-inline); }
.ib-context { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-section); margin-top:var(--space-group); padding:var(--space-group) 0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.ib-context-col { min-width:0; display:flex; flex-direction:column; gap:var(--space-inline); }
.ib-context-kicker { display:flex; align-items:center; gap:var(--space-tight); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ib-context-links { display:flex; flex-wrap:wrap; gap:var(--space-tight); }
.ib-context-link { min-width:0; max-width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-tight); border:1px solid var(--border-subtle); border-radius:999px; background:transparent; color:var(--ink); padding:var(--space-tight) var(--space-inline); cursor:pointer; text-align:left; }
.ib-context-link:hover { background:var(--bg-hover); }
.ib-context-link span,.ib-context-link small { color:var(--ink-4); font-size:var(--t-micro-size); text-transform:capitalize; }
.ib-context-link b { font-size:var(--t-caption-size); font-weight:650; }
.ib-context-empty,.ib-context-note { color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.45; }
.ib-context-understood { display:flex; flex-direction:column; gap:var(--space-tight); color:var(--ink-2); font-size:var(--t-caption-size); }
.ib-context-understood b { color:var(--ink-4); font-size:var(--t-micro-size); text-transform:uppercase; letter-spacing:.04em; margin-right:var(--space-tight); }
.ib-context-understood small { color:var(--ink-4); }
.ib-context-actions { display:flex; flex-wrap:wrap; gap:var(--space-tight); }
@media (max-width:1180px){ .ib-context { grid-template-columns:minmax(0,1fr); } }
.ib-tmsg { border:none; border-radius:0; background:none; overflow:visible; }
.ib-tmsg + .ib-tmsg { border-top:1px solid var(--border-subtle); }
.ib-tmsg.open { box-shadow:none; }
.ib-tmsg.mine { background:none; }
.ib-tmsg-hd { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-group) 0 var(--space-item); cursor:pointer; border-radius:var(--r-control); }
.ib-tmsg:not(.open) .ib-tmsg-hd { padding:var(--space-item) var(--space-inline); margin:0 -8px; }
.ib-tmsg:not(.open) .ib-tmsg-hd:hover { background:var(--bg-hover); }
.ib-tmsg-top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-inline); }
.ib-tmsg-from { font-size:var(--t-label-size); font-weight:650; color:var(--ink); display:flex; align-items:center; gap:var(--space-inline); }
.ib-tmsg-youtag { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px var(--space-tight); }
.ib-tmsg-time { font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; }
.ib-tmsg-to { font-size:var(--t-micro-size); color:var(--ink-4); margin-top:2px; }
.ib-tmsg-snip { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:2px; }
.ib-tmsg-chev { color:var(--ink-4); transition:transform .16s; flex-shrink:0; }
.ib-tmsg-chev.up { transform:rotate(180deg); }
.ib-tmsg-body { padding:0 0 20px 48px; border-top:none; }
.ib-tmsg.compact .ib-tmsg-hd { gap:var(--space-inline); padding:var(--space-item) 0 var(--space-inline); }
.ib-tmsg.compact:not(.open) .ib-tmsg-hd { padding:var(--space-inline) var(--space-inline); }
.ib-tmsg.compact .ib-tmsg-body { padding:0 0 var(--space-item) 36px; }
.ib-tmsg-body .ib-msg-html { padding-top:var(--space-tight); }
.ib-tmsg-body .ib-att-grid { margin:var(--space-group) 0 var(--space-tight); }
.ib-msg { display:flex; gap:var(--space-item); align-items:center; margin:20px 0 var(--space-group); }
.ib-msg-from { font-size:var(--t-body-size); color:var(--ink); } .ib-msg-from b { font-weight:650; }
.ib-msg-email { color:var(--ink-4); font-size:var(--t-caption-size); }
.ib-msg-to { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:2px; }
.ib-msg-html { display:block; min-width:0; max-width:100%; overflow:hidden; font-size:var(--t-body-size); line-height:1.65; color:var(--ink-2); }
.ib-msg-html p { margin:0 0 var(--space-item); } .ib-msg-html b { color:var(--ink); font-weight:650; }
.ib-msg-html a { color:var(--accent); } .ib-msg-html h2 { font-size:var(--t-heading-size); color:var(--ink); margin:var(--space-group) 0 var(--space-inline); }
.ib-msg-html blockquote { border-left:3px solid var(--border-strong); margin:var(--space-item) 0; padding:2px 0 2px var(--space-item); color:var(--ink-3); }
.ib-msg-html ul,.ib-msg-html ol { margin:0 0 var(--space-item); padding-left:20px; }

/* attachment cards */
.ib-att-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-item); margin:20px 0; }
/* attachment rows — borderless, thumbnail is the anchor */
.ib-att-card { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) var(--space-inline); border:none; border-radius:var(--r-control); background:transparent; transition:background .14s; }
.ib-att-card:hover { background:var(--bg-hover); }
.ib-att-ic { width:42px; height:42px; border-radius:var(--r-control); display:grid; place-items:center; font-size:var(--t-micro-size); font-weight:800; flex-shrink:0; }
.ib-att-ic.doc { background:color-mix(in srgb, var(--c-clay) 16%, transparent); color:var(--c-clay); }
.ib-att-ic.img { background:color-mix(in srgb, var(--c-blue) 16%, transparent); color:var(--c-blue); }
.ib-att-meta { flex:1; min-width:0; } .ib-att-name { font-size:var(--t-label-size); font-weight:600; color:var(--ink); } .ib-att-sub { font-size:var(--t-micro-size); color:var(--ink-4); margin-top:1px; }
.ib-att-acts { display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.ib-att-acts button { font:inherit; font-size:var(--t-micro-size); font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; text-align:right; padding:1px 2px; }
.ib-att-acts button:hover { text-decoration:underline; }

/* ── inline reply ── */
.ib-reply-collapsed { display:flex; gap:var(--space-inline); margin-top:var(--space-block); }
.ib-reply-open { display:inline-flex; align-items:center; gap:var(--space-inline); font:inherit; font-size:var(--t-label-size); font-weight:600; color:var(--ink-2); background:transparent; border:none; border-radius:var(--r-control); padding:var(--space-item) var(--space-item); cursor:pointer; transition:background .14s, color .14s; }
.ib-reply-open:hover { color:var(--accent); background:var(--bg-hover); }
.ib-reply-open.aria { color:var(--accent); background:transparent; }
.ib-reply-open.aria:hover { background:var(--accent-soft); }
.ib-aria-draft { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--accent); background:transparent; border:none; border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); cursor:pointer; transition:background .13s; }
.ib-aria-draft:hover { background:var(--accent-soft); }
.ib-aria-draft:disabled { color:var(--disabled-fg); cursor:default; }
.ib-reply { margin-top:var(--space-block); border:1px solid var(--border); border-radius:var(--r-modal); background:var(--surface); box-shadow:var(--elev-1); overflow:hidden; }
.ib-reply-hd { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) var(--space-group) var(--space-inline); color:var(--ink); font-size:var(--t-label-size); font-weight:650; }
.ib-reply-fields { padding:0 var(--space-group); }
.ib-reply-body { min-height:0; padding:var(--space-tight) var(--space-group) var(--space-item); }
.ib-cm-ccbtn { font:inherit; font-size:var(--t-micro-size); font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; }
.ib-reply .re-wrap { padding:0; } .ib-reply-foot, .ib-cm-foot { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-group); border-top:1px solid var(--border-subtle); background:transparent; }

/* ── compose modal ── */
/* modal layer — never underlap top bar / sidebar / other chrome (z≈1000) */
.ib-cm-scrim { position:fixed; inset:0; z-index:1000; background:var(--modal-scrim-bg); backdrop-filter:var(--modal-scrim-blur); -webkit-backdrop-filter:var(--modal-scrim-blur); display:flex; align-items:center; justify-content:center; padding:var(--space-block); animation:dqFade .16s ease; }
.ib-cm { position:relative; width:600px; max-width:calc(100vw - (var(--space-block) * 2)); max-height:calc(100vh - (var(--space-block) * 2)); display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border-radius:var(--r-modal); box-shadow:var(--elev-3); animation:ibUp .22s ease; transition:width .2s ease, height .2s ease; }
.ib-cm.expanded { width:calc(100vw - (var(--space-page) * 2)); height:calc(100vh - (var(--space-page) * 2)); max-width:none; max-height:none; }
@keyframes ibUp { from { transform:translateY(var(--space-group)); opacity:0; } to { transform:none; opacity:1; } }
.ib-cm-hd { display:flex; align-items:center; justify-content:space-between; gap:var(--space-group); padding:var(--space-group) var(--space-group) var(--space-inline); font-size:var(--t-strong-size); line-height:var(--t-strong-lh); font-weight:650; color:var(--ink); }
.ib-cm-title { display:flex; align-items:center; gap:var(--space-inline); min-width:0; }
.ib-cm-title > svg { color:var(--ink-3); flex-shrink:0; }
.ib-cm-window-actions { display:flex; align-items:center; gap:var(--space-tight); flex-shrink:0; }
.ib-cm-x { width:var(--control-h-sm); height:var(--control-h-sm); border:none; background:transparent; border-radius:var(--r-control); color:var(--ink-3); cursor:pointer; display:grid; place-items:center; position:relative; transition:background .12s ease, color .12s ease; }
.ib-cm-x:hover { background:var(--bg-hover); color:var(--accent); }
.ib-cm-fields { padding:0 var(--space-group); }
.ib-cm-row { display:flex; align-items:center; gap:var(--space-inline); min-height:var(--control-h); }
.ib-cm-row > .ib-cm-label { width:var(--control-h-sm); flex-shrink:0; font-size:var(--t-caption-size); color:var(--ink-3); }
.ib-cm-row input { min-width:0; flex:1; border:none; background:none; font:inherit; font-size:var(--t-label-size); color:var(--ink); outline:none; }
.ib-cm-recipient-row { align-items:flex-start; padding:var(--space-tight) 0; }
.ib-cm-recipient-row > .ib-cm-label { padding-top:var(--space-inline); }
.ib-cm-recipient-field { min-width:0; flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-tight); }
.ib-cm-recipient-field input { min-width:var(--control-h-lg); min-height:var(--control-h-sm); }
.ib-cm-copy-actions { margin-left:auto; display:flex; align-items:center; gap:var(--space-tight); flex-shrink:0; }
.ib-cm .ib-cm-ccbtn { min-width:var(--control-h-sm); min-height:var(--control-h-sm); display:grid; place-items:center; padding:0 var(--space-tight); border-radius:var(--r-control); color:var(--ink-3); background:var(--surface-2); }
.ib-cm .ib-cm-ccbtn:hover { background:var(--state-hover); color:var(--ink); }
.ib-cm-chip { min-width:0; max-width:100%; min-height:var(--control-h-sm); display:inline-flex; align-items:center; gap:var(--space-tight); padding:var(--space-tight); border-radius:var(--r-pill); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border-subtle); color:var(--ink-2); font-size:var(--t-caption-size); }
.ib-cm-chip-avatar { position:relative; width:var(--icon-lg); height:var(--icon-lg); overflow:hidden; display:grid; place-items:center; flex-shrink:0; border-radius:var(--r-pill); background:var(--bg-sunken); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; }
.ib-cm-chip-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ib-cm-chip-text { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.ib-cm-chip-text b,.ib-cm-chip-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib-cm-chip-text b { color:var(--ink); font-size:var(--t-micro-size); font-weight:650; }
.ib-cm-chip-text small { color:var(--ink-4); font-size:var(--t-micro-size); }
.ib-cm-chip-remove { width:var(--icon-lg); height:var(--icon-lg); display:grid; place-items:center; flex-shrink:0; border:none; border-radius:var(--r-pill); background:transparent; color:var(--ink-3); cursor:pointer; }
.ib-cm-chip-remove:hover { background:var(--state-hover); color:var(--ink); }
.ib-cm-addresses { border-bottom:1px solid var(--border-subtle); }
.ib-cm-subject-row { min-height:var(--control-h-lg); }
.ib-cm-subject-row input { font-size:var(--t-strong-size); line-height:var(--t-strong-lh); font-weight:650; }
.ib-cm-body { flex:1; min-height:0; overflow-y:auto; padding:var(--space-tight) var(--space-group) var(--space-group); }
.ib-cm-body .re-editable { color:var(--ink-2); }
.ib-cm-atts { display:flex; flex-wrap:wrap; gap:var(--space-inline); padding:0 var(--space-group) var(--space-item); }
.ib-cm-attchip { min-width:0; flex:0 1 calc((100% - (var(--space-inline) * 2)) / 3); display:grid; grid-template-columns:var(--control-h) minmax(0, 1fr) var(--icon-lg); align-items:center; gap:var(--space-inline); padding:var(--space-inline); color:var(--ink-2); background:var(--surface-2); border-radius:var(--r-control); box-shadow:inset 0 0 0 1px var(--border-subtle); }
.ib-cm-atticon { width:var(--control-h); height:var(--control-h); display:grid; place-items:center; border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:800; }
.ib-cm-atticon.image { background-size:cover; background-position:center; color:transparent; }
.ib-cm-atticon.pdf { color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 12%, var(--surface)); }
.ib-cm-atticon.slides { color:var(--c-gold); background:color-mix(in srgb, var(--c-gold) 14%, var(--surface)); }
.ib-cm-atticon.sheet { color:var(--c-olive); background:color-mix(in srgb, var(--c-olive) 14%, var(--surface)); }
.ib-cm-attmeta { min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.ib-cm-attname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-caption-size); line-height:var(--t-caption-lh); font-weight:650; color:var(--ink); }
.ib-cm-attchip > button { width:var(--icon-lg); height:var(--icon-lg); border:none; border-radius:var(--r-control); background:transparent; color:var(--ink-3); cursor:pointer; display:grid; place-items:center; }
.ib-cm-attchip > button:hover { background:var(--state-hover); color:var(--ink); }
.ib-cm-foot { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:var(--space-inline); padding:var(--space-item) var(--space-group) var(--space-group); border-top:1px solid var(--border-subtle); background:var(--surface); }
.ib-cm-foot-left { min-width:0; display:flex; align-items:center; gap:var(--space-inline); }
.ib-cm-draft-state { flex-shrink:0; color:var(--ink-3); font-size:var(--t-micro-size); }
.ib-cm-foot .re-toolbar { min-width:0; overflow-x:auto; scrollbar-width:none; }
.ib-cm-foot .re-toolbar::-webkit-scrollbar { display:none; }

/* send split */
.ib-send-split { display:flex; align-items:stretch; position:relative; }
.ib-send-btn { min-height:var(--control-h); display:inline-flex; align-items:center; gap:var(--space-inline); font:inherit; font-size:var(--t-label-size); font-weight:650; color:var(--accent-fg); background:var(--accent); border:none; border-radius:var(--r-control) 0 0 var(--r-control); padding:0 var(--space-group); cursor:pointer; }
.ib-send-btn:hover { filter:brightness(1.05); }
.ib-send-cal { width:var(--control-h); min-height:var(--control-h); border:none; border-left:1px solid color-mix(in srgb, var(--surface) 20%, transparent); background:var(--accent); color:var(--accent-fg); border-radius:0 var(--r-control) var(--r-control) 0; cursor:pointer; display:grid; place-items:center; position:relative; }
.ib-send-cal:hover { filter:brightness(1.05); }
.ib-sched-pop { position:absolute; right:0; bottom:calc(100% + 6px); z-index:5; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:var(--space-tight); }
.ib-sched-pop.up { bottom:calc(100% + 6px); }
.ib-sched-hd { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding:var(--space-tight) var(--space-inline) var(--space-tight); }
.ib-sched-pop button { display:block; width:100%; text-align:left; font:inherit; font-size:var(--t-caption-size); color:var(--ink); background:none; border:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); cursor:pointer; }
.ib-sched-pop button:hover { background:var(--bg-hover); }

@media (max-width:640px){
  .ib-cm-scrim { align-items:flex-end; padding:0; }
  .ib-cm, .ib-cm.expanded { width:100%; height:auto; max-width:100%; max-height:calc(100vh - var(--space-block)); border-radius:var(--r-modal) var(--r-modal) 0 0; }
  .ib-cm-window-expand { display:none; }
  .ib-cm-row > .ib-cm-label { width:var(--space-block); }
  .ib-cm .ib-cm-ccbtn { min-width:var(--control-h-lg); min-height:var(--control-h-lg); }
  .ib-cm-chip-remove { width:var(--control-h-lg); height:var(--control-h-lg); margin:calc((var(--control-h-lg) - var(--icon-lg)) / -2); }
  .ib-cm-attchip { flex-basis:100%; }
  .ib-cm-foot { padding-bottom:var(--space-block); }
  .ib-cm-draft-state { display:none; }
  .rl-mgr { width:100%; }
  .rl-folder-copy,.rl-folder-form { align-items:stretch; flex-direction:column; }
  .rl-folder-form .invsel,
  .rl-folder-form > .invsel-btn { flex-basis:auto; width:100%; }
  .rl-sender-picker { min-width:100%; }
}

/* ── connect screen (flat & clean) ── */
.ib-connect3 { height:100%; display:grid; place-items:center; padding:var(--space-block); background:var(--bg); }
.ib-cn3-preview { margin-top:var(--space-item); border:0; background:none; color:var(--ink-2); font:inherit; font-size:var(--t-caption-size); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ib-cn3-preview:hover { color:var(--ink); }
.ib-connect3-inner { width:380px; max-width:100%; animation:ibCn3In .3s ease; }
@keyframes ibCn3In { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ib-cn3-mark { width:46px; height:46px; border-radius:var(--r-card); display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); margin-bottom:20px; }
.ib-cn3-title { margin:0; font-size:var(--t-title-size); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.ib-cn3-lead { font-size:var(--t-body-size); color:var(--ink-3); line-height:1.55; margin:var(--space-inline) 0 var(--space-block); }
.ib-cn3-btns { display:flex; flex-direction:column; gap:var(--space-inline); }
.ib-cn3-prov { display:flex; align-items:center; gap:var(--space-item); height:50px; padding:0 var(--space-group); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); cursor:pointer; font:inherit; font-size:var(--t-body-size); font-weight:600; color:var(--ink); transition:background .14s, border-color .14s; }
.ib-cn3-prov:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.ib-cn3-prov svg { flex-shrink:0; }
.ib-cn3-feats { list-style:none; margin:var(--space-block) 0 0; padding:20px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:var(--space-item); }
.ib-cn3-feats li { display:flex; align-items:center; gap:var(--space-item); font-size:var(--t-label-size); color:var(--ink-3); }
.ib-cn3-feats li svg { color:var(--accent); flex-shrink:0; }
.ib-cn3-feats b { color:var(--ink); font-weight:600; }
.ib-cn3-feats li.off { opacity:.4; }
.ib-cn3-feats li.off b { text-decoration:line-through; }
.ib-cn3-ai { display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); width:100%; margin:var(--space-group) 0 0; padding:var(--space-item) var(--space-item); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); cursor:pointer; }
.ib-cn3-ai-main { display:flex; align-items:flex-start; gap:var(--space-inline); text-align:left; }
.ib-cn3-ai-main > svg { color:var(--accent); margin-top:1px; flex-shrink:0; }
.ib-cn3-ai-main b { font-size:var(--t-label-size); display:block; }
.ib-cn3-ai-s { display:block; font-size:var(--t-micro-size); color:var(--ink-3); margin-top:1px; }
.ib-cn3-note { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-micro-size); color:var(--ink-4); margin-top:20px; }

/* connecting (flat) */
.ib-cn3-logo { width:60px; height:60px; border-radius:var(--r-card); border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; margin-bottom:20px; }
.ib-cn3-h { font-size:var(--t-title-size); font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.ib-cn3-sub { font-size:var(--t-label-size); color:var(--ink-4); margin-top:var(--space-tight); }
.ib-cn3-stages { display:flex; flex-direction:column; gap:2px; margin-top:var(--space-block); }
.ib-cn3-stage { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) 0; font-size:var(--t-label-size); color:var(--ink-4); transition:color .2s; }
.ib-cn3-stage.active { color:var(--ink); font-weight:600; }
.ib-cn3-stage.done { color:var(--ink-2); }
.ib-cn3-stage-ic { width:20px; height:20px; display:grid; place-items:center; flex-shrink:0; }
.ib-cn3-stage.done .ib-cn3-stage-ic { color:var(--c-olive); }
.ib-cn3-dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.ib-cn3-spin { width:14px; height:14px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:dqSpin .7s linear infinite; }

/* command palette (⌘K) */
.ib-pal-scrim { position:fixed; inset:0; z-index:1010; background:var(--modal-scrim-bg); backdrop-filter:var(--modal-scrim-blur); -webkit-backdrop-filter:var(--modal-scrim-blur); display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; animation:dqFade .14s ease; }
.ib-pal { width:560px; max-width:92vw; background:var(--surface); border:1px solid var(--modal-rim); border-radius:var(--modal-radius); box-shadow:var(--modal-shadow); overflow:hidden; animation:ibPalIn .18s cubic-bezier(.2,.9,.3,1.1); }
@keyframes ibPalIn { from{ opacity:0; transform:translateY(-10px) scale(.985); } to{ opacity:1; transform:none; } }
.ib-pal-search { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-group) var(--space-group); border-bottom:1px solid var(--border-subtle); color:var(--ink-4); }
.ib-pal-search input { flex:1; border:none; background:none; font:inherit; font-size:var(--t-strong-size); color:var(--ink); outline:none; }
.ib-pal-kbd, .ib-pal-foot kbd { font:inherit; font-size:var(--t-micro-size); font-weight:600; color:var(--ink-4); background:var(--bg-sunken); border:1px solid var(--border); border-radius:5px; padding:1px var(--space-tight); }
.ib-pal-list { max-height:50vh; overflow-y:auto; padding:var(--space-inline); }
.ib-pal-item { display:flex; align-items:center; gap:var(--space-item); width:100%; text-align:left; border:none; background:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); cursor:pointer; }
.ib-pal-item.on { background:var(--accent-soft); }
.ib-pal-ic { width:auto; height:auto; border-radius:0; background:transparent; color:var(--ink-3); display:grid; place-items:center; flex-shrink:0; }
.ib-pal-item.on .ib-pal-ic { background:transparent; color:var(--accent); }
.ib-pal-label { font-size:var(--t-label-size); font-weight:550; color:var(--ink); }
.ib-pal-hint { font-size:var(--t-micro-size); font-weight:600; color:var(--ink-4); background:var(--bg-sunken); border-radius:999px; padding:2px var(--space-inline); flex-shrink:0; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib-pal-empty { text-align:center; color:var(--ink-4); font-size:var(--t-label-size); padding:28px; }
.ib-pal-foot { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) var(--space-group); border-top:1px solid var(--border-subtle); font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-pal-foot span { display:inline-flex; align-items:center; gap:var(--space-tight); }
.ib-pal-foot-brand { color:var(--accent); font-weight:600; }

/* keyboard shortcuts help */
.ib-sc-help { width:440px; max-width:92vw; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:0 30px 80px -20px color-mix(in srgb, var(--ink) 55%, transparent); overflow:hidden; animation:ibPalIn .18s cubic-bezier(.2,.9,.3,1.1); }
.ib-sc-hd { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-group) var(--space-group); border-bottom:1px solid var(--border-subtle); font-size:var(--t-body-size); font-weight:700; color:var(--ink); }
.ib-sc-hd svg { color:var(--accent); }
.ib-sc-grid { padding:var(--space-inline) var(--space-group) var(--space-group); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-tight) var(--space-block); }
.ib-sc-row { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 0; }
.ib-sc-keys { display:inline-flex; align-items:center; gap:var(--space-tight); min-width:74px; }
.ib-sc-keys kbd { font:inherit; font-size:var(--t-micro-size); font-weight:700; color:var(--ink-2); background:var(--bg-sunken); border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:2px var(--space-inline); }
.ib-sc-or { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-sc-lbl { font-size:var(--t-caption-size); color:var(--ink-2); }
.ib-connect { height:100%; display:grid; place-items:center; padding:var(--space-block); background:var(--bg); }
.ib-connect-card { max-width:420px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-modal); padding:36px var(--space-section); box-shadow:var(--shadow-md); }
.ib-connect-ic { width:60px; height:60px; border-radius:var(--r-card); margin:0 auto var(--space-group); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.ib-connect-t { font-size:var(--t-title-size); font-weight:700; color:var(--ink); }
.ib-connect-s { font-size:var(--t-label-size); color:var(--ink-3); line-height:1.55; margin:var(--space-inline) 0 20px; }
.ib-connect-btns { display:flex; flex-direction:column; gap:var(--space-inline); }
.ib-prov { display:flex; align-items:center; justify-content:center; gap:var(--space-inline); height:46px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); font:inherit; font-size:var(--t-body-size); font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .14s, background .14s; }
.ib-prov:hover { border-color:var(--border-strong); background:var(--bg-hover); }
.ib-prov-dot { width:11px; height:11px; border-radius:50%; }
.ib-connect-note { display:flex; align-items:center; justify-content:center; gap:var(--space-tight); font-size:var(--t-micro-size); color:var(--ink-4); margin-top:var(--space-group); }

/* ============================================================
   RichEditor  (.re-*)
   ============================================================ */
.re-wrap { position:relative; }
.re-editable { font:inherit; font-size:var(--t-body-size); line-height:1.65; color:var(--ink); outline:none; }
.re-editable p { margin:0 0 var(--space-item); } .re-editable b,.re-editable strong { font-weight:650; }
.re-editable h2 { font-size:var(--t-heading-size); font-weight:700; margin:var(--space-item) 0 var(--space-inline); } .re-editable h3 { font-size:var(--t-strong-size); font-weight:650; margin:var(--space-item) 0 var(--space-tight); }
.re-editable blockquote { border-left:3px solid var(--border-strong); margin:var(--space-item) 0; padding:2px 0 2px var(--space-item); color:var(--ink-3); }
.re-editable ul,.re-editable ol { margin:0 0 var(--space-item); padding-left:20px; } .re-editable a { color:var(--accent); }
.re-placeholder { position:absolute; top:0; left:0; font-size:var(--t-body-size); color:var(--ink-4); pointer-events:none; }
.re-bubble { position:absolute; z-index:30; display:flex; align-items:center; gap:2px; background:var(--ink); color:var(--bg); border-radius:var(--r-control); padding:var(--space-tight); box-shadow:0 8px 24px -8px rgba(0,0,0,.4); }
.re-bubble-btn { width:30px; height:30px; border:none; background:none; color:var(--bg); cursor:pointer; border-radius:var(--r-control); font-size:var(--t-body-size); display:grid; place-items:center; position:relative; }
.re-bubble-btn:hover { background:color-mix(in srgb, var(--bg) 18%, transparent); }
.re-bubble-sep { width:1px; height:18px; background:color-mix(in srgb, var(--bg) 22%, transparent); margin:0 2px; }
.re-bubble-fmt { position:relative; }
.re-bubble-fmt-btn { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--bg); background:none; border:none; cursor:pointer; padding:0 var(--space-inline); height:30px; border-radius:var(--r-control); }
.re-bubble-fmt-btn:hover { background:color-mix(in srgb, var(--bg) 18%, transparent); }
.re-fmt-menu { position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-control); box-shadow:var(--shadow-lg); padding:var(--space-tight); min-width:130px; }
.re-fmt-menu button { display:block; width:100%; text-align:left; font:inherit; font-size:var(--t-caption-size); color:var(--ink); background:none; border:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); cursor:pointer; }
.re-fmt-menu button:hover { background:var(--bg-hover); }
.re-toolbar { display:flex; align-items:center; gap:2px; }
.re-tb-btn { width:30px; height:30px; border:none; background:transparent; color:var(--ink-3); cursor:pointer; border-radius:var(--r-control); font-size:var(--t-body-size); display:grid; place-items:center; position:relative; transition:background .12s, color .12s; }
.re-tb-btn:hover { background:var(--bg-hover); color:var(--accent); }
.re-tb-btn[data-tip]::after,
.re-bubble-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .14s ease, transform .14s ease;
}
.re-tb-btn[data-tip]:hover::after,
.re-bubble-btn[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.re-tb-sep { width:1px; height:16px; background:var(--border); margin:0 var(--space-tight); }

/* "/" snippet menu */
.re-slash { position:absolute; z-index:40; width:280px; max-height:280px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:0 14px 40px -10px color-mix(in srgb, var(--ink) 45%, transparent); padding:var(--space-tight); }
.re-slash-hd { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding:var(--space-tight) var(--space-inline) var(--space-tight); }
.re-slash-item { display:flex; align-items:center; gap:var(--space-inline); width:100%; text-align:left; border:none; background:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); cursor:pointer; }
.re-slash-item.on, .re-slash-item:hover { background:var(--bg-hover); }
.re-slash-ic { width:auto; height:auto; border-radius:0; display:grid; place-items:center; background:transparent; color:var(--accent); flex-shrink:0; }
.re-slash-t { display:block; font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.re-slash-p { display:block; font-size:var(--t-micro-size); color:var(--ink-4); }
.re-slash-tag { font-size:var(--t-micro-size); font-weight:600; color:var(--ink-4); background:var(--bg-sunken); border-radius:999px; padding:2px var(--space-inline); flex-shrink:0; }

/* snippet library (reuses .dq-modal) */
.sn-lib { width:560px; }
.sn-lib-body { padding:var(--space-tight) 20px var(--space-inline); max-height:52vh; overflow-y:auto; }
.sn-lib-group { margin-bottom:var(--space-item); }
.sn-lib-tag { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); margin:var(--space-tight) 0 var(--space-inline); }
.sn-lib-row { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); cursor:pointer; transition:background .12s; }
.sn-lib-row:hover { background:var(--bg-hover); }
.sn-lib-ic { width:auto; height:auto; border-radius:0; display:grid; place-items:center; background:transparent; color:var(--accent); flex-shrink:0; }
.sn-lib-t { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.sn-lib-p { font-size:var(--t-micro-size); color:var(--ink-4); margin-top:1px; }
.sn-lib-del { width:30px; height:30px; border:none; background:none; color:var(--ink-4); border-radius:var(--r-control); cursor:pointer; opacity:0; display:grid; place-items:center; flex-shrink:0; }
.sn-lib-row:hover .sn-lib-del { opacity:1; }
.sn-lib-del:hover { background:color-mix(in srgb, var(--st-blocked) 14%, transparent); color:var(--st-blocked); }
.sn-edit { padding:var(--space-tight) 20px var(--space-inline); }
.sn-edit textarea { width:100%; border:1px solid var(--border); border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); font:inherit; font-size:var(--t-label-size); line-height:1.6; color:var(--ink); background:var(--surface); outline:none; box-sizing:border-box; resize:vertical; }
.sn-edit textarea:focus { border-color:var(--accent); }
.sn-tagpick, .sn-tagpick { display:flex; flex-wrap:wrap; gap:var(--space-tight); }
.sn-tagchip { font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--ink-3); background:transparent; border:none; border-radius:999px; padding:var(--space-tight) var(--space-item); cursor:pointer; transition:background .12s, color .12s; }
.sn-tagchip:hover { background:var(--bg-hover); color:var(--ink); }
.sn-tagchip.on { color:var(--accent); background:var(--bg-hover); }

/* attachment thumbnails + drag overlay */
.ib-att-card.img-card { padding:var(--space-inline); }
.ib-att-thumb { width:46px; height:46px; border-radius:var(--r-control); background-size:cover; background-position:center; flex-shrink:0; border:none; }
.ib-att-acts a { font:inherit; font-size:var(--t-micro-size); font-weight:600; color:var(--accent); text-decoration:none; text-align:right; }
.ib-att-acts a:hover { text-decoration:underline; }
.ib-cm-attthumb { width:18px; height:18px; border-radius:4px; background-size:cover; background-position:center; flex-shrink:0; }
.ib-cm-attsize { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-cm.dragging, .ib-reply.dragging { outline:2px dashed var(--accent); outline-offset:-6px; }
.ib-cm-drop { position:absolute; inset:0; z-index:6; background:color-mix(in srgb, var(--accent) 10%, var(--surface)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--accent); font-size:var(--t-body-size); font-weight:650; border-radius:inherit; pointer-events:none; }
.ib-reply { position:relative; }

/* project label popover + read-label remove */
.ib-pop-scrim { position:fixed; inset:0; z-index:9; }
.ib-label-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:10; width:240px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:var(--space-inline); }
.ib-label-pop-hd { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); padding:var(--space-tight) var(--space-inline) var(--space-tight); }
.ib-label-pop-list { max-height:260px; overflow-y:auto; }
.ib-label-pop-row { display:flex; align-items:center; gap:var(--space-inline); width:100%; text-align:left; border:none; background:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-inline); cursor:pointer; font:inherit; font-size:var(--t-label-size); color:var(--ink); }
.ib-label-pop-row:hover { background:var(--bg-hover); }
.ib-label-pop-row.on { color:var(--accent); font-weight:600; }
.ib-label-pop-row.on svg { color:var(--accent); margin-left:auto; }
.ib-label-pop-empty { font-size:var(--t-caption-size); color:var(--ink-4); padding:var(--space-inline); text-align:center; }
.ib-read-label-x { border:none; background:none; color:currentColor; cursor:pointer; opacity:.6; display:inline-grid; place-items:center; margin-left:2px; padding:0; }
.ib-read-label-x:hover { opacity:1; }
.ib-read-label { padding-right:var(--space-tight); }
.ib-lightbox { position:fixed; inset:0; z-index:1020; background:rgba(20,18,16,.82); backdrop-filter:blur(6px); display:grid; place-items:center; padding:var(--space-page); cursor:zoom-out; animation:dqFade .16s ease; }
.ib-lightbox img { max-width:92vw; max-height:90vh; border-radius:var(--r-card); box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* emails panel (client/project drawer conversation view) */
.em-emails { display:flex; flex-direction:column; gap:var(--space-tight); }
.em-emails-hd { display:flex; align-items:center; justify-content:space-between; font-size:var(--t-caption-size); color:var(--ink-4); font-weight:600; padding:2px 2px var(--space-inline); }
.em-emails-compose { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--accent); background:var(--accent-soft); border:none; border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); cursor:pointer; }
.em-emails-compose:hover { filter:brightness(.97); }
.em-email-row { display:flex; align-items:flex-start; gap:var(--space-item); width:100%; text-align:left; border:none; background:none; border-radius:var(--r-control); padding:var(--space-inline); cursor:pointer; transition:background .12s; }
.em-email-row:hover { background:var(--bg-hover); }
.em-email-top { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-inline); }
.em-email-from { font-size:var(--t-label-size); font-weight:600; color:var(--ink); display:flex; align-items:center; gap:var(--space-tight); }
.em-email-time { font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-tight); }
.em-email-subj { font-size:var(--t-caption-size); color:var(--ink-2); font-weight:550; margin-top:1px; }
.em-email-snip { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:1px; }
.pd-emails-sec { margin-top:var(--space-inline); }
.pd-emails-hd { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); font-weight:650; color:var(--ink-2); margin-bottom:var(--space-inline); }
.pd-emails-hd .muted { color:var(--ink-4); font-weight:500; }

/* email analytics (reports) */
.reml-bars { display:flex; align-items:flex-end; gap:var(--space-item); height:170px; padding-top:var(--space-inline); }
.reml-wk { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-inline); height:100%; }
.reml-barpair { display:flex; align-items:flex-end; gap:var(--space-tight); height:100%; width:100%; justify-content:center; }
.reml-bar { width:26%; min-height:3px; border-radius:5px 5px 0 0; transition:height .3s ease; }
.reml-wklbl { font-size:var(--t-micro-size); color:var(--ink-4); }
.reml-dot { width:22px; height:22px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; font-size:var(--t-micro-size); font-weight:700; flex-shrink:0; }
.reml-track { height:6px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; }
.reml-fill { height:100%; border-radius:999px; transition:width .3s ease; }

/* system / automated email rollup (reports → email) — Editorial Calm */
.sysem-strip { display:flex; gap:0; border-bottom:1px solid var(--border-subtle); padding-bottom:var(--space-item); margin-bottom:var(--space-tight); }
.sysem-stat { flex:1; padding:0 var(--space-group); }
.sysem-stat:first-child { padding-left:0; }
.sysem-stat + .sysem-stat { border-left:1px solid var(--border-subtle); }
.sysem-v { font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:540; line-height:1; }
.sysem-l { font-size:var(--t-micro-size); color:var(--ink-3); margin-top:var(--space-tight); }
.sysem-rows { display:flex; flex-direction:column; }
.sysem-row { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) 2px; border-top:1px solid var(--border-subtle); font-size:var(--t-label-size); }
.sysem-rows .sysem-row:first-child { border-top:none; }
.sysem-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.sysem-name { font-weight:550; color:var(--ink); }
.sysem-paused { font-size:var(--t-micro-size); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-4); background:var(--bg-sunken); padding:2px var(--space-inline); border-radius:99px; }
.sysem-meta { font-size:var(--t-caption-size); color:var(--ink-3); }
.sysem-sent { font-size:var(--t-caption-size); color:var(--ink-3); min-width:60px; text-align:right; }
.sysem-sent b { color:var(--ink); font-weight:650; }

/* scheduled-send manager */
.ib-sched-item { border:none; border-radius:0; border-top:1px solid var(--border-subtle); padding:var(--space-item) var(--space-group); margin:0; background:none; }
.ib-sched-item:first-child { border-top:none; }
.ib-sched-when { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:var(--space-tight) var(--space-inline); margin-bottom:var(--space-inline); }
.ib-sched-to { font-size:var(--t-caption-size); color:var(--ink-4); }
.ib-sched-subj { font-size:var(--t-label-size); font-weight:650; color:var(--ink); margin-top:var(--space-tight); }
.ib-sched-snip { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:2px; }
.ib-sched-acts { display:flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-item); padding-top:var(--space-item); border-top:1px solid var(--border-subtle); }
.ib-sched-btn { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-control); padding:var(--space-tight) var(--space-item); cursor:pointer; transition:all .13s; }
.ib-sched-btn:hover { border-color:var(--border-strong); }
.ib-sched-btn.primary { color:var(--accent-fg,#fff); background:var(--accent); border-color:var(--accent); }
.ib-sched-btn.primary:hover { filter:brightness(1.05); }
.ib-sched-btn.ghost { border-color:transparent; color:var(--ink-3); margin-left:auto; }
.ib-sched-btn.ghost:hover { background:var(--bg-hover); }

/* follow-up reminders */
.ib-fu-orb { width:22px; height:22px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--c-gold), var(--c-clay)); flex-shrink:0; }
.ib-fu-item { border:none; border-radius:0; border-top:1px solid var(--border-subtle); padding:var(--space-item) var(--space-group); margin:0; background:none; }
.ib-fu-item:first-child { border-top:none; }
.ib-fu-item.due { background:color-mix(in srgb, var(--c-gold) 6%, transparent); }
.ib-fu-row { display:flex; gap:var(--space-item); cursor:pointer; }
.ib-fu-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-inline); }
.ib-fu-to { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.ib-fu-badge { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:700; color:var(--ink-3); background:var(--bg-sunken); border-radius:999px; padding:2px var(--space-inline); }
.ib-fu-badge.due { color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 13%, transparent); }
.ib-fu-wait { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-fu-subj { font-size:var(--t-caption-size); font-weight:550; color:var(--ink-2); margin-top:2px; }
.ib-fu-snip { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:1px; }
.ib-fu-acts { display:flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-item); padding-top:var(--space-inline); border-top:1px solid var(--border-subtle); }
.ib-fu-banner { display:flex; align-items:center; gap:var(--space-item); margin:var(--space-group) 0 var(--space-tight); padding:var(--space-item) var(--space-item); border-radius:var(--r-card); background:color-mix(in srgb, var(--c-gold) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--c-gold) 28%, transparent); font-size:var(--t-label-size); color:var(--ink-2); }
.ib-fu-banner b { color:var(--ink); }
.ib-fu-banner-ic { width:auto; height:auto; border-radius:0; display:grid; place-items:center; color:var(--c-clay); background:transparent; flex-shrink:0; }
.ib-fu-banner-btn { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--accent-fg,#fff); background:var(--accent); border:none; border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); cursor:pointer; flex-shrink:0; }
.ib-fu-banner-btn:hover { filter:brightness(1.05); }
.ib-fu-banner-btn.ghost { color:var(--ink-2); background:var(--surface); border:1px solid var(--border); }
.ib-fu-banner-btn.ghost:hover { background:var(--bg-hover); filter:none; }
.ib-fu-banner-x { width:30px; height:30px; border:none; background:none; color:var(--ink-4); border-radius:var(--r-control); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
.ib-fu-banner-x:hover { background:var(--bg-hover); color:var(--ink); }

/* share thread (client portal) */
.ib-share { width:540px; }
.ib-share-body { padding:var(--space-inline) 20px; }
.ib-share-linkrow { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--r-control); color:var(--ink-3); }
.ib-share-link { flex:1; font-size:var(--t-caption-size); color:var(--ink-2); font-family:var(--font-mono,monospace); }
.ib-share-copy { display:inline-flex; align-items:center; gap:var(--space-tight); font:inherit; font-size:var(--t-caption-size); font-weight:600; color:var(--accent-fg,#fff); background:var(--accent); border:none; border-radius:var(--r-control); padding:var(--space-tight) var(--space-item); cursor:pointer; flex-shrink:0; }
.ib-share-copy:hover { filter:brightness(1.05); }
.ib-share-opts { display:flex; align-items:center; gap:var(--space-group); padding:var(--space-item) 2px; }
.ib-share-opt, .ib-share-opt-sel { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-3); font-weight:550; }
.ib-share-opt-sel select { font:inherit; font-size:var(--t-caption-size); color:var(--ink); background:none; border:none; border-bottom:1px solid var(--border); cursor:pointer; outline:none; }
.ib-share-prev-l { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); margin:var(--space-tight) 0 var(--space-inline); }
.ib-share-prev { border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--bg); max-height:280px; overflow-y:auto; }
.ib-share-prev-hd { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) var(--space-group); background:var(--surface); border-bottom:1px solid var(--border-subtle); }
.ib-share-prev-mark { width:30px; height:30px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; font-weight:700; font-size:var(--t-body-size); background:linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--c-mauve))); }
.ib-share-prev-ws { font-size:var(--t-label-size); font-weight:700; color:var(--ink); }
.ib-share-prev-sub { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-share-prev-subj { font-size:var(--t-strong-size); font-weight:700; color:var(--ink); padding:var(--space-item) var(--space-group) var(--space-inline); }
.ib-share-prev-thread { padding:0 var(--space-group); }
.ib-share-prev-msg { padding:var(--space-item) 0; border-top:1px solid var(--border-subtle); }
.ib-share-prev-from { display:flex; align-items:baseline; justify-content:space-between; font-size:var(--t-caption-size); color:var(--ink-2); margin-bottom:var(--space-tight); }
.ib-share-prev-from span { font-size:var(--t-micro-size); color:var(--ink-4); }
.ib-share-prev-body { font-size:var(--t-label-size); line-height:1.6; color:var(--ink-2); }
.ib-share-prev-body p { margin:0 0 var(--space-inline); } .ib-share-prev-body b { color:var(--ink); }
.ib-share-prev-foot { display:flex; align-items:center; gap:var(--space-tight); justify-content:center; padding:var(--space-item) var(--space-group); font-size:var(--t-micro-size); color:var(--ink-4); background:var(--surface); border-top:1px solid var(--border-subtle); }

/* Account controls keep connection health user-facing; provider cursors, job ids,
   token details, and other operator-only fields never enter this surface. */
.ib-acct-wrap { position:relative; display:flex; align-items:center; }
.ib-acct-wrap .ib-acct { padding-right:32px; }
.ib-acct-manage { position:absolute; right:5px; width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-4); cursor:pointer; opacity:0; transition:opacity .12s,background .12s; }
.ib-acct-wrap:hover .ib-acct-manage,.ib-acct-manage:focus-visible { opacity:1; }
.ib-acct-manage:hover { background:var(--bg-hover); color:var(--ink); }
.ib-acct-live.reauth_required,.ib-acct-live.error { background:var(--c-red); }
.ib-acct-live.unknown { background:var(--c-gold); }
.ib-account-panel { display:flex; flex-direction:column; gap:var(--space-group); }
.ib-account-summary { display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-card); background:var(--surface); }
.ib-account-state { width:10px; height:10px; border-radius:50%; background:var(--ink-4); flex:none; }
.ib-account-state.connected { background:var(--st-done); box-shadow:0 0 0 4px color-mix(in srgb,var(--st-done) 13%,transparent); }
.ib-account-state.reauth_required,.ib-account-state.error { background:var(--c-red); box-shadow:0 0 0 4px color-mix(in srgb,var(--c-red) 12%,transparent); }
.ib-account-email { color:var(--ink); font-size:var(--t-label-size); font-weight:650; }
.ib-account-status { color:var(--ink-4); font-size:var(--t-caption-size); margin-top:2px; }
.ib-account-error { display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-item); border-radius:var(--r-control); color:var(--c-red); background:color-mix(in srgb,var(--c-red) 8%,transparent); font-size:var(--t-caption-size); }
.ib-account-actions { display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.ib-account-meta { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border-subtle); border-radius:var(--r-card); overflow:hidden; }
.ib-account-meta>div { display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-item); }
.ib-account-meta>div+div { border-left:1px solid var(--border-subtle); }
.ib-account-meta span { font-size:var(--t-micro-size); color:var(--ink-4); text-transform:uppercase; letter-spacing:.04em; }
.ib-account-meta b { font-size:var(--t-caption-size); color:var(--ink-2); font-weight:600; }
.ib-account-activity-title { font-size:var(--t-caption-size); font-weight:700; color:var(--ink-2); }
.ib-account-activity { border-top:1px solid var(--border-subtle); }
.ib-account-activity-row { display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) 2px; border-bottom:1px solid var(--border-subtle); font-size:var(--t-caption-size); }
.ib-account-activity-row>span { color:var(--st-done); }
.ib-account-activity-row>span.bad { color:var(--c-red); }
.ib-account-activity-row b { display:block; color:var(--ink-2); font-weight:600; }
.ib-account-activity-row small { display:block; color:var(--ink-4); margin-top:2px; }
.ib-account-activity-row time { color:var(--ink-4); font-size:var(--t-micro-size); white-space:nowrap; }
.ib-account-empty { color:var(--ink-4); font-size:var(--t-caption-size); padding:var(--space-item) 2px; }

/* ── suggested task card (SET 4 item 1) ──────────────────────────────────────
   A standalone callout, which is one of the few places a container is earned.
   Kept quiet: sunken fill, hairline, no accent rail, no icon tile. */
.ib-sug { margin:var(--space-item) 0; padding:var(--space-item) var(--space-group); background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--r-card); }
.ib-sug-hd { display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.ib-sug-x { display:grid; place-items:center; width:24px; height:24px; border:none; background:none; border-radius:var(--r-control); color:var(--ink-4); cursor:pointer; }
.ib-sug-x:hover { background:var(--bg-hover); color:var(--ink-2); }
.ib-sug-title { margin-top:var(--space-inline); font-size:var(--t-body-size); font-weight:650; color:var(--ink); }
.ib-sug-desc { margin-top:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-3); }
.ib-sug-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-inline); margin-top:var(--space-item); }
.ib-sug-chip { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:600; color:var(--ink-3); background:var(--surface); border-radius:var(--r-pill); padding:0 var(--space-inline); line-height:22px; }
.ib-sug-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-item); margin-top:var(--space-item); }
.ib-sug-note { font-size:var(--t-micro-size); color:var(--ink-4); }
@media (max-width:640px){ .ib-sug-x { width:44px; height:44px; } }

/* auto-link row inside Rules & filters (SET 4 item 2) */
.rl-autolink { display:flex; align-items:center; gap:var(--space-group); }
.rl-autolink-t { font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.rl-autolink-s { margin-top:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-4); }

/* muted-sender list inside Rules & filters (SET 4 deepening) */
.rl-mutes { display:flex; align-items:flex-start; gap:var(--space-group); }
.rl-mute-list { display:flex; flex-wrap:wrap; gap:var(--space-inline); margin-top:var(--space-item); }
.rl-mute-chip { display:inline-flex; align-items:center; gap:var(--space-tight); max-width:100%; min-width:0; font-size:var(--t-micro-size); color:var(--ink-3); background:var(--surface); border-radius:var(--r-pill); padding:0 var(--space-tight) 0 var(--space-inline); line-height:24px; }
.rl-mute-chip button { display:grid; place-items:center; width:18px; height:18px; border:none; background:none; border-radius:var(--r-pill); color:var(--ink-4); cursor:pointer; }
.rl-mute-chip button:hover { background:var(--bg-hover); color:var(--ink-2); }
@media (max-width:640px){ .rl-mute-chip button { width:44px; height:44px; } }


/* s-select.css */
/* Shared custom select. Kept eager with s-select.jsx because relationship,
   form, date/time, and settings fields render before route chunks load. */
.invsel{ position:relative; width:100%; }
.invsel.dis{ pointer-events:none; }
.invsel.dis .invsel-btn{ background:var(--surface-2); color:var(--ink-4); cursor:not-allowed; }
.invsel-btn{ display:flex; align-items:center; gap:var(--space-inline); width:100%; height:var(--control-h); padding:0 var(--space-inline) 0 var(--space-item); border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md); font:inherit; font-size:var(--t-body-size); color:var(--ink); cursor:pointer; text-align:left; transition:border-color .12s; }
.invsel.sm .invsel-btn{ height:var(--control-h-sm); font-size:var(--t-label-size); border-radius:var(--r-sm); }
.invsel-btn:hover{ border-color:var(--border-strong); }
.invsel-btn.open{ border-color:var(--accent); }
.invsel-val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invsel-val.ph{ color:var(--ink-4); }
.invsel-btn .icn{ color:var(--ink-3); flex-shrink:0; transition:transform .15s; }
.invsel-btn.open .icn{ transform:rotate(180deg); }
.invsel-pop{ position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:60; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:var(--space-tight); max-height:280px; overflow-y:auto; animation:invselIn .14s ease; }
.invsel-pop.fixed{ z-index:6000; right:auto; }
.invsel-pop.up{ top:auto; bottom:calc(100% + 5px); }
.invsel-pop.r{ left:auto; min-width:160px; }
@keyframes invselIn{ from{ opacity:0; transform:translateY(-3px); } }
.invsel-opt{ display:flex; align-items:center; gap:var(--space-inline); width:100%; padding:var(--space-inline) var(--space-inline); border:none; background:none; border-radius:var(--r-control); cursor:pointer; font:inherit; font-size:var(--t-label-size); color:var(--ink-2); text-align:left; }
.invsel-opt>span{ flex:1; min-width:0; }
.invsel-opt:hover,.invsel-opt.kbhi{ background:var(--bg-hover); }
.invsel-grouphdr{ padding:var(--space-inline) var(--space-inline) var(--space-tight); font-size:var(--t-micro-size); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-4); }
.invsel-opt.on{ color:var(--ink); font-weight:600; }
.invsel-opt .icn{ color:var(--accent); flex-shrink:0; }
.invsel-search{ display:flex; align-items:center; gap:var(--space-tight); padding:var(--space-tight) var(--space-inline); border-bottom:1px solid var(--border); }
.invsel-search>.icn{ color:var(--ink-4); flex:none; }
.invsel-search input{ width:100%; min-width:0; height:var(--control-h-sm); padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--t-label-size); }
.invsel-empty{ padding:var(--space-item) var(--space-inline); color:var(--ink-4); font-size:var(--t-caption-size); }
.invsel-action{ display:flex; align-items:center; gap:var(--space-inline); width:100%; min-height:var(--control-h); margin-top:var(--space-tight); padding:0 var(--space-inline); border:0; border-top:1px solid var(--border); background:transparent; color:var(--accent); font:inherit; font-size:var(--t-label-size); font-weight:650; text-align:left; cursor:pointer; }
.invsel-action:hover,.invsel-action:focus-visible{ background:var(--bg-hover); }
.invsel-action>.icn{ flex:none; }
.invsel-action:disabled,.invsel-opt:disabled{ background:var(--surface-2); color:var(--ink-4); cursor:not-allowed; }


/* s-person-picker.css */
/* Stelaah — universal avatar person picker chrome.
   Split out of s-inventory.css (2026-08-10). CLAUDE.md requires that user
   selection ALWAYS uses an avatar-based picker, so InvPersonSelect /
   InvPersonMulti / PeoplePicker render on almost every screen. The components
   were already moved from s-inventory.jsx to s-org.jsx on 2026-07-31 for
   exactly this reason (see the comment there: every non-Inventory route saw
   window.InvPersonMulti === undefined). The STYLES were left behind in
   s-inventory.css, which build-app-runtime.sh scopes to the inventory lazy
   chunk, so the picker went from "unavailable" to "renders unstyled
   everywhere except Inventory" — the same half-fix, one layer down.

   Also carries the member chips and the two utility classes s-org.jsx and
   s-org-canvas.jsx render alongside the picker (.inv-mchip, .inv-mlist,
   .org-mchip, .org-modal-members, .inv-muted-sm, .inv-empty), for the same
   reason. Keep this file in criticalStyleRels. Found by
   scripts/verify-route-styles.mjs. */
.inv-muted-sm{ color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.inv-muted-sm .icn{ vertical-align:-2px; }
.inv-owner-pick .inv-psel,
.inv-owner-pick .inv-gsel{ width:100%; }
.inv-gsel-ic{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.inv-gsel-ic.lg{ width:26px; height:26px; }
.inv-empty{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--ink-3); }
.inv-empty .icn{ opacity:.4; }
.org-modal-members{ display:flex; gap:var(--space-tight); flex-wrap:wrap; margin-top:var(--space-inline); }
.org-mchip{ display:inline-flex; align-items:center; gap:var(--space-tight); height:28px; padding:0 var(--space-inline) 0 var(--space-tight); border:1px solid var(--border); background:var(--surface); border-radius:var(--r-pill); font-size:var(--t-micro-size); font-weight:600; color:var(--ink-2); cursor:pointer; }
.org-mchip.lead{ border-color:var(--c-gold); background:color-mix(in srgb, var(--c-gold) 12%, transparent); color:color-mix(in srgb, var(--c-gold) 55%, var(--ink)); }
.org-mchip .icn{ color:var(--c-gold); }
.inv-psel{ position:relative; }
.inv-psel-btn{
  display:flex; align-items:center; gap:var(--space-inline); width:100%; min-width:0; min-height:var(--control-h); height:var(--control-h);
  padding:0 var(--space-item); border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md);
  font:inherit; font-size:var(--t-body-size); font-weight:550; color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .12s ease, background .12s ease;
}
.inv-psel-btn:hover{ border-color:var(--border-strong); background:var(--bg-hover); }
.inv-psel-btn:focus-visible, .inv-psel-btn.open{ outline:none; border-color:var(--accent); background:var(--surface); }
.modal .inv-psel-btn{
  min-height: var(--control-h); height: var(--control-h); border-radius:var(--r-control); background:var(--bg-sunken); border-color:transparent;
}
.modal .inv-psel-btn:hover{ border-color:color-mix(in srgb, var(--ink-4) 55%, var(--border-subtle)); background:var(--bg-sunken); }
.modal .inv-psel-btn:focus-visible, .modal .inv-psel-btn.open{ border-color:var(--accent); background:var(--surface); }
.inv-psel-btn .grow{ text-align:left; }
.inv-psel-scrim{ position:fixed; inset:0; z-index:1198; }
.inv-psel-pop{ background:var(--overlay); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); z-index:1199; padding:var(--space-inline); }
.inv-psel-search{ display:flex; align-items:center; gap:var(--space-inline); height:32px; padding:0 var(--space-inline); background:var(--bg-sunken); border-radius:var(--r-sm); margin-bottom:var(--space-tight); }
.inv-psel-search .icn{ color:var(--ink-3); }
.inv-psel-search input{ border:none; background:none; outline:none; font-size:var(--t-label-size); width:100%; color:var(--ink); font-family:inherit; }
.inv-psel-list{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.inv-psel-row{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-tight) var(--space-inline); border:none; background:none; border-radius:var(--r-sm); cursor:pointer; text-align:left; width:100%; }
.inv-psel-row:hover{ background:var(--bg-hover); }
.inv-psel-row.on{ background:var(--accent-soft); }
.inv-psel-name{ display:block; font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.inv-psel-role{ display:block; font-size:var(--t-micro-size); color:var(--ink-3); }
.inv-psel-none{ width:26px; height:26px; border-radius:50%; background:var(--bg-sunken); color:var(--ink-3); display:grid; place-items:center; flex-shrink:0; }
.inv-mlist{ display:flex; gap:var(--space-inline); flex-wrap:wrap; align-items:center; }
.inv-mchip{ display:inline-flex; align-items:center; gap:var(--space-tight); height:28px; padding:0 var(--space-tight) 0 var(--space-tight); border:1px solid var(--border); background:var(--surface); border-radius:var(--r-pill); font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); }
.inv-mchip button{ width:18px; height:18px; border:none; background:none; color:var(--ink-4); border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.inv-mchip button:hover{ background:var(--st-blocked-soft); color:var(--st-blocked); }


/* s-organization-tenancy.css */
/* Account → Organization. Editorial, neutral, and deliberately sparse. */
.orgt-content{padding:var(--space-page);overflow:auto;min-height:100%;background:var(--bg)}
.orgt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-section);max-width:1180px;margin:0 auto var(--space-section)}
.orgt-head h1{margin:0;font-size:var(--t-display-size);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.orgt-head p:not(.orgt-eyebrow){max-width:650px;margin:var(--space-tight) 0 0;color:var(--ink-3);font-size:var(--t-body-size);line-height:1.55}
.orgt-eyebrow{margin:0 0 var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.orgt-head-actions{display:flex;align-items:center;gap:var(--space-inline);flex-wrap:wrap;justify-content:flex-end}
.orgt-org-tabs{display:flex;gap:var(--space-tight);max-width:1180px;margin:0 auto var(--space-group);overflow-x:auto;border-bottom:1px solid var(--border-subtle)}
.orgt-org-tabs button{display:flex;align-items:center;gap:var(--space-inline);padding:0 var(--space-inline) var(--space-item);border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-3);font:inherit;font-size:var(--t-label-size);font-weight:620;white-space:nowrap;cursor:pointer}
.orgt-org-tabs button:hover{color:var(--ink)}
.orgt-org-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.orgt-org-tabs small{font-size:var(--t-micro-size);font-weight:550;color:var(--ink-4)}
.orgt-summary{display:flex;align-items:center;max-width:1180px;margin:0 auto var(--space-section);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.orgt-summary div{display:flex;flex-direction:column;gap:2px;min-width:128px;padding:var(--space-item) var(--space-group) var(--space-item) 0}
.orgt-summary b{font-size:var(--t-title-size);font-weight:650;color:var(--ink)}
.orgt-summary span{font-size:var(--t-caption-size);color:var(--ink-3)}
.orgt-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:var(--space-section);max-width:1180px;margin:0 auto var(--space-section)}
.orgt-section{min-width:0;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-card);box-shadow:none}
.orgt-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-group);padding:var(--space-group);border-bottom:1px solid var(--border-subtle)}
.orgt-section-head h2{margin:0;color:var(--ink);font-size:var(--t-strong-size);font-weight:660}
.orgt-section-head p{margin:var(--space-tight) 0 0;color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.45}
.orgt-inline-actions{display:flex;align-items:center;gap:var(--space-inline);flex-wrap:wrap;justify-content:flex-end}
.orgt-text-action,.orgt-row-action{display:inline-flex;align-items:center;gap:var(--space-tight);border:0;background:none;color:var(--ink-3);font:inherit;font-size:var(--t-caption-size);font-weight:620;cursor:pointer;white-space:nowrap;border-radius:var(--r-control);padding:var(--space-tight) var(--space-inline)}
.orgt-text-action:hover,.orgt-row-action:hover{background:var(--bg-hover);color:var(--ink)}
.orgt-list,.orgt-dept-list{display:flex;flex-direction:column;padding:var(--space-tight) var(--space-item)}
.orgt-workspace-row{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:var(--space-item);width:100%;padding:var(--space-item) var(--space-inline);border:0;border-bottom:1px solid var(--border-subtle);background:none;color:var(--ink);text-align:left;cursor:pointer;border-radius:0}
.orgt-workspace-row:last-child{border-bottom:0}
.orgt-workspace-row:hover{background:var(--bg-hover)}
.orgt-workspace-row.active{background:var(--bg-active)}
.orgt-workspace-row:disabled{cursor:wait;color:var(--ink-4);background:var(--bg-sunken)}
.orgt-workspace-row.active:disabled{cursor:default;background:var(--bg-active);color:var(--ink)}
.orgt-workspace-row.unavailable:disabled{cursor:not-allowed;background:none}
.orgt-workspace-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-workspace-row b,.orgt-dept-row b{overflow:hidden;color:var(--ink);font-size:var(--t-body-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-workspace-row small,.orgt-dept-row small{color:var(--ink-4);font-size:var(--t-micro-size)}
.orgt-workspace-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface);color:var(--ink-2);font-size:var(--t-caption-size);font-weight:700}
.orgt-workspace-row.active .orgt-workspace-mark{border-color:var(--border-strong)}
.orgt-dept-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:var(--space-inline);padding:var(--space-item) var(--space-inline);border-bottom:1px solid var(--border-subtle)}
.orgt-dept-row:last-child{border-bottom:0}
.orgt-dept-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-dept-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.orgt-list-empty{margin:0;padding:var(--space-group) var(--space-inline);color:var(--ink-4);font-size:var(--t-caption-size);line-height:1.5}
.orgt-access-requests{margin:var(--space-tight) var(--space-item) var(--space-item);border-top:1px solid var(--border-subtle)}
.orgt-access-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-item);padding:var(--space-item) var(--space-inline)}
.orgt-access-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-access-head b{color:var(--ink);font-size:var(--t-caption-size);font-weight:650}
.orgt-access-head small{color:var(--ink-4);font-size:var(--t-micro-size);line-height:1.4}
.orgt-request-list{display:flex;flex-direction:column}
.orgt-request-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:var(--space-inline);padding:var(--space-inline);border-top:1px solid var(--border-subtle)}
.orgt-request-row>span:nth-child(2){display:flex;flex-direction:column;gap:1px;min-width:0}
.orgt-request-row b{overflow:hidden;color:var(--ink);font-size:var(--t-caption-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-request-row small{color:var(--ink-4);font-size:var(--t-micro-size)}
.orgt-request-actions{display:flex;gap:var(--space-tight)}
.orgt-request-actions .btn{min-height:32px;padding:var(--space-tight) var(--space-inline);font-size:var(--t-caption-size)}
.orgt-people{max-width:1180px;margin:0 auto var(--space-section)}
.orgt-person-head,.orgt-person-row{display:grid;grid-template-columns:32px minmax(190px,1.4fr) minmax(160px,1fr) auto;align-items:center;gap:var(--space-item)}
.orgt-person-head{padding:var(--space-inline) var(--space-group);border-bottom:1px solid var(--border-subtle);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.orgt-person-row{position:relative;padding:var(--space-inline) var(--space-group);border-bottom:1px solid var(--border-subtle)}
.orgt-person-row:last-child{border-bottom:0}
.orgt-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg-sunken);color:var(--ink-2);font-size:var(--t-micro-size);font-weight:700}
.orgt-person-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.orgt-person-main b{overflow:hidden;color:var(--ink);font-size:var(--t-caption-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-person-main small,.orgt-person-dept{color:var(--ink-3);font-size:var(--t-micro-size)}
.orgt-inline-menu{position:relative}
.orgt-person-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-tight)}
.orgt-member-state{display:inline-flex;align-items:center;gap:var(--space-tight);padding:var(--space-tight) var(--space-inline);color:var(--ink-4);font-size:var(--t-micro-size);white-space:nowrap}
.orgt-department-choices{display:flex;flex-direction:column;gap:var(--space-tight)}
.orgt-department-choice{display:flex;align-items:center;justify-content:space-between;gap:var(--space-item);min-height:44px;padding:var(--space-inline) var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--t-label-size);text-align:left;cursor:pointer}
.orgt-department-choice:hover,.orgt-department-choice.on{border-color:var(--border-strong);background:var(--bg-hover);color:var(--ink)}
/* Assignment and primary sit on one row, so they share a height (Alignment Law).
   min-width:0 lets the name column shrink instead of forcing the sheet wider. */
.orgt-department-choice-row{display:flex;align-items:center;gap:var(--space-tight)}
.orgt-department-choice-row>.orgt-department-choice{flex:1;min-width:0}
/* Bare by default, hover-only affordance: this is a secondary action beside the
   real one, and a permanent fill here would compete with it. */
.orgt-department-primary{flex:none;min-height:44px;padding:var(--space-inline) var(--space-item);border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--ink-3);font:inherit;font-size:var(--t-label-size);white-space:nowrap;cursor:pointer}
.orgt-department-primary:hover{background:var(--bg-hover);color:var(--ink)}
.orgt-department-primary.on{border-color:var(--border-strong);color:var(--ink)}
.orgt-department-primary:disabled{color:var(--ink-disabled);background:none;cursor:default}
@media (max-width:640px){
  /* Touch targets stay >=44px and the pair stacks rather than squeezing. */
  .orgt-department-choice-row{flex-direction:column;align-items:stretch}
  .orgt-department-primary{width:100%}
}
.orgt-modal-stack{gap:var(--space-group)}
.orgt-footer-spacer{flex:1}
.orgt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-item)}
.orgt-boundary-note{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-item);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.5}
.orgt-boundary-note svg{flex:none;margin-top:2px}
.orgt-admin-block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-inline);padding-top:var(--space-item);border-top:1px solid var(--border-subtle)}
.orgt-admin-copy{margin:0;color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.5}
.orgt-company-invites{margin:var(--space-tight) var(--space-group) var(--space-group);padding-top:var(--space-item);border-top:1px solid var(--border-subtle)}
.orgt-subhead{margin:0 0 var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Separated by rhythm, not a rule: the small-caps label plus the space above it
   is the divider (Hairline Budget). */
.orgt-dept-archived{margin-top:var(--space-group)}
.orgt-company-invite-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-item);padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}
.orgt-company-invite-row:last-child{border-bottom:0}
.orgt-company-invite-row>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-company-invite-row b{overflow:hidden;color:var(--ink);font-size:var(--t-caption-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-company-invite-row small{color:var(--ink-4);font-size:var(--t-micro-size)}
.orgt-invite-actions{display:flex;align-items:center;gap:var(--space-tight)}
.orgt-account-invites{max-width:1180px;margin:0 auto var(--space-section)}
.orgt-account-invite-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:var(--space-item);padding:var(--space-item) var(--space-group);border-bottom:1px solid var(--border-subtle)}
.orgt-account-invite-row:last-child{border-bottom:0}
.orgt-account-invite-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-account-invite-row b{overflow:hidden;color:var(--ink);font-size:var(--t-body-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-account-invite-row small{color:var(--ink-4);font-size:var(--t-micro-size)}
.orgt-account-notifications{overflow:hidden}
.orgt-archived{max-width:1180px;margin:0 auto var(--space-section);overflow:hidden}
.orgt-archived-list{display:flex;flex-direction:column}
.orgt-archived-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:var(--space-item);padding:var(--space-item) var(--space-group);border-bottom:1px solid var(--border-subtle)}
.orgt-archived-row:last-child{border-bottom:0}
.orgt-archived-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.orgt-archived-row b{overflow:hidden;color:var(--ink);font-size:var(--t-body-size);font-weight:630;text-overflow:ellipsis;white-space:nowrap}
.orgt-archived-row small{color:var(--ink-4);font-size:var(--t-micro-size)}
.orgt-archived-state{padding:var(--space-inline)}
.orgt-notification-row.unread{background:var(--bg-active)}
.orgt-unread-count{display:inline-flex;align-items:center;min-height:24px;padding:var(--space-tight) var(--space-inline);border-radius:var(--r-pill);background:var(--bg-active);color:var(--ink-2);font-size:var(--t-micro-size);font-weight:700;white-space:nowrap}
.orgt-error{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-item);border-radius:var(--r-control);background:var(--danger-soft);color:var(--danger);font-size:var(--t-caption-size);line-height:1.45}
.orgt-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-inline);min-height:280px;color:var(--ink-3);font-size:var(--t-body-size)}
.orgt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:480px;min-height:520px;margin:0 auto;text-align:center}
.orgt-empty-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--space-item);color:var(--ink-3)}
.orgt-empty h2{margin:0;color:var(--ink);font-size:var(--t-title-size);font-weight:650}
.orgt-empty p{margin:var(--space-inline) 0 var(--space-group);color:var(--ink-3);font-size:var(--t-body-size);line-height:1.55}

.ws-pop-group-label{display:flex;align-items:center;gap:var(--space-tight);padding:var(--space-inline) var(--space-inline) var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ws-pop-group-label:not(:first-child){margin-top:var(--space-tight);border-top:1px solid var(--border-subtle);padding-top:var(--space-item)}
.ws-pop-private{display:inline-flex;align-items:center;gap:var(--space-tight)}
.ws-pop-parent{color:var(--ink-4);font-size:var(--t-micro-size);font-weight:550;text-transform:none;letter-spacing:0}
.dw-mw-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0;font-size:var(--t-label-size);font-weight:550;text-align:left}
.dw-mw-main>span{max-width:100%}
.dw-mw-main small{max-width:100%;margin-top:1px;overflow:hidden;color:var(--ink-4);font-size:var(--t-micro-size);font-weight:500;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:900px){
  .orgt-content{padding:var(--space-section)}
  .orgt-head{flex-direction:column;gap:var(--space-group)}
  .orgt-head-actions{justify-content:flex-start}
  .orgt-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .orgt-content{padding:var(--space-group) var(--space-item)}
  .orgt-org-tabs button,.orgt-text-action,.orgt-row-action,.orgt-request-actions .btn,.orgt-workspace-row{min-height:44px}
  .orgt-text-action,.orgt-row-action{min-width:44px;justify-content:center}
  .orgt-head-actions{width:100%}
  .orgt-head-actions .btn{flex:1;justify-content:center;min-height:44px}
  .orgt-summary div{min-width:0;flex:1;padding-right:var(--space-item)}
  .orgt-person-head{display:none}
  .orgt-person-row{grid-template-columns:32px minmax(0,1fr) auto;gap:var(--space-inline);padding:var(--space-item)}
  .orgt-person-dept{grid-column:2;grid-row:2}
  .orgt-inline-menu{grid-column:3;grid-row:1 / span 2}
  .orgt-person-actions{grid-column:3;grid-row:1 / span 2;flex-direction:column;align-items:stretch}
  .orgt-section-head{padding:var(--space-item)}
  .orgt-head-actions{flex-direction:column;align-items:stretch}
  .orgt-summary span{font-size:var(--t-micro-size)}
  .orgt-person-dept{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .orgt-form-grid{grid-template-columns:1fr}
  .orgt-company-invite-row{align-items:flex-start}
  .orgt-account-invite-row{grid-template-columns:36px minmax(0,1fr);padding:var(--space-item)}
  .orgt-account-invite-row .btn{grid-column:2;justify-self:start;min-height:44px}
  .orgt-archived-row{grid-template-columns:36px minmax(0,1fr);padding:var(--space-item)}
  .orgt-archived-row .btn,.orgt-archived-state{grid-column:2;justify-self:start;min-height:44px}
  .orgt-empty .btn{min-height:44px}
  .orgt-request-row{grid-template-columns:32px minmax(0,1fr)}
  .orgt-request-actions{grid-column:2;justify-content:flex-start}
}

/* Department preset editor. Separated by rhythm and a small-caps label, not a rule
   (Hairline Budget); choices are bare with hover-only affordance so they do not compete
   with the modal's real primary action. */
.orgt-preset{margin-top:var(--space-group)}
.orgt-preset-note{margin:0 0 var(--space-item);color:var(--ink-3);font-size:var(--t-micro-size);line-height:1.5}
.orgt-preset-choices{display:flex;gap:var(--space-tight);flex-wrap:wrap}
.orgt-preset-choice{min-height:var(--control-h);padding:0 var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--t-label-size);cursor:pointer}
.orgt-preset-choice:hover{background:var(--bg-hover);color:var(--ink)}
.orgt-preset-choice.on{border-color:var(--border-strong);background:var(--bg-active);color:var(--ink)}
.orgt-preset-choice:disabled{color:var(--ink-disabled);cursor:default}
.orgt-preset-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-tight)}
.orgt-preset-module{display:flex;align-items:center;justify-content:space-between;gap:var(--space-tight);min-height:var(--control-h);padding:0 var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--t-label-size);text-align:left;cursor:pointer}
.orgt-preset-module>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgt-preset-module:hover{background:var(--bg-hover);color:var(--ink)}
.orgt-preset-module.on{border-color:var(--border-strong);color:var(--ink)}
.orgt-preset-module:disabled{color:var(--ink-disabled);cursor:default}
@media (max-width:640px){
  /* one column, and every target stays >=44px on touch */
  .orgt-preset-modules{grid-template-columns:minmax(0,1fr)}
  .orgt-preset-module,.orgt-preset-choice{min-height:44px}
}

/* Entity picker on the Organization invitation modal (tenancy invariant 18).
   Rendered only at two or more admissible businesses: at one there is nothing
   to answer, so nothing is shown. Rows follow the existing .orgt-dept-row
   rhythm rather than introducing a second list treatment, and carry one hairline
   between rows, none at the edges (Hairline Budget). */
.orgt-entity-picker{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:var(--radius-2)}
.orgt-entity-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-inline);padding:var(--space-item) var(--space-inline);border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink-1);font:inherit;text-align:left;cursor:pointer;border-radius:0}
.orgt-entity-row:first-child{border-top-left-radius:var(--radius-2);border-top-right-radius:var(--radius-2)}
.orgt-entity-row:last-child{border-bottom:0;border-bottom-left-radius:var(--radius-2);border-bottom-right-radius:var(--radius-2)}
.orgt-entity-row:hover{background:var(--surface-2)}
.orgt-entity-row.on{background:var(--surface-2)}
.orgt-entity-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--ink-3)}
.orgt-entity-row.on .orgt-entity-icon{color:var(--accent)}
.orgt-entity-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* s-auth.css */
/* Stelaah CRM — Auth gate overlay. Continue the initial boot splash's original
   Flock animation so session admission feels like one uninterrupted load. */
.auth-gate{ position:fixed; inset:0; z-index:9000; overflow:hidden; display:grid; place-items:center; padding:var(--space-block,var(--sp-6,24px)); background:var(--bg,#fdfdfd); color:var(--ink,#202124); font-family:var(--font-app,Inter,system-ui,sans-serif); text-align:center; }
.auth-gate-status{ width:min(400px,100%); animation:auth-gate-enter var(--t-slow,300ms) var(--ease,ease-out) backwards; }
.auth-gate-planes{ width:min(300px,72vw); margin-bottom:var(--space-group,var(--sp-4,16px)); }
.auth-gate-static-mark{ display:block; width:64px; height:64px; margin:0 auto var(--space-block,var(--sp-6,24px)); }
.auth-gate-status h1{ margin:0 0 var(--space-inline,var(--sp-2,8px)); color:var(--ink,#202124); font-family:var(--font-serif,Georgia,serif); font-size:var(--t-display-size); line-height:1.2; letter-spacing:-.02em; }
.auth-gate-status p{ margin:0 auto; max-width:360px; color:var(--ink-3,#7b8087); font-size:var(--t-label-size); line-height:1.5; }
/* Rotating orientation lines under the gate copy. CSS-driven on purpose: the app
   compiles its JSX in the browser, so a JS timer would stall with the main thread
   and freeze one line on screen. Only transform/opacity animate, for the same
   reason the planes do (see the MOTION LAW note in stelaah.css). Held back 4s so
   a fast admission never flashes them. Selector carries .auth-gate-status so it
   outranks `.auth-gate-status p`. */
.auth-gate-hints{ position:relative; height:40px; max-width:360px; margin:var(--space-group,var(--sp-4,16px)) auto 0; animation:auth-gate-hint-in var(--t-slow,300ms) var(--ease,ease-out) 4s both; }
/* Colour/size deliberately omitted: these ARE `p` inside .auth-gate-status, so
   they inherit `.auth-gate-status p` and stay in step with the body copy. */
.auth-gate-status .auth-gate-hint{ position:absolute; left:0; right:0; top:0; max-width:none; margin:0; opacity:0; animation:auth-gate-hint 26s linear infinite; will-change:transform,opacity; }
/* Any-Size: the longest line wraps to three at phone widths, so reserve the room. */
@media (max-width:640px){ .auth-gate-hints{ height:60px; } }
.auth-gate-hint:nth-child(1){ animation-delay:0s; }
.auth-gate-hint:nth-child(2){ animation-delay:5.2s; }
.auth-gate-hint:nth-child(3){ animation-delay:10.4s; }
.auth-gate-hint:nth-child(4){ animation-delay:15.6s; }
.auth-gate-hint:nth-child(5){ animation-delay:20.8s; }
@keyframes auth-gate-hint-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes auth-gate-hint{
  0%{ opacity:0; transform:translate3d(0,5px,0); }
  2%{ opacity:1; transform:translate3d(0,0,0); }
  18%{ opacity:1; transform:translate3d(0,0,0); }
  20%{ opacity:0; transform:translate3d(0,-5px,0); }
  100%{ opacity:0; transform:translate3d(0,-5px,0); }
}
.auth-gate-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-inline,var(--sp-2,8px)); margin-top:var(--space-block,var(--sp-6,24px)); }
.auth-gate-action{ flex:1 1 160px; min-height:40px; padding:0 var(--space-group,var(--sp-4,16px)); border:1px solid var(--border,rgba(32,33,36,.12)); border-radius:var(--r-pill,9999px); background:transparent; color:var(--ink-2,#5f6368); font:inherit; font-size:var(--t-label-size); font-weight:600; cursor:pointer; transition:background var(--t-fast,120ms) var(--ease,ease-out),color var(--t-fast,120ms) var(--ease,ease-out); }
.auth-gate-action:hover{ background:var(--bg-hover,rgba(32,33,36,.045)); color:var(--ink,#202124); }
.auth-gate-action.primary{ border-color:var(--ink,#202124); background:var(--ink,#202124); color:var(--bg,#fdfdfd); }
.auth-gate-action.primary:hover{ background:var(--ink-2,#5f6368); color:var(--bg,#fdfdfd); }
/* Any-Size Law: the gate's recovery actions are the ONLY way out of a stalled
   boot, so they have to be comfortably tappable on a phone. 40px sat under the
   44px touch floor. */
@media (max-width:640px){
  .auth-gate-action{ min-height:44px; }
}
@keyframes auth-gate-enter{ from{ opacity:0; transform:translateY(var(--space-inline,var(--sp-2,8px))); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .auth-gate-status{ animation:none; }
  .auth-gate-hints, .auth-gate-status .auth-gate-hint{ animation:none; }
  .auth-gate-status .auth-gate-hint:nth-child(1){ opacity:1; }
  .auth-gate-hint:not(:first-child){ display:none; }
}
.auth-card{ width:100%; max-width:400px; background:var(--surface,#1c1f17); border:1px solid var(--border,#2a2e23); border-radius:var(--r-modal); padding:var(--space-section) 28px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.auth-brand{ display:flex; align-items:center; gap:var(--space-item); margin-bottom:var(--space-block); }
.auth-mark{ width:38px; height:38px; border-radius:var(--r-control); background:var(--accent,#739837); display:grid; place-items:center; flex-shrink:0; }
.auth-mark span{ width:15px; height:15px; border-radius:50%; background:#fff; }
.auth-ws{ font-size:var(--t-heading-size); font-weight:700; color:var(--ink,#f1f1f1); font-family:var(--font-serif,Georgia,serif); }
.auth-sub{ font-size:var(--t-micro-size); color:var(--ink-3,#8a8a7e); }
.auth-h1{ font-size:var(--t-title-size); font-weight:680; color:var(--ink,#f1f1f1); font-family:var(--font-serif,Georgia,serif); margin:0 0 var(--space-tight); }
.auth-h2{ font-size:var(--t-label-size); color:var(--ink-3,#8a8a7e); margin:0 0 20px; }
.auth-field{ display:block; margin-bottom:var(--space-item); }
.auth-field span{ display:block; font-size:var(--t-micro-size); font-weight:600; color:var(--ink-2,#b8b6ac); margin-bottom:var(--space-tight); }
.auth-field input{ width:100%; height:42px; padding:0 var(--space-item); border:1px solid var(--border,#2b2b2b); border-radius:var(--r-control); background:var(--surface-2,#232323); color:var(--ink,#f1f1f1); font-size:var(--t-body-size); outline:none; box-sizing:border-box; }
.auth-field input:focus{ border-color:var(--accent,#739837); }
.auth-err{ display:flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); color:#c0654a; background:rgba(192,101,74,.12); border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); margin-bottom:var(--space-item); }
.auth-btn{ width:100%; height:44px; border:1px solid var(--border,#2b2b2b); background:var(--surface-2,#232323); color:var(--ink,#f1f1f1); border-radius:var(--r-control); font-size:var(--t-body-size); font-weight:650; cursor:pointer; display:grid; place-items:center; }
.auth-btn.primary{ background:var(--accent,#739837); border-color:var(--accent,#739837); color:#fff; }
.auth-btn:disabled{ background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.auth-switch{ text-align:center; font-size:var(--t-caption-size); color:var(--ink-3,#8a8a7e); margin-top:var(--space-group); }
.auth-switch button{ border:none; background:none; color:var(--accent,#739837); font-weight:650; cursor:pointer; font-size:var(--t-caption-size); }
.auth-check{ text-align:center; color:var(--ink-2,#b8b6ac); }
.auth-check .icn{ color:var(--accent,#739837); }
.auth-check h2{ font-size:var(--t-heading-size); color:var(--ink,#f1f1f1); margin:var(--space-item) 0 var(--space-tight); font-family:var(--font-serif,Georgia,serif); }
.auth-check p{ font-size:var(--t-label-size); line-height:1.5; margin:0 0 var(--space-group); }


/* stelaah-polish.css */
/* ════════════════════════════════════════════════════════════════
   Stelaah — polish layer (loaded last)
   · Subtle, Apple-style focus rings
   · Social-style comment actions + inline replies — React/Reply stay put,
     Edit/Delete are secondary and only reveal on hover
   · Full, categorized emoji picker (Apple-style sections + quick-jump tabs),
     shared by the insert button and every reaction picker; viewport-aware
     (portaled + flips/clamps) so it can never run off past the drawer edge
   · Wider, cleaner task drawer right rail
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Calm focus states ───────────────────────────────────────
   Replace the chunky opaque accent halos with a soft, low-opacity
   ring + a gently tinted border. Reads clean and quiet, like macOS. */
/* Text inputs, textareas, and search fields focus with a single clean
   accent border — no glow ring (one clean indicator, never stacked). */
.input:focus,
textarea.input:focus,
.mx-search:focus-within,
.appr-search:focus-within,
.appr-comment-box input:focus,
.cal-search:focus-within,
.msearch:focus-within,
.md-ask:focus-within,
.dw-qa:focus-within,
.savepop-create input:focus,
.cmt-reply-box:focus-within,
.cmt-edit-ta:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Rich message composers: single clean accent border on focus, NO glow ring */
.composer-box:focus-within,
.mx-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong)) !important;
  box-shadow: none !important;
}

/* keyboard-only focus: keep visible but softer than a hard accent slab.
   NOT !important: this is the app-wide default and must lose to any
   component's own higher-specificity focus rule (e.g. .invsel-btn:focus-visible
   { outline:none }) the normal cascade way — !important here previously beat
   every one of those exclusions regardless of specificity, stacking a second
   ring on ~40+ components that had correctly suppressed this outline. */
*:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}
/* …but form fields are excluded — they show their own single accent
   border on focus and must never also get the keyboard outline ring. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible,
.input:focus-visible,
.mx-search:focus-within,
.appr-search:focus-within,
.cal-search:focus-within,
.msearch:focus-within,
.md-ask:focus-within,
.dw-qa:focus-within {
  outline: none !important;
}

/* the message composer "replying" state shouldn't double up a hard border */
.mx-composer.replying:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)) !important;
}

/* ── 2. Comments: social-style action row ────────────────────────
   React and Reply stay inline and always visible (they carry a live
   count, so hiding them would hide real information). Edit/Delete are
   secondary, own-comment-only maintenance actions — `.cmt-bar-secondary`
   stays invisible until the comment/reply row is hovered or focused. */
.cmt-bar {
  display: flex; align-items: center; gap: 2px;
  margin-top: var(--space-inline); margin-left: -8px;
}
.cmt-bar-btn {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  height: 28px; padding: 0 var(--space-inline); border: none; background: none;
  border-radius: var(--r-control); cursor: pointer;
  font: inherit; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3);
  transition: background .13s, color .13s;
}
.cmt-bar-btn .icn { transition: transform .13s; }
.cmt-bar-btn:hover { background: var(--bg-hover); color: var(--ink); }
.cmt-bar-btn:hover .icn { transform: scale(1.08); }
.cmt-bar-btn.on { color: var(--accent); }
.dark .cmt-bar-btn.on { color: var(--lime); }
.cmt-bar-btn.liked { color: #c2506b; }
.cmt-bar-btn.danger:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.cmt-bar-count { font-variant-numeric: tabular-nums; }
.cmt-bar-sep { width: 1px; height: 15px; background: var(--border); margin: 0 var(--space-tight); }

/* react popover anchored to the bar */
.cmt-bar-react-wrap { position: relative; display: inline-flex; }

/* hover-only secondary actions (Edit/Delete) — on comments and on replies */
.cmt-bar-secondary {
  display: inline-flex; align-items: center;
  opacity: 0; transition: opacity .12s ease;
}
.cmt-in:hover .cmt-bar-secondary,
.cmt-in:focus-within .cmt-bar-secondary,
.cmt-reply-item:hover .cmt-bar-secondary,
.cmt-reply-item:focus-within .cmt-bar-secondary {
  opacity: 1;
}
/* touch devices have no hover — keep them reachable */
@media (hover: none) {
  .cmt-bar-secondary { opacity: 1; }
}

/* ── 3. Inline replies (threads under a comment) ────────────────*/
.cmt-replies { margin-top: var(--space-item); display: flex; flex-direction: column; gap: var(--space-item); padding-left: var(--space-group); border-left: 2px solid var(--border-subtle); }
.cmt-reply-item { display: flex; gap: var(--space-inline); }
.cmt-reply-main { flex: 1; min-width: 0; }
.cmt-reply-head { display: flex; align-items: baseline; gap: var(--space-inline); margin-bottom: 2px; }
.cmt-reply-author { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.cmt-reply-time { font-size: var(--t-micro-size); color: var(--ink-4); }
.cmt-reply-text { font-size: var(--t-label-size); line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* per-reply reactions + react affordance — bare glyph, hover-only background
   (matches the Composer Icon Toolbar rule: no permanent border/fill on icons) */
.cmt-reply-foot { display: flex; align-items: center; gap: var(--space-inline); flex-wrap: wrap; margin-top: var(--space-inline); }
.cmt-reply-foot .cmt-reactions { margin-top: 0; }
.cmt-reply-react {
  width: 26px; height: 26px; border-radius: 999px; border: none;
  background: none; color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  transition: background .13s, color .13s, transform .13s;
}
.cmt-reply-react:hover { background: var(--bg-hover); color: var(--accent); transform: none; }

/* edit-box formatting toolbar (Bold/Italic/Underline/Strike/List) */
.cmt-edit-tools { display: flex; align-items: center; gap: 1px; margin-bottom: var(--space-tight); }

/* compact formatting popover used by the inline reply pill, where a full
   toolbar would eat the textarea's width */
.cmt-format-pop { padding: var(--space-tight); }
.cmt-format-row { display: flex; align-items: center; gap: 1px; }

/* a lit format button means the caret is inside that mark
   (.composer-tool.on already carries this treatment in stelaah.css) */
.cmt-reply-tool.on { background: var(--bg-hover); color: var(--accent); }

/* Narrow composers: the toolbar gained a formatting group, so let the send
   cluster drop to its own line instead of clipping off the right edge. The
   hint goes first, since ⌘↵ is a shortcut, not an affordance. */
.composer-toolbar { flex-wrap: wrap; row-gap: var(--space-inline); }
.composer-tools { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 640px) {
  .composer-hint { display: none; }
}

/* rendered bulleted list inside a posted comment/reply — named .cmt-bullets,
   NOT .cmt-list (that class is already the outer comment-feed wrapper) */
.cmt-bullets { margin: var(--space-tight) 0; padding-left: 0; list-style: none; }
.cmt-bullets li { position: relative; padding-left: var(--space-group); margin: 2px 0; }
.cmt-bullets li::before {
  content: ''; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px;
  border-radius: 50%; background: currentColor; opacity: .55;
}

/* reply composer */
.cmt-reply-box {
  display: flex; align-items: center; gap: var(--space-inline); margin-top: var(--space-item); margin-left: var(--space-group);
  padding: var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(32, 33, 36, .04);
  transition: border-color .14s, box-shadow .14s;
}
.cmt-reply-box input {
  flex: 1; min-width: 0; height: 32px; border: none; background: none; outline: none;
  font: inherit; font-size: var(--t-label-size); color: var(--ink);
}
.cmt-reply-box input::placeholder { color: var(--ink-4); }
/* richer compose variant: textarea + tools + staged chips */
.cmt-reply-box.compose { align-items: flex-end; gap: var(--space-inline); padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-item); border-radius: var(--r-card); }
.cmt-reply-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmt-reply-ta {
  width: 100%; border: none; background: none; outline: none; resize: none;
  font: inherit; font-size: var(--t-label-size); line-height: 1.5; color: var(--ink);
  padding: var(--space-tight) 0 var(--space-tight); min-height: 24px; max-height: 120px;
}
.cmt-reply-ta::placeholder { color: var(--ink-4); }
.cmt-reply-staged { display: flex; flex-wrap: wrap; gap: var(--space-inline); padding: 2px 0 var(--space-tight); }
.cmt-reply-tools { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.cmt-reply-tool {
  width: 30px; height: 30px; border-radius: var(--r-control); border: none; background: transparent;
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer; position: relative;
  transition: background .12s, color .12s;
}
.cmt-reply-tool:hover { background: var(--bg-hover); color: var(--accent); }
.cmt-reply-send {
  flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: var(--r-control);
  background: transparent; color: var(--accent); position: relative;
  display: grid; place-items: center; cursor: pointer; transition: background .14s, color .14s, opacity .14s;
}
.cmt-reply-send:hover { background: var(--accent-soft); }
.cmt-reply-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; color: var(--ink-4); }
.cmt-reply-send[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  padding: var(--space-tight) var(--space-inline);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-micro-size);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity .14s ease, transform .14s ease;
}
.cmt-reply-send[data-tip]:hover::after,
.cmt-reply-send[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 4. Full, categorized emoji picker ───────────────────────────
   Apple's own emoji picker pattern: a pinned row of category glyphs up
   top, a scrollable body below grouped into small-caps-labelled sections.
   `.emoji-pop` here is the FloatingPop (s-comments.jsx) content — position
   comes from that component's inline style, this only owns the look. */
.emoji-pop { width: 324px; display: flex; flex-direction: column; min-height: 0; }
.emoji-cat-tabs {
  display: flex; align-items: center; gap: 1px; flex-shrink: 0;
  padding-bottom: var(--space-tight); margin-bottom: var(--space-tight); border-bottom: 1px solid var(--border-subtle);
}
.emoji-cat-tab {
  flex: 1; height: 30px; border: none; background: none; border-radius: var(--r-control);
  font-size: var(--t-strong-size); cursor: pointer; display: grid; place-items: center;
  transition: background .12s ease;
}
.emoji-cat-tab:hover { background: var(--bg-hover); }
.emoji-grid-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.emoji-grid-body::-webkit-scrollbar { width: 8px; }
/* hover-only scrollbar, per the global law in stelaah.css */
.emoji-grid-body::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r-control); border: 2px solid var(--overlay); }
.emoji-grid-body:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
.emoji-cat-hd { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-inline) var(--space-tight) var(--space-tight); }
.emoji-cat-hd:first-child { padding-top: 2px; }
.emoji-pop .emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; }
.mx-emoji-pop { flex-wrap: wrap; max-width: 296px; }

/* ── 5. Task drawer — layout owned by s-task-drawer.css; polish tweaks only ── */
.tdw { width: min(1320px, 97vw); }
.tdw.full { width: min(1520px, 99vw); }
.tdw-rail-sec { padding: var(--space-item) 0; margin-bottom: 0; }
.tdw-rail-hd { letter-spacing: .08em; }
@media (max-width: 1180px){
  .tdw, .tdw.full { width: 100vw; }
  .tdw-body { overscroll-behavior: contain; }
}

/* messages: media in the thread drawer reads as a clean block */
.mx-thr-media { margin-top: var(--space-inline); }
.mx-thr-media .mx-media { margin-top: 0; }

/* messages thread drawer — rich reply composer */
.mx-drawer-foot.thread { padding: var(--space-item) var(--space-item) var(--space-item); }
.mx-thr-composer { display: flex; flex-direction: column; gap: var(--space-inline); }
.mx-thr-staged { display: flex; flex-wrap: wrap; gap: var(--space-inline); }
.mx-thr-composer-row {
  display: flex; align-items: flex-end; gap: var(--space-inline);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-item);
  transition: border-color .14s ease;
}
.mx-thr-composer-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  box-shadow: none;
}
.mx-thr-ta {
  flex: 1; min-width: 0; border: none; background: none; outline: none; resize: none;
  font: inherit; font-size: var(--t-label-size); line-height: 1.5; color: var(--ink);
  padding: var(--space-tight) 0; min-height: 24px; max-height: 110px;
}
.mx-thr-ta:focus-visible { outline: none; }
.mx-thr-ta::placeholder { color: var(--ink-4); }
.mx-thr-tools { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.mx-thr-tool {
  width: 32px; height: 32px; border-radius: var(--r-control); border: none; background: transparent;
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer;
  position: relative; transition: background .12s, color .12s;
}
.mx-thr-tool:hover, .mx-thr-tool.on { background: var(--bg-hover); color: var(--accent); }
.mx-thr-send {
  width: 34px; height: 34px; border: none; border-radius: var(--r-control); margin-left: var(--space-tight);
  background: transparent; color: var(--accent); position: relative;
  display: grid; place-items: center; cursor: pointer; transition: background .14s, color .14s, opacity .14s;
}
.mx-thr-send:hover:not(:disabled) { background: var(--accent-soft); }
.mx-thr-send:disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); cursor: default; color: var(--ink-4); background: transparent; }
.mx-thr-hint {
  font-size: var(--t-micro-size); color: var(--ink-4); padding: 0 var(--space-tight);
  text-align: right;
}
/* thread composer's emoji popover — positioned by window.FloatingPop
   (s-comments.jsx), which portals it and flips/clamps to the viewport;
   this rule only owns the look. */
.mx-emoji-pop.up {
  display: flex; flex-wrap: wrap; gap: 1px; width: 280px; max-height: 200px; overflow-y: auto;
  padding: var(--space-tight); background: var(--overlay); border: 1px solid var(--border-subtle);
  border-radius: var(--r-control); box-shadow: var(--shadow-sm);
}
.mx-emoji-pop.up button {
  width: 30px; height: 30px; border: none; background: none; border-radius: var(--r-control);
  font-size: var(--t-heading-size); cursor: pointer; transition: background .1s, transform .1s;
}
.mx-emoji-pop.up button:hover { background: var(--bg-hover); transform: scale(1.12); }

/* ── 6. Edit/delete on replies — danger affordance ─────────────*/
.cmt-reply-react.danger:hover { color: var(--danger, #c0584e); background: color-mix(in srgb, var(--danger, #c0584e) 8%, var(--surface)); }

/* ── 7. Drag-and-drop onto composers (paste's sibling) ─────────*/
.cmt-composer, .cmt-reply-box.compose, .mx-thr-composer { position: relative; }
.cmt-composer.dragging, .cmt-reply-box.compose.dragging, .mx-thr-composer.dragging {
  outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px; border-radius: var(--r-card);
}
.cmt-drop-veil {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: var(--space-inline);
  font-size: var(--t-caption-size); font-weight: 600; letter-spacing: .01em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-radius: var(--r-card); backdrop-filter: saturate(1.1);
}
.cmt-drop-veil.big { font-size: var(--t-body-size); border-radius: var(--r-card); }


/* stelaah-elevate.css */
/* ════════════════════════════════════════════════════════════════════
   Stelaah — Elevation layer
   Loaded LAST. A thin, system-wide polish pass that lifts every page at
   once: a crafted page-entrance, refined hover micro-interactions, and
   smoother default transitions. Additive only — no layout changes.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Page entrance ───────────────────────────────────────────────────
     Each standard scrolling page (.content-pad) and its top-level blocks
     rise + fade in with a gentle stagger when you navigate. The .content-pad
     subtree is remounted on route change, so this fires once per navigation,
     not on in-page state updates (its direct children are stable structure:
     header, tab bar, section wrappers). Full-bleed apps (canvas, planner,
     messages, inbox, files) don't use .content-pad and stay instant. */
  .content-pad > *, .screen-pad > * {
    animation: stel-rise .46s var(--ease, cubic-bezier(.32,.72,0,1)) both;
  }
  .content-pad > *:nth-child(2), .screen-pad > *:nth-child(2) { animation-delay: 38ms; }
  .content-pad > *:nth-child(3), .screen-pad > *:nth-child(3) { animation-delay: 72ms; }
  .content-pad > *:nth-child(4), .screen-pad > *:nth-child(4) { animation-delay: 102ms; }
  .content-pad > *:nth-child(n+5), .screen-pad > *:nth-child(n+5) { animation-delay: 126ms; }

  @keyframes stel-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── Hover micro-interactions ────────────────────────────────────────
     A single consistent "lift" language for the interactive surfaces that
     today jump on hover without easing. Transform is GPU-cheap; we only
     touch elements that already act as buttons/links. */
  .lrow, .stat-card, .kpi, .dash-stat {
    transition: background var(--t-fast, 120ms) ease,
                box-shadow var(--t-med, 200ms) var(--ease, cubic-bezier(.32,.72,0,1)),
                transform var(--t-med, 200ms) var(--ease, cubic-bezier(.32,.72,0,1)),
                border-color var(--t-fast, 120ms) ease;
  }
}

/* Respect reduced-motion: no entrance, no lift. */
@media (prefers-reduced-motion: reduce) {
  .content-pad > *, .screen-pad > * { animation: none !important; }
}


/* stelaah-editorial.css */
/* ════════════════════════════════════════════════════════════════
   Stelaah — Editorial Calm modernization (loaded last)
   Global polish: serif headers, borderless metric strips, hairline
   structure, borderless collection rows. Complements stelaah.css tokens.
   ════════════════════════════════════════════════════════════════ */

/* ── Page headers: th-title / tasks-head → match PageHead serif ── */
.th-title,
.tasks-head .th-title {
  font-family: var(--font-serif);
  font-size: var(--t-display-size);
  font-weight: 440;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.th-sub,
.tasks-head .th-sub {
  color: var(--ink-3);
  font-size: var(--fs-125);
  margin: 2px 0 0;
  line-height: 1.45;
  max-width: 56ch;
}
.tasks-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-group);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tasks-head > .row,
.tasks-head > .th-actions {
  margin-left: auto;
}

/* PageHead: serif is default in JS; ensure sans override still works */
.page-title:not(.page-title-serif) {
  font-family: var(--font-app);
  font-size: var(--t-title-size);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* ── Legacy KPI strips → borderless hairline stat strips ── */
.ex-kpis,
.dash-stats,
.stat-row-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  padding: 2px 0 var(--space-group);
  border-bottom: 1px solid var(--border-subtle);
}
.ex-kpi,
.dash-stat,
.stat-card.kpi {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--space-tight) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  min-width: 0;
  transform: none !important;
}
.ex-kpi:first-child,
.dash-stat:first-child { padding-left: 2px; }
.ex-kpi + .ex-kpi,
.dash-stat + .dash-stat { border-left: 1px solid var(--border-subtle); }
.ex-kpi-v,
.dash-stat-v {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ex-kpi-k,
.dash-stat-k {
  font-size: var(--t-micro-size);
  color: var(--ink-3);
  margin-top: var(--space-tight);
}
.ex-kpi.billable .ex-kpi-v { color: var(--st-done); }
.ex-kpi.warn .ex-kpi-v,
.ex-kpi.bad .ex-kpi-v { color: var(--st-review); }

/* Email list KPIs — flush strip, not boxed grid */
.em-lkpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  background: none;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
  padding: 2px 0 var(--space-group);
}
.em-lkpi {
  background: none !important;
  padding: var(--space-tight) var(--space-group);
  border: none;
  border-radius: 0;
}
.em-lkpi + .em-lkpi { border-left: 1px solid var(--border-subtle); }
.em-lkpi:first-child { padding-left: 2px; }
.em-lkpi-v {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.015em;
}
.em-lkpi-l {
  font-size: var(--t-micro-size);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}

/* Stat strip icons: bare glyph, no filled tile */
.pmetric-ic,
.ex-kpi-ic {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  color: var(--ink-3);
}

/* ── Insight / side panels: hairlines not card boxes ── */
.ex-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-tight);
}
.ex-ins-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 var(--space-block) var(--space-group) 0;
  box-shadow: none;
}
.ex-ins-card + .ex-ins-card {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-block);
  padding-right: 0;
}
.ex-ins-h {
  font-size: var(--t-micro-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--ink-4);
  margin-bottom: var(--space-item);
}

/* ── Integrations directory styling lives in s-integrations.css (single source);
   the earlier partial override here was removed so it can't half-style the rows. ── */

/* ── Tab bars → calmer command-strip pills ── */
.tax-tabs,
.an-tabs,
.rq-tabs,
.appr-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  flex-wrap: wrap;
  margin-bottom: var(--space-group);
  border-bottom: none;
  padding-bottom: 0;
}
.tax-tab,
.an-tabs > button,
.rq-tabs > button,
.appr-tabs > button {
  height: 32px;
  padding: 0 var(--space-item);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-label-size);
  font-weight: 550;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.tax-tab:hover,
.an-tabs > button:hover,
.rq-tabs > button:hover {
  background: var(--bg-hover);
  color: var(--ink);
}
.tax-tab.on,
.an-tabs > button.on,
.rq-tabs > button.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ── Section labels ── */
.sec-label,
.panel-label,
.rail-label {
  font-size: var(--t-micro-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--ink-4);
  margin: 0 0 var(--space-inline);
}

/* Legacy boxed stats inside scrolling pages → hairline strip cells */
.content-pad .stat {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-tight) var(--space-group);
  transform: none !important;
}
.content-pad > div[style*="gridTemplateColumns"] > .stat + .stat,
.content-pad .stat + .stat {
  border-left: 1px solid var(--border-subtle);
}
.content-pad .stat-ico {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  color: var(--ink-3);
}
.ph-actions .th-div,
.ph-actions .th-life,
.ph-actions .th-icon,
.ph-actions .th-seg,
.ph-actions .th-mine-chip {
  flex-shrink: 0;
}
.ph-actions .th-mine-chip { margin-right: var(--space-tight); }

/* ── Content rhythm ── */
.content-pad {
  padding-bottom: 48px;
}

/* ── Dashboard: lighter widget shells + hairline in-widget stats ── */
.dw {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.dw-hd {
  border-bottom-color: var(--border-subtle);
  margin-bottom: var(--space-item);
  padding-bottom: var(--space-item);
}
.dw-mw-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 2px;
}
.dw-mw-stat {
  align-items: flex-start;
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--space-tight) var(--space-item);
}
.dw-mw-stat:first-child { padding-left: 2px; }
.dw-mw-stat + .dw-mw-stat { border-left: 1px solid var(--border-subtle); }
.dw-mw-stat b {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.015em;
}
.dash-head .page-title { margin: 0; }

/* ── Leads screen: PageHead inside full-bleed shell ── */
.lm-head {
  padding: 20px var(--space-block) var(--space-item);
  border-bottom: 1px solid var(--border-subtle);
}
.lm-head .between { margin-bottom: 0 !important; width: 100%; }
.lm-metric-v {
  font-family: var(--font-serif);
  font-weight: 540;
  letter-spacing: -0.015em;
}

/* ── Pipeline toolbar: flush forecast strip ── */
.pl-toolbar {
  padding: var(--space-item) var(--space-block);
  gap: var(--space-item);
}
.pl-fc-stat { padding: 2px var(--space-group); }
.pl-fc-v {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
}

/* ── Reports: legacy boxed KPI row → hairline strip ── */
.rpt-kpirow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  padding: 2px 0 var(--space-group);
  border-bottom: 1px solid var(--border-subtle);
}
.rpt-kpi {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--space-tight) var(--space-group);
  box-shadow: none;
}
.rpt-kpi:first-child { padding-left: 2px; }
.rpt-kpi + .rpt-kpi { border-left: 1px solid var(--border-subtle); }

@media (max-width: 900px) {
  .ex-kpis,
  .dash-stats,
  .em-lkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-kpi:nth-child(odd),
  .em-lkpi:nth-child(odd) { border-left: none; padding-left: 2px; }
  .ex-insights { grid-template-columns: 1fr; }
  .ex-ins-card + .ex-ins-card {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: var(--space-group);
    margin-top: var(--space-group);
  }
  .dw-mw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-mw-stat:nth-child(odd) { border-left: none; padding-left: 2px; }
  .rpt-kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-kpi:nth-child(odd) { border-left: none; padding-left: 2px; }
}

/* Money overview — compact metric strip (flush; spacing separates cells —
   Hairline Budget 2026-08-29: vertical cell dividers removed, single bottom
   hairline kept). Wrap compensation is padding-only: the strip reflows 4->2 at
   900 and 2->1 at 520, and the first cell of each wrapped ROW must sit on the
   page edge like :first-child. */
.mo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 2px 0 var(--space-group); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-tight); }
.mo-stat { background: none; border: none; border-radius: 0; box-shadow: none; padding: var(--space-tight) 20px; display: flex; flex-direction: column; gap: var(--space-tight); }
.mo-stat:first-child { padding-left: 2px; }
.mo-stat-l { font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-3); margin-bottom: 0; }
.mo-stat-v { font-family: var(--font-serif); font-size: var(--t-title-size); font-weight: 540; letter-spacing: -0.015em; color: var(--ink); line-height: 1; }
.mo-stat-sub { font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-4); margin-top: var(--space-tight); }
.mo { gap: var(--space-section); }
.mo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section); align-items: start; }
.mo-panels { display: flex; flex-direction: column; gap: var(--space-section); }
.mo-card { background: none; border: none; border-radius: 0; box-shadow: none; padding: 20px 0 var(--space-inline); }
.mo-card-h { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-item); }
.mo-card-h .icn { color: var(--ink-4); }
.mo-card-n { margin-left: auto; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-4); background: none; padding: 0; border-radius: 0; }
.mo-od-row { border-radius: var(--r-control); border-top: none; padding: var(--space-inline) 2px; }
.mo-od-row:hover { background: var(--bg-hover); }
.mo-od-remind { background: none; border: 1px solid var(--border-subtle); }

/* Hairline Budget follow-through (2026-08-31): the metric strip above was
   already de-lined, but the panels below it (Morning brief, Aria review,
   A/R aging, Needs follow-up, Cash, Revenue, Client accounts) still carried
   a separate top-border on every one of them PLUS a decorative full-width
   rule next to every section eyebrow PLUS a divider between every list row —
   three redundant line systems stacked on top of the whitespace rhythm that
   was already doing the job. `.mo-grid`'s own 32px section gap (and the new
   `.mo-panels` gap below) is the only separator these sections need; a
   bordered row list only earns a divider when rows are dense enough to
   visually merge (Hairline Budget), which a max-5-row brief or overdue list
   never is. Scoped to the exclusive `.mo`/`.mo-grid`/`.mo-panels`/`.fin-mbrief`/
   `.fin-review` ancestors so Vendors/Retainers/Reports/Automations — which
   share the plain `.fin-panel`/`.fin-review-row`/`.rpt-ov-sec` classes — are
   untouched. */
.fin-mbrief, .fin-review, .mo-panels .fin-panel { border-top: none; padding-top: 0; }
.mo-grid > .rpt-ov-sec { border-top: none; padding-top: 0; }
.fin-mbrief .fin-review-row, .fin-review .fin-review-row { border-top: none; }
.mo-mbrief-cell { border-left: none; }
.mo-mbrief-metrics { row-gap: var(--space-item); }

/* One accent moment on this page (per Editorial Calm — "a primary CTA, an
   AI brief"): Aria's finance review is the single tinted callout on an
   otherwise neutral page, so the eye finds the one panel worth a second
   look instead of every panel competing for it. */
.fin-review { border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); padding: var(--space-group) 20px; }
.fin-review .fin-panel-t { color: var(--ink-2); }
.fin-mbrief .fin-review-row .muted, .fin-review .fin-review-row .muted { transition: transform var(--t-fast), color var(--t-fast); }
.fin-review .fin-review-row:hover .muted { color: var(--accent); transform: translateX(2px); }
.fin-mbrief .fin-review-row:hover .muted { transform: translateX(2px); }

/* Social AI campaign — borderless asset + channel rows */
.sc-asset-tile { border: none; background: none; border-radius: var(--r-md); transition: background .12s; }
.sc-asset-tile:hover { background: var(--bg-hover); }
.sc-channel-row { border: none; background: none; border-radius: var(--r-md); transition: background .12s; min-width: 0; }
.sc-channel-row:hover { background: var(--bg-hover); }

/* Settings — flush hairline sections */
.set-stack { gap: 0 !important; }
.set-sec {
  padding: var(--space-head-above) 2px 0;
  min-width: 0;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  border-radius: 0;
}
.set-stack > .set-sec:first-child,
.set-stack > .bill-sandbox + .set-sec { padding-top: var(--space-tight); }
.set-sec .sec-title {
  font-size: var(--t-micro-size);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--space-head-below);
}
.set-sec-hero {
  background: transparent;
  padding: var(--space-group) 2px 20px;
  border-top: none;
}
.set-sec-hero .h-serif { font-family: var(--font-serif); }
/* ── Settings shell v2 ────────────────────────────────────────────────────
   A true two-pane surface: a secondary rail that does NOT ride the page
   scroll, and a content pane that owns the only scroller. The v1 layout put
   the rail inside `.content` (the app's scroller) and pinned it with
   `position:sticky` — which can never outrun its own scroll container, so
   the rail drifted and the page header scrolled out of reach. Here the route
   is a fixed-height grid: the rail is a sibling of the scroller, not a child.
   Row 1 of `.set2` is intentionally the ONLY thing at full height; nothing
   inside it may set a fixed px height or the pane loses its min-height:0
   escape and the whole grid starts scrolling as one again. */
.set2 {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;

  /* Settings ran on the three SMALLEST rungs of the type scale — 11px section
     labels, 12px descriptions, 13px row titles. That size is defensible on a
     dense working surface you scan (a task list, a table) and wrong on a page
     of prose you sit and read, which is what Settings is: every control here
     carries a sentence explaining it, and those sentences were set two rungs
     below body text.
     Overriding the tokens on the shell rather than editing each rule means the
     whole surface moves together and stays internally proportional — including
     the panels that live in other modules and never knew about this file.
     Line heights move with the sizes; scaling one without the other is how
     bigger text ends up feeling more cramped, not less. */
  --t-micro-size: 12px;   --t-micro-lh: 16px;
  --t-caption-size: 13px; --t-caption-lh: 20px;
  --t-label-size: 14px;   --t-label-lh: 20px;
}
.set2-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: var(--space-group);
  padding: var(--space-block) var(--space-item) var(--space-item);
  border-right: 1px solid var(--border-subtle);
}
.set2-rail-hd { display: flex; flex-direction: column; gap: var(--space-item); padding: 0 var(--space-inline); }
.set2-title {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
/* Search is the escape hatch for "I know the word, not the tab" — it matches
   nav labels AND the per-item keyword index, so "2fa" or "webhook" lands
   somewhere even though neither is a tab name. */
.set2-search { position: relative; display: flex; align-items: center; }
.set2-search-ic { position: absolute; left: var(--space-item); color: var(--ink-4); pointer-events: none; }
.set2-search .input { width: 100%; padding-left: var(--sp-8); }
/* WebKit paints its own clear glyph on type="search"; ours is the styled one. */
.set2-search input[type="search"]::-webkit-search-cancel-button,
.set2-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.set2-search-x {
  position: absolute; right: var(--space-tight);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: none; background: none; border-radius: var(--r-control);
  color: var(--ink-4); cursor: pointer; transition: color .12s, background .12s;
}
.set2-search-x:hover { color: var(--ink); background: var(--bg-hover); }

/* The nav is sized to fit (12 rows max for an owner, 5 for a member) so it
   does not scroll in practice. `auto` rather than `hidden` is deliberate:
   the Any-Size Law says the UI holds at every size, and a 560px-tall window
   must not silently clip the last two rows. The scrollbar is hidden so the
   rail still reads as a fixed panel when it does have to give. */
.set2-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-group);
}
.set2-nav::-webkit-scrollbar { display: none; }
.set2-grp { display: flex; flex-direction: column; gap: 2px; }
.set2-grp-lbl {
  font-size: var(--t-micro-size);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 var(--space-inline) var(--space-tight);
}
.set2-item {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  width: 100%;
  min-width: 0;
  padding: var(--space-inline) var(--space-inline);
  border: none;
  background: none;
  border-radius: var(--r-control);
  font: inherit;
  font-size: var(--t-label-size);
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.set2-item:hover { background: var(--bg-hover); color: var(--ink); }
.set2-item.on { background: var(--bg-active); color: var(--ink); font-weight: 600; }
.set2-item-ic { color: var(--ink-4); flex-shrink: 0; transition: color .12s var(--ease); }
.set2-item:hover .set2-item-ic, .set2-item.on .set2-item-ic { color: var(--ink-2); }
.set2-item-lb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set2-item-n {
  flex-shrink: 0;
  min-width: 20px;
  padding: 0 var(--space-tight);
  border-radius: var(--r-pill);
  background: var(--bg-active);
  color: var(--ink-3);
  font-size: var(--t-micro-size);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.set2-empty { padding: var(--space-item) var(--space-inline); color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.5; }

/* The pane is the only scroller on this route. */
.set2-pane { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Sticky so you always know which section you are in, even 40 rows down a
   long tab. Opaque `--bg` is required: a transparent sticky header lets the
   content slide visibly underneath it. */
.set2-pane-hd {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  padding: var(--space-block) var(--space-section) var(--space-item);
  border-bottom: 1px solid var(--border-subtle);
}
.set2-pane-hd-in { max-width: 800px; }
.set2-pane-t {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.set2-pane-d { margin: var(--space-tight) 0 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.5; max-width: 62ch; }
.set2-pane-body { padding: var(--space-group) var(--space-section) var(--sp-12); max-width: calc(800px + var(--sp-8) + var(--sp-8)); }

@media (max-width: 1180px) {
  .set2 { grid-template-columns: 232px minmax(0, 1fr); }
  .set2-pane-hd { padding-left: var(--space-block); padding-right: var(--space-block); }
  .set2-pane-body { padding-left: var(--space-block); padding-right: var(--space-block); }
}
/* Below 900 the rail folds into a horizontal strip above the pane. The grid
   keeps its fixed height so the pane still owns the scroll — the strip must
   never be pushed off-screen by long content. */
@media (max-width: 900px) {
  .set2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .set2-rail {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-item) var(--space-group);
    gap: var(--space-item);
  }
  .set2-rail-hd { padding: 0; }
  /* The folded strip is short on vertical room and the word "Settings" is
     already on the app tab and in the pane header. Spending a whole row
     saying it a third time is what pushes the actual content below the fold. */
  .set2-title { display: none; }
  .set2-nav { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: var(--space-item); }
  .set2-grp { flex-direction: row; gap: 2px; }
  .set2-grp-lbl { display: none; }
  .set2-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .set2-pane-hd { padding: var(--space-group) var(--space-group) var(--space-item); }
  .set2-pane-body { padding: var(--space-item) var(--space-group) var(--sp-12); }
}
@media (max-width: 640px) {
  .set2-pane-hd { padding-left: var(--space-item); padding-right: var(--space-item); }
  .set2-pane-body { padding-left: var(--space-item); padding-right: var(--space-item); }
}

/* Settings "Advanced" disclosure — collapsed by default, tucks secondary or
   rarely-touched controls out of the primary view per category/feature.
   Same flush hairline language as .set-sec, chevron-rotate like tdw-dgrp. */
.set-adv { margin-top: var(--space-tight); }
.set-adv-hd {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  border: none;
  background: none;
  padding: var(--space-inline) 2px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--t-caption-size);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color .12s, background .12s;
}
.set-adv-hd:hover { color: var(--ink); background: var(--bg-hover); }
.set-adv-chev { color: var(--ink-4); transition: transform .18s var(--ease), color .12s; flex-shrink: 0; }
.set-adv.open .set-adv-chev { transform: rotate(90deg); color: var(--ink-3); }
.set-adv-body { padding-top: var(--space-tight); }
.set-adv-body .set-app-row:first-child { border-top: none; }
/* A section nested inside another section (any block that lives in an Advanced
   group's body) must NOT re-apply .set-sec's 2px optical inset. Applied twice it
   lands that block's content 2px right of every other block on the page, which
   is a second content edge and reads as a wobble down the left margin rather
   than as a mistake — the hardest kind of misalignment to spot by eye and the
   reason the Alignment Law says to measure. Verified: every .set-sec content
   edge resolves to one x. */
.set-sec .set-sec { padding-left: 0; padding-right: 0; }

/* "What is this?" affordance — a quiet 16px glyph beside a label whose wording
   assumes knowledge the reader may not have. Deliberately low contrast: it must
   read as available, never as a warning, and it must never out-weigh the label
   it follows. The bubble itself is portaled by SmartTipHost (s-kit.jsx), which
   is why this survives inside .set2's overflow:hidden shell — a CSS ::after
   bubble would be clipped at the pane edge. */
.set-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-4);
  height: var(--sp-4);
  margin-left: var(--space-tight);
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--r-pill);
  color: var(--ink-4);
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.set-info:hover,
.set-info:focus-visible { color: var(--ink-2); background: var(--bg-hover); }
/* Inside a small-caps section label the glyph would otherwise inherit the
   label's letter-spacing and drift away from the word it belongs to. */
.sec-title .set-info { letter-spacing: normal; }
/* A <label for> must carry only its label text — an interactive control inside
   one is forwarded clicks and folded into the field's accessible name, so the
   glyph sits BESIDE the label rather than within it. */
.set-label-row { display: flex; align-items: center; margin-bottom: var(--space-tight); }
.set-label-row .set-label { margin-bottom: 0; }
/* deep-link arrival flash — gotoSettingsTab(tab, section) scrolls here and adds
   .set-flash for ~1.8s so the block you clicked for identifies itself. A soft
   tint on the block only: no accent bar, no permanent container. */
.set-flash { animation: set-flash-in 1.8s ease-out 1; border-radius: var(--r-md); }
@keyframes set-flash-in {
  0%   { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  70%  { background: color-mix(in srgb, var(--accent) 9%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .set-flash { animation: none; } }
.settings-field-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-group); }
.settings-field-single { max-width: 440px; margin-bottom: var(--space-item); }
.set2-pane-body .input,
.set2-pane-body select,
.set2-pane-body textarea.input { background: var(--surface); }
.set2-pane-body .input:focus,
.set2-pane-body select:focus,
.set2-pane-body textarea.input:focus { background: var(--surface); }
.set-label { display:block; margin-bottom:var(--space-tight); }
.set-help { font-size:var(--t-micro-size); margin-top:var(--space-tight); }
.settings-savebar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-group);
  padding:var(--space-item) 2px var(--space-tight);
  font-size:var(--t-caption-size);
}
.settings-action-row { gap:var(--sp-5); padding:var(--space-tight) 0; }
.settings-honest-state { font-size:var(--t-caption-size); line-height:1.55; margin:0; max-width:560px; }
@media (max-width: 760px) {
  .settings-field-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 640px) {
  .settings-savebar, .settings-action-row { align-items:flex-start; flex-direction:column; }
}
.set-kv {
  font-family: var(--font-serif);
  font-size: var(--t-title-size);
  font-weight: 540;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.set-kv small,
.set-kv .muted { font-family: var(--font-sans, inherit); font-size: var(--t-label-size); font-weight: 500; }

/* Billing → Storage (matches Files storage calm) */
.set-stor-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin-bottom: var(--space-group); flex-wrap: wrap; }
.set-stor-hd .sec-title { margin: 0; }
.set-stor-acts { display: flex; align-items: center; gap: var(--space-item); flex-wrap: wrap; }
.set-stor-link { border: none; background: none; padding: 0; font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-2); cursor: pointer; }
.set-stor-link:hover { color: var(--ink); text-decoration: none; }
.set-stor-link.quiet { color: var(--ink-3); font-weight: 550; }
.set-stor-link.quiet:hover { color: var(--ink); text-decoration: none; }
.set-stor-hero { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-item); margin-bottom: var(--space-inline); min-width: 0; }
.set-stor-plan { display: inline-flex; align-items: baseline; gap: var(--space-tight); border: none; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--ink); flex-shrink: 0; }
.set-stor-plan:hover .set-stor-plan-nm { color: var(--ink-2); }
.set-stor-plan-nm { font-size: var(--t-label-size); font-weight: 600; transition: color .12s; }
.set-stor-meter { height: 5px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.set-stor-meter i { display: block; height: 100%; border-radius: 99px; background: var(--ink-2); transition: width .3s ease; }
.set-stor.lvl-warn .set-stor-meter i { background: var(--c-gold); }
.set-stor.lvl-full .set-stor-meter i { background: var(--c-clay); }
.set-stor-sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-inline); margin-top: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); flex-wrap: wrap; }
.set-stor-warn { color: var(--c-gold); font-weight: 650; }
.set-stor-full { color: var(--c-clay); font-weight: 650; }
.set-stor-meta { display: flex; flex-wrap: wrap; gap: var(--space-inline) var(--space-group); margin-top: var(--space-item); padding-top: var(--space-item); font-size: var(--t-micro-size); color: var(--ink-4); }
.set-stor-meta .warn { color: var(--c-clay); font-weight: 550; }
.set-stor-trash { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); margin-top: var(--space-item); padding-top: var(--space-item); flex-wrap: wrap; }
.set-stor-trash-tx { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-3); min-width: 0; }
.set-stor-trash-tx svg { color: var(--c-clay); flex-shrink: 0; }
.set-stor-trash-tx b { color: var(--ink); font-weight: 650; }
.set-stor-trash-acts { display: inline-flex; align-items: center; gap: var(--space-item); flex-shrink: 0; }
.set-stor-trash.urge .set-stor-trash-tx { color: var(--ink-2); }
.set-stor-trash.clear-warn .set-stor-trash-tx b { color: var(--c-clay); }
/* Settings Billing uses shared .fx-reclaim-strip.settings (styles in s-files.css) */
.set-integ-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-item);
  padding: var(--space-item) 2px;
  border-bottom: 1px solid var(--border-subtle);
}
.set-integ-row:last-child { border-bottom: none; }
.set-integ-row:hover { background: var(--bg-hover); }
.set-integ-main { display: flex; align-items: flex-start; gap: var(--space-item); min-width: 0; flex: 1; }
.set-integ-copy { min-width: 0; }
.set-integ-meta { font-size: var(--t-caption-size); margin-top: 2px; line-height: 1.4; }
.set-integ-desc { font-size: var(--t-caption-size); margin-top: var(--space-tight); line-height: 1.45; max-width: 52ch; }
.set-integ-acts { display: inline-flex; align-items: center; gap: var(--space-item); flex-shrink: 0; padding-top: 2px; }
.set-integ-ic { color: var(--ink-3); flex-shrink: 0; }
.set-saved-row { display: flex; align-items: flex-start; gap: var(--space-item); }
.set-saved-row .icn { color: var(--st-done); flex-shrink: 0; margin-top: 2px; }

/* Settings status · provider rows · device callouts */
.set-status {
  display: inline-flex; align-items: center; gap: var(--space-tight); flex-shrink: 0;
  font-size: var(--t-micro-size); font-weight: 600; padding: 0 2px; border-radius: 0; background: transparent;
}
.set-providers { display: flex; flex-direction: column; gap: 0; }
.set-provider {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-item);
  width: 100%; text-align: left; padding: var(--space-item) 2px; border: none; border-bottom: 1px solid var(--border-subtle);
  border-radius: 0; background: transparent; cursor: pointer; font: inherit; color: inherit;
  transition: background .12s;
}
.set-provider:last-child { border-bottom: none; }
.set-provider:hover { background: var(--bg-hover); }
.set-provider.on { background: transparent; color: var(--ink); }
.set-provider.on .set-provider-nm { color: var(--accent); }
.set-provider-nm { font-weight: 600; font-size: var(--t-label-size); }
.set-provider-meta { font-size: var(--t-micro-size); color: var(--ink-3); margin-top: 2px; }
.set-callout {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-item);
  margin-top: var(--space-item); padding: var(--space-inline) 2px 0; border-top: 1px solid var(--border-subtle); background: transparent; border-radius: 0;
}
.set-warn {
  display: flex; align-items: flex-start; gap: var(--space-inline); margin-top: var(--space-item); padding: var(--space-inline) 2px 0;
  border-top: 1px solid var(--border-subtle); border-radius: 0; background: transparent;
}
.set-stor-plan[data-tip], .seat-btn[data-tip], .seat-pip[data-tip], .set-stor-meter[data-tip] { position: relative; }
.set-stor-plan[data-tip]::after, .seat-btn[data-tip]::after, .seat-pip[data-tip]::after, .set-stor-meter[data-tip]::after,
a.btn.icon[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: var(--bg); font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap; padding: var(--space-tight) var(--space-inline); border-radius: var(--r-control);
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 20; box-shadow: var(--shadow-md);
}
.set-stor-plan[data-tip]:hover::after, .seat-btn[data-tip]:hover::after, .seat-pip[data-tip]:hover::after,
.set-stor-meter[data-tip]:hover::after, a.btn.icon[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
a.btn.icon[data-tip] { position: relative; }

/* Calendar — lighter main surface + flush rail */
.cal-main-card { box-shadow: none !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--r-lg); background: var(--surface); }
.cal-rail-h { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-item); }
.cal-rail-cta { background: none !important; padding-top: 20px !important; }

/* Team — borderless group tiles */
.grp-grid { gap: 0 !important; }
.grp-card { border: none; border-radius: 0; background: none; box-shadow: none; padding: var(--space-group) 2px; border-top: 1px solid var(--border-subtle); transition: background .12s; }
.grp-card:not(.new):hover { box-shadow: none; border-color: transparent; background: var(--bg-hover); }
.grp-card-ic { width: auto; height: auto; border-radius: 0; background: none !important; color: var(--ink-3); }
.grp-card.new { border: none; border-top: 1px dashed var(--border-subtle); border-radius: 0; }
.grp-card.new:hover { border-color: var(--border-subtle); color: var(--ink); }
.grp-card.new .grp-card-ic { color: var(--ink-2); }

/* Projects — list icon, drawer stats, task rows, timeline */
.prow-ic { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; display: flex; align-items: center; }
.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 2px 0 var(--space-item); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-inline); }
/* Each cell is now the edit affordance for the figure it shows (due date,
   budget) or a jump to the tab behind it (open tasks), so the strip is made of
   buttons. It stays a hairline strip: no fill, no border, hover only. */
.pd-stat { padding: var(--space-tight) var(--space-item); border: none; background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; border-radius: var(--r-control); transition: background .12s ease; }
.pd-stat:hover { background: var(--bg-hover); }
.pd-stat + .pd-stat { border-left: 1px solid var(--border-subtle); }
.pd-stat:first-child { padding-left: 2px; }
.pd-stat-v { font-family: var(--font-serif); font-size: var(--t-heading-size); font-weight: 540; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-stat-v.late { color: var(--st-blocked); }
.pd-stat-k { font-size: var(--t-micro-size); color: var(--ink-4); margin-top: var(--space-tight); }
.pd-task-row { display: flex; align-items: center; gap: var(--space-item); padding: var(--space-item) 2px; border-top: 1px solid var(--border-subtle); cursor: pointer; background: none; border-left: none; border-right: none; border-bottom: none; box-shadow: none; border-radius: 0; width: 100%; text-align: left; }
.pd-task-row:hover { background: var(--bg-hover); }
.pm-tasklink { padding-top: 2px; border-top: 1px solid var(--border-subtle); }
.pm-tasklink-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-item); }
.pm-tasklink-title { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.pm-tasklink-copy { margin-top: var(--space-tight); font-size: var(--t-caption-size); line-height: 1.45; color: var(--ink-3); max-width: 390px; }
.pm-tasklink-picker { margin-top: var(--space-item); display: grid; gap: var(--space-inline); }
.pm-tasklink-list { display: grid; border-top: 1px solid var(--border-subtle); }
.pm-tasklink-list.linked { border-top: none; }
.pm-tasklink-row { display: flex; align-items: center; gap: var(--space-inline); min-height: 36px; padding: var(--space-inline) 2px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; color: var(--ink); text-align: left; font-size: var(--t-label-size); }
.pm-tasklink-row.pick { width: 100%; cursor: pointer; }
.pm-tasklink-row.pick:hover, .pm-tasklink-row button:hover { background: var(--bg-hover); }
.pm-tasklink-row > svg { color: var(--ink-3); flex-shrink: 0; }
.pm-tasklink-row button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--r-control); background: none; color: var(--ink-4); cursor: pointer; }
.pm-tasklink-meta { flex-shrink: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-4); font-size: var(--t-micro-size); }
.pm-tasklink-empty { padding: var(--space-inline) 2px; color: var(--ink-4); font-size: var(--t-caption-size); }
.proj-timeline-wrap { border-top: 1px solid var(--border-subtle); }
.proj-timeline-row { padding: var(--space-item) 2px !important; border-bottom: 1px solid var(--border-subtle); border-radius: 0; box-shadow: none !important; }
.proj-timeline-row:hover { background: var(--bg-hover); transform: none !important; }

@media (max-width: 900px) {
  .mo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-stat:nth-child(odd) { padding-left: 2px; }
  .mo-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 520px) {
  .th-title,
  .tasks-head .th-title,
  .page-title-serif { font-size: var(--t-title-size); }
  /* one column: EVERY cell is now the first of its row, so they all sit on the
     page edge. The old :nth-child(odd) reset left the even cells indented 20px
     (and, before the dividers went, showed a stray left-border stub). */
  .mo-stat { padding-left: 2px; }
}

/* The settings info button is a 16px glyph (--sp-4) beside a label, under the
   Any-Size 24px floor (audit UX-016). It is the last undersized control on the
   Settings route once .switch is fixed. Same treatment as .switch and the task
   and file controls: the glyph keeps its size, an invisible centred ::before
   carries the target. It has no ::before of its own; the icon is content. */
.set-info { position: relative; }
.set-info::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}
@media (max-width: 640px) { .set-info::before { width: 44px; height: 44px; } }


/* s-tabs2.css */
/* ===========================================================================
   Stelaah — Live Workspace Contexts: tab states, splits, preview,
   recently-closed, command rows, context dock. Loaded after stelaah.css.
   =========================================================================== */

/* ── tab bar shell ── */
/* Height matches the topbar (--topbar-h) exactly — they sit in the same row
   (.shell-topline) and must line up with zero seam. */
.wtabs { display: flex; align-items: stretch; gap: var(--space-tight); height: var(--topbar-h); padding: 0 var(--space-inline) 0 var(--space-inline); background: var(--bg-sidebar, var(--surface-2)); border-bottom: 1px solid var(--border); user-select: none; position: relative; }
.wtabs-lead { display: flex; align-items: center; gap: var(--space-tight); align-self: center; padding-right: var(--space-inline); margin-right: var(--space-tight); border-right: 1px solid var(--border); }
.wtabs-scroll { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: var(--space-tight); overflow-x: auto; scrollbar-width: none; }
.wtabs-scroll::-webkit-scrollbar { display: none; }
.wtabs-tools { display: flex; align-items: center; gap: var(--space-tight); align-self: center; padding-left: var(--space-inline); border-left: 1px solid var(--border); }
.wtabs-tool { width: 26px; height: 26px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .12s, color .12s; }
.wtabs-tool:hover, .wtabs-tool.on { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.wtabs-tool.off { opacity: .35; cursor: default; }
.wtabs-tool.off:hover { background: none; color: var(--ink-4); }

/* ── a tab ── */
.wtab { display: flex; align-items: center; gap: var(--space-inline); padding: 0 var(--space-inline) 0 var(--space-inline); height: 32px; align-self: flex-end; margin-bottom: -1px; border-radius: var(--r-control) var(--r-control) 0 0; border: 1px solid transparent; border-bottom: none; background: transparent; cursor: pointer; max-width: 180px; position: relative; flex-shrink: 0; transition: background .12s ease; }
.wtab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* Whole-tab pill highlight (David-decided 8/30): the fill covers the FULL tab,
   not just the icon/label ink — supersedes the old Safari-merge treatment,
   which only ever read as "the icon went darker" against a matching page bg. */
.wtab.on { background: var(--bg-sunken, var(--surface-2)); border-color: transparent; box-shadow: none; }
/* tab that's visible in a non-focused split pane — neutral, no color */
.wtab.insplit { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.wtab.insplit:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.wtab.sleeping { opacity: .5; }
.wtab.sleeping:hover { opacity: .82; }
/* explicitly-slept tab: collapses to an icon-only "asleep" chip with a moon badge */
.wtab.slept { padding: 0 var(--space-inline); max-width: none; }
.wtab.slept .wtab-ic { position: relative; }
.wtab-zzz { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface); border-radius: 50%; padding: 1px; line-height: 0; }
/* kept-awake marker — a small eye glyph, never dimmed */
.wtab.awake { opacity: 1; }
.wtab-awake { display: inline-grid; place-items: center; color: var(--accent); flex-shrink: 0; opacity: .8; margin-left: -1px; }

/* every tab shows a clean grey icon; active is a touch darker grey */
.wtab-ic { display: inline-flex; flex-shrink: 0; color: var(--ink-4); }
.wtab.on .wtab-ic, .wtab.focused .wtab-ic { color: var(--ink-2); }
.wtab-udot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #e0903a; box-shadow: 0 0 0 3px color-mix(in srgb, #e0903a 20%, transparent); margin-left: 1px; }
.wtab-l { font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.wtab.on .wtab-l { color: var(--ink); font-weight: 600; }
.wtab.entity .wtab-l { max-width: 130px; }
.wtab-splitbadge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: var(--ink-4); background: color-mix(in srgb, var(--ink) 9%, transparent); flex-shrink: 0; }
.wtab-x { width: 18px; height: 18px; padding: 0; border: none; background: none; border-radius: 5px; color: var(--ink-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; opacity: 0; transition: opacity .12s, background .12s; margin-right: -2px; }
.wtab-x > .icn { display: block; flex-shrink: 0; margin: 0; }
.wtab:hover .wtab-x, .wtab.on .wtab-x { opacity: 1; }
.wtab-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.wtab.pinned { padding: 0 var(--space-inline); max-width: none; }
.wtab.dragging { opacity: .4; }
.wtab-new { width: 26px; height: 26px; align-self: flex-end; margin-bottom: var(--space-tight); margin-left: var(--space-tight); border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.wtab-new:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.wtab-drop { width: 3px; align-self: center; height: 20px; border-radius: 99px; background: var(--accent); flex-shrink: 0; margin: 0 1px; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); animation: wtabDrop .15s ease; }
@keyframes wtabDrop { from { transform: scaleY(.4); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ── the "+" panel: OPEN (features) | JUMP BACK IN (real recents/most-visited).
   Content shell for window.FloatingPop (s-comments.jsx) — that primitive
   supplies the portal, viewport-aware anchor placement and the shared .fpop
   pop-menu animation; this file supplies the look. container-type so the
   680→640px collapse to one column reads the PANEL's own width, never the
   viewport (Any-Size Law: @container for panes independent of the viewport). ── */
.tplus { width: 560px; max-width: calc(100vw - 16px); background: color-mix(in srgb, var(--overlay) 97%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: var(--r-modal); box-shadow: 0 2px 5px rgba(40,28,18,.08), 0 18px 42px -15px rgba(40,28,18,.34), 0 40px 72px -44px rgba(40,28,18,.4); overflow: hidden; container-type: inline-size; }
.tplus-cols { display: grid; grid-template-columns: 1fr 1px 1fr; }
.tplus-div { background: var(--border-subtle); }
.tplus-col { min-width: 0; padding: var(--space-item) var(--space-tight) var(--space-tight); display: flex; flex-direction: column; }
.tplus-label { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); padding: 0 var(--space-inline) var(--space-tight); }
.tplus-sublabel { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); padding: var(--space-inline) var(--space-inline) var(--space-tight); }
.tplus-rows { display: flex; flex-direction: column; max-height: min(50vh, 380px); overflow-y: auto; }
.tplus-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; }
.tplus-row:hover, .tplus-row:focus-visible { background: var(--bg-hover); outline: none; }
.tplus-row-ic { display: inline-flex; flex-shrink: 0; color: var(--ink-3); }
.tplus-row-l { min-width: 0; display: flex; flex-direction: column; }
.tplus-row-t { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink); }
.tplus-row-s { font-size: var(--t-micro-size); color: var(--ink-4); }
.tplus-empty { padding: var(--space-item) var(--space-inline); font-size: var(--t-caption-size); color: var(--ink-4); }
.tplus-foot { border-top: 1px solid var(--border-subtle); padding: var(--space-tight); }
.tplus-search { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; font-size: var(--t-caption-size); font-weight: 550; color: var(--ink-3); cursor: pointer; text-align: left; }
.tplus-search:hover { background: var(--bg-hover); color: var(--ink); }
/* one column, OPEN first, at 640px and below — read from the PANEL, not viewport */
@container (max-width: 640px) {
  .tplus-cols { grid-template-columns: 1fr; }
  .tplus-div { display: none; }
  .tplus-jump { border-top: 1px solid var(--border-subtle); margin-top: var(--space-tight); padding-top: var(--space-item); }
}

/* ── tab right-click menu: rendered through the shared window.showContextMenu
   (s-contextmenu.jsx) as of SET 11 — current design language (blur, r-card,
   pop-menu, viewport clamp), not a bespoke dropdown. Its three custom rows
   (tab color, split-with, layout) use `.menu-custom` + the classes below. ── */
.tplus-swatches { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.tplus-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; transition: transform .1s; }
.tplus-sw:hover { transform: scale(1.12); }
.tplus-sw.on { border-color: var(--ink); }
.tplus-sw.reset { background: var(--bg-sunken, var(--surface-2)); color: var(--ink-4); border-color: var(--border); }
.tplus-splitgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-tight); }
.tplus-splittile { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline); border: none; border-radius: var(--r-control); background: none; color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 550; cursor: pointer; text-align: left; min-width: 0; }
.tplus-splittile:hover { background: var(--accent-soft); color: var(--accent); }
.tplus-layoutpick { display: flex; gap: var(--space-tight); }
.tplus-lp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-inline) var(--space-tight); border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control); color: var(--ink-3); font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; }
.tplus-lp:hover { border-color: var(--accent); color: var(--accent); }
.tplus-lp.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ── rich hover preview (live page render) ── */
.tabprev { position: fixed; z-index: 260; width: 272px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 22px 54px -20px rgba(40,28,20,.45); padding: 0; overflow: hidden; animation: tabprevIn .14s ease; pointer-events: none; }
@keyframes tabprevIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.tabprev-hd { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); }
.tabprev-mini { display: inline-flex; }
.tabprev-title { font-size: var(--t-label-size); font-weight: 700; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabprev-pin { color: var(--ink-4); }
/* the scaled, static, non-interactive page render */
.tabprev-shot { position: relative; width: 100%; overflow: hidden; background: var(--bg, var(--surface-2)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.tabprev-shot-page { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; user-select: none; background: var(--bg, var(--surface)); }
.tabprev-shot-page * { animation: none !important; transition: none !important; }
.tabprev-rows { padding: var(--space-tight) var(--space-item) var(--space-inline); display: flex; flex-direction: column; gap: var(--space-tight); }
.tabprev-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); font-size: var(--t-caption-size); }
.tabprev-row > span { color: var(--ink-4); font-weight: 500; }
.tabprev-row > b { color: var(--ink-2); font-weight: 600; }
.tabprev-foot { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-item); flex-wrap: wrap; }
.tabprev-foot-l { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 600; color: var(--ink-4); }
.tabprev-sel { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; color: var(--accent); margin-left: auto; }
.tabprev-unsaved { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-micro-size); font-weight: 650; color: #c77a2a; }
.tabprev-udot { width: 6px; height: 6px; border-radius: 50%; background: #e0903a; }

/* ── back-button hover history (last few pages, Safari-style) ── */
.backhist { position: fixed; z-index: 260; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 22px 54px -20px rgba(40,28,20,.45); padding: var(--space-tight); animation: tabprevIn .14s ease; }
.backhist-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-tight) var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; cursor: pointer; text-align: left; }
.backhist-row:hover { background: var(--surface-2); }
.backhist-shot { width: 44px; height: 30px; flex-shrink: 0; overflow: hidden; border-radius: 5px; border: 1px solid var(--border-subtle); background: var(--bg, var(--surface-2)); }
.backhist-shot > div * { animation: none !important; transition: none !important; pointer-events: none; }
.backhist-ic { display: inline-flex; flex-shrink: 0; width: 44px; justify-content: center; }
.backhist-label { flex: 1; min-width: 0; font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── recently closed ── */
.wrecent-bd { position: fixed; inset: 0; z-index: 200; }
.wrecent { position: absolute; z-index: 201; right: 8px; top: calc(100% - 4px); width: 264px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-tight); }
.wrecent-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-tight) var(--space-inline) var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); }
.wrecent-clear { border: none; background: none; color: var(--ink-4); font: inherit; font-size: var(--t-micro-size); font-weight: 600; cursor: pointer; }
.wrecent-clear:hover { color: var(--accent); }
.wrecent-list { max-height: 300px; overflow-y: auto; }
.wrecent-row { display: flex; align-items: center; gap: var(--space-inline); width: 100%; padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control); font: inherit; cursor: pointer; text-align: left; }
.wrecent-row:hover { background: var(--surface-2); }
.wrecent-ic { display: inline-flex; flex-shrink: 0; }
.wrecent-l { flex: 1; min-width: 0; font-size: var(--t-label-size); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: baseline; gap: var(--space-inline); }
.wrecent-why { font-size: var(--t-micro-size); font-weight: 500; color: var(--ink-4); letter-spacing: -.005em; flex-shrink: 0; }
.wrecent-t { font-size: var(--t-micro-size); color: var(--ink-4); flex-shrink: 0; }
.wrecent-empty { padding: var(--space-group) var(--space-item); text-align: center; font-size: var(--t-caption-size); color: var(--ink-4); }

/* ── tab switcher sections ── */
.tabsw-sec { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); padding: var(--space-inline) var(--space-item) var(--space-tight); }

/* ===========================================================================
   Generalized split layouts (single / v / h / nest3 / quad), resizable
   =========================================================================== */
.wsp { display: grid; min-height: 0; min-width: 0; overflow: hidden; background: var(--border); }
.wsp-v { grid-template-columns: 1fr 6px 1fr; }
.wsp-h { grid-template-rows: 1fr 6px 1fr; }
.wsp-nest, .wsp-quad { grid-template-rows: 1fr 6px 1fr; }
.wsp-row { display: grid; min-width: 0; min-height: 0; overflow: hidden; gap: 0; }
.wsp-div { background: var(--border); position: relative; z-index: 5; }
.wsp-div.x { cursor: col-resize; }
.wsp-div.y { cursor: row-resize; }
.wsp-div::after { content: ""; position: absolute; inset: -3px; }
.wsp-div:hover { background: var(--accent); }
/* container-type/name so pane CHROME (the bar below) and any future screen
   content can query the pane's own measured width with real @container rules
   — not the viewport (Any-Size Law). This sits ALONGSIDE the existing
   data-pw/data-pane-narrow system below (s-app.jsx usePaneWidthTier): that
   one condenses per-SCREEN content (stat strips, rails, grids) and already
   works; this one is the new pane-CHROME layer plus the named container any
   screen can opt into without a JS/ResizeObserver round-trip. Minimum pane
   width itself is the existing 20%/80% drag-fraction floor in SplitLayout's
   startDrag() clamp — not duplicated here. */
.wsp-pane { container: wsp-pane / inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; position: relative; background: var(--surface); }
.wsp-pane.focused { box-shadow: none; }
.wsp-pane-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); height: 30px; padding: 0 var(--space-inline) 0 var(--space-item); background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wsp-pane.focused .wsp-pane-bar { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.wsp-pane-label { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-pane.focused .wsp-pane-label { color: var(--ink); }
.wsp-pane-ic { display: inline-flex; flex-shrink: 0; color: var(--ink-4); }
.wsp-pane-x { width: 24px; height: 24px; border: none; background: none; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0; }
.wsp-pane-x:hover { background: var(--surface); color: var(--ink); }
/* drop-order at the pane-CHROME level (screen-content drop-order is documented
   with the data-pane-narrow rules further down): the bar's own label text is
   the first thing to go, once a dragged-narrow pane can't fit it plus the
   close button without crowding — icon + close survive at any width. */
@container wsp-pane (max-width: 340px) {
  /* the label's own text is a bare text node after .wsp-pane-ic (no wrapper
     span to target), so collapse it via font-size and restore size on the
     icon — the Icon component sizes its svg from a px prop, not em, so this
     doesn't touch the glyph. */
  .wsp-pane-label { font-size: 0; }
  .wsp-pane-label .wsp-pane-ic { font-size: initial; }
}
.wsp-pane-body { flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
.wsp-pane-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
/* idle-paused split pane — frozen snapshot + resume affordance */
.wsp-sleep { position: absolute; inset: 0; overflow: hidden; cursor: pointer; background: var(--bg); }
.wsp-sleep-snap { transform-origin: top left; pointer-events: none; opacity: .42; filter: saturate(.8); }
.wsp-sleep-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.wsp-sleep-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) var(--space-group); border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.wsp-sleep:hover .wsp-sleep-badge { color: var(--ink); border-color: var(--border-strong); }
/* in split panes, screens shouldn't keep their own page max-width gutters huge */
.wsp-pane-scroll .content-pad, .wsp-pane-scroll .screen-pad { padding: 20px var(--space-block) 56px; }

/* ===========================================================================
   Active context dock — the shared working set
   =========================================================================== */
.ctxdock { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 120; display: flex; align-items: center; gap: var(--space-item); padding: var(--space-inline) var(--space-inline) var(--space-inline) var(--space-item); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 18px 44px -16px rgba(40,28,20,.42); animation: ctxdockIn .2s cubic-bezier(.2,.9,.3,1.2); max-width: 92vw; }
@keyframes ctxdockIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ctxdock-badge { min-width: 22px; height: 22px; padding: 0 var(--space-tight); border-radius: var(--r-control); background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 700; display: inline-grid; place-items: center; }
.ctxdock-sum { display: flex; flex-direction: column; line-height: 1.25; }
.ctxdock-sum b { font-size: var(--t-caption-size); font-weight: 700; color: var(--ink); }
.ctxdock-sum span { font-size: var(--t-micro-size); color: var(--ink-3); }
.ctxdock-acts { display: flex; gap: var(--space-tight); padding-left: var(--space-inline); border-left: 1px solid var(--border); }
.ctxdock-act { display: inline-flex; align-items: center; gap: var(--space-tight); height: 30px; padding: 0 var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-caption-size); font-weight: 600; cursor: pointer; transition: all .12s; }
.ctxdock-act:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ctxdock-clear { width: 28px; height: 28px; border: none; background: none; border-radius: var(--r-control); color: var(--ink-4); cursor: pointer; display: grid; place-items: center; }
.ctxdock-clear:hover { background: var(--surface-2); color: var(--ink); }
.ctxdock-grip { display: flex; align-items: center; gap: var(--space-item); cursor: grab; padding: 2px var(--space-tight) 2px 2px; border-radius: var(--r-control); }
.ctxdock-grip:active { cursor: grabbing; }
.ctxdock-grip:hover { background: var(--surface-2); }

/* ── Schedule day/time popover ── */
.schedpop-scrim { position: fixed; inset: 0; z-index: 121; }
.schedpop { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 122; width: 320px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: 0 22px 54px -18px rgba(40,28,20,.45); padding: var(--space-item); animation: ctxdockIn .16s ease; }
.schedpop-hd { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--t-label-size); font-weight: 700; color: var(--ink); margin-bottom: var(--space-item); }
.schedpop-days { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline); margin-bottom: var(--space-item); }
.schedpop-day { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: var(--space-inline) var(--space-item); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.schedpop-day:hover { border-color: var(--ink-4); }
.schedpop-day.on { border-color: var(--accent); background: var(--accent-soft); }
.schedpop-day span { font-size: var(--t-caption-size); font-weight: 650; color: var(--ink); }
.schedpop-day small { font-size: var(--t-micro-size); color: var(--ink-4); }
.schedpop-day.on small { color: var(--accent); }
.schedpop-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); margin-bottom: var(--space-inline); }
.schedpop-lbl { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.schedpop-date, .schedpop-time { height: 32px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-caption-size); padding: 0 var(--space-inline); cursor: pointer; }
.schedpop-date:focus, .schedpop-time:focus { outline: none; border-color: var(--accent); }
.schedpop-foot { display: flex; justify-content: flex-end; gap: var(--space-inline); margin-top: var(--space-item); }

/* ── drag-to-split edge zones (drag a tab to a screen edge → new pane) ── */
.wtab-splitzones { position: fixed; z-index: 150; pointer-events: none; }
.wtab-splitzone { position: absolute; pointer-events: auto; display: grid; place-items: center; transition: background .12s, box-shadow .12s; }
.wtab-splitzone.left { left: 0; top: 0; bottom: 0; width: 28%; }
.wtab-splitzone.right { right: 0; top: 0; bottom: 0; width: 28%; }
.wtab-splitzone.top { left: 28%; right: 28%; top: 0; height: 42%; }
.wtab-splitzone.bottom { left: 28%; right: 28%; bottom: 0; height: 42%; }
.wtab-splitzone.over { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.wtab-splitzone-hint { display: flex; flex-direction: column; align-items: center; gap: var(--space-tight); padding: var(--space-item) var(--space-group); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--ink-2); font-size: var(--t-caption-size); font-weight: 650; opacity: 0; transform: scale(.92); transition: opacity .12s, transform .12s; }
.wtab-splitzone.over .wtab-splitzone-hint { opacity: 1; transform: scale(1); color: var(--accent); border-color: var(--accent); }

/* ── split divider drag mask (kills flaky pane-content interception) ── */
.wsp-dragmask { position: fixed; inset: 0; z-index: 200; }
.wsp-div.on { background: var(--accent); }

/* ── drop the working set onto a Canvas pane ── */
.wsp-pane.dropover { box-shadow: inset 0 0 0 2px var(--accent); }
.wsp-pane-drop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; }
.wsp-pane-drop-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: var(--space-group) var(--space-block); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--shadow-lg); color: var(--accent); font-size: var(--t-label-size); font-weight: 650; }

/* ── documents multi-select (mirrors into the Active Context) ── */
.dl-card.ctxsel { outline: 2px solid var(--accent); outline-offset: 1px; }
.dl-card.ctxsel .dl-thumb { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.dl-row.ctxsel { background: var(--accent-soft); }

/* dark-mode niceties */
.dark .ctxdock, .dark .tabprev, .dark .wrecent { box-shadow: 0 22px 54px -18px rgba(0,0,0,.6); }

/* =========================================================================
   Dark mode — more dynamic & stylish (additive, respects the charcoal aesthetic)
   ========================================================================= */
/* faint cool-charcoal depth + top light on the working area */
.dark .main-col { background:
  radial-gradient(140% 90% at 88% -8%, rgba(150,170,210,.05), transparent 55%),
  radial-gradient(120% 80% at 0% 100%, rgba(150,140,210,.035), transparent 50%),
  var(--bg); }
.dark .sidebar { background:
  linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar) 88%, #20222b), var(--bg-sidebar) 38%); }
/* glassy elevation: a 1px top sheen on cards & elevated surfaces */
.dark .card, .dark .modal, .dark .fxo-card, .dark .menu, .dark .acct,
.dark .wrecent, .dark .tabprev, .dark .schedpop, .dark .ctxdock {
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%); }
.dark .topbar { background:
  linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar) 80%, #000), var(--bg-sidebar)); }
.dark .shell-topline > .topbar { background: transparent; }
/* primary buttons get a subtle vertical sheen + soft glow */
.dark .btn.primary { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 18px -8px rgba(0,0,0,.6); }
.dark .wtab.on { background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%); }
/* accent-tinted text selection */
.dark ::selection { background: color-mix(in srgb, var(--lime) 32%, transparent); color: var(--ink); }
/* gentle lift on interactive cards in dark */
.dark .card { transition: box-shadow .2s, transform .2s, border-color .2s; }

/* =========================================================================
   Chart polish — meters/bars get a soft gradient + crisp rounding everywhere
   ========================================================================= */
.fxo-typemeter i, .fxo-folder-bar i, .fx-folder-bar i { background-image: none; }
.fxo-stackbar { box-shadow: inset 0 0 0 1px var(--border-subtle); }
.fxo-stackbar i, .fxo-typemeter i, .fxo-folder-bar i { position: relative; }
.fxo-stackbar i { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); }
.dark .apexcharts-tooltip { box-shadow: var(--shadow-lg) !important; border-color: var(--border-strong) !important; }
.apexcharts-bar-area, .apexcharts-candlestick-area { filter: saturate(1.05); }

/* Modal open animation: see stelaah.css `.modal.mc` (modalPop) — single source. */

/* collection/folder hero glyph — show the folder artwork without the tinted box */
.fx-hero-ico.glyph { background: none !important; width: auto !important; height: auto !important; display: inline-flex; align-items: center; }

/* =========================================================================
   Pane-aware condensation — show only what matters in the room a pane has
   -------------------------------------------------------------------------
   A media query measures the VIEWPORT. Split a 1440px window in two and each
   pane is ~692px, but every `@media (max-width: 900px)` rule in the app still
   reads 1440 and lays the screen out for a desktop that isn't there: page
   subtitles and 4-up grids at full size, right rails competing for a column,
   table columns sheared off at the pane edge.

   SplitLayout stamps each pane with its own measured width as data-pw
   (sm < 640 · md < 900 · lg — the canonical breakpoints from DESIGN.md), so
   these rules read the pane the way the media queries read the window. Same
   condensation the app already applies on a narrow phone; it just fires on the
   right measurement. Selector lists below are lifted from the matching
   viewport rules in stelaah.css deliberately — one definition of "what drops
   first", two ways of reaching it.

   `!important` mirrors the viewport rules being overridden (they carry it too),
   and .sgrid variants are repeated at full specificity because .sgrid.dense is
   (0,2,0) — see the note above .sgrid in stelaah.css.
   ========================================================================= */

/* ---- narrow (sm + md): any pane under 900px, incl. the common 50/50 split ---- */
[data-pane-narrow] .content-pad,
[data-pane-narrow] .screen-pad { padding: var(--sp-6) var(--sp-6) var(--sp-12); }

/* The page description reads once, on arrival. In a half-width pane it costs a
   line of the title block for something the user already knows, so it goes
   first — the title and the actions are what stay. */
[data-pane-narrow] .page-sub { display: none; }
[data-pane-narrow] .page-title-serif { font-size: var(--t-title-size); }
[data-pane-narrow] .ph-actions { width: 100%; justify-content: flex-start !important; }

/* A right rail needs its own column; a pane has one column of real estate. */
[data-pane-narrow] .with-rail { grid-template-columns: minmax(0, 1fr); }
[data-pane-narrow] .with-rail > .rail { display: none; }

[data-pane-narrow] .sgrid { --grid-cols: 2; }
[data-pane-narrow] .sgrid.dense { --grid-cols: 3; }
[data-pane-narrow] .sgrid.wide { --grid-cols: 1; }

[data-pane-narrow] .tmetrics,
[data-pane-narrow] .mstats,
[data-pane-narrow] .pmetrics,
[data-pane-narrow] .plan-stats,
[data-pane-narrow] .rpt-kpirow,
[data-pane-narrow] .mo-stats,
[data-pane-narrow] .tm-stats,
[data-pane-narrow] .emp-stats,
[data-pane-narrow] .dos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

[data-pane-narrow] .field-row,
[data-pane-narrow] .ws-method-grid,
[data-pane-narrow] .acct-plans,
[data-pane-narrow] .pd-cv-grid,
[data-pane-narrow] .appr-meta-grid,
[data-pane-narrow] .docblk-columns,
[data-pane-narrow] .docblk-columns.three,
[data-pane-narrow] .dw-fin-cols,
[data-pane-narrow] .dw-proj-leads,
[data-pane-narrow] .md-facts,
[data-pane-narrow] .role-grid,
[data-pane-narrow] .pto-typegrid,
[data-pane-narrow] .team-pto-grid,
[data-pane-narrow] .mkt-stats,
[data-pane-narrow] .mkt-grid2,
[data-pane-narrow] .mo-grid,
[data-pane-narrow] .dw-mw-stats,
[data-pane-narrow] .pd-ov-boards-row,
[data-pane-narrow] .pd-ov-cfiles,
[data-pane-narrow] .dos-gallery,
[data-pane-narrow] .act-side-stats,
[data-pane-narrow] .sd-overview,
[data-pane-narrow] .sd-files,
[data-pane-narrow] .sd-metarow,
[data-pane-narrow] .act-layout,
[data-pane-narrow] .cp-layout,
[data-pane-narrow] .ks-cols { grid-template-columns: minmax(0, 1fr) !important; }
[data-pane-narrow] .act-rail-side { display: none; }
[data-pane-narrow] .cp-preview { grid-column: auto; position: static; }

/* ---- sm: a pane dragged past the 20% floor, or a phone-width window ---- */
[data-pw="sm"] .content-pad,
[data-pw="sm"] .screen-pad { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
[data-pw="sm"] .sgrid,
[data-pw="sm"] .sgrid.wide { --grid-cols: 1; }
[data-pw="sm"] .sgrid.dense { --grid-cols: 2; }


/* s-connected-experience.css */
.task-title-smart{position:relative}.task-title-smart .input{padding-right:128px}.task-due-ghost{position:absolute;right:7px;top:50%;transform:translateY(-50%);height:28px;display:inline-flex;align-items:center;gap:var(--space-tight);border:0;border-radius:var(--r-control);padding:0 var(--space-inline);background:var(--bg-sunken);color:var(--ink-2);font-family:inherit;font-size:var(--t-micro-size);font-weight:600;line-height:1;cursor:pointer}.task-due-ghost span{padding-left:var(--space-tight);border-left:1px solid var(--border-subtle);color:var(--ink-4);font-size:var(--t-micro-size)}.task-due-ghost:hover{background:var(--surface-hover)}
.dt-row:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;background:var(--surface-hover)}
.dt-row:focus-visible:after{content:'E edit   C comment   A assign';position:absolute;right:44px;top:50%;transform:translateY(-50%);padding:var(--space-tight) var(--space-inline);border-radius:6px;background:var(--surface);box-shadow:0 2px 10px rgba(24,24,20,.09);color:var(--ink-3);font-size:var(--t-micro-size);letter-spacing:.02em;white-space:pre;pointer-events:none}.dt-row{position:relative}
@media(max-width:640px){.task-title-smart .input{padding-right:var(--space-item)}.task-due-ghost{position:static;transform:none;margin-top:var(--space-tight)}.dt-row:focus-visible:after{display:none}}
@media(prefers-reduced-motion:reduce){.task-due-ghost{transition:none}}
.pl-stage-grip{color:var(--ink-4);opacity:0;transition:opacity 180ms ease-out;cursor:grab}.pl-col-hd:hover .pl-stage-grip,.pl-col-hd:focus-within .pl-stage-grip{opacity:1}.pl-col-hd:active .pl-stage-grip{cursor:grabbing}
.md-action-proposal{display:flex;align-items:center;gap:var(--space-tight)}.md-action-dismiss{border:0;background:transparent;color:var(--ink-4);font-size:var(--t-micro-size);cursor:pointer}.md-action-dismiss:hover{color:var(--ink-2)}.md-ai-source{color:var(--ink-4);font-size:9.5px}.md-recap-empty>.btn+.btn{margin-left:var(--space-inline)}.md-recap-empty.dropping{outline:1px solid var(--accent);outline-offset:-3px;background:var(--accent-soft)}
/* Topbar voice capture — a bare mic glyph (matches every other .tb-icon-btn);
   holding it slides out a live status capsule to the left instead of jumping
   straight into a modal, so there's an honest "you're being heard" moment
   before anything opens. The capsule is absolutely positioned and
   pointer-events:none so it never reflows or steals input from neighbours. */
.tb-voice{position:relative;display:inline-flex;align-items:center}
.tb-voice-slide{position:absolute;top:50%;right:calc(100% + 6px);transform:translateY(-50%);display:flex;align-items:center;gap:var(--space-inline);height:28px;padding:0;border-radius:999px;background:var(--ink);color:var(--surface);white-space:nowrap;overflow:hidden;max-width:0;opacity:0;pointer-events:none;transition:max-width .22s var(--ease,ease-out),opacity .16s var(--ease,ease-out),padding .22s var(--ease,ease-out)}
.tb-voice.listening .tb-voice-slide{max-width:220px;opacity:1;padding:0 var(--space-item)}
.tb-voice-dot{width:6px;height:6px;border-radius:50%;background:#db665a;flex:none;animation:voice-pulse 1s ease-out infinite}
.tb-voice-live{font-size:var(--t-micro-size);font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.voice-review-note{color:var(--ink-4);font-size:var(--t-micro-size)}.voice-tips{display:flex;flex-wrap:wrap;gap:var(--space-inline);margin-top:-4px}.voice-tip{display:inline-flex;align-items:center;gap:var(--space-tight);height:28px;padding:0 var(--space-inline) 0 var(--space-inline);border:1px solid var(--border);background:var(--surface);border-radius:99px;font:inherit;font-size:var(--t-micro-size);font-weight:550;color:var(--ink-2);cursor:pointer;transition:background .14s ease-out,border-color .14s ease-out,color .14s ease-out}.voice-tip:hover{background:var(--bg-hover);border-color:var(--border-strong,var(--border));color:var(--ink)}.voice-tip>.icn{color:var(--ink-4)}.voice-tip:hover>.icn{color:var(--accent)}@keyframes voice-pulse{50%{opacity:.35}}
.voice-capture-review{display:flex;flex-direction:column;gap:var(--space-item)}.voice-capture-transcript{border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--bg-sunken);color:var(--ink-3)}.voice-capture-transcript summary{padding:var(--space-inline) var(--space-item);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.voice-capture-transcript p{max-height:130px;overflow:auto;margin:0;padding:0 var(--space-item) var(--space-item);font-size:var(--t-caption-size);line-height:1.55;white-space:pre-wrap}.voice-capture-items{border-top:1px solid var(--border-subtle)}.voice-capture-item{display:flex;flex-direction:column;gap:var(--space-inline);padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.voice-capture-item.filed{opacity:.62}.voice-capture-item.has-error{box-shadow:inset 2px 0 0 var(--st-blocked);padding-left:var(--space-item)}.voice-capture-item-head{display:grid;grid-template-columns:auto 24px minmax(150px,220px) 1fr;align-items:center;gap:var(--space-inline)}.voice-capture-item-head .fkit-control{min-width:74px}.voice-capture-kind-icon{display:grid;width:24px;height:24px;place-items:center;color:var(--accent)}.voice-capture-confidence{justify-self:end;color:var(--ink-4);font-size:var(--t-micro-size);font-weight:650}.voice-capture-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-inline)}.voice-capture-fields.one{grid-template-columns:minmax(220px,1fr)}.voice-capture-evidence{color:var(--ink-4);font-size:var(--t-micro-size);line-height:1.45}.voice-capture-evidence>span{margin-right:var(--space-tight);color:var(--accent);font-size:var(--t-micro-size);font-weight:750;letter-spacing:.055em;text-transform:uppercase}.voice-capture-item-error,.voice-capture-error{display:flex;align-items:flex-start;gap:var(--space-inline);color:var(--st-blocked);font-size:var(--t-caption-size)}.voice-capture-error{padding:var(--space-item) 0}.voice-capture-item-error>.icn,.voice-capture-error>.icn{flex:none;margin-top:1px}.voice-capture-review>.voice-review-note{padding-top:var(--space-tight)}
@media(max-width:760px){.tb-voice.listening .tb-voice-slide{max-width:120px}.tb-voice-live{max-width:80px}}
@media(max-width:640px){.voice-capture-item-head{grid-template-columns:auto 24px minmax(0,1fr)}.voice-capture-confidence{display:none}.voice-capture-fields,.voice-capture-fields.one{grid-template-columns:1fr}.voice-capture-item.has-error{padding-left:var(--space-inline)}}
@media(prefers-reduced-motion:reduce){.tb-voice-slide{transition:none}.tb-voice-dot{animation:none}}
.uat-scrub{margin:0 0 20px;padding:var(--space-item) var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--bg-sunken)}.uat-scrub-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-item);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.055em;text-transform:uppercase}.uat-scrub-head span{display:flex;align-items:center;gap:var(--space-tight)}.uat-scrub-head b{font-size:var(--t-micro-size)}.uat-ribbon{position:relative;height:3px;margin:0 var(--space-tight);background:var(--border);border-radius:99px}.uat-ribbon-point{position:absolute;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border:2px solid var(--bg-sunken);border-radius:50%;background:var(--ink-4);transition:width 180ms ease-out,height 180ms ease-out,background 180ms ease-out}.uat-ribbon-point.passed{background:var(--accent)}.uat-ribbon-point.current{width:11px;height:11px}.uat-range{display:block;width:calc(100% + 4px);height:22px;margin:-12px -2px var(--space-inline);opacity:.001;cursor:ew-resize}.uat-scrub-current{display:flex;align-items:center;gap:var(--space-inline);width:100%;border:0;padding:var(--space-tight) 0 0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.uat-scrub-current:disabled{cursor:default}.uat-scrub-current>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}.uat-scrub-current small{color:var(--ink-4);font-size:var(--t-micro-size)}.uat-scrub-current b{overflow:hidden;font-size:var(--t-caption-size);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.uat-scrub-current>svg{color:var(--ink-4)}
.tcon-lead{justify-content:space-between}.tcon-lead>span:first-child{display:flex;align-items:center;gap:var(--space-inline)}.tcon-switch{display:inline-flex;padding:2px;border-radius:var(--r-control);background:var(--bg-sunken)}.tcon-switch button{border:0;border-radius:5px;padding:var(--space-tight) var(--space-inline);background:transparent;color:var(--ink-4);font-family:inherit;font-size:9.5px;font-weight:650;line-height:1.2;cursor:pointer}.tcon-switch button.on{background:var(--surface);box-shadow:0 1px 3px rgba(25,24,21,.08);color:var(--ink-2)}.tcon-map{position:relative;min-height:284px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--r-card);background:radial-gradient(circle at center,color-mix(in srgb,var(--accent-soft) 42%,transparent),transparent 48%),var(--bg-sunken)}.tcon-map>svg{position:absolute;inset:0;width:100%;height:100%}.tcon-map line{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:2 3}.tcon-node{position:absolute;display:flex;max-width:112px;align-items:center;gap:var(--space-tight);transform:translate(-50%,-50%);border:1px solid var(--border-subtle);border-radius:999px;padding:var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight);background:var(--surface);box-shadow:none;color:var(--ink-2);font-family:inherit;font-size:var(--t-micro-size);font-weight:600;line-height:1.15;cursor:pointer;transition:border-color 180ms ease-out}.tcon-node:hover{transform:translate(-50%,-50%);border-color:var(--border-strong)}.tcon-node>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcon-node.center{z-index:2;max-width:150px;padding:var(--space-tight) var(--space-inline) var(--space-tight) var(--space-tight);color:var(--ink);font-size:var(--t-micro-size)}.tcon-node-ic{display:grid;width:auto;height:auto;flex:none;place-items:center;border-radius:0;background:transparent;color:var(--accent)}
.timeline-search-form{display:grid;grid-template-columns:1fr auto;gap:var(--space-inline)}.timeline-search-meta{margin:var(--space-group) 0 var(--space-inline);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:650;letter-spacing:.035em;text-transform:uppercase}.timeline-search-results{max-height:470px;overflow:auto;border-top:1px solid var(--border-subtle)}.timeline-search-results>button{display:grid;width:100%;grid-template-columns:86px 62px minmax(0,1fr) 18px;align-items:center;gap:var(--space-inline);border:0;border-bottom:1px solid var(--border-subtle);padding:var(--space-item) var(--space-tight);background:transparent;color:var(--ink-2);text-align:left;cursor:pointer}.timeline-search-results>button:hover{background:var(--surface-hover)}.timeline-search-date{color:var(--ink-4);font-size:var(--t-micro-size)}.timeline-search-type{color:var(--accent);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.timeline-search-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.timeline-search-copy b,.timeline-search-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-search-copy b{font-size:var(--t-caption-size)}.timeline-search-copy small{color:var(--ink-4);font-size:var(--t-micro-size)}.timeline-search-results>button>svg{color:var(--ink-4)}.timeline-search-empty{display:flex;min-height:190px;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-tight);color:var(--ink-4)}.timeline-search-empty b{color:var(--ink-2);font-size:var(--t-label-size)}.timeline-search-empty span{font-size:var(--t-micro-size)}.gx-live-viewing{display:inline-flex;align-items:center;gap:var(--space-tight);margin-right:2px;color:var(--ink-3);font-size:var(--t-micro-size);font-weight:650;white-space:nowrap}.gx-live-viewing>span{width:6px;height:6px;border-radius:50%;background:var(--st-done);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-done) 14%,transparent)}
.doc-live-viewing{display:inline-flex;align-items:center;gap:var(--space-tight);color:var(--ink-3);font-size:var(--t-micro-size);font-weight:650;white-space:nowrap}.doc-live-viewing>span{width:6px;height:6px;border-radius:50%;background:var(--st-done);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-done) 14%,transparent)}.doc-public{position:fixed;inset:0;z-index:9999;overflow:auto;padding:28px 20px 72px;background:#f5f3ee;color:#25251f}.doc-public>header{display:flex;max-width:760px;align-items:center;gap:var(--space-inline);margin:0 auto 26px}.doc-public>header>span{display:grid;width:34px;height:34px;place-items:center;border-radius:var(--r-control);background:#30312b;color:#fff;font:700 14px/1 Georgia,serif}.doc-public>header>div{display:flex;flex-direction:column}.doc-public>header b{font-size:var(--t-caption-size)}.doc-public>header small{color:#797970;font-size:var(--t-micro-size)}.doc-public-paper{box-sizing:border-box;max-width:760px;min-height:70vh;margin:auto;padding:64px 72px 80px;border:1px solid rgba(44,44,38,.1);border-radius:var(--r-card);background:#fff;box-shadow:0 12px 36px rgba(34,33,29,.06)}.doc-public-eyebrow{margin-bottom:var(--space-item);color:#87877d;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.doc-public-paper>h1{margin:0 0 20px;font:500 38px/1.1 Georgia,serif;letter-spacing:-.025em}.doc-public-paper h2{margin:var(--space-section) 0 var(--space-inline);font:600 22px/1.25 Georgia,serif}.doc-public-paper h3{margin:var(--space-block) 0 var(--space-inline);font-size:var(--t-strong-size)}.doc-public-paper p{margin:0 0 var(--space-item);color:#48483f;font:400 14px/1.7 system-ui,sans-serif}.doc-public-rule{width:46px;height:2px;margin-bottom:var(--space-section);background:#7b826b}.doc-public-paper blockquote{margin:20px 0;padding:var(--space-tight) 0 var(--space-tight) var(--space-group);border-left:2px solid #a7ad98;color:#5d5f52;font:italic 16px/1.55 Georgia,serif}.doc-public-list{display:grid;grid-template-columns:18px 1fr;gap:var(--space-tight)}.doc-public-list>span{padding-top:var(--space-tight);color:#7b826b;font-size:var(--t-caption-size)}.doc-public-state{display:flex;max-width:760px;min-height:420px;align-items:center;justify-content:center;flex-direction:column;margin:auto;border:1px solid rgba(44,44,38,.1);border-radius:var(--r-card);background:#fff;color:#77776e}.doc-public-state h1{margin:var(--space-item) 0 var(--space-tight);font:500 24px/1.2 Georgia,serif}.doc-public-state p{margin:0;font-size:var(--t-caption-size)}@media(max-width:640px){.doc-public-paper{padding:var(--space-page) var(--space-block) 56px}.doc-public-paper>h1{font-size:var(--t-display-size)}.doc-live-viewing{width:7px;overflow:hidden}.doc-live-viewing>span{flex:0 0 6px}}
@media(max-width:640px){.timeline-search-results>button{grid-template-columns:62px minmax(0,1fr) 18px}.timeline-search-type{display:none}.tcon-map{min-height:250px}.gx-live-viewing{width:7px;overflow:hidden}.gx-live-viewing>span{flex:0 0 6px}}
@media(prefers-reduced-motion:reduce){.uat-ribbon-point,.tcon-node{transition:none}}
.scx{padding-top:2px}.scx-head{display:flex;align-items:center;gap:var(--space-inline);margin-bottom:var(--space-inline);color:var(--ink-2);font-size:var(--t-caption-size);font-weight:650}.scx-head>.icn{color:var(--accent)}.scx-head>span:last-child:not(:first-of-type){margin-left:auto;color:var(--ink-4);font-size:var(--t-micro-size)}.scx-group{margin:0 0 var(--space-item)}.scx-group-h{display:flex;align-items:center;justify-content:space-between;margin:0 2px var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.scx-group-h>span:last-child{font-variant-numeric:tabular-nums}.scx-row{display:flex;width:100%;align-items:center;gap:var(--space-inline);border:0;border-radius:var(--r-control);padding:var(--space-inline) var(--space-tight);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--t-caption-size);text-align:left;cursor:pointer}.scx-row:hover{background:var(--bg-hover);color:var(--ink)}.scx-row>.icn:first-child{color:var(--ink-4);flex:none}.scx-row>.icn:last-child{color:var(--ink-4);flex:none}.scx-sub{max-width:110px;color:var(--ink-4);font-size:var(--t-micro-size)}.scx-empty{padding:var(--space-inline) 2px;color:var(--ink-4);font-size:var(--t-caption-size)}.scx.compact .scx-head{display:none}.scx-inspector{width:310px;flex:0 0 310px}.scx-inspector .inset-inspector-hd{display:flex;align-items:center;justify-content:space-between}.scx-inspector .inset-inspector-hd>div{display:flex;flex-direction:column;gap:2px}.scx-eyebrow{color:var(--ink-4);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.scx-close{border:0;background:transparent;color:var(--ink-4);cursor:pointer}.scx-body{padding:var(--space-item)}

/* Meeting drawer — make-anything shelf, threaded ask, and generated-result modal.
   Cards are one flat surface with a hairline; no gradients, no left accent bars. */
/* The shelf lives inside a drawer, so it must react to the DRAWER's width,
   not the viewport's. A .sgrid here would go to six columns at desktop while
   the drawer stayed ~480px wide. Fixed column counts on a container query,
   never an auto-fit track. */
.md-mk{container-type:inline-size}
.md-mk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-inline)}
@container (min-width: 420px){ .md-mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width: 680px){ .md-mk-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.md-mk-card{display:flex;align-items:flex-start;gap:var(--space-inline);width:100%;text-align:left;padding:var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-card);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:background .12s,border-color .12s}
.md-mk-card:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border)}
.md-mk-card:disabled{cursor:default;background:var(--disabled-bg);border-color:var(--disabled-border);color:var(--disabled-fg)}
.md-mk-card:disabled .md-mk-ic{background:transparent;color:var(--disabled-fg)}
.md-mk-card:disabled .md-mk-tx b,.md-mk-card:disabled .md-mk-tx span{color:var(--disabled-fg)}
.md-mk-card.busy:disabled{background:var(--surface);border-color:var(--border-subtle)}
.md-mk-card.busy:disabled .md-mk-tx b{color:var(--ink)}
.md-mk-card.busy:disabled .md-mk-tx span,.md-mk-card.busy:disabled .md-mk-ic{color:var(--ink-3)}
.md-mk-ic{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-control);background:var(--bg-active);color:var(--ink-2)}
.md-mk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.md-mk-tx b{font-size:var(--t-caption-size);font-weight:650;color:var(--ink)}
.md-mk-tx span{font-size:var(--t-micro-size);color:var(--ink-3);line-height:1.45}
.md-askturn{margin-bottom:var(--space-inline)}
.md-askturn-q{font-size:var(--t-micro-size);font-weight:650;color:var(--ink-3);margin-bottom:var(--space-tight)}
.md-mkres-name{font-size:var(--t-strong-size);font-weight:650;color:var(--ink);margin-bottom:var(--space-tight)}
.md-mkres-doc{font-size:var(--t-caption-size);color:var(--ink);line-height:1.62;max-height:52vh;overflow-y:auto}
.md-mkres-doc p{margin:0 0 var(--space-inline)}
.md-mkres-doc p:last-child{margin-bottom:0}
.md-mkres-list{display:flex;flex-direction:column;gap:var(--space-tight);max-height:52vh;overflow-y:auto}
.md-mkres-row{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-item);border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface)}
.md-mkres-row.pick{cursor:pointer;transition:background .12s,border-color .12s}
.md-mkres-row.pick:hover{background:var(--bg-hover)}
.md-mkres-row.pick.on{border-color:var(--accent)}
.md-mkres-dot{width:5px;height:5px;flex:0 0 5px;margin-top:var(--space-tight);border-radius:50%;background:var(--ink-4)}
.md-mkres-t{font-size:var(--t-caption-size);color:var(--ink);line-height:1.5}
.md-zoomimp{display:inline-flex;align-items:center;gap:var(--space-tight);margin-bottom:var(--space-inline)}
.md-zoomimp:disabled{cursor:default;color:var(--disabled-fg)}
.md-mkres-note{margin-top:var(--space-item)}
/* A cited timestamp inside an Aria answer. A button, because it jumps the audio;
   styled as inline text so a paragraph still reads as a paragraph. */
.md-cite{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.md-cite:hover{color:var(--accent-700)}

/* Meeting history: what was said, and what is still owed. Shared by the project
   and client drawers. Hairlines and rhythm, no card boxes around the rows. */
.mh{display:flex;flex-direction:column;gap:var(--space-item)}
.mh-owe{padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle)}
.mh-owe-h{display:flex;align-items:center;gap:var(--space-tight);margin-bottom:var(--space-inline);font-size:var(--t-caption-size);color:var(--ink-2)}
.mh-owe-h>span{color:var(--ink-4);font-size:var(--t-micro-size)}
.mh-owe-row{display:flex;align-items:flex-start;gap:var(--space-inline);width:100%;padding:var(--space-tight) 0;border:0;background:none;font:inherit;cursor:pointer;border-radius:var(--r-control);transition:background .12s}
.mh-owe-row:hover{background:var(--bg-hover)}
.mh-owe-t{display:block;font-size:var(--t-caption-size);color:var(--ink);line-height:1.45}
.mh-ask{padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle)}


/* s-platform.css */
/* Stelaah — Control Center (platform console). Editorial Calm: hairlines,
   borderless rows, serif headers, one accent moment per view. */

/* Control Center content must never depend on the global .content-pad entrance
   animation (stel-rise) to be visible — these are dense operator screens, and a
   starved/late animation frame would otherwise leave them at opacity:0. Render
   them solid; no entrance fade. */
.cc-root .content-pad > *,
.cc-main .content-pad > *,
.cc-root .content > *{ animation:none !important; opacity:1 !important; transform:none !important; }

/* ───────────────────────── shell ───────────────────────── */
.control-host-shell{ min-height:100vh; height:100dvh; background:var(--bg); color:var(--ink); }
.control-host-shell .cc-root{ height:100dvh; }
.cc-root{
  display:grid; grid-template-columns:248px 1fr; height:100%;
  overflow:hidden; background:var(--bg); user-select:none;
}
.cc-rail{
  display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--border); background:var(--bg-sidebar, var(--surface));
}
.cc-rail-hd{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-group) var(--space-group) var(--space-group); border-bottom:1px solid var(--border-subtle); }
.cc-rail-badge{ width:auto; height:auto; border-radius:0; display:grid; place-items:center;
  background:transparent; color:var(--accent); flex-shrink:0; }
.cc-rail-titles{ min-width:0; }
.cc-rail-title{ font-family:var(--font-serif); font-size:var(--t-strong-size); line-height:1.15; color:var(--ink); }
.cc-rail-sub{ font-size:var(--t-micro-size); color:var(--ink-4); margin-top:1px; letter-spacing:.02em; }
.cc-rail-nav{ flex:1; min-height:0; overflow-y:auto; padding:var(--space-inline) var(--space-inline); display:flex; flex-direction:column; gap:1px; }
.cc-command-trigger{ display:flex; align-items:center; gap:var(--space-inline); margin:var(--space-inline) var(--space-inline) 0; padding:0 var(--space-item); min-height:36px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink-3); font:600 12px/1 var(--font-body); cursor:pointer; text-align:left; }
.cc-command-trigger:hover{ border-color:var(--ink-4); color:var(--ink); }
.cc-command-trigger span{ flex:1; }
.cc-command-trigger kbd,.cc-command-help kbd,.cc-command-input kbd{ border:1px solid var(--border-subtle); border-radius:var(--r-sm); background:var(--bg-sunken); color:var(--ink-4); font:600 10px/1 var(--font-mono,monospace); padding:var(--space-tight) var(--space-inline); }
.cc-rail-group+.cc-rail-group{ margin-top:var(--space-group); }
.cc-rail-group-label{ padding:0 var(--space-item) var(--space-tight); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cc-rail-item{
  display:flex; align-items:center; gap:var(--space-item); width:100%; padding:0 var(--space-item); height:38px;
  border-radius:var(--r-control); background:transparent; border:0; cursor:pointer; color:var(--ink-2);
  font-size:var(--t-label-size); font-weight:500; text-align:left; transition:background .15s ease, color .15s ease;
}
.cc-rail-item:hover{ background:var(--bg-sunken); color:var(--ink); }
.cc-rail-item.on{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--ink); font-weight:600; }
.cc-rail-item.on svg{ color:var(--accent); }
.cc-command-modal .modal-body{ padding:var(--space-group); }
.cc-command-input{ display:flex; align-items:center; gap:var(--space-item); min-height:48px; padding:0 var(--space-group); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink-4); }
.cc-command-input:focus-within{ border-color:var(--accent); }
.cc-command-input input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:500 15px/1.3 var(--font-body); }
.cc-command-results{ max-height:min(56vh,520px); overflow:auto; margin-top:var(--space-group); border-top:1px solid var(--border-subtle); }
.cc-command-result{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--space-item); width:100%; min-height:60px; padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); border-radius:var(--r-md); background:transparent; color:var(--ink-3); text-align:left; cursor:pointer; }
.cc-command-result:hover,.cc-command-result.on{ background:var(--bg-hover); color:var(--ink); }
.cc-command-result>span:first-of-type{ display:flex; flex-direction:column; gap:var(--space-tight); min-width:0; }
.cc-command-result b{ color:var(--ink); font-size:var(--t-label-size); font-weight:650; }
.cc-command-result em{ overflow:hidden; color:var(--ink-4); font-size:var(--t-caption-size); font-style:normal; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.cc-command-kind{ color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cc-command-empty{ display:flex; min-height:180px; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-inline); color:var(--ink-4); text-align:center; }
.cc-command-empty b{ color:var(--ink); }
.cc-command-help{ display:flex; align-items:center; gap:var(--space-group); padding-top:var(--space-item); color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-command-help span{ display:inline-flex; align-items:center; gap:var(--space-tight); }
.cc-soon{ font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4);
  background:var(--bg-sunken); padding:2px var(--space-tight); border-radius:5px; }
.cc-rail-foot{ border-top:1px solid var(--border-subtle); padding:var(--space-group); display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-exit{ display:flex; align-items:center; gap:var(--space-tight); background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:var(--t-caption-size); font-weight:500; padding:0; }
.cc-exit:hover{ color:var(--ink); }
.cc-override{ display:flex; align-items:center; justify-content:space-between; }
.cc-override-lbl{ font-size:var(--t-micro-size); color:var(--ink-4); }
/* .cc-toggle renders through the shared switch skin (stelaah.css -> LEGACY
   TOGGLE SKINS). It used to be a --r-control rectangle rather than a pill,
   which is why Control Center's toggles never looked like the app's. */

.cc-main{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.cc-main > .content{ height:100%; }

/* Shared Control Center operations */
.cc-audit-tools{ display:flex; align-items:center; gap:var(--space-item); flex-wrap:wrap; margin-bottom:var(--space-group); }
.cc-audit-tools .cc-search{ flex:1; min-width:min(100%,300px); }
.cc-audit-table{ border-top:1px solid var(--border); }
.cc-audit-table-head,.cc-audit-table-row{ display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(180px,1fr) 150px 170px 20px; align-items:center; gap:var(--space-item); }
.cc-audit-table-head{ padding:var(--space-inline) var(--space-tight); border-bottom:1px solid var(--border-subtle); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.cc-audit-table-row{ width:100%; min-height:64px; padding:var(--space-item) var(--space-tight); border:0; border-bottom:1px solid var(--border-subtle); border-radius:var(--r-md); background:transparent; color:var(--ink-3); text-align:left; cursor:pointer; }
.cc-audit-table-row:hover{ background:var(--bg-hover); }
.cc-audit-table-action,.cc-audit-table-actor{ display:flex; flex-direction:column; gap:var(--space-tight); min-width:0; }
.cc-audit-table-action b,.cc-audit-table-actor b{ overflow:hidden; color:var(--ink); font-size:var(--t-label-size); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.cc-audit-table-action em,.cc-audit-table-actor em{ overflow:hidden; color:var(--ink-4); font-size:var(--t-micro-size); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.cc-audit-seal{ display:inline-flex; align-items:center; gap:var(--space-tight); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:650; }
.cc-audit-seal.sealed{ color:var(--st-done,#5c7349); }
.cc-audit-seal.local{ color:var(--st-warn,#a26a21); }
.cc-audit-table-time{ color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-audit-detail{ display:flex; flex-direction:column; gap:var(--space-block); }
.cc-audit-detail p{ color:var(--ink-2); font-size:var(--t-label-size); line-height:1.6; white-space:pre-wrap; }
.cc-audit-facts{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-audit-facts>div{ min-width:0; padding:var(--space-item) 0; }
.cc-audit-facts>div:nth-child(even){ padding-left:var(--space-group); border-left:1px solid var(--border-subtle); }
.cc-audit-facts span,.cc-audit-facts b{ display:block; overflow-wrap:anywhere; }
.cc-audit-facts span{ color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cc-audit-facts b{ margin-top:var(--space-tight); color:var(--ink); font-size:var(--t-caption-size); font-weight:650; }
.cc-audit-evidence pre{ max-height:300px; overflow:auto; padding:var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-sunken); color:var(--ink-2); font:11px/1.55 var(--font-mono,monospace); white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.cc-edu-boundary{ display:flex; align-items:flex-start; gap:var(--space-item); margin-bottom:var(--space-block); padding:var(--space-item) 0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); color:var(--ink-3); }
.cc-edu-boundary svg{ flex:none; color:var(--accent); margin-top:var(--sp-optical); }
.cc-edu-boundary p{ max-width:82ch; font-size:var(--t-caption-size); line-height:1.55; }
.cc-edu-section+.cc-edu-section{ margin-top:var(--space-section); }
.cc-edu-list{ border-top:1px solid var(--border); }
.cc-edu-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-group); width:100%; min-height:76px; padding:var(--space-item) var(--space-tight); border:0; border-bottom:1px solid var(--border-subtle); border-radius:var(--r-md); background:transparent; color:var(--accent); text-align:left; cursor:pointer; }
.cc-edu-row:hover{ background:var(--bg-hover); }
.cc-edu-row>span{ display:flex; min-width:0; flex-direction:column; gap:var(--space-tight); }
.cc-edu-row b{ color:var(--ink); font-size:var(--t-body-size); font-weight:650; }
.cc-edu-row em{ color:var(--ink-4); font-size:var(--t-caption-size); font-style:normal; line-height:1.45; }
.cc-edu-flow{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-group); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--space-block) 0; }
.cc-edu-flow>svg{ color:var(--ink-4); }
.cc-edu-flow>div{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-edu-flow b{ color:var(--ink); font-size:var(--t-label-size); }
.cc-edu-flow span{ color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.5; }

/* denied */
.cc-denied{ display:grid; place-items:center; height:100%; }
.cc-denied-card{ text-align:center; max-width:420px; padding:var(--space-section); }
.cc-denied-ic{ display:inline-grid; place-items:center; width:auto; height:auto; border-radius:0;
  background:transparent; color:var(--ink-3); margin-bottom:var(--space-group); }
.cc-denied-card h1{ font-size:var(--t-title-size); margin-bottom:var(--space-inline); }
.cc-denied-card p{ color:var(--ink-3); font-size:var(--t-body-size); line-height:1.55; margin-bottom:20px; }
.cc-denied-actions{ display:flex; justify-content:center; align-items:center; gap:var(--space-inline); flex-wrap:wrap; }

/* stub */
.cc-stub{ max-width:560px; margin:0 auto; padding:64px var(--space-section); text-align:center; }
.cc-stub-ic{ display:inline-grid; place-items:center; width:auto; height:auto; border-radius:0;
  background:transparent; color:var(--accent); margin-bottom:var(--space-group); }
.cc-stub h2{ font-size:var(--t-title-size); margin-bottom:var(--space-inline); }
.cc-stub-desc{ color:var(--ink-3); font-size:var(--t-body-size); line-height:1.55; margin-bottom:28px; }
.cc-stub-next{ text-align:left; border-top:1px solid var(--border); padding-top:20px; }
.cc-eyebrow{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--space-item); }
.cc-stub-next ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-item); }
.cc-stub-next li{ display:flex; align-items:flex-start; gap:var(--space-inline); font-size:var(--t-body-size); color:var(--ink-2); line-height:1.45; }
.cc-stub-next li svg{ color:var(--accent); flex-shrink:0; margin-top:2px; }
.cc-stub-foot{ margin-top:28px; font-size:var(--t-caption-size); color:var(--ink-4); }

/* ───────────────────────── shared bits ───────────────────────── */
.cc-metrics{ display:flex; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:var(--space-block); }
.cc-metric{ flex:1; padding:var(--space-group) var(--space-tight) var(--space-group) 0; }
.cc-metric + .cc-metric{ border-left:1px solid var(--border-subtle); padding-left:var(--space-group); }
.cc-metric-v{ font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1; color:var(--ink); }
.cc-metric-l{ font-size:var(--t-caption-size); color:var(--ink-4); margin-top:var(--space-tight); }

.cc-toolbar{ display:flex; align-items:center; gap:var(--space-item); margin-bottom:var(--space-item); flex-wrap:wrap; }
.cc-toolbar-note{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-toolbar-note code{ font-family:var(--font-mono, monospace); font-size:var(--t-micro-size); background:var(--bg-sunken); padding:1px var(--space-tight); border-radius:4px; color:var(--ink-3); }
.cc-search{ display:flex; align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-4); min-width:220px; }
.cc-search:focus-within{ border-color:var(--accent); }
.cc-search-in{ border:0; background:none; outline:none; font-size:var(--t-label-size); color:var(--ink); flex:1; min-width:0; }
.cc-search-x{ border:0; background:none; cursor:pointer; color:var(--ink-4); display:grid; place-items:center; padding:0; }
.cc-search-x:hover{ color:var(--ink); }

/* ───────────────────────── messaging promo codes ───────────────────────── */
.cc-promo-th,.cc-promo-row{ grid-template-columns:minmax(180px,1.25fr) 96px 110px minmax(210px,1.4fr) 74px; }
.cc-promo-drawer{ gap:var(--space-group); }
.cc-promo-summary{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 0 var(--space-item); border-bottom:1px solid var(--border-subtle); }
.cc-promo-summary-main{ font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-promo-picks{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-promo-picks button{ height:30px; padding:0 var(--space-item); border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:650; cursor:pointer; }
.cc-promo-picks button:hover{ color:var(--ink); border-color:var(--border-strong,var(--border)); }
.cc-promo-picks button.on{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); background:color-mix(in srgb,var(--accent) 8%,transparent); }
@media (max-width:760px){ .cc-promo-th{ display:none; } .cc-promo-row{ grid-template-columns:1fr; align-items:flex-start; gap:var(--space-tight); } }

/* ───────────────────────── marketplace ───────────────────────── */
.cc-market-page{ overflow-y:auto; }
.cc-market-tabs{ display:flex; align-items:center; gap:var(--space-tight); border-bottom:1px solid var(--border); margin-bottom:var(--space-group); }
.cc-market-tabs button{ display:inline-flex; align-items:center; gap:var(--space-inline); height:38px; padding:0 var(--space-item); border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-3); font-size:var(--t-label-size); font-weight:600; cursor:pointer; }
.cc-market-tabs button:hover{ color:var(--ink); }
.cc-market-tabs button.on{ color:var(--ink); border-bottom-color:var(--accent); }
.cc-market-tabs span{ min-width:20px; height:20px; border-radius:var(--r-control); display:grid; place-items:center; background:var(--bg-sunken); color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-market-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); margin-bottom:var(--space-item); }
.cc-market-filterstack{ display:flex; flex-direction:column; gap:var(--space-inline); min-width:0; }
.cc-market-filters{ display:flex; align-items:center; gap:var(--space-tight); flex-wrap:wrap; }
.cc-market-filters button{ display:inline-flex; align-items:center; gap:var(--space-tight); height:30px; padding:0 var(--space-inline); border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:600; cursor:pointer; }
.cc-market-filters button.on, .cc-market-filters button:hover{ border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.cc-market-filters.sub button{ height:28px; font-size:var(--t-micro-size); }
.cc-market-table{ display:flex; flex-direction:column; }
.cc-market-table.assets-tbl .cc-market-head, .cc-market-table.assets-tbl .cc-market-row{ grid-template-columns:minmax(220px,1.5fr) 170px 130px 105px minmax(210px,auto); }
.cc-market-head, .cc-market-row{ display:grid; grid-template-columns:minmax(220px,1.5fr) 150px 92px 100px 100px minmax(170px,auto); align-items:center; gap:var(--space-item); }
.cc-market-head{ padding:0 var(--space-inline) var(--space-inline); border-bottom:1px solid var(--border); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cc-market-row{ min-height:62px; padding:var(--space-inline); border-bottom:1px solid var(--border-subtle); border-radius:var(--r-control); }
.cc-market-row:hover{ background:var(--bg-sunken); }
.cc-market-main{ display:flex; align-items:center; gap:var(--space-item); min-width:0; }
.cc-market-main > svg{ color:var(--ink-3); flex:none; }
.cc-market-main span{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-market-main b{ font-size:var(--t-label-size); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-market-main small{ font-size:var(--t-micro-size); color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-market-select{ width:100%; height:30px; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:var(--t-caption-size); padding:0 var(--space-inline); outline:none; }
.cc-market-select:focus{ border-color:var(--accent); }
.cc-market-status{ display:inline-flex; align-items:center; width:max-content; height:24px; padding:0 var(--space-inline); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:700; text-transform:capitalize; }
.cc-market-status.published{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 13%,transparent); }
.cc-market-status.paused{ color:#9a7a35; background:color-mix(in srgb,#9a7a35 13%,transparent); }
.cc-market-status.unpublished{ color:#9a7a35; background:color-mix(in srgb,#9a7a35 13%,transparent); }
.cc-market-status.review, .cc-market-status.submitted{ color:#3f6ea3; background:color-mix(in srgb,#3f6ea3 13%,transparent); }
.cc-market-status.rejected{ color:#b5563f; background:color-mix(in srgb,#b5563f 13%,transparent); }
.cc-market-status.draft{ color:var(--ink-3); background:var(--bg-sunken); }
.cc-market-status.builtin{ color:var(--ink-2); background:var(--bg-sunken); }
.cc-market-check-spacer{ display:inline-block; width:16px; flex-shrink:0; }
.cc-market-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-inline); flex-wrap:wrap; }
.cc-market-iconbtn{ width:auto; height:auto; display:grid; place-items:center; border-radius:0; border:none; background:transparent; color:var(--ink-3); cursor:pointer; transition:color .12s; flex:none; padding:var(--space-tight); }
.cc-market-iconbtn:hover:not(:disabled){ color:var(--accent); border-color:transparent; }
.cc-market-iconbtn:disabled{ color:var(--disabled-fg); cursor:not-allowed; }
.cc-market-iconbtn.on{ color:#c79a2e; border-color:color-mix(in srgb,#c79a2e 45%,var(--border)); background:color-mix(in srgb,#c79a2e 10%,transparent); }
.cc-market-featpill{ display:inline-flex; align-items:center; gap:var(--space-tight); margin-left:var(--space-inline); padding:1px var(--space-inline); border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#c79a2e; background:color-mix(in srgb,#c79a2e 13%,transparent); vertical-align:middle; }
.cc-market-sales{ display:inline-flex; align-items:baseline; gap:var(--space-tight); white-space:nowrap; border:0; background:none; font:inherit; padding:2px var(--space-tight); margin:-2px -4px; border-radius:var(--r-control); cursor:pointer; transition:background .12s; }
button.cc-market-sales:hover{ background:var(--bg-active,var(--bg-sunken)); }
.cc-market-sales b{ font-size:var(--t-label-size); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.cc-market-sales em{ font-style:normal; font-size:var(--t-micro-size); font-weight:700; color:var(--st-done,#5c7349); }
/* sales detail modal */
.cc-sales-detail{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-sales-head{ display:flex; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cc-sales-head > div{ flex:1; padding:var(--space-item) var(--space-tight) var(--space-item) 0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-sales-head > div + div{ border-left:1px solid var(--border-subtle); padding-left:var(--space-group); }
.cc-sales-head b{ font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1; color:var(--ink); }
.cc-sales-head span{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-sales-rows{ display:flex; flex-direction:column; }
.cc-sales-row{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) var(--space-tight); border-bottom:1px solid var(--border-subtle); }
.cc-sales-row:last-child{ border-bottom:0; }
.cc-sales-av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--bg-sunken); color:var(--ink-4); flex:none; }
.cc-sales-who{ font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.cc-sales-date{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-sales-amt{ margin-left:auto; font-size:var(--t-label-size); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.cc-sales-badge{ font-size:var(--t-micro-size); font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#b5563f; background:color-mix(in srgb,#b5563f 12%,transparent); padding:2px var(--space-inline); border-radius:6px; }
.cc-sales-row.refunded .cc-sales-who, .cc-sales-row.refunded .cc-sales-amt{ color:var(--ink-4); text-decoration:line-through; }
/* ── earnings tab ── */
.cc-earn{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-earn-head{ display:flex; align-items:stretch; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cc-earn-stat{ flex:1; padding:var(--space-group) 20px var(--space-group) 0; display:flex; flex-direction:column; gap:var(--space-tight); min-width:0; }
.cc-earn-l{ font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.cc-earn-v{ font-family:var(--font-serif); font-size:var(--t-display-size); color:var(--ink); line-height:1; }
.cc-earn-spark{ margin-top:var(--space-tight); }
.cc-earn-side{ display:flex; border-left:1px solid var(--border-subtle); flex:none; }
.cc-earn-side > div{ padding:var(--space-group) 20px; display:flex; flex-direction:column; gap:var(--space-tight); justify-content:center; }
.cc-earn-side > div + div{ border-left:1px solid var(--border-subtle); }
.cc-earn-side b{ font-family:var(--font-serif); font-size:var(--t-title-size); color:var(--ink); line-height:1; }
.cc-earn-side span{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-earn-note{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-inline); border-radius:var(--r-control); font-size:var(--t-micro-size); color:var(--ink-4); background:var(--bg-sunken); }
.cc-earn-bytpl-h{ font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--space-tight); }
.cc-earn-amt{ font-variant-numeric:tabular-nums; }
.cc-market-table.earn-tbl .cc-market-head, .cc-market-table.earn-tbl .cc-market-row{ grid-template-columns:minmax(220px,1.6fr) 100px 130px 120px minmax(110px,auto); }
@media (max-width:940px){
  .cc-earn-head{ flex-direction:column; }
  .cc-earn-side{ border-left:0; border-top:1px solid var(--border-subtle); flex-direction:row; }
}

/* ───────────────────────── demo program ───────────────────────── */
.cc-demo-state{ min-height:220px; display:flex; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--ink-4); }
.cc-demo-state.error{ color:var(--danger); flex-wrap:wrap; }
.cc-demo-master{ margin-top:var(--space-group); }
.cc-demo-masterline{ display:flex; align-items:center; gap:20px; justify-content:space-between; padding:var(--space-tight) 0 var(--space-group); }
.cc-demo-mastercopy{ display:flex; flex-direction:column; gap:var(--space-tight); min-width:0; }
.cc-demo-mastercopy b{ color:var(--ink); font-size:var(--t-strong-size); }
.cc-demo-mastercopy span,.cc-demo-note{ color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.55; }
.cc-demo-actions,.cc-demo-rowactions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-inline); flex-wrap:wrap; }
.cc-demo-settings{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-group); padding-top:var(--space-group); border-top:1px solid var(--border-subtle); }
.cc-demo-settings label{ display:flex; flex-direction:column; gap:var(--space-tight); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.02em; }
.cc-demo-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-item); flex-wrap:wrap; margin:20px 0 var(--space-item); }
.cc-demo-empty{ min-height:120px; display:flex; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--ink-4); }
.cc-demo-rows{ display:flex; flex-direction:column; }
.cc-demo-row{ display:grid; grid-template-columns:minmax(260px,1.4fr) minmax(180px,.75fr) minmax(250px,auto); gap:var(--space-group); align-items:center; padding:var(--space-group) 2px; border-bottom:1px solid var(--border-subtle); }
.cc-demo-row:last-child{ border-bottom:0; }
.cc-demo-person,.cc-demo-life{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-demo-person b{ color:var(--ink); font-size:var(--t-body-size); }
.cc-demo-person span,.cc-demo-life small{ color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-demo-person em{ color:var(--ink-3); font-size:var(--t-caption-size); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-demo-life small.err{ color:var(--danger); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.cc-demo-status{ align-self:flex-start; display:inline-flex; padding:var(--space-tight) var(--space-inline); border-radius:999px; background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:750; text-transform:capitalize; }
.cc-demo-status.s-invited,.cc-demo-status.s-activated,.cc-demo-status.s-ready{ background:#eef5ea; color:#3f7043; }
.cc-demo-status.s-failed,.cc-demo-status.s-manual_review{ background:#faf1e4; color:#9a5b16; }
.cc-demo-status.s-revoked,.cc-demo-status.s-expired{ background:#f1efec; color:#7d746c; }
.cc-demo-operators{ margin-top:20px; }
.cc-demo-operator{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.4fr) auto; align-items:center; gap:var(--space-item); padding:var(--space-item) 2px; border-bottom:1px solid var(--border-subtle); }
.cc-demo-operator>div:first-child{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-demo-operator b{ font-size:var(--t-label-size); color:var(--ink); }
.cc-demo-operator span{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-demo-scopechips{ display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.cc-demo-scopechips span{ padding:var(--space-tight) var(--space-inline); border-radius:6px; background:var(--bg-sunken); font-family:var(--font-mono,monospace); font-size:9.5px; color:var(--ink-3); }
.cc-demo-pending{ display:flex; flex-direction:column; gap:var(--space-tight); margin-top:var(--space-item); padding:var(--space-item) var(--space-group); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-4); font-size:var(--t-caption-size); }
.cc-demo-pending b{ color:var(--ink); }
.cc-demo-drawer{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-demo-scopegrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-inline); }
.cc-demo-scopegrid label{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline); border:1px solid var(--border-subtle); border-radius:var(--r-control); cursor:pointer; }
.cc-demo-scopegrid input{ margin-top:2px; accent-color:var(--accent); }
.cc-demo-scopegrid span{ display:flex; flex-direction:column; gap:2px; }
.cc-demo-scopegrid b{ font-size:var(--t-caption-size); color:var(--ink); }
.cc-demo-scopegrid em{ font:10px var(--font-mono,monospace); color:var(--ink-4); }
.cc-demo-drawer .drawer-actions{ display:flex; justify-content:flex-end; gap:var(--space-inline); padding-top:var(--space-tight); }
@media(max-width:900px){
  .cc-demo-settings{ grid-template-columns:1fr; }
  .cc-demo-masterline{ align-items:flex-start; flex-direction:column; }
  .cc-demo-row,.cc-demo-operator{ grid-template-columns:1fr; }
  .cc-demo-actions,.cc-demo-rowactions{ justify-content:flex-start; }
  .cc-demo-scopegrid{ grid-template-columns:1fr; }
}
/* ── coupons tab ── */
.cc-market-table.coup-tbl .cc-market-head, .cc-market-table.coup-tbl .cc-market-row{ grid-template-columns:minmax(140px,1fr) 110px 140px 100px 100px minmax(180px,auto); }
.cc-coup-form{ gap:var(--space-group); }
.cc-coup-code{ height:36px; padding:0 var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:var(--t-body-size); font-weight:700; letter-spacing:.02em; font-family:var(--font-mono,monospace); outline:none; }
.cc-coup-code:focus{ border-color:var(--accent); }
.cc-coup-num{ height:34px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:var(--t-label-size); outline:none; }
.cc-coup-num:focus{ border-color:var(--accent); }
.cc-pub-modes.cc-coup-scope{ grid-template-columns:repeat(2,minmax(0, 1fr)); margin-top:var(--space-tight); }
.cc-coup-tpllist{ display:flex; flex-wrap:wrap; gap:var(--space-inline); margin-top:var(--space-inline); max-height:150px; overflow-y:auto; padding:2px; }
.cc-coup-tpllist em{ font-style:normal; font-size:var(--t-caption-size); color:var(--ink-4); }
/* bulk select + bar */
.cc-market-check{ width:15px; height:15px; accent-color:var(--accent); flex:none; cursor:pointer; margin:0; }
.cc-market-headsel{ display:inline-flex; align-items:center; gap:var(--space-item); }
.cc-market-row.selected{ background:color-mix(in srgb,var(--accent) 6%,transparent); }
.cc-market-row.selected:hover{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
.cc-market-bulkbar{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-inline); margin-bottom:var(--space-inline); border-radius:var(--r-control); background:var(--bg-sunken); flex-wrap:wrap; }
.cc-market-bulkn{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:700; color:var(--ink); padding-right:var(--space-tight); }
.cc-market-bulkn svg{ color:var(--accent); }
.cc-market-bulkclear{ margin-left:auto; }
.cc-bulk-lead{ margin:0; font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-4); }
.cc-market-note{ width:100%; min-height:72px; resize:vertical; padding:var(--space-inline) var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--t-label-size); }
.cc-market-rejnote{ grid-column:1/-1; display:flex; align-items:center; gap:var(--space-tight); margin-top:var(--space-inline); padding:var(--space-inline) var(--space-inline); border-radius:var(--r-control); background:color-mix(in srgb,#b5563f 8%,transparent); color:#b5563f; font-size:var(--t-caption-size); }
.cc-market-tabbadge{ background:color-mix(in srgb,#3f6ea3 18%,transparent)!important; color:#3f6ea3!important; }
.cc-market-access, .cc-market-ok{ display:inline-flex; align-items:center; gap:var(--space-tight); height:24px; padding:0 var(--space-inline); border-radius:var(--r-control); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; white-space:nowrap; }
.cc-market-access.locked{ background:color-mix(in srgb,#b5563f 12%,transparent); color:#b5563f; }
.cc-market-ok{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 12%,transparent); }
.cc-market-thumb{ width:42px; height:42px; border-radius:var(--r-control); display:grid; place-items:center; flex:none; overflow:hidden; background:var(--bg-sunken); color:var(--ink-4); border:1px solid var(--border-subtle); }
.cc-market-thumb img{ width:100%; height:100%; object-fit:cover; }
.cc-market-upload{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-market-drop{ min-height:132px; border:1.5px dashed var(--border); border-radius:var(--r-card); background:var(--bg-sunken); color:var(--ink-3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-inline); text-align:center; padding:var(--space-group); cursor:pointer; }
.cc-market-drop:hover{ border-color:var(--accent); color:var(--ink); }
.cc-market-drop b{ color:var(--ink); font-size:var(--t-body-size); }
.cc-market-drop span{ max-width:420px; color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.4; }
.cc-market-formgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-item); }
.cc-market-formgrid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cc-market-formgrid label{ display:flex; flex-direction:column; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:700; color:var(--ink-4); }
.cc-market-formgrid input{ height:36px; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:0 var(--space-inline); outline:none; }
.cc-market-formgrid input:focus{ border-color:var(--accent); }
.cc-market-formgrid select{ height:36px; border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:0 var(--space-inline); }
.cc-market-files{ display:flex; flex-direction:column; border-top:1px solid var(--border-subtle); }
.cc-market-files > div{ min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-inline); border-bottom:1px solid var(--border-subtle); }
.cc-market-files > div > span{ min-width:0; display:flex; align-items:center; gap:var(--space-inline); color:var(--ink-3); }
.cc-market-files b{ min-width:0; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:var(--t-caption-size); }
.cc-market-files small{ color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-market-files button{ width:26px; height:26px; display:grid; place-items:center; border:0; background:transparent; color:var(--ink-4); border-radius:var(--r-control); cursor:pointer; }
.cc-market-files button:hover{ background:var(--bg-hover); color:var(--ink); }
.cc-market-filehelp, .cc-market-route-note{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-item) 0; border-top:1px solid var(--border-subtle); color:var(--ink-3); }
.cc-market-filehelp > svg, .cc-market-route-note > svg{ flex:none; margin-top:2px; }
.cc-market-filehelp > span, .cc-market-route-note > span{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-market-filehelp b, .cc-market-route-note b{ color:var(--ink-2); font-size:var(--t-caption-size); }
.cc-market-filehelp small, .cc-market-route-note small{ color:var(--ink-3); font-size:var(--t-micro-size); line-height:1.5; }
.cc-market-errors{ display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:color-mix(in srgb,#b5563f 7%,transparent); color:#9f4634; font-size:var(--t-micro-size); }
.cc-market-errors b{ font-size:var(--t-caption-size); }
.cc-market-folderbtn{ display:inline-flex; align-items:center; gap:var(--space-tight); max-width:100%; padding:var(--space-tight) var(--space-tight); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--t-caption-size); cursor:pointer; }
.cc-market-folderbtn:hover{ background:var(--bg-hover); color:var(--ink); }
.cc-market-designer{ display:flex; flex-direction:column; min-height:0; height:min(760px, calc(100vh - 260px)); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface); }
.cc-market-designer.fullscreen{ position:fixed; inset:0; z-index:1000; height:100dvh; border:0; border-radius:0; background:var(--surface); }
.cc-market-designer-hd{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-group); padding:var(--space-item) var(--space-group); border-bottom:1px solid var(--border); }
.cc-market-designer-hd h3{ margin:2px 0 2px; font-size:var(--t-strong-size); color:var(--ink); }
.cc-market-designer-hd p{ margin:0; color:var(--ink-4); font-size:var(--t-caption-size); }
.cc-market-designer-actions{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; justify-content:flex-end; }
.cc-market-designer-frame{ position:relative; flex:1; min-height:520px; background:#1B1B22; }
.cc-studio-publish{ display:inline-flex; align-items:center; gap:var(--space-inline); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:600; white-space:nowrap; }
.cc-studio-publish input{ width:15px; height:15px; accent-color:var(--accent); }
.cc-studio-editing{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-group); border-bottom:1px solid var(--border); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-micro-size); }
.cc-studios-hub{ max-width:900px; margin:18px auto 0; }
.cc-studios-intro{ padding:var(--space-inline) 2px 20px; border-bottom:1px solid var(--border); }
.cc-studios-intro h3{ margin:var(--space-tight) 0 var(--space-tight); color:var(--ink); font-family:var(--font-serif); font-size:var(--t-display-size); font-weight:500; }
.cc-studios-intro p{ max-width:680px; margin:0; color:var(--ink-3); font-size:var(--t-label-size); line-height:1.6; }
.cc-studios-grid{ display:flex; flex-direction:column; }
.cc-studio-choice{ display:grid; grid-template-columns:34px minmax(0,1fr) 20px; align-items:center; gap:var(--space-item); width:100%; padding:var(--space-group) var(--space-tight); border:0; border-bottom:1px solid var(--border-subtle); background:transparent; color:var(--ink-3); text-align:left; cursor:pointer; }
.cc-studio-choice:hover{ color:var(--accent); }
.cc-studio-choice>span{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-studio-choice b{ color:var(--ink); font-size:var(--t-body-size); }
.cc-studio-choice small{ color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.45; }
.cc-web-studio{ position:relative; height:min(800px, calc(100vh - 250px)); min-height:600px; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); }
.cc-web-studio .sb-ed{ height:100%; min-height:0; }
.cc-market-prompt{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-market-prompt-row{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); }
.cc-market-prompt-row > svg{ color:var(--ink-3); flex:none; }
.cc-market-prompt-row span{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-market-prompt-row b{ font-size:var(--t-body-size); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-market-prompt-row small{ font-size:var(--t-caption-size); color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-market-prompt label{ display:flex; flex-direction:column; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:700; color:var(--ink-4); }

/* access chip in the catalog table (opens the access & pricing editor) */
.cc-market-accesschip{ display:inline-flex; align-items:center; gap:var(--space-tight); max-width:100%; height:26px; padding:0 var(--space-inline); border-radius:var(--r-control); border:1px solid var(--border-subtle); background:var(--bg-sunken); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:700; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.cc-market-accesschip > svg:first-child{ color:var(--ink-3); flex:none; }
.cc-market-accesschip:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); color:var(--ink); }
.cc-market-accesschip.paid{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 10%,transparent); }
.cc-market-accesschip.paid > svg:first-child{ color:var(--st-done,#5c7349); }
.cc-market-accesschip-edit{ color:var(--ink-4); flex:none; opacity:.7; }

/* ── shared publish access & pricing controls (PublishSettings) ── */
.cc-pub{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-pub-modes{ display:grid; grid-template-columns:repeat(3,minmax(0, 1fr)); gap:var(--space-inline); }
.cc-pub-modes button{ display:flex; align-items:center; justify-content:center; gap:var(--space-inline); height:38px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:650; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.cc-pub-modes button > svg{ flex:none; }
.cc-pub-modes button:hover{ color:var(--ink); border-color:var(--border-strong,var(--border)); }
.cc-pub-modes button.on{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.cc-pub-field{ display:flex; flex-direction:column; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:700; color:var(--ink-4); }
.cc-pub-field > span{ color:var(--ink-2); }
.cc-pub-field > span i{ font-style:normal; font-weight:600; color:var(--ink-4); }
.cc-pub-field em{ font-style:normal; font-weight:500; font-size:var(--t-micro-size); line-height:1.45; color:var(--ink-4); }
.cc-pub-paid{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-pub-pricerow{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-item); }
.cc-pub-priceinput{ display:flex; gap:var(--space-inline); }
.cc-pub-priceinput .cc-pub-cur{ width:96px; flex:none; }
.cc-pub-priceinput input{ flex:1; min-width:0; height:34px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:var(--t-body-size); font-weight:600; padding:0 var(--space-inline); outline:none; }
.cc-pub-priceinput input:focus{ border-color:var(--accent); }
.cc-pub-plangrid{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-pub-plan{ display:inline-flex; align-items:center; gap:var(--space-tight); height:30px; padding:0 var(--space-item); border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:650; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.cc-pub-plan > svg{ flex:none; color:var(--ink-4); }
.cc-pub-plan:hover{ color:var(--ink); }
.cc-pub-plan.on{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.cc-pub-plan.on > svg{ color:var(--accent); }
.cc-pub .cc-pub-check{ display:flex; flex-direction:row; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); font-weight:500; color:var(--ink-2); cursor:pointer; }
.cc-pub-check input{ width:15px; height:15px; accent-color:var(--accent); flex:none; }
.cc-pub-summary{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-caption-size); }
.cc-pub-summary > svg{ flex:none; color:var(--ink-4); }
.cc-pub-summary b{ color:var(--ink); font-weight:700; }
.cc-promo-box{
  display:flex; flex-direction:column; gap:var(--space-item); padding:var(--space-item);
  border:1px solid var(--border); border-radius:var(--r-card);
  background:color-mix(in srgb, var(--ink) 2.5%, var(--surface));
}
.cc-promo-box-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); }
.cc-promo-box-h b{ display:block; margin-bottom:var(--space-tight); color:var(--ink); font-size:var(--t-label-size); }
.cc-promo-box-h span{ display:block; max-width:360px; font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-3); }
.cc-promo-box-toggle{
  display:inline-flex; align-items:center; gap:var(--space-inline); white-space:nowrap;
  font-size:var(--t-caption-size); font-weight:650; color:var(--ink-2); cursor:pointer;
}
.cc-promo-box-toggle input{ width:15px; height:15px; accent-color:var(--accent); }
.cc-promo-box-note{
  display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control);
  background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5;
}
.cc-promo-box-note > svg{ flex:none; color:var(--ink-4); margin-top:1px; }
.cc-promo-box-note.warn{
  background:color-mix(in srgb, #b5563f 8%, transparent);
  color:#8f4a37;
}
@media (max-width:640px){ .cc-pub-pricerow{ grid-template-columns:1fr; } .cc-pub-modes{ grid-template-columns:1fr; } }

@media (max-width:940px){
  .cc-market-head{ display:none; }
  .cc-market-row{ grid-template-columns:1fr; align-items:start; gap:var(--space-inline); }
  .cc-market-actions{ justify-content:flex-start; }
  .cc-market-toolbar{ align-items:flex-start; flex-direction:column; }
  .cc-market-formgrid, .cc-market-formgrid.two{ grid-template-columns:1fr; }
  .cc-market-designer-hd{ align-items:flex-start; flex-direction:column; }
  .cc-market-designer-actions{ justify-content:flex-start; }
  .cc-creator-grid{ grid-template-columns:1fr; }
  .cc-creator-side{ position:static; }
}

/* ───────────────────────── catalog table ───────────────────────── */
.cc-table{ margin-top:var(--space-tight); }
.cc-th, .cc-row{ display:grid; grid-template-columns:minmax(180px,1.4fr) 92px 130px minmax(160px,2fr) 60px; align-items:center; gap:var(--space-item); }
.cc-th{ padding:0 var(--space-inline) var(--space-inline); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--border); }
.cc-group-h{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); padding:var(--space-group) var(--space-inline) var(--space-inline); }
.cc-row{ padding:var(--space-inline); border-radius:var(--r-control); cursor:pointer; border-bottom:1px solid var(--border-subtle); transition:background .13s ease; }
.cc-row:hover{ background:var(--bg-sunken); }
.cc-c-feat{ display:flex; align-items:center; gap:var(--space-item); min-width:0; }
.cc-row-ic{ color:var(--ink-3); flex-shrink:0; display:grid; place-items:center; }
.cc-row-names{ min-width:0; display:flex; flex-direction:column; }
.cc-row-name{ font-size:var(--t-label-size); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-row-id{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-plan{ font-size:var(--t-micro-size); font-weight:600; padding:var(--space-tight) var(--space-inline); border-radius:6px; background:var(--bg-sunken); color:var(--ink-3); white-space:nowrap; }
.cc-plan-free{ color:var(--ink-3); }
.cc-plan-starter{ color:#3a6ea5; background:color-mix(in srgb,#3a6ea5 12%,transparent); }
.cc-plan-studio{ color:#7a5ca5; background:color-mix(in srgb,#7a5ca5 12%,transparent); }
.cc-plan-agency{ color:#a5683a; background:color-mix(in srgb,#a5683a 12%,transparent); }
.cc-plan-enterprise{ color:#4a4a4a; background:color-mix(in srgb,#4a4a4a 10%,transparent); }
.cc-life{ display:inline-flex; align-items:center; gap:var(--space-tight); height:26px; padding:0 var(--space-inline); border-radius:var(--r-control);
  background:none; border:1px solid transparent; cursor:pointer; font-size:var(--t-caption-size); font-weight:500; color:var(--ink-2); }
.cc-life:hover{ background:var(--surface); border-color:var(--border); }
.cc-life svg{ color:var(--ink-4); }
.cc-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cc-sum{ font-size:var(--t-label-size); color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; }
.cc-sum-empty{ font-size:var(--t-label-size); color:var(--ink-5, var(--ink-4)); font-style:italic; }
.cc-c-act{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-inline); }
.cc-docs{ color:var(--ink-4); display:grid; place-items:center; }
.cc-docs:hover{ color:var(--accent); }
.cc-row-go{ color:var(--ink-5, var(--ink-4)); opacity:0; transition:opacity .13s ease; }
.cc-row:hover .cc-row-go{ opacity:1; }

/* catalog editor drawer */
.cc-edit{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-life-pick, .cc-life-opt{ display:flex; }
.cc-life-pick{ gap:var(--space-inline); flex-wrap:wrap; }
.cc-life-opt{ align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control); border:1px solid var(--border);
  background:var(--surface); cursor:pointer; font-size:var(--t-label-size); font-weight:500; color:var(--ink-2); }
.cc-life-opt:hover{ border-color:var(--ink-4); }
.cc-life-opt.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--ink); }

/* ───────────────────────── blog list ───────────────────────── */
.cc-bloglist{ display:flex; flex-direction:column; }
.cc-blogrow{ display:flex; align-items:flex-start; gap:var(--space-group); padding:var(--space-group) var(--space-inline); text-align:left; width:100%;
  background:none; border:0; border-bottom:1px solid var(--border-subtle); cursor:pointer; transition:background .13s ease; border-radius:var(--r-control); }
.cc-blogrow:hover{ background:var(--bg-sunken); }
.cc-blogthumb{ width:84px; height:60px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center; overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--bg-sunken), var(--bg-sunken) 7px, var(--surface) 7px, var(--surface) 14px); }
.cc-blogthumb-lbl{ font-size:8.5px; color:var(--ink-4); padding:2px var(--space-tight); text-align:center; line-height:1.2; }
.cc-blogrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-blogrow-top{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; }
.cc-blogrow-title{ font-size:var(--t-strong-size); font-weight:600; color:var(--ink); }
.cc-blogrow-ex{ font-size:var(--t-label-size); color:var(--ink-3); line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.cc-blogrow-meta{ font-size:var(--t-micro-size); color:var(--ink-4); margin-top:2px; }
.cc-blogrow .cc-row-go{ align-self:center; opacity:0; }
.cc-blogrow:hover .cc-row-go{ opacity:1; }
.cc-status{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.03em; padding:2px var(--space-inline); border-radius:6px; }
.cc-status-published{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 13%,transparent); }
.cc-status-draft{ color:var(--ink-4); background:var(--bg-sunken); }
.cc-tag{ font-size:var(--t-micro-size); font-weight:500; color:var(--ink-3); background:var(--bg-sunken); padding:2px var(--space-inline); border-radius:6px; }

/* ───────────────────────── blog editor ───────────────────────── */
.cc-editor-wrap{ display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0; }
.cc-editor-bar{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cc-back{ display:flex; align-items:center; gap:var(--space-tight); background:none; border:0; cursor:pointer; color:var(--ink-2); font-size:var(--t-label-size); font-weight:600; padding:0; }
.cc-back:hover{ color:var(--ink); }
.cc-editor-status{ margin-left:var(--space-tight); }
.cc-del{ color:var(--st-blocked,#b5563f); }
.cc-editor{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.cc-editor-form{ overflow-y:auto; padding:var(--space-block) 28px 56px; display:flex; flex-direction:column; gap:var(--space-group); border-right:1px solid var(--border); }
.cc-title-in{ border:0; background:none; outline:none; font-family:var(--font-serif); font-size:var(--t-display-size); font-weight:500; color:var(--ink); line-height:1.2; padding:0; width:100%; }
.cc-title-in::placeholder{ color:var(--ink-5,var(--ink-4)); }
.cc-slug-row{ display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:var(--r-control); overflow:hidden; height:34px; background:var(--surface); }
.cc-slug-row:focus-within{ border-color:var(--accent); }
.cc-slug-pre{ font-size:var(--t-caption-size); color:var(--ink-4); padding:0 var(--space-tight) 0 var(--space-item); background:var(--bg-sunken); height:100%; display:flex; align-items:center; }
.cc-slug-in{ border:0; background:none; outline:none; font-size:var(--t-caption-size); color:var(--ink); flex:1; padding:0 var(--space-item); height:100%; }
.cc-body-in{ width:100%; min-height:320px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface);
  padding:var(--space-item); font-size:var(--t-body-size); line-height:1.6; color:var(--ink); outline:none; font-family:inherit; }
.cc-body-in:focus{ border-color:var(--accent); }
.cc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-item); }
.cc-seo-toggle{ display:flex; align-items:center; gap:var(--space-inline); background:none; border:0; border-top:1px solid var(--border-subtle); padding:var(--space-group) 0 0; cursor:pointer;
  font-size:var(--t-label-size); font-weight:600; color:var(--ink-2); margin-top:var(--space-tight); }
.cc-seo-toggle svg{ color:var(--ink-4); }
.cc-seo-hint{ margin-left:auto; font-size:var(--t-micro-size); font-weight:400; color:var(--ink-4); }
.cc-seo{ display:flex; flex-direction:column; gap:var(--space-item); padding-top:var(--space-item); }

.cc-editor-preview{ overflow-y:auto; padding:var(--space-block) var(--space-section) 56px; background:var(--bg); }
.cc-prev-label{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--space-group); }
.cc-prev-article{ max-width:640px; }
.cc-prev-cover{ height:200px; border-radius:var(--r-card); display:grid; place-items:center; margin-bottom:20px;
  background:repeating-linear-gradient(135deg, var(--bg-sunken), var(--bg-sunken) 11px, var(--surface) 11px, var(--surface) 22px); }
.cc-prev-cover .mono{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-prev-tags{ display:flex; gap:var(--space-inline); flex-wrap:wrap; margin-bottom:var(--space-item); }
.cc-prev-title{ font-family:var(--font-serif); font-size:var(--t-display-size); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 var(--space-item); }
.cc-prev-meta{ font-size:var(--t-label-size); color:var(--ink-4); margin-bottom:var(--space-group); }
.cc-prev-excerpt{ font-size:var(--t-heading-size); line-height:1.55; color:var(--ink-2); margin:0 0 var(--space-block); }
.cc-prev-body{ font-size:var(--t-strong-size); line-height:1.7; color:var(--ink-2); user-select:text; }
.cc-prev-body h2{ font-family:var(--font-serif); font-size:var(--t-title-size); color:var(--ink); margin:28px 0 var(--space-item); line-height:1.25; }
.cc-prev-body h3{ font-size:var(--t-heading-size); font-weight:600; color:var(--ink); margin:var(--space-block) 0 var(--space-inline); }
.cc-prev-body p{ margin:0 0 var(--space-group); }
.cc-prev-body ul{ margin:0 0 var(--space-group); padding-left:20px; }
.cc-prev-body li{ margin-bottom:var(--space-inline); }
.cc-prev-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.cc-prev-body strong{ color:var(--ink); font-weight:600; }
.cc-prev-body code{ font-family:var(--font-mono,monospace); font-size:.88em; background:var(--bg-sunken); padding:1px var(--space-tight); border-radius:4px; }
.cc-prev-body blockquote{ margin:0 0 var(--space-group); padding:var(--space-tight) 0 var(--space-tight) var(--space-group); border-left:2px solid var(--border); color:var(--ink-3); font-style:italic; }

.acct-platform-tag{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.03em; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); padding:2px var(--space-inline); border-radius:6px; }
.acct-platform svg{ color:var(--accent); }

/* ───────────────────────── observability ───────────────────────── */
.cc-obs{ flex:1; display:flex; flex-direction:column; min-height:0; height:100%; }
.cc-obs-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-group); flex-wrap:wrap;
  padding:var(--space-block) 28px var(--space-group); border-bottom:1px solid var(--border); flex-shrink:0; }
.cc-obs-title{ font-family:var(--font-serif); font-size:var(--t-display-size); letter-spacing:-.02em; color:var(--ink); margin:0; }
.cc-obs-sub{ font-size:var(--t-label-size); color:var(--ink-3); margin:var(--space-tight) 0 0; }
.cc-obs-body{ flex:1; min-height:0; position:relative; display:flex; }

/* Observability-local navigation and native issue intelligence. */
.cc-obs.cc-obs-with-nav{ display:grid; grid-template-columns:216px minmax(0,1fr); }
.cc-obs-main{ display:flex; min-width:0; min-height:0; flex-direction:column; }
.cc-obs-nav{ min-width:0; overflow-y:auto; padding:var(--space-item) var(--space-inline); border-right:1px solid var(--border); background:color-mix(in srgb,var(--surface) 82%,var(--bg)); }
.cc-obs-nav-brand{ display:flex; align-items:center; gap:var(--space-inline); min-height:48px; padding:0 var(--space-inline) var(--space-item); border-bottom:1px solid var(--border-subtle); }
.cc-obs-nav-brand>span{ display:grid; place-items:center; color:var(--accent); }
.cc-obs-nav-brand>div{ display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.cc-obs-nav-brand b{ overflow:hidden; color:var(--ink); font-size:var(--t-caption-size); text-overflow:ellipsis; white-space:nowrap; }
.cc-obs-nav-brand small{ overflow:hidden; color:var(--ink-4); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.cc-obs-nav-brand>button{ display:grid; place-items:center; border:0; background:transparent; color:var(--ink-4); cursor:pointer; }
.cc-obs-nav-group{ margin-top:var(--space-group); }
.cc-obs-nav-group>div{ padding:0 var(--space-inline) var(--space-tight); color:var(--ink-4); font-size:9.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.cc-obs-nav-group>button{ display:flex; align-items:center; gap:var(--space-inline); width:100%; min-height:34px; padding:0 var(--space-inline); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font:600 var(--t-caption-size)/1.2 var(--font-body); text-align:left; cursor:pointer; }
.cc-obs-nav-group>button:hover{ color:var(--ink); background:var(--bg-hover); }
.cc-obs-nav-group>button.on{ color:var(--ink); background:color-mix(in srgb,var(--accent) 11%,transparent); }
.cc-obs-nav-group>button.on>svg:first-child{ color:var(--accent); }
.cc-obs-nav-group>button span{ flex:1; }
.cc-obs-nav-group>button>svg:last-child:not(:first-child){ color:var(--ink-4); }
.cc-obs-menu,.cc-obs-nav-sheet{ display:none; }

.cc-issue-stream{ width:100%; padding:0; }
.cc-issue-healthbar{ display:flex; align-items:center; gap:var(--space-inline); min-height:36px; padding:0 28px; border-bottom:1px solid var(--border-subtle); color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-issue-healthbar>span{ width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.cc-issue-healthbar>span.good{ background:var(--st-done,#5c7349); }
.cc-issue-healthbar>span.watch{ background:#c79a3a; }
.cc-issue-healthbar>span.bad{ background:#b5563f; }
.cc-issue-healthbar b{ color:var(--ink-2); font-weight:650; }
.cc-issue-healthbar em{ padding-left:var(--space-inline); border-left:1px solid var(--border-subtle); font-style:normal; }
.cc-issue-healthbar .btn{ margin-left:auto; }
.cc-issue-toolbar{ padding:var(--space-item) 28px; margin:0; border-bottom:1px solid var(--border); }
.cc-issue-filter{ display:inline-flex; align-items:center; gap:var(--space-inline); min-height:32px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:600; cursor:pointer; }
.cc-issue-filter:hover{ color:var(--ink); border-color:var(--ink-4); }
.cc-issue-route-search,.cc-issue-release-search{ min-width:160px; height:32px; }
.cc-issue-state{ display:flex; min-height:300px; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-inline); color:var(--ink-4); }
.cc-issue-state b{ color:var(--ink); }
.cc-issue-table{ padding:0 28px var(--space-section); }
.cc-issue-table-head,.cc-issue-row{ display:grid; grid-template-columns:minmax(240px,1.65fr) minmax(160px,1fr) minmax(145px,.8fr) minmax(135px,.7fr) minmax(110px,.6fr) 84px; align-items:center; gap:var(--space-item); }
.cc-issue-table-head{ min-height:34px; border-bottom:1px solid var(--border); color:var(--ink-4); font-size:9.5px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.cc-issue-row{ width:100%; min-height:72px; padding:var(--space-item) 0; border:0; border-bottom:1px solid var(--border-subtle); border-radius:var(--r-control); background:transparent; color:var(--ink-3); text-align:left; cursor:pointer; }
.cc-issue-row:hover{ background:var(--bg-hover); }
.cc-issue-row>span{ display:flex; min-width:0; flex-direction:column; gap:var(--space-tight); }
.cc-issue-row b{ overflow:hidden; color:var(--ink); font-size:var(--t-caption-size); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.cc-issue-row small{ overflow:hidden; color:var(--ink-4); font-size:9.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.cc-issue-row-main{ flex-direction:row!important; align-items:flex-start; gap:var(--space-inline)!important; }
.cc-issue-row-main>i{ width:7px; height:7px; margin-top:5px; border-radius:50%; flex:none; }
.cc-issue-row-main>span{ display:flex; min-width:0; flex-direction:column; gap:var(--space-tight); }
.cc-issue-location b{ font-family:var(--font-mono,monospace); font-size:10.5px; }
.cc-issue-row>.cc-istatus{ display:inline-flex; justify-content:center; width:max-content; }
.cc-issue-more{ display:flex; margin:var(--space-group) auto 0; }
.cc-issue-level{ display:inline-flex; width:max-content; padding:3px var(--space-inline); border-radius:999px; background:var(--bg-sunken); color:var(--ink-3); font-size:9.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.cc-issue-level.fatal,.cc-issue-level.error{ color:var(--st-blocked-ink); background:var(--st-blocked-soft); }
.cc-issue-level.warning{ color:var(--st-review-ink); background:var(--st-review-soft); }

.cc-issue-detail{ width:100%; overflow:auto; }
.cc-issue-detail-head{ position:sticky; top:0; z-index:4; display:grid; grid-template-columns:auto minmax(260px,1fr) auto; align-items:center; gap:var(--space-group); padding:var(--space-item) 28px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(10px); }
.cc-issue-detail-head .cc-back{ margin:0; }
.cc-issue-heading{ min-width:0; }
.cc-issue-heading h2{ overflow:hidden; margin:var(--space-tight) 0 0; color:var(--ink); font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.cc-issue-heading p{ overflow:hidden; margin:2px 0 0; color:var(--ink-4); font:10.5px var(--font-mono,monospace); text-overflow:ellipsis; white-space:nowrap; }
.cc-issue-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-inline); flex-wrap:wrap; }
.cc-issue-summary{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0 28px; border-bottom:1px solid var(--border); }
.cc-issue-summary>div{ display:flex; min-width:0; flex-direction:column; gap:var(--space-tight); padding:var(--space-item) 0; }
.cc-issue-summary>div+div{ padding-left:var(--space-item); border-left:1px solid var(--border-subtle); }
.cc-issue-summary span{ color:var(--ink-4); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cc-issue-summary b{ overflow:hidden; color:var(--ink); font-size:var(--t-caption-size); text-overflow:ellipsis; white-space:nowrap; }
.cc-issue-canvas{ display:grid; grid-template-columns:minmax(0,1fr) 310px; min-height:600px; padding-left:28px; }
.cc-issue-diagnostics{ min-width:0; padding:var(--space-block) 28px var(--space-section) 0; }
.cc-issue-diagnostics section{ padding:0 0 var(--space-block); border-bottom:1px solid var(--border); }
.cc-issue-diagnostics section+section{ padding-top:var(--space-block); }
.cc-issue-section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-group); }
.cc-issue-section-head .cc-eyebrow{ margin-bottom:var(--space-tight); }
.cc-issue-section-head h3,.cc-issue-breadcrumbs h3{ margin:0; color:var(--ink); font-size:var(--t-strong-size); }
.cc-issue-spark{ display:flex; height:62px; align-items:flex-end; gap:3px; margin-top:var(--space-item); }
.cc-issue-spark span{ flex:1; min-width:2px; border-radius:2px 2px 0 0; background:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.cc-issue-event-strip{ display:flex; gap:var(--space-tight); overflow-x:auto; padding:var(--space-inline) 0; }
.cc-issue-event-strip button{ min-width:52px; height:26px; border:1px solid var(--border-subtle); border-radius:var(--r-control); background:transparent; color:var(--ink-4); font-size:9.5px; cursor:pointer; }
.cc-issue-event-strip button.on{ border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.cc-issue-event-meta,.cc-issue-linkrow{ display:flex; align-items:center; gap:var(--space-item); flex-wrap:wrap; margin-top:var(--space-inline); color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-symbolication{ display:inline-flex; padding:3px var(--space-inline); border-radius:999px; background:var(--bg-sunken); color:var(--ink-4); font-size:9.5px; font-weight:700; text-transform:uppercase; }
.cc-symbolication.complete{ color:var(--st-done,#5c7349); background:var(--st-done-soft); }
.cc-symbolication.failed{ color:var(--st-blocked-ink); background:var(--st-blocked-soft); }
.cc-stack-frame{ display:grid; grid-template-columns:24px minmax(150px,.75fr) minmax(220px,1.5fr); gap:var(--space-inline); padding:var(--space-inline); border-bottom:1px solid var(--border-subtle); color:var(--ink-4); }
.cc-stack-frame.failing{ background:color-mix(in srgb,#b5563f 6%,transparent); }
.cc-stack-frame>span{ color:var(--ink-4); font:10px var(--font-mono,monospace); }
.cc-stack-frame code,.cc-stack-frame b{ overflow:hidden; font:10.5px var(--font-mono,monospace); text-overflow:ellipsis; white-space:nowrap; }
.cc-stack-frame code{ color:var(--ink); }
.cc-stack-frame b{ color:var(--ink-3); font-weight:500; }
.cc-source-excerpt{ max-height:220px; overflow:auto; margin:var(--space-item) 0 0; padding:var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-2); font:11px/1.6 var(--font-mono,monospace); white-space:pre; user-select:text; }
.cc-issue-manual-detail{ margin:var(--space-item) 0 0; color:var(--ink-2); font-size:var(--t-body-size); line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.cc-issue-breadcrumbs h3{ margin-bottom:var(--space-item); }
.cc-breadcrumb{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); }
.cc-breadcrumb>svg{ margin-top:2px; color:var(--ink-4); }
.cc-breadcrumb>span{ display:flex; min-width:0; flex-direction:column; gap:2px; }
.cc-breadcrumb b{ color:var(--ink); font-size:var(--t-caption-size); }
.cc-breadcrumb code{ overflow:hidden; color:var(--ink-4); font:10px var(--font-mono,monospace); text-overflow:ellipsis; white-space:nowrap; }
.cc-breadcrumb time{ color:var(--ink-4); font-size:9.5px; }
.cc-issue-rail{ min-width:0; border-left:1px solid var(--border); background:color-mix(in srgb,var(--surface) 45%,transparent); }
.cc-issue-rail>section{ padding:var(--space-group) var(--space-item); border-bottom:1px solid var(--border); }
.cc-issue-rail .cc-eyebrow{ margin-bottom:var(--space-inline); }
.cc-issue-release,.cc-issue-actor,.cc-issue-activity{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); }
.cc-issue-release{ flex-direction:column; gap:2px; }
.cc-issue-release b,.cc-issue-actor b,.cc-issue-activity b{ color:var(--ink); font-size:var(--t-caption-size); }
.cc-issue-release span,.cc-issue-actor small,.cc-issue-activity small{ color:var(--ink-4); font-size:9.5px; line-height:1.4; }
.cc-issue-actor>span,.cc-issue-activity>span{ display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.cc-issue-activity>svg{ margin-top:2px; color:var(--ink-4); flex:none; }
.cc-actor-reveal{ position:relative; display:flex; flex-direction:column; gap:2px; margin-top:var(--space-inline); padding:var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); }
.cc-actor-reveal>button{ position:absolute; top:var(--space-tight); right:var(--space-tight); border:0; background:transparent; color:var(--ink-4); cursor:pointer; }
.cc-actor-reveal b{ color:var(--ink); font-size:var(--t-caption-size); }
.cc-actor-reveal span,.cc-actor-reveal small{ overflow-wrap:anywhere; color:var(--ink-3); font-size:9.5px; }
.cc-actor-reveal small{ margin-top:var(--space-tight); color:var(--st-review-ink); }
.cc-issue-facts{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:var(--space-inline); margin:0; }
.cc-issue-facts dt{ color:var(--ink-4); font-size:9.5px; }
.cc-issue-facts dd{ overflow-wrap:anywhere; margin:0; color:var(--ink-2); font:10px var(--font-mono,monospace); }
@media (max-width:1480px){
  .cc-issue-table-head,.cc-issue-row{ grid-template-columns:minmax(230px,1.55fr) minmax(150px,1fr) minmax(140px,.8fr) minmax(130px,.7fr) 82px; }
  .cc-issue-table-head>span:nth-child(5),.cc-issue-row>span:nth-child(5){ display:none; }
  .cc-issue-canvas{ grid-template-columns:minmax(0,1fr) 280px; }
}
@media (max-width:1180px){
  .cc-obs.cc-obs-with-nav{ grid-template-columns:72px minmax(0,1fr); }
  .cc-obs-nav{ padding:var(--space-item) var(--space-inline); }
  .cc-obs-nav-brand{ justify-content:center; padding:0 0 var(--space-item); }
  .cc-obs-nav-brand>div,.cc-obs-nav-group>div,.cc-obs-nav-group>button span,.cc-obs-nav-group>button>svg:last-child:not(:first-child){ display:none; }
  .cc-obs-nav-group>button{ justify-content:center; padding:0; }
  .cc-issue-table-head,.cc-issue-row{ grid-template-columns:minmax(220px,1.5fr) minmax(135px,.85fr) minmax(120px,.7fr) 80px; }
  .cc-issue-table-head>span:nth-child(4),.cc-issue-row>span:nth-child(4){ display:none; }
  .cc-issue-detail-head{ grid-template-columns:auto minmax(220px,1fr); }
  .cc-issue-actions{ grid-column:1/-1; justify-content:flex-start; }
  .cc-issue-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cc-issue-summary>div:nth-child(4){ border-left:0; }
  .cc-issue-summary>div:nth-child(-n+3){ border-bottom:1px solid var(--border-subtle); }
  .cc-issue-canvas{ grid-template-columns:minmax(0,1fr) 250px; }
}
@media (max-width:900px){
  .cc-obs.cc-obs-with-nav{ display:flex; }
  .cc-obs-with-nav>.cc-obs-nav{ display:none; }
  .cc-obs-menu{ display:inline-flex; align-items:center; gap:var(--space-inline); min-height:34px; padding:0 var(--space-inline); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink-3); font-size:var(--t-caption-size); font-weight:650; cursor:pointer; }
  .cc-obs-hd{ align-items:flex-start; }
  .cc-obs-nav-sheet{ position:fixed; inset:0; z-index:180; display:block; }
  .cc-obs-nav-scrim{ position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(20,22,18,.34); backdrop-filter:blur(2px); }
  .cc-obs-nav-sheet .cc-obs-nav{ position:absolute; inset:0 auto 0 0; display:block; width:min(320px,88vw); padding:var(--space-item); border-right:1px solid var(--border); box-shadow:var(--shadow-lg); }
  .cc-obs-nav-sheet .cc-obs-nav-brand{ justify-content:flex-start; padding:0 var(--space-inline) var(--space-item); }
  .cc-obs-nav-sheet .cc-obs-nav-brand>div,.cc-obs-nav-sheet .cc-obs-nav-group>div,.cc-obs-nav-sheet .cc-obs-nav-group>button span,.cc-obs-nav-sheet .cc-obs-nav-group>button>svg:last-child:not(:first-child){ display:flex; }
  .cc-obs-nav-sheet .cc-obs-nav-group>button{ justify-content:flex-start; padding:0 var(--space-inline); }
  .cc-issue-healthbar,.cc-issue-toolbar,.cc-issue-table{ padding-right:var(--space-item); padding-left:var(--space-item); }
  .cc-issue-healthbar em{ display:none; }
  .cc-issue-table-head{ display:none; }
  .cc-issue-row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--space-inline); padding:var(--space-item); }
  .cc-issue-row>span:nth-child(1){ grid-column:1; }
  .cc-issue-row>span:nth-child(2){ grid-column:1; }
  .cc-issue-row>span:nth-child(3){ grid-column:1; }
  .cc-issue-row>span:nth-child(4),.cc-issue-row>span:nth-child(5){ display:none; }
  .cc-issue-row>span:nth-child(6){ grid-column:2; grid-row:1; }
  .cc-issue-detail-head{ position:static; padding:var(--space-item); }
  .cc-issue-summary{ margin:0 var(--space-item); }
  .cc-issue-canvas{ grid-template-columns:1fr; padding:0 var(--space-item); }
  .cc-issue-diagnostics{ padding-right:0; }
  .cc-issue-rail{ border-top:1px solid var(--border); border-left:0; }
  .cc-stack-frame{ grid-template-columns:20px minmax(100px,.7fr) minmax(160px,1.3fr); }
}
@media (max-width:640px){
  .cc-obs-hd{ padding:var(--space-item); }
  .cc-obs-title{ font-size:var(--t-title-size); }
  .cc-obs-sub{ display:none; }
  .cc-issue-healthbar{ flex-wrap:wrap; padding-top:var(--space-inline); padding-bottom:var(--space-inline); }
  .cc-issue-healthbar .btn{ margin-left:0; }
  .cc-issue-toolbar{ align-items:stretch; }
  .cc-issue-filter{ flex:1; justify-content:space-between; }
  .cc-issue-route-search,.cc-issue-release-search{ width:100%; }
  .cc-issue-detail-head{ grid-template-columns:1fr; }
  .cc-issue-detail-head .cc-back{ justify-self:start; }
  .cc-issue-actions{ grid-column:1; }
  .cc-issue-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cc-issue-summary>div:nth-child(3),.cc-issue-summary>div:nth-child(5){ border-left:0; }
  .cc-issue-summary>div:nth-child(-n+4){ border-bottom:1px solid var(--border-subtle); }
  .cc-issue-section-head{ align-items:flex-start; flex-direction:column; }
  .cc-stack-frame{ grid-template-columns:18px minmax(0,1fr); }
  .cc-stack-frame b{ grid-column:2; }
  .cc-breadcrumb{ grid-template-columns:18px minmax(0,1fr); }
  .cc-breadcrumb time{ grid-column:2; }
}
@media (max-width:375px){
  .cc-issue-table,.cc-issue-toolbar,.cc-issue-healthbar,.cc-issue-detail-head,.cc-issue-canvas{ padding-right:var(--space-inline); padding-left:var(--space-inline); }
  .cc-issue-summary{ margin-right:var(--space-inline); margin-left:var(--space-inline); }
  .cc-issue-actions .btn{ flex:1; justify-content:center; }
}

/* graph */
.cc-graph-wrap{ position:relative; flex:1; min-width:0; overflow:hidden; }
.cc-graph{ width:100%; height:100%; display:block; cursor:default; }
.cc-edge{ stroke:color-mix(in srgb, var(--ink-4) 55%, transparent); stroke-width:1.1; opacity:.6; transition:opacity .2s ease; }
.cc-edge.dim{ opacity:.12; }
.cc-edge.on{ stroke:var(--accent); stroke-width:1.6; opacity:.9; stroke-dasharray:5 5; animation:cc-flow 1s linear infinite; }
@keyframes cc-flow{ to{ stroke-dashoffset:-10; } }
.cc-gnode{ cursor:pointer; transition:opacity .2s ease; }
.cc-gnode.dim{ opacity:.22; }
.cc-gnodes{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.cc-gnode-dot{ stroke:var(--surface); stroke-width:2.5; transition:r .15s ease; }
.cc-gnode.hover .cc-gnode-dot, .cc-gnode.sel .cc-gnode-dot{ filter:brightness(1.05); }
.cc-gnode-ring{ fill:none; stroke:var(--accent); stroke-width:2; opacity:.8; }
.cc-gnode-life{ fill:none; stroke-width:1.5; stroke-dasharray:3 3; opacity:.9; }
.cc-gnode-health{ stroke:var(--surface); stroke-width:1.5; }
.cc-gnode-lbl{ font-size:var(--t-label-size); fill:var(--ink-2); text-anchor:middle; pointer-events:none;
  font-weight:500; paint-order:stroke; stroke:var(--surface); stroke-width:3.5px; }
.cc-gnode.dim .cc-gnode-lbl{ opacity:.4; }
.cc-gnode.sel .cc-gnode-lbl, .cc-gnode.hover .cc-gnode-lbl{ fill:var(--ink); font-weight:600; }
@media (prefers-reduced-motion: no-preference){
  .cc-gnode{ animation:cc-pop .4s ease both; }
  @keyframes cc-pop{ from{ opacity:0; transform:scale(.6) translateY(4px); } }
}

.cc-legend{ position:absolute; left:18px; bottom:18px; background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:var(--r-control); padding:var(--space-item) var(--space-item); font-size:var(--t-caption-size); pointer-events:none; }
.cc-legend-h{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); margin-bottom:var(--space-inline); }
.cc-legend-row{ display:flex; align-items:center; gap:var(--space-inline); color:var(--ink-2); margin-bottom:var(--space-tight); }
.cc-legend-hint{ margin-top:var(--space-inline); padding-top:var(--space-inline); border-top:1px solid var(--border-subtle); color:var(--ink-4); font-size:var(--t-micro-size); }

/* node panel (wired docs) */
.cc-nodepanel{ position:absolute; top:14px; right:14px; bottom:14px; width:320px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:0 12px 40px rgba(0,0,0,.10); overflow:hidden; z-index:5; }
.cc-np-hd{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-group) var(--space-group); border-bottom:1px solid var(--border-subtle); }
.cc-np-ic{ width:36px; height:36px; border-radius:var(--r-control); display:grid; place-items:center; flex-shrink:0; }
.cc-np-name{ font-size:var(--t-strong-size); font-weight:600; color:var(--ink); }
.cc-np-id{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-np-x{ border:0; background:none; cursor:pointer; color:var(--ink-4); display:grid; place-items:center; padding:var(--space-tight); }
.cc-np-x:hover{ color:var(--ink); }
.cc-np-body{ flex:1; overflow-y:auto; padding:var(--space-group); }
.cc-np-chips{ display:flex; flex-wrap:wrap; gap:var(--space-tight); margin-bottom:var(--space-item); }
.cc-np-chip{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:500; color:var(--ink-3); background:var(--bg-sunken); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); }
.cc-np-sum{ font-size:var(--t-label-size); line-height:1.5; color:var(--ink-2); margin:0 0 var(--space-group); }
.cc-np-sum.empty{ color:var(--ink-4); font-style:italic; }
.cc-np-sec{ border-top:1px solid var(--border-subtle); padding-top:var(--space-item); margin-top:var(--space-tight); }
.cc-np-sec .cc-eyebrow{ margin-bottom:var(--space-inline); }
.cc-np-rel{ display:flex; align-items:center; gap:var(--space-inline); width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); font-size:var(--t-label-size); color:var(--ink-2); }
.cc-np-rel:hover{ background:var(--bg-sunken); color:var(--ink); }
.cc-np-rel svg{ color:var(--ink-4); flex-shrink:0; }
.cc-np-rel-kind{ font-size:var(--t-micro-size); color:var(--ink-4); white-space:nowrap; }
.cc-np-rel-to{ font-weight:500; }
.cc-np-rel.in{ color:var(--ink-3); }

/* ───────────────────────── messaging ───────────────────────── */
.cc-msg-toolbar{ display:flex; align-items:center; gap:var(--space-item); margin-bottom:var(--space-item); flex-wrap:wrap; }
.cc-msg-list{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cc-msg-th{ grid-template-columns:minmax(220px,2fr) 120px 150px 160px 110px; }
.cc-msg-th-ann{ grid-template-columns:minmax(220px,2fr) 120px 110px 180px 160px; }
.cc-msg-row{
  width:100%; display:grid; align-items:center; text-align:left; gap:var(--space-item);
  grid-template-columns:minmax(220px,2fr) 120px 150px 160px 110px;
  padding:var(--space-item) var(--space-inline); background:none; border:0; border-bottom:1px solid var(--border-subtle);
  border-radius:var(--r-control); cursor:pointer; transition:background .13s ease;
}
.cc-msg-row-ann{ grid-template-columns:minmax(220px,2fr) 120px 110px 180px 160px; }
.cc-msg-row:hover{ background:var(--bg-sunken); }
.cc-msg-main{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-msg-meta{ font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-msg-pill{
  display:inline-flex; align-items:center; justify-content:center; height:26px;
  padding:0 var(--space-inline); border-radius:999px; font-size:var(--t-micro-size); font-weight:700; letter-spacing:.03em;
}
.cc-msg-empty{ display:grid; place-items:center; gap:var(--space-inline); padding:var(--space-page) var(--space-group); }
.cc-msg-drawer{ display:flex; flex-direction:column; gap:var(--space-group); padding-bottom:var(--space-inline); }
.cc-msg-preview{ border-top:1px solid var(--border-subtle); padding-top:var(--space-group); }
.cc-msg-preview-body{
  margin-top:var(--space-inline); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;
  background:var(--bg-sunken); max-height:340px; overflow:auto;
}
.cc-msg-audience{
  border:1px solid var(--border); background:var(--surface); border-radius:var(--r-control);
  padding:var(--space-inline) var(--space-item); font-size:var(--t-label-size); line-height:1.5; color:var(--ink-2); user-select:text;
}
.cc-msg-audience-note{
  margin-top:var(--space-inline); font-size:var(--t-caption-size); line-height:1.55; color:var(--ink-3);
}
.cc-msg-error{
  border-radius:var(--r-control); padding:var(--space-item) var(--space-item); font-size:var(--t-caption-size); color:#8f3d30;
  background:color-mix(in srgb, #b5563f 11%, transparent);
  display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap;
}
.cc-msg-progress{ padding-top:var(--space-tight); }
.cc-msg-progress-bar{ height:6px; border-radius:4px; background:var(--bg-sunken); overflow:hidden; }
.cc-msg-progress-fill{ height:100%; background:var(--accent); transition:width .2s ease; }
.cc-msg-progress-text{ margin-top:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-msg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-item); }
.cc-msg-toggles{
  display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; gap:var(--space-inline) var(--space-item);
  align-items:center; border-top:1px solid var(--border-subtle); padding-top:var(--space-item);
  font-size:var(--t-label-size); color:var(--ink-2);
}
.cc-msg-diag{ border-top:1px solid var(--border-subtle); padding-top:var(--space-group); }
.cc-msg-healthrows{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-msg-healthrow{ padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-2); }
.cc-msg-healthrow.good{ background:color-mix(in srgb,var(--st-done,#5c7349) 10%,transparent); }
.cc-msg-healthrow.warn{ background:color-mix(in srgb,#c79a3a 11%,transparent); }
.cc-msg-healthtitle{ display:block; font-size:var(--t-caption-size); font-weight:600; color:var(--ink); }
.cc-msg-healthdetail{ display:block; margin-top:2px; font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-3); }
.cc-msg-actionbar{ display:flex; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-item); }
.cc-msg-checklist{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-msg-check{ display:flex; padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); }
.cc-msg-check.ok{ background:color-mix(in srgb,var(--st-done,#5c7349) 8%,transparent); }
.cc-msg-check.warn{ background:color-mix(in srgb,#b5563f 8%,transparent); }
.cc-msg-checkcopy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-msg-checklabel{ font-size:var(--t-caption-size); font-weight:600; color:var(--ink); }
.cc-msg-checkdetail{ font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-3); }
.cc-msg-pop-preview{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-msg-banner,
.cc-msg-toast,
.cc-msg-modalcard{
  border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface);
}
.cc-msg-banner{ padding:0; overflow:hidden; background:transparent; }
.cc-msg-banner strong,
.cc-msg-toast strong{ display:block; font-size:var(--t-body-size); color:var(--ink); margin-bottom:var(--space-tight); }
.cc-msg-banner p,
.cc-msg-toast p,
.cc-msg-modalcard p{ margin:0; font-size:var(--t-label-size); line-height:1.6; color:var(--ink-2); }
.cc-msg-toast{ max-width:360px; padding:0; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.1); }
.cc-msg-modalcard{ padding:0; overflow:hidden; text-align:left; }
.cc-msg-modalmark{
  width:auto; height:auto; border-radius:0; margin:0 auto 12px; display:grid; place-items:center; color:var(--ink-2); background:transparent !important;
}
.cc-msg-modalcard h3{
  font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1.15; letter-spacing:-.02em; color:var(--ink);
  margin:0 0 var(--space-inline);
}
.cc-msg-modalactions{ display:flex; align-items:center; justify-content:center; gap:var(--space-inline); margin-top:var(--space-group); flex-wrap:wrap; }
.cc-msg-preview-result{ font-size:var(--t-caption-size); color:var(--ink-4); text-align:center; }
.cc-msg-note{ margin-top:20px; }
.cc-planner-subs{ display:flex; flex-direction:column; gap:var(--space-item); }
.cc-planner-subs-tools{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; }
.cc-planner-subs-tools .cc-search{ min-width:260px; }
.cc-planner-subs-summary{ display:flex; align-items:baseline; gap:var(--space-inline); padding:var(--space-item) var(--space-group); border:1px solid var(--border-subtle); border-radius:var(--r-card); background:var(--bg-raised); }
.cc-planner-subs-summary strong{ font-size:var(--t-heading-size); color:var(--ink); margin-left:var(--space-item); }
.cc-planner-subs-summary strong:first-child{ margin-left:0; }
.cc-planner-subs-summary span{ font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-planner-subs-list{ border:1px solid var(--border-subtle); border-radius:var(--r-card); overflow:hidden; background:var(--bg-raised); }
.cc-planner-subs-head,.cc-planner-subs-row{ display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(180px,1fr) 100px 105px 90px; gap:var(--space-item); align-items:center; padding:var(--space-item) var(--space-group); }
.cc-planner-subs-head{ background:var(--bg-sunken); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cc-planner-subs-row{ border-top:1px solid var(--border-subtle); }
.cc-planner-subs-row>div{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-planner-subs-row strong{ color:var(--ink); font-size:var(--t-caption-size); overflow:hidden; text-overflow:ellipsis; }
.cc-planner-subs-row span{ color:var(--ink-3); font-size:var(--t-micro-size); text-transform:capitalize; }
.cc-msg-pill.good{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 12%,transparent); }
.cc-msg-pill.muted{ color:var(--ink-3); background:var(--bg-sunken); }
.cc-msg-photo{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-msg-photo-preview{
  display:block; width:100%; max-height:224px; object-fit:cover;
  border-radius:var(--r-card); border:1px solid var(--border-subtle); background:var(--bg-sunken);
}
.cc-msg-photo-empty{
  display:flex; align-items:center; gap:var(--space-inline); min-height:84px; padding:var(--space-item) var(--space-item);
  border:1px dashed color-mix(in srgb, var(--ink) 14%, var(--border));
  border-radius:var(--r-card); background:color-mix(in srgb, var(--ink) 3%, var(--surface));
  color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.55;
}
.cc-msg-photo-empty > svg{ flex:none; color:var(--ink-4); }
.cc-msg-photo-actions{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-msg-surface{
  display:grid; grid-template-columns:1fr; min-width:0;
  border:1px solid var(--border-subtle); border-radius:var(--r-modal); overflow:hidden;
  background:var(--surface);
}
.cc-msg-surface.compact{ border-radius:var(--r-card); }
.cc-msg-theme-editorial{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--ann-accent) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--ann-accent) 3.5%, var(--surface)) 0%, var(--surface) 100%);
}
.cc-msg-theme-soft{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ann-accent) 10%, #fff6eb) 0%, var(--surface) 64%);
}
.cc-msg-theme-dark{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ann-accent) 30%, #172018) 0%, #121713 100%);
  border-color:color-mix(in srgb, var(--ann-accent) 28%, transparent);
}
.cc-msg-layout-split.has-image{ grid-template-columns:minmax(184px, .92fr) minmax(0, 1.08fr); }
.cc-msg-layout-split.no-image,
.cc-msg-layout-stacked,
.cc-msg-layout-compact{ grid-template-columns:1fr; }
.cc-msg-layout-compact .cc-msg-art{ max-height:164px; }
.cc-msg-layout-compact .cc-msg-surface-copy{ gap:var(--space-inline); padding:var(--space-item) var(--space-group) var(--space-group); }
.cc-msg-layout-compact .cc-msg-surface-copy strong{ font-size:var(--t-title-size); }
.cc-msg-art{
  position:relative; min-height:184px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ann-accent) 18%, #f4ede3), color-mix(in srgb, var(--ann-accent) 6%, #fff));
}
.cc-msg-art img{ display:block; width:100%; height:100%; object-fit:cover; }
.cc-msg-surface-copy{ display:flex; flex-direction:column; gap:var(--space-inline); min-width:0; padding:var(--space-group) var(--space-group) 20px; }
.cc-msg-surface-copy strong{
  margin:0; font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:500;
  line-height:1.08; letter-spacing:-.025em; color:var(--ink);
}
.cc-msg-surface-copy p{ margin:0; font-size:var(--t-label-size); line-height:1.65; color:var(--ink-2); }
.cc-msg-theme-dark .cc-live-kicker{ color:color-mix(in srgb, #fff 66%, var(--ann-accent)); }
.cc-msg-theme-dark .cc-msg-surface-copy strong,
.cc-msg-theme-dark .cc-msg-surface-copy p{ color:#f2f4ef; }
.cc-msg-theme-dark .cc-msg-surface-copy p{ color:rgba(242,244,239,.82); }
.cc-msg-offer{
  display:grid; gap:var(--space-tight); padding:var(--space-item) var(--space-item); border-radius:var(--r-card);
  background:color-mix(in srgb, var(--ann-accent) 10%, var(--surface));
  color:var(--ink-2);
}
.cc-msg-theme-dark .cc-msg-offer{
  background:color-mix(in srgb, var(--ann-accent) 18%, rgba(255,255,255,.08));
  color:#eef2ea;
}
.cc-msg-offer strong{ font-size:var(--t-strong-size); margin:0; }
.cc-msg-offer span{ font-size:var(--t-caption-size); line-height:1.5; color:inherit; opacity:.92; }
.cc-msg-offer-badge{
  display:inline-flex; align-items:center; gap:var(--space-tight); width:max-content; max-width:100%;
  padding:var(--space-tight) var(--space-inline); border-radius:999px; font-size:var(--t-micro-size); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ann-accent) 72%, var(--ink));
  background:color-mix(in srgb, var(--ann-accent) 14%, transparent);
}
.cc-msg-modalcard > .cc-msg-surface{ border:0; border-radius:0; }
.cc-live-banner{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 74px);
  left:50%;
  transform:translateX(-50%);
  z-index:930;
  width:min(720px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-group);
  padding:var(--space-item) var(--space-tight);
  border:none;
  border-bottom:1px solid var(--border-subtle);
  border-radius:0;
  background:var(--surface);
  box-shadow:none;
}
.cc-live-banner-copy{ min-width:0; display:grid; gap:var(--space-tight); }
.cc-live-banner-copy strong,
.cc-live-toast-copy strong{ font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.cc-live-banner-copy p,
.cc-live-toast-copy p{ margin:0; font-size:var(--t-caption-size); line-height:1.45; color:var(--ink-3); }
.cc-live-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:930;
  width:min(360px, calc(100vw - 24px));
  padding:var(--space-item) var(--space-item);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.cc-live-toast-head{ display:flex; gap:var(--space-inline); align-items:flex-start; }
.cc-live-toast-copy{ min-width:0; display:grid; gap:var(--space-tight); }
.cc-live-mark{
  width:auto; height:auto; border-radius:0; background:transparent !important; color:var(--ink-2); display:grid; place-items:center; flex-shrink:0; padding-top:2px;
}
.cc-live-actions{ display:flex; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-group); }
.cc-live-actions.compact{ margin-top:0; justify-content:flex-end; }
.cc-live-kicker{
  font-size:var(--t-micro-size); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4);
}
.cc-msg-modalcard.live{ margin:0; border-style:solid; }
body.stelaah-seasonal-theme .topbar{
  background:var(--surface);
  border-bottom-color:color-mix(in srgb, #2e6a5c 14%, var(--border));
}
body.stelaah-seasonal-theme .sidebar{
  background:var(--surface);
}
body.stelaah-seasonal-theme .tb-create{
  box-shadow:none;
}

/* Must match the .cc-th/.cc-row breakpoint (1080px), not 980px. The messaging
   header is `cc-th cc-msg-th` so the ≤1080px `.cc-th` rule captures it and drops
   it to 4 columns, while the rows are `cc-msg-row` (never `cc-row`) and keep 5 —
   so between 981px and 1080px the column headings sat over the wrong data.
   Collapsing both together here also brings the row's ~836px minimum down to
   ~258px, so it stops being clipped by .content's overflow-x in that band. */
@media (max-width: 1080px){
  /* .cc-th.cc-msg-th is (0,2,0) deliberately: the generic `.cc-th` override
     lives LATER in this file (~line 1348) at equal (0,1,0) specificity, so a
     single-class selector here would lose on source order and the header would
     still disagree with its rows. */
  .cc-th.cc-msg-th, .cc-msg-row, .cc-th.cc-msg-th-ann, .cc-msg-row-ann{
    grid-template-columns:minmax(0,1fr) 110px 120px;
  }
  .cc-msg-row > :nth-child(4),
  .cc-msg-row > :nth-child(5),
  .cc-msg-th > :nth-child(4),
  .cc-msg-th > :nth-child(5),
  .cc-msg-th-ann > :nth-child(4),
  .cc-msg-th-ann > :nth-child(5){
    display:none;
  }
}
@media (max-width: 760px){
  .cc-msg-grid2{ grid-template-columns:1fr; }
  .cc-planner-subs-head{ display:none; }
  .cc-planner-subs-row{ grid-template-columns:1fr 1fr; }
  .cc-msg-toggles{ grid-template-columns:auto 1fr; }
  .cc-msg-layout-split.has-image{ grid-template-columns:1fr; }
  .cc-msg-surface-copy strong{ font-size:var(--t-title-size); }
  .cc-live-banner{
    top:calc(env(safe-area-inset-top, 0px) + 66px);
    left:12px;
    right:12px;
    width:auto;
    transform:none;
    align-items:flex-start;
    flex-direction:column;
  }
  .cc-live-actions.compact{
    margin-top:var(--space-inline);
    width:100%;
    justify-content:flex-start;
  }
  .cc-live-toast{
    left:12px;
    right:12px;
    width:auto;
    bottom:12px;
  }
}
.cc-np-bug{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-tight) var(--space-inline); font-size:var(--t-label-size); color:var(--ink-2); }
.cc-np-empty{ font-size:var(--t-caption-size); color:var(--ink-4); padding:var(--space-tight) var(--space-inline); }
.cc-np-foot{ display:flex; gap:var(--space-inline); padding:var(--space-item) var(--space-group); border-top:1px solid var(--border-subtle); }
.cc-np-foot .btn{ flex:1; justify-content:center; }

/* scroll views (health / issues) */
.cc-scroll{ flex:1; min-width:0; overflow-y:auto; padding:var(--space-block) 28px 56px; }
.cc-note{ font-size:var(--t-caption-size); color:var(--ink-4); margin:var(--space-item) 0 var(--space-group); }

/* health table */
.cc-htable{ margin-top:var(--space-tight); }
.cc-hth, .cc-hrow{ display:grid; grid-template-columns:minmax(160px,2fr) 1.2fr 1fr 70px 110px; align-items:center; gap:var(--space-item); }
.cc-hth{ padding:0 var(--space-inline) var(--space-inline); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--border); }
.cc-hrow{ padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:none; cursor:pointer; text-align:left; border-radius:var(--r-control); transition:background .13s ease; width:100%; }
.cc-hrow:hover{ background:var(--bg-sunken); }
.cc-hr-feat{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.cc-hr-sec{ font-size:var(--t-caption-size); }
.cc-hr-open{ font-size:var(--t-label-size); color:var(--ink-3); }
.cc-life-tag, .cc-health-tag{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:500; }

/* App Health combines real user outcomes with independent browser journeys. */
.cc-app-health{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-app-health-toolbar{ margin-bottom:0; }
.cc-app-verdict{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-group); border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-sunken); }
.cc-app-verdict h2{ margin:var(--space-tight) 0; font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1.12; color:var(--ink); }
.cc-app-verdict p{ margin:0; max-width:720px; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.cc-app-verdict-mark,.cc-app-check-mark{ display:grid; place-items:center; flex:0 0 auto; color:var(--ink-4); background:var(--bg); border:1px solid var(--border); }
.cc-app-verdict-mark{ width:40px; height:40px; border-radius:var(--r-control); }
.cc-app-verdict.healthy .cc-app-verdict-mark,.cc-app-check-mark.healthy{ color:var(--st-done); background:var(--st-done-soft); }
.cc-app-verdict.degraded .cc-app-verdict-mark,.cc-app-check-mark.watch{ color:var(--c-gold); background:color-mix(in srgb,var(--c-gold) 11%,var(--bg)); }
.cc-app-verdict.critical .cc-app-verdict-mark,.cc-app-check-mark.action{ color:var(--c-clay); background:color-mix(in srgb,var(--c-clay) 11%,var(--bg)); }
.cc-app-build{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-tight); max-width:180px; }
.cc-app-build span{ color:var(--ink-4); font-size:var(--t-micro-size); text-transform:uppercase; letter-spacing:.05em; }
.cc-app-build strong{ overflow:hidden; max-width:100%; color:var(--ink-2); font-size:var(--t-caption-size); text-overflow:ellipsis; white-space:nowrap; }
.cc-app-metrics{ margin:0; }
.cc-app-metrics .cc-metric-v{ font-size:var(--t-title-size); }
.cc-app-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-group); }
.cc-app-section{ margin:0; }
.cc-app-checks{ display:flex; flex-direction:column; }
.cc-app-check{ display:flex; align-items:center; gap:var(--space-inline); min-height:42px; border-bottom:1px solid var(--border-subtle); color:var(--ink-2); font-size:var(--t-label-size); }
.cc-app-check:last-child{ border-bottom:0; }
.cc-app-check-mark{ width:26px; height:26px; border-radius:var(--r-control); }
.cc-app-check-status{ color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.cc-app-check-status.healthy{ color:var(--st-done); }
.cc-app-check-status.watch{ color:var(--c-gold); }
.cc-app-check-status.action{ color:var(--c-clay); }
.cc-app-experience{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--border-subtle); }
.cc-app-experience > div{ display:flex; flex-direction:column; gap:var(--space-tight); min-height:78px; padding:var(--space-item) var(--space-inline); border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-app-experience > div:nth-child(4n){ border-right:0; }
.cc-app-experience span{ color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-app-experience strong{ color:var(--ink); font-family:var(--font-serif); font-size:var(--t-heading-size); font-weight:600; }
.cc-app-experience small{ color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.35; }
.cc-app-last{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-inline); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cc-app-last > strong{ color:var(--ink-3); font-size:var(--t-caption-size); }
.cc-app-attention{ display:flex; flex-direction:column; }
.cc-app-attention-row{ display:grid; grid-template-columns:82px minmax(0,1fr); gap:var(--space-item); padding:var(--space-item) 0; border-bottom:1px solid var(--border-subtle); }
.cc-app-attention-row:last-child{ border-bottom:0; }
.cc-app-attention-sev{ align-self:start; width:max-content; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-pill); background:var(--bg-sunken); color:var(--ink-4); font-size:var(--t-micro-size); font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.cc-app-attention-sev.critical{ color:var(--c-clay); background:color-mix(in srgb,var(--c-clay) 11%,var(--bg)); }
.cc-app-attention-sev.degraded{ color:var(--c-gold); background:color-mix(in srgb,var(--c-gold) 11%,var(--bg)); }
.cc-app-feature-health{ margin-top:var(--space-group); }

@media (max-width:900px){
  .cc-app-grid{ grid-template-columns:1fr; }
  .cc-app-experience{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cc-app-experience > div:nth-child(4n){ border-right:1px solid var(--border-subtle); }
  .cc-app-experience > div:nth-child(2n){ border-right:0; }
  .cc-app-verdict{ align-items:flex-start; flex-wrap:wrap; }
  .cc-app-build{ width:100%; max-width:none; align-items:flex-start; padding-left:calc(40px + var(--space-item)); }
}
.cc-life-tag{ color:var(--ink-3); }

/* issues */
.cc-issues{ display:flex; flex-direction:column; margin-top:var(--space-tight); }
.cc-issue{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle);
  background:none; cursor:pointer; text-align:left; width:100%; border-radius:var(--r-control); transition:background .13s ease; }
.cc-issue:hover{ background:var(--bg-sunken); }
.cc-issue-sev{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cc-issue-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-issue-title{ font-size:var(--t-body-size); font-weight:600; color:var(--ink); }
.cc-issue-meta{ display:flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-issue-meta .cc-row-ic{ color:var(--ink-4); }
.cc-istatus{ font-size:var(--t-micro-size); font-weight:600; text-transform:capitalize; padding:var(--space-tight) var(--space-inline); border-radius:6px; }
.cc-istatus-open{ color:#b5563f; background:color-mix(in srgb,#b5563f 12%,transparent); }
.cc-istatus-ack{ color:#8a6a1d; background:color-mix(in srgb,#c79a3a 16%,transparent); }
.cc-istatus-triage{ color:#c79a3a; background:color-mix(in srgb,#c79a3a 14%,transparent); }
.cc-istatus-resolved{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 13%,transparent); }
.cc-istatus-archived{ color:var(--ink-4); background:var(--bg-sunken); }
.cc-istatus-overdue{ color:#b5563f; background:color-mix(in srgb,#b5563f 14%,transparent); }

/* issue editor */
.cc-issue-edit{ max-width:680px; }
.cc-ie-form{ display:flex; flex-direction:column; gap:var(--space-group); margin-top:var(--space-group); }
.cc-feat-pick{ display:inline-flex; align-items:center; gap:var(--space-inline); height:38px; padding:0 var(--space-item); border-radius:var(--r-control);
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:var(--t-label-size); font-weight:500; color:var(--ink); }
.cc-feat-pick:hover{ border-color:var(--ink-4); }
.cc-feat-pick .cc-row-ic{ color:var(--ink-3); }
.cc-feat-pick svg:last-child{ color:var(--ink-4); margin-left:var(--space-tight); }
.cc-ie-actions{ display:flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-inline); }

/* alerts */
.cc-alerts{ display:flex; flex-direction:column; margin-top:var(--space-tight); }
.cc-alert{
  display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle);
  background:none; cursor:pointer; text-align:left; width:100%; border-radius:var(--r-control); transition:background .13s ease;
}
.cc-alert:hover{ background:var(--bg-sunken); }
.cc-alert-sev{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cc-alert-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-alert-title{ font-size:var(--t-body-size); font-weight:600; color:var(--ink); }
.cc-alert-meta{ display:flex; align-items:center; gap:var(--space-tight); flex-wrap:wrap; font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-alert-meta .cc-row-ic{ color:var(--ink-4); }
.cc-alert-dot{ opacity:.5; }
.cc-alert-count{
  min-width:22px; height:22px; padding:0 var(--space-inline); border-radius:999px; display:grid; place-items:center;
  font-size:var(--t-micro-size); font-weight:700; color:var(--ink-3); background:var(--bg-sunken);
}
.cc-alert-assignee{ display:flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-3); flex-shrink:0; }
.cc-alert-assignee .avatar{ flex-shrink:0; }
.cc-alert-assign-row{ display:flex; align-items:center; gap:var(--space-inline); }
.cc-alert-assign-row .cc-eyebrow{ margin:0; }
.cc-assign-trigger{
  display:inline-flex; align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control);
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:var(--t-label-size); font-weight:500; color:var(--ink);
}
.cc-assign-trigger:hover{ border-color:var(--ink-4); }
.cc-assign-trigger svg:last-child{ color:var(--ink-4); margin-left:2px; }
.cc-repair-form{ display:flex; flex-direction:column; gap:var(--space-item); margin-top:var(--space-item); padding-top:var(--space-item); border-top:1px solid var(--border-subtle); }
.cc-alert-detail{ max-width:760px; }
.cc-alert-card{ display:flex; flex-direction:column; gap:var(--space-group); margin-top:var(--space-group); }
.cc-alert-card-hd{ display:flex; align-items:flex-start; gap:var(--space-item); }
.cc-alert-card-ic{
  width:38px; height:38px; border-radius:var(--r-control); display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent);
}
.cc-alert-card-title{ font-size:var(--t-title-size); line-height:1.2; font-weight:600; color:var(--ink); }
.cc-alert-card-sub{ font-size:var(--t-caption-size); color:var(--ink-4); margin-top:var(--space-tight); }
.cc-alert-chips{ display:flex; gap:var(--space-tight); flex-wrap:wrap; }
.cc-alert-detail-copy{ margin:0; font-size:var(--t-body-size); line-height:1.6; color:var(--ink-2); }
.cc-alert-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-inline); }
.cc-alert-fact{
  display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-item) var(--space-item); border-radius:var(--r-control);
  background:var(--bg-sunken);
}
.cc-alert-fact span{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.cc-alert-fact strong{ font-size:var(--t-caption-size); color:var(--ink); font-weight:600; }
.cc-alert-loc{ display:flex; flex-direction:column; border-top:1px solid var(--border-subtle); padding-top:var(--space-item); }
.cc-alert-locrow{
  display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--space-item); align-items:start;
  padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle);
}
.cc-alert-locrow:last-child{ border-bottom:0; }
.cc-alert-locrow span{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-alert-locrow code{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:var(--t-micro-size); color:var(--ink-3);
  background:var(--bg-sunken); padding:var(--space-tight) var(--space-inline); border-radius:6px; word-break:break-word;
}
.cc-issue-map{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:var(--space-group) 0; display:flex; flex-direction:column; gap:var(--space-group); }
.cc-issue-flow{ display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr; align-items:stretch; gap:var(--space-inline); }
.cc-issue-node{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-inline) 0; }
.cc-issue-node span{ width:24px; height:24px; display:grid; place-items:center; color:var(--ink-2); }
.cc-issue-node b{ font-size:var(--t-micro-size); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.cc-issue-node em{ font-style:normal; font-size:var(--t-caption-size); line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }
.cc-issue-link{ display:grid; place-items:center; color:var(--ink-4); opacity:.7; }
.cc-issue-visual{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--space-group); align-items:center; }
.cc-issue-radar{ --tone:#b5563f; position:relative; width:138px; height:138px; border-radius:999px; display:grid; place-items:center; background:radial-gradient(circle, color-mix(in srgb, var(--tone) 14%, transparent) 0 28%, transparent 29%); }
.cc-issue-map.tone-med .cc-issue-radar{ --tone:#c79a3a; }
.cc-issue-map.tone-low .cc-issue-radar{ --tone:#8b8b7f; }
.cc-issue-radar-core{ position:absolute; width:18px; height:18px; border-radius:999px; background:var(--tone); box-shadow:0 0 0 7px color-mix(in srgb, var(--tone) 14%, transparent); }
.cc-issue-radar-ring{ position:absolute; border-radius:999px; border:1px solid color-mix(in srgb, var(--tone) 24%, transparent); inset:calc((100% - var(--pct)) / 2); }
.cc-issue-radar-ring.r1{ inset:18px; opacity:.42; }
.cc-issue-radar-ring.r2{ inset:36px; opacity:.55; }
.cc-issue-radar-ring.r3{ inset:54px; opacity:.7; }
.cc-issue-bars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-issue-bars div{ min-width:0; padding:var(--space-inline) var(--space-item); display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-issue-bars div:nth-child(odd){ border-right:1px solid var(--border-subtle); }
.cc-issue-bars div:nth-child(-n+2){ border-bottom:1px solid var(--border-subtle); }
.cc-issue-bars span{ font-size:var(--t-micro-size); font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.cc-issue-bars strong{ font-size:var(--t-caption-size); color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.cc-repair-board{ border-top:1px solid var(--border-subtle); padding-top:var(--space-group); display:flex; flex-direction:column; gap:var(--space-item); }
.cc-repair-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); }
.cc-repair-head p{ margin:var(--space-tight) 0 0; font-size:var(--t-label-size); line-height:1.5; color:var(--ink-3); max-width:560px; }
.cc-repair-pill{ flex-shrink:0; border-radius:999px; padding:var(--space-tight) var(--space-inline); font-size:var(--t-micro-size); font-weight:700; color:var(--ink-2); background:var(--bg-sunken); }
.cc-repair-pill.go{ color:var(--st-done); background:var(--st-done-soft); }
.cc-repair-pill.hold{ color:var(--st-review); background:var(--st-review-soft); }
.cc-repair-steps{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-repair-step{ min-width:0; padding:var(--space-inline) var(--space-inline); display:flex; align-items:center; justify-content:center; gap:var(--space-inline); font-size:var(--t-micro-size); font-weight:650; color:var(--ink-4); text-transform:capitalize; text-align:center; border-right:1px solid var(--border-subtle); }
.cc-repair-step:last-child{ border-right:0; }
.cc-repair-step span{ width:18px; height:18px; border-radius:999px; display:grid; place-items:center; background:var(--bg-sunken); color:var(--ink-4); font-size:var(--t-micro-size); }
.cc-repair-step.on{ color:var(--ink); }
.cc-repair-step.done{ color:var(--st-done); }
.cc-repair-step.done span{ background:var(--st-done-soft); color:var(--st-done); }
.cc-repair-checks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-inline); }
.cc-repair-checks div{ display:flex; align-items:center; gap:var(--space-inline); min-width:0; font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-repair-checks div.ok{ color:var(--ink-2); }
.cc-repair-checks svg{ flex-shrink:0; color:var(--ink-4); }
.cc-repair-checks .ok svg{ color:var(--st-done); }
.cc-alerts-kpis{ margin-bottom:var(--space-tight); }
.cc-kpi-warn{ color:#b5563f; }
.cc-filter-n{
  margin-left:var(--space-tight); min-width:18px; height:18px; padding:0 var(--space-tight); border-radius:999px;
  font-size:var(--t-micro-size); font-weight:700; background:var(--bg-sunken); color:var(--ink-3);
}
.cc-alert-sev-chip{ font-size:var(--t-micro-size); padding:2px var(--space-inline); gap:var(--space-tight); }
.cc-gsearch-inline{
  flex:1; min-width:200px; max-width:320px; height:34px; display:flex; align-items:center; gap:var(--space-inline);
  padding:0 var(--space-inline); border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface);
}
.cc-gsearch-inline input{ flex:1; border:0; background:transparent; font-size:var(--t-label-size); outline:none; min-width:0; }
.cc-gsearch-inline button{ border:0; background:none; cursor:pointer; color:var(--ink-4); padding:var(--space-tight); }
.cc-notify-panel{ margin-bottom:var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-card); overflow:hidden; }
.cc-notify-panel-hd{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item);
  padding:var(--space-item) var(--space-group); border:0; background:var(--surface); cursor:pointer; text-align:left;
}
.cc-notify-panel-hd:hover{ background:var(--bg-sunken); }
.cc-notify-panel-tease{ margin:var(--space-tight) 0 0; font-size:var(--t-caption-size); }
.cc-session-row{ align-items:flex-start; }
.cc-session-live{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:var(--space-tight);
  background:#5c7349; box-shadow:0 0 0 0 rgba(92,115,73,.45);
  animation:cc-session-pulse 2s ease-out infinite;
}
.cc-live-pill{
  display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:600;
  color:var(--st-done,#5c7349); text-transform:uppercase; letter-spacing:.04em;
}
.cc-session-chip{
  display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:600;
  color:var(--ink-3); text-transform:capitalize;
}
.cc-session-ago{ font-size:var(--t-caption-size); white-space:nowrap; }
.cc-spin{ animation:cc-spin .8s linear infinite; }
@keyframes cc-session-pulse{
  0%{ box-shadow:0 0 0 0 rgba(92,115,73,.45); }
  70%{ box-shadow:0 0 0 6px rgba(92,115,73,0); }
  100%{ box-shadow:0 0 0 0 rgba(92,115,73,0); }
}
@keyframes cc-spin{ to{ transform:rotate(360deg); } }
.cc-sessions{ max-width:1120px; }
.cc-session-note{ margin:var(--space-tight) 0 0; }
.cc-session-asof{ font-size:var(--t-caption-size); color:var(--ink-4); white-space:nowrap; }
.cc-session-metrics{ margin-top:var(--space-group); }
.cc-session-section{ margin-top:var(--space-block); border-top:1px solid var(--border); }
.cc-session-section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-group); padding:var(--space-group) 2px var(--space-inline); }
.cc-session-section-head .cc-eyebrow{ margin:0; }
.cc-session-section-head p{ margin:var(--space-tight) 0 0; font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-session-list{ display:flex; flex-direction:column; }
.cc-session-row.cc-row{ display:flex; grid-template-columns:none; width:100%; padding:var(--space-item) var(--space-inline); cursor:default; }
.cc-session-row.cc-row:hover{ background:var(--bg-sunken); }
.cc-session-row > svg{ color:var(--ink-4); flex-shrink:0; margin-top:2px; }

/* Release health — one plain-language verdict, then evidence rows. */
.cc-release-health{ max-width:1160px; }
.cc-release-toolbar .cc-note{ margin:var(--space-tight) 0 0; max-width:680px; }
.cc-release-verdict{
  display:flex; align-items:center; gap:var(--space-group); margin-top:var(--space-group); padding:20px var(--space-tight);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cc-release-verdict-mark{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center; flex-shrink:0;
  color:var(--ink-4); background:var(--bg-sunken);
}
.cc-release-verdict h2{ margin:var(--space-tight) 0 var(--space-tight); font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:600; color:var(--ink); }
.cc-release-verdict p{ margin:0; color:var(--ink-3); font-size:var(--t-label-size); line-height:1.5; }
.cc-release-verdict.healthy .cc-release-verdict-mark{ color:var(--st-done,#5c7349); background:var(--st-done-soft); }
.cc-release-verdict.watch .cc-release-verdict-mark{ color:#9b7426; background:color-mix(in srgb,#c79a3a 13%,transparent); }
.cc-release-verdict.action .cc-release-verdict-mark{ color:#a24735; background:color-mix(in srgb,#b5563f 12%,transparent); }
.cc-release-rate{ min-width:120px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.cc-release-rate strong{ font-family:var(--font-serif); font-size:var(--t-display-size); font-weight:600; color:var(--ink); }
.cc-release-rate span{ font-size:var(--t-micro-size); color:var(--ink-4); text-transform:uppercase; letter-spacing:.04em; }
.cc-release-metrics{ margin-top:var(--space-group); }
.cc-release-boundary{ display:flex; align-items:flex-start; gap:var(--space-inline); margin-top:var(--space-item); padding:var(--space-item) 2px; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.cc-release-boundary svg{ color:var(--ink-4); flex-shrink:0; margin-top:2px; }
.cc-rollout-stage{ display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)); gap:0; margin:var(--space-group) 0 var(--space-inline); }
.cc-rollout-step{ position:relative; display:flex; align-items:center; gap:var(--space-inline); min-width:0; color:var(--ink-4); font-size:var(--t-caption-size); }
.cc-rollout-step::after{ content:""; position:absolute; height:1px; left:28px; right:7px; top:12px; background:var(--line); }
.cc-rollout-step:last-child::after{ display:none; }
.cc-rollout-step>span{ position:relative; z-index:1; width:24px; height:24px; border:1px solid var(--line); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--bg); font-size:var(--t-micro-size); flex:0 0 auto; }
.cc-rollout-step>b{ font-weight:600; white-space:nowrap; }
.cc-rollout-step.done,.cc-rollout-step.current{ color:var(--ink); }
.cc-rollout-step.done>span{ border-color:color-mix(in srgb,var(--st-done,#5c7349) 42%,var(--line)); color:var(--st-done,#5c7349); }
.cc-rollout-step.current>span{ border-color:var(--ink-3); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 6%,transparent); }
.cc-rollout-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-inline); padding-top:var(--space-inline); }
.cc-rollout-event{ align-items:flex-start; }
.cc-rollout-event>svg{ color:var(--ink-4); margin-top:var(--space-tight); flex:0 0 auto; }
.cc-readiness{ margin-top:20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cc-readiness-head{ display:flex; align-items:flex-start; gap:20px; padding:var(--space-group) 2px var(--space-item); }
.cc-readiness-head h3{ margin:var(--space-tight) 0 var(--space-tight); font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:600; color:var(--ink); }
.cc-readiness-head p{ max-width:720px; margin:0; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.cc-readiness-count{ min-width:112px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.cc-readiness-count strong{ font-family:var(--font-serif); font-size:var(--t-title-size); font-weight:600; color:var(--ink); }
.cc-readiness-count span{ color:var(--ink-4); font-size:var(--t-micro-size); letter-spacing:.05em; text-transform:uppercase; }
.cc-readiness-next{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-item) 2px; border-top:1px solid var(--border-subtle); color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.cc-readiness-next svg{ flex:none; margin-top:2px; color:var(--ink-4); }
.cc-readiness-next span{ display:flex; min-width:0; flex-direction:column; gap:2px; }
.cc-readiness-next b{ color:var(--ink); font-size:var(--t-micro-size); letter-spacing:.04em; text-transform:uppercase; }
.cc-readiness-list{ border-top:1px solid var(--border-subtle); }
.cc-readiness-row{ display:grid; grid-template-columns:18px minmax(150px,190px) minmax(220px,1fr) 104px; align-items:start; gap:var(--space-item); padding:var(--space-item) 2px; border-bottom:1px solid var(--border-subtle); }
.cc-readiness-row>svg{ margin-top:1px; color:var(--ink-4); }
.cc-readiness-row.pass>svg,.cc-readiness-row.pass .cc-readiness-status{ color:var(--st-done,#5c7349); }
.cc-readiness-row.attention>svg,.cc-readiness-row.attention .cc-readiness-status,.cc-readiness-row.recommended>svg,.cc-readiness-row.recommended .cc-readiness-status{ color:#9b7426; }
.cc-readiness-row.blocked>svg,.cc-readiness-row.blocked .cc-readiness-status{ color:#a24735; }
.cc-readiness-name{ color:var(--ink); font-size:var(--t-caption-size); font-weight:600; }
.cc-readiness-detail{ color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.45; }
.cc-readiness-status{ text-align:right; color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.cc-readiness-boundary{ margin:0; padding:var(--space-item) 2px var(--space-item); color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.5; }
.cc-scale-watch{ max-width:1160px; }
.cc-scale-reasons{ display:flex; flex-direction:column; }
.cc-scale-reasons>div{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) var(--space-inline); border-bottom:1px solid var(--line); color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.45; }
.cc-scale-reasons>div:last-child{ border-bottom:0; }
.cc-scale-reasons svg{ flex:0 0 auto; margin-top:2px; color:#9b7426; }
.cc-scale-queue.cc-row{ display:flex; grid-template-columns:none; width:100%; gap:var(--space-item); padding:var(--space-item) var(--space-inline); cursor:default; }
.cc-scale-queue.cc-row:hover{ background:var(--bg-sunken); }
.cc-scale-queue>svg{ flex:0 0 auto; margin-top:var(--space-tight); color:var(--ink-4); }
.cc-scale-queue>span{ min-width:72px; text-align:right; color:var(--ink-3); font-size:var(--t-caption-size); white-space:nowrap; }
.cc-scale-queue>span.cc-scale-bad{ color:#a24735; font-weight:650; }
.cc-scale-trend{ margin-top:0; }
.cc-job-health{ max-width:1160px; }
.cc-job-row.cc-row{ display:flex; grid-template-columns:none; width:100%; gap:var(--space-item); padding:var(--space-item) var(--space-inline); cursor:default; }
.cc-job-row.cc-row:hover{ background:var(--bg-sunken); }
.cc-job-row>svg{ flex:0 0 auto; margin-top:var(--space-tight); color:var(--ink-4); }
.cc-job-row.state-action>svg{ color:var(--st-blocked); }
.cc-job-row.state-watch>svg{ color:var(--st-review); }
.cc-job-row.state-healthy>svg,.cc-job-row.state-running>svg{ color:var(--st-done); }
.cc-job-detail{ margin-top:var(--space-tight); color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.45; }
.cc-job-status{ display:inline-flex; align-items:center; gap:var(--space-tight); flex:0 0 auto; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-pill); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-micro-size); font-weight:650; white-space:nowrap; }
.cc-job-status.state-action{ color:var(--st-blocked-ink); background:var(--st-blocked-soft); }
.cc-job-status.state-watch{ color:var(--st-review-ink); background:var(--st-review-soft); }
.cc-job-status.state-healthy,.cc-job-status.state-running{ color:var(--st-done-ink); background:var(--st-done-soft); }
.cc-job-observed{ min-width:136px; flex:0 0 auto; color:var(--ink-3); font-size:var(--t-caption-size); text-align:right; white-space:nowrap; }
@media (max-width:640px){
  .cc-job-row.cc-row{ flex-wrap:wrap; }
  .cc-job-row .grow{ flex-basis:calc(100% - var(--space-block)); }
  .cc-job-observed{ min-width:auto; text-align:left; }
}
.cc-release-group.cc-row,.cc-release-row.cc-row{ display:flex; grid-template-columns:none; width:100%; gap:var(--space-item); padding:var(--space-item) var(--space-inline); cursor:default; }
.cc-release-group.cc-row:hover,.cc-release-row.cc-row:hover{ background:var(--bg-sunken); }
.cc-release-status{ width:8px; height:8px; margin-top:var(--space-tight); border-radius:999px; background:#b5563f; flex-shrink:0; }
.cc-release-status.monitoring{ background:#c79a3a; }
.cc-release-status.resolved{ background:#5c7349; }
.cc-release-status.ignored{ background:var(--ink-5); }
.cc-release-group-state{ font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); }
.cc-release-row > svg{ color:var(--ink-4); flex-shrink:0; }
.cc-release-row > span{ font-size:var(--t-caption-size); color:var(--ink-3); white-space:nowrap; }
.cc-release-row > strong{ min-width:54px; text-align:right; font-size:var(--t-label-size); color:var(--ink); }

/* customer-path canaries */
.cc-canaries{ max-width:1160px; }
.cc-canary-row.cc-row,.cc-canary-history.cc-row{ display:flex; grid-template-columns:none; width:100%; gap:var(--space-item); padding:var(--space-item) var(--space-inline); cursor:default; }
.cc-canary-row.cc-row:hover,.cc-canary-history.cc-row:hover{ background:var(--bg-sunken); }
.cc-canary-mark{ width:28px; height:28px; border-radius:var(--r-control); display:grid; place-items:center; flex-shrink:0; color:var(--ink-4); background:var(--bg-sunken); }
.cc-canary-mark.healthy{ color:#5c7349; background:var(--st-done-soft); }
.cc-canary-mark.watch{ color:#9b7426; background:color-mix(in srgb,#c79a3a 12%,transparent); }
.cc-canary-mark.action{ color:#a24735; background:color-mix(in srgb,#b5563f 11%,transparent); }
.cc-canary-required{ margin-left:var(--space-inline); color:var(--ink-4); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cc-canary-desc{ margin-top:var(--space-tight); color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.45; }
.cc-canary-outcome{ min-width:92px; font-size:var(--t-micro-size); font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-align:right; color:var(--ink-4); }
.cc-canary-outcome.healthy{ color:#5c7349; }
.cc-canary-outcome.watch{ color:#9b7426; }
.cc-canary-outcome.action{ color:#a24735; }
.cc-canary-history > svg{ color:var(--ink-4); flex-shrink:0; }
.cc-canary-history > span{ color:var(--ink-3); font-size:var(--t-caption-size); white-space:nowrap; }

/* ───────────────────────── tenants ───────────────────────── */
.cc-tn-dist{ margin-bottom:var(--space-group); }
.cc-dist-bar{ display:flex; height:10px; border-radius:6px; overflow:hidden; gap:2px; background:var(--bg-sunken); }
.cc-dist-seg{ min-width:6px; }
.cc-dist-legend{ display:flex; flex-wrap:wrap; gap:var(--space-item); margin-top:var(--space-inline); }
.cc-dist-key{ display:inline-flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-tn-list{ margin-top:var(--space-tight); }
.cc-tn-th, .cc-tn-row{ display:grid; grid-template-columns:minmax(200px,2fr) 100px 130px 80px 110px 40px; align-items:center; gap:var(--space-item); }
.cc-tn-th{ padding:0 var(--space-inline) var(--space-inline); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--border); }
.cc-tn-row{ padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:none; cursor:pointer; text-align:left; width:100%; border-radius:var(--r-control); transition:background .13s ease; }
.cc-tn-row:hover{ background:var(--bg-sunken); }
.cc-tn-id{ display:flex; align-items:center; gap:var(--space-item); min-width:0; }
.cc-tn-tile{ width:34px; height:34px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; flex-shrink:0; }
.cc-tn-tile.lg{ width:48px; height:48px; border-radius:var(--r-card); }
.cc-tn-names{ min-width:0; display:flex; flex-direction:column; }
.cc-tn-name{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-body-size); font-weight:600; color:var(--ink); }
.cc-tn-cur{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.03em; color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 13%,transparent); padding:1px var(--space-inline); border-radius:5px; }
.cc-tn-sub{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-tn-seats{ display:flex; align-items:center; gap:var(--space-inline); }
.cc-facepile{ display:flex; }
.cc-face{ margin-left:-4px; border-radius:50%; box-shadow:0 0 0 2px var(--surface); }
.cc-face:first-child{ margin-left:0; }
.cc-tn-seatn{ font-size:var(--t-label-size); color:var(--ink-3); }
.cc-tn-feat{ font-size:var(--t-label-size); color:var(--ink-3); }
.cc-tn-online{ display:inline-flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); color:var(--ink-3); }
.cc-dot.on{ background:var(--st-done,#5c7349) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--st-done,#5c7349) 14%,transparent); }
.cc-tn-curtag{ font-size:var(--t-label-size); color:var(--ink-4); font-weight:500; }

.cc-heat{ margin:20px 0 28px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--space-group) 0 var(--space-group); }
.cc-heat-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-group); margin-bottom:var(--space-inline); }
.cc-heat-sub, .cc-adminlevels-sub{ font-size:var(--t-caption-size); color:var(--ink-4); margin-top:-8px; }
.cc-heat-key{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); color:var(--ink-4); white-space:nowrap; }
.cc-heat-key span{ width:14px; height:14px; border-radius:4px; }
.cc-heat-key span:nth-child(1){ background:color-mix(in srgb,var(--accent) 18%, transparent); }
.cc-heat-key span:nth-child(2){ background:color-mix(in srgb,var(--accent) 36%, transparent); }
.cc-heat-key span:nth-child(3){ background:color-mix(in srgb,var(--accent) 54%, transparent); }
.cc-heat-days{ display:grid; grid-template-columns:180px repeat(14, minmax(18px,1fr)); gap:var(--space-tight); padding:0 var(--space-inline) var(--space-tight); }
.cc-heat-days span{ font-size:var(--t-micro-size); color:var(--ink-4); text-align:center; }
.cc-heat-days:before{ content:''; }
.cc-heat-rows{ display:flex; flex-direction:column; gap:2px; }
.cc-heat-row{ display:grid; grid-template-columns:180px 1fr; gap:var(--space-tight); align-items:center; width:100%; background:none; border:0; border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); cursor:pointer; text-align:left; transition:background .13s ease; }
.cc-heat-row:hover{ background:var(--bg-sunken); }
.cc-heat-name{ display:flex; align-items:center; gap:var(--space-inline); min-width:0; font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.cc-heat-name em{ margin-left:auto; font-size:var(--t-micro-size); font-style:normal; color:var(--ink-4); font-weight:500; white-space:nowrap; }
.cc-heat-cells{ display:grid; grid-template-columns:repeat(14, minmax(18px,1fr)); gap:var(--space-tight); }
.cc-heat-cell{ height:22px; border-radius:5px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) var(--a,0%), transparent); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:600; }
.cc-heat-cell.unset{ background:var(--bg-sunken); color:transparent; padding:0; min-height:0; }

.cc-adminlevels{ margin:0 0 var(--space-block); border-bottom:1px solid var(--border); padding-bottom:var(--space-group); }
.cc-adminlevels-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-group); margin-bottom:var(--space-inline); }
.cc-admin-current{ display:inline-flex; align-items:center; gap:var(--space-inline); height:28px; padding:0 var(--space-inline); border-radius:var(--r-control); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); font-size:var(--t-caption-size); font-weight:700; white-space:nowrap; }
.cc-adminlevels-rows{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-inline); }
.cc-adminlevel{ min-width:0; display:flex; gap:var(--space-inline); align-items:flex-start; padding:var(--space-inline) var(--space-inline); border-radius:var(--r-control); color:var(--ink-3); }
.cc-adminlevel.on{ background:var(--bg-sunken); color:var(--ink); }
.cc-adminlevel svg{ flex-shrink:0; color:var(--ink-4); margin-top:2px; }
.cc-adminlevel.on svg{ color:var(--accent); }
.cc-adminlevel-main{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-adminlevel-main b{ font-size:var(--t-caption-size); color:inherit; }
.cc-adminlevel-main em{ font-style:normal; font-size:var(--t-micro-size); line-height:1.35; color:var(--ink-4); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cc-adminlevel-you{ margin-left:auto; font-size:var(--t-micro-size); font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); padding:2px var(--space-tight); border-radius:5px; }

.cc-audit{ margin-top:var(--space-section); border-top:1px solid var(--border); padding-top:var(--space-group); }
.cc-audit .cc-eyebrow{ margin-bottom:var(--space-item); }
.cc-audit-row{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 2px; font-size:var(--t-label-size); color:var(--ink-2); }
.cc-audit-row svg{ color:var(--ink-4); flex-shrink:0; }
.cc-audit-act{ font-weight:500; }
.cc-audit-tgt{ color:var(--ink); font-weight:600; }
.cc-audit-meta{ font-size:var(--t-micro-size); color:var(--ink-4); }

/* tenant panel */
.cc-tp{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-tp-hero{ display:flex; align-items:center; gap:var(--space-item); padding-bottom:var(--space-group); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-tight); }
.cc-tp-plan{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-body-size); font-weight:600; color:var(--ink); }
.cc-tp-planraw{ font-weight:400; color:var(--ink-4); font-size:var(--t-caption-size); }
.cc-tp-feat{ font-size:var(--t-caption-size); color:var(--ink-4); margin-top:var(--space-tight); }
.cc-tp-sec{ padding:var(--space-group) 0; border-bottom:1px solid var(--border-subtle); }
.cc-tp-sec:last-child{ border-bottom:0; }
.cc-tp-mems{ display:flex; flex-direction:column; gap:2px; }
.cc-tp-mem{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-tight) 0; }
.cc-tp-mem-name{ display:block; font-size:var(--t-label-size); font-weight:500; color:var(--ink); }
.cc-tp-mem-role{ display:block; font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-tp-owner{ font-size:var(--t-micro-size); font-weight:600; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); padding:2px var(--space-inline); border-radius:6px; }
.cc-tp-online{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:600; color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 10%,transparent); padding:2px var(--space-inline); border-radius:6px; }
.cc-tp-heat{ display:flex; align-items:flex-start; gap:var(--space-tight); height:24px; min-height:24px; max-height:24px; overflow-x:auto; padding-bottom:2px; }
.cc-tp-heatcell{ flex:0 0 32px; align-self:flex-start; width:32px; height:22px; min-height:22px; max-height:22px; border-radius:5px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) var(--a,0%), transparent); color:var(--ink-2); font-size:var(--t-micro-size); font-weight:600; }
.cc-tp-heatcell.unset{ background:var(--bg-sunken); color:transparent; padding:0; min-height:0; }
.cc-tp-heatnote{ margin-top:var(--space-inline); font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-tp-chips{ display:flex; flex-wrap:wrap; gap:var(--space-tight); }
.cc-tp-healthrows{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-tp-healthrow{
  display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control);
  background:var(--bg-sunken); color:var(--ink-2);
}
.cc-tp-healthrow.good{ background:color-mix(in srgb,var(--st-done,#5c7349) 10%,transparent); }
.cc-tp-healthrow.warn{ background:color-mix(in srgb,#c79a3a 11%,transparent); }
.cc-tp-healthrow.bad{ background:color-mix(in srgb,#b5563f 11%,transparent); }
.cc-tp-healthic{ flex-shrink:0; margin-top:1px; color:var(--ink-4); }
.cc-tp-healthtitle{ display:block; font-size:var(--t-caption-size); font-weight:600; color:var(--ink); }
.cc-tp-healthdetail{ display:block; margin-top:2px; font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-3); }
.cc-tp-opgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-inline); margin-top:var(--space-item); }
.cc-tp-opbtn{
  display:flex; align-items:flex-start; gap:var(--space-inline); width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink);
  padding:var(--space-item) var(--space-item); transition:background .13s ease, border-color .13s ease;
}
.cc-tp-opbtn:hover{ background:var(--bg-sunken); border-color:var(--border-strong,var(--border)); }
.cc-tp-opcopy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-tp-opcopy b{ font-size:var(--t-caption-size); font-weight:600; color:var(--ink); }
.cc-tp-opcopy em{ font-style:normal; font-size:var(--t-micro-size); line-height:1.45; color:var(--ink-4); }
.cc-tp-opsnote{ margin-top:var(--space-inline); font-size:var(--t-micro-size); line-height:1.55; color:var(--ink-4); }
.cc-status-picks{ display:flex; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-item); }
.cc-status-pick{
  display:inline-flex; align-items:center; gap:var(--space-tight); height:30px; padding:0 var(--space-inline); border-radius:var(--r-control);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-3); cursor:pointer;
  font-size:var(--t-caption-size); font-weight:600;
}
.cc-status-pick:hover{ background:var(--bg-sunken); }
.cc-status-pick.on{ border-color:color-mix(in srgb,var(--accent) 36%,var(--border)); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); }
.cc-override-list{ display:flex; flex-wrap:wrap; gap:var(--space-tight); margin-top:var(--space-item); }
.cc-override-chip{
  display:inline-flex; align-items:center; gap:var(--space-tight); min-height:28px; padding:0 var(--space-inline) 0 var(--space-inline); border-radius:var(--r-control);
  font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); background:var(--bg-sunken);
}
.cc-override-chip.granted{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 10%,transparent); }
.cc-override-chip.restricted{ color:#b5563f; background:color-mix(in srgb,#b5563f 10%,transparent); }
.cc-override-chip button{ border:0; background:none; color:inherit; cursor:pointer; padding:2px; display:grid; place-items:center; opacity:.7; }
.cc-override-chip button:hover{ opacity:1; }
.cc-access-control{ margin-top:var(--space-group); }
.cc-tp-sec > .cc-access-control{ margin-top:0; }
.cc-access-rows{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-item); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-access-rows > div{ min-width:0; padding:var(--space-item); border-right:1px solid var(--border-subtle); }
.cc-access-rows > div:last-child{ border-right:0; }
.cc-access-rows span,.cc-access-rows strong,.cc-access-rows em{ display:block; }
.cc-access-rows span{ color:var(--ink-4); font-size:var(--t-micro-size); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cc-access-rows strong{ margin-top:var(--space-tight); overflow-wrap:anywhere; color:var(--ink); font-size:var(--t-label-size); font-weight:650; }
.cc-access-rows em{ margin-top:var(--space-tight); color:var(--ink-4); font-size:var(--t-micro-size); font-style:normal; line-height:1.4; }
.cc-access-reason,.cc-access-notice{ display:flex; align-items:flex-start; gap:var(--space-inline); padding:var(--space-item) 0; color:var(--ink-3); font-size:var(--t-caption-size); line-height:1.5; }
.cc-access-reason svg,.cc-access-notice svg{ flex:none; margin-top:var(--space-tight); }
.cc-access-status{ padding:var(--space-item) 0; color:var(--ink-4); font-size:var(--t-caption-size); }
.cc-access-status.error{ color:var(--danger); }
.cc-access-status button{ margin-left:var(--space-inline); border:0; background:transparent; color:inherit; font:inherit; font-weight:650; cursor:pointer; text-decoration:underline; }
.cc-tp-opbtn:disabled{ cursor:not-allowed; background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.cc-tp-opbtn.on{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); color:var(--accent); }
.cc-access-history{ margin-top:var(--space-group); border-top:1px solid var(--border-subtle); padding-top:var(--space-group); }
.cc-access-history > div:not(.cc-eyebrow){ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); font-size:var(--t-caption-size); text-transform:capitalize; }
.cc-access-history em{ color:var(--ink-4); font-size:var(--t-micro-size); font-style:normal; text-align:right; text-transform:none; }
.cc-access-form{ display:flex; flex-direction:column; gap:var(--space-group); }
.cc-access-choice{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-inline); }
.cc-access-choice button{ display:flex; min-width:0; flex-direction:column; gap:var(--space-tight); padding:var(--space-item); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.cc-access-choice button.on{ border-color:var(--accent); background:var(--accent-soft); }
.cc-access-choice b{ font-size:var(--t-label-size); }
.cc-access-choice span{ color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.45; }
.cc-access-field{ display:flex; min-width:0; flex-direction:column; gap:var(--space-inline); }
.cc-access-field > label{ color:var(--ink-3); font-size:var(--t-caption-size); font-weight:650; }
.cc-access-field .input{ box-sizing:border-box; width:100%; }
.cc-access-select{ display:flex; width:100%; min-height:40px; align-items:center; justify-content:space-between; gap:var(--space-inline); padding:0 var(--space-item); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; }
.cc-access-grid2,.cc-access-grid3{ display:grid; gap:var(--space-item); }
.cc-access-grid2{ grid-template-columns:1fr 1fr; }
.cc-access-grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cc-access-chips{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-access-chips > span,.cc-access-add{ display:inline-flex; min-height:32px; align-items:center; gap:var(--space-inline); padding:0 var(--space-inline); border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-sunken); color:var(--ink-2); font:600 12px/1 var(--font-body); }
.cc-access-chips > span button{ display:grid; place-items:center; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.cc-access-add{ background:var(--surface); cursor:pointer; }
.cc-access-notice{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-access-actions{ display:flex; align-items:center; gap:var(--space-inline); padding-top:var(--space-tight); }
.cc-errorline{ color:var(--danger); font-size:var(--t-caption-size); line-height:1.5; }
@media (max-width:640px){
  .cc-access-rows,.cc-access-choice,.cc-access-grid2,.cc-access-grid3{ grid-template-columns:1fr; }
  .cc-access-rows > div{ border-right:0; border-bottom:1px solid var(--border-subtle); }
  .cc-access-rows > div:last-child{ border-bottom:0; }
}
.cc-tp-flags{ display:flex; gap:var(--space-inline); flex-wrap:wrap; }
.cc-tp-flag{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:500; color:var(--ink-4); background:var(--bg-sunken); padding:var(--space-tight) var(--space-item); border-radius:var(--r-control); }
.cc-tp-flag.on{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 11%,transparent); }
.cc-tp-flag svg{ flex-shrink:0; }

/* ───────────────────────── support ops ───────────────────────── */
.cc-sup{ display:grid; grid-template-columns:360px 1fr; height:100%; overflow:hidden; }
.cc-sup-list{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); }
.cc-sup-lhd{ padding:20px 20px var(--space-item); border-bottom:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:var(--space-item); }
.cc-sup-ltitle{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); }
.cc-sup-title{ font-family:var(--font-serif); font-size:var(--t-title-size); color:var(--ink); margin:0; }
.cc-sup-rows{ flex:1; min-height:0; overflow-y:auto; padding:var(--space-inline); }
.cc-sup-row{ display:flex; align-items:flex-start; gap:var(--space-item); width:100%; text-align:left; padding:var(--space-item) var(--space-item); border:0; background:none; cursor:pointer; border-radius:var(--r-control); transition:background .13s ease; }
.cc-sup-row:hover{ background:var(--bg-sunken); }
.cc-sup-row.on{ background:color-mix(in srgb,var(--accent) 10%,transparent); }
.cc-sup-av{ width:32px; height:32px; border-radius:var(--r-control); color:#fff; font-size:var(--t-micro-size); font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.cc-sup-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-sup-subj{ font-size:var(--t-label-size); font-weight:600; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cc-sup-meta{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-sup-row .cc-istatus{ flex-shrink:0; align-self:flex-start; }

.cc-sup-detail{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.cc-sup-empty{ flex:1; display:grid; place-items:center; text-align:center; padding:var(--space-page); }
.cc-sup-empty-t{ font-family:var(--font-serif); font-size:var(--t-title-size); color:var(--ink); margin-bottom:var(--space-tight); }
.cc-sup-empty-h{ font-size:var(--t-label-size); color:var(--ink-4); max-width:300px; line-height:1.5; }

.cc-staff-head{ display:grid; grid-template-columns:1fr 1fr auto; gap:var(--space-item); align-items:center; padding-bottom:var(--space-group); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-tight); }
.cc-staff-head > div{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-staff-head b{ font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1; color:var(--ink); }
.cc-staff-head span{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-staff-list{ display:flex; flex-direction:column; max-height:48vh; overflow-y:auto; }
.cc-staff-row{ display:flex; align-items:center; gap:var(--space-item); width:100%; background:none; border:0; border-bottom:1px solid var(--border-subtle); text-align:left; padding:var(--space-item) 2px; cursor:pointer; color:inherit; }
.cc-staff-row:hover{ background:var(--bg-sunken); }
.cc-staff-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-staff-main b{ font-size:var(--t-label-size); color:var(--ink); }
.cc-staff-main i{ font-style:normal; font-size:var(--t-caption-size); color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-staff-status{ font-size:var(--t-micro-size); text-transform:capitalize; color:var(--ink-3); min-width:48px; text-align:right; }
.cc-staff-status.online{ color:var(--st-done,#5c7349); }
.cc-staff-status.busy{ color:#c79a3a; }
.cc-staff-load{ font-size:var(--t-caption-size); color:var(--ink-4); min-width:36px; text-align:right; }
.cc-staff-edit{ display:grid; grid-template-columns:1fr 160px; gap:var(--space-item); }
.cc-staff-edit .field[full]{ grid-column:1/-1; }
.cc-staff-chips{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-staff-chips button{ min-height:32px; display:inline-flex; align-items:center; gap:var(--space-tight); border:1px solid var(--border); background:var(--surface); color:var(--ink-2); border-radius:var(--r-control); padding:0 var(--space-item); font-size:var(--t-caption-size); cursor:pointer; }
.cc-staff-chips button.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); }

.cc-tv-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-group); padding:20px var(--space-block); border-bottom:1px solid var(--border); flex-shrink:0; }
.cc-tv-subj{ font-size:var(--t-heading-size); font-weight:600; color:var(--ink); line-height:1.3; }
.cc-tv-meta{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; font-size:var(--t-label-size); color:var(--ink-4); margin-top:var(--space-tight); }
.cc-tv-tenant{ color:var(--ink-2); font-weight:600; }
.cc-tv-pri, .cc-tv-feat{ display:inline-flex; align-items:center; gap:var(--space-tight); font-weight:500; }
.cc-tv-feat{ color:var(--ink-3); }
.cc-tv-feat svg{ color:var(--ink-4); }

.cc-tv-thread{ flex:1; min-height:0; overflow-y:auto; padding:var(--space-block) var(--space-block); display:flex; flex-direction:column; gap:var(--space-group); }
.cc-msg{ display:flex; gap:var(--space-item); max-width:84%; }
.cc-msg.agent{ flex-direction:row-reverse; align-self:flex-end; }
.cc-msg-av{ width:30px; height:30px; border-radius:50%; color:#fff; font-size:var(--t-micro-size); font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.cc-msg-body{ min-width:0; }
.cc-msg.agent .cc-msg-body{ text-align:right; }
.cc-msg-who{ font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); margin-bottom:var(--space-tight); }
.cc-msg-time{ font-weight:400; color:var(--ink-4); margin-left:var(--space-inline); }
.cc-msg-text{ font-size:var(--t-body-size); line-height:1.55; color:var(--ink); background:var(--bg-sunken); padding:var(--space-item) var(--space-item); border-radius:var(--r-card); display:inline-block; text-align:left; user-select:text; }
.cc-msg.agent .cc-msg-text{ background:color-mix(in srgb,var(--accent) 11%,transparent); }

/* aria assist */
.cc-aria{ flex-shrink:0; padding:0 var(--space-block); }
.cc-aria-bar{ display:flex; align-items:center; gap:var(--space-item); flex-wrap:wrap; padding:var(--space-item) 0; border-top:1px solid var(--border-subtle); }
.cc-aria-btn{ display:inline-flex; align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent); font-size:var(--t-label-size); font-weight:600; }
.cc-aria-btn:hover{ background:color-mix(in srgb,var(--accent) 15%,transparent); }
.cc-aria-guard{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-aria-guard svg{ color:var(--ink-4); }
.cc-aria-card{ border:1px solid var(--border); border-radius:var(--r-card); padding:var(--space-item) var(--space-group); margin:var(--space-inline) 0; background:var(--surface); }
.cc-aria-hd{ display:flex; align-items:center; gap:var(--space-inline); margin-bottom:var(--space-inline); }
.cc-aria-tag{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:600; color:var(--accent); }
.cc-conf{ font-size:var(--t-micro-size); font-weight:600; text-transform:capitalize; padding:2px var(--space-inline); border-radius:6px; }
.cc-conf-high{ color:var(--st-done,#5c7349); background:color-mix(in srgb,var(--st-done,#5c7349) 13%,transparent); }
.cc-conf-medium{ color:#c79a3a; background:color-mix(in srgb,#c79a3a 14%,transparent); }
.cc-conf-low{ color:#b5563f; background:color-mix(in srgb,#b5563f 12%,transparent); }
.cc-aria-x{ margin-left:auto; border:0; background:none; cursor:pointer; color:var(--ink-4); display:grid; place-items:center; }
.cc-aria-x:hover{ color:var(--ink); }
.cc-aria-text{ font-size:var(--t-body-size); line-height:1.6; color:var(--ink-2); white-space:pre-wrap; user-select:text; }
.cc-aria-src{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; margin-top:var(--space-item); }
.cc-aria-src-l{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); }
.cc-aria-srcchip{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); color:var(--ink-3); background:var(--bg-sunken); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); }
.cc-aria-esc{ display:flex; align-items:center; gap:var(--space-inline); margin-top:var(--space-item); font-size:var(--t-caption-size); color:#b5563f; }
.cc-aria-acts{ display:flex; justify-content:flex-end; gap:var(--space-inline); margin-top:var(--space-item); }

.cc-tv-composer{ flex-shrink:0; padding:var(--space-item) var(--space-block) 20px; border-top:1px solid var(--border); }
.cc-tv-input{ width:100%; min-height:84px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface);
  padding:var(--space-item) var(--space-item); font-size:var(--t-body-size); line-height:1.5; color:var(--ink); outline:none; font-family:inherit; }
.cc-tv-input:focus{ border-color:var(--accent); }
.cc-tv-cact{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-inline); }
.cc-tv-hint{ font-size:var(--t-caption-size); color:var(--ink-4); }

/* ───────────────────────── agents ───────────────────────── */
.cc-ag-list{ margin-top:var(--space-tight); }
.cc-ag-row{ display:grid; grid-template-columns:auto minmax(180px,2fr) 90px 130px 80px 24px; align-items:center; gap:var(--space-item);
  width:100%; text-align:left; padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:none; cursor:pointer; border-radius:var(--r-control); transition:background .13s ease; }
.cc-ag-row:hover{ background:var(--bg-sunken); }
.cc-ag-ic{ width:38px; height:38px; border-radius:var(--r-control); display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.cc-ag-ic.lg{ width:52px; height:52px; border-radius:var(--r-card); }
.cc-ag-main{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-ag-name{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-body-size); font-weight:600; color:var(--ink); }
.cc-ag-status{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:500; }
.cc-ag-role{ font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-ag-model, .cc-ag-auto, .cc-ag-runs{ font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-ag-model{ font-weight:500; }

.cc-ag-hero{ display:flex; align-items:center; gap:var(--space-group); padding-bottom:20px; border-bottom:1px solid var(--border); margin-bottom:var(--space-tight); }
.cc-ag-h{ font-family:var(--font-serif); font-size:var(--t-title-size); color:var(--ink); margin:0; }
.cc-ag-sub{ font-size:var(--t-label-size); color:var(--ink-3); margin:var(--space-tight) 0 0; }
.cc-ag-kill{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-inline); flex-shrink:0; }
.cc-ag-killlbl{ display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-caption-size); font-weight:600; }
.cc-ag-pausedbar{ display:flex; align-items:center; gap:var(--space-inline); margin:var(--space-group) 0 0; padding:var(--space-item) var(--space-item); border-radius:var(--r-control);
  background:color-mix(in srgb,#b5563f 9%,transparent); color:#b5563f; font-size:var(--t-label-size); font-weight:500; }
.cc-ag-pausedbar svg{ flex-shrink:0; }
.cc-ag-model-readonly{ display:inline-flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink-3); font-size:var(--t-label-size); font-weight:600; }

.cc-ag-grid{ display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-ag-sec{ padding:20px 0; border-bottom:1px solid var(--border-subtle); }
.cc-ag-sec:last-child{ border-bottom:0; }
.cc-ag-sec .cc-eyebrow{ margin-bottom:var(--space-item); }
.cc-ag-autonomy{ display:grid; grid-template-columns:repeat(3,minmax(0, 1fr)); gap:var(--space-inline); }
.cc-ag-autopt{ text-align:left; padding:var(--space-item) var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); cursor:pointer; transition:border-color .14s ease, background .14s ease; }
.cc-ag-autopt:hover{ border-color:var(--ink-4); }
.cc-ag-autopt.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.cc-ag-autopt-l{ display:block; font-size:var(--t-label-size); font-weight:600; color:var(--ink); margin-bottom:var(--space-tight); }
.cc-ag-autopt-d{ display:block; font-size:var(--t-micro-size); color:var(--ink-4); line-height:1.4; }

.cc-ag-gens{ display:flex; flex-direction:column; gap:var(--space-group); max-width:480px; }
.cc-ag-gen{ display:flex; flex-direction:column; gap:var(--space-inline); font-size:var(--t-label-size); color:var(--ink-2); }
.cc-ag-gen b{ color:var(--ink); font-weight:600; }
.cc-ag-gen input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:var(--border); outline:none; }
.cc-ag-gen input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cc-ag-gen input[type=range]::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:var(--accent); cursor:pointer; }
.cc-ag-genrow{ display:flex; gap:var(--space-group); }
.cc-ag-num{ display:flex; flex-direction:column; gap:var(--space-tight); font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-ag-num input{ width:130px; height:34px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); padding:0 var(--space-item); font-size:var(--t-label-size); color:var(--ink); outline:none; }
.cc-ag-num input:focus{ border-color:var(--accent); }

.cc-ag-rails{ display:flex; flex-direction:column; }
.cc-ag-rail{ display:flex; align-items:center; gap:var(--space-group); padding:var(--space-item) 0; border-bottom:1px solid var(--border-subtle); }
.cc-ag-rail:last-child{ border-bottom:0; }
.cc-ag-rail-txt{ flex:1; min-width:0; }
.cc-ag-rail-l{ display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-label-size); font-weight:500; color:var(--ink); }
.cc-ag-lock{ color:var(--ink-4); }
.cc-ag-rail-d{ display:block; font-size:var(--t-caption-size); color:var(--ink-4); margin-top:var(--space-tight); line-height:1.4; }

.cc-ag-prompt{ width:100%; min-height:120px; resize:vertical; border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface);
  padding:var(--space-item) var(--space-group); font-size:var(--t-label-size); line-height:1.6; color:var(--ink-2); outline:none; font-family:inherit; }
.cc-ag-prompt:focus{ border-color:var(--accent); }

.cc-ag-test{ background:var(--bg-sunken); border-radius:var(--r-card); padding:var(--space-group) var(--space-group) 20px; border-bottom:0 !important; margin-top:var(--space-tight); }
.cc-ag-testbar{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; }
.cc-ag-testnote{ font-size:var(--t-micro-size); color:var(--ink-4); margin-top:var(--space-item); line-height:1.5; }

.cc-ag-runs-list{ display:flex; flex-direction:column; }
.cc-ag-run{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 2px; border-bottom:1px solid var(--border-subtle); font-size:var(--t-label-size); color:var(--ink-2); }
.cc-ag-run:last-child{ border-bottom:0; }
.cc-ag-run-act{ font-weight:500; flex-shrink:0; }
.cc-ag-run-tgt{ color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-ag-run-conf{ font-size:var(--t-micro-size); text-transform:capitalize; color:var(--ink-3); background:var(--surface); padding:2px var(--space-inline); border-radius:6px; }
.cc-ag-run-time{ font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; }

/* ───────────────────────── overview ───────────────────────── */
.cc-metric-btn{ background:none; border:0; cursor:pointer; font:inherit; text-align:left; transition:opacity .13s ease; }
.cc-metric-btn:hover{ opacity:.62; }
.cc-owner-ops{
  --ops-tone:var(--ink-4); margin:4px 0 var(--space-block); padding:20px 0 var(--space-item);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cc-owner-ops.state-healthy{ --ops-tone:var(--st-done,#5c7349); }
.cc-owner-ops.state-watch{ --ops-tone:#9a741f; }
.cc-owner-ops.state-action{ --ops-tone:#b56a2d; }
.cc-owner-ops.state-incident{ --ops-tone:#b5563f; }
.cc-owner-ops-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-block); padding:0 var(--space-tight) var(--space-group); }
.cc-owner-ops-head .cc-eyebrow{ margin-bottom:var(--space-inline); }
.cc-owner-ops-head h2{ margin:0; font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1.1; color:var(--ink); }
.cc-owner-ops-head p{ margin:var(--space-inline) 0 0; max-width:680px; font-size:var(--t-label-size); line-height:1.5; color:var(--ink-3); }
.cc-owner-ops-status{ display:inline-flex; align-items:center; gap:var(--space-inline); flex-shrink:0; padding:var(--space-tight) var(--space-inline); border-radius:999px; background:color-mix(in srgb,var(--ops-tone) 10%,transparent); color:var(--ops-tone); font-size:var(--t-micro-size); font-weight:700; }
.cc-owner-ops-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.cc-owner-ops-signals{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border-subtle); }
.cc-owner-ops-row{ min-width:0; display:grid; grid-template-columns:128px minmax(0,1fr) 18px; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:none; text-align:left; cursor:pointer; color:var(--ink-4); }
.cc-owner-ops-row:nth-child(odd){ border-right:1px solid var(--border-subtle); }
.cc-owner-ops-row:hover{ background:var(--bg-sunken); color:var(--ink-2); }
.cc-owner-ops-signal{ display:inline-flex; align-items:center; gap:var(--space-inline); font-size:var(--t-micro-size); font-weight:700; color:var(--ink-4); }
.cc-owner-ops-signal.state-healthy{ color:var(--st-done,#5c7349); }
.cc-owner-ops-signal.state-watch{ color:#9a741f; }
.cc-owner-ops-signal.state-action{ color:#b56a2d; }
.cc-owner-ops-signal.state-incident{ color:#b5563f; }
.cc-owner-ops-copy{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-owner-ops-copy b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-label-size); font-weight:620; color:var(--ink); }
.cc-owner-ops-copy em{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:normal; font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-owner-ops-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-item); padding:var(--space-item) var(--space-tight) 0; font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-owner-ops-boundary{ margin:var(--space-inline) var(--space-tight) 0; font-size:var(--t-micro-size); line-height:1.45; color:var(--ink-4); }
.cc-ov-health{ display:flex; align-items:center; gap:20px; padding:var(--space-group) 0 20px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.cc-ov-h-l{ flex:1; min-width:0; }
.cc-ov-h-bar{ display:flex; height:9px; border-radius:5px; overflow:hidden; gap:2px; margin:var(--space-inline) 0; background:var(--bg-sunken); }
.cc-ov-h-bar span{ min-width:4px; }
.cc-ov-h-keys{ display:flex; gap:var(--space-group); flex-wrap:wrap; }
.cc-ov-h-link{ display:inline-flex; align-items:center; gap:var(--space-tight); background:none; border:0; cursor:pointer; color:var(--accent); font-size:var(--t-label-size); font-weight:600; flex-shrink:0; }
.cc-ov-h-link:hover{ text-decoration:underline; text-underline-offset:2px; }

.cc-ov-2col{ display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-bottom:28px; }

.cc-backend-note{ font-size:var(--t-label-size); line-height:1.55; color:var(--cc-ink-2,#5f594d); }
.cc-backend-note code{ font-family:var(--font-mono,ui-monospace,monospace); font-size:var(--t-caption-size); background:color-mix(in srgb,var(--cc-ink,var(--notif-bg)) 8%,transparent); padding:1px var(--space-tight); border-radius:5px; }

.cc-ov-sec-h{ display:flex; align-items:center; gap:var(--space-inline); margin-bottom:var(--space-item); }
.cc-ov-count{ font-size:var(--t-micro-size); font-weight:600; color:#b5563f; background:color-mix(in srgb,#b5563f 12%,transparent); padding:1px var(--space-inline); border-radius:6px; }
.cc-ov-att{ display:flex; flex-direction:column; }
.cc-ov-attrow{ display:flex; align-items:center; gap:var(--space-item); padding:var(--space-item) var(--space-inline); border:0; border-bottom:1px solid var(--border-subtle); background:none; cursor:pointer; text-align:left; width:100%; border-radius:var(--r-control); transition:background .13s ease; }
.cc-ov-attrow:hover{ background:var(--bg-sunken); }
.cc-ov-attic{ width:30px; height:30px; border-radius:var(--r-control); display:grid; place-items:center; flex-shrink:0; background:var(--bg-sunken); color:var(--ink-3); }
.cc-ov-attmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-ov-attlbl{ font-size:var(--t-label-size); font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-ov-attmeta{ font-size:var(--t-micro-size); color:var(--ink-4); }
.cc-ov-act{ display:flex; flex-direction:column; }
.cc-ov-actrow{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 2px; font-size:var(--t-label-size); color:var(--ink-2); border-bottom:1px solid var(--border-subtle); }
.cc-ov-actrow:last-child{ border-bottom:0; }
.cc-ov-actrow svg{ color:var(--ink-4); flex-shrink:0; }
.cc-ov-actx{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-ov-actx b{ font-weight:600; color:var(--ink); }
.cc-ov-acttime{ font-size:var(--t-micro-size); color:var(--ink-4); flex-shrink:0; }
.cc-ov-quick{ display:flex; gap:var(--space-inline); flex-wrap:wrap; padding-top:var(--space-inline); border-top:1px solid var(--border); }
.cc-ov-qbtn{ display:inline-flex; align-items:center; gap:var(--space-inline); height:38px; padding:0 var(--space-group); border-radius:var(--r-control); border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:var(--t-label-size); font-weight:500; color:var(--ink-2); transition:border-color .14s ease, color .14s ease; }
.cc-ov-qbtn:hover{ border-color:var(--accent); color:var(--ink); }
.cc-ov-qbtn svg{ color:var(--accent); }

@media (max-width:1080px){
  .cc-root{ grid-template-columns:200px 1fr; }
  .cc-editor{ grid-template-columns:1fr; }
  .cc-editor-preview{ display:none; }
  .cc-th, .cc-row{ grid-template-columns:minmax(140px,1.4fr) 80px 120px 50px; }
  .cc-c-sum{ display:none; }
  .cc-sup{ grid-template-columns:300px 1fr; }
  .cc-tn-th, .cc-tn-row{ grid-template-columns:minmax(140px,2fr) 80px 70px 40px; }
  .cc-tn-online{ display:none; }
  .cc-tn-feat{ display:none; }
  .cc-heat-days{ grid-template-columns:130px repeat(14,minmax(14px,1fr)); }
  .cc-heat-row{ grid-template-columns:130px 1fr; }
  .cc-adminlevels-rows{ grid-template-columns:1fr; }
  .cc-ag-autonomy{ grid-template-columns:1fr; }
  .cc-ov-2col{ grid-template-columns:1fr; gap:var(--space-block); }
  .cc-owner-ops-signals{ grid-template-columns:1fr; }
  .cc-owner-ops-row:nth-child(odd){ border-right:0; }
  .cc-ag-row{ grid-template-columns:auto 1fr 80px 24px; }
  .cc-ag-auto, .cc-ag-runs{ display:none; }
}
@media (max-width:760px){
  .cc-alert-facts{ grid-template-columns:1fr 1fr; }
  .cc-alert-locrow{ grid-template-columns:1fr; gap:var(--space-tight); }
  .cc-owner-ops-head, .cc-owner-ops-foot, .cc-session-section-head{ flex-direction:column; }
  .cc-owner-ops-row{ grid-template-columns:1fr 18px; }
  .cc-owner-ops-signal{ grid-column:1 / -1; }
  .cc-session-row.cc-row{ flex-wrap:wrap; }
  .cc-session-row .grow{ flex-basis:calc(100% - 30px); }
  .cc-session-asof{ width:100%; }
  .cc-release-verdict{ align-items:flex-start; flex-wrap:wrap; }
  .cc-rollout-stage{ grid-template-columns:1fr; gap:var(--space-inline); }
  .cc-rollout-step::after{ display:none; }
  .cc-readiness-head{ flex-direction:column; gap:var(--space-inline); }
  .cc-readiness-count{ align-items:flex-start; }
  .cc-readiness-row{ grid-template-columns:18px minmax(0,1fr) auto; gap:var(--space-inline) var(--space-inline); }
  .cc-readiness-detail{ grid-column:2 / -1; }
  .cc-release-rate{ width:100%; align-items:flex-start; padding-left:56px; }
  .cc-release-group.cc-row,.cc-release-row.cc-row{ flex-wrap:wrap; }
  .cc-release-group .grow,.cc-release-row .grow{ flex-basis:calc(100% - 34px); }
  .cc-canary-row.cc-row,.cc-canary-history.cc-row{ flex-wrap:wrap; }
  .cc-canary-row .grow,.cc-canary-history .grow{ flex-basis:calc(100% - 42px); }
  .cc-canary-outcome{ text-align:left; }
  .cc-scale-queue.cc-row{ flex-wrap:wrap; }
  .cc-scale-queue .grow{ flex-basis:calc(100% - 36px); }
  .cc-scale-queue>span{ min-width:auto; text-align:left; }
}

/* ───────── Phase B/A — catalog filters, bulk, checkbox ───────── */
.cc-filter{ display:inline-flex; align-items:center; gap:var(--space-tight); height:34px; padding:0 var(--space-item); border-radius:var(--r-control);
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:var(--t-caption-size); font-weight:500; color:var(--ink-2); white-space:nowrap; }
.cc-filter:hover{ border-color:var(--ink-4); }
.cc-filter.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--ink); }
.cc-filter svg:first-child{ color:var(--ink-4); }
.cc-filter.on svg:first-child{ color:var(--accent); }
.cc-bulk{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); margin-bottom:var(--space-inline); border-radius:var(--r-control);
  background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.cc-bulk-n{ font-size:var(--t-label-size); font-weight:600; color:var(--ink); }
.cc-check{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer;
  display:grid; place-items:center; flex-shrink:0; color: var(--accent-fg); transition:background .12s ease, border-color .12s ease; padding:0; }
.cc-check:hover{ border-color:var(--accent); }
.cc-check.on{ background:var(--accent); border-color:var(--accent); }
.cc-row.checked{ background:color-mix(in srgb,var(--accent) 6%,transparent); }

/* ───────── Phase B — graph filter controls + clickable legend ───────── */
.cc-gcontrols{ position:absolute; top:14px; left:14px; right:14px; display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; z-index:4; pointer-events:none; }
.cc-gcontrols > *{ pointer-events:auto; }
.cc-gsearch{ display:flex; align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control); min-width:200px;
  border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(6px); color:var(--ink-4); }
.cc-gsearch:focus-within{ border-color:var(--accent); }
.cc-gsearch input{ border:0; background:none; outline:none; font-size:var(--t-label-size); color:var(--ink); flex:1; min-width:0; }
.cc-gsearch button{ border:0; background:none; cursor:pointer; color:var(--ink-4); display:grid; place-items:center; padding:0; }
.cc-gchip{ display:inline-flex; align-items:center; gap:var(--space-inline); height:34px; padding:0 var(--space-item); border-radius:var(--r-control); cursor:pointer;
  border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(6px); font-size:var(--t-caption-size); font-weight:500; color:var(--ink-2); }
.cc-gchip:hover{ border-color:var(--ink-4); }
.cc-gchip.on{ border-color:#b5563f; color:var(--ink); background:color-mix(in srgb,#b5563f 8%,transparent); }
.cc-gchip.ghost{ color:var(--ink-3); }
.cc-gcount{ font-size:var(--t-caption-size); color:var(--ink-3); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(6px); padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); }
.cc-legend-row{ display:flex; align-items:center; gap:var(--space-inline); color:var(--ink-2); margin-bottom:var(--space-tight); width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:2px var(--space-tight); border-radius:6px; font-size:var(--t-caption-size); transition:opacity .12s ease, background .12s ease; }
.cc-legend-row:hover{ background:var(--bg-sunken); }
.cc-legend-row.off{ opacity:.4; text-decoration:line-through; }

/* graph node keyboard focus — single clean ring (no doubling) */
.cc-gnode{ outline:none; }
.cc-gnode:focus-visible .cc-gnode-dot{ stroke:var(--accent); stroke-width:3; }
.cc-gnode:focus-visible .cc-gnode-lbl{ fill:var(--ink); font-weight:600; }

/* tenant support deepening */
.cc-tn-tix{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.02em; color:#c79a3a; background:color-mix(in srgb,#c79a3a 14%,transparent); padding:1px var(--space-inline); border-radius:5px; }
.cc-tp-tix{ display:flex; flex-direction:column; }
.cc-tp-tixrow{ display:flex; align-items:center; gap:var(--space-inline); width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:var(--space-inline) var(--space-tight); border-radius:var(--r-control); font-size:var(--t-label-size); color:var(--ink-2); }
.cc-tp-tixrow:hover{ background:var(--bg-sunken); color:var(--ink); }
.cc-tp-tixstatus{ font-size:var(--t-micro-size); text-transform:capitalize; color:var(--ink-4); flex-shrink:0; }
.cc-tp-tixlink{ display:inline-flex; align-items:center; gap:var(--space-tight); background:none; border:0; cursor:pointer; color:var(--accent); font-size:var(--t-caption-size); font-weight:600; padding:var(--space-inline) var(--space-tight) 0; }
.cc-tp-tixlink:hover{ text-decoration:underline; text-underline-offset:2px; }

/* agent run analytics */
.cc-ag-stats{ display:flex; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-group); }
.cc-ag-stat{ flex:1; padding:var(--space-item) var(--space-tight); }
.cc-ag-stat + .cc-ag-stat{ border-left:1px solid var(--border-subtle); padding-left:var(--space-group); }
.cc-ag-stat-v{ font-family:var(--font-serif); font-size:var(--t-title-size); line-height:1; color:var(--ink); }
.cc-ag-stat-u{ font-family:var(--font-sans,inherit); font-size:var(--t-label-size); color:var(--ink-4); font-weight:400; margin-left:2px; }
.cc-ag-stat-l{ font-size:var(--t-caption-size); color:var(--ink-4); margin-top:var(--space-tight); }
.cc-ag-conf-bar{ display:flex; height:9px; border-radius:5px; overflow:hidden; gap:2px; background:var(--bg-sunken); margin-bottom:var(--space-inline); }
.cc-ag-conf-bar span{ min-width:4px; }
.cc-ag-conf-keys{ display:flex; gap:var(--space-group); flex-wrap:wrap; font-size:var(--t-caption-size); color:var(--ink-3); }
.cc-ag-conf-keys span{ display:inline-flex; align-items:center; gap:var(--space-tight); }
.cc-dist-btn{ background:none; border:0; cursor:pointer; font:inherit; padding:0; transition:color .12s ease; }
.cc-dist-btn:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ───────── Phase A — responsive: support, node panel, headers ───────── */
@media (max-width:960px){
  .cc-sup{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .cc-sup-list{ border-right:0; border-bottom:1px solid var(--border); max-height:38vh; }
  .cc-nodepanel{ left:14px; width:auto; }              /* full-width overlay on small screens */
  .cc-obs-hd{ gap:var(--space-item); }
  .cc-gcontrols{ position:static; margin:var(--space-item) var(--space-item) 0; }
  .cc-graph-wrap{ display:flex; flex-direction:column; }
  .cc-graph{ flex:1; min-height:0; }
}
@media (max-width:640px){
  .cc-root{ grid-template-columns:64px 1fr; }
  .cc-rail-titles, .cc-rail-item .grow, .cc-soon, .cc-rail-group-label, .cc-command-trigger span, .cc-command-trigger kbd{ display:none; }
  .cc-command-trigger{ justify-content:center; margin:var(--space-inline); padding:0; }
  .cc-rail-item{ justify-content:center; }
  .cc-rail-foot{ align-items:center; padding:var(--space-inline); }
  .cc-exit{ justify-content:center; width:36px; height:36px; font-size:0; }
  .cc-override-lbl{ display:none; }
  .cc-toolbar{ gap:var(--space-inline); }
  .cc-command-kind{ display:none; }
  .cc-command-result{ grid-template-columns:auto minmax(0,1fr) auto; }
  .cc-audit-metrics,.cc-edu-metrics{ display:grid; grid-template-columns:1fr 1fr; }
  .cc-audit-metrics .cc-metric,.cc-edu-metrics .cc-metric{ padding:var(--space-item) 0; border-left:0; }
  .cc-audit-table{ overflow-x:auto; }
  .cc-audit-table-head,.cc-audit-table-row{ min-width:780px; }
  .cc-audit-facts{ grid-template-columns:1fr; }
  .cc-audit-facts>div:nth-child(even){ padding-left:0; border-left:0; }
  .cc-edu-flow{ grid-template-columns:1fr; }
  .cc-edu-flow>svg{ transform:rotate(90deg); }
}

/* ───────────────────────── company / platform profile ───────────────────────── */
.cc-co-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:36px; align-items:start; margin-bottom:28px; }
.cc-co-editor, .cc-co-preview, .cc-co-modules{ min-width:0; }
.cc-co-line{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; align-items:flex-start; padding:var(--space-group) 0; border-bottom:1px solid var(--border-subtle); }
.cc-co-line:last-child{ border-bottom:0; }
.cc-co-label{ font-size:var(--t-label-size); font-weight:620; color:var(--ink); }
.cc-co-hint{ font-size:var(--t-caption-size); color:var(--ink-4); line-height:1.45; margin-top:var(--space-tight); }
.cc-co-control{ min-width:0; }
.cc-co-stack{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-co-area{ resize:vertical; min-height:78px; padding-top:var(--space-inline); line-height:1.45; }
.cc-co-swatches{ display:flex; flex-wrap:wrap; gap:var(--space-inline); }
.cc-co-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.cc-co-swatch.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.cc-co-logoctl{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; }
.cc-co-logobox{ display:inline-flex; align-items:center; justify-content:center; width:86px; height:46px; border-radius:var(--r-control); background:var(--bg-sunken); overflow:hidden; }
.cc-co-logobox img{ max-width:72px; max-height:34px; object-fit:contain; }
.cc-co-logobox span{ width:34px; height:34px; border-radius:var(--r-control); display:grid; place-items:center; color:#fff; font-family:var(--font-serif); font-size:var(--t-heading-size); font-weight:600; }
.cc-co-paper{ max-height:620px; overflow:auto; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.cc-co-paper .pk-sheet{ max-width:100%; padding:28px 0; }
.cc-co-paper .pk-hero{ display:none; }
.cc-co-note{ display:flex; align-items:flex-start; gap:var(--space-inline); margin:var(--space-item) 0; font-size:var(--t-caption-size); line-height:1.45; color:var(--ink-4); }
.cc-co-note svg{ flex-shrink:0; margin-top:1px; color:var(--accent); }
.cc-co-modulegrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.cc-co-module{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:var(--space-item); width:100%; text-align:left;
  border:0; border-bottom:1px solid var(--border-subtle); background:none; padding:var(--space-item) var(--space-tight); cursor:pointer; border-radius:var(--r-control); transition:background .13s ease; }
.cc-co-module:hover{ background:var(--bg-sunken); }
.cc-co-module > svg{ color:var(--accent); }
.cc-co-modulecopy{ display:flex; flex-direction:column; gap:var(--space-tight); min-width:0; }
.cc-co-modulecopy b{ font-size:var(--t-label-size); font-weight:620; color:var(--ink); }
.cc-co-modulecopy em{ font-style:normal; font-size:var(--t-caption-size); color:var(--ink-4); line-height:1.4; }
.cc-co-modulev{ font-size:var(--t-micro-size); font-weight:650; color:var(--ink-3); white-space:nowrap; background:var(--bg-sunken); border-radius:var(--r-control); padding:var(--space-tight) var(--space-inline); }

@media (max-width:1080px){
  .cc-co-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .cc-co-line{ grid-template-columns:1fr; gap:var(--space-inline); }
  .cc-co-modulegrid{ grid-template-columns:1fr; }
  .cc-co-module{ grid-template-columns:22px minmax(0,1fr); }
  .cc-co-modulev{ grid-column:2; justify-self:start; }
}

/* ───────────────────────── alert recipients ───────────────────────── */
.cc-alert-recip{ margin:var(--space-group) 0; }
.cc-alert-recip-note{ margin:0 0 var(--space-item); font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-4); }
.cc-alert-recip-add{ display:flex; align-items:center; gap:var(--space-inline); margin-bottom:var(--space-item); }
.cc-alert-recip-add .input{ flex:1; min-width:0; }
.cc-alert-recip .cc-acc-row{ padding:var(--space-inline) var(--space-item); }
.cc-alert-recip .cc-acc-main{ grid-template-columns:auto minmax(0,1fr); display:flex; align-items:center; gap:var(--space-inline); font-size:var(--t-body-size); color:var(--ink); cursor:default; }

/* ───────────────────────── access controls ───────────────────────── */
.cc-acc-note{ margin-bottom:var(--space-group); }
.cc-acc-toolbar{ display:flex; align-items:center; gap:var(--space-item); flex-wrap:wrap; margin:var(--space-group) 0; }
.cc-acc-actions{ display:flex; gap:var(--space-inline); flex-wrap:wrap; }
.cc-acc-empty{ min-height:120px; }
.cc-acc-rows{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-acc-row{ display:flex; gap:var(--space-item); align-items:center; padding:var(--space-item) var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-card); background:var(--panel); }
.cc-acc-main{ flex:1; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-item); align-items:center; background:none; border:0; padding:0; text-align:left; color:inherit; cursor:pointer; }
.cc-acc-kind{ display:inline-flex; align-items:center; gap:var(--space-inline); height:28px; padding:0 var(--space-inline); border-radius:999px; border:1px solid var(--border-subtle); font-size:var(--t-caption-size); font-weight:700; white-space:nowrap; }
.cc-acc-kind-email{ color:#47644d; background:#eef5ef; }
.cc-acc-kind-ip{ color:#5b5f78; background:#f0f2f8; }
.cc-acc-copy{ min-width:0; display:flex; flex-direction:column; gap:var(--space-tight); }
.cc-acc-copy b{ font-size:var(--t-body-size); font-weight:620; color:var(--ink); }
.cc-acc-copy em{ font-style:normal; font-size:var(--t-caption-size); line-height:1.45; color:var(--ink-4); }
.cc-acc-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-tight); text-align:right; font-size:var(--t-caption-size); color:var(--ink-4); }
.cc-acc-rowacts{ display:flex; align-items:center; gap:var(--space-inline); flex-wrap:wrap; justify-content:flex-end; }
.cc-acc-preview{ border:1px dashed var(--border-subtle); border-radius:var(--r-card); padding:var(--space-item) var(--space-item); font-size:var(--t-label-size); line-height:1.55; color:var(--ink-4); }
.cc-acc-preview b{ color:var(--ink); font-weight:620; }
.cc-acc-warning{ border-radius:var(--r-control); padding:var(--space-inline) var(--space-item); font-size:var(--t-caption-size); line-height:1.5; color:#8a6a1d; background:color-mix(in srgb, #c79a3a 14%, transparent); }
.cc-acc-expiry{ display:flex; align-items:center; gap:var(--space-inline); }
.cc-acc-expiry .f-input{ width:auto; }

@media (max-width:900px){
  .cc-acc-row{ flex-direction:column; align-items:stretch; }
  .cc-acc-main{ grid-template-columns:1fr; }
  .cc-acc-meta{ align-items:flex-start; text-align:left; }
  .cc-acc-rowacts{ justify-content:flex-start; }
}

/* ───────────────────────── code sandbox ───────────────────────── */
.cc-sandbox{ margin-top:var(--space-tight); }
.cc-creator{ margin-top:var(--space-tight); }
.cc-creator-kinds{ display:flex; flex-wrap:wrap; gap:var(--space-tight); margin-bottom:var(--space-group); padding-bottom:var(--space-item); border-bottom:1px solid var(--border); }
.cc-creator-kinds button{ display:inline-flex; align-items:center; gap:var(--space-inline); height:32px; padding:0 var(--space-inline); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font-size:var(--t-caption-size); font-weight:700; cursor:pointer; }
.cc-creator-kinds button:hover{ color:var(--ink); background:var(--bg-sunken); }
.cc-creator-kinds button.on{ color:var(--ink); background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.cc-creator-kinds button.on svg{ color:var(--accent); }
.cc-creator-grid{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
.cc-creator-form{ display:flex; flex-direction:column; gap:var(--space-item); min-width:0; }
.cc-creator-hint{ display:flex; align-items:flex-start; gap:var(--space-inline); color:var(--ink-4); font-size:var(--t-caption-size); line-height:1.45; }
.cc-creator-hint svg{ flex:none; color:var(--ink-3); margin-top:1px; }
.cc-creator-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-inline); flex-wrap:wrap; }
.cc-creator-side{ position:sticky; top:12px; display:flex; flex-direction:column; gap:var(--space-inline); padding:var(--space-item); border-radius:var(--r-card); background:var(--bg-sunken); color:var(--ink-3); }
.cc-creator-side-h{ display:flex; align-items:center; gap:var(--space-inline); color:var(--ink); font-size:var(--t-label-size); font-weight:800; padding-bottom:var(--space-inline); border-bottom:1px solid var(--border-subtle); }
.cc-creator-side-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-item); font-size:var(--t-caption-size); }
.cc-creator-side-row span{ color:var(--ink-4); }
.cc-creator-side-row b{ color:var(--ink); text-align:right; }
.cc-creator-side p{ margin:var(--space-tight) 0 0; color:var(--ink-4); font-size:var(--t-micro-size); line-height:1.5; }
.cc-sandbox-modes{ display:inline-flex; gap:var(--space-tight); padding:var(--space-tight); border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg-sunken); margin-bottom:var(--space-group); }
.cc-sandbox-modes button{ display:inline-flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border:0; border-radius:var(--r-control); background:transparent; color:var(--ink-3); font-size:var(--t-label-size); font-weight:600; cursor:pointer; }
.cc-sandbox-modes button:hover{ color:var(--ink); }
.cc-sandbox-modes button.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.cc-sandbox-modes button.on svg{ color:var(--accent); }
.cc-sandbox-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.cc-sandbox-form{ display:flex; flex-direction:column; gap:var(--space-item); min-height:520px; }
.cc-sandbox-field{ display:flex; flex-direction:column; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.02em; color:var(--ink-4); }
.cc-sandbox-field.grow{ flex:1; min-height:0; }
.cc-sandbox-field input{ padding:var(--space-inline) var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:var(--t-label-size); font-weight:500; }
.cc-sandbox-field input:focus{ outline:none; border-color:var(--accent); }
.cc-sandbox-code{ flex:1; min-height:220px; resize:vertical; padding:var(--space-item); border:1px solid var(--border); border-radius:var(--r-control); background:var(--bg-sunken); color:var(--ink); font-family:var(--font-mono, ui-monospace, monospace); font-size:var(--t-caption-size); line-height:1.55; white-space:pre; overflow:auto; }
.cc-sandbox-code:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
.cc-sandbox-opts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-item) var(--space-group); }
.cc-sandbox-inline{ display:inline-flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); font-weight:600; color:var(--ink-4); }
.cc-sandbox-inline .cc-market-select{ min-width:120px; }
.cc-sandbox-check{ display:inline-flex; align-items:center; gap:var(--space-inline); font-size:var(--t-caption-size); color:var(--ink-2); cursor:pointer; }
.cc-sandbox-check input{ width:15px; height:15px; accent-color:var(--accent); }
.cc-sandbox-access{ flex:1 1 100%; width:100%; display:flex; flex-direction:column; gap:var(--space-inline); padding:var(--space-item); border:1px solid var(--border-subtle); border-radius:var(--r-card); background:var(--bg-sunken); }
.cc-sandbox-access-lbl{ font-size:var(--t-micro-size); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); }
.cc-sandbox-access .cc-pub{ gap:var(--space-item); }
.cc-sandbox-actions{ display:flex; flex-direction:column; gap:var(--space-inline); }
.cc-sandbox-hint{ font-size:var(--t-micro-size); color:var(--ink-4); line-height:1.5; }
.cc-sandbox-preview{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface); min-height:520px; }
.cc-sandbox-preview-hd{ display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); border-bottom:1px solid var(--border); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.02em; color:var(--ink-4); background:var(--bg-sunken); }
.cc-sandbox-preview-hd svg{ color:var(--ink-3); }
.cc-sandbox-frame{ flex:1; width:100%; border:0; background:#fff; }
.cc-sandbox-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-inline); color:var(--ink-4); font-size:var(--t-label-size); padding:var(--space-block); text-align:center; }
.cc-sandbox-done{ max-width:560px; margin:24px auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-tight); padding:var(--space-section) var(--space-block); border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); }
.cc-sandbox-done-ic{ width:52px; height:52px; border-radius:999px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); margin-bottom:var(--space-tight); }
.cc-sandbox-done h3{ margin:0; font-size:var(--t-heading-size); color:var(--ink); }
.cc-sandbox-done p{ margin:0; font-size:var(--t-label-size); line-height:1.6; color:var(--ink-3); }
.cc-sandbox-done-actions{ display:flex; gap:var(--space-inline); margin-top:var(--space-group); flex-wrap:wrap; justify-content:center; }
@media (max-width:940px){
  .cc-sandbox-grid{ grid-template-columns:1fr; }
  .cc-sandbox-form, .cc-sandbox-preview{ min-height:0; }
  .cc-sandbox-preview{ min-height:360px; }
}

/* ── Plans & Storage pillar (PlatformPlans) ─────────────────────────────
   Editorial Calm: borderless rows on the page background, 1px hairline
   dividers, hover-only affordance, one accent moment (the Save button). */
/* overflow-x:auto so the 7-column row stays reachable. Its min-content width is
   778px, but usable width here is (viewport − 56 sidebar − cc-rail − content-pad
   padding), which is only 736px at a 1040px viewport — and every ancestor
   (.cc-root, .cc-main, the inner .content) is overflow-x:hidden, so without this
   the trailing .ccp-plan-act column (Save / Reset) was clipped and unreachable.
   Scrolling beats collapsing here: it keeps all 7 columns legible. */
.ccp-plans{ border-top:1px solid var(--border); overflow-x:auto; }
.ccp-plan-head{ display:grid; grid-template-columns:minmax(190px,1.35fr) repeat(4, minmax(74px,.62fr)) minmax(130px,.95fr) 86px; gap:var(--space-item); align-items:center; padding:var(--space-inline) var(--space-tight) var(--space-inline); font-size:var(--t-micro-size); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--border-subtle); }
.ccp-plan-row{ display:grid; grid-template-columns:minmax(190px,1.35fr) repeat(4, minmax(74px,.62fr)) minmax(130px,.95fr) 86px; gap:var(--space-item); align-items:center; padding:var(--space-item) var(--space-tight); border-bottom:1px solid var(--border-subtle); border-radius:var(--r-control); }
.ccp-plan-row:hover{ background:var(--bg-hover); }
.ccp-plan-title{ font-weight:650; color:var(--ink); font-size:var(--t-body-size); }
.ccp-plan-meta{ font-size:var(--t-micro-size); color:var(--ink-4); margin-top:2px; }
.ccp-in{ width:100%; min-width:0; padding:var(--space-tight) var(--space-inline); font-size:var(--t-label-size); font-variant-numeric:tabular-nums; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-control); outline:none; }
.ccp-in:focus{ border-color:var(--accent); }
.ccp-in:disabled{ background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); }
.ccp-plan-example{ font-size:var(--t-label-size); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ccp-plan-example-sub{ display:block; font-size:var(--t-micro-size); font-weight:500; color:var(--ink-4); margin-top:1px; }
.ccp-plan-act{ display:flex; justify-content:flex-end; }
.ccp-plan-default{ font-size:var(--t-micro-size); color:var(--ink-4); }
.ccp-quiet{ appearance:none; background:none; border:none; padding:var(--space-tight) var(--space-inline); border-radius:var(--r-control); font-size:var(--t-caption-size); font-weight:600; color:var(--ink-3); cursor:pointer; }
.ccp-quiet:hover{ background:var(--bg-hover); color:var(--ink); }
.ccp-quiet:disabled{ color:var(--disabled-fg); cursor:default; }
.ccp-foot-note{ margin-top:var(--space-item); font-size:var(--t-caption-size); line-height:1.5; color:var(--ink-4); max-width:70ch; }
.ccp-empty{ padding:var(--space-block) var(--space-tight); font-size:var(--t-label-size); color:var(--ink-4); border-top:1px solid var(--border); }
/* Same reason as .ccp-plans: min-content 620px vs 736px usable is fine at 1040px
   but goes short on narrower/rail-wider combinations, and the trailing
   .ccp-ten-act column would be clipped with no way to scroll to it. */
.ccp-tenants{ border-top:1px solid var(--border); overflow-x:auto; }
.ccp-ten-row{ display:grid; grid-template-columns:minmax(200px,1.4fr) minmax(140px,1fr) minmax(150px,auto) 84px; gap:var(--space-item); align-items:center; padding:var(--space-item) var(--space-tight); border-bottom:1px solid var(--border-subtle); border-radius:var(--r-control); }
.ccp-ten-row:hover{ background:var(--bg-hover); }
.ccp-ten-title{ font-weight:600; color:var(--ink); font-size:var(--t-label-size); display:flex; align-items:center; gap:var(--space-inline); }
.ccp-ten-meta{ font-size:var(--t-micro-size); color:var(--ink-4); margin-top:2px; display:flex; align-items:center; gap:var(--space-inline); }
.ccp-chip{ font-size:var(--t-micro-size); font-weight:600; letter-spacing:.03em; color:var(--ink-3); background:var(--bg-sunken); border-radius:999px; padding:2px var(--space-inline); }
.ccp-chip.alloc{ color:var(--accent); background:var(--accent-soft); }
.ccp-ten-bar{ height:5px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; }
.ccp-ten-fill{ display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s ease; }
.ccp-ten-fill.hot{ background:var(--st-blocked); }
.ccp-ten-nums{ font-size:var(--t-caption-size); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; text-align:right; }
.ccp-ten-of{ font-weight:500; color:var(--ink-4); }
.ccp-ten-act{ display:flex; justify-content:flex-end; }
.ccp-sandbox-toggle{ appearance:none; background:none; border:none; padding:var(--space-inline) var(--space-tight); font-size:var(--t-caption-size); font-weight:600; color:var(--ink-4); cursor:pointer; }
.ccp-sandbox-toggle:hover{ color:var(--ink); }
@media (max-width: 980px){
  .cc-issue-flow{ grid-template-columns:1fr; gap:0; }
  .cc-issue-link{ display:none; }
  .cc-issue-node{ border-bottom:1px solid var(--border-subtle); }
  .cc-issue-node:last-child{ border-bottom:0; }
  .cc-issue-visual{ grid-template-columns:1fr; }
  .cc-issue-radar{ margin:0 auto; }
  .cc-repair-steps{ grid-template-columns:1fr 1fr; }
  .cc-repair-step:nth-child(2n){ border-right:0; }
  .cc-repair-checks{ grid-template-columns:1fr; }
  .cc-repair-head{ flex-direction:column; }
  .ccp-plan-head{ display:none; }
  .ccp-plan-row{ grid-template-columns:1fr 1fr; }
  .ccp-ten-row{ grid-template-columns:1fr; gap:var(--space-inline); }
  .ccp-ten-nums{ text-align:left; }
}
/* ── Control Center commercial operations ─────────────────────────────── */
.cc-commercial-loading{padding:var(--space-page) 0;color:var(--muted);font-size:var(--t-body-size)}
.cc-commercial-note{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-inline) 0 var(--space-item);border-bottom:1px solid var(--border-subtle);color:var(--muted);font-size:var(--t-caption-size);line-height:1.45}
.cc-commercial-note svg{flex:none;margin-top:1px}
.cc-commercial-metrics .cc-metric-v{font-size:var(--t-heading-size);letter-spacing:-.025em}
.cc-commercial-tabs{display:flex;gap:var(--space-tight);margin:20px 0 var(--space-item);border-bottom:1px solid var(--border-subtle)}
.cc-commercial-tabs button{border:0;background:transparent;padding:var(--space-inline) var(--space-item);color:var(--muted);font:inherit;font-size:var(--t-label-size);border-bottom:2px solid transparent;cursor:pointer}
.cc-commercial-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.cc-commercial-overview{border-top:1px solid var(--border-subtle)}
.cc-commercial-section{padding:var(--space-group) 0;border-bottom:1px solid var(--border-subtle)}
.cc-commercial-section p{margin:var(--space-tight) 0 0;color:var(--muted);font-size:var(--t-label-size);line-height:1.5}
.cc-commercial-table{border-top:1px solid var(--border-subtle)}
.cc-commercial-head,.cc-commercial-row{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr 1.1fr;gap:var(--space-item);align-items:center}
.cc-commercial-head{padding:var(--space-inline) var(--space-inline);color:var(--muted);font-size:var(--t-micro-size);text-transform:uppercase;letter-spacing:.06em}
.cc-commercial-row{padding:var(--space-item) var(--space-inline);border-top:1px solid var(--border-subtle);font-size:var(--t-label-size)}
.cc-commercial-row b{display:block;font-weight:600}.cc-commercial-row em{display:block;margin-top:var(--space-tight);color:var(--muted);font-size:var(--t-micro-size);font-style:normal}
.cc-strategic-catalog{min-width:0}
.cc-strategic-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:var(--space-group) 0 var(--space-item)}
.cc-strategic-head h3{margin:var(--space-tight) 0 0;font-family:var(--serif);font-size:var(--t-title-size);font-weight:500;color:var(--ink)}
.cc-strategic-head p{margin:var(--space-tight) 0 0;color:var(--muted);font-size:var(--t-caption-size)}
.cc-strategic-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-inline);flex-wrap:wrap}
.cc-strategic-status{font-size:var(--t-micro-size);font-weight:650;border-radius:999px;padding:var(--space-tight) var(--space-inline);background:var(--bg-sunken);color:var(--ink-3)}
.cc-strategic-status.blocked{color:var(--st-blocked)}
.cc-strategic-status.ready{color:var(--st-done)}
.cc-strategic-grid-wrap{overflow-x:auto}
.cc-strategic-grid{display:grid;min-width:850px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cc-strategic-cell{min-width:0;padding:var(--space-item) var(--space-inline);border-top:1px solid var(--border-subtle);font-size:var(--t-caption-size);color:var(--ink-2)}
.cc-strategic-grid>.cc-strategic-plan,.cc-strategic-grid>.cc-strategic-label:first-child{border-top:0}
.cc-strategic-label{position:sticky;left:0;z-index:1;background:var(--surface)}
.cc-strategic-label b{display:block;font-family:var(--mono);font-size:var(--t-micro-size);font-weight:600;color:var(--ink)}
.cc-strategic-label span{display:block;margin-top:var(--space-tight);color:var(--muted);font-size:var(--t-micro-size);line-height:1.35}
.cc-strategic-plan{background:var(--bg-sunken)}
.cc-strategic-plan b,.cc-strategic-plan span,.cc-strategic-plan em{display:block}
.cc-strategic-plan b{font-size:var(--t-body-size);color:var(--ink)}
.cc-strategic-plan span{margin-top:var(--space-tight);font-weight:600;color:var(--ink-2)}
.cc-strategic-plan em{margin-top:var(--space-tight);font-size:var(--t-micro-size);font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-strategic-value{font-variant-numeric:tabular-nums}
.cc-strategic-value.yes{color:var(--st-done);font-weight:600}
.cc-strategic-value.no{color:var(--muted)}
.cc-strategic-history{margin-top:20px;border-top:1px solid var(--border-subtle)}
.cc-strategic-history summary{padding:var(--space-item) 0;color:var(--muted);font-size:var(--t-caption-size);font-weight:600;cursor:pointer}
@media(max-width:760px){.cc-commercial-head{display:none}.cc-commercial-row{grid-template-columns:1fr 1fr}.cc-commercial-row>span:first-child{grid-column:1/-1}}
@media(max-width:760px){.cc-strategic-head{align-items:flex-start;flex-direction:column}.cc-strategic-actions{justify-content:flex-start}.cc-strategic-grid{min-width:780px}}

/* Company value: founder-only evidence workspace */
.ccv-loading{padding:var(--space-page) 0;color:var(--muted);font-size:var(--t-body-size)}
.ccv-notice{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-item) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.5}
.ccv-notice svg{flex:none;margin-top:var(--space-tight)}
.ccv-notice.warn{color:var(--st-blocked)}
.ccv-tabs{display:flex;gap:var(--space-group);overflow-x:auto;margin-top:var(--space-group);border-bottom:1px solid var(--border-subtle);scrollbar-width:none}
.ccv-tabs button{flex:none;padding:var(--space-inline) var(--space-tight);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:600 var(--t-label-size)/1 var(--font-body);cursor:pointer}
.ccv-tabs button.on{border-bottom-color:var(--accent);color:var(--ink)}
.ccv-view{display:flex;flex-direction:column;gap:var(--space-block);padding-top:var(--space-block)}
.ccv-view>section,.ccv-split>section{min-width:0}
.ccv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,.42fr);align-items:end;gap:var(--space-page);padding-bottom:var(--space-block);border-bottom:1px solid var(--border)}
.ccv-hero strong{display:block;margin-top:var(--space-inline);font-family:var(--serif);font-size:clamp(var(--t-display-size),7vw,var(--t-hero-size));font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.ccv-hero p{margin:var(--space-inline) 0 0;color:var(--muted);font-size:var(--t-label-size)}
.ccv-confidence{display:flex;flex-direction:column;gap:var(--space-inline)}
.ccv-confidence span{color:var(--muted);font-size:var(--t-caption-size)}
.ccv-confidence b{font-family:var(--serif);font-size:var(--t-title-size);font-weight:500;color:var(--ink)}
.ccv-confidence>div,.ccv-readiness-progress>div{height:var(--space-tight);overflow:hidden;border-radius:999px;background:var(--bg-sunken)}
.ccv-confidence i,.ccv-readiness-progress i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.ccv-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ccv-metric{min-width:0;padding:var(--space-item) var(--space-inline);border-right:1px solid var(--border-subtle)}
.ccv-metric:last-child{border-right:0}
.ccv-metric b,.ccv-metric span,.ccv-metric small{display:block}
.ccv-metric b{overflow:hidden;color:var(--ink);font-family:var(--serif);font-size:var(--t-heading-size);font-weight:500;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}
.ccv-metric span{margin-top:var(--space-inline);color:var(--ink-2);font-size:var(--t-caption-size);font-weight:650}
.ccv-metric small{margin-top:var(--space-tight);color:var(--muted);font-size:var(--t-micro-size)}
.ccv-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-page)}
.ccv-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-group);padding-bottom:var(--space-item)}
.ccv-section-head h3{margin:var(--space-tight) 0 0;font-family:var(--serif);font-size:var(--t-title-size);font-weight:500;color:var(--ink)}
.ccv-section-head p{max-width:42rem;margin:var(--space-inline) 0 0;color:var(--muted);font-size:var(--t-caption-size);line-height:1.5}
.ccv-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-inline);flex-wrap:wrap}
.ccv-line{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-item);padding:var(--space-item) var(--space-tight);border:0;border-top:1px solid var(--border-subtle);background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.ccv-line:last-child{border-bottom:1px solid var(--border-subtle)}
.ccv-line:not(.static):hover{background:var(--bg-sunken)}
.ccv-line span,.ccv-driver>span{min-width:0}
.ccv-line b,.ccv-line small,.ccv-driver b,.ccv-driver small{display:block}
.ccv-line b,.ccv-driver b{font-size:var(--t-label-size);color:var(--ink)}
.ccv-line small,.ccv-driver small{margin-top:var(--space-tight);color:var(--muted);font-size:var(--t-micro-size);line-height:1.45}
.ccv-line>strong{font-size:var(--t-label-size);font-weight:650;color:var(--ink)}
.ccv-status{display:inline-flex;width:max-content;align-items:center;border-radius:999px;padding:var(--space-tight) var(--space-inline);background:var(--bg-sunken);color:var(--ink-3);font-size:var(--t-micro-size);font-weight:700;white-space:nowrap}
.ccv-status.s-verified,.ccv-status.s-achieved,.ccv-status.s-low{color:var(--st-done)}
.ccv-status.s-blocked,.ccv-status.s-critical,.ccv-status.s-missing,.ccv-status.s-evidence_expired{color:var(--danger)}
.ccv-status.s-in_progress,.ccv-status.s-high,.ccv-status.s-partial{color:var(--st-blocked)}
.ccv-definition{display:grid;grid-template-columns:minmax(10rem,.32fr) minmax(0,1fr);gap:var(--space-group);padding:var(--space-item) var(--space-tight);border-top:1px solid var(--border-subtle)}
.ccv-definition:last-child{border-bottom:1px solid var(--border-subtle)}
.ccv-definition b{font-size:var(--t-caption-size);color:var(--ink)}
.ccv-definition p{margin:0;color:var(--muted);font-size:var(--t-caption-size);line-height:1.5}
.ccv-table{border-top:1px solid var(--border)}
.ccv-table-head,.ccv-table-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(8rem,.3fr);align-items:center;gap:var(--space-item);padding:var(--space-inline) var(--space-tight)}
.ccv-table-head{color:var(--muted);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ccv-table-row{border-top:1px solid var(--border-subtle);color:var(--ink-2);font-size:var(--t-caption-size)}
.ccv-table-row:last-child{border-bottom:1px solid var(--border-subtle)}
.ccv-table-head.costs,.ccv-table-row.costs{grid-template-columns:minmax(11rem,1.2fr) minmax(8rem,.8fr) minmax(7rem,.7fr) minmax(7rem,.7fr) auto}
.ccv-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ccv-models section{padding:var(--space-group);border-right:1px solid var(--border-subtle)}
.ccv-models section:last-child{border-right:0}
.ccv-models h3{margin:var(--space-inline) 0 0;font-family:var(--serif);font-size:var(--t-heading-size);font-weight:500;color:var(--ink)}
.ccv-models p{margin:var(--space-inline) 0 0;color:var(--ink-3);font-size:var(--t-caption-size)}
.ccv-models small{display:block;margin-top:var(--space-inline);color:var(--muted);font-size:var(--t-micro-size)}
.ccv-assumptions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.ccv-assumptions span{padding:var(--space-item) var(--space-inline);border-right:1px solid var(--border-subtle);color:var(--muted);font-size:var(--t-micro-size)}
.ccv-assumptions span:last-child{border-right:0}
.ccv-assumptions b{display:block;margin-bottom:var(--space-tight);color:var(--ink);font-family:var(--serif);font-size:var(--t-title-size);font-weight:500}
.ccv-list{border-top:1px solid var(--border)}
.ccv-driver{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-item);padding:var(--space-group) var(--space-tight);border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ccv-driver:hover{background:var(--bg-sunken)}
.ccv-readiness-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-inline) var(--space-group);padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle);color:var(--muted);font-size:var(--t-caption-size)}
.ccv-readiness-progress span:nth-child(2){text-align:right}
.ccv-readiness-progress b{color:var(--ink);font-family:var(--serif);font-size:var(--t-title-size);font-weight:500}
.ccv-readiness-progress>div{grid-column:1/-1}
.ccv-form{display:flex;flex-direction:column;gap:var(--space-group)}
.ccv-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-item)}
.ccv-form-section{display:flex;flex-direction:column;gap:var(--space-inline);padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle)}
.ccv-form input[type="month"],.ccv-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--bg);color:var(--ink);font:inherit;padding:var(--space-inline)}
@media(max-width:900px){.ccv-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.ccv-metric:nth-child(3){border-right:0}.ccv-metric:nth-child(-n+3){border-bottom:1px solid var(--border-subtle)}.ccv-hero,.ccv-split{grid-template-columns:1fr}.ccv-models{grid-template-columns:1fr}.ccv-models section{border-right:0;border-bottom:1px solid var(--border-subtle)}.ccv-models section:last-child{border-bottom:0}.ccv-assumptions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.ccv-view{gap:var(--space-group)}.ccv-tabs{gap:var(--space-item)}.ccv-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ccv-metric:nth-child(3){border-right:1px solid var(--border-subtle)}.ccv-metric:nth-child(even){border-right:0}.ccv-metric:nth-child(-n+4){border-bottom:1px solid var(--border-subtle)}.ccv-section-head{align-items:flex-start;flex-direction:column}.ccv-actions{justify-content:flex-start}.ccv-table-head.costs{display:none}.ccv-table-row.costs{grid-template-columns:1fr 1fr}.ccv-table-row.costs>b{grid-column:1/-1}.ccv-assumptions{grid-template-columns:1fr 1fr}.ccv-driver{grid-template-columns:auto minmax(0,1fr) auto}.ccv-driver>.ccv-status:nth-last-child(2){grid-column:2}.ccv-definition,.ccv-form-grid{grid-template-columns:1fr}}

/* Recovery operations */
.cc-recovery-actions{display:flex;gap:var(--space-inline);flex-wrap:wrap}.cc-recovery-note{display:flex;gap:var(--space-inline);align-items:flex-start;padding:var(--space-inline) 0 var(--space-item);border-bottom:1px solid var(--border-subtle);color:var(--muted);font-size:var(--t-caption-size);line-height:1.5}.cc-recovery-note svg{flex:none;margin-top:1px}.cc-recovery-state{padding:44px 0;color:var(--muted);font-size:var(--t-body-size)}.cc-recovery-metrics{margin:var(--space-group) 0}.cc-recovery-list{border-top:1px solid var(--border-subtle)}.cc-recovery-row{width:100%;display:grid;grid-template-columns:150px minmax(0,1fr) 72px 20px;gap:var(--space-item);align-items:center;text-align:left;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;padding:var(--space-item) var(--space-tight);cursor:pointer;color:inherit;font:inherit}.cc-recovery-row:hover{background:var(--bg-sunken)}.cc-recovery-main{min-width:0}.cc-recovery-main b{display:block;font-size:var(--t-label-size);color:var(--ink)}.cc-recovery-main em{display:block;margin-top:var(--space-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-micro-size);font-style:normal;color:var(--muted)}.cc-recovery-status,.cc-recovery-urgency{display:inline-flex;justify-content:center;width:max-content;border-radius:999px;padding:var(--space-tight) var(--space-inline);font-size:var(--t-micro-size);font-weight:750}.cc-recovery-status{background:var(--bg-sunken);color:var(--ink-3)}.cc-recovery-status.s-restoring,.cc-recovery-status.s-verifying{background:#eef5ea;color:#3f7043}.cc-recovery-status.s-failed,.cc-recovery-status.s-blocked_by_retention,.cc-recovery-status.s-blocked_by_scope{background:#faf1e4;color:#9a5b16}.cc-recovery-urgency{background:var(--bg-sunken);color:var(--ink-3);text-transform:capitalize}.cc-recovery-urgency.u-critical{background:#f8e8e5;color:#a34131}.cc-recovery-urgency.u-high{background:#faf1e4;color:#9a5b16}.cc-recovery-form,.cc-recovery-drawer{display:flex;flex-direction:column;gap:var(--space-group)}.cc-recovery-form textarea,.cc-recovery-drawer textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--bg);color:var(--ink);font:inherit;padding:var(--space-inline) var(--space-inline)}.cc-recovery-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-item)}.cc-recovery-error{margin:0;color:var(--danger);font-size:var(--t-caption-size)}.cc-recovery-detailgrid{display:grid;grid-template-columns:120px 1fr;gap:var(--space-inline) var(--space-item);padding:var(--space-item) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);font-size:var(--t-caption-size)}.cc-recovery-detailgrid>span{color:var(--muted)}.cc-recovery-detailgrid>b{color:var(--ink)}.cc-recovery-copy{padding-top:2px}.cc-recovery-copy p{margin:var(--space-tight) 0 0;color:var(--muted);font-size:var(--t-label-size);line-height:1.5}.cc-recovery-event{padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--space-tight)}.cc-recovery-event b{font-size:var(--t-caption-size);color:var(--ink)}.cc-recovery-event span{font-size:var(--t-micro-size);color:var(--muted);line-height:1.4}.cc-recovery-transition{display:flex;gap:var(--space-inline);flex-wrap:wrap}
@media(max-width:760px){.cc-recovery-row{grid-template-columns:1fr auto}.cc-recovery-row .cc-recovery-main{grid-column:1/-1;grid-row:1}.cc-recovery-row .cc-recovery-status{grid-column:1}.cc-recovery-row .cc-recovery-urgency{grid-column:2}.cc-recovery-formgrid{grid-template-columns:1fr}}
.cc-incident-actions,.cc-incident-controls,.cc-incident-transitions,.cc-incident-inline{display:flex;gap:var(--space-inline);align-items:center;flex-wrap:wrap}.cc-incident-note{display:flex;gap:var(--space-inline);align-items:flex-start;padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle);color:var(--muted);font-size:var(--t-label-size)}.cc-incident-state{padding:36px 0;color:var(--muted)}.cc-incident-metrics{margin:20px 0}.cc-incident-list{border-top:1px solid var(--border-subtle)}.cc-incident-row{width:100%;display:flex;align-items:center;gap:var(--space-item);padding:var(--space-group) 2px;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.cc-incident-row:hover{background:var(--bg-sunken)}.cc-incident-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:var(--space-tight)}.cc-incident-main em{font-size:var(--t-caption-size);color:var(--muted);font-style:normal}.cc-incident-severity{text-transform:uppercase;font-size:var(--t-micro-size);font-weight:700;letter-spacing:.08em;min-width:62px}.cc-incident-severity.sev-critical{color:var(--danger)}.cc-incident-severity.sev-high{color:#9a5b16}.cc-incident-form,.cc-incident-drawer{display:flex;flex-direction:column;gap:var(--space-group)}.cc-incident-form textarea,.cc-incident-drawer textarea,.cc-incident-form select,.cc-incident-drawer select{width:100%}.cc-incident-detail{display:grid;grid-template-columns:auto 1fr;gap:var(--space-inline) var(--space-group);padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-incident-detail span{color:var(--muted);font-size:var(--t-caption-size)}.cc-incident-drawer section{padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle)}.cc-incident-workspace,.cc-incident-event{display:flex;flex-direction:column;gap:var(--space-tight);padding:var(--space-inline) 0}.cc-incident-workspace span,.cc-incident-event span{font-size:var(--t-caption-size);color:var(--muted)}.cc-incident-inline{display:grid;grid-template-columns:1fr 1fr auto;margin-top:var(--space-inline)}.cc-incident-error{color:var(--danger);font-size:var(--t-label-size)}.cc-incident-controls select{width:auto;min-width:140px}@media(max-width:760px){.cc-incident-inline{grid-template-columns:1fr}.cc-incident-row{align-items:flex-start}.cc-incident-severity{min-width:52px}}
.cc-incident-coord-row,.cc-incident-communication{display:flex;justify-content:space-between;align-items:center;gap:var(--space-item);padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}.cc-incident-coord-row>span,.cc-incident-communication>div:first-child{display:flex;flex-direction:column;gap:var(--space-tight);min-width:0}.cc-incident-coord-row em,.cc-incident-communication span{font-size:var(--t-micro-size);font-style:normal;color:var(--muted)}.cc-incident-coord-row select{width:auto;min-width:120px}.cc-incident-communication>div:last-child{display:flex;gap:var(--space-tight)}.cc-incident-drawer section>select{margin:var(--space-inline) 0}.cc-incident-drawer section>textarea{box-sizing:border-box;margin:var(--space-inline) 0}
.cc-incident-tabs{display:flex;gap:var(--space-group);margin-top:var(--space-group);border-bottom:1px solid var(--border-subtle)}.cc-incident-tabs button{display:flex;align-items:center;gap:var(--space-inline);padding:var(--space-inline) 1px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:600 12.5px/1 var(--font-body);cursor:pointer}.cc-incident-tabs button.on{border-bottom-color:var(--accent);color:var(--ink)}.cc-incident-tabs span{font-size:var(--t-micro-size);color:var(--muted)}.cc-triage-list{border-top:1px solid var(--border-subtle)}.cc-triage-row{width:100%;display:grid;grid-template-columns:68px minmax(0,1fr) auto 18px;align-items:center;gap:var(--space-item);padding:var(--space-group) 2px;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.cc-triage-row:hover{background:var(--bg-sunken)}.cc-triage-row.recovered{opacity:.62}.cc-triage-row .cc-incident-main small{display:block;color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.45;white-space:normal}.cc-triage-confidence{border-radius:999px;padding:var(--space-tight) var(--space-inline);background:var(--bg-sunken);color:var(--ink-3);font-size:var(--t-micro-size);font-weight:700;text-transform:capitalize}.cc-triage-confidence.corroborated{color:var(--st-done)}.cc-triage-drawer{display:flex;flex-direction:column;gap:var(--space-group)}.cc-triage-drawer section{padding-bottom:var(--space-item);border-bottom:1px solid var(--border-subtle)}.cc-triage-drawer p{margin:var(--space-inline) 0 0;color:var(--ink-2);font-size:var(--t-label-size);line-height:1.55}.cc-triage-drawer textarea{width:100%;box-sizing:border-box}.cc-triage-facts{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-inline) var(--space-group);margin-top:var(--space-inline)}.cc-triage-facts span{color:var(--muted);font-size:var(--t-caption-size)}.cc-triage-facts b{min-width:0;overflow-wrap:anywhere;color:var(--ink);font-size:var(--t-caption-size)}.cc-triage-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-inline);flex-wrap:wrap}.cc-triage-actions>span{flex:1;color:var(--muted);font-size:var(--t-caption-size);line-height:1.5}@media(max-width:760px){.cc-triage-row{grid-template-columns:58px 1fr 18px;align-items:start}.cc-triage-row .cc-triage-confidence{grid-column:2}.cc-triage-facts{grid-template-columns:1fr}.cc-triage-facts b{padding-bottom:var(--space-tight)}.cc-triage-actions{justify-content:flex-start}}

/* Platform service isolation controls */
.cc-service-note,.cc-service-viewonly{display:flex;align-items:flex-start;gap:var(--space-inline);color:var(--muted);font-size:var(--t-caption-size);line-height:1.5}.cc-service-note{padding:var(--space-item) 0 var(--space-group);border-bottom:1px solid var(--border-subtle)}.cc-service-note svg,.cc-service-viewonly svg{flex:none;margin-top:2px}.cc-service-state{padding:var(--space-page) 0;color:var(--muted)}.cc-service-metrics{margin:20px 0}.cc-service-list{border-top:1px solid var(--border-subtle)}.cc-service-row{width:100%;display:grid;grid-template-columns:116px minmax(0,1fr) 18px;align-items:center;gap:var(--space-group);padding:var(--space-group) var(--space-tight);border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.cc-service-row:hover{background:var(--bg-sunken)}.cc-service-status{display:inline-flex;width:max-content;align-items:center;gap:var(--space-tight);border-radius:999px;padding:var(--space-tight) var(--space-inline);background:var(--bg-sunken);color:var(--st-done);font-size:var(--t-micro-size);font-weight:700}.cc-service-status.paused{background:#faf1e4;color:#9a5b16}.cc-service-main{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight)}.cc-service-main b{font-size:var(--t-label-size)}.cc-service-main em,.cc-service-main small{font-style:normal;color:var(--muted);font-size:var(--t-caption-size);line-height:1.45}.cc-service-main small{color:var(--ink-3)}.cc-service-drawer{display:flex;flex-direction:column;gap:var(--space-group)}.cc-service-drawer section{padding-bottom:var(--space-group);border-bottom:1px solid var(--border-subtle)}.cc-service-drawer section p{margin:var(--space-inline) 0 0;color:var(--ink-2);font-size:var(--t-label-size);line-height:1.55}.cc-service-drawer textarea{width:100%;box-sizing:border-box;border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--bg);color:var(--ink);font:inherit;padding:var(--space-inline)}.cc-service-facts{display:grid;grid-template-columns:135px minmax(0,1fr);gap:var(--space-inline) var(--space-group);padding:var(--space-item) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);font-size:var(--t-caption-size)}.cc-service-facts span{color:var(--muted)}.cc-service-facts b{min-width:0;overflow-wrap:anywhere}.cc-service-durations{display:flex;gap:var(--space-inline);margin-top:var(--space-inline);flex-wrap:wrap}.cc-service-durations button{border:1px solid var(--border-subtle);border-radius:999px;background:transparent;color:var(--muted);font:600 11px/1 var(--font-body);padding:var(--space-inline) var(--space-inline);cursor:pointer}.cc-service-durations button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.cc-service-actions{display:flex;justify-content:flex-end;margin-top:var(--space-group)}.cc-service-error{margin:var(--space-inline) 0 0;color:var(--danger);font-size:var(--t-caption-size)}.cc-service-viewonly{padding:var(--space-item) 0}.cc-service-event{padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}.cc-service-event:last-child{border-bottom:0}.cc-service-event span{display:flex;justify-content:space-between;gap:var(--space-item)}.cc-service-event b{font-size:var(--t-caption-size);text-transform:capitalize}.cc-service-event em{font-size:var(--t-micro-size);font-style:normal;color:var(--muted)}.cc-service-event p{margin-top:5px!important;font-size:var(--t-caption-size)!important}@media(max-width:760px){.cc-service-row{grid-template-columns:1fr 18px}.cc-service-row .cc-service-status{grid-column:1}.cc-service-row .cc-service-main{grid-column:1/-1;grid-row:2}.cc-service-facts{grid-template-columns:1fr}.cc-service-facts b{padding-bottom:var(--space-tight)}.cc-service-event span{flex-direction:column;gap:var(--space-tight)}.cc-service-actions{justify-content:flex-start}}
.cc-service-actions{gap:var(--space-inline);flex-wrap:wrap}.cc-service-hint{margin-top:8px!important;color:var(--muted)!important;font-size:var(--t-micro-size)!important}.cc-recovery{padding:14px!important;border:1px solid var(--border-subtle)!important;border-radius:var(--r-control);background:var(--bg-sunken)}.cc-recovery-empty{display:flex;align-items:flex-start;gap:var(--space-inline);margin-top:var(--space-inline)}.cc-recovery-empty span,.cc-recovery-result span{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight)}.cc-recovery-empty b,.cc-recovery-result b{font-size:var(--t-caption-size)}.cc-recovery-empty em,.cc-recovery-result em{color:var(--muted);font-size:var(--t-micro-size);font-style:normal;line-height:1.45}.cc-recovery-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-item);margin-top:var(--space-inline)}.cc-recovery-head span{display:inline-flex;align-items:center;gap:var(--space-inline)}.cc-recovery-head b{font-size:var(--t-label-size)}.cc-recovery-head em{font-size:var(--t-micro-size);font-style:normal;color:var(--muted)}.cc-recovery-head.ready{color:var(--st-done)}.cc-recovery-head.caution{color:#9a5b16}.cc-recovery-head.blocked,.cc-recovery-head.expired{color:var(--danger)}.cc-recovery-meta{margin-top:var(--space-inline);color:var(--muted);font-size:var(--t-micro-size)}.cc-recovery-results{margin-top:var(--space-item);border-top:1px solid var(--border-subtle)}.cc-recovery-result{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--space-inline);padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}.cc-recovery-result:last-child{border-bottom:0}.cc-recovery-result.pass>svg{color:var(--st-done)}.cc-recovery-result.warn>svg{color:#9a5b16}.cc-recovery-result.fail>svg{color:var(--danger)}@media(max-width:760px){.cc-service-actions{align-items:stretch;flex-direction:column}.cc-service-actions .btn{justify-content:center}.cc-recovery-head{align-items:flex-start;flex-direction:column;gap:var(--space-tight)}}
.cc-ramp{padding:14px!important;border:1px solid var(--border-subtle)!important;border-radius:var(--r-control);background:var(--bg-sunken)}.cc-ramp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-item);margin-top:var(--space-inline)}.cc-ramp-head>span{display:inline-flex;align-items:center;gap:var(--space-inline)}.cc-ramp-head b{font-size:var(--t-label-size)}.cc-ramp-head em{color:var(--muted);font-size:var(--t-micro-size);font-style:normal}.cc-ramp.active .cc-ramp-head{color:var(--accent)}.cc-ramp.completed .cc-ramp-head{color:var(--st-done)}.cc-ramp.halted .cc-ramp-head,.cc-ramp.cancelled .cc-ramp-head{color:#9a5b16}.cc-ramp-counts{display:grid;grid-template-columns:repeat(3,minmax(0, 1fr));gap:var(--space-inline);margin-top:var(--space-item);padding:var(--space-item) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.cc-ramp-counts span{display:flex;flex-direction:column;gap:var(--space-tight)}.cc-ramp-counts b{font-size:var(--t-strong-size)}.cc-ramp-counts em{color:var(--muted);font-size:var(--t-micro-size);font-style:normal}.cc-ramp-events>div{padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}.cc-ramp-events>div:last-child{border-bottom:0}.cc-ramp-events span{display:flex;justify-content:space-between;gap:var(--space-inline)}.cc-ramp-events b{font-size:var(--t-micro-size);text-transform:capitalize}.cc-ramp-events em{color:var(--muted);font-size:var(--t-micro-size);font-style:normal}.cc-ramp-events p{font-size:var(--t-micro-size)!important}@media(max-width:760px){.cc-ramp-head,.cc-ramp-events span{align-items:flex-start;flex-direction:column;gap:var(--space-tight)}.cc-ramp-counts{grid-template-columns:1fr}}

/* Workspaces directory and selected-workspace record, Phase 2. */
.cc-ws-command{display:grid;grid-template-columns:minmax(280px,1.6fr) minmax(150px,.8fr) minmax(150px,.8fr) minmax(130px,.7fr) minmax(150px,.8fr);gap:var(--space-inline);align-items:center;padding:var(--space-group) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cc-ws-search{width:100%;min-width:0}.cc-ws-filter,.cc-ws-sort{width:100%;min-width:0;height:38px;font-size:var(--t-caption-size)}.cc-ws-choice{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:var(--space-inline);font-size:var(--t-caption-size);text-align:left}.cc-ws-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-ws-more{border-bottom:1px solid var(--border-subtle)}.cc-ws-more>summary{width:max-content;padding:var(--space-inline) 0;color:var(--ink-4);font-size:var(--t-caption-size);font-weight:650;cursor:pointer}.cc-ws-more-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-inline);padding:0 0 var(--space-item)}.cc-ws-more-grid .input{width:100%;min-width:0}
.cc-ws-directory-meta{display:flex;align-items:center;gap:var(--space-item);min-height:44px;color:var(--ink-4);font-size:var(--t-caption-size)}.cc-ws-directory-meta span:first-child{color:var(--ink);font-weight:650}.cc-ws-directory-meta button{display:inline-flex;align-items:center;gap:var(--space-tight);border:0;background:transparent;color:var(--ink-4);font:inherit;font-weight:650;cursor:pointer}.cc-ws-directory-meta button:first-of-type{margin-left:auto}.cc-ws-directory-meta button:hover{color:var(--ink)}
.cc-ws-directory{border-top:1px solid var(--border)}.cc-ws-directory-head,.cc-ws-directory-row{display:grid;grid-template-columns:minmax(250px,1.65fr) minmax(130px,.8fr) minmax(95px,.55fr) minmax(125px,.75fr) minmax(150px,.9fr) 24px;gap:var(--space-item);align-items:center}.cc-ws-directory-head{padding:var(--space-inline);border-bottom:1px solid var(--border);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.05em;text-transform:uppercase}.cc-ws-directory-row{width:100%;padding:var(--space-item) var(--space-inline);border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.cc-ws-directory-row:hover{background:var(--bg-hover)}.cc-ws-directory-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.cc-ws-subscription,.cc-ws-number,.cc-ws-activity{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight)}.cc-ws-subscription b,.cc-ws-number b,.cc-ws-activity b{overflow:hidden;color:var(--ink);font-size:var(--t-caption-size);font-weight:650;text-overflow:ellipsis;white-space:nowrap}.cc-ws-subscription em,.cc-ws-number em,.cc-ws-activity em{overflow:hidden;color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap}.cc-ws-attention{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:var(--space-tight)}.cc-ws-attention>span{display:inline-flex;align-items:center;gap:var(--space-tight);color:var(--ink-3);font-size:var(--t-micro-size);font-weight:650;text-transform:capitalize}.cc-ws-attention>span svg{color:#9a5b16}.cc-ws-attention>em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal}.cc-ws-open{display:flex;justify-content:flex-end;color:var(--ink-4)}
.cc-ws-skeleton{display:grid;grid-template-columns:1.5fr .75fr .55fr .9fr;gap:var(--space-item);padding:var(--space-item) var(--space-inline);border-bottom:1px solid var(--border-subtle)}.cc-ws-skeleton span,.cc-ws-record-loading span{height:18px;border-radius:var(--r-sm);background:var(--bg-sunken);animation:cc-ws-pulse 1.3s ease-in-out infinite}.cc-ws-skeleton span:first-child{width:72%}.cc-ws-skeleton span:nth-child(3){width:40%}@keyframes cc-ws-pulse{50%{opacity:.48}}
.cc-ws-state{display:flex;min-height:240px;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-inline);padding:var(--space-block);color:var(--ink-4);text-align:center}.cc-ws-state b{color:var(--ink);font-size:var(--t-strong-size)}.cc-ws-state p{max-width:520px;margin:0;color:var(--ink-4);font-size:var(--t-caption-size);line-height:1.5}.cc-ws-pagination{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-item);padding:var(--space-item) 0}.cc-ws-pagination span{color:var(--ink-4);font-size:var(--t-caption-size)}.cc-ws-boundary{display:flex;align-items:center;gap:var(--space-inline);margin:var(--space-inline) 0 0;color:var(--ink-4);font-size:var(--t-micro-size)}
.cc-ws-record-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-item);padding-bottom:var(--space-group);border-bottom:1px solid var(--border)}.cc-ws-back{grid-column:1/-1;display:inline-flex;width:max-content;align-items:center;gap:var(--space-inline);padding:0;border:0;background:transparent;color:var(--ink-4);font:600 var(--t-caption-size)/1.2 var(--font-body);cursor:pointer}.cc-ws-back:hover{color:var(--ink)}.cc-ws-record-title{display:flex;min-width:0;align-items:center;gap:var(--space-item)}.cc-ws-record-title h1{margin:var(--space-tight) 0 0;color:var(--ink);font:500 clamp(28px,3vw,40px)/1.05 var(--font-serif)}.cc-ws-record-title p{margin:var(--space-inline) 0 0;color:var(--ink-4);font-size:var(--t-caption-size)}.cc-ws-record-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-inline)}.cc-ws-record-summary{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-inline);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.cc-ws-record-summary>span{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight);padding:var(--space-item);border-right:1px solid var(--border-subtle)}.cc-ws-record-summary>span:last-child{border-right:0}.cc-ws-record-summary em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.cc-ws-record-summary b{overflow:hidden;color:var(--ink);font-size:var(--t-label-size);font-weight:650;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap}
.cc-ws-record-layout{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;min-height:580px}.cc-ws-record-nav{position:sticky;top:0;display:flex;flex-direction:column;padding:var(--space-group) var(--space-group) var(--space-group) 0;border-right:1px solid var(--border)}.cc-ws-record-nav-context{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight);padding:0 var(--space-inline) var(--space-item);border-bottom:1px solid var(--border-subtle)}.cc-ws-record-nav-context span{overflow:hidden;color:var(--ink-3);font-size:var(--t-micro-size);text-overflow:ellipsis}.cc-ws-record-nav-context em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal}.cc-ws-record-nav>button{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:var(--space-inline);min-height:38px;padding:0 var(--space-inline);border:0;background:transparent;color:var(--ink-4);font:600 var(--t-caption-size)/1.25 var(--font-body);text-align:left;cursor:pointer}.cc-ws-record-nav>button:hover{color:var(--ink)}.cc-ws-record-nav>button.on{background:var(--bg-hover);color:var(--ink)}.cc-ws-record-nav>button em{display:grid;min-width:20px;height:20px;place-items:center;border-radius:999px;background:var(--bg-sunken);color:var(--ink-3);font-size:var(--t-micro-size);font-style:normal}.cc-ws-record-nav>p{display:flex;align-items:flex-start;gap:var(--space-inline);margin:var(--space-item) var(--space-inline) 0;color:var(--ink-4);font-size:var(--t-micro-size);line-height:1.45}.cc-ws-record-nav>p svg{flex:none;margin-top:2px}.cc-ws-record-canvas{min-width:0;padding:var(--space-block) 0 var(--space-section) var(--space-block)}.cc-ws-mobile-section{display:none}
.cc-ws-section-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-block);padding-bottom:var(--space-group);border-bottom:1px solid var(--border)}.cc-ws-section-intro h2{margin:var(--space-tight) 0 0;color:var(--ink);font:500 var(--t-title-size)/1.1 var(--font-serif)}.cc-ws-section-intro p{max-width:680px;margin:var(--space-inline) 0 0;color:var(--ink-3);font-size:var(--t-label-size);line-height:1.55}.cc-ws-section-actions{display:flex;align-items:center;gap:var(--space-inline);flex-wrap:wrap}.cc-ws-facts{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}.cc-ws-facts>div{display:grid;grid-template-columns:minmax(120px,.75fr) minmax(0,1fr);gap:var(--space-inline);align-items:baseline;min-width:0;padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-ws-facts>div:nth-child(odd){padding-right:var(--space-group)}.cc-ws-facts>div:nth-child(even){padding-left:var(--space-group);border-left:1px solid var(--border-subtle)}.cc-ws-facts>div:nth-last-child(-n+2){border-bottom:0}.cc-ws-facts span{color:var(--ink-4);font-size:var(--t-caption-size)}.cc-ws-facts b{min-width:0;color:var(--ink);font-size:var(--t-caption-size);font-weight:650;overflow-wrap:anywhere}.cc-ws-facts em{grid-column:2;color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal}.cc-ws-section-block{padding:var(--space-block) 0;border-bottom:1px solid var(--border)}.cc-ws-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-item)}.cc-ws-block-head p{margin:var(--space-tight) 0 0;color:var(--ink-4);font-size:var(--t-caption-size);line-height:1.5}
.cc-ws-attention-list,.cc-ws-simple-list,.cc-ws-member-list,.cc-ws-case-list,.cc-ws-audit-list{margin-top:var(--space-item);border-top:1px solid var(--border-subtle)}.cc-ws-attention-list button{display:grid;grid-template-columns:20px minmax(0,1fr) 18px;gap:var(--space-inline);align-items:start;width:100%;padding:var(--space-item) 0;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.cc-ws-attention-list button:hover b{color:var(--accent)}.cc-ws-attention-list button>svg:first-child{color:#9a5b16}.cc-ws-attention-list span,.cc-ws-simple-list>div>span,.cc-ws-member-list>div>span:nth-child(2),.cc-ws-case-list>div>span,.cc-ws-audit-list>div>span{display:flex;min-width:0;flex-direction:column;gap:var(--space-tight)}.cc-ws-attention-list b,.cc-ws-simple-list b,.cc-ws-member-list b,.cc-ws-case-list b,.cc-ws-audit-list b{color:var(--ink);font-size:var(--t-caption-size);font-weight:650}.cc-ws-attention-list em,.cc-ws-simple-list em,.cc-ws-member-list em,.cc-ws-case-list em,.cc-ws-audit-list em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal;line-height:1.45}.cc-ws-emptyline{display:flex;align-items:center;gap:var(--space-inline);padding:var(--space-item) 0;color:var(--ink-4);font-size:var(--t-caption-size)}.cc-ws-member-list>div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:var(--space-inline);align-items:center;padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-ws-member-list>div>span:last-child{color:var(--ink-4);font-size:var(--t-micro-size);white-space:nowrap}.cc-avatar-fallback{display:grid;width:28px;height:28px;place-items:center;border-radius:999px;background:var(--bg-sunken);color:var(--ink-4)}.cc-ws-simple-list>div{padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-ws-case-list>div{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:var(--space-item);padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-ws-case-list>div>span:last-child{text-align:right}.cc-ws-audit-list{border-top:1px solid var(--border)}.cc-ws-audit-list>div{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(180px,.65fr);gap:var(--space-inline);align-items:start;padding:var(--space-item) 0;border-bottom:1px solid var(--border-subtle)}.cc-ws-audit-list>div>svg{color:var(--ink-4)}.cc-ws-audit-list>div>span:last-child{text-align:right}.cc-ws-current-state{display:inline-flex;align-items:center;gap:var(--space-inline);color:var(--ink);font-size:var(--t-caption-size);font-weight:650}.cc-ws-inline-actions{display:flex;align-items:center;gap:var(--space-inline);margin-top:var(--space-item);flex-wrap:wrap}.cc-ws-viewonly{display:flex;align-items:flex-start;gap:var(--space-inline);margin:var(--space-item) 0 0;color:var(--ink-4);font-size:var(--t-caption-size);line-height:1.5}.cc-ws-record-loading{display:flex;flex-direction:column;gap:var(--space-item)}.cc-ws-record-loading span{height:48px}.cc-ws-record-loading span:first-child{height:90px}
.cc-ws-audit-more{display:flex;justify-content:center;padding:var(--space-item) 0}.cc-ws-inline-error{margin:var(--space-item) 0 0;color:var(--danger);font-size:var(--t-caption-size);text-align:center}
@media (prefers-reduced-motion:reduce){.cc-ws-skeleton span,.cc-ws-record-loading span{animation:none}}
@media (max-width:1180px){.cc-ws-command{grid-template-columns:minmax(260px,1fr) repeat(2,minmax(145px,.6fr))}.cc-ws-command .cc-ws-filter:nth-of-type(3),.cc-ws-command .cc-ws-sort{grid-row:2}.cc-ws-more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cc-ws-directory-head,.cc-ws-directory-row{grid-template-columns:minmax(230px,1.5fr) minmax(125px,.75fr) 85px minmax(130px,.8fr) 24px}.cc-ws-directory-head>span:nth-child(4),.cc-ws-directory-row>.cc-ws-activity{display:none}.cc-ws-record-layout{grid-template-columns:1fr}.cc-ws-record-nav{position:static;display:flex;overflow-x:auto;flex-direction:row;padding:0;border-right:0;border-bottom:1px solid var(--border);scrollbar-width:thin}.cc-ws-record-nav-context,.cc-ws-record-nav>p{display:none}.cc-ws-record-nav>button{flex:0 0 auto;min-height:44px;padding:0 var(--space-item);border-left:0;border-bottom:2px solid transparent;white-space:nowrap}.cc-ws-record-nav>button.on{border-bottom-color:var(--accent)}.cc-ws-record-canvas{padding:var(--space-block) 0}.cc-ws-section-intro{padding-top:0}}
@media (max-width:900px){.cc-ws-command{grid-template-columns:1fr 1fr}.cc-ws-search{grid-column:1/-1}.cc-ws-command .cc-ws-filter:nth-of-type(3),.cc-ws-command .cc-ws-sort{grid-row:auto}.cc-ws-more-grid{grid-template-columns:1fr 1fr}.cc-ws-directory-meta{align-items:flex-start;flex-wrap:wrap;padding:var(--space-inline) 0}.cc-ws-directory-meta button:first-of-type{margin-left:0}.cc-ws-directory-head{display:none}.cc-ws-directory-row{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-item) 0}.cc-ws-directory-row>.cc-tn-id{grid-column:1}.cc-ws-directory-row>.cc-ws-subscription{grid-column:1;grid-row:2;padding-left:var(--sp-12)}.cc-ws-directory-row>.cc-ws-number{grid-column:2;grid-row:1;text-align:right}.cc-ws-directory-row>.cc-ws-attention{grid-column:1/-1;grid-row:3;padding-left:var(--sp-12)}.cc-ws-directory-row>.cc-ws-open{grid-column:2;grid-row:2}.cc-ws-pagination{justify-content:space-between}.cc-ws-record-head{grid-template-columns:1fr}.cc-ws-record-actions{justify-content:flex-start}.cc-ws-record-summary{grid-template-columns:1fr 1fr}.cc-ws-record-summary>span:nth-child(2){border-right:0}.cc-ws-record-summary>span:nth-child(-n+2){border-bottom:1px solid var(--border-subtle)}.cc-ws-record-nav{display:none}.cc-ws-mobile-section{display:flex;align-items:center;gap:var(--space-item);padding:var(--space-item) 0;border-bottom:1px solid var(--border)}.cc-ws-mobile-section>span{color:var(--ink-4);font-size:var(--t-caption-size);font-weight:650}.cc-ws-mobile-section>.cc-ws-choice{flex:1;min-width:0}.cc-ws-facts{grid-template-columns:1fr}.cc-ws-facts>div:nth-child(n){padding-right:0;padding-left:0;border-left:0;border-bottom:1px solid var(--border-subtle)}.cc-ws-facts>div:last-child{border-bottom:0}.cc-ws-section-intro{align-items:flex-start;flex-direction:column}.cc-ws-case-list>div{grid-template-columns:1fr}.cc-ws-audit-list>div{grid-template-columns:20px minmax(0,1fr)}.cc-ws-case-list>div>span:last-child{text-align:left}.cc-ws-audit-list>div>span:last-child{grid-column:2;text-align:left}.cc-ws-member-list>div{grid-template-columns:30px minmax(0,1fr)}.cc-ws-member-list>div>span:last-child{grid-column:2}.cc-ws-record-canvas{padding-top:var(--space-group)}}
@media (max-width:640px){.cc-ws-command,.cc-ws-more-grid{grid-template-columns:1fr}.cc-ws-command>*{grid-column:1}.cc-ws-record-title{align-items:flex-start}.cc-ws-record-title .cc-tn-tile{width:38px;height:38px}.cc-ws-record-title h1{font-size:28px}.cc-ws-record-actions{align-items:stretch;flex-direction:column}.cc-ws-record-actions .btn{justify-content:center}.cc-ws-record-summary{grid-template-columns:1fr}.cc-ws-record-summary>span:nth-child(n){border-right:0;border-bottom:1px solid var(--border-subtle)}.cc-ws-record-summary>span:last-child{border-bottom:0}}
@media (max-width:640px),(pointer:coarse){.cc-main :is(button,[role="button"]),:is(.drawer,.modal):has([class^="cc-"],[class*=" cc-"]) :is(button,[role="button"]){min-width:44px;min-height:44px}}

/* Minimum-administration workspace directory: identity, subscription, access, and open action only. */
.cc-ws-directory-head,.cc-ws-directory-row{grid-template-columns:minmax(250px,1.65fr) minmax(130px,.8fr) minmax(140px,.75fr) 24px}
.cc-ws-record-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.cc-ws-directory-head,.cc-ws-directory-row{grid-template-columns:minmax(230px,1.5fr) minmax(125px,.75fr) minmax(130px,.8fr) 24px}.cc-ws-directory-head>span:nth-child(4){display:block}}


/* s-product-insights.css */
.pi-command{display:flex;align-items:center;justify-content:space-between;gap:var(--space-group);padding:var(--space-item) 0 var(--space-group);border-bottom:1px solid var(--border-subtle)}
.pi-command select{height:34px;border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface);color:var(--ink);padding:0 28px 0 var(--space-inline);font:500 12px var(--font-app)}
.pi-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--border-subtle);padding:var(--space-block) 0}
.pi-metric{padding:0 var(--space-group);min-width:0}.pi-metric:first-child{padding-left:0}.pi-metric+.pi-metric{border-left:1px solid var(--border-subtle)}
.pi-metric strong{display:block;font:500 22px var(--font-serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pi-metric span{display:block;margin-top:var(--space-tight);font-size:var(--t-micro-size);color:var(--ink-3);text-transform:uppercase;letter-spacing:.055em}
.pi-section{padding:28px 0;border-bottom:1px solid var(--border-subtle)}.pi-section-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-group);margin-bottom:var(--space-group)}.pi-section h3{margin:var(--space-tight) 0 0;font:500 19px var(--font-serif);color:var(--ink)}.pi-eyebrow{font-size:var(--t-micro-size);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.pi-bars{height:170px;display:flex;gap:var(--space-tight);align-items:flex-end;padding-top:var(--space-group)}.pi-bar{height:100%;flex:1;min-width:5px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--space-inline)}.pi-bar i{display:block;width:min(18px,72%);background:var(--accent);border-radius:4px 4px 1px 1px;opacity:.82;min-height:4px}.pi-bar span{font:9px var(--font-mono);color:var(--ink-4);white-space:nowrap}
.pi-list,.pi-exp-list{border-top:1px solid var(--border-subtle)}.pi-list-row{display:grid;grid-template-columns:170px 1fr 90px 80px;align-items:center;gap:var(--space-group);min-height:46px;border-bottom:1px solid var(--border-subtle);font-size:var(--t-caption-size)}.pi-list-row b{font-weight:600}.pi-list-row em{font-style:normal;color:var(--ink-4);text-align:right}.pi-line{height:5px;background:var(--bg-sunken);border-radius:4px;overflow:hidden}.pi-line i{display:block;height:100%;background:var(--accent);border-radius:4px}
.pi-funnel{display:grid;gap:var(--space-inline)}.pi-funnel-row{display:grid;grid-template-columns:230px 1fr 70px 100px;align-items:center;gap:var(--space-item);min-height:38px}.pi-funnel-name{display:flex;align-items:center;gap:var(--space-inline)}.pi-funnel-name span{font:10px var(--font-mono);color:var(--ink-4)}.pi-funnel-name b{font-size:var(--t-caption-size)}.pi-funnel-bar{height:7px;border-radius:6px;background:var(--bg-sunken);overflow:hidden}.pi-funnel-bar i{display:block;height:100%;background:var(--accent);border-radius:6px}.pi-funnel-row strong{font-size:var(--t-label-size);text-align:right}.pi-funnel-row em{font-size:var(--t-micro-size);color:var(--ink-4);font-style:normal;text-align:right}
.pi-table{border-top:1px solid var(--border-subtle)}.pi-th,.pi-tr{display:grid;grid-template-columns:minmax(180px,1fr) repeat(5,100px);align-items:center;gap:var(--space-item);border-bottom:1px solid var(--border-subtle);min-height:42px;font-size:var(--t-caption-size)}.pi-th{min-height:30px;color:var(--ink-4);font-size:var(--t-micro-size);text-transform:uppercase;letter-spacing:.055em}.pi-tr b{font-weight:600}.pi-events .pi-th,.pi-events .pi-tr{grid-template-columns:1fr 120px 120px}
.pi-emptyline{padding:28px 0;color:var(--ink-4);font-size:var(--t-label-size)}.pi-empty{display:grid;justify-items:center;text-align:center;gap:var(--space-inline);padding:36px 20px;color:var(--ink-3)}.pi-empty b{color:var(--ink)}.pi-empty span{font-size:var(--t-caption-size);max-width:420px}
.pi-exp{padding:var(--space-group) 0;border-bottom:1px solid var(--border-subtle)}.pi-exp-h{display:flex;justify-content:space-between;gap:var(--space-group)}.pi-exp-h>div:first-child{display:grid;grid-template-columns:auto auto;align-items:center;gap:var(--space-inline)}.pi-exp-h small{grid-column:1/-1;color:var(--ink-4)}.pi-status{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}.pi-status.active{color:var(--st-done)}.pi-exp-actions{display:flex;gap:var(--space-tight)}.pi-exp-actions button{border:0;background:transparent;color:var(--ink-3);font-size:var(--t-micro-size);cursor:pointer;padding:var(--space-tight) var(--space-tight)}.pi-exp-actions button:hover{color:var(--ink)}.pi-exp-results{display:flex;gap:36px;margin-top:var(--space-group)}.pi-exp-results div{display:grid;grid-template-columns:auto auto;gap:var(--space-tight) var(--space-item)}.pi-exp-results strong{font:500 18px var(--font-serif)}.pi-exp-results span{grid-column:1/-1;color:var(--ink-4);font-size:var(--t-micro-size)}.pi-exp-note{margin-top:var(--space-item);color:var(--ink-4);font-size:var(--t-micro-size)}
.pi-form{display:grid;gap:var(--space-item)}.pi-form label{display:grid;gap:var(--space-tight);font-size:var(--t-micro-size);font-weight:600;color:var(--ink-2)}.pi-form input,.pi-form select{height:38px;border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface);color:var(--ink);padding:0 var(--space-item);font:400 13px var(--font-app)}.pi-form input:focus,.pi-form select:focus{border-color:var(--accent);outline:0;box-shadow:none}.pi-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-item)}.pi-form-actions{display:flex;justify-content:flex-end;gap:var(--space-inline);padding-top:var(--space-tight)}.pi-error{font-size:var(--t-caption-size);color:#a54b38}.pi-privacy{display:flex;align-items:center;gap:var(--space-inline);color:var(--ink-4);font-size:var(--t-micro-size);padding:var(--space-group) 0}.pi-section button,.pi-command button{user-select:none}
.pi-source-note{display:flex;align-items:flex-start;gap:var(--space-item);padding:var(--space-group) 0;border-bottom:1px solid var(--border-subtle);color:var(--ink-3)}.pi-source-note>svg{margin-top:2px;color:var(--accent)}.pi-source-note div{display:grid;gap:var(--space-tight)}.pi-source-note b{font-size:var(--t-caption-size);color:var(--ink)}.pi-source-note span,.pi-method-note{font-size:var(--t-micro-size);line-height:1.55;color:var(--ink-4)}
.pi-chart-key{display:flex;align-items:center;gap:var(--space-item);color:var(--ink-4);font-size:var(--t-micro-size)}.pi-chart-key span{display:flex;align-items:center;gap:var(--space-tight)}.pi-chart-key i{width:7px;height:7px;border-radius:2px}.pi-chart-key .views,.pi-resource-day .views{background:var(--accent)}.pi-chart-key .results,.pi-resource-day .results{background:var(--ink-2)}.pi-chart-key .downloads,.pi-resource-day .downloads{background:var(--st-done)}
.pi-resource-bars{height:170px;display:flex;gap:var(--space-tight);align-items:flex-end;padding-top:var(--space-group);overflow:hidden}.pi-resource-day{height:100%;flex:1;min-width:8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--space-inline)}.pi-resource-day>div{width:100%;height:138px;display:flex;align-items:flex-end;justify-content:center;gap:1px}.pi-resource-day i{display:block;width:min(6px,28%);min-height:3px;border-radius:3px 3px 1px 1px;opacity:.86}.pi-resource-day span{font:9px var(--font-mono);color:var(--ink-4);white-space:nowrap}
.pi-resource-pages .pi-th,.pi-resource-pages .pi-tr{grid-template-columns:minmax(260px,1fr) 130px 90px 90px}.pi-resource-tools .pi-th,.pi-resource-tools .pi-tr{grid-template-columns:minmax(210px,1fr) repeat(5,90px)}.pi-resource-downloads .pi-th,.pi-resource-downloads .pi-tr{grid-template-columns:minmax(220px,1fr) 110px 150px 150px}.pi-resource-pages .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-method-note{padding:var(--space-group) 0}
@media(max-width:900px){.pi-command{flex-wrap:wrap}.pi-command .seg{max-width:100%;overflow-x:auto}.pi-metrics{grid-template-columns:repeat(3,minmax(0, 1fr));row-gap:20px}.pi-metric:nth-child(4){border-left:0;padding-left:0}.pi-funnel-row{grid-template-columns:180px 1fr 55px}.pi-funnel-row em{display:none}.pi-list-row{grid-template-columns:130px 1fr 75px}.pi-list-row em{display:none}.pi-th,.pi-tr{grid-template-columns:minmax(130px,1fr) repeat(5,70px)}}
@media(max-width:640px){.pi-command{align-items:flex-start;flex-direction:column}.pi-metrics{grid-template-columns:repeat(2,minmax(0, 1fr))}.pi-metric:nth-child(odd){border-left:0;padding-left:0}.pi-metric:nth-child(4){border-left:1px solid var(--border-subtle);padding-left:var(--space-group)}.pi-funnel-row{grid-template-columns:1fr 70px}.pi-funnel-bar{grid-column:1/-1;grid-row:2}.pi-table{overflow:auto}.pi-th,.pi-tr{min-width:680px}.pi-bars,.pi-resource-bars{overflow:hidden}.pi-exp-results{gap:var(--space-group);flex-wrap:wrap}.pi-form-grid{grid-template-columns:1fr}.pi-chart-key{display:none}}
.pi-list-row>div{min-width:0}.pi-list-row>div small{display:block;margin-top:var(--space-tight);overflow:hidden;color:var(--ink-4);font-size:var(--t-micro-size);text-overflow:ellipsis;white-space:nowrap}
.pi-feature-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}
.pi-feature-notice{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-item) 0;border-top:1px solid var(--border-subtle);color:var(--ink-3);font-size:var(--t-caption-size);line-height:1.5}.pi-feature-notice svg{flex:none;color:var(--ink-4)}
.pi-feature-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-inline);padding:var(--space-group) 0;border-top:1px solid var(--border-subtle)}
.pi-feature-search{display:flex;align-items:center;flex:1;gap:var(--space-inline);min-width:240px;height:40px;padding:0 var(--space-item);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--ink-4)}.pi-feature-search:focus-within{border-color:var(--accent)}.pi-feature-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:400 13px var(--font-app)}
.pi-feature-table .pi-th,.pi-feature-table .pi-tr{grid-template-columns:minmax(220px,1fr) 68px 72px 64px 68px 84px 104px}.pi-feature-name{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-inline);min-width:0}.pi-feature-name>svg{color:var(--ink-4)}.pi-feature-name span{min-width:0}.pi-feature-name b,.pi-feature-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-feature-name small{margin-top:var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);font-weight:400}
@media(max-width:900px){.pi-feature-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.pi-feature-metrics .pi-metric:nth-child(3){border-left:0;padding-left:0}.pi-feature-metrics .pi-metric:nth-child(4){border-left:1px solid var(--border-subtle);padding-left:var(--space-group)}}
@media(max-width:640px){.pi-feature-controls{align-items:stretch}.pi-feature-search{flex-basis:100%;min-width:100%}.pi-feature-table .pi-th,.pi-feature-table .pi-tr{min-width:760px}}
.pi-decision-list{border-top:1px solid var(--border-subtle)}
.pi-decision-row{display:grid;grid-template-columns:minmax(0,1fr) 144px 104px;align-items:baseline;gap:var(--space-item);min-height:52px;padding:var(--space-inline) 0;border-bottom:1px solid var(--border-subtle)}
.pi-decision-row>div{min-width:0}.pi-decision-row b,.pi-decision-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-decision-row b{font-size:var(--t-caption-size)}.pi-decision-row small{margin-top:var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size)}.pi-decision-row span{color:var(--ink-2);font-size:var(--t-caption-size);font-weight:600}.pi-decision-row em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal;text-align:right}
.pi-tenant-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.pi-coverage{color:var(--ink-4);font-size:var(--t-micro-size)}
.pi-tenant-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-inline);padding:var(--space-group) 0;border-top:1px solid var(--border-subtle)}
.pi-inline-loading{display:flex;align-items:center;gap:var(--space-inline);padding:var(--space-inline) 0;color:var(--ink-4);font-size:var(--t-micro-size)}
.pi-tenant-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);align-items:start;gap:var(--space-section);min-width:0}
.pi-tenant-table{min-width:0;overflow-x:auto;border-top:1px solid var(--border-subtle)}
.pi-tenant-th,.pi-tenant-row{display:grid;grid-template-columns:minmax(180px,1fr) 112px 68px 60px 60px 96px;align-items:center;gap:var(--space-item);width:100%;min-width:0;text-align:left}
.pi-tenant-th{min-height:32px;color:var(--ink-4);font-size:var(--t-micro-size);letter-spacing:.055em;text-transform:uppercase}
.pi-tenant-row{min-height:56px;border:0;border-top:1px solid transparent;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);cursor:pointer;font:400 var(--t-caption-size) var(--font-app);transition:background var(--motion-fast) ease-out}
.pi-tenant-row:hover,.pi-tenant-row.on{background:var(--bg-hover)}.pi-tenant-row:disabled{cursor:not-allowed;opacity:.72}.pi-tenant-name{min-width:0}.pi-tenant-name b,.pi-tenant-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-tenant-name b{font-weight:600}.pi-tenant-name small{margin-top:var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size)}
.pi-tenant-state{color:var(--ink-3);font-size:var(--t-micro-size);font-weight:600}.pi-tenant-state.attention{color:var(--st-danger)}.pi-tenant-state.active{color:var(--st-done)}.pi-tenant-state.unobserved{color:var(--ink-4)}
.pi-page-note{padding:var(--space-item) 0;color:var(--ink-4);font-size:var(--t-micro-size)}
.pi-tenant-inspector{position:sticky;top:var(--space-group);display:flex;flex-direction:column;max-height:min(720px,calc(100vh - var(--space-section)));min-width:0;overflow:hidden}
.pi-inspector-empty{display:grid;justify-items:center;align-content:center;gap:var(--space-inline);min-height:320px;padding:var(--space-section);text-align:center;color:var(--ink-3)}.pi-inspector-empty b{color:var(--ink)}.pi-inspector-empty span{max-width:280px;font-size:var(--t-caption-size);line-height:1.5}
.pi-inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-item);padding:var(--space-group);border-bottom:1px solid var(--border-subtle)}.pi-inspector-head>div{min-width:0}.pi-inspector-head span{color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.055em;text-transform:uppercase}.pi-inspector-head h3{margin:var(--space-tight) 0 0;overflow:hidden;color:var(--ink);font:500 20px var(--font-serif);text-overflow:ellipsis;white-space:nowrap}.pi-inspector-head small{display:block;margin-top:var(--space-tight);overflow:hidden;color:var(--ink-4);font:var(--t-micro-size) var(--font-mono);text-overflow:ellipsis;white-space:nowrap}.pi-inspector-head button{display:grid;place-items:center;flex:none;width:32px;height:32px;border:0;border-radius:var(--r-control);background:transparent;color:var(--ink-3);cursor:pointer}.pi-inspector-head button:hover{background:var(--bg-hover);color:var(--ink)}
.pi-inspector-warning{display:flex;align-items:flex-start;gap:var(--space-inline);padding:var(--space-inline) var(--space-group);border-bottom:1px solid var(--border-subtle);color:var(--st-danger);font-size:var(--t-micro-size)}
.pi-inspector-body{min-height:0;padding:0 var(--space-group) var(--space-group)}
.pi-inspector-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--border-subtle)}.pi-inspector-metrics>div{min-width:0;padding:var(--space-item) var(--space-inline)}.pi-inspector-metrics>div:nth-child(odd){padding-left:0;border-left:0}.pi-inspector-metrics>div:nth-child(even){border-left:1px solid var(--border-subtle)}.pi-inspector-metrics strong,.pi-inspector-metrics span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-inspector-metrics strong{font:500 18px var(--font-serif)}.pi-inspector-metrics span{margin-top:var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size);text-transform:uppercase}
.pi-inspector-section{padding-top:var(--space-section)}.pi-inspector-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-item);margin-bottom:var(--space-head-below)}.pi-inspector-section-head>div{min-width:0}.pi-inspector-section-head span,.pi-inspector-section-head b{display:block}.pi-inspector-section-head span{color:var(--ink-4);font-size:var(--t-micro-size);font-weight:700;letter-spacing:.055em;text-transform:uppercase}.pi-inspector-section-head b{margin-top:var(--space-tight);font-size:var(--t-caption-size)}.pi-inspector-section-head em{color:var(--ink-4);font-size:var(--t-micro-size);font-style:normal;text-align:right}
.pi-inspector-list{border-top:1px solid var(--border-subtle)}.pi-inspector-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-item);width:100%;min-height:52px;padding:var(--space-inline) 0;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--ink);text-align:left}.pi-inspector-row>div{min-width:0}.pi-inspector-row b,.pi-inspector-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-inspector-row b{font-size:var(--t-caption-size)}.pi-inspector-row small{margin-top:var(--space-tight);color:var(--ink-4);font-size:var(--t-micro-size)}.pi-inspector-row>span{flex:none;color:var(--ink-3);font-size:var(--t-micro-size)}.pi-issue-row{cursor:pointer}.pi-issue-row:hover{background:var(--bg-hover)}.pi-inspector-emptyline{padding:var(--space-item) 0;color:var(--ink-4);font-size:var(--t-micro-size);line-height:1.5}
.pi-pulse{display:flex;align-items:flex-end;gap:var(--space-tight);height:96px;padding-top:var(--space-item)}.pi-pulse>div{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--space-tight);height:100%;min-width:0}.pi-pulse i{display:block;width:min(12px,72%);min-height:4px;border-radius:0;background:var(--accent);opacity:.76}.pi-pulse span{color:var(--ink-4);font:8px var(--font-mono)}
.pi-open-tenant{width:100%;margin-top:var(--space-section)}.pi-inspector-privacy{display:flex;align-items:flex-start;gap:var(--space-inline);padding-top:var(--space-item);color:var(--ink-4);font-size:var(--t-micro-size);line-height:1.5}.pi-inspector-privacy svg{flex:none}
.pi-tenant-inspector-portal{position:fixed;inset:0;z-index:1100;padding:var(--space-group);background:color-mix(in srgb,var(--ink) 24%,transparent);display:flex}.pi-tenant-inspector-portal .pi-tenant-inspector{width:min(100%,520px);height:100%;max-height:none;margin-left:auto;background:var(--inset-inspector-bg)}
@media(max-width:900px){.pi-tenant-layout{grid-template-columns:minmax(0,1fr)}.pi-decision-row{grid-template-columns:minmax(0,1fr) 132px 92px}}
@media(max-width:640px){.pi-tenant-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.pi-tenant-metrics .pi-metric:nth-child(3){border-left:0;padding-left:0}.pi-tenant-metrics .pi-metric:nth-child(4){border-left:1px solid var(--border-subtle);padding-left:var(--space-group)}.pi-tenant-controls{align-items:stretch}.pi-tenant-controls>*{flex-basis:100%}.pi-tenant-controls .pi-feature-search{min-height:44px}.pi-tenant-th,.pi-tenant-row{min-width:720px}.pi-decision-row{grid-template-columns:minmax(0,1fr)}.pi-decision-row em{text-align:left}.pi-tenant-inspector-portal{padding:0}.pi-tenant-inspector-portal .pi-tenant-inspector{width:100%;border-radius:0}.pi-inspector-head button{width:44px;height:44px}}


/* s-micro.css */
/* Stelaah — micro-interactions kit (shared primitives)
   Loads AFTER stelaah.css so it can enhance existing classes (e.g. .tcheck).
   Everything here is additive, token-driven, and reduced-motion aware.
   NO left accent bars, NO decorative colour dots — per house rules. */

/* ────────────────────────────────────────────────────────────
   1. Skeleton shimmer  (window.Skeleton)
   One shared keyframe + one base class with variants. Replaces the
   per-feature dosShimmer/dwcShimmer one-offs going forward. */
@keyframes skShimmer { 100% { transform: translateX(100%); } }
.sk {
  position: relative; overflow: hidden;
  background: var(--bg-sunken);
  border-radius: var(--r-sm);
  /* keeps layout height even when empty */
}
.sk::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: skShimmer 1.25s ease-in-out infinite;
}
:root[data-theme="dark"] .sk::after,
.dark .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
.sk-text  { height: 0.72em; border-radius: var(--r-xs); margin: 0.28em 0; }
.sk-line  { height: 12px; border-radius: var(--r-xs); }
.sk-title { height: 20px; border-radius: var(--r-xs); width: 42%; }
.sk-circle{ border-radius: 50%; }
.sk-block { border-radius: var(--r-md); }
.sk-stack > * + * { margin-top: var(--space-inline); }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ────────────────────────────────────────────────────────────
   2. Copy-to-clipboard inline confirmation  (window.CopyChip / copyToClipboard)
   Feedback happens ON the clicked element — no cross-screen toast. */
.copychip {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  cursor: pointer; border-radius: var(--r-xs);
  padding: 1px var(--space-tight); margin: -1px -4px;               /* invisible until hover */
  transition: background .14s, color .14s;
  -webkit-user-select: none; user-select: none;
}
.copychip:hover { background: var(--bg-hover); }
.copychip .copychip-ic { width: 13px; height: 13px; opacity: 0; flex-shrink: 0; transition: opacity .14s; color: var(--ink-3); }
.copychip:hover .copychip-ic { opacity: .8; }
.copychip.copied { color: var(--lime); background: var(--lime-soft); }
.copychip.copied .copychip-ic { opacity: 1; color: var(--lime); }
:root[data-theme="dark"] .copychip.copied,
.dark .copychip.copied { background: rgba(69,181,74,0.16); }
/* transient "Copied ✓" float used on non-chip targets */
.copied-float {
  position: fixed; z-index: 9600; pointer-events: none;
  font-size: var(--t-caption-size); font-weight: 600; color: var(--lime);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: var(--space-tight) var(--space-inline); box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: var(--space-tight);
  animation: copiedFloat 1.05s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes copiedFloat {
  0%   { opacity: 0; transform: translate(-50%, 2px) scale(.94); }
  18%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .copied-float { animation: none; } }

/* ────────────────────────────────────────────────────────────
   3. Deep-link flash  (window.flashEl)
   Soft ring + bg pulse to say "here it is" after a smooth scroll.
   Transient highlight, NOT a focus ring and NOT a left bar. */
.mflash { animation: mFlash 1.6s cubic-bezier(.22,.8,.3,1); border-radius: var(--r-md); }
@keyframes mFlash {
  0%   { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft-strong); }
  60%  { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft-strong); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
/* mention deep-link — warm amber "this is about you" settle */
.mflash.mflash-mention { animation-name: mFlashMention; }
@keyframes mFlashMention {
  0%   { background: var(--mention-me-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mention-me-fg) 22%, transparent); }
  55%  { background: var(--mention-me-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mention-me-fg) 22%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .mflash { animation: none; } }

/* ────────────────────────────────────────────────────────────
   4. Satisfying checkbox pop  (enhances stelaah.css .tcheck)
   The stroke already draws in; add a brief overshoot on the box so a
   completed task feels tactile.
   Keyed to `.task-check-pop`, NOT `.tcheck.on`. `.on` is a STATE, not an
   event: an already-completed checkbox carries it on every mount, so the
   blanket selector re-popped every done row that scrolled into view or
   survived a list re-render, while the transition-only class the component
   actually sets (window.TaskCheck / AnimCheck) was overridden by this rule
   and never ran. The component adds `.task-check-pop` for ~280ms on the
   not-done -> done transition and nowhere else. */
.tcheck.task-check-pop { animation: tcheckPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes tcheckPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
/* soft strike + fade for a row whose task just completed (opt-in via .row-done) */
.row-done { transition: opacity .5s ease; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .tcheck.task-check-pop { animation: none; } }

/* ────────────────────────────────────────────────────────────
   5. Progress ring  (window.ProgressRing)
   Shared SVG ring; fills stroke-dashoffset on view. */
.mring { display: inline-grid; place-items: center; }
.mring svg { transform: rotate(-90deg); overflow: visible; }
.mring .mring-track { stroke: var(--border); fill: none; }
.mring .mring-fill  { stroke: var(--accent); fill: none; stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.mring .mring-num { position: absolute; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.mring .mring-center { position: absolute; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .mring .mring-fill { transition: none; } }

/* ────────────────────────────────────────────────────────────
   6. Jump back in  (window.JumpBackIn — dashboard widget content)
   Bare content dropped into the real `.dw` widget card (like
   SharedWithMeBody/InventoryDashWidget): a clean vertical list of
   borderless rows — Linear-style recent-items list, not a strip
   of pill tiles. */
/* ────────────────────────────────────────────────────────────
   7. Multi-select — selected task row (no left bar, no colour dot)
   Background tint + a soft inset ring is the whole affordance. */
.trow.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-soft-strong); border-radius: var(--r-sm); }
.trow.sel:hover { background: var(--accent-soft-strong); }

.jbi-list { display: flex; flex-direction: column; }
.jbi-row {
  display: flex; align-items: center; gap: var(--space-inline); width: 100%;
  padding: var(--space-inline) var(--space-inline); border: none; background: none; border-radius: var(--r-control);
  cursor: pointer; text-align: left; transition: background .12s;
}
.jbi-row:hover { background: var(--bg-hover); }
.jbi-ic { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.jbi-nm { font-size: var(--t-label-size); font-weight: 550; color: var(--ink); }
.jbi-kd { font-size: var(--t-micro-size); color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.jbi-ago { font-size: var(--t-micro-size); color: var(--ink-4); flex-shrink: 0; min-width: 68px; text-align: right; }

/* ────────────────────────────────────────────────────────────
   8. Text marquee — long single-line labels scroll on hover
   Use <window.TextMarquee/> (or .mmarq > .mmarq-t). Hover the
   label or a host card/row below to animate only when overflow.
   Duration --mmarq-dur is measured from overflow width (~42px/s). */
.mmarq {
  container-type: inline-size;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.mmarq.inline { display: inline-block; vertical-align: bottom; }
.pcard2-name.mmarq,
.plan-itp-ownerbtn .mmarq,
.plan-itp-loc .mmarq,
.inv-card-loc .mmarq,
.inv-lcard-top .mmarq,
.mktp-card-top .mmarq,
.mktp-ws-top .mmarq,
.tcal-ev-name.mmarq,
.menu-item .mmarq,
.menu .menu-label .mmarq,
.cv-ctx-lbl.mmarq { flex: 1; min-width: 0; }
/* Board / marketplace titles: single-line marquee (no multi-line clamp). */
.kbn-title.mmarq,
.kbn-sub.mmarq,
.pl-card-title.mmarq,
.pl-card-client.mmarq,
.mktp-card-name.mmarq {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.mmarq > .mmarq-t {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.mmarq.is-overflow:hover > .mmarq-t,
.mmarq-host:hover .mmarq.is-overflow > .mmarq-t,
.jbi-row:hover .mmarq.is-overflow > .mmarq-t,
.plan-itp-row:hover .mmarq.is-overflow > .mmarq-t,
.plan-itp-seq-row:hover .mmarq.is-overflow > .mmarq-t,
.plan-itp-ms li:hover .mmarq.is-overflow > .mmarq-t,
.plan-itp-deps li:hover .mmarq.is-overflow > .mmarq-t,
.plan-ov-itin-chip:hover .mmarq.is-overflow > .mmarq-t,
.plan-ov-ms li:hover .mmarq.is-overflow > .mmarq-t,
.plan-ov-cl-list li:hover .mmarq.is-overflow > .mmarq-t,
.pcard2:hover .mmarq.is-overflow > .mmarq-t,
.fz-card:hover .mmarq.is-overflow > .mmarq-t,
.fz-mc:hover .mmarq.is-overflow > .mmarq-t,
.fz-dock:hover .mmarq.is-overflow > .mmarq-t,
.fz-player-hero:hover .mmarq.is-overflow > .mmarq-t,
.inv-card:hover .mmarq.is-overflow > .mmarq-t,
.inv-lcard:hover .mmarq.is-overflow > .mmarq-t,
.vn-card:hover .mmarq.is-overflow > .mmarq-t,
.mktp-card:hover .mmarq.is-overflow > .mmarq-t,
.mkt-card:hover .mmarq.is-overflow > .mmarq-t,
.ptpl-card:hover .mmarq.is-overflow > .mmarq-t,
.mktp-ws:hover .mmarq.is-overflow > .mmarq-t,
.kbn-card:hover .mmarq.is-overflow > .mmarq-t,
.sb-card:hover .mmarq.is-overflow > .mmarq-t,
.sb-tpl:hover .mmarq.is-overflow > .mmarq-t,
.dvh-card:hover .mmarq.is-overflow > .mmarq-t,
.dvh-recent:hover .mmarq.is-overflow > .mmarq-t,
.dvh-tpl:hover .mmarq.is-overflow > .mmarq-t,
.ds-toolcard:hover .mmarq.is-overflow > .mmarq-t,
.pl-card:hover .mmarq.is-overflow > .mmarq-t,
.tcal-ev:hover .mmarq.is-overflow > .mmarq-t,
.menu-item:hover .mmarq.is-overflow > .mmarq-t,
.menu .menu-label:hover .mmarq.is-overflow > .mmarq-t,
.cv-ctx-row:hover .mmarq.is-overflow > .mmarq-t {
  max-width: none;
  text-overflow: clip;
  animation: mmarq-scroll var(--mmarq-dur, 2.8s) ease-in-out infinite alternate;
  animation-delay: .16s;
}
/* Pause while pressed or mid-drag so marquee doesn't fight grabbing cards. */
.mmarq.is-overflow:active > .mmarq-t,
.mmarq-host:active .mmarq.is-overflow > .mmarq-t,
.jbi-row:active .mmarq.is-overflow > .mmarq-t,
.plan-itp-row:active .mmarq.is-overflow > .mmarq-t,
.plan-itp-seq-row:active .mmarq.is-overflow > .mmarq-t,
.pcard2:active .mmarq.is-overflow > .mmarq-t,
.fz-card:active .mmarq.is-overflow > .mmarq-t,
.fz-mc:active .mmarq.is-overflow > .mmarq-t,
.inv-card:active .mmarq.is-overflow > .mmarq-t,
.inv-lcard:active .mmarq.is-overflow > .mmarq-t,
.vn-card:active .mmarq.is-overflow > .mmarq-t,
.mktp-card:active .mmarq.is-overflow > .mmarq-t,
.mkt-card:active .mmarq.is-overflow > .mmarq-t,
.ptpl-card:active .mmarq.is-overflow > .mmarq-t,
.mktp-ws:active .mmarq.is-overflow > .mmarq-t,
.kbn-card:active .mmarq.is-overflow > .mmarq-t,
.sb-card:active .mmarq.is-overflow > .mmarq-t,
.sb-tpl:active .mmarq.is-overflow > .mmarq-t,
.dvh-card:active .mmarq.is-overflow > .mmarq-t,
.dvh-recent:active .mmarq.is-overflow > .mmarq-t,
.dvh-tpl:active .mmarq.is-overflow > .mmarq-t,
.ds-toolcard:active .mmarq.is-overflow > .mmarq-t,
.pl-card:active .mmarq.is-overflow > .mmarq-t,
.tcal-ev:active .mmarq.is-overflow > .mmarq-t,
.menu-item:active .mmarq.is-overflow > .mmarq-t,
.cv-ctx-row:active .mmarq.is-overflow > .mmarq-t,
.dragging .mmarq.is-overflow > .mmarq-t,
body.is-dragging .mmarq.is-overflow > .mmarq-t {
  animation-play-state: paused;
}
@keyframes mmarq-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(min(0px, calc(100cqi - 100% - 6px))); }
}
@media (prefers-reduced-motion: reduce) {
  .mmarq.is-overflow:hover > .mmarq-t,
  .mmarq-host:hover .mmarq.is-overflow > .mmarq-t,
  .jbi-row:hover .mmarq.is-overflow > .mmarq-t,
  .plan-itp-row:hover .mmarq.is-overflow > .mmarq-t,
  .plan-itp-seq-row:hover .mmarq.is-overflow > .mmarq-t,
  .plan-itp-ms li:hover .mmarq.is-overflow > .mmarq-t,
  .plan-itp-deps li:hover .mmarq.is-overflow > .mmarq-t,
  .plan-ov-itin-chip:hover .mmarq.is-overflow > .mmarq-t,
  .plan-ov-ms li:hover .mmarq.is-overflow > .mmarq-t,
  .plan-ov-cl-list li:hover .mmarq.is-overflow > .mmarq-t,
  .pcard2:hover .mmarq.is-overflow > .mmarq-t,
  .fz-card:hover .mmarq.is-overflow > .mmarq-t,
  .fz-mc:hover .mmarq.is-overflow > .mmarq-t,
  .fz-dock:hover .mmarq.is-overflow > .mmarq-t,
  .fz-player-hero:hover .mmarq.is-overflow > .mmarq-t,
  .inv-card:hover .mmarq.is-overflow > .mmarq-t,
  .inv-lcard:hover .mmarq.is-overflow > .mmarq-t,
  .vn-card:hover .mmarq.is-overflow > .mmarq-t,
  .mktp-card:hover .mmarq.is-overflow > .mmarq-t,
  .mkt-card:hover .mmarq.is-overflow > .mmarq-t,
  .ptpl-card:hover .mmarq.is-overflow > .mmarq-t,
  .mktp-ws:hover .mmarq.is-overflow > .mmarq-t,
  .kbn-card:hover .mmarq.is-overflow > .mmarq-t,
  .sb-card:hover .mmarq.is-overflow > .mmarq-t,
  .sb-tpl:hover .mmarq.is-overflow > .mmarq-t,
  .dvh-card:hover .mmarq.is-overflow > .mmarq-t,
  .dvh-recent:hover .mmarq.is-overflow > .mmarq-t,
  .dvh-tpl:hover .mmarq.is-overflow > .mmarq-t,
  .ds-toolcard:hover .mmarq.is-overflow > .mmarq-t,
  .pl-card:hover .mmarq.is-overflow > .mmarq-t,
  .tcal-ev:hover .mmarq.is-overflow > .mmarq-t,
  .menu-item:hover .mmarq.is-overflow > .mmarq-t,
  .menu .menu-label:hover .mmarq.is-overflow > .mmarq-t,
  .cv-ctx-row:hover .mmarq.is-overflow > .mmarq-t {
    animation: none;
    max-width: 100%;
    text-overflow: ellipsis;
  }
}

/* ────────────────────────────────────────────────────────────
   9. Forward / share preview strip  (.mx-fwd-*)
   The quoted "what you are about to send" line above the recipient
   picker. Two consumers that can never share a chunk: s-messages.jsx
   (lazy `messages` route chunk) forwards a message, and s-feed.jsx
   (shared bundle) opens the same strip from the Feed route's
   "Share in Messages" modal. Lived in stelaah-messages.css until that
   file was routed into the messages chunk, which left the Feed modal
   with no rules at all until someone happened to visit Messages.
   Critical, not route-scoped — same reasoning as s-person-picker.css
   and s-record-notes.css in build-app-runtime.sh's criticalStyleRels. */
.mx-fwd-preview { display: flex; flex-direction: column; gap: var(--space-tight); padding: var(--space-tight) 2px var(--space-item); border-radius: 0; background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); margin-bottom: 2px; }
.mx-fwd-pv-who { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.mx-fwd-pv-text { font-size: var(--t-label-size); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }


/* s-drag-discovery.css */
.drag-discovery-clone {
  position: fixed;
  z-index: 2147483100;
  margin: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, box-shadow;
}

.drag-discovery-destination {
  background-color: color-mix(in srgb, var(--accent, #8d7c64) 6%, transparent) !important;
  transition: background-color 420ms cubic-bezier(.22,1,.36,1);
}

.drag-discovery-label {
  position: fixed;
  z-index: 2147483101;
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  max-width: min(240px, calc(100vw - 24px));
  padding: var(--space-tight) var(--space-inline) var(--space-tight) var(--space-inline);
  border: 1px solid var(--border-subtle, rgba(32, 29, 24, .12));
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  color: var(--ink, #27231f);
  box-shadow: 0 14px 32px rgba(32, 29, 24, .12), 0 2px 8px rgba(32, 29, 24, .06);
  font: 500 12px/1.3 var(--font-sans, system-ui, sans-serif);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.97);
  transition: opacity 220ms cubic-bezier(.22,1,.36,1), transform 220ms cubic-bezier(.22,1,.36,1);
}

.drag-discovery-label.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.drag-discovery-label button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-3, #756f68);
  cursor: pointer;
  font: inherit;
  pointer-events: auto;
  transition: background 150ms ease, color 150ms ease;
}

.drag-discovery-label button:hover,
.drag-discovery-label button:focus-visible {
  background: var(--surface-2, #f5f3ef);
  color: var(--ink, #27231f);
  outline: none;
}

.drag-discovery-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .drag-discovery-clone { display: none !important; }
  .drag-discovery-destination { transition: none; }
}