/* Route Lab: house UI (vault skill house-ui). Tokens first, then components.
   Janice and Wayne are the app's accent pair; their names are always written beside the colour. */
@font-face { font-family: "OpenDyslexic"; src: url("vendor/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("vendor/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { color-scheme: light;
  --paper: oklch(0.975 0.008 85); --surface: oklch(0.99 0.004 85); --surface-strong: #fff;
  --rule: oklch(0.86 0.01 85); --field: #fff;
  --ink: oklch(0.22 0.01 85); --ink-2: oklch(0.40 0.01 85); --ink-3: oklch(0.48 0.01 85);
  --janice: oklch(0.44 0.14 350); --wayne: oklch(0.43 0.08 175);
  --primary: oklch(0.30 0.02 60); --primary-hover: oklch(0.38 0.02 60); --on-primary: #fff;
  --link: oklch(0.46 0.16 258); --link-hover: oklch(0.38 0.16 258);
  --positive: oklch(0.45 0.11 145); --caution: oklch(0.47 0.10 65); --negative: oklch(0.48 0.16 27);
  --focus: oklch(0.46 0.16 258);
  --font: Verdana, Geneva, "DejaVu Sans", sans-serif; --zoom: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
  --paper: oklch(0.17 0.005 85); --surface: oklch(0.205 0.006 85); --surface-strong: oklch(0.235 0.006 85);
  --rule: oklch(0.36 0.008 85); --field: oklch(0.235 0.006 85);
  --ink: oklch(0.94 0.008 85); --ink-2: oklch(0.82 0.008 85); --ink-3: oklch(0.72 0.008 85);
  --janice: oklch(0.80 0.10 350); --wayne: oklch(0.80 0.08 175);
  --primary: oklch(0.88 0.02 60); --primary-hover: oklch(0.94 0.02 60); --on-primary: oklch(0.17 0.005 85);
  --link: oklch(0.78 0.11 258); --link-hover: oklch(0.86 0.09 258);
  --positive: oklch(0.80 0.11 145); --caution: oklch(0.82 0.10 75); --negative: oklch(0.76 0.12 27);
  --focus: oklch(0.78 0.11 258); } }
:root[data-theme="dark"] { color-scheme: dark;
  --paper: oklch(0.17 0.005 85); --surface: oklch(0.205 0.006 85); --surface-strong: oklch(0.235 0.006 85);
  --rule: oklch(0.36 0.008 85); --field: oklch(0.235 0.006 85);
  --ink: oklch(0.94 0.008 85); --ink-2: oklch(0.82 0.008 85); --ink-3: oklch(0.72 0.008 85);
  --janice: oklch(0.80 0.10 350); --wayne: oklch(0.80 0.08 175);
  --primary: oklch(0.88 0.02 60); --primary-hover: oklch(0.94 0.02 60); --on-primary: oklch(0.17 0.005 85);
  --link: oklch(0.78 0.11 258); --link-hover: oklch(0.86 0.09 258);
  --positive: oklch(0.80 0.11 145); --caution: oklch(0.82 0.10 75); --negative: oklch(0.76 0.12 27);
  --focus: oklch(0.78 0.11 258); }
:root[data-color="plain"] { --janice: var(--ink); --wayne: var(--ink); --positive: var(--ink); --caution: var(--ink); --negative: var(--ink); }
:root[data-font="courier"] { --font: Courier, "Courier New", "Nimbus Mono PS", monospace; font-size-adjust: ex-height 0.55; }
:root[data-font="opendyslexic"] { --font: "OpenDyslexic", Verdana, sans-serif; font-size-adjust: ex-height 0.515; }

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.75; }
.shell { zoom: var(--zoom); max-width: 980px; margin: 0 auto; padding: 0 16px 48px; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, select { font: inherit; color: inherit; }
h1 { font-size: 1.45rem; font-weight: 700; line-height: 1.3; margin: 0.5rem 0 0.25rem; }
h2 { font-size: 1.12rem; font-weight: 700; line-height: 1.35; margin: 0; }
p { max-width: 64ch; }
code { font-family: Courier, "Courier New", monospace; font-size: 0.95em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top row: quiet, no bar chrome */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 6px; }
.brand { font-weight: 700; margin-right: auto; }
.nav { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: none; font-weight: 700; }
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--surface-strong); cursor: pointer; transition: transform .18s cubic-bezier(.34,1.4,.64,1); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Settings panel: floats over the page, top right (BCJK, 13 Oct: "Opening settings should overlay") */
.panel { position: fixed; z-index: 45; top: 64px; right: 16px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto;
  border: 1px solid var(--rule); background: var(--surface-strong); border-radius: 14px; padding: 14px 16px; margin: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.22); animation: panel-in .2s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.panel[hidden] { display: none; }
.panel fieldset { border: 0; margin: 0 0 10px; padding: 0; }
.panel legend { font-weight: 700; margin-bottom: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.seg input { accent-color: var(--primary); }

/* Who-colour, always with the name */
.who-J { color: var(--janice); font-weight: 700; }
.who-W { color: var(--wayne); font-weight: 700; }
.who-T { color: var(--ink); font-weight: 700; }
.ok { color: var(--positive); } .warn { color: var(--caution); } .bad { color: var(--negative); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .btn:hover, .btn:active, .chip:hover { transform: none !important; } }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="reduce"] .btn:hover, :root[data-motion="reduce"] .btn:active, :root[data-motion="reduce"] .chip:hover { transform: none !important; }
.f-verdana { font-family: Verdana, sans-serif; } .f-courier { font-family: Courier, monospace; } .f-opendyslexic { font-family: "OpenDyslexic", Verdana, sans-serif; }
.panel-note { margin: 4px 0 0; }