/* PCRZERO operations portal (#44).

   Design book: pcrzero-www/docs/design-book.md. Tokens below are TRANSCRIBED
   from pcrzero-www/src/styles/tokens.css @ 585bc8c, not invented. The book's
   rule is one canonical copy, never mirrored — and it is honoured in spirit
   here the same way #32's SVG exports honour it: this file leaves the site, so
   it carries literal values, and tokens.css remains the single source. If the
   palette moves there, it moves here in the same commit or this file is wrong.

   The law this file obeys: COLOUR IS A VERDICT, NEVER A DECORATION.
   --verdict is spent on exactly one word ("Clear") and only for a real
   all-clear; --breach only on a real failure. Statuses are differentiated by
   WORD, never by hue. border-radius: 0. No shadows. No gradients. */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --vacuum: #04070c;
  --vessel: #0b111a;
  --field: #3d4d63;
  --resolved: #c7d3e2;
  --verdict: #25d98a;
  --breach: #ff4030;

  --fg: var(--resolved);
  --bg: var(--vacuum);
  --fg-dim: color-mix(in srgb, var(--resolved) 52%, var(--vacuum));
  --rule: color-mix(in srgb, var(--field) 42%, transparent);
  --rule-strong: color-mix(in srgb, var(--field) 72%, transparent);

  --display: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-body: 1rem;
  --t-small: 0.845rem;
  --t-micro: 0.72rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 74rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.8rem var(--gutter) 4rem;
}

main.narrow {
  max-width: min(32rem, 100%);
}

/* ── Top bar ───────────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 1.3rem;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.mark {
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-decoration: none;
}

/* The one permitted non-verdict green: the wordmark zero. Design book §7. */
.zero {
  color: var(--verdict);
}

.who {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--fg-dim);
}

.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg-dim);
  font-family: var(--data);
  font-size: var(--t-micro);
  cursor: pointer;
  text-decoration: underline;
}

.link:hover {
  color: var(--fg);
}

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

h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: -0.01em;
  margin: 1.4rem 0 0.4rem;
}

h2 {
  font-family: var(--data);
  font-weight: 500;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.lede {
  font-family: var(--data);
  font-size: var(--t-micro);
  color: var(--fg-dim);
  margin: 0 0 1.8rem;
  overflow-wrap: anywhere;
}

.hint {
  font-size: var(--t-small);
  color: var(--fg-dim);
  margin: 0.4rem 0 1.3rem;
  max-width: 52rem;
  overflow-wrap: anywhere;
}

.mono {
  font-family: var(--data);
}

/* ── Headline figures ──────────────────────────────────────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.fig {
  background: var(--vessel);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fig .label {
  font-family: var(--data);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}

.fig .value {
  font-family: var(--data);
  font-size: 1.7rem;
  line-height: 1.1;
}

.fig .note {
  font-family: var(--data);
  font-size: var(--t-micro);
  color: var(--fg-dim);
}

/* An assumption or a shortfall the reader must not miss. Not a hue — a rule
   under the words, in the same steel as everything else. */
.flag {
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

th {
  font-family: var(--data);
  font-weight: 500;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.r {
  text-align: right;
}

/* Licence ARNs are long. Truncate with the full value in a title attribute
   rather than wrapping, so rows stay scannable. */
.arn {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  font-family: var(--data);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Differentiated by word and weight, never by a new hue. `pending` and
   `suspended` are dimmed rather than coloured; only a genuine failure state
   would earn --breach, and a pending subscription is not a failure — it is a
   thing to go and finish. */
.status-subscribed {
  color: var(--fg);
}

.status-pending,
.status-suspended,
.status-unsubscribed {
  color: var(--fg-dim);
}

.empty,
.problems,
.ok,
.breach {
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

.empty {
  color: var(--fg-dim);
  padding: 1.3rem 0.7rem;
}

.problems {
  margin: 0;
  padding-left: 1.1rem;
}

.problems li {
  margin-bottom: 0.4rem;
  color: var(--fg);
}

/* The single verdict word on the page, and only on a real all-clear. */
.verdict {
  color: var(--verdict);
  font-family: var(--data);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Only ever a real failure. */
.breach {
  color: var(--breach);
}

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

.login {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.8rem 0;
  max-width: min(22rem, 100%);
}

.login label {
  font-family: var(--data);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}

input[type='email'] {
  background: var(--vessel);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--data);
  font-size: var(--t-body);
  padding: 0.6rem 0.7rem;
  width: 100%;
  max-width: 100%;
}

/* Focus ring in steel, NOT --verdict. A focus ring is not a verdict, and the
   book's colour law admits no decorative use of the accent — appendix
   deviation 4 records exactly this mistake being made once already with a nav
   hover. --fg is high-contrast against every surface here, so nothing is lost
   in accessibility by obeying the rule. */
input[type='email']:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

/* Scoped to the login form deliberately. Unscoped, this rule out-specifies
   .link and turned the header's quiet "sign out" into a bordered uppercase
   button, because that control is also a submit inside a form. */
.login button[type='submit'] {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--data);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  align-self: flex-start;
}

.login button[type='submit']:hover {
  border-color: var(--fg-dim);
}

a {
  color: var(--fg);
  text-decoration-color: var(--rule-strong);
}

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

.foot {
  margin-top: 3.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  color: var(--fg-dim);
  max-width: 52rem;
}

.foot p {
  margin: 0 0 0.6rem;
}

@media (max-width: 40rem) {
  .arn {
    max-width: 9rem;
  }
  .fig .value {
    font-size: 1.4rem;
  }
}

/* ── Traffic bars + secondary fold (#44 lockdown re-cut) ───────────────── */

/* The bar is decoration; the number beside it is the fact. Dimmed so it reads
   as texture rather than competing with the value, and never coloured — a bar
   is not a verdict. NAMED .sparkbar, not .bar: .bar is already the header, and
   reusing it applied display:flex to these table cells. */
.sparkbar {
  color: var(--field);
  letter-spacing: -0.12em;
  white-space: nowrap;
}

.spark td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Revenue moved behind a fold: secondary by instruction, not removed. */
.fold {
  margin-top: 2.2rem;
  border: 1px solid var(--rule);
  background: var(--vessel);
  padding: 0.9rem 1.1rem;
}

.fold > summary {
  font-family: var(--data);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  cursor: pointer;
}

.fold[open] > summary {
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* ── Customer console additions (#46) ──────────────────────────────────── */

.sparkbar { color: var(--field); letter-spacing: -0.12em; white-space: nowrap; }
.spark td { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* The shown-once secret. Bordered so it reads as something to act on now, and
   never coloured: a key is not a verdict. */
.shown-once {
  border: 1px solid var(--rule-strong);
  background: var(--vessel);
  padding: 1.1rem;
  margin: 1.3rem 0;
}
.shown-once .label {
  font-family: var(--data);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin: 0 0 0.6rem;
}
.secret { font-size: var(--t-small); word-break: break-all; margin: 0 0 0.6rem; color: var(--fg); }
.inline { display: inline; }
.create { margin: 1.3rem 0 0.4rem; }
.create button[type='submit'] {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--data);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}
.create button[type='submit']:hover { border-color: var(--fg-dim); }

/* ── Console nav + month pager (#57) ───────────────────────────────────── */

/* Quiet words in the bar, not buttons. The current page is a span in full
   ink — the "you are here" is weight, never a hue. */
.nav {
  display: flex;
  gap: 1.1rem;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nav a {
  color: var(--fg-dim);
  text-decoration: none;
}
.nav a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}
.nav-here {
  color: var(--fg);
}

.pager {
  display: flex;
  gap: 1.1rem;
  font-size: var(--t-small);
  margin: 0 0 1.3rem;
}
.pager a {
  color: var(--fg-dim);
  text-decoration-color: var(--rule-strong);
}
.pager a:hover {
  color: var(--fg);
}
.pager-now {
  color: var(--fg);
}

@media (max-width: 40rem) {
  .bar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .nav {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem 0.9rem;
  }
  .who {
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

/* ── Getting started (#46) ─────────────────────────────────────────────────
   The code block is the SAME object as the callout — flat vessel, one hairline,
   square corners — differentiated by the data face and nothing else, per the
   design book's rule that categories are words and shapes, never hues.
   overflow-x on the block itself, so a long curl scrolls inside its panel and
   the page never scrolls sideways (§11). */
.code {
  background: color-mix(in srgb, var(--vessel) 72%, transparent);
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.85rem 1.1rem;
  margin: 0.9rem 0 1.3rem;
  font-family: var(--data);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
}
/* Placeholders the customer must replace. Dimmed, never coloured: this is an
   instruction to the reader, not a verdict about anything. */
.code .dim {
  color: var(--fg-dim);
}
/* Inline identifiers in prose take the data face and no box — a border around
   one word is decoration. */
main code {
  font-family: var(--data);
  font-size: 0.95em;
  color: var(--fg);
}

/* ── #178 card checkout ───────────────────────────────────────────────────
   The card fields themselves live in Square's iframe and are not ours to
   style; this styles only our frame around them: the mount's rhythm and the
   pay button, which takes the house button voice. */
#card-container {
  margin-block: 1.4rem 1.2rem;
}
#pay {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--data);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
#pay:hover { border-color: var(--fg-dim); }
#pay:disabled {
  color: var(--fg-dim);
  border-color: var(--rule);
  cursor: default;
}
#sq-checkout,
#checkout-status {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#sq-checkout table {
  width: 100%;
}