/* galápagos: one printed sheet of a retro-future operating system.
   Built to his styleguide reference: flat cells, 1 px borders, one teal, one orange.
   Pixel face carries the loud things only; paragraphs are a grotesque, figures a mono. */

@font-face { font-family: "Galmuri"; src: url(../fonts/galmuri11-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Galmuri"; src: url(../fonts/galmuri11.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Excon"; src: url(../fonts/excon-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Excon"; src: url(../fonts/excon-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Excon"; src: url(../fonts/excon-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IntelOne"; src: url(../fonts/intelone-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IntelOne"; src: url(../fonts/intelone-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --field: #BFCFD2;
  --sheet: #D6E1E3;
  --cell: #E9F0F2;
  --paper: #FCFDFD;
  --ink: #16222B;
  --ink-2: #3E4F59;
  --border: #9FB0B6;
  --border-dark: #75888F;
  --teal: #00F0FF;
  --teal-deep: #00707F;
  --teal-dark: #0094A8;
  --orange: #FF4500;
  --orange-dark: #C33300;
  --gray: #8A96A5;
  --gap: 20px;
  /* Galmuri is drawn on an 11 px grid: one grid pixel of air between glyphs, two between words.
     Every pixel size on this sheet is a whole multiple of 11, so a glyph never lands on a half pixel. */
  --pxls: 0.0909em;
  --pxws: 0.1818em;
  --px: "Galmuri", "Courier New", monospace;
  --tx: "Excon", "Segoe UI", system-ui, sans-serif;
  --mo: "IntelOne", ui-monospace, "Consolas", monospace;
}

* { box-sizing: border-box; }
html { background: var(--field); }
body {
  margin: 0;
  padding: 28px 28px 64px;
  background: var(--field);
  color: var(--ink);
  font: 400 18px/1.55 var(--tx);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
img { image-rendering: pixelated; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--teal-deep); }

/* the pixel role, in one place: it is never antialiased, never scaled, never shadowed, and it
   always carries its grid pixel of letter spacing, or the glyphs run into each other */
.px, .wordmark, .wordmark-2, .key-name, .cell-title, .ticker, .btn, .win-bar-name, .win-open,
.tab, .guide-title, .specimen-bar-name, .specimen-close, .specimen-body h3, .ladder-1, .ladder-2,
.step h3 {
  font-family: var(--px); font-weight: 700;
  -webkit-font-smoothing: none; text-rendering: geometricPrecision;
  letter-spacing: var(--pxls); word-spacing: var(--pxws); text-shadow: none;
}
.mo { font-family: var(--mo); font-variant-numeric: tabular-nums; }

/* ---- the sheet ---------------------------------------------------------- */
.sheet {
  max-width: 1760px;
  margin: 0 auto;
  background: var(--sheet);
  border: 24px solid transparent;
  border-image: url(../img/frame.png) 48 / 24px / 0 stretch;
  background-clip: padding-box;
  padding: 28px 28px 34px;
}

/* ---- masthead ----------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 6px 4px 0;
}
.wordmark {
  font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none;
  font-size: 99px; line-height: 1.04; color: var(--teal-deep);
}
.wordmark-2 {
  font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none;
  font-size: 66px; line-height: 1.15; color: var(--orange-dark); margin-top: 4px;
}
.masthead-props { display: flex; align-items: flex-end; gap: 26px; padding-top: 22px; }
.masthead-props img { width: 80px; height: 80px; }
.masthead-props img:last-child { width: 52px; height: 52px; }

.rule { height: 3px; background: var(--border-dark); margin: 22px 0 0; }
.strapline {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: baseline;
  margin: 0; padding: 14px 4px 0;
  font: 700 18px/1.3 var(--tx); letter-spacing: 0.06em; color: var(--ink);
}
.strapline-right { font: 400 18px/1.3 var(--mo); color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.strapline-right b { color: var(--ink); font-weight: 500; }

/* ---- the swatch keys = the navigation ----------------------------------- */
.keys {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin: 22px 0 26px;
}
.key {
  position: relative; display: block; min-height: 136px;
  border: 10px solid transparent;
  border-image: url(../img/swatch-gray.png) 20 fill / 10px / 0 stretch;
  padding: 14px 18px 16px;
  text-decoration: none; color: var(--ink);
}
.key-mark { display: block; width: 40px; height: 40px; margin-bottom: 14px; }
.key-name { display: block; font-size: 22px; line-height: 1.1; color: var(--ink); }
.key-figure {
  display: block; margin-top: 8px; font: 500 17px/1.25 var(--tx);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.key:hover { filter: brightness(1.06); }
.key:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.key[aria-current="page"] {
  border-image-source: url(../img/swatch-open.png); color: var(--paper);
}
.key[aria-current="page"] .key-name { color: var(--teal); }
.key[aria-current="page"] .key-figure { color: #D5E7EC; }

/* ---- the two columns ---------------------------------------------------- */
.columns { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: var(--gap); align-items: start; }
.col { display: grid; gap: 26px; align-content: start; min-width: 0; }
.cell, .cell-block { min-width: 0; }

.cell-title {
  font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none;
  font-size: 33px; line-height: 1.2; margin: 0 0 12px 4px; color: var(--ink);
}
.cell {
  container-type: inline-size;
  border: 12px solid transparent;
  border-image: url(../img/cell.png) 24 fill / 12px / 0 stretch;
  padding: 20px;
}
.cell-paper { border-image-source: url(../img/cell-paper.png); }
.cell-dark { border-image-source: url(../img/cell-dark.png); color: var(--paper); }
.cell p { margin: 0 0 14px; }
.cell p:last-child { margin-bottom: 0; }

/* ---- rows, labels, figures ---------------------------------------------- */
.rows { display: grid; gap: 2px; }
.row {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 2px 16px; padding: 11px 2px 13px;
}
.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #CBD8DC; }
.row:last-child::after { display: none; }
.row-label { font: 500 17px/1.3 var(--tx); color: var(--ink-2); }
.row-value { font: 500 19px/1.2 var(--mo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  /* a latin name is three words: on a phone strip it takes the text face, whole, instead of being cut */
  .specimen-bar-name {
    font-family: var(--tx); font-size: 18px; letter-spacing: 0.02em; word-spacing: normal;
    -webkit-font-smoothing: antialiased;
  }
}
.lab { font: 700 16px/1.2 var(--tx); letter-spacing: 0.04em; color: var(--ink-2); display: block; margin-bottom: 10px; }
.big { font: 400 44px/1.1 var(--mo); font-variant-numeric: tabular-nums; }
.up { color: var(--teal-deep); }
.down { color: var(--orange-dark); }
.muted { color: var(--ink-2); }
.note { font: 400 17px/1.55 var(--tx); color: var(--ink-2); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; min-width: 54px;
  border: 12px solid transparent;
  border-image: url(../img/btn-secondary.png) 24 fill / 12px / 0 stretch;
  padding: 0 14px;
  font-size: 22px; line-height: 1;
  color: var(--ink); background: none; cursor: pointer; text-decoration: none;
}
.btn img { width: 26px; height: 26px; image-rendering: auto; }
.btn-primary { border-image-source: url(../img/btn-primary.png); color: var(--ink); }
.btn-dark { border-image-source: url(../img/btn-dark.png); color: var(--teal); }
.btn[aria-disabled="true"], .btn:disabled {
  border-image-source: url(../img/btn-disabled.png); color: #4C5A64; cursor: not-allowed;
}
.btn[aria-disabled="true"] img, .btn:disabled img { opacity: 0.45; }
.btn:not([aria-disabled="true"]):hover { filter: brightness(1.05); }
.btn:not([aria-disabled="true"]):active { transform: translateY(2px); }
.btn:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* the token cell's controls are a complete two column block, never a ragged wrap */
.btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-grid .btn { width: 100%; min-height: 56px; }
.btn-grid .btn:nth-child(3) { grid-column: 1 / -1; }
/* a 22 px pixel label needs room: in a narrow column the plates keep their size and the label
   takes the text face, which stays readable at 18 px (RULES/05 > readable before characterful) */
@container (max-width: 430px) {
  .btn, .tab {
    font-family: var(--tx); font-size: 18px; letter-spacing: 0.02em; word-spacing: normal;
    -webkit-font-smoothing: antialiased;
  }
  .btn { padding: 0 14px; gap: 8px; }
  .tab { padding: 12px 16px; line-height: 30px; }
  .btn img { width: 22px; height: 22px; }
}
@container (max-width: 320px) {
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs .tab:last-child { grid-column: 1 / -1; }
}

/* ---- the contract cell (his input-field component) ---------------------- */
.ticker {
  font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none;
  font-size: 33px; line-height: 1.1; color: var(--teal-deep); margin: 0 0 14px;
}
@media (max-width: 760px) {
  .ticker { font-size: 22px; }
}
.readout {
  border: 8px solid transparent;
  border-image: url(../img/inset.png) 16 fill / 8px / 0 stretch;
  padding: 14px 16px;
  font: 400 19px/1.5 var(--mo);
  word-break: break-all;
  min-height: 60px;
}
.readout.empty { color: var(--ink-2); }
.caret { display: inline-block; width: 10px; height: 20px; background: var(--ink); vertical-align: -3px; animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- the live bot windows (his title-bar component) --------------------- */
.windows { display: grid; grid-template-columns: repeat(auto-fill, minmax(372px, 1fr)); gap: 18px; }
.win { background: var(--paper); border: 2px solid var(--border-dark); border-radius: 10px; overflow: hidden; }
.win-bar {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px 0 16px;
  border: 0; border-bottom: 2px solid var(--border-dark);
  background-image: url(../img/titlebar.png); background-size: 100% 56px; background-repeat: no-repeat;
}
.win-live .win-bar { background-image: url(../img/titlebar-live.png); }
.win-dead .win-bar { background-image: url(../img/titlebar-dead.png); }
.win-bar-name {
  flex: 1 1 auto; min-width: 0; padding-left: 12px; font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none;
  font-size: 22px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--teal-deep); flex: none; }
.win-live .lamp { animation: pulse 2s ease-in-out infinite; }
.win-dead .lamp { background: var(--gray); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.win-open {
  flex: none; width: 38px; height: 32px; border: 2px solid var(--border-dark); border-radius: 4px;
  background: #EDF3F4; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.win-open:hover { background: var(--teal); }
.win-open:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.win-body { padding: 18px 20px 20px; }
.bar {
  position: relative; height: 18px; margin: 10px 0 4px;
  background: #DCE4E7; border: 2px solid var(--border);
}
.bar-fill { position: absolute; top: 0; bottom: 0; background: var(--teal); transition: width 0.6s ease; }
.bar-fill.down { background: var(--orange); }
.bar-mid { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--border-dark); }
.trades { margin-top: 14px; display: grid; gap: 2px; }
.trade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font: 400 17px/1.5 var(--mo); }
/* on a desktop window the middle cell has the room for the whole line; if a name ever grows, it
   ends in an ellipsis instead of pushing the signature onto a second line */
@media (min-width: 761px) {
  .trade > :nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) {
  .trade { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; margin-bottom: 8px; }
  .trade > :nth-child(3) { grid-column: 2; justify-self: start; }
}
.trade-side { font-weight: 500; }
.trade a { color: var(--ink-2); }

/* ---- notification rows (his notification component) --------------------- */
.notes { display: grid; gap: 12px; }
.note-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: #DFE7EA; border: 2px solid var(--border); border-radius: 8px; padding: 16px 22px;
}
.note-row img { width: 36px; height: 36px; }
.note-row b { font: 700 18px/1.3 var(--tx); display: block; }
.note-row span { font: 400 17px/1.45 var(--tx); color: var(--ink-2); }
.note-row time { font: 400 17px/1.2 var(--mo); color: var(--ink-2); }

/* ---- tabs and checkbox (his components) --------------------------------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  min-height: 54px; padding: 12px 20px; border: 2px solid var(--border-dark); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: #D7DFE2;
  font-size: 22px; line-height: 30px; color: var(--ink-2); cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 5px 0 var(--teal); }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tabs-under { border-top: 2px solid var(--border-dark); margin-top: -2px; padding: 16px 20px 14px; }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font: 500 17px/1.3 var(--tx); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 28px; height: 28px; flex: none; border: 2px solid var(--border-dark); background: var(--paper);
  background-size: 22px 22px; background-position: center; background-repeat: no-repeat;
}
.check input:checked + .check-box { background-image: url(../img/mark-check.png); }
.check input:focus-visible + .check-box { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---- the nursery grid --------------------------------------------------- */
.grid-wrap { position: relative; }
#nursery-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; }
#nursery-canvas:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }
.ramp { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 400 17px/1.3 var(--tx); color: var(--ink-2); }
.ramp i { width: 28px; height: 18px; border: 2px solid var(--border-dark); display: block; }

/* ---- the lineage tree --------------------------------------------------- */
#tree-canvas { display: block; width: 100%; height: auto; cursor: pointer; }
#tree-canvas:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

/* ---- tables ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 2px solid #CBD8DC; }
/* a figure never wraps on a desktop table; on a phone a date must be allowed to, or the
   table pushes the page sideways */
@media (min-width: 901px) { td.mo, td.num { white-space: nowrap; } }
th { font: 700 16px/1.2 var(--tx); letter-spacing: 0.04em; color: var(--ink-2); }
td { font: 400 17px/1.4 var(--tx); }
td.mo, th.mo { font-family: var(--mo); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }
tr.pick { cursor: pointer; }
tr.pick:hover td { background: #DCE8EB; }
tr.pick:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.dead td { color: #566069; }

/* ---- guidelines box (his) ----------------------------------------------- */
.guide-title {
  font-family: var(--px); font-weight: 700; -webkit-font-smoothing: none; font-size: 22px;
  background: var(--paper); border: 2px solid var(--border); border-radius: 6px;
  padding: 18px 24px; margin-bottom: 18px;
}
.guides { list-style: none; padding: 0; display: grid; gap: 20px; }
.guides li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.guides i { width: 14px; height: 14px; background: var(--ink); margin-top: 9px; }
.guides b { font: 700 20px/1.3 var(--tx); display: block; margin-bottom: 4px; }
.guides span { font: 400 17px/1.5 var(--tx); color: var(--ink-2); }

/* ---- the specimen dialog (his dialog component) ------------------------- */
.specimen-backdrop { position: fixed; inset: 0; background: rgba(12, 22, 28, 0.55); z-index: 40; }
.specimen {
  position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 48px)); max-height: calc(100vh - 64px); overflow: auto;
  background: var(--cell); border: 3px solid var(--border-dark); border-radius: 12px;
  box-shadow: 0 18px 0 rgba(12, 22, 28, 0.18);
}
.specimen-bar {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 12px 0 20px;
  background-image: url(../img/titlebar.png); background-size: 100% 56px; background-repeat: no-repeat;
  border-bottom: 2px solid var(--border-dark);
}
.specimen-bar-name {
  flex: 1 1 auto; min-width: 0; padding-left: 12px; font-size: 22px; line-height: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.specimen-close {
  width: 38px; height: 34px; border: 2px solid var(--orange-dark); border-radius: 4px; background: var(--orange);
  color: #FFF4EF; font: 700 22px/1 var(--px); cursor: pointer; -webkit-font-smoothing: none;
}
.specimen-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.specimen-body { padding: 24px 28px 28px; }
.specimen-body h3 { font: 700 22px/1.2 var(--px); -webkit-font-smoothing: none; margin: 24px 0 12px; }
.specimen-body h3:first-child { margin-top: 0; }
.genes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gene { background: var(--paper); border: 2px solid var(--border); border-radius: 8px; padding: 16px 22px; }
.gene b { display: block; font: 700 16px/1.2 var(--tx); letter-spacing: 0.04em; color: var(--ink-2); margin-bottom: 6px; }
.gene span { font: 400 20px/1.2 var(--mo); font-variant-numeric: tabular-nums; }

/* ---- the hover tip ------------------------------------------------------ */
.tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: #1D2B35; color: var(--paper); border: 2px solid #0B1116;
  padding: 12px 18px; font: 400 17px/1.4 var(--mo); white-space: nowrap;
}

/* ---- the taxonomy ladder (his typography hierarchy) --------------------- */
.ladder { display: grid; gap: 14px; }
.ladder-1 { font: 700 44px/1.1 var(--px); -webkit-font-smoothing: none; color: var(--ink); }
.ladder-2 { font: 700 22px/1.2 var(--px); -webkit-font-smoothing: none; color: var(--teal-deep); }
.ladder-3 { font: 400 18px/1.5 var(--tx); }
.ladder-4 { font: 400 17px/1.5 var(--tx); color: var(--ink-2); }

/* ---- 1366 and down ------------------------------------------------------ */
@media (max-width: 1500px) {
  .wordmark { font-size: 77px; }
  .wordmark-2 { font-size: 44px; }
  .cell-title { font-size: 22px; }
  .columns { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
}
@media (max-width: 1100px) {
  .keys { grid-template-columns: repeat(3, 1fr); }
  .columns { grid-template-columns: minmax(0, 1fr); }
}
/* between 760 and 900 the masthead title and its marks cannot share a line: the title takes the
   full width and the marks go under it, the same grammar the phone uses */
@media (max-width: 900px) {
  .masthead { flex-direction: column; gap: 16px; }
  .masthead-props { padding-top: 0; gap: 20px; }
  .masthead-props img { width: 56px; height: 56px; }
  .masthead-props img:last-child { width: 38px; height: 38px; }
  .wordmark { font-size: 66px; }
  .wordmark-2 { font-size: 44px; }
  /* a phone column cannot take six columns of a table: the three that carry the point stay */
  table .opt { display: none; }
  th, td { padding: 12px 14px; }
}
@media (max-width: 760px) {
  body { padding: 14px 14px 48px; }
  .sheet { border-width: 16px; border-image-width: 16px; padding: 18px 14px 22px; }
  .masthead { flex-direction: column; gap: 14px; }
  .masthead-props { padding-top: 0; gap: 16px; }
  .masthead-props img { width: 48px; height: 48px; }
  .masthead-props img:last-child { width: 34px; height: 34px; }
  .wordmark { font-size: 44px; }
  .wordmark-2 { font-size: 33px; }
  .cell-title { font-size: 22px; }
  .strapline { font-size: 16px; }
  .strapline-right { font-size: 16px; }
  /* on a phone a key lies down: the mark on the left, the name and the figure beside it */
  .keys { grid-template-columns: 1fr; gap: 10px; }
  .key {
    min-height: 116px; padding: 14px 24px 16px;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 1fr auto auto;
    column-gap: 18px; align-content: end;
  }
  .key-mark { grid-row: 1 / 4; align-self: end; margin-bottom: 2px; }
  .key-name { grid-column: 2; grid-row: 2; }
  .key-figure { grid-column: 2; grid-row: 3; margin-top: 4px; }
  /* the phone keeps 1 em of air beside a 33 px name: 24 of padding over a 10 px edge */
  .cell { padding: 20px 24px 22px; border-width: 10px; border-image-width: 10px; }
  .windows { grid-template-columns: 1fr; }
  .big { font-size: 28px; }
  .ladder-1 { font-size: 33px; }
}
@media (max-width: 430px) {
  /* the second masthead line has to stay ONE line, or the first screen is all masthead */
  .wordmark-2 { font-size: 22px; }
  .masthead-props img { width: 44px; height: 44px; }
  .masthead-props img:last-child { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 33px; }
  .strapline { font-size: 16px; }
}
@media (max-width: 340px) {
  /* only at 320: the longest key name and its mark cannot share a line with 1 em of air each side */
  .key { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
  .key-mark { grid-row: 1; margin-bottom: 10px; }
  .key-name, .key-figure { grid-column: 1; }
  .key-name { grid-row: 2; }
  .key-figure { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* an empty bank: his disabled state, so the twelve slots always make a complete grid */
.win-empty { background: #E2E8EA; }
.win-empty .win-bar { background-image: url(../img/titlebar-dead.png); }
.win-empty .win-bar-name, .win-empty .row-label, .win-empty .row-value { color: #4C5A64; }
.win-empty .lamp { background: #B4BEC5; }

/* the twelve banks as keys, and the four steps of a day: his icon grid, carrying real state */
.banks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* always a complete row: six, four or two, never a ragged last line */
@container (max-width: 900px) { .banks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 420px) { .banks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bank {
  background: #DDE5E8; border: 2px solid var(--border); border-radius: 8px;
  padding: 14px 18px 16px; min-height: 96px;
}
.bank b { display: block; font: 400 20px/1.2 var(--mo); color: var(--ink-2); }
.bank span { display: block; margin-top: 6px; font: 400 17px/1.3 var(--tx); color: var(--ink-2); }
.bank-taken { background: var(--teal); border-color: var(--teal-deep); }
.bank-taken b, .bank-taken span { color: var(--ink); }
/* two wide steps a row: four narrow columns broke every line after three words */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--paper); border: 2px solid var(--border); border-radius: 8px; padding: 18px 24px 20px; }
.step img { display: block; width: 44px; height: 44px; margin-bottom: 12px; }
.step b { display: block; font: 400 22px/1.2 var(--mo); color: var(--teal-deep); }
/* the title keeps two lines of room on every card, so the paragraphs of a row start level */
.step h3 { font-size: 22px; line-height: 1.2; margin: 8px 0 10px; min-height: 53px; }
.step p { font: 400 17px/1.55 var(--tx); color: var(--ink-2); margin: 0; }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step h3 { min-height: 0; }
  /* a warning row stands up on a phone: the mark over the text, both with the full column */
  .note-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .note-row img { width: 32px; height: 32px; }
}
@media (max-width: 520px) {
  /* a 22 px pixel label plus its 1 em of air does not fit a phone column: the controls keep the
     same plates and take the text face, which is readable at 18 px (RULES/05 > readable first) */
  .btn {
    font-family: var(--tx); font-size: 18px; line-height: 1.1; -webkit-font-smoothing: antialiased;
    letter-spacing: 0.02em; word-spacing: normal; width: 100%; gap: 8px; padding: 0 14px;
  }
  .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .btn img { width: 22px; height: 22px; }
  .btn-grid { grid-template-columns: minmax(0, 1fr); }
}

/* the narrowest cell of all (a 320 px phone): a 22 px pixel label and its 1 em of air do not fit
   164 px, so the controls and the step titles take the text face at its floor. Last in the file,
   because the phone media queries above would otherwise win on source order. */
@container (max-width: 200px) {
  .btn { font-size: 16px; gap: 4px; padding: 0 10px; }
  .btn img { width: 16px; height: 16px; }
  .step h3 {
    font-family: var(--tx); font-size: 18px; letter-spacing: 0.02em; word-spacing: normal;
    -webkit-font-smoothing: antialiased;
  }
}