/* ==========================================================================
   Makefaster — blueprint / technical-drawing aesthetic
   Implemented from the DiffUI design renders (see README).
   ========================================================================== */

:root {
  --paper: #e8e6e0;
  --ink: #17395e;
  --ink-deep: #12304f;
  --red: #c2402a;
  --green: #3e8e41;
  --slate: #a7b3c1;
  --muted: #5d6874;
  --cream: #f0eee8;

  --line-strong: rgba(23, 57, 94, 0.62);
  --line: rgba(23, 57, 94, 0.38);
  --hairline: rgba(23, 57, 94, 0.22);

  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  --texture-image: url("../assets/textures/concrete-01.webp");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: 48px;
  position: relative;
}

/* Site-wide repeating concrete ground. Press C to cycle the five tiles. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--texture-image);
  background-size: 512px 512px;
  background-repeat: repeat;
  opacity: 0.55;
  pointer-events: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: rgba(23, 57, 94, 0.85); color: var(--cream); }

/* ------------------------------------------------------------- utilities */

.mono-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}

.plus { font-family: var(--font-mono); font-weight: 500; color: var(--red); }

.dots {
  background-image: radial-gradient(circle, rgba(23, 57, 94, 0.5) 1.05px, transparent 1.15px);
  background-size: 11px 11px;
}

.icon { display: inline-block; vertical-align: middle; flex: none; }

/* ------------------------------------------------------- custom elements */

/* Every component renders into light DOM so the rules below keep applying to
   its markup. That makes each host element an extra box in the tree, and an
   unstyled custom element is inline, so the structural ones are declared
   blocks. See also `site-header` in the masthead section. */
app-root,
landing-page,
site-leaderboard-page,
improvement-leaderboard-page,
geo-row,
spec-footer,
loop-demo {
  display: block;
}

/* ---------------------------------------------------------------- sheet */

.sheet {
  max-width: 1320px;
  margin: 16px auto 0;
  position: relative;
  padding: 0 34px;
}

.sheet--framed {
  border: 1px solid var(--line-strong);
  padding: 0;
}

.sheet--framed .sheet-inner { padding: 0 34px; }

/* red registration plusses hugging the frame */
.corner-plus {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--red);
  line-height: 1;
  user-select: none;
}
.corner-plus.tl { top: 12px; left: -22px; }
.corner-plus.tr { top: 12px; right: -22px; }
.corner-plus.ml { top: 118px; left: -22px; }
.corner-plus.mr { top: 118px; right: -22px; }

/* -------------------------------------------------------------- masthead */

/* <site-header> is a light-DOM wrapper around .masthead, so it needs to be a
   block for the header's grid to lay out at full width. */
site-header { display: block; }

.masthead {
  display: grid;
  grid-template-columns: 1fr 88px;
  align-items: stretch;
  position: relative;
}

.sheet--framed .masthead { border-bottom: 1px solid var(--line-strong); }

.sheet--open .masthead { border: 1px solid var(--line-strong); }

.masthead-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 16px 28px;
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand img { width: 42px; height: 42px; }
.brand-word {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { border-bottom-color: rgba(194, 64, 42, 0.45); }
.site-nav a.active { border-bottom-color: var(--red); }

.masthead-cell {
  border-left: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
}

/* dotted compartment that continues below the crosshair cell */
.rail-dots {
  position: absolute;
  top: 100%;
  right: 0;
  width: 88px;
  height: 66px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}
.rail-dots .dots { width: 100%; height: 100%; }

/* --------------------------------------------------------------- georow */

.georow {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 18px 0 6px;
  min-height: 74px;
}

.ref-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--red);
  border: 1px solid var(--line);
  padding: 5px 12px;
  margin-top: 44px;
}
.sheet--framed .ref-tab { border-right: none; margin-right: -34px; }
.sheet--open .ref-tab { margin-top: 4px; }

/* -------------------------------------------------------------- eyebrow */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  margin: 10px 0 0;
}
.eyebrow .plus { font-size: 15px; }
.eyebrow-dots {
  position: absolute;
  right: 0;
  top: -6px;
  width: 140px;
  height: 44px;
}

/* ================================================================ LANDING */

.hero {
  position: relative;
  padding: 34px 56px 0;
}

.hero-tick {
  position: absolute;
  left: 22px;
  top: 44px;
  height: 66px;
  border-left: 1px solid var(--line-strong);
}
.hero-tick + .hero-tick { left: 28px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 28ch;
}

.hero-rule {
  position: absolute;
  right: 0;
  top: 128px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(24%, 300px);
}
.hero-rule::before { content: ""; flex: 1; border-top: 1px solid var(--red); }
.hero-rule .plus { font-size: 15px; }

.lede {
  margin: 34px 0 0;
  width: 100%;
  font-size: 16.5px;
  line-height: 1.68;
  color: #3d4a58;
}

/* loop recording ------------------------------------------------------- */

loop-demo { padding: 36px 56px 0; }

.loop-window {
  overflow: hidden;
  border-radius: 10px;
  background: #121212;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 18px 48px rgba(18, 32, 48, 0.28);
}

.loop-window-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  background: #1c1c1c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.loop-window-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.loop-window-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.loop-window-light--close { background: #ff5f57; }
.loop-window-light--min { background: #febc2e; }
.loop-window-light--zoom { background: #28c840; }

.loop-window-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

.loop-demo-player {
  width: 100%;
  background: #121212;
  overflow: hidden;
}

/* The vendor player brings its own radius and font; keep it flush with the
   window chrome and on the same mono as the rest of the page. */
.loop-demo-player .ap-player {
  border-radius: 0;
  max-width: 100%;
  background-color: #121212;
}
.loop-demo-player .ap-wrapper {
  height: auto;
}

/* After the fastest run the recording holds; do not cover that frame with
   the player's start/replay overlay. */
.loop-demo-player.is-held .ap-overlay {
  display: none;
}

/* command block ---------------------------------------------------------- */

.cmd-wrap { padding: 44px 56px 0; }

.cmd-shell {
  border: 1px solid var(--line-strong);
  padding: 7px;
  max-width: 980px;
  margin: 0 auto;
}

.cmd {
  width: 100%;
  background: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 27px 34px;
  text-align: left;
}
.cmd::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(240, 238, 232, 0.45);
  pointer-events: none;
}
.cmd-chevron {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--red);
  line-height: 1;
}
.cmd-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: 0.1em;
  color: var(--cream);
  flex: 1;
}
.cmd-copy {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 238, 232, 0.78);
}
.cmd:hover .cmd-copy { color: var(--cream); }

.specimen-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--red);
}
/* The credit is the only interactive thing on the line, so it is the only part
   that gets an affordance — the plus marks stay decorative. */
.specimen-line a:hover { text-decoration: underline; text-underline-offset: 4px; }
.specimen-line a:focus-visible { outline: 1px solid var(--red); outline-offset: 5px; }

/* metric band ------------------------------------------------------------ */

.band {
  margin-top: 44px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  position: relative;
}

.band-xhair {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink);
  background: transparent;
}
.band-xhair.bottom { top: 100%; }

/* The info panel is a column of the band, not a label beside it, so it takes
   the same track width as the three metrics. minmax(0, ...) rather than a bare
   1fr: a plain fr floors at min-content, which would let the widest chart or
   the longest copy pull its own column wider than the rest. */
.band-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.band-info {
  padding: 30px 26px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.band-info .dash { color: var(--ink); font-weight: 600; }
.band-info p { font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 21ch; }
.band-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--ink);
}
.band-info .dots { width: 104px; height: 40px; margin-top: auto; }

.metric {
  border-left: 1px solid var(--line);
  padding: 26px 20px 22px;
  text-align: center;
}
.metric-abbr {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.metric-sub {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 4px auto 0;
  max-width: 14ch;
  min-height: 30px;
}

.metric-chart {
  position: relative;
  height: 132px;
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 6px;
}
.metric-chart .bar { width: 36px; }
.bar--before { background: var(--slate); height: 104px; }
.bar--after { background: var(--ink); }

/*
 * Nothing measured yet: keep the frame and the baseline rule so the column
 * holds its place, and draw no bars. A zero-height "after" bar beside a full
 * "before" bar would read as a 100% improvement.
 */
.metric-chart--empty .bar,
.metric-chart--empty .metric-anno svg { visibility: hidden; }

/* The count column: one number, no baseline to compare it against. */
.metric-count {
  height: 132px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 6px;
}
.metric-count .count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.metric-anno {
  position: absolute;
  right: 2px;
  top: 6px;
  text-align: right;
}
.metric-anno .pct {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--red);
  letter-spacing: 0.02em;
}
.metric-anno svg { display: block; margin: 2px 8px 0 auto; }

.metric-xlabels {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.metric-xlabels span { width: 36px; text-align: center; }
.metric-count + .metric-xlabels span { width: auto; }

/* how it works ----------------------------------------------------------- */

.how {
  display: grid;
  grid-template-columns: 250px 1fr;
  margin-top: 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.how-info { padding: 44px 26px 40px 22px; }
.how-info p { font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 20ch; margin-top: 12px; }
.how-info .dots { width: 120px; height: 54px; margin-top: 26px; }

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0 10px;
  padding: 44px 0 40px;
  align-items: start;
}

.step { text-align: left; padding: 0 8px; }

.pictoframe {
  width: 104px;
  height: 104px;
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.pictoframe img { width: 52px; height: 52px; }
.pictoframe .c { position: absolute; width: 17px; height: 17px; }
.pictoframe .c.tl { top: 0; left: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.pictoframe .c.tr { top: 0; right: 0; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }
.pictoframe .c.bl { bottom: 0; left: 0; border-bottom: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.pictoframe .c.br { bottom: 0; right: 0; border-bottom: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); }

.step-arrow {
  align-self: start;
  margin-top: 40px;
  color: var(--red);
  position: relative;
  left: -42px;
}

.step-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.step-label .num { color: var(--red); margin-right: 10px; }
.step p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 10px; max-width: 21ch; }

/* ============================================================ LEADERBOARDS */

.page-head { padding: 6px 0 0; }

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 14px;
}

.page-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
}
.page-sub p { font-size: 14px; color: var(--muted); }

/* stat cards ------------------------------------------------------------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.stat-card { border: 1px solid var(--line-strong); background: rgba(240, 238, 232, 0.25); }

.stat-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.stat-card-head .icon { color: var(--ink); }

.stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 30px;
  color: var(--ink);
  text-align: center;
  padding: 16px 10px 2px;
  letter-spacing: -0.01em;
}
.stat-value.small { font-size: 20px; padding-top: 22px; }

.stat-sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 4px 10px 16px;
}
.stat-sub .icon { color: var(--red); }

/* controls --------------------------------------------------------------- */

.controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 30px 0 0;
  flex-wrap: wrap;
}

.load-type .mono-label { font-size: 9.5px; letter-spacing: 0.22em; display: block; margin-bottom: 8px; }

.segmented {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line-strong);
  padding: 4px;
  background: rgba(240, 238, 232, 0.35);
}
.segmented button {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 7px 16px;
}
.segmented button.active { background: var(--ink); color: var(--cream); }

.controls-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(240, 238, 232, 0.45);
  padding: 9px 13px;
  width: 260px;
  color: var(--muted);
}
.search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.search input::placeholder { color: var(--muted); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(240, 238, 232, 0.35);
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.btn-outline:hover { background: rgba(23, 57, 94, 0.08); }

/* tables ----------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 26px; }

.data-table { width: 100%; border-collapse: collapse; min-width: 860px; }

.data-table thead th {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: top;
  white-space: nowrap;
}
.data-table thead th .unit {
  display: block;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
  margin-top: 3px;
}

/* A sortable header is a button that inherits the header's own type, so the
   column reads identically whether or not it can be sorted. */
.data-table thead th .th-sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.data-table thead th .th-sort:hover { color: var(--red); }
.data-table thead th .th-sort:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 3px; }
.data-table thead th .sort-caret { font-size: 9px; line-height: 1; opacity: 0.4; }
.data-table thead th .th-sort.is-active .sort-caret { opacity: 1; color: var(--red); }
.data-table thead th[aria-sort="ascending"],
.data-table thead th[aria-sort="descending"] { background: rgba(23, 57, 94, 0.05); }

.data-table thead th + th,
.data-table tbody td + td { border-left: 1px solid var(--hairline); }

.data-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  white-space: nowrap;
}

.site-cell { display: flex; align-items: center; gap: 13px; min-width: 200px; }
.favicon-box { width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.favicon-box img { width: 26px; height: 26px; object-fit: contain; }
.favicon-fallback {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.site-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* The name is a link only when the row carries the pull request the run was
   opened as, so it reads as plain text until there is somewhere to go. */
.site-name a { color: inherit; text-decoration: none; }
.site-name a:hover,
.site-name a:focus-visible { text-decoration: underline; }
.site-name .pr-glyph { margin-left: 6px; vertical-align: -1px; opacity: 0.5; }
.site-name a:hover .pr-glyph,
.site-name a:focus-visible .pr-glyph { opacity: 1; }

.site-url { font-size: 11.5px; color: var(--muted); }

.num-cell { font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--ink); }

/* The pre-loop baseline sits beside the measurement it was beaten by, so it is
   muted: the eye should land on the "after" figure. */
.num-cell--before { font-weight: 500; color: var(--muted); }

.delta-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--red);
}
.delta-cell .icon { margin-right: 9px; color: var(--red); }

/* improvement leaderboard specifics */

.rank-cell { font-family: var(--font-mono); font-weight: 600; font-size: 19px; color: var(--ink); width: 46px; }

.cat-cell { display: flex; align-items: center; gap: 14px; min-width: 230px; }
.cat-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
}
.cat-icon img { width: 21px; height: 21px; }
.cat-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: normal; }

.desc-cell {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  white-space: normal !important;
  max-width: 240px;
  line-height: 1.45;
}

.count-cell { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; color: var(--ink); }

.green-cell { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; letter-spacing: 0.08em; color: var(--green); }

/* pagination ------------------------------------------------------------- */

.table-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 2px 0;
  flex-wrap: wrap;
}
.table-foot .showing { font-size: 12.5px; color: var(--muted); }

.pagination { display: flex; align-items: center; gap: 6px; }
.pagination button {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  background: rgba(240, 238, 232, 0.35);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.pagination button:hover:not(:disabled):not(.active) { background: rgba(23, 57, 94, 0.08); }
.pagination button.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .gap {
  border: none;
  background: none;
  font-family: var(--font-mono);
  color: var(--muted);
  min-width: 20px;
  cursor: default;
}

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

.specfooter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 52px 0 26px;
  position: relative;
}

.spec-nums {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
  color: rgba(23, 57, 94, 0.75);
}
.spec-nums.right { text-align: right; }

.spec-center {
  display: flex;
  align-items: center;
  gap: 46px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
}

.bracket { position: absolute; width: 16px; height: 16px; }
.bracket.bl { left: -12px; bottom: 10px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); }
.bracket.br { right: -12px; bottom: 10px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); }
.sheet--framed .bracket.bl { left: -46px; bottom: -12px; }
.sheet--framed .bracket.br { right: -46px; bottom: -12px; }

.page-end {
  height: 12px;
  background: var(--ink-deep);
  margin-top: 10px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  /* Four cards, so two rows of two rather than three and a straggler. */
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  /* The info panel takes a row of its own and the three metrics share the
     next one — three into two columns would leave a hole. */
  .band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-info { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .metric:nth-child(2) { border-left: none; }
  .metric { border-top: 1px solid var(--hairline); }
  .metric-count .count { font-size: 38px; }
  .how { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 30px 10px; padding-top: 0; }
  .step-arrow { display: none; }
}

@media (max-width: 720px) {
  .sheet { padding: 0 18px; }
  .sheet--framed .sheet-inner { padding: 0 18px; }
  .masthead { grid-template-columns: 1fr; }
  .masthead-cell, .rail-dots, .eyebrow-dots, .hero-rule, .hero-tick { display: none; }
  .masthead-main { flex-wrap: wrap; padding: 14px 16px; gap: 14px; }
  .site-nav { gap: 20px; flex-wrap: wrap; }
  .hero { padding: 26px 6px 0; }
  loop-demo { padding: 28px 0 0; }
  .cmd-wrap { padding: 34px 0 0; }
  .cmd { gap: 14px; padding: 20px 18px; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .band-grid { grid-template-columns: 1fr; }
  .metric { border-left: none; }
  .steps { grid-template-columns: 1fr; }
  .specfooter { flex-direction: column; align-items: flex-start; gap: 14px; }
  .georow { flex-direction: column; gap: 10px; min-height: 0; }
  .ref-tab { margin-top: 0; }
  .sheet--framed .ref-tab { margin-right: 0; border-right: 1px solid var(--line); align-self: flex-start; }
}