/*
 * modernAIse — lifecycle stylesheet (epic #2426, WP-lcui)
 * =========================================================
 * Everything the Discover -> Analyse -> modernAIse lifecycle needs that
 * app.css did not already have: the "Your journey" stage tracker, the
 * six-band dimension status chip (Critical..Optimised — finer than the
 * four-tone `.mai-pill` app.css already ships), the group/opco roll-up
 * heatmap, the dimension radar, coverage bars and a lock note. Same rule as
 * app.css: no raw hex anywhere, --mai-* tokens (or a color-mix of them)
 * only, and every colour still carries text — never the sole signal.
 */

:root {
  /* Six-band dimension status (aime.engine.dimension_scorer.DimensionThresholds:
     Critical < 30, Poor < 45, Developing < 60, Moderate < 75, Good < 90,
     Optimised >= 90). app.css's pill tones (good/warn/crit/info/plain) are
     only four — these six sit between/around them, each derived from the
     SAME status tokens app.css already defines, never a new hue. */
  --mai-band-critical: var(--mai-crit);
  --mai-band-poor: color-mix(in srgb, var(--mai-crit) 55%, var(--mai-warn) 45%);
  --mai-band-developing: var(--mai-warn);
  --mai-band-moderate: color-mix(in srgb, var(--mai-warn) 45%, var(--mai-good) 55%);
  --mai-band-good: var(--mai-good);
  --mai-band-optimised: color-mix(in srgb, var(--mai-good) 70%, var(--mai-ink) 30%);
}

/* ── Stage tracker — modernise's own "Your journey": Discovery / Analyse /
   modernAIse. Every one of the five engine steps folds into one of these
   three stops (js/views/discovery.js::stopStatus). ──────────────────────── */
.mai-stage-tracker { display: grid; gap: var(--space-2); }
.mai-stage-track { display: flex; align-items: center; flex-wrap: wrap; }
.mai-stage-stop { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 0; }
.mai-stage-dot {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--mai-line-2); background: var(--mai-surface);
}
.mai-stage-stop.is-done .mai-stage-dot { background: var(--mai-good); border-color: var(--mai-good); }
.mai-stage-stop.is-current .mai-stage-dot { background: var(--mai-accent); border-color: var(--mai-accent); box-shadow: 0 0 0 3px var(--mai-accent-soft); }
.mai-stage-label { font-size: var(--fs-sm); color: var(--mai-ink-3); white-space: nowrap; }
.mai-stage-stop.is-current .mai-stage-label { color: var(--mai-ink); font-weight: 600; }
.mai-stage-stop.is-done .mai-stage-label { color: var(--mai-ink-2); }
.mai-stage-sub { display: block; font-size: 10px; color: var(--mai-ink-3); }
.mai-stage-rule { width: 28px; height: 1px; background: var(--mai-line-2); flex: none; margin: 0 var(--space-2); }
.mai-stage-rule[data-done] { background: var(--mai-good); }
.mai-stage-meta { color: var(--mai-ink-2); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Compact variant: a header strip or a grid card, no room for sub-text. The
   compact TRACKER (not just the track) is a single flex row — track +
   distribution inline, wrapping together at narrow widths — for the Command
   Centre header (2026-09-25 coordinator note), overriding the stacked-grid
   default below. */
.mai-stage-track.is-compact { gap: 0; }
.mai-stage-track.is-compact .mai-stage-dot { width: 8px; height: 8px; }
.mai-stage-track.is-compact .mai-stage-label { font-size: 10px; }
.mai-stage-track.is-compact .mai-stage-rule { width: 14px; margin: 0 var(--space-1); }
.mai-stage-tracker.is-compact { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mai-stage-dist { white-space: nowrap; } /* colour comes from the .mai-muted class already on the span */

/* Single-word band chip (Discovery / Analyse / modernAIse) for a door cell
   where the full tracker has no room — a heatmap cell, a child-unit card. */
.mai-stage-chip-wrap { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ── Six-band dimension status chip ──────────────────────────────────────── */
.mai-dim-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
  background: color-mix(in srgb, var(--mai-dim-status-c) 14%, var(--mai-surface));
  color: var(--mai-dim-status-c);
}
.mai-dim-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mai-dim-status-c); flex: none; }
.mai-dim-status[data-band="critical"] { --mai-dim-status-c: var(--mai-band-critical); }
.mai-dim-status[data-band="poor"] { --mai-dim-status-c: var(--mai-band-poor); }
.mai-dim-status[data-band="developing"] { --mai-dim-status-c: var(--mai-band-developing); }
.mai-dim-status[data-band="moderate"] { --mai-dim-status-c: var(--mai-band-moderate); }
.mai-dim-status[data-band="good"] { --mai-dim-status-c: var(--mai-band-good); }
.mai-dim-status[data-band="optimised"] { --mai-dim-status-c: var(--mai-band-optimised); }
.mai-dim-status.is-not-scored { background: var(--mai-surface-2); color: var(--mai-ink-3); }
.mai-dim-status.is-not-scored::before { display: none; }

/* ── Coverage bar — "N of M dimensions scored" ───────────────────────────── */
.mai-coverage { display: grid; gap: 4px; min-width: 160px; }
.mai-coverage-track { height: 6px; background: var(--mai-surface-2); border: 1px solid var(--mai-line); border-radius: 3px; overflow: hidden; }
.mai-coverage-fill { display: block; height: 100%; background: var(--mai-accent); }
.mai-coverage-text { font-family: var(--mai-mono); font-size: var(--fs-xs); color: var(--mai-ink-2); }

/* ── Lock note — modernise's own lock copy, verbatim ─────────────────────── */
.mai-lock-note {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--mai-line-2); border-radius: var(--mai-radius); background: var(--mai-surface-2); color: var(--mai-ink-2);
}
.mai-lock-note b { color: var(--mai-ink); }

/* ── Dimension pillar tag ─────────────────────────────────────────────────── */
.mai-pillar-tag {
  font-family: var(--mai-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mai-ink-3); border: 1px solid var(--mai-line); border-radius: var(--radius-sm); padding: 1px 6px;
}

/* ── Roll-up heatmap: units x dimensions, one door per cell ──────────────── */
.mai-heatmap { border-collapse: separate; border-spacing: 0; width: 100%; }
.mai-heatmap th, .mai-heatmap td { border: 1px solid var(--mai-line); padding: 0; }
.mai-heatmap thead th {
  background: var(--mai-surface-2); font-family: var(--mai-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--mai-ink-3); padding: var(--space-2) var(--space-1); text-align: center;
  writing-mode: horizontal-tb; white-space: normal; min-width: 84px; vertical-align: bottom;
}
.mai-heatmap thead th:first-child { text-align: left; min-width: 160px; }
.mai-heatmap tbody th {
  text-align: left; font-weight: 500; padding: var(--space-2) var(--space-3); background: var(--mai-surface);
  position: sticky; left: 0;
}
.mai-heatmap-cell {
  display: flex; align-items: center; justify-content: center; min-height: 52px; width: 100%; height: 100%;
  padding: var(--space-1); border: 0; background: none; font: inherit; cursor: pointer; color: inherit;
}
.mai-heatmap-cell:hover, .mai-heatmap-cell:focus-visible { background: var(--mai-surface-2); }
.mai-heatmap-score { font-family: var(--mai-mono); font-size: var(--fs-sm); font-weight: 600; }
.mai-heatmap-cell[data-band="critical"] .mai-heatmap-score, .mai-heatmap-cell[data-band="poor"] .mai-heatmap-score { color: var(--mai-crit-ink); }
.mai-heatmap-cell[data-band="developing"] .mai-heatmap-score { color: var(--mai-warn-ink); }
.mai-heatmap-cell[data-band="moderate"] .mai-heatmap-score, .mai-heatmap-cell[data-band="good"] .mai-heatmap-score, .mai-heatmap-cell[data-band="optimised"] .mai-heatmap-score { color: var(--mai-good-ink); }
.mai-heatmap-cell.is-empty { color: var(--mai-ink-3); font-size: var(--fs-xs); }
.mai-heatmap-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--mai-ink-2); }

/* ── Radar — the real score, plus the near-term/long-term maturity target
   rings (mt21f follow-up: aime.lifecycle.weighting, via
   compute_dimension_maturity_targets) when every scored dimension in view
   carries one — matching modernise's own analyse.html radar legend
   ("Near-term target" dashed, "Long-term target" dotted). ────────────────── */
.mai-radar-wrap { display: grid; justify-items: center; gap: var(--space-2); }
.mai-radar-grid { fill: none; stroke: var(--mai-line); stroke-width: 1; }
.mai-radar-spoke { stroke: var(--mai-line); stroke-width: 1; }
.mai-radar-poly { fill: color-mix(in srgb, var(--mai-accent) 16%, transparent); stroke: var(--mai-accent); stroke-width: 2; stroke-linejoin: round; }
.mai-radar-target-near { fill: none; stroke: var(--mai-warn); stroke-width: 1.5; stroke-dasharray: 5 3; stroke-linejoin: round; }
.mai-radar-target-long { fill: none; stroke: var(--mai-info); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; stroke-linejoin: round; }
.mai-radar-dot { stroke: var(--mai-surface); stroke-width: 1.5; }
.mai-radar-dot[data-band="critical"], .mai-radar-dot[data-band="poor"] { fill: var(--mai-crit); }
.mai-radar-dot[data-band="developing"] { fill: var(--mai-warn); }
.mai-radar-dot[data-band="moderate"], .mai-radar-dot[data-band="good"], .mai-radar-dot[data-band="optimised"] { fill: var(--mai-good); }
.mai-radar-label { fill: var(--mai-ink-2); font-size: 10px; font-family: var(--mai-sans); }
.mai-radar-value { fill: var(--mai-ink-3); font-size: 9px; font-family: var(--mai-mono); }
.mai-radar-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; align-items: center; font-size: var(--fs-xs); color: var(--mai-ink-2); }
.mai-radar-legend-swatch { display: inline-block; width: 16px; height: 0; margin-right: 5px; vertical-align: middle; border-top: 2px solid transparent; }
.mai-radar-legend-swatch.is-score { border-top-color: var(--mai-accent); border-top-style: solid; }
.mai-radar-legend-swatch.is-near { border-top-color: var(--mai-warn); border-top-style: dashed; }
.mai-radar-legend-swatch.is-long { border-top-color: var(--mai-info); border-top-style: dotted; }

/* ── Sub-areas ────────────────────────────────────────────────────────────── */
.mai-subareas summary { cursor: pointer; }
.mai-subarea-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; }
.mai-subarea-list li { font-size: var(--fs-xs); color: var(--mai-ink-2); padding-left: var(--space-3); position: relative; }
.mai-subarea-list li::before { content: "—"; position: absolute; left: 0; color: var(--mai-ink-3); }

/* ── Motion + responsive ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 720px) {
  .mai-stage-rule { width: 16px; margin: 0 var(--space-1); }
  .mai-stage-meta { gap: var(--space-2); }
  .mai-heatmap thead th, .mai-heatmap thead th:first-child { min-width: 72px; }
}
@media (max-width: 480px) {
  .mai-coverage { min-width: 0; }
}