/*
 * The pixel pass.
 *
 * Loaded last so it is a layer over the base rather than a rewrite of it, and
 * so it can be pulled out in one line if it turns out to be a mistake.
 *
 * The rule I am working to: PIXEL CHROME, READABLE BODY. Headings, labels,
 * buttons and numbers get the pixel face and the hard edges. Paragraphs keep a
 * normal typeface, because the docs run to fourteen sections and nobody reads
 * two thousand words of a 5x7 bitmap font. A site that is punishing to read is
 * not more authentic, it is just harder to use.
 *
 * Everything here is one of three moves:
 *   1. Corners go square. Rounded corners cannot exist on a pixel grid.
 *   2. Shadows become offsets. A blur is a gradient, and gradients are the
 *      opposite of pixel art. A hard 3px step reads as depth without cheating.
 *   3. Borders get heavier, so an edge is a deliberate line of pixels rather
 *      than a hairline that disappears.
 */

:root {
  --px: 3px;                     /* one "pixel" of chrome at this scale */
  --disp: "Silkscreen", "Courier New", monospace;
}

/* ── type ─────────────────────────────────────────────────────────── */

h1, h2, h3, .mark, .btn, .foot-mark, .tier-name, .split-pct,
.meters dd, .facts dd, .bar-stats dd, .num {
  font-family: var(--disp);
}

/* Silkscreen has no lowercase descender room and no tight tracking, so the
   negative letter-spacing the grotesque wanted turns it into mush. */
h1, h2, h3 { letter-spacing: 0; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); }
.hero h1 { letter-spacing: 0; }
.big { font-family: var(--disp); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.5; max-width: 26ch; }

/* Numbers are the one place the bitmap face earns its keep twice: it is already
   monospaced, so columns line up without tabular-nums doing the work. */
.num { letter-spacing: 0; }
.meters dd, .facts dd { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }

/* ── square everything ────────────────────────────────────────────── */

.btn, .panel, .tier-in, .notice, .aside, .callout, .meters, .facts,
.table-scroll, .loop, .contracts dl, .sac-confirm, .act-bar, .claim-bar,
.seg, .field-row input, .pill, .toast, .graves, .grave, .ghost,
.progress, .progress-fill, .ones img, .pick li, .rail img, .holdings,
.skip:focus, .kk-btn {
  border-radius: 0;
}
.flip { border-radius: 0; width: 2.6rem; height: 2.6rem; }

/* ── edges and depth ──────────────────────────────────────────────── */

.panel, .tier-in, .aside, .callout, .act-bar, .claim-bar, .notice,
.sac-confirm, .grave {
  border-width: 2px;
  box-shadow: var(--px) var(--px) 0 var(--line-soft);
}

.meters, .facts, .table-scroll, .loop, .contracts dl {
  border-width: 2px;
  box-shadow: var(--px) var(--px) 0 var(--line-soft);
}

/* Buttons press. The shadow is the affordance: it is there, then it is not,
   and the button moves into the space it occupied. */
.btn {
  border-width: 2px;
  box-shadow: var(--px) var(--px) 0 oklch(0.30 0.09 44);
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2), background 0.12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 oklch(0.30 0.09 44); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: 0 0 0 var(--line-soft); }
.btn-ghost { box-shadow: var(--px) var(--px) 0 var(--line-soft); }
.btn-ghost:active { box-shadow: 0 0 0 var(--line-soft); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

.tier.on .tier-in { box-shadow: var(--px) var(--px) 0 var(--ember-dim); }
.ones img, .rail img, .grave img, .pick img { border-width: 2px; }

/* ── the grid itself ──────────────────────────────────────────────────
 *
 * A faint lattice over the whole page, at the same 4px pitch as the chrome, so
 * the background is on the grid rather than being smooth behind pixel objects.
 * Kept under 4% opacity: it should be felt rather than seen.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, oklch(1 0 0 / 0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.014) 0 1px, transparent 1px 4px);
}
.nav, main, .foot-bar { position: relative; z-index: 2; }

/* ── nav ──────────────────────────────────────────────────────────── */

.nav { border-bottom-width: 2px; }
.nav nav a { border-bottom-width: 2px; font-size: 0.8rem; letter-spacing: 0.02em; }
.mark { font-size: 1rem; }
.mark svg { image-rendering: pixelated; }

/* ── tables ───────────────────────────────────────────────────────── */

thead th { border-bottom-width: 2px; font-family: var(--disp); font-size: 0.72rem; letter-spacing: 0; }
tbody th { font-family: var(--disp); font-weight: 400; }

/* ── forms ────────────────────────────────────────────────────────── */

.field-row input { border-width: 2px; }
.field-row input:focus-visible { box-shadow: var(--px) var(--px) 0 var(--ember-dim); }
.check input, .seg { border-radius: 0; }

/* ── progress ─────────────────────────────────────────────────────────
 *
 * Stepped rather than smooth: a progress bar that slides continuously is the
 * one element that would give the game away.
 */
.progress { height: 0.85rem; border-width: 2px; }
.progress-fill { transition: transform 0.5s steps(12); }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }

/* ── the loop ─────────────────────────────────────────────────────── */

.loop li::before { font-family: var(--disp); font-size: 0.8rem; }
.loop li:last-child::after { font-family: var(--disp); }

/* ── docs ─────────────────────────────────────────────────────────── */

.toc a, .toc li { font-family: var(--body); }
.prose h2 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); }
.lede, .lede-sm, .std, .prose p, .list, .aside, .callout, .foot,
.tier-note, .field-note, .grave-name, .sac-help, .quote, .split li span:last-child {
  font-family: var(--body);
}

/* ── footer ───────────────────────────────────────────────────────── */

.foot-bar { border-top-width: 2px; }
.contracts dd { font-family: var(--mono); }
.pending { font-family: var(--body); }