/* hept32 tokens and card styles copied verbatim from docs/search-ux-card.html (design 4428d59),
   minus the mockup-only field-number overlay; then the search controls (below). */
/* Palette: hept32 by ENDESGA (https://lospec.com/palette-list/hept32). Project standard
   (owner decision 2026-10-15): every color below is one of its 32 entries; no alpha,
   blends or filters. Role mapping and contrast: docs/search-ux.md "Palette". */
:root {
  --bg: #c5cddb;          /* page */
  --card: #ffffff;        /* card surface */
  --ink: #180d2f;         /* primary text, pivots */
  --ink-2: #353658;       /* secondary text on page */
  --muted: #686b72;       /* secondary text on card */
  --rule: #8b97b6;        /* decorative dashed rules only */
  --edge: #353658;        /* card boundary, title underline */
  --shadow: #8b97b6;      /* hard offset shadow */
  --chip: #c5cddb;        /* genre chip fill */
  --accent: #ef6e10;      /* watch button fill, card stripe */
  --accent-ink: #180d2f;
  --accent-hover: #ecab11;
  --watch-edge: #180d2f;
  --link: #1831a7;        /* external links, itch icon */
  --warn-bg: #ecab11;     /* Unverified badge */
  --warn-ink: #180d2f;
  --web-bg: #47f641;      /* Play on web badge */
  --web-ink: #180d2f;
  --badge-edge: #180d2f;
  --mark: #e8ff75;        /* matched developer highlight */
  --mark-ink: #180d2f;    /* its text and box border */
  --tag-num: #841252;     /* field-number markers */
  --tag-num-ink: #ffffff;
  --focus: #1831a7;
  --btn-edge: #686b72;
  --check-bg: #ffffff;
  --check-edge: #180d2f;
  --check-on: #1831a7;
  --check-mark: #ffffff;
  --sel-bg: #1831a7;
  --sel-ink: #ffffff;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --body: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --card: #180d2f; --ink: #ffffff; --ink-2: #c5cddb; --muted: #8b97b6;
    --rule: #353658; --edge: #686b72; --shadow: #353658; --chip: #353658;
    --accent: #ef6e10; --accent-ink: #180d2f; --accent-hover: #ecab11; --watch-edge: #ef6e10;
    --link: #5ee9e9; --warn-bg: #ecab11; --warn-ink: #180d2f; --web-bg: #47f641; --web-ink: #180d2f;
    --badge-edge: #180d2f; --mark: #841252; --mark-ink: #ffffff; --tag-num: #f78d8d; --tag-num-ink: #180d2f;
    --focus: #5ee9e9; --btn-edge: #8b97b6; --check-bg: #180d2f; --check-edge: #c5cddb; --check-on: #5ee9e9;
    --check-mark: #180d2f; --sel-bg: #5ee9e9; --sel-ink: #180d2f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #000000; --card: #180d2f; --ink: #ffffff; --ink-2: #c5cddb; --muted: #8b97b6;
    --rule: #353658; --edge: #686b72; --shadow: #353658; --chip: #353658;
    --accent: #ef6e10; --accent-ink: #180d2f; --accent-hover: #ecab11; --watch-edge: #ef6e10;
    --link: #5ee9e9; --warn-bg: #ecab11; --warn-ink: #180d2f; --web-bg: #47f641; --web-ink: #180d2f;
    --badge-edge: #180d2f; --mark: #841252; --mark-ink: #ffffff; --tag-num: #f78d8d; --tag-num-ink: #180d2f;
    --focus: #5ee9e9; --btn-edge: #8b97b6; --check-bg: #180d2f; --check-edge: #c5cddb; --check-on: #5ee9e9;
    --check-mark: #180d2f; --sel-bg: #5ee9e9; --sel-ink: #180d2f;
    color-scheme: dark;
}
* { box-sizing: border-box; }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--body);
}
main { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
header.page h1 { font: 600 28px/1.15 var(--display); margin: 0 0 4px; letter-spacing: -0.01em; }
header.page p { margin: 0 0 16px; color: var(--ink-2); max-width: 64ch; }
.toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font: 13px var(--mono); color: var(--ink-2); margin-bottom: 28px; }
.toolbar label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.toolbar input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px;
  background: var(--check-bg); border: 2px solid var(--check-edge); border-radius: 2px;
  display: inline-grid; place-content: center; cursor: pointer;
}
.toolbar input[type="checkbox"]:checked { background: var(--check-on); border-color: var(--check-on); }
.toolbar input[type="checkbox"]:checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--check-mark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h2.variant { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2); margin: 36px 0 10px; display: flex; gap: 10px; align-items: baseline; }
h2.variant span { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---------- the card ---------- */
.card {
  background: var(--card); border: 2px solid var(--edge); border-radius: 4px;
  padding: 18px 20px 16px; position: relative;
  box-shadow: 4px 4px 0 var(--shadow);
}
.card::before {   /* broadcast slate stripe (decorative) */
  content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 4px;
  background: var(--accent);
}
.card.unverified::before { background: repeating-linear-gradient(180deg, var(--warn-bg) 0 6px, var(--card) 6px 10px); }
.row-title { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.title { font: 600 24px/1.2 var(--display); margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--edge); }
.title a:hover { border-bottom-width: 2px; }
.title .ext-mark { font-size: .7em; }
.badges { display: flex; gap: 6px; flex-shrink: 0; padding-top: 4px; }
.badge { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 6px; border: 1px solid var(--badge-edge); border-radius: 2px; white-space: nowrap; }
.badge.web { background: var(--web-bg); color: var(--web-ink); }
.badge.unverified { background: var(--warn-bg); color: var(--warn-ink); }

.when { margin: 6px 0 0; font: 14px/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 8px; }
.sep { color: var(--muted); }
.ext { color: var(--link); text-decoration: none; }
.ext:hover { text-decoration: underline; }
.ext .ext-mark { font-size: .85em; }
/* The decorative globe before every outbound arrow (aria-hidden): inline SVG stroked in
   currentColor, so no colour is set here. Sized in em to follow each .ext-mark size. */
.web-mark { width: .9em; height: .9em; vertical-align: -.1em; margin-right: .1em; }
.datekind { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--muted); border-radius: 2px; padding: 0 4px; }
.unknown { color: var(--muted); font-style: italic; }

.watch { margin: 12px 0 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 13px var(--mono); }
.btn-watch { display: inline-flex; gap: 8px; align-items: center; background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--watch-edge); font: 600 14px var(--mono); padding: 6px 10px; border-radius: 2px; text-decoration: none; }
.btn-watch:hover { background: var(--accent-hover); }
.btn-watch::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.note { color: var(--muted); font: 13px var(--mono); }

dl.facts { display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; margin: 16px 0 0;
  padding-top: 12px; border-top: 1px dashed var(--rule); }
dl.facts dt { font: 600 11px/1.9 var(--mono); letter-spacing: .12em; color: var(--muted); }
dl.facts dd { margin: 0; }
.team { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.team .roles { color: var(--muted); }
.itch { display: inline-block; vertical-align: -3px; margin-left: 4px; color: var(--link); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { background: var(--chip); color: var(--ink); border-radius: 2px; padding: 1px 8px; font-size: 14px; }
.tag { font: 13px var(--mono); color: var(--muted); }
.os { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 13px var(--mono); }
.os button { display: inline-flex; gap: 5px; align-items: center; }
.os svg { width: 16px; height: 16px; }

.targets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn { display: inline-flex; gap: 8px; align-items: baseline; border: 1px solid var(--btn-edge); border-radius: 2px;
  padding: 6px 10px; font: 13px var(--mono); color: var(--ink); text-decoration: none; background: var(--card); }
.btn:hover { border-color: var(--ink); }
.btn .price { color: var(--muted); }
.btn.primary { border: 2px solid var(--ink); padding: 5px 9px; font-weight: 600; }

@media (max-width: 560px) {
  .row-title { flex-direction: column; }
  dl.facts { grid-template-columns: 1fr; gap: 2px; }
  dl.facts dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .35s ease-out both; }
  .card:nth-of-type(2) { animation-delay: .05s; }
  @keyframes rise { from { transform: translateY(6px); } }
}

/* ---------- search controls (prototype; palette tokens only) ---------- */
.proto-banner { font: 12px/1.5 var(--mono); color: var(--ink-2); border: 1px dashed var(--rule); padding: 6px 10px; margin: 0 0 18px; }
.proto-banner b { color: var(--ink); }
form.search { display: grid; grid-template-columns: 96px 1fr; gap: 10px 14px; align-items: start; margin-bottom: 14px;
  background: var(--card); border: 2px solid var(--edge); border-radius: 4px; padding: 16px; box-shadow: 4px 4px 0 var(--shadow); }
form.search > label, form.search .lbl { font: 600 12px/34px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.combo { position: relative; }
.combo input, .row input[type="date"], select { width: 100%; font: 15px var(--body); color: var(--ink); background: var(--card);
  border: 1px solid var(--btn-edge); border-radius: 2px; padding: 6px 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.row input[type="date"] { width: auto; }
.combo .clear { position: absolute; right: 6px; top: 5px; }
.listbox { list-style: none; margin: 2px 0 0; padding: 0; position: absolute; z-index: 5; left: 0; right: 0;
  background: var(--card); border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--shadow); max-height: 340px; overflow: auto; }
.listbox li { padding: 6px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.listbox li .why { font: 12px var(--mono); color: var(--muted); }
.listbox li[aria-selected="true"] { background: var(--sel-bg); color: var(--sel-ink); }
.listbox li[aria-selected="true"] .why { color: var(--sel-ink); }
.fieldmsg { font: 13px var(--mono); color: var(--muted); margin: 4px 0 0; }
.fieldmsg.err { color: var(--ink); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--btn-edge); border-radius: 2px; }
.seg label { font: 13px var(--mono); padding: 5px 10px; cursor: pointer; }
.seg input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.seg input:checked + span { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.helper { font: 13px var(--mono); color: var(--muted); margin: 2px 0 0; max-width: 70ch; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; }
.chips-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; font: 13px var(--mono); }
.chip-active { border: 1px solid var(--edge); border-radius: 2px; padding: 2px 4px 2px 8px; background: var(--card); }
.chip-active button { background: none; border: 0; color: var(--ink); cursor: pointer; font: 600 14px var(--mono); padding: 0 4px; }
.results-head { font: 600 14px var(--mono); margin: 0 0 4px; }
.results-sub { font: 13px var(--mono); color: var(--muted); margin: 0 0 16px; }
.results { display: grid; gap: 22px; }
.results.dim .card { border-style: dashed; box-shadow: none; }
.empty { background: var(--card); border: 2px dashed var(--rule); padding: 16px; }
.more-wrap { margin: 22px 0; text-align: center; }
.btn-more { font: 600 14px var(--mono); border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 8px 14px; cursor: pointer; }
.report { margin: 12px 0 0; font: 12px var(--mono); }
.report .placeholder { color: var(--muted); border-bottom: 1px dashed var(--muted); }
footer.about { margin-top: 40px; font: 13px/1.6 var(--mono); color: var(--ink-2); border-top: 1px dashed var(--rule); padding-top: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  form.search { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  form.search > label, form.search .lbl { line-height: 1.6; margin-top: 6px; }
}

/* ---------- theme toggle and results minimap (docs/search-ux.md; palette tokens only) ---------- */
.card { scroll-margin-top: 16px; }
.minimap { display: none; }
@media (min-width: 1280px) {
  .minimap:not([hidden]) {
    display: block; position: fixed; top: 16px; bottom: 16px; right: 16px; width: min(12.5vw, 280px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--card); border: 2px solid var(--edge); border-radius: 4px; padding: 10px 0;
  }
}
.mm-head { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); margin: 0 12px; }
.mm-count { font: 12px var(--mono); color: var(--muted); margin: 2px 12px 8px; }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-entry {
  display: block; width: 100%; text-align: left; cursor: pointer; overflow-wrap: anywhere;
  background: var(--card); border: 0; border-left: 4px solid var(--card); padding: 5px 10px 5px 8px;
  font: 12px/1.35 var(--mono); color: var(--muted);
}
.mm-entry span { display: block; }
.mm-entry .mm-title { font: 600 13px/1.3 var(--body); color: var(--ink); }
.mm-entry[aria-current="true"] { background: var(--chip); border-left-color: var(--ink); color: var(--ink-2); }
.mm-entry:focus-visible { outline-offset: -2px; }
main > .toolbar { margin-bottom: 16px; }

/* ---------- edition state and platform filter (docs/search-ux.md; palette tokens only) ---------- */
/* A disabled edition list looks disabled (it said nothing before); the helper says why. */
select:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
form.search fieldset.platforms { grid-column: 1 / -1; display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px;
  border: 0; margin: 0; padding: 0; min-width: 0; }
/* A floated legend joins the grid as an ordinary item, so it lines up with the other field labels. */
fieldset.platforms legend { float: left; grid-column: 1; padding: 0;
  font: 600 12px/34px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
fieldset.platforms .row, fieldset.platforms .helper { grid-column: 2; }
fieldset.platforms label { display: inline-flex; gap: 6px; align-items: center; font: 13px/34px var(--mono); cursor: pointer; }
fieldset.platforms svg { width: 16px; height: 16px; }
fieldset.platforms input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px;
  background: var(--check-bg); border: 2px solid var(--check-edge); border-radius: 2px;
  display: inline-grid; place-content: center; cursor: pointer;
}
fieldset.platforms input[type="checkbox"]:checked { background: var(--check-on); border-color: var(--check-on); }
fieldset.platforms input[type="checkbox"]:checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--check-mark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 560px) {
  form.search fieldset.platforms { grid-template-columns: 1fr; gap: 0; }
  fieldset.platforms legend { line-height: 1.6; margin-top: 6px; }
  fieldset.platforms legend, fieldset.platforms .row, fieldset.platforms .helper { grid-column: 1; }
}

/* ---------- card filter toggles (docs/search-ux.md "Card filter toggles and web symbol";
   palette tokens only) ---------- */
/* Names (streamer, jam, edition, developer): native toggle buttons that keep the name look, ink at
   600 with no underline. The 1px border and fill are the card colour until on, so turning on
   changes no size. At least 24 x 24 CSS px (WCAG 2.5.8) by a min-height, not larger text. */
button.pivot { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; margin: 0; padding: 0 3px;
  font: inherit; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--card);
  border-radius: 2px; cursor: pointer; text-align: start; vertical-align: baseline; }
button.pivot:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Facets: native buttons that keep the chip and OS looks, bordered the same way. */
button.facet { font: inherit; color: var(--ink); cursor: pointer; border-radius: 2px; min-height: 24px; min-width: 24px; margin: 0; }
button.facet.chip { background: var(--chip); border: 1px solid var(--chip); padding: 1px 8px; font: 14px/1.5 var(--body); }
.os button.facet { background: var(--card); border: 1px solid var(--card); padding: 3px 4px; font: 13px var(--mono); }
button.facet:hover { text-decoration: underline; text-underline-offset: 3px; }
/* On (every card control whose value is in the search, aria-pressed="true"): the matched-developer
   treatment, so weight and a box differ as well as the fill (WCAG 1.4.1). */
button.pivot.on, button.facet.on { font-weight: 800; background: var(--mark); color: var(--mark-ink); border-color: var(--mark-ink); }
/* After a card tap the filter row scrolls to the top with a 16px margin; focus goes to the count. */
.chips-active { scroll-margin-top: 16px; }
.results-head:focus-visible { outline-offset: 4px; }