/* Themes, fonts and frame language in a handheld-menu pixel style: window
   frames, title strips, a pixel cursor and pressed buttons. Role colors are
   added for the paper's figures. */

/* Fonts: Pixel Operator Mono is CC0; IBM Plex Mono is SIL OFL 1.1, whose notice and
   license ship with the files (assets/licenses/ and the fonts' own metadata). */
@font-face{font-family:'Pixel Operator Mono';src:url('../fonts/PixelOperatorMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pixel Operator Mono';src:url('../fonts/PixelOperatorMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* Neither bundled face has Greek; Menlo/Consolas supply τ, κ, ρ, α before the system font. */
  --font:'IBM Plex Mono',Menlo,Consolas,'DejaVu Sans Mono',ui-monospace,monospace;
  --pixel:'Pixel Operator Mono',Menlo,Consolas,'DejaVu Sans Mono',ui-monospace,monospace;
  --bg:#f2e9d8;--card:#fff7e8;--ink:#1e2a32;--muted:#59666b;
  --frame:#29434a;--frame-mid:#9cb4ac;--frame-light:#fffdf4;
  --rule:#d6d0be;--fill:#e9efe8;--fill-hover:#dbe6de;
  --accent:#a64a35;--accent-strong:#843526;--accent-soft:#f6d2b8;
  --button-bg:#a64a35;--button-hover:#843526;--button-ink:#fff7e8;
  --title-bg:#bdd3c7;--title-ink:#1e2a32;--strip-bg:#203d43;--strip-ink:#fff7e8;
  --gold:#795a26;--gold-bg:#f3e5aa;--gold-rule:#a88745;
  --sky:url('../img/sky-day.svg');

  /* Figure roles (Figure 2 legend), validated against --card for 3:1 and CVD. */
  --role-consequence:#1d7a71;--role-explanation:#d45a3a;--role-clue:#a86c1e;--role-other:#6a6b66;
  /* The same roles as text, at 4.5:1 or better on every surface. */
  --role-consequence-text:#1d7a71;--role-explanation-text:#a64a35;--role-clue-text:#856629;--role-other-text:#59666b;
  /* Two-series charts: first-named condition or readers vs. second-named or judge. */
  --series-a:#1d7a71;--series-b:#a64a35;--series-tie:#a8b5ab;--seg-ink-a:#fff7e8;--seg-ink-b:#fff7e8;
  /* Sequential heatmap ramp (one hue, light to dark). */
  --heat-0:#f5ebdd;--heat-1:#1d7a71;
  /* Verdict badges in Table 2 and Table 13. */
  --tag-headline-bg:#f6d2b8;--tag-survives-bg:#d5ebe4;--tag-against-bg:#f4d5c9;--tag-length-bg:#d9e5dd;
  --grid:#d2d8cf;--plot:#fffdf4;

  --shell:1120px;--header-h:112px;
  --t-small:.875rem;--t-body:1rem;
}
html[data-theme=dark]{
  color-scheme:dark;
  --bg:#13252b;--card:#1d343a;--ink:#f6eddb;--muted:#b4c3bc;
  --frame:#9bbab0;--frame-mid:#4b6568;--frame-light:#2a464b;
  --rule:#3b595c;--fill:#28444a;--fill-hover:#33545a;
  --accent:#f08a68;--accent-strong:#ffad8a;--accent-soft:#5a3940;
  --button-bg:#f08a68;--button-hover:#ffad8a;--button-ink:#1d343a;
  --title-bg:#34565a;--title-ink:#f6eddb;--strip-bg:#10232a;--strip-ink:#fff7e8;
  --gold:#e7c56b;--gold-bg:#4b4331;--gold-rule:#b89a4b;
  --sky:url('../img/sky-night.svg');
  --role-consequence:#4cc0b1;--role-explanation:#f08a68;--role-clue:#e3b85e;--role-other:#9aa8a1;
  --role-consequence-text:#75d6c7;--role-explanation-text:#f9b39a;--role-clue-text:#f4cf84;--role-other-text:#b4c3bc;
  --series-a:#4cc0b1;--series-b:#f08a68;--series-tie:#5d7776;--seg-ink-a:#13252b;--seg-ink-b:#1d343a;
  --heat-0:#21383d;--heat-1:#68d0c0;
  --tag-headline-bg:#5a3940;--tag-survives-bg:#214d4d;--tag-against-bg:#5b3b3a;--tag-length-bg:#34565a;
  --grid:#3a585a;--plot:#1a2c32;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --bg:#13252b;--card:#1d343a;--ink:#f6eddb;--muted:#b4c3bc;
  --frame:#9bbab0;--frame-mid:#4b6568;--frame-light:#2a464b;
  --rule:#3b595c;--fill:#28444a;--fill-hover:#33545a;
  --accent:#f08a68;--accent-strong:#ffad8a;--accent-soft:#5a3940;
  --button-bg:#f08a68;--button-hover:#ffad8a;--button-ink:#1d343a;
  --title-bg:#34565a;--title-ink:#f6eddb;--strip-bg:#10232a;--strip-ink:#fff7e8;
  --gold:#e7c56b;--gold-bg:#4b4331;--gold-rule:#b89a4b;
  --sky:url('../img/sky-night.svg');
  --role-consequence:#4cc0b1;--role-explanation:#f08a68;--role-clue:#e3b85e;--role-other:#9aa8a1;
  --role-consequence-text:#75d6c7;--role-explanation-text:#f9b39a;--role-clue-text:#f4cf84;--role-other-text:#b4c3bc;
  --series-a:#4cc0b1;--series-b:#f08a68;--series-tie:#5d7776;--seg-ink-a:#13252b;--seg-ink-b:#1d343a;
  --heat-0:#21383d;--heat-1:#68d0c0;
  --tag-headline-bg:#5a3940;--tag-survives-bg:#214d4d;--tag-against-bg:#5b3b3a;--tag-length-bg:#34565a;
  --grid:#3a585a;--plot:#1a2c32;
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background-color:var(--bg);background-image:var(--sky);background-position:center top;background-size:1440px 640px;background-repeat:no-repeat;font-family:var(--font);font-size:var(--t-body);line-height:1.65;overflow-x:hidden}
::selection{background:var(--accent-soft);color:var(--ink)}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--pixel);font-weight:700;line-height:1.1;letter-spacing:0}
p{margin:0 0 12px}
strong{font-weight:500}
em,i{font-style:italic}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-strong)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
sub{font-size:.72em;line-height:0}
code{font-family:var(--font);font-size:.92em;background:var(--fill);padding:0 4px;border:1px solid var(--rule)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;flex:0 0 auto;vertical-align:-4px}
.num{font-variant-numeric:tabular-nums}
.sc{font-variant:small-caps;letter-spacing:.02em;text-transform:lowercase}

/* Window frame: double inset border with a 2px drop. */
.game-window{border:2px solid var(--frame);border-radius:3px;background:var(--card);box-shadow:inset 0 0 0 2px var(--frame-light),inset 0 0 0 3px var(--frame-mid),0 2px 0 var(--frame-mid)}
.window-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 3px 0;background:var(--title-bg);color:var(--title-ink);border-bottom:2px solid var(--frame);font-family:var(--pixel);padding:7px 16px;font-size:26px;line-height:1.1}
.window-title h2{font-size:28px;margin:0}
.window-title .window-index{font-size:20px;font-weight:400;color:var(--title-ink);white-space:nowrap}
.window-body{padding:20px 22px 22px}

/* Pixel ▶ cursor, shown on hover and focus. */
.cursor{width:14px;height:14px;flex:0 0 auto;visibility:hidden}

/* Buttons: 2px drop, pressed state moves down by the drop. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 12px;border:2px solid var(--frame);border-radius:2px;background:var(--fill);color:var(--ink);font-family:var(--pixel);font-size:22px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 2px var(--frame-light),0 2px 0 var(--frame)}
.btn:hover{background:var(--fill-hover);color:var(--ink);text-decoration:none}
.btn:active,.theme-toggle:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--frame-light)}
.btn-primary{background:var(--button-bg);color:var(--button-ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--button-bg),var(--button-ink) 22%),0 2px 0 var(--frame)}
.btn-primary:hover{background:var(--button-hover);color:var(--button-ink)}
.btn[aria-disabled=true]{opacity:.6;cursor:default}
.btn[aria-disabled=true]:active{transform:none}
.btn[aria-pressed=true],.btn[aria-current=true]{background:var(--accent-soft);border-color:var(--accent)}
.btn .icon{width:18px;height:18px}

.tag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--frame-mid);font-family:var(--pixel);font-size:16px;line-height:1.3;white-space:nowrap;color:var(--ink);background:var(--fill)}
.tag-headline{background:var(--tag-headline-bg)}
.tag-survives,.tag-agrees{background:var(--tag-survives-bg)}
.tag-against,.tag-unrelated{background:var(--tag-against-bg)}
.tag-length,.tag-weak{background:var(--tag-length-bg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}