/* Materials workbench. Same tokens as the Wargame Mechanics Index pages. */
:root {
  --bg: #eef0ec; --surface: #fafbf8; --ink: #1e2420; --muted: #5b655e; --rule: #cfd5cd;
  --accent: #2f5d7c; --accent-soft: #dce7ee; --ok: #2f6b3f; --ok-soft: #dcebdf; --no: #a8432a; --no-soft: #f3e0d9;
  --warn: #8a6a12; --warn-soft: #f1e8cf;
  --font-display: "Saira Stencil One", "Arial Narrow", Impact, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161a18; --surface: #1e2321; --ink: #e3e8e2; --muted: #9aa59d; --rule: #333b36;
  --accent: #7fb2d4; --accent-soft: #233340; --ok: #7fc28f; --ok-soft: #1f3324; --no: #e7896d; --no-soft: #3d2620;
  --warn: #d4b45a; --warn-soft: #362f1a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #161a18; --surface: #1e2321; --ink: #e3e8e2; --muted: #9aa59d; --rule: #333b36;
  --accent: #7fb2d4; --accent-soft: #233340; --ok: #7fc28f; --ok-soft: #1f3324; --no: #e7896d; --no-soft: #3d2620;
  --warn: #d4b45a; --warn-soft: #362f1a; color-scheme: dark }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body); padding: 0 16px 48px }
a { color: var(--accent) }
main { max-width: 1200px; margin: 0 auto }
header.top { max-width: 1200px; margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 18px 0 12px; border-bottom: 2px solid var(--ink) }
.brand { font: 1.5rem/1 var(--font-display); color: var(--ink); text-decoration: none }
header nav { display: flex; flex-wrap: wrap; gap: 4px }
header nav a { font: 600 .72rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--muted); text-decoration: none }
.pill { font: 500 .7rem var(--font-mono); background: var(--accent-soft); color: var(--accent); padding: 0 5px; margin-left: 4px }
.who { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted) }
h1 { font: 1.9rem/1.1 var(--font-display); margin: 4px 0 8px }
h2 { font: 600 .74rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px }
.muted { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none }
.small { font-size: .8rem }
.error { color: var(--no); background: var(--no-soft); padding: 6px 10px }
.btn { font: 600 .74rem var(--font-body); letter-spacing: .05em; text-transform: uppercase; padding: 8px 12px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); cursor: pointer }
.btn.small { padding: 4px 8px; font-size: .68rem }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule) }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--bg) }
.btn.no { background: var(--surface); border-color: var(--no); color: var(--no) }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 6px 8px; max-width: 100% }
textarea { width: 100% }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted) }
.card { background: var(--surface); border: 1px solid var(--rule); padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px }
.card.narrow { max-width: 420px; margin: 40px auto }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.row.between { justify-content: space-between }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start }
.cols.even { grid-template-columns: 1fr 1fr }
@media (max-width: 860px) { .cols, .cols.even { grid-template-columns: minmax(0, 1fr) } }
table.items { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule) }
table.items th { text-align: left; font: 600 .68rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--rule) }
table.items td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top }
table.items tr.known { opacity: .55 }
.thumbcell { width: 136px }
.thumbcell img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid var(--rule) }
.kindbox { display: grid; place-items: center; width: 128px; aspect-ratio: 16 / 9; border: 1px solid var(--rule); font: 500 .72rem var(--font-mono); text-transform: uppercase; color: var(--muted) }
.titlecell .t { font-weight: 600 }
.num { text-align: right; font-family: var(--font-mono); white-space: nowrap }
.acts { white-space: nowrap; text-align: right }
.acts .btn { margin-left: 4px }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px }
.chip { font: .72rem var(--font-mono); padding: 1px 6px; border: 1px solid var(--rule); color: var(--muted) }
.chip.sys { border-color: var(--accent); color: var(--accent); background: var(--accent-soft) }
.chip.cand { border-style: dashed; color: var(--warn); border-color: var(--warn) }
.chip.type { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.status { font: 500 .72rem var(--font-mono); padding: 2px 6px; text-transform: uppercase; border: 1px solid var(--rule) }
.s-accepted, .s-indexed { color: var(--ok); background: var(--ok-soft); border-color: transparent }
.s-rejected, .s-failed { color: var(--no); background: var(--no-soft); border-color: transparent }
.s-indexing { color: var(--warn); background: var(--warn-soft); border-color: transparent }
.itemhead { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px }
.itemhead img.big { width: 320px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule) }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 }
.facts dt { font: .7rem var(--font-mono); text-transform: uppercase; color: var(--muted); padding-top: 3px }
.facts dd { margin: 0 }
.desc { white-space: pre-line; max-width: 75ch }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px }
ul.plain.big li { font-size: 1rem }
form.inline { display: inline }
ul.history { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: .88rem }
ul.history .note { background: var(--surface); border-left: 2px solid var(--accent); padding: 2px 8px; display: inline-block; white-space: pre-line }
.filters select { max-width: 240px }
.quota { margin: 0 0 12px } code { font-family: var(--font-mono); font-size: .85em }
.concept-h { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 10px }
.moment { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule) }
@media (max-width: 640px) { .moment { grid-template-columns: minmax(0, 1fr) } }
.moment .thumb { position: relative; display: block }
.moment .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); display: block }
.moment .ts { position: absolute; right: 6px; bottom: 6px; font: 500 .72rem var(--font-mono); background: var(--ink); color: var(--bg); padding: 1px 6px }
.moment .t { font-weight: 600 }
.moment blockquote { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--rule); font-style: italic; color: var(--muted) }
.review { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.note-in { width: 220px; font-size: .82rem; padding: 3px 6px }

/* search (C5) */
.searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0 14px }
.searchbar input[type=search] { font-size: 1.05rem; padding: 8px 10px }
.searchbar .filters { grid-column: 1 / -1; margin: 0 }
.searchbar .filters input { min-width: 220px }
.hit .ocr { font-family: var(--font-mono); color: var(--muted); margin-top: 4px }
@media (max-width: 640px) { .moment { grid-template-columns: 1fr } }
.warn { color: var(--no); margin-top: 2px }