/* ============================================================
   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 (matched to reference) with the
     faintest warm tint so it stays in harmony with the olive brand. */
  --bg: #fdfcfc;              /* page — clean near-white */
  --bg-sidebar: #f5f5f5;      /* sidebar / rails */
  --bg-sunken: #f3f2f1;
  --bg-hover: rgba(31, 36, 29, 0.045);
  --bg-active: rgba(31, 36, 29, 0.07);
  --surface: #ffffff;         /* cards */
  --surface-2: #fbfafa;       /* nested / inputs */
  --overlay: #ffffff;

  /* ---- Ink ---- */
  --ink: #1e231c;
  --ink-2: #565d50;          /* darker → better body contrast */
  --ink-3: #7e776a;
  --ink-4: #a39b8b;

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

  /* ---- Shadows — soft, warm ---- */
  --shadow-xs: 0 1px 0 rgba(31, 36, 29, 0.03);
  --shadow-sm: 0 1px 2px rgba(31, 36, 29, 0.05), 0 1px 0 rgba(31, 36, 29, 0.03);
  --shadow-md: 0 6px 18px rgba(31, 36, 29, 0.06), 0 1px 3px rgba(31, 36, 29, 0.05);
  --shadow-lg: 0 18px 44px rgba(31, 36, 29, 0.12), 0 3px 10px rgba(31, 36, 29, 0.06);
  --shadow-pop: 0 30px 70px rgba(31, 36, 29, 0.20), 0 6px 16px rgba(31, 36, 29, 0.10);

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

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

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

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

  /* ---- Type ---- */
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji';
  /* One app typeface. Aptos (Microsoft's default — what the reference shows) renders
     for anyone who has it installed locally; Onest is the web fallback (closest free
     match — same humanist proportions + single-story g). Swap here to restyle every
     heading + body at once: `--font-app` is the single source of truth. To embed exact
     Aptos for ALL visitors, drop aptos.woff2 in and add an @font-face above. */
  --font-app: 'Aptos', 'Onest', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, var(--emoji);
  --font-serif: var(--font-app);
  --font-title: var(--font-app);
  --font-ui: var(--font-app);
  --font-sans: var(--font-app);
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace, var(--emoji);
  --font-script: 'Caveat', 'Segoe Script', cursive, var(--emoji);
  --font-scribble: 'Gloria Hallelujah', 'Comic Sans MS', cursive, var(--emoji);

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

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

  /* ---- 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: 244px;
  --topbar-h: 46px;
  --rail-w: 320px;
}

.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: #2a2a2c;
  --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);

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

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; border: 3px solid transparent; }

/* ============================================================
   App layout
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh; width: 100vw;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  transition: grid-template-columns .24s cubic-bezier(.4,0,.2,1);
}
.main-col { display: grid; grid-template-rows: var(--topbar-h) auto 1fr; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.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: 8px; height: 34px; padding: 0 10px 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ws-split-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; 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: 4px; 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; }
.wtabs-edge { position: absolute; right: 0; top: 0; bottom: 0; width: 150px; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent)); pointer-events: all; }
.wtabs-edge.over { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent)); }
.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: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 20px; 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: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font: inherit; font-size: 12.5px; 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: 11px; box-shadow: var(--shadow-lg); padding: 5px; max-height: 280px; overflow-y: auto; }
.cv-rel-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: none; background: none; border-radius: 7px; font: inherit; font-size: 13px; 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); }
.wtabs { display: flex; align-items: stretch; gap: 6px; height: 40px; padding: 0 10px; background: var(--bg-sidebar, var(--surface-2)); border-bottom: 1px solid var(--border); }
.wtabs-scroll { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.wtabs-scroll::-webkit-scrollbar { display: none; }
.wtab { display: flex; align-items: center; gap: 7px; padding: 0 9px; height: 30px; align-self: center; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; max-width: 190px; position: relative; transition: background .12s ease; flex-shrink: 0; }
.wtab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.wtab.on { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 2px rgba(60,40,25,.08); }
.wtab.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--tc, var(--accent)); }
.wtab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wtab.on .wtab-dot { display: none; }
.wtab-ic { display: none; flex-shrink: 0; }
.wtab.on .wtab-ic, .wtab.pinned .wtab-ic { display: inline-flex; }
.wtab.pinned .wtab-dot { display: none; }
.wtab-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtab.on .wtab-l { color: var(--ink); }
.wtab-x { width: 17px; height: 17px; padding: 0; border: none; background: none; border-radius: 5px; color: var(--ink-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; opacity: 0; transition: opacity .12s ease, background .12s ease; margin-right: -3px; }
.wtab-x > .icn { display: block; flex-shrink: 0; margin: 0; }
.wtab:hover .wtab-x { opacity: 1; }
.wtab-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.wtab.pinned { padding: 0 8px; max-width: none; }
.wtab-new { width: 28px; height: 28px; align-self: center; border: none; background: none; border-radius: 8px; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.wtab-new:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.wtabs-switch { width: 30px; align-self: center; height: 28px; border: none; background: none; border-radius: 8px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.wtabs-switch:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
/* Phase 5: split icon, drop indicator, per-tab color swatches */
.wtabs-split { width: 30px; height: 28px; align-self: center; border: none; background: none; border-radius: 8px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: all .13s; }
.wtabs-split:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.wtab.dragging { opacity: .4; }
.wtab-drop { width: 3px; align-self: center; height: 24px; border-radius: 99px; background: var(--accent); flex-shrink: 0; margin: 0 1px; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); animation: wtabDrop .15s ease; }
@keyframes wtabDrop { from { transform: scaleY(.4); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.wtab-menu-colors { padding: 7px 9px 5px; border-top: 1px solid var(--border-subtle); margin-top: 3px; }
.wtab-menu-clabel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.wtab-menu-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.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: 4px; }
.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(--ink-4); 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: 30px; }
.sb-sc-more { margin-left: auto; opacity: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-4); flex-shrink: 0; }
.sb-sc-item:hover .sb-sc-more { opacity: 1; }
.sb-sc-more:hover { background: var(--bg-hover); color: var(--ink); }
.sb-sc-empty { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: none; color: var(--ink-4); font-size: 12px; cursor: pointer; margin-top: 2px; }
.sb-sc-empty:hover { color: var(--ink-2); border-color: var(--ink-4); }
.sbsc-kinds { display: flex; gap: 6px; }
.sbsc-kind { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sbsc-kind.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sbsc-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.sbsc-ico { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.sbsc-ico:hover { border-color: var(--border-strong); }
.sbsc-ico.on { border-width: 2px; }
.sbsc-colors { display: flex; gap: 7px; }
.sbsc-color { width: 26px; height: 26px; border-radius: 8px; 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: 11px; box-shadow: var(--shadow-lg); padding: 5px; }
.wtab-menu-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: none; background: none; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.wtab-menu-row:hover { background: var(--accent-soft); color: var(--accent); }
/* 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: 14px; box-shadow: 0 30px 70px -20px rgba(40,28,20,.5); overflow: hidden; }
.tabsw-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; 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: 14.5px; color: var(--ink); }
.tabsw-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.tabsw-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 9px; font: inherit; cursor: pointer; text-align: left; }
.tabsw-row.on { background: var(--accent-soft); }
.tabsw-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.tabsw-l { flex: 1; font-size: 13.5px; 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 6px; border-radius: 5px; }
.wtab.entity .wtab-l { max-width: 130px; }
.tabsw-empty { padding: 24px; text-align: center; color: var(--ink-4); font-size: 13px; }
.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: 16px; box-shadow: 0 30px 70px -20px rgba(40,28,20,.5); padding: 16px; }
.tabnew-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.tabnew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tabnew-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.tabnew-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(60,40,25,.3); }
.tabnew-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.tabnew-l { font-size: 12px; font-weight: 650; color: var(--ink); }
.content { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.content-pad, .screen-pad { padding: 30px 40px 80px; max-width: 1480px; margin: 0 auto; }
.content-pad.narrow, .screen-pad.narrow { max-width: 1100px; }
@media (max-width: 1100px){ .content-pad, .screen-pad { padding: 26px 24px 64px; } }
@media (max-width: 760px){ .content-pad, .screen-pad { padding: 16px 16px 60px; } }

/* 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: 22px;            /* 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: 27px; 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: 11px; 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: 7px;
  height: 38px; padding: 0 16px;
  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;
}
.btn:hover { background: var(--bg-hover); }
.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; }
.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); color: #fff; 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); }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { opacity: .45; 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 12px; font-size: var(--fs-tiny); }
.btn.lg { height: 46px; padding: 0 22px; font-size: var(--fs-body); }
.btn.icon { width: 38px; padding: 0; }
.btn.icon.sm { width: 32px; height: 32px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  font-size: 11.5px; 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); }

/* ---- Notion-style colored tags ---- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; max-width: 100%;
  font-size: 11.5px; 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: var(--shadow-sm);
}
.card.flat { box-shadow: none; }
.card-pad { padding: 22px; }

.input {
  height: 38px; padding: 0 12px;
  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: 10px 12px; 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 { box-shadow: 0 0 0 3px var(--accent-soft); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-size: 11px; 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: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }

/* segmented tabs */
.seg { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  height: 30px; padding: 0 14px; border: none; background: transparent; flex-shrink: 0; white-space: nowrap;
  border-radius: 7px; 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: 22px; 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: 12px 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: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden;
}
.avatar.xs { width: 26px; height: 26px; font-size: 11px; }
.avatar.sm { width: 31px; height: 31px; font-size: 12.5px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.avatar.xl { width: 78px; height: 78px; font-size: 27px; }
.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, 1fr) !important; }

/* reporting & approvals */
.rep { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px){ .rep { grid-template-columns: 1fr; } }
.rep-policy { grid-column: 1 / -1; }
.rep-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; 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: 7px; }
.rep-mode { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; 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: 9px; 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: 13.5px; font-weight: 600; }
.rep-mode-desc { display: block; font-size: 11.5px; 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: #fff; }
.rep-radio.on { background: var(--accent); border-color: var(--accent); }
.rep-fallback { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12.5px; 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: 10px; padding: 6px 0; }
.rep-select { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12.5px; padding: 0 8px; max-width: 150px; }
.rep-chart-card { grid-column: 1 / -1; }
.rep-offnow { color: var(--c-gold); font-weight: 600; font-size: 12px; }
.rep-cover-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.rep-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rep-node { border: 1px solid var(--border-subtle); border-radius: 11px; padding: 11px; background: var(--bg-sidebar); }
.rep-super { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rep-super-n { font-size: 13px; font-weight: 650; }
.rep-super-t { font-size: 11px; color: var(--ink-3); }
.rep-reports { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-rep { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border-subtle); padding: 3px 9px 3px 3px; border-radius: 999px; }
.appr-route-note { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: 12px; color: var(--ink-2); background: var(--accent-soft); padding: 7px 11px; border-radius: 9px; }
.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: 26px 0 14px; }
.team-sec-hd .sec-title { display: flex; align-items: center; gap: 9px; }
.team-sec-hd .org-dot { width: 10px; height: 10px; border-radius: 50%; }
.team-sec-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; }
.team-sec-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1080px){ .team-grid, .grp-grid { grid-template-columns: repeat(2,1fr) !important; } }
.dept-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.dept-tag.sm { font-size: 10.5px; padding: 2px 8px; }
.dept-tag-dot { width: 7px; height: 7px; border-radius: 50%; }
.dept-tag.lead { color: var(--accent); background: var(--accent-soft); }

.grp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grp-card { text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 15px; 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: 11px; display: grid; place-items: center; flex-shrink: 0; }
.grp-card-n { font-size: 14.5px; font-weight: 650; }
.grp-card-depts { display: flex; flex-wrap: wrap; gap: 5px; }
.grp-card.new { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: center; border-style: dashed; cursor: pointer; color: var(--ink-3); }
.grp-card.new:hover { border-color: var(--accent); color: var(--accent); }

/* new-group modal bits */
.grp-name { display: flex; align-items: center; gap: 10px; }
.grp-name-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.grp-ic { width: 34px; height: 34px; border-radius: 9px; 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(--accent); background: var(--accent-soft); color: var(--accent); }
.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(--accent); }
.grp-depts { display: flex; flex-wrap: wrap; gap: 7px; }
.grp-dept { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.grp-dept-n { font-size: 10.5px; color: var(--ink-4); background: var(--bg-active); padding: 1px 6px; border-radius: 999px; }
.grp-preview { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--bg-sidebar); border-radius: 11px; }

/* task attachment chip */
.task-att { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; 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; }
/* saved views bar */
.tv-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.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: 6px; border: none; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 13px; }
.tv-pill.on > .tv-pill-main { color: var(--accent-700); padding-right: 8px; }
.tv-pill > .tv-pill-main:hover { color: var(--ink); }
.tv-bar > .tv-pill.on:first-child { padding: 6px 13px; }
.tv-bar > button.tv-pill { gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 13px; 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: 6px; border: 1px dashed var(--border-strong); background: none; border-radius: 99px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 6px 13px; transition: border-color .12s, color .12s, background .12s; }
.tv-save:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* sidebar saved views */
.sb-views { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.sb-view-item .sb-item-label { font-size: 12.5px; }
.sb-view-item .sb-view-where { margin-left: auto; color: var(--ink-4); display: inline-grid; place-items: center; flex-shrink: 0; }
.sb-view-item:hover .sb-view-where { color: var(--ink-3); }
/* 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(31,36,29,.45); transform: none; }
.trow-clone .trow { box-shadow: 0 22px 44px -14px rgba(31,36,29,.4); }
body.is-dragging .kbn-card, body.is-dragging .trow { transition: transform .19s cubic-bezier(.2,.8,.2,1); }

/* calendar view */
.tcal { border-radius: var(--r-lg); }
.tcal-stickyhead { position: sticky; top: 0; z-index: 5; background: var(--surface); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.tcal-hd { padding: 14px 18px; }
.tcal-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: 3px 9px; border-radius: 999px; }
.tcal-chip.warn { color: var(--st-blocked); background: var(--st-blocked-soft); }
.tcal-cell { min-height: 108px; padding: 7px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.tcal-cell.empty { background: var(--bg-sidebar); }
.tcal-cell:not(.empty):hover { background: var(--bg-hover); cursor: pointer; }
.md-recap-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 30px 24px; }
.md-recap-empty-ic { display: grid; place-items: center; color: var(--ink-4); margin-bottom: 4px; }
.md-recap-empty-t { font-size: 15px; font-weight: 650; color: var(--ink); }
.md-recap-empty-s { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 300px; margin-bottom: 8px; }
.mini-cal-nav { display: inline-flex; gap: 2px; }
.mini-cal-nav button { width: 24px; height: 24px; border: none; background: none; border-radius: 7px; 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,1fr); gap: 2px; text-align: center; }
.mini-cal-dow { font-size: 11px; font-weight: 600; color: var(--ink-4); padding: 4px 0; }
.mini-cal-empty { }
.mini-cal-day { position: relative; border: none; background: none; font: inherit; font-size: 12px; color: var(--ink); padding: 6px 0; border-radius: 8px; 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: 26px; }
.oc-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.oc-bar-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.oc-bar-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.oc-bar-l b { font-size: 15px; display: block; }
.oc-bar-hint { font-size: 12px; color: var(--ink-4); }
.oc-advtog { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.oc-advtog:hover { border-color: var(--border-strong); }
.oc-advtog.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-700); }
.oc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; align-items: start; }
.oc-col { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 9px; transition: border-color .14s, box-shadow .14s, background .14s; min-width: 0; }
.oc-col.over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.oc-col-hd { display: flex; align-items: center; gap: 8px; }
.oc-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.oc-col-name { font-weight: 650; font-size: 13.5px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-col-n { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px; }
.oc-col-lead { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); padding: 2px 2px 4px; 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: 6px; min-height: 24px; }
.oc-col-empty { font-size: 12px; color: var(--ink-4); text-align: center; padding: 14px 6px; border: 1px dashed var(--border); border-radius: 10px; }
.oc-col.over .oc-col-empty { border-color: var(--accent); color: var(--accent-700); }
.oc-col-invite { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border); background: none; border-radius: 9px; padding: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all .12s; }
.oc-col-invite:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.oc-card { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; background: var(--bg-sunken); cursor: pointer; transition: background .12s, box-shadow .12s, transform .12s; }
.oc-card.draggable { cursor: grab; }
.oc-card:hover { background: var(--bg-active); box-shadow: var(--shadow-xs); }
.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: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-card-sub { font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-away { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; font-weight: 650; color: color-mix(in srgb, var(--c-gold) 76%, var(--ink)); }
.oc-lead-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 16%, transparent); padding: 1px 5px; border-radius: 5px; flex-shrink: 0; }
.oc-role { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; color: var(--ink-3); background: var(--bg-active); }
.oc-role.click { border: none; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 650; }
.oc-role.click:hover { filter: brightness(.97); }
.oc-role.admin { color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 14%, transparent); }
.oc-role.owner { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 16%, transparent); }
.oc-role.guest { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 14%, transparent); }
.oc-role.client { color: var(--c-mauve); background: color-mix(in srgb, var(--c-mauve) 14%, transparent); }
.oc-roles { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px; }
.oc-roles-hd { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); margin-bottom: 13px; flex-wrap: wrap; }
.oc-roles-sub { font-size: 12px; 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: 12px; }
.oc-rolecard { border: 1px solid var(--border-subtle); border-radius: 11px; padding: 12px; background: var(--bg-sidebar); }
.oc-rolecard-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 9px; }
.oc-caps { display: flex; flex-direction: column; gap: 5px; }
.oc-cap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; 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; }

/* ── Roles & permissions matrix (deep role system) ── */
.rp { user-select: none; -webkit-user-select: none; }
.rp-head { margin-bottom: 14px; }
.rp-head-l { display: flex; align-items: flex-start; gap: 11px; }
.rp-head-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.rp-head-l b { font-size: 14.5px; display: block; }
.rp-head-sub { font-size: 12.5px; color: var(--ink-4); display: block; margin-top: 1px; }
.rp-roles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-roletab { display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px; border: 1px solid var(--border); border-radius: 12px; 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: 8px; 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: 13px; font-weight: 650; color: var(--ink); }
.rp-roletab-cnt { font-size: 10.5px; color: var(--ink-4); }
.rp-roletab-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 5px; 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: 14px; background: var(--surface); overflow: hidden; }
.rp-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.rp-panel-hd-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rp-panel-title { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.rp-panel-desc { font-size: 12px; 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 6px; border-radius: 5px; }
.rp-panel-hd-r { display: flex; align-items: center; gap: 10px; }
.rp-oncount { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rp-note { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.rp-note svg { color: var(--accent); flex-shrink: 0; }
.rp-features { padding: 6px 16px 16px; }
.rp-feat-group { margin-top: 14px; }
.rp-feat-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 8px; }
.rp-feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 7px; }
.rp-feat { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 10px; 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: 7px; 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: 13px; 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; opacity: .85; }
.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; flex-shrink: 0; }
.rp-feat-always { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); flex-shrink: 0; }
.rp-toggle { width: 32px; height: 19px; border-radius: 999px; background: var(--bg-active); border: 1px solid var(--border); position: relative; flex-shrink: 0; transition: background .16s, border-color .16s; }
.rp-toggle.on { background: var(--accent); border-color: var(--accent); }
.rp-toggle-knob { position: absolute; top: 1.5px; left: 1.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s cubic-bezier(.3,.7,.4,1.3); }
.rp-toggle.on .rp-toggle-knob { transform: translateX(13px); }
.inv-prefill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); margin-bottom: 6px; }
.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: 12px; font-weight: 600; margin-bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.tcal-ev.over { box-shadow: inset 0 0 0 1px var(--st-blocked-soft); }
.tcal-more { font-size: 10.5px; font-weight: 600; color: var(--ink-3); padding: 2px 7px; cursor: pointer; border-radius: 5px; }
.tcal-more:hover { background: var(--bg-active); color: var(--ink); }
.tcal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); }
.tcal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; 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: 13px; box-shadow: var(--shadow-lg); padding: 12px 13px; animation: caltip-in .12s ease; }
@keyframes caltip-in { from { opacity: 0; transform: translateY(3px); } }
/* calendar day popover (+N more) */
.caldp-scrim { position: fixed; inset: 0; z-index: 300; }
.caldp { position: fixed; z-index: 301; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-lg); overflow: hidden; animation: caltip-in .12s ease; }
.caldp-hd { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px; border-bottom: 1px solid var(--border-subtle); }
.caldp-hd-t { font-size: 13px; font-weight: 650; color: var(--ink); }
.caldp-hd-n { font-size: 11px; color: var(--ink-4); }
.caldp-x { margin-left: auto; width: 24px; height: 24px; border: none; background: none; color: var(--ink-4); border-radius: 7px; 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: 5px; display: flex; flex-direction: column; gap: 1px; }
.caldp-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 9px; border: none; background: none; border-radius: 9px; 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: 12.5px; font-weight: 550; color: var(--ink); }
.caldp-row.over .caldp-name { color: var(--st-blocked); }
.caldp-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 10px); margin: 4px 5px 6px; padding: 9px; border: 1px dashed var(--border-strong); background: none; border-radius: 9px; color: var(--accent); font: inherit; font-size: 12.5px; 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: 9px; padding: 2px; gap: 2px; }
.tcal-viewseg button { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 4px 12px; border-radius: 7px; 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, 1fr); min-height: 460px; }
.tcal-wcol { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 0 0 8px; 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: 3px; padding: 11px 4px 9px; position: sticky; top: 0; }
.tcal-wdow { font-size: 10.5px; 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 6px; border-radius: 999px; font-size: 14px; font-weight: 650; }
.tcal-wbody { display: flex; flex-direction: column; gap: 3px; padding: 0 7px; flex: 1; min-width: 0; }
.tcal-wadd { display: none; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; padding: 7px; border: 1px dashed var(--border); background: none; border-radius: 8px; color: var(--ink-4); font: inherit; font-size: 11.5px; 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: 11px; gap: 4px; padding: 2px 5px; margin: -2px -5px; 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: 12.5px; gap: 4px; padding: 3px 6px; margin: -3px -6px; 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: 320; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: caltip-in .12s ease; }
.duepop .mini-cal { border: none; box-shadow: none; padding: 4px 14px 10px !important; background: none; }
.duepop-rels { display: flex; gap: 6px; padding: 11px 12px 4px; }
.duepop-rel { flex: 1; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 6px 4px; cursor: pointer; transition: border-color .12s, background .12s; }
.duepop-rel:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.duepop-foot { padding: 0 12px 12px; }
.duepop-clear { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; padding: 4px 0; }
.duepop-clear:hover { color: var(--st-blocked); }
.caltip-topbar { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.caltip-proj { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.caltip-projn { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.caltip-title { font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.caltip-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.caltip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.caltip-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.caltip-chip.blk { color: var(--st-blocked); background: var(--st-blocked-soft); }
.caltip-chip.soft { color: var(--ink-3); background: var(--bg-sunken); }
.caltip-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.caltip-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.caltip-asn { font-size: 11.5px; color: var(--ink-2); font-weight: 550; }
.caltip-open { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--accent); }

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

/* tasks first-entry onboarding */
.tonb-scrim { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; animation: caltip-in .2s ease; }
.tonb { width: min(840px, 96vw); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 36px 34px 26px; text-align: center; animation: tonb-pop .26s cubic-bezier(.2,.8,.2,1); }
@keyframes tonb-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.tonb-spark { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.tonb-title { font-size: 23px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.tonb-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin: 8px auto 22px; max-width: 470px; }
.tonb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
@media (max-width: 820px){ .tonb-grid { grid-template-columns: repeat(3, 1fr); } }
.tonb-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 12px; border: 1.5px solid var(--border); border-radius: 15px; background: var(--surface); cursor: pointer; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
.tonb-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tonb-card.on { border-color: var(--accent); background: var(--accent-soft); }
.tonb-card-check { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; }
.tonb-mini { display: block; width: 100%; height: 46px; border-radius: 8px; background: var(--bg-sunken); overflow: hidden; }
.tonb-card-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ink); }
.tonb-card-l svg, .tonb-card-l .icn { color: var(--accent); }
.tonb-card-d { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.tonb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.tonb-skip { border: none; background: none; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; padding: 8px 4px; }
.tonb-skip:hover { color: var(--ink); }
@media (max-width: 620px){ .tonb-grid { grid-template-columns: repeat(2, 1fr); } }

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

/* task settings — default view picker */
.tset-views { display: flex; flex-direction: column; gap: 8px; }
.tset-view { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; 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: 10px; 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: 13.5px; font-weight: 600; color: var(--ink); }
.tset-view-d { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* timeline view */
.ttl-hd { padding: 14px 18px; }
.ttl-legend { gap: 12px; }
.ttl-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; 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: 8px; padding: 12px 16px; min-width: 0; }
.ttl-n { font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.ttl-track { position: relative; display: grid; grid-template-columns: repeat(31,1fr); padding: 8px 0; }
.ttl-days { padding: 10px 0; }
.ttl-day { text-align: center; font-size: 10.5px; 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: 6px; height: 24px; padding: 0 9px; border: 1px solid; border-radius: 7px; cursor: grab; overflow: visible; box-shadow: var(--shadow-xs); transition: transform .12s, box-shadow .12s; }
.ttl-bar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); 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: 10px; font-weight: 700; padding: 2px 7px; 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: 10.5px; 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: 10.5px; 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; border: none; background: none; padding: 2px; cursor: pointer; }
.presence-pile > * { margin-left: -8px; transition: transform .14s; }
.presence-pile > *:first-child { margin-left: 0; }
.presence-pile:hover > * { margin-left: -4px; }
.presence-more { width: 26px; height: 26px; border: 2px solid var(--surface); }
.presence-pop { box-shadow: var(--shadow-lg); }
.presence-grouphd { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 9px 10px 4px; }
.presence-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; }
.presence-row:hover { background: var(--bg-hover); }
.presence-name { display: block; font-size: 13px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-role { display: block; font-size: 11px; 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: 30px; 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: 3px; }
.delta.up { color: var(--lime); }
.delta.down { color: var(--st-blocked); }

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

/* mini list rows */
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 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: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 13px 14px; 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: 10px; object-fit: cover; background: var(--bg-sunken); flex-shrink: 0; }

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

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--bg-sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
/* ---- header ---- */
.sb-hd { display: flex; align-items: center; height: var(--topbar-h); padding: 0 10px; flex-shrink: 0; overflow: visible; }
.sb-logo-full { display: inline-flex; align-items: center; }
.sb-logo-mark { display: none; align-items: center; color: var(--lime); }
.sidebar.collapsed .sb-hd { padding: 0; justify-content: center; }
.sidebar.collapsed .sb-logo-full { display: none; }
.sidebar.collapsed .sb-logo-mark { display: inline-flex; }

/* ---- body ---- */
.sb-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.sidebar.collapsed .sb-body { padding: 6px 0 16px; align-items: center; }

/* ---- section labels ---- */
.sb-sec { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); padding: 18px 11px 6px; }
.sb-sec:first-child { padding-top: 8px; }
.sb-sec > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sb-sec { width: 26px; height: 0; padding: 0; margin: 11px 0 6px; border-top: 1px solid var(--border); }
.sidebar.collapsed .sb-sec > span { display: none; }
.sidebar.collapsed .sb-body > .sb-sec:first-child { border-top: none; margin-top: 4px; }

/* ---- nav item ---- */
.sb-item {
  display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px;
  border-radius: 6px; color: var(--ink-2); position: relative;
  font-size: 14px; font-weight: 500; flex-shrink: 0;
  border: none; background: transparent; width: 100%; text-align: left;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.sb-item-ico { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-3); }
.sb-item .icn { opacity: 1; transition: color .14s ease; }
.sb-item:hover { background: var(--bg-hover); color: var(--ink); }
.sb-item:hover .sb-item-ico { color: var(--ink-2); }
.sb-item.active { background: var(--bg-active); color: var(--ink); font-weight: 600; }
.sb-item.active .sb-item-ico { color: var(--ink); }
.dark .sb-item.active { background: var(--bg-active); color: var(--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: 11px; font-weight: 600; padding: 1px 7px; 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(--c-clay); color: #fff; }
.sidebar.collapsed .sb-badge.needs { border-color: var(--bg-sidebar); }

/* ---- collapsed nav item → centered icon, label hidden, badge → dot ---- */
.sidebar.collapsed .sb-item { width: 46px; height: 44px; 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: 10px 6px; flex-shrink: 0; }
.sidebar.collapsed .sb-divider { width: 26px; margin: 10px 0; }

/* ---- onboarding "Finish setup" pill ---- */
.sb-setup { display: flex; align-items: center; gap: 10px; width: 100%; margin: 1px 0 3px; padding: 6px 8px; border: none; background: none; border-radius: 8px; 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: 6px 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: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-setup-s { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- footer / collapse toggle ---- */
.sb-foot { padding: 10px 12px 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar.collapsed .sb-foot { padding: 10px 0 12px; align-items: center; }
.upsell-mark { position: absolute; right: -10px; top: -12px; opacity: .5; }
.sidebar.collapsed .upsell { display: none; }
.sb-collapse {
  display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; flex-shrink: 0;
  border: none; background: transparent; width: 100%; border-radius: 9px;
  color: var(--ink-3); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.sb-collapse:hover { background: var(--bg-hover); color: var(--ink); }
.sb-collapse .sb-item-ico { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.sidebar.collapsed .sb-collapse { width: 44px; 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: 10px; width: 100%; height: 48px; padding: 0 8px; border: none; background: transparent; border-radius: 11px; cursor: pointer; text-align: left; transition: background .14s ease; }
.ws-switch:hover { background: var(--bg-hover); }
.ws-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.ws-tile.sm { width: 30px; height: 30px; border-radius: 8px; }
.ws-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.22; }
.ws-name { font-size: 14px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-plan { font-size: 11px; 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: 48px; padding: 0; justify-content: center; gap: 0; margin: 0 auto; }
.sidebar.collapsed .ws-meta, .sidebar.collapsed .ws-chev { display: none; }

/* ── narrow viewports (≤760px): force an icon rail so content stays usable ── */
@media (max-width: 760px){
  :root { --sidebar-w: 64px !important; }
  .sidebar .sb-item-label, .sidebar .sb-section-label, .sidebar .sb-views,
  .sidebar .upsell, .sidebar .sb-collapse .sb-item-label, .sidebar .sb-logo-full,
  .sidebar .ws-meta, .sidebar .ws-chev { display: none !important; }
  .sidebar .ws-switch { width: 48px; padding: 0; justify-content: center; gap: 0; margin: 0 auto; }
  .sidebar .sb-item { width: 46px; height: 44px; 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: 78; }
/* Notion-style: fixed-anchored (escapes the sidebar's overflow:hidden), wide, roomy */
.ws-pop { position: fixed; z-index: 79; width: 300px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; animation: pop-menu .14s cubic-bezier(.4,0,.2,1); }
.ws-pop-hd { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); padding: 5px 12px 4px; }
.ws-pop-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 12px; border: none; background: transparent; border-radius: 8px; 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: 14px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-pop-plan { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ws-pop-sep { height: 1px; background: var(--border-subtle); margin: 5px 6px; }
.ws-pop-action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: none; background: transparent; border-radius: 8px; color: var(--ink); font-size: 14px; 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); }
/* smaller, neater workspace tiles */
.ws-pop .ws-tile.sm { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.ws-pop-head .ws-tile.sm { width: 30px; height: 30px; border-radius: 7px; }
/* current-workspace header */
.ws-pop-head { display: flex; align-items: center; gap: 11px; padding: 8px 12px 9px; }
.ws-pop-head .ws-pop-name { font-size: 14.5px; font-weight: 650; }
.ws-pop-head .ws-pop-plan { font-size: 12px; margin-top: 1px; }
.ws-pop-hd.lower { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500; color: var(--ink-3); padding: 6px 12px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-pop-action.accent { color: var(--accent); font-weight: 550; }
.ws-pop-action.accent .icn, .ws-pop-action.accent:hover .icn { color: var(--accent); }
.ws-pop-action.accent:hover { color: var(--accent); }

/* ---- Invite Teammates modal ---- */
.invt { display: flex; flex-direction: column; gap: 16px; }
.invt-top { display: flex; align-items: flex-start; gap: 10px; }
.invt-field { position: relative; flex: 1; min-width: 0; }
.invt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface-2); transition: border-color .12s; }
.invt-field:focus-within .invt-chips { border-color: var(--accent); }
.invt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); max-width: 220px; }
.invt-chip .avatar { flex-shrink: 0; }
.invt-chip-em { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-active); color: var(--ink-2); 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-3); border-radius: 50%; 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: 14px; color: var(--ink); height: 30px; }
.invt-inp::placeholder { color: var(--ink-4); }
.invt-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; height: 46px; padding: 0 22px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .12s, transform .1s; }
.invt-go .icn { color: var(--accent-fg); }
.invt-go:hover { opacity: .92; }
.invt-go:active { transform: translateY(1px); }
.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: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.invt-sugg-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.invt-sugg-row:hover { background: var(--bg-hover); }
.invt-sugg-add { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-active); color: var(--ink-2); flex-shrink: 0; }
.invt-sugg-nm { display: block; font-size: 13.5px; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-sugg-em { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-sunken); border-radius: 14px; }
.invt-link-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); flex-shrink: 0; }
.invt-link-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.invt-link-s { font-size: 12px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-link-b { flex-shrink: 0; height: 34px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; 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: 12px; padding: 9px 4px; }
.invt-mem + .invt-mem { border-top: 1px solid var(--border-subtle); }
.invt-mem-nm { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 550; color: var(--ink); }
.invt-you { font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px 6px; border-radius: 5px; }
.invt-mem-em { font-size: 12.5px; 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: 5px; font-size: 12.5px; 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: 8px; 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: 8px; }
.invp-sec-hd { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; 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: 10px; }
.ws-method { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; text-align: left; transition: border-color .14s, background .14s, box-shadow .14s; }
.ws-method:hover { border-color: var(--border-strong); }
.ws-method.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-method-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--accent); border: 1px solid var(--border); margin-bottom: 5px; }
.ws-method.on .ws-method-ic { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.ws-method-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ws-method-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.ws-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-700); font-size: 12.5px; line-height: 1.45; }
.ws-note .icn { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.ws-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ws-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ws-icon-cell { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ws-icon-cell:hover { background: var(--bg-hover); color: var(--ink); }
.ws-icon-cell.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.ws-accent-row { display: flex; gap: 10px; }
.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%; }
.ws-vis-hd { font-size: 13px; font-weight: 600; color: var(--ink); margin: 22px 0 10px; }
.ws-vis-hd .muted { font-weight: 400; font-size: 12px; }
.ws-vis { display: flex; flex-direction: column; gap: 14px; }
.ws-vis-sec { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); padding: 2px 2px 4px; }
.ws-vis-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px; border: none; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; color: var(--ink); font-size: 13.5px; 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 { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-active); position: relative; flex-shrink: 0; transition: background .16s; }
.ws-toggle.on { background: var(--accent); }
.ws-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .16s; }
.ws-toggle.on .ws-toggle-knob { transform: translateX(14px); }

/* ---- Per-workspace accent themes (light) ---- */
[data-accent="pine"]   { --accent:#21564a; --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; }
/* ---- 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; }

/* upgrade card */
.upsell {
  border-radius: var(--r-lg); background: var(--bg-sunken);
  border: 1px solid var(--border); padding: 16px; position: relative; overflow: hidden;
}
.upsell h5 { font-family: var(--font-serif); font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.upsell p { font-size: var(--fs-tiny); color: var(--ink-2); margin: 0 0 12px; line-height: 1.45; }

/* user chip */
.tb-create { width: 34px; height: 34px; padding: 0; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: transparent; border: none; color: var(--ink-2); cursor: pointer; position: relative; transition: background .14s ease, color .14s 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 {
  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: 11.5px; font-weight: 600; white-space: nowrap; padding: 5px 9px; border-radius: 7px;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .14s ease, transform .14s ease;
}
.tb-create[data-tip]:hover::after, .tb-icon-btn[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .35s; }
.userchip { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); margin-left: 2px; transition: border-color .14s, background .14s; }
.userchip:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.userchip-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.userchip-chev { color: var(--ink-4); }
@media (max-width: 1100px){ .userchip-name { display: none; } }

/* account dropdown — pricing packages */
.acct-pricing { display: flex; flex-direction: column; gap: 4px; }
.acct-price { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: all .12s; }
.acct-price:hover { background: var(--bg-hover); }
.acct-price.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.acct-price-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-active); color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.acct-price.on .acct-price-ic { background: var(--accent); color: var(--accent-fg); }
.acct-price-main { flex: 1; min-width: 0; }
.acct-price-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.acct-price-desc { display: block; font-size: 11px; color: var(--ink-4); }
.acct-price-amt { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.acct-price-amt i { font-size: 10px; font-weight: 500; color: var(--ink-4); font-style: normal; margin-left: 1px; }
.acct-price-cur { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.acct-price-pick { font-size: 10.5px; font-weight: 600; color: var(--ink-4); opacity: 0; white-space: nowrap; }
.acct-price:hover .acct-price-pick { opacity: 1; }

/* account dropdown */
.acct {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  max-height: min(720px, calc(100dvh - 88px));
  z-index: 41;
  background: var(--overlay);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  animation: drawerPop .16s cubic-bezier(.4,0,.2,1);
}
.acct-head { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--border-subtle); }
/* my-status picker */
.acct-status { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.acct-status-hd { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 9px; }
.acct-status-off { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 12%, transparent); padding: 6px 9px; border-radius: 8px; margin-bottom: 8px; }
.acct-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acct-status-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; transition: border-color .12s, background .12s; }
.acct-status-opt:hover { background: var(--bg-hover); }
.acct-status-opt.on { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); color: var(--ink); }
.acct-status-opt .icn { margin-left: auto; color: var(--accent); }
.acct-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* identity "act as" switcher */
.acct-switch { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.acct-switch-hd { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 9px; }
.acct-switch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.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 { transform: translateY(-1px); border-color: var(--border-strong); }
.acct-switch-av.on { border-color: var(--accent); }
.acct-switch-back { display: flex; align-items: center; gap: 6px; margin-top: 10px; width: 100%; justify-content: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; 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 6px; 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: 5px; font-size: 11.5px; 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: 15px; font-weight: 650; }
.acct-email { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acct-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-active); color: var(--ink-2); }
.acct-tag.role { color: var(--accent); background: var(--accent-soft); }
.acct-dept-dot { width: 7px; height: 7px; border-radius: 50%; }
.acct-plan { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.acct-plan-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.acct-plan-stor { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.acct-plan-stor:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.acct-plan-stor-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.acct-plan-stor-top > span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.acct-plan-stor-val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.acct-plan-stor-val i { color: var(--ink-4); font-style: normal; font-weight: 500; }
.acct-plan-stor-meter { height: 5px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; margin-top: 7px; }
.acct-plan-stor-meter i { display: block; height: 100%; background: var(--accent); 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: 8px; font-size: 14px; font-weight: 650; }
.acct-plan-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.acct-plan-tag { font-size: 10px; font-weight: 600; color: var(--ink-4); background: var(--bg-active); padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.acct-plan-mng { border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.acct-plan-mng:hover { background: var(--accent-soft); }
.acct-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acct-plan-opt { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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(--accent); background: var(--accent-soft); color: var(--ink); }
.acct-plan-opt.on .icn { color: var(--accent); }
.acct-plan-name { flex: 1; min-width: 0; }
.acct-plan-check { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.acct-items { padding: 6px; }
.acct-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 9px; cursor: pointer; color: var(--ink); font-size: 13.5px; 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: 11.5px; color: var(--ink-4); font-weight: 600; }
.acct-trash-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 16%, transparent); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.acct-item.logout { margin: 0 6px 8px; width: calc(100% - 12px); color: var(--st-blocked); border-top: 1px solid var(--border-subtle); border-radius: 0 0 9px 9px; padding-top: 12px; }
.acct-item.logout .icn { color: var(--st-blocked); }
.acct-item.logout:hover { background: var(--st-blocked-soft); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  border-bottom: 1px solid var(--border); background: var(--bg);
  height: var(--topbar-h);
}
.tb-search {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3); width: 420px; max-width: 42vw; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; flex-shrink: 0;
}
.tb-search:hover { border-color: var(--ink-4); }
.tb-search .grow { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-icon-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: none; background: transparent; color: var(--ink-3); transition: background .14s, color .14s; position: relative; }
.tb-icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.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: 0px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--st-blocked); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; border: 1.5px solid var(--bg); }

/* ============================================================
   Right rail (contextual)
   ============================================================ */
.rail { display: flex; flex-direction: column; gap: 20px; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.rail-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 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: rgba(31,36,29,0.30); z-index: 60; animation: scrimIn .26s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dark .scrim { background: rgba(0,0,0,0.50); }
.scrim.closing { animation: scrimOut .22s ease both; }
@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(--border); z-index: 61;
  display: flex; flex-direction: column; box-shadow: var(--shadow-pop);
  animation: slideIn .42s cubic-bezier(.32,.72,0,1);
}
.drawer.closing { animation: slideOut .26s cubic-bezier(.4,0,.2,1) both; }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: .85; } }
.drawer-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 16px 24px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.drawer-hd > .row { margin-top: -1px; }
.drawer-hd h3 { letter-spacing: -0.01em; text-wrap: balance; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px 26px; overscroll-behavior: contain; scroll-behavior: smooth; }
.drawer-foot { border-top: 1px solid var(--border-subtle); padding: 14px 24px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; background: var(--surface); box-shadow: 0 -10px 22px -18px rgba(31,36,29,0.30); }
/* header icon buttons — quiet until hovered */
.drawer-hd .btn.icon.ghost { color: var(--ink-3); transition: background .14s ease, color .14s ease; }
.drawer-hd .btn.icon.ghost:hover { color: var(--ink); background: var(--bg-hover); }
/* full-view: drawer expands into a large centered panel */
.drawer.full {
  top: 26px; bottom: 26px; right: auto; left: 50%; transform: translateX(-50%);
  max-width: 94vw; border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); animation: drawerPop .26s cubic-bezier(.32,.72,0,1);
}
.drawer.full.closing { animation: drawerPopOut .2s ease both; }
.drawer.full .drawer-hd, .drawer.full .drawer-foot { padding-left: 30px; padding-right: 30px; }
.drawer.full .drawer-body { padding: 28px 30px; }
.drawer-expand { color: var(--ink-3); }
.drawer-expand:hover { color: var(--ink); }
@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: 61; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); animation: pop .2s ease; max-height: 90vh; display: flex; flex-direction: column;
}
@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 { animation: modalPop .24s cubic-bezier(.32,.72,0,1) both; }
@keyframes modalPop { from { opacity: 0; transform: scale(.965) translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal.mc { animation-duration: .01ms; } }
@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: 32px; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface-2); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; flex-shrink: 0; transition: background .14s, border-color .14s; position: relative; }
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { content: ""; width: 11px; height: 11px; background-color: var(--accent-fg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="radio"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); display: inline-grid; place-content: center; vertical-align: middle; }
input[type="radio"]:checked { border-color: var(--accent); }
input[type="radio"]:checked::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* toggle switch */
.switch { width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .16s; flex-shrink: 0; border: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: var(--shadow-sm); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(16px); }

*: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 {
  outline: none; box-shadow: none;
}

/* utility */
.pulse-dot { animation: pulse 1.8s ease-in-out infinite; }
.task-card { transition: box-shadow .14s, border-color .14s, transform .14s; }
.task-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.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: 1200; min-width: 200px; padding: 7px;
  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) 8%, transparent);
  border-radius: 14px; box-shadow: 0 2px 6px rgba(40,28,18,.07), 0 16px 40px -12px rgba(40,28,18,.32), 0 42px 74px -42px rgba(40,28,18,.36);
  animation: pop-menu .14s cubic-bezier(.4,0,.2,1); transform-origin: top;
  max-height: min(72vh, 560px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
@keyframes pop-menu { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  height: 36px; padding: 0 11px; border: none; background: none;
  border-radius: 9px; font-size: 13px; font-weight: 550;
  color: var(--ink); cursor: pointer; text-align: left; transition: background .14s ease, color .14s ease, transform .16s cubic-bezier(.32,.72,0,1);
}
.menu-item:hover { background: var(--accent-soft); color: var(--accent); transform: translateX(2px); }
.menu-item .icn { color: var(--ink-3); flex-shrink: 0; }
.menu-item:hover .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 .grow { font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item .kbd { margin-left: auto; }
.menu-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 8px 10px 4px; }
.menu-sep { height: 1px; background: color-mix(in srgb, var(--ink) 8%, transparent); margin: 6px 6px; }

/* ============================================================
   Toasts
   ============================================================ */
.toast-host {
  position: fixed; bottom: 96px; right: 24px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
/* Toasts dock above the always-present Aria fab/chip (bottom-right, bottom:22,
   ~64px tall). 96px clears it whether the chip is in its normal spot OR lifted
   above a proposal cascade (then the chip sits higher still, toasts stay below). */
@media (max-width: 560px){ .toast-host { bottom: 84px; } }
.toast {
  display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 420px;
  padding: 13px 15px;
  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) 8%, transparent);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(40,28,18,.07), 0 16px 40px -12px rgba(40,28,18,.32), 0 42px 74px -42px rgba(40,28,18,.36);
  pointer-events: auto;
  animation: toast-in .26s cubic-bezier(.2,.8,.2,1);
}
.toast.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px) scale(.97); } }
.toast { position: relative; }
/* grouped duplicates read as a physical stack — a faux card peeking out behind */
.toast.stacked::after {
  content: ''; position: absolute; left: 7px; right: 7px; bottom: -4px; height: 16px; z-index: -1;
  border-radius: 0 0 13px 13px;
  background: color-mix(in srgb, var(--overlay) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-top: none;
  box-shadow: 0 12px 26px -16px rgba(40,28,18,.34);
}
/* fan-out overflow: the newest few show in full; older toasts tuck into a peeking
   pile behind them, with a "+N more" pill. Hovering the stack (or tapping the pill)
   fans everything back out. The toast keeps its transform tween so it animates. */
.toast { transition: transform .24s cubic-bezier(.2,.8,.2,1), margin-bottom .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.toast-host.collapsed .toast.piled {
  pointer-events: none;
  transform-origin: center bottom;
  transform: scale(calc(1 - .05 * (var(--p, 0) + 1)));
  margin-bottom: -46px;   /* pull the card below up so only a top sliver of this one peeks */
  opacity: calc(1 - .34 * (var(--p, 0) + 1));
  filter: saturate(.92);
}
.toast-host.collapsed .toast.piled-hidden { display: none; }
.toast-pile-more {
  pointer-events: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 1px; padding: 4px 11px 4px 9px; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  background: color-mix(in srgb, var(--overlay) 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 6px 18px -9px rgba(40,28,18,.32);
  transition: background .14s, color .14s, transform .14s;
}
.toast-pile-more:hover { color: var(--ink-1); transform: translateY(-1px); }
.toast-ic { position: relative; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
/* ×N badge when the same toast fires repeatedly */
.toast-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: var(--accent-fg);
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--overlay);
  animation: toast-count-pop .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes toast-count-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
.toast.toast-subtle .toast-count { top: -5px; right: -5px; min-width: 15px; height: 15px; font-size: 9px; }
.toast-ic.success { background: var(--st-done-soft); color: var(--st-done); }
.toast-ic.error { background: var(--st-blocked-soft); color: var(--st-blocked); }
.toast-ic.info { background: var(--accent-soft); color: var(--accent); }
.toast-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.toast-msg { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.toast-action { font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; margin-left: auto; flex-shrink: 0; }
.toast-action:hover { background: var(--accent-soft); }
/* destination hint — "Find in Trash →" etc. Lives under the title as a quiet link. */
.toast-tolink { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; line-height: 1.2; }
.toast-tolink:hover { text-decoration: underline; }
/* subtle / information toast — bare glyph, quieter weight, faster close */
.toast.toast-subtle { min-width: 220px; max-width: 360px; padding: 9px 13px; gap: 10px;
  box-shadow: 0 1px 3px rgba(40,28,18,.05), 0 8px 22px -10px rgba(40,28,18,.22); }
.toast.toast-subtle .toast-ic { width: 22px; height: 22px; border-radius: 7px; background: transparent; color: var(--ink-3); }
.toast.toast-subtle .toast-title { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.toast.toast-subtle .toast-timer { width: 22px; height: 22px; }
.toast.toast-subtle .toast-timer-num { font-size: 9.5px; }
.toast-ctrls { display: flex; align-items: center; gap: 1px; flex-shrink: 0; margin-left: 2px; opacity: 0; transition: opacity .14s; }
.toast:hover .toast-ctrls, .toast:focus-within .toast-ctrls { opacity: 1; }
.toast-ctrl { display: grid; place-items: center; width: 24px; height: 24px; border: none; background: none; border-radius: 7px; color: var(--ink-4); cursor: pointer; transition: background .14s, color .14s; }
.toast-ctrl:hover { background: var(--bg-hover); color: var(--ink-2); }
@media (hover: none) { .toast-ctrls { opacity: 1; } }
/* auto-close countdown — smooth SVG ring that depletes over the toast's life,
   FREEZES while the toast is hovered/focused (see .toast.paused), click to dismiss */
.toast-timer { position: relative; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; margin-left: 2px; transition: background .14s; }
.toast-timer:hover { background: var(--bg-active); }
.toast-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.toast-ring-trk { fill: none; stroke: var(--border); stroke-width: 2.25; }
.toast-ring-bar { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round;
  transition: stroke-dashoffset .24s linear, stroke .2s ease; }
/* frozen: the ring holds and cools to a neutral ink so "paused" reads instantly */
.toast.paused .toast-ring-bar { stroke: var(--ink-4); transition: stroke .2s ease; }
.toast-timer-num { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1; transition: color .14s; }
.toast.paused .toast-timer-num { color: var(--ink-3); }
.toast-timer-x { position: relative; z-index: 1; display: none; color: var(--ink-1); }
.toast-timer:hover .toast-timer-num { display: none; }
.toast-timer:hover .toast-timer-x { display: block; }
/* respect reduced-motion: keep the countdown readable but drop the animation */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; transition: opacity .2s ease; }
  .toast.leaving { animation: none; opacity: 0; }
  .toast-ring-bar, .tprop-ring-bar { transition: none; }
  .toast-count { animation: none; }
}

/* ============================================================
   Form fields
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field-label .req { color: var(--st-blocked); margin-left: 2px; }
.field-hint { font-size: 11.5px; color: var(--ink-4); }
.field-error { font-size: 11.5px; color: var(--st-blocked); font-weight: 500; }
.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: 10px; padding: 48px 24px; width: 100%; margin: auto;
  flex: 1 1 auto; min-height: clamp(340px, 60vh, 580px); box-sizing: border-box;
  animation: emptyIn .42s cubic-bezier(.16,.84,.44,1) both;
  /* illustration palette — light */
  --art-panel: #ffffff;
  --art-fill: #e7e4e0;
  --art-fill-soft: #efedea;
  --art-stroke: #e4e1db;
  --art-shadow: rgba(31, 36, 29, 0.055);
  --art-accent: var(--accent);
  --art-accent-fg: var(--accent-fg);
}
.dark .empty {
  --art-panel: #202020;
  --art-fill: #333333;
  --art-fill-soft: #262626;
  --art-stroke: #2f2f2f;
  --art-shadow: rgba(0, 0, 0, 0.4);
  --art-accent: rgba(255, 255, 255, 0.72);
  --art-accent-fg: #121212;
}
.empty.compact { padding: 30px 18px; min-height: 0; flex: 0 0 auto; gap: 7px; animation: none; }
.empty-ic {
  display: grid; place-items: center;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.empty.compact .empty-ic { margin-bottom: 4px; }
/* contextual illustration */
.ea-wrap { width: min(232px, 64%); margin-bottom: 14px; line-height: 0; }
.empty.compact .ea-wrap { display: none; }
.ea-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ea-card { fill: var(--art-panel); stroke: var(--art-stroke); stroke-width: 2; }
.ea-accent-card { fill: var(--art-accent); opacity: .13; }
.ea-bar { fill: var(--art-fill); }
.ea-bar2 { fill: var(--art-fill-soft); }
.ea-accent { fill: var(--art-accent); }
.ea-panel { fill: var(--art-panel); }
.ea-shadow { fill: var(--art-shadow); }
.ea-ring { fill: none; stroke: var(--art-fill); stroke-width: 2.4; }
.ea-ring-2 { fill: none; stroke: var(--art-stroke); stroke-width: 2.4; }
.ea-soft-disc { fill: var(--art-accent); opacity: .1; }
.ea-track { stroke: var(--art-fill); stroke-width: 3; stroke-linecap: round; fill: none; }
.ea-hr { stroke: var(--art-stroke); stroke-width: 1.5; }
.ea-tray { fill: none; stroke: var(--art-stroke); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ea-glass { fill: var(--art-panel); stroke: var(--art-accent); stroke-width: 3; }
.ea-glass-h { stroke: var(--art-accent); stroke-width: 4; stroke-linecap: round; }
.ea-check { fill: none; stroke: var(--art-accent-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ea-check-lg { fill: none; stroke: var(--art-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.empty-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.empty.compact .empty-title { font-size: var(--fs-md); }
.empty-hint { font-size: var(--fs-sm); color: var(--ink-3); max-width: 360px; line-height: 1.55; }
.empty-act { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.empty:not(.compact) .empty-act .btn.primary { height: 40px; padding: 0 20px; border-radius: 11px; font-weight: 600; }
@keyframes emptyIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .empty { animation: none; } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.opt-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all .12s;
}
.opt-chip:hover { border-color: var(--border-strong); }
.opt-chip.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.opt-chip .dot { width: 8px; height: 8px; }
.modal-hd { display: flex; align-items: center; gap: 10px; padding: 14px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-glyph { display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* file-drop zone */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); padding: 30px; 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-sidebar); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; transition: background .2s, border-color .2s, box-shadow .2s; 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: 16px; align-items: 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: 10px; scroll-snap-type: x proximity; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
  .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: 10px; flex-wrap: nowrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.kf-meta { display: flex; align-items: center; gap: 11px; min-width: 0; overflow: hidden; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.kf-meta > * { display: inline-flex; align-items: center; gap: 4px; 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; } }
.kbn-col.drop-active { background: var(--bg-active); }
.kbn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; cursor: grab; user-select: none; box-shadow: var(--shadow-xs); transition: border-color .16s, box-shadow .16s; container: kcard / inline-size; }
.kbn-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.kbn-card:active { cursor: grabbing; }
.kbn-card.dragging { cursor: grabbing; box-shadow: var(--shadow-lg); border-color: var(--accent); z-index: 50; position: relative; }
.kbn-grip { color: var(--ink-4); opacity: 0; transition: opacity .14s, color .14s; cursor: grab; }
.kbn-card:hover .kbn-grip { opacity: 1; }
.kbn-grip:hover { color: var(--accent); }
/* drop placeholder shown in the target column while dragging */
.kbn-drop { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r-md); border: 2px dashed var(--border-strong); background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 600; overflow: hidden; animation: kbn-drop-in .2s cubic-bezier(.2,.8,.2,1); }
@keyframes kbn-drop-in { from { opacity: 0; transform: scale(.97); } 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: 7px; justify-content: center; padding: 9px; margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; transition: all .14s; }
.kbn-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.kbn-list { display: flex; flex-direction: column; gap: 10px; min-height: 8px; }
.kbn-empty { padding: 14px 10px; text-align: center; color: var(--ink-4); font-size: 12px; border: 1px dashed var(--border); border-radius: var(--r-md); }
/* drop placeholder — dashed outline of where the card will land */
.kbn-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; }
/* column header */
.kbn-colhd { gap: 6px; margin-bottom: 12px; padding: 2px 2px 2px 4px; }
.kbn-colhd > .row { min-width: 0; flex: 1; }
.kbn-colhd .dot { flex-shrink: 0; }
.kbn-coltitle { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.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.6deg); will-change: left, top; }
.kbn-clone .kbn-card { margin: 0; box-shadow: 0 26px 50px -14px rgba(31,36,29,.42); cursor: grabbing; }
.kbn-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-sunken); font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* refined list rows */
.tlist-wrap { min-width: 0; }
.tlist { display: flex; flex-direction: column; user-select: none; }
.trow { display: grid; grid-template-columns: 16px 20px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border-bottom: 1px solid var(--border-subtle); cursor: pointer; position: relative; }
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--bg-hover); }
.trow-grip { width: 16px; height: 24px; color: var(--ink-4); opacity: 0; transition: opacity .14s, color .14s, background .14s; cursor: grab; display: grid; place-items: center; border-radius: 5px; justify-self: center; }
.trow:hover .trow-grip { opacity: .5; }
.trow:hover .trow-grip:hover { color: var(--accent); opacity: 1; background: var(--bg-active); }
.trow-grip:active { cursor: grabbing; }
.trow.dragging-row { box-shadow: var(--shadow-lg); border-radius: var(--r-md); border-bottom-color: transparent; z-index: 20; }
/* animated check */
.tcheck { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--border-strong); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background .15s; flex-shrink: 0; }
.tcheck:hover { border-color: var(--accent); }
.tcheck.on { background: var(--accent); border-color: var(--accent); }
.tcheck svg { width: 12px; height: 12px; }
.tcheck svg path { stroke: var(--accent-fg); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .22s ease .02s; }
.tcheck.on svg path { stroke-dashoffset: 0; }
/* tick legibility safety-net: every check-toggle centres its glyph as a block
   (grid place-items handles layout; display:block kills inline baseline drift) */
.tcheck svg, .fx-check svg, .tcheck-todo svg { display: block; }
.row-meta { display: flex; align-items: center; gap: 14px; }
/* refined list — responsive: shed lower-priority meta as the list narrows */
.tlist { container: tlist / inline-size; }
@container tlist (max-width: 680px) { .row-meta { gap: 10px; } .row-meta > span:first-child { display: none; } }
@container tlist (max-width: 480px) { .row-meta .task-att { display: none; } .row-meta { gap: 8px; } }
/* 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: 9px; padding: 11px 12px; } .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: 4px 10px; 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(31,36,29,.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: 12px; padding: 0 2px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.ttrash-bar-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.ttrash-bar-note .icn { color: var(--ink-4); }
.ttrash-empty { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--st-blocked); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 7px; 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: 12px; padding: 11px 6px; 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: 10px; }
.ttrash-selall { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ttrash-act.ghost { border-color: transparent; background: transparent; color: var(--ink-4); padding: 5px 7px; }
.ttrash-act.ghost:hover { background: var(--bg-hover); color: var(--ink-2); }
.ttrash-main { min-width: 0; }
.ttrash-name { font-weight: 550; font-size: 13.5px; color: var(--ink-2); }
.ttrash-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 11.5px; 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 7px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); font-weight: 600; flex-shrink: 0; }
.ttrash-left { font-size: 11px; 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: 6px; }
.ttrash-act { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 11px; border-radius: 7px; transition: background .14s, border-color .14s, color .14s; }
.ttrash-act:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.ttrash-act.danger { padding: 5px 8px; color: var(--ink-4); }
.ttrash-act.danger:hover { color: var(--st-blocked); border-color: var(--st-blocked); background: var(--st-blocked-soft); }
.ttrash-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; gap: 6px; }
.ttrash-empty-ic { display: grid; place-items: center; color: var(--ink-4); margin-bottom: 6px; }
.ttrash-empty-t { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ttrash-empty-s { font-size: 12.5px; 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: 16px; 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: 9px; padding: 2px 2px 12px; }
.tcr-count { font-size: 12px; font-weight: 600; color: var(--ink-4); background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px; }
.tcr-seg { display: flex; gap: 2px; background: var(--bg-sunken); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.tcr-seg button { flex: 1; border: none; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; padding: 6px 8px; 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: 14px; }
.tcr-sec-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 0 2px 6px; }
.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: 4px 6px; margin: 0 -6px 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: 5px; }
.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: 9px; padding: 3px; margin-bottom: 16px; width: fit-content; }
/* retention policy selector in the hub header */
.trh-ret { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; 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: 8px; padding: 5px 9px; 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: 7px; border: none; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; padding: 6px 13px; 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 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 16%, transparent); color: var(--ink-2); font-size: 10.5px; 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 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 15%, transparent); color: var(--ink-3); font-size: 11px; 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: 22px; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.trh-audit-h { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 4px 2px; font-size: 12px; 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 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 14%, transparent); color: var(--ink-3); font-size: 10.5px; 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: 6px; }
.trh-audit-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 12.5px; 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: 11px; color: var(--ink-4); white-space: nowrap; flex-shrink: 0; }
.trh-audit-more { border: none; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 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: 9px; padding: 7px 6px; border-radius: 8px; 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: 6px; }
.tcr-name { font-size: 13px; 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: 5px; margin-top: 2px; font-size: 11px; color: var(--ink-4); min-width: 0; }
.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: 12.5px; color: var(--ink-4); padding: 24px 6px; text-align: center; }
.tcr-hint { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-4); padding: 8px 6px 2px; border-top: 1px solid var(--border-subtle); margin-top: 4px; }
@media (max-width: 920px) { .tcal-shell { grid-template-columns: 1fr; } .tcal-rail { position: static; max-height: none; order: 2; } }

/* compact task metrics — borderless hairline strip */
.tmetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 20px; padding: 2px 0 16px; border-bottom: 1px solid var(--border-subtle); }
.tmetric { display: flex; align-items: center; gap: 11px; background: none; border: none; border-radius: 0; padding: 4px 20px; box-shadow: none; }
.tmetric + .tmetric { border-left: 1px solid var(--border-subtle); }
.tmetric:first-child { padding-left: 2px; }
.tmetric-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.tmetric-body { min-width: 0; }
.tmetric-label { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmetric-row { display: flex; align-items: baseline; gap: 8px; }
.tmetric-val { font-family: var(--font-serif); font-size: 23px; font-weight: 460; letter-spacing: -0.02em; line-height: 1; }

/* ============================================================
   Approvals
   ============================================================ */
.appr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-xs); }
.appr-scope { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.appr-status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.appr-status.pending { background: var(--st-review-soft); color: var(--st-review); }
.appr-status.approved { background: var(--st-done-soft); color: var(--st-done); }
.appr-status.changes { background: var(--st-planning-soft); color: var(--st-planning); }
.appr-status.rejected { background: var(--st-blocked-soft); color: var(--st-blocked); }
.ext-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.seg-gear { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); transition: all .14s; }
.seg-gear:hover { border-color: var(--accent); color: var(--accent); }

/* approval card → clickable + files hint */
.appr-card.clickable { cursor: pointer; transition: box-shadow .16s, transform .16s; }
.appr-card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.appr-card-files { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 550; color: var(--ink-3); background: var(--bg-sunken); padding: 4px 9px; border-radius: 999px; white-space: nowrap;margin-bottom: 12px; }

/* ===== Approvals redesign ===== */
.appr-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-bottom: 22px; }
.appr-kpi { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); }
.appr-kpi.accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.appr-kpi-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.appr-kpi-v { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.appr-kpi-k { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.2; }

.appr-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.appr-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: none; background: none; color: var(--ink-3); font-size: 13.5px; 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: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.appr-tab.on .appr-tab-n { background: var(--accent); color: var(--accent-fg); }

.appr-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.appr-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); width: 248px; transition: border-color .14s, box-shadow .14s; }
.appr-search:focus-within { border-color: var(--accent); }
.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: 13px; 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; }
.appr-search button:hover { color: var(--ink); background: var(--bg-hover); }
.appr-tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.appr-tool:hover { border-color: var(--accent); color: var(--accent); }
.appr-tool.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.appr-tool-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }

.appr-bulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); margin-bottom: 14px; animation: appr-slidedown .2s cubic-bezier(.32,.72,0,1); }
@keyframes appr-slidedown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.appr-bulk-n { font-size: 13px; font-weight: 700; color: var(--accent); }

/* redesigned card */
.appr-card-anim { animation: rise .28s cubic-bezier(.2,.8,.2,1) both; }
.appr-card2 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 17px; box-shadow: var(--shadow-xs); }
.appr-card2.clickable { cursor: pointer; transition: box-shadow .16s, transform .16s, border-color .16s; }
.appr-card2.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.appr-card2.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.appr-card2-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.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: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.appr-vchip { font-size: 10.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-active); padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.appr-due { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.appr-due.overdue { color: var(--st-blocked); background: var(--st-blocked-soft); }
.appr-due.today { color: var(--st-planning); background: var(--st-planning-soft); }
.appr-due.soon { color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, transparent); }
.appr-due.later { color: var(--ink-3); background: var(--bg-sunken); }
.appr-card2-title { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 5px; }
.appr-card2-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.appr-rel { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.appr-rel-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--bg-sidebar); border: 1px solid var(--border-subtle); font-size: 11.5px; font-weight: 550; color: var(--ink-2); transition: border-color .12s; }
.appr-rel-chip:hover { border-color: var(--border-strong); }
.appr-rel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.appr-fstrip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.appr-fchip { display: inline-flex; align-items: center; gap: 7px; max-width: 190px; height: 28px; padding: 0 10px 0 4px; border-radius: 8px; background: var(--bg-sidebar); border: 1px solid var(--border-subtle); font-size: 11.5px; font-weight: 550; color: var(--ink-2); }
.appr-fchip-thumb { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.appr-fchip.more { padding: 0 10px; color: var(--ink-3); font-weight: 700; height: 28px; align-items: center; }
.appr-flow { display: flex; align-items: center; gap: 10px; padding: 11px 0 0; border-top: 1px solid var(--border-subtle); }
.appr-flow-side { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.appr-flow-side.right { margin-left: auto; justify-content: flex-end; }
.appr-flow-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.appr-flow-role { font-size: 11px; 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: 50%; background: color-mix(in srgb, var(--c-blue) 14%, 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: 8px; margin-top: 13px; }
.appr-card2-decision { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--ink-3); font-style: italic; }

/* rail */
.appr-rail-h { font-size: var(--fs-md); font-weight: 600; margin: 0 0 12px; }
.appr-break-row { padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.appr-break-row:last-child { border-bottom: none; }
.appr-timeline { display: flex; flex-direction: column; gap: 2px; }
.appr-tl-row { display: flex; align-items: center; gap: 10px; padding: 8px 7px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.appr-tl-row:hover { background: var(--bg-hover); }
.appr-tl-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.appr-tl-t { font-size: 12.5px; font-weight: 600; }
.appr-tl-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* approval chain (drawer) */
.appr-chain { display: flex; flex-direction: column; gap: 0; margin-bottom: 22px; }
.appr-chain-step { display: flex; align-items: center; gap: 12px; padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--border-subtle); position: relative; }
.appr-chain-step:first-child { border-radius: 12px 12px 0 0; }
.appr-chain-step:last-child { border-radius: 0 0 12px 12px; }
.appr-chain-step:not(:last-child) { border-bottom: none; }
.appr-chain-step.approved { background: color-mix(in srgb, var(--st-done) 6%, var(--surface)); }
.appr-chain-step.pending { background: var(--accent-soft); }
.appr-chain-node { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-active); color: var(--ink-3); }
.appr-chain-step.approved .appr-chain-node { background: var(--st-done); color: #fff; }
.appr-chain-step.pending .appr-chain-node { background: var(--accent); color: var(--accent-fg); }
.appr-chain-num { font-size: 11px; font-weight: 700; }
.appr-chain-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: md-pulse 1.6s infinite; }
.appr-chain-body { flex: 1; min-width: 0; }
.appr-chain-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.appr-chain-ext { width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--c-blue) 14%, transparent); color: var(--c-blue); display: grid; place-items: center; }
.appr-chain-role { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* related items (drawer) */
.appr-related { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.appr-rel-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; }
.appr-rel-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.appr-rel-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.appr-rel-t { font-size: 13px; font-weight: 600; }
.appr-rel-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* discussion thread (drawer) */
.appr-thread { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.appr-comment { display: flex; gap: 10px; }
.appr-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.appr-comment-head b { font-size: 12.5px; font-weight: 700; }
.appr-comment-head .muted { font-size: 11px; }
.appr-comment-tx { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.appr-comment-box { display: flex; align-items: center; gap: 9px; }
.appr-comment-box input { flex: 1; min-width: 0; height: 38px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--ink); outline: none; font-family: inherit; transition: border-color .14s, box-shadow .14s; }
.appr-comment-box input:focus { border-color: var(--accent); }
.appr-comment-send { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .14s, opacity .14s; }
.appr-comment-send:hover { background: var(--accent-700); }
.appr-comment-send:disabled { opacity: .4; cursor: default; }

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

/* ===== Approvals — Editorial Calm redesign ===== */
/* borderless hairline stat strip */
.appr-mstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 22px; padding: 2px 0 16px; border-bottom: 1px solid var(--border-subtle); }
.appr-mcell { padding: 2px 22px; min-width: 0; }
.appr-mcell:first-child { padding-left: 2px; }
.appr-mcell + .appr-mcell { border-left: 1px solid var(--border-subtle); }
.appr-mcell-v { font-size: 25px; 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: 11.5px; color: var(--ink-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.appr-mcell-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 1100px){ .appr-mstrip { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } }

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

/* borderless rows */
.appr-row-anim { animation: rise .26s cubic-bezier(.2,.8,.2,1) both; }
.appr-row { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 10px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .14s; user-select: none; }
.appr-row:hover { background: var(--bg-sunken); }
.appr-row.sel { background: var(--accent-soft); }
.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: 8px; min-width: 0; }
.appr-row-title { font-size: 14.5px; 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: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--bg-sunken); color: var(--ink-3); flex-shrink: 0; }
.appr-tag.ext { background: color-mix(in srgb, var(--c-blue) 13%, transparent); color: var(--c-blue); display: inline-flex; align-items: center; gap: 4px; }
.appr-tag.warn { background: color-mix(in srgb, var(--c-clay) 14%, transparent); color: var(--c-clay); display: inline-flex; align-items: center; gap: 4px; }
.appr-tag.esc { background: color-mix(in srgb, var(--c-gold) 16%, transparent); color: var(--c-gold-700, #9a7d2e); display: inline-flex; align-items: center; gap: 4px; }
.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: #fff; 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: 9px; padding: 9px 12px; margin-bottom: 10px; border-radius: 11px; background: var(--bg-sunken); font-size: 13px; color: var(--ink-2); position: sticky; top: 6px; z-index: 5; box-shadow: var(--shadow-sm); }
.appr-bulk-all { border: none; background: none; padding: 0; cursor: pointer; display: inline-flex; }
.appr-bulk-x { border: none; background: none; cursor: pointer; color: var(--ink-4); padding: 4px; border-radius: 6px; display: inline-flex; }
.appr-bulk-x:hover { background: var(--bg-hover); color: var(--ink-2); }
.appr-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; 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: 5px; flex-shrink: 0; }
.appr-statp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; 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: 6px; flex-shrink: 0; opacity: 0; transition: opacity .14s; }
.appr-row:hover .appr-row-acts, .appr-row.selmode .appr-row-acts { opacity: 1; }
.appr-row-open { flex-shrink: 0; }
.appr-empty { min-height: 200px; display: grid; place-items: center; text-align: center; color: var(--ink-2); padding: 40px 0; }

/* send modal — due presets */
.appr-due-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.appr-due-opt { height: 32px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.appr-due-opt:hover { border-color: var(--border-strong); }
.appr-due-opt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ── task dependencies (blocked-by) ─────────────────────────── */
.dep-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 6px 3px 8px; border-radius: 7px; 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: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); background: none; border: 1px dashed var(--border-strong); border-radius: 7px; padding: 3px 9px; 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: 9px; padding: 10px 13px; border-radius: 10px; background: var(--st-blocked-soft); color: var(--st-blocked); font-size: 13px; font-weight: 550; margin-bottom: 16px; }
.task-blocking-note { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-700); font-size: 12.5px; font-weight: 550; margin-bottom: 16px; }
.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: 11px; padding: 9px 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: 10px; font-weight: 700; padding: 2px 7px; 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: 12px; }
.pbud-spent { font-size: 26px; font-weight: 730; color: var(--ink); letter-spacing: -.01em; }
.pbud-of { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.pbud-tier { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pbud-track { height: 10px; border-radius: 6px; background: var(--bg-sunken); overflow: hidden; }
.pbud-track i { display: block; height: 100%; border-radius: 6px; transition: width .4s cubic-bezier(.22,.61,.36,1); }
.pbud-split { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.pbud-split-item { display: flex; align-items: center; gap: 9px; font-size: 13px; 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: 9px; margin-top: 2px; font-weight: 600; color: var(--ink); }
.pbud-forecast { border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 14px; }
.pbud-fc-hd { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 11px; }
.pbud-fc-chart { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: 13px; }
.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: 24px; }
.pbud-fc-fig { display: flex; flex-direction: column; gap: 2px; }
.pbud-fc-v { font-size: 15px; font-weight: 700; color: var(--ink); }
.pbud-fc-v.neg { color: var(--st-blocked); }
.pbud-fc-k { font-size: 10.5px; color: var(--ink-3); }
/* project drawer — at-risk tasks */
.pd-risk-bar { display: inline-flex; gap: 2px; background: var(--bg-sunken); border-radius: 9px; padding: 3px; margin-bottom: 4px; }.pd-risk-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: none; background: transparent; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background .12s ease, color .12s ease; }
.pd-risk-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.pd-risk-tab:hover:not(.on) { color: var(--ink-2); }
.pd-risk-n { font-size: 10.5px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); display: inline-grid; place-items: center; }
.pd-risk-tab.on .pd-risk-n { background: var(--accent-soft); color: var(--accent); }
.pd-tflag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; 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 4px 2px 2px; border-radius: 999px; cursor: pointer; transition: background .12s ease; }
.pd-reassign:hover { background: var(--bg-hover); }
.pd-check { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-items: center; cursor: pointer; color: #fff; transition: background .12s ease, border-color .12s ease; padding: 0; }
.pd-check:hover { border-color: var(--accent); }
.pd-check.on { background: var(--accent); border-color: var(--accent); }
.pd-task-sel { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pd-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); }
.pd-bulk-n { font-size: 12.5px; font-weight: 650; color: var(--accent); }
/* project drawer — canvas boards grid */
.pd-cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pd-cv-grid .cvh-card-thumb { height: 158px; display: grid; place-items: center; }
.pd-cv-new { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.pd-cv-new:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.pd-cv-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 212px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: transparent; cursor: pointer; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 600; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.pd-cv-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pd-cv-cbadge { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--c-clay); color: #fff; font-size: 11px; 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 6px; font-size: 10px; gap: 2px; }
/* project overview — compact boards strip */
.pd-ov-boards { margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--border-subtle); }
.pd-ov-boards-hd { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.pd-ov-boards-hd .muted { font-weight: 600; }
.pd-ov-boards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-ov-board { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--surface); cursor: pointer; text-align: left; padding: 0; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.pd-ov-board:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pd-ov-board-thumb { position: relative; width: 100%; height: 96px; overflow: hidden; background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); }
.pd-ov-board-thumb .cvh-thumb { transform: scale(.54); transform-origin: top left; }
.pd-ov-board-ft { display: flex; align-items: center; gap: 6px; padding: 7px 9px; min-width: 0; }
.pd-ov-board-ic { flex-shrink: 0; display: inline-flex; }
.pd-ov-board-nm { font-size: 12px; font-weight: 600; color: var(--ink); }
.pd-mtg-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.pd-mtg-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.pd-mtg-ic { flex-shrink: 0; display: inline-flex; }
.pd-mtg-t { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.pd-mtg-s { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.pd-ov-cfiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pd-ov-cfile { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; text-align: left; }
.pd-ov-cfile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pd-ov-cfile-thumb { width: 100%; height: 58px; display: grid; place-items: center; overflow: hidden; background: var(--bg-sunken); color: var(--ink-4); }
.pd-ov-cfile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-ov-cfile-nm { font-size: 10.5px; font-weight: 600; color: var(--ink-2); padding: 0 6px 6px; }
.trow-blocked { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 1px 7px; border-radius: 999px; }
.kbn-blocked { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
/* ── 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: 6px; flex-wrap: wrap; }
.hl-sw { width: 24px; height: 24px; border-radius: 7px; 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; }
.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: 10px; padding: 7px 8px; border-radius: 10px; 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: 13.5px; 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: 7px; margin-top: 8px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-3); font-size: 12.5px; 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: 5px; height: 28px; padding: 0 7px; 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: 12px; margin-bottom: 20px; }
.appr-meta { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-md); }
.appr-meta-k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.appr-meta-v { font-size: 13px; font-weight: 550; color: var(--ink); }
.appr-sec-hd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin: 18px 0 11px; }
.appr-sec-hd .icn { color: var(--ink-3); }
.appr-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); background: var(--surface-2); padding: 13px 15px; border-radius: var(--r-md); margin: 0; }
.appr-files { display: flex; flex-direction: column; gap: 8px; }
.appr-file { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; padding: 9px 11px 9px 9px; background: var(--surface-2); border-radius: var(--r-md); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .14s, transform .14s; }
.appr-file:hover { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); transform: translateY(-1px); }
.appr-file-thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; overflow: hidden; }
.appr-file-badge { position: absolute; bottom: 4px; right: 4px; font-size: 7.5px; font-weight: 700; letter-spacing: .04em; background: rgba(0,0,0,.34); color: #fff; padding: 1px 4px; border-radius: 3px; }
.appr-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.appr-file-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appr-file-sub { font-size: 11.5px; color: var(--ink-3); }
.appr-file-eye { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; transition: background .14s, color .14s; }
.appr-file:hover .appr-file-eye { background: var(--accent-soft); color: var(--accent); }
.appr-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(20,18,16,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 40px; animation: fade-in .16s ease; }
.appr-boardlink { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.appr-boardlink:hover { border-color: color-mix(in srgb, var(--c-mauve) 40%, transparent); background: color-mix(in srgb, var(--c-mauve) 6%, transparent); }
.appr-boardlink-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-mauve) 14%, transparent); color: var(--c-mauve); flex-shrink: 0; }
.appr-boardlink-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.appr-boardlink-s { font-size: 12px; 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: rgba(255,255,255,.92); }
.appr-lightbox-bar { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.appr-lightbox-bar > div:first-child { flex: 1; min-width: 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── quick planning tools row ─────────────────────────────── */
.plan-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 760px){ .plan-tools { grid-template-columns: repeat(2, 1fr); } }
.plan-tool { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; text-align: left; transition: box-shadow .14s, transform .14s; }
.plan-tool:hover { box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); transform: translateY(-1px); }
.plan-tool-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.plan-tool-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-tool-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.plan-tool-desc { font-size: 11px; color: var(--ink-3); }

/* ── mini month calendar ──────────────────────────────────── */
.mini-cal { padding: 14px; overflow: visible; position: relative; }
.mc-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mc-nav { width: 26px; height: 26px; border-radius: 7px; 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, 1fr); gap: 2px; }
.mc-dow { margin-bottom: 4px; }
.mc-dowc { text-align: center; font-size: 10px; font-weight: 600; color: var(--ink-4); padding: 2px 0; }
.mc-cell { position: relative; aspect-ratio: 1; border: none; background: transparent; border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); transition: background .12s; }
.mc-cell.empty { cursor: default; }
.mc-cell:not(.empty):hover { background: var(--bg-hover); }
.mc-num { font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.mc-cell.has .mc-num { color: var(--ink); font-weight: 600; }
.mc-cell.today { background: var(--accent-soft); }
.mc-cell.today .mc-num { color: var(--accent); font-weight: 700; }
.mc-cell.sel { box-shadow: inset 0 0 0 1.5px var(--accent); }
.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: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.mc-day-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.mc-day-date { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.mc-day-list { display: flex; flex-direction: column; gap: 5px; }
.mc-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: var(--surface-2); border-radius: 9px; padding: 7px 9px; cursor: pointer; transition: background .12s, transform .12s; }
.mc-item:hover { background: var(--bg-hover); transform: translateX(2px); }
.mc-item-bar { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.mc-item-title { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-item-sub { display: block; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-day-empty { font-size: 12px; color: var(--ink-4); font-style: italic; padding: 6px 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: 11px 13px; pointer-events: none; animation: hover-pop .14s cubic-bezier(.2,.8,.2,1); }
.mc-pop-hd { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.mc-pop-hd .muted { font-weight: 500; }
.mc-pop-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mc-pop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mc-pop-title { font-size: 12px; 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: 10.5px; color: var(--ink-4); flex-shrink: 0; }
.mc-pop-more { font-size: 10.5px; color: var(--ink-4); margin-top: 5px; }

/* ── weekly tools ─────────────────────────────────────────── */
.wtools { padding: 14px; }
.wtools-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wtools-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--st-done); background: var(--st-done-soft); padding: 3px 9px; border-radius: 999px; }
.wtools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wtool { padding: 12px; background: var(--surface-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 3px; }
.wtool-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 4px; }
.wtool-val { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.wtool-label { font-size: 11px; font-weight: 550; color: var(--ink-2); line-height: 1.3; }
.wtool-sub { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   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: 40px; font-weight: 600; line-height: 1.12; border: none; background: none; width: 100%; color: var(--ink); padding: 0; margin: 0 0 6px; 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: 4px; transition: opacity .12s; margin-left: -68px; 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; }
.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: 4px 10px; 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: 8px; background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px 10px; width: 340px; }
.doc-ai-prompt input { flex: 1; border: none; background: none; outline: none; font-size: 13.5px; color: var(--ink); }

/* "rewrite with Aria" field affordance (New Project/Task description, etc.) */
.field-ai-wrap { position: relative; }
.field-ai-btn { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: none; border-radius: 7px; background: var(--bg-sunken); color: var(--ink-3); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.field-ai-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.field-ai-btn.busy, .field-ai-btn:disabled { color: var(--accent); 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: 7px; 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: -6px; 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: 10px; }
.blk-annot-hd { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }
.blk-annot-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.blk-annot-item { display: flex; gap: 8px; 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: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.blk-annot-compose input { flex: 1; border: none; background: var(--surface-2); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; outline: none; color: var(--ink); }

/* ── beautiful blocks ───────────────────────────────────────── */
.docblk-banner { display: flex; align-items: center; gap: 14px; padding: 26px 22px; border-radius: var(--r-md); margin: 10px 0; color: #fff; }
.docblk-banner-emoji { border: none; background: rgba(255,255,255,.18); font-size: 24px; cursor: pointer; line-height: 1; padding: 8px; border-radius: 12px; 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: 28px; 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: 16px; margin: 6px 0; }
.docblk-columns.three { grid-template-columns: 1fr 1fr 1fr; }
/* progress */
.docblk-progress { margin: 12px 0; }
.docblk-progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.docblk-progress-label { border: none; background: none; outline: none; font-size: 14px; 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: 17px; 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: 12px 0; padding: 14px 18px; background: var(--surface-2); border-radius: var(--r-md); }
.docblk-toc-hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.docblk-toc-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-size: 14.5px; color: var(--ink-2); padding: 4px 0; border-radius: 6px; transition: color .12s; }
.docblk-toc-item:hover { color: var(--accent); }
.docblk-toc-item.lvl-h2 { padding-left: 16px; font-size: 13.5px; }
.docblk-toc-item.lvl-h3 { padding-left: 32px; font-size: 13px; color: var(--ink-3); }
.docblk-toc-empty { font-size: 13px; color: var(--ink-4); font-style: italic; }
/* file attachment */
.docblk-file { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; 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: 9px; 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: 14px; font-weight: 600; color: var(--ink); }
.docblk-file-size { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.docblk-file-dl { width: 32px; height: 32px; border-radius: 8px; 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: 15px; line-height: 1.6; color: var(--ink); padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-family: inherit; }
.docblk-col::placeholder { color: var(--ink-4); }
.docblk-stats { display: flex; gap: 12px; margin: 10px 0; }
.docblk-stat { flex: 1; background: var(--surface-2); border-radius: var(--r-md); padding: 16px 14px; text-align: center; }
.docblk-stat-val { width: 100%; border: none; background: none; outline: none; text-align: center; font-family: var(--font-serif); font-size: 26px; 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: 12px; color: var(--ink-3); margin-top: 4px; }
.docblk-steps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.docblk-step { display: flex; align-items: flex-start; gap: 12px; }
.docblk-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: 13px; 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: 15px; line-height: 1.5; color: var(--ink); padding: 3px 0; font-family: inherit; }
.docblk-step-x { border: none; background: none; color: var(--ink-4); cursor: pointer; opacity: 0; transition: opacity .12s; padding: 4px; }
.docblk-step:hover .docblk-step-x { opacity: 1; }
.docblk-step-add, .docblk-tag-add { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--ink-4); font-size: 12.5px; cursor: pointer; padding: 4px 6px; border-radius: 6px; align-self: flex-start; }
.docblk-step-add { margin-left: 38px; }
.docblk-step-add:hover, .docblk-tag-add:hover { color: var(--accent); background: var(--accent-soft); }
.docblk-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; align-items: center; }
.docblk-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border-radius: 999px; padding: 4px 6px 4px 11px; box-shadow: inset 0 0 0 1px var(--border); }
.docblk-tag input { border: none; background: none; outline: none; font-size: 12.5px; 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: 18px 22px; margin: 10px 0; }
.docblk-qc-mark { position: absolute; top: 6px; left: 14px; font-family: var(--font-serif); font-size: 44px; 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: 18px; font-style: italic; color: var(--ink); width: 100%; line-height: 1.45; padding-left: 18px; }
.docblk-qc-by { display: flex; gap: 10px; margin-top: 10px; padding-left: 18px; }
.docblk-qc-author { border: none; background: none; outline: none; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.docblk-qc-role { border: none; background: none; outline: none; font-size: 13px; 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: 4px 2px; border-radius: 6px; outline: none; font-size: 15.5px; 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: 28px; font-weight: 600; line-height: 1.25; padding-top: 18px; letter-spacing: -0.01em; }
.docblk.h2 { font-family: var(--docm-font-head, var(--font-serif)); font-size: 21px; font-weight: 600; padding-top: 14px; }
.docblk.h3 { font-family: var(--docm-font-head, inherit); font-size: 17px; font-weight: 650; padding-top: 8px; }
.docblk.text { font-size: 15.5px; }

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

/* toggle */
.docblk-toggle { margin: 2px 0; }
.docblk-toggle-hd { display: flex; gap: 4px; align-items: flex-start; }
.docblk-toggle-caret { border: none; background: none; color: var(--ink-3); cursor: pointer; padding: 5px 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: 24px; padding: 6px 10px; background: var(--surface-2); border-radius: 8px; font-size: 14.5px; color: var(--ink-2); }

/* callout card */
.docblk-callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-md); margin: 8px 0; }
.docblk-callout-emoji { border: none; background: none; font-size: 19px; 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: 14.5px; padding: 2px 0; }

/* code card */
.docblk-code { background: #1c1c20; border-radius: var(--r-md); overflow: hidden; margin: 10px 0; }
.docblk-code-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.docblk-code-dots { display: flex; gap: 5px; }
.docblk-code-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.docblk-code-lang { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--font-mono); margin-left: 4px; }
.docblk-code-copy { margin-left: auto; border: none; background: none; color: rgba(255,255,255,.5); cursor: pointer; display: grid; place-items: center; padding: 4px; 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: 13px; line-height: 1.6; padding: 13px 14px; }
.docblk.code-area::placeholder { color: rgba(255,255,255,.3); }

/* image */
.docblk-image { position: relative; margin: 10px 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: 12.5px; color: var(--ink-3); text-align: center; padding: 8px 0 2px; font-style: italic; }
.docblk-img-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: 8px; 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: 4px; width: 100%; padding: 26px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); cursor: pointer; border: none; margin: 8px 0; transition: background .14s; }
.docblk-placeholder:hover { background: var(--bg-active); color: var(--ink-2); }
.docblk-ph-sub { font-size: 11.5px; color: var(--ink-4); }

/* bookmark / embed / url entry */
.docblk-card-wrap { position: relative; margin: 10px 0; }
.docblk-urlentry { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-md); margin: 8px 0; }
.docblk-urlentry input { flex: 1; border: none; background: none; outline: none; font-size: 13.5px; color: var(--ink); }
.docblk-embed { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); margin: 10px 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: 42px; font-weight: 600; opacity: .9; }
.docblk-embed-chip { position: absolute; bottom: 10px; left: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,.3); padding: 4px 9px; border-radius: 999px; }
.docblk-embed-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.docblk-embed-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* button block */
.docblk-buttonwrap { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.docblk-button { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--r-sm); padding: 9px 16px; 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: 11.5px; color: var(--ink-4); }

/* table */
.docblk-table-wrap { margin: 10px 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: 8px 10px; font-size: 13.5px; 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: 6px; margin-top: 6px; }
.docblk-table-tools button { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); background: var(--surface-2); border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.docblk-table-tools button:hover { background: var(--bg-active); color: var(--ink); }

.doc-addblock { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 6px; width: 100%; border: none; background: none; color: var(--ink-4); font-size: 14px; cursor: pointer; border-radius: 6px; transition: background .12s; }
.doc-addblock:hover { background: var(--bg-hover); color: var(--ink-2); }
.doc-addblock-hint { font-size: 11.5px; 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: 16.5px; background: transparent; border: none; border-radius: 0; padding: 30px 56px 84px; box-shadow: none; margin-top: 0; }
.dark .doc-editor .doc-wrap { background: transparent; }
.doc-shell.focus .doc-wrap { padding: 26px 52px 84px; }
.doc-editor .blk-row { transition: opacity .25s ease; }
.doc-topbar .doc-kbd { font-size: 10px; padding: 1px 5px; border-radius: 5px; background: var(--bg-active); color: var(--ink-3); margin-left: 5px; letter-spacing: .02em; }
.doc-topbar .btn.icon { position: relative; }
.doc-topbar .btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.doc-btn-n { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 4px; 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: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .14s; }
.doc-focus-exit:hover { color: var(--ink); border-color: var(--border-strong); }

/* 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: 12px 14px; 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: 10.5px; color: var(--ink-3); background: var(--bg-active); padding: 2px 7px; border-radius: 999px; }
.doc-aichat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.doc-msg { display: flex; gap: 8px; align-items: flex-start; }
.doc-msg.me { justify-content: flex-end; }
.doc-msg-bub { font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 13px; 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: 4px; 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: 6px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.doc-quickchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; 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 { opacity: .5; cursor: default; }
.doc-aichat-compose { display: flex; gap: 8px; padding: 12px; 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: 11px; padding: 8px 11px; font: inherit; font-size: 13px; 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: rgba(31,36,29,.35); z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fade .15s ease; }
.dark .docpal-scrim { background: rgba(0,0,0,.55); }
.docpal { width: 560px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; animation: drawerPop .18s cubic-bezier(.4,0,.2,1); }
.docpal-input { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid var(--border-subtle); }
.docpal-input input { flex: 1; border: none; background: none; outline: none; font-size: 16px; 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: 10px; color: var(--ink-4); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.docpal-body { max-height: 366px; overflow-y: auto; padding: 8px; }
.docpal-target { font-size: 11.5px; color: var(--ink-3); padding: 6px 11px 8px; }
.docpal-target span { color: var(--ink-2); font-style: italic; }
.docpal-empty { padding: 26px; text-align: center; color: var(--ink-4); font-size: 13px; }
.docpal-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; color: var(--ink); }
.docpal-item.on { background: var(--bg-hover); }
.docpal-item:disabled { opacity: .5; }
.docpal-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.docpal-label { display: block; font-size: 13.5px; font-weight: 500; }
.docpal-hint { display: block; font-size: 11.5px; 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; padding: 5px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: var(--shadow-pop); }
.inline-ai-spark { color: var(--accent); padding: 0 5px; display: grid; place-items: center; }
.inline-ai-btn { border: none; background: none; padding: 5px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; 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: 4px; display: grid; place-items: center; }
.inline-ai-busy { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); }

/* stage board */
.docbd-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.docbd-col { flex: 1; min-width: 224px; background: var(--bg-sidebar); border-radius: var(--r-lg); padding: 12px 10px; display: flex; flex-direction: column; }
.docbd-colhd { margin-bottom: 10px; padding: 2px 2px 2px 4px; }
.docbd-coltitle { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.docbd-list { display: flex; flex-direction: column; gap: 9px; min-height: 8px; }
.docbd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; 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: 13.5px; line-height: 1.35; margin-bottom: 10px; }
.docbd-meta { display: flex; align-items: center; gap: 8px; }
.docbd-cm { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; 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: 16px 12px; text-align: center; color: var(--ink-4); font-size: 12px; 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: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: var(--shadow-xs); margin-bottom: 22px; }
.docinbox-cap-ic { color: var(--accent); display: grid; place-items: center; }
.docinbox-capture input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: var(--ink); }
.docinbox-capture input::placeholder { color: var(--ink-4); }
.docinbox-day { margin-bottom: 18px; }
.docinbox-daylabel { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.docinbox-dayn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 10.5px; 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: 11px; padding: 12px 14px; 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: 13.5px; font-weight: 550; }
.docinbox-prev { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.docinbox-stage { font-size: 11px; color: var(--ink-3); background: var(--bg-active); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.docinbox-time { font-size: 11.5px; color: var(--ink-4); min-width: 56px; text-align: right; }

/* ============================================================
   Activity log
   ============================================================ */
.act-screen { max-width: 1180px; }
.act-layout { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 26px; 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: 18px; gap: 12px; flex-wrap: wrap; }
.act-title { font-size: 26px; }
.act-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; }
.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: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.act-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-3); width: 220px; 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: 13.5px; color: var(--ink); }

/* Aria's brief — the single accent moment on Activity (soft AI panel) */
.aria-brief { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 15px 18px; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), color-mix(in srgb, var(--accent) 4.5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 17%, transparent); }
.aria-brief-main { flex: 1; min-width: 0; }
.aria-brief-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.aria-brief-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: relative; flex-shrink: 0; }
.aria-brief-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: actpulse 1.8s ease-out infinite; }
.aria-brief-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.aria-caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; vertical-align: -2px; animation: ariaCaret 1s steps(1) infinite; }
@keyframes ariaCaret { 50% { opacity: 0; } }
.aria-brief-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 10px; border: none; background: var(--accent); color: var(--accent-fg, #fff); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: filter .14s, transform .1s; }
.aria-brief-go:hover { filter: brightness(1.06); }
.aria-brief-go:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .aria-brief-pulse::after, .aria-caret { animation: none; } }

.act-tabrow { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.act-tabrow .act-unread-toggle { flex-shrink: 0; padding-bottom: 9px; }
.act-tabs { display: flex; align-items: center; gap: 4px; padding-bottom: 0; min-width: 0; flex: 1; }
.act-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: none; background: none; color: var(--ink-3); font-size: 13.5px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .14s; }
.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 5px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 10px; 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: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); border: none; background: none; cursor: pointer; }
.act-unread-toggle.on { color: var(--accent); }
.act-toggle-track { width: 30px; height: 17px; border-radius: 999px; background: var(--bg-active); position: relative; transition: background .16s; }
.act-unread-toggle.on .act-toggle-track { background: var(--accent); }
.act-toggle-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .16s; }
.act-unread-toggle.on .act-toggle-knob { transform: translateX(13px); }

.act-scope { display: flex; justify-content: center; margin-bottom: 14px; }
.act-scope-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-xs); transition: all .14s; }
.act-scope-pill:hover { border-color: var(--border-strong); }
.act-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.act-filterbar b { color: var(--ink); }
.act-fb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--accent-soft); padding: 4px 6px 4px 9px; border-radius: 999px; }
.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 4px; }
.act-client-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }

.act-daysep { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: var(--ink-4); }
.act-daysep::before, .act-daysep::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.act-daysep span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.act-list { display: flex; flex-direction: column; gap: 18px; }
.act-loadmore { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 18px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .14s, background .14s; }
.act-loadmore:hover { border-color: var(--border-strong); background: var(--bg-hover); color: var(--ink); }
.act-loadmore-n { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.act-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }

/* timeline item */
.act-item { display: flex; gap: 12px; position: relative; }
.act-rail { width: 34px; flex-shrink: 0; position: relative; }
.act-rail::before { content: ''; position: absolute; left: 16px; top: 32px; bottom: -18px; width: 2px; background: var(--border-subtle); }
.act-item.last .act-rail::before { display: none; }
.act-node { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.dark .act-node { box-shadow: 0 0 0 4px var(--bg); }
.act-main { flex: 1; min-width: 0; padding-bottom: 2px; }
.act-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.act-sys-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.act-head-tx { flex: 1 1 auto; min-width: 0; font-size: 14px; 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: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: middle; }
/* time trails inline with the sentence (as one atomic unit) instead of wrapping
   onto its own orphan line when the row text is long enough to wrap */
.act-time-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; 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; }
/* hover action cluster — smooth fade + slide instead of an abrupt show */
.act-hover-acts { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.act-main:hover .act-hover-acts, .act-hover-acts:focus-within { opacity: 1; transform: translateX(0); pointer-events: auto; }
.act-hover-acts button { width: 28px; height: 28px; border: none; background: none; border-radius: 7px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.act-hover-acts button:hover { background: var(--bg-hover); color: var(--ink); }
.act-hover-acts button.on { color: var(--accent); }
/* clean tooltips on the hover action buttons */
.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: 11px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 20; box-shadow: var(--shadow-md); }
.act-hover-acts button[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ink); opacity: 0; transition: opacity .14s ease; z-index: 20; }
.act-hover-acts button[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.act-hover-acts button[data-tip]:hover::before { opacity: 1; }
/* ── entrance: items reveal in as the list shows (ease-out, no overshoot) ── */
@keyframes actReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes actNodeIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .act-list .act-item { opacity: 0; animation: actReveal .2s ease-out forwards; animation-delay: calc(var(--ai, 0) * 40ms); }
  .act-list .act-item .act-node { animation: actNodeIn .2s ease-out backwards; animation-delay: calc(var(--ai, 0) * 40ms + 40ms); }
}
/* micro-interactions: row hover lift + node bloom + press feedback (ease-out, subtle) */
.act-main { border-radius: 11px; margin: -4px -8px; padding: 4px 8px; transition: background .18s ease-out, transform .18s ease-out; }
.act-main:hover { background: var(--bg-hover); transform: translateX(2px); }
.act-node { transition: transform .18s ease-out, box-shadow .18s ease-out; }
.act-item:hover .act-node { transform: scale(1.06); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, currentColor 22%, transparent); }
.act-hover-acts button { transition: color .16s ease-out, background .16s ease-out, transform .12s ease-out; border-radius: 7px; }
.act-hover-acts button:hover { background: var(--bg-sunken); }
.act-hover-acts button:active { transform: scale(.92); }
.act-item.unread .act-node { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }

/* reference chips */
.act-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; vertical-align: middle; transition: all .12s; }
.act-chip:hover { border-color: var(--border-strong); color: var(--ink); background: var(--bg-hover); }
.act-chip-x { color: var(--ink-4); margin-left: 1px; flex-shrink: 0; }
.act-chip span { white-space: nowrap; }

/* mention quote — tinted card, NO left accent bar */
.act-quote { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; margin-top: 9px; }
.act-quote p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.act-voice { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 7px 11px; background: var(--surface); border: 1px solid var(--border); 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: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* join request */
.act-actions { display: flex; gap: 8px; margin-top: 10px; }
.act-decided { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; }
.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); }

/* approval activity — note + file chips + inline decide */
.act-appr { margin-top: 10px; }
.act-appr-note { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.5; max-width: 460px; }
.act-appr-files { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.act-appr-file { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 11px 6px 7px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink); cursor: pointer; transition: border-color .14s, background .14s; }
.act-appr-file:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.act-appr-file-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.act-appr-file .clamp1 { min-width: 0; }

/* events */
.act-events { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.act-event { position: relative; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .14s, box-shadow .14s; }
.act-event:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.act-event-date { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; 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: 17px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.act-event-title { font-size: 13.5px; font-weight: 600; }
.act-event-time { font-size: 12px; 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: 12px; box-shadow: var(--shadow-pop); padding: 13px; 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: 13.5px; font-weight: 600; margin-bottom: 8px; }
.act-event-pop-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.act-event-pop-people { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.act-event-pop-people span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }

/* upload file */
.act-file { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 420px; }
.act-file-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.act-file-t { font-size: 13px; font-weight: 600; }
.act-file-s { font-size: 11.5px; 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: 7px; 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); }

/* status change */
.act-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; }
.act-spill { font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

/* assigned task */
.act-task { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; max-width: 440px; transition: border-color .14s; }
.act-task:hover { border-color: var(--accent); }
.act-task-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.act-task-t { font-size: 13.5px; font-weight: 600; }
.act-task-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); flex-shrink: 0; }

/* comment thread */
.act-thread { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.act-comment { display: flex; gap: 10px; }
.act-comment-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.act-comment-tx { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.act-thread-view { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }

/* footer: reactions + replies */
.act-foot { display: flex; align-items: center; gap: 14px; margin-top: 11px; flex-wrap: wrap; }
.act-reacts { display: flex; align-items: center; gap: 6px; }
.act-react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 12.5px; 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 8px; }
.act-replies { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 0; }
.act-replies:hover { color: var(--ink); }
.act-reply-box { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.act-reply-box input { flex: 1; height: 36px; border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; font-size: 13.5px; background: var(--surface); color: var(--ink); outline: none; }
.act-reply-box input:focus { border-color: var(--accent); }

/* right rail */
.act-rail-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
/* right rail — flush hairline sections (Editorial-Calm: no stacked bordered cards) */
.act-side-card { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.act-side-card + .act-side-card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.act-side-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.act-stat { text-align: center; }
.act-stat-btn { border: none; background: none; cursor: pointer; font: inherit; padding: 4px 0; border-radius: 9px; transition: background .14s; }
.act-stat-btn:hover { background: var(--bg-hover); }
.act-stat b { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 460; color: var(--ink); line-height: 1; }
.act-stat span { font-size: 11px; color: var(--ink-3); }
.act-side-hd { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.act-side-empty { font-size: 12.5px; color: var(--ink-4); }
.act-person, .act-qfilter { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 13px; 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(--accent-soft); color: var(--accent); }
.act-person-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 10.5px; 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); }

/* reactions on a row */
.act-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.act-react { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; 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: 12.5px; }
.act-react-n { font-size: 11.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.act-react.mine .act-react-n { color: var(--accent); }

/* stacked system alerts (e.g. several Inventory notifications) */
.act-stack { border-radius: 12px; }
.act-stack.open { background: var(--bg-sunken); }
.act-stack-hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: none; background: none; cursor: pointer; text-align: left; border-radius: 12px; 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: 13.5px; color: var(--ink-2); }
.act-stack-t b { font-weight: 600; color: var(--ink); }
.act-stack-s { font-size: 12px; color: var(--ink-3); }
.act-stack-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.act-stack-chev { color: var(--ink-4); flex-shrink: 0; }
.act-stack-body { padding: 0 4px 4px; }

/* "caught up — earlier activity" divider */
.act-newdiv { display: flex; align-items: center; gap: 12px; margin: 12px 2px; color: var(--ink-4); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.act-newdiv::before, .act-newdiv::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

/* muted channels (rail) */
.act-muted-row { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 12.5px; color: var(--ink-2); }
.act-muted-ic { color: var(--ink-4); flex-shrink: 0; }
.act-muted-until { font-size: 11px; color: var(--ink-4); flex-shrink: 0; }
.act-muted-x { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 3px; 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: 18px; }
.res-search { display: flex; align-items: center; gap: 11px; padding: 7px 7px 7px 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-xs); margin-bottom: 22px; 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: 15.5px; color: var(--ink); min-width: 0; }
.res-search input::placeholder { color: var(--ink-4); }
.res-loading { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.res-loading-spark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); animation: respulse 1.4s ease-in-out infinite; }
@keyframes respulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }

.res-results-hd { margin-bottom: 14px; }
.res-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--bg-active); color: var(--ink-2); font-size: 12px; 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: 14px; padding: 14px 10px; border-top: 1px solid var(--border-subtle); border-radius: 10px; 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: 9px; }
.res-name { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.res-cat { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 2px 8px; border-radius: 999px; }
.res-sub { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.res-sub span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.res-sub .icn { color: var(--ink-4); }
.res-desc { font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 560px; }
.res-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.res-actions { display: flex; align-items: center; gap: 6px; }

/* 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: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.co-socdots { display: inline-flex; gap: 4px; }
.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: 12px; box-shadow: var(--shadow-pop); z-index: 80; padding: 8px; }
.savepop-hd { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px 8px; }
.savepop-list { max-height: 200px; overflow-y: auto; }
.savepop-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 13px; 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: #fff; }
.savepop-check.on { background: var(--accent); border-color: var(--accent); }
.savepop-n { font-size: 11px; color: var(--ink-4); }
.savepop-create { display: flex; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--border-subtle); margin-top: 4px; }
.savepop-create input { flex: 1; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; font-size: 12.5px; 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: 8px; flex-wrap: wrap; margin-bottom: 0; }
.res-suggest-lbl { font-size: 12.5px; color: var(--ink-4); font-weight: 600; }
.res-chip { padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; 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: 6px; }
.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: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 28px 0 16px; 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: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; padding: 3px 8px; border-radius: 7px; 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: 14px; }
.res-listcard { text-align: left; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; box-shadow: var(--shadow-xs); transition: all .14s; display: flex; flex-direction: column; gap: 4px; }
.res-listcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.res-listcard-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.res-listcard-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.res-listcard-more { width: 26px; height: 26px; border: none; background: none; border-radius: 7px; 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: 14.5px; font-weight: 650; color: var(--ink); }
.res-listcard-meta { font-size: 12px; color: var(--ink-3); }
.res-listcard-logos { display: flex; gap: 5px; margin-top: 10px; }
.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: 50px 20px; text-align: center; color: var(--ink-3); }

/* ============================================================
   Company dossier
   ============================================================ */
.dos { max-width: 1140px; }
.dos-hero { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.dos-hero-main { flex: 1; min-width: 0; }
.dos-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dos-name { font-family: var(--font-serif); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.dos-cat { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: 3px 10px; border-radius: 999px; }
.dos-verified { color: var(--accent); display: inline-grid; }
.dos-hero-sub { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.dos-hero-sub > span, .dos-hero-sub > a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; 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: 14px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; max-width: 680px; }
.dos-hero-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dos-socpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12.5px; 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: 10px; font-weight: 700; display: grid; place-items: center; }
.dos-socpill-n { color: var(--ink-4); font-size: 11.5px; }
.dos-hero-actions { display: flex; align-items: center; gap: 8px; 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: 10px; margin: 18px 0 4px; padding: 11px 14px; background: var(--bg-sunken); border-radius: 11px; font-size: 12.5px; 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: 6px; }
.dos-prof { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; text-decoration: none; transition: background .14s; }
.dos-prof:hover { background: var(--bg-hover); }
.dos-prof-badge { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.dos-prof-handle { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.dos-prof-net { display: block; font-size: 11.5px; color: var(--ink-4); }

/* outbound research links */
.dos-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.dos-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; text-decoration: none; transition: background .14s; }
.dos-link:hover { background: var(--bg-hover); }
.dos-link-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-active); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.dos-link-l { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.dos-link-s { display: block; font-size: 11.5px; color: var(--ink-4); }
.dos-askaria { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 13px 14px; border: none; border-radius: 12px; 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: 10px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.dos-askaria b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.dos-askaria span > span { font-size: 12px; color: var(--ink-3); }
.dos-askaria > .icn { color: var(--accent); flex-shrink: 0; }
.dos-deepcta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 4px; border: none; background: none; font: inherit; font-size: 12.5px; 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: 18px; }
.dos-brief-hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.dos-brief-ic { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dos-brief-tag { margin-left: auto; font-size: 10.5px; 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 { opacity: .5; cursor: default; }
.dos-brief-sum { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; max-width: 680px; }
.dos-brief-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 12px; }
.dos-brief-fact { display: flex; flex-direction: column; gap: 1px; }
.dos-brief-fact span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dos-brief-fact b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dos-brief-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.dos-brief-list li { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dos-brief-empty { font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.dos-brief-load { display: flex; flex-direction: column; gap: 8px; }
.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: 9px; padding: 7px 0; font-size: 13px; 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, 1fr); gap: 12px; margin: 22px 0; }
.dos-kpi { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-xs); }
.dos-kpi-ic { width: 34px; height: 34px; border-radius: 9px; 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: 21px; font-weight: 460; line-height: 1; color: var(--ink); }
.dos-kpi-l { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

.dos-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; margin-bottom: 8px; background: var(--bg); backdrop-filter: blur(4px); }
.dos-navpill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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: 24px; align-items: start; }
@media (max-width: 1060px){ .dos-grid { grid-template-columns: 1fr; } .dos-kpis { grid-template-columns: repeat(2,1fr); } }
.dos-col { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.dos-sec { padding: 26px 0; }
.dos-sec:first-child { padding-top: 6px; }
.dos-sec + .dos-sec { border-top: 1px solid var(--border-subtle); }
.dos-sec-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.dos-sec-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-active); color: var(--ink-2); display: grid; place-items: center; }
.dos-sec-hd h3 { font-size: 16px; font-weight: 650; }
.dos-sec-meta { font-size: 12px; color: var(--ink-3); }
.dos-about { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; max-width: 680px; }
.dos-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.dos-fact { background: none; padding: 0; }
.dos-fact-l { display: block; font-size: 11px; color: var(--ink-4); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.dos-fact-v { font-size: 13.5px; 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: 16px; }
.dos-soc-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.dos-soc-badge { width: 34px; height: 34px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.dos-soc-handle { font-size: 14px; font-weight: 650; }
.dos-soc-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.dos-soc-followers { text-align: right; }
.dos-soc-followers b { font-size: 15px; font-weight: 700; }
.dos-soc-followers span { display: block; font-size: 10.5px; color: var(--ink-4); }
.dos-posts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
@media (max-width: 760px){ .dos-posts { grid-template-columns: repeat(3,1fr); } }
.dos-post { position: relative; aspect-ratio: 1; border-radius: 11px; 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: 7px; }
.dos-post-stats span { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.dos-post-cap { padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.dos-post-cap span { display: block; font-size: 10px; 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: 16px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; }
.dos-traffic-num { font-family: var(--font-serif); font-size: 30px; font-weight: 460; line-height: 1; }
.dos-traffic-lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.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: 22px; }
@media (max-width: 640px){ .dos-traffic-split { grid-template-columns: 1fr; } }
.dos-mini-hd { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; }
.dos-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dos-bar-l { width: 96px; font-size: 12px; 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: 11.5px; 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: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 0 10px 9px; border-bottom: 1px solid var(--border); }
.dos-kw td { padding: 11px 10px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.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 7px; border-radius: 6px; background: var(--bg-active); font-size: 12px; 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: 13px; border-radius: 11px; text-decoration: none; transition: background .12s; }
.dos-news-item:hover { background: var(--bg-hover); }
.dos-news-src { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.dos-news-date { color: var(--ink-4); font-weight: 400; }
.dos-news-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; padding-right: 22px; }
.dos-news-ex { font-size: 12.5px; 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: 11px; padding: 11px 12px; border-radius: 10px; text-decoration: none; transition: background .12s; }
.dos-mention:hover { background: var(--bg-hover); }
.dos-mtype { font-size: 10.5px; font-weight: 700; padding: 3px 8px; 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: 13.5px; font-weight: 550; color: var(--ink); }
.dos-mention-src { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.dos-da { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }

/* gallery */
.dos-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dos-gal { aspect-ratio: 4/3; border-radius: 11px; }

/* reviews */
.dos-reviews { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }
@media (max-width: 640px){ .dos-reviews { grid-template-columns: 1fr; } }
.dos-rev-score { text-align: center; padding: 14px; background: var(--bg-sidebar); border-radius: 12px; }
.dos-rev-num { font-family: var(--font-serif); font-size: 44px; font-weight: 460; line-height: 1; }
.dos-rev-count { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 12px; }
.dos-rev-bars { display: flex; flex-direction: column; gap: 5px; }
.dos-rev-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; 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: 14px; }
.dos-rev-item-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.dos-rev-item-hd b { font-size: 13px; font-weight: 650; }
.dos-rev-src { font-size: 11px; color: var(--ink-4); }
.dos-rev-item p { margin: 0; font-size: 13px; 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: 22px; position: sticky; top: 60px; }
.dos-rail-card { padding: 0; }
.dos-rail-card + .dos-rail-card { padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.dos-rail-hd { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.dos-rail-fact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; 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: 10px; padding: 7px 0; }
.dos-person-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.dos-person-n { font-size: 13px; font-weight: 600; }
.dos-person-t { font-size: 11.5px; color: var(--ink-3); }
.dos-comp { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; margin: 0 -8px; border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; transition: background .14s; }
.dos-comp:hover { background: var(--bg-hover); }
.dos-comp-n { font-size: 13px; font-weight: 600; color: var(--ink); }
.dos-comp-note { font-size: 11.5px; color: var(--ink-3); }
.dos-comp-rate { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--c-gold); flex-shrink: 0; }
.dos-map { position: relative; height: 140px; border-radius: 11px; 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: 12px; 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: 8px; padding: 6px 0; }
.dos-loc .icn { color: var(--ink-4); margin-top: 2px; flex-shrink: 0; }
.dos-loc-l { font-size: 13px; font-weight: 600; }
.dos-loc-a { font-size: 11.5px; color: var(--ink-3); }

/* compare table */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; 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: 12.5px; font-weight: 600; color: var(--ink-2); padding: 12px 14px; white-space: nowrap; min-width: 150px; }
.cmp-corner { background: var(--bg-sidebar); }
.cmp-co { padding: 16px 14px 14px; 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: 13.5px; font-weight: 650; line-height: 1.3; margin-bottom: 10px; }
.cmp-co-acts { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cmp-cell { position: relative; text-align: center; padding: 12px 14px; font-size: 13px; 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: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-active); padding: 2px 8px; border-radius: 999px; }
.cmp-link { color: var(--accent); text-decoration: none; font-size: 12px; }
.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: 22px; 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: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; max-height: 380px; overflow-y: auto; }
.res-ac-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: none; background: none; border-radius: 10px; 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: 8px; 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: 14px; font-weight: 500; }
.res-ac-sub { display: block; font-size: 11.5px; color: var(--ink-4); }
.res-ac-tag { font-size: 10.5px; font-weight: 600; color: var(--ink-4); background: var(--bg-active); padding: 2px 7px; 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: 4px; margin-bottom: 0; }
.res-pin { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; background: transparent; cursor: pointer; transition: background .14s; }
.res-pin:hover { background: var(--bg-hover); }
.res-pin-n { font-size: 13.5px; font-weight: 600; }
.res-pin-s { font-size: 11.5px; color: var(--ink-3); }
.res-pin-x { width: 26px; height: 26px; border: none; background: none; border-radius: 7px; 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: 4px; margin-bottom: 0; }
.res-recentco { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; background: transparent; cursor: pointer; transition: background .14s; }
.res-recentco:hover { background: var(--bg-hover); }
.res-recentco-n { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.res-recentco-s { display: block; font-size: 11.5px; 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: 7px; 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: 13px; width: 100%; text-align: left; padding: 12px 14px; border: none; border-radius: 13px; background: var(--bg-sunken); cursor: pointer; margin-bottom: 22px; 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: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.res-resume-n { font-size: 14.5px; 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: 6px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.res-resume:hover .res-resume-go { color: var(--accent); }

/* marketing patterns */
.mkt-aria { display: flex; gap: 11px; padding: 13px 15px; background: var(--accent-soft); border-radius: 12px; margin-bottom: 14px; }
.mkt-aria-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex-shrink: 0; }
.mkt-aria-hd { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.mkt-aria p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.mkt-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
@media (max-width: 640px){ .mkt-insights { grid-template-columns: 1fr; } }
.mkt-insight { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); }
.mkt-insight-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-active); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mkt-sub { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 11px; }
.mkt-sub-meta { font-weight: 400; color: var(--ink-4); margin-left: 6px; }
.mkt-grid { display: grid; grid-template-columns: 1fr 200px; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 18px; }
@media (max-width: 720px){ .mkt-grid { grid-template-columns: 1fr; } }
.mkt-heat { display: grid; gap: 4px; }
.mkt-hcol { font-size: 9.5px; color: var(--ink-4); text-align: center; }
.mkt-hrow { font-size: 10.5px; 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: 4px; margin-top: 10px; font-size: 10.5px; color: var(--ink-4); }
.mkt-legend i { width: 14px; height: 12px; border-radius: 3px; }
.mkt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.mkt-stat { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface); }
.mkt-stat-v { font-family: var(--font-serif); font-size: 19px; 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: 10.5px; color: var(--ink-3); margin-top: 4px; }
.mkt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 18px; }
@media (max-width: 640px){ .mkt-grid2 { grid-template-columns: 1fr; } }
.mkt-block { min-width: 0; }
.mkt-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mkt-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--accent); font-weight: 500; }
.mkt-tag b { font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px 7px; border-radius: 999px; }

/* ============================================================
   Employee profile
   ============================================================ */
.team-card { cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s; }
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.emp { max-width: 1080px; }
.emp-cover { height: 168px; border-radius: 18px; position: relative; overflow: hidden; }
.emp-cover.has-img { background: var(--bg-sunken); }
.emp-cover.focusing { cursor: crosshair; }
.emp-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.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; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.emp-cover:hover .emp-cover-tools, .emp-cover.focusing .emp-cover-tools { opacity: 1; }
.emp-cover-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: none; border-radius: 8px; background: rgba(20,22,16,.55); color: #fff; backdrop-filter: blur(6px); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .12s; }
.emp-cover-btn:hover { background: rgba(20,22,16,.78); }
.emp-cover-btn.on { background: var(--accent); }
.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-focus-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(20,22,16,.6); padding: 5px 11px; border-radius: 8px; backdrop-filter: blur(4px); pointer-events: none; }
.emp-hero-over { padding: 0 8px 20px; align-items: flex-start; }
.emp-hero-over > div:first-child { margin-top: -52px; }
.emp-hero-over .emp-hero-main { padding-top: 8px; }
.emp-hero-avwrap { display: inline-flex; border-radius: 50%; padding: 4px; background: var(--bg); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.emp-hero-avwrap .avatar { width: 96px; height: 96px; font-size: 31px; }
.emp-hero { display: flex; gap: 18px; 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: 10px; flex-wrap: wrap; }
.emp-name { font-family: var(--font-serif); font-size: 27px; font-weight: 600; }
.emp-pronoun { font-size: 12px; color: var(--ink-4); }
.emp-role-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.emp-hero-title { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; font-weight: 500; }
.emp-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.emp-hero-meta > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; 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: 8px; flex-shrink: 0; }
.emp-hero-over .emp-hero-actions { align-self: flex-start; margin-top: 26px; }
.emp-hero-actions .btn.secondary { text-decoration: none; }
.emp-bday { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 15px; border-radius: 12px; background: color-mix(in srgb, var(--c-mauve) 14%, transparent); color: var(--c-mauve); font-size: 13.5px; font-weight: 600; }

.emp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 860px){ .emp-stats { grid-template-columns: repeat(2,1fr); } }
.emp-stat { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-xs); }
.emp-stat-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.emp-stat-v { font-family: var(--font-serif); font-size: 22px; font-weight: 460; line-height: 1; }
.emp-stat-l { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

.emp-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 900px){ .emp-grid { grid-template-columns: 1fr; } }
.emp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.emp-rail { display: flex; flex-direction: column; gap: 16px; }
.emp-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px 18px; box-shadow: var(--shadow-xs); }
.emp-card-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; margin-bottom: 13px; }
.emp-card-hd .icn { color: var(--ink-3); }
.emp-pto-req { margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; transition:all .12s; }
.emp-pto-req:hover { border-color:var(--accent); color:var(--accent); }
.emp-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 11px; font-weight: 600; display: grid; place-items: center; margin-left: auto; }
.emp-empty { padding: 18px; text-align: center; color: var(--ink-4); font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; }

.emp-tasks { display: flex; flex-direction: column; }
.emp-task { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; border-radius: 8px; }
.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: 13.5px; font-weight: 550; }
.emp-task-proj { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.emp-task-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; 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: 7px; }
.emp-skill { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); }

.emp-pto { margin-bottom: 14px; }
.emp-pto-bar { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin-bottom: 7px; }
.emp-pto-fill { display: block; height: 100%; border-radius: 999px; background: var(--c-olive); }
.emp-pto-meta { font-size: 12.5px; color: var(--ink-3); }
.emp-pto-meta b { color: var(--ink); font-weight: 700; }
.emp-off { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.emp-off-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.emp-off-t { font-size: 13px; font-weight: 600; }
.emp-off-w { font-size: 11.5px; color: var(--ink-3); }
.emp-off-st { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.emp-off-st.approved { color: var(--st-done); background: var(--st-done-soft); }
.emp-off-st.pending { color: var(--st-review); background: var(--st-review-soft); }

.emp-facts { display: flex; flex-direction: column; }
.emp-fact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.emp-fact:last-child { border-bottom: none; }
.emp-fact > span { display: inline-flex; align-items: center; gap: 7px; 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: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.emp-person { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; border-radius: 8px; transition: background .12s; }
.emp-person:hover { background: var(--bg-hover); }
.emp-person-n { font-size: 13px; font-weight: 600; }
.emp-person-t { font-size: 11.5px; color: var(--ink-3); }
.emp-cover-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.emp-cover-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--c-gold) 74%, var(--ink)); }
.emp-cover-status { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; }

/* assigned breakdown + conflicts + at-rest */
.emp-breakdown { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -6px 0 20px; padding: 11px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.emp-bd-total { font-size: 13px; font-weight: 700; color: var(--ink); margin-right: 4px; }
.emp-bd { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; 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: 11px; font-weight: 400; color: var(--ink-4); margin-left: auto; }
.emp-n.warn { background: var(--st-blocked-soft); color: var(--st-blocked); }
.emp-rest-note { color: var(--ink-4); }

.emp-conflicts { border-color: color-mix(in srgb, var(--st-blocked) 30%, var(--border)); }
.emp-conflict { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; margin-bottom: 7px; background: var(--bg-sidebar); }
.emp-conflict:last-child { margin-bottom: 0; }
.emp-conflict.high { background: color-mix(in srgb, var(--st-blocked) 8%, var(--surface)); }
.emp-conflict-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--st-blocked-soft); color: var(--st-blocked); }
.emp-conflict.med .emp-conflict-ic { background: var(--st-review-soft); color: var(--st-review); }
.emp-conflict-t { font-size: 13.5px; font-weight: 600; }
.emp-conflict-d { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.emp-sev { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; }
.emp-sev.high { background: var(--st-blocked-soft); color: var(--st-blocked); }
.emp-sev.med { background: var(--st-review-soft); 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: 9px; width: 100%; padding: 11px 13px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--ink-2); font-size: 13.5px; 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: 11px; padding: 8px 6px; border-radius: 9px; }
.doc-collab-row:hover { background: var(--bg-hover); }
.doc-collab-name { display: block; font-size: 13.5px; font-weight: 550; color: var(--ink); }
.doc-collab-sub { display: block; font-size: 11.5px; color: var(--ink-3); }
.doc-role { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.doc-role.owner { color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; }
.doc-role-btn { display: inline-flex; align-items: center; gap: 4px; border: none; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.doc-role-btn:hover { background: var(--bg-active); }
.doc-access-desc { display: block; font-size: 11px; 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; max-height: calc(100vh - 150px); position: sticky; top: 18px; }
.doc-comments-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); }
.doc-comments-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
.doc-comments-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.doc-comments-empty { text-align: center; color: var(--ink-3); padding: 40px 20px; }
.doc-comment { padding: 10px; border-radius: 10px; transition: background .12s; }
.doc-comment:hover { background: var(--bg-hover); }
.doc-comment.resolved { opacity: .5; }
.doc-comment-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.doc-comment-text { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 4px 0 6px; }
.doc-comment-actions { display: flex; gap: 12px; }
.doc-comment-actions button { border: none; background: none; color: var(--ink-3); font-size: 11.5px; font-weight: 550; cursor: pointer; padding: 0; }
.doc-comment-actions button:hover { color: var(--accent); }
.doc-reply { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding-left: 4px; }
.doc-reply-box { display: flex; gap: 6px; margin-top: 8px; }
.doc-reply-box input { flex: 1; border: none; background: var(--surface-2); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; outline: none; color: var(--ink); }
.doc-comments-compose { display: flex; align-items: center; gap: 8px; padding: 11px 12px; 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: 9px 13px; font-size: 13px; 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: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.dl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: none; background: var(--surface-2); border-radius: var(--r-pill); font-size: 12.5px; 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: 10.5px; opacity: .7; font-weight: 600; }
.dl-pill.on .dl-pill-n { opacity: .8; }
.dl-viewtoggle { display: flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 3px; box-shadow: inset 0 0 0 1px var(--border); }
.dl-viewtoggle button { width: 30px; height: 28px; border: none; background: transparent; border-radius: 6px; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.dl-viewtoggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

.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: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s; }
.dl-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md); }
.dl-thumb { position: relative; height: 190px; padding: 18px 18px 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: 4px; 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: 8px; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.dl-quick:hover { background: var(--accent-soft); color: var(--accent); }
.dl-body { padding: 13px 15px 15px; }
.dl-titlerow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.dl-glyph { display: inline-flex; align-items: center; flex-shrink: 0; }
.dl-title { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.dl-metarow { display: flex; align-items: center; gap: 8px; }
.dl-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--bg-sunken); color: var(--ink-3); }
.dl-updated { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.dl-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; 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: 8px 8px 0 0; overflow: hidden; box-shadow: 0 4px 16px -6px rgba(20,20,30,.28), 0 0 0 1px rgba(20,20,30,.05); background: var(--surface); }
.docmini-page { padding: 14px 14px 0; transform-origin: top center; }
.dm-title { font-family: var(--font-serif); font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 7px; letter-spacing: -.01em; }
.dm-h1 { font-family: var(--font-serif); font-size: 9px; font-weight: 700; color: var(--ink); margin: 6px 0 3px; 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: 5px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-h3 { font-size: 7.5px; font-weight: 700; color: var(--ink-2); margin: 4px 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: 3px; margin: 3px 0; flex: 1; }
.dm-line { height: 3px; border-radius: 2px; background: var(--bg-active); display: block; }
.dm-row { display: flex; align-items: center; gap: 5px; margin: 3px 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: 5px; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-callout { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; margin: 4px 0; font-size: 6px; }
.dm-callout span:first-child { font-size: 8px; }
.dm-code { background: #1c1c20; border-radius: 4px; padding: 5px 6px; margin: 4px 0; display: flex; flex-direction: column; gap: 3px; }
.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: 4px 0; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.dm-bookmark { display: flex; gap: 5px; align-items: center; padding: 4px; border-radius: 5px; background: var(--surface-2); margin: 4px 0; }
.dm-bm-sq { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.dm-table { display: flex; flex-direction: column; gap: 2px; margin: 4px 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: 5px 0; }
.dm-btn { font-size: 6px; color: #fff; padding: 3px 7px; border-radius: 4px; display: inline-block; margin: 4px 0; font-weight: 600; }
.dm-banner { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 5px; margin: 4px 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: 5px; margin: 4px 0; }
.dm-col { display: flex; flex-direction: column; gap: 2px; }
.dm-stats { display: flex; gap: 3px; margin: 4px 0; }
.dm-stat { flex: 1; background: var(--surface-2); border-radius: 3px; padding: 4px 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: 4px 0; }
.dm-step { display: flex; align-items: center; gap: 3px; }
.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: 4px 0; }
.dm-tag { background: var(--surface-2); border-radius: 999px; padding: 1px 5px; 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: 5px 7px; margin: 4px 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: 4px; font-size: 10.5px; font-weight: 600; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 16%, transparent); padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
.paused-pill.sm { margin-bottom: 0; padding: 2px 7px; 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: 3px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.tmpl-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; 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: 13.5px; font-weight: 600; color: var(--ink); }
.tmpl-desc { display: block; font-size: 11.5px; 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: 18px 18px 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: 14px; padding: 0 16px; }
.dl-list-hd { height: 40px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--border-subtle); }
.dl-row { padding-top: 11px; padding-bottom: 11px; 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: 13px; 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: 4px 4px 0; }
.dl-row-sub { font-size: 11.5px; 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: 6px 6px 7px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .14s; }
.cal-cell.out { background: var(--bg-sidebar); cursor: default; }
.cal-cell:not(.out):hover { background: var(--bg-hover); }
.cal-cell.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px 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 5px; 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: 6px; gap: 6px; }
.cal-day-count { font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border: none; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; cursor: pointer; transition: background .12s ease, color .12s ease; }
.cal-day-count.today { background: var(--accent-soft); color: var(--accent); }
.cal-day-count:hover { background: var(--accent); color: var(--accent-fg); }
.cal-conflict-warn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c-clay) 12%, transparent); color: var(--c-clay); font-size: 12.5px; font-weight: 600; }
.cal-load-nudge { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c-gold) 13%, transparent); color: var(--c-gold); font-size: 12.5px; line-height: 1.45; }
.cal-load-nudge .icn { flex-shrink: 0; margin-top: 1px; }
.cal-load-nudge .grow { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cal-load-sugg { display: inline-flex; align-items: center; gap: 5px; border: none; background: color-mix(in srgb, var(--c-gold) 20%, transparent); color: var(--c-gold); font-weight: 650; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.cal-load-sugg:hover { background: var(--c-gold); color: #fff; }
/* team utilization meter */
.cal-util-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.cal-util-l { font-size: 11.5px; font-weight: 600; color: var(--ink-3); min-width: 0; }
.cal-util-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-util-v.low { color: var(--c-olive); }
.cal-util-v.mid { color: var(--accent); }
.cal-util-v.over { color: var(--c-clay); }
.cal-util-track { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.cal-util-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.cal-util-fill.low { background: var(--c-olive); }
.cal-util-fill.mid { background: var(--c-gold); }
.cal-util-fill.over { background: var(--c-clay); }
/* member profile capacity card */
.emp-capacity { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 18px; margin-bottom: 18px; }
.emp-cap-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.emp-cap-l { font-size: 13px; font-weight: 650; color: var(--ink); }
.emp-cap-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
/* workload-this-week load bars */
.cal-lb-row { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; padding: 4px; border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.cal-lb-row:hover { background: var(--bg-hover); }
.cal-lb-name { font-size: 12.5px; font-weight: 550; width: 46px; flex-shrink: 0; text-align: left; }
.cal-lb-track { flex: 1; height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.cal-lb-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.cal-lb-fill.low { background: var(--c-olive); }
.cal-lb-fill.mid { background: var(--accent); }
.cal-lb-fill.over { background: var(--c-clay); }
.cal-lb-n { font-size: 11px; 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: 9px; padding: 6px 4px; width: 100%; border: none; background: none; border-radius: 7px; 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: 11px; font-weight: 600; color: var(--st-done); flex-shrink: 0; }
.cal-avail-busy { font-size: 11px; 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: 4px; align-items: center; margin-bottom: 7px; padding: 0 4px; }
.cal-wk-dow { font-size: 10px; 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: 4px; align-items: center; padding: 4px; border-radius: 9px; transition: background .12s; }
.cal-avail-row2:hover { background: var(--bg-hover); }
.cal-cov { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.cal-cov-head { margin-bottom: 0; }
.cal-cov-lbl { font-size: 10px; font-weight: 700; color: var(--ink-4); letter-spacing: .02em; text-transform: uppercase; }
.cal-cov-cell { font-size: 11px; 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: 5px; margin-top: 8px; font-size: 10.5px; 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: 8px; border: none; background: none; padding: 0; cursor: pointer; min-width: 0; text-align: left; font-size: 12.5px; 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: 7px; border: none; cursor: pointer; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0; transition: transform .1s ease, box-shadow .12s ease; }
.cal-wk-cell.free { background: var(--bg-sunken); color: transparent; }
.cal-wk-cell.busy { background: color-mix(in srgb, var(--c-clay) 22%, transparent); color: var(--c-clay); }
.cal-wk-cell.focus { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.cal-wk-cell.off { cursor: default; background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-4) 9%, transparent) 0 4px, transparent 4px 8px); color: transparent; }
.cal-wk-cell.off:hover { transform: none; box-shadow: none; }
.cal-wk-cell:hover { transform: scale(1.14); box-shadow: 0 0 0 1.5px var(--accent); z-index: 1; position: relative; }
.cal-cell.droppable { outline: 1.5px dashed transparent; transition: outline-color .12s, background .12s; }
.cal-cell.droppable:hover { background: var(--accent-soft); outline-color: var(--accent); }
.cal-ev.dragging { opacity: .4; }
/* multi-day span bars */
.cal-ev.span { border-radius: 0; margin-left: -7px; margin-right: -7px; padding-left: 9px; padding-right: 9px; 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: 7px 0 0 7px; margin-left: 0; padding-left: 7px; }
.cal-ev.span-end { border-radius: 0 7px 7px 0; margin-right: 0; padding-right: 7px; }
.cal-ev-cont { display: block; height: 12px; }
/* all-day toggle */
.cal-allday-toggle { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 13px; color: var(--ink-2); width: 100%; }
.cal-allday-toggle.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cal-allday-knob { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-active); position: relative; flex-shrink: 0; transition: background .14s; }
.cal-allday-toggle.on .cal-allday-knob { background: var(--accent); }
.cal-allday-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s; }
.cal-allday-toggle.on .cal-allday-knob::after { transform: translateX(14px); }
/* customize modal */
.cal-cat-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.cal-cat-row:hover { background: var(--bg-hover); }
.cal-cat-swatch { width: 26px; height: 26px; border-radius: 8px; 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: 4px; }
.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: 13.5px; font-weight: 550; color: var(--ink); }
.cal-cat-add { display: flex; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.cal-cat-add .input { height: 36px; }

.cal-ev {
  position: relative; border-radius: 7px; padding: 4px 7px 5px; margin-bottom: 3px; cursor: pointer;
  overflow: hidden;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s, border-color .14s, background .14s;
}
.cal-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); background: var(--surface); }
.cal-ev-top { display: flex; align-items: center; gap: 6px; }
.cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-ev-title { font-size: 11px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.cal-ev-bot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; 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: 10.5px; 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: -5px;
}
.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: 15px 16px 12px;
  background: var(--overlay); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); cursor: pointer;
  animation: hover-pop .16s cubic-bezier(.2,.8,.2,1);
}
@keyframes hover-pop { from { opacity: 0; transform: scale(.97) translateY(2px); } to { opacity: 1; transform: none; } }
.cal-hover-cat { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cal-hover-title { font-family: var(--font-serif, 'Newsreader', serif); font-size: 18px; font-weight: 500; margin: 7px 0 12px; line-height: 1.2; color: var(--ink); }
.cal-hover-meta { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.cal-hover-people { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-subtle); }
.cal-hover-notes { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 12px 0 0; }
.cal-hover-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border-subtle); font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ============================================================
   Planner — modern time-blocking day planner + Aria AI
   (NEVER a left colored border on blocks)
   ============================================================ */
.plan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.plan-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.plan-stat-val { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; line-height: 1; }
.plan-stat-bar { height: 4px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; margin-top: 9px; }
.plan-stat-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.plan-stat-sub { font-size: 11px; margin-top: 7px; }

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

.plan-timeline { display: grid; grid-template-columns: 52px 1fr; padding: 12px 16px 18px 8px; }
.plan-gutter { display: flex; flex-direction: column; }
.plan-hr-label { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-right: 10px; transform: translateY(-7px); }
.plan-hr-label .mono { font-size: 11px; 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: 8px; border-top-color: transparent; }
.plan-slot-hint { display: block; font-size: 10.5px; color: var(--ink-4); padding: 7px 10px; font-style: italic; }

.plan-block {
  position: absolute; left: 6px; right: 4px; display: flex; gap: 9px;
  border-radius: 12px; padding: 8px 10px 8px 11px; cursor: grab; overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 24%, transparent), 0 1px 2px rgba(20,20,30,.04);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s, filter .15s;
}
.plan-block::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg, color-mix(in srgb, var(--bc) 12%, transparent), color-mix(in srgb, var(--bc) 4%, transparent)); pointer-events:none; }
.plan-block:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent), var(--shadow-md); z-index: 5; }
  border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent);
  box-shadow: var(--shadow-xs);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s, filter .15s;
}
.plan-block:hover { transform: translateY(-1px) scale(1.006); box-shadow: var(--shadow-md); z-index: 5; }
.plan-block:active { cursor: grabbing; }
.plan-block-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; 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: 8px; }
.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: 12.5px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.plan-block-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 5px; }
.plan-block-dur { font-size: 10px; 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); color: #fff; font-size: 8.5px; font-weight: 700; padding: 1px 5px; 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: 11px; padding: 14px 16px; background: var(--accent-soft); }
.plan-aria-avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex-shrink: 0; }
.plan-aria-body { padding: 14px 16px 16px; }
.plan-aria-insight { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 13px; min-height: 19px; }
.plan-aria-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); font-size: 12px; 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: translateY(-1px); }
.plan-aria-ask { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px 3px 3px 10px; }
.plan-typing { display: inline-flex; gap: 4px; 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: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; min-height: 90px; }
.plan-pool-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; 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), var(--shadow-sm); transform: translateY(-1px); }
.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: 13px; font-weight: 550; color: var(--ink); }
.plan-pool-empty { text-align: center; padding: 28px 16px; }

/* ============================================================
   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: 4px; }
.cmt-empty { text-align: center; padding: 36px 16px; color: var(--ink-3); }

.cmt { display: flex; gap: 12px; padding: 12px 10px; border-radius: var(--r-md); position: relative; transition: background .14s; }
.cmt-in { animation: cmtIn .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cmt-in { animation: none; } }
.cmt:hover { background: var(--bg-hover); }
.cmt-main { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cmt-author { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.cmt-role { font-size: 11px; color: var(--ink-4); }
.cmt-time { font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.cmt-edited { color: var(--ink-4); font-style: italic; }
.cmt-text { font-size: 13.5px; 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: 8px; margin-top: 9px; }
.cmt-aria-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 12.5px; 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 { opacity: .5; cursor: not-allowed; }
.cmt-aria-acted { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; 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: 4px 0; max-width: 240px; border-radius: 12px; 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 6px; border-radius: 4px; letter-spacing: .06em; }
/* ── @mention — the app-wide "tagged person" highlight (FB / IG / Slack style) ──
   Flows inline with text (blue, semibold, subtle tinted pill), is clickable to
   open the person's profile, and reads the same everywhere. Variants: is-me
   (warm amber — you were tagged), is-aria (violet — the AI). Single source of
   truth; .mention-hl / .an-mention / .vr-mention all inherit this identity. */
.mention, .mention-hl {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 1px 4px; margin: 0 0.5px; border-radius: 5px;
  background: var(--mention-bg); color: var(--mention-fg);
  font-weight: 600; text-decoration: none; white-space: normal;
  transition: background .13s ease, color .13s ease;
}
.mention[role="button"], .mention-hl[role="button"] { cursor: pointer; }
.mention[role="button"]:hover, .mention-hl[role="button"]:hover { background: var(--mention-bg-hover); }
.mention:focus-visible, .mention-hl:focus-visible { outline: 2px solid var(--mention-fg); outline-offset: 1px; }
/* you were mentioned — warm "this is about you" cue */
.mention.is-me { background: var(--mention-me-bg); color: var(--mention-me-fg); }
.mention.is-me[role="button"]:hover { background: var(--mention-me-bg-hover); }
.mention.is-me:focus-visible { outline-color: var(--mention-me-fg); }
/* Aria — the AI assistant */
.mention.is-aria { background: var(--mention-aria-bg); color: var(--mention-aria-fg); }
.mention.is-aria[role="button"]:hover { background: 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 { background: var(--mention-entity-bg); color: var(--mention-entity-fg); }
.mention.is-entity[role="button"]:hover { background: var(--mention-entity-bg-hover); }
.mention.is-entity:focus-visible { outline-color: var(--mention-entity-fg); }
/* avatar-prefixed variant (comments): sit as an inline chip so the avatar aligns */
.mention:has(> .avatar) { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 3px; vertical-align: -3px; }
.mention .avatar.xs { width: 16px; height: 16px; font-size: 8px; }

/* ── 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: 14px; box-shadow: var(--shadow-pop); padding: 13px 14px 12px; opacity: 0; transform: translateY(4px) scale(.985); transition: opacity .13s ease, transform .13s ease; pointer-events: auto; }
.mention-hc.mention-hc-in { opacity: 1; transform: none; }
.mention-hc-hd { display: flex; align-items: center; gap: 11px; }
.mention-hc-av { position: relative; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 14px; 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: 11px; }
.mention-hc-init { line-height: 1; }
.mention-hc-id { min-width: 0; flex: 1; }
.mention-hc-name { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; 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 5px; border-radius: 5px; }
.mention-hc-role { font-size: 12px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-hc-pres { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 12px; 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: 7px; margin-top: 12px; }
.mention-hc-btn { flex: 1; height: 31px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.mention-hc-btn:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--border-strong); }
.mention-hc-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.mention-hc-btn.primary:hover { background: var(--accent-600); color: var(--accent-fg); }
.mention-hc-you { flex: 1; text-align: center; font-size: 11.5px; 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: 6px; animation: pop-menu .12s cubic-bezier(.4,0,.2,1); }
.mention-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.mention-opt.on { background: var(--accent-soft); }
.mention-opt-name { display: block; font-size: 13px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-opt-role { display: block; font-size: 11px; color: var(--ink-3); }

/* attachments */
.cmt-atts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.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: translateY(-2px); box-shadow: var(--shadow-md); }
.att-img img { width: 100%; display: block; max-height: 220px; object-fit: cover; }
.att-img-cap { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 11.5px; 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: 4px; position: relative; border: 1px solid var(--border); }
.att-gif-emoji { font-size: 40px; 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 5px; border-radius: 4px; letter-spacing: .06em; }
.att-gif-label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.att-file { display: flex; align-items: center; gap: 10px; width: 250px; max-width: 100%; padding: 9px 11px; 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: translateY(-1px); }
.att-file-ic { position: relative; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); 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 3px; border-radius: 3px; }
.att-file-name { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink); }
.att-file-size { display: block; font-size: 11px; color: var(--ink-4); }

/* link preview */
.link-card { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 10px 12px; 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: translateY(-1px); box-shadow: var(--shadow-sm); }
.link-fav { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.link-title { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.link-dom { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* reactions */
.cmt-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; 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: translateY(-1px); }
.reaction-pill.mine { background: var(--accent-soft); border-color: var(--accent); }
.reaction-emo { font-size: 13px; }
.reaction-n { font-size: 11.5px; 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: 3px; background: var(--overlay); border: 1px solid var(--border); border-radius: 9px; 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: 7px; 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: 13.5px; 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: 8px; animation: pop-menu .14s cubic-bezier(.4,0,.2,1); transform-origin: top right; }
.cmt-pop-hd { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 2px 6px 8px; }
.react-pop { display: flex; gap: 2px; }
.emoji-pop { width: 248px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; font-size: 17px; 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, 1fr); gap: 6px; }
.gif-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 70px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.gif-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.gif-emoji { font-size: 26px; }
.gif-label { font-size: 10px; font-weight: 600; color: var(--ink-3); }

/* composer */
.cmt-composer { position: sticky; bottom: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); background: var(--surface); }
.composer-staged { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.staged-chip { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 5px 8px 5px 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.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: 16px; }
.staged-name { font-size: 11.5px; 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: 8px; margin-bottom: 10px; padding: 4px 4px 4px 11px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.composer-box { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 9px 11px; transition: border-color .14s, box-shadow .14s; }
.composer-box:focus-within { border-color: var(--accent); }
.composer-as { display: flex; align-items: center; gap: 3px; padding: 2px 4px 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: 4px 0 !important; height: auto; min-height: 26px; line-height: 1.5; font-size: 13.5px; flex: 1; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.composer-tools { display: flex; gap: 2px; }
.composer-tool { width: 34px; height: 34px; border-radius: 9px; border: none; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s, transform .12s; }
.composer-tool:hover { background: var(--bg-hover); color: var(--accent); transform: translateY(-1px); }
.composer-tool.on { background: var(--accent-soft); color: var(--accent); }

/* comment attachment: Stelaah design (canvas board) */
.att-design { display: flex; align-items: center; gap: 10px; width: 250px; max-width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); transition: border-color .14s, transform .14s; }
.att-design:hover { border-color: var(--c-mauve); transform: translateY(-1px); }
.att-design-ic { width: 34px; height: 34px; border-radius: 8px; 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: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 11px 13px 7px; }
.cmt-designpop-search { display: flex; align-items: center; gap: 7px; margin: 0 11px 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-sunken); }
.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: 13px; color: var(--ink); }
.cmt-designpop-list { max-height: 280px; overflow-y: auto; padding: 4px 7px 9px; display: flex; flex-direction: column; gap: 1px; }
.cmt-designpop-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 8px; border: none; background: none; border-radius: 9px; cursor: pointer; transition: background .12s; }
.cmt-designpop-row:hover { background: var(--bg-hover); }
.cmt-designpop-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.cmt-designpop-t { display: block; font-size: 13px; font-weight: 560; color: var(--ink); }
.cmt-designpop-s { display: block; font-size: 11px; color: var(--ink-4); }
.cmt-designpop-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.composer-gif { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; }
.composer-hint { font-size: 11px; color: var(--ink-4); }

/* task calendar + timeline chips (no left border) */
.tcal-ev { display: flex; align-items: center; gap: 6px; border-radius: 7px; padding: 3px 6px 3px 7px; margin-bottom: 3px; 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: translateY(-1px); 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), var(--shadow-sm); }
.tcal-ev-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tcal-ev-name { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.tcal-ev .tcal-ev-name + * { flex-shrink: 0; transform: scale(.82); transform-origin: right center; }
.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: translateY(-1px); box-shadow: var(--shadow-md); }

/* ============================================================
   Avatar picker
   ============================================================ */
.av-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
@media (max-width: 600px){ .av-layout { grid-template-columns: 1fr; } }
.av-side { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.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); }
.av-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-preview-init { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 40px; font-weight: 600; }
.av-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); 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-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--accent); text-align: center; line-height: 1.4; }
.av-main { min-width: 0; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 600px){ .av-grid { grid-template-columns: repeat(5, 1fr); } }
.av-tile { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: var(--bg-sunken); cursor: pointer; padding: 0; transition: transform .14s, border-color .14s, box-shadow .14s; }
.av-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-tile:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-md); }
.av-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.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); }
/* 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: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.fcard.pad { padding: 18px 18px; }
.fpost { padding: 18px 20px 8px; transition: box-shadow .16s ease, transform .16s ease; }
.fpost:hover { box-shadow: var(--shadow-md); }
.fpost-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--accent); margin-bottom: 12px; }
.dark .fpost-pin { color: var(--lime); }
.fpost-hd { display: flex; align-items: center; gap: 12px; }
.fpost-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.fpost-name { font-size: 14.5px; 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: 7px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 5px; vertical-align: middle; }

/* ── Core client health score card ── */
.chs-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); }
.chs-top { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.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: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chs-meta { min-width: 0; }
.chs-band { font-size: 14.5px; font-weight: 700; }
.chs-reason { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.chs-updated { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.chs-budget-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; font-weight: 650; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 13%, transparent); border: none; padding: 4px 10px; 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: 9px; }
.chs-bar { display: grid; grid-template-columns: 108px 1fr 26px; align-items: center; gap: 10px; }
.chs-bar-l { font-size: 11.5px; color: var(--ink-3); }
.chs-bar-track { height: 7px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; }
.chs-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.chs-bar-v { font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Core Insights dashboard widget ── */
.dw-ti-count { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 20px; padding: 2px 9px; }
.dw-ti-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: none; background: none; border-radius: 9px; cursor: pointer; transition: background .14s; }
.dw-ti-row:hover { background: var(--bg-hover); }
.dw-ti-ic { width: 26px; height: 26px; border-radius: 7px; 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: 10px; }
.tpi-tabs { display: flex; gap: 4px; }
.tpi-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: 8px; 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: 10px; font-weight: 700; background: var(--accent); color: var(--accent-fg); border-radius: 20px; padding: 0 6px; min-width: 16px; text-align: center; }
.tpi-tab:not(.on) .tpi-tabn { background: var(--ink-4); }
.tpi-list { display: flex; flex-direction: column; gap: 7px; }
.tpi-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; 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: 8px; display: grid; place-items: center; flex-shrink: 0; }
.tpi-body { flex: 1; min-width: 0; }
.tpi-title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tpi-detail { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.tpi-acts { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.tpi-confirm { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; 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: 5px; font: inherit; font-size: 11.5px; font-weight: 550; padding: 5px 10px; border-radius: 8px; 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: 5px; font-size: 11.5px; font-weight: 550; color: var(--st-done); }
.tpi-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; color: var(--ink-4); font-size: 12.5px; text-align: center; }

/* ── Core "Connected" task panel ── */
.tcon-lead { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.tcon-origin { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 11px; background: var(--accent-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 550; margin-bottom: 16px; }
.tcon-origin svg { color: var(--accent); flex-shrink: 0; }
.tcon-group { margin-bottom: 16px; }
.tcon-group-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px; }
.tcon-group-n { font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 20px; padding: 1px 7px; }
.tcon-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: 11px; 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: 8px; 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: 13px; font-weight: 600; color: var(--ink); }
.tcon-sub { font-size: 11.5px; 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: 30px 16px; color: var(--ink-4); }
.tcon-compact .tcon-group { margin-bottom: 12px; }
.tcon-compact .tcon-row { padding: 7px 8px; gap: 9px; }
.tcon-compact .tcon-ic { width: 26px; height: 26px; }
.tcon-compact .tcon-title { font-size: 12px; }
.tcon-compact .tcon-sub { font-size: 11px; }
.tcon-compact .tcon-group-h { margin-bottom: 5px; }

/* ── universal activity timeline ── */
.uat-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.uat-list { display: flex; flex-direction: column; }
.uat-row { display: flex; gap: 12px; }
.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-line { width: 2px; flex: 1; min-height: 14px; background: var(--border); margin: 2px 0; }
.uat-body { flex: 1; min-width: 0; padding-bottom: 16px; }
.uat-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.uat-row.sys .uat-text { color: var(--ink-3); }
.uat-time { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.uat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--ink-4); font-size: 12.5px; }

/* ── narrative report overlay ── */
.nrr-scrim { position: fixed; inset: 0; background: rgba(20,18,14,.42); backdrop-filter: blur(3px); z-index: 9100; display: grid; place-items: center; padding: 28px; animation: ks-fade .16s ease; }
.nrr { width: min(760px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.32); overflow: hidden; animation: ks-pop .22s cubic-bezier(.22,.61,.36,1); }
.nrr-top { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.nrr-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: 20px; }
.nrr-loading { padding: 70px 30px; text-align: center; }
.nrr-spark { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px; animation: rd-pulse 1.8s ease-in-out infinite; }
.nrr-loading-t { font-family: var(--font-serif); font-size: 20px; font-weight: 550; color: var(--ink); }
.nrr-loading-s { font-size: 13px; color: var(--ink-3); margin-top: 7px; }
.nrr-doc { overflow-y: auto; padding: 34px 40px 40px; }
.nrr-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.nrr-headline { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.nrr-summary { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-top: 12px; text-wrap: pretty; }
.nrr-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 22px 0 26px; padding: 16px; background: var(--bg-sunken); border-radius: 14px; }
.nrr-metric { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.nrr-metric-v { font-size: 17px; 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: 22px; }
.nrr-h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 9px; }
.nrr-body { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.nrr-actions { display: flex; flex-direction: column; gap: 9px; }
.nrr-action { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.nrr-action-ic { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 620px){ .nrr-metrics { grid-template-columns: repeat(3, 1fr); } .nrr-doc { padding: 24px 22px 30px; } }

/* ── keyboard cheat sheet ── */
.ks-scrim { position: fixed; inset: 0; background: rgba(20,18,14,.4); backdrop-filter: blur(2px); z-index: 9000; display: grid; place-items: center; animation: ks-fade .15s ease; }
@keyframes ks-fade { from { opacity: 0; } }
.ks-panel { width: min(720px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; animation: ks-pop .2s cubic-bezier(.22,.61,.36,1); }
@keyframes ks-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.ks-head { display: flex; align-items: center; gap: 9px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; font-weight: 650; color: var(--ink); }
.ks-head svg { color: var(--accent); }
.ks-x { margin-left: auto; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 5px; border-radius: 7px; }
.ks-x:hover { background: var(--bg-sunken); color: var(--ink-2); }
.ks-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 20px 18px; }
.ks-group-t { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 11px; }
.ks-rows { display: flex; flex-direction: column; gap: 9px; }
.ks-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ks-keys { display: flex; gap: 3px; flex-shrink: 0; }
.ks-desc { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.ks-panel kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; min-width: 18px; height: 20px; padding: 0 5px; 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: 12px 18px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--ink-4); text-align: center; }
.ks-foot kbd { font-family: var(--font-mono, monospace); font-size: 10.5px; padding: 1px 5px; 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: 13px; font-weight: 600; padding: 9px 16px; 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); }

/* ── Ambient Aria chip ── */
.aria-fab { position: fixed; right: 22px; bottom: 22px; z-index: 880; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); box-shadow: 0 8px 26px rgba(0,0,0,.16); cursor: pointer; display: grid; place-items: center; transition: transform .16s, box-shadow .16s; }
.aria-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.aria-chip { position: fixed; right: 22px; bottom: 22px; z-index: 880; width: 340px; max-width: calc(100vw - 44px); display: flex; gap: 11px; padding: 14px 14px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.18); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .26s, transform .26s cubic-bezier(.22,.61,.36,1); }
.aria-chip.in { opacity: 1; transform: translateY(0) scale(1); }
.aria-chip::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent); opacity: .0; }
.aria-chip.tone-warn { border-color: color-mix(in srgb, var(--st-blocked) 35%, var(--border)); }
.aria-chip.tone-warn .aria-chip-av { background: color-mix(in srgb, var(--st-blocked) 14%, transparent); color: var(--st-blocked); }
.aria-chip-av { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.aria-chip-body { flex: 1; min-width: 0; }
.aria-chip-name { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.aria-chip-count { font-size: 9.5px; font-weight: 600; color: var(--ink-4); background: var(--bg-sunken); border-radius: 20px; padding: 1px 6px; letter-spacing: 0; text-transform: none; }
.aria-chip-text { font-size: 13px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.aria-chip-acts { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.aria-chip-go { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12.5px; font-weight: 650; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: filter .14s; }
.aria-chip-go:hover { filter: brightness(1.08); }
.aria-chip-skip, .aria-chip-dismiss { font: inherit; font-size: 12px; font-weight: 550; color: var(--ink-4); background: none; border: none; cursor: pointer; padding: 0; }
.aria-chip-skip:hover, .aria-chip-dismiss:hover { color: var(--ink-2); }
.aria-chip-x { position: absolute; top: 9px; right: 9px; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 3px; border-radius: 6px; line-height: 0; }
.aria-chip-x:hover { background: var(--bg-sunken); color: var(--ink-2); }
.aria-chip-collapse { position: absolute; top: 9px; right: 32px; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 3px; border-radius: 6px; line-height: 0; }
.aria-chip-collapse:hover { background: var(--bg-sunken); color: var(--ink-2); }
@media (max-width: 560px){ .aria-chip { right: 12px; bottom: 12px; } }

/* ── 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: 9px; width: 350px; max-width: calc(100vw - 44px); pointer-events: none; align-items: stretch; }
body.has-proposals .toast-host { bottom: 220px; }
.tprop { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: 0 14px 40px rgba(40,30,15,.20); pointer-events: auto; animation: tprop-rise .32s cubic-bezier(.22,.61,.36,1); }
.tprop.out { animation: tprop-fall .18s ease forwards; }
@keyframes tprop-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes tprop-fall { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.tprop-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.tprop-body { flex: 1; min-width: 0; }
.tprop-title { font-size: 13.5px; font-weight: 650; color: var(--ink); line-height: 1.3; padding-right: 16px; }
.tprop-detail { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 3px; text-wrap: pretty; }
.tprop-acts { display: flex; gap: 8px; margin-top: 11px; }
.tprop-confirm { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; 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: 12.5px; font-weight: 550; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all .14s; }
.tprop-dismiss:hover { background: var(--bg-hover); color: var(--ink-2); }
.tprop-x { position: absolute; top: 11px; right: 11px; border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 3px; border-radius: 6px; line-height: 0; }
.tprop-x:hover { background: var(--bg-sunken); color: var(--ink-2); }
.tprop-count { position: absolute; top: -7px; left: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 20px; background: var(--accent); color: var(--accent-fg); font-size: 10.5px; 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) + always-visible 14s countdown ring */
.tprop-title { padding-right: 46px; }
.tprop-ctrls { position: absolute; top: 11px; right: 11px; display: flex; align-items: center; gap: 4px; }
.tprop-mute { width: 24px; height: 24px; border: none; background: none; color: var(--ink-4); border-radius: 7px; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .14s, background .14s, color .14s; }
.tprop:hover .tprop-mute, .tprop:focus-within .tprop-mute { opacity: 1; }
.tprop-mute:hover { background: var(--bg-sunken); color: var(--ink-2); }
/* smooth SVG countdown ring — matches the toast timer; FREEZES + cools while
   the card is hovered/focused (see .tprop.paused), click to dismiss */
.tprop-timer { position: relative; flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background .14s; }
.tprop-timer:hover { background: var(--bg-active); }
.tprop-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.tprop-ring-trk { fill: none; stroke: var(--border); stroke-width: 2.25; }
.tprop-ring-bar { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round;
  transition: stroke-dashoffset .24s linear, stroke .2s ease; }
.tprop.paused .tprop-ring-bar { stroke: var(--ink-4); transition: stroke .2s ease; }
.tprop-timer-num { position: relative; z-index: 1; font-size: 10.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1; transition: color .14s; }
.tprop.paused .tprop-timer-num { color: var(--ink-3); }
.tprop-timer-x { position: relative; z-index: 1; display: none; color: var(--ink-1); }
.tprop-timer:hover .tprop-timer-num { display: none; }
.tprop-timer:hover .tprop-timer-x { display: block; }
/* muted-suggestions restore strip in the inbox */
.tpi-muted { margin-top: 8px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.tpi-muted-h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.tpi-muted-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: var(--ink-2); }
.tpi-unmute { flex-shrink: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 3px 8px; border-radius: 7px; }
.tpi-unmute:hover { background: var(--accent-soft); }
@media (max-width: 560px){ .tprop-stack { right: 12px; bottom: 72px; } body.has-proposals .toast-host { bottom: 200px; } }
.fpost-sub { font-size: 11.5px; color: var(--ink-3); }
.fpost-text { margin: 13px 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.fpost-media { margin-bottom: 14px; }
.fpost-photo { border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
.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: 3px; }
.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; min-height: 0; }
.fgal-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.fgal-cell:hover .fgal-img { transform: scale(1.03); }
.fgal.one .fgal-img.contain { width: 100%; height: auto; max-height: 520px; object-fit: contain; transform: none; }
.fgal.two .fgal-cell, .fgal.grid .fgal-cell { aspect-ratio: 1 / 1; }
.fgal.three .fgal-cell { aspect-ratio: auto; }
.fgal.three .fgal-cell:first-child { aspect-ratio: 1 / 1.1; }
.fgal-more { position: absolute; inset: 0; background: rgba(15,15,20,.55); color: #fff; display: grid; place-items: center; font-size: 26px; 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; }

/* video embed */
.fvideo { position: relative; border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; 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: 4px; 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: 6px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 5px 11px; border-radius: 999px; }
.fmedia-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(20,22,16,.65); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,11,14,.92); display: grid; place-items: center; animation: fade-in .16s ease; }
.lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 70px -16px rgba(0,0,0,.7); }
.lightbox-close { position: fixed; top: 20px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.22); }
.lightbox-add { position: fixed; top: 20px; right: 74px; height: 42px; padding: 0 16px; border-radius: 999px; border: none; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .14s ease; }
.lightbox-add:hover { background: rgba(255,255,255,.26); }
.lightbox-counter { position: fixed; top: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 13px; 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: 8px; padding: 8px; background: rgba(255,255,255,.08); border-radius: 12px; 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: 12px 0 4px; }
.fcomp-videoprev { margin: 12px 0 4px; }
.fcomp-videoentry { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; padding: 9px 12px; background: var(--bg-sunken); border-radius: var(--r-md); }
.fcomp-videoentry input { flex: 1; border: none; background: none; outline: none; font-size: 13.5px; color: var(--ink); }

/* borderless media tiles */
.fmedia-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.fmedia-hero { background: var(--accent); border-radius: var(--r-md); padding: 14px; 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: 12px; }
.fmedia-lab { font-size: 10.5px; color: var(--ink-3); }
.fmedia-val { font-size: 24px; line-height: 1.1; }
.fmedia-file { display: flex; gap: 12px; align-items: center; background: var(--bg-sunken); border-radius: var(--r-md); padding: 12px; margin-bottom: 14px; }

/* stats + action bar (no border lines) */
.fpost-stats { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; }
.fpost-likepill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; 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: 12.5px; cursor: pointer; padding: 0; }
.fpost-statbtn:hover { color: var(--ink); text-decoration: underline; }
.fpost-statn { color: var(--ink-3); font-size: 12.5px; }
.fpost-bar { display: flex; gap: 4px; padding: 6px 0; }
.fpost-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: none; background: transparent; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; 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 (redesigned) ---- */
.fcomposer { padding: 16px 18px; transition: box-shadow .18s ease, border-color .18s ease; }
.fcomposer:not(.open):hover { border-color: var(--border-strong); }
.fcomposer.open { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.fcomp-rest { display: flex; flex-direction: column; gap: 12px; }
.fcomp-collapsed { display: flex; gap: 12px; 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: 14.5px; padding: 13px 18px; border-radius: var(--r-pill); cursor: text; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.fcomp-trigger:hover { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
.fcomp-quick { display: flex; gap: 4px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border-subtle); }
.fcomp-q { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: none; background: transparent; border-radius: 11px; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s ease; }
.fcomp-q:hover { background: var(--bg-hover); color: var(--ink); transform: translateY(-1px); }
.fcomp-q:active { transform: translateY(0); }
.fcomp-q-ic { display: grid; place-items: center; color: var(--ink-3); transition: color .15s ease, transform .12s ease; }
.fcomp-q:hover .fcomp-q-ic { color: var(--accent); }
@media (max-width: 560px){ .fcomp-q span:not(.fcomp-q-ic) { display: none; } }

.fcomp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fcomp-name { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.fcomp-aud2 { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.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: 8px; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.fcomp-close:hover { background: var(--bg-hover); color: var(--ink); }
.fcomp-types { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg-sunken); padding: 4px; border-radius: 12px; margin-bottom: 14px; max-width: 100%; }
.fcomp-type { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: none; background: transparent; border-radius: 9px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.fcomp-type .icn { color: var(--ink-4); transition: color .15s ease; }
.fcomp-type:hover:not(.on) { background: var(--bg-hover); color: var(--ink); }
.fcomp-type:hover:not(.on) .icn { color: var(--ink-3); }
.fcomp-type.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.fcomp-type.on .icn { color: var(--accent); }
.fcomp-ta { width: 100%; border: none; background: transparent; resize: none; font-family: var(--font-ui); font-size: 15.5px; line-height: 1.6; color: var(--ink); padding: 4px 0 2px; outline: none; min-height: 58px; }
.fcomp-ta::placeholder { color: var(--ink-4); }
.fcomp-cd { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; padding: 14px; 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: 10px; }
.fcomp-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.fcomp-tools { display: flex; gap: 2px; }
.fcomp-tool { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: none; background: transparent; border-radius: 9px; color: var(--ink-3); cursor: pointer; transition: background .14s ease, color .14s ease, transform .12s ease; }
.fcomp-tool:hover { background: var(--bg-hover); color: var(--accent); transform: translateY(-1px); }
.fcomp-tool:active { transform: translateY(0); }
.fcomp-actions .btn.primary { height: 38px; padding: 0 20px; border-radius: 10px; font-weight: 600; }
.fcomp-actions .btn.primary:hover { transform: translateY(-1px); }
/* gentle staggered entrance when the composer expands (nodes persist while typing, so it won't replay) */
@keyframes fcompIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.fcomposer.open .fcomp-head { animation: fcompIn .24s ease both; }
.fcomposer.open .fcomp-types { animation: fcompIn .24s ease .03s both; }
.fcomposer.open .fcomp-ta { animation: fcompIn .24s ease .06s both; }
.fcomp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fcomp-field > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.fcomp-photo { position: relative; margin: 12px 0 4px; 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); }
/* (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 16px; 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 22px; }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cd-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; 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: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; 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: 22px; line-height: 1.15; margin: 0 0 16px; max-width: 92%; }
.cd-grid { display: flex; gap: 9px; }
.cd-unit { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px; border-radius: var(--r-md); background: rgba(255,255,255,.14); }
.cd-num { font-family: var(--font-serif); font-size: 34px; 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: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.cd-foot { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.85); }
.cd-done { font-family: var(--font-serif); font-size: 26px; padding: 10px 0 6px; }

/* ---- comments + replies (inline, no bubbles — modern) ---- */
.fcmt-wrap { margin-top: 8px; padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 16px; }
.fcmt-new { display: flex; align-items: center; gap: 10px; }
.fcmt-input { flex: 1; height: 40px; border: 1px solid transparent; background: var(--bg-sunken); border-radius: var(--r-pill); padding: 0 16px; font-size: 13.5px; color: var(--ink); outline: none; transition: background .15s ease, border-color .15s ease; }
.fcmt-input:hover { background: var(--surface); border-color: var(--border); }
.fcmt-input:focus { background: var(--surface); border-color: var(--accent); }
.fcmt-input::placeholder { color: var(--ink-4); }
.fcmt-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; cursor: pointer; transition: opacity .14s ease, transform .12s ease, filter .14s ease; }
.fcmt-send:hover:not(:disabled) { transform: scale(1.06); filter: brightness(1.05); }
.fcmt-send:active:not(:disabled) { transform: scale(1); }
.fcmt-send:disabled { opacity: .35; cursor: default; transform: none; }
.fcmt { display: flex; gap: 10px; align-items: flex-start; }
.fcmt-main { flex: 1; min-width: 0; }
.fcmt-head { display: flex; align-items: baseline; gap: 8px; }
.fcmt-name { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.fcmt-time { font-size: 11px; color: var(--ink-4); }
.fcmt-text { font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 1px; text-wrap: pretty; }
.fcmt-meta { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.fcmt-act { background: none; border: none; padding: 0; font-size: 12px; 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: 8px; margin-top: 10px; animation: fcompIn .2s ease both; }
.fcmt-compose .fcmt-input { height: 36px; font-size: 13px; }
.fcmt-compose .fcmt-send { width: 36px; height: 36px; }
.fcmt-replies { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* ---- 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: 16px; 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: 10px; }
.cd-card.minimal .cd-foot { color: var(--ink-3); }
.cd-date { display: inline-flex; align-items: center; gap: 7px; }
.cd-going { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.cd-going-av { display: inline-flex; }
.cd-going-av > * { margin-left: -6px; 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: 8px; margin-top: 16px; }
.cd-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: none; border-radius: var(--r-pill); cursor: pointer; font-size: 12.5px; font-weight: 600; background: #fff; color: #1e231c; transition: transform .12s, background .14s; }
.cd-btn:hover { transform: translateY(-1px); }
.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: 11.5px; padding: 0 6px; }
.fcd-themes { display: flex; gap: 8px; 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: 7px; 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: 12.5px; margin-left: -6px; }
.fr-emoji:first-child { margin-left: 0; }
.fr-count { font-size: 12.5px; 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: 17px; line-height: 1; }
.fr-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; background: var(--overlay); border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: 20; animation: fr-pop .16s cubic-bezier(.34,1.56,.64,1); }
@keyframes fr-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.fr-pick { width: 40px; height: 40px; border: none; background: none; border-radius: 50%; cursor: pointer; font-size: 25px; line-height: 1; display: grid; place-items: center; transition: transform .12s, background .12s; }
.fr-pick:hover { transform: scale(1.3) translateY(-3px); 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: 11px; width: 100%; padding: 8px 8px; border: none; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s; }
.frail-row:hover { background: var(--bg-hover); }
.frail-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--lime) 15%, transparent); color: var(--lime); flex-shrink: 0; }
.frail-ann { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; background: var(--bg-sunken); }
.frail-rsvp { border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.frail-contrib { display: flex; align-items: center; gap: 11px; padding: 6px 6px; border-radius: 10px; transition: background .12s; }
.frail-contrib:hover { background: var(--bg-hover); }
.frail-rank { width: 16px; text-align: center; font-family: var(--font-serif); font-size: 14px; color: var(--ink-4); }

/* ============================================================
   Org / access — people picker, assignees, invite, visibility, departments
   ============================================================ */
/* lifecycle tabs */
.life-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-sunken); padding: 4px; border-radius: var(--r-pill); width: max-content; }
.life-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: none; background: transparent; border-radius: var(--r-pill); color: var(--ink-3); font-size: 13px; 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 5px; border-radius: 999px; background: var(--bg-active); font-size: 11px; 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: 1px solid var(--border); border-radius: 16px; background: var(--bg-sidebar); overflow: hidden; margin-top: 4px; container-type: inline-size; }
.cd2-cover { height: 120px; overflow: hidden; }
.cd2-cover img { width: 100%; height: 100%; object-fit: cover; }
.cd2-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.cd2-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--cd-accent); }
.cd2-live { width: 8px; height: 8px; border-radius: 50%; background: var(--cd-accent); position: relative; }
.cd2-live::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--cd-accent); opacity: .5; animation: actpulse 1.8s ease-out infinite; }
.cd2-linkchip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.cd2-linkchip .icn { color: var(--ink-3); }
.cd2-body { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 14px 18px 4px; }
.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: 24px; font-weight: 560; letter-spacing: -0.01em; margin: 0 0 16px; line-height: 1.15; }
.cd2-units { display: flex; align-items: stretch; gap: 6px; }
.cd2-colon { align-self: center; color: var(--ink-4); font-weight: 700; }
.cd2-unit { position: relative; flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 8px 12px; text-align: center; box-shadow: var(--shadow-xs); }
.cd2-num { display: block; font-family: var(--font-serif); font-size: 34px; font-weight: 560; line-height: 1; letter-spacing: -0.02em; }
.cd2-lab { display: block; font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; }
.cd2-unit-ic { display: grid; place-items: center; margin: 9px auto 0; }
.cd2-done { font-size: 18px; font-weight: 600; color: var(--cd-accent); padding: 14px 0; }
.cd2-done-em { font-size: 22px; }
.cd2-progress { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin: 18px 0 8px; }
.cd2-progress span { display: block; height: 100%; border-radius: 999px; background: var(--cd-accent); transition: width .5s ease; }
.cd2-progress-meta { display: flex; align-items: center; justify-content: space-between; }
.cd2-pct { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cd2-due { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.cd2-due .icn { color: var(--ink-4); }
.cd2-overview { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 15px 16px; }
.cd2-ov-h { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.cd2-ov-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; }
.cd2-ov-l { display: inline-flex; align-items: center; gap: 8px; 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: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.cd2-chip.ok { color: var(--st-done); background: var(--st-done-soft); }
.cd2-ov-btn { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 12px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sidebar); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.cd2-ov-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.cd2-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; padding: 16px 18px; margin-top: 12px; 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: 6px; font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.cd2-foot-h .icn { color: var(--ink-4); }
.cd2-next { display: flex; align-items: center; gap: 10px; }
.cd2-next-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--st-done-soft); color: var(--st-done); display: grid; place-items: center; flex-shrink: 0; }
.cd2-next-t { font-size: 13px; font-weight: 600; }
.cd2-next-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.cd2-going { display: flex; flex-direction: column; gap: 8px; }
.cd2-going-meta { font-size: 11.5px; color: var(--ink-3); }
.cd2-actions { display: flex; flex-direction: column; gap: 7px; }
.cd2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.cd2-btn:hover { border-color: var(--border-strong); }
.cd2-btn.primary { background: var(--ink); color: var(--bg-sidebar); border-color: var(--ink); }
.cd2-btn.primary.on { background: var(--st-done); border-color: var(--st-done); color: #fff; }

/* poll */
.poll { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-sidebar); padding: 16px 18px; margin-top: 4px; }
.poll-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.poll-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.poll-kicker { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; }
.poll-closes, .poll-closed { font-size: 11px; color: var(--ink-4); }
.poll-closed { color: var(--st-blocked); font-weight: 600; }
.poll-q { font-size: 16px; font-weight: 650; margin: 0 0 14px; }
.poll-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); overflow: hidden; cursor: pointer; padding: 0; transition: border-color .12s; }
.poll-opt:hover { border-color: var(--border-strong); }
.poll-opt.mine { border-color: var(--accent); }
.poll-opt-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.poll-opt.lead .poll-opt-fill { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.poll-opt-body { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.poll-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.poll-opt.mine .poll-radio { background: var(--accent); border-color: var(--accent); }
.poll-opt-t { font-size: 13.5px; font-weight: 550; }
.poll-opt-n { font-size: 11.5px; color: var(--ink-3); }
.poll-opt-pct { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 38px; text-align: right; }
.poll-foot { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.poll-clear { border: none; background: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 12px; padding: 0; }
/* composer poll */
.fpoll-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fpoll-optrow { display: flex; align-items: center; gap: 9px; }
.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: 8px; 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: 6px; border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.fpoll-multi { display: flex; align-items: center; gap: 8px; font-size: 12.5px; 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: 16px; background: color-mix(in srgb, var(--kv) 6%, var(--surface)); padding: 18px 20px; margin-top: 4px; 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: 8px; margin-bottom: 14px; }
.kudos-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--kv); color: #fff; display: grid; place-items: center; }
.kudos-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--kv); }
.kudos-value { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
.kudos-to { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kudos-names { font-family: var(--font-serif); font-size: 19px; font-weight: 560; }
.kudos-msg { position: relative; font-size: 14.5px; 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: 7px; height: 34px; padding: 0 16px; border: 1px solid var(--kv); border-radius: 999px; background: var(--surface); color: var(--kv); font-size: 13px; 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: 16px 10px; }
.fk-person { display: flex; flex-direction: column; align-items: center; gap: 6px; 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: 11.5px; 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: 6px; }
/* 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: 8px; }
.fk-teamrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; 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: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-teamrow-n { font-size: 10.5px; font-weight: 700; color: var(--ink-4); background: var(--bg-sunken); border-radius: 99px; padding: 0 7px; flex-shrink: 0; }
.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: #fff; 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: 16px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--kv) 7%, var(--surface)), var(--surface)); margin-top: 12px; }
.kudos2-body { flex: 1; padding: 16px 18px; min-width: 0; }
.kudos2-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.kudos2-badge { width: 36px; height: 36px; border-radius: 11px; 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: 10px; font-weight: 800; letter-spacing: .12em; color: var(--kv); }
.kudos2-value { font-size: 15px; font-weight: 700; color: var(--ink); }
.kudos2-emoji { font-size: 20px; flex-shrink: 0; }
.kudos2-recipients { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.kudos2-team { display: inline-flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--tc) 34%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--tc) 8%, transparent); }
.kudos2-team-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--tc); color: #fff; 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: 13.5px; font-weight: 700; color: var(--ink); }
.kudos2-team-meta { font-size: 11.5px; color: var(--ink-3); }
.kudos2-people { display: flex; align-items: center; gap: 11px; }
.kudos2-names { font-size: 14px; font-weight: 650; color: var(--ink); }
.kudos2-msg { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 14px; font-style: italic; }
.kudos2-foot { display: flex; align-items: center; gap: 12px; }
.kudos2-cheer { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--kv) 36%, var(--border)); border-radius: 99px; background: var(--surface); color: var(--kv); font-size: 12.5px; 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: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.fk-value { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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: 12px; box-shadow: var(--shadow-pop); padding: 6px; max-height: 280px; overflow-y: auto; }
.mention-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; }
.mention-row.on, .mention-row:hover { background: var(--bg-hover); }
/* .mention-hl now shares the canonical .mention identity (see above) */

/* projects — compact metric strip (borderless, hairline-divided) */
.pmetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; padding: 2px 0 16px; border-bottom: 1px solid var(--border-subtle); }
.pmetric { display: flex; align-items: center; gap: 11px; padding: 4px 20px; border: none; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
.pmetric + .pmetric { border-left: 1px solid var(--border-subtle); }
.pmetric:first-child { padding-left: 2px; }
.pmetric-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.pmetric-main { flex: 1; min-width: 0; }
.pmetric-val { font-family: var(--font-serif); font-size: 21px; font-weight: 540; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmetric-label { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Meetings / Zoom — feed card (reference style)
   ============================================================ */
.mc2 { border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); padding: 6px; margin-top: 4px; }
.mc2.live { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.mc2-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px; }
.mc2-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.mc2-sub { font-size: 13px; 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: 13px; padding: 16px 16px 14px; }
.mc2-row { display: flex; align-items: center; gap: 13px; padding: 7px 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: 14.5px; 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: 8px; }
.mc2-link { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13.5px; 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: 12px 0; }
.mc2-join { display: block; text-align: center; padding: 13px; border-radius: 11px; background: var(--ink); color: var(--bg-sidebar); font-size: 14.5px; 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: 10px; padding: 12px 12px 8px; }
.mc2-rsvp-q { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.mc2-rsvp-btns { display: flex; gap: 8px; }
.mc2-rsvp-btn { min-width: 56px; height: 34px; padding: 0 16px; border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font-size: 13.5px; 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); border-color: var(--st-blocked); color: #fff; }

/* redesigned platform-branded feed card (mcard2) */
.mcard2 { --pc: #2D8CFF; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; margin-top: 6px; box-shadow: var(--shadow-xs); }
.mcard2-band { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 14%, var(--surface)), color-mix(in srgb, var(--pc) 5%, var(--surface))); border-bottom: 1px solid color-mix(in srgb, var(--pc) 16%, var(--border)); }
.mcard2-logo { flex-shrink: 0; display: grid; place-items: center; }
.mcard2-logo svg { border-radius: 8px; box-shadow: var(--shadow-xs); }
.mcard2-band-tx { min-width: 0; flex: 1; }
.mcard2-band-name { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.mcard2-recur { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-active); padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; }
.mcard2-band-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.mcard2-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, var(--surface)); padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.mcard2-state.live { color: var(--st-blocked); background: var(--st-blocked-soft); }
.mcard2-state.ended { color: var(--ink-3); background: var(--bg-active); }
.mcard2-collapse { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .12s; }
.mcard2-collapse:hover { background: color-mix(in srgb, var(--pc) 12%, transparent); color: var(--ink); }
.mcard2.ended { opacity: .96; }
.mcard2-main { padding: 14px 15px 4px; }
.mcard2-title { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; line-height: 1.3; }
.mcard2-title:hover { color: var(--pc); }
.mcard2-agenda { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
.mcard2-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 13px 0; }
.mcard2-attendees { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mcard2-att-tx { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.mcard2-att-tx b { color: var(--ink); font-weight: 700; }
.mcard2-att-dot { color: var(--ink-4); }
.mcard2-conf { color: var(--accent); font-weight: 600; }
.mcard2-maybe { color: var(--c-gold, #c79a3a); font-weight: 600; }
.mcard2-proj { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-sidebar); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: 999px; }
.mcard2-proj-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--prc); }
.mcard2-link { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); background: var(--bg-sidebar); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 8px 8px 11px; margin-bottom: 12px; }
.mcard2-actions { display: flex; gap: 8px; }
.mcard2-join { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 11px; background: var(--pc); color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; transition: filter .12s, transform .12s; }
.mcard2-join:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mcard2.ended .mcard2-join { background: var(--ink); color: var(--bg); }
.mcard2-detail { width: 42px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: all .12s; }
.mcard2-detail:hover { border-color: var(--pc); color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, transparent); }
.mcard2-rsvp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--border-subtle); background: var(--bg-sidebar); }
.mcard2-rsvp-q { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mcard2-rsvp-btns { display: flex; gap: 7px; }
.mcard2-rsvp-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 56px; justify-content: center; height: 32px; padding: 0 12px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.mcard2-rsvp-btn:hover { border-color: var(--pc); color: var(--pc); }
.mcard2-rsvp-btn.yes { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mcard2-rsvp-btn.no { background: var(--st-blocked); border-color: var(--st-blocked); color: #fff; }
.mcard2-rsvp-btn.maybe { background: var(--c-gold, #c79a3a); border-color: var(--c-gold, #c79a3a); color: #fff; }
.mcard2-rsvp-btn.maybe:hover { border-color: var(--c-gold, #c79a3a); color: #fff; }

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

/* calendar header: search + view segment */
.cal-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; 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: 13px; 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: 3px;
}
.seg button, .cal-vseg button, .fin-viewseg button, .ct-viewseg button, .tp-viewseg button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 13px; 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 6px; 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: 9px 1px; border-radius: 0; background: none; box-shadow: none;
  color: var(--ink-3); position: relative; font-weight: 500; gap: 6px;
}
.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: 7px; height: 30px; padding: 0 9px 0 5px; border: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .14s ease; }
.cal-focus-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cal-focus-chip .icn:last-child { opacity: .7; }
.cal-more { display: inline-flex; align-items: center; width: 100%; border: none; background: none; color: var(--ink-4); font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 2px 5px; 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: 3px; padding: 11px 4px 10px; border-right: 1px solid var(--border-subtle); }
.calw-dow { font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.calw-dnum { font-size: 20px; 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: 8px 6px; text-align: right; border-right: 1px solid var(--border-subtle); }
.calw-allday-col { padding: 6px 5px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calw-allday-ev { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; border: none; font-size: 11px; 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: 10px; 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: 7px; 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: 3px 7px; 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: 8px; 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: translateY(-1px); border-color: color-mix(in srgb, var(--ec) 55%, transparent); z-index: 6; }
.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: 11px; 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: 5px 8px; min-width: 0; flex: 1; }
.calw-ev-title { display: flex; align-items: center; gap: 4px; font-size: 11.5px; 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: 10px; 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: 6px 10px; }

/* ---- calendar fixed viewport layout ---- */
.cal-locked { overflow: hidden !important; }
.cal-locked .content-pad { height: 100%; display: flex; flex-direction: column; padding-bottom: 8px; box-sizing: border-box; max-width: none; }
.cal-locked .with-rail { flex: 1; min-height: 0; align-items: stretch; overflow: hidden; grid-template-columns: 1fr var(--rail-w) !important; }
.cal-locked .rail { overflow-y: auto; display: flex !important; }
.cal-main-card { display: flex; flex-direction: column; min-height: 0; }
/* sticky period bar + DOW row inside the scrolling month/agenda card */
.cal-stickyhead { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.cal-agenda-head { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.cal-main-card > div[style*="grid"] { min-width: 0; }
.cal-locked .calw { flex: 1; min-height: 0; }
/* narrow viewports: collapse the calendar rail so day cells stay roomy
   (overrides the !important split above — must come after it) */
@media (max-width: 1240px){
  .cal-locked .with-rail { grid-template-columns: 1fr !important; }
  .cal-locked .rail { display: none !important; }
}
.csync-twoway { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 8px; cursor: pointer; }
.switch.sm { width: 30px; height: 17px; }
.switch.sm::after { width: 13px; height: 13px; }
.switch.sm.on::after { transform: translateX(13px); }
.csync-now { width: 28px; height: 28px; border-radius: 8px; 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: 9px; }
.csync-item { display: flex; align-items: center; gap: 10px; }
.csync-item svg { border-radius: 7px; flex-shrink: 0; }
.csync-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.csync-sub { font-size: 11px; 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 */
.mnext { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(100deg, color-mix(in srgb, #2D8CFF 10%, var(--surface)), var(--surface)); margin-bottom: 20px; box-shadow: var(--shadow-xs); }
.mnext-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mnext-kicker { font-size: 11px; font-weight: 700; color: #2D8CFF; letter-spacing: .04em; }
.mnext-title { font-size: 17px; font-weight: 650; margin: 2px 0 7px; }
.mnext-people { display: flex; align-items: center; gap: 9px; }
.mnext .btn { text-decoration: none; flex-shrink: 0; }

.mtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.mtab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: none; background: none; color: var(--ink-3); font-size: 13.5px; 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 5px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 11px; 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: 50px; text-align: center; color: var(--ink-3); }
.mrow { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border: none; border-radius: 12px; 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: 9px; box-shadow: var(--shadow-xs); }
.mrow.past .mrow-logo { opacity: .68; filter: saturate(.65); }
.mrow-date { text-align: center; flex-shrink: 0; width: 58px; font-variant-numeric: tabular-nums; }
.mrow-date b { display: block; font-size: 14px; font-weight: 700; }
.mrow-date span { font-size: 11px; color: var(--ink-3); }
.mrow-main { flex: 1; min-width: 0; }
.mrow-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mrow-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ink-3); background: var(--bg-active); padding: 1px 7px; border-radius: 999px; }
.mrow-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mrow-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mrow-actions .mcard-btn { height: 32px; padding: 0 12px; }
.mcard-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.mcard-btn.join { background: #2D8CFF; border-color: #2D8CFF; color: #fff; }
.mcard-btn.join:hover { filter: brightness(1.05); }

/* schedule modal bits */
.mtg-check, .mtg-sharefeed { display: flex; align-items: center; gap: 9px; font-size: 13px; 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: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-sidebar); }
.mtg-sharefeed b { display: block; font-size: 13px; }
.mtg-scope { padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-sidebar); }
.mtg-scope-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 9px; }
.mtg-scope-h .icn, .mtg-scope-h svg { color: var(--accent); }
.mtg-scope-opts { display: flex; gap: 6px; }
.mtg-scope-opt { flex: 1; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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: 11.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.45; }
.mtg-sharefeed em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pm-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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, 1fr); gap: 0; margin-bottom: 20px; padding: 2px 0 16px; border-bottom: 1px solid var(--border-subtle); }
.mstat { display: flex; align-items: center; gap: 11px; padding: 4px 20px; border: none; border-radius: 0; background: none; box-shadow: none; }
.mstat + .mstat { border-left: 1px solid var(--border-subtle); }
.mstat:first-child { padding-left: 2px; }
.mstat-click { cursor: pointer; border-radius: 11px; 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: 12px; margin-bottom: 12px; }
.mai-count { font-size: 13px; 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: 12px; padding: 10px 12px; border: none; border-radius: 10px; 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: #fff; 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: 13.5px; font-weight: 550; color: var(--ink); }
.mai-src { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: inherit; font-size: 11.5px; 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: 4px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--st-done); background: color-mix(in srgb, var(--st-done) 13%, transparent); padding: 4px 9px; border-radius: 999px; }
.mai-totask { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: all .12s; }
.mai-totask:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.mstat-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.mstat-v { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.mstat-k { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

.mtoolbar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.mtoolbar .mtabs { border-bottom: none; margin-bottom: 0; }
.msearch { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); width: 230px; transition: border-color .14s, box-shadow .14s; margin-bottom: 8px; }
.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: 13px; 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: 8px; }
.mtoolbar .btn.on-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mfilter-n { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; margin-left: 4px; }

.mgroup { margin-bottom: 18px; }
.mgroup-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 9px; }
.mgroup-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 10.5px; 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: 4px; font-size: 10px; font-weight: 700; color: var(--st-blocked); background: var(--st-blocked-soft); padding: 1px 7px 1px 6px; 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: 8px; }
.mtg-plat { flex: 1; display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 13px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s; }
.mtg-plat.on { border-color: var(--accent); background: var(--accent-soft); 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: 10.5px; 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: 6px; margin-top: 9px; border: none; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.mtg-connect-hint:hover { text-decoration: underline; }

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

/* connections modal */
.conn-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .14s; }
.conn-card.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.conn-card svg { flex-shrink: 0; border-radius: 12px; }
.conn-name { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.conn-def { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.conn-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.conn-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: var(--st-done); font-weight: 600; }
.conn-acct { min-width: 0; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-done); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-done) 16%, transparent); }
.conn-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.conn-prefs { border: 1px solid var(--border-subtle); border-radius: 13px; overflow: hidden; margin-top: 4px; }
.conn-pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; 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: 13px; font-weight: 600; }
.conn-pref-d { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── calendar .ics import (Phase 2) ── */
.cal-drop { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border: 1.5px dashed var(--border); border-radius: 14px; 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: 14px; font-weight: 650; }
.cal-drop-s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cal-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 11.5px; }
.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: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-1); }
.cal-paste:focus { outline: none; border-color: var(--accent); }
.cal-err { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--st-blocked); }
.cal-sum { display: flex; align-items: center; gap: 16px; padding: 0 2px 12px; font-size: 13px; 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: 12px; }
.cal-rows { display: flex; flex-direction: column; max-height: 340px; overflow: auto; margin: 0 -4px; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--border-subtle); }
.cal-row:last-child { border-bottom: none; }
.cal-row.skipped { opacity: .5; }
.cal-row-t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.cal-row-s { font-size: 12px; 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 6px; border-radius: 999px; }
.cal-conflict { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--st-blocked); margin-top: 3px; }
.cal-row-act { display: flex; gap: 0; flex-shrink: 0; }
.cal-row-act .seg, .seg-group .seg { font-size: 12px; font-weight: 600; padding: 5px 11px; 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: 8px 0 0 8px; }
.cal-row-act .seg:last-child, .seg-group .seg:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.cal-row-act .seg.on, .seg-group .seg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.seg-group { display: flex; flex-shrink: 0; }
.cal-done { text-align: center; padding: 24px 10px 14px; }
.cal-done-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 14px; }
.cal-done-t { font-size: 16px; font-weight: 650; }
.cal-done-s { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.cal-settings { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.cal-set-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 10px; }
.cal-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.cal-set-t { font-size: 13px; font-weight: 600; }
.cal-set-d { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── cloud storage import ── */
.cloud-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--ink-3); padding: 10px 12px; background: var(--bg-sunken); border-radius: 10px; }
.cloud-note svg { flex-shrink: 0; margin-top: 1px; }
.cloud-lbl { display: block; font-size: 12px; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.cloud-in { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-1); font-size: 13.5px; }
.cloud-in:focus { outline: none; border-color: var(--accent); }
.cloud-detect { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); margin-top: 7px; }
.cloud-detect.warn { color: var(--ink-3); }
.cloud-detect svg { flex-shrink: 0; }

/* ── detail drawer ── */
.md-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); white-space: nowrap; }
.md-pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: md-pulse 1.6s infinite; }
@keyframes md-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.md-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 15px 16px; border-radius: 14px; margin-bottom: 18px; background: linear-gradient(110deg, color-mix(in srgb, #2D8CFF 9%, var(--surface)), var(--surface)); border: 1px solid var(--border); }
.md-hero.live { background: linear-gradient(110deg, var(--st-blocked-soft), var(--surface)); border-color: color-mix(in srgb, var(--st-blocked) 30%, var(--border)); }
.md-hero.past { background: var(--bg-sidebar); }
.md-hero-l { display: flex; align-items: center; gap: 13px; min-width: 0; }
.md-hero-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: #2D8CFF; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.md-hero.live .md-hero-ic { color: var(--st-blocked); }
.md-hero.past .md-hero-ic { color: var(--ink-3); }
.md-hero-k { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.md-hero-v { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.md-hero-link { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 5px 6px 5px 11px; min-width: 0; max-width: 100%; }

.md-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.md-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: none; background: none; color: var(--ink-3); font-size: 13px; 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 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; display: grid; place-items: center; }

.md-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.md-fact { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-sidebar); }
.md-fact-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border-subtle); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.md-fact b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.md-fact span { font-size: 11.5px; color: var(--ink-3); }

.md-sec { margin-bottom: 22px; }
.md-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.md-sec-h > span:first-child { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.md-sec-meta { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.md-link-btn { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 4px; border-radius: 6px; }
.md-link-btn:hover { background: var(--accent-soft); }

.md-myrsvp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 12px; }
.md-myrsvp-q { font-size: 13px; font-weight: 600; color: var(--ink); }
.md-rsvp-seg { display: flex; gap: 6px; }
.md-rsvp-b { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.md-rsvp-b:hover { border-color: var(--accent); }
.md-rsvp-b.yes { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.md-rsvp-b.no { background: var(--st-blocked); border-color: var(--st-blocked); color: #fff; }
.md-rsvp-b.maybe { background: var(--c-gold, #c79a3a); border-color: var(--c-gold, #c79a3a); color: #fff; }

.md-att { display: flex; flex-direction: column; gap: 2px; }
.md-att-row { display: flex; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 10px; transition: background .12s; }
.md-att-row:hover { background: var(--bg-hover); }
.md-att-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.md-att-role { font-size: 11.5px; color: var(--ink-3); }
.md-host-tag, .md-you-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; }
.md-host-tag { background: var(--accent-soft); color: var(--accent); }
.md-you-tag { background: var(--bg-active); color: var(--ink-3); }
.md-att-status { font-size: 11px; font-weight: 700; padding: 3px 10px; 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: 6px; height: 34px; padding: 0 13px; margin-top: 8px; border: 1px dashed var(--border-strong); border-radius: 9px; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.md-addatt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.md-addatt:disabled { opacity: .5; cursor: default; }
.md-addatt-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding: 11px; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--bg-sidebar); }
.md-addatt-done { height: 34px; padding: 0 14px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 12.5px; font-weight: 600; cursor: pointer; }

.md-ag { display: flex; flex-direction: column; gap: 8px; }
.md-ag-list { display: flex; flex-direction: column; gap: 5px; }
.md-ag-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface); transition: border-color .12s; }
.md-ag-row:hover { border-color: var(--border-strong); }
.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: 19px; height: 19px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: #fff; 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: 13px; color: var(--ink); padding: 2px 0; }
.md-ag-mins { flex-shrink: 0; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); font-size: 11px; font-weight: 650; cursor: pointer; transition: all .12s; }
.md-ag-mins:hover { border-color: var(--accent); color: var(--accent); }
.md-ag-mins.set { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.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: all .12s; }
.md-ag-x:hover { background: var(--st-blocked-soft); color: var(--st-blocked); }
.md-ag-add { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px dashed var(--border); border-radius: 10px; }
.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: 13px; color: var(--ink); }
.md-ag-add-btn { flex-shrink: 0; height: 26px; padding: 0 12px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 650; cursor: pointer; }
.md-ag-foot { display: flex; align-items: center; gap: 7px; font-size: 11.5px; 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: 11px; }
.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: 4px; }
.md-agcov-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); padding: 4px 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: 11px; font-weight: 600; color: var(--ink-4); }
.md-agcov-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11.5px; 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: 7px; margin-top: 11px; height: 34px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; 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: 13.5px; line-height: 1.55; color: var(--ink-2); padding: 12px 34px 12px 14px; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--bg-sidebar); cursor: text; white-space: pre-wrap; transition: border-color .12s; }
.md-edit:hover { border-color: var(--border-strong); }
.md-edit.empty { 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: 12px; width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 16px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(140deg, var(--accent-soft), transparent 75%); cursor: pointer; transition: all .16s; }
.md-canvas-cta:hover { border-color: var(--accent); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.md-canvas-cta-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); display: grid; 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: 13.5px; color: var(--ink); font-weight: 650; }
.md-canvas-cta-tx span { font-size: 11.5px; 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: 7px; font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.md-ai-dot { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent-700)); color: var(--accent-fg); display: grid; place-items: center; }
.md-summary { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.md-decisions { display: flex; flex-direction: column; gap: 7px; }
.md-decision { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink); padding: 9px 12px; border-radius: 10px; 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: 7px; }
.md-action { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--border-subtle); border-radius: 11px; 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: #fff; transition: all .12s; }
.md-action.done .md-action-check { background: var(--st-done); border-color: var(--st-done); }
.md-action-t { font-size: 13px; font-weight: 550; line-height: 1.35; }
.md-action-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.md-action-add { width: 30px; height: 30px; border-radius: 8px; 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: 4px; font-size: 10.5px; font-weight: 700; color: var(--st-done); background: color-mix(in srgb, var(--st-done) 14%, transparent); padding: 4px 9px; border-radius: 999px; flex-shrink: 0; }

.md-ai-answer { font-size: 13px; line-height: 1.55; color: var(--ink-2); padding: 12px 14px; border-radius: 11px; background: var(--accent-soft); margin-bottom: 10px; }
.md-ask { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 3px 3px 3px 13px; }
.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: 13px; color: var(--ink); font-family: inherit; }
.md-ask-send { width: 32px; height: 32px; border-radius: 8px; 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); }

.md-trans { display: flex; flex-direction: column; gap: 15px; }
.md-trans-row { display: flex; gap: 11px; }
.md-trans-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.md-trans-head b { font-size: 12.5px; font-weight: 700; }
.md-trans-t { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); }
.md-trans-tx { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.md-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; color: var(--ink-3); font-size: 13px; }

/* 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: 12px; }
.plist-head { padding: 0 12px 9px; }
.plist-head span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; color: var(--ink-4); }
.plist { display: flex; flex-direction: column; }
.prow { padding: 11px 12px; border-top: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s; border-radius: 10px; }
.prow:hover { background: var(--bg-hover); }
.prow-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.prow-name-row { display: flex; align-items: center; gap: 7px; }
.prow-name { font-weight: 600; font-size: 14px; }
.prow-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.prow-prog { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prow-prog-n { font-size: 12px; width: 32px; flex-shrink: 0; }
.prow-due { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; 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: 12.5px; color: var(--ink-3); padding: 14px 12px 2px; margin-top: 4px; border-top: 1px solid var(--border-subtle); }
/* 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: 16px; }
.pcard2-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.pcard2-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.pcard2-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pcard2-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.pcard2-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.pcard2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pcard2-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }
.pcard2-labels { margin-bottom: 12px; }
.pcard2-prog { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pcard2-ms { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); margin-bottom: 14px; }
.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: 13px; border-top: 1px solid var(--border-subtle); }
.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: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.inset-inspector-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 16px; }
.inset-inspector.compact { width: 48px; min-width: 48px; }
.inset-inspector.compact .inset-inspector-body { display: none; }
.inset-inspector.compact .inset-inspector-hd { border-bottom: none; }
/* projects right rail — borderless hairline sections instead of bordered cards */
.rail-flush { gap: 0; }
.rail-flush .rail-card { background: none; border: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.rail-flush .rail-card:last-child { border-bottom: none; }
.rail-flush .card-pad { padding: 20px 2px; }
.cal-up-row { border-radius: 8px; padding: 7px 8px; 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; }
.pcard-health { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.proj-attention { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 16px; 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: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-clay); flex-shrink: 0; }
.proj-attention-n { background: var(--c-clay); color: #fff; font-size: 10.5px; min-width: 17px; height: 17px; border-radius: 99px; display: inline-grid; place-items: center; padding: 0 5px; }
.proj-attention-list { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.proj-attention-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px; 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: 12.5px; font-weight: 600; color: var(--ink); }
.proj-attention-rsn { font-size: 11.5px; 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: 22px; }
.attn-hd { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.attn-toggle { display: inline-flex; align-items: baseline; gap: 8px; border: none; background: none; cursor: pointer; padding: 4px 2px; font: inherit; }
.attn-chev { color: var(--ink-4); align-self: center; transition: transform .15s; }
.attn-title { font-size: 11px; font-weight: 680; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.attn-n { font-size: 11px; 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); }
.attn-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; border-top: 1px solid var(--border-subtle); }
.attn-item { display: flex; align-items: center; gap: 11px; background: none; border: none; border-bottom: 1px solid var(--border-subtle); padding: 13px 8px 13px 4px; margin: 0 -8px 0 -4px; cursor: pointer; text-align: left; border-radius: 8px; 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: 13.5px; font-weight: 550; color: var(--ink); letter-spacing: -.01em; flex: 1; min-width: 0; }
.attn-rsn { font-size: 12px; 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: 10px; padding: 2px 7px; }
.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: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; position: absolute; top: 10px; left: 10px; box-shadow: var(--shadow-xs); }
.pcard-budget.sm { font-size: 10px; padding: 2px 6px; gap: 3px; }
.pcard-ms { display: flex; align-items: center; gap: 5px; }
.pcard-blocked { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 12%, transparent); padding: 2px 7px 2px 6px; border-radius: 99px; flex-shrink: 0; }
.pcard-blocked.sm { font-size: 10px; padding: 1px 6px 1px 5px; }
.pcard-ms .icn { color: var(--ink-4); }
/* milestones */
.pms-list { display: flex; flex-direction: column; }
.pms-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 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: #fff; 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: 13.5px; font-weight: 550; }
.pms-bar { height: 5px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; margin-top: 6px; }
.pms-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .2s; }
.pms-at { font-size: 11.5px; 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, 1fr); gap: 8px; align-items: start; }
.pboard-wrap { display: flex; flex-direction: column; gap: 12px; }
.pboard-bar { display: flex; align-items: center; gap: 10px; }
.pboard-bar-l { font-size: 11.5px; font-weight: 650; color: var(--ink-4); }
.pboard-seg { flex-shrink: 0; }
.pboard-blkfilter { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 5px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink-3); font: inherit; font-size: 12px; 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 { opacity: .45; cursor: default; }
.pboard-blkn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--c-clay); color: #fff; font-size: 10px; font-weight: 800; }
.pboard-blkfilter.on .pboard-blkn { background: var(--c-clay); }
.pboard-empty-blk { color: var(--ink-4); font-size: 12px; font-style: italic; padding: 8px 4px; }
.pboard-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.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: 11px; padding: 8px; min-height: 80px; transition: background .15s ease, box-shadow .15s ease; }
.pboard-col.over { background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunken)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent); }
.pboard-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 2px 4px 8px; }
.pboard-scroll .pboard-h { text-transform: none; font-size: 12px; 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 6px; font-size: 10px; }
.pboard-body { display: flex; flex-direction: column; gap: 6px; }
.pboard-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px; box-shadow: var(--shadow-xs); cursor: pointer; transition: box-shadow .14s ease, transform .14s ease, opacity .14s ease, border-color .14s ease; }
.pboard-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pboard-card.dragging { opacity: .45; transform: scale(.97); }
.pboard-card-t { font-size: 12px; font-weight: 550; line-height: 1.35; }
.pboard-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pboard-subs { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.pboard-subico { color: var(--ink-4); display: grid; place-items: center; flex-shrink: 0; }
.pboard-subbar { flex: 1; height: 4px; border-radius: 99px; background: var(--bg-active); overflow: hidden; }
.pboard-subbar > span { display: block; height: 100%; border-radius: 99px; transition: width .2s ease; }
.pboard-subn { font-size: 10px; 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: 10.5px; color: var(--ink-4); font-weight: 600; }
.pboard-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 6px; 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: 5px; width: 100%; margin-top: 2px; padding: 7px 8px; border: none; background: none; color: var(--ink-4); font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 8px; 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: 8px 9px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12px; color: var(--ink); outline: none; box-sizing: border-box; }
.pboard-empty { text-align: center; color: var(--ink-4); font-size: 11px; padding: 6px; min-height: 8px; }
.mention-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; 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: 13.5px; font-weight: 600; color: var(--ink); }
.mention-role { font-size: 11.5px; 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: 8px; background: var(--mention-entity-bg); color: var(--mention-entity-fg); font-size: 13px; 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: 22px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }

/* hero — editorial text + circular progress dial */
.gs2-hero { display: flex; align-items: center; gap: 36px; margin-bottom: 30px; }
.gs2-hero-tx { flex: 1; min-width: 0; }
.gs2-eyebrow { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 15px; }
.gs2-title { font-family: var(--font-serif); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 16px; }
.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: 14.5px; line-height: 1.6; margin: 0; max-width: 400px; }
.gs2-eta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 650; }
.gs2-eta .icn { color: inherit; }

.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(--bg-sunken); stroke-width: 8; }
.gs2-dial-fill { fill: none; stroke: var(--lime); 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: 31px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
.gs2-dial-num span { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 1px; }
.gs2-dial-cap { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 6px; letter-spacing: .01em; }
@media (max-width: 620px) { .gs2-hero { flex-direction: column-reverse; align-items: flex-start; gap: 22px; } .gs2-title { font-size: 33px; } }

/* required workspace name — borderless */
.gs2-wsname { margin: 4px 0 8px; }
.gs2-wsname.done { display: flex; align-items: center; gap: 13px; }
.gs2-wsname-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--lime); color: #fff; }
.gs2-wsname-done-t { font-size: 14px; font-weight: 650; color: var(--ink); }
.gs2-wsname-done-s { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.gs2-wsname-t { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 11px; 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: 13px; color: var(--ink-3); margin-top: 7px; line-height: 1.55; max-width: 470px; }
.gs2-wsname-row { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
.gs2-wsname-input { flex: 1; min-width: 0; border: none; border-bottom: 1.5px solid var(--border-strong); background: none; padding: 9px 2px; font: inherit; font-size: 17px; color: var(--ink); transition: border-color .16s; }
.gs2-wsname-input::placeholder { color: var(--ink-4); }
.gs2-wsname-input:focus { outline: none; border-bottom-color: var(--accent); }

/* section header */
.gs2-h { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; margin: 40px 0 4px; }
.gs2-h.sm { margin: 0 0 6px; }

/* checklist — borderless numbered list on hairline dividers */
.gs2-steps { margin: 8px -10px 0; }
.gs2-step { display: grid; grid-template-columns: 46px 1fr; align-items: start; gap: 6px; padding: 19px 10px; 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: 25px; 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: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #fff; }
.gs2-step-body { min-width: 0; padding-top: 2px; }
.gs2-step-head { display: flex; align-items: baseline; gap: 16px; }
.gs2-step-t { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.gs2-step.done .gs2-step-t { color: var(--ink-3); }
.gs2-step-s { font-size: 13px; color: var(--ink-3); margin-top: 4px; 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: 6px; border: none; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 650; color: var(--accent); cursor: pointer; }
.gs2-cta .icn { transition: transform .15s; }
.gs2-cta:hover .icn { transform: translateX(3px); }
.gs2-link { border: none; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color .14s; }
.gs2-link:hover { color: var(--ink); }
.gs2-donetag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--lime); }
.gs2-donetag.re { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 9px; border-radius: 8px; 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: 5px; }
.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: 8px; margin-top: 13px; }
.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: 14px; margin-top: 24px; padding: 16px 18px; border-radius: 16px; background: var(--lime-soft); }
.gs2-celebrate .icn { color: var(--lime); flex-shrink: 0; }
.gs2-celebrate b { display: block; font-size: 14.5px; }
.gs2-celebrate span { font-size: 12.5px; color: var(--ink-2); }
.gs2-celebrate .btn { margin-left: auto; flex-shrink: 0; }

/* quick actions — borderless rows, no chips */
.gs2-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin: 6px -12px 0; }
.gs2-qrow { position: relative; display: flex; align-items: center; gap: 15px; text-align: left; padding: 14px 14px; border: none; background: none; border-radius: 13px; 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: 14.5px; font-weight: 650; color: var(--ink); }
.gs2-qrow-s { font-size: 12px; 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: 30px; }
.gs2-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--border); }
@media (max-width: 620px){ .gs2-quick, .gs2-foot { grid-template-columns: 1fr; } .gs2-foot { gap: 30px; } }
.gs2-res { display: flex; flex-direction: column; margin: 0 -10px; }
.gs2-res-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: none; background: none; border-radius: 10px; cursor: pointer; color: var(--ink); font-size: 13.5px; 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: 11px; padding: 7px 0; }
.gs2-person-n { font-size: 13px; font-weight: 600; }
.gs2-person-r { font-size: 11.5px; color: var(--ink-3); }
.gs2-icon-btn { width: 32px; height: 32px; border: none; background: none; border-radius: 9px; 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); }

/* ============================================================
   Guided product tour — spotlight + coachmark
   ============================================================ */
.tour-scrim { position: fixed; inset: 0; z-index: 8998; cursor: default; }
.tour-hole { position: fixed; z-index: 9000; border-radius: 11px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(18, 20, 16, 0.55), 0 0 0 2px var(--lime), 0 0 0 6px color-mix(in srgb, var(--lime) 35%, transparent);
  transition: top .32s var(--ease), left .32s var(--ease), width .32s var(--ease), height .32s var(--ease); }
.tour-pop { position: fixed; z-index: 9002; width: 304px; background: var(--overlay); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px 14px; box-shadow: 0 18px 50px -12px rgba(15, 18, 14, 0.42); transition: top .28s var(--ease), left .28s var(--ease), opacity .2s; }
.tour-pop-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.tour-pop-step { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tour-skip { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-4); cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: color .14s; }
.tour-skip:hover { color: var(--ink-2); }
.tour-pop-t { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin-bottom: 6px; }
.tour-pop-b { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.tour-dots { display: flex; align-items: center; gap: 5px; margin: 14px 0 13px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background .2s, width .2s; }
.tour-dot.done { background: var(--lime); }
.tour-dot.on { width: 18px; border-radius: 3px; background: var(--ink); }
.tour-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .14s, background .14s, color .14s, opacity .14s; }
.tour-btn.ghost { border: none; background: none; color: var(--ink-3); padding-left: 4px; }
.tour-btn.ghost:hover { color: var(--ink); }
.tour-btn.ghost:disabled { opacity: 0; pointer-events: none; }
.tour-btn.primary { border: none; background: var(--accent); color: var(--accent-fg); }
.tour-btn.primary:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-pop { transition: none; } }

/* ============================================================
   Dashboard — widget board
   ============================================================ */
.dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }

/* onboarding nudge — dismissible callout, auto-hides at 100% */
.dash-ob { display: flex; align-items: center; gap: 15px; margin: 0 0 22px; padding: 14px 16px 14px 18px; border-radius: 16px; 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: 12px; 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: 14.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.dash-ob-s { font-size: 12.5px; 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: 8px; 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: 600px) { .dash-ob-go span { display: none; } }

.dash-greet { flex-shrink: 0; min-width: 0; }
.dash-name { font-family: var(--font-serif); font-size: 30px; font-weight: 560; line-height: 1.1; margin: 0; white-space: nowrap; }
.dash-welcome { color: var(--ink-3); font-size: 15px; margin: 4px 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:8px; width:100%; padding:4px 6px; border-radius:10px; 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:11px; flex:1; min-width:0; border:none; background:none; padding:5px 2px; cursor:pointer; }
.dw-ar-ic { width:30px; height:30px; border-radius:9px; 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:13px; font-weight:600; color:var(--ink); }
.dw-ar-s { font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.dw-ar-count { flex-shrink:0; min-width:20px; text-align:center; font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--c-clay); color:#fff; }
.dw-ar-count.changes { background:var(--st-blocked); font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; padding:2px 8px; }
.dw-ar-reply { flex-shrink:0; height:28px; padding:0 11px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; 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:7px; width:100%; margin:2px 2px 6px; }
.dw-ar-compose textarea { flex:1; min-height:36px; max-height:92px; resize:vertical; border:1px solid var(--border); border-radius:9px; padding:8px 10px; font:inherit; font-size:12.5px; 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 14px; border:none; border-radius:9px; background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:12.5px; cursor:pointer; transition:opacity .12s; }
.dw-ar-send:disabled { opacity:.45; cursor:default; }
/* time-off widget */
.dw-off-summary { display:flex; align-items:center; gap:9px; justify-content:center; font-size:12.5px; color:var(--ink-3); margin-top:10px; }
.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:7px; width:100%; margin-top:11px; padding:9px; border:1px solid color-mix(in srgb, var(--c-gold) 35%, transparent); border-radius:10px; background:color-mix(in srgb, var(--c-gold) 9%, transparent); color:var(--ink); font:inherit; font-size:12px; 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:9px; }
.pto-bal-chip { display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 16px; border-radius:11px; background:var(--accent-soft); color:var(--ink); flex:1; }
.pto-bal-chip.ghost { background:var(--bg-sunken); }
.pto-bal-chip b { font-size:19px; font-weight:750; line-height:1; }
.pto-bal-chip span { font-size:10.5px; color:var(--ink-3); }
.pto-typegrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pto-typebtn { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .13s; }
.pto-typebtn.on { background:var(--surface); }
.pto-daysline { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); }
.pto-daysline b { color:var(--ink); font-weight:700; }
.pto-over { display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:11.5px; font-weight:600; color:var(--c-clay); }
/* approvals list */
.pto-appr-list { display:flex; flex-direction:column; gap:8px; }
.pto-appr { display:flex; align-items:flex-start; gap:11px; padding:12px 13px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
.pto-appr-top { display:flex; align-items:center; gap:8px; }
.pto-appr-top b { font-size:13.5px; font-weight:650; color:var(--ink); }
.pto-typetag { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; }
.pto-appr-meta { font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.pto-appr-reason { font-size:12px; color:var(--ink-2); margin-top:4px; font-style:italic; }
.pto-appr-clash { display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:11px; font-weight:600; color:var(--c-clay); background:color-mix(in srgb, var(--c-clay) 11%, transparent); padding:3px 8px; border-radius:7px; }
.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:6px; }
.pto-appr-suggest { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 9px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); background:var(--accent-soft); color:var(--accent); border-radius:7px; font-size:11px; font-weight:600; cursor:pointer; transition:filter .12s; }
.pto-appr-suggest:hover { filter:brightness(.97); }
.pto-clash { margin-top:2px; padding:11px 13px; border-radius:11px; 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:7px; font-size:12.5px; font-weight:650; color:var(--c-clay); margin-bottom:8px; }
.pto-clash-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); padding:3px 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:11px; color:var(--ink-3); margin-top:7px; }
.pto-clash-suggest { display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:6px 11px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); background:var(--accent-soft); color:var(--accent); border-radius:8px; font-size:11.5px; font-weight:600; cursor:pointer; transition:filter .12s; }
.pto-clash-suggest:hover { filter:brightness(.97); }
.pto-appr-acts { display:flex; gap:6px; flex-shrink:0; }
.pto-btn { width:32px; height:32px; border:none; border-radius:9px; display:grid; place-items:center; cursor:pointer; transition:filter .13s; }
.pto-btn.yes { background:var(--st-done); color:#fff; }
.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:8px; padding:24px; color:var(--ink-3); font-size:13px; }
/* approval routing (reporting-line + out-of-office cover aware) */
.pto-routerow { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; background:var(--bg-sunken); font-size:12.5px; 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:5px; font-size:10.5px; font-weight:650; color:var(--ink-2); background:var(--bg-sunken); border-radius:20px; padding:2px 8px 2px 3px; }
.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 9px; }
.pto-route-chip.esc { color:var(--c-gold-700, #9a7d2e); background:color-mix(in srgb, var(--c-gold) 16%, transparent); padding:2px 9px; }
.pto-appr-wait { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-size:11px; font-weight:600; color:var(--ink-3); background:var(--bg-sunken); border-radius:8px; padding:6px 9px; white-space:nowrap; }
.pto-appr-scope { display:inline-flex; gap:2px; padding:3px; background:var(--bg-sunken); border-radius:10px; margin-bottom:12px; }
.pto-scope-b { display:inline-flex; align-items:center; gap:6px; border:none; background:none; cursor:pointer; font-size:12px; font-weight:600; color:var(--ink-3); padding:5px 11px; border-radius:7px; 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 4px; border-radius:8px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-size:10px; font-weight:700; }
/* team availability strip */
.pto-avail { border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:15px 16px; }
.pto-avail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.pto-avail-now { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink); }
.pto-avail-dots { display:flex; }
.pto-avail-dots .av { margin-left:-6px; 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:8px; }
.pto-avail-row { display:grid; grid-template-columns:96px 1fr; align-items:center; gap:12px; }
.pto-avail-person { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:550; color:var(--ink-2); min-width:0; }
.pto-avail-track { display:grid; grid-template-columns:repeat(14, 1fr); gap:3px; }
.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:12.5px; color:var(--ink-3); padding:6px 2px; }
.team-pto-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .team-pto-grid { grid-template-columns:1fr; } }
.pto-count { min-width:20px; text-align:center; font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--tag-gold-bg); color:var(--tag-gold-fg); }

/* ── team page: tabs + panes ── */
.team-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 22px; overflow-x: auto; }
.team-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); font: inherit; font-size: 13.5px; 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(--accent); }
.team-tab-badge { min-width: 18px; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--c-gold); color: #fff; }
.team-pane { animation: fade-in .18s ease; }
.team-sub-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.team-dept { margin-top: 26px; }
.team-empty { padding: 30px; text-align: center; color: var(--ink-3); font-size: 13px; border: 1px dashed var(--border); border-radius: 14px; }
.team-card-off { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 11px; border-radius: 10px; background: color-mix(in srgb, var(--c-gold) 11%, transparent); color: var(--ink-2); font-size: 12px; }
.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: 12px; 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: 16px 16px 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: 14px; }
.twl-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.twl-sum { text-align: center; }
.twl-sum-v { font-size: 22px; font-weight: 760; color: var(--ink); line-height: 1; }
.twl-sum-v.warn { color: var(--c-clay); }
.twl-sum-l { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.twl-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.twl-rows { display: flex; flex-direction: column; gap: 10px; }
.twl-row { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 15px; 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: 11px; }
.twl-person-n { font-size: 13.5px; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.twl-offtag { display: inline-flex; align-items: center; gap: 3px; 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 6px; border-radius: 5px; }
.twl-meter { position: relative; height: 7px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin: 6px 0 5px; display: flex; }
.twl-meter-fill { height: 100%; border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.1,1); }
.twl-meter-fill.low { background: var(--st-done); }
.twl-meter-fill.mid { background: var(--c-blue); }
.twl-meter-fill.high { background: var(--c-gold); }
.twl-meter-fill.over { background: var(--c-clay); }
.twl-meter-over { height: 100%; background: repeating-linear-gradient(45deg, var(--c-clay), var(--c-clay) 3px, color-mix(in srgb, var(--c-clay) 60%, #000) 3px, color-mix(in srgb, var(--c-clay) 60%, #000) 6px); }
.twl-person-s { font-size: 11px; 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: 7px; min-height: 36px; align-content: flex-start; }
.twl-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 230px; padding: 7px 9px 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-sunken); cursor: grab; font-size: 12px; 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: 12px; color: var(--ink-4); padding: 8px 4px; }

/* ── outings ── */
.out-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.out-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px 17px; box-shadow: var(--shadow-xs); transition: box-shadow .15s, transform .15s; }
.out-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.out-card-top { display: flex; align-items: flex-start; gap: 12px; }
.out-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.out-title { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.out-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.out-type { font-weight: 650; }
.out-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 11px 0 8px; }
.out-loc { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 13px; }
.out-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.out-going { display: flex; align-items: center; gap: 8px; min-width: 0; }
.out-going-n { font-size: 11.5px; color: var(--ink-3); }
.out-rsvp { display: flex; gap: 6px; flex-shrink: 0; }
.out-rsvp-b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; 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(--c-gold); border-color: var(--c-gold); color: #fff; }
.out-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.out-typebtn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s; }

/* ── activity log ── */
.tlog { display: flex; flex-direction: column; }
.tlog-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); }
.tlog-row:last-child { border-bottom: none; }
.tlog-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-sunken); display: grid; place-items: center; color: var(--ink-3); flex-shrink: 0; }
.tlog-t { font-size: 13px; color: var(--ink-2); }
.tlog-t b { color: var(--ink); font-weight: 650; }
.tlog-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.tlog-time { font-size: 11px; 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: 11px; }
.cel-card { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.cel-emoji { font-size: 19px; flex-shrink: 0; }
.cel-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.cel-when { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.cel-cheer { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 9px; 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: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; 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: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.bk-count { min-width: 18px; text-align: center; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-3); }
.bk-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-logo-slot { display: flex; flex-direction: column; gap: 7px; }
.bk-logo-prev { height: 78px; border-radius: 12px; 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: 30px; font-weight: 800; }
.bk-logo-acts { display: flex; gap: 6px; }
.bk-logo-cap { font-size: 10.5px; color: var(--ink-4); text-align: center; }
.bk-mini { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 11.5px; 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: 8px; margin-bottom: 11px; }
.bk-color { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 5px; border: 1px solid var(--border); border-radius: 9px; 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: 11.5px; 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: 8px; }
.bk-add-in { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 0 11px; font: inherit; font-size: 12.5px; color: var(--ink); outline: none; }
.bk-add-in:focus { border-color: var(--accent); }
.bk-add-prev { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); flex-shrink: 0; }
.bk-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bk-add-btn:hover { background: var(--bg-hover); }
.bk-fonts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.bk-font { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.bk-font-aa { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-sunken); display: grid; place-items: center; font-size: 17px; font-weight: 600; font-family: var(--font-serif); color: var(--ink); flex-shrink: 0; }
.bk-font-n { font-size: 13px; font-weight: 650; color: var(--ink); }
.bk-font-r { font-size: 11px; color: var(--ink-3); }
.bk-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.bk-asset { position: relative; aspect-ratio: 1; border-radius: 11px; 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: 11px; background: var(--surface); color: var(--ink-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.bk-asset-add:hover { border-color: var(--accent); color: var(--accent); }
.bk-empty { font-size: 12px; color: var(--ink-4); padding: 4px 2px; }
.bk-foot { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-4); }
/* compact chip */
.bk-chip { display: inline-flex; align-items: center; gap: 6px; }
.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: 6px; }
.bk-pick-client > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.bk-pick-colors { display: flex; gap: 6px; }
.bk-pick-sw { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-subtle); cursor: pointer; }
.bk-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bk-pick-item { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1.5px solid var(--border); border-radius: 12px; 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: 8px; 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: 11.5px; 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; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1180px){ .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .dash-grid { grid-template-columns: 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 { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-xs); min-width: 0; transition: transform .36s cubic-bezier(.22,.68,.24,1), box-shadow .2s ease, border-color .2s ease; }
.dw:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.dw-tall, .dw-wide, .dw-span { grid-row: auto; grid-column: auto; column-span: none; }
/* team pulse hero */
.dw-team-hero { display: flex; align-items: center; gap: 16px; }
.dw-team-hero > div { min-width: 0; }
/* drag-to-reorder — handle is always visible */
.dw-grip { width: 24px; height: 26px; margin-left: -6px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-4); cursor: grab; opacity: 1; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; transition: color .15s ease, transform .1s ease; flex-shrink: 0; }
.dw:hover .dw-grip { color: var(--ink-3); }
.dw-grip:hover { color: var(--ink); }
.dw-grip:active { cursor: grabbing; transform: scale(.92); }
.dw-dragging { opacity: .4; border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); box-shadow: none !important; }
/* floating clone that follows the pointer during a pointer-drag */
.dw-ghost { box-shadow: 0 26px 52px -12px rgba(40,30,20,.46), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); opacity: .97; will-change: transform; }
.dw-dragimg { border-radius: 18px; }
.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: 7px; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; flex-shrink: 0; }
.dw:hover .dw-menu-btn { opacity: .55; }
.dw-menu-btn:hover { opacity: 1 !important; background: var(--bg-sunken); color: var(--ink-2); }
/* hidden-widgets restore bar */
.dash-hidden-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 13px 16px; border: 1px dashed var(--border-strong); border-radius: 14px; background: var(--surface); }
.dash-hidden-lead { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); flex-shrink: 0; }
.dash-hidden-chips { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.dash-hidden-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 4px 11px 4px 9px; 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: 12px; font-weight: 700; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 7px; flex-shrink: 0; font-family: inherit; }
.dash-hidden-all:hover { background: var(--accent-soft); }
.prop-link { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 550; color: var(--accent); cursor: pointer; transition: background .12s ease; }
.prop-link:hover { background: var(--accent-soft); }
.prop-link svg { opacity: .6; }
/* notifications · muted channels footer */
.ntf-muted { border-top: 1px solid var(--border-subtle); padding: 10px 12px 12px; background: var(--bg-sunken); }
.ntf-muted-hd { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.ntf-muted-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; transition: background .12s ease; }
.ntf-muted-row:hover { background: var(--bg-hover); }
.ntf-muted-name { font-size: 13px; 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: 12px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: background .12s ease; }
.ntf-muted-un:hover { background: var(--accent-soft); }
.dw-over { box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dw-over { position: relative; transition: box-shadow .14s ease, border-color .14s ease, background .14s ease; }
.dw-over::before { content: "Drop here"; position: absolute; top: 8px; right: 12px; z-index: 6; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fg, #fff); background: var(--accent); padding: 3px 8px; border-radius: 999px; box-shadow: var(--shadow-sm); pointer-events: none; animation: dwTagIn .16s ease; }
@keyframes dwTagIn { from { opacity: 0; transform: translateY(-3px) scale(.9); } to { opacity: 1; transform: none; } }
.dash-grid-dragging .dw { transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.dash-grid-dragging .dw:hover:not(.dw-over):not(.dw-dragging) { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border); }
.dash-grid-dragging .dw:not(.dw-dragging):not(.dw-over) { opacity: .82; }
.dash-grid-dragging .dw:not(.dw-dragging) { transition: transform .26s cubic-bezier(.2,.75,.3,1), box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease; }
.dash-grid-dragging .dw-grip { color: var(--accent); }
body.dash-dragging, body.dash-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
@media (prefers-reduced-motion: reduce){ .dw[data-wid] { transition: none !important; } }
/* widget gallery modal (Customize dashboard) */
.dwc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px){ .dwc-grid { grid-template-columns: 1fr; } }
/* preview card — a live, scaled render of the widget + a clean toggle */
.dwc-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .14s, box-shadow .14s; }
.dwc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.dwc-card.on { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.dwc-card.off { background: var(--bg-sunken); }
.dwc-preview { position: relative; height: 150px; overflow: hidden; background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); }
.dwc-preview-inner { --dwc-s: .6; width: calc(100% / var(--dwc-s)); transform: scale(var(--dwc-s)); transform-origin: top left; pointer-events: none; padding: 12px; }
.dwc-preview-inner .dw { box-shadow: none; }
.dwc-skel { height: 250px; background: linear-gradient(100deg, var(--bg-sunken) 30%, color-mix(in srgb, var(--ink) 5%, var(--bg-sunken)) 50%, var(--bg-sunken) 70%); background-size: 200% 100%; animation: dwcShimmer 1.3s ease-in-out infinite; }
@keyframes dwcShimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce){ .dwc-skel { animation: none; } }
.dwc-card.off .dwc-preview-inner { filter: grayscale(.65) opacity(.45); }
.dwc-preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, var(--bg-sunken)); pointer-events: none; }
.dwc-preview-fb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 250px; color: var(--ink-4); font-size: 12px; font-weight: 600; }
.dwc-preview-off { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border); padding: 3px 8px 3px 6px; border-radius: 999px; }
.dwc-foot { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.dwc-foot-ic { color: var(--ink-3); flex-shrink: 0; }
.dwc-card.on .dwc-foot-ic { color: var(--accent); }
.dwc-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwc-card.off .dwc-name { color: var(--ink-3); }
.dwc-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--bg-active); border: none; padding: 0; position: relative; flex-shrink: 0; cursor: pointer; transition: background .18s ease; }
.dwc-switch.on { background: var(--accent); }
.dwc-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s cubic-bezier(.4,.2,.2,1); }
.dwc-switch.on .dwc-knob { transform: translateX(16px); }

/* ── 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: 10px; margin-bottom: 12px; }
.dw-fin-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; 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: 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.dw-fin-col-v { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dw-fin-delta { font-size: 11px; 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: 6px; font-size: 10px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dw-fin-net { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 12.5px; color: var(--ink-3); }
.dw-fin-net b { font-size: 14.5px; 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: 14px; }
.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: 3px 14px; margin-top: 14px; }
.dw-fin-legrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: none; background: none; border-radius: 8px; 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: 4px 2px; }
.dw-fin-legname { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-fin-legv { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dw-fin-legpct { font-size: 11.5px; 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: 3px; height: 11px; }
.dw-fin-seg { border-radius: 6px; min-width: 7px; }
.dw-fin-recv-hd { margin-bottom: 13px; }
.dw-fin-big { font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.dw-fin-cr-hd { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.dw-fin-cr-sub { font-size: 12.5px; }
.dw-fin-ticks { display: flex; gap: 2px; align-items: stretch; height: 30px; margin-bottom: 14px; }
.dw-fin-tick { flex: 1; border-radius: 2px; transition: background .3s ease; }
.dw-fin-cr-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; 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: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dw-fin-crstat span { font-size: 11.5px; color: var(--ink-3); }

/* Control Center · UI Health */
.uih-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin: 6px 0 18px; }
.uih-note .icn { color: var(--ink-4); }
.uih-clear { text-align: center; padding: 48px 16px; }
.uih-group { margin-bottom: 22px; }
.uih-group-h { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.uih-group-t { font-family: var(--font-serif); font-size: 16px; font-weight: 600; }
.uih-group-n { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.uih-mini { border: none; background: none; color: var(--ink-4); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 7px; }
.uih-mini:hover { background: var(--bg-hover); color: var(--ink-2); }
.uih-row { display: flex; align-items: flex-start; gap: 11px; padding: 13px 6px 13px 4px; 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: 7px; 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: 13.5px; font-weight: 550; color: var(--ink); }
.uih-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.uih-where { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.uih-box { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.uih-code { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; }
.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 7px; 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: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 9px; 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: 11px 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: 10px; margin-bottom: 9px; }
.dw-course-prog { display: flex; align-items: center; gap: 9px; }
.dw-course-prog .tnum { font-size: 12px; font-weight: 600; width: 34px; text-align: right; color: var(--ink-2); }
.dw-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.dw-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dw-title { font-size: 15px; 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: 12px; font-weight: 600; padding: 4px 7px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; 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: 14px 0; }
.dw-field { font-size: 11px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
/* "Needs you" cross-surface roll-up */
.dw-needs { display: flex; flex-direction: column; gap: 6px; }
.dw-needs-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s ease, background .12s ease, transform .1s ease; }
.dw-needs-row:hover { border-color: var(--border-strong); background: var(--bg-hover); transform: translateX(2px); }
.dw-needs-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.dw-needs-n { font-size: 17px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 18px; }
.dw-needs-l { font-size: 13px; color: var(--ink-2); }
.dw-needs-clear { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 18px; color: var(--st-done); }
.dw-needs-clear span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dw-needs-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-fg, #fff); font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dw-needs-act { display: inline-flex; align-items: center; gap: 6px; }
.appr-cross-pane { margin-top: 16px; }
/* 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: 10px; width: 100%; padding: 8px 8px; border: none; border-radius: 10px; 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: 13px; font-weight: 600; color: var(--ink); }
.dw-appr-s { font-size: 11.5px; color: var(--ink-3); }
.dw-appr-chip { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.dw-appr-more { width: 100%; text-align: center; border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); padding: 6px; border-radius: 8px; }
.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: 7px; color: var(--ink-4); cursor: pointer; transition: background .12s ease, color .12s ease; }
.dw-needs-cog:hover { background: var(--bg-hover); color: var(--ink-2); }
.dw-pulse { animation: dwPulse 1.5s ease; }
@keyframes dwPulse { 0%, 100% { box-shadow: var(--shadow-xs); } 28% { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft); } }
.dw-sub2 { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dw-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* gauge */
.dw-gauge { position: relative; display: grid; place-items: center; padding: 6px 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: 30px; font-weight: 540; line-height: 1; }
.dw-gauge-c span { font-size: 10px; font-weight: 600; color: var(--ink-4); letter-spacing: .04em; margin-top: 4px; display: block; }
.dw-off { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.dw-off-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.dw-off-d { font-size: 13px; 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: 8px; font-size: 15px; font-weight: 650; margin-bottom: 16px; }
.dw-proj-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dw-status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: 2px 9px; border-radius: 999px; margin-left: auto; }
.dw-proj-leads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.dw-lead { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; }
.dw-timeline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; margin-bottom: 16px; }
.dw-timeline .icn { color: var(--ink-4); }
.dw-desc { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; 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: 8px 10px; background: var(--bg-sidebar); border-radius: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.dw-mb-arrow { width: 26px; height: 26px; border: none; background: var(--surface); border-radius: 7px; 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, 1fr); gap: 6px; margin-bottom: 16px; }
.dw-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: all .12s; }
.dw-day span { font-size: 10.5px; color: var(--ink-4); font-weight: 600; }
.dw-day b { font-size: 16px; font-weight: 600; }
.dw-day:hover { border-color: var(--border-strong); }
.dw-day.on { background: var(--accent); border-color: var(--accent); }
.dw-day.on span, .dw-day.on b { color: var(--accent-fg); }
.dw-sched-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 12px; }
.dw-sched-tabs button { border: none; background: none; padding: 7px 10px; font-size: 12.5px; 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; gap: 10px; }
.dw-meeting { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; background: var(--bg-sidebar); }
.dw-meeting-t { font-size: 13.5px; font-weight: 650; }
.dw-meeting-time { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.dw-meeting-on { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); margin-top: 9px; padding-top: 9px; 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: 8px; padding: 30px; color: var(--ink-4); font-size: 12.5px; }

/* status tracker */
.dw-person { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.dw-person-n { font-size: 13.5px; font-weight: 600; }
.dw-person-s { font-size: 11.5px; color: var(--ink-3); }
.dw-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; 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: 11px; padding: 11px 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: 13.5px; font-weight: 650; }
.dw-note-s { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.dw-note-date { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-4); }

/* course progress */
.dw-courseprog { display: flex; align-items: center; gap: 16px; }
.dw-cp-title { font-size: 14px; font-weight: 650; }
.dw-cp-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 3px 0 8px; }
.dw-link { border: none; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }

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

/* daily feedback */
.dw-feed-num { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; margin: 4px auto 12px; }
.dw-feed-q { text-align: center; font-size: 15px; font-weight: 650; }
.dw-feed-sub { text-align: center; font-size: 12px; color: var(--ink-3); margin: 3px 0 14px; }
.dw-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.dw-mood { aspect-ratio: 1; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; font-size: 20px; cursor: pointer; transition: all .12s; display: grid; place-items: center; }
.dw-mood:hover { border-color: var(--border-strong); }
.dw-mood.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.05); }
.dw-feed-input { width: 100%; min-height: 64px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: none; outline: none; background: var(--surface); color: var(--ink); margin-bottom: 12px; }
.dw-feed-input:focus { border-color: var(--accent); }

/* employee spotlight */
.dw-spot { text-align: center; padding: 6px 0; }
.dw-spot-badge { position: relative; display: inline-grid; place-items: center; margin-bottom: 12px; }
.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: 16px; font-weight: 650; }
.dw-spot-role { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.dw-spot-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 14px; border-radius: 999px; margin-top: 12px; }

/* courses table */
.dw-courses { width: 100%; border-collapse: collapse; }
.dw-courses th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; padding: 0 8px 10px; }
.dw-courses td { padding: 11px 8px; border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.dw-cinstr { display: flex; align-items: center; gap: 10px; }
.dw-ci-n { font-size: 13px; font-weight: 600; }
.dw-ci-r { font-size: 11px; color: var(--ink-4); }
.dw-ci-course { font-size: 13px; font-weight: 550; }
.dw-ci-range { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.dw-cstatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; 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: 8px; font-size: 13.5px; font-weight: 600; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 12px; }
.dw-tt-timer { text-align: center; padding: 18px; background: var(--bg-sidebar); border-radius: 14px; }
.dw-tt-state { font-size: 10.5px; font-weight: 700; color: var(--ink-4); letter-spacing: .08em; }
.dw-tt-time { font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: .02em; margin: 6px 0 12px; }
.dw-tt-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: var(--accent); color: var(--accent-fg); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 10px; cursor: pointer; transition: filter .12s; }
.dw-tt-btn:hover { filter: brightness(1.06); }
.dw-tt-prev { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dw-tt-prev-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.dw-tt-prev-n { font-size: 13px; font-weight: 550; }
.dw-tt-prev-t { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.dw-icon-btn { width: 28px; height: 28px; border: none; background: none; border-radius: 7px; 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: 14px; 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: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin: 0; line-height: 1.12; }
.th-sub { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; }
.tasks-head .th-title { font-family: var(--font-title); font-size: 22px; 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: 12.5px; margin: 2px 0 0; }
.th-actions { display: flex; align-items: center; gap: 6px; }
/* ---- 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: 8px; }
.ph-actions .btn, .tasks-head .th-actions .btn { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; gap: 6px; }
.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: 720px){ .ph-actions, .tasks-head .th-actions { gap: 6px; } .ph-actions .btn, .tasks-head .th-actions .btn { height: 32px; padding: 0 10px; font-size: 12.5px; } }
.th-mine-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 11px; border: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .14s ease; }
.th-mine-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.th-mine-chip .icn:last-child { opacity: .7; }
.th-icon { width: 34px; height: 34px; border-radius: 9px; 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 4px; flex-shrink: 0; }
.th-life { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 13px; 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 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.th-seg { flex-shrink: 0; }
.th-life-trash { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink-4) 14%, transparent); color: var(--ink-3); font-size: 11px; font-weight: 600; }
.th-life-trash .icn { color: var(--ink-4); }

/* ============================================================
   Inline expandable subtasks (list / kanban / drawer)
   ============================================================ */
.subin { padding: 4px 4px 6px; display: flex; flex-direction: column; gap: 1px; }
.subin-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.subin-row:hover { background: var(--bg-hover); }
.subin-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.subin-desc { font-size: 12px; color: var(--ink-3); flex: 1; min-width: 0; }
.subin-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.subin-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.subin-go { color: var(--ink-4); opacity: 0; transition: opacity .12s; }
.subin-row:hover .subin-go { opacity: 1; }
.subin-add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 3px 0 0 8px; padding: 5px 10px; border: none; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; border-radius: 7px; cursor: pointer; }
.subin-add:hover { background: var(--bg-hover); color: var(--accent); }
.subin.compact .subin-row { padding: 5px 8px; gap: 8px; }
.subin.compact .subin-title { font-size: 12.5px; }
.tcheck.sm { width: 17px; height: 17px; border-radius: 5px; }
.tcheck.sm svg { width: 10px; height: 10px; }
/* expand caret on rows/cards */
.subt-caret { width: 22px; height: 22px; border: none; background: transparent; border-radius: 6px; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; transition: background .12s, transform .16s, color .12s; flex-shrink: 0; }
.subt-caret:hover { background: var(--bg-hover); color: var(--ink-2); }
.subt-caret.open { transform: rotate(90deg); color: var(--accent); }
.trow-subs { grid-column: 1 / -1; margin: 2px 0 4px; padding: 4px 8px 4px 32px; border-top: 1px dashed var(--border-subtle); }
.kbn-subs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); }
.kbn-subbtn { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; color: var(--ink-3); font-size: 11px; font-weight: 500; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.kbn-subbtn:hover { background: var(--bg-hover); color: var(--ink-2); }
.kbn-subcaret { transition: transform .16s; }
.kbn-subcaret.open { transform: rotate(180deg); }

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

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

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

/* list row state markers */
.trow-paused, .trow-overdue { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 1px 7px; 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 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sd-scroll { flex: 1; overflow-y: auto; padding: 28px 40px 90px; min-height: 0; }
.sd-eyebrow { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 8px; }
.sd-parentlink { border: none; background: none; padding: 0; color: var(--ink-2); font-weight: 600; cursor: pointer; font-size: 12px; }
.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: 30px; font-weight: 460; letter-spacing: -0.02em; color: var(--ink); padding: 0; margin: 0 0 18px; }
.sd-title::placeholder { color: var(--ink-4); }
.sd-pillrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.sd-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 13px; 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, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.sd-metacol-k { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-4); font-weight: 500; margin-bottom: 9px; }
.sd-metacol-v { font-size: 13px; }
.sd-tabs { margin: 10px 0 22px; }
.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: 8px; background: transparent; outline: none; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); padding: 8px 10px; margin: 0 -10px; 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: 10px 14px; }
.sd-prop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.sd-prop:last-child { border-bottom: none; }
.sd-prop-k { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-3); }
.sd-prop-v { color: var(--ink); font-size: 12.5px; }
.sd-prop-link { border: none; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.sd-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sd-file { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.sd-file-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-sunken); color: var(--ink-2); display: grid; place-items: center; margin-bottom: 6px; }
.sd-file-n { font-size: 12.5px; font-weight: 600; }
.sd-file.add { align-items: center; justify-content: center; flex-direction: column; gap: 8px; 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: 16px 18px 12px; flex-shrink: 0; }
.sd-rail-hd h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 480; margin: 0; }
.sd-rail-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.sd-chip { height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 12px; 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: 8px 18px; min-height: 0; }
.sd-act { display: flex; gap: 11px; align-items: flex-start; padding: 13px 0; }
.sd-act-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sd-act-hd b { font-weight: 600; white-space: nowrap; }
.sd-act-hd .muted { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.sd-act-txt { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.sd-act-files { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.sd-filechip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.sd-filechip-ic { width: 30px; height: 30px; border-radius: 7px; background: var(--bg-sunken); color: var(--ink-2); display: grid; place-items: center; flex-shrink: 0; }
.sd-filechip-n { font-size: 12.5px; font-weight: 600; }
.sd-act-space { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; 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: 8px; padding: 12px 16px; 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 16px; outline: none; font-size: 13px; 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: 88; }
.pp { width: 300px; background: var(--overlay); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; }
.pp-pop { position: absolute; z-index: 89; top: calc(100% + 6px); left: 0; animation: pop-menu .14s cubic-bezier(.4,0,.2,1); }
.pp-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; background: var(--bg-sunken); border-radius: var(--r-sm); margin-bottom: 6px; }
.pp-search input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; color: var(--ink); }
.pp-list { max-height: 300px; overflow-y: auto; }
.pp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: none; background: transparent; border-radius: 8px; 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: #fff; 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: 13px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sub { display: block; font-size: 11px; color: var(--ink-3); }
.pp-load { flex-shrink: 0; font-size: 11px; 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 6px; }
.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: 4px; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: 2px 7px; border-radius: 99px; }
.rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.rec-row:last-child { border-bottom: none; }
.rec-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.rec-cad { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; 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,1fr); gap: 8px; }
.dw-mw-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: 1px solid var(--border); border-radius: 11px; 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: 21px; font-weight: 600; line-height: 1; }
.dw-mw-stat span { font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.dw-mw-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 6px; border: none; background: none; border-radius: 8px; cursor: pointer; transition: background .12s; }
.dw-mw-row:hover { background: var(--bg-hover); }
.dw-mw-due { font-size: 11.5px; 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: 7px; display: grid; place-items: center; color: var(--ink-3); background: var(--bg-sunken); 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(--accent-soft); }
.dw-qa { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; 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: 13px; color: var(--ink); font-family: inherit; }
.dw-qa-btn { flex-shrink: 0; border: none; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer; }
.dw-qa-dest { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding-left: 2px; }
.dw-qa-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 11.5px; 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: 9px; width: 100%; padding: 9px 6px; border: none; background: none; border-radius: 8px; 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: 6px; 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-blk-row { padding: 8px 8px; border-radius: 9px; background: color-mix(in srgb, var(--c-clay) 5%, transparent); }
.dw-blk-row + .dw-blk-row { margin-top: 2px; }
.dw-blk-task { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 0; cursor: pointer; }
.dw-blk-task .grow { font-size: 13px; 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: 6px; margin-top: 6px; padding-left: 16px; flex-wrap: wrap; color: var(--c-clay); }
.dw-blk-bylbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.dw-blk-chip { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; 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: 11px; font-weight: 700; color: var(--ink-4); }
.dw-blk-empty { text-align: center; padding: 22px 10px; color: var(--st-done); }
.dw-blk-empty .muted { color: var(--ink-3); }
.dw-na-rsn { font-size: 11px; font-weight: 600; flex-shrink: 0; }
.dw-na-clear { text-align: center; padding: 24px 10px; }
.dw-board-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 6px; border: none; background: none; border-radius: 9px; cursor: pointer; transition: background .12s; text-align: left; }
.dw-board-row:hover { background: var(--bg-hover); }
.dw-board-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.dw-board-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dw-board-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.dw-board-s { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.dw-board-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 10px; background: none; color: var(--ink-2); font-size: 12.5px; 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: 5px; font-size: 10.5px; font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 13%, transparent); padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }
.cl-log-compose { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.cl-log-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 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: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 4px; }
.cl-stmt-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.cl-stmt-row.over { color: var(--c-clay); }
.cl-stmt-row.over span { display: inline-flex; align-items: center; gap: 5px; }
.cl-followup-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 15%, transparent); padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; }
/* per-client feedback chip — borderless tinted pill, clickable to the client's files */
.cl-feedback-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 13%, transparent); padding: 4px 9px; border-radius: 999px; margin-bottom: 12px; 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 — tinted, NO left accent bar */
.cl-fb-callout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--c-clay) 26%, transparent); background: color-mix(in srgb, var(--c-clay) 10%, var(--surface)); cursor: pointer; transition: box-shadow .14s, transform .14s; }
.cl-fb-callout:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cl-fb-callout.changes { border-color: color-mix(in srgb, var(--st-blocked) 26%, transparent); background: color-mix(in srgb, var(--st-blocked) 10%, var(--surface)); }
.cl-fb-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: var(--c-clay); background: color-mix(in srgb, var(--c-clay) 16%, transparent); }
.cl-fb-callout.changes .cl-fb-ic { color: var(--st-blocked); background: color-mix(in srgb, var(--st-blocked) 16%, transparent); }
.cl-fb-t { font-size: 13px; font-weight: 650; color: var(--ink); }
.cl-fb-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
/* client drawer → back-link to the pipeline deal it was converted from */
.cd-origin { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, #5f8a4f 24%, transparent); background: color-mix(in srgb, #5f8a4f 9%, var(--surface)); cursor: pointer; transition: box-shadow .14s, transform .14s; }
.cd-origin:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cd-origin-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #4d7a3e; background: color-mix(in srgb, #5f8a4f 16%, transparent); }
.pp-group { margin-top: 4px; }
.pp-grouphd { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding: 8px 8px 3px; }
.pp-dept-dot { width: 8px; height: 8px; border-radius: 50%; }
.pp-deptall { margin-left: auto; border: none; background: none; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 2px; margin-top: 4px; }

/* assignee field */
.af-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; background: var(--bg-sunken); border-radius: var(--r-pill); font-size: 12.5px; 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: 5px; height: 28px; padding: 0 11px; border: 1px dashed var(--border-strong); background: transparent; border-radius: var(--r-pill); color: var(--ink-3); font-size: 12.5px; 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 */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-card { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: none; background: var(--surface-2); border-radius: var(--r-md); cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .14s, background .14s; }
.role-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.role-card.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.role-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--accent); margin-bottom: 4px; }
.role-card.on .role-ic { background: var(--accent); color: var(--accent-fg); }
.role-name { font-size: 13.5px; 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: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
.pl-fc-nums { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); }
.pl-fc-committed { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pl-fc-committed em, .pl-fc-probable em { font-size: 13px; font-style: normal; font-weight: 600; color: var(--ink-4); font-family: var(--font-sans); }
.pl-fc-plus { font-size: 19px; color: var(--ink-4); }
.pl-fc-probable { font-size: 21px; 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: 3px; justify-content: center; padding: 2px 22px; }
.pl-fc-stat + .pl-fc-stat { border-left: 1px solid var(--border-subtle); }
.pl-fc-v { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pl-fc-v.warn { color: #b0503c; }
.pl-fc-l { font-size: 11px; font-weight: 600; color: var(--ink-4); }
/* airy transparent columns; cards are the objects */
.pl-board { flex: 1; min-height: 0; display: flex; gap: 8px; overflow-x: auto; padding: 10px 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 6px; }
.pl-col-won, .pl-col-lost { background: none; }
.pl-col-hd { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px; margin-bottom: 4px; 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: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.pl-col-n { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-active); padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.pl-col-sum { margin-left: auto; font-size: 11.5px; 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: 7px; padding: 2px 2px 12px; }
.pl-col-empty { color: var(--ink-4); font-size: 12px; text-align: center; padding: 16px 0; border-radius: 10px; }
.pl-board.pl-dragging .pl-col-empty { border: 1.5px dashed var(--border); }
.pl-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; cursor: pointer; box-shadow: none; transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.pl-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateY(-1px); }
.pl-card.rot { border-color: color-mix(in srgb, #b0503c 30%, var(--border-subtle)); }
.pl-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.pl-card-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pl-card-client { font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card-title { font-size: 13.5px; font-weight: 650; color: var(--ink); line-height: 1.3; margin-bottom: 5px; }
.pl-card-val { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.pl-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-band { font-size: 11.5px; font-weight: 700; }
/* passive expected-close chip on cards */
.pl-close-chip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; 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: 3px; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; 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: 11px; width: 100%; text-align: left; padding: 11px 13px; margin-top: 2px; border: 1px solid color-mix(in srgb, #5f8a4f 34%, var(--border)); background: color-mix(in srgb, #5f8a4f 7%, transparent); border-radius: 11px; font: inherit; cursor: pointer; color: var(--ink); transition: background .13s, border-color .13s; }
.pl-convert-cta:hover { background: color-mix(in srgb, #5f8a4f 13%, transparent); border-color: color-mix(in srgb, #5f8a4f 50%, var(--border)); }
.pl-convert-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, #5f8a4f 16%, transparent); color: #4d7a3e; }
.pl-convert-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pl-convert-main b { font-size: 13px; font-weight: 650; }
.pl-convert-main span { font-size: 11.5px; 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: 6px; border: none; background: none; cursor: pointer; padding: 2px 6px; margin: -2px -6px; border-radius: 7px; color: var(--ink); font: inherit; transition: background .12s ease; }
.pl-dr-editval:hover { background: var(--bg-hover); }
.pl-dr-editval svg { color: var(--ink-4); }
.pl-dr-valedit { width: 120px; text-align: right; font-weight: 700; padding: 4px 8px; }
.pl-dr-ownersel, .pl-dr-closesel { min-width: 0; max-width: 220px; }
.pl-dr-closehint { display: flex; align-items: center; gap: 7px; margin-top: -2px; padding: 8px 11px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.pl-dr-closehint.soon { color: var(--c-clay, #c2734a); background: color-mix(in srgb, var(--c-clay,#c2734a) 11%, transparent); }
.pl-dr-closehint.over { color: var(--st-blocked, #b0503c); background: color-mix(in srgb, var(--st-blocked,#b0503c) 12%, transparent); }
.pl-rot { display: flex; align-items: flex-start; gap: 5px; margin-top: 9px; padding: 7px 9px; background: color-mix(in srgb, #b0503c 9%, transparent); border-radius: 8px; font-size: 11px; 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: 5px; margin-top: 9px; width: 100%; justify-content: center; padding: 7px; 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: 11.5px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.pl-advance:hover { background: color-mix(in srgb, #5f8a4f 18%, transparent); }
/* deal drawer */
.pl-dr { display: flex; flex-direction: column; gap: 14px; }
.pl-dr-score { display: flex; align-items: center; gap: 14px; }
.pl-dr-prob { font-size: 16px; font-weight: 750; }
.pl-dr-band { font-size: 12px; 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: 13.5px; color: var(--ink-3); padding-bottom: 10px; 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: 9px; padding: 11px 13px; background: color-mix(in srgb, #b0503c 9%, transparent); border-radius: 10px; color: #a04a38; font-size: 12.5px; line-height: 1.45; }
.pl-dr-rot b { display: block; margin-bottom: 2px; }
.pl-dr-h { font-size: 11px; 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: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--ink) 6%, transparent)); font-size: 13px; }
.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: 12px; 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: 6px; }
.pl-chip { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 4px 10px; border-radius: 20px; }

/* interactive kanban: toolbar, drag, drop targets, won/lost, drawer controls */
.pl-toolbar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; 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: -3px; transition: opacity .14s, color .14s; flex-shrink: 0; }
.pl-card:hover .pl-card-grip { opacity: .7; }
.pl-card-grip:active { cursor: grabbing; }
.pl-card { transition: box-shadow .14s ease, transform .14s ease, opacity .14s ease, border-color .14s ease; }
.pl-card.dragging { opacity: .4; transform: scale(.97); }
.pl-col { transition: background .15s ease; }
.pl-col.over { background: var(--accent-soft); }
.pl-col-won.over { background: color-mix(in srgb, #5f8a4f 12%, transparent); }
.pl-col-lost { background: none; }
.pl-col-lost.over { background: color-mix(in srgb, #b0503c 10%, transparent); }
/* drawer: stage segmented control */
.pl-stageseg { display: flex; gap: 4px; padding: 4px; background: var(--bg-sunken); border-radius: 11px; }
.pl-stageseg-b { flex: 1; padding: 7px 4px; border: none; background: transparent; border-radius: 8px; font: inherit; font-size: 12px; 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: 8px; }
.pl-out { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 9px; font: inherit; font-size: 12.5px; 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: 9px; padding: 11px 13px; border-radius: 11px; font-size: 13px; font-weight: 600; }
.pl-dr-closed.won { background: color-mix(in srgb, #5f8a4f 11%, transparent); color: #4d7a3e; }
.pl-dr-closed.lost { background: color-mix(in srgb, #b0503c 10%, transparent); color: #b0503c; }
.pl-reopen { margin-left: auto; padding: 5px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font: inherit; font-size: 12px; 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: 6px; font-weight: 600; }
.pl-dr-hist { display: flex; flex-direction: column; gap: 2px; }
.pl-dr-hrow { display: flex; align-items: center; gap: 9px; padding: 6px 2px; }
.pl-dr-hdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pl-dr-hstage { font-size: 13px; font-weight: 600; color: var(--ink); }
.pl-dr-htime { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }

/* ───────── Money overview ───────── */
.mo { display: flex; flex-direction: column; gap: 16px; }
.mo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mo-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 15px 17px; }
.mo-stat-l { font-size: 12px; font-weight: 650; color: var(--ink-4); margin-bottom: 7px; }
.mo-stat-v { font-family: var(--font-serif); font-size: 27px; 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: 11.5px; font-weight: 600; color: var(--ink-4); margin-top: 6px; }
.mo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@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: 13px; padding: 16px 18px; }
.mo-card-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.mo-card-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-4); background: var(--surface-2); padding: 1px 8px; border-radius: 20px; }
.mo-aging { display: flex; flex-direction: column; gap: 11px; }
.mo-ag-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 11px; }
.mo-ag-l { font-size: 12px; 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: 12.5px; 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: 10px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.mo-od-row:hover { background: var(--surface-2); }
.mo-od-client { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-od-amt { font-size: 13px; font-weight: 700; color: var(--ink); }
.mo-od-days { font-size: 11.5px; 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: 7px; 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: 8px; padding: 20px 8px; color: #4d7a3e; font-size: 13px; font-weight: 600; }

/* ───────── Reports — Pipeline / Win-Loss ───────── */
.rpt-kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rpt-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 15px 17px; }
.rpt-kpi-l { font-size: 12px; font-weight: 650; color: var(--ink-4); margin-bottom: 7px; }
.rpt-kpi-v { font-family: var(--font-serif); font-size: 26px; 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: 11.5px; font-weight: 600; color: var(--ink-4); margin-top: 6px; }
.rpt-funnel { display: flex; flex-direction: column; gap: 12px; }
.rpt-fn-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; }
.rpt-fn-l { font-size: 12.5px; font-weight: 700; }
.rpt-fn-bar { height: 12px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.rpt-fn-bar span { display: block; height: 100%; border-radius: 7px; transition: width .3s ease; }
.rpt-fn-v { font-size: 12.5px; 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: 10px; }
.rpt-reason { display: grid; grid-template-columns: 70px 1fr 24px; align-items: center; gap: 10px; }
.rpt-reason-l { font-size: 12.5px; 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: 12.5px; font-weight: 700; color: var(--ink); text-align: right; }
.rpt-reason-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; padding: 10px 12px; background: var(--accent-soft); border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--accent); line-height: 1.4; }
.rpt-empty { color: var(--ink-4); font-size: 13px; padding: 20px 0; text-align: center; }
.role-desc { font-size: 11px; color: var(--ink-3); line-height: 1.35; }

/* visibility */
.vis-opts { display: flex; flex-direction: column; gap: 5px; }
.vis-opt { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: none; background: var(--surface-2); border-radius: 9px; color: var(--ink-2); font-size: 13px; 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: 8px; }

/* ── feed post audience picker ── */
.fpost-aud { display: inline-flex; align-items: center; gap: 3px; }
.fpost-aud .icn { opacity: .7; }
.aud-modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.aud-mode { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; transition: all .13s; }
.aud-mode:hover { border-color: var(--border-strong); }
.aud-mode.on { border-color: var(--accent); background: var(--accent-soft); }
.aud-mode-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-sunken); color: var(--ink-2); flex-shrink: 0; }
.aud-mode.on .aud-mode-ic { background: var(--surface); color: var(--accent); }
.aud-mode-main { flex: 1; min-width: 0; }
.aud-mode-t { display: block; font-size: 14px; font-weight: 650; color: var(--ink); }
.aud-mode-s { display: block; font-size: 12px; 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: #fff; flex-shrink: 0; }
.aud-mode.on .aud-radio { background: var(--accent); border-color: var(--accent); }
.aud-custom { margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.aud-allgroups { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; margin-bottom: 14px; }
.aud-allgroups input { margin-top: 2px; accent-color: var(--accent); }
.aud-allgroups b { font-size: 13px; }
.aud-allgroups-s { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.aud-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); margin: 0 0 8px; }
.aud-grouplist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.aud-grouprow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; transition: all .12s; }
.aud-grouprow:hover { border-color: var(--border-strong); }
.aud-grouprow.on { border-color: var(--accent); background: var(--accent-soft); }
.aud-group-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.aud-group-n { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.aud-group-meta { display: block; font-size: 11px; 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: #fff; flex-shrink: 0; }
.aud-grouprow.on .aud-check { background: var(--accent); border-color: var(--accent); }
.aud-people { display: flex; flex-wrap: wrap; gap: 7px; }
.aud-person { position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; 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: 12.5px; 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: 12.5px; color: var(--ink-3); padding: 6px 2px 14px; }
.org-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; 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: 7px; 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: 8px; margin-top: 12px; }
.org-dot-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.org-dot-btn { border: none; background: none; padding: 3px; margin: -3px; border-radius: 7px; 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, 1fr); gap: 6px; padding: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; 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 4px; 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: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; font-size: 13.5px; 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: 7px; }
.org-title { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; background: var(--surface-2); border-radius: var(--r-pill); font-size: 12.5px; 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: var(--bg-sunken); border-radius: 9px; padding: 3px; }
.cap-step-b { width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px; color: var(--ink-3); font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .12s ease, color .12s ease; }
.cap-step-b:hover { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); }
.cap-step-v { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ws-mem { margin: 4px 0 18px; }
.ws-mem-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ws-mem-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; transition: background .12s; }
.ws-mem-row:hover { background: var(--bg-hover); }
.ws-mem-name { display: block; font-size: 13.5px; font-weight: 550; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-mem-sub { display: block; font-size: 11.5px; color: var(--ink-3); }
.ws-mem-owner { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; }
.pp-pop-right { left: auto; right: 0; }

/* ── feed link previews + entity refs + share ───────────────── */
.fpost-att { margin: 4px 0 10px; }
.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: 4px 0 10px; }

.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), var(--shadow-md); transform: translateY(-1px); }
.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: 34px; 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: 3px; }
.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: 12px 14px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.lpv-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.lpv-favi { width: 9px; height: 9px; border-radius: 2px; }
.lpv-title { font-size: 14.5px; 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: 5px; font-size: 12px; color: var(--ink-3); }
.lpv-host .icn { opacity: .7; }
.lpv-go { display: grid; place-items: center; padding: 0 14px; 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: 12px; width: 100%; text-align: left; border: none; padding: 12px 14px; 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), var(--shadow-md); transform: translateY(-1px); }
.eref-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.eref-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eref-kind { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.eref-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eref-sub { font-size: 12px; 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: 12px; align-items: flex-start; }
.share-comp .fcomp-ta { background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r-md); padding: 12px 14px; min-height: 76px; transition: background .15s ease, border-color .15s ease; }
.share-comp .fcomp-ta:hover { border-color: var(--border); }
.share-comp .fcomp-ta:focus { background: var(--surface); border-color: var(--accent); }

/* view-as preview */
.tb-icon-btn.va-on { background: var(--accent-soft); color: var(--accent); }
.va-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); font-size: 13px; 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: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; transition: filter .14s; }
.va-exit:hover { filter: brightness(1.06); }

/* ───────── Client Portal ───────── */
.cp-layout { display: grid; grid-template-columns: 232px 1fr 360px; gap: 16px; 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: 13px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cp-clients-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: 8px 9px 6px; }
.cp-client { display: flex; align-items: center; gap: 10px; padding: 9px; border: none; background: none; border-radius: 9px; 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: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.cp-client-n { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-client-s { font-size: 11px; 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: 14px; min-width: 0; }
.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; }
.cp-row.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-card-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.cp-card-s { font-size: 12px; color: var(--ink-4); }
.cp-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cp-section { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 11px; 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: 8px; 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: 12.5px; font-weight: 650; color: var(--ink); }
.cp-section-d { font-size: 10.5px; 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: #fff; }
.cp-check.on { background: var(--accent); border-color: var(--accent); }
.cp-accents { display: flex; gap: 8px; margin-bottom: 12px; }
.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: 9px; padding: 9px 11px; font: inherit; font-size: 12.5px; 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: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-4); margin-bottom: 9px; }
.cp-frame { border: 1px solid var(--border); border-radius: 16px; 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: 10px; color: var(--ink-4); font-size: 13px; font-weight: 600; }
.cp-hero { padding: 22px 20px; color: #fff; }
.cp-hero-brand { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cp-hero-client { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin: 4px 0 8px; }
.cp-hero-welcome { font-size: 12.5px; line-height: 1.5; opacity: .92; }
.cp-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; max-height: 440px; overflow-y: auto; }
.cp-sec-h { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.cp-bal { font-size: 11px; font-weight: 700; color: var(--cp); }
.cp-proj, .cp-inv { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 6px 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: 11px; font-weight: 700; padding: 3px 11px; border-radius: 7px; cursor: pointer; }
.cp-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-file { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 4px 9px; border-radius: 7px; }
.cp-muted { font-size: 12px; color: var(--ink-4); }

/* ───────── Notifications Center ───────── */
.ntf-viewall { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; border: none; border-top: 1px solid var(--border-subtle); background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer; }
.ntf-viewall:hover { background: var(--accent-soft); }
.nc-aria { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 14px; margin-bottom: 20px; }
.nc-aria-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex-shrink: 0; }
.nc-aria-t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.nc-aria-s { font-size: 13.5px; 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: 5px; border: none; background: var(--accent); color: var(--accent-fg); font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 9px; cursor: pointer; }
.nc-group { margin-bottom: 20px; }
.act-digest { margin-bottom: 18px; }
.nc-group-h { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.nc-group-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.nc-group-n { font-size: 11px; font-weight: 700; color: var(--ink-4); background: var(--surface-2); padding: 1px 8px; border-radius: 20px; }
.nc-list { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.nc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: none; background: none; border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--ink) 6%, transparent)); cursor: pointer; text-align: left; }
.nc-row:last-child { border-bottom: none; }
.nc-row:hover { background: var(--surface-2); }
.nc-row.unread { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.nc-row-av { position: relative; flex-shrink: 0; }
.nc-row-sys { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.nc-row-ic { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--accent); box-shadow: 0 0 0 1px var(--border); }
.nc-row-main { flex: 1; min-width: 0; }
.nc-row-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.nc-row-text b { color: var(--ink); font-weight: 700; }
.nc-row-time { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 2px; text-transform: capitalize; }
.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: 12px; padding: 60px 0; color: #4d7a3e; font-size: 14px; font-weight: 600; }

/* Muted notifications manager (Notifications Center) */
.nc-muted-card { margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px 18px; }
.nc-muted-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nc-muted-card-t { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink); }
.nc-muted-card-t svg { color: var(--ink-4); }
.nc-muted-card-s { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.nc-muted-sec { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin: 16px 0 8px; }
.nc-muted-rows { display: flex; flex-direction: column; gap: 6px; }
.nc-muted-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; background: var(--bg-sunken); }
.nc-muted-row-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-4); flex-shrink: 0; }
.nc-muted-row .grow { font-size: 13px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.nc-muted-row-un { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.nc-muted-row-un:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Proactive "mute an alert type" picker */
.nc-mute-add { margin-top: 14px; }
.nc-mute-add-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed var(--border); background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.nc-mute-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.nc-mute-add-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin-top: 10px; }
.nc-mute-add-opt { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; min-width: 0; transition: background .12s, border-color .12s; }
.nc-mute-add-opt svg { color: var(--ink-4); flex-shrink: 0; }
.nc-mute-add-opt:hover { background: var(--bg-sunken); border-color: var(--ink-4); }
.nc-mute-add-empty { margin-top: 14px; font-size: 12px; color: var(--ink-4); font-style: italic; }

/* ── Settings → Branding (EmailKit + PdfKit) ── */
.dbr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dbr-lbl { min-width: 200px; flex: 1; }
.dbr-prevs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .dbr-prevs { grid-template-columns: 1fr; } }
.dbr-prev { min-width: 0; }
.dbr-prev-paper { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; 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 Company-logo upload card (onboarding · finish setup · settings) ── */
.logo-up { border: 1px solid var(--border); border-radius: var(--r-lg, 14px); background: var(--surface); padding: 16px; }
.logo-up.compact { padding: 13px 14px; }
.logo-up-row { display: flex; align-items: flex-start; gap: 13px; }
.logo-up-prev { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--bg-sunken); 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%; color: #fff; font-family: var(--font-serif, serif); font-size: 24px; font-weight: 600; }
.logo-up-t { font-size: 13.5px; font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.logo-up-opt { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); background: var(--bg-sunken); padding: 1px 7px; border-radius: var(--r-pill, 999px); }
.logo-up-d { font-size: 12px; color: var(--ink-4); line-height: 1.5; margin-top: 4px; max-width: 460px; }
.logo-up-acts { display: flex; gap: 8px; margin-top: 13px; }

/* ── Email → Sequences view ── */
.seqv { display: flex; flex-direction: column; gap: 30px; }
.seqv-sec-hd { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.seqv-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--bg-active); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.seq-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.seq-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; 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: 7px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); background: var(--bg-sunken); padding: 1px 7px; 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: 16px; }
.seqed-step { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; 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: 9px; }
.seqed-step-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.seqed-step-when { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.seqed-subj { width: 100%; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 9px 12px; font: inherit; font-size: 13.5px; 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: 9px; background: var(--surface); padding: 9px 12px; font: inherit; font-size: 13px; 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: 12px; }
.seqed-top { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.seqed-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seqed-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); }
.seqed-name-ro { font-size: 14px; font-weight: 650; color: var(--ink); padding: 9px 0; }
.seqed-cad { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.seqed-cadinput { width: 56px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 8px 10px; font: inherit; font-size: 13.5px; 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: 7px; 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 { opacity: .3; cursor: default; }
.seqed-addstep { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; border: 1px dashed var(--border); background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 9px; 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: 12px; width: 100%; padding: 11px 12px; border: none; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; transition: background .12s; }
.seqpick:hover:not(:disabled) { background: var(--bg-hover); }
.seqpick:disabled { opacity: .5; cursor: default; }
.seqpick-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.seqpick-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.seqpick-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.seqpick-srclabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 9px; }
.seqpick-src { display: flex; flex-wrap: wrap; gap: 6px; }
.seqpick-srcchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; font-weight: 540; color: var(--ink-2); padding: 5px 10px; 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: 10.5px; font-weight: 700; color: var(--ink-4); }
.seqpick-srcchip.on .seqpick-srcn { color: var(--accent); }
.seqpick-divider { height: 1px; background: var(--border-subtle); margin: 14px 0; }
.seq-card-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.seq-card-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.seq-card-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.seq-card-n { font-size: 19px; 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: 3px; }
.seq-hint { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 12px; 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: 14px; padding: 11px 8px; border-bottom: 1px solid var(--border-subtle); border-radius: 8px; }
.seq-row:not(.seq-row-hd):hover { background: var(--bg-hover); }
.seq-row-hd { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 0 8px 9px; border-bottom: 1px solid var(--border); }
.seq-row-hd:hover { background: none; }
.seq-c-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.seq-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; 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: 13.5px; font-weight: 600; color: var(--ink); }
.seq-who-tx span { font-size: 12px; color: var(--ink-4); }
.seq-chip { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 3px 10px; 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: 9px; }
.seq-prog { display: inline-flex; gap: 3px; }
.seq-pip { width: 13px; height: 5px; border-radius: 3px; }
.seq-step-tx { font-size: 12px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.seq-c-next { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.seq-x { width: 30px; height: 30px; border: none; background: none; color: var(--ink-4); border-radius: 8px; 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: 30px 16px; }
@media (max-width: 720px) { .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: 16px; padding: 16px 24px 10px; flex-wrap: wrap; }
.orgc-head-l { min-width: 0; }
.orgc-title { font-size: 27px; margin: 0; line-height: 1.05; }
.orgc-sub { font-size: 13px; color: var(--ink-3); margin: 5px 0 0; max-width: 620px; line-height: 1.45; }
.orgc-head-r { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.orgc-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.orgc-link:hover { border-color: var(--border-strong); color: var(--ink); transform: translateY(-1px); }
.orgc-add { height: 34px; padding: 0 15px; gap: 6px; }

/* mode bar */
.orgc-bar { display: flex; align-items: center; gap: 14px; padding: 2px 24px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); }
.orgc-segs { display: inline-flex; gap: 3px; padding: 3px; background: var(--bg-sunken); border-radius: 11px; }
.orgc-seg { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: none; background: none; border-radius: 8px; color: var(--ink-3); font: inherit; font-size: 12.5px; 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: 12px; color: var(--ink-4); flex: 1; min-width: 120px; }
.orgc-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.orgc-zoom button { width: 30px; height: 28px; border: none; background: none; border-radius: 7px; 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: 11.5px; 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: 14px 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.orgc-roster-n { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.orgc-roster-search { display: flex; align-items: center; gap: 7px; margin: 0 12px 8px; padding: 0 10px; height: 34px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; 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: 12.5px; color: var(--ink); width: 100%; }
.orgc-roster-list { flex: 1; overflow-y: auto; padding: 0 8px 14px; display: flex; flex-direction: column; gap: 1px; }
.orgc-rrow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; 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: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-rrow-s { font-size: 11px; color: var(--ink-4); display: flex; align-items: center; gap: 6px; 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: 12px; color: var(--ink-4); padding: 14px 8px; 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; }
/* cool flowing dashes — bright dashes march along the dashed rail with a soft glow */
.orgc-edge-flow { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 8; opacity: .9; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 42%, transparent)); animation: orgcMarch .9s linear infinite; }
@keyframes orgcMarch { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce){ .orgc-edge-flow { animation: none; opacity: .45; 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: 12px; padding: 0 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-md); cursor: pointer; }
.orgc-root:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.orgc-root-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex-shrink: 0; }
.orgc-root-n { font-size: 15px; font-weight: 680; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-root-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* department node */
.orgc-dept { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.orgc-dept:hover { box-shadow: var(--shadow-md); }
.orgc-dept.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md); }
.orgc-dept.over { border-color: color-mix(in srgb, var(--dc) 70%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc) 28%, transparent), var(--shadow-md); }
.orgc-dept.un { border-style: dashed; background: var(--bg-sidebar); }
.orgc-dept-hd { display: flex; align-items: center; gap: 9px; padding: 13px 14px 11px; 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: 14px; font-weight: 660; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-dept-cnt { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px; }
.orgc-dept-body { padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.orgc-dept-empty { font-size: 11.5px; color: var(--ink-4); text-align: center; padding: 12px 6px; border: 1px dashed var(--border); border-radius: 9px; }
.orgc-dept.over .orgc-dept-empty { border-color: var(--dc); color: var(--dc); }

/* person chip */
.orgc-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--bg-sunken); transition: background .12s, transform .1s, box-shadow .12s; }
.orgc-chip.grabbable { cursor: grab; }
.orgc-chip.grabbable:active { cursor: grabbing; }
.orgc-chip:hover { background: var(--bg-active); }
.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: 12.5px; font-weight: 620; color: var(--ink); display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-chip-s { font-size: 10.5px; 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: 20px; 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: 7px 14px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-xs); white-space: nowrap; }
.orgc-tier-lbl b { font-size: 12.5px; font-weight: 680; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.orgc-tier-lbl span:last-child { font-size: 10.5px; color: var(--ink-4); padding-left: 15px; }
.orgc-band-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.orgc-pn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 4px; 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: translateY(-3px) scale(1.03); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--dc), var(--shadow-md); }
.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(--c-gold); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg); }
.orgc-pn-n { font-size: 12px; font-weight: 640; color: var(--ink); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-pn-s { font-size: 10px; font-weight: 600; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* group / team node */
.orgc-group { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.orgc-group:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.orgc-group.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md); }
.orgc-group.over { border-color: color-mix(in srgb, var(--gc) 70%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 28%, transparent), var(--shadow-md); }
.orgc-group-hd { display: flex; align-items: center; gap: 11px; }
.orgc-group-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.orgc-group-n { font-size: 14.5px; font-weight: 660; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-group-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-group-desc { font-size: 12px; 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: -7px; transition: transform .14s, margin .14s; }
.orgc-gf:hover { transform: translateY(-3px); z-index: 2; }
.orgc-group:hover .orgc-gf { margin-right: -4px; }
.orgc-group-foot { display: flex; align-items: center; gap: 12px; padding-top: 9px; border-top: 1px solid var(--border-subtle); font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.orgc-group-foot span { display: inline-flex; align-items: center; gap: 4px; }
.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: 13px; box-shadow: var(--shadow-pop); padding: 13px 14px; animation: orgcPop .18s ease-out both; pointer-events: none; }
@keyframes orgcPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.orgc-hc-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.orgc-hc-hd b { font-size: 13.5px; 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: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: var(--accent); background: var(--accent-soft); }
.orgc-hc-ic.sm { width: 22px; height: 22px; border-radius: 6px; }
.orgc-hc-count { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: 999px; padding: 1px 8px; }
.orgc-hc-desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-bottom: 9px; }
.orgc-hc-lead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2); margin-bottom: 9px; font-weight: 600; }
.orgc-hc-faces { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.orgc-hc-more { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.orgc-hc-empty { font-size: 11.5px; color: var(--ink-4); }
.orgc-hc-person { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.orgc-hc-person b { font-size: 14px; font-weight: 660; color: var(--ink); }
.orgc-hc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.orgc-hc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.orgc-hc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--bg-sunken); border-radius: 7px; padding: 3px 8px; }
.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: 6px; font-size: 11.5px; color: var(--ink-3); margin-top: 9px; font-weight: 600; }
.orgc-hc-meta.off { color: color-mix(in srgb, var(--c-gold) 80%, var(--ink)); }

/* inspector panel — floats over the canvas so it never crushes it */
.orgc-insp { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 8; border-left: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; min-height: 0; animation: orgcInsp .2s ease-out both; }
@keyframes orgcInsp { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.orgc-insp-hd { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border-subtle); }
.orgc-insp-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.orgc-insp-t { font-size: 15px; font-weight: 670; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-insp-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.orgc-insp-x { width: 30px; height: 30px; border: none; background: none; color: var(--ink-4); border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .12s; }
.orgc-insp-x:hover { background: var(--bg-active); color: var(--ink); }
.orgc-insp-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.orgc-insp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; 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: 13px; margin-bottom: 16px; }
.orgc-insp-pn { font-size: 16px; font-weight: 670; color: var(--ink); }
.orgc-insp-ps { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.orgc-insp-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 16px; }
.orgc-insp-rows { display: flex; flex-direction: column; }
.orgc-irow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.orgc-irow:last-child { border-bottom: none; }
.orgc-ik { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.orgc-iv { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.orgc-insp-sec { margin-top: 18px; }
.orgc-insp-sech { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.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: 7px; 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: 9px; padding: 6px 6px; border-radius: 9px; transition: background .12s; }
.orgc-insp-m:hover { background: var(--bg-hover); }
.orgc-insp-mn { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgc-insp-ms { font-size: 11px; 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: 7px; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: all .12s; }
.orgc-m-act:hover { background: var(--bg-active); color: var(--ink-2); }
.orgc-m-act.on { color: var(--c-gold); }
.orgc-insp-faces, .orgc-insp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.orgc-insp-face { transition: transform .12s; }
.orgc-insp-face:hover { transform: translateY(-2px); }
.orgc-insp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: color-mix(in srgb, var(--gc) 12%, transparent); border-radius: 8px; padding: 4px 9px; }
.orgc-insp-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 6px; border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; transition: background .12s; }
.orgc-insp-link:hover { background: var(--bg-hover); }
.orgc-insp-link .grow { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.orgc-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.orgc-sw { width: 24px; height: 24px; border-radius: 7px; 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: 12px; color: var(--ink-4); pointer-events: none; }
.orgc-stage-empty > * { pointer-events: auto; }
.orgc-stage-empty div { font-size: 14px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 1100px){ .orgc-roster { width: 210px; } .orgc-insp { width: 280px; } }
@media (max-width: 860px){ .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: 5px; flex-wrap: wrap; min-width: 0; }
.s-tag {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 168px; height: 22px; padding: 0 9px 0 8px; box-sizing: border-box;
  font-size: 11px; 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: 10.5px; padding: 0 8px 0 7px; gap: 5px; }
.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 8px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-sunken); border-radius: var(--r-pill); }
.s-tag-more.sm { height: 20px; font-size: 10px; padding: 0 7px; }
.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) 32%, transparent), var(--shadow-xs); }
.kbn-card.hl:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 46%, transparent), var(--shadow-sm); }
.trow.hl { box-shadow: none; }
.trow .hl-flag { display: none; }

/* ── Kanban card chrome ───────────────────────────────────────────────────── */
.kbn-card { border-radius: 14px; padding: 13px; }
.kbn-head { margin-bottom: 9px; }
.kbn-proj { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 72%; height: 20px; padding: 0 9px 0 8px; box-sizing: border-box; font-size: 10.5px; font-weight: 700; letter-spacing: .005em; border-radius: var(--r-pill); color: color-mix(in srgb, var(--pc) 60%, var(--ink)); background: color-mix(in srgb, var(--pc) 12%, var(--surface)); }
.kbn-proj-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); flex-shrink: 0; }
.kbn-cardtools { flex-shrink: 0; }
.kbn-title { font-weight: 650; font-size: 14px; line-height: 1.32; letter-spacing: -0.01em; margin-bottom: 5px; color: var(--ink); }
.kbn-sub { color: var(--ink-3); font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
.kbn-tags { margin-bottom: 11px; }
.kbn-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }

/* 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: -13px -13px 11px; border-radius: 14px 14px 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: 7px; right: 7px; width: 24px; height: 24px; border: none; border-radius: 7px; 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 — now an unmistakable pill control (was bare text → users
   didn't read it as a dropdown). Soft chip + rotating caret + clear hover/open. */
.kbn-subbtn { display: inline-flex; align-items: center; gap: 5px; border: none; background: var(--bg-sunken); color: var(--ink-2); font-size: 11px; font-weight: 650; cursor: pointer; padding: 3px 6px 3px 8px; border-radius: var(--r-pill); transition: background .14s, color .14s; }
.kbn-subbtn:hover, .kbn-subbtn.open { background: var(--accent-soft); color: var(--accent); }
.kbn-subbtn .kbn-subn { font-variant-numeric: tabular-nums; }
.kbn-subcaret { transition: transform .18s cubic-bezier(.2,.8,.2,1); opacity: .85; }
.kbn-subcaret.open { transform: rotate(180deg); }
.kbn-grip { color: var(--ink-4); opacity: 0; transition: opacity .14s, color .14s; cursor: grab; }
.kbn-card:hover .kbn-grip { opacity: .9; }

/* ── List view — grouped sections (separators, like the board) ────────────── */
.tlist-group + .tlist-group { margin-top: 4px; }
.tlist-group-hd { display: flex; align-items: center; gap: 9px; padding: 14px 14px 8px; 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: 4px; }
.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: 12px; 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 6px; border-radius: 999px; background: var(--bg-sunken); font-size: 10.5px; 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(.empty):not(.today), .tcal-cell:nth-child(7n):not(.empty):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: 8px; }
.tlist-group-empty { padding: 9px 14px 11px 40px; font-size: 12px; color: var(--ink-4); }

/* ── Task drawer — featured image (cover) ─────────────────────────────────── */
.tdw-cover { position: relative; margin: 0 0 16px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 6; background: var(--bg-sunken); }
.tdw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdw-cover-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; 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: 8px; 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: 7px; margin: 0 0 16px; padding: 7px 12px 7px 11px; border: 1px dashed var(--border-strong); border-radius: 10px; background: transparent; color: var(--ink-4); font-size: 12.5px; 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: 14px; 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: 14px 14px 0 0; }
.dt-h { padding: 11px 14px; font-size: 10.5px; 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: 3px; 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: 7px 14px; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); position: relative; }
.dt-cell.dt-r { justify-content: flex-end; }
.dt-cell-lead { padding: 0 0 0 16px; justify-content: center; }
.dt-cell-menu, .dt-cell-open { padding: 0; justify-content: center; }
.dt-editable { cursor: text; border-radius: 7px; }
.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: 4px 8px; }
.dt-input { width: 100%; border: 1px solid var(--accent); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); outline: none; box-sizing: border-box; }
.dt-cell-menu-edit { padding: 5px 9px; }
.dt-chipbtn { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; cursor: pointer; padding: 3px 5px; border-radius: 7px; 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: 13px; }
.dt-task-sub { font-size: 11.5px; color: var(--ink-3); }
.dt-client { display: flex; align-items: center; gap: 9px; 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: 6px; min-width: 0; font-size: 12.5px; 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: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dt-due { font-size: 12.5px; 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: 7px; 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: 60px 20px; text-align: center; color: var(--ink-4); }
/* onboarding mini for the Table view */
.tvm-table { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 3px; padding: 10px 12px; }
.tvm-table i { border-radius: 2px; background: var(--bg-sunken); }
.tvm-table i:nth-child(-n+3) { background: color-mix(in srgb, var(--accent) 30%, var(--bg-sunken)); }

/* ── Featured-image thumbnails in List rows + Table name cell ──────────────── */
.trow-content { display: flex; align-items: center; gap: 11px; }
.trow-thumb { flex-shrink: 0; width: 38px; height: 30px; border-radius: 7px; 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: 10px; 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 9px; 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: 10px; }
.dt-cols-wrap { position: relative; }
.dt-cols-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; 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: 13px; box-shadow: var(--shadow-lg); padding: 8px; animation: pop-menu .14s cubic-bezier(.4,0,.2,1); }
.dt-cols-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; }
.dt-cols-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.dt-cols-n { font-size: 11px; font-weight: 600; color: var(--ink-4); }
.dt-cols-reset { margin-left: auto; border: none; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 5px; 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: 8px; padding: 7px 8px; border-radius: 8px; 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: 13px; 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: 7px; 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 8px; background: var(--accent); border-radius: 2px; }