/* ==========================================================================
   console.css — operator chrome (DESIGN-REWORK wave 1)

   Scope: every rule is nested under .operator, the body class set by
   templates/research/_layout.html. Editorial surfaces (home, blog,
   /davidsimmons/, contact) never carry the class and never load this file.

   Tokens: content/_themes/operator.yaml → regenerate_theme_css →
   static/theme.css (.operator block). This file consumes var(--*) only —
   if a value wants to be a hex here, it belongs in the preset.

   Wave 1 = chrome only: ground remap, Inter headings, green links,
   active-nav green underline, soft radii, tabular-nums on counts.
   Component vocabulary (.op-card, badges, pills, .ai-note) lands in wave 2.
   ========================================================================== */

/* Ground — re-point main.css's editorial custom properties at the operator
   tokens so the existing component rules pick up the console idiom without
   duplicating them. Values resolve from the .operator block in theme.css. */
.operator {
  --bg:           var(--color-bg);
  --surface:      var(--color-surface-1);
  --surface-2:    var(--color-surface-2);
  --ink:          var(--color-fg);
  --muted:        var(--color-muted);
  --accent:       var(--color-accent);        /* gold — borders, secondary */
  --accent-ink:   var(--color-accent-ink);
  --rule:         var(--color-border);
  --rule-soft:    var(--color-border);
  --font-display: var(--typography-font-family-heading);  /* Inter-only */
  --font-body:    var(--typography-font-family-body);
  --font-mono:    var(--typography-font-family-mono);
  --radius:       var(--radius-sm);
}

/* Headings — the preset's Inter 600; serif is the editorial boundary.
   (font-family already follows the --font-display remap above.) */
.operator h1,
.operator h2,
.operator h3,
.operator h4 {
  font-weight: var(--typography-weight-heading);
  letter-spacing: -0.01em;
}

/* Links — green, the Control Plane's action colour. Scoped to textual
   content links; .card, nav, and subnav keep their own treatments. */
.operator main p a,
.operator main li a,
.operator main dd a,
.operator main td a {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.operator main p a:hover,
.operator main li a:hover,
.operator main dd a:hover,
.operator main td a:hover {
  color: var(--color-fg);
  text-decoration-color: var(--color-fg);
}

/* Active nav — green underline, the Control Plane's active-tab signature. */
.operator .nav-link.active,
.operator .subnav a.active {
  color: var(--color-fg);
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.operator .nav-link:hover,
.operator .subnav a:hover {
  color: var(--color-fg);
  border-bottom-color: var(--color-primary);
}
.operator .subnav-secondary a.active {
  color: var(--color-primary);
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* Cards — soft radii, flat posture: hover is a ground shift, never a lift. */
.operator .card {
  border-radius: var(--radius-lg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.operator .card:hover {
  transform: none;
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

/* Soft radii on the remaining boxed chrome. */
.operator pre,
.operator blockquote {
  border-radius: var(--radius-md);
}
.operator .chips > *,
.operator .author-chip {
  border-radius: var(--radius-md);
}

/* Counts — tabular numerals on every metadata/count surface, the Control
   Plane's .port treatment. */
.operator .meta,
.operator .eyebrow,
.operator .chips,
.operator time,
.operator .cite-block,
.operator .pagination-pair {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Wave 2 — component vocabulary (DESIGN-REWORK-IMPL wave 2; spec §4–5).
   Flat .op-card grid, filter pills, traffic-light badges, neutral tag
   pills, ranked-list numerals, .ai-note disclosure. Colour values live in
   content/_themes/operator.yaml; this file consumes var(--*) only.
   ========================================================================== */

/* Card grid — auto-fill, minmax 300px (spec §5). */
.operator .op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}

/* Flat card — borders do the work; hover is a ground shift, never a lift
   (spec §4). The only glow permitted anywhere is the status dot's. */
.operator .op-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);   /* 8px */
  padding: 14px 16px;
  box-shadow: none;
}
.operator .op-card:hover { background: var(--color-surface-hover); }
.operator a.op-card { text-decoration: none; color: inherit; }
.operator .op-card > :first-child { margin-top: 0; }
.operator .op-card > :last-child { margin-bottom: 0; }
.operator .op-card-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.operator .op-card-head h2,
.operator .op-card-head h3 { margin: 0; font-size: 1rem; }
.operator .op-card p { font-size: 0.92rem; }
.operator .op-card ul,
.operator .op-card ol { font-size: 0.92rem; padding-left: 1.1rem; }

/* Filter pills — vanilla-JS facets (static/js/op-filter.js). */
.operator .op-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.operator .filter-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-fg);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.operator .filter-btn:hover { background: var(--color-surface-hover); }
.operator .filter-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}

/* Traffic-light badges — pill form, 0.7rem uppercase 600 (spec §5).
   Pairs ported exactly from the Solutions Space via the preset tokens.
   Tones map to corpus fields in templates/_partials/badges.html —
   never cosmetic. */
.operator .op-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.operator .op-badge-good    { background: var(--color-badge-good-bg); color: var(--color-badge-good-fg); }
.operator .op-badge-mid     { background: var(--color-badge-mid-bg);  color: var(--color-badge-mid-fg);  }
.operator .op-badge-bad     { background: var(--color-badge-bad-bg);  color: var(--color-badge-bad-fg);  }
.operator .op-badge-neutral { background: var(--color-surface-2);     color: var(--color-tertiary);      }

/* Neutral tag pill — themes, horizons. Same shape, never a traffic light. */
.operator .op-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-tertiary);
  white-space: nowrap;
}

/* Ranked lists — 22px numbered circles; green = would stick, red = keeps
   churning (numerals ported from the original). */
.operator .op-ranked {
  list-style: none;
  counter-reset: opr;
  padding: 0;
  margin: 0.5rem 0;
}
.operator .op-ranked li {
  counter-increment: opr;
  position: relative;
  padding: 0.6rem 0.6rem 0.6rem 2.4rem;
  border-bottom: 1px solid var(--color-border);
}
.operator .op-ranked li:last-child { border-bottom: 0; }
.operator .op-ranked li::before {
  content: counter(opr);
  position: absolute;
  left: 0.4rem;
  top: 0.65rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--color-primary-fg);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.operator .op-ranked-good li::before { background: var(--color-rank-good); }
.operator .op-ranked-bad li::before  { background: var(--color-rank-bad); }

/* AI-disclosure note (::ai-note block / templates/blocks/ai_note.html) —
   warm panel, 3px gold left border, the Control Plane's "try this"
   treatment (spec §5). */
.operator .ai-note {
  background: var(--color-note-bg);
  border-left: 3px solid var(--color-accent);   /* gold */
  border-radius: 0 4px 4px 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 1rem 0;
}
.operator .ai-note p { margin: 0.3rem 0; }
.operator .ai-note > :first-child { margin-top: 0; }
.operator .ai-note > :last-child { margin-bottom: 0; }
.operator .ai-note .ai-note-title { color: var(--color-fg); }

/* Muted helper text in component contexts (the original's .muted). */
.operator .op-muted { color: var(--color-muted); }

/* ==========================================================================
   Wave 3 — badges on leaves (DESIGN-REWORK-IMPL wave 3).
   Technical-appendix data blocks go always-dark — panel-dark tokens in
   light mode too; that is the family signature (the Control Plane's
   logs/code panels). Mono 12.5px per spec §1/§5.
   ========================================================================== */

.operator .technical-appendix pre {
  background: var(--color-panel-dark-bg);
  color: var(--color-panel-dark-fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-left: 2px solid var(--color-accent);
}
.operator .technical-appendix code {
  background: var(--color-panel-dark-bg);
  color: var(--color-panel-dark-fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}
.operator .technical-appendix pre code {
  background: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

/* Badge clusters inside rendered claim rows (body markdown) — keep the
   pills from inflating list line-height. */
.operator .technical-appendix li .op-badge { vertical-align: middle; }

/* ==========================================================================
   Wave 4 — corpus-health fleet view (DESIGN-REWORK-IMPL wave 4; spec §6).
   Status dots + tabular counts on the /research/ region cards, and the
   topbar fleet strip. Every state derives from content/{region}/health.json
   (tools/corpus_health.py) — never cosmetic. The dot's 3px rgba glow is
   the ONLY glow in the system (spec §4); tokens live in operator.yaml.
   ========================================================================== */

/* Status dot — 9px circle + 3px glow, the Control Plane's live-state mark. */
.operator .op-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.operator .op-dot--green { background: var(--color-success);  box-shadow: 0 0 0 3px var(--color-glow-green); }
.operator .op-dot--amber { background: var(--color-warning);  box-shadow: 0 0 0 3px var(--color-glow-amber); }
.operator .op-dot--grey  { background: var(--color-dot-off);  box-shadow: 0 0 0 3px var(--color-glow-grey);  }
.operator .op-dot--red   { background: var(--color-danger);   box-shadow: 0 0 0 3px var(--color-glow-red);   }

/* Region-card health header — dot → name → tabular claims count
   (state before name, the registry grammar). */
.operator .card .op-health {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}
.operator .card .op-health-name {
  font-weight: 600;
  color: var(--color-fg);
  letter-spacing: 0.02em;
}
.operator .card .op-health-claims {
  margin-left: auto;
  color: var(--color-tertiary);
  font-variant-numeric: tabular-nums;  /* the .port treatment */
}
.operator .card .op-health-counts {
  font-size: 0.78rem;
  color: var(--color-tertiary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

/* Topbar fleet strip — "16 regions · n ● · n ◐ · n ○ · 1,153 claims ·
   903 pages"; computed in blueprints/research.py, never hand-written. */
.operator .fleet-strip {
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}
.operator .fleet-strip-inner {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0.4rem var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.operator .fleet-sep { color: var(--color-tertiary); }
.operator .fleet-glyph--green { color: var(--color-success); }
.operator .fleet-glyph--amber { color: var(--color-warning); }
.operator .fleet-glyph--grey  { color: var(--color-dot-off); }
.operator .fleet-glyph--red   { color: var(--color-danger); }

/* ==========================================================================
   Wave 5 — faceted section grids (DESIGN-REWORK-IMPL wave 5; PILOT:
   Wellington only). The long-essay section page becomes an .op-grid of
   problem cards: title, summary, badge row. Badge fields ride the
   render-pipeline frontmatter (problem.status / time_horizons / theme)
   — checkable fields only, never cosmetic.
   ========================================================================== */

/* Badge row inside a problem card — pills on their own line under the
   summary, wrapping freely. */
.operator .op-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

/* ==========================================================================
   Projects fleet view (PROJECTS-INTEGRATION-PLAN W1; plan §2).
   /projects/ renders content/_data/projects.yaml as an .op-grid of
   .op-card project cards. The glyph is the DECLARED status from the
   registry (● shipping · ◐ active · ○ paused · ✖ retired) — text glyphs,
   not dots, so the four states differ by shape as well as colour (the
   fleet-strip accessibility rule). The freshness line is COMPUTED at
   freeze time (tools/projects_health.py). Never cosmetic; tokens only.
   ========================================================================== */

/* Declared-status glyph — colours ride the same status tokens as the
   corpus dots; shape carries the state for colourblind readers. */
.operator .op-status-glyph { flex: none; }
.operator .op-status-glyph--shipping { color: var(--color-success); }
.operator .op-status-glyph--active   { color: var(--color-warning); }
.operator .op-status-glyph--paused   { color: var(--color-dot-off); }
.operator .op-status-glyph--retired  { color: var(--color-danger); }

/* Card head — glyph → name → declared-status word (state before name,
   the registry grammar; the word keeps the glyph honest for screen
   readers and anyone who has not read the legend). */
.operator .op-proj-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.operator .op-proj-name {
  font-weight: 600;
  color: var(--color-fg);
  letter-spacing: 0.02em;
}
.operator .op-proj-status {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-tertiary);
}
.operator .op-proj-oneliner { margin: 0.35rem 0 0; }

/* Computed meta line — started month + last repo commit; the .port
   treatment (tabular, tertiary). No health row → no freshness text. */
.operator .op-proj-meta {
  font-size: 0.78rem;
  color: var(--color-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Stack tags — the neutral .op-pill row. */
.operator .op-proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

/* Links row — writeup / demo. "demo · soon" is a non-link tag until the
   /labs/ wave ships the artifacts (linking to a 404 would be cosmetic). */
.operator .op-proj-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.55rem;
  font-size: 0.88rem;
}
.operator .op-proj-soon { color: var(--color-tertiary); }

/* Summary strip above the grid — "16 projects · 8 ● · …", computed in
   blueprints/main.py from the registry, never hand-written. */
.operator .op-proj-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 0.75rem;
}
.operator .op-proj-sep { color: var(--color-tertiary); }

/* Glyph legend under the grid. */
.operator .op-proj-legend {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: 0.9rem;
}