:root{font-size:20px;--bg:#f5f3ed;--surface:#fffefa;--text:#182e2a;--muted:#485d56;--line:#b5c2b9;--control:#6f8378;--accent:#155e4b;--on-accent:#fff;--soft:#e7eee7;--focus:#914000;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;line-height:1.6;overflow-wrap:anywhere;padding-bottom:var(--player-space,0)}body[data-theme=dark]{--bg:#14201e;--surface:#1e302b;--text:#fafbf6;--muted:#d3dfd6;--line:#768b80;--control:#8a9f94;--accent:#bce8ce;--on-accent:#12241a;--soft:#2a4237;--focus:#ffd08c;color-scheme:dark}body[data-theme=contrast]{--bg:#000;--surface:#000;--text:#fff36a;--muted:#fff36a;--line:#fff36a;--control:#fff36a;--accent:#fff36a;--on-accent:#000;--soft:#202000;--focus:#fff;color-scheme:dark}
/* "Som enheten" follows the device setting; the same rule covers the moment before app.js has run. */
@media(prefers-color-scheme:dark){body[data-theme=auto],body:not([data-theme]){--bg:#14201e;--surface:#1e302b;--text:#fafbf6;--muted:#d3dfd6;--line:#768b80;--control:#8a9f94;--accent:#bce8ce;--on-accent:#12241a;--soft:#2a4237;--focus:#ffd08c;color-scheme:dark}}
/* Focus and jumps never stop behind the player bar; --player-space is its height while reading (app.js). */
html{scroll-padding-block-end:calc(var(--player-space,0px) + .75rem)}
header,main,footer{max-width:53rem;margin:auto;padding:1rem 1.5rem}h1{font-size:2.6rem;line-height:1.15;margin:0 0 .3rem;overflow-wrap:anywhere}h2{font-size:1.15rem;line-height:1.4;margin:0 0 .75rem}h3{font-size:1.2rem;line-height:1.4;margin:0}p{margin:.5rem 0}ol,ul{list-style:none;padding:0;margin:0}[hidden]{display:none!important}
button,select{font:inherit;line-height:1.35;color:var(--text);background:var(--surface);border:1px solid var(--control);border-radius:.5rem;min-height:2.8rem;padding:.6rem .8rem;max-width:100%;min-width:0}button{cursor:pointer;font-weight:650}button:hover,a:hover{background:var(--soft)}button:disabled,button[aria-disabled=true]{opacity:.55;cursor:default}button[aria-disabled=true]:hover{background:var(--surface)}.primary,button[aria-pressed=true],.channel[aria-current=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.primary:hover{background:var(--text);color:var(--bg)}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:var(--accent);text-underline-offset:.2em}
/* When focused, the skip link takes its own line above the top bar instead of covering it. */
.skip{position:absolute;left:1rem;top:-20rem;background:var(--surface);padding:.6rem .8rem;z-index:5}.skip:focus{position:static;display:inline-block;margin-bottom:.75rem}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
label,.label{display:block;font-weight:650;font-size:.85rem;margin-bottom:.4rem}.hint{font-size:.85rem;color:var(--muted)}.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}output{text-align:center;padding:0 .3rem}
/* Top bar and settings */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.brand{display:flex;align-items:center;gap:.65rem;font-weight:750}.brand-icon{background:var(--accent);color:var(--on-accent);border-radius:.55rem;padding:.2rem .55rem;font-size:.85rem}#settings-toggle[aria-expanded=true]{background:var(--soft)}
.settings{background:var(--soft);border:1px solid var(--line);padding:1.15rem 1.35rem;border-radius:.8rem;margin-top:1rem}.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}.tools>div{min-width:0}.tools select{width:100%}#settings-done{margin-top:1rem}
/* Channel, date and reading controls */
.guide{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1.5rem}.date-label{color:var(--muted);margin:0 0 1rem}.notice{font-size:.85rem;margin:0 0 1rem;padding:.6rem .8rem;background:var(--soft);border-left:4px solid var(--accent);border-radius:.25rem}.notice:empty{display:none}
.channels{margin-bottom:1rem}.channel-row{display:flex;flex-wrap:wrap;gap:.5rem}.channel-buttons{display:contents}.channel-panel{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:.6rem;background:var(--soft)}.channel-panel h3{font-size:1rem;margin:1.2rem 0 .5rem}.channel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.5rem}.channel-list li{display:flex;gap:.4rem}.channel-list .channel{flex:1;text-align:left}.star{font-size:1.3rem;line-height:1;min-width:2.8rem;padding:.4rem}#close-channels{margin-top:1rem}
.date-navigation{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.date-navigation select{flex:1 1 12rem}
.speech{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}#speech-note{font-size:.85rem;color:var(--muted);margin:0}#speech-note:empty{display:none}
/* While reading, the controls stay at the bottom of the screen. Their size is capped so they fit on a phone. */
.player{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:3px solid var(--accent);box-shadow:0 -.3rem 1rem rgb(0 0 0/.15);font-size:clamp(16px,1rem,24px);padding:.6rem max(1rem,calc((100% - 50rem)/2)) calc(.6rem + env(safe-area-inset-bottom))}#speech-status{margin:0 0 .4em;font-size:.9em;font-weight:650}.player-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}.player-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:2.6em;padding:.4em .6em}.player svg{width:1.1em;height:1.1em;fill:currentColor;flex:none}
/* Program list */
.periods{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem}.periods a{padding:.5rem .8rem;border:1px solid var(--control);border-radius:2rem;font-size:.85rem}#past-toggle{width:100%;margin-bottom:.5rem}
.period{scroll-margin-top:1rem}.period>h2{padding-top:1.25rem;border-top:2px solid var(--text);margin-top:1.5rem}#programmer>.period:first-child>h2{margin-top:.5rem}li{scroll-margin:1rem}
.program{padding:1.15rem .25rem;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.program.reading{background:var(--soft);outline:3px solid var(--accent);outline-offset:3px;border-radius:.3rem}.program.now{background:var(--soft);border-left:.4rem solid var(--accent);padding-left:.75rem;border-radius:.3rem}.program.past .time,.program.past h3{color:var(--muted)}
.program-head{display:grid;grid-template-columns:4.3rem 1fr;gap:.5rem;align-items:baseline}.time{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;align-content:start;font-size:1rem;line-height:1.6;font-weight:750;font-variant-numeric:tabular-nums}.now-badge{display:none;background:var(--accent);color:var(--on-accent);border-radius:.3rem;padding:0 .4rem;font-size:.8rem;line-height:1.5}.program.now .now-badge{display:inline-block}
.program-body{margin-left:4.8rem}.meta{margin:.4rem 0;color:var(--muted)}.description{margin:.5rem 0}.program-copy{white-space:pre-line}.program button{font-size:.8rem;margin-top:.6rem}
footer{font-size:.8rem;color:var(--muted);padding:.7rem 1.7rem 1.7rem}footer p{margin:.65rem 0}#copy{margin-top:.35rem}#retry{margin-top:1rem}
@media(max-width:650px){header,main{padding:12px 10px}footer{padding:.5rem 14px 1.5rem}.guide,.settings{padding:14px 12px}.channel-row{gap:6px}h1{font-size:min(2rem,12vw)}.brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.player-buttons{grid-template-columns:1fr 1fr}.program-head{grid-template-columns:1fr}.program-body{margin-left:0}.program button{max-width:100%}.periods{gap:6px}.periods a{padding:6px 10px}.channel-row .channel{padding:.5rem .55rem}.date-navigation button{flex:1 1 auto}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s}}
/* Windows high contrast removes background colours, which is all that marks the chosen channel and setting.
   System colours for a selection keep them visible; the focus ring then needs a system colour too. */
@media(forced-colors:active){.channel[aria-current=true],button[aria-pressed=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}.channel[aria-current=true]:focus-visible,button[aria-pressed=true]:focus-visible{outline-color:CanvasText}.now-badge{border:1px solid}}