/* Flout. One container, one scale, one meaning per colour.
   The page is a boxed microgame of a self service laundry: a centred type band over one framed
   picture that is alive, and the sheets that fall out of the box set left under it.
   Nothing here is a CSS bordered box: every frame, plate and key is a drawn PNG, nine sliced. */

@font-face { font-family: "Archivo Black"; src: url("font/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("font/archivo-var-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("font/space-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("font/space-mono-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* the board and its two printed inks, measured off his box lid */
  --ink: #14213d;
  --ink2: #0c1529;
  --paper: #f7f7f2;
  --mint: #a8e0d1;     /* CLEAN: a net buy, a credit, what leaves the drum */
  --orange: #ff7a1a;   /* BUY: the powder, and the one primary action */
  --sell: #7fa6d9;     /* SELL: what gets washed out */
  --chrome: #8c959f;   /* muted: rules, labels, separators, disabled */

  --page: 1120px;
  --gutter: 24px;

  /* 12 / 14 / 16 / 20 / 24 / 32 / 48, and one display size above them */
  --t12: 12px; --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px; --t32: 32px; --t48: 48px;
  /* his display is 16.6% of the frame, which is 186px on this column; the 2026-10-19 density
     order caps one display element at 80px, so 80 it is */
  --display: 80px;

  /* 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;

  --head: "Archivo Black", "Arial Black", sans-serif;   /* headings and the display word */
  --body: "Archivo", system-ui, sans-serif;             /* every sentence and every table cell */
  --mono: "Space Mono", ui-monospace, monospace;        /* labels, values, addresses */

  --frame: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }

body {
  background: var(--ink);
  color: var(--paper);
  font: 400 var(--t14)/1.6 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* the press grain over the whole board, so the ink is printed and not projected */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("img/grain.png") repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.col {
  position: relative;
  z-index: 2;
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--s32) 0 var(--s48);
}

/* ------------------------------------------------------------------ the lid */

.lid-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s16);
}
.mark, .cat {
  font: 700 var(--t14)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome);
}
.cat { text-align: right; }
.cat b { color: var(--paper); font-weight: 700; }

/* his thin keyline plaque, the one frame grammar the whole site reuses */
.plaque {
  border: 8px solid transparent;
  border-image: url("img/panel.png") 16 fill / 8px / 0 stretch;
  padding: var(--s8) var(--s24);
  font: 400 var(--t14)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

.lid-body {
  display: grid;
  grid-template-columns: 1fr 352px;
  gap: var(--gutter);
  align-items: stretch;
  margin-top: var(--s24);
}

.lid-left { display: flex; flex-direction: column; justify-content: space-between; }

.display {
  margin: 0;
  font: 400 var(--display)/0.95 var(--head);
  letter-spacing: -0.03em;
  color: var(--paper);
}
.caption {
  margin: var(--s8) 0 0;
  font: 400 var(--t14)/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--mint);
  max-width: 46ch;
}

.rule { height: 2px; margin: var(--s16) 0; background: url("img/rule.png") repeat-x center / auto 2px; }
.rule-paper { background-image: url("img/rule-paper.png"); }

.pot-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); }
.label {
  font: 400 var(--t14)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome);
}
.pot-value { font: 400 var(--t32)/1 var(--head); letter-spacing: -0.01em; color: var(--paper); }
.pot-value .of { color: var(--chrome); }
/* the trough the pot fills: a drawn object with a chrome lip, never a bordered div */
.pot-bar {
  position: relative;
  height: 20px;
  margin-top: var(--s12);
  border: 5px solid transparent;
  border-image: url("img/tank.png") 10 fill / 5px / 0 stretch;
  overflow: hidden;
}
.pot-fill { position: absolute; inset: 1px auto 1px 1px; width: 0; background: var(--orange); transition: width 0.28s ease-out; }
.pot-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(12,21,41,.75) calc(10% - 2px) 10%); }

.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); }
.counter .num { display: block; font: 400 var(--t24)/1.1 var(--head); color: var(--paper); margin-top: var(--s4); }
.counter.clean .num { color: var(--mint); }
.counter.washed .num { color: var(--sell); }

/* ------------------------------------------------------- the programme dial */

.dial {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--s16);
  align-items: start;
}
.dial-face { width: 104px; height: 104px; display: block; }
.dial > canvas { width: 100%; height: auto; }
.progs { display: grid; gap: var(--s8); }

/* every key on the site: a drawn plate, four states, never a CSS rectangle */
.key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  min-height: 48px;
  padding: var(--s12) var(--s24);
  border: 12px solid transparent;
  border-image: url("img/key.png") 24 fill / 12px / 0 stretch;
  --audit-plate: #1d2a4c;
  background: none;
  font: 700 var(--t14)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease-out;
}
.key:hover:not(:disabled):not([aria-disabled="true"]) { border-image-source: url("img/key-hover.png"); }
.key:active:not(:disabled):not([aria-disabled="true"]) { border-image-source: url("img/key-press.png"); transform: translateY(2px); }
.key:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.key:disabled, .key[aria-disabled="true"] { border-image-source: url("img/key-off.png"); --audit-plate: #161e36; color: var(--chrome); cursor: not-allowed; }
.key.primary { border-image-source: url("img/key-primary.png"); --audit-plate: #f06a09; color: var(--ink); }
.key.primary:hover:not([aria-disabled="true"]) { border-image-source: url("img/key-primary-hover.png"); }
.key.primary:active:not([aria-disabled="true"]) { border-image-source: url("img/key-primary-press.png"); }
.key.primary[aria-disabled="true"] { border-image-source: url("img/key-off.png"); --audit-plate: #161e36; color: var(--chrome); }
.key .mark-img { width: 20px; height: 20px; display: block; }

.prog { justify-content: flex-start; text-align: left; }
/* the programme number is part of the label, so it is the same ink at a lighter weight:
   a second muted grey on a key plate cannot clear 4.5:1 and would be a colour with no meaning */
.prog .n { color: var(--paper); font-weight: 400; min-width: 1.2em; }
.prog[aria-selected="true"] { border-image-source: url("img/key-primary.png"); --audit-plate: #f06a09; color: var(--ink); }
.prog[aria-selected="true"] .n { color: var(--ink); font-weight: 400; }
.prog[aria-selected="true"]:hover { border-image-source: url("img/key-primary-hover.png"); }

/* ------------------------------------------------------------- the picture */

.picture {
  position: relative;
  margin-top: var(--s32);
  padding-bottom: 28px;
  border: var(--frame) solid transparent;
  border-image: url("img/frame.png") 32 fill / var(--frame) / 0 stretch;
  background: #0a1324;
}
.picture canvas { display: block; width: 100%; height: auto; }
.plates { position: absolute; inset: 0; pointer-events: none; }
.readout, .tagline {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.readout {
  font: 700 var(--t16)/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--mint);
}
.readout.washer { color: var(--chrome); }
.readout.debt { color: var(--sell); }
.tagline {
  font: 400 var(--t14)/1 var(--mono);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.picture-note {
  margin: 0;
  padding: var(--s12) var(--s16);
  background: rgba(12,21,41,.86);
  font: 400 var(--t14)/1.5 var(--mono);
  color: var(--mint);
  letter-spacing: 0.04em;
}

/* --------------------------------------------- the enamel sign and the mint */

.enamel {
  position: relative;
  z-index: 3;
  margin-top: -28px;
  border: 20px solid transparent;
  border-image: url("img/enamel.png") 40 fill / 20px / 0 stretch;
  --audit-plate: #e7e6dc;
  padding: var(--s8) var(--s16) var(--s8);
  color: var(--ink);
  display: grid;
  gap: var(--s12);
}
.enamel .label { color: #4c566e; }
.mint-line {
  display: block;
  width: 100%;
  font: 400 var(--t16)/1.5 var(--mono);
  color: var(--ink);
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
}
.mint-line.empty { color: #5a6276; }
.enamel-keys { display: flex; flex-wrap: wrap; gap: var(--s12); }
.enamel .key { color: var(--paper); }
.enamel .key.primary { color: var(--ink); }
/* the disabled colour is the last word, whatever block the key sits in */
.key[aria-disabled="true"], .key:disabled,
.enamel .key[aria-disabled="true"], .enamel .key.primary[aria-disabled="true"] { --audit-plate: #161e36; color: var(--chrome); }

/* -------------------------------------------------------------- the sheets */

.screen { margin-top: var(--s48); }
.screen[hidden] { display: none; }

.block { margin-top: var(--s32); }
h2 { margin: 0 0 var(--s16); font: 400 var(--t24)/1.2 var(--head); letter-spacing: -0.01em; color: var(--paper); }
h3 { margin: 0 0 var(--s12); font: 400 var(--t20)/1.3 var(--head); color: var(--paper); }
p { margin: 0 0 var(--s12); max-width: 72ch; color: var(--paper); }
p.muted { color: var(--chrome); }
a { color: var(--mint); }

.panel {
  border: 12px solid transparent;
  border-image: url("img/panel.png") 24 fill / 12px / 0 stretch;
  padding: var(--s24);
}
.panel-muted { border-image-source: url("img/panel-muted.png"); }

table { width: 100%; border-collapse: collapse; }
caption { text-align: left; margin-bottom: var(--s12); }
th {
  font: 400 var(--t14)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome);
  text-align: right;
  padding: 0 0 var(--s8);
  white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
td {
  position: relative;
  padding: var(--s12) 0;
  font: 400 var(--t14)/1.4 var(--body);
  text-align: right;
  white-space: nowrap;
}
td.addr { font-family: var(--mono); text-align: left; }
td.num { font-family: var(--mono); }
td.clean { color: var(--mint); }
td.dirty { color: var(--sell); }
td.zero { color: var(--chrome); }
tbody tr td::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: url("img/rule.png") repeat-x center / auto 2px;
  opacity: 0.5;
}
tbody tr:last-child td::after { display: none; }
th + th, td + td { padding-left: var(--s16); }

.field { display: grid; grid-template-columns: 1fr auto; gap: var(--s12); align-items: stretch; }
input[type="text"] {
  min-width: 0;
  min-height: 48px;
  padding: var(--s12) var(--s16);
  border: 0;
  background: var(--ink2);
  color: var(--paper);
  font: 400 var(--t16)/1.4 var(--mono);
  outline-offset: 2px;
}
input[type="text"]:focus-visible { outline: 3px solid var(--mint); }
input[type="text"]::placeholder { color: #5b6880; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.step { display: grid; align-content: start; gap: var(--s8); }
.step .n { font: 400 var(--t32)/1 var(--head); color: var(--orange); }
.step p { margin: 0; font-size: var(--t14); }

.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s24) var(--gutter); }
.pair { display: block; min-width: 0; }
.pair input[type="text"] { width: 100%; margin-top: var(--s4); }
.pair .v { display: block; font: 400 var(--t20)/1.2 var(--mono); color: var(--paper); margin-top: var(--s4); }
.pair .v.clean { color: var(--mint); }
.pair .v.dirty { color: var(--sell); }

.state { font: 400 var(--t14)/1.5 var(--mono); color: var(--chrome); letter-spacing: 0.04em; }
.state.bad { color: var(--sell); }
.state.good { color: var(--mint); }

.copied { color: var(--mint); }

/* --------------------------------------------------------------- the 1366 */

@media (max-width: 1100px) {
  .lid-body { grid-template-columns: 1fr 300px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --display: 56px; --frame: 12px; }
  .picture { border-image-slice: 24; }
  .lid-body { grid-template-columns: 1fr; }
  .dial { grid-template-columns: 104px 1fr; }
  .counters { grid-template-columns: repeat(3, 1fr); }
}

/* A nine column ledger cannot be made narrower by wrapping: under 900 px every table prints as
   labelled rows instead, which is also how it reads on a phone. */
@media (max-width: 900px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tbody tr { padding: var(--s12) 0; position: relative; }
  tbody tr::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: url("img/rule.png") repeat-x center / auto 2px; opacity: .5;
  }
  tbody tr:last-child::after { display: none; }
  .panel { padding: var(--s16); }
  td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s12); padding: var(--s4) 0; text-align: right; white-space: normal; }
  td + td { padding-left: 0; }
  td::after { display: none !important; }
  td::before {
    content: attr(data-label);
    font: 400 var(--t14)/1.3 var(--mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--chrome);
    text-align: left;
    max-width: 52%;
    white-space: normal;
  }
  td.addr { text-align: right; }
}

@media (max-width: 560px) {
  :root { --display: 44px; --gutter: 16px; }
  .lid-row { grid-template-columns: 1fr auto; row-gap: var(--s8); }
  .plaque { grid-column: 1 / -1; order: 3; justify-self: start; white-space: normal; }
  .counters { grid-template-columns: 1fr; gap: var(--s12); }
  .counter { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s12); }
  .counter .num { margin-top: 0; }
  .dial { grid-template-columns: 72px 1fr; align-items: start; }
  .pot-head { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .pot-value { font-size: var(--t24); }
  .steps, .pairs { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; }
  .enamel { margin-top: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}