/* Shared semantic values are generated from DESIGN.md into tokens.css. */
:root { color-scheme: light; --scrollbar-track: var(--color-background); --scrollbar-thumb: var(--color-scrollbar); --scrollbar-hover: var(--color-muted); --scrollbar-active: var(--color-primary); --player-muted: #B9CBE3; --focus-ring: var(--color-primary); }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid var(--scrollbar-track); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--scrollbar-active); }
/* hidden must override component display rules, including native audio. */
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--color-background); scroll-behavior: smooth; scroll-padding-bottom: 160px; }
body { margin: 0; color: var(--color-ink); font: 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, input, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, select, summary, input[type=range], input[type=radio], label.source-option, label.engine-option { cursor: pointer; }
button { color: inherit; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, main:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
button, a, summary { transition: background-color .16s, border-color .16s, color .16s; }
button:active:not(:disabled) { transform: translateY(1px); }
a { color: var(--color-primary); text-underline-offset: 3px; }
h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.4; }
h1 { font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
h2 { font-size: 18px; font-weight: 600; }
fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
legend, label { font-size: 14px; font-weight: 500; }
legend { margin-bottom: 10px; }
select, input[type=password], input[type=text] { width: 100%; min-height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); padding: 10px 12px; font-size: 16px; line-height: 1.5; }
select:hover, input[type=password]:hover, input[type=text]:hover { border-color: var(--color-muted); }
select:focus, input:focus { border-color: var(--color-primary); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--color-danger); }
.page-shell { max-width: var(--space-page-max); padding: 24px 32px calc(24px + env(safe-area-inset-bottom)); margin: 0 auto; }
.masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; min-height: 52px; }
.brand-name { font: 700 29px/1.3 var(--font-display); color: var(--color-player); white-space: nowrap; }
.masthead-meta { display: flex; align-items: center; justify-content: end; gap: 18px; color: var(--color-muted); font-size: 12px; }
.account-actions { display: flex; align-items: center; gap: 10px; }
.account-actions .text-button { padding-inline: 4px; }
.connection { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-scrollbar); }
.connection[data-state=online] .connection-dot { background: var(--color-success); }
.connection[data-state=offline] .connection-dot { background: var(--color-danger); }
.connection-feedback { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--color-danger); font-size: 13px; margin: 4px 0 16px; }
.connection-feedback p { overflow-wrap: anywhere; }
.connection-feedback[data-tone=success] { color: var(--color-success); }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
#newsPanel { max-width: 1080px; margin: 0 auto; padding-bottom: 145px; }
.workspace-grid { display: flex; flex-direction: column; gap: 24px; }
.card { border: 1px solid color-mix(in srgb, var(--color-border) 65%, var(--color-surface)); border-radius: var(--radius-default); background: var(--color-surface); }
.settings-card { padding: 24px; }
.settings-summary { color: var(--color-muted); font-size: 13px; margin: 10px 0 8px; overflow-wrap: anywhere; }
.settings-disclosure > summary { min-height: 44px; padding: 10px 0; width: fit-content; font-size: 13px; color: var(--color-muted); }
.settings-disclosure > summary:hover { color: var(--color-primary); }
.settings-body { max-width: 720px; padding: 10px 0 20px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.card-heading p { font-size: 13px; margin-top: 6px; }
.small-label { color: var(--color-muted); font-size: 12px; }
.muted { color: var(--color-muted); }
.eyebrow { color: var(--color-muted); font-size: 12px; margin-bottom: 6px; }
.field-group { margin-bottom: 18px; }
.engine-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.engine-option { position: relative; display: flex; min-height: 66px; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 14px; }
.engine-option:hover { background: var(--color-background); }
.engine-option.is-selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)); }
.engine-option:focus-within { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.engine-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.engine-name { font-size: 15px; padding-right: 18px; }
.engine-readiness { font-size: 12px; font-weight: 400; color: var(--color-muted); }
.engine-check { position: absolute; right: 14px; top: 15px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--color-border); }
.engine-option.is-selected .engine-check { border: 4px solid var(--color-primary); background: var(--color-surface); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 7px; }
.field-hint { font-size: 12px; line-height: 1.8; color: var(--color-muted); margin-top: 8px; }
.voice-description { min-height: 22px; }
.form-divider { height: 1px; background: var(--color-border); margin: 18px 0; }
.source-options { display: flex; gap: 24px; flex-wrap: wrap; }
.source-option { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-weight: 400; }
.source-option input { appearance: auto; width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.duration-field { max-width: 320px; margin-top: 16px; }
.field-error { color: var(--color-danger); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.form-feedback { min-height: 8px; }
.form-feedback:not(:empty) { margin: 4px 0 12px; }
.button { min-height: 48px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.button-primary { background: var(--color-primary); color: var(--color-surface); }
.button-primary:hover:not(:disabled) { background: var(--color-player); }
.button-primary:disabled { opacity: .46; }
.button-secondary { border-color: var(--color-border); background: var(--color-surface); }
.button-secondary:hover:not(:disabled) { border-color: var(--color-muted); background: var(--color-background); }
.button-secondary:disabled { color: var(--color-muted); background: var(--color-background); opacity: .65; }
.generate-actions { display: flex; gap: 12px; }
.generate-actions .button { min-width: 112px; }
.button-spinner { width: 14px; height: 14px; flex: 0 0 14px; opacity: 0; margin-left: -23px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
button[aria-busy=true] .button-spinner { opacity: 1; animation: spin .8s linear infinite; }
/* Generation keeps enough space for the busy indicator before it appears. */
#generateButton, #unlockButton, #savePassword { padding-inline: 30px; }
.quota-note { font-size: 12px; color: var(--color-muted); margin-top: 12px; }
.text-button { padding: 8px 4px; min-height: 44px; background: transparent; border: 0; font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.text-button:hover:not(:disabled) { color: var(--color-primary); text-decoration: underline; }
.text-button:disabled { opacity: .5; }
.job-card { display: flex; align-items: center; gap: 14px; padding: 2px 4px; min-height: 64px; }
.job-indicator { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; }
.job-indicator span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.job-card[data-state=running] .job-indicator span { width: 16px; height: 16px; background: transparent; border: 2px solid var(--color-primary); border-right-color: transparent; animation: spin .8s linear infinite; }
.job-card[data-state=failed] .job-indicator span { background: var(--color-danger); }
.job-card[data-state=pending] .job-indicator span { background: var(--color-signal); }
.job-copy { flex: 1; min-width: 0; }
.job-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.job-heading h2 { font-size: 15px; }
.job-copy p { font-size: 13px; color: var(--color-muted); margin-top: 4px; overflow-wrap: anywhere; }
.job-card[data-state=failed] .job-copy p { color: var(--color-danger); }
.library-card { padding: 0 2px; }
.library-card .card-heading { margin-bottom: 10px; }
.library-list { padding: 0; margin: 0; list-style: none; }
.library-item + .library-item { border-top: 1px solid var(--color-border); }
.library-select { width: 100%; min-height: 80px; display: flex; align-items: center; gap: 16px; padding: 14px 0; border: 0; background: transparent; text-align: left; }
.library-select:hover { color: var(--color-primary); }
.library-select[aria-current=true] .library-play-icon { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-surface); }
.library-play-icon { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 8px; display: grid; place-items: center; flex: 0 0 36px; color: var(--color-muted); }
.library-play-icon svg { width: 15px; height: 15px; fill: currentColor; }
.library-item-copy { min-width: 0; flex: 1; }
.library-item-title { display: block; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.library-item-meta { display: block; color: var(--color-muted); font-size: 12px; margin-top: 4px; }
.library-item-duration { font: 12px/1.5 var(--font-mono); color: var(--color-muted); flex: 0 0 auto; }
.library-empty { padding: 28px 8px; color: var(--color-muted); font-size: 14px; text-align: center; }
.library-empty p + p { margin-top: 5px; font-size: 13px; }
#libraryError:not(:empty) { margin: 10px 0; }
.load-more { width: 100%; margin-top: 12px; }
.transcript-panel { padding: 22px 24px; }
.transcript-panel pre { margin: 0; font: 15px/1.9 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; padding-right: 10px; }

/* Compact player remains available while browsing news history. */
.player-card { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 48px), 1080px); z-index: 20; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0,1.6fr) auto; gap: 4px 22px; align-items: center; padding: 14px 20px 10px; border-radius: var(--radius-default); color: var(--color-surface); background: var(--color-player); --focus-ring: var(--color-surface); box-shadow: 0 4px 18px rgb(13 27 50 / 10%); }
.player-title-group { min-width: 0; }
.player-title-group h2 { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.player-title-group > p { margin-top: 4px; font-size: 11px; color: var(--player-muted); }
.custom-player { min-width: 0; display: flex; align-items: center; gap: 16px; }
.playback-buttons { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.play-button { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; display: grid; place-items: center; border-radius: 9px; border: 0; background: var(--color-surface); color: var(--color-player); }
.play-button:hover:not(:disabled) { background: var(--color-border); }
.play-button svg { width: 23px; height: 23px; fill: currentColor; }
.play-button:disabled, .skip-button:disabled { opacity: .4; }
.skip-button { width: 40px; height: 44px; position: relative; display: grid; place-items: center; border: 0; padding: 0; color: var(--color-surface); background: transparent; }
.skip-button > span:first-child { font-size: 30px; line-height: 1; }
.skip-button > span:last-child { font: 8px/1 var(--font-mono); position: absolute; top: 19px; }
.skip-button:hover:not(:disabled) { color: var(--player-muted); }
.player-progress { flex: 1; min-width: 40px; }
input[type=range] { accent-color: var(--color-surface); width: 100%; min-height: 24px; margin: 0; background: transparent; }
.player-times { display: flex; justify-content: space-between; font: 10px/1.5 var(--font-mono); color: var(--player-muted); font-variant-numeric: tabular-nums; }
.speed-field select { width: 62px; min-height: 44px; padding: 7px 3px; border-color: rgb(255 255 255 / 25%); background: var(--color-player); color: var(--color-surface); font-size: 12px; }
.player-links { display: flex; gap: 14px; }
.player-links button, .player-links a { min-height: 44px; display: inline-flex; align-items: center; background: transparent; color: var(--color-surface); border: 0; padding: 6px 0; font-size: 12px; text-decoration: none; white-space: nowrap; }
.player-links button:hover:not(:disabled), .player-links a:hover { color: var(--player-muted); text-decoration: underline; }
.player-links button:disabled { opacity: .5; }
.player-message { grid-column: 1/-1; font-size: 11px; color: var(--player-muted); min-height: 18px; overflow-wrap: anywhere; }
#newsAudio { width: 100%; min-height: 44px; }
.unlock-panel { max-width: 440px; margin: 36px auto 90px; padding: 30px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-default); }
.unlock-panel h1 { font-size: 26px; margin-bottom: 12px; }
.unlock-panel > .muted { font-size: 14px; margin-bottom: 24px; }
.unlock-panel label { display: block; margin-bottom: 8px; }
.secret-field { position: relative; }
.secret-field input { padding-right: 65px; }
.secret-field button { position: absolute; right: 12px; top: 2px; }
.unlock-panel .field-error { min-height: 24px; margin: 8px 0 12px; }
.unlock-button { width: 100%; }
.privacy-note { color: var(--color-muted); font-size: 12px; margin-top: 18px; }
.unlock-panel label.remember-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0; cursor: pointer; }
.remember-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.remember-hint { margin: 0 0 8px; }
.password-panel { max-width: 480px; }
.password-panel .card-heading { align-items: start; margin-bottom: 12px; }
.password-panel .card-heading h1 { margin: 0; }
.password-field { margin-bottom: 18px; }
.password-panel .secret-field button:disabled { cursor: not-allowed; }
#passwordChangeNote { margin-bottom: 8px; }
.skip-link { position: fixed; z-index: 30; top: -80px; left: 16px; background: var(--color-surface); padding: 12px 18px; border: 2px solid var(--color-primary); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-message { margin: 30px; color: var(--color-danger); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .masthead { gap: 22px; } .masthead-meta time { display: none; } .player-card { gap: 4px 14px; grid-template-columns: minmax(130px,.7fr) minmax(0,1.5fr) auto; } .custom-player { gap: 10px; } }
@media (max-width: 700px) {
  .page-shell { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
  .masthead { grid-template-columns: 1fr auto; gap: 14px; }
  .masthead .workspace-tabs { grid-column: 1/-1; grid-row: 2; }
  .masthead-meta { grid-column: 2; grid-row: 1; }
  .brand-name { font-size: 27px; }
  .connection-feedback { min-height: 28px; margin-bottom: 12px; }
  h1 { font-size: 25px; }
  .settings-card { padding: 22px; }
  .player-card { width: calc(100% - 28px); grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 16px 8px; }
  .player-title-group h2 { font-size: 13px; }
  .player-title-group > p { display: none; }
  .custom-player { grid-column: 1/-1; grid-row: 2; gap: 12px; }
  .player-links { grid-column: 2; grid-row: 1; gap: 12px; }
  .player-links a, .player-links button { min-height: 32px; }
  .player-message { font-size: 10px; }
  #newsPanel { padding-bottom: 175px; }
}
@media (max-width: 480px) { .page-shell { padding-inline: 18px; } .field-row { grid-template-columns: 1fr; } .engine-options { gap: 8px; } .engine-option { padding-inline: 11px; } .engine-name { font-size: 13px; } .settings-card { padding: 20px; } .generate-actions .button { min-width: 0; flex: 1; padding-inline: 16px; } .library-select { gap: 12px; } .library-item-meta { font-size: 11px; } .library-item-duration { font-size: 10px; } .unlock-panel { padding: 26px 22px; margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; } }
@media (forced-colors: active) { * { scrollbar-color: auto; } button, select, input { border: 1px solid ButtonText; } .connection-dot { forced-color-adjust: auto; } .player-card { border: 1px solid CanvasText; } }