/* The Tinfoil Hat Cat. One 8-bit trail-game screen printed as a poster:
   bands on a black ground, two solid ink rules, full width pixel scenes, type inset from the sides.
   Three faces: Departure Mono for everything loud (an 11 px grid, so every pixel size is a multiple
   of 11), Archivo for running copy, JetBrains Mono for figures, addresses and memo strings. */

@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/departure-mono.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --ground: #010101;
  --ink: #48e301;        /* 12.3:1 on the ground: display, values, rules */
  --ink-2: #3dbe03;      /*  8.6:1 : secondary text */
  --muted: #2c8c05;      /*  4.8:1 : separators, disabled, notes */
  --line: #164f02;       /*  graphics only, never text */

  --sheet: min(1120px, 92vw);
  --px: calc(var(--sheet) / 280);   /* one art block, the same size for every sprite on the page */

  --d1: 66px;   /* the one display element: the day's foil level */
  --d2: 44px;   /* the wordmark */
  --d3: 33px;   /* screen titles and the feed counts */
  --d4: 22px;   /* every pixel label, key and number tag: the floor for a bitmap face */
  --body: 15px;
  --small: 14px;

  --pixel: "Departure Mono", ui-monospace, monospace;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --band-gap: 28px;
  --press: 0.08s;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; image-rendering: pixelated; }
.mark img { image-rendering: auto; }

a { color: var(--ink); }

/* one visible ring for everything focusable: the browser default is a dark ring on a dark sheet */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: fixed; left: 0; top: -200px;
  font-family: var(--pixel); font-size: var(--d4); line-height: 1;
  background: var(--ground); color: var(--ink);
  padding: 14px 24px; z-index: 10;
  outline: 2px solid var(--ink); outline-offset: -2px;
}
.skip:focus { top: 0; }

/* ---- the sheet and its bands ------------------------------------------------ */

.sheet {
  width: var(--sheet);
  margin: 0 auto;
  padding: 20px 0 0;
}

.band { width: 100%; }
.screen + .screen { margin-top: 56px; }

.rule {
  width: 100%;
  height: calc(4 * var(--px));
  margin: var(--px) 0;
  border: 0;
  background: var(--ink);
}

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

.masthead { text-align: center; padding-bottom: 4px; }

.kicker {
  margin: 0;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.wordmark {
  margin: 6px 0 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
}

.ident {
  margin: 8px 0 0;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1;
  color: var(--ink);
  display: flex; justify-content: center; align-items: baseline; gap: 14px;
}
.ident .sep { color: var(--muted); }
.ident #dayNo { color: var(--ink-2); }

.dateline {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: var(--small);
  line-height: 1.5;
  color: var(--ink-2);
}
.dateline b { color: var(--ink); font-weight: 700; }

/* ---- the scene band ----------------------------------------------------------- */

.scene {
  position: relative;
  height: calc(88 * var(--px));
  overflow: hidden;
}
.scene img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.scene.end { margin-top: 56px; }

/* the drifting sky belongs to the scene: the stars are drawn on black and screened on */
.sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---- the verdict -------------------------------------------------------------- */

.verdict { text-align: center; padding: 4px 0 2px; }

.verdict-lead {
  margin: 0;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1.2;
  color: var(--ink-2);
}

.verdict-word {
  margin: 6px 0 0;
  font-family: var(--pixel);
  font-size: var(--d1);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-transform: uppercase;
  word-break: break-word;
}

.verdict-sub {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.verdict-sub b { color: var(--ink); font-weight: 700; }

/* ---- the three feeds ---------------------------------------------------------- */

.feeds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
}

.feed {
  position: relative;
  text-align: center;
  padding: 0 18px;
  display: flex; flex-direction: column; align-items: center;
}
.feed + .feed::before {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 0;
  width: 2px;
  background: var(--muted);
}

.feed-art {
  height: calc(37 * var(--px));
  display: flex; align-items: flex-end; justify-content: center;
}
.feed-art img { width: auto; height: auto; }
.feed[data-feed="kev"] .feed-art img { width: calc(62 * var(--px)); height: calc(36 * var(--px)); }
.feed[data-feed="nvd"] .feed-art img { width: calc(22 * var(--px)); height: calc(37 * var(--px)); }
.feed[data-feed="gh"]  .feed-art img { width: calc(35 * var(--px)); height: calc(36 * var(--px)); }

.feed-name {
  margin: 12px 0 0;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1.1;
  color: var(--ink-2);
}
.feed-count {
  margin: 6px 0 0;
  font-family: var(--pixel);
  font-size: var(--d3);
  line-height: 1.1;
  color: var(--ink);
}
.feed-meta {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: var(--small);
  line-height: 1.4;
  color: var(--muted);
}
.feed-meta .p { color: var(--ink-2); }
.feed-name a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.feed-name a:hover { color: var(--ink); }
.feed.lit .feed-count { animation: breathe 1.1s steps(1) infinite; }
@keyframes breathe { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.55; } }

/* ---- the keys that close the first screen -------------------------------------- */

.keys { margin-top: 16px; text-align: center; }

.press {
  margin: 0 0 10px;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1.2;
  color: var(--ink-2);
}

.keyrow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}

/* a key is the generated key cap, nine sliced on its own block grid */
.key {
  background: #2c8c05;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pixel);
  font-size: var(--d4);
  line-height: 1;
  color: var(--ground);
  text-decoration: none;
  background: transparent;
  border: calc(3 * var(--px)) solid transparent;
  border-image: url("/img/key.png") 3 fill / calc(3 * var(--px)) / 0 stretch;
  image-rendering: pixelated;
  padding: 9px 18px;
  min-height: 48px;
  cursor: pointer;
  transition: transform var(--press) steps(2);
}
.key b { font-weight: 400; color: var(--ground); }
.key:hover { transform: translateY(calc(-1 * var(--px))); }
.key:active { transform: translateY(var(--px)); }
.key:focus-visible { outline: calc(1 * var(--px)) solid var(--ink); outline-offset: calc(2 * var(--px)); }
.key[aria-disabled="true"], .key:disabled {
  opacity: 0.74;
  cursor: not-allowed;
  transform: none;
}
.key.mark img { width: 24px; height: 24px; flex: 0 0 auto; }
.key.mark span { color: var(--ground); }

.marks { margin-top: 14px; }

.mintrow {
  margin-top: 18px;
  display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* a plate is the generated sunken tray, the one place an address is printed */
.plate {
  background: var(--ground);
  border: calc(4 * var(--px)) solid transparent;
  border-image: url("/img/plate.png") 4 fill / calc(4 * var(--px)) / 0 stretch;
  image-rendering: pixelated;
  padding: 14px 20px;
  text-align: left;
}

.mintplate { flex: 1 1 520px; max-width: 760px; }
.mint-label {
  margin: 0 0 6px;
  font-family: var(--pixel); font-size: var(--d4); line-height: 1;
  color: var(--ink-2);
}
.mint {
  margin: 0;
  font-family: var(--mono); font-size: 16px; line-height: 1.4; font-weight: 700;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.mint.empty { color: var(--muted); font-weight: 400; user-select: auto; }

/* ---- screen heads and copy ------------------------------------------------------ */

.head { padding: 0; }
.screen-title {
  margin: 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: var(--d3);
  line-height: 1.15;
  color: var(--ink);
}
.screen-title b { font-weight: 400; color: var(--ink-2); margin-right: 14px; }
.sub-title {
  margin: 30px 0 8px;
  font-family: var(--pixel); font-weight: 400; font-size: var(--d4); line-height: 1.2;
  color: var(--ink);
}
.screen-note {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--ink-2);
}
.state-line { margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: var(--small); }

/* ---- tables: flat ruled rows, the reference has no panels ------------------------ */

.table { margin-top: 22px; }

.trow {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1.6fr 78px 0.7fr 0.7fr 0.7fr 1.1fr 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--ink-2);
}
.trow::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--line);
}
.trow.thead {
  font-family: var(--pixel);
  font-size: var(--d4);
  color: var(--muted);
  padding-bottom: 12px;
}
.trow.thead::after { background: var(--muted); }
.trow.rows-4 { grid-template-columns: 90px 110px 1fr 1fr; }
.trow.rows-3 { grid-template-columns: 120px 220px 1fr; }
.trow .c-level { color: var(--ink); }
.trow .c-score b { color: var(--ink); font-weight: 700; }
.trow.loud .c-level { color: var(--ink); }
.trow a { color: var(--ink-2); text-underline-offset: 3px; }
.trow .tag { color: var(--muted); }
.more { margin-top: 20px; text-align: center; }

.splits .trow span:first-child { color: var(--ink); }

/* ---- your share ------------------------------------------------------------------ */

.lookup {
  margin-top: 22px;
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
}
.lookup .plate { flex: 1 1 420px; }
.field-label {
  margin: 0 0 6px;
  font-family: var(--pixel); font-size: var(--d4); line-height: 1; color: var(--ink-2);
}
.field {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--mono); font-size: 16px; line-height: 1.4;
  padding: 0;
  min-height: 28px;
}
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---- streaks --------------------------------------------------------------------- */

.streakgrid, .pot {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat { position: relative; padding: 0 0 0 18px; }
.stat::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 2px; background: var(--muted);
}
.stat-label {
  margin: 0;
  font-family: var(--pixel); font-size: var(--d4); line-height: 1.1; color: var(--ink-2);
}
.stat-value {
  margin: 8px 0 0;
  font-family: var(--pixel); font-size: var(--d3); line-height: 1; color: var(--ink);
}
.stat-note {
  margin: 8px 0 0;
  font-family: var(--mono); font-size: var(--small); line-height: 1.4; color: var(--muted);
}

.strip { margin-top: 34px; }
.strip-label, .strip-note {
  margin: 0;
  font-family: var(--mono); font-size: var(--small); color: var(--muted);
}
.strip-note { margin-top: 10px; min-height: 1.4em; }
.sparks {
  margin-top: 12px;
  display: flex; align-items: flex-end; justify-content: center; gap: var(--px);
  height: calc(16 * var(--px));
}
.spark {
  flex: 0 0 auto;
  width: calc(3 * var(--px));
  background: var(--muted);
}
.spark.s4, .spark.s5, .spark.s6 { background: var(--ink); }
.spark.s2, .spark.s3 { background: var(--ink-2); }

/* ---- the four steps -------------------------------------------------------------- */

.steps {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step { margin: 0; }
.step img { width: calc(48 * var(--px)); height: calc(48 * var(--px)); }
.step figcaption {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: var(--body);
}
.step figcaption b {
  display: block;
  font-family: var(--pixel); font-weight: 400; font-size: var(--d4); line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ---- widths ----------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --d1: 44px; --d2: 33px; }
}

@media (max-width: 820px) {
  :root { --sheet: min(1120px, 94vw); --band-gap: 20px; }
  .feeds { grid-template-columns: 1fr; gap: 26px; }
  .feed { padding: 0; }
  .feed + .feed::before { left: 0; right: 0; top: -13px; bottom: auto; width: auto; height: 2px; }
  .feed-art { height: calc(52 * var(--px)); }
  .steps, .streakgrid, .pot { grid-template-columns: repeat(2, 1fr); }
  .trow { grid-template-columns: minmax(64px, auto) 1fr auto; gap: 10px; row-gap: 4px; }
  .trow .c-feed, .trow .c-split, .trow .c-memo { grid-column: 1 / -1; color: var(--muted); }
  .trow .c-feed { display: inline; }
  .trow.rows-4 { grid-template-columns: 1fr 1fr; }
  .trow.rows-3 { grid-template-columns: auto 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --d1: 33px; --d2: 33px; --d3: 22px; --body: 15px; }
  .sheet { padding-top: 24px; }
  .scene { height: calc(94 * var(--px)); }
  .scene img { object-fit: cover; object-position: 50% 100%; }
  .steps, .streakgrid, .pot { grid-template-columns: 1fr; }
  .keyrow { gap: 10px; }
  .key { padding: 11px 20px; }
}

@media (max-width: 380px) {
  :root { --sheet: min(1120px, 96vw); }
}

@media (prefers-reduced-motion: reduce) {
  .key { transition: none; }
  .feed.lit .feed-count { animation: none; }
}