/* Fonts are linked from the HTML so the browser can preconnect and the request
   does not block this stylesheet. */

:root {
    --bg-color: #000000;
    --surface: #121212;
    --primary: var(--accent-1);
    --primary-dim: var(--accent-soft);
    --text-main: #ffffff;
    --text-dim: #a0a0a0;
    --hitbox: 72px; /* Minimum 64px, pushing to 72px for perfect car glances */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%; height: 100vh; overflow: hidden;
    background: var(--bg-color); color: var(--text-main);
    font-family: 'Inter', sans-serif;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body { 
    display: flex; flex-direction: column; 
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Header & Tabs */
.car-header {
    display: flex; height: var(--hitbox); background: var(--surface);
    border-bottom: 2px solid #222; z-index: 10;
}
.car-tabs {
    display: flex; flex: 1;
}
.tab-btn {
    flex: 1; height: var(--hitbox); background: none; border: none;
    color: var(--text-dim); font-size: 1.25rem; font-family: 'Amiri', serif;
    font-weight: 700; cursor: pointer; transition: 0.2s;
    border-bottom: 4px solid transparent;
}
.tab-btn.active {
    color: var(--text-main); border-bottom-color: var(--primary);
    background: linear-gradient(to top, rgba(88,86,214,0.1), transparent);
}
.exit-car-btn {
    width: var(--hitbox); height: var(--hitbox);
    display: flex; align-items: center; justify-content: center;
    background: #2a2a2a; text-decoration: none;
    border-left: 2px solid #111;
}
.exit-car-btn svg { width: 32px; height: 32px; fill: #ff453a; }

/* Content Area */
.car-content { flex: 1; position: relative; overflow: hidden; }
.tab-panel {
    display: none; height: 100%; flex-direction: column;
    padding: 24px; animation: fadeIn 0.3s ease;
}
.tab-panel.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Prayer Text Container */
.prayer-text-container {
    flex: 1; overflow-y: auto; padding-bottom: 40px;
    font-family: var(--prayer-font); font-size: calc(38px * var(--prayer-scale)); line-height: 1.8;
    text-align: right;
    scrollbar-width: none;
}
.prayer-text-container::-webkit-scrollbar { display: none; }
.prayer-chunk {
    margin-bottom: 36px; transition: color 0.3s;
    padding: 20px; background: rgba(255,255,255,0.03);
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.05);
}

/* Scaffold for active sync highlighting */
.prayer-chunk.active-sync { 
    color: #ffffff; 
    border-color: var(--primary);
    background: var(--primary-dim);
    box-shadow: 0 0 20px rgba(88,86,214,0.1);
}

/* Audio Controls */
.audio-controls {
    display: flex; justify-content: space-evenly; align-items: center;
    height: 120px; background: var(--surface); border-radius: 24px;
    padding: 0 24px; margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.05);
}
.play-pause-btn {
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--accent-gradient-2);
    border: none; color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 8px 24px var(--accent-soft);
}
.play-pause-btn svg { width: 44px; height: 44px; fill: currentColor; }

.skip-btn {
    width: var(--hitbox); height: var(--hitbox); background: rgba(255,255,255,0.05); 
    border: none; border-radius: 50%; color: var(--text-main); 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.speed-btn {
    width: var(--hitbox); height: var(--hitbox); background: rgba(255,255,255,0.05);
    border: none; border-radius: 16px; color: var(--text-main);
    font-size: 1.3rem; font-weight: bold; cursor: pointer;
    font-variant-numeric: tabular-nums;
}

/* Progress */
.progress-bar-container { display: flex; align-items: center; gap: 20px; padding: 0 10px; }
.progress-bar {
    flex: 1; height: 24px; background: #222; border-radius: 12px; 
    overflow: hidden; cursor: pointer; position: relative;
}
.time-readout { font-size: 1.4rem; font-family: monospace; font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* Sync Spans */
.sync-span { transition: color 0.2s ease, text-shadow 0.2s ease; }
.sync-span.active-sync { color: var(--accent-2); text-shadow: 0 0 12px var(--accent-soft); font-weight: bold; }

/* Phone density. A phone in car mode still has to fit the tabs, the prayer text
   and the transport controls without overlapping, so the wide-screen padding and
   the large gaps are trimmed while every control keeps a full hit area. */
@media (max-width: 480px) {
    :root { --hitbox: 64px; }
    .tab-panel { padding: 10px; }
    .tab-btn { font-size: 1.05rem; }
    .exit-car-btn svg { width: 26px; height: 26px; }
    .prayer-text-container { padding-bottom: 16px; }
    .prayer-chunk { margin-bottom: 20px; padding: 14px; border-radius: 12px; }
    /* Six controls share the transport row, so each one is sized to fit the
       narrowest phone without the arrows spilling past the rounded edge. */
    .car-content .audio-controls { height: 84px; padding: 0 8px; margin-bottom: 10px; border-radius: 18px; }
    .car-content .audio-controls .skip-btn,
    .car-content .audio-controls .speed-btn { width: 44px; height: 44px; font-size: 1rem; }
    .car-content .audio-controls .play-pause-btn { width: 56px; height: 56px; }
    .car-content .audio-controls .play-pause-btn svg { width: 28px; height: 28px; }
    /* These must beat the base rule that sizes them from --hitbox. */
    .car-content .audio-controls .prayer-previous.icon-button,
    .car-content .audio-controls .prayer-next.icon-button { width: 42px; min-width: 42px; height: 42px; }
    .car-content .audio-controls .prayer-previous svg,
    .car-content .audio-controls .prayer-next svg { width: 24px; height: 24px; }

    .progress-bar-container { gap: 12px; padding: 0; }
    .time-readout { font-size: 1rem; }
}


/* Card navigation in car mode. The player sets the arrows into the transport row
   itself, so they are styled where they actually live and match the round
   controls beside them. The row now carries six controls, so it tightens its
   spacing and lets the buttons shrink on a narrow screen instead of letting the
   arrows spill past the rounded edge. */
.car-content .prayer-navigation { margin: 0; padding: 0; }
.car-content .audio-controls {
    justify-content: space-evenly;
    box-sizing: border-box;
    max-width: 100%;
    /* Six controls now share the row, so each one keeps its size and the row
       distributes the remaining space rather than squeezing them together. */
}
.car-content .audio-controls > * { flex-shrink: 0; }
.car-content .audio-controls .prayer-previous,
.car-content .audio-controls .prayer-next {
    width: var(--hitbox);
    min-width: var(--hitbox);
    height: var(--hitbox);
    flex-shrink: 0;
    padding: 0;
    position: static;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 50%;
    color: var(--text-main);
    cursor: pointer;
}
.car-content .audio-controls .prayer-previous svg,
.car-content .audio-controls .prayer-next svg { width: 32px; height: 32px; fill: currentColor; }
.car-content .audio-controls .prayer-previous:disabled,
.car-content .audio-controls .prayer-next:disabled { opacity: .3; cursor: default; }

/* Only the narrowest phones cannot hold six controls in one row at a
   comfortable touch size. There the arrows take a row of their own rather than
   shrinking below a reliable target. */
@media (max-width: 344px) {
    .car-content .audio-controls { flex-wrap: wrap; row-gap: 8px; height: auto; min-height: 88px; padding: 8px; }
    .car-content .audio-controls .prayer-previous,
    .car-content .audio-controls .prayer-next { order: 1; }
}