/* Ezomic mods - the Ledger's structure in the Forge's palette.
 *
 * Ported unchanged from the plain-PHP site (legacy/assets/css/site.css) with one exception:
 * no text is smaller than .75rem, 12px. The labels ran down to .58rem, about 9px, and
 * small text reads badly on the setup this is mostly read on.
 *
 * Ember is spent once per page: the hero wash, the figures, and section labels. Everything
 * else is grey, which is what lets a single green "playable" be the loudest thing on a page
 * listing eight mods of which one is finished.
 *
 * Type does the density work. A condensed grotesque for structure, a serif for prose, and
 * monospace for anything factual - a version, a key, a default. All system stacks: no
 * webfont means no third request and no flash of the wrong face.
 */

:root {
  --bg:      #0E0F12;
  --panel:   #171A1F;
  --rule:    #252A31;
  --dim:     #8C95A1;
  --ink:     #E9ECF1;
  --ember:   #E2703A;
  --gold:    #F0B429;
  --live:    #5FBF7A;
  --warn:    #C97A4A;

  --display: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --serif:   "Sitka Text", Constantia, Georgia, "Times New Roman", serif;
  --mono:    Consolas, "Cascadia Mono", ui-monospace, "DejaVu Sans Mono", monospace;

  --measure: 62ch;
  --pad:     clamp(1rem, 3vw, 1.6rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: var(--serif); }
code, pre, .mono { font-family: var(--mono); }
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.shell { max-width: 1080px; margin: 0 auto; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }

/* ---------------------------------------------------------------- masthead */

.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .65rem var(--pad);
  border-bottom: 1px solid var(--rule);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.bar .brand { color: var(--ember); letter-spacing: .22em; font-weight: 600; }
.bar nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.bar nav a { color: var(--dim); }
.bar nav a[aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.hero {
  padding: clamp(2rem, 6vw, 3rem) var(--pad) 1.8rem;
  border-bottom: 1px solid var(--rule);
  background: radial-gradient(760px 300px at 12% -30%, rgba(226,112,58,.16), transparent 64%);
}
.hero h1 {
  margin: 0 0 .6rem;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.02;
  font-stretch: condensed; font-weight: 600; letter-spacing: -.01em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--ember); }
.hero p { margin: 0; max-width: 58ch; color: var(--dim); font-size: 1rem; }

/* ---------------------------------------------------------------- spec strip */

.spec { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.spec div {
  flex: 1 1 128px; padding: .6rem var(--pad);
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: .75rem; color: var(--dim);
}
.spec div:last-child { border-right: 0; }
.spec b {
  display: block; color: var(--gold);
  font-family: var(--display); font-size: .95rem; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- mod rows */

.row {
  display: grid; grid-template-columns: 116px minmax(0,1fr) auto; gap: 1rem;
  padding: .72rem var(--pad);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  color: inherit;
}
a.row:hover { background: var(--panel); text-decoration: none; }
a.row:hover .nm { color: var(--ember); }
.row .nm { font-size: 1.02rem; font-weight: 600; }
.row .ds { color: var(--dim); font-size: .88rem; }
@media (max-width: 620px) {
  .row { grid-template-columns: 1fr auto; }
  .row .ds { grid-column: 1 / -1; }
}

.st {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.st.live { color: var(--live); }
.st.warn { color: var(--warn); }

/* ---------------------------------------------------------------- mod page */

.split { display: grid; grid-template-columns: minmax(0,1fr) 264px; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }

.main { padding: 1.5rem var(--pad); min-width: 0; }
.main h2 { margin: 0 0 .3rem; font-size: 1.75rem; font-stretch: condensed; font-weight: 600; letter-spacing: -.01em; }
.main .kicker { color: var(--dim); margin: 0 0 1.1rem; font-size: .95rem; max-width: var(--measure); }
.main h3 {
  margin: 1.5rem 0 .4rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember); font-weight: 400;
}
.main p { margin: 0 0 .7rem; color: var(--dim); font-size: .94rem; max-width: var(--measure); }

.rail {
  border-left: 1px solid var(--rule); background: var(--panel);
  padding: 1.3rem 1.1rem; font-family: var(--mono); font-size: .75rem; color: var(--dim);
}
@media (max-width: 780px) { .rail { border-left: 0; border-top: 1px solid var(--rule); } }
.rail dl { margin: 0; }
.rail dt {
  color: var(--ember); letter-spacing: .1em; text-transform: uppercase;
  font-size: .75rem; margin-top: .9rem;
}
.rail dt:first-child { margin-top: 0; }
.rail dd { margin: .15rem 0 0; color: var(--ink); }

pre {
  background: #0A0B0D; border: 1px solid var(--rule); border-left: 2px solid var(--ember);
  padding: .7rem .9rem; font-size: .78rem; overflow-x: auto; color: var(--ink); margin: .2rem 0 1rem;
}
code { color: var(--gold); font-size: .84rem; }
pre code { color: inherit; font-size: inherit; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin: .2rem 0 .6rem; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th {
  text-align: left; font-family: var(--mono); font-size: .75rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dim); padding: .3rem .55rem;
  border-bottom: 1px solid var(--rule); font-weight: 400;
}
td { padding: .36rem .55rem; border-bottom: 1px solid var(--rule); color: var(--dim); }
td.k { font-family: var(--mono); color: var(--ink); font-size: .79rem; white-space: nowrap; }
td.v {
  font-family: var(--mono); color: var(--gold); font-size: .79rem;
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- features */

.feature { margin: 0 0 1.4rem; }
.feature h4 {
  margin: 0 0 .15rem; font-size: 1.02rem; font-weight: 600;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.f-kind {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .13em;
  text-transform: uppercase; padding: .1rem .42rem;
  border: 1px solid var(--rule); color: var(--dim);
}
/* Colour carries what a thing is, so a buildable is findable by scanning alone. */
.f-buildable { border-color: var(--gold); color: var(--gold); }
.f-creature  { border-color: var(--ember); color: var(--ember); }
.f-key       { border-color: #5D7FA8; color: #8FB0D4; }

.f-meta {
  margin: 0 0 .35rem !important;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .05em;
  color: var(--dim); display: flex; gap: .9rem; flex-wrap: wrap;
}
.f-meta span::before { content: "· "; color: var(--rule); }
.f-meta span:first-child::before { content: ""; }

/* ---------------------------------------------------------------- config */

details.cfg { border-top: 1px solid var(--rule); }
details.cfg:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
details.cfg > summary {
  cursor: pointer; list-style: none;
  padding: .5rem .2rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: .6rem;
}
details.cfg > summary::-webkit-details-marker { display: none; }
details.cfg > summary::before {
  content: "+"; color: var(--ember); font-size: .85rem; width: .8em; display: inline-block;
}
details.cfg[open] > summary::before { content: "\2212"; }
details.cfg > summary:hover { color: var(--ink); }
.cfg-n { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; }
details.cfg .table-wrap { margin-bottom: .8rem; }
details.cfg td { vertical-align: top; }
.muted { color: var(--rule); }

/* ---------------------------------------------------------------- screenshots */

.plates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .2rem 0 1rem; }
@media (max-width: 620px) { .plates { grid-template-columns: 1fr; } }
.plate {
  border: 1px solid var(--rule); border-left: 2px solid var(--gold);
  background: linear-gradient(160deg, #1A1D22, #101216);
  aspect-ratio: 16 / 7; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: .7rem .9rem;
}
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate figcaption {
  position: relative; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
}

/* ---------------------------------------------------------------- devlog */

.post { padding: 1.6rem var(--pad); max-width: 72ch; }
.post .date { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.post h2 { margin: .3rem 0 .9rem; font-size: 1.7rem; font-stretch: condensed; font-weight: 600; letter-spacing: -.01em; }
.post p { color: var(--dim); font-size: .96rem; margin: 0 0 .85rem; font-family: var(--serif); }
.post p strong { color: var(--ink); font-weight: 400; }

/* ---------------------------------------------------------------- mod page, rebuilt */

/* The anchors under a mod's name. Mono and uppercase like the section labels they point
   at, so they read as the page's index rather than as another nav bar. */
.subnav {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1.4rem;
  padding: .5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.subnav a { color: var(--dim); }
.subnav a:hover { color: var(--ember); text-decoration: none; }
.subnav span { color: var(--dim); opacity: .6; margin-left: .25rem; font-variant-numeric: tabular-nums; }

.toc {
  columns: 2 14rem; column-gap: 1.6rem; margin: 0 0 1.2rem; padding: 0; list-style: none;
  font-size: .9rem; counter-reset: toc;
}
.toc li { break-inside: avoid; padding: .1rem 0; }
.toc a { color: var(--dim); }
.toc a:hover { color: var(--ember); }

/* README and changelog text. Lists get the prose colour and a measure, the way .main p
   already does; code inside prose keeps the site's gold. */
.prose ul, .prose ol:not(.toc) {
  margin: 0 0 .9rem; padding-left: 1.2rem; color: var(--dim); font-size: .94rem; max-width: var(--measure);
}
.prose li { margin: 0 0 .35rem; }
.prose li p { margin: 0 0 .35rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h4 { margin: 1.2rem 0 .35rem; font-size: 1.02rem; font-weight: 600; }
.prose h5 { margin: 1rem 0 .3rem; font-size: .94rem; font-weight: 600; color: var(--ink); }
.prose table { margin: .2rem 0 1rem; }
.prose section, .prose { scroll-margin-top: 1rem; }
.main section { scroll-margin-top: 1rem; }
.main h3[id] { scroll-margin-top: 1rem; }

details.ver { border-top: 1px solid var(--rule); }
details.ver:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
details.ver > summary {
  cursor: pointer; list-style: none; padding: .55rem .2rem;
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
}
details.ver > summary::-webkit-details-marker { display: none; }
details.ver > summary::before { content: "+"; color: var(--ember); width: .8em; font-family: var(--mono); }
details.ver[open] > summary::before { content: "‘2"; }
details.ver .vn { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
details.ver time { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
details.ver > :not(summary) { margin-left: 1.2rem; }
details.ver .intro p { color: var(--ink); }

.tag {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
}
.tag.live { color: var(--live); }

/* Whose value counts on a server. Gold for the host's rule, the same gold a default wears;
   green for the player's own, the colour this site already spends on "yours to use". */
.scope {
  display: inline-block; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 0 .35rem; border: 1px solid var(--rule); color: var(--dim);
}
.scope.host { border-color: var(--gold); color: var(--gold); }
.scope.player { border-color: var(--live); color: var(--live); }

/* ---------------------------------------------------------------- releases */

/* The one control on the releases list. Square and ruled like .dl, for the same reason:
   nothing else on this site is a rounded button. */
form.since {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  padding: .8rem var(--pad); border-bottom: 1px solid var(--rule); background: var(--panel);
  font-size: .94rem; color: var(--dim);
}
form.since.inline { padding: .8rem 0; margin: 0 0 1rem; background: none; border-bottom: 0; }
form.since select, form.since button {
  font: inherit; font-family: var(--mono); font-size: .85rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); padding: .35rem .55rem;
}
form.since button { color: var(--ember); border-color: var(--ember); cursor: pointer; }
form.since button:hover { background: var(--ember); color: var(--bg); }

.row.rel .nm { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.row.rel .movedlist {
  display: block; margin-top: .15rem; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .04em; color: var(--ember);
}

.moved { margin: 0 0 1.6rem; }
.moved h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin: 1.2rem 0 .4rem; }
.moved .pin { font-family: var(--mono); font-size: .8rem; font-weight: 400; color: var(--gold); font-variant-numeric: tabular-nums; }

.pager { display: flex; justify-content: space-between; margin-top: 2rem !important; font-family: var(--mono); font-size: .85rem; }

.rail table.pins { font-size: .8rem; margin-top: .3rem; }
.rail table.pins td { padding: .15rem 0; border: 0; color: var(--ink); }
.rail table.pins td.v { padding-left: .8rem; }

/* ---------------------------------------------------------------- coming next */

.nextup { padding: 1.2rem var(--pad) .4rem; border-bottom: 1px solid var(--rule); }
.nextup h3 {
  margin: 0 0 .6rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember); font-weight: 400;
}
.nextup ul { list-style: none; margin: 0; padding: 0; }
.nextup li { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 1rem; padding: .35rem 0; font-size: .9rem; }
.nextup li a { font-weight: 600; }
.nextup li span { color: var(--dim); font-family: var(--serif); }
@media (max-width: 620px) { .nextup li { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------------------------------------------------------------- search */

form.since input[type="search"] {
  flex: 1 1 16rem; min-width: 0; font: inherit; font-size: .94rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); padding: .4rem .6rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a.hit {
  display: grid; grid-template-columns: 72px minmax(0,1fr); gap: .1rem 1rem;
  padding: .6rem 0; border-top: 1px solid var(--rule); color: inherit;
}
a.hit:hover { text-decoration: none; }
a.hit:hover .t { color: var(--ember); }
a.hit .kind {
  grid-row: span 2; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); padding-top: .15rem;
}
a.hit .t { font-weight: 600; }
a.hit .s { color: var(--dim); font-size: .9rem; }
a.hit mark { background: none; color: var(--gold); }

/* ---------------------------------------------------------------- notes + footer */

.note { border-left: 2px solid var(--gold); background: var(--panel); padding: .8rem 1rem; margin: 0 0 1rem; font-size: .9rem; color: var(--dim); }
.note strong { color: var(--ink); font-weight: 400; }

/* ---------------------------------------------------------------- download */

/* The one thing on the install page a visitor actually acts on, so it gets a panel of its
   own rather than being a link inside a paragraph. Square and ruled like the spec strip:
   nothing else on this site is a rounded button and this is not the place to introduce one.
   The facts sit in mono beside the link because that is what mono means everywhere else
   here - a version, a size, a checksum. */
.dl {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem;
  padding: .9rem var(--pad); margin: 0 0 1rem;
  border: 1px solid var(--rule); background: var(--panel);
}
.dl a { font-size: 1.05rem; font-stretch: condensed; font-weight: 600; }
.dl .meta {
  font-family: var(--mono); font-size: .75rem; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* Full width on its own line, and breakable: 64 hex characters do not fit a phone and must
   not be what makes the page scroll sideways. */
.dl .sha {
  flex-basis: 100%; font-family: var(--mono); font-size: .75rem;
  color: var(--dim); word-break: break-all;
}

footer.foot {
  padding: 1.2rem var(--pad) 2rem; border-top: 1px solid var(--rule);
  color: var(--dim); font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- forms */

/* One column of label, field, label, field. Square and ruled like everything else. */
form.stack { display: grid; gap: .45rem; max-width: 34rem; margin: 0 0 1.2rem; }
form.stack label { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: .5rem; }
form.stack input[type="text"], form.stack input[type="password"], form.stack textarea {
  font: inherit; font-size: .94rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); padding: .5rem .6rem; width: 100%;
}
form.stack textarea { font-family: var(--mono); font-size: .85rem; resize: vertical; }
form.stack input:focus, form.stack textarea:focus { border-color: var(--ember); outline: none; }
form.stack .check { display: flex; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: .94rem; color: var(--ink); }
form.stack .hint { margin: 0; font-size: .85rem; }
form.stack button {
  justify-self: start; margin-top: .6rem; font: inherit; font-weight: 600; color: var(--bg);
  background: var(--ember); border: 0; padding: .5rem 1.1rem; cursor: pointer;
}
.error { color: var(--warn) !important; margin: .2rem 0 0 !important; font-size: .9rem; }

.bar form.out { display: inline; margin: 0; }
.bar form.out button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.bar form.out button:hover { color: var(--ink); }

/* ---------------------------------------------------------------- admin: downloads */

.subnav a[aria-current] { color: var(--ink); }
table.dl-table td { vertical-align: middle; }
table.dl-table tr.pack td { background: var(--panel); }
table.dl-table td.k a { color: var(--ink); }
table.dl-table svg.spark { display: block; }
.chart { overflow-x: auto; padding: .4rem 0 .8rem; }
.chart svg.bars { min-width: 420px; max-width: 640px; display: block; }
.muted-note { color: var(--dim); font-size: .9rem; margin: .4rem 0 .8rem; }

/* ---------------------------------------------------------------- admin: actions */

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .8rem; }
.actions form { margin: 0; }
.actions button, form.stack button.quiet {
  font: inherit; font-weight: 600; color: var(--bg); background: var(--ember);
  border: 1px solid var(--ember); padding: .5rem 1rem; cursor: pointer;
}
.actions button.quiet { color: var(--ink); background: none; border-color: var(--rule); font-weight: 400; }
.actions button.quiet:hover { border-color: var(--dim); }
.actions button[disabled] { opacity: .4; cursor: default; }
.note.bad { border-left-color: var(--warn); }
.state.live { color: var(--live); font-weight: 600; }
.state.warn { color: var(--warn); font-weight: 600; }
.hint { color: var(--dim); font-size: .88rem; }
form.inline-act { display: inline; margin: 0; }
form.inline-act button {
  font: inherit; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember); background: none; border: 1px solid var(--ember); padding: .15rem .45rem; cursor: pointer;
}

/* ---------------------------------------------------------------- live strip */

.live {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding: .6rem var(--pad); border-bottom: 1px solid var(--rule);
  font-size: .94rem; color: var(--dim);
}
.live a { color: var(--ink); font-weight: 600; }
/* State in shape and word as well as colour: a filled dot and "online", a hollow one and
   "not answering". */
.state-chip { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }
.state-chip.up { color: var(--live); }
.state-chip.down { color: var(--warn); }

/* ---------------------------------------------------------------- accounts */

a.btn {
  display: inline-block; font-weight: 600; color: var(--bg); background: var(--ember);
  border: 1px solid var(--ember); padding: .5rem 1rem;
}
a.btn:hover { text-decoration: none; filter: brightness(1.08); }
.platforms { margin-bottom: .3rem; }

table.ways { max-width: 34rem; margin: .2rem 0 1rem; }
table.ways td { vertical-align: middle; }
table.ways td.copy { user-select: all; text-align: left; }

table.users td { vertical-align: top; }
table.users tr.banned td { opacity: .75; }
table.users select, form.ban input {
  font: inherit; font-size: .85rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); padding: .2rem .35rem;
}
form.ban input { width: 9rem; margin-right: .3rem; }

/* ---------------------------------------------------------------- discussion */

.talk { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.talk .answer {
  display: flex; gap: .7rem; align-items: baseline; padding: .6rem .8rem; margin: 0 0 1rem;
  background: var(--panel); border-left: 2px solid var(--live); font-size: .9rem;
}
.talk .answer a { color: var(--ink); }

.post-item { border-top: 1px solid var(--rule); padding: .8rem 0 .5rem; scroll-margin-top: 1rem; }
.post-item.reply { margin-left: 1.6rem; border-top: 1px dashed var(--rule); padding-top: .6rem; }
.post-item.is-answer > header .who { color: var(--live); }
.post-item:target { background: linear-gradient(90deg, rgba(226,112,58,.08), transparent 60%); }
.post-item header { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-bottom: .3rem; }
.post-item .who { font-weight: 600; color: var(--ink); }
.post-item .when { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.badge {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 .35rem; border: 1px solid var(--rule); color: var(--dim);
}
.badge.dev { border-color: var(--ember); color: var(--ember); }
.post-item .body { max-width: var(--measure); }
.post-item .body p { font-family: var(--serif); color: var(--soft, #C3C9D2); margin: 0 0 .5rem; }
.post-item .body pre { max-width: 100%; }
.post-item .removed { color: var(--dim); font-style: italic; margin: 0 0 .4rem; }
.post-item footer { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .3rem; font-size: .85rem; }
.post-item footer .inline-act button { font-size: .75rem; }

.shots { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .6rem; }
.shots img { width: auto; max-width: min(100%, 280px); height: auto; max-height: 180px; border: 1px solid var(--rule); display: block; }

.reacts { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.inline-act.react button {
  font-family: inherit; text-transform: none; letter-spacing: 0; font-size: .85rem;
  color: var(--dim); border-color: var(--rule); padding: .05rem .4rem; min-width: 2.2rem;
}
.inline-act.react button.on { border-color: var(--ember); color: var(--ink); background: rgba(226,112,58,.1); }
.react-static { font-size: .85rem; color: var(--dim); }
.inline-act.mod button { color: var(--gold); border-color: var(--gold); }

details.reply-box, details.ban-box { display: inline-block; }
details.reply-box > summary, details.ban-box > summary {
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ember);
}
details.ban-box > summary { color: var(--warn); }
details.reply-box[open], details.ban-box[open] { display: block; width: 100%; margin-top: .4rem; }
details.reply-box form.stack { max-width: 100%; }

form.talk-form { margin-top: 1.2rem; max-width: 100%; }
form.stack input[type="file"] { color: var(--dim); font-size: .85rem; }

ul.lines { list-style: none; padding-left: 0 !important; }
ul.lines li { position: relative; padding: .15rem 0 .15rem .9rem; border-left: 1px solid var(--rule); margin: 0 0 .4rem; }
ul.lines li p { display: inline; }
a.line-talk {
  margin-left: .6rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
a.line-talk:hover { color: var(--ember); text-decoration: none; }

blockquote.the-line { margin: .4rem 0 1.4rem; padding: .7rem 1rem; background: var(--panel); border-left: 2px solid var(--ember); }
blockquote.the-line p { margin: 0; color: var(--ink); }

a.hit.unread .t { color: var(--ember); }

/* ---------------------------------------------------------------- take part */

form.stack.wide { max-width: 44rem; }
form.stack select { font: inherit; font-size: .94rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); padding: .45rem .5rem; }
form.stack h3 { margin-top: 1.4rem; }
.opt-row { border: 1px solid var(--rule); padding: .5rem .7rem; margin: .3rem 0 0; display: grid; gap: .4rem; }
.opt-row legend { font-family: var(--mono); font-size: .75rem; color: var(--dim); padding: 0 .3rem; }

.row.idea { align-items: center; }
.inline-act.vote button { font-family: var(--mono); color: var(--dim); border-color: var(--rule); min-width: 3.4rem; text-transform: none; }
.inline-act.vote button.on { color: var(--ember); border-color: var(--ember); background: rgba(226,112,58,.08); }
.votes { font-family: var(--mono); color: var(--dim); font-size: .85rem; }

.road { border-bottom: 1px solid var(--rule); }
.road h3 a { color: var(--ember); }
.road-idea { margin: .3rem 0 !important; }

form.poll .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: .8rem 0 1rem; }
form.poll .option {
  position: relative; display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--rule);
  background: var(--panel); cursor: pointer; overflow: hidden;
}
form.poll .option.chosen { border-color: var(--ember); }
form.poll .option img { width: 100%; height: auto; max-height: 220px; object-fit: contain; background: var(--bg); }
form.poll .option .label { display: flex; gap: .5rem; align-items: center; font-weight: 600; color: var(--ink); }
form.poll .option input { accent-color: var(--ember); width: 16px; height: 16px; }
form.poll .option .count { font-family: var(--mono); font-size: .8rem; color: var(--dim); }
form.poll .option .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--share); background: var(--ember); }
form.poll button[type="submit"] { font: inherit; font-weight: 600; color: var(--bg); background: var(--ember); border: 0; padding: .5rem 1.1rem; cursor: pointer; }

/* ---------------------------------------------------------------- icons and screenshots */

.row .nm { display: flex; align-items: center; gap: .55rem; }
img.ico { width: 28px; height: 28px; flex: none; image-rendering: auto; border: 1px solid var(--rule); }
h2.with-icon { display: flex; align-items: center; gap: .8rem; }
img.ico-lg { width: 56px; height: 56px; flex: none; border: 1px solid var(--rule); }
.plates { margin-bottom: 1.4rem; }
.plate a { position: absolute; inset: 0; }
.plate figcaption { pointer-events: none; text-shadow: 0 1px 2px #000; color: var(--ink); }
table.costs td { vertical-align: top; }
table.costs td.k { white-space: normal; }
.post-item a.who { font-weight: 600; color: var(--ink); }
.post-item a.who:hover { color: var(--ember); }
.badge.mark { border-color: var(--live); color: var(--live); }

/* ---------------------------------------------------------------- playtests */

ol.test-steps { padding-left: 1.4rem; }
ol.test-steps > li { margin: 0 0 1.1rem; padding: .6rem .8rem; background: var(--panel); border: 1px solid var(--rule); }
ol.test-steps .do p { color: var(--ink); margin-bottom: .3rem; }
ol.test-steps .expect p { display: inline; }
ol.test-steps .tally { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .4rem 0; font-family: var(--mono); font-size: .75rem; color: var(--dim); }
ol.test-steps .tally .o-pass { color: var(--live); }
ol.test-steps .tally .o-fail { color: var(--warn); }
fieldset.outcome { border: 0; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
fieldset.outcome label { font-size: .9rem; color: var(--ink); display: inline-flex; gap: .3rem; align-items: center; }
fieldset.outcome input[type="radio"] { accent-color: var(--ember); }
fieldset.outcome input[type="text"] { flex: 1 1 16rem; min-width: 0; font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); padding: .3rem .5rem; }
form.steps > button { font: inherit; font-weight: 600; color: var(--bg); background: var(--ember); border: 0; padding: .5rem 1.1rem; cursor: pointer; }
.chart svg.columns { min-width: 480px; max-width: 760px; display: block; }