/* clara-command-center.
 *
 * AN EXTERNAL STYLESHEET WITH NO <style> BLOCK AND NO element.style ANYWHERE, and that is
 * a CSP consequence rather than a preference. The response-headers policy sets
 * `style-src 'self'` with no 'unsafe-inline' (infra/headers.tf), and CSP cannot nonce a
 * style ATTRIBUTE — so every visual state is a class below. The adjuster portal needs the
 * relaxation because its views set computed geometry through React's style prop; this page
 * has no computed geometry, so it keeps the stricter policy and anything that reintroduces
 * an inline style breaks visibly here instead of quietly weakening it.
 */

/* ---------------------------------------------------------------------------
 * CLARA'S PALETTE, and every value below the brand block is derived from it rather
 * than picked. Ported 2026-09-16 from clara-agentic-platform's src/styles/tokens.css,
 * which was transcribed from CLA Brand Guidelines 2023 -- so this board and the
 * adjuster portal are the same product to look at.
 *
 * THE BOARD WAS DARK OLIVE AND IS NOW LIGHT, which is the brand's own direction:
 * Cloud paper, Deep Navy ink. A dark monitoring board is a convention, not a
 * requirement, and the ask was to look like Clara.
 *
 * *** TWO BRAND COLOURS CANNOT CARRY WHITE TEXT AND ARE NOT USED AS TEXT SURFACES. ***
 * Measured during ATF-9: white on CLARA Blue (#3da0ff) is 2.74:1 and white on Lime
 * (#cbdb79) is 1.51:1, both far below 4.5:1. So CLARA Blue is a tint and an accent
 * here, never a filled button with white on it, and Lime carries Deep Navy when it
 * carries anything. Navy (#144b96) is the fill that white may sit on.
 *
 * THE VERDICT COLOURS ARE THE DARKENED TEXT VARIANTS, not the raw brand hues, for the
 * same reason: Deep Salmon on white is 3.34:1 and fails. Each pairs with its own tint
 * as a badge background, which is also what makes five verdicts distinguishable on a
 * light ground where five saturated hues would not be.
 * ------------------------------------------------------------------------- */

:root {
  /* -- brand, verbatim. Do not adjust these; derive instead. ---------------- */
  --clara-blue: #3da0ff;
  --midnight: #1b1c37;
  --periwinkle: #c4d3f7;
  --cloud: #f2f5fd;
  --night-sky-from: #0c285e;
  --night-sky-to: #144b96;
  --deep-navy: #0c285e;
  --slate: #7b8898;
  --lime: #cbdb79;
  --tangerine: #ffa666;
  --deep-salmon: #f15f53;

  /* -- derived, with the measured contrast that justifies each ------------- */
  /* *** THESE ARE DARKER THAN THE PORTAL'S EQUIVALENTS, AND THE REASON IS THE GROUND. ***
     clara-agentic-platform derives its text colours against WHITE. This board's paper is
     Cloud (#f2f5fd) and its verdict badges sit on brand TINTS -- both lighter than white
     is dark, so every one of the portal's values was re-measured here and four of them
     FAILED on the grounds they actually land on:

       portal --slate-text     #6c7886  4.50:1 on white  ->  4.12:1 on Cloud     FAIL
       portal --tangerine-text #9e673f  4.70:1 on white  ->  4.04:1 on its tint  FAIL
       portal --salmon-text    #c64e44  4.59:1 on white  ->  3.80:1 on its tint  FAIL
       portal --slate-text     #6c7886  on periwinkle-50 ->  3.70:1              FAIL

     A token that is accessible in one app is not accessible in another with a different
     paper. Each value below was solved against the ground it is used on, and the measured
     ratio is recorded so the next person can check rather than trust. */
  --slate-text: #66717e;      /* Slate dk 17%       -> 4.55:1 on Cloud paper */
  --slate-on-tint: #606a77;   /* Slate dk 22%       -> 4.52:1 on periwinkle-50 */
  --salmon-text: #b2463d;     /* Deep Salmon dk 26% -> 4.53:1 on salmon-tint */
  --tangerine-text: #94603b;  /* Tangerine dk 42%   -> 4.51:1 on tangerine-tint */
  --success: #2f6b3a;         /* Sigma success dk   -> 5.63:1 on success-fill */
  --periwinkle-50: #e2e9fb;
  --periwinkle-25: #d3def9;
  --cloud-50: #f8fafe;
  --slate-faint: #b6bec6;     /* non-text only: dividers, disabled */

  /* -- verdict tints. Badge grounds, never text. --------------------------- */
  --success-fill: #e6f4ea;
  --tangerine-tint: #ffeada;
  --salmon-tint: #fde4e1;
  --clara-blue-tint: #dceeff;
  --lime-tint: #f0f5dc;

  /* -- the semantic layer this stylesheet actually consumes ---------------- */
  --bg: var(--cloud);
  --panel: #ffffff;
  --ink: var(--deep-navy);
  --dim: var(--slate-text);
  --edge: var(--periwinkle-25);

  /* Verdicts. `unknown` is grey because a failed read is an absence; `inconclusive`
     is blue because the read SUCCEEDED and the answer does not clear the bar -- the
     distinction the locality guard already makes and the one this board is careful
     about. Both must stay legible next to --ink, hence the tints below. */
  --ok: var(--success);
  --attention: var(--tangerine-text);
  --fail: var(--salmon-text);
  --unknown: var(--slate-on-tint);
  --inconclusive: var(--night-sky-to);

  --ok-bg: var(--success-fill);
  --attention-bg: var(--tangerine-tint);
  --fail-bg: var(--salmon-tint);
  --unknown-bg: var(--periwinkle-50);
  --inconclusive-bg: var(--clara-blue-tint);

  /* -- type ---------------------------------------------------------------- */
  /* CAUSTEN IS THE BRAND FACE AND IS NOT USED, because Clara holds no web licence for
     it (raised on ATF-9, still open). Montserrat is the guidelines' own stated
     fallback and is self-hosted, which `font-src 'self'` requires -- a Google Fonts
     URL would need the CSP widened and this board keeps the stricter policy.
     Dropping Causten in later is one @font-face block and no other change. */
  --sans: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Self-hosted, variable, latin subset. 35 KB for weights 100-900. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-var.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  /* SANS FOR THE CHROME, MONO ONLY WHERE IT EARNS IT. The board was monospace
     throughout, which reads as a terminal rather than as Clara. Identifiers, ARNs,
     counts and timings stay mono via .mono below -- those are values a reader
     compares character by character, and proportional digits make that harder. */
  font: 13.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Applied to anything a reader scans rather than reads: ids, ARNs, timings, counts. */
.mono, code, pre, .kpi-n, .num, .id { font-family: var(--mono); }

.hidden { display: none; }

/* --- the gate --- */
#gate { max-width: 30rem; margin: 12vh auto; padding: 0 1.5rem; }
#gate h1 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
#gate p { color: var(--dim); margin-bottom: 1.4rem; }

button {
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: none;
  border: 1.2px solid var(--edge);
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
button:hover { background: var(--ink); color: var(--bg); }
/* Navy fill so white text is legal on it. Lime and CLARA Blue are brand colours that
   cannot carry white -- 1.51:1 and 2.74:1 -- so neither is a filled button here. */
button.primary { border-color: var(--night-sky-to); background: var(--night-sky-to); color: #fff; }
button.primary:hover { background: var(--deep-navy); border-color: var(--deep-navy); }

.err { color: var(--fail); margin-top: 1rem; }

/* --- frame --- */
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

.top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 0;
  border-bottom: 1.5px solid var(--edge);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.top h1 { font-size: 1rem; letter-spacing: -0.01em; }
.spacer { flex: 1 1 auto; }
.sub { color: var(--dim); font-size: 0.78rem; }

section { margin-bottom: 2.4rem; }
h2 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; }
h3 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 1.4rem 0 0.45rem; }

.note { color: var(--dim); font-size: 0.8rem; max-width: 62rem; }
.aside { color: var(--dim); font-size: 0.76rem; opacity: 0.85; margin-top: 0.25rem; }
.mono { font-size: 0.78rem; }
.dim { color: var(--dim); }
.warn { color: var(--attention); }
.pad-t { margin-top: 1rem; }

/* NOT --ok. A green link on a board whose whole vocabulary is green-means-pass reads as
   a verdict. Navy is the brand's own link weight and carries no status meaning. */
a { color: var(--night-sky-to); text-decoration: none; border-bottom: 1px dotted var(--periwinkle); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- verdict --- */
.verdict { border: 1.2px solid var(--edge); padding: 1.1rem; background: var(--panel); }
.vhead { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.vtitle { font-size: 0.95rem; }
.vbadge {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  padding: 0.55rem 0.85rem;
  border: 1.4px solid currentColor;
  white-space: nowrap;
}

.pill {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}
.p-ok { color: var(--ok); }
.p-attention { color: var(--attention); }
.p-fail { color: var(--fail); }
.p-unknown { color: var(--unknown); }

/* App states get their own colours rather than reusing the check levels: `code-only` is
   not a failure, it is a fact about a repository, and painting it red would teach a reader
   to ignore red. */
.s-live { color: var(--ok); }
.s-applied-not-running { color: var(--attention); }
.s-code-only { color: var(--dim); }
.s-unknown { color: var(--unknown); }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.35rem 0.6rem 0.35rem 0;
  border-bottom: 1px solid var(--edge);
}
td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid var(--edge); vertical-align: top; }
.c-lvl { width: 6.5rem; }
.c-title { color: var(--ink); }
.c-src { color: var(--dim); font-size: 0.72rem; text-align: right; white-space: nowrap; }
.checks td:first-child { width: 6.5rem; }

ul.plain { list-style: none; margin-top: 0.6rem; }
ul.plain li { color: var(--dim); font-size: 0.8rem; padding: 0.2rem 0; }

/* --- cards and metrics --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.8rem; }
.card { border: 1.2px solid var(--edge); padding: 0.8rem; background: var(--panel); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.metric { border: 1.2px solid var(--edge); padding: 0.7rem 0.8rem; background: var(--panel); }
.metric .v { font-size: 1.35rem; letter-spacing: -0.02em; }
.metric .k { color: var(--dim); font-size: 0.74rem; margin-top: 0.15rem; }
.metric .src { color: var(--dim); font-size: 0.68rem; opacity: 0.8; margin-top: 0.3rem; word-break: break-all; }

.foot {
  border-top: 1px solid var(--edge);
  padding-top: 1rem;
  color: var(--dim);
  font-size: 0.76rem;
  max-width: 62rem;
}

/* ===========================================================================
   THE FIVE VIEWS
   ===========================================================================
   Added when the page was restructured to the Platform Command Center mockup's
   taxonomy. Every class below exists because a class was the only option: the CSP is
   `style-src 'self'` with no 'unsafe-inline' (infra/headers.tf) and CSP cannot nonce a
   style ATTRIBUTE, so `element.style` and `style=` are both unavailable — including for
   things a grid would normally compute. Where the mockup sets a width inline, this
   stylesheet names a class instead.

   THE MOCKUP'S SKIN IS DELIBERATELY NOT PORTED. It is a light board with a dark header;
   this page is dark and monospaced, and that is the app's identity rather than a default.
   What is ported is the STRUCTURE — five views, four lanes, one card per panel, a badge
   per verdict — because the structure is the thing the mockup is a specification for. */

/* --- tab bar and controls --- */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tab {
  font-size: 0.68rem;
  border-color: transparent;
  border-bottom-color: var(--edge);
  color: var(--dim);
  padding: 0.45rem 0.7rem;
}
.tab:hover { background: none; color: var(--ink); border-bottom-color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--clara-blue); background: none; }
.tab.on:hover { background: none; }

.bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--edge);
}
.bar label { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; }
.bar select {
  font: inherit;
  font-size: 0.76rem;
  background: var(--panel);
  color: var(--ink);
  border: 1.2px solid var(--edge);
  padding: 0.3rem 0.4rem;
  margin-left: 0.4rem;
  max-width: 22rem;
}

/* A dataset that is not the measured one has to be impossible to miss. This is the
   mockup's FIXTURE DATA banner, kept for the same reason and worded for what it actually
   is here: the registry with every measurement withheld. */
.flag {
  color: var(--attention);
  border: 1.2px solid var(--attention);
  padding: 0.25rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- kpi row --- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; }
.kpi { border: 1.2px solid var(--edge); padding: 0.7rem 0.8rem; background: var(--panel); }
.kpi .v { font-size: 1.3rem; letter-spacing: -0.02em; }
.kpi .l { color: var(--dim); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; margin-top: 0.2rem; }
.kpi .n { color: var(--dim); font-size: 0.72rem; margin-top: 0.35rem; }
/* Every KPI says whether it was read or written down. A tile that does not is a tile a
   reader has to take on trust, which is the whole failure mode here. */
.kpi .prov { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.4rem; }
.prov-measured { color: var(--ok); }
.prov-declared { color: var(--dim); }

/* --- lanes and panels --- */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); gap: 0.9rem; }
.lane { border: 1.2px solid var(--edge); background: var(--panel); }
.lane > .lh { padding: 0.6rem 0.8rem; border-bottom: 1.2px solid var(--edge); display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.lane > .lh .name { color: var(--ink); font-size: 0.8rem; letter-spacing: 0.02em; }
.lane > .lh .fed { color: var(--dim); font-size: 0.7rem; margin-left: auto; }
.lane > .lq { padding: 0.5rem 0.8rem; color: var(--dim); font-size: 0.74rem; border-bottom: 1px solid var(--edge); }

.pnl { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--edge); display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
.pnl:last-child { border-bottom: 0; }
.pnl .pt { color: var(--ink); font-size: 0.78rem; }
.pnl .pid { color: var(--dim); font-size: 0.7rem; }
.pnl .ps { color: var(--dim); font-size: 0.73rem; margin-top: 0.2rem; }
/* The measured line and the requirement line are different colours because they are
   different KINDS of sentence, and a reader skimming must not have to read to tell which
   is which. */
.pnl .pm { color: var(--ink); font-size: 0.73rem; margin-top: 0.3rem; }
.pnl .pn { color: var(--dim); font-size: 0.73rem; margin-top: 0.3rem; }
.pnl .pf { color: var(--dim); font-size: 0.7rem; margin-top: 0.3rem; opacity: 0.9; }
.tag { font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }

/* --- badges: the mockup's verdict vocabulary --- */
.badge {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
  height: fit-content;
}
.b-pass, .b-measured, .b-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bg); }
.b-findings, .b-partial, .b-attention { color: var(--attention); background: var(--attention-bg); border-color: var(--attention-bg); }
.b-critical, .b-fail { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-bg); }
.b-inconclusive { color: var(--inconclusive); background: var(--inconclusive-bg); border-color: var(--inconclusive-bg); }
.b-unavailable, .b-notbuilt, .b-declared { color: var(--dim); background: var(--unknown-bg); border-color: var(--unknown-bg); }
.b-unknown { color: var(--unknown); background: var(--unknown-bg); border-color: var(--unknown-bg); }

/* --- readiness dots --- */
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border: 1px solid currentColor; margin-right: 0.4rem; vertical-align: middle; }
.d-yes { color: var(--ok); background: currentColor; }
.d-no { color: var(--dim); }
.d-inconclusive { color: var(--inconclusive); background: currentColor; }
.cell-yes { color: var(--ok); }
.cell-no { color: var(--dim); }
.cell-inconclusive { color: var(--inconclusive); }

/* --- callouts --- */
.call { border-left: 2px solid var(--ok); padding: 0.55rem 0.8rem; margin: 0.8rem 0 1.2rem; color: var(--dim); font-size: 0.78rem; background: var(--panel); }
.call.warnish { border-left-color: var(--attention); }
.call.badish { border-left-color: var(--fail); }
.call strong { color: var(--ink); font-weight: 400; }

/* --- table column widths, which the mockup sets inline and this cannot --- */
.t-id { width: 8rem; }
.t-narrow { width: 5.5rem; }
.t-mid { width: 11rem; }
.t-state { width: 7.5rem; }
th.t-num, td.t-num { text-align: right; }
.wrapy { word-break: break-word; }
table.dense td, table.dense th { padding-right: 0.5rem; font-size: 0.74rem; }

/* --- the panel-count strip on the operator view --- */
.strip { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0.6rem 0 1.2rem; }
.strip .s { color: var(--dim); font-size: 0.74rem; }
.strip .s b { color: var(--ink); font-weight: 400; }

/* `.dimmed` is used by the Staging view. The stylesheet's existing muted class is `.dim`;
   this is an alias rather than a rename because both read naturally at their call sites and
   a stylesheet with two names for one colour is a smaller problem than a diff that touches
   every muted cell on the board to save one line. */
.dimmed { color: var(--dim); }

/* Numeric cells right-align so magnitudes line up; a column of latencies that does not is a
   column a reader has to parse instead of scan. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * Charts. SVG, and the colours live HERE rather than in fill= attributes.
 * ---------------------------------------------------------------------------
 * A `fill="#c64e44"` on a rect would work and would put a hex outside this file, which is
 * the one thing the brand discipline forbids -- ATF-9 exists because colour had scattered.
 * So geometry is attributes (CSP-legal) and every colour is a class resolved below (one
 * place). The two rules together are why there is no charting library here: Recharts sets
 * inline styles, which `style-src 'self'` blocks outright.
 */

.chart-wrap { margin: 0.9rem 0 1.1rem; }
.chart-title { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.35rem; }
.chart { display: block; width: 100%; }

/* Heights are set per chart family rather than on the element, since a style attribute is
   not available. Each family knows its own viewBox, so a fixed height keeps the aspect
   honest instead of letting preserveAspectRatio="none" stretch the type. */
.chart-bars { height: 5.5rem; }
.chart-budget { height: 2.6rem; }
.chart-cols { height: 5.8rem; }
.chart-stack { height: 2.4rem; }

/* Track: the unfilled remainder. Deliberately faint -- it is a scale, not a value. */
.c-track { fill: var(--periwinkle-50); }

.c-bar { }
.c-ok { fill: var(--success); }
.c-fail { fill: var(--fail); }
.c-warn { fill: var(--attention); }
.c-neutral { fill: var(--slate-faint); }
/* CLARA Blue is legal as a FILL. It is illegal as a ground for white text (2.74:1), which is
   why it appears here and never behind a label. */
.c-accent { fill: var(--clara-blue); }

/* The budget marker is ink, not a status colour: the threshold is a fact, and colouring it
   red would say the threshold is the problem. */
.c-marker { fill: var(--ink); }

.c-label { fill: var(--ink); font-size: 10.5px; font-family: var(--sans); }
.c-value { fill: var(--ink); font-size: 10.5px; font-family: var(--mono); }
.c-axis  { fill: var(--dim); font-size: 9.5px; font-family: var(--mono); }
.c-ok-t   { fill: var(--ok); }
.c-fail-t { fill: var(--fail); }