/* On Contract — the workspace, themed to the brand.
 *
 * Authority: ../../wiki/product/on-contract-guidelines.md v1.0 §5.
 * "The base is a document. The color is a signal." Dark night-ops world; the
 * record is warm paper — the one light object on the page.
 *
 * This file keeps its ORIGINAL token names so the ~180 var() call sites below
 * are untouched. Only the values changed. The mapping from the retired
 * approach-plate direction:
 *
 *   --paper   was chart white  -> --night    the page ground
 *   --paper-2 was chart white2 -> --night2   raised panels
 *   --ink     was near-black   -> --chalk    primary text
 *   --ink-2   was slate        -> --fog      secondary text
 *   --rule    was chart rule   -> --hairline2
 *   --rule-2  was light rule   -> --hairline
 *   --band    was band fill    -> --night2
 *   --chart   was FLIP blue    -> --blue     the ONLY accent
 *   --magenta was aero magenta -> --red      out of tolerance (status, reserved)
 *
 * Dark is the default and only mode, so the prefers-color-scheme override that
 * used to live here is gone. A second theme would reintroduce the light
 * chart-paper world this brand retired.
 */

:root {
  --paper:    #0A0D11;   /* night — the ground */
  --paper-2:  #0F141A;   /* night2 — raised panels */
  --ink:      #DFE3E7;   /* chalk */
  --ink-2:    #8A939C;   /* fog */
  --rule:     #333D47;   /* hairline2 — structure carries the design */
  --rule-2:   #1F262E;   /* hairline */
  --chart:    #6FA0D6;   /* the only accent: links, focus, verify, in-tolerance */
  --magenta:  #C25A52;   /* status red: out of tolerance. Reserved, never decorative */
  --band:     #0F141A;

  /* the warm document, for the record artifact only */
  --form:      #E9E4D8;
  --form-line: #C8C0AC;
  --pen:       #2A2B28;
  --pen-soft:  #6B6A60;

  /* status, reserved */
  --green: #4E9A6A;
  --amber: #C79738;

  /* two voices: sans is anything a human says, mono is what the system asserts */
  --f-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 68rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  /* the faint grid of a chart, kept almost subliminal */
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: -1px -1px;
}
main { display: flex; flex-direction: column; }
/* Two flexbox rules bite here, and only the pair fixes it. The ride page
   measured 380px inside a 360px phone and scrolled sideways.

   `min-width: 0` — a flex item defaults to `min-width: auto`, which resolves
   to its MIN-CONTENT width, so one unbreakable descendant widens the whole
   page instead of scrolling inside its own box.

   `width: 100%` — .wrap sets `margin-inline: auto` to centre itself, which is
   right in a block layout. On a FLEX item an auto cross-axis margin cancels
   the default stretch, so the item sizes to fit-content — min-content again.
   Stating the width restores stretch; max-width still caps it and the auto
   margins still centre it on a wide screen. */
main > * { min-width: 0; width: 100%; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }

/* ── masthead ─────────────────────────────────────────────────────── */

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
/* flex-wrap is load-bearing, not tidiness. Signed OUT the nav is display:none
   and the account chip is hidden, so this row fits anything. Signed IN both
   appear, the row measures ~497px, and with no wrapping every viewport
   narrower than that -- which is every phone -- scrolled sideways by up to
   137px while the masthead stayed put. Guarded by
   tests/test_layout.py::test_no_member_page_scrolls_sideways_on_a_phone. */
.masthead-in {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; row-gap: .5rem;
  padding-block: .75rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand-mark {
  font: 700 .8rem/1 var(--f-mono);
  border: 1.5px solid var(--ink); padding: .35rem .4rem; letter-spacing: .04em;
}
.brand-name {
  font: 650 1.12rem/1 var(--f-display);
  letter-spacing: -.015em; text-transform: none;
}
.masthead .brand-mark { display: inline-block; }
.brand-sub {
  margin: 0; margin-left: auto;
  font: 500 .7rem/1 var(--f-mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .08em;
}
@media (max-width: 46rem) { .brand-sub { display: none; } }

/* A compact public nav on every page. The pilot-only tools remain behind the
   account menu, so a visitor never sees a menu full of sign-in walls. */
.masthead-nav { display: flex; gap: 1.1rem; margin-left: 1.4rem; flex-wrap: wrap; }
.masthead-nav a {
  color: var(--ink-2); text-decoration: none;
  font: 600 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: .2rem; border-bottom: 1.5px solid transparent;
}
.masthead-nav a:hover { color: var(--ink); }
.masthead-nav a.on { color: var(--ink); border-bottom-color: var(--chart); }
@media (max-width: 46rem) { .masthead-nav { margin-left: .8rem; gap: .7rem; } }

/* ── buttons ──────────────────────────────────────────────────────── */

.btn {
  font: 600 .75rem/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .1em;
  padding: .6rem .9rem; text-decoration: none; display: inline-block;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: wait; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--chart); border-color: var(--chart); }

:where(a, button, .drop):focus-visible {
  outline: 2px solid var(--chart); outline-offset: 3px;
}

/* ── hero ─────────────────────────────────────────────────────────── */

.hero { order: 3; padding-block: 2.75rem 3.5rem; border-top: 1px solid var(--rule-2); }

.eyebrow {
  margin: 0 0 1rem; font: 600 .7rem/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .16em; color: var(--chart);
}
.eyebrow::before { content: "▸ "; }

h1 {
  margin: 0 0 1.25rem;
  font: 700 clamp(2.4rem, 6.5vw, 4.2rem)/0.98 var(--f-display);
  letter-spacing: -0.02em; text-transform: uppercase;
}
h1 em { font-style: normal; color: var(--chart); }

.lede {
  margin: 0 0 2.5rem; max-width: 46rem;
  font-size: 1.075rem; color: var(--ink-2);
}

/* ── the plate: the signature element ─────────────────────────────── */

.plate {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-bottom: 1.25rem;
}
.plate-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.plate-title {
  font: 700 .78rem/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .12em;
}
.plate-note, .cmd-label {
  font: 500 .68rem/1 var(--f-mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .07em;
}

.bands { padding: .5rem 0; }
.loading { margin: 0; padding: 1.5rem 1rem; color: var(--ink-2); font: 500 .8rem var(--f-mono); }

.band {
  display: grid;
  grid-template-columns: 7.5rem 1fr 6rem;
  align-items: center; gap: 1.25rem;
  padding: .85rem 1rem;
  border-bottom: 1px dashed var(--rule-2);
}
.band:last-child { border-bottom: 0; }

.band-name {
  font: 600 .76rem/1.2 var(--f-display);
  text-transform: uppercase; letter-spacing: .08em;
}
.band-src {
  display: block; margin-top: .2rem;
  font: 400 .6rem/1.3 var(--f-mono); color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
}

/* The gauge, and the one thing it must not get wrong.
 *
 * Two different quantities live here and they must not share a scale:
 *   - the WINDOW is the tolerance, positioned on an axis in ft/deg/kt
 *   - the FILL is what fraction of the ride was spent inside that window
 *
 * So the fill fills the window, never the whole track. A 90% result reads as
 * "the window is 90% full", which is what it means. Letting the fill run the
 * length of an axis labelled in feet would put "90%" next to "6000 ft" and
 * say something false.
 *
 * The worst excursion sits OUTSIDE the window at its real value, which is the
 * only mark on here that is positioned by magnitude.
 */
.gauge { position: relative; height: 2.4rem; }
.gauge-track {
  position: absolute; inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%);
  background: var(--rule-2);
}
/* the tolerance window: a real target, not a hairline */
.gauge-in {
  position: absolute; top: 50%; height: 1.15rem; transform: translateY(-50%);
  background: var(--band);
  border-left: 2px solid var(--ink-2);
  border-right: 2px solid var(--ink-2);
  overflow: hidden;
}
.gauge-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--chart);
  transition: width .7s cubic-bezier(.2,.7,.2,1);
}
.band.out .gauge-fill { background: var(--magenta); }

/* worst excursion — the only mark placed by magnitude */
.gauge-worst {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 1.75rem; background: var(--magenta); display: none;
}
.gauge-worst::after {
  content: attr(data-v);
  position: absolute; top: -0.95rem; left: 50%; transform: translateX(-50%);
  font: 600 .58rem/1 var(--f-mono); color: var(--magenta); white-space: nowrap;
}
.band.out .gauge-worst { display: block; }

.tick {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 0; height: 0;
}
.tick span {
  position: absolute; top: .75rem; left: 50%; transform: translateX(-50%);
  font: 500 .6rem/1 var(--f-mono); color: var(--ink-2); white-space: nowrap;
}

.band-val {
  text-align: right;
  font: 600 1.35rem/1 var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--rule);
}
.band.scored .band-val { color: var(--chart); }
.band.out .band-val { color: var(--magenta); }
.band-val small {
  display: block; margin-top: .25rem;
  font: 400 .6rem/1 var(--f-mono); color: var(--ink-2);
}

.plate-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--rule);
  background: var(--paper-2); min-height: 2.9rem;
}
.plate-foot .idle {
  font: 500 .7rem/1.4 var(--f-mono); color: var(--ink-2);
}
.verdict {
  font: 700 .82rem/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .12em;
}
.verdict.pass { color: var(--chart); }
.verdict.fail { color: var(--magenta); }
.watchlink {
  font: 600 .74rem/1 var(--f-mono); color: var(--ink);
  text-decoration: none; border-bottom: 1.5px solid var(--chart);
  padding-bottom: 2px;
}

/* ── drop ─────────────────────────────────────────────────────────── */

.drop {
  border: 1.5px dashed var(--rule);
  padding: 2rem 1.5rem; text-align: center; cursor: pointer;
  background: transparent; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--chart); background: var(--paper-2); }
.drop.busy { opacity: .55; pointer-events: none; }
.drop-main {
  margin: 0 0 .35rem;
  font: 600 1rem/1.3 var(--f-display);
  text-transform: uppercase; letter-spacing: .06em;
}
.drop-main code { font: inherit; color: var(--chart); }
.drop-sub { margin: 0; font-size: .85rem; color: var(--ink-2); }

.err {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-left: 3px solid var(--magenta); background: var(--paper-2);
  font-size: .9rem;
}

/* ── strip ────────────────────────────────────────────────────────── */

.strip { border-block: 1px solid var(--rule); background: var(--paper-2); }
.cols {
  display: grid; gap: 2.5rem; padding-block: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cols h2 {
  margin: 0 0 .6rem;
  font: 700 .95rem/1.2 var(--f-display);
  text-transform: uppercase; letter-spacing: .1em;
}
.cols p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ── enrol ────────────────────────────────────────────────────────── */

.enrol { order: 1; padding-block: 5rem 3.5rem; background: var(--paper); }
.mission-entry { display: grid; grid-template-columns: 1.12fr .88fr; gap: 4.5rem; align-items: center; }
.mission-entry-copy h1 { margin: 0 0 1.4rem; max-width: 13ch; }
.mission-entry-copy > p:not(.eyebrow):not(.entry-fine) { max-width: 50ch; margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.mission-entry-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.entry-fine { max-width: 56ch; margin: 1.1rem 0 0; color: var(--ink-2); font: 500 .68rem/1.55 var(--f-mono); }
.mission-card { border: 1px solid var(--rule); background: var(--paper-2); box-shadow: 1rem 1rem 0 rgba(0, 0, 0, .2); }
.mission-card-head, .mission-card-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; font: 600 .64rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.mission-card-head { border-bottom: 1px solid var(--rule); color: var(--ink); }
.mission-card-head span:last-child, .mission-card-foot { color: var(--ink-2); }
.mission-card-flow { list-style: none; margin: 0; padding: .45rem 1rem; }
.mission-card-flow li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; padding: 1.1rem 0; border-bottom: 1px dashed var(--rule); }
.mission-card-flow li:last-child { border-bottom: 0; }
.mission-card-flow b { color: var(--chart); font: 600 .7rem/1.4 var(--f-mono); }
.mission-card-flow span { color: var(--ink-2); font-size: .8rem; line-height: 1.45; }
.mission-card-flow strong { display: block; margin-bottom: .18rem; color: var(--ink); font: 700 .9rem/1 var(--f-display); text-transform: uppercase; }
.mission-card-foot { border-top: 1px solid var(--rule); font-size: .58rem; }
.preview-intro { margin-top: 3.75rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: flex; gap: 1.5rem; align-items: baseline; }
.preview-intro .cmd-label { flex: none; margin: 0; }
.preview-intro p:last-child { max-width: 57ch; margin: 0; color: var(--ink-2); font-size: .78rem; }
.fine { font-size: .82rem; }
@media (max-width: 46rem) {
  .mission-entry { grid-template-columns: 1fr; gap: 2.5rem; }
  .preview-intro { display: block; }
  .preview-intro p:last-child { margin-top: .65rem; }
}
.text-link {
  display: block; margin-top: .85rem; padding: 0; border: 0; background: none;
  color: var(--ink-2); font: 500 .72rem/1.3 var(--f-mono);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.text-link:hover { color: var(--chart); }

/* ── customer workspace ─────────────────────────────────────────── */

/* The masthead's signed-in state is decided by the class the server puts on
   <body>, never by a fetch.

   It used to be the other way round: "Sign in" rendered visible and the
   callsign chip carried `hidden`, and only app.js swapped them once
   /api/account/me came back. Measured on the live site, that showed a signed-in
   pilot a SIGN IN BUTTON for 0.5 to 0.8 seconds on every single page change.
   Page after page, the masthead said signed out and then said signed in --
   which is exactly what "it's like it's logging in and out each page change"
   describes. */
#account-chip { display: none; }
body.is-signed-in #account-chip { display: inline-flex; }
body.is-signed-in #account-open { display: none; }

.account-chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .75rem;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
  font: 600 .72rem/1 var(--f-mono); cursor: pointer;
}
.account-chip:hover { border-color: var(--chart); }

.customer {
  padding-block: 3.5rem; border-block: 1.5px solid var(--ink);
  background: var(--paper);
}
.customer-head {
  display: flex; justify-content: space-between; align-items: end; gap: 2rem;
  margin-bottom: 1.5rem;
}
.customer-head h2 {
  margin: 0 0 .45rem; font: 700 clamp(1.8rem, 4vw, 2.8rem)/1 var(--f-display);
  text-transform: uppercase;
}
.customer-head p:not(.eyebrow) { margin: 0; color: var(--ink-2); }
.service-note {
  margin: 0 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--magenta);
  background: var(--paper-2); font: 500 .76rem/1.5 var(--f-mono);
}
.learning-map {
  margin-bottom: 1rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.learning-map .card-head span:last-child {
  color: var(--ink-2);
  font-weight: 500;
}
.learning-overview, .learning-boundary {
  max-width: 74ch;
  margin: 0;
  color: var(--ink-2);
  font-size: .86rem;
}
.learning-overview { padding: 1rem 1rem .75rem; }
.learning-boundary {
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--rule-2);
  font: 500 .7rem/1.5 var(--f-mono);
}
.learning-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
}
.learning-node {
  position: relative;
  min-width: 0;
  padding: .8rem .9rem .9rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.learning-node + .learning-node { border-left: 0; }
.learning-node + .learning-node::before {
  content: "›";
  position: absolute;
  z-index: 1;
  top: -.8rem;
  left: -.55rem;
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--chart);
  font: 700 .9rem/1 var(--f-mono);
}
.learning-label {
  margin: 0 0 .55rem;
  color: var(--chart);
  font: 600 .59rem/1 var(--f-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.learning-node h3 {
  min-height: 2.2em;
  margin: 0 0 .55rem;
  font: 700 .92rem/1.12 var(--f-display);
  text-transform: uppercase;
}
.learning-learn {
  min-height: 6.2em;
  margin: 0;
  color: var(--ink-2);
  font-size: .75rem;
  line-height: 1.45;
}
.learning-node details { margin-top: .8rem; border-top: 1px dashed var(--rule); padding-top: .65rem; }
.learning-node summary {
  cursor: pointer;
  color: var(--ink);
  font: 600 .62rem/1.35 var(--f-mono);
  letter-spacing: .03em;
}
.learning-node details p { margin: .65rem 0 0; color: var(--ink-2); font-size: .72rem; line-height: 1.45; }
.learning-node details .learning-before { color: var(--ink); font: 500 .68rem/1.45 var(--f-mono); }
.server-card {
  margin-bottom: 1rem; border: 1.5px solid var(--ink); background: var(--paper-2);
  padding: 1.15rem;
}
.server-card-head {
  display: flex; align-items: start; justify-content: space-between; gap: 1rem;
}
.server-card-head h3 {
  margin: .35rem 0 0; font: 700 1.35rem/1.1 var(--f-display); text-transform: uppercase;
}

.server-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.server-actions span { font: 500 .7rem/1.4 var(--f-mono); color: var(--ink-2); }
.artifacts-card { margin-bottom: 1.25rem; }
.artifacts-card ol { margin: .8rem 0 0; padding-left: 1.4rem; font: 500 .72rem/1.7 var(--f-mono); }
.artifacts-card .cmd-label { margin-top: 1rem; }
.flight-events li, #artifacts-list li { margin: .35rem 0; }

/* The review is the reason to open this card, so it leads and gets the solid
   button; the file list below it is evidence, not the destination. */
.review-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .8rem;
}
.review-row .fine { margin: 0; color: var(--ink-2); }

.flight-party, .join-flight {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
  padding-top: 1rem;
}
.flight-party p { margin: .25rem 0; }
.flight-party ol { margin: .5rem 0 0; padding-left: 1.4rem; font: 500 .72rem/1.7 var(--f-mono); }
.flight-party code { display: block; max-width: 20rem; overflow-wrap: anywhere; margin-top: .65rem; }
.join-flight { justify-content: flex-start; align-items: center; margin-bottom: 1.25rem; }
.join-flight label { font: 500 .7rem/1.3 var(--f-mono); text-transform: uppercase; }
.join-flight input { min-width: min(25rem, 50vw); }
.server-state {
  padding: .42rem .6rem; border: 1px solid var(--amber); color: var(--amber);
  font: 700 .65rem/1 var(--f-mono); text-transform: uppercase;
}
.server-state.is-ready { border-color: var(--green); color: var(--green); }
.server-mission { margin: .9rem 0; color: var(--ink-2); }
.server-details {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0;
  border-top: 1px solid var(--rule);
}
.server-details div { min-width: 0; padding: .75rem .75rem 0 0; }
.server-details dt {
  color: var(--ink-2); font: 500 .62rem/1.3 var(--f-mono); text-transform: uppercase;
}
.server-details dd {
  margin: .22rem 0 0; overflow-wrap: anywhere; font: 600 .72rem/1.35 var(--f-mono);
}
.customer-grid {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem;
}
.journey-card, .action-card, .customer-submit {
  border: 1.5px solid var(--ink); background: var(--paper);
}
.card-head {
  display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
  font: 600 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
}
.journey { list-style: none; padding: 0; margin: 0; }
.journey-step {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: center;
  gap: .75rem; padding: .78rem 1rem; border-bottom: 1px dashed var(--rule-2);
}
.journey-step:last-child { border-bottom: 0; }
.journey-num {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem;
  border: 1px solid var(--rule); font: 600 .65rem/1 var(--f-mono);
}
.journey-step strong {
  display: block; font: 600 .76rem/1.25 var(--f-display);
  text-transform: uppercase; letter-spacing: .05em;
}
.journey-step small { display: block; margin-top: .15rem; color: var(--ink-2); font-size: .72rem; }
.journey-state {
  color: var(--ink-2); font: 500 .6rem/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: .06em;
}
.journey-step.is-complete .journey-num { border-color: var(--chart); background: var(--chart); color: var(--paper); }
.journey-step.is-complete .journey-state { color: var(--chart); }
.journey-step.is-blocked .journey-num, .journey-step.is-blocked .journey-state { color: var(--magenta); border-color: var(--magenta); }
.journey-step.is-locked { opacity: .5; }

.action-card { padding: 1.35rem; }
.action-card h3, .customer-submit h3 {
  margin: .45rem 0 .6rem; font: 700 1.25rem/1.1 var(--f-display);
  text-transform: uppercase;
}
.action-card > p:not(.cmd-label), .customer-submit p { color: var(--ink-2); font-size: .86rem; }
.action-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-block: 1.25rem; }
.pilot-status { margin: 1.5rem 0 0; border-top: 1px solid var(--rule); }
.pilot-status div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; }
.pilot-status dt { color: var(--ink-2); font: 500 .66rem/1.3 var(--f-mono); text-transform: uppercase; }
.pilot-status dd { margin: 0; text-align: right; font: 600 .7rem/1.3 var(--f-mono); }

.customer-submit {
  display: grid; grid-template-columns: 1fr minmax(15rem, .65fr); align-items: center;
  gap: 2rem; padding: 1.25rem; margin-top: 1rem;
}
.customer-submit p { margin: 0; }
.compact-drop {
  padding: 1.25rem; border: 1.5px dashed var(--rule); text-align: center;
  font: 600 .72rem/1.4 var(--f-mono); cursor: pointer;
}
.compact-drop:hover { border-color: var(--chart); background: var(--paper-2); }
.compact-drop code { color: var(--chart); }
.compact-drop.disabled { opacity: .45; cursor: not-allowed; }
.compact-drop.busy { opacity: .55; pointer-events: none; }
.customer-pass { border-color: var(--chart); }

/* ── account and brief dialogs ──────────────────────────────────── */

dialog {
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink);
  box-shadow: .75rem .75rem 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
dialog::backdrop { background: rgb(10 16 20 / 68%); backdrop-filter: blur(2px); }
.account-dialog { width: min(34rem, calc(100% - 2rem)); padding: 0; }
.brief-dialog { width: min(58rem, calc(100% - 2rem)); max-height: calc(100vh - 3rem); padding: 1.5rem; }
.dialog-close {
  position: absolute; top: .65rem; right: .75rem; border: 0; background: none;
  color: var(--ink); font: 400 1.6rem/1 var(--f-body); cursor: pointer;
}
.auth-intro { padding: 1.5rem 1.5rem 1.25rem; }
.auth-intro .brand-mark { display: inline-block; margin-bottom: 1.4rem; }
.auth-intro h2, .brief-dialog h2 {
  margin: 0 0 .65rem; font: 700 2rem/1 var(--f-display); text-transform: uppercase;
}
.auth-intro > p:last-child { margin: 0; color: var(--ink-2); font-size: .88rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--rule); }
.auth-tabs button {
  padding: .8rem; border: 0; border-right: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink-2); cursor: pointer;
  font: 600 .72rem/1 var(--f-mono); text-transform: uppercase;
}
.auth-tabs button:last-child { border-right: 0; }
.auth-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px var(--chart); }
.auth-form { display: grid; gap: .9rem; padding: 1.4rem 1.5rem 1.5rem; }
.auth-form label { color: var(--ink-2); font: 600 .66rem/1.2 var(--f-mono); text-transform: uppercase; }
.auth-form input {
  display: block; width: 100%; margin-top: .35rem; padding: .7rem .75rem;
  border: 1px solid var(--rule); border-radius: 0; background: var(--paper);
  color: var(--ink); font: 400 .9rem/1.3 var(--f-body);
}
.auth-form input:focus { outline: 2px solid var(--chart); outline-offset: 1px; }
.auth-submit { width: 100%; padding-block: .8rem; }
.auth-error { margin: 0; color: var(--magenta); font-size: .8rem; }
.auth-fine { margin: 0; color: var(--ink-2); font-size: .72rem; }
.brief-body {
  max-height: calc(100vh - 14rem); overflow: auto; margin-top: 1rem;
  padding: 1rem; border: 1px solid var(--rule); background: var(--paper-2);
}
.brief-body pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 .76rem/1.55 var(--f-mono);
}
.briefing-intro {
  padding: 1rem;
  border-left: 3px solid var(--chart);
  background: var(--ink);
  color: var(--paper);
}
.briefing-intro p { margin: 0; font-size: .9rem; line-height: 1.5; }
.briefing-kicker {
  margin-bottom: .65rem !important;
  color: var(--chart);
  font: 600 .64rem/1 var(--f-mono) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.briefing-route, .briefing-panel, .briefing-safe, .briefing-record, .briefing-full {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.briefing-route h3, .briefing-panel h3, .briefing-safe h3, .briefing-record h3 {
  margin: 0;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font: 600 .64rem/1 var(--f-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.briefing-segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: .8rem;
}
.briefing-segments li { position: relative; min-width: 0; padding: .25rem .6rem .25rem 0; }
.briefing-segments li + li { padding-left: .6rem; border-left: 1px solid var(--rule); }
.briefing-phase { display: block; margin-bottom: .45rem; color: var(--chart); font: 600 .65rem/1 var(--f-mono); }
.briefing-segments strong { display: block; margin-bottom: .4rem; font: 700 .88rem/1.05 var(--f-display); text-transform: uppercase; }
.briefing-segments li > span:last-child { color: var(--ink-2); font-size: .72rem; line-height: 1.4; }
.briefing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.briefing-panel p, .briefing-safe p, .briefing-record p { margin: 0; padding: .8rem; color: var(--ink-2); font-size: .78rem; line-height: 1.5; }
.briefing-panel p + p { border-top: 1px dashed var(--rule); }
.briefing-panel p strong { color: var(--ink); font-family: var(--f-mono); font-size: .72rem; }
.briefing-panel dl { margin: 0; padding: .35rem .8rem .7rem; }
.briefing-panel dl div { display: grid; grid-template-columns: 1fr auto; gap: .7rem; padding-top: .45rem; border-top: 1px dashed var(--rule); }
.briefing-panel dl div:first-child { border-top: 0; }
.briefing-panel dt { color: var(--ink-2); font: 500 .65rem/1.4 var(--f-mono); text-transform: uppercase; }
.briefing-panel dd { margin: 0; text-align: right; font: 600 .72rem/1.3 var(--f-mono); }
.briefing-panel dd small { display: block; margin-top: .15rem; color: var(--ink-2); font: 400 .61rem/1.25 var(--f-mono); }
/* The numbers and the calls, shown before the flight. A pilot must never meet
   the standard for the first time in their debrief. */
.briefing-tolerances dd { white-space: nowrap; }
.briefing-tolerances dd small { white-space: normal; text-align: right; }

.briefing-measured dl div { grid-template-columns: 9rem 1fr; }
.briefing-measured dd { text-align: left; font: 400 .75rem/1.45 var(--f-body, inherit); color: var(--ink-2); }

.briefing-calls ul { margin: 0; padding: .35rem .8rem .7rem; list-style: none; }
.briefing-calls li { padding-top: .55rem; margin-top: .55rem; border-top: 1px dashed var(--rule); }
.briefing-calls li:first-child { border-top: 0; margin-top: 0; }
.briefing-calls li strong { display: block; color: var(--ink); font: 600 .74rem/1.35 var(--f-mono); }
.briefing-calls li span:last-of-type { display: block; margin-top: .2rem; color: var(--ink-2); font-size: .73rem; line-height: 1.45; }
.briefing-calls li em {
  display: inline-block; margin-top: .35rem; padding: .1rem .4rem;
  border: 1px solid var(--rule); color: var(--ink-2);
  font: 500 .58rem/1.4 var(--f-mono); text-transform: uppercase; font-style: normal;
}
/* Critical is a safety class, not emphasis: these are the calls whose absence
   makes the ride unqualified. */
.briefing-calls li.is-critical strong { color: var(--chart); }
.briefing-calls li.is-critical em { border-color: var(--chart); color: var(--chart); }

.briefing-events ol { margin: 0; padding: .35rem .8rem .7rem; list-style: none; }
.briefing-events li { padding-top: .55rem; margin-top: .55rem; border-top: 1px dashed var(--rule); }
.briefing-events li:first-child { border-top: 0; margin-top: 0; }
.briefing-events li strong { display: block; color: var(--ink); font: 600 .74rem/1.35 var(--f-mono); }
.briefing-events li span:last-child { display: block; margin-top: .2rem; color: var(--ink-2); font-size: .73rem; line-height: 1.45; }
.briefing-events .briefing-event-notice { color: var(--ink); background: var(--paper-2); border-bottom: 1px dashed var(--rule); }

.briefing-diagram { margin: 0; padding: .2rem .8rem .8rem; }
.briefing-diagram svg { display: block; width: 100%; height: auto; }
.briefing-diagram { display: flex; flex-direction: column; }
.briefing-diagram figcaption { margin-top: .4rem; color: var(--ink-2); font-size: .7rem; line-height: 1.45; }

.briefing-safe { border-color: var(--chart); }
.briefing-safe p { color: var(--ink); }
.briefing-full { padding: .8rem; }
.briefing-full summary { cursor: pointer; font: 600 .68rem/1.3 var(--f-mono); }
.briefing-full pre { margin-top: .8rem; }
.brief-actions { display: flex; justify-content: end; margin-top: 1rem; }

@media (max-width: 46rem) {
  .customer-grid, .customer-submit { grid-template-columns: 1fr; }
  .customer-head { align-items: start; }
  .journey-state { display: none; }
  .journey-step { grid-template-columns: 2rem 1fr; }
  .server-details { grid-template-columns: 1fr 1fr; }
  .learning-flow { grid-template-columns: 1fr; padding-inline: .75rem; }
  .learning-node + .learning-node { border-left: 1px solid var(--rule); border-top: 0; }
  .learning-node + .learning-node::before { top: -.55rem; left: 50%; }
  .learning-node h3, .learning-learn { min-height: 0; }
  .briefing-segments, .briefing-grid { grid-template-columns: 1fr; }
  .briefing-segments li + li { padding: .7rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ── the road ─────────────────────────────────────────────────────── */

.ladder { border: 1.5px solid var(--ink); background: var(--paper); margin-bottom: 1rem; }
.qual { border-bottom: 1px solid var(--rule); }
.qual:last-child { border-bottom: 0; }
.qual-head {
  display: grid; grid-template-columns: 4rem 1fr auto 1rem; align-items: center;
  gap: .9rem; width: 100%; padding: .85rem 1rem; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.qual-head:hover { background: var(--paper-2); }
.qual-head:focus-visible { outline: 2px solid var(--chart); outline-offset: -2px; }
.qual-code {
  font: 700 .78rem/1 var(--f-mono); letter-spacing: .08em; color: var(--ink);
}
.qual-name {
  font: 600 .76rem/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .05em;
}
.qual-state {
  font: 500 .6rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}
.qual.is-open > .qual-head .qual-state { color: var(--chart); }
.qual-caret { font: .7rem/1 var(--f-mono); color: var(--ink-2); transition: transform .16s ease; }
.qual.is-open > .qual-head .qual-caret { transform: rotate(90deg); }
.qual-panel { padding: 0 1rem 1.1rem; }
.qual-panel > .cmd-label { margin: 0 0 .55rem; }
.qual-empty { margin: 0; color: var(--ink-2); font-size: .82rem; max-width: 52ch; }

.blocks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.block {
  display: grid; grid-template-columns: 10.5rem 1fr auto; align-items: baseline;
  gap: .9rem; padding: .5rem 0; border-bottom: 1px dashed var(--rule-2);
  opacity: .55;
}
.block.is-open { opacity: 1; }
.block-events { font: 500 .64rem/1.4 var(--f-mono); color: var(--ink-2); letter-spacing: .04em; }
.block-name { font-size: .8rem; }
.block-state {
  font: 600 .6rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}
.block.is-open .block-state { color: var(--chart); }

/* The tool cards are moved in here at runtime; they keep their own styling. */
.qual-tools:not(:empty) { margin-top: 1.25rem; }

@media (max-width: 700px) {
  .qual-head { grid-template-columns: 3.2rem 1fr auto; }
  .qual-caret { display: none; }
  .block { grid-template-columns: 1fr auto; }
  .block-events { grid-column: 1 / -1; }
}

/* ── foot ─────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding-block: 1.5rem; }
.foot-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot p { margin: 0; font: 500 .72rem/1.5 var(--f-mono); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── the training dashboard ───────────────────────────────────────────
   Guidelines §5: the base is a document, the colour is a signal, structure
   carries the design. Nothing here is decorative — every rule is a boundary
   and every colour is a currency state. */

/* Signed in, the page opens on the dashboard. The score preview is a tool and
   sits at the bottom with the rest of the tools; it stops introducing itself
   to someone who already has an account. */
body.is-signed-in .hero { border-top: 1px solid var(--rule-2); }
body.is-signed-in .hero h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
body.is-signed-in .hero .lede { max-width: 54ch; }

/* The road — the brand's signature for progression. */
.road-strip {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-bottom: 1rem;
  padding: 1rem 1.1rem 1.1rem;
}
.road-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.road-head .cmd-label { margin: 0; }
.road-tag {
  margin: 0;
  font: 500 .74rem/1 var(--f-mono);
  letter-spacing: .08em;
  color: var(--ink-2);
}

.road {
  position: relative;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 1.1rem;
  padding: 0;
}
/* One rule threaded through every node. Inset by half a column so it starts
   and ends at a dot rather than in mid-air. */
.road::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 10%; right: 10%;
  height: 1px;
  background: var(--rule);
}
.road-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-align: center;
  padding: 0 .3rem;
}
.road-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);      /* hairline = future */
}
.road-node.is-on  .road-dot { background: var(--green);   box-shadow: none; }
.road-node.is-lapsing .road-dot { background: var(--amber); box-shadow: none; }
.road-node.is-off .road-dot { background: var(--magenta); box-shadow: none; }
/* You are here: a chalk ring and a glow, never a fill — the rung is not held. */
.road-node.is-here .road-dot {
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--ink), 0 0 10px 2px rgba(223, 227, 231, 0.30);
}
.road-code {
  font: 650 .78rem/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--ink);
}
.road-name { font-size: .72rem; color: var(--ink-2); line-height: 1.3; }
.road-state {
  font: 500 .64rem/1 var(--f-mono);
  letter-spacing: .05em;
  color: var(--ink-2);
  text-transform: lowercase;
}
.road-node.is-here .road-state { color: var(--ink); }
.road-node.is-on .road-state { color: var(--green); }
.road-node.is-lapsing .road-state { color: var(--amber); }
.road-node.is-off .road-state { color: var(--magenta); }

.road-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem 1rem;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-2);
}
.road-facts dt {
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .3rem;
}
.road-facts dd {
  margin: 0;
  font: 600 .92rem/1.2 var(--f-mono);
  color: var(--ink);
}
.road-facts dd.is-on { color: var(--green); }
.road-facts dd.is-lapsing { color: var(--amber); }
.road-facts dd.is-off { color: var(--magenta); }
.road-facts dd.is-none { color: var(--ink-2); }

/* The active ride, with its own tools inside it. */
.active-ride {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin-bottom: 1rem;
}
.active-ride > .card-head { padding: .8rem 1.1rem; }
.active-ride-body { padding: 0 1.1rem 1.1rem; }
/* The cards moved in here already carry their own frames; drop the doubled
   border and the outer margin so they read as contents, not as siblings. */
.active-ride-body > .server-card,
.active-ride-body > .artifacts-card { margin-bottom: .9rem; }
.active-ride-body > *:last-child { margin-bottom: 0; }

/* The board — dense, newest first, status by dot. */
.board-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-bottom: 1rem;
}
.board-card > .card-head { padding: .8rem 1.1rem; }
.board-card > .fine { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--ink-2); }
.board-card > .fine:empty { display: none; }
.board { width: 100%; border-collapse: collapse; }
.board th {
  text-align: left;
  padding: .45rem 1.1rem;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.board td {
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--rule-2);
  font-size: .8rem;
  vertical-align: baseline;
}
.board tr:last-child td { border-bottom: 0; }
.board-when, .board-ride, .board-result {
  font: 500 .74rem/1.4 var(--f-mono);
  white-space: nowrap;
}
.board-ride { color: var(--ink); }
.board-when { color: var(--ink-2); }
.board-result { display: flex; align-items: center; gap: .45rem; }
.board-review { text-align: right; white-space: nowrap; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  flex: none;
}
.dot.is-graded { background: var(--green); box-shadow: none; }
.dot.is-flown  { background: var(--chart); box-shadow: none; }
.dot.is-none   { background: transparent; }

@media (max-width: 760px) {
  .road { grid-auto-flow: row; gap: .9rem; }
  .road::before { display: none; }
  .road-node {
    grid-template-columns: 12px 3.2rem 1fr auto;
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: .6rem;
  }
  .road-facts { grid-template-columns: repeat(2, 1fr); }
  .board th:nth-child(3), .board td:nth-child(3) { display: none; }
}

/* Signed-in header: a status line, not a title card. "Welcome, Catfish" set at
   hero scale is a landing page greeting you; a dashboard states who is signed
   in and gets out of the way. */
body.is-signed-in .enrol,
body.is-signed-in .hero { display: none; }
body.is-signed-in .customer { padding-block: 1.75rem 3rem; border-top: 0; }
body.is-signed-in .customer-head { align-items: center; margin-bottom: 1.1rem; }
body.is-signed-in .customer-head h2 {
  margin: 0;
  font: 700 clamp(1.1rem, 2.2vw, 1.5rem)/1.1 var(--f-display);
}
body.is-signed-in .customer-head .eyebrow { margin-bottom: .3rem; }
body.is-signed-in #customer-summary { font-size: .85rem; margin-top: .2rem; }

/* ── hosted mission workspace ─────────────────────────────────────
   The customer is here to fly a mission, not to administer a server. Keep
   the actual sequence visible: pre-brief, launch, join, post-flight. */
.mission-overview {
  display: flex; justify-content: space-between; align-items: end; gap: 1.25rem;
  padding: 1.2rem 1.25rem; margin-bottom: 1px;
  border: 1px solid var(--rule); background: var(--paper-2);
}
.mission-overview h3, .mission-step h3 {
  margin: .3rem 0 .45rem; font: 700 1.1rem/1.1 var(--f-display); text-transform: uppercase;
}
.mission-overview p:not(.cmd-label), .mission-step > p:not(.cmd-label), .postflight-intro {
  margin: 0; color: var(--ink-2); font-size: .84rem; max-width: 58ch;
}
.mission-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 1.25rem; }
.mission-step { min-width: 0; padding: 1.25rem; background: var(--paper); display: flex; flex-direction: column; }
.mission-step .cmd-label { margin: 0; }
.mission-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: auto; padding-top: 1.25rem; }
.mission-state { min-height: 2.5em; margin: .85rem 0 0; font: 500 .68rem/1.45 var(--f-mono); color: var(--ink-2); }
.join-details { display: grid; grid-template-columns: 1fr; gap: 0; margin: auto 0 0; padding-top: 1.25rem; }
.join-details div { padding: .55rem 0; border-top: 1px solid var(--rule-2); }
.join-details dt { font: 500 .6rem/1 var(--f-mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.join-details dd { margin: .22rem 0 0; overflow-wrap: anywhere; font: 600 .72rem/1.35 var(--f-mono); color: var(--ink); }
.mission-details { margin-bottom: 1.25rem; }
.postflight-card { border: 1px solid var(--rule); padding: 1.25rem; }
.postflight-intro { margin: .7rem 0 1.1rem; }

@media (max-width: 54rem) {
  .mission-overview { align-items: start; flex-direction: column; }
  .mission-flow { grid-template-columns: 1fr; }
}

/* Inside the ride, the server is a component, not a headline. The ride is
   already named directly above it, so the card stops naming itself twice. */
.active-ride-body .server-card {
  border: 1px solid var(--rule);
  padding: .95rem 1.05rem;
}
.active-ride-body .server-card-head .cmd-label { display: none; }
.active-ride-body .server-card-head h3 {
  margin: 0;
  font: 600 .8rem/1 var(--f-mono);
  letter-spacing: .09em;
  color: var(--ink-2);
}
.active-ride-body .server-mission { margin-top: .5rem; }
.active-ride-body .artifacts-card,
.active-ride-body .board-card { border: 1px solid var(--rule); }
/* The ride header already names the ride; the card need not repeat it. */
.active-ride-body .server-mission { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   THE REBUILD — one token set, the training regime as the spine.

   Decisions OC-011/012/013 (wiki DECISIONS.md): this file is now the
   only stylesheet on the site. teaser.css (the lime door), command.css
   and workspace-command.css (the lime override layer that re-skinned
   this one) and training.html's private inline copy are deleted. Four
   near-miss design systems read worse than one; they are gone.

   Nothing below invents a token. Everything uses the :root set at the
   top of this file.
   ═══════════════════════════════════════════════════════════════════ */

/* teaser.js toggles this class rather than the `hidden` attribute. */
.hidden { display: none !important; }

/* ── the door ─────────────────────────────────────────────────────
   The only page a stranger sees. It has two jobs and they are equal:
   say what On Contract is, and take a code. Previously it did only the
   second, so the clearest statement of the product lived in the wiki
   and no visitor ever read a word of it. */

.door-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.door {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3.5rem;
  align-items: start;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 5rem) 1.5rem 3rem;
}
.door-say .brand { margin-bottom: 2.25rem; }
/* The one h1 on the site that is not set in caps. The brand voice uppercases
   headlines because they are short — "Learn the job." — and this is a
   paragraph-length statement of direction. Two lines of it in caps is a wall
   nobody reads, which would defeat the only reason it is on this page. */
.door-say h1 {
  margin: 0 0 1.25rem;
  font: 700 clamp(1.5rem, 3.2vw, 2.15rem)/1.2 var(--f-display);
  letter-spacing: -.01em;
  text-transform: none;
  text-wrap: balance;
}
.door-say p { margin: 0 0 1rem; color: var(--ink-2); max-width: 46ch; }
.door-say p strong { color: var(--ink); font-weight: 500; }
.door-say .door-discord { color: var(--chart); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.door-say .door-discord:hover { color: var(--ink); }
.door-say .door-boundary {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-2);
}
.door-catalogue {
  display: inline-block;
  margin-top: 1.25rem;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--chart);
}

.door-gate {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.5rem;
}
.door-gate h2 {
  margin: 0 0 .3rem;
  font: 600 .74rem/1 var(--f-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.door-gate .door-gate-sub {
  margin: 0 0 1.25rem;
  font-size: .82rem;
  color: var(--ink-2);
}
.door-gate .door-gate-sub a { color: var(--chart); }
.door-divider { height: 1px; margin: 1.35rem 0; background: var(--rule); }
.door-gate form { display: flex; flex-direction: column; gap: .55rem; }
.door-gate label {
  font: 500 .65rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: .4rem;
}
.door-gate input {
  width: 100%;
  padding: .7rem .75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: .85rem/1 var(--f-mono);
  letter-spacing: .06em;
}
.door-gate input:focus { outline: none; border-color: var(--chart); }
.door-gate button[type="submit"] {
  margin-top: 1rem;
  padding: .75rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: 500 .7rem/1 var(--f-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.door-gate button[type="submit"]:disabled { opacity: .45; cursor: default; }
.door-quiet {
  display: block;
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  font: .74rem/1 var(--f-mono);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.door-quiet + .door-quiet { margin-top: .5rem; }
.door-quiet:hover { color: var(--chart); }
.door-note {
  min-height: 1.1rem;
  margin: .9rem 0 0;
  font: .74rem/1.4 var(--f-mono);
  color: var(--ink-2);
}
.door-note[data-bad="1"] { color: var(--magenta); }

/* ── public front door ─────────────────────────────────────────── */
.public-signin { margin-left: auto; }
.public-hero { padding-block: clamp(3rem, 9vw, 6.5rem) 3.5rem; }
.public-hero h1 { max-width: 16ch; }
.public-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.public-story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 3rem; padding-block: 1.5rem 4.5rem; border-top: 1px solid var(--rule); }
.public-story h2 { margin: .35rem 0 0; font: 650 clamp(1.6rem, 3vw, 2.5rem)/1.05 var(--f-display); text-transform: uppercase; }
.public-story-copy p { margin: 0 0 1rem; color: var(--ink-2); font-size: 1rem; }
.public-grid, .update-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.public-grid article, .update-list article { padding: 1.5rem; background: var(--paper-2); }
.public-grid h2, .update-list h2, .public-statement h2 { margin: .35rem 0 .8rem; font: 650 1.2rem/1.1 var(--f-display); text-transform: uppercase; }
.public-grid p:not(.eyebrow), .update-list p:not(.eyebrow), .public-statement > p:not(.eyebrow) { color: var(--ink-2); font-size: .9rem; }
.public-grid a, .update-list a { color: var(--chart); font: 600 .72rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.public-statement { max-width: 58rem; padding-block: 4.5rem; }
.public-statement > p:not(.eyebrow) { max-width: 70ch; margin-bottom: 1.5rem; }
.public-compact { padding-bottom: 2.5rem; }
.update-list { grid-template-columns: repeat(2, 1fr); margin-bottom: 4rem; }
.flight-review-grid { margin-bottom: 0; }

/* ── updates: a build journal, led by the work pilots can feel ─────────── */
.updates-hero { padding-block: clamp(3.5rem, 8vw, 6rem) 3rem; border-bottom: 1px solid var(--rule); }
.updates-hero h1 { max-width: 18ch; font-size: clamp(2rem, 3.3vw, 3.15rem); }
.updates-hero .lede { max-width: 44rem; }
.updates-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .8fr); gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(4rem, 8vw, 7rem); align-items: center; }
.updates-feature h2, .updates-section-head h2, .updates-next h2 { margin: 0; font: 650 clamp(1.45rem, 2.35vw, 2.2rem)/1.08 var(--f-display); letter-spacing: -.03em; text-transform: uppercase; }
.updates-feature p:not(.eyebrow), .updates-next p:not(.eyebrow) { max-width: 39rem; color: var(--ink-2); font-size: 1.03rem; }
.updates-feature .btn { margin-top: 1.25rem; }
.updates-radio-card { position: relative; overflow: hidden; padding: 1.6rem; border: 1px solid #31526d; background: linear-gradient(145deg, #102435, #0d171f); }
.updates-radio-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 1.2rem, rgba(111,160,214,.05) 1.2rem 1.25rem); }
.updates-signal { position: relative; z-index: 1; display: inline-block; padding: .34rem .46rem; border: 1px solid var(--chart); color: #b9ddfa; font: 600 .68rem/1 var(--f-mono); letter-spacing: .18em; }
.updates-radio-card dl { position: relative; z-index: 1; margin: 2.6rem 0 1.6rem; border-top: 1px solid rgba(174,210,240,.28); }
.updates-radio-card dl div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid rgba(174,210,240,.2); }
.updates-radio-card dt { color: #8ec4ed; font: 600 .68rem/1.4 var(--f-mono); }.updates-radio-card dd { margin: 0; color: #e0e9f0; font-size: .94rem; }
.updates-radio-card > p { position: relative; z-index: 1; margin: 0; color: #9eafbe; font: .82rem/1.45 var(--f-mono); }
.updates-capabilities { padding-bottom: clamp(4rem, 8vw, 7rem); }.updates-section-head { display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: 4rem; align-items: start; margin-bottom: 2rem; }.updates-section-head .eyebrow { margin-top: .45rem; }
.updates-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--rule); background: var(--rule); }.updates-capability-grid article { min-height: 15rem; padding: 1.5rem; background: var(--paper-2); }.updates-capability-grid span { color: var(--chart); font: 600 .68rem/1 var(--f-mono); letter-spacing: .12em; }.updates-capability-grid h3 { margin: 2.6rem 0 .75rem; font: 650 1.25rem/1.08 var(--f-display); text-transform: uppercase; }.updates-capability-grid p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.updates-next { display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: 4rem; padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--rule); }.updates-next .eyebrow { margin-top: .45rem; }.updates-next p { margin: 1rem 0 0; }

@media (max-width: 54rem) {
  .door { grid-template-columns: 1fr; gap: 2rem; }
  .public-grid, .update-list { grid-template-columns: 1fr; }
  .public-story { grid-template-columns: 1fr; gap: 1.25rem; }
  .updates-feature, .updates-section-head, .updates-next { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── the track ────────────────────────────────────────────────────
   The signed-in home. EL-1 to EL-5, where this pilot is, what is next.
   Built on the .road vocabulary already in this file — it was written
   for the retired gradesheet and never shipped; progression is exactly
   what it draws. */

.track-page { padding-block: 2rem 3.5rem; }
.track-head { margin-bottom: 1.5rem; }
.track-head h1 {
  margin: .3rem 0 .4rem;
  font: 700 clamp(1.3rem, 2.6vw, 1.8rem)/1.15 var(--f-display);
}
.track-head p { margin: 0; color: var(--ink-2); font-size: .88rem; max-width: 62ch; }

/* A road node is a link here, not a label: the track is how you reach a ride. */
a.road-node { text-decoration: none; color: inherit; }
a.road-node:hover .road-code { color: var(--chart); }
a.road-node:focus-visible { outline: 2px solid var(--chart); outline-offset: 3px; }
.road-node.is-next .road-dot {
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--chart), 0 0 10px 2px rgba(111, 160, 214, .3);
}
.road-node.is-next .road-state { color: var(--chart); }

/* What to do next, stated once, in a frame you cannot miss. */
.next-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.next-card h2 {
  margin: .25rem 0 .3rem;
  font: 700 1.1rem/1.2 var(--f-display);
}
.next-card p { margin: 0; color: var(--ink-2); font-size: .84rem; max-width: 54ch; }
.next-card .btn { flex: none; }

/* The track's own listing of rides: denser than the public catalogue,
   because a signed-in pilot is choosing, not evaluating. */
.track-rides {
  display: grid;
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
  margin-top: 1rem;
}
.track-ride {
  display: grid;
  /* Wide enough for the longest id in the catalogue (intercept-1) to sit on
     one line; it wrapped mid-word at 4.5rem. */
  grid-template-columns: 7.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .9rem 1.1rem;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
}
.track-ride:hover { background: var(--paper-2); }
.track-ride:focus-visible { outline: 2px solid var(--chart); outline-offset: -2px; }
.track-ride .track-code {
  font: 650 .78rem/1.4 var(--f-mono);
  letter-spacing: .06em;
}
.track-ride strong { display: block; font-weight: 500; font-size: .92rem; }
.track-ride small { display: block; margin-top: .2rem; color: var(--ink-2); font-size: .78rem; }
.track-ride .track-state {
  font: 500 .64rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

@media (max-width: 46rem) {
  .track-ride { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── a ride ───────────────────────────────────────────────────────
   One page per ride: the brief, the standard as numbers, the diagram,
   and this pilot's attempts. Previously a dialog on the workspace,
   which is why the regime never read as the spine of anything. */

.ride-page { padding-block: 2rem 3.5rem; }
.ride-masthead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
.ride-masthead h1 {
  margin: .35rem 0 .5rem;
  font: 700 clamp(1.4rem, 3vw, 2.1rem)/1.1 var(--f-display);
}
.ride-masthead .ride-lede {
  margin: 0;
  color: var(--ink-2);
  max-width: 62ch;
  font-size: .92rem;
}
.ride-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 1rem 0 0;
}
.ride-facts div { margin: 0; }
.ride-facts dt {
  font: 500 .6rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .25rem;
}
.ride-facts dd { margin: 0; font: 500 .8rem/1 var(--f-mono); }

/* Every ride is draft. Nothing on this page may read as bookable, so the
   status is stated once, plainly, at the top — not implied by a button. */
.ride-status {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: .8rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .82rem;
  color: var(--ink-2);
}
.ride-status .pill { flex: none; }

.ride-section { margin-bottom: 2rem; }
.ride-section > h2 {
  margin: 0 0 .9rem;
  font: 500 .68rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ride-empty {
  border: 1px dashed var(--rule);
  padding: 1.1rem;
  margin: 0;
  color: var(--ink-2);
  font-size: .85rem;
}

/* The brief renders through the same renderPreflightBrief() the dialog
   used, so a ride page and the dialog can never drift apart. Its panels
   are styled in the dialog section above; these two rules take them out
   of the dialog's narrow column and onto a page. */
/* Reserved height. The brief is fetched, and it is the biggest block on the
   page — when it landed it shoved "Your attempts" and the scorer down by
   most of a screen. Holding roughly its own height keeps everything below it
   still. Deliberately an under-estimate: reserving MORE than the content
   needs just trades a downward shift for an upward one. */
.ride-brief { display: grid; gap: 1.25rem; min-height: 24rem; }
.ride-brief .briefing-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 46rem) {
  .ride-brief .briefing-grid { grid-template-columns: 1fr; }
}

/* The scorer, in the one place a tape means something. It was the hero
   element of the landing page, which put an experimental tool in front
   of the product. */
.ride-tool {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.1rem 1.25rem;
}
.ride-tool > .cmd-label { margin: 0 0 .3rem; }
.ride-tool > p { margin: 0 0 1rem; color: var(--ink-2); font-size: .82rem; max-width: 60ch; }
/* The plate and the tool box are both raised panels, so on the default
   ground the gauges sat on their own background and vanished. Drop the
   plate back to the page ground so its rules read against something. */
.ride-tool .plate, .ride-tool .drop { background: var(--paper); }

/* ── the catalogue ────────────────────────────────────────────────
   training.html carried a private copy of the tokens in an inline
   <style> block, on the wrong side of the rename documented at the top
   of this file. These are those rules, on this file's tokens. */

.catalogue-page { padding-block: 2rem 3.5rem; }
.catalogue-head { margin-bottom: 1.5rem; }
.catalogue-head h1 {
  margin: .3rem 0 .5rem;
  font: 700 clamp(1.3rem, 2.6vw, 1.8rem)/1.15 var(--f-display);
}
.catalogue-head p { margin: 0; color: var(--ink-2); max-width: 62ch; font-size: .88rem; }

.rides {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
}
.ride-row { background: var(--paper); padding: 1.25rem 1.4rem; }
.ride-row-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.ride-row-head h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.ride-row-head h3 a { color: inherit; text-decoration: none; }
.ride-row-head h3 a:hover { color: var(--chart); }
.ride-row-head .meta {
  margin-left: auto;
  font: 500 .68rem/1 var(--f-mono);
  letter-spacing: .05em;
  color: var(--ink-2);
}
.ride-row > p { margin: .5rem 0 0; color: var(--ink-2); max-width: 70ch; font-size: .85rem; }
.pill {
  font: 500 .6rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: .25rem .5rem;
  color: var(--ink-2);
}
.pill.is-free { color: var(--ink); border-color: var(--ink); }
/* A seat, on a crewed track only. Deliberately quieter than is-free: it is a
   scope marker, not an offer. */
.pill.is-seat { color: var(--ink-2); border-style: dashed; }

/* ── track groups ────────────────────────────────────────────────────────────
   The catalogue is grouped by track because the tracks are not variants of one
   ladder. The rule above each group is doing real work: it stops a reader
   carrying a figure from the fighter track into the helicopter one. */
.track-group {
  margin: 2.4rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--rule);
}
.track-group:first-child { margin-top: 0; }
.track-group h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.track-group-meta {
  margin: .35rem 0 0;
  font: 500 .68rem/1.4 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.track-group-summary {
  margin: .6rem 0 0;
  max-width: 70ch;
  font-size: .85rem;
  color: var(--ink-2);
}
.track-group-ladder {
  margin: .6rem 0 0;
  font: 500 .68rem/1.4 var(--f-mono);
  letter-spacing: .08em;
  color: var(--ink-2);
}

/* ── levels within a track ──────────────────────────────────────────────────
   The ladder is the spine of the page. A level heading has to carry three
   things at a glance: what the block is, what finishing it earns, and what it
   costs to start. */
.level-group { margin: 1.6rem 0 0; }
.level-head {
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: .9rem;
}
.level-head > h4 {
  margin: 0;
  font-size: .98rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.level-short {
  font: 500 .6rem/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: .25rem .45rem;
}
.level-summary {
  margin: .4rem 0 0;
  max-width: 70ch;
  font-size: .84rem;
  color: var(--ink-2);
}
.level-gates {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: .55rem 0 0;
  font: 500 .66rem/1.4 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.level-grants { color: var(--ink); }
.level-grants.is-elective { color: var(--ink-2); }
.level-requires { color: var(--ink-2); }

/* ── the filter bar ──────────────────────────────────────────────────────── */
.catalogue-filters { margin: 0 0 1.6rem; }
.filter-row {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.filter-label {
  flex: 0 0 6.5rem;
  font: 500 .62rem/1.6 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  font: 500 .68rem/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule);
  padding: .35rem .6rem;
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--ink-2); }
.chip.on {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.chip:focus-visible { outline: 2px solid var(--chart); outline-offset: 2px; }
.filter-count {
  margin: .6rem 0 0;
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--ink-2);
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--chart);
  text-decoration: underline;
  cursor: pointer;
}

/* A ride that needs a second human, and the gate it sits behind. */
.pill.is-roster { color: var(--ink); border-color: var(--ink-2); }
.ride-gate {
  margin: .5rem 0 0;
  font: 500 .68rem/1.4 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink-2);
}

.tiers { margin-top: 1rem; border-top: 1px solid var(--rule-2); }
.tier {
  display: grid;
  grid-template-columns: 6.5rem 5rem 1fr 8rem;
  gap: 1rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.tier:last-child { border-bottom: 0; }
.tier .tier-difficulty {
  font: 500 .65rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tier .tier-variant { font: .65rem/1 var(--f-mono); color: var(--ink-2); }
.tier .tier-summary { font-size: .85rem; color: var(--ink-2); }
.tier .tier-setup {
  font: .62rem/1.5 var(--f-mono);
  letter-spacing: .05em;
  color: var(--ink-2);
  text-align: right;
}
/* Draft is the normal state of every ride today, so it is drawn as
   quiet, not as broken. */
.tier.is-draft .tier-difficulty,
.tier.is-draft .tier-summary { opacity: .72; }

.catalogue-note {
  margin-top: 1rem;
  font: .7rem/1.5 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink-2);
}

@media (max-width: 46rem) {
  .tier { grid-template-columns: 1fr; gap: .25rem; }
  .tier .tier-setup { text-align: left; }
  .ride-row-head .meta { margin-left: 0; width: 100%; }
}

/* ── the record ───────────────────────────────────────────────────
   Absence is not a status. An empty record gets an invitation, never a
   status dot — the three status colours mean currency and nothing else. */
/* The record is fetched, and it sits above the catalogue. Hold its height or
   every ride below it moves when it arrives. */
#record { min-height: 11rem; }
.record-empty {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.4rem 1.5rem;
}
.record-empty h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 500; }
.record-empty p { margin: 0 0 1rem; color: var(--ink-2); max-width: 58ch; font-size: .85rem; }

.holdings { border-top: 1px solid var(--rule-2); }
.hold {
  display: grid;
  grid-template-columns: 1rem 9rem 1fr 9rem;
  gap: 1rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.hold .hold-code { font: 500 .8rem/1 var(--f-mono); }
.hold .hold-state {
  font: 500 .65rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hold .hold-when {
  font: .7rem/1 var(--f-mono);
  color: var(--ink-2);
  text-align: right;
}
@media (max-width: 46rem) {
  .hold { grid-template-columns: 1rem 1fr; }
  .hold .hold-when { text-align: left; }
}


/* ── the account menu ─────────────────────────────────────────────
   The chip rendered "CATFISH ▾" on every member page and opened nothing.
   Worse, sign-out existed only in workspace.html's markup, so from the
   track, the catalogue or a ride there was no way to sign out at all --
   the masthead's own sign-in button is hidden once you are signed in.
   One menu, built by app.js, owns both. */

.account-menu { position: relative; }
.account-menu-panel {
  position: absolute;
  top: calc(100% + .4rem);
  /* Anchored to the chip's LEFT edge, not its right. Right-aligning pushed the
     panel leftwards off the screen at 320px, where the masthead wraps and the
     chip sits near the left margin — measured at x = −61. */
  left: 0;
  z-index: 70;
  min-width: 11rem;
  max-width: min(16rem, calc(100vw - 2rem));
  display: grid;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: .35rem;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-panel a,
.account-menu-panel button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  padding: .5rem .6rem;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.account-menu-panel a:hover,
.account-menu-panel button:hover { background: var(--paper); color: var(--chart); }
.account-menu-panel hr { border: 0; border-top: 1px solid var(--rule-2); margin: .3rem .6rem; }

/* Narrow screens stop floating it entirely.

   Anchoring an absolutely-positioned panel to the chip cannot win at every
   width: right-aligned it ran off the left edge at 320px (measured x = −61),
   left-aligned it ran off the right at 390px (257 + 176 > 390). The chip's
   position moves with the wrapping masthead, so there is no fixed side to
   pin to.

   Below 46rem the masthead already wraps, so the menu takes a row of its own
   and flows in normal layout. Nothing is positioned, so nothing can be
   positioned off-screen. */
@media (max-width: 46rem) {
  .account-menu { position: static; flex: 1 1 100%; }
  .account-menu-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: .4rem;
  }
}

/* ── nested levels ───────────────────────────────────────────────────────────
   <details> rather than a JS accordion: keyboard-operable, findable by the
   browser's own find-in-page, and no state to fall out of sync. */
details.level-group > summary {
  cursor: pointer;
  list-style: none;
  padding-left: 1.3rem;
  position: relative;
}
details.level-group > summary::-webkit-details-marker { display: none; }
details.level-group > summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: .1rem;
  color: var(--ink-2);
  transition: transform .12s ease;
}
details.level-group[open] > summary::before { content: "▾"; }
details.level-group > summary:focus-visible {
  outline: 2px solid var(--chart);
  outline-offset: 3px;
}
details.level-group > summary:hover .level-head > h4 { color: var(--chart); }
.level-count {
  margin-left: auto;
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── fly it, and the join panel it points at ─────────────────────────────── */
.btn-sm { font-size: .68rem; padding: .35rem .7rem; }
.ride-fly { flex: none; }

.join-facts { margin: 0 0 .8rem; display: grid; gap: .3rem; }
.join-facts > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--rule-2);
}
.join-facts dt {
  font: 500 .66rem/1.5 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.join-facts dd { margin: 0; font-size: .88rem; }

/* ── operator ────────────────────────────────────────────────────────────────
   Shown only to accounts with the flag. Deliberately plain: this is a test
   harness sitting on a customer page, and dressing it up would make it read
   as a feature the pilot is missing out on. */
.operator-panel {
  margin: 1.2rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--rule);
}
.operator-label {
  margin: 0 0 .4rem;
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.operator-panel > p { margin: 0 0 .7rem; max-width: 66ch; font-size: .85rem; }
.operator-note {
  margin: .6rem 0 0 !important;
  font-size: .78rem !important;
  color: var(--ink-2);
}

/* ── public overview ────────────────────────────────────────────────────── */
.overview-page { background-image: none; }
.overview-hero { position: relative; min-height: min(48rem, calc(100vh - 4rem)); overflow: hidden; display: grid; align-items: center; color: #f4f6f8; background: #07101a; }
.overview-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.overview-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,11,19,.94) 0%, rgba(3,11,19,.74) 35%, rgba(3,11,19,.1) 72%), linear-gradient(0deg, rgba(3,11,19,.58), transparent 44%); }
.overview-hero-copy { position: relative; z-index: 1; width: 100%; padding-block: clamp(4rem, 11vw, 8rem); }
.overview-hero-copy .eyebrow { color: #b7d4ee; }
.overview-hero-copy h1 { max-width: 21ch; margin-bottom: 1.4rem; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.07; letter-spacing: -.03em; }
.overview-hero-copy .hero-wordmark { display: inline-flex; align-items: baseline; gap: .18em; margin: 0 0 .22em; color: #f4f6f8; font-size: 1.12em; letter-spacing: -.055em; white-space: nowrap; }
.overview-hero-copy .hero-wordmark span:first-child { color: #a8d3f6; font-weight: 500; font-style: italic; }
.overview-hero-copy .hero-wordmark span:last-child { font-weight: 750; }
.overview-hero-copy .hero-statement { display: block; max-width: 16ch; font-size: .7em; line-height: 1.1; letter-spacing: -.025em; }
.overview-hero-copy h1 em { color: #a8d3f6; }
.overview-hero-copy > p:not(.eyebrow) { max-width: 35rem; color: #d7e0e8; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.overview-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.overview-actions .btn-solid { background: #eaf1f5; border-color: #eaf1f5; color: #09131d; }.overview-actions .btn-solid:hover { background: var(--chart); border-color: var(--chart); }
.overview-actions .btn-ghost { border-color: #cad9e5; color: #eef4f8; }.overview-actions .btn-ghost:hover { background: #eef4f8; color: #09131d; }
.overview-hero-caption { position: absolute; z-index: 1; right: max(1.5rem, calc((100vw - var(--wrap))/2)); bottom: 1.4rem; margin: 0; color: #d5e1ea; font: 600 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.overview-review { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(4.5rem, 10vw, 8rem); }.overview-review h2 { margin: 0; font: 650 clamp(1.5rem, 2.25vw, 2.15rem)/1.06 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; }.overview-review-copy > p:not(.eyebrow) { max-width: 36rem; margin: 1.4rem 0 0; color: var(--ink-2); font-size: 1.05rem; }.overview-review .text-link { align-self: center; color: var(--chart); font: 600 .7rem/1.2 var(--f-mono); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }.overview-review .text-link:hover { text-decoration: underline; text-underline-offset: .3rem; }.overview-review-shot { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #34516a; box-shadow: 1.5rem 1.5rem 0 rgba(1,5,9,.35); background: #07101a; color: #dcecf8; text-decoration: none; }.overview-review-shot :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: .92; transition: transform .3s ease, opacity .3s ease; }.overview-review-shot span { position: absolute; right: .9rem; bottom: .85rem; padding: .5rem .65rem; background: rgba(5,13,21,.88); border: 1px solid rgba(174,210,240,.45); font: 600 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }.overview-review-shot b { color: #9fd1f7; font-size: 1rem; }.overview-review-shot:hover :is(img, video) { transform: scale(1.025); opacity: 1; }
.overview-intro { display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: 4rem; padding-block: clamp(4.5rem, 10vw, 9rem); }.overview-intro h2, .overview-vision h2, .overview-login h2 { margin: 0; font: 650 clamp(1.5rem, 2.35vw, 2.3rem)/1.06 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; }.overview-intro p:not(.eyebrow), .overview-vision p:not(.eyebrow), .overview-login p:not(.eyebrow) { max-width: 45rem; margin: 1.5rem 0 0; color: var(--ink-2); font-size: 1.05rem; }
.overview-squad { background: #12283c; border-top: 1px solid #365b78; border-bottom: 1px solid #365b78; }.overview-squad .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }.overview-squad-head { display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: 4rem; }.overview-squad-head .eyebrow { margin-top: .4rem; }.overview-squad-head h2 { margin: 0; font: 650 clamp(1.5rem, 2.35vw, 2.3rem)/1.06 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; }.overview-squad-head p:last-child { grid-column: 2; max-width: 42rem; margin: -1.25rem 0 0; color: #b9c8d5; font-size: 1.02rem; }.overview-squad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; background: #426782; border: 1px solid #426782; }.overview-squad-grid article { min-height: 15rem; padding: 1.5rem; background: #102235; }.overview-squad-grid span { color: #9bcdf3; font: 600 .67rem/1 var(--f-mono); letter-spacing: .11em; }.overview-squad-grid h3 { margin: 2.2rem 0 .8rem; color: #edf3f7; font: 650 clamp(1.05rem, 1.65vw, 1.3rem)/1.05 var(--f-display); text-transform: uppercase; }.overview-squad-grid p { margin: 0; color: #b3c2cf; font-size: .9rem; }
.overview-path { background: #dbe7f0; color: #112235; }.overview-path .wrap { padding-block: 1.5rem 0; }.overview-path-head { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; padding-bottom: 1.5rem; }.overview-path-head .eyebrow { margin: 0; color: #255b8b; }.overview-path-head > p:last-child { margin: 0; color: #4c6073; font-size: .9rem; }.overview-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #93aabf; }.overview-path-grid a { display: grid; grid-template-rows: auto 1fr auto; min-height: 19rem; padding: 1.5rem; border-right: 1px solid #93aabf; color: inherit; text-decoration: none; }.overview-path-grid a:first-child { border-left: 1px solid #93aabf; }.overview-path-grid a:hover { background: #edf4f8; }.overview-path-grid span { color: #3d719e; font: 600 .68rem/1 var(--f-mono); letter-spacing: .1em; }.overview-path-grid h2 { margin: 3rem 0 .9rem; font: 650 clamp(1.25rem, 2.4vw, 2rem)/.96 var(--f-display); text-transform: uppercase; }.overview-path-grid p { margin: 0; max-width: 22rem; color: #506378; font-size: .9rem; }.overview-path-grid b { margin-top: 2rem; color: #1d4d78; font: 700 .68rem/1.2 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; }
.overview-vision { display: grid; grid-template-columns: minmax(8rem, .55fr) minmax(0, 1.45fr); gap: 4rem; padding-block: clamp(4.5rem, 10vw, 9rem); }.overview-vision-mark { width: 5rem; height: 5rem; display: grid; place-items: center; border: 1px solid var(--chart); color: var(--chart); font: 700 1.35rem/1 var(--f-mono); }.overview-vision .text-link { display: inline-block; margin-top: 2rem; color: var(--chart); font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.overview-vision .text-link:hover { text-decoration: underline; text-underline-offset: .3rem; }
.overview-login { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(4.5rem, 9vw, 8rem); padding: clamp(2rem, 5vw, 4rem); border: 1px solid #34516a; background: #102234; }.overview-login h2 { font-size: clamp(1.55rem, 3vw, 2.7rem); }.overview-login .btn { flex: none; }.overview-login p:not(.eyebrow) { margin-top: .8rem; }
@media (max-width: 46rem) { .overview-hero { min-height: 39rem; align-items: end; }.overview-hero-image { object-position: 63% center; }.overview-hero-shade { background: linear-gradient(90deg, rgba(3,11,19,.91), rgba(3,11,19,.3)), linear-gradient(0deg, rgba(3,11,19,.8), transparent 58%); }.overview-hero-copy { padding-bottom: 5rem; }.overview-hero-copy h1 { font-size: clamp(1.9rem, 7.6vw, 2.5rem); }.overview-review, .overview-intro, .overview-vision, .overview-squad-head { grid-template-columns: 1fr; gap: 1.5rem; }.overview-squad-head p:last-child { grid-column: auto; margin: 0; }.overview-squad-grid { grid-template-columns: 1fr; }.overview-squad-grid article { min-height: auto; }.overview-squad-grid h3 { margin-top: 1.5rem; }.overview-review-shot { box-shadow: .75rem .75rem 0 rgba(1,5,9,.35); }.overview-path-head { display: block; }.overview-path-head > p:last-child { margin-top: .75rem; }.overview-path-grid { grid-template-columns: 1fr; }.overview-path-grid a { min-height: 13rem; border-left: 1px solid #93aabf; border-bottom: 1px solid #93aabf; }.overview-path-grid h2 { margin-top: 1.75rem; }.overview-login { align-items: start; flex-direction: column; }.overview-login .btn { margin-top: .5rem; } }

/* ── public landing: an editorial flight narrative ──────────────────────── */
.landing-page { background-image: none; }
.landing-page .masthead { background: #090d14; }
.landing-hero { overflow: hidden; background: #0b1725; border-bottom: 1px solid #31445a; }
.landing-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); grid-template-areas: "kicker kicker" "title brief" "plot plot"; gap: 2.5rem; padding-top: 1rem; padding-bottom: 0; min-height: min(52rem, calc(100vh - 4rem)); }
.landing-kicker { grid-area: kicker; display: flex; justify-content: space-between; padding-block: .75rem; border-bottom: 1px solid rgba(202,221,240,.24); color: #b6c3d1; font: 600 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.landing-title { grid-area: title; z-index: 2; padding-block: clamp(1rem, 5vw, 5rem); }
.landing-title .eyebrow { color: #94bceb; }
.landing-title h1 { margin: 0; max-width: 10ch; color: #f1f5fa; font-size: clamp(3.7rem, 8.5vw, 8.8rem); line-height: .84; letter-spacing: -.06em; }
.landing-title h1 em { color: #84b9ee; }
.landing-brief { grid-area: brief; align-self: center; z-index: 2; padding: 1.5rem; border-top: 2px solid #84b9ee; background: rgba(7,13,21,.78); backdrop-filter: blur(8px); }
.landing-brief > p { margin: 0; color: #ced7e0; font-size: 1.08rem; line-height: 1.6; }
.landing-actions { display: grid; align-items: center; gap: 1rem; margin-top: 2rem; }
.landing-actions .btn { justify-self: start; }
.text-link { color: #a9cdf4; font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.text-link span, .loop-steps a span { font-size: 1.1rem; }
.formation-plot { grid-area: plot; position: relative; height: clamp(14rem, 29vw, 23rem); margin-inline: -8rem; background: linear-gradient(180deg, transparent, rgba(5,10,17,.6)), repeating-linear-gradient(90deg, transparent 0 5rem, rgba(153,190,225,.1) 5rem 5.1rem), repeating-linear-gradient(0deg, transparent 0 5rem, rgba(153,190,225,.1) 5rem 5.1rem); border-top: 1px solid rgba(202,221,240,.24); }
.formation-plot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 51% 60%, rgba(116,173,227,.28), transparent 34%); }
.aircraft { position: absolute; z-index: 1; display: block; width: 2.6rem; height: 5rem; background: #f1f5fa; clip-path: polygon(50% 0, 62% 34%, 100% 64%, 62% 62%, 56% 100%, 44% 100%, 38% 62%, 0 64%, 38% 34%); filter: drop-shadow(0 0 1rem #9dd0ff); transform: rotate(28deg); }
.lead-aircraft { top: 30%; left: 52%; }.wing-aircraft { top: 56%; left: 42%; transform: rotate(28deg) scale(.78); opacity: .8; }
.flight-line { position: absolute; z-index: 1; display: block; height: 1px; transform-origin: left; background: #8ac1f4; opacity: .75; }.line-one { width: 19%; top: 55%; left: 46%; transform: rotate(-29deg); }.line-two { width: 33%; top: 66%; left: 48%; transform: rotate(14deg); }
.plot-label { position: absolute; z-index: 2; color: #a2b7ca; font: 600 .58rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }.plot-label-top { top: 1rem; left: calc(50% - 8rem); }.plot-label-bottom { right: calc(50% - 17rem); bottom: 1rem; }
.purpose-block { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; padding-block: clamp(5rem, 10vw, 10rem); }.purpose-block h2, .package-copy h2, .review-feature h2 { margin: 0; color: #f0f3f6; font: 650 clamp(2rem, 4vw, 4.3rem)/.98 var(--f-display); letter-spacing: -.035em; text-transform: uppercase; }.purpose-block p:not(.eyebrow), .package-copy > p:not(.eyebrow) { max-width: 48rem; margin: 2rem 0 0; color: var(--ink-2); font-size: 1.08rem; }
.purpose-block .purpose-boundary { color: var(--chart); font: 600 .7rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.flight-loop { background: #dce7f1; color: #102033; }.flight-loop .wrap { padding-block: 1.5rem 0; }.section-label { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; padding-bottom: 1.5rem; }.section-label .eyebrow { margin: 0; color: #255786; }.section-label > p:last-child { margin: 0; color: #506174; font-size: .9rem; }.loop-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #8fa6bb; }.loop-steps li { display: grid; grid-template-rows: auto 1fr auto; min-height: 22rem; padding: 1.5rem; border-right: 1px solid #8fa6bb; }.loop-steps li:first-child { border-left: 1px solid #8fa6bb; }.loop-number { color: #366b9c; font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; }.loop-steps h3 { margin: 3.5rem 0 .9rem; font: 700 clamp(1.45rem, 2.5vw, 2.3rem)/.95 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; }.loop-steps p { margin: 0; max-width: 23rem; color: #4d6175; font-size: .9rem; }.loop-steps a { align-self: end; color: #163d63; font: 700 .68rem/1.2 var(--f-mono); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }.loop-review { background: #133b60; }.loop-review .loop-number, .loop-review h3, .loop-review a { color: #bbdcfa; }.loop-review p { color: #b2c5d7; }
.package-block { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; padding-block: clamp(5rem, 10vw, 10rem); }.package-index { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; color: var(--ink-2); font: 600 .65rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }.package-index b { color: var(--chart); font-size: 2.4rem; font-weight: 400; }.review-feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; margin-bottom: clamp(5rem, 10vw, 9rem); padding: clamp(2rem, 6vw, 5rem); background: #122638; border: 1px solid #345774; }.review-feature-copy > p:not(.eyebrow) { max-width: 38rem; margin: 1.5rem 0 2rem; color: #b9c6d2; }.review-scope { position: relative; display: grid; align-content: space-between; min-height: 20rem; overflow: hidden; padding: 1rem; border: 1px solid rgba(186,218,246,.4); color: #afcbea; font: 600 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }.scope-grid { position: absolute; inset: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); transform: rotate(-16deg) scale(1.25); }.scope-grid i { border-right: 1px solid rgba(174,211,244,.22); border-bottom: 1px solid rgba(174,211,244,.22); }.review-scope p { z-index: 1; justify-self: end; margin: 0; color: #dcecff; font: 700 clamp(1.7rem, 3vw, 3rem)/.9 var(--f-display); letter-spacing: -.04em; text-align: right; }.review-scope p b { color: #87bee9; }
@media (max-width: 46rem) { .landing-hero-grid { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "brief" "plot"; gap: 1.5rem; min-height: auto; }.landing-title { padding-block: 2rem; }.landing-title h1 { font-size: clamp(3.4rem, 16vw, 5.5rem); }.formation-plot { height: 13rem; margin-inline: -1.5rem; }.purpose-block, .package-block, .review-feature { grid-template-columns: 1fr; gap: 2rem; }.loop-steps { grid-template-columns: 1fr; }.loop-steps li { min-height: 15rem; border-left: 1px solid #8fa6bb; border-bottom: 1px solid #8fa6bb; }.loop-steps h3 { margin-top: 2rem; }.section-label { display: block; }.section-label > p:last-child { margin-top: .75rem; }.review-scope { min-height: 15rem; } }

/* The session is rendered by the server before the navigation paints. */
.member-nav { display: none; }
body.is-signed-in .member-nav { display: flex; }
body.is-signed-in .visitor-nav, body.is-signed-in .public-signin { display: none; }
.account-page { padding-block: 3rem; max-width: 52rem; }
.account-page h1 { margin-bottom: 1.5rem; }
.account-page section { margin-block: 2rem; }
.account-page dt { font-weight: 600; margin-top: 1rem; }
.account-page dd { margin: .3rem 0; overflow-wrap: anywhere; }
#signout-error { padding: .5rem; max-width: 18rem; white-space: normal; }
@media (max-width: 46rem) {
  .masthead-in { flex-wrap: wrap; }
  .member-nav { order: 3; width: 100%; margin: .7rem 0 0; }
}
@media (max-width: 46rem) {
  .member-nav { column-gap: 1rem; row-gap: 0; }
  .member-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .5rem; }
}