/* =============================================================================
 * Curzio Hub — design system foundation
 *
 * Tokens, typography, and reusable component primitives. Loaded on every page
 * inside the Hub. Page-specific layout (Pulse table, Roadmap workstreams, etc.)
 * lives in the page templates, but every visible primitive — buttons, pills,
 * chips, avatars, cards, the C-mark logo — is defined here.
 *
 * Light mode is a phase-8 deliverable. The token architecture is set up so a
 * [data-theme="light"] override block can be added without touching any markup.
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * Reset
 * -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg                { display: block; max-width: 100%; }
button                  { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a                       { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }


/* -----------------------------------------------------------------------------
 * Tokens — dark theme (default)
 *
 * To add light mode in phase 8, declare a parallel `[data-theme="light"] { ... }`
 * block below this one with inverted colour relationships. Curzio green stays
 * accent in both modes.
 * -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Canvas */
  --bg:           #0b0c0b;          /* near-black, warm undertone */
  --surface:      #131413;          /* card surface */
  --surface-2:    #1a1b1a;          /* elevated / hover */
  --border:       #232422;          /* subtle border */
  --border-2:     #2e2f2d;          /* hover border */

  /* Text */
  --text:         #f0eee8;          /* warm off-white */
  --text-2:       #a8a69e;          /* secondary */
  --text-3:       #6e6c66;          /* tertiary */
  --text-4:       #45433e;          /* muted */

  /* Brand — Curzio forest green */
  --green:        #0a6e3e;          /* primary accent */
  --green-2:      #0e8a4e;          /* lighter accent for highlights */
  --green-bg:     rgba(10, 110, 62, 0.08);
  --green-border: rgba(10, 110, 62, 0.28);

  /* Sage — the softer success/positive green. Shared by the done/exported/
     reviewed status pills and the tonal .btn-primary CTA so the Hub's two
     greens are one system. The -strong pair is the .btn-primary hover. */
  --sage-bg:            rgba(74, 138, 90, 0.08);
  --sage-text:          #7ab088;
  --sage-border:        rgba(74, 138, 90, 0.25);
  --sage-bg-strong:     rgba(74, 138, 90, 0.16);
  --sage-border-strong: rgba(74, 138, 90, 0.45);

  /* Semantic status */
  --status-amber: #b08538;
  --status-red:   #9a3838;
  --status-green: #4a8a5a;

  /* Fonts */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Layout */
  --container-max: 1180px;
  --container-pad: 28px;

  /* Radii — sharp corners default, 0–4px max per design rules */
  --radius:        3px;
  --radius-tight:  2px;
}

/* -----------------------------------------------------------------------------
 * Tokens — light theme
 *
 * The light palette inverts the canvas/text relationship but keeps the Curzio
 * green as the accent, slightly darkened for contrast against a warm cream
 * background. The rgba tints (green-bg, status pills) need *more* opacity on
 * light or they disappear against white surfaces.
 *
 * Hardcoded color overrides for components that bypass the token system
 * (status pills, owner avatars, pill-type variants, ws-highlight, toast,
 * tier text) live further down inside [data-theme="light"] rule groups —
 * search for "Light-mode component overrides" to find them.
 * -------------------------------------------------------------------------- */
[data-theme="light"] {
  /* Canvas — warm cream up through near-white card surfaces */
  --bg:           #faf8f3;
  --surface:      #ffffff;
  --surface-2:    #f0eee8;
  --border:       #e5e3dd;
  --border-2:     #cfccc4;

  /* Text — near-black warm down through muted warm gray */
  --text:         #1a1a18;
  --text-2:       #565550;
  --text-3:       #8a877f;
  --text-4:       #b8b5ac;

  /* Brand — Curzio green, slightly darker on light for contrast */
  --green:        #075a32;
  --green-2:      #0a6e3e;
  --green-bg:     rgba(10, 110, 62, 0.10);
  --green-border: rgba(10, 110, 62, 0.38);

  /* Sage — more opacity + a darker text hue so it holds against white. */
  --sage-bg:            rgba(74, 138, 90, 0.12);
  --sage-text:          #2a6e3a;
  --sage-border:        rgba(74, 138, 90, 0.42);
  --sage-bg-strong:     rgba(74, 138, 90, 0.20);
  --sage-border-strong: rgba(74, 138, 90, 0.60);

  /* Semantic status — darker hues for readability against white */
  --status-amber: #8a6320;
  --status-red:   #7a2828;
  --status-green: #2a6e3a;
}


/* -----------------------------------------------------------------------------
 * Base
 * -------------------------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

::selection         { background: var(--green-bg); color: var(--text); }
:focus-visible      { outline: 1px solid var(--green-2); outline-offset: 2px; }


/* -----------------------------------------------------------------------------
 * Typography
 *
 * The institutional register: serif for editorial weight, sans for body,
 * mono for labels and metadata. The scale below maps to the brief's spec for
 * each page's headlines, card titles, eyebrows, etc.
 * -------------------------------------------------------------------------- */
.serif { font-family: var(--serif); }
.sans  { font-family: var(--sans);  }
.mono  { font-family: var(--mono);  }

.h-display {                          /* login hero */
  font-family: var(--serif);
  font-size: 84px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h1 {                                 /* landing greeting */
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.h2 {                                 /* module title */
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.h3 {                                 /* tile title, card heading */
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.h4 {                                 /* workstream title */
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.italic-accent {
  font-style: italic;
  font-weight: 400;
}

.body    { font-size: 15px; color: var(--text-2); line-height: 1.55; }
.body-sm { font-size: 13px; color: var(--text-2); line-height: 1.5;  }
.caption { font-size: 12px; color: var(--text-3); line-height: 1.5;  }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.eyebrow--md { font-size: 11px; letter-spacing: 0.1em; }
.eyebrow--lg { font-size: 12px; letter-spacing: 0.1em; }

.text-primary   { color: var(--text); }
.text-secondary { color: var(--text-2); }
.text-muted     { color: var(--text-3); }
.text-quiet     { color: var(--text-4); }


/* -----------------------------------------------------------------------------
 * Layout primitives
 * -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section-divider {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 64px 0;
}
.section-divider::before,
.section-divider::after {
  content: '';
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--border);
  vertical-align: middle;
  margin: 0 16px;
}


/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */
.btn {
  /* Mono micro-label type, matching .pill exactly (mono / 10px / 0.1em) so
     buttons sit in the same type system as the status pills and chips around
     them. Padding tightened to 6/14 to stay proportional at the smaller label. */
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--sage-bg);
  color: var(--sage-text);
  border-color: var(--sage-border);
}
.btn-primary:hover:not(:disabled) {
  background: var(--sage-bg-strong);
  border-color: var(--sage-border-strong);
}
.btn-primary:disabled {
  /* The tonal fill is already translucent, so the global .btn opacity:0.5 fade
     would make a disabled primary CTA nearly invisible — reading as broken
     rather than off. Hold the sage frame at full opacity and mute the label
     instead, so the "generating…" state still looks deliberate. */
  opacity: 1;
  color: var(--text-3);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--surface);
}

.btn-quiet {
  background: transparent;
  color: var(--text-3);
  padding: 6px 12px;
}
.btn-quiet:hover:not(:disabled) { color: var(--text); background: var(--surface); }

.btn-pill {
  border-radius: 999px;
  padding: 10px 22px;
}


/* -----------------------------------------------------------------------------
 * Pills — status indicators (mono, restrained, semantic colour)
 *
 * Used for: roadmap card status, post status, newsletter status. The variants
 * cover the union of states across all modules so the same vocabulary works
 * everywhere.
 * -------------------------------------------------------------------------- */
.pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-tight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  display: inline-block;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pill-in-progress,
.pill-approved,
.pill-posted {
  background: var(--green-bg);
  color: var(--green-2);
  border-color: var(--green-border);
}

.pill-planned,
.pill-skipped,
.pill-draft {
  background: transparent;
  color: var(--text-3);
  border-color: var(--border-2);
}

.pill-blocked,
.pill-failed {
  background: rgba(154, 56, 56, 0.10);
  color: #c47878;
  border-color: rgba(154, 56, 56, 0.30);
}

.pill-done,
.pill-complete,
.pill-exported,
.pill-reviewed {
  background: var(--sage-bg);
  color: var(--sage-text);
  border-color: var(--sage-border);
}

.pill-decision,
.pill-pending,
.pill-edited,
.pill-scheduled {
  background: rgba(176, 133, 56, 0.08);
  color: #c9a263;
  border-color: rgba(176, 133, 56, 0.30);
}


/* -----------------------------------------------------------------------------
 * Filter chips
 *
 * Mono small-caps chips for filtering lists. Selection state is reflected via
 * .is-active OR aria-pressed="true".
 * -------------------------------------------------------------------------- */
.chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover                   { color: var(--text); background: var(--surface); }
.chip.is-active,
.chip[aria-pressed="true"]    { background: var(--surface); border-color: var(--border); color: var(--text); }


/* -----------------------------------------------------------------------------
 * View toggle — segmented control (List / Timeline / Board)
 * -------------------------------------------------------------------------- */
.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 1px;
}
.view-toggle__item {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-tight);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle__item:hover                 { color: var(--text); }
.view-toggle__item.is-active             { background: var(--surface-2); color: var(--text); }


/* -----------------------------------------------------------------------------
 * Avatars — owner initials, colour-coded per person
 *
 * Names map to the operators in this codebase: Filya, Emily, Veronica, Frank,
 * Joe, Lewis. New operators can be added below without touching markup.
 * -------------------------------------------------------------------------- */
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.avatar--sm { width: 20px; height: 20px; font-size: 8px; }
.avatar--lg { width: 32px; height: 32px; font-size: 11px; }

.avatar.av-filya    { background: #2a3a30; color: #9ec5ad; border-color: #345c43; }
.avatar.av-emily    { background: #3a3a2a; color: #c5c19e; border-color: #5c5734; }
.avatar.av-veronica { background: #3a2a2a; color: #c59e9e; border-color: #5c3434; }
.avatar.av-frank    { background: #2a2a3a; color: #9e9ec5; border-color: #34345c; }
.avatar.av-joe      { background: #2a3a3a; color: #9ec5c5; border-color: #345c5c; }
.avatar.av-lewis    { background: #3a2a3a; color: #c59ec5; border-color: #5c345c; }


/* -----------------------------------------------------------------------------
 * Cards
 * -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.card.is-interactive               { cursor: pointer; }
.card.is-interactive:hover         { background: var(--surface-2); border-color: var(--border-2); }


/* -----------------------------------------------------------------------------
 * Status dots — small coloured indicators (e.g. "Live", "Operational")
 * -------------------------------------------------------------------------- */
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background: var(--status-green);
}
.status-dot--green { background: var(--status-green); }
.status-dot--amber { background: var(--status-amber); }
.status-dot--red   { background: var(--status-red); }
.status-dot--brand { background: var(--green-2); }


/* -----------------------------------------------------------------------------
 * C-mark — Curzio logo container
 *
 * The SVG path lives in templates/_logo.html. This class handles the
 * surrounding rounded square (or transparent variant), sizing inline.
 *
 * Variants:
 *   .c-mark--on-green   green square, white C   (post-login top bar)
 *   .c-mark--on-white   white square, green C   (login hero, brand anchor)
 *   .c-mark--bare       no background, green C  (inline contexts)
 * -------------------------------------------------------------------------- */
.c-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  flex-shrink: 0;
  line-height: 0;
}
.c-mark svg { width: 76%; height: 76%; display: block; }

.c-mark--on-green { background: var(--green);  color: #ffffff; }
.c-mark--on-white { background: #ffffff;       color: var(--green); }
.c-mark--bare     { background: transparent;   color: var(--green); }


/* -----------------------------------------------------------------------------
 * Wordmark — full Curzio Research lockup composed inline
 *
 * Sizes (gap, font-size) come in from the macro as inline styles derived from
 * the `width` argument. This block only fixes typography, alignment, and
 * colour so the lockup reads the same on any surface (green login canvas,
 * near-black hub canvas).
 * -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.wordmark__text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.25em;
}
.wordmark__name {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.wordmark__eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}


/* -----------------------------------------------------------------------------
 * Empty state
 *
 * Every module shows one of these when its list is empty. Serif heading,
 * muted body, suggested action.
 * -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 72px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.empty-state__body {
  font-size: 14px;
  color: var(--text-2);
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.55;
}


/* -----------------------------------------------------------------------------
 * Skeleton loaders
 *
 * Use instead of spinners. Each skeleton primitive shimmers via opacity so the
 * layout footprint matches the eventual content.
 * -------------------------------------------------------------------------- */
@keyframes hub-skel-shimmer {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}
.skel {
  background: var(--surface-2);
  border-radius: var(--radius);
  animation: hub-skel-shimmer 1.4s ease-in-out infinite;
}
.skel-line          { height: 12px; width: 100%; margin-bottom: 8px; }
.skel-line--short   { width: 40%; }
.skel-line--medium  { width: 70%; }
.skel-block         { height: 80px; width: 100%; margin-bottom: 12px; }
.skel-circle        { border-radius: 50%; width: 24px; height: 24px; }


/* -----------------------------------------------------------------------------
 * Top bar — persistent across post-login pages
 *
 * Edge-to-edge thin border underline (no shadow). Left: brand lockup
 * (C-mark + "Curzio Hub" + "Research" eyebrow). Right: ⌘K hint + theme
 * toggle + username + sign out. Centre intentionally empty — module
 * navigation goes through the landing page tiles and the ⌘K palette.
 *
 * ⌘K and theme toggle are visual stubs in phase 3; wired in phase 8.
 * -------------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  transition: opacity 0.15s ease;
}
.topbar-brand:hover     { opacity: 0.88; }
.topbar-brand:focus-visible { outline-offset: 4px; }

.topbar-brand__lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.topbar-brand__name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topbar-brand__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.topbar-meta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* ⌘K — palette trigger button (lives in the topbar). The overlay it opens
 * is styled in the "Command palette" section further down. */
.topbar-cmdk {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--radius-tight);
  color: var(--text-3);
  transition: color 0.15s ease, background 0.15s ease;
}
.topbar-cmdk:hover { color: var(--text); background: var(--surface); cursor: pointer; }
.topbar-cmdk__key {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-tight);
  color: inherit;
  background: transparent;
  line-height: 1.3;
}

/* Theme toggle — the rendered icon shows the *target* state, not the
 * current. Dark mode → sun visible (click for light). Light mode → moon
 * visible (click for dark). The two SVGs ship in the button and CSS picks
 * which is shown based on the active [data-theme] on <html>. */
.topbar-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-3);
  border-radius: var(--radius-tight);
  transition: color 0.15s ease, background 0.15s ease;
}
.topbar-theme:hover { color: var(--text); background: var(--surface); cursor: pointer; }
.topbar-theme__sun,
.topbar-theme__moon { display: none; }
[data-theme="dark"]  .topbar-theme__sun  { display: block; }
[data-theme="light"] .topbar-theme__moon { display: block; }
/* :root with no explicit data-theme also falls back to dark — show sun. */
:root:not([data-theme="light"]) .topbar-theme__sun { display: block; }

/* Username — mono, slightly bigger letter-spacing for the small-caps register */
.topbar-user {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

/* Sign out — restrained text link */
.topbar-signout {
  font-size: 13px;
  color: var(--text-3);
  transition: color 0.15s ease;
}
.topbar-signout:hover { color: var(--text); }


/* -----------------------------------------------------------------------------
 * Command palette — ⌘K overlay
 *
 * Modal layer triggered globally; markup lives in _topbar.html so every
 * post-login page ships it. Visual register matches the rest of the system —
 * dark surface, sharp 3px corners, serif/sans/mono mix, no shadows beyond a
 * single soft drop. Static-routes pass first; dynamic items reuse the same
 * .cmdk-item rows once /hub/_cmdk/index lands.
 * -------------------------------------------------------------------------- */

.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 24px;
}
.cmdk-overlay[hidden] { display: none; }

.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cmdk-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 24vh);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* Search row */
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmdk-input-row__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
}
.cmdk-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 0;
  letter-spacing: -0.005em;
}
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-input-row__esc {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--radius-tight);
  letter-spacing: 0.06em;
}

/* Result list */
.cmdk-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
}

/* Section header — mono caps, low contrast, matches the rest of the system */
.cmdk-section {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 16px 6px;
}

.cmdk-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.cmdk-item.is-active {
  background: var(--surface-2);
  border-left-color: var(--green-2);
}
.cmdk-item__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.cmdk-item__subtitle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.cmdk-empty {
  padding: 18px 16px 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Footer — keyboard hints */
.cmdk-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  color: var(--text-3);
}
.cmdk-footer kbd {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-tight);
  margin-right: 4px;
}

/* Body lock — applied by the palette script when open */
body.cmdk-open { overflow: hidden; }

@media (max-width: 720px) {
  .cmdk-overlay { padding: 6vh 12px 12px; }
  .cmdk-panel   { max-height: calc(100vh - 12vh); }
}


/* -----------------------------------------------------------------------------
 * Post-login body — sticky-footer flex column
 *
 * Every Hub page sets body class "hub-body" via base.html's body_class block.
 * That makes the body a flex column so .page grows to fill, pinning the
 * system footer to the viewport bottom on tall screens with short content.
 * Scoped to .hub-body so the legacy /feed templates aren't affected.
 * -------------------------------------------------------------------------- */
.hub-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.hub-body .page       { flex: 1 0 auto; }
.hub-body .sys-footer { flex-shrink: 0; }


/* -----------------------------------------------------------------------------
 * Page wrapper — standard post-login layout container
 *
 * Used by /hub and (in later phases) /hub/pulse, /hub/newsletter, /hub/roadmap.
 * Caps content width and provides the brief's 28px horizontal / 48-88px
 * vertical padding rhythm.
 * -------------------------------------------------------------------------- */
.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-pad) 48px;
  width: 100%;
}


/* -----------------------------------------------------------------------------
 * Landing hero — wordmark anchor + meta line + greeting + status sentence
 * -------------------------------------------------------------------------- */
.hero {
  margin-bottom: 56px;
}
.hero__brand {
  margin-bottom: 36px;
}
.hero__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero__greeting {
  margin-bottom: 12px;
  color: var(--text);
}
.hero__status {
  font-size: 15px;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.55;
}


/* -----------------------------------------------------------------------------
 * Landing tiles — three distinct cards in a row, 20px gaps
 * -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  min-height: 260px;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tile:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.tile:hover .tile__arrow {
  opacity: 1;
  transform: translateX(2px);
}

.tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.tile__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green-2);
}
.tile__arrow {
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tile__label  { margin-bottom: 8px; }
.tile__title  { margin-bottom: 10px; color: var(--text); }
.tile__desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: auto;   /* pushes footer to bottom regardless of desc length */
}

.tile__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.tile__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.tile__metric-value {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tile__metric-unit {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tile__live {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* -----------------------------------------------------------------------------
 * System footer — bottom of post-login pages
 *
 * Two columns of mono caps with low contrast. Left: brand-dot + operational
 * + last-sync timestamp. Right: brand signature + version.
 * -------------------------------------------------------------------------- */
.sys-footer {
  margin-top: 64px;
  padding: 20px var(--container-pad) 48px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sys-footer__status {
  display: flex;
  gap: 24px;
  align-items: center;
}
.sys-footer__ok {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}


/* -----------------------------------------------------------------------------
 * Module pages — Pulse / Newsletter / Roadmap shared chrome
 *
 * Breadcrumb on top, module header with title + subtitle + stat-block strip,
 * filter bar, then the data table or detail view. Same pattern across all
 * three modules so phases 6 and 7 only ship their own data; the chrome is here.
 * -------------------------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--text-3);
  transition: color 0.15s ease;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb__sep   { margin: 0 8px; color: var(--text-4); }

/* Module header (title block + stat strip) */
.module-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.module-header__titles { display: flex; flex-direction: column; gap: 8px; }
.module-header__title  { margin: 0; color: var(--text); }
.module-header__subtitle {
  font-size: 13px;
  color: var(--text-2);
  max-width: 540px;
  line-height: 1.5;
}
.module-header__stats {
  display: flex;
  gap: 28px;
  align-items: flex-end;
}

/* -----------------------------------------------------------------------------
 * Topic injector — module-header composer (Pulse + Newsletter list pages)
 *
 * A toggle button reveals an inline topic box. Posts the typed topic to the
 * lane's /inject endpoint. Sits between the module-header and the filter-bar.
 * -------------------------------------------------------------------------- */
.topic-injector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 4px;
}
.topic-injector__toggle { align-self: flex-start; }
.topic-injector__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.topic-injector__input {
  flex: 1 1 320px;
  min-width: 240px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
}
.topic-injector__input:focus {
  outline: none;
  border-color: var(--border-2);
}
.topic-injector__input:disabled { opacity: 0.6; }
.topic-injector__status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.topic-injector__status.is-working { color: var(--text-2); }
.topic-injector__status.is-done    { color: var(--green); }
.topic-injector__status.is-error   { color: var(--danger, #d66); }

/* Composer row — sits the topic injector and thread injector side by side,
   wrapping to stacked on narrow viewports. */
.composer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: flex-start;
}
.composer-row > .topic-injector { flex: 1 1 auto; }

/* Thread injector — a multi-line paste, so the form stacks vertically rather
   than the single-line topic injector's inline row. */
.topic-injector__form--thread {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.topic-injector__textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.topic-injector__url { flex: 1 1 auto; width: 100%; }
.topic-injector__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.stat-block__value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
}
.stat-block__label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* -----------------------------------------------------------------------------
 * Filter bar
 *
 * Two rows: status chips on top, secondary chips + date range + Apply on the
 * second. Chips are anchors so cross-filter state is URL-driven; the form on
 * the right carries chip selections through hidden inputs so date changes
 * don't lose chip state.
 * -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 20px;
}
.filter-bar__row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.filter-bar__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filter-bar__label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 4px;
}
.filter-bar__form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.filter-bar__date {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 7px 10px;
  border-radius: var(--radius);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  color-scheme: dark;
}
.filter-bar__date:focus {
  border-color: var(--green-border);
  color: var(--text);
  background: var(--surface-2);
}


/* -----------------------------------------------------------------------------
 * Pill type variants — Pulse / Long-form
 *
 * Live alongside the existing semantic-status .pill-* set defined earlier.
 * Restrained tints so the table doesn't read as a chip warehouse.
 * -------------------------------------------------------------------------- */
.pill-type             { background: transparent; }
.pill-type--pulse      { color: #6ea8c5; border-color: rgba(110, 168, 197, 0.30); }
.pill-type--longform   { color: #b88dc7; border-color: rgba(184, 141, 199, 0.30); }


/* -----------------------------------------------------------------------------
 * Data table — Pulse list (also used by Newsletter / Roadmap in later phases)
 * -------------------------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.data-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  /* Top-aligned so date / source / status pill / tier / type all sit flush
   * with the first line of a 2-line-clamped headline. Single-line rows are
   * unaffected — the headline cell is also top-aligned, so the row collapses
   * to its natural height. */
  vertical-align: top;
}
.data-table__row {
  cursor: pointer;
  transition: background 0.1s ease;
}
.data-table__row:hover { background: var(--surface); }

.data-table__date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.data-table__headline {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
}
/* Line-clamp lives on an inner element, NOT the <td>, because setting
 * display:-webkit-box on the table cell strips its table-cell semantics
 * and kills `vertical-align: top` on the row — every other column then
 * floats relative to the now-non-cell. The wrapper span owns the clamp
 * so the <td> stays a normal table-cell and the row top-aligns cleanly. */
.data-table__headline-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.data-table__source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.data-table__tier {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table__tier--high   { color: #c47878; }
.data-table__tier--medium { color: #c9a263; }
.data-table__tier--low    { color: var(--text-3); }


/* -----------------------------------------------------------------------------
 * Confidence layer — editorial-importance donut + popover (list view)
 *
 * The donut is an inline SVG: a faint full-circle track plus a value arc sized
 * by stroke-dasharray (arc length = 0.8796 * score, where 87.96 = 2πr at r=14).
 * Color comes from the confidence BAND (score thresholds), NOT confidence_tier —
 * tier is already clustered HIGH/MEDIUM and would make every ring the same color.
 * -------------------------------------------------------------------------- */
.data-table__th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table__th-sort:hover { color: var(--text-2); }
.data-table__sort-caret {
  display: inline-block;
  opacity: 0.4;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.data-table__th-sort.is-sorted-desc .data-table__sort-caret { opacity: 0.9; transform: rotate(0deg); }
.data-table__th-sort.is-sorted-asc  .data-table__sort-caret { opacity: 0.9; transform: rotate(180deg); }

.data-table__confidence { width: 1%; white-space: nowrap; }

.confidence-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.confidence-cell--empty { cursor: default; }

.confidence-donut { flex: 0 0 auto; display: block; }
.confidence-donut__track { stroke: var(--border); }
.confidence-donut__arc {
  transition: stroke-dasharray 0.3s ease;
}
.confidence-donut__value {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
}
.confidence-donut__value--empty { fill: var(--text-4); }

/* Band colors — task spec: --green / --status-amber / --status-red */
.confidence-donut--green .confidence-donut__arc { stroke: var(--green-2); }
.confidence-donut--green .confidence-donut__value { fill: var(--green-2); }
.confidence-donut--amber .confidence-donut__arc { stroke: var(--status-amber); }
.confidence-donut--amber .confidence-donut__value { fill: var(--status-amber); }
.confidence-donut--red   .confidence-donut__arc { stroke: var(--status-red); }
.confidence-donut--red   .confidence-donut__value { fill: var(--status-red); }
.confidence-donut--none  .confidence-donut__track { stroke: var(--border); }

.confidence-why {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-3);
  max-width: 190px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Popover — anchored to the donut, opened by toggling .is-open on the cell.
 * Mirrors the roadmap-drawer surface tokens (raised panel, soft shadow). */
.confidence-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  /* Fixed, bounded width with border-box so padding can't push content past the
   * edge — nothing inside is allowed to bleed over the table. */
  box-sizing: border-box;
  width: 260px;
  max-width: 260px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  cursor: default;
  overflow: hidden;
}
.confidence-cell.is-open .confidence-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.confidence-pop__title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 12px;
}
.confidence-pop__bars { display: flex; flex-direction: column; gap: 8px; }
.confidence-pop__link {
  display: block;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--green-2);
}
.confidence-pop__link:hover { text-decoration: underline; }

/* Dimension mini-bars — used in both the popover and the detail panel. */
.confidence-bar {
  display: grid;
  grid-template-columns: 64px 1fr 26px;
  align-items: center;
  gap: 8px;
}
.confidence-bar__label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.confidence-bar__track {
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.confidence-bar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green-2);
  transition: width 0.3s ease;
}
.confidence-bar__num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  text-align: right;
}


/* -----------------------------------------------------------------------------
 * Confidence panel — "Why this scores" block on the post-detail view.
 * Large donut + labeled dimension bars + full rationale, given real weight
 * near the top of the post rather than buried in the metadata list.
 * -------------------------------------------------------------------------- */
.confidence-panel {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  margin: 0 0 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
}
.confidence-panel--green { border-left-color: var(--green-2); }
.confidence-panel--amber { border-left-color: var(--status-amber); }
.confidence-panel--red   { border-left-color: var(--status-red); }

.confidence-panel__donut { flex: 0 0 auto; }
.confidence-donut--lg .confidence-donut__value--lg {
  font-size: 9px;
  font-weight: 700;
}
.confidence-panel__body { flex: 1 1 auto; min-width: 0; }
.confidence-panel__title {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin: 0 0 14px;
}
.confidence-panel__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}
.confidence-bar--lg { grid-template-columns: 118px 1fr 28px; }
.confidence-bar--lg .confidence-bar__track { height: 6px; }
.confidence-panel__rationale {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

@media (max-width: 640px) {
  .confidence-panel { flex-direction: column; gap: 16px; }
  .confidence-why { display: none; }
}


/* -----------------------------------------------------------------------------
 * Page — narrow variant (post detail, newsletter detail)
 *
 * Caps content width for serif body readability — ~70 characters per line at
 * 17px Source Serif 4.
 * -------------------------------------------------------------------------- */
.page--narrow {
  max-width: 820px;
}


/* -----------------------------------------------------------------------------
 * Post detail
 * -------------------------------------------------------------------------- */
.post-detail { margin-top: 28px; }

.post-detail__title {
  margin-bottom: 18px;
  line-height: 1.15;
}

.post-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.post-detail__meta-sep { color: var(--text-4); }
.post-detail__tier--high   { color: #c47878; text-transform: uppercase; }
.post-detail__tier--medium { color: #c9a263; text-transform: uppercase; }
.post-detail__tier--low    { color: var(--text-3); text-transform: uppercase; }

.post-detail__body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  max-width: 640px;
  margin-bottom: 36px;
}

.post-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.post-detail__metadata-title { margin-bottom: 16px; }

.kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px 24px;
  align-items: baseline;
}
.kv dt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 2px;
}
.kv dd {
  font-size: 13px;
  color: var(--text-2);
  word-break: break-word;
  line-height: 1.5;
}
.kv dd code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: var(--radius-tight);
}
.kv dd a {
  color: var(--green-2);
}
.kv dd a:hover { text-decoration: underline; }


/* -----------------------------------------------------------------------------
 * Newsletter editor — Emily's working surface at /hub/newsletter/{id}
 *
 * The module header carries the live SL, status pill, word count, save
 * indicator, and action buttons; the form below holds every editable field
 * with serif/mono/serif-italic variants matching the eventual rendered look.
 * Auto-save fires on a 1500 ms debounce — the indicator just confirms.
 * -------------------------------------------------------------------------- */

.editor-header        { gap: 24px; align-items: flex-start; }
.editor-header .module-header__title { color: var(--text); }

.editor__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.editor {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
  max-width: 820px;
}

.editor__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.editor__label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.editor__input,
.editor__textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.editor__input:focus,
.editor__textarea:focus {
  border-color: var(--green-border);
  background: var(--surface-2);
}

.editor__input--serif        { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.editor__input--serif-italic { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--text-2); }
.editor__input--mono         { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }

.editor__textarea {
  min-height: 360px;
  line-height: 1.7;
  resize: vertical;
  font-family: var(--mono);
  font-size: 13px;
}

/* Body header — label + tabs in one row */
.editor__body-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.editor__body-tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.editor__tab {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-tight);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, color 0.15s ease;
}
.editor__tab:hover     { color: var(--text); }
.editor__tab.is-active { background: var(--surface-2); color: var(--text); }

.editor__body-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 8px;
}

.editor__preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 540px;
  overflow-y: auto;
}

.editor__sources {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
}
.editor__sources--empty {
  color: var(--text-4);
  font-style: italic;
  font-family: var(--sans);
}
.editor__sources a {
  color: var(--green-2);
  text-decoration: none;
}
.editor__sources a:hover { text-decoration: underline; }
.editor__sources-note {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-4);
  font-size: 11px;
  font-weight: 400;
}

.editor__drive-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green-2);
  word-break: break-all;
}
.editor__drive-link:hover { text-decoration: underline; }

.editor__save-indicator {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--status-green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.editor__save-indicator.is-visible { opacity: 1; }


/* -----------------------------------------------------------------------------
 * Web-source highlight — yellow background span for [[ws]]…[[/ws]] body text
 * -------------------------------------------------------------------------- */
.ws-highlight {
  background: rgba(250, 204, 21, 0.22);
  border-bottom: 1px solid rgba(250, 204, 21, 0.45);
  padding: 0 2px;
  border-radius: 2px;
}
.ws-highlight--sample {
  padding: 1px 6px;
}


/* -----------------------------------------------------------------------------
 * Toast — bottom-right notification for save/copy/export feedback
 * -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: 320px;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast--success { border-color: rgba(74, 138, 90, 0.4);  color: #7ab088; }
.toast--error   { border-color: rgba(154, 56, 56, 0.5);  color: #c47878; }


/* =============================================================================
 * Roadmap module
 *
 * List view groups items into workstream sections (tag + serif title + count
 * line, followed by a 5-column grid of item rows). Each row is an anchor —
 * clicking opens the drawer via /hub/roadmap/items/{id}; closing returns to
 * the list while preserving filter state in the URL.
 *
 * The drawer is server-rendered as a right-anchored slide-in panel over a
 * dimmed scrim. Auto-save (phase 7 task #6) wires inputs by data-field attr.
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * Workstream section
 * -------------------------------------------------------------------------- */
.roadmap-ws {
  margin-bottom: 36px;
}
.roadmap-ws__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.roadmap-ws__title-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
}
.roadmap-ws__title { color: var(--text); }
.roadmap-ws__count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}


/* -----------------------------------------------------------------------------
 * Roadmap tag — small rectangular workstream label.
 * Visually similar to a pill but squared off and slightly tighter, used as a
 * lead-in to a workstream title rather than as a status badge on a row.
 * -------------------------------------------------------------------------- */
.roadmap-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  background: var(--green-bg);
  color: var(--green-2);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-tight);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}


/* -----------------------------------------------------------------------------
 * Items grid — 5-column table-like layout inside a workstream
 * -------------------------------------------------------------------------- */
.roadmap-items {
  border-bottom: 1px solid var(--border);
}
.roadmap-items__head,
.roadmap-item {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 160px 100px 130px;
  gap: 20px;
  align-items: center;
}
.roadmap-items__head {
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border);
}

.roadmap-item {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
  color: inherit;
}
.roadmap-item:last-child { border-bottom: none; }
.roadmap-item:hover      { background: var(--surface); }
.roadmap-item.is-active  {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--green-2);
}

.roadmap-item__bar {
  width: 3px;
  height: 36px;
  display: block;
  background: var(--text-4);
}
.roadmap-item__bar--in-progress { background: var(--green); }
.roadmap-item__bar--planned     { background: var(--text-4); }
.roadmap-item__bar--blocked     { background: var(--status-red); }
.roadmap-item__bar--done        { background: var(--status-green); }
.roadmap-item__bar--decision    { background: var(--status-amber); }

.roadmap-item__title-block { min-width: 0; }
.roadmap-item__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.roadmap-item__meta {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-item__owner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  min-width: 0;
}

.roadmap-item__week {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* -----------------------------------------------------------------------------
 * Filter-bar / empty-state variants used by the roadmap stub views
 * -------------------------------------------------------------------------- */
.filter-bar__row--end { justify-content: flex-end; }

.empty-state--stub { padding: 96px 24px; }


/* -----------------------------------------------------------------------------
 * Drawer editor — right-anchored slide-in for inline edit-and-auto-save.
 *
 * Server-rendered when the URL is /hub/roadmap/items/{id}. The scrim is a
 * plain anchor back to the filtered list URL — close works without JS.
 * -------------------------------------------------------------------------- */
.hub-body--drawer-open { overflow: hidden; }

.roadmap-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  cursor: pointer;
}

.roadmap-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 520px;
  max-width: 100vw;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.30);
  z-index: 110;
  display: flex;
  flex-direction: column;
}

.roadmap-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.roadmap-drawer__breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.roadmap-drawer__breadcrumb .caption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roadmap-drawer__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.roadmap-drawer__save-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}
.roadmap-drawer__save-status[data-state="saving"] { color: var(--status-amber); }
.roadmap-drawer__save-status[data-state="saved"]  { color: var(--status-green); }
.roadmap-drawer__save-status[data-state="error"]  { color: var(--status-red); }

.roadmap-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  border-radius: var(--radius);
  transition: color 0.15s ease, background 0.15s ease;
}
.roadmap-drawer__close:hover {
  color: var(--text);
  background: var(--surface);
}

.roadmap-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* -----------------------------------------------------------------------------
 * Drawer fields — labelled inputs, selects, textareas
 * -------------------------------------------------------------------------- */
.roadmap-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.roadmap-field--half { flex: 1 1 0; min-width: 0; }
.roadmap-field-row {
  display: flex;
  gap: 16px;
}

.roadmap-field__label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.roadmap-field__input {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
  color-scheme: dark;
}
.roadmap-field__input:hover { border-color: var(--border-2); }
.roadmap-field__input:focus {
  border-color: var(--green-border);
  background: var(--surface-2);
}

.roadmap-field__input--title {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.roadmap-field__input--textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}


/* -----------------------------------------------------------------------------
 * Drawer metadata block — read-only fields at the bottom
 * -------------------------------------------------------------------------- */
.roadmap-drawer__meta {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roadmap-drawer__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.roadmap-drawer__meta-row dt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.roadmap-drawer__meta-row dd {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
  word-break: break-word;
}


/* -----------------------------------------------------------------------------
 * Narrow viewport — drawer takes the full width below ~720px.
 * Item grid stays as-is; horizontal scroll is preferable to hidden columns
 * since every cell carries meaningful state on this page.
 * -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .roadmap-drawer { width: 100vw; border-left: 0; }
}


/* =============================================================================
 * Light-mode component overrides
 *
 * Tokens already swap automatically via [data-theme="light"] at the top of
 * this file. The rules below handle components that bake in hex/rgba colors
 * directly — status pills, owner avatars, pill-type variants, tier text, the
 * WS-highlight yellow, toast colors — plus a couple of native-control
 * color-scheme hints and softer shadows for the light canvas.
 *
 * Each override re-picks the colour relationships to read against a warm-
 * cream canvas instead of inverting mechanically. Avatar hues keep the same
 * per-owner identity (Filya green, Emily olive, etc.) just lighter tint +
 * darker text.
 * ============================================================================= */

/* --- Status pills ---------------------------------------------------------- */
[data-theme="light"] .pill-blocked,
[data-theme="light"] .pill-failed {
  background: rgba(154, 56, 56, 0.10);
  color: #802828;
  border-color: rgba(154, 56, 56, 0.42);
}

/* (done/complete/exported/reviewed need no light override — the --sage-*
   tokens already swap per theme, so the base .pill rule renders correctly in
   both.) */

[data-theme="light"] .pill-decision,
[data-theme="light"] .pill-pending,
[data-theme="light"] .pill-edited,
[data-theme="light"] .pill-scheduled {
  background: rgba(176, 133, 56, 0.14);
  color: #8a6320;
  border-color: rgba(176, 133, 56, 0.48);
}

/* --- Pill type variants (Pulse / Long-form) ------------------------------- */
[data-theme="light"] .pill-type--pulse    { color: #2c5e7e; border-color: rgba(44, 94, 126, 0.42); }
[data-theme="light"] .pill-type--longform { color: #6c3a8a; border-color: rgba(108, 58, 138, 0.42); }

/* --- Owner avatars — same per-owner hue, lighter tint + darker text ------ */
[data-theme="light"] .avatar.av-filya    { background: #e2efe7; color: #2a5a3c; border-color: #b8d4c2; }
[data-theme="light"] .avatar.av-emily    { background: #efedde; color: #6e6520; border-color: #cfc8a3; }
[data-theme="light"] .avatar.av-veronica { background: #efdede; color: #7a3030; border-color: #d4b3b3; }
[data-theme="light"] .avatar.av-frank    { background: #dee0ef; color: #2e3470; border-color: #b3b8d4; }
[data-theme="light"] .avatar.av-joe      { background: #def0ef; color: #225e5e; border-color: #b3d2d2; }
[data-theme="light"] .avatar.av-lewis    { background: #efdeef; color: #5e2270; border-color: #d2b3d2; }

/* --- Tier text ------------------------------------------------------------ */
[data-theme="light"] .data-table__tier--high,
[data-theme="light"] .post-detail__tier--high   { color: #802828; }
[data-theme="light"] .data-table__tier--medium,
[data-theme="light"] .post-detail__tier--medium { color: #8a6320; }

/* --- WS-highlight yellow — more opacity to read against white ------------ */
[data-theme="light"] .ws-highlight {
  background: rgba(217, 167, 18, 0.28);
  border-bottom-color: rgba(217, 167, 18, 0.62);
}

/* --- Toast ---------------------------------------------------------------- */
[data-theme="light"] .toast--success { border-color: rgba(74, 138, 90, 0.5); color: #2a6e3a; }
[data-theme="light"] .toast--error   { border-color: rgba(154, 56, 56, 0.5); color: #802828; }

/* --- Native control color-scheme — date input + drawer inputs ------------ */
[data-theme="light"] .filter-bar__date,
[data-theme="light"] .roadmap-field__input { color-scheme: light; }

/* --- Softer shadows on the light canvas ---------------------------------- */
[data-theme="light"] .cmdk-panel     { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12); }
[data-theme="light"] .roadmap-drawer { box-shadow: -16px 0 32px rgba(0, 0, 0, 0.08); }