/* Primitives, shell chrome and shared components.

   Two rules are load-bearing in this file. Every colour comes from tokens.css,
   so the site cannot grow a second accent or a second border grey; and nothing
   is styled inline, because the content-security policy is `style-src 'self'`.
   A test fails the image build if either rule is broken. */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
}

h1 { letter-spacing: -0.03em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Anything that lines up in a column: labels, run ids, units, counters. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow,
.wrap--faq { max-width: var(--narrow); }

.section {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--border);
}

.section--alt { background: var(--bg-alt); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

/* ------------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--scrim);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-1);
  flex: none;
}

.brand:hover { text-decoration: none; }
.brand__word { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; }
.brand__word-accent { color: var(--accent); }
.brand__mark { display: flex; }

.topnav { margin-left: auto; min-width: 0; }

.topnav__list {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.topnav__link {
  display: inline-block;
  padding-block: 2px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.topnav__link:hover { color: var(--text-1); text-decoration: none; }

.topnav__link[aria-current="true"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.topbar__cta { flex: none; }

@media (max-width: 900px) {
  .topbar__inner {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-3);
  }
  .topnav {
    order: 3;
    width: 100%;
    margin-left: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav__list { flex-wrap: nowrap; gap: var(--sp-5); padding-block: 2px; }
  .topbar__cta { margin-left: auto; }
}

/* Below the tablet breakpoint the navigation wraps onto a second row instead of
   scrolling sideways. Five short links fit in two rows, and a link that is
   scrolled out of view is a link the reader does not have. */
@media (max-width: 560px) {
  .topnav__list { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
}

/* ------------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) var(--sp-5);
  font-size: var(--fs-sm);
}

.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(1.75rem, 4vw, 4rem);
}

@media (max-width: 760px) {
  .foot__inner { grid-template-columns: minmax(0, 1fr); }
}

.foot__word {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-1);
}

.foot__note { margin-top: var(--sp-2); color: var(--text-3); max-width: 34ch; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

@media (max-width: 560px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.foot__head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

.foot__col li + li { margin-top: var(--sp-2); }
.foot__col a { color: var(--text-2); }
.foot__col a:hover { color: var(--accent); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.foot__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* ------------------------------------------------------------------ headings */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.eyebrow__num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.sec-head {
  display: grid;
  gap: var(--sp-3);
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.sec-title { font-size: var(--fs-title); }
.sec-lede { color: var(--text-2); max-width: 60ch; }

.page-title { font-size: var(--fs-h1); }
.page-lede { color: var(--text-2); margin-top: var(--sp-3); max-width: 60ch; }

/* ------------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover { text-decoration: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text-1);
  background: transparent;
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--sm { padding: 6px 12px; font-size: var(--fs-micro); }

/* ------------------------------------------------- signals, dots and meters */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-header);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  white-space: nowrap;
}

.status--ok { background: var(--signal-ok-wash); color: var(--signal-ok); }
.status--run { background: var(--accent-wash); color: var(--accent); }
.status--wait { background: var(--signal-warn-wash); color: var(--signal-warn); }
.status--stop { background: var(--signal-alert-wash); color: var(--signal-alert); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-idle);
  flex: none;
}

.dot--ok { background: var(--signal-ok); }
.dot--run { background: var(--accent); }
.dot--wait { background: var(--signal-warn); }
.dot--stop { background: var(--signal-alert); }

/* A tool-evidence tag: the observation a claim is standing on. */
.chip {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-header);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.meter { display: grid; gap: var(--sp-2); }

.meter__label {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.meter__value { color: var(--text-1); font-variant-numeric: tabular-nums; }

.meter__bar {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--panel-sunk);
  overflow: hidden;
}

.meter__bar::-webkit-progress-bar {
  background: var(--panel-sunk);
  border-radius: 3px;
}

.meter__bar::-webkit-progress-value {
  background: var(--accent);
  border-radius: 3px;
}

.meter__bar::-moz-progress-bar {
  background: var(--accent);
  border-radius: 3px;
}

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

.panel {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.panel--ok {
  border-color: var(--signal-ok);
  border-left-width: 3px;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.alert {
  padding: var(--sp-4);
  border: 1px solid var(--signal-alert);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--signal-alert-wash);
  color: var(--text-1);
  margin-bottom: var(--sp-5);
}

.alert__title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signal-alert);
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------------------- forms */

.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }

.field__label { color: var(--text-1); font-size: var(--fs-sm); font-weight: 600; }

.field__optional {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-sunk);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-sm);
}

.field__input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.field__input--bad { border-color: var(--signal-alert); }
.field__input--select { max-width: 100%; }
.field__area { resize: vertical; min-height: 8rem; }

.field__help { color: var(--text-3); font-size: var(--fs-xs); }
.field__error { color: var(--signal-alert); font-size: var(--fs-xs); font-weight: 600; }

.form__actions { display: grid; gap: var(--sp-3); justify-items: start; }
.form__note { color: var(--text-3); font-size: var(--fs-xs); max-width: 52ch; }

/* Honeypot: off-screen rather than hidden, so a naive bot still fills it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------- prose */

.prose { display: grid; gap: var(--sp-6); }
.prose__block { display: grid; gap: var(--sp-2); }
.prose__head { font-size: var(--fs-lg); }
.prose__body { color: var(--text-2); max-width: 68ch; }

.prose__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------- error page */

.error { display: grid; gap: var(--sp-3); justify-items: start; }

.error__code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--accent);
}

.error__hint { color: var(--text-3); font-size: var(--fs-sm); max-width: 58ch; }

/* ------------------------------------------------------------------ terminal */

.start__term {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-sunk);
  overflow: hidden;
  min-width: 0;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--panel-header);
}

.term__dots { display: inline-flex; gap: 5px; flex: none; }
.term__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  display: block;
}

.term__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: auto;
}

.code { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.code__row { padding-block: var(--sp-3); border-bottom: 1px dashed var(--border); }
.code__row:last-child { border-bottom: 0; }

.code__cmd {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code__prompt { color: var(--accent); font-weight: 700; }

.code__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.glyph { width: 24px; height: 24px; color: var(--text-3); }

/* ------------------------------------------------------ the console rail */

/* A one-line reading of the running service, directly under the header. Every
   value is rendered by the server, so the rail is correct with JavaScript
   disabled and it cannot drift from what the app actually is. */
.sysbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.sysbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-3);
}

.sysbar__lead {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal-ok);
  white-space: nowrap;
}

.sysbar__lead:hover { color: var(--signal-ok); }

.sysbar__cells {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.sysbar__cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.sysbar__key {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.sysbar__value {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.sysbar__note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

@media (max-width: 700px) {
  .sysbar__note { margin-left: 0; }
}

/* The same sentence is in the footer, which is one scroll away, so on a phone
   the rail keeps its data and gives up the disclaimer. */
@media (max-width: 560px) {
  .sysbar__note { display: none; }
}

/* --------------------------------------------------------- panel headings */

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--panel-header);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-1);
}

.panel__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* --------------------------------------------------------- neutral signal */

/* The states the release gate can be in that no status chip had needed yet: a
   step that does not apply, and an observation that is real but not good news. */
.status--idle { background: var(--signal-idle-wash); color: var(--signal-idle); }
.dot--idle { background: var(--signal-idle); }

.chip--warn { border-color: var(--signal-warn); color: var(--signal-warn); }
.chip--ok { border-color: var(--signal-ok); color: var(--signal-ok); }

/* The address a document is served at, and the version of the copy in it. */
.doc-meta {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
  overflow-wrap: anywhere;
}

/* The instrument rows set their own rhythm; the browser's default 1em under a
   definition list was pure noise on top of it. */
dl { margin: 0; }