:root { color-scheme:light; font: 18px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;         }
* {box-sizing:border-box;}
body {margin:0; background:var(--bg); color:var(--ink);}
a {color:var(--navy); text-decoration-thickness:2px; text-underline-offset:3px;}
a:hover {color:var(--link-hover);}
button, input {font:inherit;}
button {background:var(--button-soft); color:var(--ink); border:2px solid var(--line); border-radius:10px; padding:10px 15px; min-height:48px; cursor:pointer; font-weight:700;}
button:hover:not(:disabled){background:var(--item-hover);}
button.primary, button.mobile-list-toggle {background:var(--navy); color:var(--panel-bg); border-color:var(--navy);}
button.primary:hover:not(:disabled), button.mobile-list-toggle:hover:not(:disabled){background:var(--action-hover);}
button:disabled {background:var(--disabled-bg); border-color:var(--line); color:var(--muted); cursor:not-allowed;}
button:focus-visible, input:focus-visible, a:focus-visible, h2:focus-visible {outline:4px solid var(--focus); outline-offset:3px;}
.skip {position:absolute; top:-110px; left:15px; background:var(--panel-bg); color:var(--ink); padding:14px; z-index:9;}
.skip:focus {top:12px;}
.wrap {max-width:1370px; padding:28px 20px 64px; margin:auto;}
h1 {font-size:clamp(2rem,4vw,3rem); line-height:1.18; margin:.1rem 0 .35rem; color:var(--navy);}
h2 {font-size:1.4rem; margin:0 0 .65rem; color:var(--navy);}
p {margin:.3rem 0 1rem;}
.eyebrow {letter-spacing:.12em; font-weight:800; color:var(--navy); font-size:.85rem; margin:0;}
.intro {font-size:1.06rem; margin:0;}
.headphone-note {background:var(--button-soft); border-left:5px solid var(--blue); padding:10px 14px; margin:22px 0;}
.app-layout {display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.55fr); gap:24px; align-items:start;}
.player-column {min-width:0;}
.panel {background:var(--panel-bg); padding:24px; margin:0 0 20px; border:1px solid var(--line); box-shadow:0 4px 24px var(--shadow); border-radius:14px; min-width:0;}
.library-panel {position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto;}
.muted {color:var(--muted);}
.now-title {font-size:1.2rem; font-weight:800; overflow-wrap:anywhere;}
.buttons {display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}
.subtle-status:empty {display:none;}
.control {margin:20px 0;}
label {display:block; font-weight:650; margin-bottom:8px;}
output {font-variant-numeric:tabular-nums; font-weight:750;}
input[type="range"]{width:100%; min-height:34px; accent-color:var(--navy); cursor:pointer;}
fieldset {border:1px solid var(--line); border-radius:10px; margin:18px 0 0; padding:15px; min-width:0;}
legend {font-weight:800; color:var(--navy); padding:0 7px;}
.axis-control {padding-bottom:15px; border-bottom:1px solid var(--line);}
.axis-icon {display:inline-grid; place-items:center; min-width:34px; height:34px; margin-right:7px; border:2px solid var(--navy); border-radius:8px; font-size:1.35rem; vertical-align:middle; color:var(--navy);}
.recording-list {list-style:none; padding:0; margin:18px 0; display:grid; gap:12px;}
.recording-list li {border:2px solid var(--line); border-radius:12px; background:var(--item-bg); overflow:hidden;}
.recording-list li.is-current {background:var(--selected); border:3px solid var(--selected-border); color:var(--panel-bg); box-shadow:0 0 0 2px var(--selected-border);}
.recording-list .recording-choice {display:flex; flex-direction:column; gap:2px; width:100%; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:left; padding:15px 16px; align-items:flex-start; height:auto; min-height:60px;}
.recording-list .recording-choice:hover {background:var(--item-hover);}
.recording-list li.is-current .recording-choice {color:var(--panel-bg); background:transparent;}
.recording-list li.is-current .recording-choice:hover {background:var(--selected-hover);}
.recording-meta {font-size:.9rem; font-weight:500; color:var(--muted);}
.recording-list li.is-current .recording-meta {color:var(--panel-bg);}
.now-indicator {font-size:.9rem; font-weight:850; text-transform:uppercase; letter-spacing:.05em; text-decoration:underline; text-underline-offset:3px;}
.mobile-list-toggle {display:none; width:calc(100% - 24px); margin:0 12px 12px;}
.back-button {display:none; margin-bottom:16px;}
.footer {border-top:2px solid var(--line); display:flex; align-items:center; gap:16px; padding:18px 4px 0; color:var(--muted); font-size:.85rem;}
.footer p {margin:0 0 .5em;}
.footer-logo {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:80px; min-height:80px;}
.footer-logo img {display:block; width:80px; height:80px; object-fit:contain;}
.footer a,.footer button.link-button {font-weight:700; text-decoration-line:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-skip-ink:auto;}
.startup {min-height:100vh; display:grid; place-items:center; text-align:center; padding:30px;}
.startup-content {max-width:520px;}
.startup-logo {width:180px; height:180px; object-fit:contain;}
.startup h1 {margin:.2em 0;}
[hidden] {display:none!important;}
@media (max-width:800px) {
  .wrap {padding:18px 12px 42px;}
  .app-layout {display:block;}
  .app-layout[data-view="list"] .player-column {display:none;}
  .app-layout[data-view="player"] .library-panel {display:none;}
  .library-panel {position:static; max-height:none; overflow:visible;}
  .panel {padding:17px; margin-bottom:14px;}
  .back-button,.mobile-list-toggle {display:block;}
  .footer {align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}

/* V0.5: compact responsive player and accessible dialogs */
.dismissible {display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.dismissible p {margin:0;}
.small-button {font-size:.85rem; min-height:40px; padding:6px 10px; flex-shrink:0;}
.text-version-area {margin:8px 0 10px;}
.text-version-area p {margin:0;}
.link-button {background:transparent; border:0; color:var(--navy); min-height:32px; padding:0 3px; text-decoration:underline; font-weight:700;}
.link-button:hover {background:var(--item-hover);}
.info-dialog {width:min(90vw,800px); max-height:85vh; overflow:auto; border:2px solid var(--navy); border-radius:14px; padding:20px; background:var(--panel-bg); color:var(--ink);}
.info-dialog::backdrop {background:var(--backdrop);}
.readable-text {white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6;}
.info-dialog button {margin-top:8px;}
@media (max-width:800px) {
  .wrap {padding:12px 10px 28px;}
  .site-header h1 {font-size:1.65rem;}
  .site-header {margin-bottom:8px;}
  .panel {padding:12px 14px; margin-bottom:9px;}
  .player-panel .control {margin:9px 0;}
  .player-panel .buttons {margin:8px 0;}
  .player-panel .now-title {margin-bottom:2px;}
  .player-panel #selected-metadata {margin-bottom:6px;}
  .back-button {margin:0 0 8px;}
  .panel h2 {margin-bottom:6px;}
  .axis-control {padding-bottom:7px; margin:9px 0;}
  fieldset {padding:9px; margin-top:10px;}
  .headphone-note {margin:9px 0;}
  .small-button {font-size:.8rem;}
  .info-dialog {width:calc(100vw - 18px); padding:16px;}
}

/* V0.6: stable mobile reading order, shared footer and wake controls */
h3 {font-size:1.12rem; color:var(--navy); margin:12px 0 4px;}
.direction-controls {border-top:1px solid var(--line); margin-top:8px; padding-top:8px;}
.direction-controls p {margin:4px 0 8px;}
.mode-buttons button[aria-pressed="true"] {background:var(--navy); color:var(--panel-bg); border-color:var(--navy);}
.zero-buttons {margin-top:2px;}
.wake-toggle {font-size:.94rem; font-weight:600; display:flex; align-items:center; gap:10px; margin:10px 0 6px;}
.wake-toggle input {height:24px; width:24px; flex-shrink:0; accent-color:var(--navy);}
#manual-rotation {margin-top:12px;}
.share-controls {border-top:1px solid var(--line); margin-top:18px; padding-top:12px;}
#copy-link {max-width:100%;}
.visually-hidden {position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; clip-path:inset(50%)!important;}
.back-button {display:none;}
@media(max-width:800px) {
  #speler[data-view="player"] > .back-button {display:block; margin:0 0 8px;}
  .site-header {margin-bottom:4px;}
  #speler[data-view="list"] .player-column {display:none;}
  #speler[data-view="player"] .library-panel {display:none;}
  .headphone-note {margin:5px 0 10px;}
  .footer {border-top:2px solid var(--line); padding:12px 2px 0;}
  .player-panel .buttons {margin:6px 0;}
  .player-panel .control {margin:10px 0;}
}

/* Beta 1 — separate visual-only progress and compact introductory information. */
#visual-progress {display:block;width:100%;height:48px;margin:0 0 8px;}
#volumeValue, [id^="out"] {font-variant-numeric:tabular-nums;font-weight:750;}
#visual-test {margin-top:1rem;}
#listening-tip {display:block;}
#listening-tip .buttons {margin-bottom:0;}
#intro-heading {font-size:1.2rem;}
#license-dialog-content:focus {outline:3px solid var(--navy);}

/* Beta 2: decorative album artwork, never a separate focus target. */
.audio-art {display:block;flex:0 0 56px;width:56px;height:56px;border-radius:7px;overflow:hidden;position:relative;background:var(--navy) url("assets/audio-placeholder.svg") center/cover no-repeat;}
.audio-art img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.audio-art-large {width:min(100%,230px);aspect-ratio:1;max-height:230px;margin:0 0 12px;border-radius:12px;overflow:hidden;background:var(--navy) url("assets/audio-placeholder.svg") center/cover no-repeat;}
.audio-art-large .audio-art {width:100%;height:100%;border-radius:0;flex:initial;}
.recording-list .recording-choice {flex-direction:row;align-items:center;gap:12px;}
.recording-choice .audio-copy {display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:2px;}
#load-more {width:100%;margin:4px 0 12px;}
#visible-count {margin-top:10px;}
@media(max-width:800px){.audio-art-large {width:140px;max-height:140px;margin-bottom:6px;}.recording-list .recording-choice {gap:10px;}}


/* Beta 5: native choices, readable long titles and focus within clipped rows. */
:root {font-size:112.5%;}
html {-webkit-text-size-adjust:auto;text-size-adjust:auto;}
button,summary,h1,h2,h3,.footer,.audio-copy,.recording-meta {overflow-wrap:anywhere;}
.recording-list li,.recording-choice,.audio-copy,.audio-copy strong {min-width:0;max-width:100%;}
.recording-choice .audio-copy {align-items:stretch;overflow-wrap:anywhere;}
.recording-list .recording-choice:focus-visible {outline:4px solid var(--focus);outline-offset:-5px;box-shadow:inset 0 0 0 7px var(--panel-bg);}
.library-panel {scroll-padding:12px;}
.mode-options {border:0;padding:0;margin:12px 0;}
.mode-options legend {padding:0;margin-bottom:6px;}
.mode-options label {display:flex;align-items:center;gap:10px;min-height:48px;font-weight:600;cursor:pointer;}
.mode-options input {width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:var(--navy);}
#rotation-details {border:1px solid var(--line);border-radius:10px;margin-top:16px;}
#rotation-details summary {cursor:pointer;font-weight:750;padding:12px;min-height:48px;color:var(--navy);}
#rotation-details summary:focus-visible {outline:4px solid var(--focus);outline-offset:3px;}
#manual-rotation {border:0;margin:0;padding-top:0;}
#manual-rotation legend {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.axis-control:last-child {border-bottom:0;padding-bottom:0;}
input[type="range"] {min-height:44px;}
.transport {align-items:stretch;}
.transport button {flex:1 1 140px;}
#read-text {width:100%;text-align:left;}
.dialog-close {display:block;margin:0 0 12px auto!important;min-height:44px;min-width:44px;padding:6px 12px;font-size:1rem;}
.tip-qr {display:block;width:180px;height:auto;max-width:100%;object-fit:contain;margin:16px 0;}
#copy-fallback {display:block;overflow-wrap:anywhere;}
.footer>div {min-width:0;}
@media(max-width:800px){.tip-qr{display:none;}.footer{flex-wrap:wrap;}.transport button{flex-basis:120px;}}
@media(forced-colors:active){.recording-list .recording-choice:focus-visible{outline-color:Highlight;}.axis-icon{border-color:ButtonText;}}

/* Selected-title announcements must reflow just like the title itself. */
p {overflow-wrap:anywhere;}

/* Beta 6: AP082. Native controls and a compact, consistent visual hierarchy. */
body {hyphens:auto;}
button {background:var(--navy);color:var(--panel-bg);border-color:var(--navy);min-height:44px;padding:6px 12px;}
button:hover:not(:disabled) {background:var(--action-hover);color:var(--panel-bg);}
button.link-button {background:transparent;color:var(--navy);border:0;min-height:44px;padding:6px;text-decoration:underline;}
button.link-button:hover:not(:disabled) {background:var(--button-soft);color:var(--link-hover);}
button:focus-visible,input:focus-visible,a:focus-visible,h1:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--focus);outline-offset:3px;}
.app-name {font-size:1.25rem;font-weight:800;color:var(--navy);margin:0;}
.wrap {padding-top:14px;}
.site-header {margin-bottom:8px;}
#library-title {font-size:1.5rem;}
.player-heading {display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
#audio-title {font-size:1.6rem;line-height:1.25;margin:0;overflow-wrap:anywhere;}
.share-controls {border:0;padding:0;margin:0 0 8px;text-align:right;}
.share-controls p {text-align:left;}
.player-heading .audio-art-large {margin:0;flex-shrink:0;}
.recording-list {gap:8px;margin:12px 0;}
.recording-list li {position:relative;display:flex;align-items:center;overflow:visible;}
.recording-list .recording-choice {padding:8px;gap:8px;border-radius:9px;min-height:72px;flex:1;min-width:0;}
.recording-choice .audio-copy strong {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.recording-list li.is-current .recording-choice {width:auto;}
.now-indicator {font-size:.8rem;letter-spacing:0;text-transform:none;}
.recording-list button.mobile-list-toggle {display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;margin:8px 0 8px 8px;padding:10px;background:var(--button-soft);color:var(--navy);border:2px solid var(--panel-bg);border-radius:8px;}
.recording-list button.mobile-list-toggle:hover {background:var(--panel-bg);color:var(--link-hover);}
.icon-button svg,.mobile-list-toggle svg {display:block;width:28px;height:28px;fill:currentColor;}
.transport {display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;align-items:stretch;margin:12px 0;}
.transport #play {grid-column:1;grid-row:1 / 3;display:grid;place-items:center;padding:10px;min-width:64px;}
.transport #play svg {width:36px;height:36px;}
.seek-control {grid-column:2;min-width:0;position:relative;}
.seek-control label {font-size:.9rem;margin-bottom:0;}
#visual-progress {height:4px;margin:0;position:absolute;bottom:20px;left:0;pointer-events:none;}
#seek {position:relative;background:transparent;margin:0;}
.transport-bottom {grid-column:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.skip-buttons {display:flex;gap:6px;flex-shrink:0;}
.skip-buttons button {width:44px;height:44px;padding:7px;background:var(--button-soft);color:var(--navy);border:1px solid var(--navy);}
#times {flex:1 1 125px;min-width:0;max-width:240px;min-height:44px;display:flex;align-items:center;}
#visual-time {display:block;width:100%;height:auto;}
.volume-control {flex:0 0 86px;padding:2px 12px;}
.volume-wheel {position:relative;display:grid;place-items:center;width:60px;height:60px;border:3px solid var(--navy);border-radius:50%;background:var(--button-soft);color:var(--navy);cursor:ns-resize;touch-action:none;user-select:none;font-size:.75rem;}
.volume-marker {position:absolute;inset:3px;border-radius:50%;transform:rotate(var(--volume-angle,54deg));pointer-events:none;}
.volume-marker::before {content:'';position:absolute;left:calc(50% - 2px);top:0;width:4px;height:8px;background:var(--navy);}
.volume-less,.volume-more {position:absolute;top:7px;display:grid;place-items:center;width:24px;height:40px;background:var(--panel-bg);border:1px solid var(--navy);border-radius:6px;font-size:1rem;cursor:pointer;}
.volume-less {left:-18px;}.volume-more {right:-18px;}
#volumeValue {pointer-events:none;}
#manual-rotation {border:1px solid var(--line);padding:10px;margin-top:14px;}
#manual-rotation legend {position:static;width:auto;height:auto;clip-path:none;overflow:visible;}
.axis-icon svg {width:28px;height:28px;}
.axis-control input[type=range] {-webkit-appearance:none;appearance:none;background:transparent;}
.axis-control input[type=range]::-webkit-slider-runnable-track {height:6px;background:var(--line);border-radius:3px;}
.axis-control input[type=range]::-moz-range-track {height:6px;background:var(--line);border-radius:3px;}
.axis-control input[type=range]::-moz-range-progress {background:transparent;}
.axis-control input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--navy);border:2px solid var(--panel-bg);box-shadow:0 0 0 1px var(--navy);}
.axis-control input[type=range]::-moz-range-thumb {width:22px;height:22px;border-radius:50%;background:var(--navy);border:2px solid var(--panel-bg);box-shadow:0 0 0 1px var(--navy);}
.dialog-close {position:sticky;top:0;float:right;width:44px;height:44px;min-width:44px;padding:0;font-size:1.6rem;line-height:1;z-index:1;margin:0 0 8px 8px!important;}
.info-dialog h2 {padding-top:4px;}
.info-dialog h3,.info-dialog pre {clear:both;}
.back-button {font-size:.9rem;padding:6px 10px;min-height:44px;}
@media(min-width:801px){
  .player-heading {display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:start;}
  .player-heading .audio-art-large {width:120px;height:120px;}
  .panel {padding:18px;}
  .app-layout {gap:16px;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);}
}
@media(max-width:800px){
  .transport {grid-template-columns:54px minmax(0,1fr);gap:6px 8px;}
  .transport #play {min-width:54px;padding:8px;}
  .transport #play svg {width:30px;height:30px;}
  .transport-bottom {gap:4px;}
  .volume-control {display:none;}
  .panel {padding:12px;}
  #audio-title {font-size:1.4rem;}
}
@media(forced-colors:active){
  .axis-control input[type=range] {appearance:auto;}
  .volume-wheel,.volume-less,.volume-more {border-color:ButtonText;}
  #visual-time,#visual-progress {display:none;}
  #spoken-time {position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;white-space:normal!important;}
}

/* Beta 3: explicit time readout and non-modal intro close control. */
#times {padding:0;border:0;background:transparent;color:var(--ink);justify-content:center;}
#times:hover {background:var(--button-soft);}
#listening-tip > div {width:100%;min-width:0;}
#dismiss-listening-tip {position:static;}
select:focus-visible, textarea:focus-visible {outline:4px solid var(--focus);outline-offset:3px;}

/* 2026.10.3 Beta 2 — focused light contrast and automatic accessible dark theme. */
:root {
  
  
  
  
  
  
  
}
.recording-list .recording-choice:focus-visible {
  outline:3px solid var(--panel-bg);
  outline-offset:-5px;
  box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 9px var(--panel-bg);
}
.recording-list li.is-current .recording-choice:focus-visible {
  outline:4px solid var(--panel-bg);
  outline-offset:-5px;
  box-shadow:inset 0 0 0 8px var(--selected-border),inset 0 0 0 12px var(--panel-bg);
}
#load-more-row {border:0;background:transparent;box-shadow:none;text-align:left;overflow:visible;padding:6px 0;}
#load-more {margin:0;min-height:44px;}
#load-more-row[hidden] {display:none!important;}

@media (forced-colors:active) {
  .recording-list .recording-choice:focus-visible,
  .recording-list li.is-current .recording-choice:focus-visible {
    outline-color:Highlight;box-shadow:none;
  }
}

/* Applied-theme telemetry follows the same CSS media cascade as the UI. */
:root {--usage-theme:light;}
@media (prefers-color-scheme: dark) {:root {--usage-theme:dark;}}

/* An empty non-modal database status must not change the page layout. */
#database-status { margin: 0; }
#database-status:not(:empty) { margin: 1rem; }

/* AP-152: one colour contract for both themes and all interactive components. */
:root {
 --navy:#003E92; --blue:#3A81E1; --ink:#14263E; --muted:#344960;
 --bg:#F5F8FF; --panel-bg:#FFFFFF; --line:#637E9F;
 --action-bg:#003E92; --action-text:#FFFFFF; --action-hover:#002D6E;
 --link-hover:#002A63; --button-soft:#E6F1FF;
 --item-bg:#F5F8FF; --item-hover:#E2ECFB;
 --selected:#003E92; --selected-hover:#134E99; --selected-text:#FFFFFF;
 --selected-border:#003E92; --focus:#945000; --focus-inner:#FFFFFF;
 --canvas-track:#637E9F; --canvas-played:#003E92;
 --field-bg:#FFFFFF; --disabled-bg:#E4E9F0; --shadow:#1538610B; --backdrop:#101B2AAB;
 --art-bg:#003E92; --thumb:#003E92; --thumb-border:#FFFFFF;
}
@media (prefers-color-scheme:dark) {
 :root {
  color-scheme:dark;
  --navy:#A9D5FF; --blue:#3A81E1; --ink:#F1F6FF; --muted:#CFDDED;
  --bg:#081B36; --panel-bg:#142338; --line:#7898B8;
  --action-bg:#A9D5FF; --action-text:#081B36; --action-hover:#D1E8FF;
  --link-hover:#FFFFFF; --button-soft:#263D5B;
  --item-bg:#192E49; --item-hover:#254768;
  --selected:#245DA3; --selected-hover:#28629E; --selected-text:#FFFFFF;
  --selected-border:#A9D5FF; --focus:#FFE38A; --focus-inner:#081B36;
  --canvas-track:#93A9C0; --canvas-played:#A9D5FF;
  --field-bg:#0B1B30; --disabled-bg:#34465A; --shadow:transparent; --backdrop:#000000CC;
  --thumb:#A9D5FF; --thumb-border:#081B36;
 }
}
body,.startup {background:var(--bg);color:var(--ink);}
.panel,.info-dialog {background:var(--panel-bg);color:var(--ink);border-color:var(--line);}
button,button.primary,.mode-buttons button[aria-pressed="true"] {background:var(--action-bg);color:var(--action-text);border-color:var(--action-bg);}
button:hover:not(:disabled),button.primary:hover:not(:disabled) {background:var(--action-hover);color:var(--action-text);}
button:disabled {background:var(--disabled-bg);color:var(--muted);border-color:var(--line);}
a:hover {color:var(--link-hover);}
button.link-button {background:transparent;color:var(--navy);}
button.link-button:hover:not(:disabled) {background:var(--button-soft);color:var(--link-hover);}
.recording-list .recording-choice {background:transparent;color:var(--ink);}
.recording-list .recording-choice:hover:not(:disabled) {background:var(--item-hover);color:var(--ink);}
.recording-list li.is-current .recording-choice,.recording-list li.is-current .recording-meta {color:var(--selected-text);}
.recording-list li.is-current .recording-choice:hover:not(:disabled) {background:var(--selected-hover);color:var(--selected-text);}
.recording-list .recording-choice:focus-visible,.recording-list li.is-current .recording-choice:focus-visible {
 outline:3px solid var(--focus);outline-offset:-6px;box-shadow:inset 0 0 0 3px var(--focus-inner),inset 0 0 0 9px var(--focus-inner);
}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible,select:focus-visible {
 outline:3px solid var(--focus);outline-offset:3px;
}
#license-dialog-content:focus {outline-color:var(--focus);}
.volume-wheel,.volume-less,.volume-more,.skip-buttons button,.recording-list button.mobile-list-toggle {background:var(--button-soft);color:var(--ink);border-color:var(--line);}
.recording-list button.mobile-list-toggle:hover:not(:disabled),.skip-buttons button:hover:not(:disabled) {background:var(--item-hover);color:var(--ink);}
#times,#times:hover:not(:disabled) {color:var(--ink);background:transparent;}
#times:hover:not(:disabled) {background:var(--button-soft);}
.audio-art,.audio-art-large {background-color:var(--art-bg);}
input[type=range],input[type=checkbox],input[type=radio] {accent-color:var(--thumb);}
.axis-control input[type=range]::-webkit-slider-runnable-track {background:var(--canvas-track);}
.axis-control input[type=range]::-moz-range-track {background:var(--canvas-track);}
.axis-control input[type=range]::-webkit-slider-thumb {background:var(--thumb);border-color:var(--thumb-border);box-shadow:0 0 0 1px var(--thumb);}
.axis-control input[type=range]::-moz-range-thumb {background:var(--thumb);border-color:var(--thumb-border);box-shadow:0 0 0 1px var(--thumb);}
.audio-details {border:1px solid var(--line);border-radius:10px;margin:12px 0;}
.audio-details summary {padding:10px 12px;min-height:44px;font-weight:750;color:var(--navy);cursor:pointer;}
.details-body {padding:0 12px 12px;}
.details-body select {display:block;width:100%;max-width:100%;min-height:44px;margin:0 0 12px;font:inherit;background:var(--field-bg);color:var(--ink);border:2px solid var(--line);border-radius:6px;}
.details-body dt {font-weight:700;margin-top:8px;}
.details-body dd {margin:0;overflow-wrap:anywhere;}
#audio-description {white-space:pre-wrap;}
@media(forced-colors:active) {
 .panel,.info-dialog,.audio-details,.recording-list li {border-color:CanvasText;}
 .recording-list li.is-current {outline:2px solid Highlight;box-shadow:none;}
 .recording-list .recording-choice:focus-visible,.recording-list li.is-current .recording-choice:focus-visible {outline-color:Highlight;box-shadow:none;}
 input[type=range],.axis-control input[type=range] {appearance:auto;}
 .axis-control input[type=range]::-webkit-slider-thumb {appearance:auto;box-shadow:none;}
}

/* Wide brand assets preserve their original paths; only the viewBox is cropped. */
.site-brand {display:flex;align-items:center;gap:.75rem;max-width:100%;}
.site-brand picture {display:block;flex:0 1 14rem;min-width:0;}
.site-brand img {display:block;width:100%;height:auto;}
.brand-separator {color:var(--navy);font-size:1.25rem;}
.site-brand .app-name {min-width:0;}
@media(max-width:800px) {
  .site-brand {flex-direction:column;align-items:stretch;gap:.25rem;width:14rem;}
  .site-brand picture {flex:none;}
  .brand-separator {display:none;}
  .site-brand .app-name {text-align:center;}
}

/* AP-162 explicit choice uses the existing colour contract. */
:root[data-theme="light"] {color-scheme:light;--usage-theme:light;
 --navy:#003E92; --blue:#3A81E1; --ink:#14263E; --muted:#344960;
 --bg:#F5F8FF; --panel-bg:#FFFFFF; --line:#637E9F;
 --action-bg:#003E92; --action-text:#FFFFFF; --action-hover:#002D6E;
 --link-hover:#002A63; --button-soft:#E6F1FF;
 --item-bg:#F5F8FF; --item-hover:#E2ECFB;
 --selected:#003E92; --selected-hover:#134E99; --selected-text:#FFFFFF;
 --selected-border:#003E92; --focus:#945000; --focus-inner:#FFFFFF;
 --canvas-track:#637E9F; --canvas-played:#003E92;
 --field-bg:#FFFFFF; --disabled-bg:#E4E9F0; --shadow:#1538610B; --backdrop:#101B2AAB;
 --art-bg:#003E92; --thumb:#003E92; --thumb-border:#FFFFFF;
}
:root[data-theme="dark"] {--usage-theme:dark;
  color-scheme:dark;
  --navy:#A9D5FF; --blue:#3A81E1; --ink:#F1F6FF; --muted:#CFDDED;
  --bg:#081B36; --panel-bg:#142338; --line:#7898B8;
  --action-bg:#A9D5FF; --action-text:#081B36; --action-hover:#D1E8FF;
  --link-hover:#FFFFFF; --button-soft:#263D5B;
  --item-bg:#192E49; --item-hover:#254768;
  --selected:#245DA3; --selected-hover:#28629E; --selected-text:#FFFFFF;
  --selected-border:#A9D5FF; --focus:#FFE38A; --focus-inner:#081B36;
  --canvas-track:#93A9C0; --canvas-played:#A9D5FF;
  --field-bg:#0B1B30; --disabled-bg:#34465A; --shadow:transparent; --backdrop:#000000CC;
  --thumb:#A9D5FF; --thumb-border:#081B36;
}

.site-header {display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.site-brand {flex:1 1 30rem;}
.site-brand .brand-link {display:block;flex:0 1 14rem;min-width:0;}
.site-brand .brand-link picture {display:block;}
.preferences {display:flex;align-items:flex-start;gap:.5rem;margin-left:auto;flex-wrap:wrap;max-width:100%;}
.preference-menu {position:relative;max-width:100%;}
.preference-menu summary {list-style:none;cursor:pointer;min-height:44px;padding:.5rem .65rem;border:2px solid var(--line);border-radius:8px;background:var(--field-bg);color:var(--navy);font-weight:700;}
.preference-menu summary::after {content:' ▾';}
.preference-menu summary::-webkit-details-marker {display:none;}
.preference-menu fieldset {position:absolute;right:0;z-index:20;background:var(--panel-bg);border:2px solid var(--line);box-shadow:0 4px 24px var(--shadow);margin:6px 0 0;padding:.65rem;min-width:10rem;max-width:calc(100vw - 24px);}
.preference-menu legend {font-size:.9rem;background:var(--panel-bg);}
.preference-menu label {display:flex;gap:.5rem;align-items:center;min-height:44px;margin:0;cursor:pointer;}
.preference-menu input {width:1.2rem;height:1.2rem;flex:none;}
@media(max-width:800px){.site-brand {flex:0 1 14rem;max-width:100%;}.site-brand .brand-link {flex:none;}.preferences {margin-top:.5rem;}}
@media(max-width:420px){.preferences {width:100%;justify-content:flex-end;}.preference-menu summary {font-size:.9rem;}}

.language-flag {display:inline-block;width:1.5rem;height:1rem;vertical-align:middle;flex:none;border:1px solid var(--line);border-radius:2px;}