/* ─────────────────────────────────────────────
   ICONA Hub — main.css
   Neutral professional palette, no external dependencies.
   ───────────────────────────────────────────── */

/* ── Reset / base ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-navy:    #1e2a3b;
  --color-navy-dk: #141e2c;
  --color-white:   #ffffff;
  --color-bg:      #f4f6f8;
  --color-surface: #ffffff;   /* card / panel background (light mode) */
  --color-surface-alt: #f9f9f9; /* secondary surface (hero panels, strips) */
  --color-border:  #d8dde6;
  --color-border-soft: #e5e7eb;
  --color-text:    #1a1a2e;
  --color-text-soft: #4b5563;
  --color-muted:   #6b7280;
  --color-primary: #2563eb;
  --color-primary-dk: #1d4ed8;
  --color-danger:  #dc2626;
  --color-danger-dk: #b91c1c;
  --color-success: #16a34a;
  --color-warn:    #d97706;
  --color-caution: #eab308;  /* MEDIUM-severity / caution tier (Patch 1 v3 2026-05-13) */
  /* CTA green — used for every primary action button across ICONA Hub.
     Intentionally separate from --color-primary (brand blue) which stays
     for links, nav, focus rings, and other UI chrome. */
  --color-cta:     #2e7d32;
  --color-cta-dk:  #256326;

  --radius: 6px;
  --shadow: 0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Dark mode — Design token system (2026-04-23 v2) ─────────────────
   Full refactor after POC feedback: too many competing accents, too
   much amber/brown used as default surface treatment, not enough
   neutral hierarchy. New system follows the design spec:

     1. Neutrals dominate. Hierarchy from tonal separation + borders,
        not colour.
     2. Blue is the sole primary accent.
     3. Semantic colours (success/warning/danger/info) only appear in
        small badges, chips, counts, and left-border accents — never
        as full-fill panel backgrounds.
     4. Amber is reserved for semantic "warning" and nothing else.

   Tokens are grouped by role. Components reference these tokens
   (not raw hex) so future palette shifts are one-edit.

   Back-compat --color-* aliases at the bottom keep existing rules in
   main.css (body, messages, nav, card-heading, etc.) working
   against the new tokens during the migration. */
[data-theme="dark"] {
  /* ── Surfaces / layers — wider elevation steps for clearer
     hierarchy. v3 had +9-10 hex steps which still read as "all
     similar dark." v4 widens to +11-13 hex per step so each
     elevation level is distinctly visible at a glance, and
     inputs (--bg-surface-3) sit clearly above panels
     (--bg-surface) instead of being absorbed. */
  --bg-app:         #0d1117;   /* page background — deepest */
  --bg-surface:     #181d27;   /* main cards / panels (+11) */
  --bg-surface-2:   #232936;   /* raised / alternate surfaces (+11) */
  --bg-surface-3:   #2e3545;   /* inputs / code / table headers (+13) */

  /* ── Borders — slightly strengthened so card outlines hold ── */
  --border-subtle:  #323847;
  --border-strong:  #444c60;

  /* ── Text hierarchy ── */
  --text-primary:   #e6eaf2;   /* main text, soft off-white */
  --text-secondary: #a0a8b8;   /* muted grey-blue support */
  --text-tertiary:  #6b7488;   /* low-emphasis / meta */

  /* ── Primary accent (blue) — reserved for primary buttons,
     active/selected states, links, focus rings. NOT for decorative
     borders, section labels, or "this looks like a strategic panel"
     framing. Those should be neutral or use semantic tokens. ── */
  --accent:         #3b82f6;
  --accent-hover:   #60a5fa;
  --accent-muted:   rgba(59, 130, 246, 0.10);
  --accent-ring:    rgba(59, 130, 246, 0.32);

  /* ── Semantic — muted/controlled, not candy-bright ──
     Lower-saturation versions of the standard palette so they read
     as "meaningful" rather than "loud". Soft rgba fills stay around
     10-12% so chips don't dominate dark surfaces. ── */
  --success:         #4ade80;        /* muted green, not neon */
  --success-soft:    rgba(74, 222, 128, 0.10);
  --success-border:  rgba(74, 222, 128, 0.24);

  --warning:         #e0a83a;        /* clean amber, not mustard/brown */
  --warning-soft:    rgba(224, 168, 58, 0.10);
  --warning-border:  rgba(224, 168, 58, 0.24);

  --danger:          #e85c5c;        /* one consistent red — slightly cooler */
  --danger-soft:     rgba(232, 92, 92, 0.10);
  --danger-border:   rgba(232, 92, 92, 0.24);

  --info:            #58a6e6;        /* calmer cyan-blue */
  --info-soft:       rgba(88, 166, 230, 0.10);
  --info-border:     rgba(88, 166, 230, 0.24);

  /* ── Interaction states — neutral, no blue tint ── */
  --hover-surface:    #1f2632;
  --selected-surface: #283040;

  /* ── Shadows (keep soft — dark mode should not feel glossy) ── */
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);

  /* ── Back-compat aliases so existing main.css rules (body bg, nav,
     messages, card-heading, etc.) pick up the new tokens without
     touching every rule. Remove these once main.css is migrated. ── */
  --color-bg:        var(--bg-app);
  --color-surface:   var(--bg-surface);
  --color-surface-alt: var(--bg-surface-2);
  --color-border:    var(--border-subtle);
  --color-border-soft: var(--border-subtle);
  --color-text:      var(--text-primary);
  --color-text-soft: var(--text-secondary);
  --color-muted:     var(--text-tertiary);
  --color-primary:   var(--accent);
  --color-primary-dk: var(--accent-hover);
  --color-danger:    var(--danger);
  --color-danger-dk: var(--danger);
  --color-success:   var(--success);
  --color-warn:      var(--warning);
  --color-cta:       var(--accent);
  --color-cta-dk:    var(--accent-hover);
  /* Semantic soft fills for legacy chip rules (count chips,
     inbox-item state tints, etc.) so they pick up dark-mode
     restrained rgba backgrounds automatically. */
  --color-danger-soft: var(--danger-soft);
  --color-warn-soft:   var(--warning-soft);
  --color-success-soft: var(--success-soft);
  --color-info-soft:   var(--info-soft);
}

/* ──────────────────────────────────────────────────────────────────
   Dark mode — Generic overrides (Phase 1 rollout, 2026-04-23)

   Lifted from app/templates/app/seo_tools/meta_schema.html so every
   page in the app picks up dark-mode treatment for shared chrome
   without per-template work. Page-specific component classes
   (.wl-*, .mb-how, .wl-kw-intel, etc.) still live in their owning
   templates.

   Coverage included here:
     - html / body / .site-main page chrome
     - Generic .card panel surface
     - Form inputs (.form-input, input, select, textarea) + focus
     - Buttons (.btn-primary, .btn-secondary, .btn-danger)
     - Headings + inline-style colour catchers for common greys
     - <summary> focus-ring strip (browser default suppression)

   !important is required because the legacy templates have hundreds
   of inline style="background:#..." declarations. A future cleanup
   pass would migrate inline hex onto classes and drop !important.
   ──────────────────────────────────────────────────────────────── */

/* === Page chrome ─ === */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] .site-main {
  background: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

/* === Generic .card panel surface ===
   Catches every standard card across the app. Page-specific
   wrappers (e.g. #batch-mode-panel, #single-page-panel) should
   stay transparent so they don't double-stack a border around
   inner cards. */
[data-theme="dark"] .card {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* === Form inputs ===
   Inputs sit on --bg-surface-3 so they stand visibly above the
   parent panel (--bg-surface). Focus uses the accent ring without
   the browser default outline. */
[data-theme="dark"] .form-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
}
[data-theme="dark"] ::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 1;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--accent-ring) !important;
}

/* === Buttons ===
   .btn-primary stays on full --accent (the one place strong blue
   belongs — primary CTAs). .btn-secondary = neutral surface chip.
   .btn-danger = restrained semantic chip that turns solid red on
   hover for confirmation. */
[data-theme="dark"] .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
[data-theme="dark"] .btn-secondary {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--hover-surface) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="dark"] .btn-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-border) !important;
}
[data-theme="dark"] .btn-danger:hover {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* === Headings + inline colour catchers ===
   Templates have hundreds of inline style="color:#666" etc. Attribute-
   substring selectors map common light-mode greys onto dark-mode
   text tokens so subtitles, captions, and meta text remain readable
   without touching every template. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color:#777"],
[data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color:#222"] {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#999"], [data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color:#aaa"], [data-theme="dark"] [style*="color:#bbb"],
[data-theme="dark"] [style*="color:#ccc"] {
  color: var(--text-tertiary) !important;
}

/* === <summary> / <details> focus-ring strip ===
   Browser-default focus rings on <summary> elements persist after
   click and read as "this control is selected" against dark
   backgrounds. Strip the default; restore a clean ring only on
   :focus-visible (keyboard navigation). */
[data-theme="dark"] details summary,
[data-theme="dark"] summary {
  outline: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] details summary:focus,
[data-theme="dark"] summary:focus {
  outline: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] details summary:focus-visible,
[data-theme="dark"] summary:focus-visible {
  outline: 2px solid var(--accent-ring) !important;
  outline-offset: 2px;
}

/* === Tables (generic baseline) ===
   Default striping/hover for any table the app uses. Page-specific
   table styles still live in their templates and can override. */
[data-theme="dark"] table thead th {
  background: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="dark"] table tbody td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="dark"] table tbody tr:hover {
  background: var(--hover-surface) !important;
}

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

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header / nav ──────────────────────────── */
.site-header {
  background: var(--color-navy);
  color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
}

.site-logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-white);
  letter-spacing: .02em;
  white-space: nowrap;
}
.site-logo:hover { text-decoration: none; opacity: .9; }

.site-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}

.nav-link {
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  padding: .35rem .75rem;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

/* ── Nav dropdowns ────────────────────────── */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-caret {
  font-size: .65rem;
  opacity: .6;
  transition: transform .15s;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--color-navy-dk);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  padding: .35rem 0;
  z-index: 200;
}

.nav-dropdown__panel--right {
  left: auto;
  right: 0;
}

.nav-dropdown:hover > .nav-dropdown__panel,
.nav-dropdown:focus-within > .nav-dropdown__panel {
  display: block;
}

.nav-dropdown__item {
  display: block;
  padding: .5rem 1rem;
  font-size: .85rem;
  color: rgba(255,255,255,.8);
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.nav-dropdown__item:hover,
.nav-dropdown__item.active {
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
}

/* Nav dropdown separator */
.nav-dropdown__sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: .25rem 0;
}

/* Nav dropdown group label */
.nav-dropdown__label {
  display: block;
  padding: .35rem 1rem .15rem;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  pointer-events: none;
}
.nav-dropdown__label:first-child {
  padding-top: .5rem;
}

/* Logout button inside dropdown */
.nav-dropdown__logout-form { margin: 0; }
.nav-dropdown__item--button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ── App Launcher ─────────────────────────── */
.app-launcher {
  position: relative;
  display: inline-block;
}

.app-launcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.app-launcher--open .app-launcher__trigger,
.app-launcher__trigger:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Backdrop — invisible overlay to catch outside clicks */
.app-launcher__backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 149;
}
.app-launcher--open .app-launcher__backdrop {
  display: block;
}

/* Panel */
.app-launcher__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--color-navy-dk);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  padding: 1rem 1.25rem;
  min-width: 440px;
}
.app-launcher--open .app-launcher__panel {
  display: block;
  animation: launcherIn .12s ease-out;
}
@keyframes launcherIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grid — columns for each group */
.app-launcher__grid {
  display: flex;
  gap: 1.25rem;
}

/* Group column */
.app-launcher__group {
  flex: 1;
  min-width: 120px;
}

/* Group label */
.app-launcher__group-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  padding-bottom: .5rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* App item */
.app-launcher__app {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem;
  border-radius: 4px;
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  transition: background .1s, color .1s;
  text-decoration: none;
}
.app-launcher__app:hover,
.app-launcher__app.active {
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
}

/* App icon — compact monogram */
.app-launcher__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.app-launcher__icon--production {
  background: rgba(37,99,235,.25);
  color: #93bbfc;
}
.app-launcher__icon--audit {
  background: rgba(217,119,6,.2);
  color: #f5c97a;
}
.app-launcher__icon--finance {
  background: rgba(22,163,74,.2);
  color: #86dba0;
}

.app-launcher__app-name {
  white-space: nowrap;
}

/* ── User menu (right-aligned) ────────────── */
.nav-dropdown--user {
  margin-left: auto;
}

/* ── Pinned-client chip (top-nav, right side, only when pinned) ───── */
.client-pin-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-soft, rgba(255,255,255,.18));
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  margin-left: auto;            /* push to right side, like the user menu */
  margin-right: 0.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
  /* DO NOT add overflow:hidden here — it clips the absolutely-positioned
     dropdown that lives inside this wrapper. Round corners are inherited
     by the inner __name and __caret instead via their own padding. */
}
.client-pin-chip__name {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem 0.25rem 0.85rem;
  color: #fff;                  /* nav header is always dark; explicit white avoids theme regressions */
  font-weight: 500;
  text-decoration: none;
  max-width: 220px;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 999px 0 0 999px;
}
.client-pin-chip__name:hover {
  background: rgba(37, 99, 235, 0.32);
  text-decoration: none;
}
.client-pin-chip__caret {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--color-border-soft, rgba(255,255,255,.18));
  color: #fff;
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 0 999px 999px 0;
}
.client-pin-chip__caret:hover {
  background: rgba(37, 99, 235, 0.32);
}
/* When [hidden] is on, default UA stylesheet sets display:none — but
   our explicit `display:flex` below would override that, causing the
   dropdown to render even when the JS thinks it's closed. The explicit
   selector here keeps the close state honest. */
.client-pin-chip__dropdown[hidden] {
  display: none !important;
}
.client-pin-chip__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 70vh;
  background: var(--color-surface, #1f2937);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
/* A. Current pinned client header */
.cpc-header {
  padding: 0.7rem 0.9rem 0.6rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.cpc-header__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.cpc-header__sub {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpc-header__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.cpc-action {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--color-border-soft);
  background: transparent;
  white-space: nowrap;
}
.cpc-action--primary {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}
.cpc-action--primary:hover { filter: brightness(1.08); text-decoration: none; }
.cpc-action--ghost {
  color: var(--color-primary, #2563eb);
  border-color: color-mix(in srgb, var(--color-primary, #2563eb) 35%, var(--color-border-soft));
  background: color-mix(in srgb, var(--color-primary, #2563eb) 6%, transparent);
}
.cpc-action--ghost:hover {
  border-color: var(--color-primary, #2563eb);
  background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
  text-decoration: none;
}
.cpc-action--secondary { color: var(--color-muted); }
.cpc-action--secondary:hover {
  color: var(--color-danger, #dc2626);
  border-color: var(--color-danger, #dc2626);
}
.cpc-form { margin: 0; display: inline-block; }

/* B. Section blocks (Recent + Search) */
.cpc-section {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.cpc-section:last-child { border-bottom: 0; }
.cpc-section__heading {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 0.25rem 0.9rem;
}

/* Row used by both Recent and Search Results */
.cpc-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--color-text);
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.cpc-row:hover {
  background: var(--color-surface-alt, rgba(37, 99, 235, 0.1));
}
.cpc-row__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* C. Search */
.cpc-search {
  width: calc(100% - 1.4rem);
  margin: 0.2rem 0.7rem 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  font-size: 0.85rem;
}
.cpc-results {
  max-height: 240px;
  overflow-y: auto;
}
.cpc-result-hidden { display: none; }
.cpc-empty {
  padding: 0.5rem 0.9rem;
  color: var(--color-muted);
  font-size: 0.83rem;
  font-style: italic;
}

/* D. Footer */
.cpc-footer {
  border-top: 1px solid var(--color-border-soft);
}
.cpc-footer-link {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--color-primary, #2563eb);
  text-decoration: none;
  font-size: 0.85rem;
}
.cpc-footer-link:hover { text-decoration: underline; }

/* ── Clients mega-dropdown panel ──────────────────────────────────────
   Extends the existing nav-dropdown pattern. The trigger stays the
   existing Clients ▾ nav button; this is just a wider/richer panel. */
.nav-dropdown__panel--clients {
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
}
.clients-mega__search {
  width: calc(100% - 1.4rem);
  margin: 0.5rem 0.7rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  font-size: 0.88rem;
}
.clients-mega__heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 0.5rem 0.9rem 0.2rem;
}
.clients-mega__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.9rem;
  gap: 0.5rem;
}
.clients-mega__row:hover {
  background: var(--color-surface-alt, rgba(37, 99, 235, 0.07));
}
.clients-mega__name {
  flex: 1;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clients-mega__name:hover { text-decoration: underline; }
.clients-mega__pin-form { margin: 0; }
.clients-mega__pin-btn {
  background: transparent;
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.clients-mega__pin-btn:hover {
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
}
.clients-mega__pin-btn--active {
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
}
.clients-mega__footer {
  border-top: 1px solid var(--color-border-soft);
  padding: 0.3rem 0;
  margin-top: 0.3rem;
}
.clients-mega__footer-link {
  display: block;
  padding: 0.45rem 0.9rem;
  color: var(--color-primary, #2563eb);
  text-decoration: none;
  font-size: 0.88rem;
}
.clients-mega__footer-link:hover { text-decoration: underline; }
.clients-mega__hidden { display: none; }
.clients-mega__empty {
  padding: 0.5rem 0.9rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ── Theme-aware callout / chip utilities ────────────────────────
   Replaces the per-template inline `style="background:#fff8f0; color:#7d6608"`
   patterns that broke in dark mode (light hex backgrounds + dark text
   become invisible against the dark page chrome).

   Two scopes:
   - .callout--info|--warn|--success|--danger : block-level callout
     panels (banners, recommendation cards, partial-data notices)
   - .ba-chip--keep|--consolidate|--investigate|--remove|--neutral :
     inline pills used in the schema_audit detail block-action list

   Both pull from the existing soft variables, which already carry the
   right rgba tint in dark mode and a usable light hex in light mode. */
.callout {
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.callout--info {
  background: var(--color-info-soft, var(--color-surface-alt));
  border-color: var(--color-primary);
  color: var(--color-text);
}
.callout--warn {
  background: var(--color-warn-soft, var(--color-surface-alt));
  border-color: var(--color-warn);
  color: var(--color-text);
}
.callout--success {
  background: var(--color-success-soft, var(--color-surface-alt));
  border-color: var(--color-success);
  color: var(--color-text);
}
.callout--danger {
  background: var(--color-danger-soft, var(--color-surface-alt));
  border-color: var(--color-danger);
  color: var(--color-text);
}
.callout__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.callout__body {
  font-size: 0.82rem;
  color: var(--color-text-soft, var(--color-text));
  margin: 0;
  line-height: 1.5;
}
.callout__title--info    { color: var(--color-primary); }
.callout__title--warn    { color: var(--color-warn); }
.callout__title--success { color: var(--color-success); }
.callout__title--danger  { color: var(--color-danger); }

/* Inline chip used for block-action recommendations (keep / consolidate
   / investigate / remove). Each maps to a soft semantic background so
   the chip stays legible in either theme. */
.ba-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-muted);
}
.ba-chip--keep         { background: var(--color-success-soft); color: var(--color-success); }
.ba-chip--consolidate  { background: var(--color-info-soft); color: var(--color-primary); }
.ba-chip--investigate  { background: var(--color-warn-soft); color: var(--color-warn); }
.ba-chip--remove       { background: var(--color-danger-soft); color: var(--color-danger); }
.ba-chip--neutral      { background: var(--color-surface-alt); color: var(--color-muted); }

/* Schema audit per-block detail (issues vs clean). Replaces the
   conditional inline `style="background:#fff8f0"` / `#f0faf0` that
   produced the unreadable cream-on-cream panel in dark mode. */
.audit-block {
  margin-top: 0.6rem;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.audit-block--issues {
  background: var(--color-warn-soft);
  border-color: var(--color-warn);
}
.audit-block--clean {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}
.audit-block__head { font-weight: 600; margin-bottom: 0.3rem; color: var(--color-text); }
.audit-block__hint { color: var(--color-muted); font-weight: 400; font-size: 0.75rem; }
.audit-block__meta { color: var(--color-muted); font-size: 0.75rem; margin-bottom: 0.3rem; }
.audit-block__primary { color: var(--color-primary); font-weight: 600; }
.audit-block__ok { color: var(--color-success); }

/* Inline issue line — shared by audit-block detail and the flat-issues
   fallback. Border-left + label colour by severity. */
.audit-issue {
  margin-top: 0.3rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--color-info, var(--color-primary));
  color: var(--color-text);
}
.audit-issue--critical { border-left-color: var(--color-danger); }
.audit-issue--warning  { border-left-color: var(--color-warn); }
.audit-issue--info     { border-left-color: var(--color-primary); }
.audit-issue__label--critical { color: var(--color-danger); font-weight: 700; }
.audit-issue__label--warning  { color: var(--color-warn); font-weight: 700; }
.audit-issue__label--info     { color: var(--color-primary); font-weight: 700; }

/* ── ICONA progress bar (shared utility) ───────────────────────────
   A thin, theme-aware track + fill pair used for completion / readiness /
   coverage signals across apps. The fill is a green→blue gradient that
   ramps from var(--color-success) to var(--color-primary) — same hue
   journey as the Schema Coverage ribbon (its first home).

   Markup:
     <div class="icona-progress" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100">
       <div class="icona-progress__fill" style="width: 73%"></div>
     </div>

   Optional size modifiers: --sm (4px) and --lg (10px). Default is 6px. */
.icona-progress {
  height: 6px;
  background: var(--bg-surface-3, var(--color-surface-alt));
  border-radius: 3px;
  overflow: hidden;
}
.icona-progress--sm { height: 4px; border-radius: 2px; }
.icona-progress--lg { height: 10px; border-radius: 5px; }
.icona-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--color-success), var(--color-primary));
  transition: width .3s ease-out;
}

/* ── Activity indicator ───────────────────
   Compact chip that appears only when background work is in flight.
   Clicking it goes to /activity/. The count updates via JS polling
   /activity/summary/ every 20s. When `.activity-indicator--running`
   is toggled on, the dot gains a soft pulse so "currently running"
   reads differently from "queued but not yet started". */
.activity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: background .15s;
  white-space: nowrap;
}
.activity-indicator:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}
.activity-indicator[hidden] { display: none; }
.activity-indicator__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.activity-indicator--running .activity-indicator__dot {
  background: #4ade80;  /* success-green; visible against both navy + dark */
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: activity-pulse 2s infinite;
}
/* Slots-full state: every worker is busy AND new tasks are queueing
   behind them — amber pulse signals "throughput-bound, not idle" so
   the user can tell at a glance whether to wait or kick something. */
.activity-indicator--full .activity-indicator__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: activity-pulse-warn 2s infinite;
}
/* Stuck state: rows show queued in the model but no Celery worker
   has pending work for them — orphaned. Static amber (no pulse) so
   the user can see this is *not* progressing the way "running" or
   "queue forming" does. Click-through goes to Activity for cleanup. */
.activity-indicator--stuck .activity-indicator__dot {
  background: #f59e0b;
  box-shadow: none;
  animation: none;
}

/* ── Loading states (cross-app) ─────────────────────────────────
   Two patterns for "click + wait" surfaces:
   1) .nav-progress — slim top bar that fires on internal link
      clicks, closes the perceptual gap during navigation
   2) .is-busy — applied to any submit button via [data-busy-text]
      on form submit, swaps the label and disables the control */
.nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--color-primary, #3b82f6);
  z-index: 9999;
  pointer-events: none;
  transition: width .35s ease-out;
}
.nav-progress[hidden] { display: none; }
.nav-progress--active { width: 70%; }
.nav-progress--done {
  width: 100%;
  opacity: 0;
  transition: width .15s ease, opacity .35s ease .15s;
}

/* Busy button: dim + show inline spinner, cursor goes wait. The
   spinner uses currentColor so it picks up the button's text color
   in any theme without a light/dark variant. */
.is-busy {
  cursor: wait !important;
  opacity: 0.75;
  pointer-events: none;
}
.is-busy::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 0.5em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.6s linear infinite;
  vertical-align: -2px;
}
@keyframes busy-spin {
  to { transform: rotate(360deg); }
}
.activity-indicator__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.activity-indicator__label {
  opacity: 0.75;
}
@keyframes activity-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0); }
}
@keyframes activity-pulse-warn {
  0%   { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0); }
}

/* ── Theme toggle ─────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.theme-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 1px;
}
/* Icon visibility — show moon in light mode (click → dark),
   show sun in dark mode (click → light). */
.theme-toggle__icon { display: none; }
.theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }

/* ── Hamburger (hidden on desktop) ────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
}
.nav-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}

/* ── Messages ──────────────────────────────── */
.messages { max-width: 1280px; margin: 1rem auto 0; padding: 0 1.5rem; }
.message {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: .5rem;
  font-size: .9rem;
}
.message--success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.message--error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.message--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.message--info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── Main content ──────────────────────────── */
.site-main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  margin: -0.5rem 0 0.9rem -0.55rem;
  border-radius: 4px;
  transition: color .12s ease, background .12s ease;
}
.back-link:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
  text-decoration: none;
}
.back-link[hidden] { display: none; }

/* ── Version diff component ─────────────────────────────────── */
.version-diff {
  margin: 1rem 0;
}
.version-diff__summary {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.84rem;
  color: var(--color-muted);
  flex-wrap: wrap;
}
.version-diff__chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.version-diff__chip--added    { color: var(--color-success); border-color: var(--color-success); }
.version-diff__chip--removed  { color: var(--color-danger);  border-color: var(--color-danger); }
.version-diff__chip--changed  { color: var(--color-warn);    border-color: var(--color-warn); }
.version-diff__chip--unchanged{ color: var(--color-muted); }

.version-diff__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: fixed;
}
.version-diff__table th,
.version-diff__table td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.55rem;
  vertical-align: top;
  word-break: break-word;
}
.version-diff__table th {
  background: var(--color-surface-alt);
  text-align: left;
  font-weight: 600;
  color: var(--color-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.version-diff__th-path { width: 22%; }
.version-diff__th-old, .version-diff__th-new { width: 39%; }

.version-diff__path code {
  font-size: 0.78rem;
  color: var(--color-text);
  background: transparent;
}
.version-diff__value {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  color: var(--color-text);
}
.version-diff__placeholder {
  color: var(--color-muted);
  font-style: italic;
}

.version-diff__row--added    { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.version-diff__row--removed  { background: color-mix(in srgb, var(--color-danger)  8%, transparent); }
.version-diff__row--changed  { background: color-mix(in srgb, var(--color-warn)    8%, transparent); }
.version-diff__row--unchanged{ /* default neutral row */ }

.version-diff--hide-unchanged .version-diff__row--unchanged { display: none; }

.version-diff__toggle {
  margin-top: 0.5rem;
}
.version-diff__empty {
  text-align: center;
  color: var(--color-muted);
  padding: 1rem;
}

/* ── Prose diff (BlogDraft / ContentDraft compare) ───────────────────── */
.prose-diff {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.prose-diff__section {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.prose-diff__section[open] {
  background: var(--color-surface);
}
.prose-diff__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  list-style: none;
  background: var(--color-surface-alt);
  border-radius: 6px;
  flex-wrap: wrap;
}
.prose-diff__section[open] .prose-diff__summary {
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--color-border);
}
.prose-diff__summary::-webkit-details-marker { display: none; }
.prose-diff__summary::before {
  content: "▸";
  color: var(--color-muted);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
.prose-diff__section[open] .prose-diff__summary::before {
  transform: rotate(90deg);
  display: inline-block;
}
.prose-diff__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.92rem;
  margin-right: auto;
}
.prose-diff__chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.prose-diff__chip--added    { color: var(--color-success); border-color: var(--color-success); }
.prose-diff__chip--removed  { color: var(--color-warn);    border-color: var(--color-warn); }
.prose-diff__chip--unchanged{ color: var(--color-muted); }
.prose-diff__body {
  padding: 0.75rem 0.9rem;
}
.prose-diff__placeholder {
  margin: 0 0 0.5rem;
  color: var(--color-muted);
  font-size: 0.84rem;
  font-style: italic;
}
.prose-diff__inline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.prose-diff__eq { color: var(--color-text); }
.prose-diff__ins {
  text-decoration: none;
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-text);
  padding: 0.05rem 0.1rem;
  border-radius: 2px;
  border-bottom: 2px solid var(--color-success);
}
.prose-diff__del {
  text-decoration: line-through;
  background: color-mix(in srgb, var(--color-warn) 18%, transparent);
  color: var(--color-text);
  padding: 0.05rem 0.1rem;
  border-radius: 2px;
  text-decoration-color: var(--color-warn);
  text-decoration-thickness: 2px;
}
.prose-diff__empty {
  text-align: center;
  color: var(--color-muted);
  padding: 1rem;
  font-style: italic;
}

/* ── Page-client pill (deep-link client context) ─────────────────────
   Inline next to page h1. Surfaces the client this page is currently
   bound to via ?client=<uuid>. When that client differs from the
   operator's pinned client, also offers a "Pin to this client" form
   so they can sync without leaving the page. */
.page-client-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem 0.18rem 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
  vertical-align: middle;
  margin-left: 0.5rem;
}
.page-client-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent, #3b82f6);
  flex: 0 0 auto;
}
.page-client-pill__name { white-space: nowrap; }
.page-client-pill__pin-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.page-client-pill__pin-btn {
  background: none;
  border: none;
  padding: 0 0 0 0.4rem;
  margin: 0;
  border-left: 1px solid var(--color-border);
  color: var(--color-accent, #3b82f6);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.4;
}
.page-client-pill__pin-btn:hover { text-decoration: underline; }

/* ── Page header ───────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}
/* Subject suffix for page headers — used to append the client name
   to a generic page title (e.g. "Content Gap Analysis — Cambria LLP")
   without making the subject visually compete with the page name. */
.page-header__subject {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 0.85em;
  margin-left: 0.4em;
}
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}
.breadcrumb {
  display: inline-block;
  font-size: .875rem;
  color: var(--color-muted);
  margin-bottom: .5rem;
}
.breadcrumb:hover { color: var(--color-primary); }
.page-empty {
  color: var(--color-muted);
  font-size: .95rem;
}

/* ── Cards ─────────────────────────────────── */
.status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.status-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.status-card__title { font-weight: 600; font-size: 1rem; }
.status-card__body  { font-size: .9rem; color: var(--color-muted); margin-bottom: .75rem; }
.status-card__empty { font-size: .9rem; color: var(--color-muted); font-style: italic; margin-bottom: .75rem; }

/* ── Status badges ─────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-badge--connected    { background: #dcfce7; color: #15803d; }
.status-badge--disconnected { background: #fee2e2; color: #b91c1c; }
.status-badge--pending      { background: #fef3c7; color: #92400e; }

/* ── Dashboard grid ────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── Notices panel ─────────────────────────── */
.notices-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.notices-panel__heading { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }

/* ── Admin/Settings grids ──────────────────── */
.admin-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* ── Public pages (login, home, mfa, etc.) ─── */
.public-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 2rem 1rem;
}

.public-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
}

.public-card--hero {
  text-align: center;
  max-width: 540px;
  padding: 3rem 2.5rem;
}

.hero-heading {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: .5rem;
}

.hero-sub {
  font-size: 1rem;
  color: var(--color-muted);
  margin-bottom: 1.75rem;
  line-height: 1.7;
}

.card-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .25rem;
}

.card-sub {
  font-size: .9rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

.card-links {
  margin-top: 1rem;
  text-align: center;
  font-size: .875rem;
}

.public-footer-note {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--color-muted);
  text-align: center;
}

.mfa-hint {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--color-muted);
  text-align: center;
}

/* ── Forms ─────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .35rem;
  color: var(--color-text);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  font-size: .95rem;
  font-family: var(--font);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}

input[type="url"] {
  min-width: 28rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}
@media (max-width: 32rem) {
  input[type="url"] { min-width: 0; }
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.form-errors { margin-bottom: 1rem; }
.form-error  { color: var(--color-danger); font-size: .875rem; }
.field-error { color: var(--color-danger); font-size: .8rem; margin-top: .25rem; }

/* ── Buttons ────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .55rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn:active { opacity: .85; }
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.6);
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  opacity: .55;
}

.btn--primary   { background: var(--color-cta);       color: #fff; }
.btn--primary:hover { background: var(--color-cta-dk); }
.btn--secondary { background: var(--color-border);    color: var(--color-text); }
.btn--danger    { background: var(--color-danger);    color: #fff; }
.btn--danger:hover { background: var(--color-danger-dk); }

.btn--full { display: block; width: 100%; }
.btn--lg   { padding: .7rem 2rem; font-size: 1rem; }
.btn--sm   { padding: .35rem .75rem; font-size: .8rem; }

/* Single-hyphen aliases — keep both BEM and plain forms working.
   Templates across the app use .btn-primary / .btn-secondary / .btn-sm etc,
   which previously rendered as unstyled .btn because only the BEM --
   form was defined. Aliases fix that regression without template churn.
   Primary uses --color-cta (green) for confident CTA treatment across
   ICONA Hub — brand blue is reserved for links/nav chrome. */
.btn-primary   { background: var(--color-cta);       color: #fff; }
.btn-primary:hover { background: var(--color-cta-dk); }
.btn-secondary { background: var(--color-border);    color: var(--color-text); }
.btn-danger    { background: var(--color-danger);    color: #fff; }
.btn-danger:hover { background: var(--color-danger-dk); }
.btn-sm        { padding: .35rem .75rem; font-size: .8rem; }
.btn-lg        { padding: .7rem 2rem; font-size: 1rem; }
.btn-full      { display: block; width: 100%; }

/* ── MFA setup layout ──────────────────────── */
.mfa-setup-layout { max-width: 560px; }
.mfa-setup-card { }
.mfa-steps { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.mfa-steps li { margin-bottom: .75rem; font-size: .95rem; }
.manual-key {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .15rem .5rem;
  font-family: monospace;
  font-size: .9rem;
  word-break: break-all;
  margin-top: .25rem;
}
.qr-container {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}
.qr-container img {
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow);
}

/* ── Text link ─────────────────────────────── */
.text-link { color: var(--color-primary); font-size: .875rem; }

/* ── Status badge variants (Phase 3) ──────── */
.status-badge--error      { background: #fee2e2; color: #b91c1c; }
.status-badge--queued     { background: #f3f4f6; color: #6b7280; }
.status-badge--running    { background: #dbeafe; color: #1e40af; }
.status-badge--complete   { background: #dcfce7; color: #15803d; }
.status-badge--failed     { background: #fee2e2; color: #b91c1c; }
.status-badge--cancelled  { background: #f3f4f6; color: #6b7280; }
.status-badge--received   { background: #dbeafe; color: #1e40af; }
.status-badge--processing { background: #fef3c7; color: #92400e; }
.status-badge--processed  { background: #dcfce7; color: #15803d; }
.status-badge--role       { background: #f3f4f6; color: #374151; }
.status-badge--lg         { font-size: .9rem; padding: .35rem .75rem; }

/* ── Data table ───────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.data-table th {
  text-align: left;
  padding: .5rem .75rem;
  font-weight: 600;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-border);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.data-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── Agent detail grid ────────────────────── */
.agent-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.agent-description {
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.agent-section-heading {
  font-size: .9rem;
  font-weight: 600;
  margin: 1rem 0 .5rem;
}
.agent-input-field {
  font-size: .9rem;
  margin-bottom: .5rem;
}
.agent-run-form { margin-top: 1.25rem; }

/* ── Job detail ───────────────────────────── */
.job-detail-status { margin-bottom: 1rem; }
.job-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.job-run-again { margin-top: 1rem; }

/* ── Detail list (key-value pairs) ────────── */
.detail-list { font-size: .9rem; }
.detail-list dt {
  font-weight: 600;
  color: var(--color-muted);
  margin-top: .5rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.detail-list dd { margin: .15rem 0 0; }

/* ── Code block ───────────────────────────── */
.code-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .75rem 1rem;
  font-family: "SF Mono", Menlo, monospace;
  font-size: .85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.code-block--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* ── Error card variant ───────────────────── */
.status-card--error { border-color: #fecaca; }

/* ── Filter bar ───────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}

/* ── Pagination ───────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.pagination-info {
  font-size: .875rem;
  color: var(--color-muted);
}

/* ── Upload form ──────────────────────────── */
.upload-form-card { margin-bottom: 1rem; }
.upload-dropzone { }
.upload-hint {
  font-size: .8rem;
  color: var(--color-muted);
  margin-bottom: .75rem;
}
input[type="file"] {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  font-size: .9rem;
  font-family: var(--font);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  margin-bottom: .5rem;
}

/* ── Dashboard item (compact row) ─────────── */
.dashboard-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  padding: .35rem 0;
  flex-wrap: wrap;
}
.dashboard-item + .dashboard-item { border-top: 1px solid var(--color-border); }

/* ── Text helpers ─────────────────────────── */
.text-muted { color: var(--color-muted); font-size: .85rem; }
.status-card__meta { font-size: .85rem; color: var(--color-muted); margin-bottom: .75rem; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: .75rem 1rem;
  }
  .site-logo { flex: 1; }

  .nav-hamburger { display: flex; }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: .5rem 0;
  }
  .site-nav--open { display: flex; }

  /* Direct links in mobile */
  .site-nav > .nav-link {
    padding: .6rem 1rem;
  }

  /* Dropdowns in mobile: full-width, static */
  .nav-dropdown { position: static; display: block; }
  .nav-dropdown__trigger {
    width: 100%;
    padding: .6rem 1rem;
    justify-content: space-between;
  }
  .nav-dropdown__panel {
    display: none;
    position: static;
    box-shadow: none;
    background: rgba(0,0,0,.15);
    border-radius: 0;
    padding: 0;
  }
  .nav-dropdown:hover > .nav-dropdown__panel,
  .nav-dropdown:focus-within > .nav-dropdown__panel {
    display: block;
    padding: .25rem 0;
  }
  .nav-dropdown__item {
    padding: .5rem 1rem .5rem 2rem;
  }

  /* Client Hub responsive */
  .facts-grid { grid-template-columns: 1fr; }
  .hub-header__meta { flex-direction: column; gap: .25rem; }

  /* Home Workflow Hub responsive */
  .attention-item { flex-direction: column; }
  .attention-item__right { width: 100%; justify-content: flex-end; }
  .home-header__counts { flex-direction: column; }
  .platform-status-row { flex-direction: column; }

  /* App launcher in mobile: full-width stacked */
  .app-launcher { display: block; }
  .app-launcher__trigger {
    width: 100%;
    padding: .6rem 1rem;
    justify-content: flex-start;
  }
  .app-launcher__panel {
    position: fixed;
    top: auto;
    left: 1rem;
    right: 1rem;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .app-launcher__grid {
    flex-direction: column;
    gap: .75rem;
  }
  .app-launcher__group { min-width: 0; }

  /* User menu in mobile: full-width, not right-aligned */
  .nav-dropdown--user {
    margin-left: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: .25rem;
    padding-top: .25rem;
  }
}

@media (max-width: 640px) {
  .site-main { padding: 1.25rem 1rem; }
  .public-card { padding: 1.75rem 1.25rem; }
  .dashboard-grid, .admin-grid, .settings-grid, .agent-detail-grid { grid-template-columns: 1fr; }
}

/* ── Badge (inline status labels) ─────────── */
.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-queued     { background: #f3f4f6; color: #6b7280; }
.badge-preflight  { background: #e0e7ff; color: #4338ca; }
.badge-review     { background: #fef3c7; color: #92400e; }
.badge-crawling   { background: #dbeafe; color: #1e40af; }
.badge-scoring    { background: #dbeafe; color: #1e40af; }
.badge-ready      { background: #dcfce7; color: #15803d; }
.badge-failed     { background: #fee2e2; color: #b91c1c; }
.badge-generating { background: #dbeafe; color: #1e40af; }
.badge-ok         { background: #dcfce7; color: #15803d; }
.badge-warning    { background: #fef3c7; color: #92400e; }
.badge-error      { background: #fee2e2; color: #b91c1c; }
.badge-active     { background: #dcfce7; color: #15803d; }
.badge-success    { background: #dcfce7; color: #15803d; }
.badge-partial    { background: #fef3c7; color: #92400e; }
.badge-pending    { background: #f3f4f6; color: #6b7280; }

/* Blog request status badges */
.badge-draft              { background: #f3f4f6; color: #6b7280; }
.badge-generating_topics  { background: #dbeafe; color: #1e40af; }
.badge-topics_generated   { background: #e0e7ff; color: #4338ca; }
.badge-topic_approved     { background: #dbeafe; color: #1e40af; }
.badge-generating_article { background: #dbeafe; color: #1e40af; }
.badge-article_generated  { background: #dcfce7; color: #15803d; }
.badge-internal_review    { background: #fef3c7; color: #92400e; }
.badge-client_review      { background: #fef3c7; color: #92400e; }
.badge-approved           { background: #dcfce7; color: #15803d; }
.badge-waiting_on_schema  { background: #fef3c7; color: #92400e; }
.badge-ready_for_publish  { background: #dcfce7; color: #15803d; }
.badge-published          { background: #dbeafe; color: #1e40af; }
.badge-generated          { background: #dcfce7; color: #15803d; }

/* ── Blog Writer sub-nav ─────────────────── */
/* Blog Writer subnav — dark-native (was hardcoded #f1f3f5 light strip).
   Used across every Blog Writer page via _subnav.html partial. */
.blog-subnav {
  display: flex;
  gap: .25rem;
  margin-bottom: .75rem;
  padding: .35rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.blog-subnav__link {
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color .12s, background .12s, border-color .12s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.blog-subnav__link:hover {
  color: var(--color-text);
  background: var(--hover-surface, var(--bg-surface-2, var(--color-surface-alt)));
  text-decoration: none;
}
/* Active tab \u2014 integrated into the strip rather than outlined like a
   standalone button. Accent text + soft tinted fill, no border. */
.blog-subnav__link--active {
  color: var(--color-primary);
  background: var(--color-info-soft, var(--accent-muted, transparent));
  border-color: transparent;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
/* Badges \u2014 semantic family. All variants now use solid color with white
   text so the number is always readable (the previous soft-bg + matching
   text collapsed to an unreadable red blob at small sizes). */
.blog-subnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 .4rem;
  height: 18px;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 9px;
  letter-spacing: .02em;
  line-height: 1;
}
.blog-subnav__badge--alert {
  background: var(--color-danger);
  color: #fff;
}
.blog-subnav__badge--info {
  background: var(--color-primary);
  color: #fff;
}
.blog-subnav__badge--muted {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* ── Blog Workflow Bar ───────────────────── */
.blog-workflow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  overflow-x: auto;
}
.blog-workflow-step {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  flex-shrink: 0;
}
.blog-workflow-step + .blog-workflow-step::before {
  content: "\203A";
  color: var(--color-border);
  font-size: 1.2rem;
  margin-right: .25rem;
}
.blog-workflow-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}
.blog-workflow-step__label {
  font-size: .8rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.blog-workflow-step--done .blog-workflow-step__dot { background: var(--color-success); }
.blog-workflow-step--done .blog-workflow-step__label { color: var(--color-success); }
.blog-workflow-step--active .blog-workflow-step__dot { background: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.blog-workflow-step--active .blog-workflow-step__label { color: var(--color-primary); font-weight: 600; }
.blog-workflow-step--failed .blog-workflow-step__dot { background: var(--color-danger); }
.blog-workflow-step--failed .blog-workflow-step__label { color: var(--color-danger); }

/* ── Client Hub ───────────────────────────── */
.hub-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.hub-header__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .25rem;
}
.hub-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .9rem;
  color: var(--color-muted);
  margin-bottom: .75rem;
}
.hub-header__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.hub-section {
  margin-bottom: 2rem;
}
.hub-section__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--color-border);
}

/* Readiness strip */
.readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.readiness-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.readiness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.readiness-dot--complete    { background: var(--color-success); }
.readiness-dot--incomplete  { background: var(--color-warn); }
.readiness-dot--missing     { background: var(--color-danger); }
.readiness-dot--not_yet_run { background: #9ca3af; }
.readiness-dot--not_applicable { background: #d1d5db; }

/* Hub placeholder (for sections not yet wired) */
.hub-placeholder {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--color-muted);
  font-size: .9rem;
  font-style: italic;
}

/* Module card enhancements */
.module-card { position: relative; }
.module-card--placeholder { opacity: .6; }
.module-card__coming-soon {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: .15rem .4rem;
  border-radius: 3px;
  margin-left: .5rem;
}

/* Hub status badges (shared vocabulary) */
.hub-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hub-badge--success  { background: #dcfce7; color: #15803d; }
.hub-badge--warning  { background: #fef3c7; color: #92400e; }
.hub-badge--danger   { background: #fee2e2; color: #b91c1c; }
.hub-badge--info     { background: #dbeafe; color: #1e40af; }
.hub-badge--muted    { background: #f3f4f6; color: #6b7280; }

/* Activity feed */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid #eee;
  font-size: .88rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-item__type {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: .03em;
}
.activity-item__time {
  font-size: .8rem;
  color: var(--color-muted);
  white-space: nowrap;
  margin-left: 1rem;
}

/* Facts grid */
.facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  font-size: .9rem;
}
.facts-label { color: var(--color-muted); font-size: .82rem; }
.facts-value { margin-top: 2px; }
.facts-value--empty { color: #aaa; font-style: italic; }

/* Reports list */
.reports-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid #eee;
  font-size: .88rem;
}
.reports-item:last-child { border-bottom: none; }

/* Admin tools card */
.admin-tools-card {
  background: #f8f9fb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.admin-tools-card__title {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: .5rem;
}
.admin-tools-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Client Data card grid */
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}
.data-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: .88rem;
}
.data-card__head {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #eee;
}
.data-card__dl {
  margin: 0;
}
.data-card__dl > div {
  display: flex;
  gap: .5rem;
  padding: .25rem 0;
  line-height: 1.4;
}
.data-card__dl dt {
  color: var(--color-muted);
  font-size: .8rem;
  min-width: 70px;
  flex-shrink: 0;
  font-weight: 400;
}
.data-card__dl dd {
  margin: 0;
  font-size: .85rem;
  word-break: break-word;
}
.data-card__empty {
  color: #b0b0b0;
  font-size: .82rem;
  font-style: italic;
  margin: .25rem 0 0;
}
.data-card__truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.data-card__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: .3rem;
  vertical-align: middle;
}
.data-card__dot--ok { background: var(--color-success); }
.data-card__dot--off { background: #ccc; }

/* Section title inline edit link */
.hub-section__edit {
  font-size: .82rem;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  margin-left: .35rem;
}
.hub-section__edit:hover { color: var(--color-primary); text-decoration: underline; }

/* Data card link (clickable URLs) */
.data-card__link {
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.data-card__link:hover { text-decoration: underline; }

/* Header edit link (text style, not button) */
.hub-header__link {
  font-size: .88rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: .35rem .65rem;
}
.hub-header__link:hover { text-decoration: underline; }

/* ── Home Workflow Hub ────────────────────── */
.home-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}
.home-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .15rem;
}
.home-header__subtitle {
  font-size: .9rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.home-header__counts {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.home-count-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: .85rem;
}
.home-count-chip__number { font-weight: 700; font-size: 1.1rem; }
.home-count-chip__label { color: var(--color-muted); font-size: .8rem; }
/* Semantic count chips — soft tinted background + semantic text colour.
   Uses --*-soft tokens so dark mode picks up restrained rgba fills
   automatically, light mode still gets the original pastel feel. */
.home-count-chip--danger { background: var(--color-danger-soft, #fee2e2); }
.home-count-chip--danger .home-count-chip__number { color: var(--color-danger); }
.home-count-chip--warning { background: var(--color-warn-soft, #fef3c7); }
.home-count-chip--warning .home-count-chip__number { color: var(--color-warn); }
.home-count-chip--info { background: var(--color-info-soft, #dbeafe); }
.home-count-chip--info .home-count-chip__number { color: var(--color-primary); }

/* Attention items */
.attention-list { display: flex; flex-direction: column; gap: .5rem; }
.attention-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .88rem;
}
.attention-item--high { border-left: 4px solid var(--color-danger); }
.attention-item--medium { border-left: 4px solid var(--color-warn); }
.attention-item__left {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  flex: 1;
}
.attention-item__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.attention-item__client { font-weight: 600; }
.attention-item__sep { color: var(--color-muted); margin: 0 .15rem; }
.attention-item__title { font-weight: 500; }
.attention-item__summary { font-size: .82rem; color: var(--color-muted); margin-top: .15rem; }
.attention-item__module {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Platform status row */
.platform-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.platform-status-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .85rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s;
}
.platform-status-chip:hover { border-color: var(--color-primary); text-decoration: none; }
.platform-status-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.platform-status-chip--healthy .platform-status-chip__dot { background: var(--color-success); }
.platform-status-chip--danger .platform-status-chip__dot { background: var(--color-danger); }
.platform-status-chip--warning .platform-status-chip__dot { background: var(--color-warn); }
.platform-status-chip--muted .platform-status-chip__dot { background: #9ca3af; }
.platform-status-chip__name { font-weight: 500; }
.platform-status-chip__summary { color: var(--color-muted); font-size: .8rem; }

/* Shortcut grid */
.shortcut-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.shortcut-btn {
  display: inline-block;
  padding: .45rem .9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.shortcut-btn:hover {
  border-color: var(--color-primary);
  background: #f0f4ff;
  text-decoration: none;
}

/* ── Focus Cards (Dashboard Where to Focus) ──── */
.focus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.focus-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  border-left: 4px solid #ccc;
}
.focus-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
}
.focus-card--green { border-left-color: #2e7d32; }
.focus-card--yellow { border-left-color: #e6a817; }
.focus-card--red { border-left-color: #c62828; }
.focus-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.focus-card__name {
  font-weight: 600;
  font-size: .95rem;
  color: #1a2b4a;
}
.focus-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}
.focus-card--green .focus-card__dot { background: #2e7d32; }
.focus-card--yellow .focus-card__dot { background: #e6a817; }
.focus-card--red .focus-card__dot { background: #c62828; }
.focus-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.focus-card__badge {
  display: inline-block;
  font-size: .72rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: #eef2f7;
  color: #4a6fa5;
}
.focus-card__badge--stage {
  background: #f0f7f0;
  color: #2e7d32;
}
.focus-card__badge--warn {
  background: #fff8e1;
  color: #b8860b;
}
.focus-card__reason {
  font-size: .83rem;
  color: #555;
  line-height: 1.35;
  margin-bottom: 8px;
}
.focus-card__cta {
  font-size: .8rem;
  color: var(--color-primary);
  font-weight: 500;
}

/* ── App Cards (Dashboard App Services) ───────── */
.app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.app-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.app-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  text-decoration: none;
}
.app-card__name {
  font-weight: 600;
  font-size: .88rem;
  color: #1a2b4a;
  margin-bottom: 4px;
}
.app-card__desc {
  font-size: .78rem;
  color: #666;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────────
   Overview page redesign (2026-04-23)
   Replaces the previous "home-header / hub-section / focus-card / app-card
   / platform-status-chip" stack with a tighter operational dashboard:
     1. Slim header
     2. KPI summary strip
     3. Promoted setup-tasks action queue
     4. Restructured client cards (semantic rail + status badge inside)
     5. App tiles with proper hover states + optional category labels
     6. Integration row with clearer hierarchy
   The old classes still exist in this file (used by other pages); only
   the Overview template's class usage changed.
   ───────────────────────────────────────────────────────────────────── */

/* === Slim header ─────────────────────────────────────────────────── */
.overview-header {
  margin: 0 0 1.25rem;
  padding: 0 .25rem;
}
.overview-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.overview-header__subtitle {
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0;
}
.overview-header__subtitle a { font-weight: 500; }

/* === KPI summary strip ─────────────────────────────────────────────
   Refinement v2: number is the dominant element (2rem, neutral
   colour); label is small + uppercase + tertiary so it recedes.
   Semantic meaning lives on the small left rail only — pulling
   colour off the number stops the strip from reading as five
   traffic lights in a row. */
.overview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .65rem;
  margin-bottom: 1.25rem;
}
.overview-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: border-color .15s;
}
.overview-kpi__number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -.02em;
}
.overview-kpi__total {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0;
}
.overview-kpi__label {
  font-size: .68rem;
  color: var(--text-tertiary, var(--color-muted));
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
/* Semantic variants — colour ONLY on the rail. Number stays neutral
   so a row of "0 / 3 / 9 / 12 / 4 of 5" reads as data, not alarm. */
.overview-kpi--danger  { border-left-color: var(--color-danger); }
.overview-kpi--warning { border-left-color: var(--color-warn); }
.overview-kpi--success { border-left-color: var(--color-success); }
.overview-kpi--info    { border-left-color: var(--color-primary); }

/* === Action queue (promoted setup tasks) ──────────────────────────
   Refinement v2: tighter padding (banner reads sharp, not bulky);
   "View tasks" rendered as a clearer secondary-button-style chip. */
.overview-action-queue {
  margin-bottom: 1.25rem;
}
.action-queue {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warn);
  border-radius: var(--radius);
  overflow: hidden;
}
.action-queue__summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.action-queue__summary::-webkit-details-marker { display: none; }
.action-queue__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn);
  border-radius: 50%;
  font-weight: 700;
  font-size: .82rem;
}
.action-queue__body { flex: 1; min-width: 0; }
.action-queue__title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.action-queue__hint {
  font-size: .76rem;
  color: var(--color-muted);
  margin-top: .1rem;
  line-height: 1.35;
}
.action-queue__expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: background .15s, border-color .15s;
}
.action-queue:hover .action-queue__expand {
  background: var(--hover-surface, var(--color-bg));
  border-color: var(--border-strong, var(--color-muted));
}
.action-queue[open] .action-queue__expand::after { content: "▴"; font-size: .7rem; }
.action-queue:not([open]) .action-queue__expand::after { content: "▾"; font-size: .7rem; }
.action-queue__list {
  border-top: 1px solid var(--color-border);
  padding: .5rem 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.action-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.action-queue-item:last-child { border-bottom: none; }
.action-queue-item__title {
  font-size: .85rem;
  color: var(--color-text);
}
.action-queue-item__client { font-weight: 600; }
.action-queue-item__sep { color: var(--color-muted); margin: 0 .3rem; }
.action-queue-item__summary {
  font-size: .78rem;
  color: var(--color-muted);
  margin-top: .15rem;
}
.action-queue-item__right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.action-queue-item__module {
  font-size: .7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* === Section wrapper ─────────────────────────────────────────────── */
.overview-section {
  margin-bottom: 1.25rem;
}
.overview-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-border);
}
.overview-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.005em;
}
/* === Compact client list ──────────────────────────────────────────
   Replaces the v2 client-card grid. One row per client, status as a
   small inline pill (no left rail, no big card). Quieter visual
   weight so the page reads as a status summary, not a launcher. */
.overview-client-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}
.overview-client-row + .overview-client-row {
  border-top: 1px solid var(--color-border);
}
.overview-client-row__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .85rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background .12s;
}
.overview-client-row__link:hover {
  background: var(--hover-surface, var(--color-surface-alt));
  text-decoration: none;
}
.overview-client-row__name {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-client-row__status {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.overview-client-row__status--red    { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger); }
.overview-client-row__status--yellow { background: var(--color-warn-soft, #fef3c7);   color: var(--color-warn); }
.overview-client-row__status--green  { background: var(--color-success-soft, #dcfce7); color: var(--color-success); }
.overview-client-row__arrow {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: .85rem;
}
.overview-client-row__link:hover .overview-client-row__arrow { color: var(--color-primary); }

/* === Integration row ──────────────────────────────────────────────
   Refinement v2: slightly tighter padding, dot baseline-aligned with
   text. */
.integration-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.integration-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .78rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s;
  line-height: 1.2;
}
.integration-pill:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.integration-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-muted);
  flex-shrink: 0;
}
.integration-pill--healthy .integration-pill__dot { background: var(--color-success); }
.integration-pill--warning .integration-pill__dot { background: var(--color-warn); }
.integration-pill--danger  .integration-pill__dot { background: var(--color-danger); }
.integration-pill--muted   .integration-pill__dot { background: var(--color-muted); }
.integration-pill__name { font-weight: 600; }
.integration-pill__sep { color: var(--color-muted); }
.integration-pill__status { color: var(--color-muted); font-size: .76rem; }

/* === Empty state ─────────────────────────────────────────────────── */
.overview-empty {
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-muted);
  font-size: .85rem;
}

/* ─────────────────────────────────────────────────────────────────────
   My Work page redesign (2026-04-23)
   Cross-app operational inbox. Distinct from Overview (passive
   portfolio state) — this surface is actionable: status pills lead,
   dismiss is one click, sections sort by priority.
   ───────────────────────────────────────────────────────────────────── */

/* === Slim header band ─────────────────────────────────────────────── */
.my-work-header {
  margin: 0 0 1rem;
  padding: 0 .25rem;
}
.my-work-header__title-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.my-work-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.01em;
}
.my-work-header__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: .15rem 0 0;
}
.my-work-header__back {
  margin-left: auto;
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
}
.my-work-header__back:hover { text-decoration: underline; }
/* Context badges — client-scoped or admin-bypass mode markers */
.my-work-context {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-info-soft, #dbeafe);
  color: var(--color-primary);
  border: 1px solid var(--color-info-border, transparent);
}
.my-work-context--bypass {
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn);
  border-color: var(--color-warn-border, transparent);
}

/* === Compact summary chips ───────────────────────────────────────── */
.my-work-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
  padding: 0 .25rem;
}
.work-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .76rem;
  line-height: 1.2;
  color: var(--color-text);
}
.work-chip__num {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-text);
  letter-spacing: -.005em;
}
.work-chip__label {
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .65rem;
}
/* Semantic emphasis: errors + blocked carry visible accent (left rail
   colour pulled into a left border); review/in-progress quieter; queued
   stays neutral. */
.work-chip--danger  { border-left: 3px solid var(--color-danger); }
.work-chip--danger  .work-chip__num { color: var(--color-danger); }
.work-chip--warning { border-left: 3px solid var(--color-warn); }
.work-chip--warning .work-chip__num { color: var(--color-warn); }
.work-chip--info    { border-left: 3px solid var(--color-primary); }
.work-chip--info    .work-chip__num { color: var(--color-primary); }
.work-chip--neutral { border-left: 3px solid var(--color-border); }
.work-chip--quiet   { opacity: .85; }
.work-chip--total   { border-left: 3px solid var(--border-strong, var(--color-muted)); }

/* === Messages strip ──────────────────────────────────────────────── */
.my-work-messages { margin-bottom: 1rem; }
.my-work-message {
  padding: .55rem .85rem;
  border-radius: var(--radius);
  margin-bottom: .4rem;
  background: var(--color-info-soft, #dbeafe);
  color: var(--color-primary);
  font-size: .85rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
}
.my-work-message--error {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
  border-left-color: var(--color-danger);
}

/* === App section card ────────────────────────────────────────────── */
.inbox-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .85rem;
  overflow: hidden;
}
.inbox-section__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.inbox-section__title-cluster {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex: 1;
  min-width: 0;
}
.inbox-section__title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-section__count {
  display: inline-flex;
  align-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-surface-3, #eef1f6);
  color: var(--color-text-soft);
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
}
.inbox-section__actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.inbox-action {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  font-size: .76rem;
  border-radius: var(--radius);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.inbox-action--primary { color: var(--color-primary); font-weight: 500; }
.inbox-action--primary:hover { background: var(--color-info-soft, transparent); }
.inbox-action--ghost { color: var(--color-muted); }
.inbox-action--ghost:hover { color: var(--color-text); background: var(--bg-surface-3, transparent); }
.inbox-action--quiet {
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.inbox-action--quiet:hover {
  color: var(--color-danger);
  border-color: var(--color-danger-border, var(--color-danger));
  background: var(--color-danger-soft, transparent);
}
.inbox-inline-form { display: inline; margin: 0; }

/* === Item rows — grid for clean column alignment ─────────────────── */
.inbox-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inbox-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  align-items: center;
  gap: .85rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--hover-surface, var(--bg-surface-2)); }

/* Status pill — first scan anchor in each row. */
.inbox-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  width: fit-content;
}
.inbox-pill--error            { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger); }
.inbox-pill--blocked          { background: var(--color-warn-soft, #fef3c7); color: var(--color-warn); }
.inbox-pill--ready_for_review { background: var(--color-info-soft, #dbeafe); color: var(--color-primary); }
.inbox-pill--in_progress      { background: var(--bg-surface-3, #eef1f6); color: var(--color-text-soft); }
.inbox-pill--queued           { background: var(--bg-surface-3, #eef1f6); color: var(--color-muted); }

.inbox-row__main {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.inbox-row__title {
  font-size: .87rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row__title:hover { text-decoration: underline; color: var(--color-primary); }
.inbox-row__title--plain:hover { text-decoration: none; }
.inbox-row__sub {
  font-size: .76rem;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: baseline;
}
.inbox-row__sep { color: var(--color-border); }

.inbox-row__age {
  font-size: .75rem;
  color: var(--color-muted);
  white-space: nowrap;
  text-align: right;
}
.inbox-row__actions {
  display: flex;
  align-items: center;
}
.inbox-row__dismiss {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.inbox-row__dismiss:hover {
  background: var(--color-danger-soft, transparent);
  color: var(--color-danger);
  border-color: var(--color-danger-border, var(--color-danger));
}
.inbox-row__dismiss--restore:hover {
  background: var(--color-success-soft, transparent);
  color: var(--color-success);
  border-color: var(--color-success-border, var(--color-success));
}

.inbox-section__footer {
  padding: .5rem .9rem;
  font-size: .76rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.inbox-section__footer a { color: var(--color-primary); text-decoration: none; }
.inbox-section__footer a:hover { text-decoration: underline; }

/* === Empty state ─────────────────────────────────────────────────── */
.inbox-empty {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem 1rem;
  text-align: center;
  margin-bottom: 1rem;
}
.inbox-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto .65rem;
}
.inbox-empty__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .25rem;
}
.inbox-empty__sub {
  font-size: .85rem;
  color: var(--color-muted);
  margin: 0;
}

/* === Archive sections (Recently dismissed + Apps with no open work) === */
.inbox-archive {
  margin-top: .85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.inbox-archive__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: .8rem;
  color: var(--color-text-soft);
  font-weight: 500;
}
.inbox-archive__summary::-webkit-details-marker { display: none; }
.inbox-archive__chevron {
  font-size: .65rem;
  color: var(--color-muted);
  transition: transform .15s;
  display: inline-block;
}
.inbox-archive[open] .inbox-archive__chevron { transform: rotate(90deg); }
.inbox-archive__count {
  margin-left: auto;
  display: inline-flex;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-3, #eef1f6);
  color: var(--color-muted);
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 700;
}
.inbox-archive__hint {
  padding: 0 .9rem .5rem;
  font-size: .76rem;
  color: var(--color-muted);
  margin: 0;
  border-top: 1px solid var(--color-border);
  padding-top: .5rem;
}
.inbox-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.inbox-archive__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.inbox-archive__row:last-child { border-bottom: none; }
.inbox-archive__main { flex: 1; min-width: 0; }
.inbox-archive__title {
  font-size: .82rem;
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-archive__meta {
  font-size: .72rem;
  color: var(--color-muted);
  margin-top: .1rem;
}

/* === Mobile fallback: collapse the inbox-row grid ───────────────── */
@media (max-width: 640px) {
  .inbox-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "pill main"
      "age  actions";
    row-gap: .35rem;
  }
  .inbox-pill { grid-area: pill; }
  .inbox-row__main { grid-area: main; }
  .inbox-row__age { grid-area: age; text-align: left; }
  .inbox-row__actions { grid-area: actions; justify-self: end; }
}

/* ─────────────────────────────────────────────────────────────────────
   Clients list page redesign (2026-04-23)
   Polished admin index — table-first, dark-mode-native filter
   toolbar, restrained pills, refined name + actions columns.
   Subordinate to the Client Hub in richness; kept as a fast
   lookup/navigation surface.
   ───────────────────────────────────────────────────────────────────── */

/* === Page header ─────────────────────────────────────────────────── */
.clients-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0 .25rem;
  flex-wrap: wrap;
}
.clients-page__title-block {
  flex: 1;
  min-width: 0;
}
.clients-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.clients-page__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.clients-page__cta {
  flex-shrink: 0;
  align-self: center;
}

/* === Filter toolbar — dark-native ────────────────────────────────── */
.clients-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.clients-toolbar__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  font-weight: 600;
  margin-right: .15rem;
}
.clients-toolbar__select {
  width: auto;
  min-width: 160px;
  padding: 4px 8px;
  font-size: .82rem;
  height: 30px;
}
.clients-toolbar__apply {
  height: 30px;
  padding: 0 .85rem;
  line-height: 1;
}
.clients-toolbar__clear {
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
  margin-left: .15rem;
}
.clients-toolbar__clear:hover { text-decoration: underline; }

/* === Table — extends .data-table baseline ───────────────────────── */
.clients-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.clients-table {
  margin: 0;
  font-size: .85rem;
}
.clients-table thead th {
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--text-tertiary, var(--color-muted));
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.clients-table tbody td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.clients-table__row {
  transition: background .12s;
}
.clients-table__row:hover {
  background: var(--hover-surface, var(--bg-surface-2));
}
.clients-table tbody tr:last-child td { border-bottom: none; }

/* Name column — primary text, link affordance */
.clients-table__col-name { width: 22%; }
.clients-table__name { min-width: 0; }
.clients-table__name-link {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.005em;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.clients-table__name-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Location column — muted secondary text */
.clients-table__col-loc { width: 20%; }
.clients-table__loc { color: var(--color-text-soft); font-size: .82rem; }
.clients-table__loc-empty { color: var(--text-tertiary, var(--color-muted)); }

/* Status column */
.clients-table__col-status { width: 90px; }

/* Actions column — right-aligned, consistent spacing */
.clients-table__col-actions { width: 130px; }
.clients-table__actions {
  text-align: right;
  white-space: nowrap;
}
.clients-table__action {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  font-size: .76rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.clients-table__action--edit {
  color: var(--color-primary);
  font-weight: 500;
  margin-right: .35rem;
}
.clients-table__action--edit:hover {
  background: var(--color-info-soft, transparent);
  text-decoration: none;
}
.clients-table__action--si {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  font-weight: 600;
  letter-spacing: .03em;
}
.clients-table__action--si:hover {
  background: var(--hover-surface, var(--color-bg));
  border-color: var(--border-strong, var(--color-muted));
  color: var(--color-text);
  text-decoration: none;
}
.clients-table__action--pin {
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  font-weight: 500;
  margin-right: .35rem;
  cursor: pointer;
}
.clients-table__action--pin:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.clients-table__action--pinned {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Pinned-client scope notice (above auto-scoped list views) ──── */
.scope-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.4rem 0.8rem;
  background: var(--color-info-soft, rgba(37, 99, 235, 0.1));
  border-left: 3px solid var(--color-primary, #2563eb);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.scope-notice__link {
  color: var(--color-primary, #2563eb);
  text-decoration: underline;
}
.scope-notice__link:hover { text-decoration: none; }

/* === Restrained pills ────────────────────────────────────────────────
   New pill family scoped to the Clients list. Keeps the legacy
   .badge-* classes intact for other admin tables that still use them.
   Restrained semantic fills + uppercase typography for a calmer feel
   than the old pastel pills. */
.client-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.45;
  white-space: nowrap;
}
.client-pill--classification {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 1px 7px;
}
.client-pill--stage {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
}
.client-pill--warning {
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn);
}
.client-pill--muted {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
}
.client-pill--success {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
}
.client-pill--danger {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
}
/* "Unclassified" / "Not Set" — quietest. Sentence-cased not uppercase
   so it reads as "no value yet" rather than as a real status. */
.client-pill--empty {
  background: transparent;
  color: var(--text-tertiary, var(--color-muted));
  border: 1px dashed var(--color-border);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .76rem;
}

/* === Empty state row inside the table ──────────────────────────── */
.clients-table__empty {
  text-align: center;
  padding: 2.25rem 1rem !important;
  color: var(--color-muted);
}
.clients-table__empty-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .35rem;
}
.clients-table__empty-sub {
  font-size: .82rem;
  color: var(--color-muted);
}
.clients-table__empty-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.clients-table__empty-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
   Client form workspace (Add Client / Edit Client) — 2026-04-23
   Long incremental setup form. Sticky section nav + completion progress
   strip support partial completion. Section cards / sub-cards establish
   clear nesting for repeating Locations + Contacts. All inline styles
   from the previous template are gone — class-based throughout.
   ───────────────────────────────────────────────────────────────────── */

/* === Page header ─────────────────────────────────────────────────── */
.client-form-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0 .25rem;
  flex-wrap: wrap;
}
.client-form-page__title-block { flex: 1; min-width: 0; }
.client-form-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.client-form-page__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.client-form-page__actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}

/* === Completion progress strip (edit mode) ───────────────────────── */
.client-form__completion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.client-form__completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
  font-size: .82rem;
  color: var(--color-text);
}
.client-form__completion-count { color: var(--color-muted); font-size: .78rem; font-weight: 500; }
.client-form__completion-bar { margin-bottom: .65rem; }
.client-form__completion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.completion-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  font-size: .7rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  transition: border-color .12s, background .12s;
}
.completion-chip:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.completion-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}
.completion-chip--done .completion-chip__dot { background: var(--color-success); }
.completion-chip--done { color: var(--color-text); }
.completion-chip--todo .completion-chip__dot { background: var(--text-tertiary, var(--color-muted)); opacity: .6; }
.completion-chip--todo { color: var(--color-muted); }

/* Knowledge Base coverage chips (Layer 2) — tonal status dots, theme-aware */
.completion-chip__dot--green  { background: var(--color-success); }
.completion-chip__dot--yellow { background: var(--color-warn); }
.completion-chip__dot--red    { background: var(--color-danger); }
.completion-chip__dot--gray   { background: var(--color-muted); opacity: .6; }
.completion-chip__note {
  opacity: .75;
  font-weight: normal;
  margin-left: .15rem;
}
.completion-chip__staleness {
  color: var(--color-warn);
  font-weight: normal;
  margin-left: .4rem;
}
.kb-coverage-strip__staleness {
  color: var(--color-warn);
  margin-left: .5rem;
}

/* Client Hub variant of the completion strip — same shape as the admin
   form's progress strip, just sits between the hero and pipeline. */
.hub-completion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin: 0 0 1rem;
}
.hub-completion__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
  font-size: .82rem;
  color: var(--color-text);
}
.hub-completion__title { font-weight: 600; }
.hub-completion__count { color: var(--color-muted); font-size: .78rem; font-weight: 500; }
.hub-completion__bar { margin-bottom: .65rem; }
.hub-completion__chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* === Sticky section nav ──────────────────────────────────────────── */
.client-form-nav {
  position: sticky;
  top: 56px;  /* under the global nav header */
  z-index: 50;
  display: flex;
  gap: .25rem;
  padding: .55rem .75rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
  backdrop-filter: saturate(140%) blur(4px);
}
.client-form-nav__link {
  display: inline-block;
  padding: .3rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.client-form-nav__link:hover {
  background: var(--hover-surface, var(--bg-surface-2));
  color: var(--color-text);
  text-decoration: none;
}
.client-form-nav__link--active {
  background: var(--color-info-soft, var(--accent-muted, transparent));
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* === Form max-width + general layout ─────────────────────────────── */
.client-form {
  max-width: 880px;
}
.client-form__row {
  display: grid;
  gap: .65rem;
}
.client-form__row--2col { grid-template-columns: repeat(2, 1fr); }
.client-form__row--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .client-form__row--2col,
  .client-form__row--3col { grid-template-columns: 1fr; }
}

/* === Section card ─────────────────────────────────────────────────── */
.client-form__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  scroll-margin-top: 130px;  /* offset for sticky nav when jumping */
}
.client-form__section-header {
  padding: .85rem 1.1rem .55rem;
  border-bottom: 1px solid var(--color-border);
}
.client-form__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.005em;
}
.client-form__section-hint {
  font-size: .76rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.4;
}
.client-form__section-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.client-form__section-footer {
  padding: .65rem 1.1rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-top: 1px solid var(--color-border);
  text-align: right;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* === Subgroup heading inside a section ──────────────────────────── */
.client-form__subgroup {
  padding-top: .35rem;
  border-top: 1px solid var(--color-border);
}
.client-form__subgroup:first-child { border-top: none; padding-top: 0; }
.client-form__subgroup-title {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-soft);
  margin: .35rem 0 .55rem;
}
.client-form__checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem .85rem;
}
@media (max-width: 720px) {
  .client-form__checkbox-grid { grid-template-columns: 1fr; }
}
.client-form__checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .15rem 0;
}
.client-form__checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 400;
  cursor: pointer;
  color: var(--color-text);
}
.client-form__checkbox-item input[type="checkbox"] { margin: 0; }

/* === Inline field (input + adjacent action button) ──────────────── */
.client-form__inline-field {
  display: flex;
  align-items: stretch;
  gap: .4rem;
}
.client-form__inline-field .form-input { flex: 1; }
.client-form__inline-status {
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--color-muted);
  min-height: 1em;
}

/* === Required asterisk + helper text ─────────────────────────────── */
.required-mark {
  color: var(--color-danger);
  font-weight: 600;
  margin-left: 2px;
}
.form-helper {
  color: var(--color-muted);
  font-weight: 400;
  font-size: .76rem;
  margin-left: .25rem;
}
.form-helper code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  padding: 0 .25rem;
  background: var(--color-surface-alt);
  border-radius: 3px;
}
/* Inline "find this value in <external service>" link beside a form label. */
.form-help-link {
  margin-left: .6rem;
  font-size: .72rem;
  font-weight: 400;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
}
.form-help-link:hover {
  text-decoration: underline;
}
.form-input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
}
.form-input--time {
  width: auto !important;
  padding: 3px 6px;
  font-size: .82rem;
  display: inline-block;
}
.form-group--checkbox label {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-size: .85rem;
}
.form-group--checkbox input { margin: 0; }

/* === Field-level inline notes ───────────────────────────────────── */
.client-form__field-note {
  margin-top: .35rem;
  padding: .4rem .6rem;
  font-size: .78rem;
  color: var(--color-muted);
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  line-height: 1.4;
}
.client-form__field-note--warning {
  background: var(--color-warn-soft, #fff3cd);
  border-color: var(--color-warning-border, #ffc107);
  color: var(--color-warn);
}
.client-form__field-note--error {
  background: var(--color-danger-soft, #fee2e2);
  border-color: var(--color-danger-border, #fecaca);
  color: var(--color-danger);
}
.client-form__field-note-action {
  color: var(--color-primary);
  text-decoration: none;
  margin-left: .35rem;
  font-weight: 500;
}
.client-form__field-note-action:hover { text-decoration: underline; }

/* === Sub-card (Locations / Contacts repeating row) ──────────────── */
.client-subcard {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  overflow: hidden;
}
.client-subcard:last-of-type { margin-bottom: 0; }
.client-subcard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .85rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.client-subcard__title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -.005em;
}
.client-subcard__remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-muted);
  font-size: .76rem;
  padding: .15rem .5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.client-subcard__remove:hover {
  background: var(--color-danger-soft, transparent);
  color: var(--color-danger);
  border-color: var(--color-danger-border, var(--color-danger));
}
.client-subcard__body {
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.client-form__add-btn {
  margin-top: .3rem;
}

/* === Location utility blocks (Opening hours, Coordinates, etc.) ── */
.location-utility {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .65rem .85rem;
}
.location-utility__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.location-utility__title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-soft);
}
.location-utility__hint {
  font-size: .76rem;
  color: var(--color-muted);
  margin-bottom: .35rem;
}
.location-utility__hint--empty { font-style: italic; color: var(--text-tertiary, var(--color-muted)); }
.location-utility__raw {
  margin-top: .5rem;
  font-size: .72rem;
  color: var(--color-muted);
}
.location-utility__raw-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-text-soft);
}
.location-utility__geo-meta {
  margin-top: .55rem;
  padding: .55rem .7rem;
  background: var(--bg-surface-3, var(--color-surface-alt));
  border-radius: var(--radius);
  font-size: .78rem;
  color: var(--color-text-soft);
}
.location-utility__geo-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: .3rem;
}
.location-utility__geo-row {
  margin-top: .15rem;
}
.location-utility__geo-row span:first-child {
  color: var(--color-muted);
  margin-right: .25rem;
}
.location-utility__geo-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  color: var(--color-text-soft);
}
.location-utility__geo-empty {
  margin-top: .5rem;
  padding: .45rem .65rem;
  background: var(--bg-surface-3, var(--color-surface-alt));
  border-radius: var(--radius);
  font-size: .76rem;
  color: var(--text-tertiary, var(--color-muted));
  font-style: italic;
}

/* === Hours grid (structured opening hours editor) ──────────────── */
.hours-grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: .25rem;
}
.hours-grid td {
  padding: .15rem .25rem;
  font-size: .82rem;
  vertical-align: middle;
}
.hours-grid__day {
  color: var(--color-text-soft);
  font-weight: 500;
  width: 100px;
}
.hours-grid__sep {
  color: var(--color-muted);
  font-size: .78rem;
  padding: 0 .25rem;
}
.hours-grid__closed {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--color-muted);
  cursor: pointer;
}

/* === Bottom action bar ──────────────────────────────────────────── */
.client-form__actions {
  display: flex;
  gap: .55rem;
  margin: 1.5rem 0 2rem;
  padding-top: .85rem;
  border-top: 1px solid var(--color-border);
}

/* === Next Actions launch panel (edit mode) ──────────────────────── */
.client-form__launch {
  max-width: 880px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 2rem;
}
.client-form__launch-header { margin-bottom: .85rem; }
.client-form__launch-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
}
.client-form__launch-hint {
  font-size: .78rem;
  color: var(--color-muted);
  margin: 0;
}
.client-form__launch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.client-form__launch-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.client-form__launch-row:last-child { border-bottom: none; }
.client-form__launch-status {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
}
.client-form__launch-status--completed { color: var(--color-success); }
.client-form__launch-status--running   { color: var(--color-warn); }
.client-form__launch-status--failed    { color: var(--color-danger); }
.client-form__launch-status--never     { color: var(--color-muted); }
.client-form__launch-cta {
  min-width: 200px;
  text-align: center;
  flex-shrink: 0;
}
.client-form__launch-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.client-form__launch-meta > span:first-child {
  font-size: .82rem;
  color: var(--color-text-soft);
}
.client-form__launch-runtime {
  font-size: .72rem;
  color: var(--color-muted);
}
.client-form__launch-runtime--failed { color: var(--color-danger); }
.client-form__launch-runtime--never  { color: var(--text-tertiary, var(--color-muted)); font-style: italic; }
.client-form__launch-empty {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Blog Writer — All Requests page redesign (2026-04-23)
   Workflow inbox for the multi-stage blog pipeline. Status pills carry
   the meaning; action column tells the reviewer what to do next.
   Subnav (.blog-subnav) lifted to dark-native earlier in this file.
   ───────────────────────────────────────────────────────────────────── */

/* === Page header ─────────────────────────────────────────────────── */
.blog-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 .6rem;
  padding: 0 .25rem;
  flex-wrap: wrap;
}
.blog-page__title-block { flex: 1; min-width: 0; }
.blog-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.blog-page__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.blog-page__cta { flex-shrink: 0; align-self: center; }

/* === Compact summary chips ───────────────────────────────────────── */
.blog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: 0 .25rem;
}
.blog-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .76rem;
  line-height: 1.2;
  color: var(--color-text);
}
.blog-chip__num {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-text);
  letter-spacing: -.005em;
}
.blog-chip__label {
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .65rem;
}
.blog-chip--total   { border-left-color: var(--border-strong, var(--color-muted)); }
.blog-chip--info    { border-left-color: var(--color-primary); }
.blog-chip--info    .blog-chip__num { color: var(--color-primary); }
.blog-chip--neutral { border-left-color: var(--color-border); }
.blog-chip--danger  { border-left-color: var(--color-danger); }
.blog-chip--danger  .blog-chip__num { color: var(--color-danger); }
.blog-chip--quiet   { opacity: .85; }

/* === Utility links row (above subnav) ────────────────────────────── */
.blog-utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .2rem;
  margin-bottom: .35rem;
  font-size: .72rem;
  color: var(--color-muted);
}
.blog-utility__label {
  display: none; /* label hidden; links are self-describing */
}
.blog-utility__link {
  color: var(--color-muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.blog-utility__link:hover { color: var(--color-primary); background: var(--bg-surface-2, transparent); text-decoration: none; }
.blog-utility__link--active { color: var(--color-primary); font-weight: 600; }
.blog-utility__sep { color: var(--color-border); font-size: .68rem; }

/* === Messages ────────────────────────────────────────────────────── */
.blog-messages { margin-bottom: 1rem; }
.blog-message {
  padding: .55rem .85rem;
  border-radius: var(--radius);
  margin-bottom: .4rem;
  background: var(--color-info-soft, transparent);
  color: var(--color-primary);
  font-size: .85rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
}
.blog-message--error {
  background: var(--color-danger-soft, transparent);
  color: var(--color-danger);
  border-left-color: var(--color-danger);
}
.blog-message--success {
  background: var(--color-success-soft, transparent);
  color: var(--color-success);
  border-left-color: var(--color-success);
}

/* === Filter toolbar ─────────────────────────────────────────────── */
.blog-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  margin-bottom: .75rem;
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* When toolbar is followed immediately by a card or section, shrink the gap
   so they read as a connected unit. */
.blog-toolbar + .hub-card,
.blog-toolbar + .bw-batch-hint,
.blog-toolbar + section.hub-card { margin-top: 0; }
.blog-toolbar__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  font-weight: 600;
  margin-right: .15rem;
}
.blog-toolbar__select {
  width: auto;
  min-width: 160px;
  padding: 4px 8px;
  font-size: .82rem;
  height: 30px;
}
.blog-toolbar__clear {
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
  margin-left: .15rem;
}
.blog-toolbar__clear:hover { text-decoration: underline; }

/* === Requests table ─────────────────────────────────────────────── */
.blog-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.blog-table {
  margin: 0;
  font-size: .85rem;
}
.blog-table thead th {
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--text-tertiary, var(--color-muted));
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.blog-table tbody td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.blog-table tbody tr:last-child td { border-bottom: none; }
.blog-table__row { transition: background .12s; }
.blog-table__row:hover {
  background: var(--hover-surface, var(--bg-surface-2));
}
.blog-table__col-created { width: 130px; }
.blog-table__col-client  { width: 18%; }
.blog-table__col-pa      { width: 18%; }
.blog-table__col-status  { width: 22%; }
.blog-table__col-by      { width: 14%; }
.blog-table__col-action  { width: 150px; text-align: right; }
.blog-table__col-version { width: 80px; }
.blog-table__col-words   { width: 70px; text-align: center; }
.blog-table__col-gdoc    { width: 110px; }
.blog-table__draft-title {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-table__version {
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.blog-table__revised {
  color: var(--color-primary);
  font-size: .78rem;
  margin-left: .25rem;
}
.blog-table__num {
  color: var(--color-text-soft);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.blog-table__gdoc-empty { color: var(--color-muted); }

.blog-table__created {
  color: var(--color-muted);
  font-size: .78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.blog-table__client-link {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.005em;
}
.blog-table__client-link:hover { color: var(--color-primary); text-decoration: none; }
.blog-table__pa { color: var(--color-text-soft); font-size: .82rem; }
.blog-table__by { color: var(--color-text-soft); font-size: .8rem; }
.blog-table__status { white-space: nowrap; }

/* === Status pills — workflow stage indicators ───────────────────────
   Semantic groupings:
     - Active processing  = info (calm, in-flight)
     - Needs review       = info-strong (actionable but positive)
     - Failed             = danger (attention)
     - Approved/published = success (calm positive terminal)
     - Draft / queued     = muted (waiting)
   Restrained colours; communicate stage, not decoration. */
.blog-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
}
/* Draft / queued — muted */
.blog-status--draft {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
}
/* Active processing */
.blog-status--generating_topics,
.blog-status--generating_article,
.blog-status--generating {
  background: var(--color-info-soft, var(--accent-muted, #e3f2fd));
  color: var(--color-primary);
}
/* Draft-level awaiting review (BlogDraft.Status has its own enum) */
.blog-status--generated,
.blog-status--revision_requested {
  background: var(--color-info-soft, var(--accent-muted, #dbeafe));
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 1px 7px;
}
/* Awaiting human action — info-strong, accent border */
.blog-status--topics_generated,
.blog-status--article_generated {
  background: var(--color-info-soft, var(--accent-muted, #dbeafe));
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 1px 7px;
}
/* Approved / published — calm positive */
.blog-status--topic_approved,
.blog-status--internal_review,
.blog-status--client_review,
.blog-status--approved,
.blog-status--waiting_on_schema,
.blog-status--ready_for_publish {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
}
.blog-status--published {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
}
/* Failed — danger */
.blog-status--failed {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
}
/* Origin marker — quiet "Sched" badge alongside status */
.blog-status--scheduled {
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  margin-left: .25rem;
  font-size: .62rem;
  letter-spacing: .03em;
}

/* === Action column ──────────────────────────────────────────────── */
.blog-action {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
  padding: .25rem 0;
}
.blog-action--primary {
  color: var(--color-primary);
  font-weight: 600;
}
.blog-action--primary:hover { color: var(--color-text); text-decoration: none; }
.blog-action--ghost {
  color: var(--color-muted);
  font-weight: 500;
}
.blog-action--ghost:hover { color: var(--color-text); text-decoration: none; }
.blog-action--danger {
  color: var(--color-danger);
  font-weight: 600;
}
.blog-action--danger:hover { color: var(--color-text); text-decoration: none; }

/* === Empty state ────────────────────────────────────────────────── */
.blog-table__empty {
  text-align: center;
  padding: 2.25rem 1rem !important;
  color: var(--color-muted);
}
.blog-table__empty-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .35rem;
}
.blog-table__empty-sub {
  font-size: .82rem;
  color: var(--color-muted);
}
.blog-table__empty-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.blog-table__empty-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
   Client Hub — flagship per-client cockpit redesign (2026-04-23)
   Aggregation surface for shared client truth. Reordered: operational
   work first (workstreams + KPI summary), context second (why hired
   us + next moves), stable facts third (snapshot), then activity feed
   and tools. Replaces the legacy .hub-section / .hub-badge / inline
   amber-slab pattern with token-based, restrained dark-native chrome.
   ───────────────────────────────────────────────────────────────────── */

/* === Hero / identity band ─────────────────────────────────────────── */
.hub-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.hub-hero__main { flex: 1; min-width: 0; }
.hub-hero__name {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .25rem;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.hub-hero__meta {
  font-size: .85rem;
  color: var(--color-text-soft);
  margin-bottom: .55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}
.hub-hero__site {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.hub-hero__site:hover { color: var(--color-text); text-decoration: none; }
.hub-hero__sep { color: var(--color-border); }
.hub-hero__role { color: var(--color-muted); font-weight: 400; }
.hub-hero__missing { color: var(--text-tertiary, var(--color-muted)); font-style: italic; }
.hub-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .55rem;
}
.hub-hero__services {
  font-size: .82rem;
  color: var(--color-text-soft);
  margin-top: .3rem;
}
.hub-hero__services-label {
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .05em;
  margin-right: .35rem;
}
.hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.hub-hero__cta {
  /* Primary action — visually loudest in the action group */
}
.hub-hero__util {
  margin-left: .25rem;
  font-size: .78rem;
  color: var(--color-muted);
  text-decoration: none;
}
.hub-hero__util:hover { color: var(--color-primary); text-decoration: none; }

/* === Hub pill family — restrained semantic ─────────────────────────
   Replaces the legacy .hub-badge--* pastel pills. Uses soft-fill +
   semantic text for the strong variants; transparent border-only for
   the quiet ones. */
.hub-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
}
.hub-pill--success {
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
}
.hub-pill--warning {
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn);
}
.hub-pill--danger {
  background: var(--color-danger-soft, #fee2e2);
  color: var(--color-danger);
}
.hub-pill--accent {
  background: var(--color-info-soft, var(--accent-muted, #dbeafe));
  color: var(--color-primary);
}
.hub-pill--neutral {
  background: transparent;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  padding: 1px 7px;
}
.hub-pill--muted {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
}
.hub-pill--empty {
  background: transparent;
  color: var(--text-tertiary, var(--color-muted));
  border: 1px dashed var(--color-border);
  padding: 1px 7px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .72rem;
}
.hub-pill--setup {
  background: var(--color-warn-soft, #fef3c7);
  color: var(--color-warn, #d97706);
  border: 1px solid var(--color-warn, #d97706);
}

/* === Generic Hub card ─────────────────────────────────────────────── */
.hub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .85rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}
.hub-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem .7rem;
  border-bottom: 1px solid var(--color-border);
}
.hub-card__header > div:first-child { min-width: 0; flex: 1; }
.hub-card__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.hub-card__sub {
  font-size: .78rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.45;
}
.hub-card__edit {
  font-size: .76rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.hub-card__edit:hover { text-decoration: underline; }
.hub-card__body {
  padding: 1rem 1.1rem;
}
.hub-card__body--flush {
  padding: 0;
}
.hub-card__actions {
  margin-top: .85rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
/* The dark-theme .btn-secondary rule has specificity (0,2,0) with
 * !important. We anchor on .btn.btn-secondary.hub-card__danger-action
 * (specificity 0,3,0) so this destructive variant wins in both
 * themes. The rebaseline button is the only consumer today; if more
 * destructive in-card actions land, lift this into a shared
 * .btn-danger-soft modifier. */
.btn.btn-secondary.hub-card__danger-action {
  margin-left: auto;
  color: var(--color-danger, #c1392b) !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--color-danger, #c1392b) 30%, var(--color-border)) !important;
}
.btn.btn-secondary.hub-card__danger-action:hover {
  background: color-mix(in srgb, var(--color-danger, #c1392b) 10%, transparent) !important;
  border-color: var(--color-danger, #c1392b) !important;
  color: var(--color-danger, #c1392b) !important;
}

/* === Needs attention block (Patch 1, 2026-05-13; layout v2 2026-05-13) ─
   Top-of-Hub issue queue. Severity-ranked rows surfacing operator-
   actionable issues across all apps. Uses <div>-based markup (not
   <ul>/<li>) to avoid fighting browser default list styling, and
   higher-specificity selectors scoped under .hub-needs-attention.
   Empty state renders calmly so the block confirms the detectors ran.
   ────────────────────────────────────────────────────────────────── */
section.hub-needs-attention > .hub-card__body { padding: .75rem 1.1rem 1rem; }
section.hub-needs-attention.hub-needs-attention--empty > .hub-card__body { padding: .85rem 1.1rem; }
.hub-needs-attention__empty {
  color: var(--color-muted);
  font-size: .87rem;
  margin: 0;
  line-height: 1.5;
}
.hub-needs-attention .hub-issues {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.hub-needs-attention .hub-issue {
  list-style: none;
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .7rem .9rem;
  background: var(--bg-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius);
  transition: border-color .15s ease, background .15s ease;
}
.hub-needs-attention .hub-issue:hover {
  border-color: var(--color-text-soft, var(--color-muted));
}
.hub-needs-attention .hub-issue--critical { border-left-color: var(--color-danger); }
.hub-needs-attention .hub-issue--high     { border-left-color: rgb(245, 158, 11); }
.hub-needs-attention .hub-issue--medium   { border-left-color: var(--color-caution); }
.hub-needs-attention .hub-issue--low      { border-left-color: var(--color-muted); }

.hub-needs-attention .hub-issue__tags {
  /* Phase 1 (2026-05-19): switched to row-wrap to fit source + freshness
   * pills alongside the existing severity + type pills without forcing
   * the badge column wider. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.hub-needs-attention .hub-issue__severity {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}
.hub-needs-attention .hub-issue__severity-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.hub-needs-attention .hub-issue__severity--critical {
  background: rgba(220, 38, 38, .12);
  color: var(--color-danger);
}
.hub-needs-attention .hub-issue__severity--high {
  /* Match the "Aging Nd" amber on Working on now so HIGH reads
   * stronger than MEDIUM at a glance. Bumped saturation +
   * added border to pull the badge forward of MEDIUM's
   * lighter yellow. */
  background: rgba(245, 158, 11, .16);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .45);
}
:root.theme-dark .hub-needs-attention .hub-issue__severity--high,
.theme-dark .hub-needs-attention .hub-issue__severity--high {
  background: rgba(245, 158, 11, .20);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .55);
}
.hub-needs-attention .hub-issue__severity--medium {
  background: rgba(234, 179, 8, .15);
  color: var(--color-caution);
}
.hub-needs-attention .hub-issue__severity--low {
  background: rgba(107, 114, 128, .15);
  color: var(--color-muted);
}
.hub-needs-attention .hub-issue__type {
  font-size: .72rem;
  color: var(--color-text-soft, var(--color-muted));
  font-weight: 500;
  letter-spacing: .01em;
}
/* Phase 1 (2026-05-19): source pill + freshness chip. Source is the
 * machine label resolved through SOURCE_LABELS in opportunities.py
 * (e.g. "GSC", "Metadata Builder"). Freshness reads last_checked_at
 * and surfaces it as "Refreshed Nh ago" — present only when the
 * source recorded a timestamp. Both rendered as quiet, low-emphasis
 * pills so the title + summary remain the primary signal. */
.hub-needs-attention .hub-issue__source {
  font-size: .68rem;
  padding: .1rem .45rem;
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--color-border-muted, rgba(0, 0, 0, .12));
  color: var(--color-text-soft, var(--color-muted));
  letter-spacing: .01em;
  white-space: nowrap;
}
.hub-needs-attention .hub-issue__freshness {
  font-size: .68rem;
  color: var(--color-text-soft, var(--color-muted));
  letter-spacing: .01em;
  white-space: nowrap;
}
.hub-needs-attention .hub-issue__body { min-width: 0; }
.hub-needs-attention .hub-issue__title {
  font-size: .94rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.hub-needs-attention .hub-issue__summary {
  font-size: .83rem;
  color: var(--color-text-soft, var(--color-muted));
  margin-top: .2rem;
  line-height: 1.45;
}
.hub-needs-attention .hub-issue__action {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hub-needs-attention .hub-issue {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  .hub-needs-attention .hub-issue__tags {
    flex-direction: row;
    align-items: center;
  }
  .hub-needs-attention .hub-issue__action { justify-self: start; }
}

/* === Workstream list ──────────────────────────────────────────────── */
.hub-workstream-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-workstream {
  display: grid;
  grid-template-columns: 180px 140px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .85rem;
  transition: background .12s;
}
.hub-workstream:last-child { border-bottom: none; }
.hub-workstream:hover { background: var(--hover-surface, var(--bg-surface-2)); }
.hub-workstream__name {
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -.005em;
}
.hub-workstream__detail { color: var(--color-text-soft); font-size: .82rem; }
.hub-workstream__action { text-align: right; }
@media (max-width: 760px) {
  .hub-workstream {
    grid-template-columns: 1fr auto;
    gap: .35rem;
  }
  .hub-workstream__detail { grid-column: 1 / -1; }
}

/* === Hub status pill (workstream/KPI semantic state) ─────────────── */
.hub-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hub-status--success { background: var(--color-success-soft, #dcfce7); color: var(--color-success); }
.hub-status--warning { background: var(--color-warn-soft, #fef3c7); color: var(--color-warn); }
.hub-status--danger  { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger); }
.hub-status--info    { background: var(--color-info-soft, var(--accent-muted, #dbeafe)); color: var(--color-primary); }
.hub-status--muted   { background: var(--bg-surface-3, var(--color-surface-alt)); color: var(--color-muted); }

/* === KPI grid (Site & Page Summary) ──────────────────────────────── */
.hub-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-bottom: 0;
}
.hub-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  display: flex;
  flex-direction: column-reverse;
  gap: .25rem;
}
.hub-kpi__num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hub-kpi__label {
  font-size: .68rem;
  color: var(--text-tertiary, var(--color-muted));
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.hub-kpi--success { border-left-color: var(--color-success); }
.hub-kpi--accent  { border-left-color: var(--color-primary); }
.hub-kpi--muted   { border-left-color: var(--color-border); }
.hub-kpi--muted   .hub-kpi__num { color: var(--color-text-soft); }

.hub-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: var(--color-text-soft);
  padding: .55rem .65rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.hub-meta-row__item strong { color: var(--color-text); font-weight: 600; }
.hub-meta-row__item--empty { color: var(--text-tertiary, var(--color-muted)); font-style: italic; }

/* === Why They Hired Us — context grid ────────────────────────────── */
.hub-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 760px) { .hub-context-grid { grid-template-columns: 1fr; } }
.hub-context-block {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem .85rem;
}
.hub-context-block__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: .35rem;
}
.hub-context-block__text {
  font-size: .85rem;
  color: var(--color-text);
  line-height: 1.55;
}

/* Internal Recommendation — advisory callout (no amber slab) */
.hub-callout {
  margin-top: .85rem;
  padding: .75rem .9rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
}
.hub-callout--advisory { border-left-color: var(--color-primary); }
.hub-callout__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primary);
  margin-bottom: .35rem;
}
.hub-callout__text {
  font-size: .85rem;
  color: var(--color-text);
  line-height: 1.55;
}

/* === Recommended Next Moves — action queue list ─────────────────── */
.hub-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.hub-action-item:last-child { border-bottom: none; }
.hub-action-item:hover { background: var(--hover-surface, var(--bg-surface-2)); }
.hub-action-item__label {
  font-size: .85rem;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}
.hub-action-item__cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.hub-action-item__cta:hover { color: var(--color-text); text-decoration: none; }

/* === Snapshot — 2-column factsheet ──────────────────────────────── */
.hub-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 760px) { .hub-snapshot { grid-template-columns: 1fr; } }
.hub-snapshot__col { display: flex; flex-direction: column; gap: 1rem; }
.hub-fact { }
.hub-fact__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: .35rem;
}
.hub-fact__main {
  font-size: .9rem;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: .15rem;
}
.hub-fact__line {
  font-size: .85rem;
  color: var(--color-text-soft);
  line-height: 1.5;
}
.hub-fact__line a {
  color: var(--color-primary);
  text-decoration: none;
}
.hub-fact__line a:hover { text-decoration: underline; }
.hub-fact__meta {
  font-size: .78rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.hub-fact__missing {
  font-size: .8rem;
  color: var(--color-muted);
  font-style: italic;
}
.hub-fact__missing a { color: var(--color-primary); text-decoration: none; }
.hub-fact__missing a:hover { text-decoration: underline; }

.hub-contact { margin-bottom: .65rem; }
.hub-contact:last-child { margin-bottom: 0; }
.hub-contact__line {
  font-size: .88rem;
  color: var(--color-text);
  line-height: 1.4;
}
.hub-contact__role { color: var(--color-muted); font-weight: 400; }
.hub-contact__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
}
.hub-contact__meta {
  font-size: .76rem;
  color: var(--color-muted);
  margin-top: .15rem;
}

.hub-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
}
.hub-tag--success { background: var(--color-success-soft, #dcfce7); color: var(--color-success); }
.hub-tag--accent  { background: var(--color-info-soft, var(--accent-muted, #dbeafe)); color: var(--color-primary); }

/* === Activity / deliverables feed ────────────────────────────────── */
.hub-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-feed-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .5rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .85rem;
  transition: background .12s;
}
.hub-feed-item:last-child { border-bottom: none; }
.hub-feed-item:hover { background: var(--hover-surface, var(--bg-surface-2)); }
.hub-feed-item__type {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
}
.hub-feed-item__label {
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-feed-item__label:hover { color: var(--color-primary); text-decoration: none; }
.hub-feed-item__time {
  font-size: .76rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.hub-feed-item__actions {
  display: flex;
  gap: .65rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hub-feed-item {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "type label"
      "time actions";
    row-gap: .15rem;
  }
  .hub-feed-item__type    { grid-area: type; }
  .hub-feed-item__label   { grid-area: label; }
  .hub-feed-item__time    { grid-area: time; text-align: left; }
  .hub-feed-item__actions { grid-area: actions; justify-self: end; }
}

.hub-link {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.hub-link:hover { color: var(--color-text); text-decoration: none; }

/* === Pipeline card — per-client "where did I leave off" surface ── */
/* Four-column grid: running / queued / next step / done this week.
   Collapses to 2 columns at tablet, 1 at phone. Each column owns its
   own dot colour so the eye can map state at a glance. */
.hub-pipeline__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 960px) {
  .hub-pipeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .hub-pipeline__grid { grid-template-columns: 1fr; }
}
.hub-pipeline__col {
  background: var(--color-surface-alt, var(--bg-surface-3, transparent));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: .7rem .8rem .8rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hub-pipeline__col-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .55rem;
}
.hub-pipeline__count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft, var(--color-muted));
}
.hub-pipeline__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-muted);
}
.hub-pipeline__dot--running {
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
  animation: activity-pulse 2s infinite;
}
.hub-pipeline__dot--queued { background: #f59e0b; }
.hub-pipeline__dot--next   { background: var(--color-primary); }
.hub-pipeline__dot--done   { background: #4ade80; }
.hub-pipeline__dot--ok     { background: #4ade80; }
.hub-pipeline__dot--idle   { background: var(--color-border); }

.hub-pipeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.hub-pipeline__row {
  font-size: .82rem;
  line-height: 1.35;
  min-width: 0;
}
.hub-pipeline__row-title {
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-pipeline__row-title a { color: inherit; text-decoration: none; }
.hub-pipeline__row-title a:hover { color: var(--color-primary); }
.hub-pipeline__row-meta {
  font-size: .72rem;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: .15rem;
}
.hub-pipeline__app {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
}
.hub-pipeline__progress { font-variant-numeric: tabular-nums; }
.hub-pipeline__empty {
  font-size: .8rem;
  color: var(--color-muted);
  font-style: italic;
  padding: .15rem 0;
}
.hub-pipeline__next-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: .25rem;
}
.hub-pipeline__next-reason {
  font-size: .78rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin-bottom: .5rem;
}

/* === Working on now ─────────────────────────────────────────────── */
/* Merged Pipeline + Workstreams + Recommended Next Moves block.
   Visual zones in falling prominence:
     1. Lead — the single suggested next step, primary CTA.
     2. Strip / idle line — what's in flight or "Idle, last completed: …"
     3. Needs attention — ready_for_review + blocked + in_progress.
     4. Review queue — concrete review actions, named by artifact type.
     5. Healthy / Not started — collapsed by default to reduce noise.
     6. Setup gaps — chip-style row, one line. */
.hub-working-now .hub-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.hub-wn__lead {
  position: relative;
  background: linear-gradient(180deg, rgba(96, 165, 250, .06) 0%, rgba(96, 165, 250, 0) 100%);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: .85rem 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "meta cta"
    "title cta"
    "reason cta";
  column-gap: 1rem;
  align-items: center;
}
.hub-wn__lead--tier-0 {
  border-left-color: #4ade80;
  background: linear-gradient(180deg, rgba(74, 222, 128, .07) 0%, rgba(74, 222, 128, 0) 100%);
}
.hub-wn__lead-meta {
  grid-area: meta;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primary);
}
.hub-wn__lead--tier-0 .hub-wn__lead-meta { color: #16a34a; }
.hub-wn__lead-title {
  grid-area: title;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin-top: .15rem;
}
.hub-wn__lead-reason {
  grid-area: reason;
  font-size: .82rem;
  color: var(--color-text-soft, var(--color-muted));
  line-height: 1.45;
  margin-top: .25rem;
}
.hub-wn__lead-cta {
  grid-area: cta;
  white-space: nowrap;
  align-self: center;
}

/* One-line idle summary that replaces the 3-col strip when nothing is
   running or queued. Keeps the surface area small when there's nothing
   interesting to say. */
.hub-wn__idle {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--color-text-soft, var(--color-muted));
  padding: .35rem .1rem;
}
.hub-wn__idle-label {
  font-weight: 600;
  color: var(--color-text);
}
.hub-wn__idle-meta {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.hub-wn__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .65rem;
}
.hub-wn__strip-col {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: .55rem .7rem .65rem;
  min-width: 0;
  font-size: .82rem;
}
.hub-wn__strip-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .4rem;
}
.hub-wn__strip-count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft, var(--color-muted));
}
.hub-wn__strip-list,
.hub-wn__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-wn__strip-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.hub-wn__strip-row {
  font-size: .78rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  min-width: 0;
}
.hub-wn__strip-title {
  color: var(--color-text);
  font-weight: 500;
  flex: 1 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-wn__strip-title a { color: inherit; text-decoration: none; }
.hub-wn__strip-title a:hover { color: var(--color-primary); }
.hub-wn__strip-app {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  color: var(--color-muted);
}
.hub-wn__strip-meta {
  font-size: .7rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Subsection groupings — "Needs attention", "Review queue", "Healthy &
   not started", "Setup gaps". Quiet header style, clear separation
   between groups without re-using the loud hub-card chrome. */
.hub-wn__group {
  margin: 0;
}
.hub-wn__group-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft, var(--color-muted));
  margin-bottom: .35rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.hub-wn__group-label--attention { color: var(--color-warn, #b45309); }
.hub-wn__group-label--muted     { color: var(--color-muted); }
.hub-wn__group-count {
  font-weight: 500;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.hub-wn__group--collapsible > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hub-wn__group--collapsible > summary::-webkit-details-marker { display: none; }
.hub-wn__group--collapsible > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .25rem;
  font-size: .65rem;
  transform: translateY(-1px);
  transition: transform .15s;
}
.hub-wn__group--collapsible[open] > summary::before {
  transform: translateY(-1px) rotate(90deg);
}

.hub-wn__list {
  border-top: 1px solid var(--color-border-soft);
}
.hub-wn__item {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr auto auto;
  gap: 0 .9rem;
  align-items: center;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: .85rem;
}
.hub-wn__item:last-child { border-bottom: none; }
.hub-wn__item:hover { background: var(--hover-surface, var(--bg-surface-2)); }
@media (max-width: 720px) {
  .hub-wn__item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name pills"
      "detail detail"
      "cta cta";
    gap: .2rem .5rem;
  }
  .hub-wn__item-name   { grid-area: name; }
  .hub-wn__item-detail { grid-area: detail; }
  .hub-wn__item-pills  { grid-area: pills; justify-self: end; }
  .hub-wn__item-cta    { grid-area: cta; justify-self: start; }
}
.hub-wn__item-name {
  font-weight: 600;
  color: var(--color-text);
}
.hub-wn__item--healthy .hub-wn__item-name,
.hub-wn__item--not_started .hub-wn__item-name,
.hub-wn__item--planning .hub-wn__item-name {
  font-weight: 500;
  color: var(--color-text-soft, var(--color-muted));
}
.hub-wn__item-detail {
  font-size: .82rem;
  color: var(--color-text-soft, var(--color-muted));
  line-height: 1.4;
  min-width: 0;
}
.hub-wn__item-pills {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  justify-self: end;
}
.hub-wn__item-pills:empty { display: none; }
.hub-wn__item-cta {
  white-space: nowrap;
  justify-self: end;
}

/* Setup gaps — chips on a single horizontal row to drastically reduce
   vertical noise compared to one row per gap. */
.hub-wn__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.hub-wn__chip {
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-soft, var(--color-text));
  text-decoration: none;
  white-space: nowrap;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-wn__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--hover-surface, var(--bg-surface-2));
}

/* Aging pill (Wave 2 #14) — amber to match "stuck" semantic, not red. */
.hub-wn__aging-pill {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .35);
  letter-spacing: .02em;
  white-space: nowrap;
}
:root.theme-dark .hub-wn__aging-pill,
.theme-dark .hub-wn__aging-pill {
  background: rgba(245, 158, 11, .18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .45);
}
.hub-wn__item--stuck {
  background: rgba(245, 158, 11, .04);
}
.hub-wn__item--stuck:hover {
  background: rgba(245, 158, 11, .08);
}

/* === Ambient meta row + cap-utilization chip ===================== */
.hub-wn__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .9rem;
}
.hub-wn__cap-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-soft);
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--color-text-soft, var(--color-text));
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter .12s ease;
}
a.hub-wn__cap-chip:hover { filter: brightness(1.05); text-decoration: none; }
a.hub-wn__cap-chip:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 2px; }

/* === Module-signal strip (between KB strip and Working on now) === */
.hub-module-signals {
  margin: .75rem 0 1rem;
}
.hub-module-signals__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hub-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid var(--color-border-soft);
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: filter .12s ease;
}
.hub-signal-chip:hover { filter: brightness(1.05); text-decoration: none; }
.hub-signal-chip:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 2px; }
.hub-signal-chip__label {
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--color-muted);
}
.hub-signal-chip__total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hub-signal-chip__count {
  font-size: .72rem;
  font-weight: 600;
  padding: .05rem .4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.hub-signal-chip__count--severe    { color: var(--color-danger); }
.hub-signal-chip__count--likely    { color: var(--color-warn); }
.hub-signal-chip__count--ambiguous { color: var(--color-warn); }
.hub-signal-chip__count--mild      { color: var(--color-info, var(--color-accent)); }
.hub-signal-chip__count--draft     { color: var(--color-muted); }
.hub-signal-chip__count--verify    { color: var(--color-warn); }
.hub-signal-chip__count--gap-pages { color: var(--color-muted); }
.hub-signal-chip__count--review       { color: var(--color-warn); }
.hub-signal-chip__count--missing-link { color: var(--color-warn); }
.hub-signal-chip__count--new-page     { color: var(--color-warn); }

.hub-signal-chip--severe {
  background: var(--color-danger-soft, rgba(220, 38, 38, .10));
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.hub-signal-chip--likely,
.hub-signal-chip--ambiguous {
  background: var(--color-warn-soft, rgba(217, 119, 6, .10));
  border-color: var(--color-warn);
  color: var(--color-warn);
}
.hub-signal-chip--mild {
  background: var(--color-info-soft, rgba(37, 99, 235, .10));
  border-color: var(--color-info, var(--color-accent));
  color: var(--color-info, var(--color-accent));
}
.hub-signal-chip--bundle,
.hub-signal-chip--gap,
.hub-signal-chip--lawyer {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-color: var(--color-border-soft);
  color: var(--color-text);
}
.hub-signal-chip--needs-review {
  background: var(--color-warn-soft, rgba(217, 119, 6, .10));
  border-color: var(--color-warn);
  color: var(--color-warn);
}
.hub-signal-chip--needs-review .hub-signal-chip__label { color: inherit; }
.hub-signal-chip--severe .hub-signal-chip__label,
.hub-signal-chip--likely .hub-signal-chip__label,
.hub-signal-chip--ambiguous .hub-signal-chip__label,
.hub-signal-chip--mild .hub-signal-chip__label { color: inherit; }
.hub-wn__cap-chip__label {
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--color-muted);
}
.hub-wn__cap-chip--amber {
  background: var(--color-warn-soft, rgba(217, 119, 6, .10));
  border-color: var(--color-warn);
  color: var(--color-warn);
}
.hub-wn__cap-chip--amber .hub-wn__cap-chip__label { color: var(--color-warn); }
.hub-wn__cap-chip--red {
  background: var(--color-danger-soft, rgba(220, 38, 38, .10));
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 600;
}
.hub-wn__cap-chip--red .hub-wn__cap-chip__label { color: var(--color-danger); }

/* === Empty states ────────────────────────────────────────────────── */
.hub-empty {
  padding: 1rem 1.1rem;
  font-size: .82rem;
  color: var(--color-muted);
  font-style: italic;
}
.hub-empty a { color: var(--color-primary); text-decoration: none; font-style: normal; }
.hub-empty a:hover { text-decoration: underline; }

.hub-empty--success {
  font-style: normal;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hub-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-success-soft, #dcfce7);
  color: var(--color-success);
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
}

/* === Internal tools — quiet bottom strip ────────────────────────── */
.hub-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .78rem;
}
.hub-tools__label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-right: .35rem;
}
.hub-tools__link {
  color: var(--color-text-soft);
  text-decoration: none;
}
.hub-tools__link:hover { color: var(--color-primary); text-decoration: none; }
.hub-tools__sep { color: var(--color-border); }
.hub-tools__divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--color-border);
  margin: 0 .35rem;
}
.hub-tools__indicator {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text-soft);
  font-size: .76rem;
}

/* === Status dot (preserved from old hub-dot) ────────────────────── */
.hub-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
}
.hub-dot--ok  { background: var(--color-success); }
.hub-dot--off { background: var(--color-border); }

/* ─────────────────────────────────────────────────────────────────────
   Site Intelligence — flagship deep-truth page (2026-04-23)
   Per-client deep-dive: dense, analytical, table-heavy. Inherits hub
   card / pill / KPI language from the Client Hub redesign and adds
   SI-specific patterns: sticky jump nav, page-inventory toolbar +
   table, activity row tables, artifacts archive.
   ───────────────────────────────────────────────────────────────────── */

/* === Header band ─────────────────────────────────────────────────── */
.si-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.si-header__main { flex: 1; min-width: 0; }
.si-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.si-header__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.si-header__subtitle strong { color: var(--color-text); font-weight: 600; }
.si-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.si-header__util {
  margin-left: .25rem;
  font-size: .78rem;
  color: var(--color-muted);
  text-decoration: none;
}
.si-header__util:hover { color: var(--color-primary); text-decoration: none; }

/* === Sticky jump nav ─────────────────────────────────────────────── */
.si-nav {
  position: sticky;
  top: 56px;  /* under global nav */
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem .65rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  backdrop-filter: saturate(140%) blur(4px);
}
.si-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.si-nav__link:hover {
  background: var(--hover-surface, var(--bg-surface-2));
  color: var(--color-text);
  text-decoration: none;
}
.si-nav__link--active {
  background: var(--color-info-soft, var(--accent-muted, transparent));
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.si-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 .35rem;
  font-size: .65rem;
  font-weight: 700;
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  border-radius: 8px;
}
.si-nav__link--active .si-nav__count {
  background: var(--color-primary);
  color: #fff;
}

/* === Section card variant — slightly denser than .hub-card ─────── */
.si-card {
  /* Accommodates top global nav (~56px) + working-with strip
   * (~40px) + sticky .si-nav chip row (~50px, taller when chips
   * wrap to 2 lines). Anchor jumps land clear of the sticky bar. */
  scroll-margin-top: 180px;
}
.si-card__body-text {
  font-size: .85rem;
  color: var(--color-text-soft);
  line-height: 1.5;
  margin: 0 0 .85rem;
}

/* === §1 Site Overview — facts grid ──────────────────────────────── */
.si-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem 1.25rem;
  margin-bottom: .85rem;
}
@media (max-width: 760px) { .si-facts { grid-template-columns: 1fr; } }
.si-fact { font-size: .85rem; }
.si-fact__label {
  display: inline;
  color: var(--color-muted);
  margin-right: .35rem;
}
.si-fact__value {
  display: inline;
  color: var(--color-text);
}
.si-fact__value strong { font-weight: 600; }
.si-fact__detail {
  color: var(--color-muted);
  font-size: .78rem;
  margin-left: .25rem;
}
.si-fact__empty {
  color: var(--text-tertiary, var(--color-muted));
  font-style: italic;
}

/* Page-type breakdown strip */
.si-page-types {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .55rem .75rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .85rem;
  font-size: .82rem;
}
.si-page-types__label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  flex-shrink: 0;
}
.si-page-types__list { color: var(--color-text-soft); }

/* KPI groups (separates Schema and Metadata) */
.si-kpi-group { margin-bottom: .85rem; }
.si-kpi-group:last-child { margin-bottom: 0; }
.si-kpi-group__label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin-bottom: .4rem;
}

/* Legend collapsible */
.si-legend {
  margin-top: .85rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.si-legend__summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: .55rem .85rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-text-soft);
}
.si-legend__summary::-webkit-details-marker { display: none; }
.si-legend__summary::before {
  content: "ⓘ ";
  color: var(--color-primary);
}
.si-legend__intro {
  padding: 0 .85rem;
  font-size: .76rem;
  color: var(--color-muted);
  font-style: italic;
  margin: 0 0 .35rem;
}
.si-legend__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  margin-top: .35rem;
}
.si-legend__table th,
.si-legend__table td {
  padding: .35rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.si-legend__table thead th {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.si-legend__table tbody tr:last-child td { border-bottom: none; }
.si-legend__hint {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.si-legend__hint--success { background: var(--color-success-soft, #dcfce7); color: var(--color-success); }
.si-legend__hint--warning { background: var(--color-warn-soft, #fef3c7); color: var(--color-warn); }
.si-legend__hint--danger  { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger); }
.si-legend__hint--accent  { background: var(--color-info-soft, var(--accent-muted, #dbeafe)); color: var(--color-primary); }
.si-legend__hint--muted   { background: var(--bg-surface-3, var(--color-surface-alt)); color: var(--color-text-soft); }

/* === §2 External docs list ──────────────────────────────────────── */
.si-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.si-doc-item {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .85rem;
}
.si-doc-item:last-child { border-bottom: none; }
.si-doc-item__label {
  color: var(--color-muted);
  font-weight: 500;
  min-width: 110px;
  flex-shrink: 0;
  font-size: .8rem;
}
.si-doc-item__url {
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

/* === Shared SI link/text helpers ─────────────────────────────────── */
.si-link {
  color: var(--color-primary);
  text-decoration: none;
}
.si-link:hover { color: var(--color-text); text-decoration: none; }
.si-link--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
}

/* === §3 Page Inventory — toolbar + table ────────────────────────── */
.si-toolbar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .75rem;
  margin: 0 1.1rem 0;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.si-toolbar__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  font-weight: 600;
  margin-right: .15rem;
}
.si-toolbar__select {
  width: auto;
  min-width: 130px;
  padding: 4px 8px;
  font-size: .78rem;
  height: 28px;
}
.si-toolbar__clear {
  font-size: .78rem;
  color: var(--color-danger);
  text-decoration: none;
  margin-left: .25rem;
}
.si-toolbar__clear:hover { text-decoration: underline; }

.si-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
}
.si-table {
  margin: 0;
  font-size: .82rem;
  width: 100%;
  border-collapse: collapse;
}
.si-table thead th {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--text-tertiary, var(--color-muted));
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.si-table tbody td {
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.si-table tbody tr:last-child td { border-bottom: none; }
.si-table__row { transition: background .12s; }
.si-table__row:hover { background: var(--hover-surface, var(--bg-surface-2)); }
.si-table__col-page { width: 38%; }
.si-table__col-type { width: 80px; }
.si-table__col-state { width: 110px; text-align: center; }
.si-table__col-flag { width: 50px; text-align: center; }
.si-table__col-num { width: 70px; text-align: center; }
.si-table__col-actions { width: 200px; text-align: right; }
.si-table__center { text-align: center; }
.si-table__num { font-variant-numeric: tabular-nums; color: var(--color-text-soft); }
.si-table__page { min-width: 0; }
.si-table__title {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-table__title:hover { color: var(--color-primary); }
.si-table__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  color: var(--color-muted);
  margin-top: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-table__url-meta {
  font-size: .68rem;
  color: var(--text-tertiary, var(--color-muted));
  margin-left: .35rem;
}
.si-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* === SI pill family — table cell badges ─────────────────────────── */
.si-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.45;
  white-space: nowrap;
}
.si-pill--type {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text-soft);
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 500;
}
.si-pill--success { background: var(--color-success-soft, #dcfce7); color: var(--color-success); }
.si-pill--warning { background: var(--color-warn-soft, #fef3c7); color: var(--color-warn); }
.si-pill--danger  { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger); }
.si-pill--accent  { background: var(--color-info-soft, var(--accent-muted, #dbeafe)); color: var(--color-primary); }
.si-pill--muted   { background: var(--bg-surface-3, var(--color-surface-alt)); color: var(--color-text-soft); }
.si-pill--empty   {
  background: transparent;
  color: var(--text-tertiary, var(--color-muted));
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Indexable flag */
.si-flag {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
}
.si-flag--ok  { color: var(--color-success); }
.si-flag--off { color: var(--color-danger); }

/* Row utility actions — small text-style buttons */
.si-action {
  display: inline-block;
  padding: 2px 7px;
  margin-left: .25rem;
  font-size: .7rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.si-action:first-child { margin-left: 0; }
.si-action:hover {
  background: var(--hover-surface, var(--bg-surface-2));
  color: var(--color-text);
  border-color: var(--border-strong, var(--color-muted));
  text-decoration: none;
}
.si-action--accent {
  color: var(--color-primary);
  border-color: var(--color-info-border, var(--color-primary));
}
.si-action--accent:hover {
  background: var(--color-info-soft, var(--accent-muted));
  color: var(--color-primary);
}
.si-action--done { opacity: .55; }

/* Pagination bar */
.si-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--color-border);
  background: var(--bg-surface-2, var(--color-surface-alt));
  font-size: .8rem;
}
.si-pagination__nav {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: var(--radius);
  transition: background .12s;
}
.si-pagination__nav:hover { background: var(--hover-surface, var(--bg-surface-2)); text-decoration: none; }
.si-pagination__nav--disabled {
  color: var(--text-tertiary, var(--color-muted));
  cursor: not-allowed;
  opacity: .55;
}
.si-pagination__info {
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.si-pagination__count {
  color: var(--color-muted);
  font-size: .76rem;
}

/* Inventory empty state */
.si-empty {
  text-align: center;
  padding: 2rem 1.1rem;
  color: var(--color-muted);
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-top: 1px solid var(--color-border);
  margin: 1rem -1.1rem -1.1rem;
}
.si-empty__icon {
  font-size: 1.4rem;
  color: var(--text-tertiary, var(--color-muted));
  margin-bottom: .5rem;
}
.si-empty__title {
  font-weight: 600;
  color: var(--color-text);
  font-size: .92rem;
  margin-bottom: .35rem;
}
.si-empty__sub {
  font-size: .82rem;
  color: var(--color-muted);
}

/* === §§4-7 Activity tables (compact, repeatable) ────────────────── */
.si-activity {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.si-activity thead th {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--text-tertiary, var(--color-muted));
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.si-activity tbody td {
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}
.si-activity tbody tr:last-child td { border-bottom: none; }
.si-activity tbody tr { transition: background .12s; }
.si-activity tbody tr:hover { background: var(--hover-surface, var(--bg-surface-2)); }
.si-activity__col-num { text-align: center; font-variant-numeric: tabular-nums; }
.si-activity__col-action { text-align: right; white-space: nowrap; }
.si-activity__date { color: var(--color-muted); font-size: .78rem; white-space: nowrap; }
.si-activity__url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  color: var(--color-text-soft);
  word-break: break-all;
}
.si-activity__group-label {
  padding: .65rem 1.1rem .35rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
}
.si-activity__footer {
  padding: .65rem 1.1rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-top: 1px solid var(--color-border);
  font-size: .78rem;
}

/* === §9 Artifacts archive — denser variant ──────────────────────── */
.si-artifacts tbody td { vertical-align: middle; }
.si-artifacts__module {
  color: var(--color-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  white-space: nowrap;
}
.si-artifacts__title {
  font-weight: 500;
  color: var(--color-text);
}
.si-artifacts__kind {
  color: var(--color-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Metadata Builder — typography consistency pass (2026-04-23)
   Quick alignment with the design system established by the 7
   redesigned pages (Overview / My Work / Clients / Client form /
   Client Hub / Site Intelligence / Blog Writer list). Title was
   defaulting to browser-default 2rem; subtitle was hardcoded #666.
   This block fixes the header only — deeper structural redesign
   of the rest of MB is deferred.
   ───────────────────────────────────────────────────────────────────── */
.meta-schema-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 .85rem;
  padding: 0 .25rem;
  flex-wrap: wrap;
}
.meta-schema-page__title-block { flex: 1; min-width: 0; }
.meta-schema-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .15rem;
  letter-spacing: -.01em;
}
.meta-schema-page__subtitle {
  font-size: .82rem;
  color: var(--color-muted);
  margin: 0;
}
.meta-schema-page__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex-shrink: 0;
}
.meta-schema-page__hint {
  font-size: .7rem;
  color: var(--color-muted);
}

/* ============================================================ */
/* Blog Writer — design system pass (April 2026)                */
/* ============================================================ */

/* --- Missing status pill variants -------------------------------- */
.blog-status--muted {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  font-size: .7rem;
  letter-spacing: .02em;
  border-radius: 3px;
}
.blog-status--info {
  background: var(--color-info-soft, var(--accent-muted, #dbeafe));
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 1px 6px;
  font-size: .7rem;
  letter-spacing: .02em;
  border-radius: 3px;
}
.blog-status--partial-draft {
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  color: var(--color-warn);
  border: 1px solid var(--color-warn);
  padding: 1px 6px;
  font-size: .7rem;
  letter-spacing: .02em;
  border-radius: 3px;
}
/* Recommended / Backup \u2014 tonal semantic markers in same pill language
   as other .blog-status--* values. No border, soft fill, tight padding. */
.blog-status--recommended {
  background: var(--color-success-soft, rgba(22, 163, 74, .1));
  color: var(--color-success);
  border: none;
  padding: 2px 8px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 10px;
}
.blog-status--backup {
  background: var(--bg-surface-3, var(--color-surface-alt, #f3f4f6));
  color: var(--color-muted);
  border: none;
  padding: 2px 8px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 10px;
}

/* --- Page header extensions -------------------------------------- */
.blog-page__header-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}
.blog-page__title-meta {
  font-weight: 400;
  color: var(--color-muted);
  font-size: .78em;
  letter-spacing: 0;
}

/* --- Form helpers ------------------------------------------------ */
.form-helper-inline {
  color: var(--color-muted);
  font-weight: 400;
  font-size: .78rem;
}
.form-helper-muted {
  color: var(--color-muted);
  font-size: .78rem;
}

/* --- Table utility classes --------------------------------------- */
.blog-table__nowrap { white-space: nowrap; }
.blog-table__note {
  color: var(--color-muted);
  font-size: .8rem;
}

/* --- hub-card extensions ----------------------------------------- */
.hub-card__header-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.hub-card__footer {
  padding: .65rem 1rem .85rem;
  border-top: 1px solid var(--color-border);
  font-size: .82rem;
  color: var(--color-muted);
}
.hub-card__footer--actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.hub-empty--inline {
  padding: .5rem 0;
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: .88rem;
  text-align: left;
}

/* --- hub-callout additions --------------------------------------- */
.hub-callout--info {
  border-left-color: var(--color-primary);
  background: var(--color-info-soft, var(--accent-muted));
}
.hub-callout__lede {
  margin: 0 0 .6rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
}

/* --- Error diagnostic — captured raw LLM response on parse failure */
.bw-error-diagnostic {
  margin-top: .6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .4rem .6rem;
  background: var(--color-surface-2, var(--color-surface));
  font-size: .82rem;
}
.bw-error-diagnostic > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  list-style: revert;
}
.bw-error-diagnostic[open] > summary {
  margin-bottom: .5rem;
  color: var(--color-text);
}
.bw-error-diagnostic__pre {
  margin: 0;
  padding: .6rem;
  max-height: 360px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-bg);
  border-radius: 4px;
  color: var(--color-text);
}

/* --- Topic list (used on detail, batch, deferred, rejected, ready) */
.bw-topic-list {
  list-style: none;
  margin: 0;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
}
.bw-topic {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  align-items: start;
}
.bw-topic__main { min-width: 0; }
.bw-topic__title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .35rem;
}
.bw-topic__num {
  color: var(--color-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  flex-shrink: 0;
}
.bw-topic__title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}
.bw-topic__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: .78rem;
  color: var(--color-muted);
  margin-top: .25rem;
}
.bw-topic__client {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.bw-topic__client:hover { text-decoration: underline; }
.bw-topic__pa,
.bw-topic__loc,
.bw-topic__by {
  color: var(--color-muted);
}
.bw-topic__reason {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .72rem;
}
.bw-topic__date {
  color: var(--color-muted);
  font-size: .76rem;
}
.bw-topic__angle {
  margin: .3rem 0 0;
  font-size: .83rem;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.5;
}
.bw-topic__keyword {
  margin: .25rem 0 0;
  font-size: .78rem;
  color: var(--color-muted);
}
.bw-topic__keyword-inline {
  color: var(--color-muted);
  font-size: .78rem;
}
/* Secondary data row: label (bold muted) + body (soft text). Tight grid
   so fields line up instead of wrapping randomly. */
.bw-topic__field {
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.5;
  display: flex;
  gap: .4rem;
  align-items: baseline;
}
.bw-topic__field > strong {
  color: var(--color-muted);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  min-width: 58px;
  padding-top: .1rem;
}
.bw-topic__field--warning { color: var(--color-danger); }
.bw-topic__field--warning > strong { color: var(--color-danger); }
.bw-topic__field--accent  { color: var(--color-primary); }
.bw-topic__field--accent > strong { color: var(--color-primary); }

/* Action group: primary CTA prominent, secondary actions compressed
   into a tight footer row of ghost links under the primary. Looks
   resolved, not mechanically stacked. */
.bw-topic__actions {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex-shrink: 0;
  align-items: stretch;
  min-width: 140px;
}
.bw-topic__actions .bw-topic__form { width: 100%; margin: 0; }
.bw-topic__actions .blog-action { width: 100%; justify-content: center; }
.bw-topic__actions .blog-action--ghost,
.bw-topic__actions .blog-action--danger {
  font-size: .72rem;
  padding: .2rem .4rem;
  border: none;
  background: transparent;
  color: var(--color-muted);
}
.bw-topic__actions .blog-action--ghost:hover {
  color: var(--color-primary);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.bw-topic__actions .blog-action--danger { color: var(--color-danger); }
.bw-topic__actions .blog-action--danger:hover {
  background: var(--color-danger-soft, rgba(220, 38, 38, .08));
  color: var(--color-danger);
}
.bw-topic__form { margin: 0; display: inline; }

/* Topic state variants \u2014 tonal tints, no loud backgrounds. */
.bw-topic--recommended {
  background: linear-gradient(to right, var(--color-info-soft, rgba(37,99,235,.05)), transparent 60%);
  border-left: 2px solid var(--color-primary);
}
.bw-topic--active {
  background: linear-gradient(to right, var(--color-success-soft, rgba(22,163,74,.06)), transparent 60%);
  border-left: 2px solid var(--color-success);
}
.bw-topic--approved {
  background: linear-gradient(to right, var(--color-success-soft, rgba(22,163,74,.05)), transparent 60%);
}
.bw-topic--deferred    { opacity: .85; }
.bw-topic--rejected    { opacity: .55; }
.bw-topic--ready {
  background: linear-gradient(to right, var(--color-info-soft, rgba(37,99,235,.05)), transparent 60%);
}
.bw-topic--draft_generated { opacity: .85; }

/* --- Batch-specific scaffolding --------------------------------- */
.bw-batch-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: .88rem;
}
.bw-batch-head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.bw-batch-tags {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-shrink: 0;
}

/* --- Key-value grid (shared identity block) --------------------- */
.bw-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .65rem 1.25rem;
}
.bw-kv {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .85rem;
}
.bw-kv__label {
  color: var(--color-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.bw-kv__value {
  color: var(--color-text);
  font-weight: 500;
  word-break: break-word;
}
.bw-kv__hint {
  color: var(--color-muted);
  font-size: .78rem;
  margin-left: .35rem;
  font-weight: 400;
}

/* --- Placeholder chips on prompt_edit --------------------------- */
.bw-placeholder {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: 1px 6px;
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  color: var(--color-warn);
  border: 1px solid var(--color-warn);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem;
}
.bw-placeholder-inline {
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  color: var(--color-warn);
  padding: 0 3px;
  border-radius: 2px;
  font-family: inherit;
}

/* --- Danger zone (delete section in schedule_form) -------------- */
.bw-danger-zone .client-form__section-title { color: var(--color-danger); }
.bw-danger-zone { border-left: 3px solid var(--color-danger); }

/* --- Inline banner on create form ------------------------------- */
.bw-inline-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .5rem .75rem;
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  border: 1px solid var(--color-warn);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--color-text);
}
.bw-inline-banner__status {
  margin-left: .5rem;
  color: var(--color-muted);
  font-size: .8rem;
}

/* --- Chip suggestion lists (keyword, sitemap) ------------------- */
.bw-chip-suggest { margin-top: .5rem; }
.bw-chip-suggest__list {
  margin-top: .25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.bw-chip {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: .15rem .5rem;
  font-size: .78rem;
  cursor: pointer;
  color: var(--color-text);
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.bw-chip:hover {
  background: var(--bg-surface-3, var(--color-surface-alt));
  border-color: var(--color-primary);
}
.bw-chip--keyword { color: var(--color-primary); }
.bw-chip--sitemap { color: var(--color-primary); }
.bw-chip--selected {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.bw-chip-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Preview Prompt modal --------------------------------------- */
.bw-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  overflow-y: auto;
}
.bw-modal__panel {
  max-width: 800px;
  margin: 3rem auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  color: var(--color-text);
}
.bw-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.bw-modal__title { margin: 0; font-size: 1.1rem; }
.bw-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-muted);
  line-height: 1;
}
.bw-modal__close:hover { color: var(--color-text); }
.bw-modal__lede {
  color: var(--color-muted);
  font-size: .85rem;
  margin-bottom: 1rem;
}
.bw-modal__loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-muted);
}
.bw-modal__content {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-surface-3, var(--color-surface-alt));
  padding: 1rem;
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.5;
  max-height: 60vh;
  overflow-y: auto;
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* --- Prompt code display (prompt_detail) ------------------------ */
.bw-prompt-code {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-text);
  padding: 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  margin: 0;
}
.bw-prompt-code--small {
  font-size: .8rem;
  padding: .75rem;
  margin-bottom: 1rem;
}
.bw-subheading {
  font-size: .92rem;
  margin: 1.1rem 0 .4rem;
  color: var(--color-text);
  font-weight: 600;
}
.bw-notes {
  white-space: pre-wrap;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.55;
  margin: 0;
}

/* --- SEO metadata inline display (draft_detail) ----------------- */
.bw-seo-line { margin: 0 0 .4rem; font-size: .9rem; color: var(--color-text); }
.bw-seo-line:last-child { margin-bottom: 0; }
.bw-seo-line__count { color: var(--color-muted); font-size: .78rem; }

/* --- Article content card (draft_detail) ------------------------ */
.bw-article-card { background: var(--color-surface); }
.bw-article { padding: .25rem .25rem .5rem; }
.bw-article__h1 {
  font-size: 1.5rem;
  margin: .25rem 0 .5rem;
  color: var(--color-text);
  line-height: 1.25;
}
.bw-article__intro {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  line-height: 1.6;
}
.bw-article__body { margin-bottom: 1.5rem; line-height: 1.7; color: var(--color-text); }
.bw-article__faq { margin-bottom: 1.5rem; }
.bw-article__faq-title { font-size: 1.2rem; color: var(--color-text); margin: 1rem 0 .5rem; }
.bw-article__cta {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--color-info-soft, var(--accent-muted));
  border-radius: var(--radius);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
}
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body li { margin-bottom: .25rem; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }

/* --- Collapsible sections --------------------------------------- */
.bw-collapse { padding: 0; }
.bw-collapse__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1rem;
  color: var(--color-text);
  list-style: none;
  outline: none;
}
.bw-collapse__summary::-webkit-details-marker { display: none; }
.bw-collapse__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .5rem;
  color: var(--color-muted);
  transition: transform .12s;
  font-size: .75em;
}
.bw-collapse[open] > .bw-collapse__summary::before { transform: rotate(90deg); }
.bw-collapse__count { color: var(--color-muted); font-weight: 400; font-size: .85rem; }
.bw-collapse--accent { border-left: 3px solid var(--color-warn); }
.bw-collapse > .hub-card__body { padding-top: 0; }

/* --- Link list (schema refs, internal links) -------------------- */
.bw-link-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-soft, var(--text-secondary));
  font-size: .9rem;
  line-height: 1.55;
}
.bw-link-list li { margin-bottom: .25rem; }

/* --- Review notes + note form (draft_detail) -------------------- */
.bw-review-notes {
  margin-bottom: 1rem;
  padding: .75rem;
  background: var(--bg-surface-3, var(--color-surface-alt));
  border-radius: var(--radius);
  white-space: pre-wrap;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--color-text);
}
.bw-note-form { margin-top: .75rem; }
.bw-note-form .form-group { margin-bottom: .5rem; }

/* --- Detail page structural elements ---------------------------- */
.bw-workflow { padding: 1rem; }
.bw-draft-card { border-left: 3px solid var(--color-primary); }
.bw-approved-topic { border-left: 3px solid var(--color-success); }
.bw-approved-topic__title { margin: 0; font-size: .95rem; color: var(--color-text); }
.bw-approved-topic__meta { margin: .3rem 0 0; color: var(--color-muted); font-size: .8rem; }
.bw-schema-card { border-left: 3px solid var(--color-warn); }
.bw-live-url {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.bw-live-url .form-input { flex: 1; }
.bw-live-url__current {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--color-muted);
}
.bw-callout-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .4rem;
}
.bw-processing {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .88rem;
  color: var(--color-text);
}
.bw-processing__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: bw-pulse 1.2s infinite;
  flex-shrink: 0;
}
@keyframes bw-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
.bw-draft-revised { color: var(--color-primary); font-size: .85rem; }

/* --- Guide page ------------------------------------------------- */
.bw-guide { max-width: 900px; }
.bw-guide__section { margin-bottom: 1.25rem; }
.bw-guide__section p { color: var(--color-text-soft, var(--text-secondary)); line-height: 1.6; margin: .5rem 0; }
.bw-guide__list {
  padding-left: 1.25rem;
  margin: .5rem 0;
  color: var(--color-text-soft, var(--text-secondary));
}
.bw-guide__list li {
  margin-bottom: .4rem;
  font-size: .9rem;
  line-height: 1.55;
}
.bw-guide__list--ordered { list-style: decimal; }
.bw-guide__step {
  display: flex;
  gap: .75rem;
  margin-bottom: .75rem;
  align-items: flex-start;
}
.bw-guide__step-num {
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.bw-guide__step-text { flex: 1; }
.bw-guide__step-text strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--color-text);
}
.bw-guide__step-text p {
  margin: 0;
  color: var(--color-text-soft, var(--text-secondary));
  font-size: .9rem;
  line-height: 1.55;
}
.bw-guide__tip {
  margin: .85rem 0;
  padding: .65rem .9rem;
}
.bw-guide__tip strong { color: var(--color-primary); }
.bw-guide__table {
  margin: .75rem 0;
  font-size: .88rem;
}
.bw-guide__table th { background: var(--bg-surface-3, var(--color-surface-alt)); font-weight: 600; }
.bw-guide__table td { color: var(--color-text-soft, var(--text-secondary)); }

/* Print styles for guide */
@media print {
  .blog-subnav, .blog-utility, nav, header, .page-header .btn { display: none !important; }
  .bw-guide__section { break-inside: avoid; }
  .hub-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { font-size: 11pt; background: #fff !important; color: #000 !important; }
  .hub-card { background: #fff !important; color: #000 !important; }
}

/* --- client-form footer slot for create.html -------------------- */
.client-form__footer-note {
  margin: 0 0 .65rem;
  color: var(--color-muted);
  font-size: .85rem;
}
.client-form__footer-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================ */
/* Blog Writer \u2014 refinement pass (April 2026 follow-up)         */
/* ============================================================ */

/* --- blog-action family: consistent height/padding/radius ------- */
/* Scoped to .blog-action only \u2014 .btn keeps its existing base sizing
   so Overview / Clients / Admin pages are unaffected. */
.blog-action {
  height: 30px;
  line-height: 1;
  font-size: .78rem;
  font-weight: 500;
  padding: 0 .75rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.blog-action--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.blog-action--primary:hover {
  background: var(--accent-hover, #1d4ed8);
  border-color: var(--accent-hover, #1d4ed8);
  color: #fff;
}
.blog-action--ghost {
  background: transparent;
  color: var(--color-muted);
  border-color: transparent;
}
.blog-action--ghost:hover {
  color: var(--color-primary);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.blog-action--danger {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}
.blog-action--danger:hover {
  background: var(--color-danger-soft, rgba(220, 38, 38, .08));
  color: var(--color-danger);
}

/* --- Request card header (Approve Batch) ------------------------ */
/* Resolves the "Susan Karpa + meta + status" strip into a proper
   section header instead of loose text inside a box. */
.bw-batch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem .75rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(to bottom, var(--bg-surface-2, #f9fafb), transparent);
}
.bw-batch-header__main { min-width: 0; flex: 1; }
.bw-batch-header__client {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.bw-batch-header__client a {
  color: inherit;
  text-decoration: none;
}
.bw-batch-header__client a:hover { color: var(--color-primary); }
.bw-batch-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  font-size: .78rem;
  color: var(--color-muted);
  align-items: center;
}
.bw-batch-header__meta-sep {
  color: var(--color-border);
}
.bw-batch-header__tags {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
  align-items: center;
}

/* --- Settings page \u2014 two-column layout for narrow registry tables */
.bw-settings-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .85rem;
}
@media (max-width: 900px) {
  .bw-settings-split { grid-template-columns: 1fr; }
}
.bw-settings-split > .hub-card { margin-bottom: 0; }

/* Tables inside hub-card body \u2014 tighten, left-align, registry feel */
.hub-card__body--flush > .blog-table,
.bw-registry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.bw-registry-table thead th {
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
  color: var(--color-muted);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .5rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.bw-registry-table tbody td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.bw-registry-table tbody tr:last-child td { border-bottom: none; }
.bw-registry-table tbody tr:hover { background: var(--bg-surface-2, rgba(0,0,0,.02)); }
.bw-registry-table td code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .8rem;
  color: var(--color-text);
  background: var(--bg-surface-3, var(--color-surface-alt));
  padding: 1px 6px;
  border-radius: 3px;
}
.bw-registry-table__note {
  color: var(--color-muted);
  font-size: .78rem;
}
.bw-registry-table__action {
  text-align: right;
  white-space: nowrap;
}
.bw-registry-table__action a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
}
.bw-registry-table__action a:hover { text-decoration: underline; }

/* --- Guide page \u2014 stronger section framing + typography ladder --- */
.bw-guide {
  max-width: 920px;
  margin: 0 auto;
}
.bw-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1.75rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .bw-guide-layout { grid-template-columns: 1fr; }
  .bw-guide__toc { display: none; }
}

/* Sticky in-page TOC */
.bw-guide__toc {
  position: sticky;
  top: 1rem;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .82rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  align-self: start;
}
.bw-guide__toc-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-muted);
  margin: 0 0 .5rem;
}
.bw-guide__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.bw-guide__toc-list a {
  display: block;
  padding: .25rem .4rem;
  color: var(--color-text-soft, var(--text-secondary));
  text-decoration: none;
  border-radius: 3px;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
  font-size: .8rem;
  line-height: 1.35;
}
.bw-guide__toc-list a:hover {
  color: var(--color-primary);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.bw-guide__toc-list a.is-active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
  background: var(--color-info-soft, var(--accent-muted, transparent));
}
.bw-guide__toc-list li.is-part > a {
  font-weight: 700;
  color: var(--color-text);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .3rem;
}
.bw-guide__toc-list li.is-part:first-child > a { margin-top: 0; }

/* Guide section \u2014 stronger framing */
.bw-guide__section {
  margin-bottom: 1rem;
  scroll-margin-top: 1rem;
}
.bw-guide__section > .hub-card__header {
  border-left: 3px solid var(--color-primary);
  padding-left: .95rem;
}
.bw-guide__section > .hub-card__header .hub-card__title {
  font-size: 1.1rem;
}
/* Part sections get a heavier treatment */
.bw-guide__section--part > .hub-card__header {
  background: linear-gradient(to right, var(--color-info-soft, rgba(37,99,235,.06)), transparent 80%);
}
.bw-guide__section--part > .hub-card__header .hub-card__title {
  font-size: 1.25rem;
  color: var(--color-primary);
}
.bw-guide__section--part > .hub-card__header::before {
  content: attr(data-part);
  display: block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-primary);
  margin-bottom: .2rem;
}

/* Typography ladder inside guide body */
.bw-guide__section p {
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.65;
  margin: .5rem 0 .85rem;
  font-size: .9rem;
}
.bw-guide__section .bw-subheading {
  font-size: .92rem;
  margin: 1.35rem 0 .4rem;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -.005em;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--color-border);
}
.bw-guide__section .bw-subheading:first-child { margin-top: 0; }

/* Guide callouts \u2014 stronger framing as learning anchors */
.bw-guide__tip {
  margin: 1rem 0;
  padding: .75rem 1rem .75rem 2.2rem;
  background: var(--color-info-soft, rgba(37, 99, 235, .06));
  border: 1px solid var(--color-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  position: relative;
  font-size: .86rem;
  color: var(--color-text);
  line-height: 1.55;
}
.bw-guide__tip::before {
  content: "\u2139";
  position: absolute;
  left: .85rem;
  top: .7rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: .7rem;
}
.bw-guide__tip strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Guide tables \u2014 tighter, more readable */
.bw-guide__table {
  width: 100%;
  border-collapse: collapse;
  margin: .75rem 0 1rem;
  font-size: .86rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.bw-guide__table th {
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
  padding: .55rem .85rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--color-border);
}
.bw-guide__table td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-soft, var(--text-secondary));
  vertical-align: top;
  line-height: 1.55;
}
.bw-guide__table tr:last-child td { border-bottom: none; }
.bw-guide__table tr:nth-child(even) td {
  background: var(--bg-surface-2, rgba(0, 0, 0, .015));
}

/* Guide step list (numbered bubbles) */
.bw-guide__step {
  display: flex;
  gap: .85rem;
  margin-bottom: .85rem;
  align-items: flex-start;
  padding: .35rem 0;
}
.bw-guide__step-num {
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
  margin-top: .05rem;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
.bw-guide__step-text strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 700;
}
.bw-guide__step-text p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
}

/* Guide lists */
.bw-guide__list {
  padding-left: 1.3rem;
  margin: .5rem 0 1rem;
  color: var(--color-text-soft, var(--text-secondary));
}
.bw-guide__list li {
  margin-bottom: .4rem;
  font-size: .88rem;
  line-height: 1.6;
}
.bw-guide__list strong { color: var(--color-text); font-weight: 700; }
.bw-guide__list--ordered { list-style: decimal; }

/* --- Settings page header hierarchy (KPI constraint) ---------- */
.bw-settings-kpi-card > .hub-card__body { padding: 1rem 1.1rem; }

/* --- Approve Batch batch-hint tightened --------------------------- */
.bw-batch-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  background: var(--color-info-soft, rgba(37, 99, 235, .06));
  border: 1px solid var(--color-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--color-text);
}

/* --- Dark mode adjustments \u2014 disable the light-mode shadows ------ */
[data-theme="dark"] .hub-card,
[data-theme="dark"] .blog-subnav,
[data-theme="dark"] .blog-toolbar,
[data-theme="dark"] .bw-guide__toc {
  box-shadow: none;
}
[data-theme="dark"] .blog-toolbar {
  background: var(--bg-surface-2);
}
[data-theme="dark"] .bw-batch-header {
  background: linear-gradient(to bottom, var(--bg-surface-2), transparent);
}
[data-theme="dark"] .bw-guide__step-num {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .bw-guide__section--part > .hub-card__header {
  background: linear-gradient(to right, rgba(59, 130, 246, .12), transparent 80%);
}
[data-theme="dark"] .bw-topic--recommended,
[data-theme="dark"] .bw-topic--ready {
  background: linear-gradient(to right, rgba(59, 130, 246, .08), transparent 60%);
}
[data-theme="dark"] .bw-topic--active,
[data-theme="dark"] .bw-topic--approved {
  background: linear-gradient(to right, rgba(22, 163, 74, .09), transparent 60%);
}

/* ============================================================ */
/* Blog Writer \u2014 topic row polish (April 2026)                  */
/* ============================================================ */

/* Better field rhythm: dl-based structured rows with fixed-width
   uppercase labels so Angle / Why now / Keyword line up cleanly. */
.bw-topic__details {
  margin: .4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bw-topic__details .bw-topic__field {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: .85rem;
  margin-top: 0;
  align-items: baseline;
  font-size: .83rem;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.5;
}
.bw-topic__details .bw-topic__field dt {
  margin: 0;
  color: var(--color-muted);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-top: .15rem;
}
.bw-topic__details .bw-topic__field dd {
  margin: 0;
  color: var(--color-text-soft, var(--text-secondary));
}
.bw-topic__details .bw-topic__field--warning dt,
.bw-topic__details .bw-topic__field--warning dd { color: var(--color-danger); }
.bw-topic__details .bw-topic__field--accent dt,
.bw-topic__details .bw-topic__field--accent dd { color: var(--color-primary); }

/* Integrate the action rail: visually tied to the card via a subtle
   left divider so it reads as part of the same review component. */
.bw-topic {
  grid-template-columns: 1fr minmax(160px, auto);
}
.bw-topic__actions {
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
  min-width: 160px;
  gap: .5rem;
}
/* Primary stays prominent, full-width */
.bw-topic__actions .blog-action--primary { width: 100%; }

/* Secondary actions \u2014 tight horizontal row of low-emphasis chips
   under the primary. Shared treatment so they feel intentional. */
.bw-topic__secondary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: .3rem;
}
.bw-topic__secondary-actions .bw-topic__form { width: 100%; }
.blog-action--secondary {
  height: 26px;
  padding: 0 .55rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: background .12s, color .12s, border-color .12s;
  width: 100%;
  justify-content: center;
}
.blog-action--secondary:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.blog-action--danger-secondary {
  color: var(--color-danger);
}
.blog-action--danger-secondary:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-danger-soft, rgba(220, 38, 38, .06));
}

/* Backup badge \u2014 more intentional tonal treatment. Uses a subtle
   accent dot + muted text so it reads as "alternate option" in the
   same family as Recommended, not as "also-ran." */
.blog-status--backup {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 2px 8px 2px 18px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 10px;
  position: relative;
}
.blog-status--backup::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-muted);
}

/* Inline edit form revealed via <details> */
.bw-topic__edit {
  margin-top: .6rem;
}
.bw-topic__edit-trigger {
  font-size: .75rem;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  padding: .15rem 0;
  display: inline-block;
  user-select: none;
}
.bw-topic__edit-trigger::-webkit-details-marker { display: none; }
.bw-topic__edit-trigger::before {
  content: "\u270e ";
  margin-right: .25rem;
}
.bw-topic__edit-trigger:hover { text-decoration: underline; }
.bw-topic__edit[open] .bw-topic__edit-trigger { color: var(--color-text); font-weight: 600; }
.bw-topic__edit-form {
  margin-top: .5rem;
  padding: .75rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bw-topic__edit-label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
}
.bw-topic__edit-label .form-input {
  font-size: .88rem;
  padding: .35rem .5rem;
  color: var(--color-text);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}
.bw-topic__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .2rem;
}

/* Backup-tinted row \u2014 very subtle to indicate alternate recommendation */
.bw-topic--backup {
  background: linear-gradient(to right, var(--bg-surface-2, rgba(0,0,0,.02)), transparent 60%);
}

/* --- Filter toolbar as review-toolbar component ---------------- */
.blog-toolbar {
  gap: .6rem;
  padding: .6rem .85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  box-shadow: none;
  border-left: 3px solid var(--color-border);
}
.blog-toolbar__label {
  font-size: .62rem;
  color: var(--color-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: .1rem;
  padding-right: .5rem;
  border-right: 1px solid var(--color-border);
}
.blog-toolbar__select {
  min-width: 140px;
  padding: 4px 8px;
  font-size: .8rem;
  height: 28px;
  border-radius: 4px;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
}
.blog-toolbar__clear {
  font-size: .75rem;
  margin-left: auto;
}
/* When toolbar is immediately followed by a card/list, merge borders
   so they read as one unit. */
.blog-toolbar + .hub-card,
.blog-toolbar + section.hub-card,
.blog-toolbar + .bw-batch-hint {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* --- Dark mode adjustments ------------------------------------- */
[data-theme="dark"] .bw-topic__actions {
  border-left-color: var(--border-subtle);
}
[data-theme="dark"] .blog-action--secondary:hover {
  background: var(--bg-surface-3);
}
[data-theme="dark"] .blog-subnav__link--active {
  background: rgba(59, 130, 246, .15);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
[data-theme="dark"] .bw-topic--backup {
  background: linear-gradient(to right, rgba(255,255,255,.02), transparent 60%);
}

/* ============================================================ */
/* Schema Coverage \u2014 operational queue (Phase A, April 2026)    */
/* ============================================================ */

/* --- Coverage ribbon: overall health bar + state chips ----------- */
.sc-ribbon {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sc-ribbon__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* State filter chips \u2014 clickable, highlight active */
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  font-size: .78rem;
  color: var(--color-text);
  transition: background .12s, border-color .12s, color .12s;
}
.sc-chip:hover {
  border-color: var(--color-primary);
  text-decoration: none;
  background: var(--color-surface);
}
.sc-chip__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-size: .88rem;
}
.sc-chip__label {
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .05em;
}
.sc-chip--active {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.sc-chip--active .sc-chip__label { color: var(--color-primary); }
.sc-chip--missing .sc-chip__count { color: var(--color-danger); }
.sc-chip--issues  .sc-chip__count { color: var(--color-warn); }
.sc-chip--valid   .sc-chip__count { color: var(--color-success); }
.sc-chip--muted   .sc-chip__count { color: var(--color-muted); }

/* --- Queue section card \u2014 one per state bucket ------------------ */
.sc-queue .hub-card__title {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.sc-queue__count {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
/* Color-code the queue section header's left border by state so the
   operator can scan the page vertically and lock onto actionable
   buckets without reading titles. */
.sc-queue--missing    > .hub-card__header { border-left: 3px solid var(--color-danger); padding-left: .95rem; }
.sc-queue--has_issues > .hub-card__header { border-left: 3px solid var(--color-warn);   padding-left: .95rem; }
.sc-queue--valid      > .hub-card__header { border-left: 3px solid var(--color-success); padding-left: .95rem; }
.sc-queue--not_audited > .hub-card__header { border-left: 3px solid var(--color-border); padding-left: .95rem; }

.sc-queue--missing    .sc-queue__count { background: var(--color-danger-soft, rgba(220,38,38,.1));  color: var(--color-danger); }
.sc-queue--has_issues .sc-queue__count { background: var(--color-warn-soft, rgba(217,119,6,.12));   color: var(--color-warn); }
.sc-queue--valid      .sc-queue__count { background: var(--color-success-soft, rgba(22,163,74,.1)); color: var(--color-success); }

/* --- Row list inside a queue section ---------------------------- */
.sc-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.sc-row:last-child { border-bottom: none; }
.sc-row:hover { background: var(--bg-surface-2, rgba(0, 0, 0, .02)); }

.sc-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.sc-row__check { flex-shrink: 0; }
.sc-row__actions { flex-shrink: 0; }
.sc-row__title-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .15rem;
}
.sc-row__title {
  font-weight: 600;
  color: var(--color-text);
  font-size: .9rem;
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-row__type {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  background: var(--bg-surface-3, var(--color-surface-alt));
  padding: 1px 7px;
  border-radius: 3px;
}
.sc-row__meta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--color-muted);
}
.sc-row__url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .72rem;
  color: var(--color-muted);
  background: none;
  padding: 0;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.sc-row__actions {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
  align-items: center;
}
.sc-row__actions .blog-action { font-size: .74rem; }

/* Row state tints \u2014 subtle accent on the left so rows read
   consistently with their section header. */
.sc-row--missing    { box-shadow: inset 2px 0 0 var(--color-danger-soft, rgba(220,38,38,.35)); }
.sc-row--has_issues { box-shadow: inset 2px 0 0 var(--color-warn-soft,   rgba(217,119,6,.4)); }
.sc-row--valid      { box-shadow: inset 2px 0 0 transparent; }
.sc-row--not_audited { box-shadow: inset 2px 0 0 transparent; opacity: .88; }

/* --- Responsive: actions wrap below main on narrow screens ------ */
@media (max-width: 720px) {
  .sc-row {
    flex-wrap: wrap;
    gap: .35rem .8rem;
  }
  .sc-row__main { flex-basis: 100%; }
  .sc-row__actions { justify-content: flex-start; }
  .sc-row__title { max-width: 100%; white-space: normal; }
  .sc-row__url   { max-width: 100%; white-space: normal; }
}

/* --- Dark mode: drop light-mode shadows on ribbon --------------- */
[data-theme="dark"] .sc-ribbon { box-shadow: none; }
[data-theme="dark"] .sc-row:hover { background: var(--bg-surface-2); }

/* ============================================================ */
/* Schema Builder workbench \u2014 Phase C (April 2026)              */
/* ============================================================ */

/* Outer workbench container \u2014 match the coverage page's width */
.sb-workbench {
  max-width: 860px;
}
.sb-card {
  max-width: 860px;
}

/* Ensure legacy inline form fields use the design-system input look
   inside the workbench. The existing .form-input class is already
   styled globally; this just tightens the rhythm. */
.sb-card .hub-card__body label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--color-text);
}
.sb-card .hub-card__body label small {
  color: var(--color-muted);
  font-weight: 400;
  font-size: .75rem;
}
.sb-card .hub-card__body .field-group {
  margin-bottom: .85rem;
}
.sb-card .hub-card__body .field-group:last-child {
  margin-bottom: 0;
}

/* Existing schema accordion inside Page Context */
.sb-existing {
  margin-top: .5rem;
}
.sb-existing__summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  padding: .25rem 0;
}
.sb-existing__summary::-webkit-details-marker { display: none; }
.sb-existing__summary::before {
  content: "\u25b8";
  display: inline-block;
  margin-right: .4rem;
  color: var(--color-muted);
  transition: transform .12s;
  font-size: .7em;
}
.sb-existing[open] > .sb-existing__summary::before { transform: rotate(90deg); }
.sb-existing__content {
  margin-top: .5rem;
  padding: .75rem;
  background: var(--bg-surface-3, var(--color-surface-alt, #f5f7fa));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem;
  max-height: 300px;
  overflow-y: auto;
  color: var(--color-text);
}

/* Generate button footer */
.sb-generate-footer {
  justify-content: space-between;
}
.sb-generate-note {
  font-size: .76rem;
  color: var(--color-muted);
}

/* Build status header */
.sb-build-status .hub-card__title {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.sb-build-status__version {
  color: var(--color-primary);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sb-build-status__unsaved {
  color: var(--color-muted);
  font-style: italic;
}

/* Warning list inside advisory callout */
.sb-warning-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.55;
}
.sb-warning-list li { margin-bottom: .25rem; }

/* Output blocks: script tag + JSON-LD + copy button */
.sb-output {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: .85rem;
  overflow: hidden;
  background: var(--bg-surface-3, var(--color-surface-alt, #f5f7fa));
}
.sb-output:last-child { margin-bottom: 0; }
.sb-output__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .55rem .85rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-bottom: 1px solid var(--color-border);
  font-size: .82rem;
  flex-wrap: wrap;
}
.sb-output__head strong { color: var(--color-text); }
.sb-output__hint {
  font-size: .72rem;
  color: var(--color-muted);
  margin-left: .5rem;
}
.sb-output__code {
  margin: 0;
  padding: .85rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--bg-surface-3, var(--color-surface-alt));
  max-height: 420px;
  overflow: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Implementation note below outputs */
.sb-impl-note {
  margin-top: .85rem;
  padding: .75rem .9rem;
  background: var(--color-info-soft, var(--accent-muted));
  border: 1px solid var(--color-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: .85rem;
}
.sb-impl-note strong { color: var(--color-primary); }
.sb-impl-note p {
  margin: .25rem 0 0;
  color: var(--color-text);
  line-height: 1.55;
}

/* Validation / Handoff placeholder cards */
.sb-validation .hub-empty,
.sb-handoff .hub-empty {
  padding: .75rem 0;
}

/* Build history list */
.sb-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-history__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .82rem;
  flex-wrap: wrap;
}
.sb-history__row:last-child { border-bottom: none; }
.sb-history__version {
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}
.sb-history__date {
  color: var(--color-muted);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.sb-history__by {
  color: var(--color-muted);
  font-size: .76rem;
}

/* Dark mode: neutralize the legacy inline `.output-box` used by
   the Shorten modal's preview pane so it stays readable. */
[data-theme="dark"] .output-box {
  background: var(--bg-surface-3);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="dark"] .confidence-hint { color: var(--text-tertiary); }
[data-theme="dark"] .sb-card .hub-card__body .field-group input[type="text"],
[data-theme="dark"] .sb-card .hub-card__body .field-group input[type="url"],
[data-theme="dark"] .sb-card .hub-card__body .field-group input[type="date"],
[data-theme="dark"] .sb-card .hub-card__body .field-group textarea,
[data-theme="dark"] .sb-card .hub-card__body .field-group select {
  /* These should already be themed via the global input rules, but
     scope-bump in case something overrides. */
  color: var(--text-primary);
}

/* ============================================================ */
/* Schema Audit \u2014 index + create polish (April 2026)           */
/* ============================================================ */

/* Summary ribbon on the audit list. Reuses .sc-chip from Schema
   Coverage so the two surfaces read as one visual family. */
.sa-ribbon {
  margin-bottom: .75rem;
}
.sa-ribbon__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Audit table rows are clickable \u2014 soft hover cue + pointer */
.sa-audit-row {
  cursor: pointer;
  transition: background .12s;
}
.sa-audit-row:hover {
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.sa-audit-row--stuck > td:first-child {
  box-shadow: inset 3px 0 0 0 rgba(245, 158, 11, .55);
}
.sa-audit-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sa-audit-table__site {
  font-size: .8rem;
  color: var(--color-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.sa-critical { color: var(--color-danger); font-weight: 600; }
.sa-warn     { color: var(--color-warn); font-weight: 600; }

/* Create page: two-column layout on wide, stacked on narrow.
   Setup form on the left, helper panel on the right. */
.sa-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  max-width: 1100px;
}
@media (max-width: 900px) {
  .sa-create-layout { grid-template-columns: 1fr; }
}
.sa-create-card { margin-bottom: 0; }
.sa-create-footer {
  justify-content: space-between;
}
.sa-create-note {
  font-size: .78rem;
  color: var(--color-muted);
  flex-basis: 100%;
}
@media (min-width: 600px) {
  .sa-create-note { flex-basis: auto; flex: 1; margin-left: .75rem; }
}

/* Helper panel \u2014 a dl-style list of "how it works" rows */
.sa-create-help > .hub-card { margin-bottom: 1rem; }
.sa-help-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.sa-help-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.sa-help-row dt {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
}
.sa-help-row dd {
  margin: 0;
  font-size: .84rem;
  color: var(--color-text-soft, var(--text-secondary));
  line-height: 1.55;
}

.sa-create-advanced {
  opacity: .7;
  background: var(--bg-surface-2, var(--color-surface-alt));
}
.sa-create-advanced .hub-card__title { color: var(--color-muted); }

/* ============================================================ */
/* Schema Audit \u2014 detail redesign (April 2026)                 */
/* ============================================================ */

/* Site link in the page subtitle */
.sa-detail__site-link {
  color: var(--color-muted);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .8rem;
}
.sa-detail__site-link:hover { color: var(--color-primary); text-decoration: underline; }

/* Summary header strip: status + 6 KPIs in one horizontal band */
.sa-summary { margin-bottom: .85rem; }
.sa-summary__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sa-summary__status {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-shrink: 0;
  padding-right: 1rem;
  border-right: 1px solid var(--color-border);
  min-height: 42px;
  align-self: stretch;
}
.sa-summary__kpis {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.sa-kpi {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 68px;
}
.sa-kpi__num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sa-kpi__label {
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
}
.sa-kpi--coverage .sa-kpi__num { color: var(--color-primary); }
.sa-kpi--critical .sa-kpi__num { color: var(--color-danger); }
.sa-kpi--warn     .sa-kpi__num { color: var(--color-warn); }

/* Audit-level resolution rollup — live progress across the audit lifecycle
   (resolved / in flight / unaddressed). Sits below the static KPI row so
   the snapshot scan numbers + the live bundle progress read together. */
.sa-rollup {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-soft, var(--color-border));
  font-size: 0.85rem;
  color: var(--color-muted);
}
.sa-rollup__label { color: var(--color-muted); letter-spacing: 0.02em; }
.sa-rollup__stat { color: var(--color-text); }
.sa-rollup__stat strong { font-weight: 700; margin-right: 0.15rem; }
.sa-rollup__stat--resolved strong { color: var(--color-success, var(--color-primary)); }
.sa-rollup__stat--in-flight strong { color: var(--color-warn); }
.sa-rollup__stat--unaddressed strong { color: var(--color-danger, var(--color-warn)); }
.sa-rollup__sep { color: var(--color-border); }

/* Rollup stats double as filter buttons — click to scope the page list. */
button.sa-rollup__stat {
  background: none;
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button.sa-rollup__stat:hover:not(:disabled) {
  border-color: var(--color-border);
  background: var(--bg-surface-2, var(--color-surface-alt));
}
button.sa-rollup__stat.sa-rollup__stat--active {
  border-color: var(--color-primary);
  background: var(--color-info-soft, var(--bg-surface-2));
}
.sa-rollup__clear {
  background: none;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  margin-left: 0.5rem;
}
.sa-rollup__clear:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}

/* When a rollup filter is active, hide every row whose data-rollup-state
   doesn't match. Three rules — one per state — explicitly let matching
   rows through. Absence of data-rollup-active = no filter, default view. */
.sa-inv-table[data-rollup-active] .sa-inv-row { display: none; }
.sa-inv-table[data-rollup-active="resolved"] .sa-inv-row[data-rollup-state="resolved"] { display: table-row; }
.sa-inv-table[data-rollup-active="in_flight"] .sa-inv-row[data-rollup-state="in_flight"] { display: table-row; }
.sa-inv-table[data-rollup-active="unaddressed"] .sa-inv-row[data-rollup-state="unaddressed"] { display: table-row; }

/* Client Hub mirror of the audit rollup. Same counts, anchor links
   that deep-link to the audit detail with ?rollup=<state> so the
   filter is pre-applied on arrival. */
.hub-audit-rollup__stat {
  text-decoration: none;
  color: var(--color-text);
  padding: 1px 4px;
  border-radius: 3px;
}
.hub-audit-rollup__stat:hover { background: var(--bg-surface-2, var(--color-surface-alt)); }
.hub-audit-rollup__stat--resolved { color: var(--color-success, var(--color-primary)); }
.hub-audit-rollup__stat--in-flight { color: var(--color-warn); }
.hub-audit-rollup__stat--unaddressed { color: var(--color-danger, var(--color-warn)); }

/* Page inventory */
.sa-inventory__filter {
  font-size: .78rem;
  padding: 4px 8px;
  height: 28px;
  min-width: 160px;
}

/* Wrap the table in a tinted "strip" so each row reads as a discrete
   card floating on a soft background \u2014 mirrors the Blog Writer
   .bw-topic-list feel. Uses border-spacing instead of border-collapse
   so rows get real vertical gaps. */
.sa-inventory > .hub-card__body--flush {
  padding: .5rem;
  background: var(--bg-surface-2, var(--color-surface-alt, #f5f7fa));
}
.sa-inv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .5rem;
}
/* Each row gets card shape via its own cells \u2014 bg, border, rounded
   corners on the outer cells. The expanded detail row floats just
   under its parent row with its own matching card shell. */
.sa-inv-row,
.sa-inv__detail {
  cursor: pointer;
  transition: background .12s;
}
.sa-inv-row > td,
.sa-inv__detail > td {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.sa-inv-row > td:first-child,
.sa-inv__detail > td:first-child {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.sa-inv-row > td:last-child,
.sa-inv__detail > td:last-child {
  border-right: 1px solid var(--color-border);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.sa-inv-row:hover > td { background: var(--bg-surface-3, #fafbfc); }

/* Row color tints by page_status \u2014 left accent bar INSIDE the card */
.sa-inv-row--critical_risk > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.sa-inv-row--issues_only  > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.sa-inv-row--mixed        > td:first-child { box-shadow: inset 3px 0 0 var(--color-warn); }
.sa-inv-row--no_schema    > td:first-child { box-shadow: inset 3px 0 0 var(--color-border); }
.sa-inv-row--clean        > td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }
.sa-inv-row--ack { opacity: .55; }

/* 3-zone row layout: identity | issue summary | actions.
   Target column widths: identity takes most of the row, center
   block is ~240px so it's readable at two chips, right block is
   ~260px with severity on top + actions below. */
.sa-inv-table { table-layout: fixed; }
.sa-inv__zone {
  padding: .85rem 1.1rem;
  vertical-align: top;
}
.sa-inv__zone--left   { width: auto; min-width: 0; }
.sa-inv__zone--center {
  width: 260px;
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
}
.sa-inv__zone--right  {
  width: 280px;
  padding-right: 1.1rem;
  text-align: right;
  vertical-align: middle;
  position: relative;
}

/* ── LEFT zone: page identity ───────────────────────────── */
.sa-inv__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: baseline;
  margin-bottom: .15rem;
}
.sa-inv__title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -.005em;
  max-width: 640px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-inv__title:hover { color: var(--color-primary); text-decoration: none; }
.sa-inv__ext {
  color: var(--color-muted);
  font-size: .85em;
  margin-left: .15rem;
  font-weight: 400;
}
.sa-inv__url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .74rem;
  color: var(--color-muted);
  max-width: 720px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: .35rem;
}
.sa-inv__supporting {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .45rem;
}
.sa-inv__type {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  background: var(--bg-surface-3, var(--color-surface-alt));
  padding: 1px 7px;
  border-radius: 3px;
}
.sa-inv__meta {
  font-size: .72rem;
  color: var(--color-muted);
}
.sa-inv__meta--warn { color: var(--color-warn); }

/* Schema context sub-block */
.sa-inv__schema {
  padding: .45rem .6rem;
  background: var(--bg-surface-3, var(--color-surface-alt, rgba(0,0,0,.02)));
  border-radius: 4px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--color-text-soft, var(--text-secondary));
  display: inline-block;
  max-width: 100%;
}
.sa-inv__schema code {
  font-size: .74rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--color-primary);
  background: none;
  padding: 0;
}
.sa-inv__types--empty {
  color: var(--color-muted);
  font-style: italic;
}
.sa-inv__nodes {
  color: var(--color-muted);
  font-size: .72rem;
}
.sa-inv__id {
  margin-top: .15rem;
  color: var(--color-muted);
  font-size: .74rem;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  max-width: 100%;
}
.sa-inv__id code {
  color: var(--color-text-soft, var(--text-secondary));
  font-size: .72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sa-inv__id-label {
  font-weight: 700;
  color: var(--color-muted);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.sa-inv__id--empty { color: var(--color-muted); font-style: italic; }

/* ── CENTER zone: issue categories as a short bulleted list ── */
.sa-inv__issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.sa-inv__issue {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--color-text);
}
.sa-inv__issue-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-muted);
  display: inline-block;
  align-self: center;
}
.sa-inv__issue--critical .sa-inv__issue-dot { background: var(--color-danger); }
.sa-inv__issue--warning  .sa-inv__issue-dot { background: var(--color-warn); }
.sa-inv__issue--info     .sa-inv__issue-dot { background: var(--color-primary); }
.sa-inv__issue-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-inv__issue-count {
  color: var(--color-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sa-inv__issues-clean {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--color-success);
  font-weight: 500;
}
.sa-inv__issue-dot--clean { background: var(--color-success); }

/* ── RIGHT zone: severity + actions stacked ──────────────── */
.sa-inv__severity {
  display: inline-flex;
  margin-bottom: .5rem;
}
.sa-inv__action-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: stretch;
  min-width: 150px;
}
.sa-inv__action-row .blog-action {
  font-size: .74rem;
  padding: 0 .6rem;
  height: 28px;
  width: 100%;
  justify-content: center;
}
.sa-inv__action-row .blog-action--primary { font-weight: 600; }
.sa-inv__chevron {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  color: var(--color-muted);
  font-size: .75rem;
  transition: transform .12s;
  display: inline-block;
}
.sa-inv-row.expanded .sa-inv__chevron { transform: rotate(180deg); }
.sa-inv__ackd {
  color: var(--color-muted);
  background: var(--bg-surface-3, var(--color-surface-alt));
}

/* Expansion cell \u2014 floats as its own sub-card just beneath its
   parent row. Uses a slightly darker tint so the expanded detail
   reads as "drilled-in context" rather than just more row. */
.sa-inv__detail { cursor: default; }
.sa-inv__detail > .sa-inv__detail-cell {
  background: var(--bg-surface-3, var(--color-surface-alt, #fafbfc)) !important;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Responsive: stack the three zones vertically on narrow. */
@media (max-width: 980px) {
  .sa-inv-table { table-layout: auto; }
  .sa-inv__zone--left,
  .sa-inv__zone--center,
  .sa-inv__zone--right {
    display: block;
    width: 100%;
    text-align: left;
    border-left: none;
    padding: .75rem 1.1rem;
  }
  .sa-inv__zone--center { border-top: 1px solid var(--color-border); padding-top: .6rem; }
  .sa-inv__zone--right  { border-top: 1px solid var(--color-border); }
  .sa-inv__action-row { justify-content: flex-start; }
  .sa-inv__title { white-space: normal; max-width: 100%; }
  .sa-inv__url   { white-space: normal; max-width: 100%; }
  .sa-inv__chevron { position: static; margin-left: .5rem; }
}

/* Dark mode shadow off */
[data-theme="dark"] .sa-summary,
[data-theme="dark"] .sa-inventory { box-shadow: none; }

/* ─── In-app pin button (icon-only square, sits inline with the page title) ──── */
.app-pin-form { display: inline-flex; margin: 0; }
.app-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.app-pin-btn:hover {
  border-color: var(--color-primary, #2563eb);
  color: var(--color-text);
}
.app-pin-btn--pinned {
  border-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
  background: color-mix(in srgb, var(--color-primary, #2563eb) 8%, transparent);
}
.app-pin-btn--pinned:hover {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 14%, transparent);
}
.app-pin-btn__icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Inline title row: H1 + pin sit on the same line. */
.app-title-row {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.app-title-row > h1 { margin: 0; }

/* ─── Apps MegaNav: panel content ───────────────────────────────
   Lives inside the existing .app-launcher__panel wrapper (which still
   handles open/close + positioning). This block styles the new
   pinned-tiles + other-tools layout. Functional; design pass deferred. */
.apps-meganav { min-width: 520px; max-width: 720px; }

.apps-meganav__section { padding-bottom: .9rem; }
.apps-meganav__section + .apps-meganav__section {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .9rem;
}
.apps-meganav__section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.apps-meganav__section-label {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 600;
}

/* Pinned tiles */
.apps-meganav__tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
.apps-meganav__tile {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  transition: background .12s, border-color .12s;
}
.apps-meganav__tile:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.apps-meganav__tile-link {
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: .65rem .4rem; text-decoration: none;
  color: #fff;
}
.apps-meganav__tile-icon {
  width: 30px; height: 30px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #fff;
}
.apps-meganav__tile-name {
  font-size: .72rem; line-height: 1.15; text-align: center;
  color: rgba(255,255,255,.85);
}
.apps-meganav__tile-unpin-form { margin: 0; }
.apps-meganav__tile-unpin {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: rgba(255,255,255,.7);
  font-size: .7rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s;
}
.apps-meganav__tile:hover .apps-meganav__tile-unpin,
.apps-meganav__tile-unpin:focus-visible { opacity: 1; }
.apps-meganav__tile-unpin:hover { background: rgba(220,53,69,.85); color: #fff; }

.apps-meganav__empty-pinned {
  padding: .65rem .75rem;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 8px;
  font-size: .82rem; color: rgba(255,255,255,.55);
}

/* Other tools */
.apps-meganav__other-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem 1rem;
}
.apps-meganav__group-label {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.45); font-weight: 600;
  margin: .35rem 0 .2rem; padding-left: .25rem;
}
.apps-meganav__row {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; border-radius: 6px;
  text-decoration: none; color: rgba(255,255,255,.92);
  transition: background .1s;
}
.apps-meganav__row:hover { background: rgba(255,255,255,.06); }
.apps-meganav__row-icon {
  width: 22px; height: 22px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .72rem; color: #fff;
  flex-shrink: 0;
}
.apps-meganav__row-name { font-size: .85rem; flex: 1; }
.apps-meganav__row-chevron { color: rgba(255,255,255,.35); font-size: 1rem; line-height: 1; }

/* Footer */
.apps-meganav__footer {
  margin-top: .35rem; padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.apps-meganav__footer-hint {
  font-size: .72rem; color: rgba(255,255,255,.45);
}

/* Sales-tools icon classes — bring inline-style colors into proper classes
   so the catalog can reference them like Production/Audit/Finance. */
.app-launcher__icon--sales-leads   { background: #7b1fa2; color: #fff; }
.app-launcher__icon--sales-debrief { background: #5c6bc0; color: #fff; }

/* Mobile / narrow viewports */
@media (max-width: 640px) {
  .apps-meganav { min-width: 0; max-width: 100%; }
  .apps-meganav__tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps-meganav__other-grid { grid-template-columns: 1fr; }
}


/* ─── Per-client session strip ──────────────────────────────────
   A secondary nav band that anchors the operator's working session:
   the pinned client + the apps pinned for that client. Sits directly
   under .site-header and sticks with it when scrolling.

   Visual logic:
   - Slightly darker than the main nav so it reads as "subordinate
     context" rather than a separate piece of chrome.
   - Hairline accent at the top edge (primary blue) signals "active
     session" without shouting.
   - Pills (not tiles) keep the row compact and nav-like.
   - The currently-active app pill gets a soft tint + left accent
     so the operator knows where they are at a glance. */

.session-strip {
  background: var(--color-navy-dk, #141e2c);
  border-top: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 var(--color-primary, #2563eb);
  position: sticky;
  top: 56px;                /* sit flush under .site-header (56px) */
  z-index: 95;
}
[data-theme="dark"] .session-strip {
  background: var(--color-bg-secondary, #0e1726);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 var(--color-primary, #2563eb);
}

.session-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
}

/* ── Working-with chip ── */
.session-strip__client {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.session-strip__client-label {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  white-space: nowrap;
}
.session-strip__client-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem .35rem .55rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.session-strip__client-chip:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.session-strip__client-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;       /* "live session" indicator */
  box-shadow: 0 0 0 2px rgba(34,197,94,.18);
  flex-shrink: 0;
}
.session-strip__client-name { line-height: 1; }
.session-strip__client-caret {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  margin-left: .15rem;
}

/* Reuse the existing chip dropdown styling when anchored under the
   new session-strip chip — just reposition. */
.session-strip__client-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
}

/* ── Visual divider ── */
.session-strip__divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ── App pill row ── */
.session-strip__apps {
  flex: 1;
  min-width: 0;
}
.session-strip__pill-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.session-strip__pill-row::-webkit-scrollbar { height: 4px; }
.session-strip__pill-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 2px;
}

.session-strip__pill-wrap {
  position: relative;
  flex-shrink: 0;
}
.session-strip__pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem .35rem .4rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: .82rem;
  line-height: 1;
  transition: background .12s, border-color .12s, transform .08s;
}
.session-strip__pill:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  text-decoration: none;
}
.session-strip__pill:active { transform: translateY(1px); }

/* Active-app pill — operator is currently in this app. */
.session-strip__pill--active {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-primary, #2563eb) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--color-primary, #2563eb);
  padding-left: .55rem;       /* give the inset bar room */
  color: #fff;
  font-weight: 600;
}
.session-strip__pill--active:hover {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 26%, transparent);
}

.session-strip__pill-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .68rem;
  color: #fff;
  flex-shrink: 0;
}
.session-strip__pill-name {
  white-space: nowrap;
  letter-spacing: .005em;
}

/* Hover-revealed unpin — keeps the pill row clean. */
.session-strip__pill-unpin-form { margin: 0; }
.session-strip__pill-unpin {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.85);
  font-size: .62rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s;
}
.session-strip__pill-wrap:hover .session-strip__pill-unpin,
.session-strip__pill-unpin:focus-visible { opacity: 1; }
.session-strip__pill-unpin:hover { background: #dc3545; color: #fff; }

/* Empty state — client pinned but no apps yet. */
.session-strip__empty {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .8rem;
}
.session-strip__empty-text { color: rgba(255,255,255,.7); }
.session-strip__empty-hint { color: rgba(255,255,255,.4); font-style: italic; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .session-strip__inner { padding: .5rem .9rem; gap: .65rem; flex-wrap: nowrap; }
  .session-strip__client-label { display: none; }
  .session-strip__divider { height: 18px; }
  .session-strip__pill-name { display: none; }   /* icons-only on small screens */
  .session-strip__pill { padding: .3rem .35rem; }
  .session-strip__pill--active { padding-left: .45rem; }
}

/* ── App nav primitives: persistent top bar + sub-nav ────────────────
   Generic pattern adopted by per-app base templates (Content Workbench,
   Blog Writer, etc.). Each app's _<app>_base.html renders the .app-topbar
   (brand · tabs · quick-create) above an optional scope-notice and a
   .app-page-header (H1 + .app-subnav action row). Tabs are text-with-
   underline, identical sizing across all states. */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .5rem 0 0;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--border-subtle, var(--color-border));
  flex-wrap: wrap;
}
.app-topbar__brand {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.app-topbar__brand-link {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.app-topbar__brand-link:hover { color: var(--color-primary, var(--accent)); }
.app-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.app-tab {
  display: inline-block;
  padding: .55rem .85rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-muted, #666);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* sit on the topbar bottom border */
  transition: color .15s, border-color .15s;
}
.app-tab:hover { color: var(--color-text); }
.app-tab--active {
  color: var(--color-primary, var(--accent));
  border-bottom-color: var(--color-primary, var(--accent));
  font-weight: 600;
}
.app-topbar__quick {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

/* Page header: H1 + standardized sub-nav row */
.app-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.app-page-header__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}
.app-subnav {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
/* When a sub-nav button is destructive, prefer the existing .btn-danger
   for solid red treatment, or apply this modifier on a .btn-secondary to
   tint just the text without changing fill. */
.app-subnav .btn-secondary.btn-danger-text { color: var(--danger, #dc2626); }

@media (max-width: 720px) {
  .app-topbar { gap: .75rem; }
  .app-tabs { width: 100%; order: 3; overflow-x: auto; }
  .app-topbar__quick { margin-left: auto; }
  .app-page-header { align-items: flex-start; flex-direction: column; }
}


/* ── Performance dashboard module ─────────────────────────────────────
   Wide executive SEO + analytics surface. Uses the full hub-card width;
   sub-reports get their own headings; metric tiles spread 4-up across
   the full grid; Top Query Opportunities + Recommended Actions share
   a 12-col split (8/4) on desktop.

   Visual rules:
   - Restrained palette using existing tokens, no new accent colours
   - Directional arrows (↑ ↓ →) for movement, colour-coded by token
     but legible without colour
   - Search Console tiles are prominent; Analytics tiles are quieter
   - Action cards + opportunity groups use card chrome, not loud tints
   --------------------------------------------------------------------- */

.perf__body {
  padding: 0;
}

/* ── Header ─────────────────────────────────────────────────────── */
.perf__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.perf__heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.perf__period {
  font-size: 0.82rem;
  color: var(--color-muted);
  font-weight: 400;
}
.perf__period-vs { color: var(--color-muted); }
.perf__header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.perf__synced {
  font-size: 0.7rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.perf__cta-primary { font-weight: 500; }

.perf__empty {
  padding: 1.5rem 1.6rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  font-style: normal;
}
.perf__empty p { margin: 0 0 0.5rem; }
.perf__empty-cta { margin-top: 0.8rem; }

/* ── Section frame + headings ───────────────────────────────────── */
.perf__section {
  padding: 1.4rem 1.6rem 1.5rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.perf__section:last-child { border-bottom: none; }

.perf__h2 {
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.perf__h2--read {
  border-bottom-color: transparent;
  color: var(--color-accent, #3b82f6);
}

.perf__h3 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0 0 0.7rem;
}
.perf__h3--quiet {
  color: var(--color-muted);
  opacity: 0.85;
}

.perf__subreport { margin-bottom: 1.2rem; }
.perf__subreport:last-child { margin-bottom: 0; }

/* ── Metric tile grid ───────────────────────────────────────────── */
.perf__tiles {
  display: grid;
  gap: 0.8rem;
}
.perf__tiles--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .perf__tiles--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .perf__tiles--4 { grid-template-columns: 1fr; }
}

.perf-tile {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.perf-tile__label {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.perf-tile__value {
  font-size: 1.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-text);
}
.perf-tile__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.55rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.perf-tile__prior {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Analytics tiles are quieter — smaller value, no border, transparent bg */
.perf-tile--sm {
  background: transparent;
  border-color: transparent;
  padding: 0.7rem 1.1rem 0.8rem;
}
.perf-tile--sm .perf-tile__value { font-size: 1.4rem; font-weight: 500; }
.perf-tile--sm .perf-tile__label { color: var(--color-muted); }

/* Arrows + delta */
.perf-delta {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.perf-delta--up { color: var(--color-success, #16a34a); }
.perf-delta--down { color: var(--color-warn, #d97706); }
.perf-delta--flat { color: var(--color-muted); font-weight: 400; }
.perf-delta--none { color: var(--color-muted); font-weight: 400; }

/* ── Performance Read box ───────────────────────────────────────── */
.perf__read {
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 4%, transparent);
}
.perf__read-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  max-width: 80ch;
}

/* ── 12-col split: Top Query Opportunities + Recommended Actions ────
 *
 * Legacy classes — Top Query Opportunities is now full-width with
 * inline-expanding action rows (see .perf__qrow + .perf__qrow-action).
 * Kept for any template still referencing the split pattern; the
 * queries section now uses .perf__queries-section. */
.perf__split-12 {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 1200px) {
  .perf__split-12 { grid-template-columns: 1fr; }
}
.perf__split-main, .perf__split-aside { min-width: 0; }

/* Section heading + source attribution — sits above panel content.
 * The pill telegraphs the data origin at a glance; the prose
 * explains the slice. Generic across the Hub (and intended for the
 * rest of the system) — pair with any section header. */
.perf__section-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.perf__section-head .perf__h2 { margin: 0; }
.source-attr {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.source-attr strong {
  color: var(--color-text);
  font-weight: 500;
}
.source-attr__pills {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* The source-pill component. Default styling is accent-blue (GSC);
 * apply a --<source> modifier to flip the palette. Acronyms inside
 * stay uppercase regardless. */
.source-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 14%, transparent);
  color: var(--color-accent, #3b82f6);
  border: 1px solid color-mix(in srgb, var(--color-accent, #3b82f6) 35%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
}
.source-pill--gsc {
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 14%, transparent);
  color: var(--color-accent, #3b82f6);
  border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 35%, transparent);
}
.source-pill--ga4 {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}
.source-pill--dfs {
  background: color-mix(in srgb, #0d9488 14%, transparent);
  color: #0d9488;
  border-color: color-mix(in srgb, #0d9488 35%, transparent);
}
.source-pill--crawl {
  background: transparent;
  color: var(--color-muted);
  border-color: var(--color-border);
}
.source-pill--metadata {
  background: color-mix(in srgb, #0891b2 14%, transparent);
  color: #0891b2;
  border-color: color-mix(in srgb, #0891b2 35%, transparent);
}
.source-pill--audit {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #7c3aed;
  border-color: color-mix(in srgb, #7c3aed 35%, transparent);
}
.source-pill--qbo {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 35%, transparent);
}
.source-pill--gap {
  background: color-mix(in srgb, #65a30d 14%, transparent);
  color: #65a30d;
  border-color: color-mix(in srgb, #65a30d 35%, transparent);
}
.source-pill--blog {
  background: color-mix(in srgb, #db2777 14%, transparent);
  color: #db2777;
  border-color: color-mix(in srgb, #db2777 35%, transparent);
}
.source-pill--schema {
  background: color-mix(in srgb, #4f46e5 14%, transparent);
  color: #4f46e5;
  border-color: color-mix(in srgb, #4f46e5 35%, transparent);
}

/* Hub-card source attribution — sits under .hub-card__sub inside the
 * card header (not in its own wrapper since hub cards have their own
 * .hub-card__header layout). */
.hub-card__header .source-attr { margin-top: 0.5rem; }

/* Collapsible hub card — uses native <details>/<summary>. Default
 * collapsed; expanded shows a shortened body (3 items max) plus a
 * "See all" footer link to the full archive. */
.hub-card--collapsible { padding: 0; }
.hub-card--collapsible > summary { list-style: none; cursor: pointer; }
.hub-card--collapsible > summary::-webkit-details-marker { display: none; }
.hub-card__header--collapsible {
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}
.hub-card--collapsible[open] > .hub-card__header--collapsible {
  border-bottom-color: var(--color-border);
}
.hub-card__header--collapsible:hover {
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
}
.hub-card__header--collapsible:focus-visible {
  outline: 2px solid var(--color-accent, #3b82f6);
  outline-offset: -2px;
}
.hub-card__chev {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--color-muted);
  width: 0.8em;
  flex-shrink: 0;
}
.hub-card__chev::before { content: '▶'; }
.hub-card--collapsible[open] .hub-card__chev::before { content: '▼'; }
.hub-card__header--collapsible .hub-card__title {
  flex: 1;
  margin: 0;
}
.hub-card__count {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: 400;
}
.hub-card__footer {
  padding: 0.65rem 1.1rem 0.9rem;
}
.hub-card__see-all {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
}
.hub-card__see-all:hover { text-decoration: underline; }

/* ── Top Query Opportunities — opportunity-row card component ─────
 *
 * Replaces the previous <table> markup with an <ol> of card-style
 * <li> rows so the query, metrics, suggested-action chip, and the
 * target-page CTA can each get the breathing room a table was
 * compressing. CSS grid drives the top-section split (primary
 * info | target action card); expanded recommendation detail
 * spans the full width below.
 */
.topq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.topq__row {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.topq__row--has-action {
  border-color: var(--color-border);
}
.topq__main {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  padding: 1.05rem 1.2rem;
}
@media (max-width: 900px) {
  .topq__main { grid-template-columns: 1fr; }
}

.topq__primary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.topq__query {
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.45;
  word-break: break-word;
}
.topq__sublabel {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-top: -0.15rem;
}
.topq__sublabel strong {
  color: var(--color-text);
  font-weight: 500;
}
.topq__metrics {
  font-size: 0.84rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  margin-top: 0.1rem;
}
.topq__metrics strong {
  color: var(--color-text);
  font-weight: 600;
}
.topq__metrics-sep {
  color: var(--color-border);
  margin: 0 0.15rem;
}
.topq__chip {
  align-self: flex-start;
  margin-top: 0.15rem;
}

/* Target-page action card — primary call-to-action on the row. */
.topq__target {
  display: flex;
  justify-content: stretch;
  min-width: 0;
}
.topq__target-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface-alt);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
}
.topq__target-link:hover,
.topq__target-link:focus-visible {
  border-color: var(--color-accent, #3b82f6);
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 9%, var(--color-surface-alt));
  outline: none;
}
.topq__target-link:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent, #3b82f6);
}
.topq__target-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.45;
  word-break: break-word;
  /* Allow up to 2 lines of natural wrapping then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topq__target-cta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-accent, #3b82f6);
  letter-spacing: 0.02em;
}
.topq__target-link--external .topq__target-path { color: var(--color-muted); }
.topq__target-link--external .topq__target-cta { color: var(--color-muted); }
.topq__target-link--external:hover .topq__target-cta { color: var(--color-accent, #3b82f6); }
.topq__target-empty {
  font-size: 0.78rem;
  color: var(--color-muted);
  align-self: center;
  padding: 0 0.5rem;
}

/* Toggle button — secondary affordance for collapsing recommendation
 * detail. Sits below the main row, full-width container so the
 * detail block aligns with the row's left padding. */
.topq__toggle-wrap {
  padding: 0 1.2rem;
  display: flex;
  justify-content: flex-start;
}
.topq__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  padding: 0.3rem 0.45rem 0.3rem 0;
  font-size: 0.78rem;
  color: var(--color-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s ease-out;
}
.topq__toggle:hover { color: var(--color-text); }
.topq__toggle:focus-visible {
  outline: 2px solid var(--color-accent, #3b82f6);
  outline-offset: 2px;
}
.topq__chev {
  display: inline-block;
  font-size: 0.6rem;
  width: 0.8em;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.12s ease-out;
}
.topq__chev::before { content: '▶'; }
.topq__row--open .topq__chev::before { content: '▼'; }
.topq__toggle:hover .topq__chev { opacity: 1; }

/* Expanded recommendation detail — spans the full row width below
 * the main grid. Subtle alt background, narrower line lengths, and
 * sentence-case labels (per the design spec). */
.topq__detail {
  background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  border-top: 1px solid var(--color-border-soft);
  padding: 1rem 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.topq__detail[hidden] { display: none; }
.topq__detail-block { max-width: 72ch; }
.topq__detail-block--action { max-width: none; }
.topq__detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}
.topq__detail-body {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text);
  line-height: 1.55;
}
.topq__detail-queries {
  margin: 0;
  padding: 0;
  list-style: none;
}
.topq__detail-queries li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.7;
}
.topq__detail-queries li::before {
  content: '·';
  color: var(--color-muted);
  margin-right: 0.5rem;
}
.topq__detail-link {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
}
.topq__detail-link:hover { text-decoration: underline; }

/* ── More recommendations footer (unattached actions) ─────────────── */
.perf__more-actions {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  background: transparent;
}
.perf__more-actions-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.perf__more-actions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.perf__more-actions-item {
  font-size: 0.83rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 0.45rem;
}
.perf__more-actions-item:last-child { margin-bottom: 0; }
.perf__more-actions-item strong { font-weight: 600; }
.perf__more-actions-summary {
  color: var(--color-muted);
  margin-left: 0.3rem;
}
.perf__more-actions-link {
  font-size: 0.78rem;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
  margin-left: 0.4rem;
}
.perf__more-actions-link:hover { text-decoration: underline; }

/* ── Tables ──────────────────────────────────────────────────────── */
.perf__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
}
.perf__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.perf__table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  white-space: nowrap;
}
.perf__table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  color: var(--color-text);
  line-height: 1.45;
}
.perf__table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.perf__table tbody tr:last-child td { border-bottom: none; }
.perf__table code {
  font-size: 0.78rem;
  color: var(--color-muted);
  background: transparent;
  padding: 0;
}
.perf__th--num, .perf__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
  padding-left: 0.4rem;
}
.perf__td--query, .perf__td--page {
  word-break: break-word;
  max-width: 0;  /* let truncate work */
}
/* Shrink the suggested-action column to its pill width so the
 * residual table space goes to the Query column. Without this, after
 * hiding the Target page column, the residual width inflates Suggested
 * action with empty trailing space. */
.perf__table--queries th:nth-child(6),
.perf__table--queries td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}
/* (Old .perf__td--target / .perf__target-link table-cell styles
   retired 2026-05-21 — superseded by .topq__target* card layout.) */
.perf__td--note {
  font-size: 0.76rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.perf__muted { color: var(--color-muted); }

/* Suggested-action chips — neutral by default, restrained variants */
.perf__action {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.22rem 0.6rem;
  border-radius: 12px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  border: 1px solid var(--color-border-soft);
  white-space: nowrap;
  display: inline-block;
}
.perf__action--improve-title-meta,
.perf__action--review-intent-mismatch {
  color: var(--color-warn, #d97706);
  border-color: color-mix(in srgb, var(--color-warn, #d97706) 35%, transparent);
}
.perf__action--protect-ranking {
  color: var(--color-success, #16a34a);
  border-color: color-mix(in srgb, var(--color-success, #16a34a) 35%, transparent);
}

/* ── Recommended Action cards (sidebar) ─────────────────────────── */
.perf__action-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 0.95rem 1rem 1rem;
  margin-bottom: 0.8rem;
}
.perf__action-card:last-child { margin-bottom: 0; }
.perf__action-card--empty {
  background: transparent;
  border-style: dashed;
}
.perf__action-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.perf__action-card-summary {
  font-size: 0.84rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}
.perf__action-card-queries {
  margin: 0 0 0.7rem 1rem;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.55;
}
.perf__action-card-queries li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 0.1rem;
}
.perf__action-card-rationale {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}
.perf__action-card-rationale strong {
  color: var(--color-text);
  font-weight: 500;
}
.perf__action-card-link {
  font-size: 0.78rem;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
}
.perf__action-card-link:hover { text-decoration: underline; }

/* ── Pages insight ─────────────────────────────────────────────── */
.perf__pages-insight {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-muted);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.55;
}

/* ── SEO Opportunity Groups ────────────────────────────────────── */
.perf__opp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.perf__opp-head .perf__h2 {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.perf__opp-total {
  font-size: 0.74rem;
  color: var(--color-muted);
}

.perf__opp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .perf__opp-grid { grid-template-columns: 1fr; }
}

.perf__opp-group {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem;
}
.perf__opp-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.perf__opp-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.perf__opp-group-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-surface);
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
}
.perf__opp-group-sub {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0.4rem 0 0.9rem;
  line-height: 1.5;
}

.perf__opp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.perf__opp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.7rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 5px;
  flex-wrap: wrap;
}
.perf__opp-row-main {
  flex: 1 1 60%;
  min-width: 0;
}
.perf__opp-query {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  word-break: break-word;
}
.perf__opp-meta {
  font-size: 0.74rem;
  color: var(--color-muted);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.perf__opp-meta strong {
  color: var(--color-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.perf__opp-meta-dot { color: var(--color-border); }
.perf__opp-page {
  margin-top: 0.25rem;
  font-size: 0.72rem;
}
.perf__opp-page code {
  color: var(--color-muted);
  background: transparent;
}
.perf__opp-open {
  font-size: 0.74rem;
  color: var(--color-accent, #3b82f6);
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
}
.perf__opp-open:hover { text-decoration: underline; }

/* Pages with opportunities — target-page grouping (Option A). */
.perf__pages-opps__sub {
  margin: -0.2rem 0 0.7rem;
  font-size: 0.82rem;
}
.perf__pages-opps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.perf__pages-opps__page {
  border: 1px solid var(--color-border, #e3e8ee);
  border-left: 3px solid var(--color-accent, #3b82f6);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  background: var(--color-card-bg, #fff);
}
[data-theme="dark"] .perf__pages-opps__page {
  background: var(--color-card-bg, #1c232c);
  border-color: var(--color-border, #2a3340);
}
.perf__pages-opps__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.perf__pages-opps__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.perf__pages-opps__url {
  text-decoration: none;
  color: var(--color-text, inherit);
}
.perf__pages-opps__url:hover { text-decoration: underline; }
.perf__pages-opps__open-icon {
  font-size: 0.78rem;
  color: var(--color-accent, #3b82f6);
}
.perf__pages-opps__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.perf__chip {
  font-size: 0.66rem;
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.perf__chip--type {
  background: var(--color-info-soft, #e6effa);
  color: var(--color-info, #1f6feb);
}
.perf__chip--unknown {
  background: var(--color-border-soft, #f0f3f7);
  color: var(--color-muted);
}
.perf__chip--warn {
  background: var(--color-warn-soft, #fff8e1);
  color: var(--warning, #b06f00);
}
[data-theme="dark"] .perf__chip--type    { background: rgba(31, 111, 235, 0.18); }
[data-theme="dark"] .perf__chip--unknown { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .perf__chip--warn    { background: rgba(176, 111, 0, 0.18); }

.perf__pages-opps__totals {
  font-size: 0.76rem;
  color: var(--color-muted);
}
.perf__pages-opps__queries {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.78rem;
}
.perf__pages-opps__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* === Site Intelligence Rank Report (Cannibalization v2 Unit F) ===== */
.si-rank-report__off {
  padding: 1rem 1.1rem;
  background: var(--bg-surface-2, var(--color-surface-alt));
  border-radius: var(--radius);
  border: 1px dashed var(--color-border-soft);
  color: var(--color-text-soft, var(--color-muted));
  font-size: .9rem;
  line-height: 1.5;
}
.si-rank-report__off code {
  font-size: .85em;
  padding: 0.1rem 0.35rem;
  background: var(--bg-surface-3, rgba(0,0,0,.05));
  border-radius: 3px;
}
.si-rank-report__narrative {
  margin: 0 0 .9rem;
  padding: .65rem .85rem;
  background: var(--color-info-soft, rgba(37, 99, 235, .08));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: .9rem;
  line-height: 1.5;
}
.si-rank-report__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.si-rank-report__stat {
  background: var(--bg-surface-2, var(--color-surface-alt));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  text-align: center;
}
.si-rank-report__stat-num {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.si-rank-report__stat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  margin-top: .15rem;
}
.si-rank-report__stat--success .si-rank-report__stat-num { color: var(--color-success, #16a34a); }
.si-rank-report__stat--danger .si-rank-report__stat-num { color: var(--color-danger, #dc2626); }
.si-rank-report__stat--muted .si-rank-report__stat-num { color: var(--color-muted); }
.si-rank-report__subhead {
  margin: 1.1rem 0 .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.si-rank-report__table th,
.si-rank-report__table td { font-size: .82rem; }
.si-rank-report__table th.num,
.si-rank-report__table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.si-rank-report__url a {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .76rem;
  color: var(--color-muted);
  text-decoration: none;
}
.si-rank-report__url a:hover { color: var(--color-primary); }
.si-rank-report__delta {
  font-weight: 600;
}
.si-rank-report__delta--down { color: var(--color-danger, #dc2626); }
.si-rank-report__delta--up { color: var(--color-success, #16a34a); }

/* === Cluster review surface (Cannibalization v2 Unit B) ============ */
/* 4-layer hierarchy: header / action bar / cards grid / members.
   Composes with the WL-B1.5 platform shell (.wl-section-header,
   .wl-actions, .wl-action-btn, .wl-state-summary). */

.cluster-review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Layer 1: Header ───────────────────────────────────────────── */
.cluster-review__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cluster-review__header-left { min-width: 0; flex: 1 1 18rem; }
.cluster-review__name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.cluster-review__sev-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cluster-review__sev-chip--danger {
  background: var(--color-danger-soft, rgba(220, 38, 38, .12));
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.cluster-review__sev-chip--warn {
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  color: var(--color-warn);
  border-color: var(--color-warn);
}
.cluster-review__sev-chip--info {
  background: var(--color-info-soft, rgba(37, 99, 235, .1));
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.cluster-review__sev-chip--success {
  background: var(--color-success-soft, rgba(22, 163, 74, .12));
  color: var(--color-success);
  border-color: var(--color-success);
}
.cluster-review__sub {
  margin: .3rem 0 0;
  color: var(--color-muted);
  font-size: .78rem;
  line-height: 1.4;
}
.cluster-review__sub-override {
  color: var(--color-primary);
  font-weight: 500;
}
.cluster-review__state-summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: normal;
}
.cluster-review__stat strong {
  color: var(--color-text);
  font-weight: 600;
  margin-right: .15rem;
}
.cluster-review__stat-sep {
  color: var(--color-border);
}

/* ── Layer 2: Action bar ───────────────────────────────────────── */
.cluster-review__actions {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.cluster-review__build-form { display: inline-flex; }
.cluster-review__action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .15rem;
  min-height: 2.6rem;
  min-width: 14rem;
  padding: .45rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.cluster-review__action-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.cluster-review__action-btn-label {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.15;
}
.cluster-review__action-btn-hint {
  font-size: .72rem;
  font-weight: 400;
  opacity: .9;
  line-height: 1.25;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.cluster-review__action-btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.cluster-review__action-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-dk, var(--color-primary));
  border-color: var(--color-primary-dk, var(--color-primary));
  text-decoration: none;
  color: #fff;
}

/* ── Banner (AJAX response) ────────────────────────────────────── */
.cluster-review__banner {
  padding: .55rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-soft);
  font-size: .85rem;
  line-height: 1.4;
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--color-text);
}
.cluster-review__banner--ok {
  border-color: var(--color-success);
  background: var(--color-success-soft, rgba(34, 197, 94, .08));
  color: var(--color-text);
}
.cluster-review__banner--err {
  border-color: var(--color-danger);
  background: var(--color-danger-soft, rgba(220, 38, 38, .08));
  color: var(--color-text);
}
.cluster-review__banner a { color: var(--color-primary); }

/* ── Layer 3: Cards grid ───────────────────────────────────────── */
.cluster-review__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .cluster-review__grid { grid-template-columns: 1fr; }
}

.cluster-review__card {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  background: var(--color-surface, transparent);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
.cluster-review__card--owner {
  border-left: 3px solid var(--color-primary);
}
.cluster-review__card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
}
.cluster-review__card-title {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-text);
}
.cluster-review__card-count {
  font-weight: 500;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin-left: .15rem;
}
.cluster-review__card-link {
  font-size: .78rem;
  color: var(--color-primary);
  text-decoration: none;
}
.cluster-review__card-link:hover { text-decoration: underline; }
.cluster-review__card-body { padding: .9rem 1rem 1rem; }
.cluster-review__card-body--flush { padding: 0; }

/* Owner card — keyword block */
.cluster-review__owner-keyword {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .1rem;
}
.cluster-review__owner-keyword-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
}
.cluster-review__owner-keyword-value {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.cluster-review__owner-url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .72rem;
  color: var(--color-muted);
  margin-bottom: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Owner card — structured checklist (single-row flex per item) */
.cluster-review__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cluster-review__check {
  display: grid;
  grid-template-columns: 1.35rem 1fr auto;
  gap: .6rem;
  align-items: center;
  font-size: .85rem;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  background: var(--bg-surface-2, var(--color-surface-alt));
  color: var(--color-text);
}
.cluster-review__check-icon {
  grid-row: 1;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
}
.cluster-review__check--pass .cluster-review__check-icon {
  background: var(--color-success-soft, rgba(22, 163, 74, .15));
  color: var(--color-success);
}
.cluster-review__check--fail .cluster-review__check-icon {
  background: var(--color-warn-soft, rgba(217, 119, 6, .15));
  color: var(--color-warn);
}
.cluster-review__check-label {
  grid-row: 1;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  min-width: 0;
}
.cluster-review__check-detail {
  grid-row: 2;
  grid-column: 2 / -1;
  font-size: .78rem;
  color: var(--color-text-soft, var(--color-muted));
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.cluster-review__check-detail:empty { display: none; }

/* Cluster footprint — volume rows */
.cluster-review__volume {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cluster-review__volume-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .85rem;
  color: var(--color-text);
}
.cluster-review__volume-row dt { color: var(--color-muted); }
.cluster-review__volume-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}
.cluster-review__volume-row--total {
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: .95rem;
}
.cluster-review__volume-row--total dt { color: var(--color-text); font-weight: 600; }
.cluster-review__volume-empty { color: var(--color-muted); font-size: .78rem; font-style: italic; }
.cluster-review__volume-meta {
  margin-top: .75rem;
  font-size: .76rem;
  color: var(--color-muted);
}

/* ── Layer 4: Members ──────────────────────────────────────────── */
.cluster-review__members {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cluster-review__member {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text);
}
.cluster-review__member:last-child { border-bottom: 0; }
.cluster-review__member:hover { background: var(--bg-surface-2, var(--color-surface-alt)); }
@media (max-width: 720px) {
  .cluster-review__member {
    grid-template-columns: 1fr auto;
    grid-template-areas: "role role" "main main" "actions actions";
    gap: .4rem;
  }
  .cluster-review__member-role { grid-area: role; }
  .cluster-review__member-main { grid-area: main; }
  .cluster-review__member-actions { grid-area: actions; }
}
.cluster-review__member-main { min-width: 0; }
.cluster-review__member-line {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: .2rem;
  color: var(--color-text);
}
.cluster-review__member-pagerole {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.cluster-review__member-url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .72rem;
  color: var(--color-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.cluster-review__member-url:hover { color: var(--color-primary); }

/* Role pills — soft-token palette, replaces ad-hoc .hub-status use */
.cluster-review__role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cluster-review__role-pill--owner {
  background: var(--color-success-soft, rgba(22, 163, 74, .12));
  color: var(--color-success);
  border-color: var(--color-success);
}
.cluster-review__role-pill--conflicting {
  background: var(--color-warn-soft, rgba(217, 119, 6, .12));
  color: var(--color-warn);
  border-color: var(--color-warn);
}
.cluster-review__role-pill--support {
  background: var(--color-info-soft, rgba(37, 99, 235, .1));
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.cluster-review__role-pill--unclear {
  background: var(--bg-surface-3, var(--color-surface-alt));
  color: var(--color-muted);
  border-color: var(--color-border);
}

.cluster-review__member-approved-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-success-soft, rgba(22, 163, 74, .12));
  color: var(--color-success);
}

.cluster-review__empty {
  font-size: .82rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────
   Page TOC — drop-in sticky pill nav (auto-collected from page h2s).
   Visual: matches Site Intelligence .si-nav. The partial
   components/_in_page_toc.html scans a target container, slugifies
   h2 text into IDs, and renders this strip with scrollspy.
   ───────────────────────────────────────────────────────────────────── */
.page-toc {
  position: sticky;
  top: 56px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem .65rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  backdrop-filter: saturate(140%) blur(4px);
}
.page-toc:empty { display: none; }
.page-toc__link {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.page-toc__link:hover {
  background: var(--hover-surface, var(--bg-surface-2));
  color: var(--color-text);
  text-decoration: none;
}
.page-toc__link--active {
  background: var(--color-info-soft, var(--accent-muted, transparent));
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────
   Site Intelligence — Opportunities section (Phase 2 of Latest
   Opportunities arc, 2026-05-19). Filter chip rows + stale-source
   banner + sort dropdown. Row rendering reuses .hub-issue from the
   Client Hub's Latest Opportunities card.
   ───────────────────────────────────────────────────────────────────── */
.si-opportunities__stale-banner {
  margin: 0 1rem .75rem;
  padding: .55rem .85rem;
  border-left: 3px solid var(--color-warn);
  background: var(--color-warn-soft, rgba(245, 158, 11, .08));
  color: var(--color-text);
  font-size: .82rem;
  border-radius: var(--radius);
}
.si-opportunities__filters {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 0 1rem .85rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.si-opportunities__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.si-opportunities__group--sort {
  margin-top: .25rem;
}
.si-opportunities__label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-right: .5rem;
  min-width: 60px;
}
.si-opportunities__chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.si-opportunities__chip:hover {
  background: var(--hover-surface, var(--bg-surface-2));
  color: var(--color-text);
  text-decoration: none;
}
.si-opportunities__chip--active {
  background: var(--color-info-soft, var(--accent-muted, transparent));
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.si-opportunities__sort-form select {
  padding: .25rem .5rem;
  font-size: .76rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.hub-issue__freshness--stale {
  color: var(--color-warn);
  font-weight: 600;
}

/* "See all N opportunities →" footer in the Hub's Latest Opportunities
   card. Phase 2: trims the card to top-5, links to the SI Opportunities
   section for the full triage view. */
.hub-needs-attention__footer {
  display: flex;
  justify-content: flex-end;
  padding: .65rem 0 .15rem;
  margin-top: .35rem;
  border-top: 1px solid var(--color-border);
}
.hub-needs-attention__see-all {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.hub-needs-attention__see-all:hover {
  text-decoration: underline;
}

/* Performance Read footer pointer — Phase 3 (2026-05-19): nudge
   operators from the trends-only Performance section toward the
   actionable Latest Opportunities surface above it. */
.perf__read-pointer {
  margin: .35rem 0 0;
  padding-top: .45rem;
  border-top: 1px dashed var(--color-border);
  font-size: .8rem;
  color: var(--color-muted);
}
.perf__read-pointer a {
  color: var(--color-primary);
  text-decoration: none;
}
.perf__read-pointer a:hover { text-decoration: underline; }

/* (Phase 3 target-page link variant retired 2026-05-21 — replaced
   by .perf__target-link--mb / --external in the stacked button-style
   treatment further up.) */

/* ─────────────────────────────────────────────────────────────────────
   Setup Mode + readiness checklist (Phase 4, 2026-05-19). Replaces
   the Latest Opportunities card on the Hub for un-ready clients —
   operator finishes onboarding before the action surface appears.
   ───────────────────────────────────────────────────────────────────── */
.hub-setup-mode {
  border-left: 4px solid var(--color-primary);
}

.readiness-checklist {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0 1rem 1rem;
}
.readiness-checklist__tier {
  background: transparent;
}
.readiness-checklist__tier-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .45rem;
}
.readiness-checklist__tier-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text);
}
.readiness-checklist__tier-count {
  font-size: .72rem;
  color: var(--color-muted);
}
.readiness-checklist__tier--blocking .readiness-checklist__tier-label {
  color: var(--color-danger, #dc2626);
}
.readiness-checklist__tier--important .readiness-checklist__tier-label {
  color: var(--color-warn, #d97706);
}
.readiness-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.readiness-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.readiness-checklist__item--complete {
  opacity: .68;
}
.readiness-checklist__icon {
  font-size: 1rem;
  line-height: 1;
  width: 1.25rem;
  flex-shrink: 0;
  text-align: center;
}
.readiness-checklist__icon--complete { color: var(--color-success, #16a34a); }
.readiness-checklist__icon--incomplete { color: var(--color-warn, #d97706); }
.readiness-checklist__icon--missing { color: var(--color-danger, #dc2626); }
.readiness-checklist__body { flex: 1; min-width: 0; }
.readiness-checklist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.readiness-checklist__label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.readiness-checklist__label:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.readiness-checklist__status {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.readiness-checklist__status--complete { color: var(--color-success, #16a34a); }
.readiness-checklist__status--incomplete { color: var(--color-warn, #d97706); }
.readiness-checklist__status--missing { color: var(--color-danger, #dc2626); }
.readiness-checklist__detail {
  font-size: .78rem;
  color: var(--color-muted);
  margin-top: .15rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Opportunity status — Phase 5b/5d (2026-05-20). Reviewed pill +
   Mark-reviewed button. Shown on Hub Latest Opportunities + SI
   Opportunities section rows. Renders only when the persisted
   Opportunity model has a row for this dataclass key.
   ───────────────────────────────────────────────────────────────────── */
.hub-issue__status {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  font-size: .68rem;
  font-weight: 600;
  border-radius: var(--border-radius-md, 8px);
  letter-spacing: .01em;
  white-space: nowrap;
}
.hub-issue__status--reviewed {
  color: var(--color-success, #16a34a);
  background: var(--color-success-soft, rgba(22, 163, 74, .12));
  border: 1px solid var(--color-success, #16a34a);
}
.hub-issue--reviewed {
  opacity: .85;
}
.hub-issue--reviewed .hub-issue__title {
  font-weight: 500;
}

.hub-issue__actions {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-end;
}
.hub-issue__review-form {
  margin: 0;
  display: inline;
}
.hub-issue__review-btn {
  white-space: nowrap;
}

/* "Do this next" callout — Phase 5 follow-up (2026-05-20). Renders
   at the top of the Setup Mode checklist with the single highest-
   priority gate to address. Uses _suggest_next_step's primitive to
   point the operator at one clear action instead of a scan-the-list
   triage. */
.readiness-checklist__next {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem 1.1rem;
  margin: 0 1rem 1rem;
  background: var(--color-warn-soft, #fef3c7);
  border-left: 4px solid var(--color-warn, #d97706);
  border-radius: var(--radius);
}
.readiness-checklist__next-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-warn, #d97706);
  flex-shrink: 0;
  padding-top: .15rem;
  min-width: 96px;
}
.readiness-checklist__next-body { flex: 1; min-width: 0; }
.readiness-checklist__next-cta {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-warn, #d97706);
  text-decoration: none;
}
.readiness-checklist__next-cta:hover { text-decoration: underline; }
.readiness-checklist__next-detail {
  margin: .25rem 0 0;
  font-size: .82rem;
  color: var(--color-text);
}
.readiness-checklist__next-where {
  margin: .35rem 0 0;
  font-size: .72rem;
  color: var(--color-muted);
}

/* Completed step group treatment — opacity-dimmed so the eye reads
   the still-open steps as the active triage surface. */
.readiness-checklist__tier--all-complete {
  opacity: .55;
}
.readiness-checklist__tier--step-1 .readiness-checklist__tier-label,
.readiness-checklist__tier--step-2 .readiness-checklist__tier-label,
.readiness-checklist__tier--step-3 .readiness-checklist__tier-label {
  color: var(--color-text);
}