/* Hybrid Intelligence. One phosphor desktop, built to art/ref/desktop-crt.jpg.
   Rebuilt 2026-10-23 on his review: the pixel face was unreadable, the greens were one tone and the
   page had no hierarchy.

   THREE FACES, and the split is the rule now (LESSONS: pixel-face-is-for-accents-only):
     pixel  Px437 Master 512, 24 px and up only, for the phase, the clock and the window titles
     text   Sofia Sans Semi Condensed, for every word a person reads
     mono   JetBrains Mono, for every value, address, memo and table cell
   `-webkit-font-smoothing: none` belongs on the PIXEL elements only; the text face wants antialiased.

   FOUR SURFACES, measured apart rather than nudged (the whole pair matrix is in NOTE.md):
     page   #1B3A2E   the desk, and the only thing that carries the dither
     panel  #0A1712   a window body               ink on it 16.8:1
     sunken #04100B   an inset field, an accent   ink on it 17.7:1
     lit    #46E39B   a band, a key, a selection  knock on it 11.5:1

   ONE SCALE each, and nothing outside it: type 16/20/24/32/48, space 4/8/12/16/24/32/48.
   (His list opens at 12 and 14; 16 is the floor here because tools/shots.mjs fails anything under
   it, and he raised the body to 15 minimum in the same message.) */

@font-face {
  font-family: "Pixel";
  src: url("../fonts/master512-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: "Text";
  src: url("../fonts/sofia-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Text";
  src: url("../fonts/sofia-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Mono";
  src: url("../fonts/mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mono";
  src: url("../fonts/mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* surfaces */
  --page: #1b3a2e;
  --panel: #0a1712;
  --sunken: #04100b;
  --lit: #46e39b;
  --lit-hi: #8ffbc6;
  --dead: #16302a;

  /* ink */
  --ink: #d6ffef;
  --ink-2: #8ed9b8;
  --knock: #03110b;
  --knock-2: #0c2c1f;
  --edge: #35735a;

  /* type */
  --f-px: "Pixel", monospace;
  --f-text: "Text", system-ui, sans-serif;
  --f-mono: "Mono", ui-monospace, monospace;
  --t-16: 16px;
  --t-20: 20px;
  --t-24: 24px;
  --t-32: 32px;
  --t-48: 48px;

  /* space */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;

  /* the one container, with equal gutters */
  --gutter: var(--s-32);
  --work: min(1280px, 100vw - (2 * var(--gutter)));

  /* one window anatomy, used by every window there is */
  --bar: 48px;
  --foot: 48px;
  --rail: var(--s-8);
  --pad: var(--s-24);
  --row: 48px;

  --dither: repeating-conic-gradient(rgba(53, 115, 90, 0.55) 0 25%, rgba(0, 0, 0, 0) 0 50%);
}

* { box-sizing: border-box; }

html { background: #0a1712; }

body,
.keys {
  background-color: var(--page);
  background-image: var(--dither);
  background-size: 6px 6px;
  background-attachment: fixed;
  animation: breathe 7.2s steps(2, end) infinite;
}
@keyframes breathe {
  0%, 49% { background-position: 0 0; }
  50%, 100% { background-position: 3px 3px; }
}

body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--t-16)/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}

::selection { background: var(--lit); color: var(--knock); }

/* the pixel face, wherever it is used, and nowhere smaller than 24 px */
.px {
  font-family: var(--f-px);
  font-weight: 700;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  letter-spacing: 2px;
  text-shadow: none;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the glass */

#scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.13) 0px,
    rgba(0, 0, 0, 0.13) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  animation: roll 9s linear infinite;
}
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(3px); } }

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 61;
  background: radial-gradient(132% 122% at 50% 44%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.55) 100%);
}

/* ------------------------------------------------------------- the desktop */

#desk {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: var(--s-24);
  padding: var(--s-16) 0 0;
}

/* -------------------------------------------------------- the clock strip */

.strip {
  width: var(--work);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--s-24);
  min-height: var(--row);
}

.strip__name {
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.strip__clock {
  font-family: var(--f-mono);
  font-size: var(--t-16);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}
.strip__clock b { font-weight: 700; color: var(--lit-hi); }

.strip__end { justify-self: end; display: flex; align-items: center; }

.badge {
  width: 48px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--lit);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.12s linear;
}
.badge__mark {
  width: 18px;
  height: 18px;
  background: var(--knock);
  -webkit-mask: url("../marks/x.svg") center / contain no-repeat;
  mask: url("../marks/x.svg") center / contain no-repeat;
}
.badge[aria-disabled="true"] { background: var(--dead); box-shadow: inset 0 0 0 2px var(--edge); cursor: default; }
.badge[aria-disabled="true"] .badge__mark { background: var(--ink-2); }
.badge:not([aria-disabled="true"]):hover { background: var(--lit-hi); }
.badge::after { content: ""; position: absolute; inset: -4px; }

/* ----------------------------------------------------------- window stack */

#stack {
  width: var(--work);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-24);
  row-gap: var(--s-24);
  align-content: start;
}

.win {
  position: relative;
  background: var(--lit);
  padding: 0 var(--rail) var(--rail);
  min-width: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.win[hidden] { display: none; }
.win.is-front { background: var(--lit-hi); }

.win__bar {
  min-height: var(--bar);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: 0 var(--s-24);
  color: var(--knock);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.win.is-dragging .win__bar { cursor: grabbing; }

.win__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: var(--knock);
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
  mask: var(--icon) center / 24px 24px no-repeat;
}

.win__title {
  font-family: var(--f-px);
  font-weight: 700;
  font-size: var(--t-24);
  line-height: var(--t-32);
  letter-spacing: 2px;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}

.win__help,
.win__close {
  width: 48px;
  height: 40px;
  flex: 0 0 48px;
  background: transparent;
  border: 2px solid var(--knock);
  color: var(--knock);
  font: 600 var(--t-16)/1 var(--f-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  transition: background 0.12s linear, color 0.12s linear;
}
.win__help::after,
.win__close::after { content: ""; position: absolute; inset: -8px; }
.win__help:hover,
.win__close:hover { background: var(--knock); color: var(--lit); }
.win__help:active,
.win__close:active { background: var(--knock-2); color: var(--lit-hi); }

.win__body {
  container-type: inline-size;
  flex: 1 1 auto;
  background: var(--panel);
  padding: var(--pad) 0;
  min-width: 0;
  overflow: hidden;
}
.win__body > * { padding-inline: var(--pad); }
.win__body > .bleed { padding-inline: 0; }

.win__foot {
  min-height: var(--foot);
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: 0 var(--s-24) 0 var(--s-8);
  color: var(--knock);
}
.win__foot--nokey { padding-left: var(--s-24); }

.win__note {
  font-size: var(--t-16);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* ------------------------------------------------------------------- rules */

.rule {
  height: 2px;
  background: var(--edge);
  margin: var(--s-24) 0;
  padding: 0;
}
.win__body > .rule { margin-inline: var(--pad); padding: 0; }

/* ---------------------------------------------------------------- the table */

.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }

.tbl thead tr { position: relative; }
.tbl thead tr::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 2px;
  background: var(--edge);
}
.tbl th {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--t-16);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  padding: 0 0 var(--s-12);
  white-space: nowrap;
}
.tbl td {
  font-family: var(--f-mono);
  font-size: var(--t-16);
  font-variant-numeric: tabular-nums;
  padding: 0;
  height: var(--row);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
}
.tbl th:first-child, .tbl td:first-child { padding-left: var(--pad); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--pad); }
.tbl th + th, .tbl td + td { padding-left: var(--s-24); }
.tbl .num { text-align: right; }

.tbl tbody tr { position: relative; }
.tbl tbody tr + tr td:first-child::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 0;
  height: 2px;
  background: var(--edge);
}
.tbl tbody tr.is-pick td:first-child::after,
.tbl tbody tr.is-pick + tr td:first-child::after { display: none; }
.tbl tbody tr.is-pick { background: var(--lit); color: var(--knock); }

.up { color: var(--lit-hi); }
.down { color: var(--ink-2); }
.tbl tbody tr.is-pick .up,
.tbl tbody tr.is-pick .down,
.tbl tbody tr.is-pick .lnk { color: var(--knock); }

/* ------------------------------------------------------------- the key row */

.keys {
  width: var(--work);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-8);
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: var(--s-16) 0 var(--s-24);
}

.key {
  min-height: 56px;
  background: var(--lit);
  color: var(--knock);
  border: 0;
  padding: var(--s-8) var(--s-12);
  font: 600 var(--t-16)/1.25 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: background 0.12s linear, color 0.12s linear;
}
.key:hover { background: var(--lit-hi); }
.key:active { background: var(--knock); color: var(--lit); }
.key[aria-current="true"] {
  background: var(--knock);
  color: var(--lit-hi);
  box-shadow: inset 0 4px 0 0 var(--lit);
}
.key[disabled],
.key[aria-disabled="true"] {
  background: var(--dead);
  color: var(--ink-2);
  cursor: default;
  box-shadow: inset 0 0 0 2px var(--edge);
}
/* the wider gap his reference puts between the three groups, without breaking equal columns */
.keys .key:nth-child(4)::before,
.keys .key:nth-child(6)::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--edge);
}

:where(button, a, [tabindex], label):focus-visible {
  outline: 3px solid var(--lit-hi);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------- phone */

@media (max-width: 960px) {
  :root { --gutter: var(--s-16); --pad: var(--s-16); }
  #stack { grid-template-columns: 1fr; column-gap: var(--s-16); row-gap: var(--s-16); }
  .win { grid-column: 1 / -1 !important; transform: none !important; }
  .win__bar { cursor: default; padding-inline: var(--s-16); }
  .win__title { font-size: var(--t-20); }
  .keys { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); padding-bottom: var(--s-16); }
  .keys .key::before { display: none !important; }
  /* the windows stack in one scroll, so there is no cascade to step through */
  .key--window { display: none; }
  .strip { grid-template-columns: 1fr auto; row-gap: var(--s-8); }
  .strip__name { grid-column: 1; }
  .strip__clock { grid-column: 1 / 2; grid-row: 2; text-align: left; }
  .strip__end { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 360px) {
  /* six keys, two to a row: three of them squeezes the longest label against its own edge */
  .keys { grid-template-columns: repeat(2, 1fr); }
  .win__note { white-space: normal; }
  .win__foot { padding-block: var(--s-8); align-items: center; }
  /* at 320 the name and the ticker do not fit one line, and overflow:hidden ate the last letter */
  .strip__name { white-space: normal; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #scan, body, .keys { animation: none; }
}