/* ForgeOS by Medina19 — commercial surface.
   One stylesheet for the public product site and Mission Control, so the marketing
   surface and the product a customer buys cannot drift apart visually.

   ── Where the colours come from ───────────────────────────────────────────────

   Nowhere in this file. ForgeOS carried a teal-and-green palette of its own until the
   Medina19 platform system was adopted on 2026-08-15 as the rule for every surface. It is
   a Medina19 product, and the one a customer can buy, so it is the surface that had the
   least business looking like something else.

   Everything below is an alias onto medina19-platform-tokens.css, which is a copy of the
   Medina19 authority and is not edited here. This layer exists only to keep the role names
   the eleven pages and Mission Control already use, so adopting the system was a change of
   palette rather than a rewrite of every rule.

   ── Two rules inherited with it ───────────────────────────────────────────────

   Brand is not a state. The old --forge did both: it was the primary button and the "go"
   pill and an added diff line. In the platform system those are different scales, and
   conflating them is how a brand-coloured chip comes to read as a passing check. They are
   split here.

   A fill is not a text colour. --m19-state-danger on its own tint measures 3.29:1, which
   is why anything carrying words reaches for the -ink tone instead. The design-system test
   computes those ratios; nothing here is asserted by eye.

   Every page links medina19-platform-tokens.css immediately before this file, rather than
   @import-ing it here, so the two download in parallel instead of one waiting on the
   other. A page that forgets the link would render with no colour at all, so a test checks
   every page for it. */

:root {
  /* Ink and ground */
  --ink: var(--m19-ink);
  --ink-2: var(--m19-ink-2);
  --ink-3: var(--m19-ink-3);
  --ground: var(--m19-canvas);
  --surface: var(--m19-surface);
  --surface-2: var(--m19-surface-2);
  --line: var(--m19-line);
  --line-2: var(--m19-line-strong);

  /* Brand. Indigo carries the platform: primary action, link, focus, active navigation.
     --forge is the fill; --forge-text is the tone that may carry words. */
  --forge: var(--m19-brand-600);
  --forge-2: var(--m19-brand-700);
  --forge-text: var(--m19-brand-700);
  --forge-tint: var(--m19-brand-050);
  --on-brand: var(--m19-on-accent-light);

  /* State. Each is a fill, a ground and an ink, and they do not substitute for one
     another. --go is what --forge used to double as. */
  --go: var(--m19-state-success);
  --go-ink: var(--m19-state-success-ink);
  --go-tint: var(--m19-state-success-soft);
  --amber: var(--m19-state-warning);
  --amber-ink: var(--m19-state-warning-ink);
  --amber-tint: var(--m19-state-warning-soft);
  --danger: var(--m19-state-danger);
  --danger-ink: var(--m19-state-danger-ink);
  --danger-tint: var(--m19-state-danger-soft);
  --violet: var(--m19-state-info);
  --violet-ink: var(--m19-state-info-ink);
  --violet-tint: var(--m19-state-info-soft);

  --radius: var(--m19-radius-lg);
  --radius-sm: var(--m19-radius-md);
  --shell: min(1200px, calc(100vw - 40px));
  --tap: var(--m19-tap);

  --shadow-1: var(--m19-shadow-xs);
  --shadow-2: var(--m19-shadow-md);

  --font: var(--m19-font);
  --mono: var(--m19-font-mono);

  /* ── ForgeOS visual language ──────────────────────────────────────────────
     Everything below is mixed from platform tokens; nothing names a colour.
     The language: indigo is the system's energy, mono type is the system's
     voice (states, paths, digests — things the system asserts), Inter is the
     human voice. Atmosphere is a low-alpha halo, never a painted background. */
  --halo: color-mix(in srgb, var(--m19-brand-500) 14%, transparent);
  --halo-2: color-mix(in srgb, var(--m19-spectrum-2) 10%, transparent);
  --halo-3: color-mix(in srgb, var(--m19-spectrum-1) 8%, transparent);
  --line-lum: color-mix(in srgb, var(--m19-brand-500) 34%, var(--line));
  --line-lum-soft: color-mix(in srgb, var(--m19-brand-500) 18%, var(--line));
  --surface-raise: color-mix(in srgb, var(--surface) 92%, var(--m19-brand-500) 8%);
  --edge-light: color-mix(in srgb, var(--m19-brand-400) 22%, transparent);
  --go-soft-line: color-mix(in srgb, var(--go) 45%, var(--line));
  --spectrum-line: linear-gradient(90deg,
    var(--m19-spectrum-1), var(--m19-spectrum-2), var(--m19-spectrum-3),
    var(--m19-spectrum-4), var(--m19-spectrum-5));

  /* ── Motif roles ──────────────────────────────────────────────────────────
     The mark's own stops, given meaning. These colour paths, nodes, edges and
     illustration — never text, never large surfaces, never a state pill's word.
     State (pass/fail/wait) stays on the --go/--amber/--danger scales; motif is
     what kind of thing is moving, not whether it succeeded. */
  --motif-exec: var(--m19-spectrum-1);    /* execution, workers, bounded operations */
  --motif-intel: var(--m19-spectrum-2);   /* intelligence, planning, coordination */
  --motif-signal: var(--m19-spectrum-3);  /* intent entering, attention, signal */
  --motif-verified: var(--m19-spectrum-5);/* verification, evidence that passed */
  --motif-exec-soft: color-mix(in srgb, var(--motif-exec) 22%, transparent);
  --motif-intel-soft: color-mix(in srgb, var(--motif-intel) 20%, transparent);
  --motif-signal-soft: color-mix(in srgb, var(--motif-signal) 18%, transparent);
  --topo-dot: color-mix(in srgb, var(--m19-brand-500) 20%, transparent);
  --topo-line: color-mix(in srgb, var(--m19-brand-500) 9%, transparent);
}

/* Dark is not redefined here. Every name above resolves through the platform tokens, which
   define both themes, so a second dark block in this file could only disagree with them. */
:root { color-scheme: light dark; }

* { box-sizing: border-box; }

/* The atmospheric halo extends past the viewport by design; the page itself never
   scrolls sideways. Wide content scrolls inside its own container.

   This has to be declared on the root, not only on `body`. `overflow` set on `body`
   propagates to the viewport only while the root's own overflow is `visible`, and that
   propagation does not happen for `clip` -- so the halo on the closing call-to-action
   (`.aurora::before` bleeds 20% of a 1200px card past each edge) left every desktop page
   scrollable 119px into empty space: nothing looked broken, because `body` really did
   clip the paint, but the document still scrolled. The declaration below is the one that
   makes the sentence above true. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Focus is never removed, only styled. */
:focus-visible { outline: 3px solid var(--forge); outline-offset: 3px; border-radius: 6px; }
/* Regions receive focus programmatically; that must not leave a permanent ring. */
[tabindex="-1"]:focus { outline: none; }

img, svg, video { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--forge);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* ── Type ─────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0 0 .5em; letter-spacing: -.022em; text-wrap: balance; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.034em; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
h3 { font-size: 1.06rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
.eyebrow {
  margin: 0 0 .6em;
  color: var(--forge-text);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
code, .mono { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }

a { color: var(--forge-text); text-underline-offset: .18em; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.shell { width: var(--shell); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
.spread { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; justify-content: space-between; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
section { margin-block: clamp(40px, 7vw, 76px); }

/* ── Chrome ───────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar-inner { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding-block: 10px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: inherit; text-decoration: none; letter-spacing: -.02em; }
.brand small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
/* The Medina19 spectrum M, as a file rather than two gradients and a drawn corner. The
   old mark was a ForgeOS device; this is the platform's, which is the point — ForgeOS is
   a Medina19 product, not a separate brand. */
.brand-mark { width: 30px; height: 30px; flex: none; }

.nav { display: flex; flex-wrap: wrap; gap: 2px; margin-inline-start: auto; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding-inline: 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 620; font-size: .92rem;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current] { color: var(--forge-text); background: var(--forge-tint); }

/* On a phone the seven nav links wrapped onto three rows and, with the theme
   toggle and two account actions under them, consumed the whole first screen
   before any content. Below 860px the header keeps only what someone arriving
   on a phone actually needs -- who this is, and the way in -- on one row. Every
   hidden destination is still in the footer of every page. */
@media (max-width: 859.98px) {
  .topbar-inner { flex-wrap: nowrap; gap: 10px; }
  .topbar-inner .nav,
  .topbar-inner .theme-toggle { display: none; }
  .topbar-inner .row { margin-inline-start: auto; gap: 8px; }
  .topbar-inner .btn { padding-inline: 14px; font-size: .9rem; white-space: nowrap; }
  .brand small { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* Two labels, chosen for different reasons. The primary button's ground is brand-600,
   which is the same indigo in both themes, so its label is fixed white. The destructive
   button's ground is the danger ink, which inverts — dark in light mode, light in dark —
   so its label is --surface, which inverts with it. A fixed white label there measures
   1.94:1 on the dark theme's ink. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding-inline: 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--forge); }
.btn-primary { background: var(--forge); border-color: var(--forge); color: var(--on-brand); }
.btn-primary:hover { background: var(--forge-2); border-color: var(--forge-2); }
.btn-danger { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--surface); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-lg { min-height: 52px; padding-inline: 26px; font-size: 1.02rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ── Surfaces ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.card-quiet { box-shadow: none; background: transparent; }
.card h3 { margin-bottom: .35em; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; }
.panel-body { padding: 18px; }

.note {
  border-left: 4px solid var(--forge);
  background: var(--forge-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  color: var(--ink-2);
}
.note-warn { border-left-color: var(--amber); background: var(--amber-tint); }
.note-risk { border-left-color: var(--danger); background: var(--danger-tint); }

/* ── State pills ──────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 3px 11px;
  font-size: .78rem; font-weight: 700;
  white-space: nowrap;
}
/* The dot is decorative reinforcement; the word inside the pill carries the meaning. */
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill-go { color: var(--go-ink); background: var(--go-tint); border-color: transparent; }
.pill-wait { color: var(--amber-ink); background: var(--amber-tint); border-color: transparent; }
.pill-stop { color: var(--danger-ink); background: var(--danger-tint); border-color: transparent; }
.pill-idle { color: var(--ink-3); background: var(--surface-2); border-color: transparent; }
.pill-info { color: var(--violet-ink); background: var(--violet-tint); border-color: transparent; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.field .hint { font-size: .85rem; color: var(--ink-3); }
input, select, textarea {
  width: 100%; min-width: 0; min-height: var(--tap);
  padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--forge); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 750; }

/* ── Empty, loading, error, degraded ──────────────────────────────────────── */

.state {
  display: grid; gap: 10px; justify-items: start;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 26px 22px;
  background: var(--surface);
  color: var(--ink-2);
}
.state h3 { margin: 0; color: var(--ink); }
.state[data-tone="error"] { border-style: solid; border-color: var(--danger); background: var(--danger-tint); }
.state[data-tone="degraded"] { border-style: solid; border-color: var(--amber); background: var(--amber-tint); }

/* ── Login error ─────────────────────────────────────────────────────────── */

.login-error {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
  color: var(--danger-ink);
  padding: 14px 18px;
  font-size: .92rem;
}
.login-error[hidden] { display: none; }

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  min-height: 14px;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer.site { border-top: 1px solid var(--line); margin-top: clamp(48px, 8vw, 88px); padding-block: 28px 40px; }
footer.site .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
footer.site .foot-label { color: var(--ink-3); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5em; }
footer.site a { display: block; min-height: 34px; color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--forge-text); }

/* ═══ ForgeOS visual language — components ══════════════════════════════════
   The grammar the pages compose from. Cards remain available, but sections
   reach for the form that matches their meaning: a lifecycle is a rail, an
   authority model is a map, system truth is a console line. */

/* ── Atmosphere ───────────────────────────────────────────────────────────── */
/* A halo behind a hero, not a painted background: two low-alpha radials that
   read as depth in both themes and disappear entirely under forced colours. */
.aurora { position: relative; isolation: isolate; }
.aurora::before {
  content: "";
  position: absolute;
  inset: -12% -20% auto;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 18% 12%, var(--halo), transparent 70%),
    radial-gradient(38% 52% at 84% 4%, var(--halo-2), transparent 72%),
    radial-gradient(30% 42% at 55% 88%, var(--halo-3), transparent 75%);
}

/* The one place the Medina19 spectrum appears on a page: a hairline of it. */
.spectrum-rule { height: 2px; border: 0; margin: 0; background: var(--spectrum-line); opacity: .85; }

/* ── The OS frame ─────────────────────────────────────────────────────────── */
/* A ForgeOS surface shown on a page: titlebar, mono truth, layered depth.
   Always labelled as an example when its content is illustrative. */
.os-frame {
  border: 1px solid var(--line-lum-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-2);
  overflow: hidden;
  min-width: 0;
}
.os-frame-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono); font-size: .72rem; color: var(--ink-3);
}
.os-frame-bar .dots { display: inline-flex; gap: 5px; }
.os-frame-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.os-frame-bar .example-tag {
  margin-inline-start: auto;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 1px 9px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .62rem;
  color: var(--ink-3);
}
.os-frame-body { padding: 16px; display: grid; gap: 10px; }
.os-frame figcaption { padding: 0 16px 14px; margin: 0; }

/* ── Execution rail ───────────────────────────────────────────────────────── */
/* A lifecycle as a vertical graph: node, connector, stage, state. The connector
   is drawn by the list, so stages can be added without redrawing anything. */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail > li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 14px;
  padding-block: 12px;
}
.rail > li::before {
  content: "";
  grid-column: 1;
  justify-self: center;
  width: 12px; height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  border: 2px solid var(--forge);
  background: var(--surface);
  z-index: 1;
}
.rail > li::after {
  content: "";
  position: absolute;
  left: 13px; top: 26px; bottom: -12px;
  width: 2px;
  background: var(--line-lum-soft);
}
.rail > li:last-child::after { display: none; }
/* The loop is two rails side by side so it reads as two columns on a wide
   screen. Stacked on a phone they become one vertical sequence, and the first
   one's last item stops drawing its connector -- so the line breaks halfway
   through a process whose whole point is that it is continuous. Below the width
   where .split stops splitting, that connector comes back. */
@media (max-width: 799.98px) {
  /* The connector must cross the stack's own grid gap, not stop 12px in --
     the gap is clamp(20px, 4vw, 44px), so the line reaches through it to the
     next rail's first node. */
  .split > .rail:first-of-type > li:last-child::after {
    display: block;
    bottom: calc(-12px - clamp(20px, 4vw, 44px));
  }
}
.rail > li[data-tone="done"]::before { border-color: var(--go); background: var(--go-tint); }
.rail > li[data-tone="hold"]::before { border-color: var(--amber); background: var(--amber-tint); }
.rail > li[data-tone="quiet"]::before { border-color: var(--line-2); }
.rail .stage { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; min-width: 0; }
.rail .stage strong { letter-spacing: -.01em; }
.rail .stage p { margin: 4px 0 0; color: var(--ink-3); grid-column: 2; }
.rail .why { margin: 4px 0 0; color: var(--ink-3); max-width: 58ch; }

/* ── Console line ─────────────────────────────────────────────────────────── */
/* System truth is set in mono: a state, a path, a branch, a digest. The chip
   never carries colour-as-text — tone arrives through the pill scale. */
.sys {
  font-family: var(--mono);
  font-size: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--m19-radius-xs);
  background: var(--surface-2);
  padding: 2px 8px;
  overflow-wrap: anywhere;
}
.term {
  border: 1px solid var(--line-lum-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: 0 1px 0 var(--edge-light) inset;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.7;
  overflow-x: auto;
}
.term .in::before { content: "❯ "; color: var(--forge-text); font-weight: 700; }
.term .out { color: var(--ink-3); }
.term p { margin: 0; white-space: pre-wrap; }

/* ── Authority map ────────────────────────────────────────────────────────── */
/* The trust architecture as a tree: one trunk, each capability its own branch,
   each grant its own state. Lack of a grant is a visible stop, not a footnote. */
.auth-map { display: grid; gap: 0; min-width: 0; }
.auth-root {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -.01em;
  padding: 10px 0 4px;
}
.auth-branch {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding-block: 9px;
  min-width: 0;
}
/* Box order matters: ::before is the first grid item, so it is the column-one
   tick; the trunk is absolutely positioned and takes no grid cell. */
.auth-branch::before {
  content: "";
  grid-column: 1;
  width: 16px; height: 2px;
  margin-left: 15px;
  background: var(--line-lum-soft);
}
.auth-branch::after {
  content: "";
  position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 2px;
  background: var(--line-lum-soft);
}
.auth-branch:last-child::after { bottom: 50%; }
.auth-branch .cap { font-family: var(--mono); font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.auth-branch .cap small { display: block; font-family: var(--font); font-size: .8rem; font-weight: 400; color: var(--ink-3); }
/* Protection is carried by the pill's word, never by a glyph alone. */
.auth-branch[data-guard="protected"] .cap { color: var(--ink-2); }

/* ── Split section ────────────────────────────────────────────────────────── */
.split {
  display: grid;
  gap: clamp(20px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
  min-width: 0;
}
.split > * { min-width: 0; }

/* ── Fact band ────────────────────────────────────────────────────────────── */
/* Compact truth in a row: label above, statement below. Not metrics theatre —
   each cell is a claim the page can stand behind. */
.facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div { background: var(--surface); padding: 16px 18px; min-width: 0; }
.facts .k { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.facts .v { font-weight: 700; letter-spacing: -.01em; margin: 0; }
.facts .v.mono { font-family: var(--mono); font-weight: 600; font-size: .9rem; }

/* ── Luminous panel ───────────────────────────────────────────────────────── */
.panel-lum {
  border-color: var(--line-lum-soft);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-1);
}
.panel-lum > .panel-head { background: var(--surface-raise); }

/* ── Topology ground ──────────────────────────────────────────────────────── */
/* A faint node field and dimensional grid behind a section that shows the
   system working. Pure CSS, token-mixed, gone under forced colours. Readability
   first: the dots sit far below text contrast and never carry meaning. */
.topo { position: relative; isolation: isolate; }
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(var(--topo-dot) 1px, transparent 1.5px),
    linear-gradient(var(--topo-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--topo-line) 1px, transparent 1px);
  background-size: 28px 28px, 112px 112px, 112px 112px;
  mask-image: radial-gradient(75% 90% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 90% at 50% 40%, black 30%, transparent 100%);
}

/* ── Nodes, edges, gates, scopes ──────────────────────────────────────────── */
/* The pieces every ForgeOS diagram is assembled from. A node is a point in the
   execution topology; its ring says what kind of thing it is (motif), its fill
   says whether it has happened (state scale). */
.node {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--motif-exec);
  background: var(--surface);
  flex: none;
}
.node[data-motif="intel"] { border-color: var(--motif-intel); }
.node[data-motif="signal"] { border-color: var(--motif-signal); }
.node[data-motif="verified"] { border-color: var(--go); background: var(--go-tint); }
.node[data-motif="hold"] { border-color: var(--amber); background: var(--amber-tint); }
.node[data-motif="quiet"] { border-color: var(--line-2); }

/* A luminous execution edge. data-live gets the flowing dash of the motion
   identity; without it the edge is a settled, completed path. */
.edge {
  height: 2px;
  border: 0;
  margin: 0;
  flex: 1 1 20px;
  min-width: 14px;
  background: linear-gradient(90deg, var(--motif-intel-soft), var(--motif-exec));
  background-size: 200% 100%;
}
.edge[data-tone="quiet"] { background: var(--line-lum-soft); }
.edge[data-tone="verified"] { background: linear-gradient(90deg, var(--motif-exec-soft), var(--go)); }

/* A gate: authority made visible. Closed is a solid boundary the path stops
   at; open leaves a passage exactly one path wide. The word beside it carries
   the meaning; the geometry reinforces it. */
.gate {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  align-items: stretch;
  height: 26px;
  flex: none;
}
.gate i { width: 4px; border-radius: 2px; background: var(--amber); }
.gate[data-open] i { background: var(--go); }
.gate[data-open] i:nth-child(2) { visibility: hidden; }

/* A scoped work region: one worker's claimed paths, bounded. The boundary is
   the point — two regions never overlap, and the dash says "claimed, not owned". */
.scope-region {
  border: 1.5px dashed var(--line-lum);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.scope-region > .scope-name { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 700; font-size: .9rem; }
.scope-region[data-motif="hold"] { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }

/* A lane: node — edge — content, composed inline. The diagram grammar. */
.lane { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lane .sys { flex: none; }

/* ── Evidence graph ───────────────────────────────────────────────────────── */
/* A claim connected to its proof. Verified links resolve green; an unchecked
   link stays visibly open and says so in words. Never implies evidence that
   does not exist — the unchecked state is a first-class look, not an absence. */
.evi { display: grid; gap: 0; min-width: 0; }
.evi-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding-block: 10px;
}
.evi-step::before {
  content: "";
  grid-column: 1;
  justify-self: center;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--go);
  background: var(--go-tint);
  z-index: 1;
}
.evi-step::after {
  content: "";
  position: absolute;
  left: 14px; top: 24px; bottom: -10px;
  width: 2px;
  background: color-mix(in srgb, var(--go) 40%, var(--line));
}
.evi-step:last-child::after { display: none; }
.evi-step[data-v="open"]::before { border-color: var(--line-2); background: var(--surface); }
.evi-step[data-v="open"]::after { background: var(--line-2); }
.evi-step[data-v="hold"]::before { border-color: var(--amber); background: var(--amber-tint); }
.evi-step .what { font-weight: 650; overflow-wrap: anywhere; }
.evi-step .what small { display: block; font-weight: 400; color: var(--ink-3); }

/* ── Product frame ────────────────────────────────────────────────────────── */
/* Real product imagery, framed and annotated rather than pasted. The bar names
   the surface; the annotation strip says what the reader is looking at. */
.shot-frame {
  border: 1px solid var(--line-lum-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-2);
  overflow: hidden;
  min-width: 0;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-3);
}

/* ── Icons ────────────────────────────────────────────────────────────────── */
/* The ForgeOS icon family: stroke geometry derived from the mark's chevrons,
   drawn in currentColor so it inherits text tone and never fights contrast. */
/* The symbol definitions are inlined per page (a copy of
   assets/brand/forgeos-icons.svg, which stays the canonical source) so that
   icon references are local fragments rather than cross-file URLs. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 18px; height: 18px;
  flex: none;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-lg { width: 24px; height: 24px; }

/* ── Motion identity ──────────────────────────────────────────────────────── */
/* Motion communicates state: an edge flows only while something is genuinely
   in progress in the story being told; a hold node breathes while a decision
   waits. Both run only for readers who have not asked for reduced motion, and
   the global reduce block flattens everything regardless. */
@media (prefers-reduced-motion: no-preference) {
  .edge[data-live] { animation: edge-flow 2.2s linear infinite; }
  .node[data-motif="hold"][data-live] { animation: node-breathe 2.4s ease-in-out infinite; }
  @keyframes edge-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
  @keyframes node-breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--amber-tint); }
    50% { box-shadow: 0 0 0 5px var(--amber-tint); }
  }
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
/* Content is complete without JS; the observer only adds the entrance. The
   global reduced-motion block flattens the transition to imperceptible. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ── Status center ────────────────────────────────────────────────────────── */
.status-hero {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line-lum-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-1);
}
.status-matrix { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.status-cell {
  display: grid; gap: 6px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 13px 15px;
  min-width: 0;
}
.status-cell[data-state="operational"] { border-left-color: var(--go); }
.status-cell[data-state="degraded"] { border-left-color: var(--amber); }
.status-cell[data-state="down"] { border-left-color: var(--danger); }
.status-cell[data-state="absent"] { border-left-color: var(--line-2); }
.status-cell strong { letter-spacing: -.01em; }
.status-cell .consequence { margin: 0; font-size: .84rem; color: var(--ink-3); }

/* ── Access path (pricing) ────────────────────────────────────────────────── */
.access-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 16px;
  padding-block: 14px;
}
.access-step .n {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line-lum);
  border-radius: 50%;
  background: var(--forge-tint);
  color: var(--forge-text);
  font-family: var(--mono); font-weight: 700; font-size: .85rem;
}
.access-step h3 { margin: 3px 0 0; }
.access-step p { grid-column: 2; margin: 4px 0 0; color: var(--ink-3); }

/* ── Login environment ────────────────────────────────────────────────────── */
.login-scene {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(16px, 4vw, 48px);
}
.login-card {
  width: min(420px, 100%);
  border: 1px solid var(--line-lum-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--edge-light) inset, var(--shadow-2);
  padding: clamp(22px, 4vw, 32px);
}
.login-side { width: min(420px, 100%); }

/* ── 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;
  }
}

/* ── Forced colours ───────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  * { box-shadow: none !important; backdrop-filter: none !important; }
  .aurora::before, .spectrum-rule, .topo::before { display: none; }
  .node, .gate i, .scope-region, .evi-step::before, .shot-frame { border: 1px solid CanvasText; }
  .edge, .evi-step::after { background: CanvasText; }
  .card, .panel, .note, .state, .pill, .skip-link, .topbar,
  .os-frame, .term, .sys, .facts > div, .status-cell, .status-hero, .login-card { border: 1px solid CanvasText; }
  .rail > li::before, .rail > li::after,
  .auth-branch::before, .auth-branch::after { background: CanvasText; border-color: CanvasText; }
  .btn, input, select, textarea { border: 1px solid ButtonBorder; forced-color-adjust: none; color: ButtonText; background: ButtonFace; }
  .brand-mark { background: none; border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; }
  .topbar, .skip-link, .btn, .nav { display: none !important; }
  .shell { width: auto; }
  .card, .panel, .note, .state { border: 1px solid #000; break-inside: avoid; box-shadow: none !important; }
  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; word-break: break-all; }
}

/* ── Spacing and layout utilities ─────────────────────────────────────────────
   The surfaces ship a strict style-src, which drops style attributes entirely, so
   layout adjustments live here as classes rather than inline. */

.mt-sm { margin-top: 12px; }
.mt { margin-top: 20px; }
.mt-lg { margin-top: 28px; }
.mt-xl { margin-top: 36px; }
.pt-hero { padding-block: clamp(32px, 6vw, 64px) 0; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.row-center { justify-content: center; }
.row-end { justify-content: flex-end; }
.flush { padding: 0; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.cta-card { text-align: center; padding: clamp(28px, 5vw, 52px); }
.table-caption { padding: 12px 14px; text-align: left; }
.gap-sm { --gap: 12px; }
.gap-md { --gap: 14px; }
.gap-lg { --gap: 16px; }
.gap-xl { --gap: 18px; }
.no-margin { margin: 0; }

/* Skeleton widths. These sit here rather than only in the Mission Control sheet because
   the public status page shows a loading state and does not load that sheet. */
.skeleton-60 { width: 60%; }
.skeleton-85 { width: 85%; }

/* A named thing on the left, its state on the right. Used by the status page; it wraps to
   a single column rather than letting the label and the pill collide on a phone. */
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.status-row:last-child { border-bottom: 0; }
.status-row p { margin: 4px 0 0; }

/* A document that is not in force. Deliberately loud and placed before the content:
   a reader must not be able to quote a draft as though it bound anyone. It keeps its
   meaning without colour, for forced-colors and print. */
.draft-banner {
  border: 3px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-tint);
  padding: 18px 20px;
  margin-block: 20px;
}
.draft-banner h2 { margin: 0 0 .4em; font-size: 1.05rem; letter-spacing: .01em; }
.draft-banner p { margin: 0 0 .5em; }
.draft-banner p:last-child { margin-bottom: 0; }
.draft-tag {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media print {
  .draft-banner { border: 3px solid #000; }
}

/* The hero shows the product itself: one real screenshot, framed quietly. */
.os-hero-shot { margin: 0; }
.os-hero-shot img { width: 100%; height: auto; border: 1px solid var(--m19-line);
  border-radius: var(--m19-radius-lg, 14px); box-shadow: var(--m19-shadow-md);
  background: var(--m19-surface); }

/* ── Typing on a phone ──────────────────────────────────────────────────────
 *
 * iOS Safari zooms the whole page when a field is focused whose computed
 * font-size is under 16px, and this design's base text is 14px -- so tapping
 * any input zoomed in, and the page stayed zoomed afterwards. Reported as
 * "every time i use it zooms in and then over highlights": the second half is
 * the first half, a focus ring magnified by a zoom nobody asked for.
 *
 * Sixteen pixels is the exact threshold, and only where a finger is doing the
 * tapping -- the desktop scale is deliberate and stays as it is. Nothing else
 * about the type scale changes, so this cannot drift with the tokens.
 */
@media (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="url"], input[type="tel"],
  input[type="number"], input:not([type]), textarea, select {
    /* `!important` on purpose, and checked rather than assumed: the first
     * version of this rule was a bare element selector, and every page styles
     * its own fields through a class -- `.bd textarea { font: inherit }`,
     * `.cw-input`, and so on. A media query adds no specificity, so the class
     * won and the field still computed 15px. Measured on the live site: the
     * query matched, and the page zoomed anyway.
     *
     * This is not a design preference to be outranked by one. It is the
     * platform's threshold for not zooming the page out from under somebody,
     * it applies only where a finger is doing the tapping, and a page that
     * wants different type on a phone can still say so at this width. */
    font-size: 16px !important;
  }
}

/* `hidden` must win over a class that sets `display`; the UA rule
   `[hidden] { display: none }` loses to any class selector. */
.gate[hidden] { display: none; }