/* Semantic theme layer. Layout and interactions remain in site.css. Every
   foreground/background pairing below is checked by internal/theme. */
html, body { background:var(--t-card); color:var(--t-text); color-scheme:light; }
a { color:var(--t-primary-text); }
.muted { color:var(--t-muted); }
.sec.light { background:var(--t-surface); }
.sec.sage { background:var(--t-surface-tinted); }
.sec.cream { background:var(--t-accent-soft); }
.card,.frame,.badge-card { background:var(--t-card); border-color:var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow); color:var(--t-text); }
.notice,.finished,.points-dialog .example { background:var(--t-accent-soft); border-color:var(--t-accent); border-radius:var(--t-control-radius); color:var(--t-text); }
.empty { border-color:var(--t-border-dashed); background:var(--t-surface-subtle); color:var(--t-subtle); border-radius:var(--t-radius); }
.text-link,.calculation .sum,.finished .calculation { border-color:var(--t-accent); }
.calculation .note { color:var(--t-accent-dark); }
.btn { background:var(--t-accent); border-color:var(--t-accent); color:var(--t-on-accent); border-radius:var(--t-control-radius); }
.btn:hover { filter:brightness(.95); }
.btn.ghost { color:var(--t-on-primary); border-color:var(--t-accent-on-primary); }
.btn.outlined { color:var(--t-text); border-color:var(--t-text); }
.btn.light { background:var(--t-card); border-color:var(--t-border-strong); color:var(--t-text); }
.btn.light:hover { border-color:var(--t-primary-text); }
.field .help { color:var(--t-muted); }
input[type=email],input[type=number],input[type=text],select { background:var(--t-card); color:var(--t-text); border-color:var(--t-border-strong); border-radius:var(--t-control-radius); }
input::placeholder,textarea::placeholder { color:var(--t-placeholder); }
input:focus,select:focus { outline-color:var(--t-primary-text); border-color:var(--t-primary-text); }
.appbar { background:var(--t-primary); color:var(--t-on-primary); }
.appbar .logo { display:flex; align-items:center; gap:18px; color:var(--t-on-primary); }
.appbar .wordmark { color:var(--t-on-primary-muted); font-weight:700; letter-spacing:.2em; font-size:12px; text-transform:uppercase; }
/* The logo is inlined into the app bar, so its currentColor artwork takes the
   validated on-primary foreground and the wordmark keeps the page webfont. */
.theme-logo { display:block; height:var(--t-logo-height); color:var(--t-on-primary); }
.theme-logo svg { display:block; height:100%; width:auto; }
.theme-grid { color:var(--t-on-primary); width:22px; height:22px; flex-shrink:0; }
.appbar nav a,.appbar .menu-list a,.appbar .menu-list button { color:var(--t-on-primary-muted); }
.appbar nav a:hover,.appbar nav a.active { color:var(--t-on-primary-strong); }
.appbar nav a.active { box-shadow:inset 0 -2px 0 var(--t-accent-on-primary); }
.appbar .name,.avatar { background:var(--t-accent); color:var(--t-on-accent); }
.appbar .menu summary:focus-visible { outline-color:var(--t-accent-on-primary); }
.appbar .menu summary.active,.appbar .menu[open] summary { box-shadow:0 0 0 2px var(--t-primary),0 0 0 4px var(--t-accent-on-primary); }
.appbar .menu-list { background:var(--t-primary); border-color:rgb(var(--t-on-primary-rgb) / .18); border-radius:var(--t-control-radius); }
@media(max-width:640px) { .appbar .menu-list { border-color:var(--t-accent-on-primary); } }
.appbar .menu-list a:focus-visible,.appbar .menu-list a:hover,.appbar .menu-list button:focus-visible,.appbar .menu-list button:hover { background:var(--t-primary-dark); color:var(--t-on-primary-strong); }
.appbar .menu-list a.active { color:var(--t-on-primary-strong); box-shadow:inset 3px 0 0 var(--t-accent-on-primary); }
.auth-background { background:var(--t-primary); min-height:74vh; display:flex; align-items:center; width:100%; }
.auth-card { max-width:470px; margin:0 auto; background:var(--t-card); padding:44px 40px; border-radius:var(--t-radius); box-shadow:var(--t-shadow); }
.theme-kicker { font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--t-kicker); font-weight:700; }
/* Board colour theme (issue 18). The board and the number picker paint only
   --b-* tokens. They default to the site palette here, so a company without a
   chosen board theme is unchanged; a chosen theme sets them on the same
   selectors in a later <style> block. The accessible mode at the bottom of
   this file paints the board from its own fixed palette on more specific
   selectors, so it wins over whichever theme is chosen. */
.sud,.keypad,.board-preview { --b-cell:var(--t-card); --b-given:var(--t-surface-tinted); --b-text:var(--t-primary-text); --b-error:var(--t-error); --b-error-bg:var(--t-error-bg); --b-related:var(--t-accent-related); --b-same:var(--t-accent-same); --b-selected:var(--t-selected); --b-muted:var(--t-subtle); --b-muted-bg:var(--t-surface); --b-erase:var(--t-subtle); --b-border:var(--t-border-strong); }
.sud { border-color:var(--b-text); background:var(--b-text); }
.sud .c { background:var(--b-cell); color:var(--b-text); }
.sud .c.given { background:var(--b-given); color:var(--b-text); }
.sud .c.related:not(.error) { background:var(--b-related); }
.sud .c.same:not(.error) { background:var(--b-same); }
.sud .c.selected:not(.error) { background:var(--b-selected); }
.sud .c.selected { outline-color:var(--b-text); }
.sud .c.error { color:var(--b-error); background:var(--b-error-bg); }
.sud .c:nth-child(3n),.sud .c.row3 { border-color:var(--b-text); }
.sud .c.wave:after { background:var(--b-selected); }
.keypad button { background:var(--b-cell); color:var(--b-text); border-color:var(--b-border); border-radius:var(--t-control-radius); }
.keypad button:hover { border-color:var(--b-text); background:var(--b-muted-bg); }
.keypad button.erase { color:var(--b-erase); }
.keypad button.full,.keypad button:disabled,.keypad button.full:hover,.keypad button:disabled:hover { color:var(--b-muted); background:var(--b-muted-bg); border-color:var(--b-border); }
.game-meta .large,.stat-large { color:var(--t-primary-text); }
.game-meta .lbl { color:var(--t-subtle); }
.celebration { color:var(--t-on-primary); background:rgb(var(--t-primary-dark-rgb) / .82); }
.celebration .lbl { color:var(--t-accent-on-primary); }
.celebration .points,.celebration .hint { color:var(--t-on-primary-muted); }
.celebration .points .value { color:var(--t-on-primary); }
.celebration:focus-visible { outline-color:var(--t-accent-on-primary); }
table.tab { background:var(--t-card); border-color:var(--t-border); border-radius:var(--t-radius); }
table.tab th { color:var(--t-subtle); }
table.tab td,table.tab th { border-color:var(--t-border); }
table.tab tr.me { background:var(--t-accent-soft); }
.rank { color:var(--t-muted); }
.rank.p1 { color:var(--t-rank-1); }
.rank.p2 { color:var(--t-rank-2); }
.rank.p3 { color:var(--t-rank-3); }
.pause-button,.clear-button,.info-button { background:var(--t-card); border-color:var(--t-border-strong); color:var(--t-text); border-radius:var(--t-control-radius); }
.pills a { background:var(--t-card); border-color:var(--t-border-strong); color:var(--t-text); border-radius:calc(var(--t-control-radius) * 4); }
.pause-button:hover,.clear-button:hover,.info-button:hover,.pills a:hover { border-color:var(--t-primary-text); }
.pause-overlay { background:var(--t-accent-soft); border-color:var(--t-accent); color:var(--t-text); }
.pause-overlay .lbl { color:var(--t-text); }
.pills a.current { background:var(--t-primary-text); border-color:var(--t-primary-text); color:var(--t-card); }
.pills a .count,.pills a.current .count { opacity:1; }
.points-button { color:var(--t-primary-text); text-decoration-color:var(--t-accent); }
.points-button:hover { text-decoration-color:var(--t-primary-text); }
.points-button:focus-visible { outline-color:var(--t-primary-text); }
dialog.points-dialog::backdrop { background:rgb(var(--t-primary-rgb) / .72); }
.points-dialog .points-content { background:var(--t-card); color:var(--t-text); border-color:var(--t-accent); border-radius:var(--t-radius); }
.points-dialog h3,.points-dialog li b,.badge-name { color:var(--t-primary-text); }
.badge-card:hover { border-color:var(--t-border-dashed); }
.badge-card:focus-visible { outline-color:var(--t-primary-text); border-color:var(--t-primary-text); }
.badge-count,.badge-dialog #badge-requirement { color:var(--t-accent-dark); }
.badge-requirement,.badge-card.locked .badge-name { color:var(--t-subtle); }
.badge-card.awarded .badge-icon,.badge-dialog .badge-large.awarded .badge-icon { color:var(--t-accent); }
.badge-card.awarded .badge-icon text,.badge-dialog .badge-large.awarded .badge-icon text { fill:var(--t-on-accent); }
.badge-card.locked { background:var(--t-surface-subtle); }
.badge-card.locked .badge-icon,.badge-dialog .badge-large.locked .badge-icon { color:var(--t-badge-locked); }
.badge-card.locked .badge-icon text,.badge-dialog .badge-large.locked .badge-icon text { fill:var(--t-badge-locked-text); }
.tag { background:var(--t-accent-soft); color:var(--t-primary-text); border-color:var(--t-accent); }
@media(max-width:480px) { .appbar .theme-grid + .wordmark { display:block; font-size:11px; } .appbar .logo { gap:10px; } }
@media(prefers-reduced-motion:reduce) { .sud .c { transition:none; } }
/* Admin: board colour theme tiles, each a small cut-out of the board and picker
   in that theme's --b-* tokens (set per [data-board-theme] in the page). */
.board-themes { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.board-themes form { margin:0; }
.board-theme { display:block; width:100%; min-height:44px; padding:10px; background:var(--t-card); color:var(--t-text); border:1px solid var(--t-border-strong); border-radius:var(--t-control-radius); cursor:pointer; font:inherit; text-align:left; }
.board-theme:hover { border-color:var(--t-primary-text); }
.board-theme:focus-visible { outline:3px solid var(--t-primary-text); outline-offset:2px; }
.board-theme[aria-pressed=true] { border-color:var(--t-primary-text); box-shadow:inset 0 0 0 2px var(--t-primary-text); cursor:default; }
.board-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:2px solid var(--b-text); background:var(--b-text); font-size:15px; }
.board-preview span { display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:var(--b-cell); color:var(--b-text); font-weight:600; }
.board-preview .given { background:var(--b-given); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.board-preview .related { background:var(--b-related); }
.board-preview .same { background:var(--b-same); }
.board-preview .selected { background:var(--b-selected); }
.board-preview .error { background:var(--b-error-bg); color:var(--b-error); }
.board-preview .key { background:var(--b-cell); font-weight:700; }
.board-preview .key.full { background:var(--b-muted-bg); color:var(--b-muted); }
.board-theme .name-row { display:block; margin-top:8px; font-weight:700; font-size:14px; }
.board-theme .in-use { display:block; font-size:12px; font-weight:700; color:var(--t-muted); }
/* Accessible board mode (issue #19): the opt-in, per-user board display. The
   --ta-* tokens are the fixed, pre-tested palette internal/theme/accessible.go
   owns and contrast-checks; these rules only bind them to the board, and each
   one adds a signal that is not color. They sit last and carry one class more
   than the theme rules above, so they win over every configured theme. */
/* The board theme an admin chose sets the --b-* tokens on .sud,.keypad from
   a later <style> block, so rebinding them here is what makes accessible
   override the chosen theme on every surface that reads a token rather than a
   rule below: the live and hovered picker keys and the "Slett" label. Every
   pairing this creates is one the accessible palette already checks: picker
   text is text on cell, hovered text is text on given. .board-preview is left
   out on purpose, so the admin's tiles keep previewing each theme's own
   colours. */
body.accessible .sud,body.accessible .keypad { --b-cell:var(--ta-cell); --b-given:var(--ta-given); --b-text:var(--ta-text); --b-error:var(--ta-error); --b-error-bg:var(--ta-error-bg); --b-related:var(--ta-related); --b-same:var(--ta-same); --b-selected:var(--ta-selected); --b-muted:var(--ta-full); --b-muted-bg:var(--ta-given); --b-erase:var(--ta-text); --b-border:var(--ta-full-border); }
body.accessible .sud { background:var(--ta-text); border-color:var(--ta-text); }
body.accessible .sud .c { background:var(--ta-cell); color:var(--ta-text); }
body.accessible .sud .c.given { background:var(--ta-given); color:var(--ta-text); font-weight:800; text-decoration-thickness:4px; text-underline-offset:3px; }
body.accessible .sud .c.related:not(.error) { background:var(--ta-related); }
body.accessible .sud .c.same:not(.error) { background:var(--ta-same); }
body.accessible .sud .c.selected:not(.error) { background:var(--ta-selected); }
body.accessible .sud .c.selected { outline-color:var(--ta-text)!important; }
body.accessible .sud .c:nth-child(3n),body.accessible .sud .c.row3 { border-color:var(--ta-text); }
body.accessible .sud .c.error { color:var(--ta-error); background:var(--ta-error-bg); box-shadow:inset 0 0 0 3px var(--ta-error); }
body.accessible .sud .c.error:after { content:"!"; position:absolute; top:2px; right:4px; font-size:12px; font-weight:800; line-height:1; color:var(--ta-error-on); background:var(--ta-error); width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
body.accessible .sud .c.wave:after { background:var(--ta-selected); }
body.accessible .keypad button.full,body.accessible .keypad button:disabled,body.accessible .keypad button.full:hover,body.accessible .keypad button:disabled:hover { color:var(--ta-full); background:var(--ta-full-bg); border-color:var(--ta-full-border); opacity:.85; text-decoration:line-through; }