/* Titus Retro oppervlakken, herontwerp 2026-10-12 (Apple-design, emilkowalski/skills). Laadt als laatste; alleen uiterlijk.
   Drie lagen, nooit gestapeld:
   1. aquarel: de achtergrond, onaangeroerd.
   2. chrome: balk, speler, menu's en dialoog. Glas (Bens tint en lichtrand) over een waas; Ben 2026-10-12: alle menu's glas.
      Het materiaal ligt op ::before: een backdrop-filter op het element zelf maakt het containing block voor elk
      position:fixed-kind (menu's, dossier, previews); gemeten met tegenproef F01 van check_live_defecten.
   3. blad: per pagina één leesvlak (.blad, de .wrap van gids en privacy, Creators op home, de keuzekolom van de kamer).
      Bijna dekkend, zonder waas, want het is soms zelf de scroller en draagt vaste previews.
   Binnen het blad is alles plat: secties zonder vlak, kaarten als een lichte vulling, knoppen getint (button.css).
   Glas met breking (Bens presets) alleen op wat vrij boven de aquarel zweeft: zie button.css. */

/* ---------- mobiel als native (emilkowalski mobile-native) ---------- */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
:is(button,a,summary,[role="button"]){touch-action:manipulation}

/* ---------- 2. chrome ---------- */
html :is(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar,.titus-player[data-paper-compact]){
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;border-radius:0!important;box-shadow:0 1px 0 var(--tr-hairline),0 10px 30px -18px rgba(0,0,0,.35)!important;isolation:isolate;
}
html #titus-paper-room .room-transport{
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask:none!important;mask:none!important;filter:none!important;
  border:0!important;border-radius:0!important;box-shadow:0 -1px 0 var(--tr-hairline),0 -10px 30px -18px rgba(0,0,0,.35)!important;isolation:isolate;
}
html :is(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar,.titus-player[data-paper-compact])::before,html #titus-paper-room .room-transport::before{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none;border-radius:inherit;
  background:var(--lq-sheen),linear-gradient(var(--lq-tint),var(--lq-tint)),var(--tr-chrome)!important;-webkit-mask:none!important;mask:none!important;filter:none!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  box-shadow:var(--lq-rim)!important;
}
:where(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar){position:relative} /* specificiteit 0: alleen waar niets anders een positie zet */
html :is(.site-bar,body>header.bar) .room-dock{box-shadow:none!important}
html :is(.site-bar,body>header.bar) .room-dock.room-dock::before{display:none!important}
/* uitklapmenu's en de dialoog: hetzelfde materiaal, iets dichter omdat ze over inhoud liggen */
html :is(.section-menu nav,.site-menu-panel,.room-next-choice){
  background:var(--lq-sheen),linear-gradient(var(--lq-tint),var(--lq-tint)),var(--tr-sheet)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:var(--lq-rim),var(--lq-shadow)!important;
}
html .room-next-choice::backdrop{background:rgba(20,24,28,.32)}
html :is(.section-menu nav,.site-menu-panel) a{color:var(--tr-ink)!important;border-radius:0!important}
@media(hover:hover) and (pointer:fine){html :is(.section-menu nav,.site-menu-panel) a:hover{background:var(--tr-fill)!important}}
/* de oude geschilderde spelerlagen weg; de bediening wordt getint, play is de hoofdactie */
html #titus-paper-room :is(.titus-controls button,.reference-secondary>button,.reference-speed,.reference-volume>button)::before{display:none!important}
html :is(#titus-paper-room :is(.titus-controls button,.reference-secondary>button,.reference-speed,.reference-volume>button),.titus-player .titus-cover,.titus-player .titus-actions>button,.titus-track-info){
  background:var(--lq-sheen),var(--lq-tint)!important;border:0!important;border-radius:var(--lq-r-pil)!important;box-shadow:var(--lq-rim),var(--lq-shadow-klein)!important;color:var(--tr-btn-ink)!important;filter:none!important;
}
html :is(#titus-paper-room .titus-controls button[data-player-control="play"],.titus-player button.titus-play.titus-play){
  background:var(--lq-sheen),var(--lq-tint-primary)!important;color:var(--lq-ink-primary)!important;border:0!important;border-radius:var(--lq-r-pil)!important;box-shadow:var(--lq-rim),var(--lq-shadow-klein)!important;
}

/* ---------- 3. blad ---------- */
html :is(.blad,body>.wrap,main.wrap,footer.wrap,.harbor-rest,.kies,.room-options-panel,.room-listen-scroll>ol){
  background:var(--tr-sheet)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:0 30px 80px -40px rgba(0,0,0,.35)!important;
}
/* een blad in een blad (de kolom in een infopagina): geen tweede vlak */
html :is(.blad,.wrap) :is(.kies,.room-options-panel){background:transparent!important;box-shadow:none!important}

/* binnen het blad: secties, koppen en groepen zonder eigen vlak */
html :is(.blad,.wrap,.kies,.harbor-rest) :is(header.mast,header.route-head,section.mast,nav.crumbs,nav.rail,section.era,section.pick,section.starthere,
  section.prose,.tools,section.book-group,footer.foot,main,main.notfound,h2.sechead,h1.ifl-h1,div.web,.podcast-picker-nav,.mast-finder,.dekking,.thead,.startbox,.route,.route-nav){
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
/* grote secties scheidt een haarlijn, geen doos */
html .blad>:is(section,main,div.tools,footer.foot)+:is(section,main,div.tools,footer.foot){border-top:1px solid var(--tr-hairline)!important}

/* kaarten en groepen: een lichte vulling, hoek 0 (preset titus rechthoek), geen schaduw of rand */
html :is(a.pcard,a.pick,article.pick,article.bk,article.person,details.item,div.group,.harbor-rest .maker,.ifl-cols>div,.picker-wheel-shell,.picker-format-group,.podcast-wall,.room-listen-scroll li,.room-balloon){
  background:var(--tr-fill)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:none!important;
}
/* een kaart in een kaart: plat, gescheiden door een haarlijn */
html :is(div.group,.picker-wheel-shell,.podcast-wall,.ifl-cols>div) :is(details.item,a.pcard,a.pick,article.pick){background:transparent!important;box-shadow:inset 0 -1px 0 var(--tr-hairline)!important}
@media(hover:hover) and (pointer:fine){html :is(a.pcard,a.pick,.harbor-rest .maker):hover{background:var(--tr-tint)!important}}
/* de huidige rij in de wachtrij en de keuzeband van een wiel: de teal tint */
html .room-listen-scroll li:is([aria-current],.is-current,.current){background:var(--tr-tint)!important}
html .picker-wheel-band{background:var(--lq-sheen),var(--lq-tint-selected)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:var(--lq-rim)!important}
html .titus-queue-track{background:transparent!important;box-shadow:none!important;color:var(--tr-ink)!important}

/* koppelingen die als pil zijn opgemaakt: getint */
html :is(.dekrij a,span.listen-fallback,.tr-btn.episode-details){
  background:var(--lq-sheen),var(--lq-tint)!important;color:var(--tr-btn-ink)!important;border:0!important;border-radius:var(--lq-r-pil)!important;box-shadow:var(--lq-rim)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Home: de labels liggen op de aquarel, dus het dichtere bladvlak */
html :is(.settings h3,.setting-place){background:var(--tr-sheet)!important;color:var(--tr-ink)!important;border-radius:var(--lq-r-pil)!important;box-shadow:none!important;text-shadow:none!important}

/* de kamer zelf heeft geen eigen kleur: de aquarel van het podium loopt door */
html section.titus-room{background-color:transparent!important}

/* ---------- typografie (Apple: tracking en leading per grootte) ---------- */
html :is(.blad,.wrap,.harbor,.kies) :is(h1,.brand){letter-spacing:-.02em;line-height:1.05}
html :is(.blad,.wrap,.kies) h2{letter-spacing:-.01em;line-height:1.15}

/* ---------- toegankelijkheid ---------- */
@media(prefers-reduced-transparency:reduce){
  html :is(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar,.titus-player[data-paper-compact])::before,html #titus-paper-room .room-transport::before,
  html :is(.section-menu nav,.site-menu-panel,.room-next-choice){background:var(--lq-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html :is(.blad,body>.wrap,main.wrap,footer.wrap,.harbor-rest,.kies,.room-options-panel){background:var(--lq-solid)!important}
}
@media(prefers-contrast:more){html :is(.blad,body>.wrap,main.wrap,.harbor-rest,.kies){box-shadow:inset 0 0 0 1px var(--tr-ink)!important}}

/* legacy-regels op knopklassen (.primary, .back, ...) mogen de vorm en kleur van de component niet meer overschrijven */
html .tr-btn:not([data-variant="tab"]):not([data-variant="wheel"]):not([data-variant="tile"]):not([data-material]):not([data-glass="rechthoek"]){border:0!important;border-radius:var(--lq-r-pil)!important}
html .tr-btn[data-glass="rechthoek"]{border:0!important;border-radius:var(--lq-r-rechthoek)!important}
html .tr-btn:is([data-variant="primary"],.primary,.room-add-matches){background:var(--lq-sheen),var(--lq-tint-primary)!important;color:var(--lq-ink-primary)!important}
html :is(.blad,.wrap,.kies,.titus-room) .podcast-picker-step>h2{background:transparent!important;box-shadow:none!important}
html .tr-field{background-color:var(--tr-fill)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important}
/* legacy zet op sommige knopklassen transition:all; alleen transform mag bewegen (Emil: nooit transition:all) */
html .tr-btn{transition:transform 160ms var(--tr-ease-out)!important}
@media(prefers-reduced-motion:reduce){html .tr-btn{transition:none!important}}
/* podcastmuur op 375 px: de tegel is 41 px breed en knipte met overflow:hidden zijn raakvlak van 44 px af (oude fout,
   check_knop_beeld); de naam eronder kapt zichzelf al af */
html .podcast-tile.tr-btn{overflow:visible!important}
/* ...maar de naam eronder blijft binnen de tegel (zonder dit liepen de shownamen als een scramble over elkaar) */
html .podcast-tile.tr-btn>span{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

/* ---------- basisaudit 2026-10-12 (Ben: titels over elkaar, speler te groot, niet doorscrollen, onderkant onzichtbaar) ----------
   Gemeten met gates/check_basis.mjs en echte touch-scroll op 390x664 (iPhone met Safari-balken). */

/* 1. Wachtrijregel: titel, show en duur onder elkaar. tr-btn maakte de knop inline-flex, waardoor de drie regels naast
      elkaar werden geperst en over elkaar liepen. */
html .titus-queue-track.tr-btn{display:block!important;text-align:left!important;padding:6px 0!important;min-width:0}
html .titus-queue-track.tr-btn::after{display:none}

/* 2. De melding in de kamer ("Room for 100 more...") hield permanent 64 px leeg onder de inhoud. Nu zweeft ze kort boven
      de balk en verdwijnt na vier seconden; de inhoud loopt door tot de balk. */
html .titus-room:is(.has-balloon,.has-status)>.room-stage{padding-bottom:0!important}
html .titus-room.x-bars:is(.has-balloon,.has-status)>.room-stage{padding-bottom:var(--room-bottom-h,0px)!important}
html .room-balloon.is-shown{animation:tr-melding-weg .3s ease 4s forwards}
@keyframes tr-melding-weg{to{opacity:0;visibility:hidden}}
html .room-balloon{pointer-events:none;font-size:14px;padding:8px 16px!important}

/* 3. Matchbalk op de telefoon: één rij (teller, zelf kiezen, toevoegen) in plaats van twee */
@media(max-width:700px){
  html .room-matchbar{flex-wrap:nowrap!important;gap:8px!important;padding:6px 12px max(6px,env(safe-area-inset-bottom))!important;min-height:0!important}
  html .room-matchbar>*{flex:0 0 auto}
  html .room-matchbar{flex-wrap:wrap!important;row-gap:2px!important}
  html .room-pick-self.room-pick-self{flex:1 0 100%!important;order:3!important;min-height:44px!important;white-space:nowrap!important;text-align:center;font-size:13px!important;line-height:1.2;padding:4px 12px!important}
  html .room-matchbar :is(.room-match-count,.room-view-matches,[class*="count"]){font-size:17px!important}
}

/* 4. Speler op de telefoon: één rij bediening (44 px, play 56 px), voortgang op één regel, geen volumerij (dat doet de
      telefoon met zijn knoppen). Was 273 px, een derde van het scherm. */
@media(max-width:700px){
  html #titus-paper-room .titus-controls{display:flex!important;justify-content:center!important;align-items:center!important;gap:12px!important;height:auto!important;min-height:0!important;padding:8px 0 2px!important}
  html body #titus-paper-room .titus-room-transport .titus-controls>button.tr-btn.tr-btn{flex:0 0 auto!important;grid-column:auto!important;position:static!important;inset:auto!important;transform:none!important;margin:0!important;width:44px!important;height:44px!important;min-width:44px!important}
  html body #titus-paper-room .titus-room-transport .titus-controls>button.tr-btn.tr-btn[data-player-control="play"]{width:56px!important;height:56px!important}
  html #titus-paper-room .reference-secondary{min-height:0!important;padding:0!important;margin:0!important}
  html body #titus-paper-room .titus-room-transport .reference-secondary>*{width:36px!important;height:36px!important;min-width:36px!important}
  html body #titus-paper-room .titus-room-transport .reference-secondary{display:flex!important;justify-content:center!important;gap:24px!important}
  html body #titus-paper-room .titus-room-transport .titus-progress.titus-progress{width:100%!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:10px!important;min-height:0!important;padding:0 4px!important}
  html body #titus-paper-room .titus-room-transport .titus-progress>span.mono{width:auto!important;font-size:11px!important;grid-row:1!important}
  html body #titus-paper-room .titus-room-transport .titus-progress>.titus-elapsed{grid-column:1!important}
  html body #titus-paper-room .titus-room-transport .titus-progress>.titus-duration{grid-column:3!important}
  html body #titus-paper-room .titus-room-transport .titus-progress>input[type=range]{grid-column:2!important;grid-row:1!important;width:100%!important;min-height:32px!important;margin:0!important}
}
@media(max-width:700px) and (pointer:coarse){html #titus-paper-room .reference-volume{display:none!important}}
@media(max-width:700px){html .room-balloon{display:none!important}} /* op de telefoon lag de melding over de wielen */

/* ---------- consistentie 2026-10-12 (Ben: "de ene pagina heeft liquid glass, de andere niet"; gates/check_consistentie.mjs) ----------
   Het systeem kent twee vormen (pil en hoek 0), geen kaders rondom, geen onderstreepte knoppen en één knopletter. */
/* knoppen: nooit onderstreept; gewone knoppen in de broodletter op 15 px (cta, tab, wiel, tegel, icoon en maat l houden hun maat) */
html .tr-btn,html .tr-btn *{text-decoration:none!important}
html .tr-btn:not([data-variant="cta"]):not([data-variant="tab"]):not([data-variant="wheel"]):not([data-variant="tile"]):not([data-variant="icon"]):not([data-material]):not([data-size="l"]):not(.route-link){
  font-family:var(--tr-font-body)!important;font-size:15px!important;line-height:1.2!important;letter-spacing:0!important}
/* lijsten met resultaten (Matches), het dossier en de verdere kaartjes: hoek 0, geen kader, de lichte vulling */
html :is(section.episode-results){background:var(--tr-sheet)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:0 30px 80px -40px rgba(0,0,0,.35)!important}
html :is(li.episode-result,section.titus-dossier-inline,div.pills,nav.seqnav){background:var(--tr-fill)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:none!important}
html :is(span.episode-art,span.thumb,span.kies-icoon,code){border:0!important;border-radius:var(--lq-r-rechthoek)!important}
/* labels en tellers: een getinte pil */
html :is(span.tag,span.kies-plaats,strong.room-dock-match-count,strong.room-dock-queue-count){border:0!important;border-radius:var(--lq-r-pil)!important}
html :is(span.tag,span.kies-plaats){background:var(--lq-sheen),var(--lq-tint)!important;color:var(--tr-btn-ink)!important;box-shadow:var(--lq-rim)!important}
html :is(#titus-paper-room,.titus-dossier) summary,html button.episode-more{border:0!important;border-radius:var(--lq-r-pil)!important;background:var(--lq-sheen),var(--lq-tint)!important;box-shadow:var(--lq-rim),var(--lq-shadow-klein)!important;color:var(--tr-btn-ink)!important}
html .blad a:not(.tr-btn):not(.dekrij a){border-radius:0!important}
/* onder de keuzekolom loopt het blad door (About these podcasts lag los op de aquarel en leek weg te vallen) */
html .titus-room :is(details.room-about,.room-about){background:var(--tr-sheet)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important;margin-top:0!important;padding:8px 20px!important}
/* Matches: titel, meta en knoppen op één lijn links */
html li.episode-result :is(h2,h3,strong,.episode-title,p,div){text-align:left!important}
/* podcastmuur op de telefoon: een naam van 46 px breed wordt "The …"; de cover is het herkenningsteken, de naam blijft voor schermlezers */
@media(max-width:700px){html .podcast-tile.tr-btn>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}}
/* podcastmuur: een tegel is alleen de cover (de knopvulling en -opvulling maakten er een postzegel in een getint vak van) */
html .podcast-tile.tr-btn{background:transparent!important;padding:0!important;min-height:0!important;height:auto!important;justify-content:flex-start!important;align-items:stretch!important}
html .podcast-tile.tr-btn img{width:100%!important;height:auto!important;aspect-ratio:1!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important}
@media(max-width:700px){html .podcast-wall-grid{grid-template-rows:none!important;grid-auto-rows:auto!important;row-gap:8px!important}}
/* wachtrij tot tegen de speler: de extra 50 px en 72 px waren ruimte voor de oude speler van 273 px en lieten een lege
   strook aquarel tussen lijst en speler (de inhoud "verdween aan de onderkant") */
html .titus-room[data-reference-player][data-mode="listen"]>.room-stage{padding-bottom:var(--reference-compact-h,106px)!important}
html .titus-room[data-reference-player][data-mode="listen"].player-open>.room-stage{padding-bottom:min(var(--room-player-h,0px),55dvh,390px)!important}
html .titus-room:has(.titus-player.is-empty)[data-reference-player][data-mode="listen"]>.room-stage{padding-bottom:0!important}
html #titus-paper-room.x-bars .room-listen-scroll{padding-bottom:16px!important}

/* tabrij van de kamer (Mood, Period, Podcast form, Search episodes): allemaal tabs; de gekozen is de glazen pil */
html .podcast-picker-nav .tr-btn:not([aria-selected="true"]):not([aria-current="page"]):not([aria-current="true"]):not(.is-current){background:none!important;box-shadow:none!important;text-shadow:none!important;color:var(--tr-ink-quiet-on-panel)!important}
html .podcast-picker-nav summary{background:none!important;box-shadow:none!important;text-shadow:none!important;border:0!important;color:var(--tr-ink-quiet-on-panel)!important}
/* kleine telefoon: het label van de beschaving raakte de regel erboven */
html .decision .place{margin-top:14px!important}
/* schuifknoppen en voortgang in het teal van het glas, niet in het oude signaalblauw */
html input[type=range]{accent-color:#118183}
html input[type=range]::-webkit-slider-thumb{background:#118183!important;border-color:#0c6264!important}
html input[type=range]::-moz-range-thumb{background:#118183!important;border-color:#0c6264!important}
/* het afleveringsdossier naast de wachtrij is lopende tekst: het blad, net als de wachtrij */
html section.titus-dossier:not(.titus-dossier-inline){background:var(--tr-sheet)!important;border:0!important;border-radius:var(--lq-r-rechthoek)!important;box-shadow:0 30px 80px -40px rgba(0,0,0,.35)!important}
html .tr-btn.hits-wis{padding-inline:16px!important}

/* Local review: the painting continues beneath individual controls. Preserve
   canonical button presets and native scroll owners. Reading fields for prose,
   search and episode information stay separately scoped. */
html[data-local-preview="1"] :is(.kies,.room-listen-scroll>ol,.picker-wheel-shell,.picker-format-group,.podcast-wall){background:transparent!important;box-shadow:none!important}
html[data-local-preview="1"] :is(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar){box-shadow:none!important}
html[data-local-preview="1"] :is(.room-dock,.utilities,.room-header,.room-matchbar,.site-bar,body>header.bar)::before{background-image:var(--tr-chrome-world,none)!important;background-color:transparent!important;background-size:var(--tr-chrome-world-size,auto)!important;background-position:var(--tr-chrome-world-position,center)!important;background-repeat:no-repeat!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-local-preview="1"] .picker-wheel-shell::before,html[data-local-preview="1"] .picker-wheel-shell::after{background:none!important}
/* A soft tonal wash belongs behind the text, not inside the glass. The
   painted scene remains visible and the feather has no rectangular boundary. */
html[data-local-preview="1"] .podcast-picker-step{position:relative;isolation:isolate}
html[data-local-preview="1"] .podcast-picker-step::before{content:"";position:absolute;inset:-12px -16px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(248,246,237,.58) 0%,rgba(248,246,237,.36) 58%,transparent 86%)}
html[data-local-preview="1"][data-theme="dark"] .podcast-picker-step::before{background:radial-gradient(ellipse at center,rgba(13,25,33,.58) 0%,rgba(13,25,33,.36) 58%,transparent 86%)}
html[data-local-preview="1"] .picker-wheel-voet{position:relative;isolation:isolate}
html[data-local-preview="1"] .picker-wheel-voet::before{content:none!important;background:none!important}
html[data-local-preview="1"] .picker-wheel-voet{background:transparent!important;box-shadow:none!important}
html[data-local-preview="1"] :is(.picker-wheel-terug,.picker-wheel-verder)::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;background:radial-gradient(ellipse closest-side,rgba(248,246,237,.82) 0%,rgba(248,246,237,.72) 80%,transparent 100%)}
html[data-local-preview="1"][data-theme="dark"] :is(.picker-wheel-terug,.picker-wheel-verder)::before{background:radial-gradient(ellipse closest-side,rgba(13,25,33,.82) 0%,rgba(13,25,33,.72) 80%,transparent 100%)}
html[data-local-preview="1"] input.tr-field{background:var(--lq-sheen),var(--lq-tint-field)!important;color:var(--tr-ink)!important}
html[data-local-preview="1"] input::placeholder{color:var(--tr-ink)!important;opacity:.9!important}
html[data-local-preview="1"] .book-method{font-size:14px;line-height:1.6;margin-top:40px}
/* Reading prose needs a quieter painted value range. A variable wash with
   feathered edges carries no border, card silhouette, blur or layout change. */
html[data-local-preview="1"] body.page-books section.prose{position:relative;isolation:isolate}
html[data-local-preview="1"] body.page-books section.prose::before{content:"";position:absolute;inset:-24px -32px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 38% 24%,rgba(248,246,237,.92),rgba(248,246,237,.76) 74%,rgba(248,246,237,.65));-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
html[data-local-preview="1"][data-theme="dark"] body.page-books section.prose::before{background:radial-gradient(ellipse at 38% 24%,rgba(13,25,33,.92),rgba(13,25,33,.76) 74%,rgba(13,25,33,.65))}
/* Keep the decorative wash within the narrow page's 20px side gutters. */
@media(max-width:760px){
  html[data-local-preview="1"] body.page-books section.prose::before{inset-inline:-20px}
}
/* Counts are useful information, not faint decoration. Keep wheel scaling and
   existing labels; strengthen only the small type, never the glass preset. */
html[data-local-preview="1"] :is(.chip-n,.picker-wheel-option small){font-size:14px!important;font-weight:650!important;line-height:1.25!important;color:var(--tr-ink)!important;opacity:1!important;text-shadow:0 1px 1px rgba(248,246,237,.96),1px 0 1px rgba(248,246,237,.96),-1px 0 1px rgba(248,246,237,.96),0 -1px 1px rgba(248,246,237,.96)}
html[data-local-preview="1"][data-theme="dark"] :is(.chip-n,.picker-wheel-option small){text-shadow:0 1px 1px rgba(13,25,33,.98),1px 0 1px rgba(13,25,33,.98),-1px 0 1px rgba(13,25,33,.98),0 -1px 1px rgba(13,25,33,.98)}
/* Long-form reading uses a feathered local luminance field, not the old
   rectangular near-opaque sheet. No scroll/layout or wording changes. */
html[data-local-preview="1"] :is(.blad,body>.wrap,main.wrap,footer.wrap,.harbor-rest){background:radial-gradient(ellipse at center,rgba(248,246,237,.95) 0%,rgba(248,246,237,.86) 68%,rgba(248,246,237,.35) 91%,transparent 100%)!important;box-shadow:none!important;border:0!important}
html[data-local-preview="1"][data-theme="dark"] :is(.blad,body>.wrap,main.wrap,footer.wrap,.harbor-rest){background:radial-gradient(ellipse at center,rgba(13,25,33,.96) 0%,rgba(13,25,33,.88) 68%,rgba(13,25,33,.40) 91%,transparent 100%)!important}

/* Herkomst: Codex-kandidaat v9 (surfaces.css sha256 ba36146fe4ab), blokken G01 tot en met G05 uit glas-audit-20261014/AUDIT.md.
   G01/G02 zoeken en spelermenu: tekst eronder verborgen; G03 dossiercontrast; G04 donkere dag-inkt op primaire knop (was wit op 54% teal, 2,56:1); G05 mute blijft op telefoon. */
/* G01/G02: a transparent overlay cannot have a second readable text-layer underneath. */
html .podcast-picker-flow:has(.room-search[open])>.podcast-picker-step{visibility:hidden!important}
html .titus-room:has(.room-options[open])>.room-stage>[role="region"]{visibility:hidden!important}
html .titus-room:has(.room-options[open]) .room-transport{visibility:hidden!important}
html .podcast-picker-nav .room-search[open] .tools,
html .titus-room .room-options-panel{background:radial-gradient(ellipse at center,rgba(246,243,233,.87) 0%,rgba(246,243,233,.64) 68%,rgba(246,243,233,.16) 100%)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--tr-ink)!important;max-width:calc(100vw - 24px);overscroll-behavior:contain}
html[data-theme="dark"] .podcast-picker-nav .room-search[open] .tools,
html[data-theme="dark"] .titus-room .room-options-panel{background:radial-gradient(ellipse at center,rgba(13,25,33,.90) 0%,rgba(13,25,33,.66) 68%,rgba(13,25,33,.20) 100%)!important}
/* G03: continuous local luminance field, without an opaque rectangular card. */
html body #titus-paper-room section.titus-dossier-inline{position:static;background:radial-gradient(ellipse at center,rgba(248,246,237,.96) 0%,rgba(248,246,237,.90) 65%,rgba(248,246,237,.65) 88%,transparent 100%)!important;color:#253a40!important;padding:24px!important;line-height:1.6;isolation:isolate}
html[data-theme="dark"] body #titus-paper-room section.titus-dossier-inline{background:radial-gradient(ellipse at center,rgba(13,25,33,.97) 0%,rgba(13,25,33,.92) 65%,rgba(13,25,33,.70) 88%,transparent 100%)!important;color:#f3f0e7!important}
html body #titus-paper-room section.titus-dossier-inline :is(p,li,small,.mono){color:inherit!important}
/* G04: day action ink is dark, not white on 54% translucent teal. */
html:not([data-theme="dark"]){--lq-ink-primary:#14383b}
html .tr-btn:is([data-variant="primary"],.primary,.room-add-matches){text-shadow:none!important}
/* G05: audio.muted is independent from whether Safari permits audio.volume writes. */
html body #titus-paper-room.player-open{--fb-mute:44px}
html body #titus-paper-room.player-open .reference-volume>[data-player-control="mute"]{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
@media(max-width:700px){
 html body #titus-paper-room.player-open .reference-volume{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px 44px!important;gap:8px!important;height:44px!important;margin:4px auto 0;padding:0 8px!important;width:min(360px,100%)!important}
 html body #titus-paper-room.player-open .reference-volume>.paper-volume-down{grid-column:1!important;grid-row:1!important}
 html body #titus-paper-room.player-open .reference-volume .titus-volume{grid-column:2!important;grid-row:1!important;min-width:0}
 html body #titus-paper-room.player-open .reference-volume>.paper-volume-up{grid-column:3!important;grid-row:1!important}
 html body #titus-paper-room.player-open .reference-volume>[data-player-control="mute"]{grid-column:4!important;grid-row:1!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 html body #titus-paper-room .titus-room-transport .reference-secondary>*{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
}

/* Herkomst: Codex-kandidaat v9 (surfaces.css sha256 ba36146fe4ab): raakvlakken van 44 px. .room-pick-self van 32 naar 44 (bestaande regel hierboven), M002/M003-pillen,
   speler-vlakken en -raakzones, summary en a.tr-btn.jump, menu-links. */
/* M002/M003: show-link pills wrap inside their reading sheet. The legacy
   mobile nowrap/centering clipped the first link; compact desktop chips were
   only 34px tall. Keep complete labels and real 44px faces, not wheel options. */
html :is(.blad,.wrap) .pills:has(>a.pill){
  box-sizing:border-box;width:100%;min-width:0;max-width:100%;
  display:flex;flex-wrap:wrap!important;justify-content:center!important;
  margin-inline:0!important;overflow:visible!important;
}
html :is(.blad,.wrap) .pills>a.pill{
  box-sizing:border-box;flex:0 1 auto!important;min-width:44px;max-width:100%;
  min-height:44px!important;height:auto;white-space:normal!important;overflow-wrap:anywhere;
  display:inline-flex!important;align-items:center;justify-content:center;text-align:center;
}

/* Actual player face/hit regressions: keep the existing design and handlers. */
html body #titus-paper-room .reference-secondary>button,
html body #titus-paper-room .reference-speed{
  min-width:44px;
  min-height:44px;
}
@media(max-width:700px){
  html body #titus-paper-room .titus-room-transport .titus-progress.titus-progress{
    grid-template-rows:44px!important;
    height:44px!important;
  }
}
/* Empty volume grid space must not intercept the neighbouring Next button. */
html body #titus-paper-room .reference-volume{pointer-events:none}
html body #titus-paper-room .reference-volume>*{pointer-events:auto}
/* Restore the existing compact rule. The desktop override exposed an entirely
   offscreen range to Tab; expanded progress stays intact and reachable. */
html body #titus-paper-room:not(.player-open) .titus-progress{visibility:hidden}

/* v7 approved final touch proposal: ae5e1f10cb359df24f99c517b4120a4131649b40e8394ae3c8dc13642390196a */
/* Response-only shared UI proposal; append to components/surfaces.css after
   parent integration approval. Native details marker/display and all labels,
   destinations, grid, filtering and controller/scroll ownership stay intact. */
html .titus-room .room-menu-group > summary {
  min-height: 44px;
  padding-block: calc((44px - 1.4em) / 2);
}
html a.tr-btn.jump {
  min-height: 44px;
}

/* menu-links in het sectiemenu (uit het blok 'Consistent clear optical faces') */
html :is(.section-menu nav,.site-menu-panel) a{min-height:44px;display:flex;align-items:center;justify-content:center}

/* Herkomst: Codex-kandidaat v9 (surfaces.css sha256 ba36146fe4ab) en period-scroll-recovery.js: de periodewiel snapt op de band. */
/* Align the native period snapport with the existing painted selection band.
   Original scroll handlers, smooth behavior, choices and row heights stay.
   On short layouts the last 48px row needs 16px more tail to reach that band.
   This repairs proven geometry only; engine/timing observations stay in QA. */
#picker-period>.picker-wheel-shell>.picker-wheel{
  scroll-padding-block:28px calc(100% - 92px);
}
@media(max-height:520px){
  #picker-period>.picker-wheel-shell>.picker-wheel{
    scroll-padding-block:28px calc(100% - 76px);
    padding-bottom:244px;
  }
}

/* Herkomst: Codex-kandidaat v9 (surfaces.css sha256 ba36146fe4ab): heldere mediapagina's (Reading en Watching) waarop de aquarel zichtbaar blijft; alleen scoped op data-system=media en family reading/watching. Home, Listening en info zijn niet geraakt. */
/* v7 approved media-clear v2: 0aa7e0172c694a56b4b610e2fc1df732383fb47f12f9393262ce8d09cbc03cd2 */
/* Clear navigation/filter planes for the existing Reading/Watching pages.
   No layout, scroll owner, typography, label, geometry or input changes. */
html[data-system="media"]:is([data-family="reading"],[data-family="watching"])
 :is(.blad,.kies,.picker-wheel-shell,.picker-format-group,.podcast-wall,.ifl-cols>div){
 background:transparent!important;box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html[data-system="media"]:is([data-family="reading"],[data-family="watching"])
 .picker-wheel-shell::before,
html[data-system="media"]:is([data-family="reading"],[data-family="watching"])
 .picker-wheel-shell::after{background:none!important}
html[data-system="media"]:is([data-family="reading"],[data-family="watching"])
 .picker-wheel-band{
 border-radius:var(--lq-r-pil)!important;
 background:linear-gradient(158deg,rgba(255,255,255,.11),transparent 27%,transparent 72%,rgba(255,255,255,.045)),rgba(17,129,131,.025)!important;
}

/* Preserve the original solid .blad/.kies preference (surfaces.css:96-100).
   Later scoped paint rules must not override reduced transparency. */
@media(prefers-reduced-transparency:reduce){
 html[data-system="media"]:is([data-family="reading"],[data-family="watching"])
  :is(.blad,.kies){background:var(--lq-solid)!important}
}

/* v8 distinct reduced-transparency correction; 567745967c30f0956525013fac99ae215bd460ca22c0b81f25a091a879cfea4e */
/* Targeted V7-PREF-001 correction. Same matching elements, stronger root specificity.
   Default clear material is unchanged; only the actual reduced-transparency condition differs. */
@media(prefers-reduced-transparency:reduce){
 html:root[data-system="media"]:is([data-family="reading"],[data-family="watching"])
 :is(.blad,.kies){
  background:var(--lq-solid)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
 }
}