/* The game explorer inside the site: every rule is scoped to .explorer, the colours are tokens on it, and the dark
   theme follows the site's own switch (html.dark), so the page reads as part of the site. */
.explorer {
  --bg: transparent; --panel: rgba(255, 255, 255, 0.62); --panel-2: rgba(0, 0, 0, 0.028); --border: rgba(0, 0, 0, 0.09);
  --text: #1b1b1f; --muted: #52525b; --faint: #8a8a93;
  --accent: #1f3fd0; --accent-soft: rgba(31, 63, 208, 0.1); --accent-ink: #ffffff;
  --ok: #15803d; --ok-soft: rgba(21, 128, 61, 0.1); --warn: #a16207; --warn-soft: rgba(202, 138, 4, 0.13);
  --bad: #b91c1c; --bad-soft: rgba(185, 28, 28, 0.09);
  --c1: #1f3fd0; --c2: #dc2626; --c3: #27272a; --c4: #7c3aed; --c5: #16a34a; --c6: #d97706;
  --grid: rgba(0, 0, 0, 0.075); --track: rgba(0, 0, 0, 0.12);
  color: var(--text);
  font-size: 15px; line-height: 1.55;
  max-width: 1120px; margin: 0 auto; padding: 5.5rem 16px 48px;
}
.dark .explorer {
  --panel: rgba(255, 255, 255, 0.035); --panel-2: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.09);
  --text: #ececef; --muted: #a1a1aa; --faint: #71717a;
  --accent: #8fb0ff; --accent-soft: rgba(143, 176, 255, 0.14); --accent-ink: #0b1220;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --warn: #facc15; --warn-soft: rgba(250, 204, 21, 0.12);
  --bad: #f87171; --bad-soft: rgba(248, 113, 113, 0.12);
  --c1: #8fb0ff; --c2: #f87171; --c3: #e4e4e7; --c4: #c4b5fd; --c5: #4ade80; --c6: #fbbf24;
  --grid: rgba(255, 255, 255, 0.08); --track: rgba(255, 255, 255, 0.16);
  color-scheme: dark;
}
.explorer *, .explorer *::before, .explorer *::after { box-sizing: border-box; }
.explorer a { color: var(--accent); text-decoration: none; }
.explorer a:hover { text-decoration: underline; }

/* the head of the page */
.explorer .crumbs { font-size: 0.85rem; color: var(--faint); margin-bottom: 6px; }
.explorer .crumbs a { color: var(--faint); }
.explorer h1 { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-weight: 500; font-size: 2.3rem; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; }
.explorer .sub { color: var(--muted); margin: 0 0 14px; max-width: 760px; font-size: 1rem; }
.explorer .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.explorer .facts li { font-size: 0.8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.explorer h2 { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-size: 1.3rem; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.01em; }
.explorer .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.explorer .muted { color: var(--muted); }
.explorer .small { font-size: 0.85rem; }
.explorer code, .explorer pre, .explorer .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
.explorer p { margin: 0 0 8px; }

/* the games */
.explorer .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.explorer .tab { border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 7px 14px 8px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 0.9rem; transition: background 0.15s, border-color 0.15s, transform 0.15s; display: inline-flex; gap: 7px; align-items: baseline; }
.explorer .tab .ch { font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.explorer .tab:hover { border-color: var(--accent); transform: translateY(-1px); }
.explorer .tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.explorer .tab[aria-selected="true"] .ch { color: var(--accent-ink); opacity: 0.75; }

.explorer .eq { font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: 1rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0; overflow-x: auto; white-space: nowrap; }
.explorer .eq div { padding: 1px 0; }
@media (max-width: 600px) { .explorer .eq { white-space: normal; } .explorer h1 { font-size: 1.6rem; } .explorer { padding-top: 4.5rem; } }
.explorer .controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; margin-top: 14px; }
.explorer .ctl label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; color: var(--muted); }
.explorer .ctl label .val { color: var(--text); font-family: ui-monospace, Menlo, monospace; }
.explorer .ctl input[type=range] { width: 100%; accent-color: var(--accent); margin: 6px 0 0; }
.explorer .ctl select, .explorer .ctl input[type=number] { width: 100%; font: inherit; font-size: 0.9rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); margin-top: 4px; }
/* the solver options: one strip under the sliders */
.explorer .ctl.opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  border-top: 1px dashed var(--border); padding-top: 12px; font-size: 0.88rem; color: var(--muted); }
.explorer .ctl.opts label.pick { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; }
.explorer .ctl.opts label.pick select { width: auto; margin-top: 0; }
.explorer .ctl.opts label.check { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-start; cursor: pointer; }
.explorer .ctl.opts input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.explorer .ctl.opts .hint { margin: 0; }
.explorer .hint { font-size: 0.8rem; color: var(--faint); margin-top: 3px; }
.explorer textarea#yaml { width: 100%; min-height: 320px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; resize: vertical; tab-size: 2; }
.explorer .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
/* the model in YAML or Python (the results' model panel and "Your model") */
.explorer details.modelcode { margin-top: 12px; }
.explorer details.modelcode > .codetabs { margin: 10px 0 8px; }
.explorer .codetabs { gap: 6px; margin-bottom: 8px; }
.explorer .codetabs .tab { padding: 3px 12px 4px; font-size: 0.82rem; }
.explorer .pane { position: relative; }
.explorer .pane > pre.describe { overflow-x: auto; margin: 0; }
.explorer .pane .copycode { position: absolute; top: 8px; right: 8px; z-index: 1; }
.explorer .pane .copycode.done::after { content: " \2713"; }
.explorer .pane.nopython { min-height: 320px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border);
  border-radius: 8px; background: var(--panel-2); color: var(--muted); font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.explorer .pane.nopython[hidden] { display: none; }
.explorer .row select { font: inherit; font-size: 0.9rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.explorer button.primary, .explorer button.secondary { font: inherit; font-size: 0.88rem; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: filter 0.15s, background 0.15s; }
.explorer button.primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.explorer button.primary:hover:not(:disabled) { filter: brightness(1.08); }
.explorer button.secondary { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.explorer button.secondary:hover:not(:disabled) { border-color: var(--accent); }
.explorer button:disabled { opacity: 0.45; cursor: default; }
.explorer .error { color: var(--bad); white-space: pre-wrap; }

/* the status bar stays under the site header while the results scroll */
.explorer #statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 4rem; z-index: 5;
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.explorer .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.explorer .rally { width: 40px; height: 14px; flex: none; }
.explorer .rally .bat { stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.explorer .rally .ball { fill: var(--accent); }
.explorer .chip.idle { background: var(--panel-2); color: var(--muted); }
.explorer .chip.busy { background: var(--accent-soft); color: var(--accent); }
.explorer .chip.busy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: explorer-pulse 1s ease-in-out infinite; }
@keyframes explorer-pulse { 50% { opacity: 0.25; } }
.explorer .chip.ok { background: var(--ok-soft); color: var(--ok); }
.explorer .chip.warn { background: var(--warn-soft); color: var(--warn); }
.explorer .chip.bad { background: var(--bad-soft); color: var(--bad); }
.explorer #statusfix { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.explorer #statusfix:empty { display: none; }
.explorer #statusfix button.fix { border-color: var(--warn); }
.explorer #statustext { color: var(--muted); font-size: 0.88rem; flex: 1 1 260px; }
.explorer #statusbar .buttons { display: flex; gap: 8px; margin-left: auto; }

.explorer #results { transition: opacity 0.2s; }
.explorer #results.stale { opacity: 0.55; }
.explorer #results .panel { animation: explorer-in 0.25s ease-out; }
@keyframes explorer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.explorer .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.explorer .card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.explorer .card .k { font-size: 0.8rem; color: var(--muted); }
.explorer .card .v { font-size: 1.35rem; font-family: ui-monospace, Menlo, monospace; }
.explorer .card .d { font-size: 0.78rem; color: var(--faint); }
.explorer .delta { font-size: 0.8rem; font-family: inherit; margin-left: 4px; }
.explorer .delta.up { color: var(--bad); } .explorer .delta.down { color: var(--ok); }
.explorer .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.explorer .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .explorer .grid3, .explorer .grid2 { grid-template-columns: 1fr; } }
.explorer .plot { width: 100%; height: 300px; }
.explorer .plot.tall { height: 360px; }
.explorer .caption { font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; max-width: 820px; }
.explorer table.diag { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.explorer table.diag th, .explorer table.diag td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.explorer table.diag th { color: var(--muted); font-weight: 600; }
.explorer table.diag td.mono { white-space: nowrap; }
.explorer .tablewrap { overflow-x: auto;
  background: linear-gradient(to right, var(--panel) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) right / 12px 100% no-repeat scroll; }
.explorer details summary { cursor: pointer; color: var(--muted); }
.explorer details.howto { margin: 0 0 18px; max-width: 800px; }
.explorer details.howto p { font-size: 0.92rem; color: var(--muted); margin: 8px 0 0; }
.explorer .notes { color: var(--muted); font-size: 0.9rem; margin-top: 28px; max-width: 820px; }
.explorer .notes p { margin: 0 0 8px; }
.explorer .versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .explorer .versus { grid-template-columns: 1fr; } }
.explorer .versus .side h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.explorer .swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.explorer .loading-note { color: var(--faint); font-size: 0.85rem; }

/* on a phone the games scroll sideways in one row instead of stacking seven deep */
@media (max-width: 600px) {
  .explorer .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px 4px;
    scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
  .explorer .tabs::-webkit-scrollbar { display: none; }
  .explorer .tab { flex: 0 0 auto; scroll-snap-align: start; }
  .explorer .facts li { font-size: 0.74rem; padding: 2px 8px; }
  .explorer .panel { padding: 14px; }
  .explorer #statusbar { top: 3.5rem; }
}

/* keyboard focus: a visible ring on everything you can tab to */
.explorer :is(button, select, input, textarea, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.explorer .tab:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .explorer *, .explorer *::before { animation: none !important; transition: none !important; }
}
.explorer .plot.stale-plot { opacity: 0.5; transition: opacity 0.2s; }
.explorer #sweeppanel .row select { max-width: 100%; }
.explorer #statusbar .buttons { flex-wrap: wrap; justify-content: flex-end; }
.explorer #statusbar .buttons button { white-space: nowrap; }
@media (max-width: 600px) { .explorer #statusbar .buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; } }
/* on a phone the status bar is too tall to keep on screen: it scrolls with the page */
@media (max-width: 600px) { .explorer #statusbar { position: static; } }
/* the idea block: the loop figure beside five paragraphs */
.explorer .howto.idea .ideagrid { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; margin-top: 10px; }
@media (max-width: 760px) { .explorer .howto.idea .ideagrid { grid-template-columns: 1fr; } }
.explorer .howto.idea figure { margin: 0; color: var(--text); }
.explorer .howto.idea .loopfig { width: 100%; height: auto; display: block; }
.explorer .howto.idea figcaption { font-size: 0.78rem; color: var(--faint); margin-top: 4px; }
.explorer .howto.idea p { margin: 0 0 10px; }

/* equations typeset by KaTeX (explorer.js typesetEquations); the HTML inside is the fallback */
.explorer .eq .tex.typeset { padding: 3px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.explorer .eq .katex { font-size: 1.08em; }

/* the pip line among the facts: press it to copy the command */
.explorer .facts li.pip { display: inline-flex; align-items: center; gap: 6px; }
.explorer .facts li.plain { border: 0; padding-left: 2px; align-self: center; }   /* the PyPI link beside the command, outside its box */
.explorer .facts .copy { font: inherit; background: none; border: 0; padding: 0; cursor: copy; color: inherit; }
.explorer .facts .copy code { font-size: 0.95em; }
.explorer .facts .copy.done code::after { content: "  copied"; color: var(--accent); font-family: inherit; }

/* the "Cite it" block under the notes */
.explorer .cite { margin: 1.4rem 0 0; font-size: 0.88rem; color: var(--muted); }
.explorer .cite summary { cursor: pointer; }
.explorer .cite pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.78rem; margin-top: 0.7rem; color: var(--text); white-space: pre; }
.explorer .settle { width: 96px; height: 24px; flex: none; overflow: visible; }
.explorer .settle .tol { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; vector-effect: non-scaling-stroke; }
.explorer .settle polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 520px) { .explorer .settle { display: none; } }

/* the key to the sample paths: the three draws told apart by weight and opacity, not colour (explorer.js renderPaths) */
.explorer .legend.pathkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--muted); margin: 6px 0 4px; }
.explorer .legend.pathkey i { display: inline-block; width: 18px; height: 2px; background: var(--text); vertical-align: middle; margin-right: 6px; }
.explorer .legend.pathkey i.band { height: 9px; background: var(--grid); border-radius: 2px; }
.explorer .legend.pathkey i.dots { height: 0; background: none; border-top: 1.5px dotted var(--faint); }

/* on a phone: a typeset equation keeps to one line and scrolls sideways rather than breaking mid-expression, and each
   row of the Diagnostics table stacks, the check and its status on one line, the value and its meaning under them */
@media (max-width: 600px) {
  .explorer .eq .tex.typeset { white-space: nowrap; }
  .explorer table.diag.checks thead { display: none; }
  .explorer table.diag.checks tr { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .explorer table.diag.checks td { border: 0; padding: 2px 4px; }
  .explorer table.diag.checks td:nth-child(3), .explorer table.diag.checks td:nth-child(4) { grid-column: 1 / -1; }
  .explorer table.diag.checks td.mono { white-space: normal; }
}
/* "Your model": the example list is as wide as its longest name; on a phone it shrinks to the row instead */
.explorer #editor .row select { max-width: 100%; min-width: 0; }