/* SPDX-License-Identifier: GPL-3.0-or-later
   Copyright 2026 the ScarletNX contributors */
/* Tracer's site in SWS (wimsy-dist's docs/SWS.md). The block between the theme lines is the Sepia theme's roles,
   made by wimsy-dist's themes/theme.py; every colour below is one of them (scripts/check-theme.sh) */
/* theme:begin */
:root{color-scheme:light dark;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--bg:#dad6be;--faint:#b4b09c;--ink:#45413a;--surface:#d0ccb6;--raised:#c7c3ad;--soft:#535047;--accent:#45413a;--ok:#3a5832;--warn:#644d1f;--bad:#853930;--rule:#6f6b5e;--on-accent:#dad6be;--on-ok:#dad6be;--ok-fill:#43653a;--on-warn:#45413a;--warn-fill:#d9b24a;--on-bad:#dad6be;--bad-fill:#984237}
@media (prefers-color-scheme:dark){:root{--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--bg:#141416;--faint:#3e3e40;--ink:#e6e4dc;--surface:#1e1e20;--raised:#29292b;--soft:#91908a;--accent:#e6e4dc;--ok:#689d5a;--warn:#d9b24a;--bad:#dc6f66;--rule:#8e8c86;--on-accent:#141416;--on-ok:#141416;--ok-fill:#5b8a4f;--on-warn:#141416;--warn-fill:#d9b24a;--on-bad:#141416;--bad-fill:#d55348}}
.sws a[href$="/sws/sepia"],.sws a[href$="/sws/auto"]{background:var(--accent);color:var(--on-accent)}
/* theme:end */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font)}
a{color:var(--accent);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
code,.mono,.id,pre{font-family:var(--mono);font-size:.86em}
code{overflow-wrap:anywhere}
h1,h2,h3{line-height:1.2;overflow-wrap:anywhere}
.sws,.top,main,footer{padding-inline:max(16px,3vw)}
/* the quiet labels: the theme's uppercase, spaced out */
.sws,.brand,.top nav a,th,dt,.count,h3,.badge{text-transform:uppercase;letter-spacing:.08em}

/* the theme picker: plain links the site's nginx answers with a cookie (docs/THEMES.md), the one in effect filled */
.sws{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding-block:4px;font-size:12px;border-bottom:1px solid var(--faint)}
.sws span{color:var(--soft);font-weight:600}
.sws a{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 8px;color:var(--ink);text-decoration:none}
.sws img{width:16px;height:16px}
.sws a:hover{text-decoration:underline}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:8px;
  background:var(--raised);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:700;text-decoration:none}
.top nav{display:flex;gap:4px}
.top nav a{display:flex;align-items:center;min-height:40px;padding:0 12px;color:var(--ink);font-size:.8em;text-decoration:none}
.top nav a:hover{background:var(--accent);color:var(--on-accent)}
main{padding-block:32px 48px}
footer{padding-block:24px 40px;color:var(--soft);font-size:.85em;border-top:1px solid var(--rule)}

.hero{margin-bottom:32px}
.hero h1{margin:4px 0 8px;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600}
.hero p{margin:4px 0;color:var(--soft);max-width:70ch}
.hero b{color:var(--ink)}
.crumbs{font-size:.9em}
.id,.meta,small,.empty,figcaption{color:var(--soft)}
.meta{font-size:.85em}
blockquote{margin:12px 0 0;padding:12px 16px;border-left:3px solid var(--rule);background:var(--surface);overflow-wrap:anywhere}
blockquote.later{border-left-color:var(--accent)}

.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.filters input,.filters select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--rule);min-height:40px;
  padding:0 12px;min-width:0;max-width:100%}
.filters input{flex:1 1 260px}
.count{color:var(--soft);font-size:.75em;margin-left:auto}

.games{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.games a{display:grid;gap:4px;align-content:start;height:100%;padding:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--faint);text-decoration:none}
.games a:hover{border-color:var(--ink)}
.games .name{font-weight:600;overflow-wrap:anywhere}
.games .id{font-size:.8em}

/* a state says its word and its mark; the colour is what reads from afar */
.badges{display:inline-flex;flex-wrap:wrap;gap:4px}
.badge{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid}
.badge.ok{background:var(--ok-fill);color:var(--on-ok);border-color:var(--ok-fill)}
.badge.warn{background:var(--warn-fill);color:var(--on-warn);border-color:var(--warn-fill)}
.badge.bad{background:var(--bad-fill);color:var(--on-bad);border-color:var(--bad-fill)}
.badge.ok::before{content:"\2713\a0"}
.badge.warn::before{content:"!\a0"}
.badge.bad::before{content:"\2715\a0"}
.badge.missed{color:var(--warn);cursor:help}

.scroll{overflow-x:auto;border:1px solid var(--faint);background:var(--surface)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--faint)}
th{position:sticky;top:0;font-size:.75em;color:var(--soft);background:var(--raised);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--raised)}
.reports td.mono{max-width:380px;overflow-wrap:anywhere}
.reports td:first-child,.reports td:nth-child(2){white-space:nowrap}

.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;margin:0 0 32px;padding:16px;background:var(--surface);
  border:1px solid var(--faint)}
dt{color:var(--soft);font-size:.8em}
dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:2px}dd{margin-bottom:8px}}

h2{font-size:1.25rem;margin:32px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
h2 small{font-weight:400;font-size:.75em}
h3{font-size:.8rem;margin:24px 0 8px;color:var(--soft)}
.gallery,.videos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.videos{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.gallery a,.videos video{display:block;border:1px solid var(--faint)}
.gallery img,.videos video{display:block;width:100%;height:auto}
.videos figure{margin:0}
figcaption{margin-top:8px;font-size:.85em;overflow-wrap:anywhere}

.actions{display:flex;flex-wrap:wrap;gap:8px}
.button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent);font-weight:600;font-size:.9em;text-decoration:none}
.button:hover{text-decoration:underline}
.button.quiet{color:var(--ink);background:none;border-color:var(--rule)}
.failure{margin:16px 0;padding:16px;border:1px solid var(--bad);border-left-width:4px;background:var(--surface)}
.failure p{margin:0 0 8px;overflow-wrap:anywhere}
.fatal{font-weight:600;color:var(--bad)}
.frames{margin:0;padding-left:28px}
.frames .address{color:var(--soft)}
pre{margin:0;padding:12px 16px;overflow-x:auto;background:var(--raised);border:1px solid var(--faint);line-height:1.45}
ul.mono{padding-left:20px}
.empty{padding:24px 0}
[hidden]{display:none!important}