/* 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 ---- */
  /* A press/pop feels intentional rather than instant. Matches the timing
     already hand-tuned across menus/popovers (.14s cubic-bezier(.4,0,.2,1))
     — this just names it so new components reach for the same feel instead
     of picking their own number. */
  --transition-micro: .1s cubic-bezier(.4,0,.2,1);

  /* ---- 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);
  --modal-scrim-bg: rgba(32, 33, 36, 0.24);
  --modal-scrim-blur: blur(6px);
  --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);
  --font-serif: var(--font-app);
  --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 .16s 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);

  --modal-scrim-bg: rgba(0, 0, 0, 0.55);
  --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 .16s 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 cubic-bezier(.4,0,.2,1);
}
.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 {
  grid-template-columns: minmax(0, 1fr) var(--tdw-pin-w, 440px);
}
.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 .15s 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 .12s 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=. */
body.has-smart-tips [data-tip]::after,
body.has-smart-tips [data-tip]::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 .14s ease;
}
.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 .2s ease, transform .2s 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 .12s 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 .14s cubic-bezier(.4,0,.2,1); 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 .12s 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); }
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 .14s ease, transform .14s 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 .14s 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 { width: 32px; height: 19px; border-radius: 999px; background: var(--bg-active); border: 1px solid var(--border); position: relative; flex-shrink: 0; transition: background .16s, border-color .16s; }
.rp-toggle.on { background: var(--accent); border-color: var(--accent); }
.rp-toggle-knob { position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s cubic-bezier(.3,.7,.4,1.3); }
.rp-toggle.on .rp-toggle-knob { transform: translateX(13px); }
.dark .rp-toggle.on { background: var(--lime); border-color: var(--lime); }
.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); }
.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 .12s 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 .12s 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 .12s 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 .12s 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-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; }

/* tasks first-entry onboarding */
.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); animation: caltip-in .2s ease; }
.tonb { width: min(840px, 96vw); background: var(--surface); border: 1px solid var(--modal-rim); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); padding: 36px var(--space-section) var(--space-block); text-align: center; animation: tonb-pop .26s cubic-bezier(.2,.8,.2,1); }
@keyframes tonb-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.tonb-spark { width: 46px; height: 46px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.tonb-title { font-size: var(--t-title-size); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.tonb-sub { font-size: var(--t-label-size); color: var(--ink-3); line-height: 1.55; margin: 8px auto 22px; max-width: 470px; }
.tonb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-item); }
@media (max-width: 900px){ .tonb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tonb-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-inline); padding: var(--space-group) var(--space-item); border: 1.5px solid var(--border); border-radius: var(--r-card); background: var(--surface); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.tonb-card:hover { border-color: var(--border-strong); transform: none; box-shadow: none; background: var(--bg-hover); }
.tonb-card.on { border-color: var(--accent); background: var(--accent-soft); }
.tonb-card-check { position: absolute; top: 10px; right: 10px; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--accent); display: grid; place-items: center; }
.tonb-mini { display: block; width: 100%; height: 46px; border-radius: var(--r-control); background: var(--bg-sunken); overflow: hidden; }
.tonb-card-l { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--t-label-size); font-weight: 650; color: var(--ink); }
.tonb-card-l svg, .tonb-card-l .icn { color: var(--accent); }
.tonb-card-d { font-size: var(--t-micro-size); color: var(--ink-3); line-height: 1.4; }
.tonb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-block); }
.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: 640px){ .tonb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tiny view-illustrations (onboarding) */
.tvm { display: flex; gap: var(--space-tight); width: 100%; height: 100%; align-items: stretch; justify-content: center; padding: var(--space-inline) var(--space-item); box-sizing: border-box; }
.tvm i { display: block; background: color-mix(in srgb, var(--accent) 24%, var(--bg-sunken)); border-radius: 4px; }
.tonb-card.on .tvm i { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.tvm-kanban { gap: var(--space-tight); }
.tvm-kanban i { flex: 1; }
.tvm-kanban i:nth-child(2){ background: color-mix(in srgb, var(--accent) 40%, var(--bg-sunken)); }
.tvm-list { flex-direction: column; gap: var(--space-tight); justify-content: center; }
.tvm-list i { height: 5px; border-radius: 3px; }
.tvm-list i:nth-child(odd){ width: 90%; }
.tvm-list i:nth-child(even){ width: 64%; background: color-mix(in srgb, var(--accent) 38%, var(--bg-sunken)); }
.tvm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-tight); align-content: center; }
.tvm-cal i { aspect-ratio: 1; border-radius: 2px; }
.tvm-cal i:nth-child(4), .tvm-cal i:nth-child(10){ background: color-mix(in srgb, var(--accent) 44%, var(--bg-sunken)); }
.tvm-timeline { flex-direction: column; gap: var(--space-tight); justify-content: center; align-items: flex-start; }
.tvm-timeline i { height: 6px; border-radius: 3px; }
.tvm-timeline i:nth-child(1){ width: 64%; margin-left: 8%; }
.tvm-timeline i:nth-child(2){ width: 46%; margin-left: 28%; background: color-mix(in srgb, var(--accent) 40%, var(--bg-sunken)); }
.tvm-timeline i:nth-child(3){ width: 38%; margin-left: 14%; }

/* 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 .14s ease, transform .14s 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 .14s 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 .14s ease, transform .14s 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 cubic-bezier(.2,.8,.2,1); }

/* 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). */
.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 -- */
.st-planes.v-flock{ width: 300px; height: 130px; }
.st-planes.v-flock .st-flyer{
  position: absolute; left: 0; top: 0; width: 13%; height: 13%;
  offset-rotate: auto; animation: st-flock-fly 3.2s ease-in-out infinite;
  will-change: offset-distance, opacity;
}
.st-planes.v-flock .st-flyer svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.st-planes.v-flock .st-flyer:nth-child(1){ width: 17%; height: 17%; offset-path: path('M -14 96 Q 100 24 320 52'); animation-delay: 0s; }
.st-planes.v-flock .st-flyer:nth-child(1) svg{ opacity: .9; }
.st-planes.v-flock .st-flyer:nth-child(2){ width: 10%; height: 10%; offset-path: path('M -14 40 Q 130 8 320 26'); animation-delay: -.7s; }
.st-planes.v-flock .st-flyer:nth-child(2) svg{ opacity: .5; }
.st-planes.v-flock .st-flyer:nth-child(3){ width: 15%; height: 15%; offset-path: path('M -14 116 Q 160 66 320 92'); animation-delay: -1.35s; }
.st-planes.v-flock .st-flyer:nth-child(3) svg{ opacity: .8; }
.st-planes.v-flock .st-flyer:nth-child(4){ width: 9%; height: 9%; offset-path: path('M -14 28 Q 150 72 320 60'); animation-delay: -1.98s; }
.st-planes.v-flock .st-flyer:nth-child(4) svg{ opacity: .42; }
.st-planes.v-flock .st-flyer:nth-child(5){ width: 12%; height: 12%; offset-path: path('M -14 70 Q 180 34 320 40'); animation-delay: -2.62s; }
.st-planes.v-flock .st-flyer:nth-child(5) svg{ opacity: .68; }
@keyframes st-flock-fly{
  0%{ offset-distance: 0%; opacity: 0; }
  10%{ opacity: 1; }
  88%{ opacity: 1; }
  100%{ offset-distance: 100%; opacity: 0; }
}

/* -- variant: breeze (5c) — calm, level & professional; every other in-app wait --
   Planes hold a fixed heading (offset-rotate: 0deg) — never tilt or spin, even at
   path end. Paths are a single gentle arc each (no S-curve reversal), so there is
   nothing for a tangent-following rotation to have caught anyway; this is belt +
   suspenders for a clean, corporate glide. */
.st-planes.v-breeze{ width: 180px; height: 110px; }
.st-planes.v-breeze .st-wind{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-planes.v-breeze .st-wind line{
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 14 34; opacity: .15; animation: st-wind-drift 3.6s linear infinite;
}
.st-planes.v-breeze .st-wind line:nth-child(2){ animation-delay: -1.1s; opacity: .11; }
.st-planes.v-breeze .st-wind line:nth-child(3){ animation-delay: -2.3s; opacity: .13; }
.st-planes.v-breeze .st-sky{ position: absolute; inset: 0; }
.st-planes.v-breeze .st-flyer{
  position: absolute; left: 0; top: 0; width: 16%; height: 16%;
  offset-rotate: 0deg; animation: st-flock-fly 3.6s ease-in-out infinite;
  will-change: offset-distance, opacity;
}
.st-planes.v-breeze .st-flyer svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.st-planes.v-breeze .st-flyer:nth-child(1){ width: 20%; height: 20%; offset-path: path('M -12 62 Q 100 48 212 56'); animation-delay: 0s; }
.st-planes.v-breeze .st-flyer:nth-child(1) svg{ opacity: .9; }
.st-planes.v-breeze .st-flyer:nth-child(2){ width: 13%; height: 13%; offset-path: path('M -12 28 Q 100 20 212 26'); animation-delay: -1.1s; }
.st-planes.v-breeze .st-flyer:nth-child(2) svg{ opacity: .5; }
.st-planes.v-breeze .st-flyer:nth-child(3){ width: 16%; height: 16%; offset-path: path('M -12 86 Q 100 76 212 82'); animation-delay: -2.16s; }
.st-planes.v-breeze .st-flyer:nth-child(3) svg{ opacity: .7; }
@keyframes st-wind-drift{ to{ stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce){
  .st-planes.v-flock .st-flyer, .st-planes.v-breeze .st-flyer, .st-planes.v-breeze .st-wind line{ animation: none; }
  .st-planes.v-flock .st-flyer, .st-planes.v-breeze .st-flyer{
    offset-path: none; position: absolute; left: 40%; top: 35%; width: 20%; height: 20%;
  }
  .st-planes.v-flock .st-flyer svg, .st-planes.v-breeze .st-flyer svg{ opacity: 1; }
  .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 line{ 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 .14s ease, color .14s 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 .14s 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 .14s ease, color .14s 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 .14s 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 .14s cubic-bezier(.4,0,.2,1); }
.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); border-top: 1px solid var(--border-subtle); }
.navset-choice {
  display: flex; align-items: center; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border: none; border-bottom: 1px solid var(--border-subtle);
  background: transparent; text-align: left; cursor: pointer; color: var(--ink);
  transition: color .14s 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); border-top: 1px solid var(--border-subtle); }
.navset-row {
  display: flex; align-items: flex-start; gap: var(--space-item); width: 100%;
  padding: var(--space-item) 0; border: none; border-bottom: 1px solid var(--border-subtle);
  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; border-bottom: 1px solid var(--border-subtle); }
.set-app-row:last-child { border-bottom: none; }
.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 .14s ease, transform .14s 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 .16s cubic-bezier(.4,0,.2,1);
}
/* 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 .15s 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 .15s 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 .14s cubic-bezier(.4,0,.2,1); }
.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 .16s ease, color .16s ease, border-color .16s 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 cubic-bezier(.4,0,.2,1), opacity .18s ease, transform .24s cubic-bezier(.4,0,.2,1), padding .24s cubic-bezier(.4,0,.2,1); }
.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 .2s ease;
  -webkit-backdrop-filter: var(--modal-scrim-blur);
  backdrop-filter: var(--modal-scrim-blur);
}
.scrim.closing { animation: scrimOut .18s 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 cubic-bezier(.32,.72,0,1);
}
.drawer.closing { animation: slideOut .22s cubic-bezier(.4,0,.2,1) 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 .12s ease, color .12s 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 .24s cubic-bezier(.32,.72,0,1);
}
.drawer.full.closing { animation: drawerPopOut .2s 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 .2s 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 .24s cubic-bezier(.22,1,.36,1) 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 .14s cubic-bezier(.4,0,.2,1);
}
.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 — single shared control (43 call sites app-wide: Settings,
   Automations, Billing, Contracts, Budgets, …). One upgrade here propagates
   everywhere. Same footprint as before (38x22 / sm 30x17) so no layout call
   site shifts; only the motion + depth quality changed to a premium spring feel. */
.switch { width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 17%, transparent); position: relative; transition: background .28s cubic-bezier(.4,0,.2,1); flex-shrink: 0; border: none; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .32s cubic-bezier(.34,1.42,.5,1); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 3px 7px rgba(0,0,0,.12); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(16px); }
.switch:active::after { width: 20px; }
.switch.on:active::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition-duration: .01ms; } }
/* dark mode: --accent is near-white here, so the light .switch.on/::after pairing
   (white knob on a white track) goes nearly invisible — give dark its own
   off-track contrast and reuse --lime (the app's existing dark-mode "on" color,
   see .fpost-action.on / .fcmt-act.on) for the on-state track instead of --accent. */
.dark .switch { background: rgba(255, 255, 255, 0.16); }
.dark .switch.on { background: var(--lime); }
.dark .switch::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 3px 7px rgba(0,0,0,.3); }

*: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 .14s cubic-bezier(.4,0,.2,1); 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 .14s cubic-bezier(.4,0,.2,1); 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 .14s ease, color .14s ease, transform .16s cubic-bezier(.32,.72,0,1);
}
.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 .22s ease, right .22s ease, width .22s ease, left .22s 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 .26s cubic-bezier(.2,.8,.2,1);
}
.toast.has-foot { padding-bottom: var(--space-item); }
.toast.leaving { animation: toast-out .2s 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 .2s 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 cubic-bezier(.2,1.3,.4,1);
}
@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. */
@keyframes task-check-pop { 0% { transform: scale(.5); opacity: 0; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.task-check-pop { animation: task-check-pop .26s cubic-bezier(.2,1.3,.4,1); }
/* 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 .18s 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 .2s ease;
}
.toast-micro > svg,
.toast-micro > i { flex-shrink: 0; color: var(--ink-3); }
.toast-micro.leaving { animation: toast-out .2s 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 cubic-bezier(.3,0,.2,1); }
@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 .26s cubic-bezier(.2,.8,.2,1);
}
.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 .26s cubic-bezier(.2,.8,.2,1), 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 cubic-bezier(.2,.8,.2,1) 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 .14s ease, transform .14s 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 .2s 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 cubic-bezier(.16,.84,.44,1) 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; }
.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 .12s ease, color .12s 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 .14s 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 .12s ease, border-color .12s 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 .16s 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 .16s ease;
}
.create-connected-summary {
  flex-basis: 100%; width: 100%; order: -1;
  margin: 0 0 var(--space-tight); animation: create-more-in .16s 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 .12s 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 .18s 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 .2s 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 .12s ease, color .12s ease, border-color .12s 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 .14s ease, transform .14s 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 .12s ease, color .12s ease, border-color .12s 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 .14s ease, transform .14s 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 .14s ease, transform .14s 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 .14s 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 .12s ease, background .12s 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 .15s 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 .14s ease, background .12s ease, box-shadow .14s ease, padding .16s 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 .18s ease-out; }
@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; }
.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-bottom: 1px solid var(--border-subtle); cursor: pointer; position: relative; }
.trow:last-child { border-bottom: none; }
.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 .22s 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); }
.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 — borderless hairline strip */
.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 + .tmetric { border-left: 1px solid var(--border-subtle); }
.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 .2s cubic-bezier(.32,.72,0,1); }
@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 .28s cubic-bezier(.2,.8,.2,1) 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 .26s cubic-bezier(.2,.8,.2,1) 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 .14s ease, transform .14s 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 .14s ease, transform .14s 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 cubic-bezier(.22,.61,.36,1); }
/* 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 .12s ease, color .12s 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 .12s 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 .12s ease, border-color .12s ease, opacity .12s 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 .16s ease;
}
.dw-fold-tg:hover { color: var(--ink); }
.dw-fold-chev { flex-shrink: 0; color: var(--ink-4); transition: transform .18s 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 .16s ease, background .12s ease, color .12s 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 .18s ease-out; }
.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 .14s ease, color .14s ease, background .14s 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 .14s ease, transform .14s 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 .16s 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 .14s ease, transform .14s 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 .14s cubic-bezier(.2,.8,.2,1); }
.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 .14s 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 .25s 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 .14s ease, color .14s 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 .15s 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 .18s cubic-bezier(.4,0,.2,1); }
.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 .16s ease-out, color .16s ease-out, border-color .16s ease-out; }
.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 { width: 30px; height: 17px; border-radius: 999px; background: var(--bg-active); position: relative; transition: background .16s; }
.act-unread-toggle.on .act-toggle-track { background: var(--accent); }
.act-toggle-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .16s; }
.act-unread-toggle.on .act-toggle-knob { transform: translateX(13px); }
.dark .act-unread-toggle.on .act-toggle-track { background: var(--lime); }

.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 .16s ease, transform .16s 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 .14s ease, transform .14s 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 .14s 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 .2s ease-out backwards; animation-delay: calc(var(--ai, 0) * 36ms); }
  .act-list .act-item .act-node { animation: actNodeIn .2s ease-out 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 .18s ease-out; }
.act-main:hover { background: var(--bg-hover); transform: none; }
.act-node { transition: color .18s ease-out; }
.act-item:hover .act-node { transform: none; box-shadow: none; }
.act-hover-acts button { transition: color .16s ease-out, background .16s ease-out; 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 .18s ease-out, transform .18s ease-out, 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 .18s ease-out, transform .18s ease-out; }
.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 .2s ease-out, padding .2s ease-out, 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 .2s ease-out, padding .2s ease-out; }
.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 .18s ease-out; }
.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 .15s ease-out; }
.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 .14s ease, transform .14s 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 .16s ease-out, transform .16s ease-out; }
.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 .12s 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 .1s 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 .12s ease, color .12s 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 .12s ease, color .12s 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 cubic-bezier(.2,.7,.2,1); }
.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 .12s 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 cubic-bezier(.2,.7,.2,1); }
.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 .1s ease, box-shadow .12s 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 { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-active); position: relative; flex-shrink: 0; transition: background .14s; }
.cal-allday-toggle.on .cal-allday-knob { background: var(--accent); }
.cal-allday-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s; }
.cal-allday-toggle.on .cal-allday-knob::after { transform: translateX(14px); }
.dark .cal-allday-toggle.on .cal-allday-knob { background: var(--lime); }

/* 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); }
.modal.cal-event-modal .cal-allday-knob { width: 30px; height: 18px; }
.modal.cal-event-modal .cal-allday-knob::after { width: 14px; height: 14px; }
.modal.cal-event-modal .cal-allday-toggle.on .cal-allday-knob::after { transform: translateX(12px); }
.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 .14s cubic-bezier(.2,.8,.2,1), 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 .16s cubic-bezier(.2,1.1,.4,1);
}
@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 .18s cubic-bezier(.2,1.1,.4,1); }
.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 .12s 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 .12s 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 cubic-bezier(.2,.8,.2,1); }
.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 .15s cubic-bezier(.2,.8,.2,1), 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 .26s cubic-bezier(.22,1,.36,1) 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 .16s ease, background-position .55s cubic-bezier(.2,.75,.2,1),
    box-shadow .18s ease, color .16s ease, filter .18s 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 cubic-bezier(.22,.82,.2,1) backwards;
  }
  .mention.is-me {
    animation: mention-settle .58s cubic-bezier(.22,.82,.2,1) 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 .12s ease, box-shadow .12s ease, color .12s 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 .18s ease, transform .18s 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 cubic-bezier(.22,.82,.2,1) 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 cubic-bezier(.22,.82,.2,1) 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 cubic-bezier(.22,.82,.2,1) backwards;
  }
  .mention-ta-back .mention.is-me.mention-just {
    animation: mention-settle .5s cubic-bezier(.22,.82,.2,1) backwards,
               mention-you-glow 1.5s ease-out .08s 1;
  }
  .mention-ta-back .mention.is-aria.mention-just {
    animation: mention-settle .5s cubic-bezier(.22,.82,.2,1) 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 cubic-bezier(.22, 1, .36, 1) 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 .12s 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 .13s ease, transform .13s 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 .12s ease, border-color .12s ease, color .12s 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 .12s cubic-bezier(.4,0,.2,1); }
.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 .14s cubic-bezier(.4,0,.2,1); 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 .12s 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 .14s ease, transform .14s 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 .12s 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 cubic-bezier(.22,.61,.36,1); }
.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 .15s 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 .16s 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 .22s cubic-bezier(.22,.61,.36,1); }
.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 18px; }
.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 .15s 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 .2s cubic-bezier(.22,.61,.36,1); }
@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 .12s ease, color .12s 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 .18s ease-out, box-shadow .18s ease-out;
}
.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 .2s cubic-bezier(.2,.8,.2,1);
}
.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 .12s ease-out;
}
.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 .12s ease-out, color .12s ease-out;
}
.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 .16s ease-out, background .16s ease-out; 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 .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.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 .12s ease-out, color .12s ease-out;
}
.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 .14s ease-out, transform .14s ease-out, background .14s ease-out;
}
.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; }
.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 .16s cubic-bezier(.2,.8,.2,1);
}
.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 .14s cubic-bezier(.2,.8,.2,1);
}
.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 .12s ease-out; }
.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 .32s cubic-bezier(.22,.61,.36,1); overflow: hidden; }
.tprop.out { animation: tprop-fall .18s 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 .2s 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 cubic-bezier(.2,.8,.2,1); }
.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 .16s 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 .14s 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 .18s ease, border-color .18s 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 .15s ease, border-color .15s ease, color .15s 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 .15s ease, color .15s ease, transform .12s 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 .15s ease, transform .12s 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 .14s ease, background .14s ease, color .14s 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 .15s ease, color .15s ease, box-shadow .15s ease; }
.fcomp-type .icn { color: var(--ink-4); transition: color .15s 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 .14s ease, color .14s 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 .14s ease, color .14s 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 .14s ease, color .14s ease, opacity .14s 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 .14s ease, transform .14s 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 .24s ease both; }
.fcomposer.open .fcomp-ta { animation: fcompIn .24s ease .04s both; }
.fcomposer.open .fcomp-actions { animation: fcompIn .24s 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 .15s ease, border-color .15s 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 .14s ease, color .14s ease, opacity .14s 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 .2s 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 .16s cubic-bezier(.34,1.56,.64,1); }
@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: 9px 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 cubic-bezier(.2,.8,.2,1); }
.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 (borderless, hairline-divided) */
.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 + .pmetric { border-left: 1px solid var(--border-subtle); }
.pmetric:first-child { padding-left: 2px; }
/* The strip reflows to 2 columns at 760 and 1 at 520, but the vertical hairline
   that separates cells IN A ROW was never reset for the wrapped states, so every
   cell after the first kept a 1px stub on its left edge. Stacked, that reads as
   a short coloured rail beside each stat, which is the left-accent-bar pattern
   the design rules ban outright. Found at 375px during the P4 walkthrough.
   Fixed on the shared component rather than overridden per page, so every
   .pmetrics consumer gets it. Sibling strips (.tmetrics, .mstats, .plan-stats,
   .rpt-kpirow, .mo-stats, .tm-stats, .emp-stats, .dos-kpis) reflow through the
   same media blocks and very likely have the same stub; each has its own
   separator rule and was not audited here.

   BREAKPOINTS 760/520 ARE DELIBERATE and are flagged by verify-spacing as
   off-ladder (the ladder is 1480/1180/900/640). Do NOT "correct" them: these two
   values are where .pmetrics ACTUALLY changes column count today (4→2 at 760,
   2→1 at 520, both above). A separator reset has to fire at the same width as
   the reflow it compensates for, so moving these to 640 would leave the stub
   visible from 641px to 760px, which is the exact bug this fixes. Putting the
   whole stat-strip family onto the ladder is the real fix and is a separate
   piece of work across nine components. */
@media (max-width: 760px){
  /* two columns: the first cell of each ROW starts the row, so it gets no rule */
  .pmetric:nth-child(2n+1) { border-left: none; padding-left: 2px; }
}
@media (max-width: 520px){
  /* one column: a vertical separator has nothing left to separate */
  .pmetric + .pmetric { border-left: none; }
  .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 .1s ease, background .12s 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);
}
.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 .14s 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); }
.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; }
.switch.sm { width: 30px; height: 17px; }
.switch.sm::after { width: 13px; height: 13px; }
.switch.sm.on::after { transform: translateX(13px); }
.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; }
.mstat + .mstat { border-left: 1px solid var(--border-subtle); }
.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 .2s ease, transform .2s 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 .14s ease, color .14s 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 .14s ease, color .14s ease, background .14s 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 14px; }
.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; }
.md-ag-row { display: flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 2px; border: none; border-bottom: 1px solid var(--border-subtle); 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-bottom: 1px dashed var(--border-subtle); 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); }
.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; }
.prow { padding: var(--space-item) var(--space-item); border-top: 1px solid var(--border-subtle); 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 .18s ease-out;
}
/* 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 hairline sections instead of bordered cards */
.rail-flush { gap: 0; }
.rail-flush .rail-card { background: none; border: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.rail-flush .rail-card:last-child { border-bottom: none; }
.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 .15s ease, box-shadow .15s 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 .14s ease, opacity .14s 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 .2s 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 cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.dash-cover-slider::-moz-range-thumb { transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s 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 .22s ease-out; }
.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 .12s ease, color .12s ease, border-color .12s 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; }
@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); }

/* ── 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 .18s 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 cubic-bezier(.4,0,.1,1); }
.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); }

/* ── 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, .culture-section-label { 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; }
.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; } }

/* ── 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 .2s ease, border-color .2s 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 .15s ease, transform .1s 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); }
.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 .15s ease, background .15s ease, color .15s 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 .12s 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 .12s 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 .12s 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 .14s ease, border-color .14s ease, background .14s 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 .16s ease; }
@keyframes dwTagIn { from { opacity: 0; transform: translateY(-3px) scale(.9); } to { opacity: 1; transform: none; } }
.dash-grid-dragging .dw { transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, transform .15s 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 .15s ease, border-color .15s ease, background .15s ease, opacity .15s 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 .12s ease, background .12s ease, transform .1s 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 .14s 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 .14s ease, transform .14s 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 .12s ease, color .12s 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 .14s 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); }
.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); border-top: 1px dashed var(--border-subtle); }
.kbn-subs { margin-top: var(--space-inline); padding-top: var(--space-inline); border-top: 1px dashed var(--border-subtle); }
.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); }

/* Linear-style list checkbox — rounded, dashed when open */
.tcheck.tcheck-todo { border-radius: 50%; border: 1.6px dashed var(--border-strong); background: transparent; }
.tcheck.tcheck-todo:hover { border-color: var(--accent); }
.tcheck.tcheck-todo.on { border-style: solid; background: var(--accent); border-color: var(--accent); }

/* 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 .14s cubic-bezier(.4,0,.2,1); }
.pp-pop-fixed {
  position: fixed; z-index: 1199;
  top: auto; left: auto;
  animation: pop-menu .14s cubic-bezier(.4,0,.2,1);
}
.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-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 .14s ease, background .12s ease, opacity .14s 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 .12s 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 .14s ease, transform .14s ease, opacity .14s ease, border-color .14s ease; }
.pl-card.dragging { opacity: .4; transform: scale(.97); }
.pl-col { transition: background .15s 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 .12s ease, color .12s 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 .14s ease, transform .14s 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 .15s ease, border-color .15s 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); }
.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 2px; 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: 28px; background: transparent; border: none; border-top: 1px solid var(--border-subtle); border-radius: 0; padding: 20px 0 var(--space-inline); }
.nc-muted-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-item); }
.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) 2px; 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 .11s ease-out; }
.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 .18s ease-out 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 .2s ease-out 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 .14s ease, transform .14s 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-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 .18s ease-out; 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); }
/* onboarding mini for the Table view */
.tvm-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-tight); padding: var(--space-inline) var(--space-item); }
.tvm-table i { border-radius: 2px; background: var(--bg-sunken); }
.tvm-table i:nth-child(-n+3) { background: color-mix(in srgb, var(--accent) 30%, var(--bg-sunken)); }

/* ── 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 .14s cubic-bezier(.4,0,.2,1); }
.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 .14s ease, transform .14s 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 cubic-bezier(.22,.61,.36,1) backwards;
}
.cbrief.out { animation: cbrief-fall .18s 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 ──────────────────────────────────────────────────────────── */
  --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 */
}


/* ═══ 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);
}


/* ═══ 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 .14s ease-out, border-color .14s ease-out, color .14s ease-out;
}
.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 .18s cubic-bezier(.22,1,.36,1) 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); }
}


/* 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                                       */
  --fkit-sw-w:      36px;   /* switch track width                              */
  --fkit-sw-h:      20px;   /* switch track height                             */
  --fkit-knob:      16px;   /* switch knob                                     */
  --fkit-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 .14s, box-shadow .14s;
}
.fkit-knob {
  width: var(--fkit-knob);
  height: var(--fkit-knob);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(var(--fkit-sw-inset));
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.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-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);
  --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);
  --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);
}
/* The section flyout is PORTALED to document.body, so it inherits none of the
   rail's tokens. SbAppearance mirrors --sb-bg + data-sb-* onto it. */
.sb-flyout[data-sb-surface] { --bg-sidebar: var(--sb-bg); }
.sb-flyout[data-sb-surface][data-sb-tone="dark"] {
  --ink: rgba(255,255,255,.82); --ink-4: rgba(255,255,255,.28);
  --bg-hover: rgba(255,255,255,.055); --bg-active: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.094); --border-subtle: rgba(255,255,255,.055);
  --sb-ink: #fff;
  --sb-ink-label: rgba(255,255,255,.70);
  --sb-ink-icon:  rgba(255,255,255,.56);
  --sb-ink-quiet: rgba(255,255,255,.46);
}
.sb-flyout[data-sb-surface][data-sb-tone="light"] {
  --ink: #1a1a1a;
  --bg-hover: color-mix(in srgb, #1a1a1a 5%, transparent);
  --bg-active: color-mix(in srgb, #1a1a1a 9%, transparent);
  --sb-ink: #1a1a1a;
  --sb-ink-label: color-mix(in srgb, #1a1a1a 78%, var(--sb-bg));
  --sb-ink-icon:  color-mix(in srgb, #1a1a1a 64%, var(--sb-bg));
  --sb-ink-quiet: color-mix(in srgb, #1a1a1a 60%, var(--sb-bg));
}

/* ── 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.child { padding-left: 28px; }
.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-size: 9.5px; 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: 13px; text-align: right; font-size: 9.5px; 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: 16px; padding: 0 var(--space-tight); display: grid; place-items: center; border-radius: var(--r-control); background: var(--bg-sunken); color: var(--ink-2); font-size: 9px; 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-inline);
  border-top: 1px solid var(--border-subtle);
}
.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); }
.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 */
.sidebar.sb-density-compact .sb-item { height: 30px; font-size: var(--t-label-size); }
.sidebar.sb-density-compact .sb-secwrap { margin-top: var(--space-tight); }
.sidebar.sb-density-compact .sb-secwrap + .sb-secwrap { margin-top: var(--space-tight); }
.sidebar.sb-density-comfortable .sb-item { height: 34px; }
.sidebar.sb-density-comfortable .sb-secwrap + .sb-secwrap { margin-top: var(--space-inline); }

/* ── 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 {
  position: relative; width: 34px; height: 20px; border: none; border-radius: 999px;
  background: var(--border-strong, var(--border)); cursor: pointer; flex-shrink: 0;
  transition: background .18s ease; padding: 0;
}
.sbx-tog.on { background: var(--accent); }
.sbx-tog:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.sbx-tog-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.sbx-tog.on .sbx-tog-knob { transform: translateX(14px); }
.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-tog, .sbx-tog-knob, .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 ────────────────────────────────────────────── */
.sba-tabs { display: flex; gap: 2px; margin-bottom: var(--space-block); border-bottom: 1px solid var(--border-subtle); }
.sba-t {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  padding: var(--space-inline) var(--space-item); border: none; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: var(--t-label-size); font-weight: 600;
  transition: color .14s ease-out, border-color .14s ease-out;
}
.sba-t:hover { color: var(--ink); }
.sba-t.on { color: var(--ink); border-bottom-color: var(--ink); }
.sba-sec { display: flex; flex-direction: column; gap: var(--space-item); }
.sba-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-item); }
.sba-sw {
  position: relative; aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  transition: transform .14s ease-out;
}
.sba-sw:hover { transform: scale(1.12); }
.sba-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sba-sw-nm {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 1px; z-index: 5;
  padding: 4px 8px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface);
  font-size: var(--t-micro-size); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease-out;
}
.sba-sw-nm i { font-style: normal; font-weight: 400; opacity: .72; }
.sba-sw:hover .sba-sw-nm { opacity: 1; }
.sba-meta { display: flex; align-items: center; gap: var(--space-item); color: var(--ink-3); font-size: var(--t-caption-size); }
.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-adv { color: var(--ink-3); font-size: var(--t-caption-size); }
.sba-adv summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.sba-note { margin: var(--space-tight) 0 0; color: var(--ink-3); font-size: var(--t-caption-size); line-height: 1.55; }
.sba-warn { margin: var(--space-inline) 0 0; display: flex; align-items: flex-start; gap: var(--space-tight); color: var(--st-blocked); font-size: var(--t-caption-size); line-height: 1.5; }
.sba-hexrow { display: flex; gap: var(--space-inline); margin-top: var(--space-inline); }
.sba-hex { flex: 1; min-width: 0; height: 34px; padding: 0 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); }
.sba-name { max-width: 220px; margin-top: var(--space-tight); }
.sba-cards { display: flex; gap: var(--space-item); }
.sba-card { flex: 1; padding: var(--space-item); border: 2px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font: inherit; text-align: center; transition: border-color .14s ease-out; }
.sba-card.on { border-color: var(--ink); }
.sba-card-img { display: flex; gap: 4px; height: 64px; padding: var(--space-tight); margin-bottom: var(--space-inline); border-radius: var(--r-control); background: var(--bg-sunken, var(--bg-active)); }
.sba-card-img i { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r-control); }
.sba-card-img em { flex: 1; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-control); }
.sba-card-cap { color: var(--ink-3); font-size: var(--t-caption-size); font-weight: 600; }
.sba-card.on .sba-card-cap { color: var(--ink); }
.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-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); }
@media (max-width: 640px) {
  .sba-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .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 paints the live --bg-sidebar, so it previews correctly in
   BOTH themes — the one thing a fixed hex swatch cannot do. The slash marks it
   as "no colour chosen" rather than a colour in its own right. */
.sba-sw-default {
  background: var(--bg-sidebar);
  position: relative; overflow: hidden;
}
.sba-sw-default::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), color-mix(in srgb, var(--ink) 30%, transparent) calc(50% - 1px), color-mix(in srgb, var(--ink) 30%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ── v2 spacing pass ────────────────────────────────────────────────────────
   claude/specs/sidebar-layout-v2.md §5. The complaint that started this: hover
   pills ran edge to edge and read cramped. The pill was never the problem —
   nothing had air around it.

   EVERY rule here is scoped to `.sidebar`. `.sb-item` and `.sb-sec` are shared
   with the Settings tab strip, the shell nav sheet and the portal (s-misc.jsx,
   s-portal.jsx, s-llm-kit.jsx), so an unscoped change would resize all three.

   Numbers, not vibes:
     scroll gutter     --space-item (12px)   the pill never touches the edge
     row height        34/30 comfortable/compact
     icon -> label     --space-inline (8px)
     row radius        9px
     group gap         --space-group (16px) + hairline
     group label       12px, --sb-ink-quiet, sentence case                     */
.sidebar .sb-body { padding: var(--space-tight) var(--space-item) 0; gap: 0; }

.sidebar .sb-item { height: 34px; gap: var(--space-inline); padding: 0 var(--space-item); border-radius: 9px; }
/* Density wins over the baseline above — `.sidebar.sb-density-*` is (0,3,0) to
   its (0,2,0) — so both tiers move together, or the setting silently pins every
   rail to whatever density resolved and the spacing pass does nothing. */
.sidebar .sb-item-ico { width: 17px; height: 17px; }

/* One hairline between groups, and real space above it. The first group needs
   neither — it sits directly under the workspace switcher's own divider. */
.sidebar .sb-secwrap { margin-top: 0; padding-top: var(--space-group); border-top: 1px solid var(--border-subtle); }
.sidebar .sb-secwrap + .sb-secwrap { margin-top: 0; }
.sidebar .sb-body > .sb-secwrap:first-of-type { padding-top: 4px; border-top: 0; }
.sidebar.collapsed .sb-secwrap { padding-top: var(--space-inline); }

/* Sentence case at 12px. The eyebrow-header ban stands; caps are what made the
   reference layouts read heavy. */
.sidebar .sb-sec { height: 26px; margin: 0 0 var(--space-tight); padding: 0 var(--space-inline); border-radius: 8px; gap: var(--space-inline); }
.sidebar .sb-sec-name { font-size: 12px; font-weight: 600; letter-spacing: -.005em; }

.sidebar .sb-secitems-inner { gap: 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-panel { width: 15px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); flex-shrink: 0; }
.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); }

/* ── 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);
  border: 0; border-radius: 24px;
  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;
}
/* `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="dock"] .sidebar::before,
[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);
}
[data-sb-layout="dock"] .sidebar.sb-edit::before,
[data-sb-layout="focus"] .sidebar.sb-edit::before { display: none; }

/* 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;
}

[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; }

/* 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="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: var(--space-item); padding-left: 0;
  border: 0;
}
[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; }

/* `.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;
  background: var(--bg-sidebar); color: var(--ink-3);
  box-shadow: 0 -4px 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-bottom .14s ease-out;
}
.sb-chip:hover { color: var(--ink); padding-bottom: var(--space-inline); }
.sb-chip-l { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .01em; }
@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 */
[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); border: 0;
}

/* 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(6px) scale(1.22); }
[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(-6px) scale(1.22); }
[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(2px) scale(1.08); }
[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(-2px) scale(1.08); }

/* 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;
  transition: transform .32s 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(-6px) scale(1.22);
}
/* 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(-2px) scale(1.08);
}

/* 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); }

@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; }
}

/* ── 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); }


/* 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 14px; 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 372px 1fr; height:100%; min-height:0; background:var(--bg); }
.ib-mobile-acct { display:none; }
@media (max-width:1200px){ .ib { grid-template-columns:212px 320px 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:flex; align-items:center; gap:var(--space-inline); }
  .ib-list-top .ib-search { flex:1; }
  .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-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:600px; }
.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; }
.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-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-serif,Georgia,serif); font-size:var(--t-title-size); font-weight:540; 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-control); font-size:var(--t-micro-size); }
.ib--compact .ib-av-check .ib-av-box { border-radius:var(--r-control); }
.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-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 { width:38px; height:38px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:var(--t-label-size); font-weight:700; }
/* 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; border-radius:var(--r-control); 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-card); 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-subj { font-size:var(--t-caption-size); color:var(--ink-2); margin-top:2px; font-weight:550; }
.ib-item.unread .ib-item-subj { color:var(--ink); }
.ib-item-snip { font-size:var(--t-caption-size); color:var(--ink-4); margin-top:1px; }
/* 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 .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-card); background:var(--surface); box-shadow:none; overflow:hidden; }
.ib-reply-to { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-item) var(--space-item); border-bottom:1px solid var(--border-subtle); font-size:var(--t-caption-size); color:var(--ink-3); }
.ib-reply-to svg { color:var(--accent); }
.ib-reply-chip { display:inline-flex; align-items:center; gap:var(--space-tight); background:var(--bg-sunken); border-radius:999px; padding:var(--space-tight) var(--space-tight) var(--space-tight) var(--space-item); font-weight:600; color:var(--ink); }
.ib-reply-chip button { border:none; background:none; color:var(--ink-4); cursor:pointer; display:grid; place-items:center; }
.ib-reply-ccinput { flex:1; border:none; background:none; font:inherit; font-size:var(--t-caption-size); color:var(--ink); outline:none; }
.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:var(--space-item); } .ib-reply-foot, .ib-cm-foot { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) var(--space-item); 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:flex-end; justify-content:center; padding:0 0 0; animation:dqFade .16s ease; }
.ib-cm { width:720px; max-width:94vw; max-height:88vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--modal-rim); border-radius:var(--modal-radius) var(--modal-radius) 0 0; box-shadow:var(--modal-shadow); animation:ibUp .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes ibUp { from { transform:translateY(30px); opacity:.6; } to { transform:none; opacity:1; } }
.ib-cm-hd { display:flex; align-items:center; justify-content:space-between; padding:var(--space-group) 20px; border-bottom:1px solid var(--border-subtle); font-family:var(--font-serif,Georgia,serif); font-size:var(--t-heading-size); font-weight:540; letter-spacing:-.01em; color:var(--ink); }
.ib-cm-x { width:30px; height:30px; 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, color .12s; }
.ib-cm-x:hover { background:var(--bg-hover); color:var(--accent); }
.ib-cm-fields { padding:var(--space-tight) 20px; }
.ib-cm-foot { padding:var(--space-item) 20px; }
.ib-cm-row { display:flex; align-items:center; gap:var(--space-inline); padding:var(--space-inline) 0; border-bottom:1px solid var(--border-subtle); }
.ib-cm-row > span:first-child { font-size:var(--t-micro-size); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); width:46px; flex-shrink:0; }
.ib-cm-row input { flex:1; border:none; background:none; font:inherit; font-size:var(--t-label-size); color:var(--ink); outline:none; }
.ib-cm-body { flex:1; min-height:0; overflow-y:auto; padding:var(--space-inline) 20px; }
.ib-cm-atts { display:flex; flex-wrap:wrap; gap:var(--space-inline); padding:var(--space-inline) 20px; }
.ib-cm-attchip { display:inline-flex; align-items:center; gap:var(--space-tight); font-size:var(--t-micro-size); font-weight:550; color:var(--ink-2); background:var(--bg-sunken); border-radius:var(--r-control); padding:var(--space-tight) var(--space-tight) var(--space-tight) var(--space-inline); }
.ib-cm-attchip button { border:none; background:none; color:var(--ink-4); cursor:pointer; display:grid; place-items:center; }

/* send split */
.ib-send-split { display:flex; align-items:stretch; position:relative; }
.ib-send-btn { 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,#fff); background:var(--accent); border:none; border-radius:var(--r-control) 0 0 var(--r-control); padding:var(--space-inline) var(--space-group); cursor:pointer; }
.ib-send-btn:hover { filter:brightness(1.05); }
.ib-send-cal { width:38px; border:none; border-left:1px solid color-mix(in srgb, #000 12%, transparent); background:var(--accent); color:var(--accent-fg,#fff); 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); }

/* ── 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 { 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 18px; 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:3px; 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)}
.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}
.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}
}


/* 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; }
.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-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 — hairline stat strip + flush sections */
.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 + .mo-stat { border-left: 1px solid var(--border-subtle); }
.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-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section); align-items: start; }
.mo-card { background: none; border: none; border-radius: 0; box-shadow: none; padding: 20px 0 var(--space-inline); border-top: 1px solid var(--border-subtle); }
.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: 0; border-top: 1px solid var(--border-subtle); padding: var(--space-inline) 2px; }
.mo-od-row:first-child { border-top: none; }
.mo-od-row:hover { background: var(--bg-hover); }
.mo-od-remind { background: none; border: 1px solid var(--border-subtle); }

/* 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: 20px 2px var(--space-group);
  border-top: 1px solid var(--border-subtle);
  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 { border-top: none; 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-item);
}
.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-layout {
  display: grid;
  grid-template-columns: minmax(164px, 196px) minmax(0, 1fr);
  gap: var(--space-section);
  align-items: start;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-item);
  position: sticky;
  top: 18px;
  min-width: 0;
}
.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-label {
  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);
}

/* 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; }
/* 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); }
.settings-layout .input,
.settings-layout select,
.settings-layout textarea.input { background: var(--surface); }
.settings-layout .input:focus,
.settings-layout select:focus,
.settings-layout 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:20px; 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-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-group); }
  .settings-nav {
    position:static;
    flex-direction:row;
    gap:2px;
    overflow-x:auto;
    padding-bottom:var(--space-tight);
    scrollbar-width:none;
  }
  .settings-nav::-webkit-scrollbar { display:none; }
  .settings-nav-group { flex-direction:row; gap:2px; }
  .settings-nav-label { display:none; }
  .settings-nav .sb-item { flex:0 0 auto; width:auto; }
  .settings-field-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 520px) {
  .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); border-top: 1px solid var(--border-subtle); 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); border-top: 1px solid var(--border-subtle); 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) { border-left: none; 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); }
}


/* 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); }
/* Safari-style attached active tab: merges into the page below — no colored bar */
.wtab.on { background: var(--surface); border-color: var(--border); box-shadow: 0 -1px 2px rgba(60,40,25,.04); }
.wtab.on::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--surface); }
/* 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; } }

/* ── context menu + submenus ── */
.wtab-menu-bd { position: fixed; inset: 0; z-index: 200; }
.wtab-menu { position: fixed; z-index: 201; min-width: 210px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); 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: 550; color: var(--ink); cursor: pointer; text-align: left; position: relative; }
.wtab-menu-row:hover, .wtab-menu-row.open { background: var(--accent-soft); color: var(--accent); }
.wtab-menu-row.disabled { background:var(--disabled-bg); color:var(--disabled-fg); border-color:var(--disabled-border); pointer-events: none; }
.wtab-menu-row .grow { flex: 1; }
.wtab-sub-chev { color: var(--ink-4); }
.wtab-menu-row:hover .wtab-sub-chev, .wtab-menu-row.open .wtab-sub-chev { color: var(--accent); }
.wtab-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-tight) var(--space-tight); }
.wtab-color-chip { width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.wtab-sub-ic { display: inline-flex; width: 18px; justify-content: center; }
.wtab-submenu { position: absolute; left: calc(100% + 4px); top: -6px; min-width: 196px; max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--space-tight); }
.wtab-submenu.flip { left: auto; right: calc(100% + 4px); }
.wtab-submenu.pad { padding: var(--space-inline); min-width: 0; }
.wtab-submenu-hd { font-size: var(--t-micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); padding: var(--space-tight) var(--space-inline) var(--space-tight); }
.wtab-menu-sub-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); padding: var(--space-tight) var(--space-inline); font-size: var(--t-caption-size); font-weight: 650; color: var(--ink-3); }
.wtab-layoutpick { display: flex; gap: var(--space-tight); }
.wtab-lp { width: 28px; height: 26px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-control); color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.wtab-lp:hover { border-color: var(--accent); color: var(--accent); }
.wtab-lp.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.wtab-menu-colors { padding: 2px 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: 22px; height: 22px; border-radius: var(--r-control); 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, var(--surface-2)); color: var(--ink-4); border-color: var(--border); }

/* ── 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); }
.wsp-pane { 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); }
.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 .wtab.on { box-shadow: 0 -1px 3px rgba(0,0,0,.25); }
.dark .ctxdock, .dark .tabprev, .dark .wrecent, .dark .wtab-menu, .dark .wtab-submenu { 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 .wtab-menu, .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)}


/* 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{ width:34px; height:20px; border-radius:var(--r-control); background:var(--border); border:0; cursor:pointer; position:relative; transition:background .18s ease; padding:0; }
.cc-toggle.on{ background:var(--accent); }
.cc-toggle-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s ease; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.cc-toggle.on .cc-toggle-knob{ transform:translateX(14px); }
.dark .cc-toggle.on{ background:var(--lime); }

.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:3px; }
.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:3px; }
.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 26px; padding:20px 0 14px;
  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}}

/* 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. Only fires on the on-transition. */
.tcheck.on { 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.on { 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; }
}