/* CrunchyTile — all CSS. Linked with <link rel="stylesheet"> so it works on file://.
 *
 * --css-build is checked by index.html. Bump BOTH whenever the stylesheet gains rules a new feature
 * needs: a stale stylesheet is otherwise invisible — every script fresh, the layout silently wrong.
 *
 * The palette is the suite's, deliberately identical to CrunchySFX / VFX / BGM so the apps read as
 * one family.
 */
:root {
  --css-build: 21;
  color-scheme: dark;

  /* Set from CHECKER in tile.js at startup — these are only the fallback. */
  --chk-a: #ff00ff;
  --chk-b: #a000a0;

  --bg: #14121a;
  --panel: #1e1b28;
  --panel2: #282436;
  --line: #3a3550;
  --ink: #e8e4f0;
  --muted: #9a94ad;
  --accent: #ff7a45;
  --accent2: #45d0ff;
  --bad: #ff8f97;
}

* { box-sizing: border-box; }

/* [hidden] loses to any author `display` rule without this (inherited from CrunchyVFX). */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 16px; letter-spacing: 0.02em; }
header h1 span { color: var(--accent); }
header .tag { color: var(--muted); font-size: 12px; }
header .spacer { flex: 1; }

#deps { display: none; padding: 6px 14px; background: #4d1418; color: #ffb3b8; font-weight: 700; }
#deps.show { display: block; }

.app { flex: 1; display: flex; min-height: 0; }

aside#controls {
  width: 280px;
  flex: none;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
aside h2 {
  margin: 14px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
aside > h2:first-child { margin-top: 0; }

.ctl { display: grid; grid-template-columns: 104px 1fr 34px; align-items: center; gap: 6px; margin: 4px 0; }
.ctl label { color: var(--muted); }
.ctl select { grid-column: 2 / 4; }
.ctl output { text-align: right; font-variant-numeric: tabular-nums; }

select, button, input[type="range"] { font: inherit; color: var(--ink); }
select, button {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #1a1010; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* PRESET THUMBNAILS (§37, css-build 8): a three-column grid of picture buttons — the picture on top (pixelated, its
   own aspect), the name below, clipped with an ellipsis. */
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.presetbtn { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 3px; font-size: 11px; text-align: left; min-width: 0; }
.presetbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presetbtn canvas.presetthumb { width: 100%; height: 44px; object-fit: cover; image-rendering: pixelated; border-radius: 2px;
  background: repeating-conic-gradient(#2a2a33 0% 25%, #22222a 0% 50%) 0 0 / 8px 8px; }

main#stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stage-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.stage-row figure { margin: 0; }
.stage-row figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* The preview IS the renderer, scaled by integer nearest-neighbour — never a CSS approximation.
   Transparency shows as a MAGENTA checker: grey would be read as content (tile.js CHECKER). */
canvas.art {
  display: block;
  image-rendering: pixelated;
  background-color: var(--chk-a);
  background-image:
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%),
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid var(--line);
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* LEVEL KITS (§35): a second row under the export buttons — pick a kit, preview its cover, export it. */
.kitbar { align-items: center; margin-top: 8px; }
.kitbar label { font-size: 12px; opacity: .75; }
.kitbar select { min-width: 12em; }

/* GAME PRESETS (css-build 10): presets made for one game (kit.js presetGame) fold away at the end of
   the grid, spanning all three columns, with their own grid inside. */
.presetgame { grid-column: 1 / -1; margin-top: 4px; }
.presetgame summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 3px 0; }
.presetgame summary:hover { color: var(--ink); }
.presetgame .presets { margin-top: 4px; }

/* WELCOME TOUR (css-build 10): ported from CrunchyUI, which ported it from CrunchyVFX. */
.tour { position: fixed; inset: 0; z-index: 300; }
.tour[hidden] { display: none; }
/* css-build 12: the dimming is four .tour-shade panels around the hole (index.html tourShade), not a 9999 px
   box-shadow — that is a ~20000 px texture, animated and redrawn on every resize, and AJ's browser began
   closing itself after the tour arrived. No transitions: nothing here animates. */
.tour-shade { position: absolute; background: rgba(8, 7, 12, 0.82); }
.tour-hole {
  position: absolute; border-radius: 8px; border: 2px solid var(--accent);
  pointer-events: none;
}
.tour-hole.notarget { border-color: transparent; }
.tour-card {
  position: absolute; width: min(360px, 90vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.tour-title { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.tour-body { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.tour-where { font-size: 12px; color: var(--muted); margin-top: 7px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.tour-progress { font-size: 12px; color: var(--muted); }
.tour-btns { display: flex; gap: 8px; }
.tour-btns button { padding: 6px 12px; font-size: 13px; }
#tourBtn { margin-right: 10px; }

/* YOUR KITS (§50, css-build 11): a name box and an add button under the kit picker; a kit of yours shows
   its parts as removable chips. */
.mykit input[type="text"] { min-width: 14em; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
.kitstatus { font-size: 12px; color: var(--muted); }
.kitparts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; }
.kitchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 2px 1px 9px; }
.kitchip button { border: 0; background: none; padding: 0 5px; line-height: 1.2; }
#kitDelete.armed { border-color: var(--bad); color: var(--bad); }

/* YOUR OBJECTS (§68, css-build 16): a name box and a save button on the Objects tab; each saved object a
   card — its picture, its name (click to open it), a "use" box and an x. */
.objlib input[type="text"] { min-width: 14em; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; }
.objlist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.objcard { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 3px 3px 5px; }
.objthumb { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.objname { cursor: pointer; }
.objname:hover { color: var(--accent, #ff7a45); }
.objuse { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.objcard button { border: 0; background: none; padding: 0 5px; line-height: 1.2; }

footer.license {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-top: 1px solid var(--line);
}
footer.license strong { color: var(--ink); }

/* TABS — one per thing you can make (params.js TABS). Built 2026-10-07; css-build 2. */
#tabs { display: flex; gap: 2px; margin-left: 18px; }
#tabs button {
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 14px;
}
#tabs button:hover { color: var(--ink); border-color: var(--line); }
#tabs button.active { background: var(--panel2); color: var(--ink); border-color: var(--accent); border-bottom-color: var(--panel2); }

/* PALETTE IMPORT (css-build 3). */
.import-row { margin: 6px 0 2px; }
.import-row button { width: 100%; }
.note { color: var(--muted); font-size: 11px; min-height: 14px; margin-top: 3px; }

/* PICTURE PICKERS (css-build 4) — ported in spirit from crunchyUI's pickerCtl. */
.ctl.pick { display: block; }
.ctl.pick > label { display: none; }
.pickchip, .pickhead {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 5px 7px;
}
.pickhead { flex-direction: row; font-weight: 600; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ptitle { color: var(--muted); font-size: 11px; }
.prow { display: flex; align-items: center; gap: 7px; }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcount { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pcaret { color: var(--muted); }
.pickfilter {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-top: 0; padding: 3px 7px;
}
.pickgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-height: 260px; overflow-y: auto;
  padding: 4px; background: var(--bg); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px;
}
.pickgrid.tex { grid-template-columns: repeat(3, 1fr); }
.pickcell { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px; font-size: 11px; text-align: left; }
.pickcell span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickcell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatchstrip { display: flex; height: 14px; min-width: 64px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.swatchstrip > span { flex: 1; }
.swatchstrip.empty { border-style: dashed; }
.pickchip .swatchstrip { width: 96px; flex: none; }
canvas.texthumb { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--line); }
.pickcell canvas.texthumb { width: 100%; height: auto; aspect-ratio: 1; }
canvas.rthumb { height: 22px; width: auto; image-rendering: pixelated; vertical-align: middle; margin-right: 5px; }
.ctl label { display: flex; align-items: center; }

/* ITEM CARDS (css-build 5) — added items only, each with its preview, its sliders and an x. */
.itemlist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.itemcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px 3px; }
.itemhead { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.itemname { flex: 1; font-weight: 600; }
.itemx { padding: 0 7px; line-height: 20px; font-size: 15px; color: var(--muted); background: transparent; border-color: transparent; }
.itemx:hover { color: var(--bad); border-color: var(--bad); }
canvas.cardthumb { height: 28px; width: auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.itemadd { margin: 6px 0 2px; }
.addbtn { width: 100%; border-style: dashed; color: var(--muted); }
.addbtn:hover { color: var(--ink); }
.addgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; padding: 4px;
           background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.addcell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; font-size: 11px; }
.addcell canvas.cardthumb { height: 36px; }

/* THE GROWTHS HINT (css-build 9): growths need variant tiles on a tileset; say so, with the fix. */
.itemhint { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; margin: 4px 0; font-size: 11px;
  border: 1px dashed var(--accent); border-radius: 4px; }
.itemhint button { align-self: flex-start; }
/* RANDOMIZE / VARY / BACK (css-build 6). */
.rollbar { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: 4px; margin-bottom: 10px; }
.rollbar button:disabled { opacity: 0.45; cursor: default; }

/* DECORATIONS (§59, css-build 13): the big Baked / Separate toggle, and the preview checkbox. */
.ctl.seg { display: block; }
.segbox { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.segbox button { padding: 7px 6px; font-size: 12px; font-weight: 600; }
.segbox button.on { background: var(--accent); border-color: var(--accent); color: #1a1010; }
.decoshow { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-top: -6px; }
.decoshow[hidden] { display: none; }

/* IMPORTED SPRITES (§63, css-build 14): an import button, the recolour box and a chip per sprite. */
.spriterow { align-items: center; }
.spriterow[hidden] { display: none; }
.spriterecolor { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

/* FOLDING SECTIONS (css-build 15): a section's title folds it; a folded one keeps its added item cards. */
.group > h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.group > h2::before { content: "\25BE"; font-size: 10px; opacity: .7; width: 10px; }
.group.collapsed > h2::before { content: "\25B8"; }
.group > h2:hover { color: var(--ink); }
.group.collapsed > :not(h2):not(.itemlist) { display: none !important; }
.groupcount { margin-left: auto; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent); }

/* THE PRESET GRID (css-build 15): a scrolling panel about three rows tall, a filter, and a folding title. */
#presetsHead { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
#presetsHead::before { content: "\25BE"; font-size: 10px; opacity: .7; width: 10px; }
#presetsHead.folded::before { content: "\25B8"; }
#presetsBox .pickfilter { width: 100%; margin-bottom: 4px; }
#presets { max-height: 236px; overflow-y: auto; padding-right: 2px; }

/* PLACED OBJECTS (§69, css-build 17): the Objects section on Overhead, Side view and Walls & floors — a hint
   line, item cards like the other sections, and an add grid split into Your objects and Presets. */
.placedhint { font-size: 11px; color: var(--muted); margin: 0 0 4px; }
.addsub { grid-column: 1 / -1; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 2px 0; }
.addbtn:disabled { opacity: .45; cursor: default; }

/* THE LIBRARY (§79, css-build 18): the desktop asset viewer (library.js). PORTABLE: only the suite's shared
   custom properties and `lib-*` classes, so this block copies into any Crunchy tool (PROJECTS-HANDOFF.md). */
.lib-overlay[hidden] { display: none !important; }   /* self-contained, as .suite-overlay below */
.lib-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(8, 7, 12, 0.78); display: flex;
               align-items: center; justify-content: center; }
.lib-panel { width: min(1100px, 94vw); height: min(820px, 90vh); display: flex; flex-direction: column; gap: 10px;
             background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.lib-busy .lib-panel { cursor: progress; }
.lib-top, .lib-bar, .lib-tools, .lib-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-title { margin: 0; font-size: 16px; color: var(--accent); }
.lib-spacer { flex: 1; }
.lib-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.lib-path { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.lib-links { display: grid; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.lib-link strong { min-width: 4.5em; }
.lib-link.linked strong { color: var(--accent2); }
.lib-toggle { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.lib-search { flex: 1; min-width: 14em; }
.lib-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.lib-chip.on { border-color: var(--accent); color: var(--accent); }
.lib-grid { flex: 1; overflow: auto; padding-right: 4px; scrollbar-color: var(--line) transparent; }
.lib-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 6px; font-weight: 600; }
.lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex;
            flex-direction: column; gap: 4px; min-width: 0; }
.lib-pic { padding: 6px; height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden;
           background: var(--bg); }
.lib-thumb { image-rendering: pixelated; width: 100%; height: 100%; object-fit: contain; }
.lib-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.lib-rename { width: 100%; font-size: 13px; }
.lib-meta { font-size: 11px; color: var(--muted); }
.lib-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.lib-badge { font-size: 10px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--accent2); color: var(--accent2); }
.lib-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.lib-acts button { font-size: 11px; padding: 2px 6px; }
.lib-danger.armed { border-color: var(--bad); color: var(--bad); }
.lib-start { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lib-recent { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 24em; text-align: left; }
.lib-hint { color: var(--muted); font-size: 13px; max-width: 70ch; }
.lib-status { font-size: 12px; color: var(--muted); min-height: 1.5em; }
/* the project row under the exports (desktop only) */
.projbar #projCurrent { font-weight: 600; color: var(--ink); }

/* THE CRUNCHY SUITE (§80, css-build 19): suite.js's dialog. PORTABLE like the lib-* block: the suite's shared
   custom properties and `suite-*` classes only, so it copies into every Crunchy tool unchanged. */
/* Self-contained: a host app may lack the global `[hidden] { display: none !important }`, and then this block's
   `display: flex` would beat the browser's [hidden] and the dialog could never close (found porting to VFX). */
.suite-overlay[hidden] { display: none !important; }
.suite-overlay { position: fixed; inset: 0; z-index: 260; background: rgba(8, 7, 12, 0.78); display: flex;
                 align-items: center; justify-content: center; padding: 16px; }
.suite-panel { width: min(640px, 100%); max-height: 100%; overflow: auto; background: var(--panel);
               border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.suite-head { display: flex; align-items: center; gap: 8px; }
.suite-title { margin: 0; flex: 1; font-size: 17px; color: var(--accent); }
.suite-close { font-size: 16px; line-height: 1; padding: 4px 9px; }
.suite-line { margin: 6px 0 12px; color: var(--ink); }
.suite-list { display: grid; gap: 8px; }
.suite-tool { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line);
              border-radius: 6px; padding: 10px 12px; }
.suite-tool.here { border-color: var(--accent); }
.suite-icon { font-size: 22px; width: 1.4em; text-align: center; color: var(--accent2); }
.suite-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suite-name { font-size: 14px; }
.suite-what { font-size: 12.5px; color: var(--muted); }
.suite-go { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.suite-link { font-size: 12.5px; color: var(--accent2); text-decoration: none; border: 1px solid var(--line);
              border-radius: 4px; padding: 3px 9px; }
.suite-link:hover { border-color: var(--accent2); }
.suite-here, .suite-soon { font-size: 12px; color: var(--muted); }
.suite-here { color: var(--accent); }
.suite-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .suite-tool { flex-wrap: wrap; } .suite-go { flex-direction: row; } }

#suiteBtn { white-space: nowrap; }

/* PHONE WIDTH (css-build 20, before the web launch): a shared link brings phone visitors, and the desktop
   layout (a fixed 280 px sidebar beside the preview) cut the preview off. Below 760 px the page stacks and
   scrolls as a whole: the header wraps, the tabs scroll sideways, the PREVIEW comes first (what it makes),
   the controls follow, and previews shrink to the width (still pixelated). Nothing changes above 760 px. */
@media (max-width: 760px) {
  html, body { height: auto; }
  header { flex-wrap: wrap; row-gap: 6px; }
  header .tag { display: none; }
  #tabs { order: 10; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #tabs button { white-space: nowrap; flex: none; }
  .app { flex-direction: column; min-height: auto; }
  main#stage { order: -1; overflow: visible; padding: 10px; }
  aside#controls { width: auto; overflow: visible; border-right: none; border-top: 1px solid var(--line); }
  canvas.art { max-width: 100%; max-height: 60vh; width: auto; height: auto; }   /* both caps keep the aspect */
  .stage-row { flex-direction: column; }
}

/* ERAS (§82, css-build 21): the header's era select, set apart from the tabs so it reads as a mode. */
.erapick { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.erapick select { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel2); border: 1px solid var(--accent);
                  border-radius: 5px; padding: 3px 6px; }
@media (max-width: 760px) { .erapick { margin-left: 0; order: 9; } }
/* nine tabs, the era and the suite button share the header. Nothing in it breaks mid-label; the header may
   wrap, so a second row appears only when the window really is too narrow; the tagline gives way first. */
header { flex-wrap: wrap; row-gap: 6px; }
#tabs button, header > button, header .tag { white-space: nowrap; }
@media (max-width: 1600px) { header .tag:not(#build) { display: none; } }