/* Semantic theme layer. Layout and interactions remain in site.css. Every
   foreground/background pairing below is checked by internal/tema. */
html, body { background:var(--t-kort); color:var(--t-tekst); color-scheme:light; }
a { color:var(--t-primar-tekst); }
.muted { color:var(--t-dempet); }
.sec.lys { background:var(--t-flate); }
.sec.salvie { background:var(--t-flate-tonet); }
.sec.krem { background:var(--t-aksent-myk); }
.kort,.ramme,.merkekort { background:var(--t-kort); border-color:var(--t-kant); border-radius:var(--t-radius); box-shadow:var(--t-skygge); color:var(--t-tekst); }
.varsel,.ferdig,.poeng-dialog .eksempel { background:var(--t-aksent-myk); border-color:var(--t-aksent); border-radius:var(--t-radius-kontroll); color:var(--t-tekst); }
.\!ferdig { background:var(--t-aksent-myk)!important; border-color:var(--t-aksent)!important; }
.tomt { border-color:var(--t-kant-stiplet); background:var(--t-flate-svak); color:var(--t-svak); border-radius:var(--t-radius); }
.tekstlenke,.regnestykke .sum,.ferdig .regnestykke { border-color:var(--t-aksent); }
.\!ferdig .regnestykke { border-color:var(--t-aksent)!important; }
.regnestykke .merknad { color:var(--t-aksent-mork); }
.btn { background:var(--t-aksent); border-color:var(--t-aksent); color:var(--t-aksent-pa); border-radius:var(--t-radius-kontroll); }
.btn:hover { filter:brightness(.95); }
.btn.ghost { color:var(--t-primar-pa); border-color:var(--t-aksent-pa-primar); }
.btn.outline { color:var(--t-tekst); border-color:var(--t-tekst); }
.felt .hjelp { color:var(--t-dempet); }
input[type=email],input[type=number],input[type=text],select { background:var(--t-kort); color:var(--t-tekst); border-color:var(--t-kant-sterk); border-radius:var(--t-radius-kontroll); }
input::placeholder,textarea::placeholder { color:var(--t-plassholder); }
input:focus,select:focus { outline-color:var(--t-primar-tekst); border-color:var(--t-primar-tekst); }
.appbar { background:var(--t-primar); color:var(--t-primar-pa); }
.appbar .logo { display:flex; align-items:center; gap:18px; color:var(--t-primar-pa); }
.appbar .ordmerke { color:var(--t-primar-pa-dempet); 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-hoyde); color:var(--t-primar-pa); }
.theme-logo svg { display:block; height:100%; width:auto; }
.theme-grid { color:var(--t-primar-pa); width:22px; height:22px; flex-shrink:0; }
.appbar nav a,.appbar .meny-liste a,.appbar .meny-liste button { color:var(--t-primar-pa-dempet); }
.appbar nav a:hover,.appbar nav a.aktiv { color:var(--t-primar-pa-sterk); }
.appbar nav a.aktiv { box-shadow:inset 0 -2px 0 var(--t-aksent-pa-primar); }
.appbar .navn,.avatar { background:var(--t-aksent); color:var(--t-aksent-pa); }
.appbar .meny summary:focus-visible { outline-color:var(--t-aksent-pa-primar); }
.appbar .meny summary.aktiv,.appbar .meny[open] summary { box-shadow:0 0 0 2px var(--t-primar),0 0 0 4px var(--t-aksent-pa-primar); }
.appbar .meny-liste { background:var(--t-primar); border-color:rgb(var(--t-primar-pa-rgb) / .18); border-radius:var(--t-radius-kontroll); }
@media(max-width:640px) { .appbar .meny-liste { border-color:var(--t-aksent-pa-primar); } }
.appbar .meny-liste a:focus-visible,.appbar .meny-liste a:hover,.appbar .meny-liste button:focus-visible,.appbar .meny-liste button:hover { background:var(--t-primar-mork); color:var(--t-primar-pa-sterk); }
.appbar .meny-liste a.aktiv { color:var(--t-primar-pa-sterk); box-shadow:inset 3px 0 0 var(--t-aksent-pa-primar); }
.auth-background { background:var(--t-primar); min-height:74vh; display:flex; align-items:center; width:100%; }
.auth-card { max-width:470px; margin:0 auto; background:var(--t-kort); padding:44px 40px; border-radius:var(--t-radius); box-shadow:var(--t-skygge); }
.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 tilrettelagt 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,.tastatur,.brett-prove { --b-bunn:var(--t-kort); --b-gitt:var(--t-flate-tonet); --b-tekst:var(--t-primar-tekst); --b-feil:var(--t-feil); --b-feil-bg:var(--t-feil-bg); --b-rel:var(--t-aksent-rel); --b-lik:var(--t-aksent-lik); --b-valgt:var(--t-valgt); --b-dempet:var(--t-svak); --b-dempet-bg:var(--t-flate); --b-slett:var(--t-svak); --b-kant:var(--t-kant-sterk); }
.sud { border-color:var(--b-tekst); background:var(--b-tekst); }
.sud .c { background:var(--b-bunn); color:var(--b-tekst); }
.sud .c.gitt { background:var(--b-gitt); color:var(--b-tekst); }
.sud .c.rel:not(.feil) { background:var(--b-rel); }
.sud .c.lik:not(.feil) { background:var(--b-lik); }
.sud .c.valgt:not(.feil) { background:var(--b-valgt); }
.sud .c.\!valgt:not(.feil) { background:var(--b-valgt)!important; }
.sud .c.valgt { outline-color:var(--b-tekst); }
.sud .c.\!valgt { outline-color:var(--b-tekst)!important; }
.sud .c.feil { color:var(--b-feil); background:var(--b-feil-bg); }
.sud .c:nth-child(3n),.sud .c.rad3 { border-color:var(--b-tekst); }
.sud .c.bolge:after { background:var(--b-valgt); }
.tastatur button { background:var(--b-bunn); color:var(--b-tekst); border-color:var(--b-kant); border-radius:var(--t-radius-kontroll); }
.tastatur button:hover { border-color:var(--b-tekst); background:var(--b-dempet-bg); }
.tastatur button.slett { color:var(--b-slett); }
.tastatur button.full,.tastatur button:disabled,.tastatur button.full:hover,.tastatur button:disabled:hover { color:var(--b-dempet); background:var(--b-dempet-bg); border-color:var(--b-kant); }
.spillmeta .stor,.stort { color:var(--t-primar-tekst); }
.spillmeta .lbl { color:var(--t-svak); }
.feiring { color:var(--t-primar-pa); background:rgb(var(--t-primar-mork-rgb) / .82); }
.feiring .lbl { color:var(--t-aksent-pa-primar); }
.feiring .poeng,.feiring .hint { color:var(--t-primar-pa-dempet); }
.feiring .poeng .verdi { color:var(--t-primar-pa); }
.feiring:focus-visible { outline-color:var(--t-aksent-pa-primar); }
table.tab { background:var(--t-kort); border-color:var(--t-kant); border-radius:var(--t-radius); }
table.tab th { color:var(--t-svak); }
table.tab td,table.tab th { border-color:var(--t-kant); }
table.tab tr.meg { background:var(--t-aksent-myk); }
.plass { color:var(--t-dempet); }
.plass.p1 { color:var(--t-plass-1); }
.plass.p2 { color:var(--t-plass-2); }
.plass.p3 { color:var(--t-plass-3); }
.piller button { background:var(--t-kort); border-color:var(--t-kant-sterk); color:var(--t-tekst); border-radius:calc(var(--t-radius-kontroll) * 4); }
.piller button:hover { border-color:var(--t-primar-tekst); }
.piller button.pa { background:var(--t-primar-tekst); border-color:var(--t-primar-tekst); color:var(--t-kort); }
.piller button .ant,.piller button.pa .ant { opacity:1; }
.poeng-knapp { color:var(--t-primar-tekst); text-decoration-color:var(--t-aksent); }
.poeng-knapp:hover { text-decoration-color:var(--t-primar-tekst); }
.poeng-knapp:focus-visible { outline-color:var(--t-primar-tekst); }
dialog.poeng-dialog::backdrop { background:rgb(var(--t-primar-rgb) / .72); }
.poeng-dialog .poeng-innhold { background:var(--t-kort); color:var(--t-tekst); border-color:var(--t-aksent); border-radius:var(--t-radius); }
.poeng-dialog h3,.poeng-dialog li b,.merke-navn { color:var(--t-primar-tekst); }
.merkekort:hover { border-color:var(--t-kant-stiplet); }
.merkekort:focus-visible { outline-color:var(--t-primar-tekst); border-color:var(--t-primar-tekst); }
.merke-antall,.merke-dialog #merke-krav { color:var(--t-aksent-mork); }
.merke-krav,.merkekort.laast .merke-navn { color:var(--t-svak); }
.merkekort.oppnadd .merke-ikon,.merke-dialog .merke-stor.oppnadd .merke-ikon { color:var(--t-aksent); }
.merkekort.oppnadd .merke-ikon text,.merke-dialog .merke-stor.oppnadd .merke-ikon text { fill:var(--t-aksent-pa); }
.merkekort.laast { background:var(--t-flate-svak); }
.merkekort.laast .merke-ikon,.merke-dialog .merke-stor.laast .merke-ikon { color:var(--t-merke-laast); }
.merkekort.laast .merke-ikon text,.merke-dialog .merke-stor.laast .merke-ikon text { fill:var(--t-merke-laast-tekst); }
.merke { background:var(--t-aksent-myk); color:var(--t-primar-tekst); border-color:var(--t-aksent); }
@media(max-width:480px) { .appbar .theme-grid + .ordmerke { 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-brett-tema] in the page). */
.brett-temaer { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.brett-temaer form { margin:0; }
.brett-tema { display:block; width:100%; min-height:44px; padding:10px; background:var(--t-kort); color:var(--t-tekst); border:1px solid var(--t-kant-sterk); border-radius:var(--t-radius-kontroll); cursor:pointer; font:inherit; text-align:left; }
.brett-tema:hover { border-color:var(--t-primar-tekst); }
.brett-tema:focus-visible { outline:3px solid var(--t-primar-tekst); outline-offset:2px; }
.brett-tema[aria-pressed=true] { border-color:var(--t-primar-tekst); box-shadow:inset 0 0 0 2px var(--t-primar-tekst); cursor:default; }
.brett-prove { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:2px solid var(--b-tekst); background:var(--b-tekst); font-size:15px; }
.brett-prove span { display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:var(--b-bunn); color:var(--b-tekst); font-weight:600; }
.brett-prove .gitt { background:var(--b-gitt); font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.brett-prove .rel { background:var(--b-rel); }
.brett-prove .lik { background:var(--b-lik); }
.brett-prove .valgt { background:var(--b-valgt); }
.brett-prove .feil { background:var(--b-feil-bg); color:var(--b-feil); }
.brett-prove .tast { background:var(--b-bunn); font-weight:700; }
.brett-prove .tast.full { background:var(--b-dempet-bg); color:var(--b-dempet); }
.brett-tema .navn-rad { display:block; margin-top:8px; font-weight:700; font-size:14px; }
.brett-tema .i-bruk { display:block; font-size:12px; font-weight:700; color:var(--t-dempet); }
/* Accessible board mode (issue #19): the opt-in, per-user board display. The
   --ta-* tokens are the fixed, pre-tested palette internal/tema/tilrettelagt.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,.tastatur from
   a later <style> block, so rebinding them here is what makes tilrettelagt
   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 tekst on celle, hovered text is tekst on gitt. .brett-prove is left
   out on purpose, so the admin's tiles keep previewing each theme's own
   colours. */
body.tilrettelagt .sud,body.tilrettelagt .tastatur { --b-bunn:var(--ta-celle); --b-gitt:var(--ta-gitt); --b-tekst:var(--ta-tekst); --b-feil:var(--ta-feil); --b-feil-bg:var(--ta-feil-bg); --b-rel:var(--ta-rel); --b-lik:var(--ta-lik); --b-valgt:var(--ta-valgt); --b-dempet:var(--ta-full); --b-dempet-bg:var(--ta-gitt); --b-slett:var(--ta-tekst); --b-kant:var(--ta-full-kant); }
body.tilrettelagt .sud { background:var(--ta-tekst); border-color:var(--ta-tekst); }
body.tilrettelagt .sud .c { background:var(--ta-celle); color:var(--ta-tekst); }
body.tilrettelagt .sud .c.gitt { background:var(--ta-gitt); color:var(--ta-tekst); font-weight:800; text-decoration-thickness:4px; text-underline-offset:3px; }
body.tilrettelagt .sud .c.rel:not(.feil) { background:var(--ta-rel); }
body.tilrettelagt .sud .c.lik:not(.feil) { background:var(--ta-lik); }
body.tilrettelagt .sud .c.valgt:not(.feil) { background:var(--ta-valgt); }
body.tilrettelagt .sud .c.\!valgt:not(.feil) { background:var(--ta-valgt)!important; }
body.tilrettelagt .sud .c.valgt,body.tilrettelagt .sud .c.\!valgt { outline-color:var(--ta-tekst)!important; }
body.tilrettelagt .sud .c:nth-child(3n),body.tilrettelagt .sud .c.rad3 { border-color:var(--ta-tekst); }
body.tilrettelagt .sud .c.feil { color:var(--ta-feil); background:var(--ta-feil-bg); box-shadow:inset 0 0 0 3px var(--ta-feil); }
body.tilrettelagt .sud .c.feil:after { content:"!"; position:absolute; top:2px; right:4px; font-size:12px; font-weight:800; line-height:1; color:var(--ta-feil-pa); background:var(--ta-feil); width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
body.tilrettelagt .sud .c.bolge:after { background:var(--ta-valgt); }
body.tilrettelagt .tastatur button.full,body.tilrettelagt .tastatur button:disabled,body.tilrettelagt .tastatur button.full:hover,body.tilrettelagt .tastatur button:disabled:hover { color:var(--ta-full); background:var(--ta-full-bg); border-color:var(--ta-full-kant); opacity:.85; text-decoration:line-through; }