/* ═══════════════════════════════════════════════════════════════════
   AI Control Tower — homepage hero, flow, solution selector.

   Extends the existing token system in main.css. Adds only what did not
   exist: decision-state colours and the dark Control Tower ground.

   RULE, and it is not negotiable: green / amber / red are reserved for
   DECISION STATES. They are never used for brand, emphasis or decoration
   anywhere in this file, so a status colour on this site always means a
   status. Brand teal and blue carry everything else.

   Enterprise observability, not a HUD. No glow, no scanlines, no neon.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Decision states — the only use of these hues on the site.
     TUNED FOR THE DARK GROUND THEY ACTUALLY SIT ON. The first values here
     were the light-background versions and all four failed WCAG AA once
     measured against the composited panel colour rather than eyeballed:
       allow  #12a150 -> 4.15   review #c2820a -> 4.34
       block  #cf3b3b -> 3.10   abstain #6b7d8a -> 3.25
     A status colour nobody can read is a decorative colour. Replaced with
     values measured on the same backgrounds:
       allow  6.68    review 6.40    block 6.34    abstain 5.52          */
  --st-allow:   #2ecc7a;
  --st-review:  #e0a52a;
  --st-block:   #f58a8a;
  --st-abstain: #93a6b3;

  /* Control Tower ground */
  --ct-bg:      #0a1119;
  --ct-panel:   #111c26;
  --ct-panel-2: #16232f;
  --ct-line:    #22323f;
  --ct-ink:     #e8eef3;
  --ct-ink-2:   #9fb1bf;
  --ct-accent:  #3fb9ae;
}

/* ── Control Tower panel ─────────────────────────────────────────── */
.ct{
  background:var(--ct-bg);
  border:1px solid var(--ct-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  color:var(--ct-ink);
}
.ct-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;
  background:var(--ct-panel);
  border-bottom:1px solid var(--ct-line);
}
.ct-dot{width:8px;height:8px;border-radius:50%;background:var(--st-allow);flex:none;}
.ct-title{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ct-ink-2);
}
/* The illustrative label is part of the component, not an afterthought:
   a screenshot taken out of context must still carry it. */
/* Deliberately NOT the smallest text in the panel.
   This label is the only thing stopping demonstration figures being read as
   customer statistics, and it was rendering at 10px -- smaller than the data
   it qualifies. The most load-bearing disclaimer on the page must not be the
   hardest thing on it to read. */
.ct-illustrative{
  margin-left:auto;
  font-family:var(--font-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#e8b95c;
  border:1px dashed #c08f2c;border-radius:var(--r-sm);
  padding:.28rem .6rem;background:rgba(217,163,65,.14);
}
/* Nine cells, laid out in fixed column counts that divide evenly.
   auto-fit was leaving an orphan row: at wide viewports it fitted six
   columns, so the second row held three cells and three empty tracks, and
   the empty tracks rendered as a dark void that read as a broken panel.
   3 and 9 both divide nine, so neither ever orphans. */
.ct-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--ct-line);
}
@media (min-width:1180px){
  .ct-grid{grid-template-columns:repeat(9,1fr);}
  .ct-cell{padding:14px 12px;}
  .ct-v{font-size:1.25rem;}
}
.ct-cell{background:var(--ct-panel-2);padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.ct-k{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ct-ink-2);
}
.ct-v{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--ct-ink);
}
.ct-v.allow{color:var(--st-allow);}
.ct-v.review{color:var(--st-review);}
.ct-v.block{color:var(--st-block);}
.ct-v.abstain{color:var(--st-abstain);}
.ct-sub{font-size:.72rem;color:var(--ct-ink-2);line-height:1.4;}
.ct-foot{
  padding:11px 16px;background:var(--ct-panel);
  border-top:1px solid var(--ct-line);
  font-size:.75rem;color:var(--ct-ink-2);line-height:1.5;
}

/* ── Flow diagram ────────────────────────────────────────────────── */
.ct-flow{padding:18px 16px;display:grid;gap:12px;background:var(--ct-bg);}
.ct-chain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;}
.ct-node{
  flex:1 1 8.5rem;min-width:8.5rem;
  border:1px solid var(--ct-line);border-radius:var(--r);
  background:var(--ct-panel-2);padding:10px 12px;
  display:flex;flex-direction:column;gap:3px;
}
.ct-node.is-tower{border-color:var(--ct-accent);background:rgba(63,185,174,.07);}
.ct-node-k{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ct-ink-2);
}
.ct-node-v{font-size:.86rem;line-height:1.35;color:var(--ct-ink);}
.ct-arrow{
  align-self:center;color:var(--ct-ink-2);font-family:var(--font-mono);
  font-size:1rem;flex:none;
}
.ct-verdicts{display:flex;gap:6px;flex-wrap:wrap;}
.ct-verdict{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;
  padding:.22rem .5rem;border-radius:var(--r-sm);border:1px solid;
}
.ct-verdict.allow{color:var(--st-allow);border-color:var(--st-allow);background:rgba(18,161,80,.1);}
.ct-verdict.review{color:var(--st-review);border-color:var(--st-review);background:rgba(194,130,10,.1);}
.ct-verdict.block{color:var(--st-block);border-color:var(--st-block);background:rgba(207,59,59,.1);}
.ct-verdict.abstain{color:var(--st-abstain);border-color:var(--st-abstain);background:rgba(107,125,138,.12);}
.ct-evidence{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px dashed var(--ct-line);padding-top:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ct-accent);
}

/* ── Solution selector ───────────────────────────────────────────── */
.sel{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:24px;
}
.sel-step{margin-bottom:28px;}
.sel .sel-q{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  margin:0 0 16px;display:flex;align-items:baseline;gap:10px;
}
.sel-n{
  font-family:var(--font-mono);font-size:.7rem;color:var(--brand);
  border:1px solid var(--brand-border);border-radius:var(--r-sm);
  padding:.1rem .38rem;flex:none;
}
.sel-opts{display:flex;flex-wrap:wrap;gap:10px;}
.sel-opt{
  font:inherit;font-size:.86rem;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);color:inherit;padding:.44rem .85rem;
  transition:border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.sel-opt:hover{border-color:var(--brand-border);background:var(--brand-subtle);}
.sel-opt[aria-pressed="true"]{
  border-color:var(--brand);background:var(--brand-subtle);
  color:var(--brand-dark);font-weight:600;
}
.sel-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.sel-out{
  border-top:1px solid var(--border);padding-top:18px;margin-top:4px;
}
.sel-out[hidden]{display:none;}
.sel-label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-dark);margin-bottom:6px;
}
.sel-rec{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.35;margin:0 0 6px;}
.sel-why{font-size:.9rem;line-height:1.6;color:#41505c;margin:0 0 14px;max-width:60ch;}
.sel-hint{font-size:.88rem;color:#5c6e79;margin:12px 0 0;}

/* ── Solution cards ──────────────────────────────────────────────── */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:14px;}
.sol-card{
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);padding:20px;
  display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;
  transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.ent a.sol-card:hover,
.ent a.sol-card:focus-visible{background:#f8fdfb;border-color:var(--brand-border);box-shadow:0 10px 24px rgba(0,143,110,.10);text-decoration:none;transform:translateY(-3px);}
.sol-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.sol-who{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;color:#5c6e79;
}
.sol-h{font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.3;margin:0;}
.sol-p{font-size:.9rem;line-height:1.55;color:#41505c;margin:0;}
.sol-probs{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:4px;}
.sol-probs li{font-size:.82rem;color:#5c6e79;padding-left:.85rem;position:relative;line-height:1.45;}
.sol-probs li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--brand);
}
.sol-go{
  margin-top:auto;padding-top:8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  /* --brand-dark (#008f6e) measured 4.07 on white; AA needs 4.5. */
  color:#007355;
  text-decoration-line:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:color .2s var(--ease-out), text-decoration-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ent a.sol-card:hover .sol-go,
.ent a.sol-card:focus-visible .sol-go{color:var(--brand-dark);text-decoration-color:currentColor;transform:translateX(3px);}

/* ── Steps ───────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:14px;counter-reset:s;}
.step{border-top:2px solid var(--brand);padding-top:12px;display:flex;flex-direction:column;gap:5px;}
.step-n{font-family:var(--font-mono);font-size:.68rem;color:var(--brand-dark);letter-spacing:.08em;}
.step-h{font-family:var(--font-display);font-weight:600;font-size:.98rem;margin:0;}
.step-p{font-size:.87rem;line-height:1.55;color:#41505c;margin:0;}

@media (prefers-reduced-motion:reduce){
  .sol-card,.sel-opt,.sol-go{transition:none;}
  .sol-card:hover{transform:none;}
  .ent a.sol-card:hover .sol-go,.ent a.sol-card:focus-visible .sol-go{transform:none;}
}

/* ── decision chain diagram ──────────────────────────────────────── */
/* Rendered from data (app.py CHAINS) through templates/_chain.html, so a
   diagram cannot drift from the prose beside it. Colours are literal rather
   than tokenised because the figure paints its own dark ground and must read
   the same whatever surface it sits on. */
.chain-fig{margin:26px 0 0;}
.chain-svg{
  width:100%;height:auto;display:block;
  border-radius:var(--r-lg);
  max-width:900px;
}
.chain-fig figcaption{
  font-size:.85rem;color:#41505c;line-height:1.6;margin-top:12px;
  max-width:68ch;border-left:2px solid var(--border);padding-left:12px;
}
.ch-boundary{font-family:var(--font-mono);font-size:10.5px;fill:#3fb9ae;}
.ch-kicker{font-family:var(--font-mono);font-size:9.5px;fill:#9fb1bf;
  letter-spacing:.06em;text-transform:uppercase;}
.ch-body{font-family:var(--font);font-size:11.5px;fill:#e8eef3;}
.ch-strong{font-family:var(--font);font-size:12px;font-weight:600;fill:#e8eef3;}
.ch-note{font-family:var(--font-mono);font-size:9.5px;fill:#9fb1bf;}
.ch-mono{font-family:var(--font-mono);font-size:11px;fill:#e8eef3;}
.ch-amber{font-family:var(--font-mono);font-size:9.5px;fill:#e0a52a;}
.ch-abstain{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:#e0a52a;}
.ch-resolved{font-family:var(--font-mono);font-size:11px;font-weight:600;fill:#2ecc7a;}
.ch-green{font-family:var(--font-mono);font-size:9.5px;fill:#2ecc7a;}
.ch-amber-strong{font-family:var(--font-mono);font-size:10.5px;font-weight:600;fill:#e0a52a;letter-spacing:.06em;text-transform:uppercase;}