/* South African Demo Scene Archive
   Look: a 1990s DOS programming-environment desktop (grey windows, blue title bars,
   green buttons on a dithered blue desktop). Palette = the 16 VGA text-mode colours. */

@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --desk: #0000aa;
  --desk-2: #0707b8;
  --grey: #d0d0d0;
  --grey-hi: #ffffff;
  --grey-mid: #b4b4b4;
  --grey-lo: #7c7c7c;
  --ink: #000000;
  --ink-2: #383838;
  --blue: #0000aa;
  --blue-dk: #000070;
  --green: #00a800;
  --green-hi: #55ff55;
  --red: #a00000;
  --yellow: #ffff55;
  --cyan: #55ffff;
  --magenta: #ff55ff;
  --brown: #aa5500;
  --chrome: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --art: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", monospace;
  --shadow: 9px 9px 0 rgba(0, 0, 0, .62);
  --link: #0000aa;      /* link colour (the blue is also a background colour, so the two are separate) */
  --head: #000070;      /* sub-heading colour inside windows */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body {
  margin: 0;
  font: 400 14px/1.55 var(--body);
  color: var(--ink);
  background: repeating-conic-gradient(var(--desk) 0 25%, var(--desk-2) 0 50%) 0 0 / 4px 4px;
  min-height: 100vh;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); background: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; box-shadow: 0 0 0 5px #000; position: relative; z-index: 2; }
main:focus, main:focus-visible { outline: none; box-shadow: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--chrome); font-weight: 400; line-height: 1; margin: 0; }
p { margin: 0 0 .9em; max-width: 70ch; }
ul, ol { margin: 0; padding: 0; }
.dim { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--yellow); color: #000; padding: 6px 12px; z-index: 50; font-family: var(--chrome); font-size: 22px; }
.skip:focus { top: 8px; }

/* ---------- menu bar ---------- */
.menubar {
  position: sticky; top: 0; z-index: 20;
  background: var(--grey);
  border-bottom: 2px solid #000;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 3px 12px;
}
.brand { font: 400 26px/1 var(--chrome); color: #000; text-decoration: none; padding: 2px 10px 2px 4px; margin-right: 6px; border-right: 2px solid var(--grey-lo); white-space: nowrap; }
.brand:hover { background: transparent; color: var(--blue); }
.menubar nav { display: flex; flex-wrap: wrap; gap: 0 2px; }
.menubar nav a { font: 400 24px/1 var(--chrome); color: #000; text-decoration: none; padding: 4px 10px 3px; }
.menubar nav a:hover { background: #000; color: #fff; }
.menubar nav a[aria-current="page"] { background: var(--green); color: #000; }
.theme-toggle { margin-left: auto; font: 400 24px/1 var(--chrome); color: #000; background: transparent; border: 0; padding: 4px 10px 3px; cursor: pointer; white-space: nowrap; }
.theme-toggle:hover { background: #000; color: #fff; }
.search { position: relative; }
.search input {
  font: 400 14px var(--body); width: min(260px, 100%); padding: 4px 8px; background: #fff; color: #000;
  border: 2px solid #000; border-right-color: var(--grey-hi); border-bottom-color: var(--grey-hi);
  box-shadow: inset 2px 2px 0 var(--grey-lo);
}
.search input::placeholder { color: #555; }
.suggest {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, 92vw); background: var(--grey);
  border: 2px solid #000; box-shadow: var(--shadow); padding: 4px; max-height: 70vh; overflow: auto; z-index: 30;
}
.suggest[hidden] { display: none; }
.suggest a { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 4px 6px; color: #000; text-decoration: none; }
.suggest a[aria-selected="true"], .suggest a:hover { background: var(--blue); color: #fff; }
.suggest small { color: inherit; opacity: .8; }
.suggest .none { padding: 8px; }

/* ---------- desktop + windows ---------- */
.desktop { max-width: 1200px; margin: 30px auto 70px; padding: 0 18px; display: grid; gap: 34px; }
.win {
  background: var(--grey);
  border: 5px double var(--grey-hi);
  box-shadow: var(--shadow);
  min-width: 0;
}
.wtitle {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue); color: #fff; padding: 1px 8px 2px;
}
.wtitle h1, .wtitle h2 { flex: 1; text-align: center; font-size: 27px; letter-spacing: .02em; color: #fff; padding-top: 2px; }
/* the title of a window without a heading element is a <p>; the global p max-width must not shrink it off-centre */
.wtitle .wt { max-width: none; }
.wbox { font: 400 20px/1 var(--chrome); background: transparent; border: 0; color: var(--green-hi); cursor: pointer; padding: 2px 4px; }
.wbox:hover { color: var(--yellow); }
.wzoom { color: var(--green-hi); font: 400 20px/1 var(--chrome); width: 1.6em; text-align: right; }
.wbody { padding: 16px 20px 20px; }
.wbody > :last-child { margin-bottom: 0; }
.wbody h3 { font-size: 27px; margin: 22px 0 8px; color: var(--head); }
.wbody h3:first-child { margin-top: 0; }
.wbody h4 { font-size: 22px; margin: 14px 0 4px; }
.cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.lede { font-size: 15px; max-width: 64ch; }

/* ---------- hero (the one loud thing) ---------- */
/* the hero window keeps the normal grey window colours; only the title is special */
.hero .wbody { padding: 26px 28px 28px; }
.hero h1.mark {
  /* Press Start 2P: a square 8x8 pixel font. One size rule keeps the longest phrase ("South African", 13 characters) on one line
     at every width: window content width / 13.3 characters, capped at 56px. */
  font: 400 min(56px, calc((100vw - 96px) / 13.3))/1.4 "Press Start 2P", var(--chrome);
  text-transform: uppercase; letter-spacing: 0;
  margin: 0 0 22px; padding: .1em 0 .2em;
  /* fallback where text cannot be filled with a picture: flag blue */
  color: #001489;
}
.hero h1.mark span { white-space: nowrap; }
/* The letters are filled with a pixelated South African flag (assets/flag-pixels.png, drawn by build/make_flag.py), stretched over the
   whole title and scaled up with hard pixel edges. The black hard shadow is made with filter drop-shadow, because a text-shadow
   would paint over the fill. No outline and no text-stroke: both round the corners of the letters. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1.mark {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: url("flag-pixels.png") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(.0625em .0625em 0 #000);
  }
}
.hero .wbody p { font-size: 15px; max-width: 58ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }

/* ---------- buttons, chips ---------- */
.btn {
  display: inline-block; font: 400 24px/1 var(--chrome); background: var(--green); color: #000; text-decoration: none;
  border: 0; padding: 5px 16px 5px; cursor: pointer; box-shadow: 4px 4px 0 #000; position: relative;
}
.btn:hover { background: var(--green-hi); color: #000; }
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
.btn.alt { background: #fff; }
.btn.alt:hover { background: var(--yellow); }
.btn.sm { font: 500 12.5px/1.2 var(--body); padding: 5px 9px; box-shadow: 3px 3px 0 #000; }
.btn.sm:active { transform: translate(3px, 3px); }
.chip {
  display: inline-block; font: 500 11.5px/1 var(--body); padding: 3px 6px 3px; border: 1px solid #000; background: #fff; color: #000;
  white-space: nowrap; text-decoration: none; vertical-align: middle;
}
a.chip:hover { background: var(--yellow); }
.chip.p-DOS { background: var(--cyan); }
.chip.p-Amiga { background: var(--magenta); }
.chip.p-Windows { background: var(--green-hi); }
.chip.r1 { background: var(--yellow); font-weight: 600; }
.chip.r2 { background: #ececec; }
.chip.r3 { background: #ffb36b; }
.chip.warn { background: var(--red); color: #fff; border-color: #000; }
.chip.stub { background: transparent; border-style: dashed; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- leader list (home menu, definition lists) ---------- */
.leaders { list-style: none; display: grid; gap: 2px; }
.leaders a {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; color: #000; text-decoration: none;
}
.leaders a .nm { font: 400 25px/1 var(--chrome); white-space: nowrap; }
.leaders a .dots { flex: 1; border-bottom: 2px dotted var(--grey-lo); transform: translateY(-4px); min-width: 12px; }
.leaders a .ds { text-align: right; max-width: 60%; }
.leaders a:hover { background: var(--blue); color: #fff; }
.leaders a:hover .dots { border-color: #8888ff; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.facts dt { font-family: var(--chrome); font-size: 22px; line-height: 1.15; color: var(--ink-2); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- catalogue (facets + table) ---------- */
.cat { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.facets { padding-right: 6px; } /* full height: the page scrolls, not the filter panel */
.facets details { border-bottom: 1px solid var(--grey-lo); padding: 4px 0 8px; }
.facets summary { font: 400 24px/1.1 var(--chrome); cursor: pointer; padding: 4px 0; list-style: none; display: flex; justify-content: space-between; }
.facets summary::-webkit-details-marker { display: none; }
.facets summary::after { content: "+"; }
.facets details[open] summary::after { content: "−"; }
.facets .sel { color: var(--link); }
.fl { list-style: none; max-height: 15.5em; overflow: auto; }
.facets details[data-facet="year"] .fl { max-height: none; overflow: visible; } /* the year list shows every year, no inner scrollbar */
.fl button {
  display: flex; width: 100%; justify-content: space-between; gap: 8px; text-align: left; background: transparent; border: 0;
  padding: 2px 6px; cursor: pointer; font-size: 13px;
}
.fl button:hover { background: var(--blue); color: #fff; }
.fl button[aria-pressed="true"] { background: #000; color: #fff; }
.fl .n { opacity: .75; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.toolbar input[type="search"], .field {
  font: 400 14px var(--body); padding: 5px 8px; background: #fff; color: #000;
  border: 2px solid #000; border-right-color: var(--grey-hi); border-bottom-color: var(--grey-hi); box-shadow: inset 2px 2px 0 var(--grey-lo);
  min-width: 0;
}
.toolbar input[type="search"] { flex: 1 1 220px; }
select.field { padding: 5px 4px; }
.count { font: 400 23px/1 var(--chrome); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.active-filters button { background: #000; color: #fff; border: 0; padding: 3px 8px; cursor: pointer; font-size: 12.5px; }
.active-filters button:hover { background: var(--red); }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th { background: var(--blue); color: #fff; text-align: left; padding: 0; font: 400 21px/1 var(--chrome); white-space: nowrap; }
table.grid th button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 5px 8px 4px; cursor: pointer; }
table.grid th button:hover { background: var(--blue-dk); }
table.grid th button:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; box-shadow: none; }
table.grid th span.h { display: block; padding: 5px 8px 4px; }
table.grid th.rt button, table.grid th.rt span.h { text-align: right; }
table.grid td { padding: 6px 8px; border-bottom: 1px dotted var(--grey-lo); vertical-align: top; }
table.grid tbody tr:hover td { background: var(--blue); color: #fff; }
table.grid tbody tr:hover td a { color: #fff; }
table.grid tbody tr:hover td a:hover { color: #000; }
table.grid tbody tr:hover .dim { color: #cfcfff; }
table.grid .t { font-weight: 600; }
table.grid .yr { white-space: nowrap; }
table.grid .num { text-align: right; white-space: nowrap; }
table.grid .files { display: grid; gap: 6px; justify-items: start; }
.file-line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.file-line .nm { overflow-wrap: anywhere; }
.empty { padding: 26px 8px; }

/* ---------- people / lists ---------- */
.az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; }
.az a { font: 400 22px/1 var(--chrome); padding: 3px 7px; background: #fff; border: 1px solid #000; color: #000; text-decoration: none; }
.az a:hover { background: var(--yellow); }
.az span { font: 400 22px/1 var(--chrome); padding: 3px 7px; color: var(--grey-lo); }
.letter { font-size: 30px; border-bottom: 2px solid #000; margin: 18px 0 8px; }
.pgrid { list-style: none; display: grid; gap: 0 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pgrid li { padding: 4px 0; border-bottom: 1px dotted var(--grey-lo); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.pgrid .sub { font-size: 12.5px; color: var(--ink-2); }

/* ---------- block timeline (home) ---------- */
.tl-scroll { overflow-x: auto; padding-bottom: 6px; }
.tl { display: flex; align-items: flex-end; gap: 18px; min-width: max-content; padding-right: 6px; }
.tl-col { display: flex; flex-direction: column; align-items: stretch; }
/* blocks stack upwards from the year label and wrap into further columns to the right; the width is set in app.js
   (a wrapping column flexbox does not grow to fit its extra columns, which made big years overlap their neighbours) */
.tl-stack { height: calc(var(--rows) * 20px); display: flex; flex-flow: column-reverse wrap; align-content: flex-start; gap: 3px; }
.tl-stack.empty-year { align-items: center; justify-content: flex-start; } /* the dash sits on the year label, not mid-air (column-reverse: flex-start = bottom) */
.blk {
  width: 24px; height: 17px; display: block; font: 400 15px/15px var(--chrome); text-align: center; text-decoration: none;
  border: 1px solid #000;
}
.blk:hover { outline: 3px solid var(--yellow); outline-offset: 0; z-index: 3; box-shadow: 0 0 0 5px #000; }
.blk.nodl { opacity: .5; border-style: dashed; }
.c-Demo { background: #0000aa; color: #fff; }
.c-Intro { background: #00a8a8; color: #000; }
.c-Invitation { background: #aa00aa; color: #fff; }
.c-Game { background: #00a800; color: #000; }
.c-Music { background: #aa5500; color: #fff; }
.c-Musicdisk { background: #ff9a2e; color: #000; }
.c-Diskmag { background: #ffff55; color: #000; }
.c-Graphics { background: #aa0000; color: #fff; }
.c-Tool { background: #555; color: #fff; }
.c-Other { background: #fff; color: #000; }
.tl-year { text-align: center; font: 400 23px/1 var(--chrome); border-top: 2px solid #000; margin-top: 5px; padding-top: 3px; }
.tl-year a { color: #000; text-decoration: none; display: block; }
.tl-year a:hover { background: var(--blue); color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .blk { width: 20px; height: 15px; font-size: 14px; line-height: 13px; }

/* ---------- bars (stats) ---------- */
.bars { display: grid; gap: 4px; }
.bar { display: grid; grid-template-columns: minmax(70px, 170px) minmax(0, 1fr) 5.2em; gap: 10px; align-items: center; color: #000; text-decoration: none; padding: 1px 4px; }
a.bar:hover { background: var(--blue); color: #fff; }
.bar .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { height: 15px; }
.bar .fill { display: block; height: 100%; background: var(--blue); min-width: 2px; }
.bar .fill.dl { background: var(--green); border-right: 0; }
.bar .fill.miss { background: var(--red); }
.wbody .bars { margin: 12px 0 16px; }
.wbody table.grid + p { margin-top: 14px; }
a.bar:hover .fill { background: var(--yellow); }
.bar .v { text-align: right; font-weight: 500; white-space: nowrap; }
.span-chart { display: grid; gap: 3px; }
.span-row { display: grid; grid-template-columns: minmax(80px, 160px) minmax(0, 1fr); gap: 10px; align-items: center; color: #000; text-decoration: none; padding: 1px 4px; }
a.span-row:hover { background: var(--blue); color: #fff; }
.span-track { position: relative; height: 14px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n) - 1px), rgba(0, 0, 0, .18) calc(100% / var(--n) - 1px), rgba(0, 0, 0, .18) calc(100% / var(--n))); }
.span-bar { position: absolute; top: 2px; bottom: 2px; background: var(--blue); }
a.span-row:hover .span-bar { background: var(--yellow); }
.span-axis { display: grid; grid-template-columns: minmax(80px, 160px) minmax(0, 1fr); gap: 10px; padding: 0 4px; font-size: 11.5px; color: var(--ink-2); }
.span-axis div { display: flex; justify-content: space-between; }

/* ---------- misc blocks ---------- */
pre.diz {
  font: 400 14px/1.08 var(--art); background: #000; color: #c8c8c8; padding: 12px 14px; overflow: auto; margin: 0;
  max-height: 340px; border: 2px solid #000; white-space: pre; tab-size: 4;
}
section.arc-text + section.arc-text { margin-top: 22px; }
section.arc-text h3 { margin: 0 0 6px; }
section.arc-text p.dim { margin: 0 0 6px; }
details.more { margin: 8px 0; }
details.more summary { cursor: pointer; font: 400 22px/1.2 var(--chrome); }
details.more ul { margin: 6px 0 0 1.2em; font-size: 12.5px; }
.note-box { background: #f0ec9a; border: 1px solid #000; padding: 8px 12px; margin: 10px 0; font-size: 13px; max-width: 72ch; }
.note-box.warn { background: #ffc9c9; }
.kv-list { list-style: none; display: grid; gap: 4px; }
.members { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.members a { display: inline-block; background: #fff; border: 1px solid #000; padding: 3px 8px; text-decoration: none; color: #000; }
.members a:hover { background: var(--blue); color: #fff; }
.results { list-style: none; display: grid; gap: 3px; }
.results li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }

/* ---------- status bar ---------- */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--grey); border-top: 2px solid #000;
  display: flex; justify-content: space-between; gap: 16px; padding: 3px 14px 2px; font: 400 21px/1.15 var(--chrome);
}
.statusbar b { font-weight: 400; color: var(--red); }
.statusbar span:last-child { text-align: right; }

/* Productions page: all filters in the first window, laid out across the width */
.facets-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 22px; align-items: start; padding-right: 0; }
.facets-wide details[data-facet] .fl { max-height: none; overflow: visible; }
.facets-wide details[data-facet="group"] .fl, .facets-wide details[data-facet="party"] .fl, .facets-wide details[data-facet="fmt"] .fl { max-height: 11em; overflow: auto; }
.facets-wide details[data-facet="year"] .fl { display: flex; flex-wrap: wrap; gap: 2px 4px; max-height: none; overflow: visible; }
.facets-wide details[data-facet="year"] .fl button { width: auto; padding: 2px 8px; border: 1px solid var(--grey-lo); }
.facets-wide details[data-facet="year"] .fl .n { display: none; }
.facets-wide summary { font-size: 22px; }
.yearwin { margin-top: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cat { grid-template-columns: 1fr; }
  .facets { padding: 0; }
  .facets-wrap > summary { font: 400 24px/1 var(--chrome); cursor: pointer; padding: 4px 0 8px; }
}
@media (min-width: 961px) {
  .facets-wrap > summary { display: none; }
}
@media (max-width: 760px) {
  .desktop { margin-top: 20px; gap: 26px; padding: 0 12px; }
  .wbody { padding: 12px 12px 16px; }
  .win { box-shadow: 6px 6px 0 rgba(0, 0, 0, .62); }
  .menubar { padding: 3px 8px; }
  .menubar nav a { font-size: 22px; padding: 3px 7px; }
  .search { width: 100%; }
  .search input { width: 100%; }
  .statusbar { position: static; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dd { margin-bottom: 8px; }
  .bar { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 4.6em; }
  .leaders a .ds { display: none; }
  .leaders.hl a { flex-wrap: wrap; }
  .leaders.hl a .dots { display: none; }
  .leaders.hl a .ds { display: block; flex-basis: 100%; text-align: left; max-width: none; font-size: 13px; }
  /* tables become stacked cards */
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; }
  table.grid thead { position: absolute; left: -9999px; }
  table.grid tr { border-bottom: 1px solid var(--grey-lo); padding: 8px 0; }
  table.grid td { border: 0; padding: 1px 4px; }
  table.grid td:empty { display: none; }
  table.grid td[data-label]::before { content: attr(data-label) " "; font-family: var(--chrome); font-size: 19px; color: var(--ink-2); }
  table.grid .num { text-align: left; }
}
/* ---------- screenshots: gallery on the production page, strip on year pages, lightbox ---------- */
.chip.pics { background: var(--cyan); }
ul.shots { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 12px 0 0; padding: 0; }
ul.shots.small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; }
ul.shots li { min-width: 0; }
.shot { display: block; width: 100%; padding: 0; border: 2px solid #000; background: #000; box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); cursor: zoom-in; line-height: 0; }
a.shot { cursor: pointer; }
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { box-shadow: 4px 4px 0 var(--yellow); }
ul.shots .cap { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
body.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(0, 0, 16, .985); }
.lb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--grey); border-bottom: 2px solid #000; }
.lb-count { flex: 1; font: 400 22px/1 var(--chrome); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; }
.lb-fig { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }
.lb-fig img { display: block; max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; border: 2px solid #000; background: #000; }
.lb-fig figcaption { color: #fff; font: 400 21px/1.2 var(--chrome); text-align: center; max-width: 70ch; }
.lb-nav { flex: none; width: 48px; min-height: 64px; font: 400 26px/1 var(--chrome); background: var(--grey); border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); cursor: pointer; }
.lb-nav:hover { background: var(--yellow); }
@media (max-width: 760px) {
  .lb-stage { position: relative; padding: 8px 4px; }
  .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; min-height: 56px; opacity: .88; }
  .lb-nav[data-lb="prev"] { left: 4px; }
  .lb-nav[data-lb="next"] { right: 4px; }
  .lb-fig img { max-height: calc(100vh - 190px); }
}
@media print { .lightbox { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}
@media (forced-colors: active) {
  .hero h1.mark, .hero h1.mark span { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; filter: none; text-shadow: none; }
  .win { border: 2px solid CanvasText; }
}
@media print {
  body { background: #fff; }
  .menubar, .statusbar, .facets { display: none; }
  .win { box-shadow: none; border: 1px solid #000; }
}

/* ---------- music player ---------- */
button.chip.play { font: 500 11px/1.3 var(--body); cursor: pointer; background: var(--green); border: 1px solid #000; padding: 1px 6px; margin-left: 4px; text-transform: lowercase; }
button.chip.play:hover { background: var(--green-hi); }
button.chip.play.on, .btn.play-btn.on { background: var(--yellow); }
ol.tunes { list-style: none; display: grid; gap: 8px; margin: 12px 0 4px; }
ol.tunes li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
ol.tunes .tn { font-weight: 600; overflow-wrap: anywhere; }
.player {
  position: fixed; left: 0; right: 0; bottom: var(--sbh, 31px); z-index: 16; background: var(--blue-dk); color: #fff;
  border-top: 2px solid #000; box-shadow: 0 -4px 0 rgba(0, 0, 0, .35); padding: 6px 14px 7px;
}
.player[hidden] { display: none; }
.pl-main { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(180px, 1.6fr) auto auto; gap: 6px 16px; align-items: center; }
.pl-info { display: flex; flex-direction: column; min-width: 0; }
.pl-title { font: 400 24px/1.05 var(--chrome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--yellow); }
.pl-sub { font: 400 12.5px/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dfe6ff; }
.pl-sub a { color: var(--cyan); }
.pl-ctl { display: flex; gap: 6px; }
.pl-btn { font: 400 21px/1 var(--chrome); background: var(--grey); color: #000; border: 0; padding: 4px 10px 3px; cursor: pointer; box-shadow: 3px 3px 0 #000; }
.pl-btn:hover:not(:disabled) { background: var(--green-hi); }
.pl-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.pl-btn:disabled { opacity: .5; cursor: default; }
.pl-main-btn { min-width: 5.2em; background: var(--green); }
.pl-seekrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-seek { flex: 1; min-width: 0; }
.pl-time { font: 400 20px/1 var(--chrome); min-width: 2.6em; text-align: center; }
.pl-vol { display: flex; align-items: center; gap: 6px; font: 400 20px/1 var(--chrome); }
.pl-vol input { width: 90px; }
.player input[type=range] { accent-color: var(--yellow); }
.pl-msg { margin-top: 6px; background: #f0ec9a; color: #000; border: 1px solid #000; padding: 5px 10px; font-size: 13px; }
.player.is-error .pl-title { color: #ff9a9a; }
body.has-player { padding-bottom: 96px; }
@media (max-width: 960px) {
  .pl-main { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-seekrow { grid-column: 1 / -1; order: 5; }
  .pl-vol { display: none; }
}
@media (max-width: 760px) {
  .player { bottom: 0; padding: 6px 10px 8px; }
  .pl-main { grid-template-columns: 1fr; }
  .pl-close { justify-self: start; }
  body.has-player { padding-bottom: 170px; }
}
@media print { .player { display: none; } }

/* Scrollbar: darker than the page grey so it stays visible against it. */
html { scrollbar-color: #5a5a5a #a0a0a0; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #a0a0a0; }
::-webkit-scrollbar-thumb { background: #5a5a5a; border: 2px solid #000; border-right-color: #9a9a9a; border-bottom-color: #9a9a9a; }
::-webkit-scrollbar-corner { background: #a0a0a0; }

/* ---------- dark theme ----------
   Switched by the button in the menu bar (assets/theme.js sets data-theme on <html> and remembers the choice).
   Same layout, same VGA colours, but dark grey windows with light text. Screen only: printing stays light. */
@media screen {
  :root[data-theme="dark"] {
    --desk: #000046;
    --desk-2: #05054f;
    --grey: #1c1c27;
    --grey-hi: #56566c;
    --grey-mid: #2a2a38;
    --grey-lo: #6a6a80;
    --ink: #e6e6ee;
    --ink-2: #a9a9bd;
    --link: #9ea5ff;
    --head: #9fb4ff;
    --red: #c80000;
    color-scheme: dark;
    --shadow: 9px 9px 0 rgba(0, 0, 0, .8);
  }
  [data-theme="dark"] a:hover { color: #000; }
  [data-theme="dark"] .menubar { border-bottom-color: #000; }
  [data-theme="dark"] .brand,
  [data-theme="dark"] .menubar nav a,
  [data-theme="dark"] .theme-toggle,
  [data-theme="dark"] .suggest a,
  [data-theme="dark"] .leaders a,
  [data-theme="dark"] .tl-year a,
  [data-theme="dark"] .bar,
  [data-theme="dark"] .span-row { color: var(--ink); }
  [data-theme="dark"] .brand { border-right-color: var(--grey-lo); }
  [data-theme="dark"] .brand:hover { color: var(--link); }
  [data-theme="dark"] .menubar nav a:hover,
  [data-theme="dark"] .theme-toggle:hover { background: var(--blue); color: #fff; }
  [data-theme="dark"] .menubar nav a[aria-current="page"] { background: var(--green); color: #000; }
  [data-theme="dark"] .suggest a:hover, [data-theme="dark"] .suggest a[aria-selected="true"],
  [data-theme="dark"] .leaders a:hover, [data-theme="dark"] a.bar:hover, [data-theme="dark"] a.span-row:hover,
  [data-theme="dark"] .tl-year a:hover, [data-theme="dark"] .members a:hover { color: #fff; }
  /* inputs */
  [data-theme="dark"] .search input,
  [data-theme="dark"] .toolbar input[type="search"],
  [data-theme="dark"] .field { background: #0c0c14; color: var(--ink); border-color: #000 var(--grey-hi) var(--grey-hi) #000; box-shadow: inset 2px 2px 0 #000; }
  [data-theme="dark"] .search input::placeholder { color: #8a8aa0; }
  [data-theme="dark"] .suggest, [data-theme="dark"] .menubar { box-shadow: 0 4px 0 rgba(0, 0, 0, .7); }
  [data-theme="dark"] .suggest { box-shadow: var(--shadow); border-color: var(--grey-hi); }
  /* chips and small tags */
  [data-theme="dark"] .chip, [data-theme="dark"] .az a, [data-theme="dark"] .members a { background: var(--grey-mid); color: var(--ink); border-color: var(--grey-lo); }
  [data-theme="dark"] .az span { color: var(--grey-lo); }
  [data-theme="dark"] a.chip:hover, [data-theme="dark"] .az a:hover { background: var(--yellow); color: #000; }
  /* the coloured chips keep their light-mode colours and dark text (the generic chip rule above would otherwise turn them dark grey) */
  [data-theme="dark"] .chip.p-DOS, [data-theme="dark"] .chip.p-Amiga, [data-theme="dark"] .chip.p-Windows, [data-theme="dark"] .chip.pics,
  [data-theme="dark"] .chip.r1, [data-theme="dark"] .chip.r2, [data-theme="dark"] .chip.r3 { color: #000; border-color: #000; }
  [data-theme="dark"] .chip.p-DOS, [data-theme="dark"] .chip.pics { background: var(--cyan); }
  [data-theme="dark"] .chip.p-Amiga { background: var(--magenta); }
  [data-theme="dark"] .chip.p-Windows { background: var(--green-hi); }
  [data-theme="dark"] .chip.r1 { background: var(--yellow); }
  [data-theme="dark"] .chip.r2 { background: #ececec; }
  [data-theme="dark"] .chip.r3 { background: #ffb36b; }
  [data-theme="dark"] .chip.warn { background: var(--red); color: #fff; border-color: #000; }
  [data-theme="dark"] a.chip.p-DOS:hover, [data-theme="dark"] a.chip.pics:hover, [data-theme="dark"] a.chip.r1:hover,
  [data-theme="dark"] a.chip.p-Amiga:hover, [data-theme="dark"] a.chip.p-Windows:hover { background: var(--yellow); }
  [data-theme="dark"] .chip.stub { background: transparent; color: var(--ink-2); border-color: var(--grey-lo); }
  [data-theme="dark"] .btn.alt { background: #d0d0dc; }
  [data-theme="dark"] .btn, [data-theme="dark"] .btn.sm { box-shadow: 4px 4px 0 #000; }
  /* lists, tables, filters */
  [data-theme="dark"] .letter { border-bottom-color: var(--grey-lo); }
  [data-theme="dark"] .fl button[aria-pressed="true"] { background: var(--blue); color: #fff; }
  [data-theme="dark"] .active-filters button { background: #000; color: #fff; outline: 1px solid var(--grey-lo); }
  [data-theme="dark"] .active-filters button:hover { background: var(--red); }
  [data-theme="dark"] table.grid tbody tr:hover td a:hover { color: #000; }
  /* charts and timeline blocks */
  [data-theme="dark"] .blk { border-color: #8e8ea6; }
  [data-theme="dark"] .tl-year { border-top-color: var(--grey-lo); }
  [data-theme="dark"] .bar .fill, [data-theme="dark"] .span-bar { background: #5a5aee; }
  [data-theme="dark"] .bars .track .fill { background: #5a5aee !important; } /* the Years table sets this colour inline */
  [data-theme="dark"] .bar .fill.dl { background: var(--green); }
  [data-theme="dark"] .bar .fill.miss { background: #d03030; }
  [data-theme="dark"] .span-track { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n) - 1px), rgba(255, 255, 255, .12) calc(100% / var(--n) - 1px), rgba(255, 255, 255, .12) calc(100% / var(--n))); }
  [data-theme="dark"] .legend .blk { border-color: #8e8ea6; }
  /* notes and text blocks (they keep their pale yellow / pink paper, so they keep dark text) */
  [data-theme="dark"] .note-box { color: #000; border-color: #000; }
  [data-theme="dark"] pre.diz { border-color: var(--grey-hi); }
  [data-theme="dark"] .statusbar { border-top-color: #000; }
  [data-theme="dark"] .statusbar b { color: #ff6a6a; }
  /* screenshots and lightbox */
  [data-theme="dark"] .shot { border-color: var(--grey-hi); box-shadow: 4px 4px 0 rgba(0, 0, 0, .7); }
  [data-theme="dark"] .shot:hover { box-shadow: 4px 4px 0 var(--yellow); }
  [data-theme="dark"] .lb-nav:hover { color: #000; }
  /* player: already a dark blue bar; only its grey buttons need dark text kept */
  [data-theme="dark"] .pl-btn { color: #000; background: #c8c8d4; }
  [data-theme="dark"] .pl-btn:hover:not(:disabled) { background: var(--green-hi); }
  [data-theme="dark"] .pl-main-btn { background: var(--green); }
  [data-theme="dark"] button.chip.play { color: #000; }
  /* scrollbars */
  [data-theme="dark"] { scrollbar-color: #6a6a80 #101018; }
  [data-theme="dark"] ::-webkit-scrollbar-track, [data-theme="dark"] ::-webkit-scrollbar-corner { background: #101018; }
  [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #6a6a80; border: 2px solid #000; border-right-color: #3a3a4c; border-bottom-color: #3a3a4c; }
}

table.grid td.t .credit-sub { font-size: 12px; font-weight: 400 !important; margin-top: 2px; }

.party-line { margin: 0 0 8px; }

/* the tables of the Productions page and the result tables of a party page share one set of column widths, so the sections line up */
@media (min-width: 761px) {
  table.grid.prod-table, table.grid.res-table { table-layout: fixed; }
  table.prod-table th:nth-child(1) { width: 9%; }
  table.prod-table th:nth-child(2) { width: 29%; }
  table.prod-table th:nth-child(3) { width: 21%; }
  table.prod-table th:nth-child(4) { width: 11%; }
  table.prod-table th:nth-child(5) { width: 14%; }
  table.prod-table th:nth-child(6) { width: 16%; }
  table.res-table th:nth-child(1) { width: 12%; }
  table.res-table th:nth-child(2) { width: 32%; }
  table.res-table th:nth-child(3) { width: 20%; }
  table.res-table th:nth-child(4) { width: 24%; }
  table.res-table th:nth-child(5) { width: 12%; }
  table.grid.prod-table td, table.grid.res-table td { overflow-wrap: anywhere; }
}