/* FALCON-OS console — design tokens and components (W5.5).
 *
 * The design brief, since it is not obvious and it is not decoration:
 *
 * FALCON is an INSTRUMENT, not a dashboard. Its claim is that it will not
 * state what it cannot evidence, that every conclusion carries a tamper-
 * evident record, and that a refusal is a result. The console is built to
 * look like something that measures: cold neutrals, monospace numerics,
 * tabular alignment, hairline rules, almost no colour.
 *
 * COLOUR IS RESERVED FOR VERDICTS. Nothing else on the page is saturated, so
 * that when something is coloured it means something. And the most important
 * choice in the palette is a colour that is ABSENT:
 *
 *     `insufficient_support` and `unresolved` are rendered in MUTED GREY,
 *     never in red.
 *
 * "We looked and could not say" is a successful outcome — the system executed
 * correctly and the evidence did not justify an answer. Colouring it red
 * would teach every operator that FALCON's honest refusals are failures, and
 * within a week they would be tuning to make the red go away. That is the one
 * behaviour this product exists to prevent, so the palette refuses to reward
 * it. Red is for `execution_failure`, `policy_denied` and a BROKEN CHAIN —
 * things that are actually wrong.
 *
 * NO WEB FONTS, NO CDN, NO BUILD STEP. W4 exists so FALCON runs air-gapped. A
 * console that degrades to Times New Roman inside a perimeter, or that cannot
 * be read by the operator running it, was designed somewhere else.
 */

/* S59 -- the One Intelligence look. Light by default, the way the 1-i
   admin console reads: white surfaces on a warm-grey ground, neutral
   hairlines, black for the one primary action, colour reserved for
   verdicts. The dark palette stays behind the theme toggle. */
:root {
  color-scheme: light dark;

  --ground: #f7f7f8;
  --surface: #ffffff;
  --raised: #f2f3f5;
  --hairline: #e6e7ea;
  --hairline-strong: #d3d5da;
  --ink: #111318;
  --ink-dim: #3b3f46;
  --muted: #6b7078;

  --ok: #1a8a5a;
  --warn: #9a6b06;
  --deny: #d0342c;
  --unknown: var(--muted);
  --accent: #2563eb;
  --primary: #111318;
  --primary-ink: #ffffff;

  --ok-bg: rgba(26, 138, 90, 0.10);
  --warn-bg: rgba(154, 107, 6, 0.10);
  --deny-bg: rgba(208, 52, 44, 0.10);
  --unknown-bg: rgba(107, 112, 120, 0.12);
  --accent-bg: rgba(37, 99, 235, 0.10);

  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
          "Cascadia Mono", Menlo, Consolas, monospace;

  --rail: 252px;
  --strip: 64px;
  --radius: 12px;
  --radius-sm: 8px;
}

:root[data-theme="light"] {
  --ground: #f7f7f8; --surface: #ffffff; --raised: #f2f3f5;
  --hairline: #e6e7ea; --hairline-strong: #d3d5da;
  --ink: #111318; --ink-dim: #3b3f46; --muted: #6b7078;
}

:root[data-theme="dark"] {
  --ground: #0e1114;
  --surface: #15191e;
  --raised: #1c2128;
  --hairline: #262c34;
  --hairline-strong: #343c46;
  --ink: #e6e9ee;
  --ink-dim: #aab2bd;
  --muted: #737d89;
  --ok: #35d08a;
  --warn: #e4a93c;
  --deny: #ee5f4c;
  --accent: #6ea1ff;
  --primary: #f2f4f7;
  --primary-ink: #111318;
  --ok-bg: rgba(53, 208, 138, 0.12);
  --warn-bg: rgba(228, 169, 60, 0.12);
  --deny-bg: rgba(238, 95, 76, 0.12);
  --unknown-bg: rgba(115, 125, 137, 0.14);
  --accent-bg: rgba(110, 161, 255, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Every number, id, hash and verdict is monospace and tabular. Hash prefixes
   have to be comparable by eye down a column; proportional digits make that
   impossible and make the whole page feel like a form. */
code, .mono, td.num, .hash, .chip, .kv dd, input, select, textarea, button {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  height: var(--strip);
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 600; letter-spacing: 0.02em;
}
.brand .mark { flex: none; }
.brand small {
  font: 10px/1 var(--mono);
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-left: auto;
}

nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; }
nav button {
  all: unset;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius);
  color: var(--ink-dim); cursor: pointer;
  font: 13px/1 var(--sans);
}
nav button:hover { background: var(--raised); color: var(--ink); }
nav button[aria-current="true"] {
  background: var(--accent-bg); color: var(--ink); font-weight: 500;
}
/* The count sits right, in mono, so a rail of sections reads as a readout. */
nav .count {
  margin-left: auto; font: 11px/1 var(--mono);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
nav button[aria-current="true"] .count { color: var(--accent); }

.rail-foot {
  margin-top: auto; padding: 12px 16px;
  border-top: 1px solid var(--hairline);
  font: 11px/1.6 var(--mono); color: var(--muted);
  display: flex; flex-direction: column; gap: 3px;
}
.rail-foot button {
  all: unset; cursor: pointer; color: var(--muted);
  font: 11px/1.6 var(--mono);
}
.rail-foot button:hover { color: var(--ink); }

/* ------------------------------------------------------- status strip */

.strip {
  height: var(--strip);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 5;
  font: 11px/1 var(--mono); color: var(--muted);
}
.strip b { color: var(--ink-dim); font-weight: 500; }
.strip .spacer { margin-left: auto; }

/* The deployment's posture, always visible. An operator who has to click into
   a settings page to find out whether egress is permitted will assume it is. */
.posture {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius);
  border: 1px solid currentColor;
  font: 10px/1 var(--mono); letter-spacing: 0.07em;
}
.posture.sealed { color: var(--ok); background: var(--ok-bg); }
.posture.open   { color: var(--muted); background: var(--unknown-bg); }
.posture.gated  { color: var(--warn); background: var(--warn-bg); }

main { padding: 22px 24px 64px; max-width: 1180px; }

h1 { font: 600 19px/1.3 var(--sans); margin: 0 0 3px; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin: 0 0 20px; font-size: 13px; max-width: 62ch; }
h2 { font: 600 13px/1.3 var(--sans); margin: 26px 0 10px; letter-spacing: 0.01em; }

/* ------------------------------------------------------------- panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel > header {
  padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 10px;
  font: 11px/1 var(--mono); letter-spacing: 0.07em; color: var(--muted);
}
.panel > header .spacer { margin-left: auto; }
.panel .body { padding: 14px; }
.panel .body.flush { padding: 0; }

.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

/* A stat reads as a measurement: big mono figure, quiet label under it. */
.stat { padding: 14px; }
.stat .n {
  font: 600 26px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat .l {
  font: 10px/1 var(--mono); letter-spacing: 0.09em;
  color: var(--muted); margin-top: 7px;
}
.stat.attn .n { color: var(--warn); }
/* A count that could not be taken. Rendered as a dash in the muted neutral,
   never as a zero -- an operator acts on "0 pending reviews" by doing
   nothing, so a failed check that looks like zero is worse than an error. */
.stat.unknown .n { color: var(--muted); }
.stat .l.gap { color: var(--warn); margin-top: 3px; }

/* -------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 8px 14px;
  font: 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted);
  border-bottom: 1px solid var(--hairline); font-weight: 400;
  white-space: nowrap;
}
tbody td { padding: 9px 14px; border-bottom: 1px solid var(--hairline); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--raised); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hash { color: var(--muted); font-size: 12px; }

.scroll { overflow-x: auto; }

/* --------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 3px;
  font-size: 11px; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid transparent;
}
.chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chip.ok      { color: var(--ok);      background: var(--ok-bg); }
.chip.warn    { color: var(--warn);    background: var(--warn-bg); }
.chip.deny    { color: var(--deny);    background: var(--deny-bg); }
/* Grey, and the reason is the design brief at the top of this file. */
.chip.unknown { color: var(--unknown); background: var(--unknown-bg); }
.chip.plain   { color: var(--ink-dim); background: var(--raised);
                border-color: var(--hairline); }
.chip.plain::before { display: none; }

/* --------------------------------------------------------- key/value */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; }
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 0; font-size: 12.5px; word-break: break-all; }

/* ------------------------------------------------- the chain viewer */

/* The signature element. A journal is FALCON's whole claim, so the console
   RE-WALKS it in the browser rather than rendering a tick the server sent.
   A viewer that only displays an assertion verifies nothing. */
.chain { padding: 4px 0; }
.link {
  display: grid;
  grid-template-columns: 26px 46px 1fr auto;
  align-items: center; gap: 10px;
  padding: 5px 14px;
  font: 12px/1.4 var(--mono);
}
.link:hover { background: var(--raised); }
/* The connector: a hairline running through the gutter, so the chain reads
   as linked rather than as a list that happens to be in order. */
.link .rung {
  position: relative; height: 100%; min-height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.link .rung::before {
  content: ""; position: absolute; top: -6px; bottom: -6px;
  width: 1px; background: var(--hairline-strong);
}
.link:first-child .rung::before { top: 50%; }
.link:last-child .rung::before { bottom: 50%; }
.link .node {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--surface);
}
.link.broken .node { background: var(--deny); }
.link .seq { color: var(--muted); font-size: 11px; text-align: right; }
.link .kind { color: var(--ink-dim); }
.link .digest { color: var(--muted); font-size: 11px; }
.link.broken { background: var(--deny-bg); }
.link.broken .digest { color: var(--deny); }

.verdict-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-top: 1px solid var(--hairline);
  font: 11px/1 var(--mono); letter-spacing: 0.05em;
}
.verdict-bar.ok { color: var(--ok); background: var(--ok-bg); }
.verdict-bar.deny { color: var(--deny); background: var(--deny-bg); }
/* COULD NOT ASK. Neither green nor red: a check that failed is not a
   pass and is not a failure, and colouring it either way would answer
   a question nobody managed to ask. */
.verdict-bar.unknown { color: var(--unknown); background: var(--unknown-bg); }

/* -------------------------------------------- the two-bound rate bar */

/* `unsupported_rate` is a pair, and the GAP between the bounds is the doubt.
   Rendering one number would hide exactly the thing the two-bound design
   exists to show. */
.bounds { padding: 4px 0 2px; }
.bounds .track {
  position: relative; height: 8px; border-radius: 2px;
  background: var(--unknown-bg); overflow: hidden;
}
.bounds .lower { position: absolute; inset: 0 auto 0 0; background: var(--deny); }
.bounds .gap   { position: absolute; top: 0; bottom: 0;
                 background: repeating-linear-gradient(
                   -45deg, var(--warn) 0 2px, transparent 2px 5px); }
.bounds .scale {
  display: flex; justify-content: space-between;
  font: 10px/1 var(--mono); color: var(--muted); margin-top: 6px;
}

/* ------------------------------------------------------------ controls */

button.act, .act {
  font: 12px/1 var(--mono); padding: 7px 11px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  background: var(--raised); color: var(--ink); cursor: pointer;
}
button.act:hover { border-color: var(--accent); color: var(--accent); }
button.act.approve:hover { border-color: var(--ok); color: var(--ok); }
button.act.reject:hover  { border-color: var(--deny); color: var(--deny); }
button.act:disabled { opacity: 0.45; cursor: not-allowed; }

input, textarea, select {
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  padding: 7px 9px; font-size: 12.5px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label.f { display: block; margin-bottom: 10px; }
label.f span {
  display: block; font: 10px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 5px;
}

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.note {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--hairline-strong); padding-left: 11px;
  max-width: 66ch;
}
.note b { color: var(--ink-dim); font-weight: 500; }

.empty { padding: 30px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.empty b { display: block; color: var(--ink-dim); margin-bottom: 5px; font-weight: 500; }

pre.json {
  margin: 0; padding: 12px; background: var(--ground);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-dim);
  overflow: auto; max-height: 380px;
}

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  padding: 11px 15px; border-radius: var(--radius);
  background: var(--raised); border: 1px solid var(--hairline-strong);
  font: 12px/1.4 var(--mono); max-width: 400px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}
.toast.deny { border-color: var(--deny); color: var(--deny); }
.toast.ok { border-color: var(--ok); color: var(--ok); }

/* A gate screen, not a modal. Without a token the console can do nothing,
   and pretending otherwise with a greyed-out shell would be theatre. */
.gate { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.gate .panel { width: min(440px, 100%); }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row;
          align-items: center; border-right: 0;
          border-bottom: 1px solid var(--hairline); overflow-x: auto; }
  .brand { border-bottom: 0; border-right: 1px solid var(--hairline); }
  nav { flex-direction: row; padding: 6px; }
  .rail-foot { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise 0.16s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(3px); } }
}

/* ==========================================================================
 * Verify an output (UX-S2 / UX-S3)
 *
 * Uses the console's existing tokens -- no new palette. A second colour
 * system inside one product is how two panels start disagreeing about what
 * "denied" looks like.
 * ========================================================================== */

.verify-form { display: flex; flex-direction: column; gap: .5rem; max-width: 62rem; }
.verify-form label { font-weight: 600; }
.verify-form textarea {
  width: 100%; font: inherit; font-family: var(--mono);
  font-size: .86rem; padding: .55rem .65rem; border: 1px solid var(--hairline);
  border-radius: 3px; background: var(--raised); color: var(--ink); resize: vertical;
}
.verify-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.verify-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.verify-result { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.verdict-head {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding-bottom: .6rem; border-bottom: 1px solid var(--hairline);
}
.verdict-head .stat { font-size: .88rem; color: var(--muted); }
.verdict-head .stat b { color: var(--ink); font-variant-numeric: tabular-nums; }

.claims { list-style: none; margin: 0; padding: 0; display: flex;
          flex-direction: column; gap: .6rem; }
/* The stripe carries the verdict as well as the chip. Colour alone would
 * leave the state unreadable to anyone who cannot separate these hues. */
.claim { border: 1px solid var(--hairline); border-left: 3px solid var(--muted);
         border-radius: 3px; padding: .7rem .85rem; background: var(--raised); }
.claim.ok { border-left-color: var(--ok); }
.claim.deny { border-left-color: var(--deny); }
.claim.warn { border-left-color: var(--warn); }
.claim-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
              margin-bottom: .35rem; }
.claim-text { margin: 0 0 .35rem; }
.claim-bound { margin: 0; font-size: .88rem; }
.rejected { font-size: .9rem; padding-left: 1.1rem; }
.provenance { font-size: .82rem; border-top: 1px solid var(--hairline); padding-top: .6rem; }

@media (max-width: 640px) {
  .verdict-head { gap: .6rem; }
  .verify-form textarea { font-size: .8rem; }
}

/* ==========================================================================
 * S23 Projects, S24 Personal, S25 responsive & accessibility
 *
 * S25's acceptance is "the critical Personal flow passes mobile plus
 * keyboard/screen-reader". That is three properties, and each is a rule here
 * rather than a coat of paint:
 *
 *   mobile         the rail becomes a scrolling top bar under 760px, because
 *                  a fixed 200px rail on a 375px screen leaves 175px for the
 *                  thing the person came to read
 *   keyboard       every interactive element has a visible focus ring. The
 *                  console had `:focus-visible` on inputs and not on the nav
 *                  buttons, so tabbing through it went invisible
 *   screen reader  the trust header is a live region (set in the markup), and
 *                  state is never carried by colour alone -- every chip has a
 *                  word in it, every claim has a border weight as well as a hue
 * ========================================================================== */

/* -- S24 Personal --------------------------------------------------------- */
.personal .lede { max-width: 60ch; color: var(--ink-dim); margin: 0 0 1rem; }
.trust {
  padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--hairline);
  border-left: 4px solid var(--muted); background: var(--raised); margin-bottom: .9rem;
}
.trust.ok { border-left-color: var(--ok); }
.trust.warn { border-left-color: var(--warn); }
.trust.deny { border-left-color: var(--deny); }
.next { margin-top: 1rem; }
.next h3 { font-size: .95rem; margin: 0 0 .4rem; }
.next ul { margin: 0; padding-left: 1.1rem; display: flex;
           flex-direction: column; gap: .3rem; }

/* -- S23 Projects --------------------------------------------------------- */
.projects { list-style: none; margin: 0 0 1.2rem; padding: 0;
            display: flex; flex-wrap: wrap; gap: .5rem; }
.project {
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  padding: .6rem .8rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--raised); color: inherit;
  font: inherit; cursor: pointer;
}
.project:hover { border-color: var(--accent); }
.project.on { border-color: var(--accent); background: var(--accent-bg); }
.runlist { list-style: none; margin: 0 0 1rem; padding: 0;
           display: flex; flex-direction: column; gap: .25rem; }
.runlist label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
/* The console sets `width: 100%` on inputs for its text fields, which
 * stretched this checkbox to 689px and pushed its own label to the far side
 * of the row. A type selector reaching a control it was not written for is
 * the commonest way a layout breaks between source and screen. */
.runlist input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.compare { margin: 1rem 0; }
.compare th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.export {
  max-height: 22rem; overflow: auto; background: var(--ground);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .7rem .85rem; font-size: .78rem; margin-top: .8rem;
}

/* -- S25 keyboard: nothing focusable may be invisible when focused -------- */
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--raised); color: var(--ink); padding: .6rem .9rem;
  border: 1px solid var(--accent);
}
.skip:focus { left: .5rem; top: .5rem; }

/* -- S25 mobile ----------------------------------------------------------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; width: auto; height: auto; border-right: none;
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center; gap: .3rem;
    overflow-x: auto; padding: .5rem .6rem;
  }
  .rail nav { display: flex; flex-direction: row; gap: .3rem; }
  .rail nav button { white-space: nowrap; }
  .rail .rail-foot { display: none; }
  .panel { padding: .9rem .8rem; }
  .grid { font-size: .82rem; }
  .projects { flex-direction: column; }
  .project { width: 100%; }
}

/* -- S25 motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* -- S16 analytics bars ---------------------------------------------------
 * A bar AND its number. A bar alone cannot be read by a screen reader or
 * compared precisely; a number alone hides the shape of the distribution.
 * ------------------------------------------------------------------------ */
.bars { list-style: none; margin: 0 0 1rem; padding: 0;
        display: flex; flex-direction: column; gap: .3rem; }
.bars li { display: grid; grid-template-columns: 8rem 1fr 5rem;
           align-items: center; gap: .6rem; font-size: .88rem; }
.bar { background: var(--ground); border: 1px solid var(--hairline);
       border-radius: 2px; height: .7rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--muted); }
.bar-fill.ok { background: var(--ok); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.deny { background: var(--deny); }
.bar-l { color: var(--ink-dim); }
.bar-n { text-align: right; font-family: var(--mono);
         font-variant-numeric: tabular-nums; }
#o-statement { width: 100%; font: inherit; padding: .5rem .65rem;
               border: 1px solid var(--hairline); border-radius: var(--radius);
               background: var(--raised); color: var(--ink); }
@media (max-width: 760px) {
  .bars li { grid-template-columns: 6rem 1fr 3.6rem; font-size: .8rem; }
}

.ws-create { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
             margin-top: .6rem; }
.ws-create input, .ws-create select { width: auto; flex: 1 1 12rem;
  padding: .45rem .6rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--raised); color: var(--ink);
  font: inherit; }
.ws-create button { flex: 0 0 auto; }
@media (max-width: 760px) { .ws-create { flex-direction: column; align-items: stretch; } }

.adm-to, .adm-ev { padding: .25rem .4rem; font-size: .82rem;
  border: 1px solid var(--hairline); border-radius: 2px;
  background: var(--raised); color: var(--ink); width: auto; }
.adm-ev { font-family: var(--mono); }

.caps { list-style: none; margin: 0 0 .7rem; padding: 0;
        display: flex; flex-wrap: wrap; gap: .35rem; }

/* FR-002A-D. The clarification sits inside a `.trust` block, so it inherits
   the same visual weight as a verdict -- which is right: being told what is
   missing is a result, not a form error. Options wrap rather than scroll: a
   question with more choices than fit is a question that should have been
   narrower, and hiding the overflow would hide that. */
.clarify-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 0; }
.clarify-options .clarify-option { text-align: left; line-height: 1.35; }

/* W7.3. The five answers sit inside the result, after the claim list and
   before the generic next steps, as a numbered list: the order is the
   order of the claims above, so a reader can match them by eye. */
.insufficiency { margin-top: 1rem; }
.insufficiency ol.cannot { margin: .5rem 0 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.insufficiency dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .3rem 0 0; font-size: .9rem; }
.insufficiency dt { color: var(--muted); }
.insufficiency dd { margin: 0; }

/* W7.6. Each dimension is a disclosure that opens itself when it moved and
   stays closed when it did not, so the page reads as "what changed" first
   and "what stayed the same" on demand. */
.compare details { margin-top: .6rem; border: 1px solid var(--hairline); border-radius: 6px; padding: .4rem .7rem; }
.compare summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.compare tr.moved td { background: color-mix(in srgb, var(--warn, #c8a24a) 12%, transparent); }

/* W7.2. A folded section leaves a one-line pointer to the depth that shows
   it, so nothing disappears without saying where it went. */
.folded { font-size: .82rem; border-left: 2px solid var(--hairline); padding-left: .6rem; margin: .5rem 0; }
.strip select { font: inherit; font-size: .78rem; background: transparent; color: inherit; border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 4px; }

/* W7.5. The rail groups the same panels under four shells; the reader's own
   opens first. A closed group still lists its panels on open, so nothing is
   unreachable from any shell. */
.shell-group { margin: 0 0 .35rem; }
.shell-group > summary { cursor: pointer; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .25rem 0; }
.shell-group > summary small { text-transform: none; letter-spacing: 0; opacity: .8; }
.rail select { font: inherit; font-size: .78rem; background: transparent; color: inherit; border: 1px solid var(--hairline); border-radius: 4px; padding: 2px 4px; }

/* ---- The gate (S54): the sign-in page ------------------------------------
   One card, one primary path. A stranger signs in with an account they have
   or with their address; an organisation's SSO and a developer's token are
   there, folded, for the people who know they need them. */
.gate {
  min-height: 100vh; box-sizing: border-box; padding: 40px 16px;
  display: grid; place-items: center;
  background: radial-gradient(900px 480px at 50% -8%, var(--accent-bg), transparent 62%),
              var(--ground);
}
.gate .card { width: 100%; max-width: 420px; }
.gate .wordmark {
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
  color: var(--ink-dim); font: 12px/1 var(--mono); letter-spacing: 0.14em;
}
.gate .wordmark svg { width: 22px; height: 22px; flex: none; }
.gate h1 { font: 600 26px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 8px; text-wrap: balance; }
.gate .lede { font-size: 14px; color: var(--muted); margin: 0 0 22px; max-width: none; }
.gate .panel .body { padding: 20px; }
.gate .provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; margin-bottom: 10px; box-sizing: border-box;
  font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--raised);
}
.gate .provider:hover { border-color: var(--accent); }
.gate .provider:disabled { opacity: 0.55; cursor: progress; }
.gate .provider svg { width: 18px; height: 18px; flex: none; }
.gate .or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: var(--muted); font: 11px/1 var(--mono); letter-spacing: 0.12em;
}
.gate .or::before, .gate .or::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.gate label.f span {
  font: 500 12.5px/1 var(--sans); letter-spacing: 0; color: var(--ink-dim); margin-bottom: 6px;
}
.gate input[type="email"], .gate input[type="password"] {
  font: 14px/1.3 var(--sans); padding: 10px 12px; box-sizing: border-box;
}
.gate .primary {
  width: 100%; padding: 12px 14px; font: 600 14px/1 var(--sans);
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer;
}
.gate .primary:hover { filter: brightness(1.08); }
.gate .primary:disabled { opacity: 0.55; cursor: progress; }
.gate .consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); cursor: pointer;
}
.gate .consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.gate .status {
  margin-top: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.5;
  border-left: 2px solid var(--hairline-strong); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface); color: var(--ink-dim);
}
.gate .status:empty { display: none; }
.gate .status.deny { border-color: var(--deny); background: var(--deny-bg); color: var(--ink); }
.gate .status.ok   { border-color: var(--ok);   background: var(--ok-bg);   color: var(--ink); }
.gate .status.busy { border-color: var(--accent); }
.gate details { border-top: 1px solid var(--hairline); }
.gate details summary {
  cursor: pointer; padding: 13px 20px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 13px/1.3 var(--sans); color: var(--ink-dim);
}
.gate details summary::-webkit-details-marker { display: none; }
.gate details summary::after { content: '+'; color: var(--muted); font: 16px/1 var(--mono); }
.gate details[open] summary::after { content: '\2013'; }
.gate details summary:hover { color: var(--ink); }
.gate details .body { padding: 0 20px 18px; }
.gate details .note { border: 0; padding: 0; margin: 0 0 12px; max-width: none; }
.gate .foot { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; text-align: center; }
.gate .sent { text-align: center; padding: 6px 0 2px; }
.gate .sent .mark {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; background: var(--ok-bg); color: var(--ok);
  font: 600 18px/1 var(--sans);
}
.gate .sent b { color: var(--ink); }
.gate .linkish { all: unset; cursor: pointer; color: var(--accent); font: inherit; }
.gate .linkish:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .gate .card { animation: gate-in 0.35s ease-out; }
  @keyframes gate-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---- S56: Get started, and locked shells ----------------------------------- */
ol.steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
ol.steps .step {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
}
ol.steps .step .n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--mono); background: var(--accent-bg); color: var(--accent);
}
ol.steps .step.done .n { background: var(--ok-bg); color: var(--ok); }
ol.steps .step p { margin: 4px 0 10px; color: var(--ink-dim); font-size: 13px; max-width: 62ch; }
dl.outcomes { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
dl.outcomes dt { font: 500 12px/1.5 var(--mono); color: var(--ink); text-transform: uppercase;
                 letter-spacing: 0.06em; }
dl.outcomes dd { margin: 0; color: var(--ink-dim); font-size: 13px; }
.shell-group.locked summary { color: var(--muted); }
.shell-group.locked summary small { color: var(--muted); font: 10px/1 var(--mono);
                                    letter-spacing: 0.08em; margin-left: 6px; }
.rail-note { margin: 4px 12px 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
nav button.unlock { color: var(--accent); }

/* ---- S58: the Verify Integrate page ---------------------------------------- */
.panel.way { margin-bottom: 14px; }
.panel.way > header { font: 500 14px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); text-transform: none; }
.panel.way > header .n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 600 12px/1 var(--mono); background: var(--accent-bg); color: var(--accent); margin-right: 4px;
}
.panel.way.locked > header { color: var(--muted); }
.panel.way h3 { margin: 14px 0 6px; }


/* ==== S59 · the One Intelligence look ======================================
   Applied after everything above so it wins on equal specificity: the shell,
   the top bar, the controls and the cards, styled the way the 1-i admin
   console is. Verdict colours and the mono readouts are untouched. */
body { font: 15px/1.55 var(--sans); }
h1 { font: 600 24px/1.25 var(--sans); letter-spacing: -0.015em; margin: 0 0 4px; }
.lede { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
h2 { font: 600 16px/1.3 var(--sans); margin: 30px 0 10px; letter-spacing: 0; }
h3 { font: 600 14.5px/1.3 var(--sans); }

/* -- the rail -- */
.rail { background: var(--surface); border-right: 1px solid var(--hairline); }
.brand {
  height: auto; padding: 16px 16px 14px; gap: 12px;
  border-bottom: 0; font: 600 15px/1.2 var(--sans); letter-spacing: 0;
}
.brand .tile {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center;
}
.brand .tile svg { width: 18px; height: 18px; }
.brand .who { display: flex; flex-direction: column; gap: 2px; }
.brand .who small { font: 12px/1 var(--sans); color: var(--muted); letter-spacing: 0; margin: 0; }
nav { padding: 6px 10px; gap: 2px; }
nav .rail-section {
  font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 16px 12px 6px;
}
nav button {
  padding: 10px 12px; border-radius: 10px; gap: 12px;
  font: 500 14.5px/1 var(--sans); color: var(--ink-dim);
}
nav button svg.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
nav button:hover { background: var(--raised); color: var(--ink); }
nav button[aria-current="page"], nav button[aria-current="true"] {
  background: var(--raised); color: var(--ink); font-weight: 600;
}
nav button[aria-current="page"] .count { color: var(--ink-dim); }
.shell-group { margin: 0; }
.shell-group > summary {
  font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 16px 12px 6px; list-style: none;
}
.shell-group > summary::-webkit-details-marker { display: none; }
.shell-group > summary small { font-weight: 500; }
.shell-group.locked summary { color: var(--muted); }
.rail-foot { border-top: 1px solid var(--hairline); font: 12px/1.6 var(--sans); }
.rail-foot button { font: 12px/1.6 var(--sans); }
.rail select { border-radius: var(--radius-sm); padding: 6px 8px; font-size: 13px; background: var(--surface); }

/* -- the top bar -- */
.strip {
  height: var(--strip); padding: 0 24px; gap: 16px;
  font: 13.5px/1.3 var(--sans); color: var(--muted);
}
.strip .crumbs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.strip .crumbs b { color: var(--ink); font-weight: 600; }
.strip .crumbs .title { font: 600 17px/1.2 var(--sans); color: var(--ink); }
.strip .topbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--hairline-strong); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer;
}
.strip .topbtn:hover { background: var(--raised); }
.strip .topbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7;
                     stroke-linecap: round; stroke-linejoin: round; }
.strip select { border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
                padding: 6px 8px; font-size: 13px; background: var(--surface); }
main { padding: 28px 28px 72px; max-width: 1240px; }

/* -- cards, controls -- */
.panel { border-radius: var(--radius); }
.panel > header { padding: 14px 20px; font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.panel .body { padding: 20px; }
button.act, .act {
  font: 500 14px/1 var(--sans); padding: 10px 14px; border-radius: 10px;
  background: var(--surface); border-color: var(--hairline-strong); color: var(--ink);
}
button.act:hover { border-color: var(--ink-dim); color: var(--ink); background: var(--raised); }
button.act.primary, .act.primary, .gate .primary {
  background: var(--primary); color: var(--primary-ink); border-color: var(--primary);
}
button.act.primary:hover, .act.primary:hover, .gate .primary:hover {
  background: var(--primary); color: var(--primary-ink); filter: brightness(1.15);
}
input, textarea, select {
  border-radius: 10px; border-color: var(--hairline-strong); background: var(--surface);
  padding: 10px 12px; font: 14.5px/1.3 var(--sans);
}
label.f span { font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-dim); margin-bottom: 6px; }
th { font: 500 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); padding: 12px 16px; }
td { padding: 13px 16px; font-size: 14px; }
.note { font-size: 13.5px; }
.chip { border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: 0.02em; text-transform: none; padding: 5px 9px; }
.kv dt { font-size: 13px; }
.empty { padding: 34px 16px; }

/* -- the gate on a light ground -- */
.gate { background: var(--ground); }
.gate .wordmark { font: 600 13px/1 var(--sans); letter-spacing: 0.02em; color: var(--ink); }
.gate .wordmark .tile { width: 32px; height: 32px; border-radius: 9px; background: var(--primary);
                        color: var(--primary-ink); display: grid; place-items: center; }
.gate .wordmark .tile svg { width: 16px; height: 16px; }
.gate .provider { border-radius: 10px; font: 500 14.5px/1 var(--sans); }
.gate .primary { border-radius: 10px; }
.gate .status { border-radius: 0 10px 10px 0; }
.gate details summary { font: 500 14px/1.3 var(--sans); }

/* -- Get started, ways -- */
ol.steps .step { border-radius: var(--radius); }
.panel.way > header .n { background: var(--raised); color: var(--ink); }
@media (max-width: 880px) { .brand { padding: 10px 12px; } }
@media (max-width: 1100px) {
  .strip { height: auto; min-height: var(--strip); flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
  .strip .topbtn { height: 36px; padding: 0 12px; }
}

/* ---- S60: Verify in the customer's words --------------------------------- */
.every-field { margin-top: 14px; }
.every-field > summary { cursor: pointer; font: 500 13.5px/1.3 var(--sans); color: var(--ink-dim); }
.panel.way details > summary { cursor: pointer; font: 500 14px/1.3 var(--sans); color: var(--ink-dim); margin: 10px 0 4px; }
#connect-url { background: var(--raised); border-radius: 8px; }