/* Nieuwsluik — stijlen volgens het Nieuwsluik Design System. */

@font-face{font-family:"Martian Mono";src:url(fonts/MartianMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(fonts/MartianMono-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(fonts/MartianMono-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Martian Grotesk";src:url(fonts/MartianGrotesk-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Martian Grotesk";src:url(fonts/MartianGrotesk-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Martian Grotesk";src:url(fonts/MartianGrotesk-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens: donker (standaard) ---------- */
:root{
  --bg:#0A0A0A;--surface:#161616;--line:#222222;--line-strong:#2A2A2A;--control-border:#5E5E5E;
  --ink:#F2F2F2;--ink-soft:#CFCFCF;--muted:#9A9A9A;
  --p-red:#FF6159;--p-green:#3DDC6B;--p-yellow:#FFD400;--p-blue:#6E95FF;--p-magenta:#F56BDC;--p-cyan:#3FD0E0;
  --key-red:#FF6159;--key-green:#3DDC6B;--key-yellow:#FFD400;--key-blue:#6E95FF;--key-magenta:#F56BDC;--key-cyan:#3FD0E0;
  --key-ink:#0A0A0A;--key-ink-yellow:#0A0A0A;--focus:#F2F2F2;
  --accent:var(--p-yellow);--accent-fill:var(--key-yellow);--accent-ink:var(--key-ink-yellow);
  --link:var(--p-cyan);
  --font-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-read:"Martian Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:18px;--key-height:58px;
  color-scheme:dark;
}
[data-ground="oled"]{--bg:#000000;--surface:#121212}
[data-ground="crt"]{--bg:#0B0E14;--surface:#141822;--line:#1E2330}
[data-ground="warm"]{--bg:#13110F;--surface:#1C1916;--line:#26221E}

/* Paletten in het donker. De lichte varianten staan na het lichte thema. */
[data-palette="soft"]{
  --p-red:#E07A5F;--p-green:#8CC084;--p-yellow:#F2C94C;--p-blue:#8FA8E8;--p-magenta:#D98CC8;--p-cyan:#7FB7BE;
  --key-red:#E07A5F;--key-green:#8CC084;--key-yellow:#F2C94C;--key-blue:#8FA8E8;--key-magenta:#D98CC8;--key-cyan:#7FB7BE}
[data-palette="contrast"]{
  --bg:#000000;--surface:#0E0E0E;--line:#333333;--line-strong:#444444;--control-border:#8A8A8A;--ink:#FFFFFF;--ink-soft:#E6E6E6;--muted:#C8C8C8;--focus:#FFFF00;
  --p-red:#FF4040;--p-green:#40FF40;--p-yellow:#FFFF00;--p-blue:#8AA8FF;--p-magenta:#FF66FF;--p-cyan:#00FFFF;
  --key-red:#FF4040;--key-green:#40FF40;--key-yellow:#FFFF00;--key-blue:#8AA8FF;--key-magenta:#FF66FF;--key-cyan:#00FFFF;--key-ink:#000000;--key-ink-yellow:#000000}
[data-palette="phosphor"]{
  /* Drie tinten groen, licht en donker om en om, zodat buren in de kleurbalk en de band te onderscheiden blijven. */
  --p-red:#A6F4B8;--p-green:#2BA84A;--p-yellow:#A6F4B8;--p-blue:#5FE07F;--p-magenta:#7FE89A;--p-cyan:#2BA84A;
  --key-red:#A6F4B8;--key-green:#2BA84A;--key-yellow:#A6F4B8;--key-blue:#5FE07F;--key-magenta:#7FE89A;--key-cyan:#2BA84A;
  --ink:#D6F7DE;--ink-soft:#A9DDB6;--muted:#7FB08B}

/* Licht */
[data-theme="light"]{
  --bg:#F7F7F5;--surface:#FFFFFF;--line:#E2E2DE;--line-strong:#CFCFCA;--control-border:#8A8A8A;
  --ink:#111111;--ink-soft:#3A3A3A;--muted:#5C5C5C;
  --p-red:#C21F2E;--p-green:#12773A;--p-yellow:#856600;--p-blue:#1D4ED8;--p-magenta:#A3238E;--p-cyan:#0B7285;
  --key-red:#C21F2E;--key-green:#12773A;--key-yellow:#FFD400;--key-blue:#1D4ED8;--key-magenta:#A3238E;--key-cyan:#0B7285;
  --key-ink:#FFFFFF;--key-ink-yellow:#111111;--focus:#1D4ED8;
  color-scheme:light}

/* Paletten in het licht: dezelfde keuze, donkerdere tinten. Elke tekstkleur haalt minstens 4,5:1 op de grond
   en op wit; elke toets minstens 4,5:1 met zijn eigen tekstkleur. */
[data-theme="light"][data-palette="soft"]{
  --bg:#F6F3EC;--surface:#FFFDF8;--line:#E3DDD0;--line-strong:#D2CABA;--control-border:#8A8073;
  --ink:#2A2622;--ink-soft:#4A433C;--muted:#655C52;--focus:#3F5E9E;
  --p-red:#A8432F;--p-green:#3F6F45;--p-yellow:#7A5C0E;--p-blue:#3F5E9E;--p-magenta:#8A4A7C;--p-cyan:#2F6F77;
  --key-red:#B5533C;--key-green:#4A7A50;--key-yellow:#E9C46A;--key-blue:#4D6CB3;--key-magenta:#96558A;--key-cyan:#387A82;
  --key-ink:#FFFFFF;--key-ink-yellow:#2A2622}
[data-theme="light"][data-palette="contrast"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--line:#767676;--line-strong:#000000;--control-border:#000000;
  --ink:#000000;--ink-soft:#1A1A1A;--muted:#333333;--focus:#0000C8;
  --p-red:#A00000;--p-green:#005A00;--p-yellow:#5C4400;--p-blue:#0000C8;--p-magenta:#7A007A;--p-cyan:#00525C;
  --key-red:#A00000;--key-green:#005A00;--key-yellow:#FFE600;--key-blue:#0000C8;--key-magenta:#7A007A;--key-cyan:#00525C;
  --key-ink:#FFFFFF;--key-ink-yellow:#000000}
[data-theme="light"][data-palette="phosphor"]{
  /* Inkt: twee tinten donkerblauw, om en om, zodat buren in de kleurbalk en de band te onderscheiden blijven. */
  --bg:#F4F6F9;--surface:#FFFFFF;--line:#DCE2EC;--line-strong:#C5CEDD;--control-border:#7B879C;
  --ink:#0F1B33;--ink-soft:#2A3A5C;--muted:#4D5B78;--focus:#16305E;
  --p-red:#16305E;--p-green:#3B5C99;--p-yellow:#16305E;--p-blue:#3B5C99;--p-magenta:#16305E;--p-cyan:#3B5C99;
  --key-red:#16305E;--key-green:#3B5C99;--key-yellow:#16305E;--key-blue:#3B5C99;--key-magenta:#16305E;--key-cyan:#3B5C99;
  --key-ink:#FFFFFF;--key-ink-yellow:#FFFFFF}
/* Eigen palet in het licht: de kleuren zelf komen uit palette.js; elke toets krijgt witte tekst. */
[data-theme="light"][data-palette="custom"]{--key-ink-yellow:#FFFFFF}

/* Tekstgrootte: alle maten in rem */
html{font-size:100%;scroll-padding-bottom:calc(var(--key-height) + 16px)}
html[data-size="s"]{font-size:87.5%}
html[data-size="l"]{font-size:120%}
/* XL: voor een tv op een paar meter afstand. */
html[data-size="xl"]{font-size:150%}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--font-mono);font-size:.875rem;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:var(--link)}
button,input,select{font-family:inherit;font-size:inherit;color:inherit;border-radius:0}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Browsers zonder :focus-visible (Chromium 85 op oudere smart-tv's): altijd een focusrand, anders zie je met de
   afstandsbediening niet waar je bent. Niet bij wat alleen voor schermlezers focus krijgt. */
@supports not selector(:focus-visible){
  :focus{outline:3px solid var(--focus);outline-offset:2px}
  [tabindex="-1"]:focus{outline:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.top{padding:20px var(--gutter) 0;max-width:1160px;width:100%;margin:0 auto}
.body{flex-grow:1;width:100%;max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;padding:0 var(--gutter)}
#side{display:none}
#main{flex:999 1 320px;min-width:0;outline:none;padding-bottom:24px}

/* Kopregel */
.p1-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.8125rem;line-height:1.3;min-height:24px}
.p1-head__nr{color:var(--accent);font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
a.p1-head__nr{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.p1-head__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
a.p1-head__name{color:inherit;text-decoration:none}
.p1-head__time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.p1-band{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:4px;margin-top:12px}
.p1-band span:nth-child(1){background:var(--key-red)}.p1-band span:nth-child(2){background:var(--key-green)}.p1-band span:nth-child(3){background:var(--key-yellow)}
.p1-band span:nth-child(4){background:var(--key-blue)}.p1-band span:nth-child(5){background:var(--key-magenta)}.p1-band span:nth-child(6){background:var(--key-cyan)}
.p1-sub{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;height:4px;margin-top:12px}
.p1-sub span{background:var(--line-strong);position:relative;overflow:hidden}
.p1-sub span[data-on]{background:var(--pc)}
.p1-sub span[data-current] i{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--pc);transform-origin:left;animation:p1-fill 12s steps(12) forwards}
@keyframes p1-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Onderwerpbalk: elk blokje is een feedpagina */
.p1-topics{display:flex;align-items:center;gap:6px;margin-top:6px;margin-bottom:-6px}
.p1-topics__nav{flex-shrink:0;min-width:44px;min-height:36px;background:none;border:0;color:var(--ink);font-size:1.125rem;font-weight:800;padding:0}
.p1-topics__blocks{flex-grow:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.p1-topic{position:relative;height:36px;background:none;border:0;padding:0}
.p1-topic::before{content:"";position:absolute;left:0;right:0;top:15px;height:5px;background:var(--tc);opacity:.28}
.p1-topic[aria-current]::before{opacity:1;top:14px;height:7px}
.p1-topic i{position:absolute;left:0;right:0;top:23px;height:2px;background:var(--ink);transform-origin:left;animation:p1-fill 15s linear forwards}

/* Horizontaal rijtje onderwerpen; binnen een onderwerp verticaal scrollen */
#main.is-deck{padding-bottom:0}
.p1-deck{position:relative;display:flex;height:var(--deck-h,70vh);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.p1-deck::-webkit-scrollbar{display:none}
.p1-panel.is-fit{overflow-y:hidden}
.p1-panel.is-fit:has(.p1-item[data-open]){overflow-y:auto}
.p1-panel.is-fit.has-open{overflow-y:auto}
.p1-panel{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:28px;outline:none}

/* Paginatitel */
.p1-title{margin:0;padding:24px 0 14px;font-size:2rem;line-height:1;font-weight:800;color:var(--pc,var(--accent));text-transform:uppercase;overflow-wrap:anywhere}
.p1-display{margin:0;padding:26px 0 6px;font-size:2.75rem;line-height:1;font-weight:800;color:var(--accent)}
.p1-lead{font-size:.75rem;color:var(--muted);margin:0 0 18px}

/* Kleurbalk */
.p1-keys{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));z-index:5;padding-bottom:env(safe-area-inset-bottom);background:var(--bg)}
.p1-key{display:flex;align-items:center;justify-content:center;min-height:var(--key-height);padding:0 6px;font-size:.75rem;font-weight:800;text-decoration:none;color:var(--key-ink);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2}
.is-typing .p1-keys{display:none}
.p1-key--red{background:var(--key-red)}.p1-key--green{background:var(--key-green)}.p1-key--yellow{background:var(--key-yellow);color:var(--key-ink-yellow)}.p1-key--cyan{background:var(--key-cyan)}

/* Indexregel */
.p1-rows{display:flex;flex-direction:column}
.p1-row{display:flex;align-items:center;gap:14px;min-height:64px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.p1-rows>.p1-row:last-child{border-bottom:1px solid var(--line)}
.p1-row__nr{width:54px;flex-shrink:0;font-size:1.375rem;font-weight:800;line-height:1;color:var(--pc,var(--accent));font-variant-numeric:tabular-nums}
.p1-row__body{flex-grow:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.p1-row__name{font-size:.9375rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.p1-row__meta{font-size:.6875rem;color:var(--muted)}
.p1-row__tag{font-size:.6875rem;font-weight:800;padding:3px 6px;background:var(--pcf);color:var(--pci)}
.p1-row--add{color:var(--muted)}
.p1-row--add .p1-row__nr{color:var(--muted)}
.p1-row--add .p1-row__name{font-weight:400;font-size:.875rem}

/* Bericht */
.p1-items{margin:0;padding:0;list-style:none}
.p1-item{border-top:1px solid var(--line)}
.p1-items>.p1-item:last-child{border-bottom:1px solid var(--line)}
.p1-item__btn{display:grid;grid-template-columns:5em minmax(0,1fr);column-gap:12px;width:100%;padding:14px 0;background:none;border:0;text-align:left;color:var(--ink)}
.p1-item__time{font-size:.75rem;font-weight:800;line-height:1.9;color:var(--pc);font-variant-numeric:tabular-nums}
.p1-item__head{font-size:.9375rem;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p1-item[data-open] .p1-item__head{-webkit-line-clamp:unset;display:block}
.p1-item__more{display:grid;grid-template-columns:5em minmax(0,1fr);column-gap:12px;padding:0 0 14px}
.p1-item__more>*{grid-column:2}
.p1-item__sum{margin:0 0 10px;font-size:.75rem;line-height:1.65;color:var(--ink-soft);max-width:62ch}
.p1-item__link{font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.p1-item[data-read] .p1-item__time{color:var(--muted)}
.p1-item[data-read] .p1-item__head{color:var(--ink-soft)}
[data-readfont="on"] .p1-item__head{font-family:var(--font-read);font-size:1.0625rem;line-height:1.4;font-weight:500}
[data-readfont="on"] .p1-item__sum{font-family:var(--font-read);font-size:.875rem}
[data-readfont="on"] .p1-status__msg,[data-readfont="on"] .p1-text{font-family:var(--font-read);font-size:.9375rem}

/* Subpagina-navigatie */
.p1-subnav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 0}
.p1-subnav__hint{font-size:.6875rem;color:var(--muted);text-align:center}

/* Bronregel */
.p1-source{font-size:.6875rem;line-height:1.6;color:var(--muted);margin:14px 0 0}

/* Paginakiezer */
.p1-goto{display:flex;align-items:center;gap:10px;margin-top:22px}
.p1-goto label{font-size:.75rem;color:var(--muted)}
.p1-goto input{width:110px;height:48px;background:var(--surface);border:2px solid var(--control-border);color:var(--accent);font-family:var(--font-mono);font-size:1.25rem;font-weight:800;text-align:center;letter-spacing:.2em}
.p1-goto input::placeholder{color:var(--muted);font-weight:400}

/* Knop */
.p1-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 20px;font-size:.9375rem;font-weight:800;border:0;text-decoration:none;background:none;color:var(--ink)}
.p1-btn--primary{background:var(--accent-fill);color:var(--accent-ink)}
.p1-btn--primary:disabled{opacity:.45;cursor:not-allowed}
.p1-btn--secondary{border:2px solid var(--control-border)}
.p1-btn--secondary:disabled{opacity:.45;cursor:not-allowed}
.p1-btn--quiet{color:var(--muted);min-height:44px;font-size:.75rem;font-weight:400;padding:0 8px}
.p1-btn--icon{min-width:44px;min-height:44px;padding:0}
.p1-section{scroll-margin-top:12px}
.p1-section h2:focus{outline:none}
.p1-item__new{display:table;margin-top:3px;padding:1px 5px;font-size:.625rem;line-height:1.5;font-weight:800;text-transform:uppercase;background:var(--pcf);color:var(--pci)}
.p1-item[data-read] .p1-item__new{display:none}
.p1-item__when{margin:0 0 8px;font-size:.6875rem;line-height:1.5;color:var(--muted)}
.p1-item__cut{font-family:var(--font-mono);font-size:.6875rem;color:var(--muted);white-space:nowrap}
.p1-item__src{grid-column:2;margin-top:4px;font-size:.6875rem;line-height:1.5;color:var(--muted)}
/* Pagina past op het scherm: de bron klein onder de tijd, zodat er meer berichten op een scherm passen.
   Een verhaal bij meer bronnen houdt de bronnen onder de kop (die regel is te lang voor de smalle kolom). */
.p1-panel.is-fit .p1-item__btn{padding:10px 0}
/* Tijd en kop op een vaste plek: anders schuift de kop bij een verhaal met meer bronnen naar de smalle linkerkolom. */
.p1-panel.is-fit .p1-item__time{grid-column:1;grid-row:1}
.p1-panel.is-fit .p1-item__head{grid-column:2;grid-row:1 / span 2;align-self:start}
.p1-panel.is-fit .p1-item__src{grid-column:1;grid-row:2;margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
.p1-panel.is-fit .p1-item__src--many{grid-column:2;grid-row:3;margin-top:4px}
.p1-mypage{flex-wrap:wrap}
.p1-mypage__acts{flex-basis:100%;display:flex;flex-wrap:wrap;margin:-8px 0 2px 52px}
.p1-mypage__name small{font-size:.6875rem;color:var(--muted);margin-left:6px}
.p1-mypage.is-hidden .p1-mypage__nr,.p1-mypage.is-hidden .p1-mypage__name{color:var(--muted)}
#feedsug:not(:empty){margin-top:10px}
.p1-sug{gap:12px;padding:8px 0;flex-wrap:nowrap}
.p1-sug__icon{flex-shrink:0;width:48px;color:var(--muted)}
.p1-sug__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 0}
.p1-sug__name{font-weight:600}
.p1-sug__meta{font-size:.6875rem;line-height:1.5;color:var(--muted);white-space:normal}
.p1-sug__plus{font-size:1rem;font-weight:800;text-align:left;padding-left:3px}
.p1-traffic{margin:0;padding:0;list-style:none}
.p1-traffic__head{margin:0 0 4px;font-size:1.25rem;line-height:1.3;font-weight:800}
.p1-traffic__row{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.p1-traffic>.p1-traffic__row:last-child{border-bottom:1px solid var(--line)}
.p1-traffic__road{font-weight:800;color:var(--pc,var(--accent));font-variant-numeric:tabular-nums}
.p1-traffic__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.p1-traffic__title{font-size:.875rem;line-height:1.4;font-weight:600}
.p1-traffic__where{font-size:.75rem;line-height:1.5;color:var(--ink-soft)}
.p1-end{margin:26px 0 0;font-size:.875rem;font-weight:800;color:var(--pc,var(--accent))}
.p1-end--top{margin:0 0 14px}
.p1-end[hidden]{display:none}
.p1-brief__line{margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.5}
.p1-subtitle a{color:inherit;text-decoration:none}
.p1-subtitle a:hover{text-decoration:underline}
.p1-place{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p1-place__label{display:block;font-size:.6875rem;color:var(--muted);margin-bottom:2px}
.p1-browse{margin-top:24px}
.p1-cats .p1-comp[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}
.p1-cats__n{font-weight:400;opacity:.7}
.p1-item__save{justify-self:start;margin-top:6px}
.p1-titlebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px}
.p1-titlebar .p1-title{min-width:0}
.p1-speakctl{display:flex;flex-shrink:0;gap:6px;margin-top:10px}
.p1-speak{flex-shrink:0;box-shadow:inset 0 0 0 1px var(--line-strong);padding:0 12px}
/* Meelezen: wat wordt voorgelezen, licht op. */
.p1-item[data-speaking],.p1-brief__line[data-speaking]{background:var(--surface);box-shadow:0 0 0 1px var(--line-strong)}
.p1-speak[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.p1-items+.p1-subtitle{margin-top:26px}
.p1-sug__hint{margin:10px 0 0}
.p1-sug__hint strong{color:var(--ink)}
.p1-help{margin-top:12px}
.p1-help ul{padding-left:1.4em}
.p1-help summary{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.75rem;color:var(--muted);cursor:pointer;list-style:none}
.p1-help summary::-webkit-details-marker{display:none}
.p1-help[open] summary .p1-t{transform:rotate(90deg)}
.p1-help ol{padding-left:1.4em;margin:0 0 12px}
.p1-move{display:flex;gap:6px;flex-shrink:0}
.p1-move .p1-btn:disabled{opacity:.3;cursor:not-allowed}
.p1-btn--wide{width:100%}
.p1-btn--danger{color:var(--p-red)}
/* Ingetogen knop: tekst met een driehoekje en een dunne lijn. Voor wat kan, maar niet hoeft. */
.p1-btn--soft{min-height:44px;padding:0;gap:8px;justify-content:flex-start;align-self:flex-start;max-width:100%;font-size:.8125rem;font-weight:400;line-height:1.4;text-align:left;color:var(--ink-soft)}
.p1-btn--soft .p1-t{flex-shrink:0;color:var(--muted)}
.p1-soft__t{padding-bottom:3px;border-bottom:1px solid var(--control-border)}
.p1-btn--soft:hover .p1-soft__t{border-bottom-color:var(--ink)}
.p1-btn--soft[aria-pressed="true"]{color:var(--ink)}
.p1-btn--soft[aria-pressed="true"] .p1-soft__t{border-bottom-color:var(--accent)}
.p1-btn--soft.p1-btn--danger{color:var(--p-red)}
.p1-btn--soft.p1-btn--danger .p1-soft__t{border-bottom-color:var(--p-red)}

/* Schakelaar en keuzes */
.p1-section{margin-top:28px}
.p1-section>h2{margin:0 0 10px;font-size:.75rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
/* Ingeklapte groep in Instellingen: rustig, maar zichtbaar aanklikbaar (zelfde pijltje als de ingetogen knoppen). */
.p1-group{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p1-group+.p1-group{margin-top:0;border-top:0}
.p1-group>summary{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;cursor:pointer;list-style:none}
.p1-group>summary::-webkit-details-marker{display:none}
.p1-group>summary .p1-t{flex-shrink:0;color:var(--accent);transition:transform .15s}
.p1-group[open]>summary .p1-t{transform:rotate(90deg)}
.p1-group__t{display:flex;flex-direction:column;gap:2px}
.p1-group__name{font-size:.9375rem;font-weight:800;color:var(--ink)}
.p1-group__sub{font-size:.6875rem;color:var(--muted)}
.p1-group>.p1-section:first-of-type{margin-top:4px}
.p1-group[open]{padding-bottom:24px}
.p1-group--intro{margin-top:0}
.p1-group--intro:first-child{margin-top:14px}
.p1-group--intro[open]{padding-bottom:16px}
.p1-switches{border-bottom:1px solid var(--line)}
.p1-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;background:transparent;border:0;border-top:1px solid var(--line);color:var(--ink);text-align:left;padding:8px 0}
.p1-switch__text{display:flex;flex-direction:column;gap:3px}
.p1-switch__name{font-size:.875rem}
.p1-switch__sub{font-size:.6875rem;color:var(--muted)}
.p1-switch__state{flex-shrink:0;font-size:.75rem;font-weight:800;padding:6px 10px;min-width:48px;text-align:center;box-shadow:inset 0 0 0 2px var(--control-border);color:var(--muted)}
.p1-switch[aria-checked="true"] .p1-switch__state{background:var(--accent-fill);box-shadow:none;color:var(--accent-ink)}
.p1-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.p1-choice{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:64px;padding:12px;background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);text-align:left}
.p1-choice[aria-pressed="true"]{border-color:var(--accent)}
.p1-choice__name{font-size:.8125rem;font-weight:600}
.p1-choice__sub{font-size:.6875rem;color:var(--muted)}
.p1-chips{display:flex;gap:4px}
.p1-item__host{font-weight:400;color:var(--muted)}
/* Eigen palet: één schuifje over het vaste kleurverloop, met de zes kleuren erboven */
.p1-hues{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.p1-hue-preview{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;height:28px}
.p1-hue__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.p1-hue__range::-webkit-slider-runnable-track{height:14px;background:var(--track)}
.p1-hue__range::-moz-range-track{height:14px;background:var(--track)}
.p1-hue__range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:30px;margin-top:-8px;background:var(--ink);border:3px solid var(--bg);border-radius:0}
.p1-hue__range::-moz-range-thumb{width:8px;height:24px;background:var(--ink);border:3px solid var(--bg);border-radius:0}
.p1-hue__range:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Ingetogen schuif: een dunne lijn met een klein blokje. */
.p1-rate{display:flex;align-items:center;gap:12px}
.p1-rate__end{flex-shrink:0;font-size:.6875rem;color:var(--muted)}
.p1-rate__range{-webkit-appearance:none;appearance:none;flex:1 1 0;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer}
.p1-rate__range::-webkit-slider-runnable-track{height:1px;background:var(--control-border)}
.p1-rate__range::-moz-range-track{height:1px;background:var(--control-border)}
.p1-rate__range::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:22px;margin-top:-11px;background:var(--ink);border:0;border-radius:0}
.p1-rate__range::-moz-range-thumb{width:10px;height:22px;background:var(--ink);border:0;border-radius:0}
.p1-rate__range:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.p1-chips i{width:18px;height:18px;display:block}
.p1-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.p1-swatch{height:48px;border:0;box-shadow:inset 0 0 0 0 transparent}
.p1-swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px var(--bg)}
.p1-select{width:100%;height:48px;padding:0 10px;background:var(--surface);border:2px solid var(--control-border);color:var(--ink)}
.p1-field{display:flex;flex-direction:column;gap:8px}
.p1-field label{font-size:.75rem;color:var(--muted)}
.p1-input{height:52px;padding:0 12px;background:var(--surface);border:2px solid var(--control-border);color:var(--ink);font-size:.8125rem;width:100%}
.p1-input--nr{width:110px;text-align:center;font-size:1.375rem;font-weight:800;color:var(--pc,var(--accent))}
.p1-mypages{display:flex;flex-direction:column}
.p1-mypage{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid var(--line)}
.p1-mypages>.p1-mypage:last-child{border-bottom:1px solid var(--line)}
.p1-mypage__nr{width:48px;font-weight:800;color:var(--pc)}
.p1-mypage__name{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Teken */
.p1-t{display:inline-block;width:.8em;height:.8em;vertical-align:-.05em;background:currentColor;flex-shrink:0}
.p1-t--empty{background:transparent;box-shadow:inset 0 0 0 .14em currentColor}
.p1-t--tri-r{clip-path:polygon(15% 0,100% 50%,15% 100%)}
.p1-t--tri-l{clip-path:polygon(85% 0,0 50%,85% 100%)}
.p1-t--ext{clip-path:polygon(30% 0,100% 0,100% 70%,82% 52%,28% 100%,0 72%,48% 18%)}
.p1-t--heart{clip-path:polygon(50% 100%,0 45%,0 18%,14% 0,36% 0,50% 16%,64% 0,86% 0,100% 18%,100% 45%)}
.p1-t--dot{width:.5em;height:.5em;vertical-align:.08em}

/* Statuspagina */
.p1-status{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:32px 0}
.p1-status__nr{font-size:2.75rem;font-weight:800;line-height:1;color:var(--pc,var(--accent))}
.p1-status__msg{margin:0;font-size:.875rem;line-height:1.6;color:var(--ink-soft);max-width:36ch}
.p1-status--error .p1-status__nr{color:var(--p-red)}
.p1-blink{animation:p1-blink 1s steps(1) infinite}
@keyframes p1-blink{50%{opacity:0}}
.p1-note{font-size:.75rem;line-height:1.6;color:var(--muted);margin:10px 0 0}
.p1-text{font-size:.875rem;line-height:1.7;color:var(--ink-soft);max-width:62ch}
.p1-text h2{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--muted);text-transform:uppercase;margin:24px 0 8px}
.p1-text p,.p1-text ul{margin:0 0 12px}
.p1-text li{margin-bottom:6px}
/* Losse pagina's zonder JavaScript (over.html, vragen.html) en de vaste tekst in index.html voor zoekmachines. */
.p1-doc{flex:1 1 auto;min-width:0;padding-bottom:32px}
.p1-doc__nav{margin-top:28px}
.p1-js .p1-seo{display:none}

/* Feedkaart */
.p1-feed{background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px}
.p1-feed__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.p1-feed__name{font-size:.9375rem;font-weight:600;overflow-wrap:anywhere}
.p1-feed__state{font-size:.6875rem;color:var(--p-green);white-space:nowrap}
.p1-feed__state--bad{color:var(--p-red)}
.p1-feed__first{font-size:.75rem;line-height:1.6;color:var(--ink-soft)}
.p1-feed__lic{border-top:1px solid var(--line-strong);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.p1-feed__lic small{font-size:.6875rem;color:var(--muted)}
.p1-feed__lic span{font-size:.75rem;line-height:1.6}
.p1-check{display:flex;gap:10px;align-items:flex-start;font-size:.6875rem;line-height:1.6;color:var(--ink-soft)}
.p1-check input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--key-yellow)}
.p1-stack{display:flex;flex-direction:column;gap:20px}
.p1-actions{display:flex;gap:10px;margin-top:24px}
.p1-actions>.p1-btn--primary{flex-grow:1}
.p1-logo{display:block;margin-top:24px}
.p1-step{font-size:.75rem;color:var(--muted);margin-top:28px}
.p1-demo{font-size:.6875rem;color:var(--key-ink-yellow);background:var(--key-yellow);padding:2px 6px;font-weight:800}
.p1-toast{position:fixed;left:50%;bottom:calc(var(--key-height) + 16px);transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 14px;font-size:.75rem;font-weight:600;z-index:10;max-width:calc(100% - 36px)}

/* Weer */
.p1-wx{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.p1-wx__now{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:6px}
.p1-wx__place{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9375rem;font-weight:600}
.p1-wx__temp{font-size:4rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.p1-wx__desc{font-size:.8125rem;color:var(--ink-soft)}
.p1-wx__days{flex:1 1 100%}
.p1-wx__air{flex:1 1 100%;min-width:0}
.p1-wx__air th{width:8.5em;vertical-align:top}
.p1-wx__air .p1-subtitle{margin-top:0}
.p1-wx__days td.p1-wx__wrap{white-space:normal}
.p1-comps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.p1-comp{min-height:44px;padding:8px 12px;background:transparent;border:2px solid var(--line-strong);color:var(--ink-soft);font:inherit;font-size:.75rem}
.p1-comp[aria-pressed="true"]{background:var(--pcf);border-color:var(--pcf);color:var(--pci);font-weight:800}
.p1-wx__days,.p1-rates{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.p1-wx__days th,.p1-wx__days td,.p1-rates th,.p1-rates td{text-align:left;padding:10px 8px 10px 0;border-top:1px solid var(--line);font-weight:400;white-space:nowrap}
.p1-wx__days thead th,.p1-rates thead th{font-size:.6875rem;color:var(--muted);border-top:0;padding-top:0}
.p1-wx__days tbody th{font-weight:600}
.p1-wx__days td:last-child{color:var(--ink-soft);white-space:normal}
.p1-wx__map{flex:1 1 240px;max-width:340px;margin:0}
.p1-wx__map--world{flex-basis:100%;max-width:560px}
.p1-wx__map figcaption{font-size:.6875rem;color:var(--muted);margin-top:6px}
.p1-wx__svg{display:block;width:100%;height:auto;font-family:var(--font-mono)}
.p1-wx__svg .wx-land{fill:var(--key-green)}
.p1-wx__svg .wx-box{fill:var(--bg)}
.p1-wx__svg text{font-size:16px;font-weight:800}
.p1-wx__svg .wx-me{fill:var(--accent);stroke:var(--bg);stroke-width:4;paint-order:stroke}
.p1-wx__map .wx-key{display:inline-block;width:9px;height:9px;margin-right:6px;background:var(--accent)}
.p1-rates .num{text-align:right;padding-right:0}
.p1-rates tbody th{font-weight:800;color:var(--pc)}
.p1-rates td:nth-child(2){color:var(--ink-soft);white-space:normal}
button.p1-mypage{width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);text-align:left;font-size:.875rem;padding:0}

/* Sport */
.p1-subtitle{margin:22px 0 8px;font-size:.75rem;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.p1-sport{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.p1-sport th,.p1-sport td{text-align:left;padding:9px 8px 9px 0;border-top:1px solid var(--line);font-weight:400;white-space:nowrap}
.p1-sport thead th{font-size:.6875rem;color:var(--muted);border-top:0;padding-top:0}
.p1-sport tbody th{font-weight:600;white-space:normal}
.p1-sport .num{text-align:right;padding-right:10px}
.p1-sport .pts{font-weight:800;color:var(--pc)}
.p1-sport .muted{color:var(--muted);white-space:normal}
.p1-matches td:first-child{text-align:right;width:42%;white-space:normal}
.p1-matches .score{text-align:center;font-weight:800;color:var(--pc);width:16%;padding:9px 8px}
.p1-matches td:last-child{width:42%;white-space:normal}

/* Opbouw regel voor regel */
.p1-build .p1-line{animation:p1-appear 1ms steps(1) both;animation-delay:var(--d,0ms)}
@keyframes p1-appear{from{visibility:hidden}to{visibility:visible}}

/* Openen: elementen faden een voor een in (staccato), alleen bij het starten van de app.
   Tot het script de volgorde heeft bepaald is alles onzichtbaar; lukt dat niet, dan komt alles na 2,5 s alsnog in beeld. */
.p1-opening #top,.p1-opening #main,.p1-opening #side,.p1-opening #keys{animation:p1-fadein 400ms ease-out 2500ms both}
.p1-staccato #top,.p1-staccato #main,.p1-staccato #side,.p1-staccato #keys{animation:none}
.p1-st{animation:p1-fadein var(--fd,750ms) cubic-bezier(.2,.6,.3,1) var(--d,0ms) both}
@keyframes p1-fadein{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .p1-opening #top,.p1-opening #main,.p1-opening #side,.p1-opening #keys,.p1-st{animation:none!important}
  .p1-blink,.p1-build .p1-line,.p1-sub span[data-current] i,.p1-topic i{animation:none!important}
  .p1-group>summary .p1-t{transition:none}
}

/* Desktop en tv */
@media (min-width:960px){
  :root{--gutter:24px;--key-height:60px}
  .top{padding-top:28px}
  .p1-head{font-size:.9375rem}
  .p1-band,.p1-sub{height:5px}
  #side{display:flex;flex-direction:column;flex:1 1 240px;max-width:280px;padding-top:36px}
  #side h2{font-size:.75rem;font-weight:400;color:var(--muted);margin:0 0 12px}
  #side .p1-row{min-height:52px}
  #side .p1-row[aria-current="page"]{background:var(--accent-fill);color:var(--accent-ink);margin:0 -10px;padding:0 10px}
  #side .p1-row[aria-current="page"] .p1-row__nr{color:var(--accent-ink)}
  #side .p1-row__nr{font-size:1rem;width:44px}
  #side .p1-row__meta{display:none}
  #side .p1-keyhelp{margin-top:24px;font-size:.6875rem;line-height:1.8;color:var(--muted)}
  .p1-title{font-size:3rem;padding-top:36px}
  .p1-item__head{font-size:1.25rem;line-height:1.4}
  .p1-item__sum{font-size:.875rem}
  .p1-key{font-size:.875rem}
}

/* ---------- Liggend scherm (tablet, laptop, tv) ----------
   De pagina in een kader van 4:3, gecentreerd, met ruimte rondom, zoals de klassieke tekstpagina's op een breed
   scherm. De letters schalen mee met de hoogte, zodat een pagina overal ongeveer evenveel regels toont; de
   tekstgrootte (S, M, L, XL) werkt daar bovenop. Berichten, Kort en de index in twee kolommen. */
:root{--rim-bg:#000}
[data-theme="light"]{--rim-bg:#DCDCD7}
@media (orientation:landscape) and (min-height:600px){
  html{--rim:clamp(8px,2.5vh,36px);--lfs:clamp(14px,calc((100vh - 2 * var(--rim)) / 51),30px);font-size:var(--lfs)}
  html[data-size="s"]{font-size:calc(var(--lfs) * .875)}
  html[data-size="l"]{font-size:calc(var(--lfs) * 1.2)}
  html[data-size="xl"]{font-size:calc(var(--lfs) * 1.5)}
  body{background:var(--rim-bg)}
  .app{width:min(calc((100vh - 2 * var(--rim)) * 4 / 3),calc(100vw - 2 * var(--rim)));height:calc(100vh - 2 * var(--rim));min-height:0;margin:var(--rim) auto;background:var(--bg);box-shadow:0 0 0 1px var(--line-strong);overflow:hidden}
  .top,.body{max-width:none}
  .body{flex:1 1 auto;min-height:0;overflow-y:auto;gap:1.5em}
  .p1-keys{position:relative}
  .p1-panel{box-sizing:border-box;padding-left:1.25em;padding-right:1.25em}
  .p1-title{font-size:2.25rem;padding:.6em 0 .45em}
  .p1-item__head{font-size:1rem;line-height:1.4}
  .p1-items{column-count:2;column-gap:2.5em;column-rule:1px solid var(--line)}
  .p1-item{break-inside:avoid}
  .p1-items>.p1-item:last-child{border-bottom:0}
  .p1-brief{column-count:2;column-gap:2.5em;column-rule:1px solid var(--line)}
  .p1-brief .p1-items{column-count:1;column-rule:none}
  .p1-brief__block{break-inside:avoid}
  #main .p1-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5em}
}
/* Zijbalk smal links in het kader. */
@media (orientation:landscape) and (min-height:600px) and (min-width:960px){
  #side{flex:0 0 11em;max-width:none;padding:1.5em 10px 0;max-height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  #side::-webkit-scrollbar{display:none}
  #side .p1-row{min-height:2.6em;height:2.6em}
  #side .p1-row__name{font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #side .p1-keyhelp{display:none}
}
/* Telefoon liggend: geen kader (te laag), wel de volle breedte en twee kolommen. Alles compacter: de paginanaam staat
   al bovenin, dus de grote titel is er alleen voor schermlezers. */
@media (orientation:landscape) and (max-height:599px){
  :root{--key-height:40px}
  .top{padding-top:6px}
  .p1-panel .p1-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
  .p1-panel .p1-titlebar{justify-content:flex-end;min-height:0}
  .p1-panel{padding-bottom:8px}
  .p1-subnav .p1-btn,.p1-panel .p1-speak{min-height:32px;min-width:32px}
  .p1-panel .p1-speakctl{margin-top:4px}
  .p1-items{column-count:2;column-gap:24px;column-rule:1px solid var(--line)}
  .p1-item{break-inside:avoid}
  .p1-items>.p1-item:last-child{border-bottom:0}
  .p1-brief{column-count:2;column-gap:24px;column-rule:1px solid var(--line)}
  .p1-brief .p1-items{column-count:1;column-rule:none}
  .p1-brief__block{break-inside:avoid}
  #main .p1-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}