.studio{width:100%;overflow:hidden}
.studio-brand>.studio-brand-logo{display:flex;width:49px;height:43px;align-items:center;justify-content:center;gap:1px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:linear-gradient(145deg,#ff2843,#b90820);box-shadow:0 8px 22px rgba(237,27,53,.28);font-style:normal;line-height:1}
.studio-brand-logo i{display:block;color:#fff;font-style:normal;font-weight:950;text-shadow:0 2px 7px rgba(0,0,0,.25)}
.studio-brand-logo i:first-child{font-size:25px;letter-spacing:-2px}
.studio-brand-logo i:last-child{padding-top:7px;font-size:12px;letter-spacing:-1px}
.breaking span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-controls{opacity:0}
.ticker{display:flex;width:max-content;animation-name:ticker-v6}
.ticker>span{display:block;flex:none;padding-right:70px}
@keyframes ticker-v6{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.studio[data-kind="traffic"] .headline>span,.studio[data-kind="traffic"] .ticker-label{background:#c87516}
.studio[data-kind="traffic"] .media-placeholder{background:radial-gradient(circle,#593912,#080b11 62%)}
.studio[data-kind="enforcement"] .headline>span,.studio[data-kind="enforcement"] .ticker-label{background:#a53b25}
.studio[data-kind="enforcement"] .media-placeholder{background:radial-gradient(circle,#55251c,#080b11 62%)}
.studio[data-kind="crypto"] .headline>span,.studio[data-kind="crypto"] .ticker-label{background:#9b6c00}
.studio[data-kind="crypto"] .media-placeholder{background:radial-gradient(circle,#55410d,#080b11 62%)}
.studio[data-kind="crypto"] .headline{opacity:0;pointer-events:none}
.studio-crypto{position:absolute;z-index:2;inset:0;padding:clamp(28px,4vw,64px);overflow:auto;background:radial-gradient(circle at 18% 18%,rgba(240,185,11,.24),transparent 38%),linear-gradient(135deg,#16130a,#29200a 55%,#0b0d12)}
.studio-crypto.hidden{display:none}
.crypto-broadcast-head small{display:block;color:#ffe083;font-size:11px;font-weight:900;letter-spacing:2px}.crypto-broadcast-head h2{margin:7px 0 3px;font-size:clamp(30px,4vw,60px)}.crypto-broadcast-head span{display:block;color:#c9c0a0;font-size:12px}
.crypto-broadcast-prices{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:9px;margin:24px 0}.crypto-broadcast-price{display:grid;gap:6px;padding:13px;border:1px solid rgba(255,224,131,.27);border-radius:10px;background:rgba(6,8,12,.55)}.crypto-broadcast-price b{color:#ffe083;font-size:12px}.crypto-broadcast-price strong{font-size:clamp(17px,2vw,29px)}.crypto-broadcast-price span{color:#d3c9a8;font-size:11px}.crypto-broadcast-price.up span{color:#8ff0bc}.crypto-broadcast-price.down span{color:#ff9e9e}.crypto-broadcast-news-head{margin:8px 0 9px;color:#ffe083;font-size:11px;font-weight:900;letter-spacing:1.6px}.crypto-broadcast-news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:980px}.crypto-broadcast-news article{display:grid;gap:7px;padding:13px 15px;border-left:3px solid #e7af13;border-radius:0 8px 8px 0;background:rgba(6,8,12,.62)}.crypto-broadcast-news b{font-size:clamp(14px,1.4vw,20px);line-height:1.2}.crypto-broadcast-news small{color:#c9c0a0;font-size:10px}.crypto-broadcast-empty{color:#c9c0a0;font-size:15px}
.studio-connection{position:fixed;z-index:100;left:50%;top:50%;width:min(620px,calc(100% - 50px));transform:translate(-50%,-50%);padding:28px;border:2px solid #ed1b35;border-radius:12px;background:rgba(5,9,16,.97);box-shadow:0 20px 70px rgba(0,0,0,.7);color:#fff;text-align:center}.studio-connection.hidden{display:none}.studio-connection b{display:block;color:#ff5268;font-size:24px;letter-spacing:1.5px}.studio-connection p{margin:13px 0;font-size:18px}.studio-connection small{color:#aab8ca;line-height:1.5}
.studio-music-audio{display:none}.studio-music-now{position:absolute;z-index:21;top:86px;right:24px;display:flex;align-items:center;gap:11px;max-width:360px;padding:10px 14px;border:1px solid rgba(75,223,232,.35);border-radius:9px;background:rgba(3,12,22,.9);box-shadow:0 10px 30px rgba(0,0,0,.35);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:opacity .3s}.studio-music-now.hidden{display:none}.studio-music-now.blocked{border-color:#ff4058;background:rgba(114,8,27,.96);box-shadow:0 10px 35px rgba(237,27,53,.4)}.studio-music-now small,.studio-music-now b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-music-now small{margin-bottom:3px;color:#64e2e9;font-size:8px;font-weight:900;letter-spacing:1.4px}.studio-music-now.blocked small{color:#fff}.studio-music-now b{font-size:13px}.music-equalizer{display:flex;align-items:flex-end;gap:2px;width:24px;height:22px}.music-equalizer i{display:block;width:4px;border-radius:2px;background:#ed1b35;animation:music-level .8s ease-in-out infinite alternate}.studio-music-now.blocked .music-equalizer i{background:#fff}.music-equalizer i:nth-child(1){height:35%}.music-equalizer i:nth-child(2){height:90%;animation-delay:-.2s}.music-equalizer i:nth-child(3){height:55%;animation-delay:-.45s}.music-equalizer i:nth-child(4){height:75%;animation-delay:-.1s}.studio-music-now.paused .music-equalizer i{animation-play-state:paused}@keyframes music-level{to{height:25%}}

/* OBS 26 gebruikt Chromium 75: houd grid-rijen vast als de breakingbalk verborgen is. */
.studio-header{grid-row:1}.breaking{grid-row:2}.stage{grid-row:3}footer{grid-row:4}

/* Fallbacks voor CSS inset/min/clamp die de oude OBS-browser nog niet kent. */
.visual-stage>img,.visual-stage>video,.visual-stage>iframe,.media-placeholder,.visual-shade,.studio-weather,.studio-empty{top:0;right:0;bottom:0;left:0}
.media-placeholder span{font-size:72px;font-size:clamp(35px,7vw,100px)}
.headline{width:82%;max-width:980px;width:min(980px,82%)}
.headline h1{font-size:64px;font-size:clamp(36px,5.2vw,79px)}
.headline p{font-size:24px;font-size:clamp(16px,1.6vw,26px)}
.studio-weather{padding:48px;padding:clamp(28px,4vw,68px)}
.weather-broadcast-main>span{font-size:100px;font-size:clamp(65px,9vw,145px)}
.weather-broadcast-main h2{font-size:30px;font-size:clamp(19px,2.1vw,34px)}
.weather-broadcast-main strong{font-size:110px;font-size:clamp(72px,9vw,145px)}
.studio-connection{width:620px;max-width:calc(100% - 50px);width:min(620px,calc(100% - 50px))}
.studio-item-meta{display:flex;align-items:center;margin-top:15px}.studio-item-time{display:inline-block;flex:none;margin-right:12px;padding:7px 9px;border:1px solid rgba(40,216,226,.45);border-radius:5px;background:rgba(3,12,22,.72);color:#fff;font-size:12px;font-weight:900;letter-spacing:1px}.studio-item-meta .location{margin-top:0}
.studio-ai-disclosure{position:absolute;z-index:7;top:18px;left:18px;padding:7px 10px;border:1px solid rgba(255,255,255,.5);border-radius:4px;background:rgba(44,25,85,.88);color:#fff;font-size:10px;font-weight:900;letter-spacing:1px}.studio-ai-disclosure.hidden{display:none}
.studio[data-kind="p2000"] .headline{bottom:28%;width:90%;max-width:1160px;width:min(1160px,90%)}
.studio[data-kind="p2000"] .headline h1{font-size:54px;font-size:clamp(34px,4.2vw,64px);margin-bottom:12px}
.studio[data-kind="p2000"] .headline p{max-width:1080px;font-size:20px;font-size:clamp(15px,1.35vw,22px)}
.studio-p2000-facts{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px;margin-top:15px;max-width:1100px;text-shadow:none}
.studio-p2000-facts>div{min-width:0;padding:9px 11px;border:1px solid rgba(40,216,226,.35);border-radius:7px;background:rgba(3,12,22,.82)}
.studio-p2000-facts small,.studio-p2000-facts b{display:block}.studio-p2000-facts small{margin-bottom:4px;color:#71e4eb;font-size:9px;font-weight:900;letter-spacing:1.3px}.studio-p2000-facts b{overflow:hidden;color:#fff;font-size:13px;line-height:1.25;text-overflow:ellipsis}
.studio-p2000-facts .p2000-fact-deployment{grid-column:1/-1}.studio-p2000-facts .p2000-fact-deployment b{white-space:normal}
@media(max-width:900px){.studio-p2000-facts{grid-template-columns:repeat(2,minmax(130px,1fr))}}

/* Telefoonweergave: behoud de goed leesbare kop en vergroot alle ondersteunende informatie. */
@media(max-width:600px){
  .studio{grid-template-rows:58px auto minmax(0,1fr) 76px}
  .studio-header,.obs-mode .studio-header{gap:8px;padding:0 12px;background:rgba(3,8,16,.97)}
  .studio-brand{min-width:0;gap:8px}
  .studio-brand>.studio-brand-logo{width:42px;height:38px;padding:0}
  .studio-brand-logo i:first-child{font-size:22px}
  .studio-brand-logo i:last-child{font-size:10px}
  .studio-brand b{font-size:12px;line-height:1.15;letter-spacing:.7px}
  .studio-brand small{display:none}
  .studio-clock strong{font-size:18px}
  .studio-clock span{display:none}
  .breaking{height:50px}
  .breaking b{flex:none;padding:0 12px;font-size:11px}
  .breaking span{padding:0 11px;font-size:15px}
  .visual-shade{background:linear-gradient(0deg,rgba(1,4,9,.97) 0,rgba(1,4,9,.84) 56%,rgba(1,4,9,.28) 100%)}
  .headline,.studio[data-kind="p2000"] .headline{right:14px;bottom:16px;left:14px;width:auto;max-width:none}
  .headline>span{padding:7px 9px;font-size:11px;letter-spacing:1.2px}
  .headline h1,.studio[data-kind="p2000"] .headline h1{margin:9px 0 10px;font-size:36px;line-height:1.04;letter-spacing:-.7px}
  .headline p,.studio[data-kind="p2000"] .headline p{max-width:none;margin:0;padding:10px 12px;border-left:3px solid var(--cyan);border-radius:0 7px 7px 0;background:rgba(3,10,19,.76);color:#fff;font-size:19px;line-height:1.45;font-weight:500;text-shadow:0 2px 8px #000}
  .studio-item-meta{flex-wrap:wrap;gap:8px;margin-top:12px}
  .studio-item-time{margin:0;padding:7px 9px;font-size:12px}
  .location{font-size:15px;line-height:1.4}
  .studio-ai-disclosure{top:10px;left:10px;padding:7px 9px;font-size:10px}
  .studio-p2000-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .studio-p2000-facts>div{padding:8px 9px}
  .studio-p2000-facts small{font-size:10px}
  .studio-p2000-facts b{font-size:14px;line-height:1.3}
  .ticker-label{padding:0 12px;font-size:17px}
  .ticker{font-size:21px;line-height:76px}
  .ticker>span{padding-right:45px}
  .studio-weather{padding:18px 14px;gap:14px}
  .studio-crypto{padding:20px 14px}.crypto-broadcast-prices{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:15px 0}.crypto-broadcast-price{padding:10px}.crypto-broadcast-price strong{font-size:20px}.crypto-broadcast-news{grid-template-columns:1fr;gap:7px}.crypto-broadcast-news article{padding:10px 12px}.crypto-broadcast-news b{font-size:16px}
  .weather-broadcast-main{justify-content:flex-start;gap:12px}
  .weather-broadcast-main>span{font-size:58px}
  .weather-broadcast-main small{font-size:11px}
  .weather-broadcast-main h2{font-size:21px}
  .weather-broadcast-main strong{font-size:70px}
  .weather-broadcast-main b,.weather-broadcast-main div>span{font-size:15px;line-height:1.35}
  .weather-broadcast-hours{gap:6px}
  .weather-broadcast-hours article{gap:4px;padding:9px 5px}
  .weather-broadcast-hours time,.weather-broadcast-hours small{font-size:11px}
  .weather-broadcast-hours span{font-size:25px}
  .weather-broadcast-hours b{font-size:16px}
  .weather-broadcast-provinces{grid-template-columns:repeat(3,1fr);gap:6px}
  .weather-broadcast-provinces article{padding:9px 5px}
  .weather-broadcast-provinces span{font-size:19px}
  .weather-broadcast-provinces b{font-size:15px}
  .weather-broadcast-provinces small{font-size:10px}
  .studio-connection{max-width:calc(100% - 24px);padding:22px 16px}
  .studio-connection b{font-size:19px}
  .studio-connection p{font-size:16px}
  .studio-music-now{top:66px;right:10px;max-width:calc(100% - 20px);padding:8px 10px}.studio-music-now b{font-size:12px}
}

@media(max-width:600px) and (max-height:560px){
  .studio{grid-template-rows:50px auto minmax(0,1fr) 60px}
  .headline,.studio[data-kind="p2000"] .headline{bottom:10px}
  .headline h1,.studio[data-kind="p2000"] .headline h1{font-size:30px;margin:7px 0}
  .headline p,.studio[data-kind="p2000"] .headline p{padding:7px 9px;font-size:16px;line-height:1.32}
  .studio-p2000-facts{display:none}
  .ticker{font-size:18px;line-height:60px}
}

/* --- Professionalisering: overgangen, iconen en typografie --- */

/* 1. Zachte dip-overgang bij een echte itemwissel i.p.v. een harde cut.
   Alleen actief tijdens een genuine slide-wissel (zie studio.js); losse
   UI-toggles zoals thema/kaart/breaking blijven direct bijwerken. */
#studio-headline,#studio-image,#studio-video,#studio-video-embed{transition:opacity .22s ease}
#studio-headline.slide-transitioning,#studio-image.slide-transitioning,#studio-video.slide-transitioning,#studio-video-embed.slide-transitioning{opacity:0}

/* 2. Breaking-balk klapt in/uit i.p.v. abrupt te verschijnen/verdwijnen.
   display blijft altijd 'flex' zodat de OBS-Chromium-75 grid-rijfallback
   (zie hierboven) intact blijft; zichtbaarheid loopt via max-height/opacity. */
.breaking{max-height:50px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,transform .3s ease}
.breaking.hidden{display:flex!important;max-height:0;opacity:0;transform:translateY(-6px);pointer-events:none}

/* 3. Locatie-pin als eigen SVG (currentColor) i.p.v. los Unicode-teken,
   consistent met de bestaande iconenset in static/icons/. */
.location-pin{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;fill:currentColor}

/* 4. Eigen, iets condensed/zwaarder kop-lettertype voor onderscheidende
   herkenbaarheid, opgebouwd uit veelvoorkomende systeemfonts (geen externe
   font-CDN — de studio moet ook zonder internetverbinding blijven werken). */
.headline h1,.studio[data-kind="p2000"] .headline h1{font-family:'Roboto Condensed','Arial Narrow','Segoe UI',Impact,sans-serif;font-weight:800}

/* 5. Toetsenbordfocus zichtbaar maken. De knoppenbalk staat standaard op
   lage dekking en wordt alleen bij :hover volledig zichtbaar — zonder deze
   regel blijft een via Tab gefocuste knop nagenoeg onzichtbaar. */
.studio-controls:focus-within{opacity:1}
.studio-controls button[data-action="pin"],.studio-controls button[data-action="pause"]{border-color:rgba(0,229,255,.55)}
#studio-control-status{min-width:260px;color:#bceef5}
.studio-controls button:focus-visible,.studio-controls a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.studio-music-now:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* 6. Motion-voorkeur respecteren: alle overgangen/animaties (inclusief de
   nieuwe dip-transitie en de breaking-balk) worden vrijwel direct i.p.v.
   geanimeerd voor wie beweging op scherm liever beperkt.

   Bewust NIET toegepast in OBS-modus (?obs=1): de kijkers van de
   uiteindelijke uitzending zien nooit de "animaties weergeven"-instelling
   van de productie-pc terug - alleen de videobeelden die OBS opneemt. Als
   die instelling op de productie-pc toevallig uitstaat (vaak onbewust,
   bijv. voor batterijbesparing), zou dit anders élke overgang in de
   uitzending zelf hard laten afkappen in plaats van vloeiend te faden. */
@media(prefers-reduced-motion:reduce){
  .studio:not(.obs-mode) #studio-headline,.studio:not(.obs-mode) #studio-image,.studio:not(.obs-mode) #studio-video,.studio:not(.obs-mode) .breaking,.studio:not(.obs-mode) .reporter-panel,.studio:not(.obs-mode) .studio-controls{transition-duration:.001ms!important}
  .studio:not(.obs-mode) .ticker{animation-duration:.001ms!important}
  .studio:not(.obs-mode) .music-equalizer i{animation:none!important}
}

/* --- Cyber desk: matches the visual pattern already used for
   traffic/enforcement/crypto (headline chip, ticker label and
   media-placeholder background all tinted per desk). --- */
.studio[data-kind="cyber"] .headline>span,.studio[data-kind="cyber"] .ticker-label{background:#5b3fb0}
.studio[data-kind="cyber"] .media-placeholder{background:radial-gradient(circle,#2c2258,#080b11 62%)}

/* --- Studio-health indicator: operator/bedienmodus only. CSS is a second
   line of defence on top of studio.js only polling/rendering it when NOT
   obsMode -- if the JS ever fails open, the dot itself stays invisible to
   whatever OBS is actually capturing. --- */
.studio-health{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.04);color:#9fb0c6;font-size:10px;font-weight:700;letter-spacing:.4px;white-space:nowrap}
.studio-health.hidden{display:none}
.obs-mode #studio-health{display:none!important}
.studio-health-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6f829b;flex:none}
.studio-health-dot.health-ok{background:#3ee08a;box-shadow:0 0 6px rgba(62,224,138,.7)}
.studio-health-dot.health-bad{background:#ff4058;box-shadow:0 0 6px rgba(255,64,88,.7)}

/* --- Reporter Mode: source-status grid, warnings and possible
   cyber/storing correlation notes (always shown with the "mogelijk
   verband – niet bevestigd" caveat baked into the copy, never rendered as
   a confirmed claim). --- */
.reporter-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.reporter-status-grid>div{padding:8px 10px;border:1px solid rgba(40,216,226,.22);border-radius:7px;background:rgba(3,12,22,.5)}
.reporter-status-grid small{display:block;margin-bottom:3px;color:#71e4eb;font-size:9px;font-weight:900;letter-spacing:1px}
.reporter-status-grid b{display:block;overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis}
#reporter-live-status.reporter-live{color:#3ee08a}
#reporter-live-status.reporter-old{color:#ffb84d}
.reporter-warnings{margin:12px 0 0;padding:0;list-style:none}
.reporter-warnings.hidden{display:none}
.reporter-warnings li{margin-bottom:6px;padding:7px 9px;border-left:3px solid #ff9e2b;border-radius:0 6px 6px 0;background:rgba(255,158,43,.12);color:#ffd9a8;font-size:11px;line-height:1.4}
.reporter-correlations{margin-top:12px}
.reporter-correlations.hidden{display:none}
.reporter-correlation-row{margin-bottom:6px;padding:8px 9px;border-left:3px solid #9b7bff;border-radius:0 6px 6px 0;background:rgba(91,63,176,.16)}
.reporter-correlation-row b{display:block;color:#fff;font-size:12px}
.reporter-correlation-row span{display:block;margin-top:2px;color:#cfc4ff;font-size:11px;line-height:1.35}
.reporter-correlation-row small{display:block;margin-top:3px;color:#ffb84d;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}

/* --- Next-slide media preloading: this element must stay laid out
   (not display:none) so the browser actually fetches/decodes the video
   ahead of time; it is just made invisible and non-interactive. --- */
.studio-preload-hidden{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1}

@media(max-width:600px){
  .studio-health{display:none}
  .reporter-status-grid{grid-template-columns:1fr 1fr;gap:6px}
}