/* Thermal Printer Console — industrial telemetry / Swiss editorial system.

   Two typefaces carry the whole hierarchy: a tight grotesk for anything
   large, a mono for anything small and technical. The size gap between
   the two is the design — there is deliberately no medium-sized layer in
   between. Color is held back on purpose: ink and navy grounds, bone
   type, and orange reserved for the one action or state that matters on
   a screen, the way safety labeling reads on machinery.

   Grounds, lines and text are semantic tokens (--ground, --line, --text)
   so a page can re-point them to flip theme without restating every
   rule; friends.css does exactly that for the bone-colored friends page. */

:root {
  /* palette */
  --ink: #202321;
  --ink-2: #191c1a;
  --ink-3: #2b2f2c;
  --bone: #efece3;
  --sage: #c9dcc8;
  --gray: #aeb1ac;
  --taupe: #766754;
  --signal-orange: #eb5e28;
  --signal-coral: #f04f43;
  /* The reference orange only reaches 4.1:1 against ink. Fills that carry
     small dark type (buttons, the pending panel) use this lighter cut so
     the label clears WCAG AA at 5:1; everything graphic keeps the true hue. */
  --signal-orange-fill: #f0662f;
  /* Same story for coral: small coral type needs a lighter cut on dark
     grounds and a much darker one on bone. Marks and fills keep the hue. */
  --coral-text: #f3665b;
  /* And again for orange doing text or indicator duty (focus rings,
     index counters, status lamps): the true hue reads 4.7:1 on ink but
     only 2.9:1 on bone, so light grounds re-point this to a darker cut.
     Pure graphics (panel tabs, rails, underlines on ink) keep the hue. */
  --signal-orange-text: var(--signal-orange);

  /* Selection is a state flip, not a highlight: dark grounds wash the
     ground orange and push the text to full bone; light grounds re-point
     these to a solid ink invert so the flipped text stays legible. */
  --sel-ground: rgba(235, 94, 40, .35);
  --sel-text: var(--bone);
  --danger: var(--signal-coral);

  --border-light: rgba(239, 236, 227, .18);
  --border-light-strong: rgba(239, 236, 227, .42);
  --border-dark: rgba(32, 35, 33, .22);
  --border-dark-strong: rgba(32, 35, 33, .6);

  /* semantic (dark ground defaults) */
  --ground: var(--ink);
  --ground-2: var(--ink-2);
  --ground-3: var(--ink-3);
  --line: var(--border-light);
  --line-strong: var(--border-light-strong);
  --text: var(--bone);
  --text-muted: #aeb1ac;
  --text-dim: #8f918c;
  --mark: rgba(239, 236, 227, .35);

  --paper: #f3f0e7;
  --paper-ink: #202321;

  --sans: "Space Grotesk", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --gutter: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 150ms;
  --med: 220ms;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  color-scheme: dark;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

::selection { background: var(--sel-ground); color: var(--sel-text); }

h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--ground-3);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--text);
}

/* ---------- primitives ---------- */

/* Display + headline: the two oversized layers. Everything else is
   either UI-sized sans or tiny mono. */
.display {
  font-family: var(--sans);
  font-size: clamp(64px, 10vw, 160px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.05em;
}
.headline {
  font-family: var(--sans);
  font-size: clamp(38px, 5vw, 84px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.04em;
}

/* Technical label: the mono caption that sits next to every module. */
.t-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Index number: 01, 02, A-03. Decorative — always aria-hidden in markup,
   which is what lets it sit in orange below body-text contrast. */
.idx {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--signal-orange-text);
  font-variant-numeric: tabular-nums;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Metric: a number big enough to be a graphic, with a mono caption. */
.metric { display: grid; gap: 6px; }
.metric-num {
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

/* Status indicator: square lamp + mono text. data-state drives the lamp. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--text-dim);
}
.status[data-state="ready"] { color: var(--text); }
.status[data-state="ready"]::before { background: var(--sage); }
.status[data-state="loading"],
.status[data-state="pending"] { color: var(--text); }
.status[data-state="loading"]::before,
.status[data-state="pending"]::before { background: var(--signal-orange-text); animation: lamp 900ms steps(2, end) infinite; }
.status[data-state="error"] { color: var(--text); }
.status[data-state="error"]::before { background: var(--signal-coral); }
.status[data-state="dry"] { color: var(--text); }
.status[data-state="dry"]::before { background: var(--signal-orange-text); }
@keyframes lamp { 50% { opacity: .25; } }

/* Divider with an optional label: `<div class="rule-label">name</div>`. */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}
.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Data panel: a border-defined region, never a floating card. */
.module { border: 1px solid var(--line); min-width: 0; }
.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* Registration marks on two opposite corners of a region. */
.reg { position: relative; }
.reg::before, .reg::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) center / 100% 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 1px 100% no-repeat;
}
.reg::before { top: 6px; left: 6px; }
.reg::after { bottom: 6px; right: 6px; }

/* Technical grid: a faint dot matrix behind a region. */
.tgrid {
  background-image: radial-gradient(var(--mark) .8px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 0 0;
}

.warn { color: var(--coral-text); }

/* Environmental numeral: one oversized index per screen, low contrast,
   allowed to crop off the viewport edge and sit behind panels. */
.bg-idx {
  position: absolute;
  z-index: 0;
  top: -.12em;
  right: calc(-1 * var(--gutter) - .1em);
  font-family: var(--sans);
  font-size: clamp(220px, 36vh, 460px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.07em;
  color: var(--bg-idx, rgba(239, 236, 227, .045));
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Projecting tab on a panel's top edge: the one piece of signal paint a
   module gets. Parent must be position: relative. */
.panel-tab {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: -1px;
  height: 14px;
  padding: 0 8px;
  background: var(--signal-orange);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Corner cut on a panel's top-right: a triangle of the surrounding ground
   with a hairline across the diagonal. --cut-ground is the colour behind
   the panel, not inside it. */
.cut { position: relative; }
.cut::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(225deg, var(--cut-ground, var(--ground)) 0 50%, var(--line-strong) 50% calc(50% + 1.4px), transparent calc(50% + 1.4px));
}

/* Vertical alignment rail with a crosshair where it meets a rule. */
.rail {
  position: relative;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.rail::before {
  content: "+";
  position: absolute;
  top: -7px;
  left: -4px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--ground);
}
.rail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.top-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--gutter);
}
.top-bar > .account-actions,
.top-bar > .who {
  align-self: stretch;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: max-content; }
.mark { display: block; color: var(--text); flex: none; }
.brand-copy { display: grid; gap: 3px; }
.title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sub .status { font-size: inherit; letter-spacing: inherit; }
.top-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.top-nav > span {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.account-actions { display: flex; align-items: center; gap: 14px; min-width: max-content; }

.tabs {
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* The active underline hangs 1px over the header rule. A sideways-scrolling
     strip is a scroll container on both axes, so that 1px has to live inside
     the box (bottom padding, pulled back by the margin) or it becomes a 1px
     vertical scroll that bounces on touch screens. */
  padding: 0 var(--gutter) 1px;
  margin-bottom: -1px;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.tab:first-child { padding-left: 0; }
.tab .tab-idx {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .06em;
  transition: color var(--fast) var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--signal-orange);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--med) var(--ease);
}
.tab:first-child::after { left: 0; }
.tab:hover:not(:disabled) { color: var(--text); background: transparent; }
.tab.active { color: var(--text); }
.tab.active .tab-idx { color: var(--signal-orange); }
.tab.active::after { scale: 1 1; }
.tab:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: -2px; }

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

/* main is the full-width canvas: the 12-column content centres inside it
   via computed gutters, and overflow: clip crops the oversized numerals
   and edge-to-edge rules at the viewport without creating a scroll
   container (so the sticky output module still works) or a sideways
   scroll on phones. */
main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
  padding: 40px max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter))) 120px;
  overflow: clip;
  align-items: start;
}

.panel { min-width: 0; }
/* Explicit rows: the rail also lives in column 9 of row one, and
   auto-placement would otherwise bump the output module down a row. */
.controls { grid-column: 1 / span 8; grid-row: 1; }
.preview { grid-column: 9 / -1; grid-row: 1; }
main > .rail {
  grid-column: 9;
  grid-row: 1;
  justify-self: start;
  align-self: stretch;
  margin-left: calc(var(--gutter) / -2);
  margin-top: -40px;
}
main > .rail::before { top: -1px; }
/* Side rail on an engineered panel: a hairline in the gutter that climbs
   to the rule above, with one block of signal paint where it meets the
   panel's top edge. Parent must be position: relative. */
.side-rail {
  position: absolute;
  left: -20px;
  top: -40px;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
  pointer-events: none;
}
.side-rail::before {
  content: "";
  position: absolute;
  top: 40px;
  left: -1px;
  width: 3px;
  height: 72px;
  background: var(--signal-orange);
}
.side-rail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--line-strong);
}

/* The compose editor is the console's engineered input object. */
.editor { position: relative; margin-top: 24px; }
.editor textarea { margin-top: 0; border-color: var(--line-strong); }
.editor .side-rail { top: -64px; }
.editor .side-rail::before { top: 64px; }

.tabpane { display: none; counter-reset: sec det; }
.tabpane.active { display: block; }

/* Every pane opens like a spread: kicker, oversized title, metadata
   bottom-right, then a rule. */
.pane-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 36%);
  gap: 16px 32px;
  align-items: end;
  padding-bottom: 24px;
  margin-bottom: 40px;
}
/* The rule runs from the left edge of the viewport to the column edge. */
.pane-head::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-strong);
}
.pane-head .bg-idx {
  top: -.22em;
  right: -.02em;
  font-size: clamp(160px, 26vh, 320px);
}
.pane-head > :not(.bg-idx) { position: relative; z-index: 1; }
.pane-head .kicker { grid-column: 1 / -1; }
.pane-head h2 {
  grid-column: 1;
  margin: 0 0 -.08em;
  font-family: var(--sans);
  font-size: clamp(48px, 6vw, 104px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--text);
}
.pane-head .help { grid-column: 2; }
.help {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--text-muted);
  max-width: 60ch;
}
.help code { font-size: 10.5px; white-space: nowrap; }

h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
h3.inline { display: inline-block; margin: 0; font-size: 16px; }

/* ---------- inputs ---------- */

label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 16px;
}
label.chk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}
input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--signal-orange);
}
input[type=text],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=file],
input[type=password],
select,
textarea {
  width: 100%;
  background: var(--ground-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-top: 6px;
  outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* Placeholders carry real instructions, so they sit at muted, not dim:
   dim only clears AA on the dark grounds. */
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--signal-orange-text);
  box-shadow: 0 0 0 1px var(--signal-orange-text);
}
textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.45;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23aeb1ac' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  margin-top: 6px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--line-strong);
}
input[type=range]::-moz-range-track {
  height: 2px;
  background: var(--line-strong);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  margin-top: -6px;
  background: var(--signal-orange);
  border: 0;
  border-radius: 1px;
}
input[type=range]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  background: var(--signal-orange);
  border: 0;
  border-radius: 1px;
}
input[type=range]:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: 2px; }
.v {
  float: right;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.row.mini { gap: 8px 12px; }
.row.mini input { width: 72px; }
.row.mini label { margin-top: 0; display: inline-flex; align-items: center; gap: 8px; }
.row.mini label input { margin-top: 0; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

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

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px 16px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
button:hover:not(:disabled) {
  background: var(--text);
  color: var(--ground);
  border-color: var(--text);
}
button:active:not(:disabled) { translate: 0 1px; }
button:disabled { opacity: .38; cursor: not-allowed; }
/* Ghost buttons start from muted text; the standard disabled fade would
   push them past discoverable. */
button.ghost:disabled { opacity: .5; }
button:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: 2px; }

button.primary {
  background: var(--text);
  color: var(--ground);
  border-color: var(--text);
}
button.primary:hover:not(:disabled) {
  background: transparent;
  color: var(--text);
}
/* Signal: the one orange control per screen. */
button.signal {
  background: var(--signal-orange-fill);
  color: var(--ink);
  border-color: var(--signal-orange-fill);
  font-weight: 700;
}
button.signal:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--signal-orange);
}
button.ghost { color: var(--text-muted); border-color: var(--line-strong); }
button.ghost:hover:not(:disabled) { color: var(--ground); }

.arrow::after {
  content: "\2192";
  font-weight: 500;
  transition: translate var(--fast) var(--ease);
}
.arrow:hover:not(:disabled)::after { translate: 4px 0; }

.tiny { min-height: 32px; padding: 6px 10px; font-size: 10px; }

button.is-busy::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: busy-spin 700ms linear infinite;
}
@keyframes busy-spin { to { rotate: 360deg; } }

/* ---------- widgets grid ---------- */

/* Cells draw their own right/bottom hairlines and the container the
   top/left pair, so a short last row leaves an open slot rather than a
   painted block where no cell exists. */
.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  counter-reset: wid;
}
.wid {
  position: relative;
  min-width: 0;
  background: var(--ground);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Hover flashes a hairline of orange along the top edge, nothing more. */
.wid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--signal-orange);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--med) var(--ease);
}
.wid:hover::before { scale: 1 1; }
/* Each cell carries its own index in the group: A-01, A-02, ... */
.widgets .wid::after {
  counter-increment: wid;
  content: attr(data-prefix) counter(wid, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.widgets[data-group="A"] .wid::after { content: "A-" counter(wid, decimal-leading-zero); }
.widgets[data-group="B"] .wid::after { content: "B-" counter(wid, decimal-leading-zero); }
.widgets[data-group="C"] .wid::after { content: "C-" counter(wid, decimal-leading-zero); }
.widgets[data-group="H"] .wid::after { content: "H-" counter(wid, decimal-leading-zero); }
.wid h3 {
  margin: 0;
  padding-right: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wid p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.wid input, .wid select, .wid textarea { margin-top: 6px; }
.wid button { margin-top: auto; }
.wid label { margin-top: 10px; }
.wid .tiny { padding: 6px 10px; font-size: 10px; }
.wid .muted.tiny { margin-top: -2px; font-size: 10px; }

.chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.chip-row button { margin-top: 0; }

/* Every card ends with the same pair: content-sized preview, then the
   print button taking whatever width is left. */
.action-pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.action-pair button { width: 100%; margin-top: 0; padding-inline: 12px; }

/* Category titles break the grid into indexed groups: small index and
   name on the left, the group letter oversized on the right, the rule
   running between them. */
.wid-section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 40px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wid-section::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  color: var(--signal-orange);
}
.wid-section::after {
  content: attr(data-group);
  margin-left: auto;
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--text-dim);
}
.wid-section + .widgets { margin-top: 0; border-top: 0; }

/* Hero: the morning briefing spread sits above the tile grid with the
   pane's one orange rule. */
.wid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 44%);
  gap: 20px 32px;
  align-items: end;
  padding: 24px;
  margin-top: 4px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--signal-orange);
}
.wid-hero:hover::before { scale: 0 1; }
.wid-hero .wid-head h3 { font-size: 32px; letter-spacing: -.035em; padding-right: 0; }
.wid-hero .wid-head p {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  opacity: .8;
  max-width: 48ch;
}
.wid-hero .grid2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.wid-hero .grid2 label { margin-top: 0; }
.hero-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.hero-actions button { margin-top: 0; width: 100%; }

/* ---------- details (labs, codes) ---------- */

details {
  margin-top: 16px;
  border: 1px solid var(--line);
}
details[open] { padding-bottom: 20px; }
details > :not(summary) { margin-left: 16px; margin-right: 16px; }
summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  width: 12px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--signal-orange-text);
}
details[open] > summary::before { content: "\2212"; }
summary::after {
  counter-increment: det;
  content: "L-" counter(det, decimal-leading-zero);
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--text-muted);
}
details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
[data-pane="codes"] summary::after { content: "C-" counter(det, decimal-leading-zero); }
summary:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: -2px; }

.ritem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 88px 40px;
  gap: 6px;
  margin-top: 6px;
}
.ritem input { margin: 0; }
.r-del {
  padding: 4px 8px;
  min-height: 40px;
  font-size: 15px;
  color: var(--coral-text);
}
.r-del:hover:not(:disabled) { background: var(--signal-coral); border-color: var(--signal-coral); color: var(--ink); }
#r-add { margin-top: 10px; }

/* ---------- drop zone ---------- */

.drop {
  margin-top: 16px;
  padding: 40px 24px;
  border: 1px dashed var(--line-strong);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.drop:hover, .drop:focus-visible, .drop.drag {
  border-color: var(--signal-orange);
  background-color: rgba(235, 94, 40, .05);
  outline: none;
}
.drop-icon { display: block; margin: 0 auto 12px; color: var(--signal-orange); }
.drop-inner strong {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.drop-inner .muted {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- preview module ---------- */

.preview {
  --cut-ground: var(--ink);
  position: sticky;
  top: 126px;
  padding: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.preview-head { padding-right: 28px; }
.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.preview-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
}
.preview-state { margin-top: 2px; }
.preview-body { padding: 20px; }
.preview[aria-busy="true"] .paper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 32%;
  background: var(--signal-orange);
  animation: preview-progress 900ms ease-in-out infinite alternate;
  z-index: 2;
}

.paper {
  --sel-ground: var(--ink);
  --sel-text: var(--paper);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 24px 18px 0;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  border-radius: 2px 2px 0 0;
}
.paper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent);
}
.paper pre {
  margin: 0;
  min-height: 220px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 12px;
}
.paper pre:empty { min-height: 0; }
.tear {
  height: 18px;
  margin: 8px -18px 0;
  background:
    linear-gradient(135deg, var(--paper) 48%, transparent 52%) 0 0 / 14px 18px,
    linear-gradient(45deg, var(--paper) 48%, transparent 52%) 7px 0 / 14px 18px;
  background-repeat: repeat-x;
}

.imgwrap { margin-top: 10px; text-align: center; }
.imgwrap img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  image-rendering: pixelated;
  background: #fff;
  outline: 1px solid rgba(0, 0, 0, .12);
  outline-offset: -1px;
}
.imgwrap img.preview-result { animation: preview-result-in var(--med) var(--ease) both; }
/* Repeated puzzle generation needs a stable, immediately readable grid. */
body:has(#pane-arcade.active) .imgwrap img.preview-result { animation: none; }
.imgwrap .segcut {
  height: 14px;
  margin: 6px -14px;
  background:
    linear-gradient(135deg, var(--paper) 48%, transparent 52%) 0 0 / 10px 14px,
    linear-gradient(45deg, var(--paper) 48%, transparent 52%) 5px 0 / 10px 14px;
  background-repeat: repeat-x;
  opacity: .9;
}

@keyframes preview-progress {
  from { translate: 0 0; }
  to { translate: 210% 0; }
}
@keyframes preview-result-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- toast ---------- */

/* ---------- paper arcade ---------- */

.arcade-description { min-height: 3.6em; margin-top: 14px; }
.arcade-actions button { min-height: 44px; }
.arcade-status { font-variant-numeric: tabular-nums; min-height: 3em; }
.arcade-solution-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--signal-orange-text);
  text-underline-offset: 4px;
}
.arcade-solution-link[hidden] { display: none; }
.arcade-solution-link:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: 4px; }
.arcade-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; }

.arcade-solution-page {
  --ground: var(--bone);
  --ground-2: #e5e1d6;
  --ground-3: #dcd8cd;
  --text: var(--ink);
  --text-muted: #5b5d57;
  --text-dim: #676a61;
  --line: var(--border-dark);
  --line-strong: var(--border-dark-strong);
  --sel-ground: var(--ink);
  --sel-text: var(--bone);
  --signal-orange-text: #b13e17;
  background: var(--ground);
  color: var(--text);
}
main.arcade-solution {
  display: block;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 40px 24px 64px;
  line-height: 1.6;
}
.arcade-eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.arcade-solution h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.15; text-wrap: balance; }
.arcade-solution h2 { font-size: 24px; margin: 24px 0 8px; }
.arcade-solution p { text-wrap: pretty; }
.arcade-solution-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  background: white;
  image-rendering: pixelated;
  outline: 1px solid rgba(0, 0, 0, .1);
}
.arcade-solution details { border: 1px solid var(--border-dark); padding: 12px; margin-top: 20px; }
.arcade-solution details > :not(summary) { margin-inline: 0; }
.arcade-solution summary { min-height: 44px; cursor: pointer; display: list-item; }
.arcade-solution summary::after { content: none; }
.arcade-solution summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.arcade-grid { border-collapse: collapse; width: 100%; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.arcade-grid td { text-align: center; border: 1px solid var(--border-dark); padding: 6px 0; }
.arcade-path { font-family: var(--mono); font-size: 13px; }

.toast {
  position: fixed;
  left: var(--gutter);
  bottom: 24px;
  z-index: 100;
  max-width: min(calc(100vw - 2 * var(--gutter)), 440px);
  padding: 12px 16px;
  background: var(--ink-2);
  border: 1px solid var(--border-light-strong);
  border-left: 3px solid var(--bone);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .02em;
  animation: toast-in var(--med) var(--ease);
}
/* Success borrows the ready-lamp green: orange and coral are twenty RGB
   points apart, and "it printed" vs "it failed" must survive a glance. */
.toast.ok { border-left-color: var(--sage); }
.toast.err { border-left-color: var(--signal-coral); }
@keyframes toast-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- tooltips ---------- */

.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
  user-select: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
/* The visible glyph is 16px; this pad brings the touch/hover target to
   40px without moving anything on screen. */
.tip::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.tip:hover, .tip:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--ground);
  outline: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--border-light-strong);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tip:hover::after, .tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Tooltips near the right edge can overflow; flip to right-align. */
.wid:nth-child(3n) .tip::after { left: auto; right: -4px; transform: translateX(0) translateY(4px); }
.wid:nth-child(3n) .tip:hover::after,
.wid:nth-child(3n) .tip:focus-visible::after { transform: translateX(0) translateY(0); }

/* ---------- badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid rgba(240, 79, 67, .5);
  border-radius: 2px;
  color: var(--coral-text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- LED card ---------- */

.led-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 24px;
  margin-top: 6px;
  align-items: start;
}
.led-grid > div { min-width: 0; }
.led-grid label { margin-top: 10px; }
.led-grid input[type=color] {
  display: block;
  width: 72px;
  height: 72px;
  margin-top: 6px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
.led-presets { margin-top: 10px; flex-wrap: wrap; }
.led-preset { font-size: 9px; padding: 5px 8px; min-height: 30px; letter-spacing: .08em; }
.led-grid .row { margin-top: 12px; }
.led-grid .row button { margin-top: 0; }
#led-protocol-note { margin-top: 8px; }
#led-bytes {
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--ground-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
}

/* ---------- hardware + console ---------- */

.wid-wide { grid-column: 1 / -1; }
.muted {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.status-box {
  margin-top: 12px;
  padding: 12px 14px;
  max-height: 180px;
  overflow: auto;
  background: var(--ground-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.console-sub {
  margin: 36px 0 0;
}

.cheat {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.cheat th, .cheat td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cheat th {
  padding-top: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 500;
}
.cheat td:first-child, .cheat th:first-child { padding-left: 0; }
.cheat td:last-child, .cheat th:last-child { padding-right: 0; text-align: right; }
.cheat td.mono { font-family: var(--mono); }
.cheat td.dim { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cheat td:nth-child(3) { font-family: var(--sans); font-size: 13px; }
.cheat tbody tr { transition: background-color var(--fast) var(--ease); }
.cheat tbody tr:hover { background: var(--ground-3); }
.cheat td button { min-height: 30px; padding: 4px 10px; font-size: 9px; }

/* ---------- admin tab ---------- */

.admin-failed-prints {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid rgba(235, 94, 40, .35);
  border-left: 3px solid var(--signal-orange);
  background: rgba(235, 94, 40, .06);
}
.admin-failed-heading { display: flex; align-items: center; gap: 12px; }
.admin-failed-icon { flex: 0 0 auto; color: var(--signal-orange-text); }
.admin-failed-copy { flex: 1; min-width: 0; }
.admin-failed-copy h3 { margin: 0; font-size: 15px; font-weight: 600; }
.admin-failed-copy p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.admin-failed-prints button { margin-top: 0; }
.admin-failed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(235, 94, 40, .2);
}
.admin-failed-row .admin-msg-head { gap: 4px 12px; }
.admin-failed-row .admin-msg-who { font-size: 12px; }
.admin-failed-row .admin-msg-when { margin-left: 0; }
.admin-failed-row .admin-msg-actions { flex-shrink: 0; }

.admin-section { margin-top: 36px; }
.admin-section:first-of-type { margin-top: 0; }

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.admin-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-head h3::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  color: var(--signal-orange);
}

.admin-list { display: flex; flex-direction: column; }
.admin-list .wid {
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.admin-list .wid::before { display: none; }

.admin-empty {
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.admin-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.admin-row-name {
  min-width: 140px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.admin-row-meta {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.admin-row-actions { margin: 0; flex-wrap: wrap; margin-left: auto; }
.admin-row-actions button { margin-top: 0; }

.admin-btn { padding: 5px 10px; font-size: 10px; }
.admin-btn-approve { color: var(--text); border-color: var(--line-strong); }
.admin-btn-block,
.admin-btn-delete { color: var(--coral-text); border-color: rgba(240, 79, 67, .45); }
.admin-btn-block:hover:not(:disabled),
.admin-btn-delete:hover:not(:disabled) {
  background: var(--signal-coral);
  border-color: var(--signal-coral);
  color: var(--ink);
}

.admin-msg { gap: 8px; }
.admin-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.admin-msg-who {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.admin-msg-when {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-msg-status.failed { color: var(--coral-text); }
.admin-msg-body {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--signal-orange);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
}

.admin-print-log > summary { color: var(--text-muted); font-family: var(--mono); font-size: 12px; }
.admin-print-log > summary::after { content: none; }
.admin-print-log button, .admin-failed-prints button { min-height: 44px; }
.admin-log-tools .help { margin-top: 14px; }
.admin-log-confirm { padding: 12px; border: 1px solid var(--line-strong); }
.admin-log-confirm p { margin: 0; font-size: 13px; color: var(--text-muted); }
.admin-msg-actions { margin: 0; }
.admin-msg-content { display: grid; gap: 12px; }
.admin-msg-content img { display: block; max-width: 100%; width: 288px; height: auto; outline: 1px solid rgba(255, 255, 255, .1); }

/* ---------- owner login ---------- */

.admin-login { display: grid; min-height: 100vh; }
.login-spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
  align-content: end;
  min-height: 100vh;
  padding: 32px var(--gutter);
  overflow: clip;
}
.login-art {
  grid-column: 1 / span 7;
  align-self: end;
  min-width: 0;
  overflow: hidden;
}
.login-art .kicker { margin-bottom: 24px; }
/* The word is cropped at the baseline on purpose: it is a graphic, not a
   heading, and the real heading lives in the form. */
.login-display {
  font-family: var(--sans);
  font-size: clamp(96px, 21vw, 320px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.06em;
  margin-left: -.05em;
  margin-bottom: -.1em;
  color: var(--bone);
  white-space: nowrap;
}
/* Keep the dot matrix from running through the small type. */
.login-art .kicker > * { background: var(--ground); }
.login-spread > .rail {
  grid-column: 8;
  grid-row: 1;
  justify-self: start;
  align-self: stretch;
  margin-left: calc(var(--gutter) / -2);
  margin-bottom: -32px;
}
.login-spread > .rail::before { display: none; }
.login-card {
  --cut-ground: var(--ink);
  grid-column: 8 / -1;
  align-self: end;
  padding: 28px 28px 20px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  text-align: left;
}
.login-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.login-card h1 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.login-card p {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
#code {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 8px 0 8px .14em;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--mono);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#code::placeholder { color: var(--text-dim); }
#code:focus { outline: none; border-color: var(--signal-orange-text); box-shadow: none; }
#login-btn { width: 100%; min-height: 48px; margin-top: 20px; }
#login-err {
  min-height: 20px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--coral-text);
}
/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .top-meta { display: none; }
  .controls { grid-column: 1 / span 7; }
  .preview { grid-column: 8 / -1; }
  main > .rail { grid-column: 8; }
  .pane-head { grid-template-columns: 1fr; }
  .pane-head .help { grid-column: 1; }
}

@media (max-width: 900px) {
  main { row-gap: 48px; padding-top: 32px; }
  main > .rail { display: none; }
  .controls, .preview { grid-column: 1 / -1; }
  /* Stays positioned so its projecting tab keeps anchoring to the module. */
  .preview { grid-row: 2; position: relative; top: auto; max-width: 560px; }
  .login-art { grid-column: 1 / -1; }
  .login-card { grid-column: 1 / -1; }
  .login-spread > .rail { display: none; }
}

@media (max-width: 640px) {
  .top-bar { min-height: 52px; gap: 12px; }
  .sub { display: none; }
  .tab { padding: 0 12px; }
  /* The strip scrolls; a fade on the right edge says so. */
  .tabs {
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  main { padding: 24px var(--gutter) 96px; row-gap: 40px; }
  .pane-head { gap: 12px; padding-bottom: 20px; margin-bottom: 24px; }
  .pane-head h2 { font-size: clamp(44px, 13vw, 60px); }
  .pane-head .bg-idx { font-size: clamp(120px, 40vw, 180px); top: -.1em; right: calc(-1 * var(--gutter) - .08em); }
  .top-nav { display: none; }
  .grid2, .wid-hero .grid2 { grid-template-columns: 1fr; }
  .wid-hero { grid-template-columns: 1fr; padding: 20px 16px; }
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .ritem { grid-template-columns: minmax(0, 1fr) 54px 72px 40px; }
  .preview-body { padding: 14px; }
  .paper { padding-inline: 14px; min-height: 260px; }
  .paper pre { min-height: 180px; }
  .side-rail { display: none; }
  .preview { top: auto; }
  .led-grid { grid-template-columns: 1fr; }
  .cheat td:nth-child(3), .cheat th:nth-child(3) { display: none; }
  .login-spread { padding: 24px var(--gutter) 32px; row-gap: 24px; }
  .login-card { padding: 22px 18px 16px; }
  .toast { right: var(--gutter); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}