/* ============================================================================
   ORIGIN OPS SHELL · ops.css
   The operator surfaces' shared layer ON TOP of origin.css (Volume I).
   Load order on every operator page:
     fonts (Google) → /origin.css → page <style> → /ops.css → /ops-nav.js
   ops.css loads LAST so shared shell rules win ties against page styles.
   Never define a colour, family, or radius here except via origin.css tokens.
   The five laws apply: hard-left · label-above-headline · zero radius ·
   rules-never-shadows · stone breathes.
   ============================================================================ */

/* ---- the shell frame ---- */
.ops-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 110px; }

/* ---- THE DESKS BAR — one header across every operator page ---- */
.ops-head {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.ops-head .wordmark { font-size: 22px; }
/* WRAPS, NEVER SCROLLS. A scrollbar inside a page header is a scrollbar in the
   one place a person expects everything to be visible: half the desks were
   hidden behind it, on every operator page, and nothing said so. It wraps onto
   a second line instead, which costs a few pixels and hides nothing. */
.ops-desks { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ops-desks a {
  font-family: var(--font-data); font-weight: 500; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-label); padding: 10px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.ops-desks a:hover { color: var(--ink); }
.ops-desks a.on { color: var(--ink); border-bottom-color: var(--magenta); }
.ops-desks .sep { width: 1px; height: 16px; background: var(--line); margin: 0 8px; flex: none; }

/* ---- shared operator components (square, hairline, canon type) ---- */
.ops-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--stone); }
.ops-panel.raised { background: var(--field-bg); }
.ops-label { font-family: var(--font-data); font-weight: 500; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-label); }
.ops-chip {
  font-family: var(--font-data); font-weight: 500; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.ops-chip.hot { background: var(--magenta); border-color: var(--magenta); color: var(--accent-ink); }
.ops-chip.inkfill { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* the serif signature inside display type (canon: Instrument Serif Italic) */
.sig { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--magenta); letter-spacing: 0; }

/* ---- LAW 3 ENFORCEMENT — zero radius on the operator surfaces.
   Pages built before the revamp carried rounded cards; this flattens any
   stragglers so nothing ships rounded again. Pills are for the mark alone. ---- */
.card, .tile, .vcard, .lawblock, .calcard, .calpost, .wireghost, .spec, .save,
.artcard, .quiet, .bench, .pad, .logrow, .shelfitem, .questions,
button, input, textarea, select { border-radius: var(--radius) !important; }
.wordmark .pulse { border-radius: 50% !important; } /* the one licensed circle: the heartbeat on the logo's own dot */

/* ---- canon typography on operator basics ---- */
body { font-family: var(--font-body); }
h1, h2 { font-weight: 800; letter-spacing: -.035em; }
.kicker, .card .meta, .meta { font-family: var(--font-data); font-weight: 500; }

/* mobile: the desks bar scrolls, never wraps the page */
@media (max-width: 680px) { .ops-head { flex-wrap: wrap; } .ops-desks { width: 100%; } }