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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

:root {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.apth { position: relative; }

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

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

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

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

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

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

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

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

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