/* ═══════════════════════════════════════════════════════════════════
   SocialOS — App Stylesheet (v3 · Option D "Nodes")
   Paper look, light first (Option A's materials), each Home card an
   independent node with its own hue. The dark variant is a token swap
   under [data-theme="dark"] — set by js/theme.js from the Appearance
   setting (system · light · dark), never by a media query alone, so the
   toggle in Settings wins. No frameworks, no CDN dependencies.

   Two token vocabularies live here on purpose:
   1. the D tokens the mockup uses (--bg, --surface, --fg, --accent, --sp-*,
      --r-*, --text-*, --n-<node> …) — new rules use these;
   2. the legacy names the older rules below still read (--bg-primary,
      --text-secondary, --radius-md, --space-md …), each an ALIAS of a D
      token, so the whole file re-themes through one block. Retire an alias
      only once nothing below reads it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens (Option D) ─────────────────────────────────────── */

:root {
  /* type: one family, two weights (300 body, 500 bold); code and ids use
     the system's mono stack (no second web font). */
  --font: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --w-bold: 500;
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 22px; --text-xl: 36px;

  /* spacing, radius, motion */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --mo: 120ms;

  /* shell */
  --ribbon-h: 56px; --bar-h: 56px;
  --tile-h: 84px; --tile-wide-h: 60px;
  --tile-u: 46px;            /* half-unit row of the dense node grid */

  /* paper */
  --bg: #FBFBF9; --surface: #FFFFFF; --surface-2: #F1F1EC; --line: #E7E7E1;
  --fg: #1C1C1A; --fg-2: #66665F; --fg-3: #9C9C94;
  --accent: #3B5BDB; --accent-fg: #FFFFFF; --accent-bg: #E9EDFB;
  --ok: #2A7148; --ok-bg: #E7F3EB;
  --warn: #8F5C00; --warn-bg: #FBF1DC;
  --bad: #B23A3A; --bad-bg: #FBE7E7;
  --d1: #D7DFFA; --d2: #F6E2C8; --d3: #D5EEDD; --d4: #EADDF6;   /* department tints */
  --shadow: 0 1px 2px rgba(28, 28, 26, .04), 0 10px 28px -20px rgba(28, 28, 26, .25);
  --shadow-sm: 0 1px 2px rgba(28, 28, 26, .08);
  --scrim: rgba(28, 28, 26, .35);

  /* node hues: one colour per node, on its icon, ring and mark; the tile
     itself stays paper. Phase 1 keys them by the screen a tile opens. */
  --n-inbox: #4A5570; --n-projects: #2456C8; --n-workorders: #C0581B; --n-calendar: #1E7A48;
  --n-growth: #6A3FD0; --n-learning: #9A6A00; --n-library: #157487; --n-health: #C2345A;
  /* The Week node (alys OFFICE_BRIEF §5.9.10, D64): FIELDMARK D11's
     verdigris pair, the Office's own accent. */
  --n-week: #0F7D6B;
  /* The week's lane hues in the board's fixed order (OFFICE_BRIEF D42), then
     grey for every further lane; each with a wash for its chips. --wash-2 and
     --wash-5 derive from the verdigris and gold hues, never the status
     washes, so a chip never wears a verdict's colour. */
  --lane-1: #2456C8; --lane-2: #0F7D6B; --lane-3: #4A5570; --lane-4: #C0581B; --lane-5: #9A6A00; --lane-n: #9C9C94;
  --wash-1: #E8EEFA; --wash-2: #E3F0ED; --wash-3: #ECEEF3; --wash-4: #F9EBE2; --wash-5: #F6EFDD; --wash-n: #F1F1EC;

  /* Platform colors (badges on cards; unchanged by theme) */
  --linkedin:  #0A66C2;
  --facebook:  #1877F2;
  --instagram: linear-gradient(45deg, #E1306C, #833AB4);
  --reddit:    #FF4500;

  /* Safe areas. --safe-top matters in the installed PWA: viewport-fit=cover
     + the black-translucent status bar draw the page under the iPhone status
     bar, so anything at the top edge needs this added to its padding or taps
     on it land on the status bar instead. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Legacy aliases (read by the older rules below) ─────────────── */
  --bg-primary:   var(--bg);
  --bg-surface:   var(--surface);
  --bg-card:      var(--surface);
  --bg-elevated:  var(--surface-2);
  --bg-border:    var(--line);
  --bg-border-strong: var(--fg-3);
  --accent-hover:  var(--accent);
  --accent-2:      var(--accent);
  --accent-3:      var(--accent);
  --grad-accent:   var(--accent);
  --grad-accent-aa: var(--accent);
  --grad-aurora:   var(--accent);
  --success:       var(--ok);
  --warning:       var(--warn);
  --danger:        var(--bad);
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-2);
  --text-faint:     var(--fg-3);
  --font-display: var(--font);
  --font-body:    var(--font);
  --space-xs: var(--sp-1);
  --space-sm: var(--sp-2);
  --space-md: var(--sp-4);
  --space-lg: var(--sp-5);
  --space-xl: var(--sp-6);
  --space-2xl: var(--sp-7);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: 9999px;
  --shadow-card: var(--shadow);
  --shadow-elevated: var(--shadow);
  --glow-accent: none;
  /* Soft washes the older rules used as rgba(accent, .x): one token each,
     so they follow the theme. */
  --wash-accent: var(--accent-bg);
  --wash-ok: var(--ok-bg);
  --wash-warn: var(--warn-bg);
  --wash-bad: var(--bad-bg);
  --wash-line: color-mix(in srgb, var(--fg) 6%, transparent);

  /* Layout (legacy names kept; the bar is a sticky row now, not a floating pill) */
  --nav-height: var(--bar-h);
  --nav-gap: 0px;
  --nav-clearance: var(--bar-h);
  --dock-fab: 0px;
  --dock-gap: 0px;
  --bar-w: 100%;
  --dock-left: 0;
  --sidebar-width: 236px;
  --content-max: 1040px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #141517; --surface: #1C1D21; --surface-2: #26272C; --line: #30323A;
  --fg: #ECECE8; --fg-2: #A6A6A0; --fg-3: #73736D;
  --accent: #8FA6FF; --accent-fg: #101223; --accent-bg: #252B45;
  --ok: #6FCB8E; --ok-bg: #1D3326;
  --warn: #E6B354; --warn-bg: #3A2E14;
  --bad: #F08080; --bad-bg: #3B1F1F;
  --d1: #2C3660; --d2: #5A4426; --d3: #24472F; --d4: #44305C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -20px rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .55);
  --n-inbox: #AEB8D2; --n-projects: #8FB2FF; --n-workorders: #FFA26B; --n-calendar: #6FD39A;
  --n-growth: #B79BFF; --n-learning: #F2C85C; --n-library: #6FD0E0; --n-health: #FF8DA6;
  --n-week: #3DBFA6;
  --lane-1: #8FB2FF; --lane-2: #3DBFA6; --lane-3: #AEB8D2; --lane-4: #FFA26B; --lane-5: #F2C85C; --lane-n: #8A8A84;
  --wash-1: #252B45; --wash-2: #1B2F2B; --wash-3: #26272C; --wash-4: #3A2A1E; --wash-5: #332D1C; --wash-n: #26272C;
  color-scheme: dark;
}

/* ── Reset ────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

a { color: var(--accent); text-decoration: none; }

img { max-width: 100%; height: auto; }


/* Slim, theme-matched scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-elevated) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── App shell ────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* A screen is one scrolling column between the ribbon (top) and the bar
   (bottom); both are fixed, so the screen pads for them. */
.screen {
  display: none;
  flex: 1;
  padding: var(--sp-2) max(16px, env(safe-area-inset-right, 0px)) var(--sp-6) max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(var(--sp-2) + var(--safe-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Under the bar the top ribbon takes the first row, so a screen starts below
   it and ends above the bar. */
body.nav-visible .screen {
  padding-top: calc(var(--sp-2) + var(--safe-top) + var(--ribbon-h));
  padding-bottom: calc(var(--bar-h) + var(--safe-bottom) + var(--sp-6));
}

.screen.active {
  display: block;
  animation: screen-in var(--mo) ease both;
}

@keyframes screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Every screen holds exactly one content div — center it (the mockup's
   1040px column; tiles go three-up on it from 900px). */
.screen > div {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Full-bleed screens (landing) manage their own width */
.screen-full { padding: 0; }
.screen-full > div { max-width: none; }

/* Home never scrolls (Scot, 2026-09-26): the screen is the viewport, the
   column inside it is clipped, and the tiles are measured to fit 375×667
   (renderDashboard). */
body.nav-visible #screen-dashboard.active {
  /* flex: none so the height holds: as a flex:1 child of #app it grew to
     its content's height and the page scrolled 4px (phase 2 review). */
  flex: none;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: calc(var(--bar-h) + var(--safe-bottom) + var(--sp-2));
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION — the bar holds one button, Home (Scot, 2026-10-22). A
   sticky paper row with a hairline, on every width; every other screen
   hangs off Home's tiles, the ribbon or the Inbox switch (index.html
   data-also keeps the button lit, ui.js showScreen).
   ═══════════════════════════════════════════════════════════════════ */

#main-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  height: calc(var(--bar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.nav-brand { display: none; }

.nav-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: var(--content-max);
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 88px;
  height: var(--bar-h);
  padding: 0 var(--sp-4);
  color: var(--fg-2);
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color var(--mo), background var(--mo);
  -webkit-tap-highlight-color: transparent;
}

.nav-tab-icon { display: inline-flex; width: 24px; height: 24px; }
.nav-tab-icon svg { width: 100%; height: 100%; }
.nav-tab-label { white-space: nowrap; }
.nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.nav-tab.active { color: var(--accent); }
.nav-tab.active .nav-tab-icon .acc { stroke: var(--accent); }

.nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 24px);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: var(--w-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── Screen header (ui.js screenHead): back · hue mark · title · actions ── */

.shead {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-bottom: var(--sp-4);
}

.shead .back { margin-left: -10px; }
.shead-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shead h1 { font-size: var(--text-lg); font-weight: var(--w-bold); line-height: 1.2; text-wrap: balance; letter-spacing: 0; }
.shead-sub { color: var(--fg-2); font-size: var(--text-sm); margin-top: 2px; }
.shead-actions { flex: none; display: flex; align-items: center; gap: var(--sp-1); }

/* The hue mark a node screen carries beside its title (Phase 1: the screen's
   own hue; Phase 2 reads it from the node registry). */
.node-mark { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--node, var(--fg-3)); flex: none; }
.shead h1 .node-mark { vertical-align: middle; margin: 0 8px 2px 0; }
[data-node="inbox"] { --node: var(--n-inbox); }
[data-node="projects"] { --node: var(--n-projects); }
[data-node="workorders"] { --node: var(--n-workorders); }
[data-node="calendar"] { --node: var(--n-calendar); }
[data-node="growth"] { --node: var(--n-growth); }
[data-node="learning"] { --node: var(--n-learning); }
[data-node="library"] { --node: var(--n-library); }
[data-node="health"], [data-node="body"] { --node: var(--n-health); }
[data-node="week"] { --node: var(--n-week); }

/* Inbox: Your posts ⇄ SAFO, one segmented switch on both screens */
.inbox-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.screen > .inbox-switch,
body.nav-visible .screen > .inbox-switch { max-width: 420px; margin: 0 auto var(--sp-4); display: flex; }

.inbox-switch-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--mo), background var(--mo);
}

.inbox-switch-btn:hover { color: var(--fg); }

.inbox-switch-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 1;
}

.inbox-switch-count[hidden] { display: none; }
.inbox-switch-btn.is-active .inbox-switch-count { background: var(--accent); color: var(--accent-fg); }

.inbox-switch-btn.is-active {
  color: var(--fg);
  font-weight: var(--w-bold);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ── The ribbon: Create · SAFO · Settings · Feedback (Scot, 2026-10-22) ──
   One paper row with a hairline, fixed at the top on every screen the bar
   shows on; the buttons sit right. Counts sit on the icon's corner and are
   set only from a lane that was read (ui.js updateRibbon). */
.top-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  height: calc(var(--ribbon-h) + var(--safe-top));
  padding: var(--safe-top) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.ribbon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--mo), background var(--mo);
  -webkit-tap-highlight-color: transparent;
}

.ribbon-btn svg { width: 24px; height: 24px; }
.ribbon-btn:hover, .ribbon-btn:focus-visible { color: var(--fg); background: var(--surface-2); }
.ribbon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Create — the one action the app exists for — is the ribbon's lit pill. */
.ribbon-create {
  width: auto;
  height: 40px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-fg);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--w-bold);
  background: var(--accent);
  border-radius: var(--radius-full);
  margin-right: auto;
}
.ribbon-create:hover, .ribbon-create:focus-visible { color: var(--accent-fg); background: var(--accent); filter: brightness(1.06); }
.ribbon-create svg .acc { stroke: var(--accent-fg); }
@media (min-width: 720px) { .ribbon-create { margin-right: 0; } .top-ribbon { justify-content: flex-end; } }
/* On a phone the pill sits left of the icons with the row's air between (the
   mockup's spacer); from 720px the four buttons group right. */

.ribbon-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 1;
  display: inline-grid;
  place-items: center;
}
.ribbon-count[hidden] { display: none; }

/* Without the bar (landing, onboarding) only the feedback button remains,
   bottom right where the floating bubble used to be, so a first-run
   visitor can still report a bug. */
body:not(.nav-visible) .top-ribbon {
  top: auto;
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  left: auto;
  right: var(--sp-4);
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
}
body:not(.nav-visible) .ribbon-btn:not(.ribbon-feedback) { display: none; }
body:not(.nav-visible) .ribbon-feedback { width: 48px; height: 48px; border-radius: 24px; background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); }
body:not(.nav-visible) .ribbon-feedback:hover { color: var(--accent-fg); background: var(--accent); }

/* ── App version badge ─────────────────────────────────────────────────
   Small, muted SemVer indicator (https://semver.org), text set by
   js/version.js. Bottom-right beside the button on the landing/onboarding
   screens. Phones with the bar showing have no free corner, so there it
   lives in Settings → Data & about instead. */
.version-badge {
  position: fixed;
  right: calc(var(--sp-4) + 56px);
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  z-index: 140;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity var(--mo), color var(--mo);
}

.version-badge:hover { opacity: 1; color: var(--fg); }
body.nav-visible .version-badge { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════ */

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.landing-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
}

/* Top bar */
.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  /* The landing lives in a .screen-full (zero screen padding), so it must
     clear the status bar itself or the Sign in button is untappable in the
     installed PWA. */
  padding-top: calc(var(--space-lg) + var(--safe-top));
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 1.2rem;
}

.landing-logo .nav-brand-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: var(--glow-accent);
}

.landing-logo em {
  font-style: normal;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero */
.landing-hero {
  padding: clamp(48px, 10vh, 120px) 0 clamp(40px, 8vh, 96px);
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--bg-border-strong);
  background: var(--wash-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.hero-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 10px var(--accent-3);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}

.hero-title .grad {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  max-width: 620px;
  margin: 0 auto var(--space-xl);
  color: var(--text-secondary);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.btn-hero {
  padding: 16px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
  box-shadow: var(--glow-accent), 0 8px 24px var(--wash-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--bg-border-strong);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--wash-accent); }

.hero-note {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* Platform strip */
.landing-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: clamp(40px, 8vh, 88px);
}

.landing-platforms .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--bg-border);
  background: var(--bg-surface);
  font-size: 0.875rem;
  font-weight: var(--w-bold);
  color: var(--text-secondary);
}

.platform-pill .platform-dot { margin: 0; }

/* Section scaffolding */
.landing-section { padding: clamp(40px, 7vh, 80px) 0; }

.landing-kicker {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.landing-h2 {
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.landing-section-sub {
  text-align: center;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto var(--space-2xl);
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.feature-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--bg-border-strong);
  box-shadow: var(--shadow-elevated);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, transparent, transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.feature-card:hover::before { opacity: 1; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--wash-accent);
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 { margin-bottom: var(--space-xs); font-size: 1.05rem; }

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* How it works */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.step-card {
  position: relative;
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
  box-shadow: var(--glow-accent);
}

.step-card h3 { margin-bottom: var(--space-xs); }
.step-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

/* Final CTA */
.landing-cta {
  text-align: center;
  padding: clamp(48px, 9vh, 96px) var(--space-lg);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, var(--wash-accent), transparent),
    var(--bg-card);
  margin-bottom: var(--space-2xl);
}

.landing-cta h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.landing-cta p { color: var(--text-secondary); margin-bottom: var(--space-lg); }

.landing-footer {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.8125rem;
  padding-bottom: var(--space-xl);
}

@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   CORE COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
}

/* The card a notification tap was about (js/app.js focusCard). Scrolled into
   view, then flashed for ~2.4s so the eye lands on it in a long list. The
   ring stays for the whole flash; only the wash fades, so the target is
   findable even if the animation is suppressed. */
.card-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-card);
  animation: card-focus-flash 2.4s ease-out;
}

@keyframes card-focus-flash {
  0%   { background: color-mix(in srgb, var(--accent) 22%, var(--bg-card)); }
  100% { background: var(--bg-card); }
}

@media (prefers-reduced-motion: reduce) {
  .card-focused { animation: none; }
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--w-bold);
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.12s, box-shadow 0.2s, border-color 0.2s;
  min-height: 44px;
  min-width: 44px;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--grad-accent);
  color: var(--accent-fg);
  box-shadow: 0 2px 12px transparent;
}
.btn-primary:hover { box-shadow: var(--glow-accent); filter: brightness(1.08); }

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-border);
}
.btn-secondary:hover { border-color: var(--bg-border-strong); }

.btn-accent {
  background: var(--accent-2);
  color: var(--accent-fg);
}

.btn-success {
  background: var(--success);
  color: var(--accent-fg);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--bad);
}
.btn-danger:hover { border-color: var(--danger); background: var(--wash-bad); }

.btn-google {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
}
.btn-google:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}
.btn-google:active {
  background: #f1f3f4;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
}
.btn-google svg { flex-shrink: 0; }

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8125rem;
  min-height: 36px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.75rem;
  min-height: 32px;
}

.btn-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Inputs ────────────────────────────────────────────────────────── */

.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--wash-accent);
}

.input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.post-textarea {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239297B8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.input-row {
  display: flex;
  gap: var(--space-sm);
}

.input-row .input {
  flex: 1;
}

/* ── Chips ─────────────────────────────────────────────────────────── */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 36px;
  font-family: var(--font-body);
  text-transform: capitalize;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.chip.selected {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--accent-fg);
  box-shadow: 0 2px 10px transparent;
}

.chip-sm {
  padding: 5px 12px;
  font-size: 0.75rem;
  min-height: 28px;
}

/* ── Radio cards ───────────────────────────────────────────────────── */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.radio-card.selected,
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--wash-accent);
}

.radio-card input { display: none; }

.radio-label {
  font-weight: var(--w-bold);
  margin-bottom: 2px;
}

.radio-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* ── Toggle rows ───────────────────────────────────────────────────── */

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
  font-size: 0.9375rem;
}

.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════════════ */

#screen-onboarding {
  display: none;
  padding: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-xl);
}

#screen-onboarding.active { display: flex; flex-direction: column; }

#screen-onboarding > div {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.ob-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.ob-brand .nav-brand-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: contain;
}

.onboarding-progress {
  height: 5px;
  background: var(--bg-elevated);
  border-radius: 3px;
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--grad-aurora);
  border-radius: 3px;
  transition: width 0.35s ease;
}

.onboarding-step-label {
  font-size: 0.75rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-lg);
}

#onboarding-content h2 {
  margin-bottom: var(--space-sm);
  font-size: 1.6rem;
}

.onboarding-desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  font-size: 0.9375rem;
}

.onboarding-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xl);
  gap: var(--space-md);
}

.info-box {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.info-box code {
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.test-result {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  min-height: 20px;
}

.test-result.success { color: var(--success); }
.test-result.error   { color: var(--danger); }

.completion-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

.summary-item .check {
  color: var(--success);
  font-weight: bold;
}

.summary-item .check.pending {
  color: var(--text-secondary);
}

/* ── Accordion / summary-card ("Confirm your brief") ─────────────────── */

.ob-accordion {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ob-accordion + .ob-accordion {
  margin-top: var(--space-sm);
}

.ob-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.ob-summary::-webkit-details-marker {
  display: none;
}

.ob-summary-label {
  font-weight: var(--w-bold);
  flex-shrink: 0;
}

.ob-summary-value {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-summary::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-left: var(--space-xs);
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.ob-accordion[open] > .ob-summary::after {
  transform: rotate(-135deg);
}

.ob-accordion-body {
  padding: 0 var(--space-md) var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--bg-border);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME (ui.js renderDashboard) — Option D: header, the attention strip and
   eight node tiles on a dense half-unit grid. Measured at 375×667: ribbon
   56 + bar 56 + head 44 + strip 56 + three gaps 24 + screen air 16 leaves
   415px; two wide (46) + three compact rows (92) + four gaps (32) = 400.
   ═══════════════════════════════════════════════════════════════════ */

.dash { display: flex; flex-direction: column; gap: var(--sp-2); }

.home-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.home-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.home-brand { font-size: var(--text-md); font-weight: var(--w-bold); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-date { font-size: var(--text-xs); color: var(--fg-3); }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: var(--w-bold);
  flex: none;
}
.avatar.is-sm { width: 24px; height: 24px; font-size: 12px; }
.avatar.is-dept { background: var(--dept, var(--surface-2)); color: var(--fg); }
.avatar[data-dept="marketing"] { --dept: var(--d1); }
.avatar[data-dept="sales"] { --dept: var(--d2); }
.avatar[data-dept="product"] { --dept: var(--d3); }
.avatar[data-dept="security"] { --dept: var(--d4); }

/* Sync dot: a 44px button (opens Settings) holding a 10px dot */
.dash-sync {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  color: var(--fg-3);
}
.dash-sync:hover { background: var(--surface-2); }
.dash-sync-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); }
.dash-sync.is-synced .dash-sync-dot { background: var(--ok); }

/* "N things need you" — the one number Home leads with */
.dash-attn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  color: var(--fg);
  font-family: var(--font);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background var(--mo);
}
.dash-attn:hover { background: var(--surface-2); }
.dash-attn-count { font-size: var(--text-xl); font-weight: 300; line-height: 1; min-width: 1.2em; color: var(--fg); }
.dash-attn-count svg { width: 24px; height: 24px; }
.dash-attn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-attn-title { font-size: var(--text-md); }
.dash-attn-sub { color: var(--fg-3); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-attn-viz { width: 72px; flex: none; }
.dash-attn-go { flex: none; display: inline-flex; width: 24px; height: 24px; color: var(--fg-3); }
.dash-attn-go svg { width: 100%; height: 100%; }
.dash-attn.is-clear .dash-attn-count { color: var(--ok); }
.dash-attn.is-clear .dash-attn-count .acc { stroke: var(--ok); }

/* The dense node grid: a half unit per row, so a wide node is one strip
   and a compact node two units. */
.dash-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--tile-u);
  grid-auto-flow: dense;
  gap: var(--sp-2);
  align-content: start;
}

.dash-tile {
  position: relative;
  grid-row: span 2;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: background var(--mo);
}
.dash-tile:hover { background: var(--surface-2); }
/* The node's own button fills the tile (Option D phase 2: the tile is a node
   wrapper, so Edit Home's controls can sit beside the button, never in it). */
.dash-tile-go {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 0 var(--sp-2);
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 10px var(--sp-3);
  text-align: left;
  color: var(--fg);
  font: inherit;
  font-family: var(--font);
  background: none;
  border: none;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
}
.dash-tile-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-tile-go:disabled { cursor: default; }

.dash-tile-icon { position: relative; grid-row: 1; grid-column: 1; display: inline-flex; width: 24px; height: 24px; color: var(--node, var(--fg-2)); }
.dash-tile-icon svg { width: 24px; height: 24px; }
.dash-tile-icon .acc { stroke: var(--node, var(--accent)); }
.dash-tile-text { grid-row: 2; grid-column: 1; align-self: end; display: flex; flex-direction: column; min-width: 0; }
.dash-tile-title { font-size: var(--text-sm); font-weight: var(--w-bold); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile-meta { font-size: var(--text-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile-viz { grid-row: 1 / 3; grid-column: 2; align-self: center; display: flex; align-items: center; min-width: 0; max-width: 64px; }

/* The count of things to handle behind a tile: a badge on the icon's corner */
.dash-tile-count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--node, var(--accent));
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 1;
  display: inline-grid;
  place-items: center;
}
:root[data-theme="dark"] .dash-tile-count { color: var(--bg); }

/* A wide node: one half-unit strip, icon · title · meta · viz in a row */
.dash-tile-wide {
  grid-column: 1 / -1;
  grid-row: span 1;
}
.dash-tile-wide .dash-tile-go {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
}
.dash-tile-wide .dash-tile-icon, .dash-tile-wide .dash-tile-text { align-self: center; }
.dash-tile-wide .dash-tile-text { flex-direction: row; align-items: baseline; gap: var(--sp-2); flex: 1; min-width: 0; }
.dash-tile-wide .dash-tile-meta { flex: 1; min-width: 0; }
.dash-tile-wide .dash-tile-viz { display: flex; align-items: center; gap: var(--sp-2); max-width: none; }
.dash-tile-wide .dash-tile-viz .strip { width: 96px; }
.dash-tile-wide .ring { width: 28px; height: 28px; }
.dash-tile-wide .minis b { font-size: var(--text-md); }
/* one row: a number then its word, so "0 posts 0 replies" reads on the strip */
.dash-tile-wide .minis { gap: 0 4px; grid-template-rows: auto; align-items: baseline; }
.dash-tile-wide .minis small { margin-right: var(--sp-2); }

/* Node hues on the tile: the icon, the ring, the spark and the mark; the
   tile itself stays paper. */
.dash-tile .ring-fill, .dash-tile .spark-line { stroke: var(--node, var(--accent)); }
.dash-tile .spark-area, .dash-tile .spark-end { fill: var(--node, var(--accent)); }
.dash-tile .strip i.is-now, .dash-tile .lanes-mini i:first-child, .dash-tile .calpage small { background: var(--node, var(--accent)); }
.dash-tile .minis b { color: var(--node, var(--accent)); }

@media (min-width: 900px) {
  .dash-tiles { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 60px; gap: var(--sp-3); }
  .dash-tile-wide { grid-column: span 3; }
  .dash-tile-viz { max-width: 124px; }
  .dash-tile-title { font-size: var(--text-md); }
  .dash-tile .strip { width: 112px; }
}


/* ── Platform badges ───────────────────────────────────────────────── */

.platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  color: var(--accent-fg);
  font-size: 0.75rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.platform-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   APPROVALS — restyled as the Inbox (Option D); the card, tab, edit and
   publish rules live in the "D · Inbox" region at the end of this file.
   What stays here is read by other screens too.
   ═══════════════════════════════════════════════════════════════════ */

.screen-title {
  margin-bottom: var(--space-md);
}

.edit-view, .publish-flow, .detail-view, .add-content-view {
  max-width: 640px;
}

.char-count {
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTENT LIBRARY
   ═══════════════════════════════════════════════════════════════════ */

/* ── Library (ui.js renderLibrary) ─────────────────────────────────── */

/* minmax(0, …), not 1fr: a 1fr track's floor is its content's min width,
   and the nowrap meta line pushed rows past the screen edge on phones. */

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.content-card {
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.content-card:hover {
  border-color: var(--bg-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.content-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.content-thumb {
  position: relative;
  width: calc(100% + var(--space-md) * 2);
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-sm);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--bg-surface);
}

.content-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.content-card:hover .content-thumb img { transform: scale(1.04); }

.face-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  padding: 2px 6px;
  font-size: 0.8125rem;
}

.content-title { margin-bottom: var(--space-xs); }

.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.rating-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  text-transform: uppercase;
}

.rating-high   { background: var(--wash-ok); color: var(--success); }
.rating-medium { background: var(--wash-warn); color: var(--warning); }
.rating-low    { background: var(--wash-line); color: var(--text-secondary); }
.rating-skip   { background: var(--wash-bad); color: var(--danger); }

/* ── Content detail ────────────────────────────────────────────────── */

.detail-section {
  margin-bottom: var(--space-md);
}

.detail-section h4 {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-section ul {
  list-style: none;
  padding: 0;
}

.detail-section li {
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.detail-section li::before {
  content: '→ ';
  color: var(--accent);
}

.detail-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════════════ */

/* Settings reads as one calm column of groups, even on desktop */
body.nav-visible #screen-settings > #settings-content { max-width: 760px; }

/* A connection's state pill (onboarding step 1 still draws one; Settings
   itself uses .pill since Option D — rules at the end of the file). */
.connection-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: var(--w-bold);
  margin-bottom: var(--space-sm);
}
.connection-status.connected { background: var(--wash-ok); color: var(--success); }
.connection-status.disconnected { background: var(--wash-line); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   OVERLAYS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Toast notifications ───────────────────────────────────────────── */

#toast-container {
  position: fixed;
  top: calc(var(--space-md) + var(--safe-top));
  /* under the bar the ribbon owns the top row (Option D) */
  --toast-offset: 0px;
  top: calc(var(--space-md) + var(--safe-top) + var(--toast-offset));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
  width: calc(100% - var(--space-lg) * 2);
  max-width: 400px;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevated);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-info    { background: var(--surface); color: var(--text-primary); border: 1px solid var(--bg-border-strong); }
.toast-success { background: var(--wash-ok); color: var(--success); border: 1px solid var(--success); }
.toast-error   { background: var(--wash-bad); color: var(--danger); border: 1px solid var(--danger); }
.toast-warning { background: var(--wash-warn); color: var(--warning); border: 1px solid var(--warning); }

/* ── Loading overlay ───────────────────────────────────────────────── */

#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  flex-direction: column;
  gap: var(--space-md);
}

.loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--bg-elevated);
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-message {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ── Bottom sheet ──────────────────────────────────────────────────── */

#bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.3s;
}

#bottom-sheet.open {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

#bottom-sheet-content {
  width: 100%;
  background: var(--bg-card);
  border-top: 1px solid var(--bg-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
  /* A tall sheet (Growth with 3+ accounts) scrolls instead of running off
     the top of the screen. */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

#bottom-sheet.open #bottom-sheet-content {
  transform: translateY(0);
}

/* Desktop: bottom sheet becomes a centered modal */
@media (min-width: 1024px) {
  #bottom-sheet { align-items: center; }

  #bottom-sheet-content {
    max-width: 440px;
    border: 1px solid var(--bg-border-strong);
    border-radius: var(--radius-lg);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    box-shadow: var(--shadow-elevated);
  }

  #bottom-sheet.open #bottom-sheet-content {
    transform: translateY(0);
    opacity: 1;
  }
}

.sheet-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.sheet-actions .btn { flex: 1; }

/* ── Text utilities ────────────────────────────────────────────────── */

.text-secondary { color: var(--text-secondary); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════
   PROJECTS / PROGRAM MANAGER
   ═══════════════════════════════════════════════════════════════════ */


.status-pill {
  font-size: 0.7rem;
  font-weight: var(--w-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
}
.status-active { background: var(--wash-ok); color: var(--success); }
.status-on_hold { background: var(--wash-warn); color: var(--warning); }
.status-completed { background: var(--wash-accent); color: var(--accent); }
.status-archived { background: var(--bg-elevated); color: var(--text-secondary); }

.btn-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}
.btn-icon:hover { color: var(--text-primary); background: var(--bg-elevated); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet width bump for mid-size layouts
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .content-grid { grid-template-columns: 1fr 1fr; }

  .screen {
    padding: var(--space-lg) var(--space-xl);
    /* Re-assert the safe insets + bottom-nav clearance the shorthand above
       would otherwise wipe (the bottom nav is present up to 1024px). */
    padding-top: calc(var(--space-lg) + var(--safe-top));
    padding-bottom: calc(var(--nav-clearance) + var(--space-lg) + var(--safe-bottom));
  }
  .screen-full { padding: 0; }
  .screen > div { max-width: 768px; }
  .screen-full > div { max-width: none; }
}

@media (min-width: 1024px) {
  .content-grid { grid-template-columns: repeat(3, 1fr); }
  .content-grid .card { margin-bottom: 0; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .ribbon-feedback:hover, .ribbon-create:hover, .dash-tile:hover, button.dash-attn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Quick Composer (js/composer.js + renderComposer)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Composer screen ─── the Option D rules live in the "D · Create" region
   at the end of this file; only the two classes the Inbox shares stay here. */
.cmp-warn { color: var(--warning); }

/* Token-decay visibility (2026-07-30 ecosystem wave): a block warning notice
 * with an inline reconnect button — composer + Queue reconnect banners.
 * A NEW class, deliberately not .cmp-warn (that one is an existing
 * colour-only utility used inline elsewhere; repurposing it would silently
 * restyle those spots). */
.cmp-reconnect {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.82rem; color: var(--warning);
  background: var(--wash-warn);
  border: 1px solid var(--wash-warn);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 var(--space-md);
}
.cmp-reconnect b { font-weight: var(--w-bold); }

/* ── Visuals: review thumbs (approval/scheduled cards; the composer's own
   attach row and card panel are in the "D · Create" region) ── */
/* Thumbs on draft/review/approval/scheduled cards — small variant of .content-thumb */
.cmp-draft-thumb,
.approval-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
  flex: 0 0 auto;
  margin-bottom: var(--space-sm);
}
.cmp-draft-thumb img,
.approval-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Content Security — no inline styles for sensitive elements ────── */

/* CSP meta tag in index.html restricts inline scripts.
   All interactive styles are class-driven, not inline. */



/* Device pairing (alys run 138): the 4-digit code on the phone's sheet. */

/* ═══════════════════════════════════════════════════════════════════
   OPTION D COMPONENT SET — the shared vocabulary every screen is restyled
   with (mockup: claude.ai/artifact/CxryaNkoN5iKNbfmmRDvJm). New markup
   uses these classes; the older per-screen rules above pick the look up
   through the token aliases. Icons: 24-grid, 1.75 stroke, one accent path
   (`.acc`) — js/fieldmark/icons.js where a canon icon exists, hand-drawn in
   the same grammar otherwise (ui.js ICONS).
   ═══════════════════════════════════════════════════════════════════ */

/* type: light body, one bold weight */
body { font-weight: 300; }
b, strong, h1, h2, h3, h4 { font-weight: var(--w-bold); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-bg); }

/* icons */
.ic { width: 24px; height: 24px; flex: none; }
.ic .acc { stroke: var(--accent); }

/* a square icon button, 44px */
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  position: relative;
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn svg { width: 24px; height: 24px; }
.iconbtn.is-sm { width: 32px; height: 32px; border-radius: 50%; }
.iconbtn.is-sm svg { width: 18px; height: 18px; }
.iconbtn[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); }

/* a count on a button's corner */
.count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: var(--w-bold);
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* ── visuals: rings, sparklines, bars, strips ── */
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 5; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset var(--mo) ease-out; }
.spark-area { fill: var(--accent); opacity: .12; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.spark-end { fill: var(--accent); }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; flex: 1; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.split { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; width: 100%; }
.split-a { background: var(--accent); }
.split-b { background: var(--fg-3); opacity: .45; }
.strip { display: flex; gap: 3px; }
.strip i { display: block; flex: 1; height: 8px; border-radius: 2px; background: var(--surface-2); }
.strip i.is-done { background: var(--accent); opacity: .5; }
.strip i.is-now { background: var(--accent); }
.strip.is-big { width: 100%; }
.strip.is-big i { height: 14px; }
.minis { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; gap: 0 var(--sp-3); text-align: center; }
.minis b { font-size: var(--text-lg); font-weight: 300; line-height: 1; }
.minis small { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.lanes-mini { display: flex; flex-direction: column; gap: 3px; width: 44px; height: 30px; border-radius: 4px; overflow: hidden; }
.lanes-mini i { display: block; background: var(--fg-3); opacity: .35; }
.lanes-mini i:first-child { background: var(--accent); opacity: 1; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 40px; height: 40px; }
.thumbs i, .gthumb { display: block; border-radius: 4px; background: var(--surface-2); }
.t1 { background: var(--d1) !important; } .t2 { background: var(--d2) !important; } .t3 { background: var(--d3) !important; } .t4 { background: var(--d4) !important; }
.calpage { display: flex; flex-direction: column; align-items: center; width: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.calpage small { display: block; width: 100%; text-align: center; font-size: 9px; font-weight: var(--w-bold); letter-spacing: .06em; background: var(--accent); color: var(--accent-fg); padding: 2px 0; }
.calpage b { font-size: var(--text-lg); font-weight: var(--w-bold); line-height: 1.2; }
.mono { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: var(--w-bold); background: var(--surface-2); color: var(--fg-2); flex: none; }
.mono.is-off { opacity: .4; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); }
.dot.is-ok { background: var(--ok); } .dot.is-bad { background: var(--bad); }

/* ── pills: direct/assisted, P0..3, status ── */
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: var(--w-bold); background: var(--surface-2); color: var(--fg-2); text-decoration: none; white-space: nowrap; }
.pill.is-direct { background: var(--ok-bg); color: var(--ok); }
.pill.is-assisted { background: var(--warn-bg); color: var(--warn); }
.pill.is-draft { background: var(--warn-bg); color: var(--warn); font-weight: 300; }
.pill.is-dim { opacity: .7; }
.pill.is-p0 { background: var(--bad-bg); color: var(--bad); }
.pill.is-p1 { background: var(--warn-bg); color: var(--warn); }
.pill.is-p2, .pill.is-p3 { background: var(--surface-2); color: var(--fg-2); }
.pill.is-building, .pill.is-active { background: var(--accent-bg); color: var(--accent); }
.pill.is-done { background: var(--ok-bg); color: var(--ok); }
.pill.is-blocked { background: var(--bad-bg); color: var(--bad); }
.pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.pill.is-warn { background: var(--warn-bg); color: var(--warn); }
.pill.is-bad { background: var(--bad-bg); color: var(--bad); }
.hint { font-size: var(--text-sm); color: var(--fg-2); }

/* ── generic blocks ── */
.hero { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.hero-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hero-txt b { font-size: var(--text-lg); font-weight: var(--w-bold); }
.hero-txt span { color: var(--fg-2); font-size: var(--text-sm); }
.hero.is-stack { flex-direction: column; align-items: stretch; gap: var(--sp-2); text-align: center; }
.hero .big { font-size: var(--text-xl); font-weight: 300; line-height: 1; }
.hero.is-strip { flex-direction: column; align-items: stretch; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--sp-2); }
.fig { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.fig b { font-size: var(--text-lg); font-weight: var(--w-bold); line-height: 1.1; }
.fig small { font-size: var(--text-xs); color: var(--fg-3); }
.fig.is-wide { grid-column: 1 / -1; align-items: stretch; }
.fig-row { display: flex; justify-content: center; gap: var(--sp-2); align-items: baseline; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--fg); font-size: var(--text-sm); border: 1px solid var(--line); cursor: pointer; text-transform: none; }
.chip .ic { width: 18px; height: 18px; }
.chip b { font-weight: var(--w-bold); }
.chip.is-dim { color: var(--fg-3); }
.chip:hover { border-color: var(--fg-3); color: var(--fg); }
.chip[aria-pressed="true"], .chip.selected { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: none; }

/* buttons: the D variants (is-*) beside the older btn-* names, same look */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: var(--w-bold); font-size: var(--text-sm); cursor: pointer; transition: background var(--mo), border-color var(--mo); }
.btn .ic, .btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: none; }
.btn.is-primary, .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; box-shadow: none; }
.btn.is-primary:hover, .btn-primary:hover { background: var(--accent); filter: brightness(1.06); box-shadow: none; }
.btn.is-primary .acc, .btn-primary .acc { stroke: var(--accent-fg); }
.btn.is-quiet { border-color: transparent; color: var(--fg-2); background: transparent; }
.btn.is-quiet:hover { background: var(--surface-2); }
.btn.is-small, .btn-sm, .btn-small { min-height: 32px; padding: 0 10px; font-size: var(--text-sm); }
.btn.is-block { width: 100%; }
.btn.is-big { min-height: 64px; flex: 1; font-size: var(--text-md); }
.btn.is-danger, .btn-danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.btn.is-danger:hover, .btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--fg-3); background: var(--surface-2); }
.btn-success { background: var(--ok); color: var(--accent-fg); border-color: transparent; }
.btn-accent { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.actions.is-split { display: grid; grid-template-columns: 1fr 1fr; }
.actions.is-three { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }

/* switch (a real button with role=switch; sits beside an opener, never inside one) */
.switch { position: relative; width: 44px; height: 26px; padding: 0; border: none; border-radius: 13px; background: var(--fg-3); flex: none; cursor: pointer; transition: background var(--mo); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--mo); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(18px); }
.switch.is-sm { width: 36px; height: 22px; }
.switch.is-sm .knob { width: 16px; height: 16px; }
.switch.is-sm[aria-checked="true"] .knob { transform: translateX(14px); }
.switch:disabled { opacity: .5; cursor: default; }

/* segmented control */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); gap: 2px; }
.seg button { min-height: 32px; padding: 0 12px; border: none; border-radius: calc(var(--r-md) - 3px); font-size: var(--text-sm); color: var(--fg-2); background: transparent; cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: var(--w-bold); box-shadow: var(--shadow-sm); }

/* key · value rows */
.kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.kv > span:first-child { color: var(--fg-2); min-width: 0; }
.kv > span:last-child { text-align: right; }
.kv:last-child { border-bottom: 0; }
.kv.is-stack { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) 0; }
.kv.is-stack > span:last-child { text-align: left; color: var(--fg); }
.kv.is-stack > span:first-child { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.kv.is-bar { border: 0; }
.kv input[type="number"] { width: 72px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.field > span { color: var(--fg-2); }
.input, .field input, .field select, .field textarea, .kv input, .kv select { min-height: 40px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg); width: 100%; font: inherit; }
.input:focus, .field input:focus, .field textarea:focus, .kv input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.big-input { min-height: 112px; font-size: var(--text-md); padding: var(--sp-3); border-radius: var(--r-lg); }
.link-like { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: var(--text-sm); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; }
.link-like .ic { width: 18px; height: 18px; }
.link-like b { font-weight: var(--w-bold); color: var(--fg); }
.h2 { font-size: var(--text-md); font-weight: var(--w-bold); color: var(--fg-2); margin-top: var(--sp-2); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: var(--text-sm); }

/* cards and rows */
.dcard, .scard { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.dcard header, .scard header { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.dname { color: var(--fg-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard time { color: var(--fg-3); font-size: var(--text-xs); }
.scard h3 { font-size: var(--text-md); font-weight: var(--w-bold); }
.lrow, .xrow, .wrow { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.lrow > .disc, .xrow > .disc, .wrow > .disc, .lrow > details, .xrow > details, .wrow > details, .dcard > .disc, .scard > .disc { grid-column: 1 / -1; }
.lrow-main { display: flex; flex-direction: column; min-width: 0; }
.lrow-main h3, .lrow-main .h3 { font-size: var(--text-md); font-weight: var(--w-bold); line-height: 1.25; }
.lrow-meta { font-size: var(--text-xs); color: var(--fg-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--fg-3); background: transparent; color: transparent; cursor: pointer; }
.tick .acc { stroke: currentColor; }
.tick[aria-pressed="true"], .tick[aria-checked="true"] { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.tick.is-big { width: 56px; height: 56px; }
.lane { display: flex; flex-direction: column; gap: var(--sp-2); }
.lane h2 { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; padding-top: var(--sp-2); }
.lane h2 small { font-weight: 300; color: var(--fg-3); }
.lane-bar { display: flex; gap: 3px; height: 28px; border-radius: var(--r-md); overflow: hidden; }
.lane-bar i { display: grid; place-items: center; font-style: normal; font-size: var(--text-xs); font-weight: var(--w-bold); background: var(--surface-2); color: var(--fg-2); }
.lane-bar i:first-child { background: var(--accent); color: var(--accent-fg); }
.score { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); font-weight: var(--w-bold); font-size: var(--text-sm); }
[data-lane="now"] .score { background: var(--accent); color: var(--accent-fg); }
.wo-id { font-size: var(--text-xs); font-weight: var(--w-bold); color: var(--fg-3); letter-spacing: .02em; margin-right: 4px; white-space: nowrap; }
.steps { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); padding-block: var(--sp-2); }
code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* settings groups and rows */
.group { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.srow-l { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; font-weight: var(--w-bold); font-size: var(--text-md); }
.srow-l .ic, .srow-l svg { color: var(--fg-2); width: 24px; height: 24px; flex: none; }
.srow-r { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: var(--text-sm); }
.plats-mini { display: flex; gap: 2px; }
.plats-mini .mono { width: 22px; height: 22px; font-size: 9px; }

/* ── inline disclosure (reading detail expands in place) ── */
details.disc > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--fg-2); }
details.disc > summary::-webkit-details-marker { display: none; }
.disc-chev { margin-left: auto; color: var(--fg-3); transition: transform var(--mo) ease-out; display: inline-flex; }
.disc-chev svg { width: 24px; height: 24px; }
details[open] > summary .disc-chev, .disc-wrap:has(details[open]) .disc-aside .disc-chev { transform: rotate(180deg); }
details[open] > summary { color: var(--fg); }
.disc-b { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1); border-top: 1px dashed var(--line); }
.disc-b > p { font-size: var(--text-sm); }
.parts { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; }
.parts details.disc { padding-left: var(--sp-2); }
.part-h { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-bold); color: var(--fg); }
.part-h b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 12px; }
/* a group's rows: the summary is the row, an aside sits beside it (a switch or a status) outside the opener */
.group details.disc > summary { padding: 0 var(--sp-4); min-height: 56px; }
.group .disc-b { margin: 0 var(--sp-4); padding-bottom: var(--sp-3); }
.disc-wrap, .disc.has-aside { position: relative; }
.disc-aside { position: absolute; right: var(--sp-4); top: 0; height: 56px; display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-2); font-size: var(--text-sm); z-index: 1; }
.disc-aside .disc-chev { color: var(--fg-3); }
.disc-wrap > details > summary, .disc.has-aside > .disc-s { padding-right: 120px !important; }
.group .disc-wrap { border-bottom: 1px solid var(--line); }
.group .disc-wrap:last-child { border-bottom: 0; }
/* header, chip and platform-row details are popovers (Option A) */
/* A header popover anchors to the HEADER, not its own button: the button can
   sit third from the right (Work orders: filters · refresh · node settings),
   and a panel pinned to it ran off a phone's left edge. Right-aligned to the
   header and never wider than it, the panel stays on screen at any width. */
.shead { position: relative; }
.shead details.disc { position: static; }
.shead details.disc > summary { min-height: 44px; }
.shead details.disc .disc-chev { display: none; }
.shead details.disc .disc-b { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; width: min(340px, 100%); box-sizing: border-box; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.chips details.disc > summary { min-height: 36px; }
.chips details.disc .disc-chev { display: none; }
.chips details.disc { position: relative; }
.chips details.disc .disc-b { position: absolute; left: 0; top: 40px; z-index: 6; width: 260px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.plat-row details.disc > summary { min-height: 44px; }
.plat-row details.disc .disc-chev { display: none; }
.plat-row details.disc { position: relative; }
.plat-row details.disc .disc-b { position: absolute; right: 0; top: 48px; z-index: 6; width: 280px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ── states: empty, error, loading ── */
.empty, .error { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); text-align: center; }
.empty > h2, .error > h2 { font-size: var(--text-lg); font-weight: var(--w-bold); color: var(--fg); }
.empty > p, .error > p { color: var(--fg-2); font-size: var(--text-sm); max-width: 36ch; }
.empty-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.empty-ic .ic, .empty-ic svg { width: 36px; height: 36px; }
.empty-ic .acc { stroke: currentColor; }
.empty-ic.is-bad { background: var(--bad-bg); color: var(--bad); }
.empty-ic.is-dim { background: var(--surface-2); color: var(--fg-2); }
.skel { display: flex; flex-direction: column; gap: var(--sp-3); }
.skel i { display: block; border-radius: var(--r-sm); background: var(--surface-2); animation: shimmer 1.4s infinite; }
.skel-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.skel-figs i { height: 72px; border-radius: var(--r-md); }
.skel-figs .w { grid-column: 1 / -1; }
.skel-card { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); }
.skel-card .r { width: 44px; height: 44px; border-radius: 50%; grid-row: 1 / 3; }
.skel-card .l { height: 12px; }
.skel-card .short { width: 50%; }
@keyframes shimmer { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.offline-strip { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--warn-bg); color: var(--warn); font-size: var(--text-xs); border-radius: var(--r-sm); }

/* ── motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   OPTION D · PER-SCREEN RESTYLE REGIONS — each screen's D rules live
   between its own markers below (one owner per region while the phase-1
   restyle runs in parallel; later rules win over the older sections above).
   ═══════════════════════════════════════════════════════════════════ */

/* ── D · Create (ui.js renderComposer, renderComposerDrafts) ── */
/* The Create screen is the mockup's `create` screen: the header carries the
   Post/Reply segment, then one column (`.composer`) — the big input, the
   platform rings, the attach row with the Link disclosure, Options, the one
   primary button — and the drafts (`.drafts` of `.dcard`s) under it. Every
   value is a token; the older `.cmp-*` rules that styled this screen were
   removed above, except the two the Inbox shares (.cmp-reconnect, .cmp-warn)
   and the review thumbs the Approvals cards use (.cmp-draft-thumb). */
.composer { display: flex; flex-direction: column; gap: var(--sp-3); }
.composer .big-input { resize: vertical; line-height: 1.45; }
.composer .big-input::placeholder, .composer .field input::placeholder, .composer .field textarea::placeholder { color: var(--fg-3); }

/* the platform rings: 40×44 button, 36px initials, a dashed ring on an assisted platform */
.plat-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plat { position: relative; display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; }
.plat .mono { width: 36px; height: 36px; font-size: 12px; }
.plat:hover .mono { background: var(--line); }
.plat[aria-pressed="true"] .mono { background: var(--accent); color: var(--accent-fg); }
.plat-ast { position: absolute; left: 2px; top: 4px; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed var(--fg-3); pointer-events: none; }
.plat[aria-pressed="true"] .plat-ast { border-color: var(--accent-fg); opacity: .85; }
.plat-row .cmp-plat-info { margin-left: auto; }
.plat-row .cmp-plat-info > summary { padding: 0; }
.plat-row .cmp-plat-info .iconbtn { color: var(--fg-3); }
.plat-row .cmp-plat-info[open] .iconbtn { background: var(--surface-2); color: var(--fg); }
.plat-row .cmp-plat-info .disc-b { width: min(300px, calc(100vw - 32px)); border-top: 1px solid var(--line); }
.plat-row .cmp-plat-info .disc-b .btn { align-self: flex-start; }

/* the attach row: the three sources (or the attached preview) and the Link
   disclosure, which opens inline across the full row */
.attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.attach-row .chip { white-space: nowrap; }
.attach-row .chip svg { width: 18px; height: 18px; flex: none; }
.attach-row .chip .acc { stroke: var(--accent); }
.attach-row .chip[aria-pressed="true"] .acc { stroke: var(--accent-fg); }
.attach-row details.disc { order: 1; min-width: 0; }
.attach-row details.disc[open] { flex: 1 0 100%; }
.attach-row details.disc > summary { min-height: 36px; gap: 0; }
.attach-row details.disc .disc-chev { display: none; }
.attach-row details.disc > summary .chip { pointer-events: none; }
.attach-row details.disc[open] > summary .chip, .attach-row .chip.is-set { border-color: var(--accent); color: var(--accent); }
.attach-row details.disc[open] > summary .chip.is-set { background: var(--accent-bg); }
.attach-row .disc-b { border-top: 0; padding-top: var(--sp-2); }
.cmp-attached { display: flex; align-items: center; gap: var(--sp-3); flex: 1 0 100%; padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.cmp-attached img { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; display: block; flex: none; }
.cmp-attached-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--text-sm); }
.cmp-attached-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-attached .btn { flex: none; }

/* a card's own head row (Suggested links · Quote card · From your library · Review & post) */
.cmp-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cmp-row-head .h2 { margin-top: 0; }

/* "Find a link" suggestions (Visuals v3) */
.cmp-linkfind { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp-linkfind-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp-linkfind-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.cmp-linkfind-row:hover { border-color: var(--fg-3); }
.cmp-linkfind-title { font-weight: var(--w-bold); font-size: var(--text-sm); }
.cmp-linkfind-meta { font-size: var(--text-xs); color: var(--fg-2); }

/* the quote-card panel and the library picker are cards in the column */
.cmp-gen-panel .kv, .cmp-options .kv { border-bottom: 0; }
.cmp-gen-preview { display: block; width: 100%; max-width: 280px; margin: 0 auto; border-radius: var(--r-md); box-shadow: var(--shadow); }
.cmp-picker .empty { padding: var(--sp-4) 0; }
.cmp-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.cmp-pick { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; cursor: pointer; text-align: left; }
.cmp-pick:hover { border-color: var(--fg-3); }
.cmp-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cmp-pick-title { font-size: var(--text-xs); color: var(--fg-2); padding: 0 6px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pick-flag { position: absolute; top: 6px; right: 6px; }

/* Options: the one-tap switch is a native checkbox drawn as the set's switch,
   because app.js reads its `checked` on the click (composer-toggle-onetap) */
.cmp-options .kv { cursor: pointer; }
.kv input.cmp-switch, .cmp-switch { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; padding: 0; border: none; border-radius: 13px; background: var(--fg-3); flex: none; min-height: 0; box-shadow: none; cursor: pointer; transition: background var(--mo); }
.kv input.cmp-switch:focus { border: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.cmp-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform var(--mo); }
.cmp-switch:checked { background: var(--accent); }
.cmp-switch:checked::after { transform: translateX(18px); }

/* the reconnect strip (shared with the Queue) in the column */
.composer .cmp-reconnect { margin: 0; font-size: var(--text-sm); border-radius: var(--r-md); gap: 4px 6px; }
.composer .cmp-reconnect svg { width: 18px; height: 18px; flex: none; }

/* drafts: one .dcard per platform, the pill is how it goes out, the text is
   clamped and the edit box sits behind the disclosure */
.drafts { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.drafts .dcard .clamp { color: var(--fg); -webkit-line-clamp: 3; }
.drafts .dcard header .pill { margin-left: auto; }
.drafts .dcard .field textarea { line-height: 1.5; resize: vertical; }
.drafts .dcard .disc-b { border-top: 1px dashed var(--line); }
.cmp-rides { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--fg-2); }
.cmp-rides img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; display: block; flex: none; }
.cmp-out { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--text-sm); }
.cmp-out svg { width: 18px; height: 18px; flex: none; }
.cmp-out .acc { stroke: currentColor; }
.cmp-out.ok { color: var(--ok); }
.cmp-out.copy { color: var(--warn); justify-content: space-between; }
.cmp-out.err { color: var(--bad); }
.cmp-out a { color: inherit; text-decoration: underline; }
.cmp-alldone { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok); font-weight: var(--w-bold); font-size: var(--text-sm); }
.cmp-alldone svg { width: 18px; height: 18px; flex: none; }
.cmp-alldone .acc { stroke: currentColor; }
.cmp-sched .disc-b .btn { align-self: flex-start; }
.cmp-reply-text { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.55; }

/* a wide window: the column reads better under 720px, left to the header's edge */
@media (min-width: 900px) {
  #compose-content .composer, #compose-content .drafts { max-width: 720px; }
  .plat-row .cmp-plat-info { margin-left: 0; }
}

/* ── D · Inbox: Approvals, SAFO, Growth ── */
/* Owner: the Inbox pair (ui.js renderApprovals… renderPublishFlow,
   renderQueue… renderQueueEdit, renderSafoDash) and the Growth sheet
   (renderGrowth, renderGrowthCard — a screen since phase 2). Shared classes ADDED here, not in
   the component set: .avatar (the department disc), .inbox-stack (a
   vertical stack of blocks), .inbox-seg (a full-width .seg), .full (a
   pre-wrapped text block in a card), .sheet-head, and the .seg .count and
   .scard.card-focused variants. */

/* a vertical stack of blocks */
.inbox-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.inbox-stack > p { margin: 0; }

/* the static Inbox switch sits above the header (index.html); tighten it */
.screen > .inbox-switch, body.nav-visible .screen > .inbox-switch { margin-bottom: var(--sp-3); }
@media (min-width: 1024px) {
  #approvals-content, #queue-content { max-width: 760px; }
}

/* second-level segments: Posts · Engagement, Likes · Replies · Strategic */
.inbox-seg { display: flex; width: 100%; margin-bottom: var(--sp-3); }
.inbox-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.seg .count { position: static; background: var(--surface-2); color: var(--fg-2); }
.seg button[aria-selected="true"] .count, .seg button[aria-pressed="true"] .count { background: var(--accent); color: var(--accent-fg); }
.engagement-toolbar { margin-bottom: var(--sp-1); }

/* the card stack and its lanes */
.approval-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.lane + .lane { margin-top: var(--sp-3); }
.scard header { flex-wrap: wrap; }
.scard header .mono, .scard header .pill, .scard header .avatar { flex: none; }
.scard header time { margin-left: auto; white-space: nowrap; }
.scard header .avatar { width: 32px; height: 32px; font-size: 13px; }
.scard h3 { overflow-wrap: anywhere; }
.scard .full { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.55; color: var(--fg); max-height: 320px; overflow-y: auto; }
.scard .clamp { margin: 0; overflow-wrap: anywhere; }
.scard .hint { margin: 0; }
.scard .actions { gap: var(--sp-1); }
.scard .actions.is-three { grid-template-columns: 1.7fr 1fr 1fr; }
.scard .actions .btn { min-width: 0; padding-inline: 8px; gap: 4px; white-space: normal; line-height: 1.2; text-align: center; }
.scard .actions .btn .ic, .scard .actions .btn svg { width: 16px; height: 16px; }
.fig.is-wide > small { text-align: center; }
.scard .approval-thumb { margin: 0; }
.scard .kv.is-bar { min-height: 44px; padding: 0; }
.scard .alt-selector button { min-width: 36px; }
.scard .field textarea { min-height: 180px; resize: vertical; }
.scard details.disc .kv .approval-thumb { margin-left: auto; }
/* the card a notification tap was about (app.js focusCard): the ring stays
   for the whole flash, the wash fades — same contract as .card-focused */
.scard.card-focused { box-shadow: 0 0 0 2px var(--accent), var(--shadow); animation: scard-focus-flash 2.4s ease-out; }
@keyframes scard-focus-flash {
  0%   { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
  100% { background: var(--surface); }
}

/* department avatars: an initial on a tinted disc, keyed by personas.js id;
   "other" (no scorecard department) is paper */
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-weight: var(--w-bold); flex: none; }
.avatar.is-sm { width: 24px; height: 24px; font-size: 12px; }
.avatar.is-dept { background: var(--dept, var(--surface-2)); color: var(--fg); }
.avatar[data-dept="marketing"], .avatar[data-dept="engineering"] { --dept: var(--d1); }
.avatar[data-dept="sales"], .avatar[data-dept="operations"] { --dept: var(--d2); }
.avatar[data-dept="product"], .avatar[data-dept="finance"] { --dept: var(--d3); }
.avatar[data-dept="security"] { --dept: var(--d4); }

/* SAFO at a glance: the figures, the department chips (each a popover) and
   the push-liveness chip */
.safo-dash { gap: var(--sp-2); }
.safo-dash .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.safo-dash .fig.is-wide .fig-row b { font-size: var(--text-lg); }
.safo-dash .fig.is-wide .fig-row small { margin-right: var(--sp-2); }
.chips details.disc > summary { padding: 0; }
.chips details.disc > summary .chip { pointer-events: none; }
.chips details.disc .disc-b .chips { margin-top: var(--sp-1); }
.chips details.disc .disc-b .pill { height: auto; min-height: 22px; white-space: normal; padding-block: 2px; }
.safo-liveness { margin: 0; }
.safo-push .dot { margin-right: 2px; }

/* empty, error and loading states inside the Inbox */
.empty .actions, .error .actions { justify-content: center; }
.empty details.disc, .error details.disc { width: 100%; max-width: 420px; }
.empty details.disc > summary, .error details.disc > summary { justify-content: center; }
.empty details.disc .disc-chev, .error details.disc .disc-chev { margin-left: 0; }
.empty .disc-b, .error .disc-b { text-align: left; }
.empty .disc-b .actions, .error .disc-b .actions { justify-content: center; }

/* the edit, paste and publish views */
.inbox-stack .field textarea { min-height: 160px; resize: vertical; }
.publish-flow .hero .empty-ic { align-self: center; }
.publish-flow .hero b { font-size: var(--text-lg); }
.publish-flow .post-preview-box { margin: 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.55; max-height: 280px; overflow-y: auto; }
.publish-flow a.btn { text-decoration: none; }

/* the Growth sheet (Home's Growth tile → #bottom-sheet) */
.growth-screen .hero { box-shadow: none; border: 1px solid var(--line); }
.growth-screen .hero span { color: var(--fg-2); font-size: var(--text-sm); }
.growth-screen .fig .mono { margin-bottom: 2px; }
.growth-screen .fig b { font-variant-numeric: tabular-nums; }
.growth-screen .growth-rows { box-shadow: none; border: 1px solid var(--line); }
.growth-screen .growth-rows details.disc > summary { padding: 0 var(--sp-3); min-height: 48px; }
.growth-screen .growth-rows .disc-b { margin: 0 var(--sp-3); padding-bottom: var(--sp-3); }
.growth-screen .growth-row + .growth-row { border-top: 1px solid var(--line); }
.growth-screen .sheet-actions { margin-top: 0; }

/* ── D · Learning, VESPA, Body ── */
/* The three screens no longer wrap their markup in the tracker's `.lrn`
   block (deleted with its IBM Plex fonts; app.js reads no `.lrn-*` class
   on these screens except `.lrn-fig[data-vis-id]`, restyled here). The
   shared pieces first: the row opener a lesson or an exercise expands by,
   the three-part disclosure body, the recall quiz, the note composer. */
.learn, .vespa, .bodyd, .roadmap { display: flex; flex-direction: column; gap: var(--sp-3); }
.lrow-open { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; min-width: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; text-align: left; cursor: pointer; }
.lrow-open .lrow-main { flex: 1; }
.lrow-open[aria-expanded="true"] .disc-chev { transform: rotate(180deg); }
.lrow-meta .pill { height: 18px; padding: 0 6px; font-size: 10px; }
.lrow.is-done .h3, .lrow.is-done h3 { color: var(--fg-3); text-decoration: line-through; }
.lrow.is-today { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--accent); }
.lesson-b { grid-column: 1 / -1; margin-top: var(--sp-1); }
.lesson-b .parts details.disc > summary { min-height: 44px; }
.lesson-b p, .lesson-b .kv, .lesson-b .steps { font-size: var(--text-sm); }
.lesson-b .kv.is-stack > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; }
.lesson-b .kv.is-stack > span:last-child > b { font-weight: var(--w-bold); }
.sheet-code { width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* a served picture: an <img> from a data: URI, never inline markup */
.lrn-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lrn-fig img { display: block; width: 100%; max-width: 480px; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); }
.lrn-fig figcaption { font-size: var(--text-xs); }
.quiz { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: var(--sp-2) 0 0; border: 0; }
.quiz legend { padding: 0 0 6px; font-size: var(--text-sm); font-weight: var(--w-bold); }
.quiz-opt { min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: var(--text-sm); text-align: left; cursor: pointer; }
.quiz-opt:hover { border-color: var(--fg-3); }
.quiz-opt.is-right { border-color: var(--ok); background: var(--ok-bg); }
.quiz-opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.quiz-opt[aria-pressed="true"] { font-weight: var(--w-bold); }
.quiz-why { font-size: var(--text-sm); color: var(--fg-2); }
.opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: var(--text-sm); cursor: pointer; }
.opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.note { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.note h4 { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--fg-2); }
.note-keep .chip { height: auto; min-height: 36px; padding: 6px 12px; align-items: flex-start; white-space: normal; text-align: left; }
.note-keep .chip input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.note-keep .chip:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.note .field textarea { resize: vertical; }
.note .field > span { display: block; }
/* a block-level disclosure on these screens reads as a card */
.learn > details.disc, .vespa > details.disc, .measures > details.disc, .roadmap > details.disc { padding: 0 var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.learn > details.disc .disc-b, .vespa > details.disc .disc-b, .measures > details.disc .disc-b, .roadmap > details.disc .disc-b { padding-bottom: var(--sp-3); }
.learn > details.disc .disc-b p, .vespa > details.disc .disc-b p { font-size: var(--text-sm); }
.lane h2 .pill { align-self: center; text-transform: none; letter-spacing: 0; }
/* ICONS.* carry no `.ic` class, so a chip's or a link's glyph is sized here (scoped to these screens) */
.learn .chip svg, .vespa .chip svg, .bodyd .chip svg, .learn .link-like svg, .vespa .link-like svg, .bodyd .link-like svg { width: 18px; height: 18px; flex: none; }
.learn > details.disc .disc-b h3, .roadmap h3 { font-size: var(--text-md); font-weight: var(--w-bold); }
.lane > .hint { margin-top: calc(-1 * var(--sp-1)); }
.checkin-acts { margin-top: var(--sp-3); }

/* Learning: the hero ring, the week chips, the come-back strip */
.learn .hero .ring { flex: none; }
.learn .hero .btn { flex: none; }
.learn .hero-txt span + span { font-size: var(--text-xs); color: var(--fg-3); }
.shead .seg button { padding: 0 10px; }
.weeks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.weeks::-webkit-scrollbar { display: none; }
.weeks .chip { flex: none; }
.weeks .chip b { font-weight: 300; color: var(--fg-2); }
.weeks .chip[aria-pressed="true"] b { color: inherit; }
.comeback { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.comeback::-webkit-scrollbar { display: none; }
.comeback .chip { flex: none; max-width: 280px; }
.comeback .chip .chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lessons.is-rest h2 { color: var(--fg-3); }
.lessons .lrow { align-items: start; }
.lessons .lrow > .tick { margin-top: 0; }

/* Learning: the roadmap view (no progress figures are served, so no bars) */
.rm-star { font-size: var(--text-lg); font-weight: var(--w-bold); line-height: 1.3; }
.rm-table { overflow-x: auto; }
.rm-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-xs); }
.rm-table th, .rm-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rm-table th { color: var(--fg-3); font-weight: var(--w-bold); }
.rm-table tr.gate td { background: var(--accent-bg); }
.rm-risks { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; font-size: var(--text-sm); }

/* VESPA (the mockup's Pace): the big number, the pace line, the two taps, the impact card */
.vespa .hero.is-stack { align-items: center; }
.pace-line { width: 100%; max-width: 360px; margin: 0 auto; }
.pace-line line { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.pace-line .pace-done { stroke: var(--accent); }
.pace-now { fill: var(--accent); }
.pace-gate { fill: var(--fg-2); }
.coach { display: flex; align-items: center; gap: 8px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--accent-bg); color: var(--fg); font-size: var(--text-sm); text-align: left; }
.coach svg { width: 18px; height: 18px; flex: none; }
.pace-acts .btn { flex-direction: column; gap: 4px; }
.pace-acts .btn svg { width: 22px; height: 22px; }
.pace-acts .btn:disabled { opacity: .5; cursor: default; }
.impact { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.impact h3 { font-size: var(--text-md); font-weight: var(--w-bold); }
.impact .quiz legend { color: var(--fg-2); }
.done-line { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ok); font-weight: var(--w-bold); }
.done-line svg { width: 20px; height: 20px; }
.done-line .acc { stroke: currentColor; }
.receipts { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; text-align: center; }
.vespa-note { color: var(--warn); }
.pstrip { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pstrip ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pday { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--fg-3); }
.pbar { position: relative; width: 100%; height: 56px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pbar i { position: absolute; left: 0; right: 0; bottom: 0; display: block; }
.pfill { background: var(--accent); opacity: .85; }
.pfill.is-done { background: var(--ok); }
.pcap { border-top: 2px dashed var(--fg-3); background: transparent; }
.pday.is-floor .pbar { outline: 1px solid var(--fg-3); outline-offset: -1px; }
.pday.is-today .pdl { color: var(--fg); font-weight: var(--w-bold); }
.pdm { font-variant-numeric: tabular-nums; }

/* Body: the twelve-week strip of buttons, today's card, the exercise rows, the set log, the measurements */
.bodyd { --ink: var(--fg); --muted: var(--fg-3); --raised: var(--surface); --line-2: var(--line); } /* js/body.js's line figures draw with the tracker's token names */
.strip.is-weeks { gap: 3px; }
.wkb { display: block; flex: 1; min-width: 0; height: 44px; padding: 15px 0; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; }
.wkb i { display: block; width: 100%; height: 14px; border-radius: 2px; background: var(--surface-2); }
.wkb i.is-done { background: var(--accent); opacity: .5; }
.wkb i.is-part { background: var(--accent); opacity: .25; }
.wkb i.is-now { background: var(--accent); opacity: 1; }
.wkb:disabled { cursor: default; }
.today { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.today-l { display: flex; flex-direction: column; align-items: center; min-width: 44px; line-height: 1; }
.today-l b { font-size: var(--text-xl); font-weight: 300; }
.today-l span { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.today-m { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.today-m h3 { font-size: var(--text-md); font-weight: var(--w-bold); }
.today.is-done .today-l b { color: var(--ok); }
.bdy-start { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); border-bottom: 0; background: var(--surface); box-shadow: var(--shadow); }
.bdy-start > span:last-child { display: flex; align-items: center; gap: var(--sp-2); }
.bdy-start input[type="date"] { min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.bodyd .lrow .h3 .link-like { font-size: var(--text-md); }
.bodyd .lrow .h3 .link-like b { color: var(--fg); }
.xrow { align-items: start; }
.xfig { display: grid; place-items: center; width: 48px; height: 44px; color: var(--fg-2); }
.xfig .bdy-fig { width: 48px; height: auto; }
.exfig-full { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.exfig-full .bdy-fig { display: block; width: 100%; max-width: 380px; height: auto; }
.setlog { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.setlog caption { padding: var(--sp-2) 0; color: var(--fg-2); font-weight: var(--w-bold); text-align: left; }
.setlog th { width: 30%; padding: 4px; color: var(--fg-3); font-size: var(--text-xs); font-weight: 300; text-align: left; }
.setlog td { padding: 4px; }
.setlog td.unit { width: 20%; color: var(--fg-3); font-size: var(--text-xs); }
.setlog input { width: 100%; max-width: 120px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.verdict { display: flex; align-items: center; gap: 8px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg); font-size: var(--text-sm); }
.verdict svg { width: 18px; height: 18px; flex: none; }
.verdict .acc { stroke: currentColor; }
.verdict.add { background: var(--ok-bg); color: var(--ok); }
.verdict.drop, .verdict.hold { background: var(--warn-bg); color: var(--warn); }
.measures .kv > span:last-child { display: flex; align-items: center; gap: 6px; }
.measures .kv input[type="number"] { width: 96px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.measures .unit { color: var(--fg-3); font-size: var(--text-xs); }
.bdy-import { outline: 1px solid var(--accent); }
.bdy-foot { padding-top: var(--sp-2); }

/* ── D · Work orders, Projects ── */
/* Work orders (ui.js renderWorkOrders): the header's sort-and-filters
   popover, the lane bar, today's learning, lanes of .wrow. Projects
   (renderProjects / renderProjectDetail / the forms / staffing): program
   sections of .pcard, the detail's hero, the task tree, the staffing
   columns and the editable role tables. Builds on the component set above;
   `.pill.is-designed` is the one new shared class (the index's designed /
   proposed status, in the warn wash). */
.wo-screen, .project-view, .project-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.wo-screen > .shead, .project-view > .shead, .project-form > .shead { margin-bottom: 0; }
.wo-select { width: auto; max-width: 60%; min-height: 40px; }
.wo-chips { padding: var(--sp-1) 0; }
.shead .disc-b .kv .switch { margin-left: auto; }

/* the lane bar: one tappable segment per lane with orders, sized by count */
.lane-bar.wo-strip { height: 44px; }
.wo-tally { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 4px; border: none; background: var(--surface-2); color: var(--fg-2); font-size: var(--text-xs); cursor: pointer; overflow: hidden; }
.wo-tally b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.wo-tally small { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-tally[data-lane="now"] { background: var(--accent); color: var(--accent-fg); }
.wo-tally[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--fg); color: var(--fg); }
.wo-tally[data-lane="now"][aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-fg); color: var(--accent-fg); }
.wo-tally:focus-visible { outline-offset: -2px; z-index: 1; }

/* lanes */
.lane h2 .lane-gloss { display: none; margin-left: auto; text-transform: none; letter-spacing: 0; text-align: right; font-size: var(--text-xs); }
@media (min-width: 720px) { .lane h2 .lane-gloss { display: inline; } }
.wo-learning .disc-b .kv > span:first-child { color: var(--fg); }
.wo-learning .disc-b .kv s { color: var(--fg-3); }

/* a row: score · id + title · meta, then the opener and the detail across */
.wrow { grid-template-columns: 44px 1fr; align-items: center; }
.wrow > .wo-toggle { grid-column: 1 / -1; }
.wrow .lrow-main h3 { overflow-wrap: anywhere; }
.wrow .lrow-meta { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); }
.wo-sep { font-style: normal; color: var(--fg-3); }
.wo-due.is-hot, .lrow-meta .is-hot, .hero-txt .is-hot { color: var(--bad); }
.wo-due.is-hot { font-weight: var(--w-bold); }
.wo-due.is-dim { color: var(--fg-3); }
.score.is-none { background: transparent; border: 1px dashed var(--line); color: var(--fg-3); }
.wrow.is-static { box-shadow: var(--shadow-sm); }
.wo-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: calc(-1 * var(--sp-1)) 0 calc(-1 * var(--sp-2)); padding: 0; border: none; background: none; text-align: left; color: var(--fg-2); cursor: pointer; }
.wo-toggle .disc-chev { margin-left: auto; }
/* an opened order is a bottom sheet (ui.js renderWorkOrderSheet): what you
   act on first, "More" folded, the actions pinned to the sheet's foot */
.wo-sheet .sheet-head { align-items: flex-start; }
.wo-sheet .sheet-head h2 { flex: 1; min-width: 0; margin: 0; padding-top: 10px; font-size: var(--text-md); text-align: left; overflow-wrap: anywhere; }
.wo-sheet .sheet-head .score { flex: none; }
.wo-sheet .sheet-head .iconbtn { flex: none; margin-right: -10px; }
.wo-sheet > .lrow-meta { margin: 0 0 var(--sp-2); font-size: var(--text-sm); color: var(--fg-2); }
.wo-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.wo-body .wo-sub:first-child { margin-top: 0; }
.wo-more { margin-top: var(--sp-2); }
.wo-sheet-actions { flex-wrap: nowrap; position: sticky; bottom: calc(-1 * (var(--space-lg) + var(--safe-bottom))); z-index: 1; margin: var(--sp-2) calc(-1 * var(--sp-4)) 0; padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--safe-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.wo-sheet-actions .btn { flex: 1; min-width: 0; }
.wo-body .kv.is-stack > span:last-child { overflow-wrap: anywhere; }
.wo-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.wo-body .hint { overflow-wrap: anywhere; }
.wo-body .actions { padding-top: var(--sp-2); }
.wo-sub { margin-top: var(--sp-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.wo-opts { display: flex; flex-direction: column; gap: 6px; }
.wo-opt { display: flex; gap: 8px; align-items: flex-start; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-sm); cursor: pointer; }
.wo-opt input[type="radio"] { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.wo-opt.wo-rec { border-color: var(--ok); }
.wo-opt.wo-picked { background: var(--accent-bg); border-color: var(--accent); }
.wo-ol { flex: none; font-weight: var(--w-bold); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
.wo-ot { color: var(--fg-2); overflow-wrap: anywhere; }
.wo-opt.wo-rec .wo-ot, .wo-opt.wo-picked .wo-ot { color: var(--fg); }
.wo-ot .pill { margin-left: 4px; vertical-align: middle; }
.wo-say { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.wo-say code { flex: 1 1 220px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); }
.wo-copy { display: inline-flex; align-items: center; min-height: 32px; margin-left: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg-2); font: inherit; font-size: var(--text-xs); cursor: pointer; vertical-align: middle; }
.wo-copy:hover { border-color: var(--accent); color: var(--fg); }
.wo-meter { display: flex; height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.wo-meter span { display: block; }
.wo-m-u { background: var(--bad); }
.wo-m-i { background: var(--warn); }
.wo-m-e { background: var(--ok); }
.wo-m-a { background: var(--accent); }
.wo-m-f { background: repeating-linear-gradient(135deg, var(--fg-3) 0 2px, transparent 2px 4px); }
.wo-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.wo-legend i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: var(--text-xs); color: var(--fg-2); }
.wo-legend i s { flex: none; width: 8px; height: 8px; border-radius: 2px; text-decoration: none; }
.wo-legend b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.wo-empty { padding: var(--sp-4) 0; }
.wo-done .kv > span:first-child { color: var(--fg); overflow-wrap: anywhere; }
.wo-colophon .disc-b p { font-size: var(--text-sm); color: var(--fg-2); }
.empty .actions, .error .actions { justify-content: center; }
.empty details.disc, .error details.disc { width: 100%; text-align: left; }

/* Projects: program sections and cards */
.program { display: flex; flex-direction: column; gap: var(--sp-2); }
.program h2 { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; padding-top: var(--sp-2); }
.program h2 small { font-weight: 300; color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.pcard { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); border: none; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-align: left; cursor: pointer; }
.pcard:hover { background: var(--surface-2); }
.pcard .lrow-main { flex: 1; }
.pcard > svg { width: 24px; height: 24px; flex: none; color: var(--fg-3); }
.pcard.is-server .h3 { font-style: italic; }
.pcard-ring { position: relative; display: grid; place-items: center; flex: none; }
.pcard-ring b { position: absolute; font-size: 10px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.pcard-ring.is-empty .ring-fill { stroke: transparent; }
.pcard-ring.is-empty b { color: var(--fg-3); }
.hero .pcard-ring b { font-size: 12px; }
.pill.is-designed { background: var(--warn-bg); color: var(--warn); }
.kv.is-bar > span:first-child { color: var(--fg); }

/* the task tree */
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--text-sm); }
.task-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-t .task-title { overflow-wrap: anywhere; }
.task-parent > .task-t .task-title { font-weight: var(--w-bold); }
.task.is-done > .task-t .task-title { color: var(--fg-3); text-decoration: line-through; }
.tasks.is-sub { flex-basis: 100%; padding-left: var(--sp-5); border-left: 2px solid var(--line); margin-left: var(--sp-3); }
.task.collapsed > .tasks.is-sub { display: none; }
.tdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--fg-3); flex: none; }
.is-done > .tdot, .is-done > .tdot-btn .tdot { background: var(--ok); border-color: var(--ok); }
.is-in_progress > .tdot, .is-in_progress > .tdot-btn .tdot { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.is-blocked > .tdot, .is-blocked > .tdot-btn .tdot { border-color: var(--bad); background: var(--bad-bg); }
.tdot-btn, .task-fold { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px 0 -6px -12px; padding: 0; border: none; background: none; color: var(--fg-3); cursor: pointer; border-radius: 50%; }
.tdot-btn:hover, .task-fold:hover { background: var(--surface-2); }
.task-fold { font-size: 14px; }
.task .iconbtn.is-sm { color: var(--fg-3); }
.task .lrow-meta .pill { height: 18px; }
.pill.task-wo-link { border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: var(--w-bold); }
.pill.task-wo-link:hover { filter: brightness(.95); }
.task > .pill { align-self: center; }
.add-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; }
.add-row > input[type="text"] { grid-column: 1 / -1; }
.add-row > input[type="date"] { min-width: 0; }
.project-wo .kv.is-done > span:first-child { color: var(--fg-3); }
.project-wo .kv > span:first-child { color: var(--fg); overflow-wrap: anywhere; }
.project-view .chips .chip[aria-pressed="true"] { cursor: default; }
.project-form .field textarea { resize: vertical; }
.project-form .chip-group .chip.selected { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* staffing: the two columns, then the editable role tables */
.h2 .pill { margin-left: 8px; vertical-align: middle; }
.staff { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 720px) { .staff { grid-template-columns: 1fr 1fr; } }
.staff-col { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.staff-col h3 { font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--fg-2); }
.staff-col .fig { background: transparent; border: 0; padding: var(--sp-2) 0; align-items: flex-start; }
.staff-col.is-ai .fig b { color: var(--accent); }
.dcard.staff { display: flex; }
.setlog { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.setlog caption { text-align: left; font-weight: var(--w-bold); padding: var(--sp-2) 0; color: var(--fg-2); }
.setlog th { text-align: left; font-weight: 300; color: var(--fg-3); font-size: var(--text-xs); padding: 4px; white-space: nowrap; }
.setlog td { padding: 4px; vertical-align: top; }
.setlog .staff-in, .setlog input { width: 4.6em; min-height: 36px; padding: 4px 6px; }
.setlog .staff-in[data-staff-edit="rate"], .staff-rates .staff-in { width: 6.2em; }
.staff-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.staff-table td { white-space: nowrap; }
.staff-table .staff-role { white-space: normal; min-width: 9em; }
.staff-role span { display: block; }
.staff-role .staff-sub { font-size: var(--text-xs); color: var(--fg-3); }
.staff-table .staff-num { text-align: right; }
.staff-table tfoot td { border-top: 1px solid var(--line); padding-top: 6px; font-weight: var(--w-bold); white-space: normal; }
.staff-row.staff-who-ai .staff-role span:first-child { color: var(--fg-2); font-style: italic; }
.staff-rates td:first-child { white-space: normal; min-width: 8em; }
.staff-list { margin: 4px 0 0 18px; padding: 0; font-size: var(--text-sm); color: var(--fg); }
.staff-list li { margin: 2px 0; }
.staff-questions { display: flex; flex-direction: column; gap: var(--sp-2); }
.staff-more .disc-b { gap: var(--sp-3); }

/* ── D · Settings, Calendar, Library, Landing, Onboarding, overlays ── */


/* Settings (ui.js renderSettings): three .group cards of rows. Each row is a
   .disc-wrap — the opener's summary carries icon · title · a status line
   readable closed (.set-group-status, patched in place by
   patchSettingsStatus); the aside beside it carries the row's live control
   or glyph (a switch, the platform initials, the avatar, the version) and
   the chevron, outside the opener so a switch is never inside a summary. */
#settings-content { display: flex; flex-direction: column; gap: var(--sp-2); }
#settings-content > .h2 { margin-top: var(--sp-3); }
.set-row .set-group-icon { display: inline-flex; width: 24px; height: 24px; color: var(--fg-2); flex: none; }
.set-row .set-group-icon svg { width: 24px; height: 24px; }
.set-group-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.set-group-title { font-size: var(--text-md); font-weight: var(--w-bold); line-height: 1.2; color: var(--fg); }
.set-group-status { font-size: 13px; font-weight: 300; line-height: 1.3; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row > details > summary { padding-top: 6px; padding-bottom: 6px; }
.set-group-body { gap: 0; }
/* the sections inside a row: divided, not cards in a card */
.set-sec { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px dashed var(--line); }
.set-sec:first-child { border-top: 0; padding-top: var(--sp-2); }
.set-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--text-md); font-weight: var(--w-bold); }
.set-sec h3 small { font-weight: 300; color: var(--fg-2); font-size: var(--text-sm); }
.set-sec h3 .pill { font-weight: 300; }
.set-sec .field > span small { display: block; color: var(--fg-2); font-size: var(--text-xs); }
.set-sec .actions { padding-top: var(--sp-1); }
.set-sec .kv { font-size: var(--text-md); }
.set-sec .kv .seg button { min-height: 36px; }
.set-danger h3 { color: var(--bad); }
.set-pair { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.set-pair .input-row { display: flex; gap: var(--sp-2); align-items: center; }
.set-pair .input-row .input { flex: 1; min-width: 0; }
#settings-content .pair-code { font-weight: var(--w-bold); }
/* a toggle row: the text is the label, the switch sits at the right */
.kv.is-toggle { gap: var(--sp-3); cursor: pointer; padding: var(--sp-2) 0; }
.kv.is-toggle > span:first-child { flex: 1; color: var(--fg); font-size: var(--text-sm); line-height: 1.45; }
/* a platform connection: badge · name · state pill · button on one line, the honest note under it */
.set-conn { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.set-conn:last-of-type { border-bottom: 0; }
.set-conn .kv.is-bar { min-height: 44px; }
.set-conn-name { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; color: var(--fg) !important; font-weight: var(--w-bold); }
.set-conn-name .pill { font-weight: 300; }
.set-conn .hint { font-size: 13px; }
.set-conn .btn-google { min-height: 36px; padding: 0 10px; }
.mono svg { width: 14px; height: 14px; }
/* a checkbox drawn as the D switch — a real input, so the toggle-* actions
   still read .checked and a tap on the label text still flips it */
input.switch-in, .kv input.switch-in {
  appearance: none; -webkit-appearance: none;
  position: relative; width: 44px; min-width: 44px; height: 26px; min-height: 26px; margin: 0; padding: 0;
  border: 0; border-radius: 13px; background: var(--fg-3); flex: none; cursor: pointer; transition: background var(--mo);
}
input.switch-in::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-fg); transition: transform var(--mo); }
input.switch-in:checked { background: var(--accent); }
input.switch-in:checked::before { transform: translateX(18px); }
input.switch-in:disabled { opacity: .5; cursor: default; }
input.switch-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
/* Google's branded sign-in button keeps its white look; give it the D shape */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; align-self: flex-start; }
/* the summary reserves only what its aside needs (the set's 140px default
   cut the status line short on a phone) */
.set-row > details > summary { padding-right: 92px !important; }
.set-row:has(.disc-aside > .plats-mini) > details > summary { padding-right: 150px !important; }
.set-row:has(.disc-aside > .hint) > details > summary { padding-right: 120px !important; }
.set-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Calendar (ui.js renderCalendar): the month grid of 44px day cells carrying
   dots, a legend, then the tap targets as disclosures of rows. .cal/.cal-h/
   .cal-d/.cal-dots/.c-*/.legend are the mockup's calendar vocabulary, shared
   from here (the component set did not carry them). */
#calendar-content { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-tb { display: flex; align-items: center; justify-content: space-between; }
.cal-month { font-weight: var(--w-bold); font-size: var(--text-md); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { text-align: center; font-size: var(--text-xs); color: var(--fg-2); padding: 4px 0; }
.cal-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; aspect-ratio: 1; max-height: 56px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); font-size: var(--text-sm); color: var(--fg); }
.cal-d.is-out { background: transparent; box-shadow: none; color: var(--fg-3); }
.cal-d.is-today { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: var(--w-bold); }
.cal-dots { display: flex; gap: 3px; height: 6px; }
:where(.cal-dots, .legend) b, .cal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); flex: none; }
.c-post { background: var(--accent); }
.c-lrn { background: var(--n-learning); }
.c-bdy { background: var(--n-health); }
.c-wo { background: var(--n-workorders); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--text-xs); color: var(--fg-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-disc { padding: 0 var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.cal-disc > summary { min-height: 48px; }
.cal-disc .disc-b { gap: 0; padding-bottom: var(--sp-2); }
/* a row of the lists: when · what · a pill; a task row is a button */
.cal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: center; width: 100%; min-height: 44px; padding: var(--sp-2) 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: var(--fg); }
.cal-row:last-child { border-bottom: 0; }
button.cal-row { cursor: pointer; border-radius: var(--r-sm); }
button.cal-row:hover { background: var(--surface-2); }
.cal-row-when { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fg-2); }
.cal-row-when .wo-id { margin: 0; color: var(--fg-2); }
.cal-row-what { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row-what .mono { width: 22px; height: 22px; font-size: 9px; }
.cal-row .pill { grid-column: 2; grid-row: 1 / 3; }
.cal-row.is-done .cal-row-what { text-decoration: line-through; color: var(--fg-2); }
.cal-agenda-empty { padding: var(--sp-2) 0; }
@media (min-width: 900px) {
  .cal { gap: 6px; }
  .cal-d { max-height: 72px; font-size: var(--text-md); }
}

/* Library (ui.js renderLibrary): a grid of square thumbs (the item's own
   image, or a tint with its type icon and title), a Tags disclosure, the
   detail and add views as .scard forms. .grid-thumbs is the mockup's; the
   .gthumb base is in the component set. */
#library-content { display: flex; flex-direction: column; gap: var(--sp-3); }
.shead summary.iconbtn { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--fg-2); }
.shead summary.iconbtn svg { width: 24px; height: 24px; }
.lib-add { gap: 0; }
.lib-add .btn { justify-content: flex-start; width: 100%; font-weight: 300; color: var(--fg); }
.grid-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gthumb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; padding: var(--sp-2); border: 0; border-radius: var(--r-md); overflow: hidden; cursor: pointer; color: var(--fg); font: inherit; }
.gthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gthumb-ic { display: inline-flex; width: 28px; height: 28px; color: var(--fg-2); }
.gthumb-ic svg { width: 28px; height: 28px; }
.gthumb-title { font-size: var(--text-xs); line-height: 1.3; text-align: center; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gthumb-pill { position: absolute; left: 6px; bottom: 6px; }
.gthumb-face { position: absolute; right: 6px; top: 6px; font-size: 12px; padding: 1px 5px; border-radius: 999px; background: var(--surface); }
.gthumb:hover { filter: brightness(.97); }
.lib-disc { padding: 0 var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.lib-disc > summary { min-height: 48px; }
.lib-detail-img { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--r-md); background: var(--surface-2); }
.lib-detail .kv.is-stack > span:last-child { font-size: var(--text-sm); line-height: 1.5; }
.lib-angles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 720px) { .grid-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Overlays: toasts on paper, the loading overlay, the bottom sheet as the
   D sheet (rounded top, drag handle, scrim), and the sheets' own shapes.
   #bottom-sheet/.open and #toast-container/.toast/.show are what ui.js
   toggles; the ids never change. */
#toast-container { gap: var(--sp-2); max-width: 420px; }
.toast {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(-8px);
  transition: opacity var(--mo), transform var(--mo);
}
.toast-info { background: var(--surface); color: var(--fg); border-color: var(--line); }
.toast-success { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.toast-error { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.toast-warning { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
#loading-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); gap: var(--sp-3); }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--surface); border-top-color: var(--accent); border-right-color: var(--accent); }
.loading-message { padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--fg); font-size: var(--text-sm); box-shadow: var(--shadow); }
/* the sheet */
#bottom-sheet { background: transparent; transition: background var(--mo); }
#bottom-sheet.open { background: var(--scrim); }
#bottom-sheet-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--surface);
  color: var(--fg);
  border: 0;
  border-radius: 20px 20px 0 0;
  padding: 0 var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  box-shadow: 0 -10px 40px -20px var(--scrim);
  transition: transform var(--mo) ease-out;
}
#bottom-sheet-content::before { content: ""; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px 0 2px; flex: none; }
#bottom-sheet-content > h3 { font-size: var(--text-md); font-weight: var(--w-bold); text-align: center; padding: var(--sp-1) 0; }
#bottom-sheet-content > p { font-size: var(--text-sm); color: var(--fg-2); }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: var(--sp-1) 0 var(--sp-2); }
.sheet-head h2 { flex: 1; font-size: var(--text-md); font-weight: var(--w-bold); text-align: center; }
.sheet-actions { margin-top: var(--sp-3); }
.sheet-actions .btn { flex: 1; }
#bottom-sheet-content .btn-google.is-block { width: 100%; align-self: stretch; }
@media (min-width: 1024px) {
  #bottom-sheet-content {
    max-width: 480px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding-top: 0;
    box-shadow: var(--shadow);
    transition: transform var(--mo) ease-out, opacity var(--mo) ease-out;
  }
}

/* Landing (ui.js renderLanding): a paper re-skin of the same page — same
   copy, same ids and actions. Cards are .surface on .bg, the accent is
   one colour, no glow and no gradient text. */
.landing { background: var(--bg); color: var(--fg); }
.landing-topbar .btn { min-height: 40px; }
.landing-logo { font-weight: var(--w-bold); font-size: var(--text-md); }
.landing-logo .nav-brand-mark { box-shadow: none; }
.landing-logo em { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
.hero-badge { border-color: var(--line); background: var(--surface); color: var(--fg-2); font-weight: 300; box-shadow: var(--shadow-sm); }
.hero-badge-dot { background: var(--ok); box-shadow: none; animation: none; }
.hero-title { font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: -0.02em; }
.hero-title .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
.hero-sub { color: var(--fg-2); }
.hero-ctas .btn { min-height: 48px; padding: 0 var(--sp-5); font-size: var(--text-md); }
.btn-hero { box-shadow: none; }
.btn-ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--fg-3); background: var(--surface-2); }
.hero-note, .landing-platforms .label, .landing-footer { color: var(--fg-2); }
.platform-pill { border-color: var(--line); background: var(--surface); color: var(--fg-2); font-weight: 300; box-shadow: var(--shadow-sm); }
.landing-kicker { color: var(--accent); letter-spacing: .12em; }
.landing-h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.landing-section-sub { color: var(--fg-2); }
.feature-card, .step-card { background: var(--surface); border: 0; box-shadow: var(--shadow); }
.feature-card:hover { transform: none; box-shadow: var(--shadow); }
.feature-card::before { display: none; }
.feature-icon { background: var(--accent-bg); color: var(--fg); border-radius: var(--r-md); }
.feature-icon .acc { stroke: var(--accent); }
.feature-card h3, .step-card h3 { font-size: var(--text-md); }
.feature-card p, .step-card p { color: var(--fg-2); font-size: var(--text-sm); }
.step-num { background: var(--accent); color: var(--accent-fg); box-shadow: none; font-size: var(--text-md); }
.landing-cta { background: var(--surface); border: 0; box-shadow: var(--shadow); }
.landing-cta p { color: var(--fg-2); }
.landing-footer a { color: var(--fg-2); }

/* Onboarding (ui.js renderOnboardingStep): the same three steps on paper —
   the progress bar is the D .bar, the accordion the D disclosure look, the
   radio cards and info boxes paper cards. Ids, chips (.chip.selected, read
   by app.js) and actions are untouched. */
#screen-onboarding { background: var(--bg); }
.ob-brand { color: var(--fg-2); font-size: var(--text-md); }
.onboarding-progress { height: 6px; border-radius: 3px; background: var(--surface-2); }
.progress-bar { background: var(--accent); transition: width var(--mo) ease-out; }
.onboarding-step-label { color: var(--fg-2); letter-spacing: .06em; }
#onboarding-content h2 { font-size: var(--text-lg); font-weight: var(--w-bold); }
.onboarding-desc { color: var(--fg-2); font-size: var(--text-sm); }
#onboarding-content .form-group label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 300; }
#onboarding-content .input { min-height: 40px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
#onboarding-content .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
#onboarding-content .input-row { display: flex; gap: var(--sp-2); align-items: center; }
#onboarding-content .input-row .input { flex: 1; min-width: 0; }
#onboarding-content .btn-small { min-height: 40px; }
.info-box { background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.6; }
.info-box strong { color: var(--fg); }
.info-box code { background: var(--surface-2); color: var(--fg); }
.ob-accordion { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ob-accordion + .ob-accordion { margin-top: var(--sp-2); }
.ob-summary { min-height: 56px; padding: var(--sp-2) var(--sp-4); font-size: var(--text-md); }
.ob-summary::after { width: 8px; height: 8px; border-color: var(--fg-3); border-width: 1.75px; }
.ob-summary-value { color: var(--fg-2); font-size: var(--text-sm); }
.ob-accordion-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px dashed var(--line); }
.radio-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.radio-card.selected, .radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.radio-label { font-weight: var(--w-bold); }
.radio-desc { color: var(--fg-2); font-size: var(--text-sm); }
.completion-summary { gap: var(--sp-1); }
.summary-item { background: var(--surface); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--sp-2) 0; font-size: var(--text-sm); }
.summary-item:last-child { border-bottom: 0; }
.summary-item .check { color: var(--ok); font-weight: var(--w-bold); }
.summary-item .check.pending { color: var(--fg-3); }
.onboarding-nav .btn { min-height: 44px; }
.onboarding-nav .btn-primary { flex: 1; max-width: 240px; }
.test-result.success { color: var(--ok); }
.test-result.error { color: var(--bad); }
#onboarding-content .connection-status.connected { background: var(--ok-bg); color: var(--ok); }

/* ── D · review fixes (the a11y lens, 2026-10-25) ── */
/* Meta and sub lines carry real text: --fg-2 clears AA; --fg-3 is for decoration. */
.home-date, .dash-attn-sub, .dash-tile-meta, .minis small, .fig small, .scard time, .lrow-meta, .setlog th, .cal-d.is-out, .lane h2 small, .disc-aside .hint { color: var(--fg-2); }
.home-brand { font-size: var(--text-md); letter-spacing: 0; }
body.nav-visible #toast-container { --toast-offset: var(--ribbon-h); }
/* 44px hit areas on the mockup's smaller controls: an invisible pseudo-element
   widens the tap target without changing the drawn size (inputs cannot carry
   one and stay at 40px). */
.switch, .seg button, .chip, .btn.is-small, .btn-sm, .btn-small, .inbox-switch-btn, .tab-btn, .alt-btn, .iconbtn.is-sm, .plat, .ribbon-create { position: relative; }
.switch::after, .seg button::after, .chip::after, .btn.is-small::after, .btn-sm::after, .btn-small::after, .inbox-switch-btn::after, .tab-btn::after, .alt-btn::after, .iconbtn.is-sm::after, .plat::after, .ribbon-create::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
/* Inbox: the header first, then the switch, left-aligned (the mockup's
   order). The switch is static markup in index.html above the content div, so
   the two screens lay out as one column and the header takes the first slot. */
#screen-approvals.active, #screen-queue.active { display: flex; flex-direction: column; padding-left: max(16px, calc(50% - var(--content-max) / 2)); padding-right: max(16px, calc(50% - var(--content-max) / 2)); }
#approvals-content, #queue-content { display: contents; }
#screen-approvals .shead, #screen-queue .shead { order: -2; }
#screen-approvals > .inbox-switch, #screen-queue > .inbox-switch,
body.nav-visible #screen-approvals > .inbox-switch, body.nav-visible #screen-queue > .inbox-switch { order: -1; align-self: flex-start; display: inline-flex; max-width: none; margin: 0 0 var(--sp-4); }
#screen-approvals > .inbox-switch .inbox-switch-btn, #screen-queue > .inbox-switch .inbox-switch-btn { flex: none; white-space: nowrap; }
/* On a phone the wide Inbox tile's minis say what the meta line says; the
   minis win the width. */
@media (max-width: 399px) { .dash-tiles:not(.is-editing) .dash-tile-wide[data-node="inbox"] .dash-tile-meta { display: none; } }

/* ── D · Nodes (phase 2: js/nodes.js, Edit Home, the node sheet) ── */
/* Edit Home: every node drawn, off ones dimmed; the tile is inert and its
   move/on-off controls sit in its corner (beside the button, never inside). */
.dash-tiles.is-editing .dash-tile { outline: 1.5px dashed var(--fg-3); outline-offset: -1px; }
.dash-tiles.is-editing .dash-tile:hover { background: var(--surface); }
.dash-tiles.is-editing .dash-tile.is-off .dash-tile-go { opacity: .45; }
.tile-edit { position: absolute; right: 6px; bottom: 6px; z-index: 2; display: inline-flex; gap: 2px; align-items: center; padding: 2px 4px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm); }
.dash-tile:not(.dash-tile-wide) .tile-edit { top: 6px; bottom: auto; }
.dash-tile-wide .tile-edit { top: 50%; bottom: auto; transform: translateY(-50%); }
.tile-edit .iconbtn.is-sm:disabled { opacity: .35; cursor: default; }
.edit-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-radius: var(--r-lg); background: var(--accent-bg); color: var(--fg); font-size: var(--text-xs); }
.edit-hint .btn { flex: none; }
.home-head .iconbtn[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); }
/* The node sheet */
.node-sheet { display: flex; flex-direction: column; gap: var(--sp-2); }
.node-sheet .sheet-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.node-sheet .sheet-head h2 { flex: 1; min-width: 0; font-size: var(--text-lg); margin: 0; }
.node-sheet .kv .switch, .node-sheet .kv .seg { flex: none; }
.node-sheet .kv.is-stack { align-items: stretch; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid transparent; cursor: pointer; }
.swatch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.swatch[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--surface); }
/* Settings → Nodes */
.nodes-group .node-row { padding: var(--sp-1) var(--sp-4); min-height: 56px; }
.nodes-group .node-row .srow-l { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--w-bold); }
.node-row .node-mark { width: 12px; height: 12px; }
.nodes-group .node-row > .srow-l { color: var(--fg); }
/* Phase 2 review fixes (two lenses, 2026-10-25) */
/* Home fills in order: no dense back-fill, so a move is what Home shows
   (js/nodes.js units() places tiles the same way). */
.dash-tiles { grid-auto-flow: row; }
/* Edit Home: every node a one-unit strip (eight nodes, eight units). */
.dash-tiles.is-editing .dash-tile-wide .dash-tile-viz { display: none; }
.dash-tiles.is-editing .dash-tile.is-off .dash-tile-go { opacity: 1; }
.dash-tiles.is-editing .dash-tile.is-off .dash-tile-icon,
.dash-tiles.is-editing .dash-tile.is-off .dash-tile-title { opacity: .45; }
.dash-tiles.is-editing .dash-tile-wide .dash-tile-meta { display: inline; }
/* 44px hit areas without overlap: a 12px gap between 32px buttons. */
.tile-edit { gap: 12px; padding: 2px 6px; }
.tile-edit .iconbtn.is-sm[aria-disabled="true"] { opacity: .35; cursor: default; }
/* The off switch track clears 3:1 against the surface in light. */
.switch:not([aria-checked="true"]) { background: var(--fg-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dash-tiles.is-editing .dash-tile-go { padding-right: 156px; }

/* ── D · Health (phase 3): Body and Diet, the two halves of one node ── */
.health-seg { margin: 0 0 var(--sp-3); }
.health-seg .seg { display: flex; width: 100%; }
.health-seg .seg button { flex: 1; }
.dietd { display: flex; flex-direction: column; gap: var(--sp-3); }
.diet-day { border: 0; }
.diet-day-l { display: flex; flex-direction: column; align-items: center; flex: 1; }
.diet-day-l small { color: var(--fg-2); font-size: var(--text-xs); }
.diet-day .iconbtn:disabled { opacity: .35; cursor: default; }
.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.ringfig { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-1); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; }
.ringfig-r { position: relative; display: grid; place-items: center; }
.ringfig-r b { position: absolute; font-size: var(--text-sm); font-weight: var(--w-bold); }
.ringfig .ring-fill { stroke: var(--node, var(--accent)); }
.ringfig small { font-size: var(--text-xs); color: var(--fg-2); }
.ringfig-l { font-size: var(--text-xs); color: var(--fg-2); }
.dietd .coach { margin: 0; background: var(--accent-bg); color: var(--fg); font-size: var(--text-sm); }
.meal-k { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); line-height: 1; flex: none; }
.meal-k b { font-size: var(--text-xs); font-weight: var(--w-bold); }
.meal-k small { font-size: 10px; color: var(--fg-2); }
.lrow.is-add .meal-k { background: var(--accent-bg); color: var(--accent); }
.dietd .kv input[type="number"] { width: 96px; }
.dietd .measures .unit, .dietd .kv .unit { color: var(--fg-2); font-size: var(--text-xs); margin-left: 6px; }
.diet-water { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); border: 0; }
.diet-water small { color: var(--fg-2); font-size: var(--text-xs); margin-left: 6px; }
.diet-water-ctl { display: inline-flex; align-items: center; gap: var(--sp-2); }
.diet-water-ctl b { min-width: 2ch; text-align: center; font-size: var(--text-lg); font-weight: 300; }
.diet-water-ctl .iconbtn:disabled { opacity: .35; cursor: default; }
/* Phase 3 review fixes: 44px targets on the Health switch and the Diet inputs. */
.health-seg .seg button { min-height: 44px; }
.dietd .kv input[type="number"] { min-height: 44px; }
.dietd input:disabled, .dietd .btn:disabled { opacity: .5; cursor: default; }

/* ── D · Week (alys docs/OFFICE_BRIEF.md §5.9.10, direction B "Picture") ── */
/* Edit Home with nine strips (D63): the room comes from the strips, 42 px
   rows with 5 px gaps (nine strips 418 px against eight at 424 px). */
/* Ten strips since the Flow node (alys FLOW_STATUS D11): 38 + 4 keeps the
   tenth above the bar at 375×667 (42 + 5 fitted nine). */
.dash-tiles.is-editing { grid-auto-rows: 38px; gap: 4px; }
/* The Home tile: the verdict dot before the meta, the mini bar top right. */
.dash-tile-meta .wk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vd, var(--fg-3)); margin-right: 5px; vertical-align: 1px; }
/* The bar sits top right and the meta takes the tile's full width, so
   "Mixed · 43 live" is never clipped by it (the prototype's tile). */
.dash-tile[data-node="week"]:not(.dash-tile-wide) .dash-tile-viz { grid-row: 1; align-self: start; padding-top: 4px; }
.dash-tile[data-node="week"]:not(.dash-tile-wide) .dash-tile-text { grid-column: 1 / -1; }
.dash-tile-viz .wk-bar.is-mini { width: 64px; }
/* The stepper sits right under the header, as the prototype measured it
   (D59: the header's usual 16 px margin would push the second project row
   under the bar at 375×667). */
#week-content > .shead { margin-bottom: 0; }
/* The document scrolls, not the screen: a .screen's overflow-y:auto would
   make it the stepper's scroll container (insetting `top` by the screen's
   64 px padding and never sticking), so this screen is not one. */
#screen-week { overflow: visible; }
/* The stepper: ◀ label ▶, sticky under the header (the document scrolls,
   so it sticks below the fixed ribbon). */
.wk-step { position: sticky; top: calc(var(--safe-top) + var(--ribbon-h)); z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--sp-1); padding: 0 0 var(--sp-1); background: var(--bg); }
.wk-step .iconbtn { position: relative; }
.wk-step .iconbtn svg { width: 22px; height: 22px; }
.wk-step .iconbtn:disabled { opacity: .35; cursor: default; }
.wk-step-label { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-md); padding: 4px 8px; line-height: 1.2; background: none; border: 0; color: var(--fg); font: inherit; font-family: var(--font); cursor: pointer; }
.wk-step-label:hover { background: var(--surface-2); }
.wk-step-label b { font-size: var(--text-md); font-weight: var(--w-bold); display: inline-flex; align-items: center; gap: 6px; }
.wk-step-label small { color: var(--fg-2); font-size: var(--text-xs); }
.wk-step-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd, var(--fg-3)); }
/* The view: re-rendered in place on a week change, sliding 24 px with the
   direction of travel (none under reduced motion). */
/* touch-action: pan-y keeps vertical scroll and hands sideways moves to the
   swipe handler; without it a touch screen fires pointercancel, never pointerup
   (review H1, 2026-11-02; the prototype had the same flaw). */
#week-content { touch-action: pan-y; }
.wk-view { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-5); transition: transform var(--mo) ease-out, opacity var(--mo); }
.wk-view.is-left { transform: translateX(-24px); opacity: 0; transition: none; }
.wk-view.is-right { transform: translateX(24px); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .wk-view, .wk-view.is-left, .wk-view.is-right { transition: none; transform: none; opacity: 1; } }
.wk-view > h2 { font-size: var(--text-xs); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.wk-view > h2 small { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--fg-3); font-size: var(--text-xs); }
/* The verdict card: .hero stacked. */
.hero.is-week { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 28px; }
.hero-top > span { color: var(--fg-2); font-size: var(--text-xs); }
.hero-num { display: flex; align-items: flex-end; gap: var(--sp-3); }
.hero-num .big { letter-spacing: -.01em; }
.hero-num .sub { color: var(--fg-2); font-size: var(--text-xs); line-height: 1.3; padding-bottom: 3px; }
.hero-num .sub i { font-style: normal; color: var(--fg-3); }
.hero.is-week .paper { font-size: var(--text-sm); line-height: 1.45; margin: var(--sp-1) 0 0; color: var(--fg); }
.hero.is-week .paper.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hero.is-week .is-muted { color: var(--fg-3); font-size: var(--text-sm); margin: 0; }
.hero.is-week .wk-readmore { align-self: flex-start; padding: 0 8px; margin: -4px 0 -6px -8px; color: var(--n-week); }
/* The verdict pill (D70: the verdict colours the pill, the calendar tint and
   the stepper dot, nothing else). */
.pill.is-strong { background: var(--ok-bg); color: var(--ok); }
.pill.is-mixed { background: var(--warn-bg); color: var(--warn); }
.pill.is-weak { background: var(--bad-bg); color: var(--bad); }
.pill.is-lg { height: 28px; padding: 0 12px; font-size: 13px; }
.pill.is-count { background: var(--lane, var(--fg-3)); color: #fff; min-width: 20px; justify-content: center; }
:root[data-theme="dark"] .pill.is-count { color: var(--bg); }
/* The bar: one segment per project in the board's hue order. */
.wk-bar { display: flex; gap: 2px; height: 14px; border-radius: 6px; overflow: hidden; }
.wk-bar i { display: block; height: 100%; background: var(--lane, var(--lane-n)); flex: var(--n) 1 0; min-width: 2px; }
.wk-bar.is-mini { height: 6px; border-radius: 3px; }
.wk-caption { color: var(--fg-3); font-size: var(--text-xs); line-height: 1.4; margin: 0; }
/* A project row (.lrow's shape): dot · name · count · status · chevron,
   a hairline bar scaled to the top lane, chips under it when open. */
.prow { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.prow-head { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto 20px; align-items: center; gap: var(--sp-2); min-height: 28px; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: var(--fg); font: inherit; font-family: var(--font); cursor: pointer; }
.prow.is-private .prow-head { grid-template-columns: 10px minmax(0, 1fr) auto; cursor: default; }
.prow-head .ld { width: 10px; height: 10px; border-radius: 50%; background: var(--lane, var(--lane-n)); }
.prow-head .nm { font-size: var(--text-md); font-weight: var(--w-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-head .st { font-size: var(--text-xs); color: var(--fg-3); }
.prow-head .chev { width: 20px; height: 20px; color: var(--fg-3); transition: transform var(--mo); }
.prow.is-open .prow-head .chev { transform: rotate(180deg); }
.prow.is-private { box-shadow: none; background: transparent; border: 1px dashed var(--line); }
.prow.is-private .nm { color: var(--fg-2); font-weight: 300; }
.prow-bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.prow-bar i { display: block; height: 100%; width: var(--w); background: var(--lane); }
.wk-chips { display: none; flex-wrap: wrap; gap: 6px; }
.prow.is-open .wk-chips { display: flex; }
.wk-chips .chip { min-height: 28px; padding: 0 10px; font-size: var(--text-xs); line-height: 1.2; max-width: 100%; cursor: default; }
.wk-chips .chip:hover { border-color: var(--line); }
.wk-chips .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-chips .chip.is-lane { background: var(--wash, var(--surface-2)); color: var(--lane, var(--fg)); border-color: transparent; font-weight: var(--w-bold); }
.wk-chips .chip.is-hollow { color: var(--fg-3); border-style: dashed; }
.wk-chips .chip.is-more { color: var(--lane, var(--fg-2)); font-weight: var(--w-bold); }
.wk-more { align-self: center; }
/* An order row: WO id · words · frees · open, a bar scaled to the largest. */
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); text-align: left; width: 100%; text-decoration: none; color: inherit; }
.orow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .id { font-weight: var(--w-bold); font-size: var(--text-sm); }
.orow .lb { color: var(--fg-2); font-size: var(--text-sm); }
.orow .fr { color: var(--fg-2); font-size: var(--text-xs); white-space: nowrap; }
.orow .fr b { color: var(--fg); font-size: var(--text-md); font-weight: var(--w-bold); }
.orow .go { width: 20px; height: 20px; color: var(--fg-3); }
.orow.is-private { box-shadow: none; background: transparent; border: 1px dashed var(--line); color: var(--fg-2); }
.orow .obar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; grid-column: 1 / -1; }
.orow .obar i { display: block; height: 100%; width: var(--w); background: var(--n-workorders); }
.orow.is-private .obar i { background: var(--fg-3); }
/* States */
.wk-skel .card { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--sp-2); }
.wk-skel .l { height: 12px; } .wk-skel .short { width: 50%; } .wk-skel .pillx { width: 64px; height: 28px; border-radius: 999px; } .wk-skel .barx { height: 14px; border-radius: 6px; }
.offline-strip { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-2); font-size: var(--text-xs); }
.offline-strip svg { width: 16px; height: 16px; flex: none; }
#week-content .empty .actions { flex-direction: column; width: 100%; max-width: 280px; display: flex; gap: var(--sp-2); }
/* The calendar sheet (D61): one button per week row, tinted by verdict. */
.wk-cal { display: flex; flex-direction: column; gap: var(--sp-2); }
.wk-cal .sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.wk-cal .sheet-head h2 { font-size: var(--text-md); text-align: center; margin: 0; }
.cal-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.cal-nav b { text-align: center; font-size: var(--text-md); font-weight: var(--w-bold); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr) 64px; font-size: 10px; color: var(--fg-3); text-align: center; letter-spacing: .04em; padding: 0 7px; gap: 0 2px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr) 64px; align-items: center; gap: 0 2px; width: 100%; min-height: 44px; padding: 4px 6px; border-radius: var(--r-md); background: var(--vbg, transparent); color: var(--fg); text-align: center; border: 1px solid transparent; font: inherit; font-family: var(--font); cursor: pointer; }
.cal-week.is-current { border-color: var(--fg-3); }
.cal-week.is-none { color: var(--fg-3); }
.cal-week:disabled { opacity: .4; cursor: default; }
.cal-week .d { font-size: var(--text-sm); }
.cal-week .d.is-out { color: var(--fg-3); opacity: .6; }
.cal-week .d.is-today { font-weight: var(--w-bold); text-decoration: underline; text-underline-offset: 3px; }
.cal-week .v { font-size: 11px; font-weight: var(--w-bold); color: var(--vd, var(--fg-3)); text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cal-week .v small { font-weight: 300; color: var(--fg-3); }
.cal-key { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--fg-2); padding-top: var(--sp-2); }
.cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.cal-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--vbg, transparent); border: 1px solid var(--line); }

/* ── D · Flow (alys docs/FLOW_STATUS.md FS5) ── */
/* The live pipeline map (direction B, the swimlane flow): the screen, its
   state sheet and the Home tile's marks. Every rule is scoped to
   #screen-flow, .flow-sheet or .flow-tile, so the map's generic names
   (.mark, .badge, .icon, .figure, .line, .meta) never leak onto another
   screen. The state rules reach the sheet too, through :is(). */

:root {
  --n-flow: #35507A;
}
:root[data-theme="dark"] {
  --n-flow: #9DB4E0;
}

/* ── the view levels and the key ── */
#screen-flow .seg.levels button { padding: 6px 10px; font-size: var(--text-xs); }
#screen-flow .seg.levels button b { font-family: var(--font-mono); font-weight: var(--w-bold); margin-right: 2px; }
#screen-flow .seg.levels button[aria-disabled="true"] { opacity: .5; }
#screen-flow .switchrow { display: flex; align-items: center; justify-content: space-between; padding-right: var(--sp-4); }

/* the program row */
#screen-flow .progs { display: flex; gap: 6px; margin: 0 var(--sp-4) var(--sp-2); overflow-x: auto; scrollbar-width: none; }
#screen-flow .progs::-webkit-scrollbar { display: none; }
#screen-flow .progs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: var(--text-xs); cursor: pointer; }
#screen-flow .progs button[aria-selected="true"] { border-color: var(--accent); color: var(--fg); font-weight: var(--w-bold); background: var(--accent-bg); }
#screen-flow .progs button svg { width: 12px; height: 12px; }

/* the breadcrumb */
#screen-flow .crumb { margin: 0 var(--sp-4) var(--sp-2); font-size: var(--text-xs); color: var(--fg-2); display: flex; gap: 6px; align-items: center; min-height: 16px; }
#screen-flow .crumb b { color: var(--fg); font-weight: var(--w-bold); }
#screen-flow .crumb button { border: none; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
#screen-flow .crumb .act { margin-left: auto; color: var(--fg-2); }
#screen-flow .crumb .act b { font-family: var(--font-mono); }
#screen-flow .crumb .uns { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
#screen-flow .crumb .uns b { color: var(--fg); font-weight: var(--w-bold); font-family: inherit; }

/* the one banner: the device-snapshot line */
#screen-flow .banner { margin: 0 var(--sp-4) var(--sp-2); padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--fg-2); font-size: var(--text-xs); display: flex; align-items: center; gap: 8px; }
#screen-flow .banner i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dotted var(--fg-3); flex: none; }
#screen-flow .banner[hidden] { display: none; }

/* the key: one strip per level, drawn by the map's own functions */
#screen-flow .legend { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-2); z-index: 2; max-height: calc(100% - var(--sp-3)); overflow: auto; padding: 6px 8px 5px; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 9px; color: var(--fg-2); }
#screen-flow .legend[hidden] { display: none; }
#screen-flow .legend .lhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; font-size: 10px; }
#screen-flow .legend .lhead b { color: var(--fg); font-weight: var(--w-bold); }
#screen-flow .legend .lhead button { border: none; background: none; padding: 0 2px; color: var(--fg-2); font: inherit; cursor: pointer; }
#screen-flow .legend .lrow { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
#screen-flow .legend .lrow + .lrow { margin-top: 2px; }
#screen-flow .legend .lk { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#screen-flow .legend .lk svg { width: 20px; height: 14px; display: block; }
#screen-flow .legend .lk.el svg { width: 26px; height: 14px; }
#screen-flow .legend .lh { font-weight: var(--w-bold); color: var(--fg); margin-right: 1px; min-width: 30px; }
#screen-flow .legend .note { width: 100%; font-size: 9px; color: var(--fg-2); line-height: 1.3; }
#screen-flow .legend .note b { color: var(--fg); font-weight: var(--w-bold); }

/* ── the map ── */
/* Sized by js/ui.js drawFlowMap to the room above the bar; the pull and the drag-to-trace own the gesture. */
#screen-flow .mapwrap { position: relative; min-height: 240px; overflow: hidden; touch-action: none; }
#screen-flow .map { display: block; width: 100%; height: 100%; }
#screen-flow .map text { font-family: var(--font); }
#screen-flow .lane { fill: var(--surface-2); opacity: .55; }
#screen-flow .col-label { font-size: 11px; fill: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; }
#screen-flow .hatch-line { stroke: var(--fg-2); stroke-width: 1; opacity: .5; }
#screen-flow .cframe { fill: none; stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 6 4; opacity: .7; }
#screen-flow .cframe-label { font-size: 9px; fill: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; }
/* the two glyphs a chip can carry at its right end: a fix runs from here, it has components */
#screen-flow .glyph-fix { fill: var(--accent); }
#screen-flow .glyph-comp { fill: none; stroke: var(--fg-2); stroke-width: 1; }
#screen-flow .layerbadge { fill: none; stroke: var(--fg-2); stroke-width: 1.25; }

/* level 1: systems and the person */
#screen-flow .sysbox { fill: var(--surface); stroke: var(--line); stroke-width: 1.25; }
#screen-flow .k-ours .sysbox { fill: var(--accent-bg); stroke: var(--accent); }
#screen-flow .k-ext .sysbox { stroke: var(--fg-2); stroke-dasharray: 4 3; }
#screen-flow .k-person .sysbox { fill: var(--surface-2); }
#screen-flow .k-peer .sysbox { fill: var(--surface); stroke: var(--accent); stroke-dasharray: 4 3; }
#screen-flow .node .sysname { font-size: 9.5px; font-weight: var(--w-bold); fill: var(--fg); }
#screen-flow .node .syskind { font-size: 7.5px; fill: var(--fg-2); letter-spacing: .03em; text-transform: uppercase; }
#screen-flow .s-red .sysbox { stroke: var(--bad); stroke-width: 2; stroke-dasharray: none; }
#screen-flow .s-amber .sysbox { stroke: var(--warn); stroke-dasharray: none; }
#screen-flow .s-starved .sysbox { stroke: var(--fg-2); stroke-dasharray: 3 3; }
#screen-flow .s-unknown .sysbox { stroke-dasharray: 2 3; }
#screen-flow .s-stale .sysbox { fill: var(--surface-2); }

/* a ghost is a container next door, drawn as context */
#screen-flow .node.is-ghost .chip { stroke-dasharray: 2 3; fill: var(--bg); }
#screen-flow .node.is-ghost .name, #screen-flow .node.is-ghost .fig { fill: var(--fg-2); }
#screen-flow .node.is-ghost .mark, #screen-flow .node.is-ghost .icon { opacity: .6; }

/* chips */
#screen-flow .chip { fill: var(--surface); stroke: var(--line); stroke-width: 1.25; }
#screen-flow .s-amber .chip { stroke: var(--warn); }
#screen-flow .s-red .chip { stroke: var(--bad); stroke-width: 2; }
#screen-flow .s-starved .chip { stroke: var(--fg-2); stroke-dasharray: 3 3; }
#screen-flow .s-stale .chip { fill: var(--surface-2); stroke: var(--fg-2); }
#screen-flow .s-unknown .chip { stroke: var(--fg-2); stroke-dasharray: 2 3; }
#screen-flow .s-off .chip { stroke: var(--fg-2); stroke-dasharray: 1 3; stroke-width: 1; }
#screen-flow .node .name { font-size: 9px; font-weight: var(--w-bold); fill: var(--fg); }
#screen-flow .s-starved .name, #screen-flow .s-stale .name, #screen-flow .s-unknown .name, #screen-flow .s-off .name { fill: var(--fg-2); }
#screen-flow .node .fig { font-family: var(--font-mono); font-size: 9px; fill: var(--fg-2); }
#screen-flow .s-red .fig { fill: var(--bad); font-weight: var(--w-bold); }
#screen-flow .s-amber .fig { fill: var(--warn); }
#screen-flow .node .figure { font-family: var(--font-mono); font-size: 11px; text-anchor: middle; fill: var(--fg); }
#screen-flow .node .age { font-size: 10px; text-anchor: middle; fill: var(--fg-2); }
#screen-flow .node .label { font-size: 10px; text-anchor: middle; fill: var(--fg-2); }
#screen-flow .icon { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#screen-flow .hit { fill: transparent; stroke: none; } /* a 44 px hit area; transparent is hit-tested, none is not */
#screen-flow .focus-ring { fill: none; stroke: none; stroke-width: 2; }
#screen-flow .node:focus-visible .focus-ring { stroke: var(--accent); }
#screen-flow .node { cursor: pointer; transition: opacity var(--mo); }
#screen-flow .node:focus { outline: none; }
#screen-flow .node.is-notlive .mark, #screen-flow .node.is-notlive .icon, #screen-flow .node.is-notlive .fig, #screen-flow .node.is-notlive .name { opacity: .72; }
#screen-flow .node.is-reading .mark, #screen-flow .node.is-reading .chip { animation: flow-pulse 700ms ease-in-out infinite alternate; }
@keyframes flow-pulse { from { opacity: .35; } to { opacity: 1; } }

/* edges: the base line carries the link's status; the dots are the packets,
   moving the way the data moves; the arrowhead is the direction when nothing moves */
#screen-flow .edge { fill: none; stroke-width: 1.25; transition: stroke-opacity var(--mo); }
#screen-flow .e-flowing .edge { stroke: var(--fg-2); stroke-opacity: .45; }
#screen-flow .e-degraded .edge { stroke: var(--warn); stroke-opacity: .85; }
#screen-flow .e-rejected .edge { stroke: var(--fg-2); stroke-opacity: .45; }
#screen-flow .e-broken .edge { stroke: var(--bad); stroke-dasharray: 6 3; stroke-opacity: .9; }
#screen-flow .e-dry .edge { stroke: var(--fg-2); stroke-dasharray: 2 4; stroke-opacity: .8; }
#screen-flow .e-stale .edge { stroke: var(--fg-2); stroke-opacity: .3; }
#screen-flow .e-unknown .edge { stroke: var(--fg-2); stroke-dasharray: 1 3; stroke-opacity: .7; }
/* shape cues beside colour: a broken link starts with a cross, a rejected link ends in a stop bar */
#screen-flow .cue { fill: none; stroke-width: 1.5; stroke-linecap: round; }
#screen-flow .e-broken .cue { stroke: var(--bad); }
#screen-flow .e-rejected .cue { stroke: var(--bad); stroke-width: 2; }
#screen-flow .pk { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: flow-packets 1.4s linear infinite; }
#screen-flow .e-flowing .pk { stroke: var(--ok); }
#screen-flow .e-degraded .pk { stroke: var(--warn); animation-duration: 2.8s; }
#screen-flow .e-rejected .pk { stroke: var(--fg-2); stroke-width: 3.25; stroke-dasharray: 0.1 12; animation-duration: 2s; animation-name: flow-packets12; }
#screen-flow .e-broken .pk, #screen-flow .e-dry .pk, #screen-flow .e-stale .pk, #screen-flow .e-unknown .pk { display: none; }
#screen-flow .arrow-ok { fill: var(--fg-2); }
#screen-flow .arrow-warn { fill: var(--warn); }
#screen-flow .arrow-bad { fill: var(--bad); }
#screen-flow .arrow-grey { fill: var(--fg-2); }
@keyframes flow-packets { to { stroke-dashoffset: -18.2; } }
@keyframes flow-packets12 { to { stroke-dashoffset: -24.2; } }

/* the trace: a red march of the base line (these links carry nothing, so no
   packets), and everything off the path dims */
#screen-flow .flow-g.is-tracing .e:not(.is-traced) { opacity: .25; }
#screen-flow .flow-g.is-tracing .e.is-traced .edge { stroke: var(--bad); stroke-opacity: 1; stroke-width: 1.75; stroke-dasharray: 5 4; animation: flow-march .9s linear infinite; }
#screen-flow .flow-g.is-tracing .e.is-traced .pk { display: none; }
#screen-flow .flow-g.is-tracing .node:not(.is-traced):not(.is-root) { opacity: .3; }
@keyframes flow-march { to { stroke-dashoffset: -18; } }

/* the seven states: colour AND shape; the shape is the carrier, the colour the hint.
   Shared with the state sheet, which draws the same marks. */
:is(#screen-flow, .flow-sheet) .s-ok .mark { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 1.75; }
:is(#screen-flow, .flow-sheet) .s-ok .icon { stroke: var(--ok); }
:is(#screen-flow, .flow-sheet) .s-amber .mark { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 1.75; }
:is(#screen-flow, .flow-sheet) .s-amber .icon { stroke: var(--warn); }
:is(#screen-flow, .flow-sheet) .s-amber .badge { fill: var(--warn); }
:is(#screen-flow, .flow-sheet) .s-red .mark { fill: var(--bad-bg); stroke: var(--bad); stroke-width: 2.5; }
:is(#screen-flow, .flow-sheet) .s-red .icon { stroke: var(--bad); }
:is(#screen-flow, .flow-sheet) .s-red .figure { fill: var(--bad); font-weight: var(--w-bold); }
:is(#screen-flow, .flow-sheet) .s-starved .mark { fill: none; stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
:is(#screen-flow, .flow-sheet) .s-starved .icon { stroke: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-starved .figure { fill: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-stale .mark { fill: var(--surface-2); stroke: var(--fg-2); stroke-width: 1.5; }
:is(#screen-flow, .flow-sheet) .s-stale .icon { stroke: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-stale .figure { fill: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-stale .badge { fill: var(--surface); stroke: var(--fg-2); stroke-width: 1.5; }
:is(#screen-flow, .flow-sheet) .s-unknown .mark { fill: url(#hatch); stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 2 3; }
:is(#screen-flow, .flow-sheet) .s-unknown .icon { stroke: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-unknown .figure { fill: var(--fg-2); font-weight: var(--w-bold); }
:is(#screen-flow, .flow-sheet) .s-unknown .badge { fill: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-off .mark { fill: none; stroke: var(--fg-2); stroke-width: 1.25; stroke-dasharray: 1 3; }
:is(#screen-flow, .flow-sheet) .s-off .icon { stroke: var(--fg-2); opacity: .6; }
:is(#screen-flow, .flow-sheet) .s-off .figure { fill: var(--fg-2); }
:is(#screen-flow, .flow-sheet) .s-off .slash { stroke: var(--fg-2); stroke-width: 1.5; }

#screen-flow .iconbtn.is-busy svg { animation: flow-spin 900ms linear infinite; }
@keyframes flow-spin { to { transform: rotate(360deg); } }

/* ── the bottom sheet's own parts (the sheet itself is SocialOS's) ── */
.flow-sheet .sheet-body { overflow: auto; }
.flow-sheet .sheet-head { display: flex; align-items: center; gap: 8px; padding: 0 0 var(--sp-2); }
.flow-sheet .sheet-head h2 { flex: 1; margin: 0; font-size: var(--text-md); display: flex; align-items: center; gap: 10px; min-width: 0; }
.flow-sheet .sheet-head h2 svg { width: 28px; height: 28px; flex: none; }
.flow-sheet .sheet-head .iconbtn { margin-right: -10px; }
.flow-sheet .uns { margin: -4px 0 var(--sp-3); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); word-break: break-all; }
.flow-sheet .line { margin: 0 0 var(--sp-2); font-size: var(--text-md); line-height: 1.4; }
.flow-sheet .line b { font-family: var(--font-mono); font-weight: var(--w-bold); }
.flow-sheet .meta { margin: 0 0 var(--sp-3); color: var(--fg-2); font-size: var(--text-xs); display: flex; gap: 10px; flex-wrap: wrap; }
.flow-sheet .meta i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.flow-sheet .confirm { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--text-sm); color: var(--fg-2); }
.flow-sheet .confirm b { color: var(--fg); font-weight: var(--w-bold); }
.flow-sheet .starves { margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--fg-2); }
.flow-sheet .starves button { border: none; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-decoration: underline; }
.flow-sheet .result { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok); font-size: var(--text-sm); }
.flow-sheet .result.is-bad { background: var(--bad-bg); color: var(--bad); }
.flow-sheet .sheet-actions { display: flex; gap: var(--sp-2); }
.flow-sheet .sheet-actions .btn { flex: 1; }
.flow-sheet .btn.is-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: var(--w-bold); }
.flow-sheet .btn.is-go { background: var(--surface-2); border-color: var(--surface-2); font-weight: var(--w-bold); }
.flow-sheet .btn:disabled { opacity: .55; cursor: not-allowed; }
.flow-sheet .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.flow-sheet .btn.is-busy svg { animation: flow-spin 900ms linear infinite; }

/* ── the Home tile's marks: the strip of dots, the cut, the starved edge ── */
.flow-tile .dash-tile-viz { grid-row: 1; grid-column: 2; align-self: start; max-width: 80px; }
.flow-tile .dash-tile-text { grid-column: 1 / 3; }
.flow-tile .tile-flow { display: block; width: 80px; height: 30px; }
.flow-tile .tile-flow .tl { stroke: var(--line); stroke-width: 1.5; fill: none; }
.flow-tile .tile-flow .d-ok { fill: var(--fg-3); opacity: .5; }
.flow-tile .tile-flow .d-amber { fill: var(--warn); }
.flow-tile .tile-flow .d-red { fill: var(--bad); }
.flow-tile .tile-flow .d-starved { fill: none; stroke: var(--fg-3); stroke-width: 1.25; stroke-dasharray: 1.5 1.5; }
.flow-tile .tile-flow .d-stale { fill: var(--surface-2); stroke: var(--fg-3); stroke-width: 1; }
.flow-tile .tile-flow .d-unknown { fill: var(--fg-3); }
.flow-tile .tile-flow .d-off { fill: none; stroke: var(--fg-3); stroke-width: .75; stroke-dasharray: 1 2; }
.flow-tile .tile-flow .cut { stroke: var(--bad); stroke-width: 2; }
.flow-tile .tile-flow .edge-starve { stroke: var(--bad); stroke-dasharray: 2 2; opacity: .7; }
.flow-tile .flow-red .dash-tile-meta { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  #screen-flow, #screen-flow *, #screen-flow *::before, #screen-flow *::after,
  .flow-sheet, .flow-sheet *, .flow-tile, .flow-tile * {
    animation: none !important;
    transition: none !important;
  }
}