/* Shared interaction styles for normal and car modes. */
button, input, a { touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #cbb3ff; outline-offset: 4px; }
[hidden] { display: none !important; }
input.progress-bar { appearance: auto; accent-color: var(--accent-2); min-width: 40px; height: 32px; margin: 0; direction: ltr; }
.progress-container { min-width: 40px; }
.time-display, .time-readout { direction: ltr; }
.skip-btn { font-size: 15px; font-weight: 700; }
.repeat-badge, .reset-count, .offline-button, .retry-button {
    font: inherit; font-size: 14px; cursor: pointer; min-height: 44px;
    border: 1px solid #666680; border-radius: 8px; padding: 8px 12px;
    background: #29243c; color: #eee5ff;
}
.repeat-badge[aria-disabled="true"] { background: #173923; color: #9de8b5; cursor: default; }
button:disabled { opacity: .65; cursor: default; }
.slide-meta { flex-wrap: wrap; gap: 8px; }
.player-status, .offline-status, .transcript-note { font-size: 14px; line-height: 1.6; color: #bcbccd; }
.player-status { margin: 10px 0; }
.player-status.error { color: #ffb5b5; }
.offline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0; }
/* ---------------------------------------------------------------------------
   Personalisation. The saved theme, accent, prayer text size and font arrive as
   data attributes on <html>, set before the first paint.
   --------------------------------------------------------------------------- */
:root {
    --accent-1: #5856d6;
    --accent-2: #af52de;
    --accent-3: #d6368c;
    --accent-soft: rgba(88, 86, 214, .2);
    --accent-border: rgba(88, 86, 214, .4);
    --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    --accent-gradient-2: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    --prayer-font: 'Amiri', serif;
    --prayer-scale: 1;
}
[data-accent="teal"] { --accent-1: #0f8f84; --accent-2: #22b3a2; --accent-3: #4fd1b5; --accent-soft: rgba(15, 143, 132, .2); --accent-border: rgba(34, 179, 162, .45); }
[data-accent="amber"] { --accent-1: #b8760f; --accent-2: #e09a2b; --accent-3: #f2c14e; --accent-soft: rgba(184, 118, 15, .2); --accent-border: rgba(224, 154, 43, .45); }
[data-accent="rose"] { --accent-1: #b3174f; --accent-2: #e04a7f; --accent-3: #f27ba3; --accent-soft: rgba(179, 23, 79, .2); --accent-border: rgba(224, 74, 127, .45); }
[data-text-size="small"] { --prayer-scale: .85; }
[data-text-size="large"] { --prayer-scale: 1.15; }
[data-text-size="xlarge"] { --prayer-scale: 1.3; }
[data-font="naskh"] { --prayer-font: 'Noto Naskh Arabic', 'Amiri', serif; }
[data-font="system"] { --prayer-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Light theme. Car mode exposes its palette as custom properties, so overriding
   those covers it; the normal reader is overridden per surface. */
[data-theme="light"] {
    --bg-color: #eef0f6;
    --surface: #ffffff;
    --text-main: #14141c;
    --text-dim: #5b5b6e;
}
[data-theme="light"] body { background: #eef0f6; color: #14141c; }
[data-theme="light"] .card { background: #ffffff; border-color: rgba(20, 20, 40, .07); box-shadow: 0 8px 32px rgba(20, 20, 50, .08); }
[data-theme="light"] .header p { color: #5b5b6e; }
[data-theme="light"] .car-mode-link { background: rgba(20, 20, 40, .06); color: #14141c; border-color: rgba(20, 20, 40, .1); }
[data-theme="light"] .track { background: #f4f5fa; border-color: rgba(20, 20, 40, .06); }
[data-theme="light"] .track-number { background: #e6e7f0; }
[data-theme="light"] .track-number svg { fill: #8a8aa0; }
[data-theme="light"] .track-title { color: #14141c; }
[data-theme="light"] .track-meta { color: #71718a; }
/* The meta line translates the Arabic title, so it is only useful off Arabic. */
html:lang(ar) .track-meta { display: none; }
[data-theme="light"] .track-arrow svg { fill: #b9b9cc; }
[data-theme="light"] .slide { background: #ffffff; border-color: rgba(20, 20, 40, .06); }
[data-theme="light"] .slide-content { color: #1d1d28; }
[data-theme="light"] .slide-meta { color: #5b5b6e; border-top-color: rgba(20, 20, 40, .06); }
[data-theme="light"] .audio-player { background: #f4f5fa; box-shadow: 0 -4px 16px rgba(20, 20, 50, .07); }
[data-theme="light"] .progress-bar { background: #dfe1ec; }
[data-theme="light"] .skip-btn, [data-theme="light"] .speed-btn { background: rgba(20, 20, 40, .06); border-color: rgba(20, 20, 40, .08); color: #2a2a3a; }
[data-theme="light"] .time-display { color: #5b5b6e; }
[data-theme="light"] .status-text { color: #71718a; }
[data-theme="light"] .container.focus-mode .track-btn { background: rgba(255, 255, 255, .95); }
[data-theme="light"] .player-status, [data-theme="light"] .offline-status, [data-theme="light"] .transcript-note { color: #565669; }
[data-theme="light"] .repeat-badge, [data-theme="light"] .reset-count, [data-theme="light"] .offline-button,
[data-theme="light"] .retry-button, [data-theme="light"] .prayer-navigation button,
[data-theme="light"] .settings-button, [data-theme="light"] .settings-close {
    background: #eceef6; color: #23232f; border-color: #c9cbdd;
}
[data-theme="light"] .repeat-badge[aria-disabled="true"] { background: #dff3e6; color: #1c6b3a; }
[data-theme="light"] .settings-toolbar { background: #eef0f6; }
[data-theme="light"] .settings-dialog { background: #ffffff; color: #14141c; border-color: #c9cbdd; }
[data-theme="light"] .settings-dialog::backdrop { background: rgba(20, 20, 40, .45); }
[data-theme="light"] .settings-hint, [data-theme="light"] .settings-status { color: #565669; }
[data-theme="light"] .settings-row { border-bottom-color: #e2e4ee; }
[data-theme="light"] .settings-row select { background: #eceef6; color: #14141c; border-color: #c9cbdd; }
[data-theme="light"] .settings-group { color: #565669; }
[data-theme="light"] .fallback-note { color: #8a5a00; }
[data-theme="light"] .noscript { color: #a11; }
[data-theme="light"] .car-header { background: var(--surface); border-bottom-color: #d8dae6; }
[data-theme="light"] .exit-car-btn { background: #e6e7f0; border-left-color: #d8dae6; }
[data-theme="light"] .prayer-chunk { background: rgba(20, 20, 40, .04); border-color: rgba(20, 20, 40, .06); }
[data-theme="light"] .prayer-chunk.active-sync { background: var(--accent-soft); color: #14141c; }
[data-theme="light"] .audio-controls { background: var(--surface); border-color: #e2e4ee; }
[data-theme="light"] .time-readout { color: var(--text-dim); }
[data-theme="light"] button:focus-visible, [data-theme="light"] input:focus-visible, [data-theme="light"] a:focus-visible {
    outline-color: var(--accent-1);
}
/* Settings groups */
.settings-group { margin: 18px 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #9a9ab0; text-transform: uppercase; }
.settings-group:first-of-type { margin-top: 4px; }

/* Icon-only controls. The glyph is the whole button, so the hit area is kept at
   a comfortable touch size and the arrow geometry is mirrored for RTL. */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}
.icon-button svg { width: 24px; height: 24px; fill: currentColor; display: block; flex-shrink: 0; }
/* The gear is a ring with teeth, so its centre is punched out with the button's
   own background colour instead of a fixed one. */
.gear-hub { fill: #29243c; }
[data-theme="light"] .gear-hub { fill: #e6e6ef; }
.arrow-back svg, .arrow-forward svg { width: 28px; height: 28px; }
/* The reading order runs the other way in RTL, so the pair of arrows is mirrored
   as a whole: "previous" always points back along the order and "next" forward. */
html[dir="rtl"] .arrow-back svg, html[dir="rtl"] .arrow-forward svg { transform: scaleX(-1); }
/* One download/remove row per recitation inside the settings dialog. */
.offline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 8px 0;
    border-bottom: 1px solid #353544;
}
.offline-name { font-size: 15px; }
.offline-actions { display: flex; align-items: center; gap: 10px; margin: 0; }
.offline-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #666680;
    border-radius: 10px;
    background: #29243c;
    color: #eee5ff;
    cursor: pointer;
}
.offline-button:disabled { opacity: .5; cursor: default; }
.offline-status { font-size: 13px; color: #bcbccd; }

.transcript-note { margin: 8px 0 16px; }
.load-error { padding: 20px; }
/* A segment marked `opening` is not part of the prayer text: it is centred above
   it, in the accent colour, with a hairline separating the two. */
.prayer-opening {
    display: block;
    text-align: center;
    color: var(--accent-2);
    font-size: .72em;
    line-height: 1.9;
    max-width: 92%;
    margin: 0 auto 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent-border);
}
/* Citation under a card, for example [آية الكرسي - البقرة ٢٥٥]. */
.prayer-reference {
    display: block;
    text-align: center;
    font-size: .66em;
    color: #8a8aa0;
    margin-top: 14px;
}
[data-theme="light"] .prayer-opening { color: var(--accent-1); }
[data-theme="light"] .prayer-reference { color: #6b6b80; }
.retry-button { display: block; margin-top: 12px; }
.carousel { cursor: auto; }
.carousel:active { cursor: auto; }
.status-bar { display: none; } /* Status now lives beside the active player. */
.car-content { min-height: 0; }
.tab-panel { min-height: 0; box-sizing: border-box; padding: 16px; }
.prayer-text-container { min-height: 100px; }
.audio-controls { flex-shrink: 0; }
.car-content .player-status { margin: 4px 0; }
.car-content .offline-actions { margin: 4px 0; }
.carousel { height: 60dvh; min-height: 240px; }
.carousel .slide { height: 100%; overflow-y: auto; }
.settings-toolbar { display: flex; justify-content: flex-end; width: 100%; flex-shrink: 0; padding: 6px 12px; box-sizing: border-box; background: #1a1a24; }

.settings-button, .settings-close { min-height: 40px; padding: 8px 16px; background: #29243c; color: #eee5ff; border: 1px solid #666680; border-radius: 8px; font: inherit; cursor: pointer; }
.settings-button { width: 44px; min-width: 44px; height: 44px; padding: 0; }

@media (max-width: 480px) {
    .audio-player { gap: 7px; padding: 10px 8px; }
    .audio-controls { padding: 0 8px; gap: 8px; height: 92px; margin-bottom: 12px; }
    .audio-controls .play-pause-btn { width: 64px; height: 64px; flex-shrink: 0; }
    .audio-controls .skip-btn, .audio-controls .speed-btn { width: 52px; height: 52px; flex-shrink: 0; }
    .tab-btn { font-size: 1rem; }
    .exit-car-btn { width: 44px; flex-shrink: 0; }
    .prayer-text-container { font-size: calc(28px * var(--prayer-scale)); }
    .prayer-chunk { padding: 12px; }
    .progress-bar-container { gap: 12px; padding: 0; }
    .time-readout { font-size: 1rem; }
    /* The card navigation and the prayer text share one row worth of height:
       tighter margins keep the whole player above the fold. */
    .prayer-navigation { margin: 8px 0; }
    .prayer-navigation .icon-button { width: 44px; min-width: 44px; height: 44px; }
    .settings-dialog { padding: 18px 16px; }
    .offline-name { font-size: 14px; }
    .offline-button { width: 42px; height: 42px; }
    /* The toolbar holds one icon, so it only needs the height of that icon plus
       a hairline of breathing room rather than a full bar. */
    .settings-toolbar { padding: 4px 8px; }
    .settings-button { width: 40px; min-width: 40px; height: 40px; }
    /* This file is loaded after style.css, so the carousel height has to be
       trimmed here: an equally specific rule in the earlier sheet would lose.
       The space the chrome above gives up goes to the prayer text. */
    .carousel { height: 48dvh; min-height: 200px; gap: 12px; margin-bottom: 12px; }
}
@media (max-height: 620px) {
    html:has(.car-content), body:has(.car-content) { height: auto; min-height: 100dvh; overflow: auto; }
    .car-content { overflow: visible; }
    .prayer-text-container { max-height: 45vh; flex: auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
.track-title, .track-meta { display: block; }
.slide-counter { direction: ltr; }
.audio-controls .skip-btn { direction: ltr; }
.prayer-navigation { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; }
.prayer-navigation button { min-height: 44px; padding: 8px 12px; border: 1px solid #666680; border-radius: 8px; background: #29243c; color: #eee5ff; cursor: pointer; }
/* Card navigation is a pair of arrows, so each one is square rather than sized
   to a label. */
.prayer-navigation .icon-button { width: 48px; min-width: 48px; height: 48px; padding: 0; }
.prayer-navigation .icon-button:disabled { opacity: .45; cursor: default; }
/* Preferences remain reachable when the normal reader enters focus mode. */
body:has(.container) { flex-direction: column; align-items: center; }
/* The gear is icon-only, so it is square instead of sized to a label. */
.settings-dialog { box-sizing: border-box; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid #666680; border-radius: 18px; background: #1a1a24; color: #f0f0f5; font: 16px/1.5 'Inter', sans-serif; }
.settings-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.settings-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.settings-hint, .settings-status { font-size: 14px; color: #bcbccd; margin: 12px 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid #353544; cursor: pointer; }
.settings-row select { max-width: 58%; }
.settings-row input { width: 24px; height: 24px; accent-color: var(--accent-2); flex-shrink: 0; }
.settings-row select { min-height: 40px; padding: 6px; background: #29243c; color: #fff; border: 1px solid #666680; border-radius: 6px; font: inherit; }
.settings-row select:focus-visible { outline: 3px solid #cbb3ff; outline-offset: 3px; }
/* Shown when the synchronized dataset failed and the reading list is used. */
.fallback-note { color: #ffd9a0; }
/* Shown only when scripting is unavailable. */
.noscript { padding: 16px; color: #ffb5b5; }

/* --- Floating dock ---------------------------------------------------------
   The player, the card arrows and the settings cog form one bar pinned to the
   bottom of the viewport, so the reading area never has to be scrolled just to
   reach the controls. The reader keeps a matching bottom padding so no text can
   hide underneath the bar. */
:root { --dock-height: 76px; }
.track.open .audio-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    border-radius: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
/* The arrows ride in the dock too, in a row above the transport controls, which
   frees the whole strip they used to occupy. */
.track.open .prayer-navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--dock-height);
    z-index: 30;
    margin: 0;
    padding: 6px 16px;
    justify-content: space-between;
    pointer-events: none;
    /* The arrows belong to the dock, so they get its surface rather than
       floating over the end of the prayer text. */
    background: #1a1a24;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.track.open .prayer-navigation .icon-button { pointer-events: auto; }
/* The cog is moved into the transport row by the player, so it only needs to be
   hidden while it is still waiting in the top bar. */
body:has(.track.open) .settings-toolbar { display: none; }
.track.open .audio-player .settings-button { flex-shrink: 0; }
/* Room for the dock, so the end of a card is never hidden behind it. */
.track.open .track-content { padding-bottom: calc(var(--dock-height) + 22px); }

/* The open track is a column: its header stays at the top and the card area
   grows to fill everything above the dock, so the leftover space the fixed
   bar used to leave behind is handed to the prayer text instead of sitting
   empty at the bottom of the page. */
/* The card stops above the dock rather than at the foot of the viewport, so the
   column has a definite height for the prayer area to grow into. */
/* The card carries a backdrop-filter, which makes it the containing block for
   the fixed dock inside it. Giving it the full viewport height therefore puts
   the dock at the true bottom of the screen, and the reading area above it
   scrolls within the space that is left. */
.container.focus-mode .card { min-height: 0; height: 100dvh; }
body:has(.track.open) .card { display: flex; flex-direction: column; }
body:has(.track.open) .container,
body:has(.track.open) .tracks { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.track.open { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.track.open .track-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.track.open .carousel { flex: 1; height: auto; min-height: 180px; }
.track.open .slide { height: 100%; }

/* The status line sits under the transport row, inside the dock, so it is never
   overlapped by the arrows that ride above it. */
.track.open .dock-status {
    position: fixed;
    left: 0;
    right: 0;
    /* Below the transport controls, in the padding the player reserves for it. */
    bottom: 0;
    z-index: 29;
    padding: 0 16px 8px;
    text-align: center;
    pointer-events: none;
}
.track.open .dock-status .player-status { margin: 0; font-size: 13px; }
.track.open .audio-player { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }

/* Light theme keeps the dock surfaces consistent with the rest of the reader. */
[data-theme="light"] .track.open .prayer-navigation { background: #f4f5fa; border-top-color: #e2e4ee; }
[data-theme="light"] .track.open .audio-player { box-shadow: 0 -6px 24px rgba(20, 20, 50, .1); }