/* UO Arena assets: dusk-dungeon palette, hard pixel edges, no radius, no blur. */
@font-face {
  font-family: "Silkscreen";
  src: url("fonts/Silkscreen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* colour */
  --ink: #14121b;          /* page */
  --stone: #1f1c2b;        /* panels */
  --stone-hi: #2c2840;     /* raised / hover */
  --edge: #4a4466;         /* borders */
  --bone: #ebe5d3;         /* text */
  --dust: #a9a3bd;        /* secondary text, 7:1 on --ink */
  --mana: #6fb6ff;         /* links, focus, primary */
  --mana-ink: #0c2540;
  --ember: #ffb340;        /* unsettled, vote cast */
  --moss: #6fd39a;         /* settled */
  --blood: #ff7a7a;        /* errors */
  --check-a: #3a3650;
  --check-b: #2b2840;

  /* spacing, 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* type scale */
  --font-pixel: "Silkscreen", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.75rem; --t-2xl: 2.25rem;

  --px: 2px;               /* one "pixel" of border */
  --zoom: 4;               /* viewer zoom, set by the zoom radios */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: var(--t-md)/1.55 var(--font-body);
}
h1, h2, h3 { font-family: var(--font-pixel); font-weight: 700; line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: 0.02em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); margin-top: var(--s7); }
h3 { font-size: var(--t-lg); margin-top: var(--s5); }
p { margin: 0 0 var(--s4); max-width: 70ch; }
a { color: var(--mana); text-underline-offset: 3px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 3px solid var(--mana); outline-offset: 2px; }
.muted { color: var(--dust); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
img { image-rendering: pixelated; }

/* ---- layout ---- */
.wrap { width: min(100% - 2 * var(--s4), 72rem); margin-inline: auto; }
.site-header { background: var(--stone); border-bottom: var(--px) solid var(--edge); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.brand { font-family: var(--font-pixel); font-weight: 700; font-size: var(--t-lg); color: var(--bone); text-decoration: none; }
.brand b { color: var(--ember); }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: var(--s2) var(--s3); color: var(--dust); text-decoration: none; border: var(--px) solid transparent; }
.site-nav a:hover { color: var(--bone); border-color: var(--edge); }
.site-nav a[aria-current="page"] { color: var(--bone); border-color: var(--ember); }
main { flex: 1; padding-block: var(--s6) var(--s7); }
.site-footer { border-top: var(--px) solid var(--edge); color: var(--dust); padding-block: var(--s4); font-size: var(--t-sm); }

/* ---- flash messages ---- */
.flashes:empty { display: none; }
.flashes { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s2); }
.flash { padding: var(--s3) var(--s4); background: var(--stone); border: var(--px) solid var(--mana); border-left-width: 8px; }
.flash.success { border-color: var(--moss); }
.flash.warning { border-color: var(--ember); }
.flash.error { border-color: var(--blood); }

/* ---- panel: the one reusable pixel frame (stepped corners, no radius) ---- */
.panel {
  background: var(--stone); border: var(--px) solid var(--edge); padding: var(--s4);
  box-shadow: var(--px) var(--px) 0 var(--ink), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--edge);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4); cursor: pointer;
  font: 700 var(--t-sm)/1 var(--font-pixel); color: var(--bone); text-decoration: none;
  background: var(--stone-hi); border: var(--px) solid var(--edge);
  box-shadow: 0 var(--px) 0 var(--edge);
}
.btn:hover { border-color: var(--bone); }
.btn:active { transform: translateY(var(--px)); box-shadow: none; }
.btn.primary { background: var(--mana); color: var(--mana-ink); border-color: var(--mana); box-shadow: 0 var(--px) 0 #2d6fb0; }
.btn.danger { color: var(--blood); border-color: var(--blood); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---- forms ---- */
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); max-width: 28rem; }
.field label { font-weight: 600; }
.field .hint { color: var(--dust); font-size: var(--t-sm); }
.field .error { color: var(--blood); font-size: var(--t-sm); }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="file"], input[type="date"], select, textarea {
  width: 100%; min-height: 44px; padding: var(--s2) var(--s3);
  font: inherit; color: var(--bone); background: var(--ink); border: var(--px) solid var(--edge); border-radius: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--dust); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--blood); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mana); width: 1.2rem; height: 1.2rem; }

/* ---- licence badge ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2);
  font: 700 0.75rem/1.4 var(--font-pixel); border: var(--px) solid currentColor; max-width: 100%;
}
.badge::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.badge.settled { color: var(--moss); }
.badge.unsettled { color: var(--ember); }
.badge.unknown { color: var(--dust); }
.badge.unknown::before { background: none; border: var(--px) solid currentColor; }

/* ---- thumbnail grid + asset card ---- */
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.card { display: flex; flex-direction: column; background: var(--stone); border: var(--px) solid var(--edge); position: relative; }
.card:hover, .card:focus-within { border-color: var(--bone); }
.card .thumb { aspect-ratio: 1; display: grid; place-items: center; position: relative; background: var(--check-b); border-bottom: var(--px) solid var(--edge); }
.card .body { padding: var(--s2) var(--s3); display: grid; gap: var(--s1); min-width: 0; }
.card .name { font-weight: 600; font-size: var(--t-sm); color: var(--bone); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .name::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.card .meta { color: var(--dust); font-size: 0.75rem; }
.card .thumb img { position: absolute; inset: 10%; width: 80%; height: 80%; image-rendering: pixelated; object-fit: contain; }
.card .ext { font-family: var(--pixel, inherit); color: var(--mana); }
.card .wave { width: 70%; color: var(--mana); }
.card .wave .play { fill: var(--bone); stroke: var(--check-b); stroke-width: 1; }
.card .dot { position: absolute; top: var(--s2); right: var(--s2); width: 10px; height: 10px; border: var(--px) solid var(--ink); background: var(--dust); }
.card .dot.settled { background: var(--moss); }
.card .dot.unsettled { background: var(--ember); }
.card .badge, .card .vote { position: relative; z-index: 1; }

/* ---- vote button ---- */
.vote { min-height: 44px; }
.vote[aria-pressed="true"] { background: var(--ember); color: #3a2300; border-color: var(--ember); box-shadow: 0 var(--px) 0 #a8691a; }
.vote .count { font-family: var(--font-body); font-weight: 700; }

/* ---- folder tree ---- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: var(--s4); padding-left: var(--s3); border-left: var(--px) solid var(--edge); }
.tree li { padding: var(--s1) 0; }
.tree .dir > span::before { content: "\25B8\00a0"; color: var(--ember); }
.tree .file { color: var(--dust); }
.tree .file a { color: var(--bone); }

/* ---- empty and error states ---- */
.state { max-width: 32rem; padding: var(--s6) var(--s5); text-align: center; margin-inline: auto; }
.state img { width: 64px; height: 64px; margin-bottom: var(--s3); }
.state h3 { margin-top: 0; }
.state.error { border-color: var(--blood); }

/* ---- pixel-art viewer: CSS-only controls via radios/checkboxes + :has() ---- */
.viewer { display: grid; gap: var(--s3); }
.viewer .controls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.viewer .controls fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.viewer legend { float: left; margin-right: var(--s2); color: var(--dust); }
.viewer .zoom label { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: var(--px) solid var(--edge); cursor: pointer; font-family: var(--font-pixel); font-size: var(--t-sm); }
.viewer .zoom input { position: absolute; opacity: 0; }
.viewer .zoom label:has(input:checked) { background: var(--mana); color: var(--mana-ink); border-color: var(--mana); }
.viewer .zoom label:has(input:focus-visible) { outline: 3px solid var(--bone); outline-offset: 2px; }
.viewer .toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer; }
.viewer .stage {
  --w: 16; --h: 16;    /* image size in px, set inline */
  --tw: 16; --th: 16;  /* grid tile size in px, set inline */
  overflow: auto; padding: var(--s4); max-width: 100%;
  background: var(--ink); border: var(--px) solid var(--edge);
}
.viewer .frame { position: relative; width: calc(var(--w) * var(--zoom) * 1px); height: calc(var(--h) * var(--zoom) * 1px); background: var(--check-b); }
.viewer:has(.checker input:checked) .frame {
  background-color: var(--check-a);
  background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.viewer .frame img { display: block; width: 100%; height: 100%; }
.viewer .frame::after { content: none; position: absolute; inset: 0; pointer-events: none; }
.viewer:has(.gridlines input:checked) .frame::after {
  content: "";
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.35) 1px, transparent 1px);
  background-size: calc(var(--tw) * var(--zoom) * 1px) calc(var(--th) * var(--zoom) * 1px);
}
.viewer:has(.zoom input[value="1"]:checked) { --zoom: 1; }
.viewer:has(.zoom input[value="2"]:checked) { --zoom: 2; }
.viewer:has(.zoom input[value="4"]:checked) { --zoom: 4; }
.viewer:has(.zoom input[value="8"]:checked) { --zoom: 8; }
.viewer:has(.zoom input[value="16"]:checked) { --zoom: 16; }

/* ---- account bar, member table, one-time password ---- */
.site-header .account { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.account form, td.actions form { margin: 0; }
.account .name { display: flex; align-items: center; gap: var(--s2); color: var(--bone); text-decoration: none; font: 700 var(--t-sm)/1 var(--font-pixel); }
.account .role { font: 700 0.65rem/1 var(--font-pixel); color: var(--ember); border: var(--px) solid var(--ember); padding: 4px 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.account .divider { width: var(--px); align-self: stretch; background: var(--edge); margin-block: var(--s1); }
.account .ghost { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); background: none; border: var(--px) solid var(--edge); color: var(--dust); font: 700 var(--t-sm)/1 var(--font-pixel); cursor: pointer; }
.account .ghost:hover { color: var(--bone); border-color: var(--bone); }
/* breadcrumb above settings section pages; phones get one big back link */
.crumb { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font: 700 var(--t-sm)/1 var(--font-pixel); color: var(--dust); }
.crumb a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--mana); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb svg { display: none; }
.crumb .cur { color: var(--bone); }
/* nav + account live in one drawer: inline on desktop, a slide-down panel on phones */
.site-header { position: relative; }
.drawer { display: contents; }
.menu-btn { display: none; }
.table-wrap { overflow-x: auto; margin-bottom: var(--s5); }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: var(--s3); border-bottom: var(--px) solid var(--edge); vertical-align: middle; }
table.data thead th { color: var(--dust); font-weight: 600; }
td.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.issued { border-color: var(--ember); margin-bottom: var(--s5); }
.issued h2 { margin-top: 0; font-size: var(--t-lg); }
.issued code { font: 700 var(--t-lg)/1.4 ui-monospace, monospace; color: var(--ember); user-select: all; overflow-wrap: anywhere; }

/* ---- style-guide helpers ---- */
.swatches { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatch { border: var(--px) solid var(--edge); }
.swatch i { display: block; height: 56px; }
.swatch span { display: block; padding: var(--s2); font-size: var(--t-sm); }
.specimen { display: grid; gap: var(--s3); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

@media (max-width: 40rem) {
  :root { --t-xl: 1.4rem; --t-2xl: 1.75rem; }
  main { padding-block: var(--s5); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .crumb svg { display: block; }
  .crumb .sep, .crumb .cur { display: none; }
  .site-header .wrap { flex-wrap: nowrap; }
  .menu-btn { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; color: var(--bone); background: var(--stone-hi); border: var(--px) solid var(--edge); box-shadow: 0 var(--px) 0 var(--edge); cursor: pointer; }
  .menu-btn[aria-expanded="true"] { border-color: var(--bone); }
  .menu-btn .close-icon, .menu-btn[aria-expanded="true"] .open-icon { display: none; }
  .menu-btn[aria-expanded="true"] .close-icon { display: block; }
  .drawer { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--stone); border-bottom: var(--px) solid var(--edge); box-shadow: 0 var(--s2) 0 var(--ink); }
  .menu-open .drawer { display: block; }
  .site-nav { flex-direction: column; gap: 0; }
  .site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s4); border: 0; border-bottom: var(--px) solid var(--edge); color: var(--bone); font: 700 var(--t-sm)/1 var(--font-pixel); }
  .site-nav a[aria-current="page"] { color: var(--ember); box-shadow: inset 4px 0 0 var(--ember); }
  .site-header .account { margin-left: 0; padding: var(--s3) var(--s4); }
  .account .divider { display: none; }
  .account form { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- packs ---- */
.row.spread { justify-content: space-between; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.facts dt { color: var(--dust); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.prewrap { white-space: pre-wrap; }
.pack-layout { display: grid; gap: var(--s5); grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: start; }
.folders li { padding-left: calc(var(--depth, 0) * var(--s4)); }
.folders a { color: var(--bone); text-decoration: none; }
.folders a[aria-current="page"] { color: var(--ember); }
@media (max-width: 40rem) { .pack-layout { grid-template-columns: 1fr; } }
.panel > h2:first-child { margin-top: 0; }

/* ---- files: Tiles or List + preview (phones always get Tiles) ---- */
.files .toolbar { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.files .toolbar .btn[aria-pressed="true"] { background: var(--mana); color: var(--mana-ink); border-color: var(--mana); }
.files .split { display: grid; gap: var(--s4); grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); align-items: start; }
.rows { list-style: none; margin: 0; padding: 0; border: var(--px) solid var(--edge); }
.rows a { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); min-height: 44px; color: var(--bone); text-decoration: none; border-left: 4px solid transparent; }
.rows a:hover { background: var(--stone-hi); }
.rows a[aria-current="true"] { background: var(--stone-hi); border-left-color: var(--ember); }
.rows img { image-rendering: pixelated; width: 32px; height: 32px; object-fit: contain; }
.rows .ico { display: grid; place-items: center; color: var(--mana); }
.rows .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .meta { color: var(--dust); font-size: 0.75rem; }
.preview h3 { margin-top: 0; overflow-wrap: anywhere; }
.preview .stage { display: grid; place-items: center; padding: var(--s4); margin-bottom: var(--s4); overflow: auto; background: var(--check-b); border: var(--px) solid var(--edge); }
.preview .stage img { image-rendering: pixelated; max-width: 100%; height: auto; }
.preview audio { width: 100%; }
.files.tiles .split { display: none; }
@media (min-width: 40.01rem) { .files.list .grid { display: none; } }
@media (max-width: 40rem) { .files .toolbar, .files .split { display: none; } }

/* ---- library: search, filters, sounds, bulk edit, animation preview ---- */
.filters { display: grid; gap: var(--s3) var(--s4); grid-template-columns: 2fr repeat(3, 1fr) auto; align-items: end; margin-bottom: var(--s5); }
.filters .field { margin-bottom: 0; max-width: none; }
.pager { margin-top: var(--s5); }
.card .body .badge { justify-self: start; }
.card .pick { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.card .pick input { margin: 0; }
.tag { display: inline-block; padding: 0 var(--s2); margin: 0 var(--s1) var(--s1) 0; border: var(--px) solid var(--edge); color: var(--bone); text-decoration: none; font-size: var(--t-sm); }
.tag:hover { border-color: var(--bone); }
.toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer; }
.bulk { margin-bottom: var(--s4); }
.bulk summary { cursor: pointer; font: 700 var(--t-sm)/1 var(--font-pixel); min-height: 44px; display: flex; align-items: center; }
.bulk-fields { display: grid; gap: 0 var(--s4); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-top: var(--s3);  align-items: start; }
.bulk-fields .field { max-width: none; }
.files.list .bulk { display: none; }
.sounds { list-style: none; margin: 0; padding: 0; border: var(--px) solid var(--edge); }
.sounds li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: var(--px) solid var(--edge); }
.sounds li:last-child { border-bottom: 0; }
.sounds a { flex: 1; min-width: 0; display: grid; color: var(--bone); text-decoration: none; }
.sounds a:hover .name { text-decoration: underline; }
.sounds .play { min-width: 44px; padding: 0; }
.sounds .play[aria-pressed="true"] { background: var(--mana); color: var(--mana-ink); border-color: var(--mana); }
.sounds .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sounds .meta { color: var(--dust); font-size: 0.75rem; }
.anim { margin-top: var(--s5); }
.anim-stage { display: grid; place-items: center; padding: var(--s4); margin-bottom: var(--s4); overflow: auto; background: var(--check-b); border: var(--px) solid var(--edge); }
.anim-frame {
  --col: 0; --row: 0;
  width: calc(var(--tw) * var(--z) * 1px); height: calc(var(--th) * var(--z) * 1px);
  background: var(--src) calc(var(--col) * var(--tw) * var(--z) * -1px) calc(var(--row) * var(--th) * var(--z) * -1px) / calc(var(--w) * var(--z) * 1px) calc(var(--h) * var(--z) * 1px) no-repeat;
  image-rendering: pixelated;
}
.anim-controls { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: end; }
.anim-controls:not([hidden]) { display: flex; }
.anim-controls .field { margin-bottom: 0; min-width: 12rem; }
.anim-controls input[type="range"] { accent-color: var(--mana); min-height: 44px; padding: 0; }
.anim-controls .btn[aria-pressed="true"] { background: var(--mana); color: var(--mana-ink); border-color: var(--mana); }
@media (max-width: 40rem) { .filters { grid-template-columns: 1fr; } }

/* ---- projects: slot rows, candidate strip, compare view ---- */
.slots { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s4); }
.slot-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; }
.slot-row h3 { margin: 0 0 var(--s1); font-size: var(--t-lg); }
.slot-row .meta { color: var(--dust); font-size: var(--t-sm); }
.strip { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.strip img { display: block; width: 40px; height: 40px; object-fit: contain; background: var(--check-b); border: var(--px) solid var(--edge); }
.card .body form { position: relative; z-index: 1; margin-top: var(--s1); }
.lanes { display: grid; gap: 0 var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* each lane spans a stage row and a caption row of the shared grid, so every stage is as tall as the tallest */
.lane { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s2); margin: 0 0 var(--s4); min-width: 0; }
.compare .lane .stage { display: flex; }
.compare .lane .frame, .compare .lane audio, .compare .lane .ext { margin: auto; } /* centred, and still scrolls from the edge when wider */
.lane figcaption { display: grid; gap: var(--s1); justify-items: start; overflow-wrap: anywhere; }
.lane .meta { color: var(--dust); font-size: var(--t-sm); }

/* ---- voting: results on a closed slot, the decision, the close form ---- */
.card .body .vote { justify-self: start; }
.card .body .result { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; font-size: var(--t-sm); }
.card .body .reason { margin: 0; color: var(--dust); font-size: var(--t-sm); overflow-wrap: anywhere; }
.decision { margin-bottom: var(--s5); border-color: var(--moss); }
.decision form { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: 0; }
.decision .hint { color: var(--dust); font-size: var(--t-sm); }
.decide fieldset { border: var(--px) solid var(--edge); margin: 0 0 var(--s4); padding: var(--s3); display: grid; }
.decide legend { padding: 0 var(--s2); font-weight: 600; }
.decide h3 { margin-top: var(--s5); font-size: var(--t-md); }
.lane .vote { margin-top: var(--s1); }

/* ---- home: landing page ---- */
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }
.home-head h1 { margin: 0; }
.home-search { display: flex; gap: var(--s2); margin-bottom: var(--s5); }
.home-search input { flex: 1; }
.stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; color: var(--dust); }
.stats b { font-family: var(--font-pixel); color: var(--bone); font-size: var(--t-lg); margin-right: var(--s1); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.section-head h2 { margin: 0; font-size: var(--t-lg); }
.section-head a { font-size: var(--t-sm); white-space: nowrap; }
.todo .slot-row { padding: var(--s3) var(--s4); }
.todo .slot-row a.name { color: var(--bone); font: 700 var(--t-md)/1.3 var(--font-pixel); text-decoration: none; }
.todo .slot-row a.name:hover { text-decoration: underline; }
.packs-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.packs-row a { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--stone); border: var(--px) solid var(--edge); color: var(--bone); text-decoration: none; }
.packs-row a:hover { border-color: var(--bone); }
.packs-row .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.packs-row .meta { color: var(--dust); font-size: var(--t-sm); }
.packs-row .badge { justify-self: start; }
@media (max-width: 40rem) { .home-search .btn { padding-inline: var(--s3); } .todo .slot-row .btn { width: 100%; } }