/* groupchat.gguf: the containment chamber.
   Every surface is a drawn plate (public/img/*.png, nine-sliced). Nothing here is a bordered box.

   Type: one scale, 12 / 14 / 16 / 20 / 24 / 32. Overused Grotesk reads the sentences, 0xProto carries
   values, Pixel Operator carries only the loud things and only at whole multiples of its 16 px cell.
   Space: one scale, 4 / 8 / 12 / 16 / 24 / 32 / 48.
   Art: one block, 4 px. Every plate is drawn at 4x and placed at its own size, never scaled by CSS. */

@font-face { font-family: Px;   src: url(fonts/PixelOperator-Bold.ttf) format("truetype");        font-weight: 700; font-display: swap; }
@font-face { font-family: Txt;  src: url(fonts/OverusedGrotesk-Roman.woff2) format("woff2");      font-weight: 400; font-display: swap; }
@font-face { font-family: Txt;  src: url(fonts/OverusedGrotesk-Medium.woff2) format("woff2");     font-weight: 500; font-display: swap; }
@font-face { font-family: Mono; src: url(fonts/0xProto-Regular.woff2) format("woff2");            font-weight: 400; font-display: swap; }
@font-face { font-family: Mono; src: url(fonts/0xProto-Bold.woff2) format("woff2");               font-weight: 700; font-display: swap; }

:root {
  --void: #000507;
  --chamber: #00110f;
  --hull: #002a20;
  --hull-hi: #003d2e;
  --rib: #004c36;
  --lit: #00784f;        /* a surface tone only: too dark to carry text */
  --dim: #00a877;        /* the quiet green that still reads: 6.4:1 on the void */
  --live: #00c58a;
  --glow: #00f8d0;
  --mint: #a8ffe8;
  --steel: #9dc3bb;      /* captions: 9:1 on the void */
  --read: #d4efe6;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --pad: 16px;           /* every plate keeps its text this far from its sides */
  --control: 40px;       /* every key, valve and select is exactly this tall */
  --col: 1200px;
  --edge: 32px;          /* the column never touches the window */
  --gutter: 56px;        /* between a wall and the tank: the risers run down it */

  --valve-w: 182px;
  --tank-w: 352px;       /* the plinth and the terminal are this wide; the glass column is 288 */
  --glass-w: 160px;
  --glass-top: 44px;     /* where the glass opening starts inside cap.png (11 logical px x 4) */
  --cap-h: 80px;
  --foot: 56px;

  --font-px: Px, "Courier New", monospace;
  --font-txt: Txt, system-ui, sans-serif;
  --font-mono: Mono, ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--void); overflow-x: clip; }
body {
  margin: 0;
  background: var(--void);
  color: var(--read);
  font-family: var(--font-txt);
  font-size: 14px;
  line-height: 22px;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  min-height: 100vh;
}
img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
canvas { image-rendering: pixelated; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 var(--s3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--glow); }
::selection { background: var(--glow); color: var(--void); }

/* the pixel face: whole multiples of its 16 px cell, no smoothing, no shadow, letters given air */
.px, .wall-head h2, .band-head h2, .plate > h3, .plate-inset > h3 {
  font-family: var(--font-px);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  text-shadow: none;
}
.px-lg { font-size: 32px; line-height: 32px; letter-spacing: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* one caption style on the whole site */
.label, .note, .key-note, .glass-note, .line-item .when, .post .sources {
  font-family: var(--font-txt);
  font-size: 12px;
  line-height: 16px;
  color: var(--steel);
  margin: 0;
}

#dome { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

.chamber { position: relative; z-index: 1; max-width: var(--col); margin: 0 auto; padding: 0 var(--edge) var(--s7); }

/* ---- the gantry: the machine band that closes the top of his picture --------------------- */
/* The masthead is one plate across the whole column, so no machinery is left exposed between the
   wordmark and the clock: the band reads as a bar hanging from the ceiling, which is what it is. */
.gantry {
  position: relative;
  height: 88px;
  margin: 0 calc(50% - 50vw) var(--s2);
  padding-inline: max(var(--edge), calc(50vw - var(--col) / 2 + var(--edge)));
  background: url(img/rig.png) repeat-x center top;
  background-size: 480px 104px;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
}
.masthead {
  width: 100%;
  height: 72px;
  border-image: url(img/hull.png) 16 fill / 16px / 0 stretch;
  padding: 0 var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.nameplate { display: flex; align-items: center; gap: var(--s3); }
.wordmark { color: var(--glow); }
.ticker {
  display: flex; align-items: center;
  height: 36px; padding: 0 var(--s4);
  border-image: url(img/cell.png) 10 fill / 10px / 0 stretch;
  font-family: var(--font-px); font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 1px;
  color: var(--mint); -webkit-font-smoothing: none;
}
/* the clock: label, value, note on one right hand axis, three sizes in one order */
.clock { width: 176px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.clock .value {
  font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 24px; line-height: 26px; color: var(--glow);
}

/* ---- the manifold: six valves of equal width, the navigation of this room ----------------- */
.manifold {
  display: grid;
  grid-template-columns: repeat(6, var(--valve-w));
  justify-content: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
}
.valve {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control);
  padding: 0 var(--s2);
  border-image: url(img/valve.png) 16 fill / 16px / 0 stretch;
  font-family: var(--font-px); font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 1px;
  -webkit-font-smoothing: none;
  color: var(--live);
  text-align: center;
  text-decoration: none;
  transition: color .12s linear, transform .08s linear;
}
.valve:hover { color: var(--mint); }
.valve:active { transform: translateY(1px); }
/* the open valve is marked by its plate and its ink, never by a different size */
.valve[aria-current="page"] { border-image-source: url(img/valve-lit.png); color: var(--void); }
.valve:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* ---- the room: a wall, the tank, a wall, all three starting on one line ------------------- */
.room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tank-w) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.wall { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.wall-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 28px; padding: 0 var(--s1);
}
.wall-head h2 { color: var(--mint); }
.wall-head .label { white-space: nowrap; }
/* one scroll region per screen: a list shows what fits and asks for more, it never traps the wheel */
.scroller { display: flex; flex-direction: column; gap: var(--s2); }

/* ---- plates: the only surface language on this site -------------------------------------- */
/* Two plates, one padding. A hull plate is a panel of the room, a cell is one row of a list. */
.plate { border-image: url(img/hull.png) 16 fill / 16px / 0 stretch; padding: var(--pad); min-width: 0; }
.plate-inset { border-image: url(img/cell.png) 10 fill / 10px / 0 stretch; padding: var(--pad); min-width: 0; }
.plate > h3, .plate-inset > h3 { color: var(--mint); margin-bottom: var(--s3); }
.plate > .key, .plate > .keys, .plate > .rows + .key-note { margin-top: var(--s3); }

/* ---- the tank: three drawn pieces, the light inside is a canvas layer --------------------- */
.tank { position: relative; width: var(--tank-w); max-width: 100%; margin: 0 auto; }
/* the two hoses that run down the chamber beside the glass, from the ceiling into the floor */
.room::before, .room::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s4));
  bottom: 0;
  width: 24px;
  background: url(img/riser-s.png) repeat-y center top;
  background-size: 24px 64px;
  image-rendering: pixelated;
  pointer-events: none;
}
.room::before { left: calc((100% - var(--tank-w) - 2 * var(--gutter)) / 2 + var(--gutter) / 2 - 12px); }
.room::after { right: calc((100% - var(--tank-w) - 2 * var(--gutter)) / 2 + var(--gutter) / 2 - 12px); }
.tank-shell {
  position: relative;
  padding: var(--glass-top) 0 var(--foot);
  background-image: url(img/cap.png), url(img/plinth.png), url(img/glasswall.png);
  background-position: center top, center bottom, center var(--cap-h);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: 288px 80px, 352px 56px, 288px 64px;
  image-rendering: pixelated;
}
#glass { position: absolute; left: 50%; transform: translateX(-50%); top: var(--glass-top); width: var(--glass-w); z-index: 0; }
.glass-body {
  position: relative; z-index: 1;
  width: var(--glass-w); margin: 0 auto; min-height: 160px;
  padding: var(--s2) var(--s2) var(--s3);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
.glass-note { min-height: 32px; }
/* inside the glass the ink is dark on the lit dither, which is the strongest contrast on the page */
.glass-body .label, .glass-body .glass-note { color: #00231c; }
.glass-value { font-family: var(--font-px); font-weight: 700; font-size: 32px; line-height: 32px; letter-spacing: 2px; color: var(--void); -webkit-font-smoothing: none; }
.specimen { width: 104px; height: 144px; margin: var(--s2) auto 0; flex: 0 0 auto; }
.specimen img { width: 104px; height: 144px; }

/* ---- the terminal: the window on the plinth where every link about the coin lives --------- */
/* It is exactly as wide as the plinth it stands on, and its field and its keys share one grid. */
.terminal { width: 100%; margin: calc(-1 * var(--s4)) auto 0; position: relative; z-index: 2; }
.terminal-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 28px; padding: 0 var(--s3) 0 var(--s4);
  border-image: url(img/titlebar.png) 0 20 fill / 0 20px / 0 stretch;
  font-family: var(--font-px); font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 1px;
  color: var(--void); -webkit-font-smoothing: none;
}
.terminal-roll { width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer; background: url(img/lamp-on.png) center / 16px 16px no-repeat; }
.terminal-roll:focus-visible { outline: 2px solid var(--void); outline-offset: 2px; }
.terminal-body {
  border-image: url(img/window.png) 20 fill / 20px / 0 stretch;
  padding: var(--pad);
  display: flex; flex-direction: column; gap: var(--s3);
}
.terminal[data-rolled="true"] .terminal-body { display: none; }
.mint-field { display: flex; flex-direction: column; gap: var(--s1); }
.mint-row {
  border-image: url(img/cell.png) 10 fill / 10px / 0 stretch;
  padding: var(--s3) var(--s4);
  min-height: var(--control);
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--mint);
  overflow-wrap: anywhere; user-select: all; min-width: 0;
}
.mint-row[data-empty="true"] { color: var(--steel); user-select: none; }
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }

/* ---- keys: every button on the site, one height, one width inside its own column ---------- */
.key, .key:link {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; height: var(--control); padding: 0 var(--s3);
  border: 0; cursor: pointer;
  border-image: url(img/key.png) 12 fill / 12px / 0 stretch;
  background: transparent;
  font-family: var(--font-px); font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 1px;
  -webkit-font-smoothing: none;
  color: var(--mint); text-decoration: none; text-align: center;
  transition: color .12s linear, transform .08s linear;
}
.key:hover:not([disabled]):not([aria-disabled="true"]) { color: var(--glow); }
.key:active:not([disabled]):not([aria-disabled="true"]) { border-image-source: url(img/key-down.png); transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.key[disabled], .key[aria-disabled="true"] { color: var(--dim); cursor: default; }
.key-wide { grid-column: 1 / -1; }
.key img.mark { width: 16px; height: 16px; image-rendering: auto; }
.key-note { min-height: 16px; }

/* ---- rows of fact: label left, value right ----------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: var(--s2); }
.row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); min-width: 0; }
.row + .row { padding-top: var(--s2); }
.row + .row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hull); }
.row .label { flex: 0 0 auto; }
.row .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 18px; color: var(--mint); text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* ---- a line in the feed: the address and its mark sit on one baseline -------------------- */
.line-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s3); }
.line-item .who { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--live); overflow-wrap: anywhere; }
.line-item .when { text-align: right; white-space: nowrap; }
.line-item .said { grid-column: 1 / -1; font-size: 14px; line-height: 22px; color: var(--read); overflow-wrap: anywhere; }

/* ---- a post the model wrote, with the lines that put it there ---------------------------- */
.post { display: flex; flex-direction: column; gap: var(--s2); }
.post .text { font-size: 14px; line-height: 22px; color: var(--read); }
.post .sources { overflow-wrap: anywhere; }
.post .sources b { color: var(--live); font-weight: 400; font-family: var(--font-mono); }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 16px; }
.post-foot .key { width: auto; min-width: 96px; }
.votes { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--mint); }

/* ---- fields ------------------------------------------------------------------------------ */
label.field { display: flex; flex-direction: column; gap: var(--s2); }
textarea, input[type="text"], select {
  width: 100%;
  padding: var(--s2) var(--s3);
  border: 0;
  border-image: url(img/cell.png) 10 fill / 10px / 0 stretch;
  background: transparent;
  color: var(--mint);
  font-family: var(--font-txt);
  font-size: 14px;
  line-height: 22px;
  resize: vertical;
}
select { font-family: var(--font-mono); font-size: 13px; height: var(--control); padding: 0 var(--s3); }
textarea::placeholder, input::placeholder { color: var(--dim); }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }

/* ---- the floor: the page ends on the chamber's own cables, never on a bar of text --------- */
.floor { height: 120px; margin: var(--s7) calc(50% - 50vw) 0; background: url(img/cables-s.png) repeat-x center bottom; background-size: 480px 160px; image-rendering: pixelated; }

/* ---- a band under the room keeps the same grammar ---------------------------------------- */
.band { margin-top: var(--s7); }
.band-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.band-head h2 { color: var(--mint); }
/* two columns, not three: thirds of a container land on fractions of a pixel and a pixel plate
   drawn across a half pixel is a blurred edge */
.band-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.band-grid > * { min-width: 0; }
.pot { display: flex; gap: var(--s4); align-items: stretch; }
.pot img { width: 240px; height: 180px; flex: 0 0 auto; align-self: flex-start; }
.pot .rows { flex: 1 1 auto; }

.slot { min-height: 16px; }
[hidden] { display: none !important; }

/* a labelled sample of the thing, shown only while the real thing does not exist yet.
   It is quieter by ink, never by opacity: a faded card is an unreadable card. */
.is-sample .who, .is-sample .sources b { color: var(--dim); }
.is-sample .when, .is-sample .votes { color: var(--steel); font-style: normal; }
.is-sample .said, .is-sample .text { color: var(--steel); }

/* a row in a list that can be opened (the version list) */
button.line-item { width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; transition: transform .08s linear; }
button.line-item:hover .said { color: var(--mint); }
button.line-item:active { transform: translateY(1px); }
button.line-item:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.line-item.is-open { border-image-source: url(img/hull.png); border-image-slice: 16 fill; border-image-width: 16px; }
.line-item.is-open .who { color: var(--glow); }

/* the select in a wall head keeps the head on one line */
.wall-head label.label { display: flex; align-items: center; gap: var(--s2); }
.wall-head select { width: auto; min-width: 104px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .specimen img { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ---- 1280 to 1440: the column keeps its margin, nothing else moves ----------------------- */
@media (max-width: 1320px) {
  :root { --col: 1120px; --edge: 24px; --gutter: 48px; --valve-w: 172px; }
  .gantry { height: 64px; margin-bottom: var(--s1); background-position: center bottom; }
  .masthead { height: 48px; }
  .manifold { margin-bottom: var(--s2); }
  .terminal-body { gap: var(--s2); }
}

/* ---- 1024 to 1279: the second wall goes under the room ---------------------------------- */
@media (max-width: 1180px) {
  :root { --col: 960px; --valve-w: 144px; }
  .room { grid-template-columns: minmax(0, 1fr) var(--tank-w); }
  .room > .wall:last-of-type { grid-column: 1 / -1; }
  /* two columns: the gutters the hoses ran down are gone */
  .room::before, .room::after { display: none; }
}

/* ---- phone and small tablet: one column, the same room read top to bottom ---------------- */
@media (max-width: 880px) {
  :root { --edge: 16px; --s7: 32px; }
  .gantry { height: auto; padding-block: var(--s3); background-size: 480px 104px; }
  .masthead { height: auto; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); }
  .clock { align-items: flex-start; text-align: left; }
  .manifold { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s4); }
  .room { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .room > .wall:last-of-type { grid-column: auto; }
  /* one column: there are no gutters left for the risers to run down */
  .room::before, .room::after { display: none; }
  .band-grid { grid-template-columns: minmax(0, 1fr); }
  .pot { flex-direction: column; align-items: stretch; }
  .pot img { width: 160px; height: 120px; margin: 0 auto; }
  .floor { height: 96px; }
}

@media (max-width: 440px) {
  .manifold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .masthead { padding: var(--s3) var(--s2); }
  .nameplate { flex-wrap: wrap; gap: var(--s2); }
  .wordmark { letter-spacing: 0; }
}