/* SIE Chapter Shared Styles
 * Chapter-specific styles for sie-chapter-*.html and series-7-*.html files
 * Requires main.css to be loaded first for CSS variables and base styles
 * Updated: Enhanced legibility and visual polish
 */

/* ============================================
   Smooth Scrolling & Selection
   ============================================ */
html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(124, 152, 133, 0.3);
    color: var(--fh-gray-900);
}

/* ============================================
   Chapter Container - Optimized Reading Width
   ============================================ */
.container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--fh-space-xl);
    padding-bottom: var(--fh-space-4xl);
}

/* ============================================
   Enhanced Typography for Long-Form Reading
   ============================================ */
body {
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: -0.011em;
}

p {
    margin-bottom: 1.5em;
    color: var(--fh-gray-700);
    text-wrap: pretty;
}

/* Section headings with anchor offset for sticky header */
h2,
h3,
h4 {
    scroll-margin-top: 100px;
}

h2:not(.audio-card__title):not(.audio-library__section-title) {
    font-size: 1.875rem;
    font-weight: 500;
    margin-top: var(--fh-space-4xl);
    margin-bottom: var(--fh-space-xl);
    padding-top: var(--fh-space-2xl);
    padding-bottom: var(--fh-space-md);
    border-top: 1px solid var(--fh-gray-200);
    color: var(--fh-navy);
    letter-spacing: -0.025em;
    position: relative;
}

h2:first-of-type:not(.audio-card__title):not(.audio-library__section-title) {
    border-top: none;
    padding-top: 0;
    margin-top: var(--fh-space-2xl);
}

/* Decorative element for section headers (not audio cards) */
h2:not(.audio-card__title):not(.audio-library__section-title)::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--fh-space-2xl);
    width: 40px;
    height: 3px;
    background: var(--fh-sage);
    border-radius: 2px;
}

h2:first-of-type:not(.audio-card__title)::before {
    top: 0;
}

h3 {
    font-size: 1.375rem;
    font-weight: 500;
    margin-top: var(--fh-space-2xl);
    margin-bottom: var(--fh-space-md);
    color: var(--fh-gray-900);
    letter-spacing: -0.02em;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: var(--fh-space-xl);
    margin-bottom: var(--fh-space-md);
    color: var(--fh-gray-800);
    letter-spacing: -0.01em;
}

/* ============================================
   Sticky Header - Clean & Minimal
   ============================================ */
.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fh-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.3s ease;
    /* Override main.css home page header padding */
    padding: 0;
    text-align: left;
}

.header--scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--fh-space-md) var(--fh-space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__title {
    font-family: var(--fh-font-display);
    font-size: 1.125rem;
    color: var(--fh-navy);
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
}

.breadcrumb {
    display: flex;
    gap: var(--fh-space-sm);
    font-size: 0.8125rem;
    color: var(--fh-gray-500);
}

.breadcrumb a {
    color: var(--fh-gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--fh-navy);
}

.breadcrumb span {
    color: var(--fh-gray-400);
}

/* ============================================
   Progress Bar - Animated
   ============================================ */
.progress {
    background: var(--fh-gray-100);
    height: 3px;
    overflow: hidden;
}

.progress__bar {
    background: linear-gradient(90deg, var(--fh-sage), var(--fh-navy));
    height: 100%;
    width: 0%;
    transition: width 0.1s ease-out;
}

/* ============================================
   Chapter Meta - Reading Time & Weight
   ============================================ */
.chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fh-space-lg);
    margin-bottom: var(--fh-space-xl);
    padding: var(--fh-space-md) 0;
    border-bottom: 1px solid var(--fh-gray-200);
}

.chapter-meta__item {
    display: flex;
    align-items: center;
    gap: var(--fh-space-sm);
    font-family: var(--fh-font-mono);
    font-size: 0.8125rem;
    color: var(--fh-gray-600);
}

.chapter-meta__icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.chapter-meta__label {
    font-weight: 500;
    color: var(--fh-gray-500);
}

/* ============================================
   Introduction - Large, Inviting Text
   ============================================ */
.intro {
    font-family: var(--fh-font-body);
    font-size: 1.1875rem;
    color: var(--fh-gray-700);
    line-height: 1.65;
    margin-bottom: var(--fh-space-2xl);
    padding-bottom: var(--fh-space-xl);
    border-bottom: 1px solid var(--fh-gray-200);
    font-weight: 400;
}

.intro p {
    margin-bottom: 1.25em;
}

.intro p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Table of Contents - Clean Card Style
   ============================================ */
.toc {
    background: var(--fh-white);
    border: 1px solid var(--fh-gray-200);
    border-radius: 8px;
    padding: var(--fh-space-xl) var(--fh-space-2xl);
    margin: var(--fh-space-2xl) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.toc__title {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fh-gray-500);
    margin-bottom: var(--fh-space-lg);
    padding-bottom: var(--fh-space-sm);
    border-bottom: 1px solid var(--fh-gray-200);
}

.toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc__item {
    margin-bottom: var(--fh-space-sm);
}

.toc__link {
    color: var(--fh-gray-700);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    padding: var(--fh-space-sm) var(--fh-space-md);
    margin: 0 calc(var(--fh-space-md) * -1);
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

.toc__link:hover {
    background: var(--fh-gray-100);
    color: var(--fh-navy);
}

.toc__link.active {
    background: rgba(124, 152, 133, 0.1);
    color: var(--fh-navy);
    font-weight: 500;
}

.toc__number {
    font-family: var(--fh-font-mono);
    font-size: 0.8125rem;
    color: var(--fh-sage);
    margin-right: var(--fh-space-md);
    font-weight: 600;
    min-width: 24px;
}

/* ============================================
   Content Sections - Card-like Appearance
   ============================================ */
section {
    margin-bottom: var(--fh-space-3xl);
}

/* ============================================
   Lists - Better Spacing & Readability
   ============================================ */
ul,
ol {
    margin-bottom: 1.5em;
    margin-left: var(--fh-space-lg);
    color: var(--fh-gray-700);
}

li {
    margin-bottom: 0.75em;
    line-height: 1.75;
    padding-left: var(--fh-space-sm);
}

li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
li ul,
li ol {
    margin-top: 0.75em;
    margin-bottom: 0;
}

/* ============================================
   Key Terms - Subtle Highlight
   ============================================ */
.key-term {
    border-bottom: 1px dotted var(--fh-sage);
    font-weight: 500;
    color: var(--fh-gray-900);
    transition: border-color 0.2s ease;
}

.key-term:hover {
    border-bottom-color: var(--fh-navy);
}

/* ============================================
   Info Box - Real World Examples
   ============================================ */
.info-box {
    background: var(--fh-white);
    border-left: 4px solid var(--fh-sage);
    padding: var(--fh-space-lg) var(--fh-space-xl);
    margin: 1.75em 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.info-box__title {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fh-sage);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-md);
    display: flex;
    align-items: center;
    gap: var(--fh-space-sm);
}

.info-box__title::before {
    content: '→';
    font-size: 1rem;
}

.info-box p {
    margin-bottom: 0.75em;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box ul,
.info-box ol {
    margin-bottom: 0.75em;
    font-size: 0.9375rem;
}

.info-box li {
    margin-bottom: 0.5em;
}

/* ============================================
   Test Tip - Gold Accent
   ============================================ */
.test-tip {
    background: linear-gradient(135deg, #b08d57 0%, #9a7b4a 100%);
    color: var(--fh-white);
    padding: var(--fh-space-lg) var(--fh-space-xl);
    border-radius: 8px;
    margin: 1.75em 0;
    box-shadow: 0 4px 12px rgba(176, 141, 87, 0.25);
    position: relative;
    overflow: hidden;
}

.test-tip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.test-tip p {
    color: var(--fh-white);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.test-tip strong {
    color: var(--fh-white);
    font-weight: 600;
}

/* ============================================
   Exam Focus Box - High Priority (Red)
   ============================================ */
.exam-focus {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: var(--fh-white);
    padding: var(--fh-space-lg) var(--fh-space-xl);
    border-radius: 8px;
    margin: 1.75em 0;
    border-left: 6px solid #7f1d1d;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.exam-focus__label {
    font-family: var(--fh-font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-md);
    display: flex;
    align-items: center;
    gap: var(--fh-space-sm);
}

.exam-focus__label::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.exam-focus p,
.exam-focus ol,
.exam-focus li {
    color: var(--fh-white);
    margin-bottom: 0.5em;
}

/* ============================================
   Critical Concept - Must Memorize (Navy)
   ============================================ */
.critical-concept {
    background: var(--fh-white);
    border: 2px solid var(--fh-navy);
    padding: var(--fh-space-xl);
    border-radius: 8px;
    margin: 1.75em 0;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.08);
}

.critical-concept__label {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fh-navy);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-md);
    padding-bottom: var(--fh-space-sm);
    border-bottom: 2px solid var(--fh-navy);
    display: flex;
    align-items: center;
    gap: var(--fh-space-sm);
}

.critical-concept__label::before {
    content: '◆';
    font-size: 0.625rem;
}

.critical-concept p {
    margin-bottom: var(--fh-space-md);
    font-size: 0.9375rem;
}

.critical-concept ul {
    margin-bottom: var(--fh-space-md);
}

.critical-concept li {
    font-size: 0.9375rem;
    margin-bottom: 0.5em;
}

/* Critical concept tables */
.critical-concept table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--fh-space-md);
    font-size: 0.9375rem;
    border-radius: 6px;
    overflow: hidden;
}

.critical-concept th {
    background: var(--fh-navy);
    color: var(--fh-white);
    padding: var(--fh-space-md) var(--fh-space-lg);
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
}

.critical-concept td {
    padding: var(--fh-space-md) var(--fh-space-lg);
    border-bottom: 1px solid var(--fh-gray-200);
    background: var(--fh-white);
}

.critical-concept tr:nth-child(even) td {
    background: var(--fh-gray-100);
}

.critical-concept tr:last-child td {
    border-bottom: none;
}

/* ============================================
   Comparison Table - Clean Design
   ============================================ */
.comparison-table {
    background: var(--fh-white);
    border: 1px solid var(--fh-gray-200);
    border-radius: 8px;
    overflow: hidden;
    margin: 1.75em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: var(--fh-gray-100);
    padding: var(--fh-space-md) var(--fh-space-lg);
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--fh-gray-800);
    border-bottom: 2px solid var(--fh-gray-200);
}

.comparison-table td {
    padding: var(--fh-space-md) var(--fh-space-lg);
    border-bottom: 1px solid var(--fh-gray-200);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:hover td {
    background: var(--fh-gray-100);
}

/* ============================================
   Historical Note - Warm Background
   ============================================ */
.historical-note {
    background: linear-gradient(135deg, #fffdf7 0%, #fff8e7 100%);
    border: 1px solid #e8dcc8;
    padding: var(--fh-space-lg) var(--fh-space-xl);
    margin: 1.75em 0;
    border-radius: 8px;
    position: relative;
}

.historical-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--fh-burgundy);
    border-radius: 4px 0 0 4px;
}

.historical-note__label {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fh-burgundy);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-md);
    display: flex;
    align-items: center;
    gap: var(--fh-space-sm);
}

.historical-note__label::before {
    content: '◇';
    font-size: 0.625rem;
}

.historical-note p {
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--fh-gray-700);
    margin-bottom: 0;
}

/* ============================================
   Calculation Box - Formula Display
   ============================================ */
.calculation-box {
    background: linear-gradient(135deg, var(--fh-gray-100) 0%, #e8ebe9 100%);
    border: 2px solid var(--fh-sage);
    border-radius: 8px;
    padding: var(--fh-space-xl);
    margin: 1.75em 0;
    text-align: center;
}

.calculation-box__label {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fh-sage);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--fh-space-sm);
}

.calculation-box__formula {
    font-family: var(--fh-font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fh-gray-900);
    padding: var(--fh-space-md) 0;
    letter-spacing: 0.02em;
}

/* ============================================
   Chapter Navigation - Prev/Next
   ============================================ */
.chapter-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fh-space-lg);
    margin-top: var(--fh-space-3xl);
    padding-top: var(--fh-space-2xl);
    border-top: 1px solid var(--fh-gray-200);
}

.chapter-nav__link {
    display: flex;
    flex-direction: column;
    padding: var(--fh-space-lg);
    background: var(--fh-white);
    border: 1px solid var(--fh-gray-200);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.chapter-nav__link:hover {
    border-color: var(--fh-navy);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.chapter-nav__link--prev {
    align-items: flex-start;
}

.chapter-nav__link--next {
    align-items: flex-end;
    text-align: right;
}

.chapter-nav__label {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fh-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-xs);
}

.chapter-nav__title {
    font-family: var(--fh-font-display);
    font-size: 1rem;
    color: var(--fh-navy);
    font-weight: 500;
}

/* ============================================
   Footer - Enhanced
   ============================================ */
.footer {
    padding: var(--fh-space-2xl) var(--fh-space-xl);
    text-align: center;
    border-top: 1px solid var(--fh-gray-200);
    background: var(--fh-white);
    margin-top: var(--fh-space-3xl);
}

.footer__text {
    color: var(--fh-gray-600);
    font-size: 0.875rem;
    margin-bottom: var(--fh-space-sm);
}

.footer__links {
    display: flex;
    justify-content: center;
    gap: var(--fh-space-md);
    font-size: 0.8125rem;
}

.footer__links a {
    color: var(--fh-gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__links a:hover {
    color: var(--fh-navy);
}

.footer__links span {
    color: var(--fh-gray-300);
}

/* ============================================
   Code & Pre - Monospace Blocks
   ============================================ */
pre {
    background: var(--fh-gray-100);
    padding: var(--fh-space-lg);
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5em 0;
    font-family: var(--fh-font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    border: 1px solid var(--fh-gray-200);
}

code {
    font-family: var(--fh-font-mono);
    font-size: 0.9em;
    background: var(--fh-gray-100);
    padding: 0.125em 0.375em;
    border-radius: 4px;
}

/* ============================================
   Audio Player Component
   ============================================ */
.audio-player {
    background: linear-gradient(135deg, var(--fh-navy) 0%, #003d82 100%);
    border-radius: 8px;
    padding: var(--fh-space-lg);
    margin: var(--fh-space-xl) 0;
    box-shadow: 0 4px 12px rgba(0, 45, 98, 0.15);
}

.audio-player__header {
    display: flex;
    align-items: center;
    gap: var(--fh-space-md);
    margin-bottom: var(--fh-space-md);
}

.audio-player__icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audio-player__icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.audio-player__meta {
    flex: 1;
    min-width: 0;
}

.audio-player__label {
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--fh-space-xs);
}

.audio-player__title {
    font-family: var(--fh-font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.audio-player__duration {
    font-family: var(--fh-font-mono);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--fh-space-xs);
}

.audio-player__controls {
    width: 100%;
}

/* Native controls visible as fallback; JS removes [controls] attr when custom player initializes */
.audio-player__controls audio[controls] {
    width: 100%;
    height: 44px;
    border-radius: 4px;
}

.audio-player__controls audio:not([controls]) {
    height: 0;
    display: none;
}

.audio-player__description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--fh-space-md);
    line-height: 1.6;
}

.audio-player__description a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* ============================================
   Custom Audio Player (.cp)
   ============================================ */
.cp {
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    /* Establish a query container so the control layout responds to the
       player's OWN width, not the viewport. This is what lets the same player
       look right whether it's in a wide editorial column or a narrow card. */
    container-type: inline-size;

    /* ── Tokens — accent + glow derived from FHM gold ── */
    --cp-accent: var(--fh-gold, #b08d57);
    --cp-accent-soft: rgba(176, 141, 87, 0.18);
    --cp-fill-glow: rgba(176, 141, 87, 0.45);
    --cp-track-bg: rgba(255, 255, 255, 0.12);
    --cp-buffer-bg: rgba(255, 255, 255, 0.26);
    --cp-controls-color: rgba(255, 255, 255, 0.65);
    --cp-controls-hover: rgba(255, 255, 255, 0.92);
    --cp-time-color: rgba(255, 255, 255, 0.48);
    --cp-seg-border: rgba(255, 255, 255, 0.14);
    --cp-seg-divider: rgba(255, 255, 255, 0.12);
}

/* ── Zone 1: full-width scrub area ── */
.cp__progress-wrap {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Hit area — 28px desktop so the bar is easy to grab */
.cp__progress-bar {
    position: relative;
    width: 100%;
    height: 28px;
    cursor: pointer;
    touch-action: none;
    display: flex;
    align-items: center;
}

.cp__progress-bar:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Track — 6px rest, swells to 10px on interaction */
.cp__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--cp-track-bg);
    border-radius: 5px;
    transition: height 0.12s ease-out;
    pointer-events: none;
}

.cp__buffered {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--cp-buffer-bg);
    border-radius: 5px;
    width: 0;
    pointer-events: none;
    transition: height 0.12s ease-out, width 0.3s ease;
}

.cp__fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--cp-accent);
    border-radius: 5px;
    width: 0;
    pointer-events: none;
    transition: width 0.05s linear, height 0.12s ease-out, box-shadow 0.15s ease-out;
}

/* Swell on hover / focus / active */
.cp__progress-bar:hover .cp__track,
.cp__progress-bar:focus-visible .cp__track,
.cp__progress-bar:active .cp__track,
.cp__progress-bar:hover .cp__buffered,
.cp__progress-bar:focus-visible .cp__buffered,
.cp__progress-bar:active .cp__buffered,
.cp__progress-bar:hover .cp__fill,
.cp__progress-bar:focus-visible .cp__fill,
.cp__progress-bar:active .cp__fill {
    height: 10px;
}

/* Drag glow on active */
.cp__progress-bar:active .cp__fill {
    box-shadow: 0 0 8px var(--cp-fill-glow);
}

/* Handle — always visible (10px rest, 16px hover), white ring */
.cp__handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--cp-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.12s ease-out, height 0.12s ease-out;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.cp__progress-bar:hover .cp__handle,
.cp__progress-bar:focus-visible .cp__handle,
.cp__progress-bar:active .cp__handle {
    width: 16px;
    height: 16px;
}

/* Split time — current left, total right */
.cp__time {
    display: flex;
    justify-content: space-between;
    font-family: var(--fh-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.72rem;
    color: var(--cp-time-color);
    font-variant-numeric: tabular-nums;
    margin-top: 0.3rem;
}

.cp__current,
.cp__total {
    font-variant-numeric: tabular-nums;
}

.cp__sep {
    /* hidden — time split to corners, no separator needed */
    display: none;
}

/* ── Zone 2: transport row ── */
/* Default (narrow containers, e.g. audio-library cards): stack — transport
   centered, speed segments centered on their own row below. The wide
   pinned-right layout is opted into via @container below. */
.cp__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.cp__transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

/* ── Buttons — base ── */
.cp__btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    color: var(--cp-controls-color);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        color 0.15s,
        opacity 0.15s,
        transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.cp__btn:hover {
    color: var(--cp-controls-hover);
    transform: scale(1.08);
}

.cp__btn:active {
    transform: scale(0.95);
}

.cp__btn:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Play button — 56px, gold gradient fill */
.cp__play {
    width: 56px;
    height: 56px;
    background: var(--cp-accent);
    border-radius: 50%;
    color: #fff;
    transition:
        background 0.15s,
        transform 0.15s,
        opacity 0.15s;
}

.cp__play:hover {
    transform: scale(1.06);
    opacity: 0.9;
    color: #fff;
}

.cp__play:active {
    transform: scale(0.96);
}

.cp__play svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* Skip buttons — 44px touch target, 34px glyph */
.cp__skip {
    min-width: 44px;
    min-height: 44px;
    opacity: 0.75;
}

.cp__skip:hover {
    opacity: 1;
}

.cp__skip svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
}

/* Playing state */
.cp--playing .cp__play {
    opacity: 1;
}

/* ── Segmented speed control ── */
.cp__speed-segs {
    display: flex;
    align-items: center;
    border: 1px solid var(--cp-seg-border);
    border-radius: 6px;
    overflow: hidden;
}

.cp__speed-seg {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cp-controls-color);
    font-family: var(--fh-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0 9px;
    min-height: 40px;
    text-align: center;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.cp__speed-seg + .cp__speed-seg {
    border-left: 1px solid var(--cp-seg-divider);
}

.cp__speed-seg:hover {
    color: var(--cp-controls-hover);
}

.cp__speed-seg:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: -2px;
}

.cp__speed-seg.active {
    color: var(--cp-accent);
    background: var(--cp-accent-soft);
}

/* ── Wide container: transport centered, speed pinned right ──
   Triggers on the PLAYER's own width (not viewport). The 1fr/auto/1fr grid
   needs ~484px to seat the speed segments without squeezing the transport,
   so 500px gives a safe margin. Below this, the stacked default applies —
   which is why the narrow audio-library cards no longer overlap. */
@container (min-width: 500px) {
    .cp__controls {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        flex-direction: row;
        gap: 0;
        align-items: center;
    }

    .cp__transport {
        grid-column: 2;
    }

    .cp__speed-segs {
        grid-column: 3;
        justify-self: end;
    }
}

/* Retain legacy .cp__speed selector so editorial.css overrides aren't broken
   (editorial.css scopes its rules to .ed-audio .cp__speed; those pages won't
   have this element but the rules simply won't match — harmless) */
.cp__speed {
    display: none; /* replaced by .cp__speed-segs */
}

/* ── Editorial context overrides (.ed-audio wrapper = light bg) ── */
/* sie-chapter.css loads last so these win over editorial.css's .cp rules */
.ed-audio .cp {
    --cp-track-bg: rgba(0, 0, 0, 0.08);
    --cp-buffer-bg: rgba(0, 0, 0, 0.14);
    --cp-controls-color: rgba(0, 0, 0, 0.55);
    --cp-controls-hover: rgba(0, 0, 0, 0.85);
    --cp-time-color: rgba(0, 0, 0, 0.45);
    --cp-seg-border: rgba(0, 0, 0, 0.14);
    --cp-seg-divider: rgba(0, 0, 0, 0.1);
    /* accent stays gold — readable on light bg */
}

.ed-audio .cp__play {
    background: var(--cp-accent);
    color: #fff;
}

.ed-audio .cp__handle {
    background: var(--cp-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.3);
}

body.night-mode .ed-audio .cp {
    --cp-track-bg: rgba(255, 255, 255, 0.12);
    --cp-buffer-bg: rgba(255, 255, 255, 0.26);
    --cp-controls-color: rgba(255, 255, 255, 0.65);
    --cp-controls-hover: rgba(255, 255, 255, 0.92);
    --cp-time-color: rgba(255, 255, 255, 0.48);
    --cp-seg-border: rgba(255, 255, 255, 0.14);
    --cp-seg-divider: rgba(255, 255, 255, 0.12);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    /* Bigger hit area on touch */
    .cp__progress-bar {
        height: 44px;
    }

    /* Handle grows to 16px rest, 20px active */
    .cp__handle {
        width: 16px;
        height: 16px;
    }

    .cp__progress-bar:hover .cp__handle,
    .cp__progress-bar:focus-visible .cp__handle,
    .cp__progress-bar:active .cp__handle {
        width: 20px;
        height: 20px;
    }

    /* Controls already stack by default; just enlarge speed segments for touch */
    .cp__speed-seg {
        min-height: 44px;
        padding: 0 14px;
    }
}

/* ============================================
   Audio Library Grid & Cards
   ============================================ */
.audio-library {
    margin-top: var(--fh-space-xl);
}

.audio-library__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--fh-space-xl);
}

.audio-card {
    background: var(--fh-white);
    border: 1px solid var(--fh-gray-200);
    border-radius: 8px;
    padding: var(--fh-space-lg);
    display: flex;
    flex-direction: column;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.audio-card:hover {
    box-shadow: 0 4px 16px rgba(0, 45, 98, 0.1);
    border-color: var(--fh-gray-300);
}

.audio-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--fh-space-xs);
    margin-bottom: var(--fh-space-xs);
}

.audio-card__chapter {
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fh-white);
    background: var(--fh-navy);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.audio-card__info {
    flex: 1;
    min-width: 0;
}

.audio-card__title {
    font-family: var(--fh-font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--fh-gray-900);
    /* Reset all h2 chapter-level styles that bleed into card titles */
    margin: 0 0 2px;
    padding: 0;
    border: none;
    position: static;
    line-height: 1.3;
    letter-spacing: normal;
}

/* Suppress the decorative sage bar pseudo-element on card titles */
.audio-card__title::before {
    display: none;
}

.audio-card__meta {
    display: flex;
    gap: var(--fh-space-md);
    font-family: var(--fh-font-mono);
    font-size: 0.75rem;
    color: var(--fh-gray-500);
}

.audio-card__meta span:first-child {
    font-weight: 600;
    color: var(--fh-navy);
}

.audio-card__description {
    font-size: 0.875rem;
    color: var(--fh-gray-600);
    line-height: 1.6;
    margin-top: var(--fh-space-xs);
    margin-bottom: var(--fh-space-md);
    flex: 1;
}

.audio-card__player {
    background: linear-gradient(135deg, var(--fh-navy) 0%, #003d82 100%);
    border-radius: 6px;
    padding: var(--fh-space-sm) var(--fh-space-md);
}

/* Native controls visible as fallback; JS removes [controls] attr when custom player initializes */
.audio-card__player audio[controls] {
    width: 100%;
    height: 44px;
    border-radius: 4px;
}

.audio-card__player audio:not([controls]) {
    height: 0;
    display: none;
}

.audio-card__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--fh-space-md);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fh-navy);
    text-decoration: none;
}

.audio-card__link:hover {
    text-decoration: underline;
}

.audio-card__link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

/* ============================================
   Audio Library Sections & Exam Review Variant
   ============================================ */
.audio-library__section {
    margin-bottom: var(--fh-space-3xl);
}

.audio-library__section-header {
    margin-bottom: var(--fh-space-lg);
}

.audio-library__section-title {
    font-family: var(--fh-font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fh-gray-500);
    border-top: none;
    border-bottom: 1px solid var(--fh-gray-200);
    padding-top: 0;
    padding-bottom: var(--fh-space-sm);
    margin: 0 0 var(--fh-space-xs);
}

.audio-library__section-title::before {
    display: none;
}

.audio-library__section-desc {
    font-size: 0.875rem;
    color: var(--fh-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Exam Review badge — burgundy accent */
.audio-card__chapter--review {
    background: var(--fh-burgundy, #6b2737);
}

/* Exam-specific badge colors */
.audio-card__chapter--s7 {
    background: var(--fh-navy, #002D62);
}

.audio-card__chapter--sie {
    background: var(--fh-sage, #7C9885);
    color: #fff;
}

.audio-card__chapter--s63 {
    background: #b8860b;
    color: #fff;
}

/* Topic chips */
.audio-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--fh-space-md);
}

.audio-card__topics span {
    font-family: var(--fh-font-mono);
    font-size: 0.675rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--fh-gray-200);
    color: var(--fh-gray-600);
    white-space: nowrap;
}

/* Inline chapter-link pills (e.g. Series 63 audio library "Read Ch1 / Ch2 / Ch7") */
.audio-card__chapters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--fh-space-md);
}

.audio-card__chapters-row a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fh-navy);
    background: var(--fh-cream, #fffdf7);
    border: 1px solid var(--fh-gray-200);
    border-radius: 4px;
    text-decoration: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.audio-card__chapters-row a:hover,
.audio-card__chapters-row a:focus-visible {
    background: var(--fh-navy);
    border-color: var(--fh-navy);
    color: var(--fh-white);
}

/* Night mode: exam review & topics */
body.night-mode .audio-card__chapter--review {
    background: #a0475a;
    color: #fff;
}

body.night-mode .audio-card__topics span {
    border-color: var(--fh-gray-300);
    color: var(--fh-gray-400);
}

body.night-mode .audio-library__section-title {
    border-color: var(--fh-gray-300);
}

body.night-mode .audio-card__chapters-row a {
    background: transparent;
    border-color: var(--fh-gray-300);
    color: var(--fh-gray-300);
}

body.night-mode .audio-card__chapters-row a:hover,
body.night-mode .audio-card__chapters-row a:focus-visible {
    background: var(--fh-gray-300);
    color: #111;
}

/* ============================================
   Back to Top Button
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: var(--fh-space-xl);
    right: var(--fh-space-xl);
    width: 48px;
    height: 48px;
    background: var(--fh-navy);
    color: var(--fh-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--fh-sage);
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   Chapter Bottom Navigation (injected by chapter-nav.js)
   ============================================ */
.chapter-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--fh-space-xl) 0;
    margin-top: var(--fh-space-3xl);
    border-top: 1px solid var(--fh-gray-200);
}

.chapter-bottom-nav__link {
    font-family: var(--fh-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fh-navy);
    text-decoration: none;
    padding: 12px 16px;
    border: 1px solid var(--fh-gray-200);
    border-radius: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.chapter-bottom-nav__link:hover {
    background: var(--fh-gray-100);
    border-color: var(--fh-navy);
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .header,
    .progress,
    .toc,
    .chapter-nav,
    .back-to-top,
    .footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    h2:not(.audio-card__title):not(.audio-library__section-title) {
        page-break-after: avoid;
        border-top: 1px solid #ccc;
    }

    .info-box,
    .test-tip,
    .critical-concept,
    .historical-note {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .test-tip {
        background: #f5f5f5 !important;
        color: #000 !important;
    }

    .test-tip p,
    .test-tip strong {
        color: #000 !important;
    }
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 900px) {
    .container {
        padding: 0 var(--fh-space-lg);
    }

    h2:not(.audio-card__title):not(.audio-library__section-title) {
        font-size: 1.625rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 640px) {
    body {
        font-size: 16px;
        line-height: 1.75;
    }

    .header__inner {
        padding: 8px 16px;
    }

    .header__title {
        font-size: 0.9375rem;
    }

    .breadcrumb {
        display: none;
    }

    .container {
        padding: 0 var(--fh-space-md);
    }

    h2:not(.audio-card__title):not(.audio-library__section-title) {
        font-size: 1.5rem;
        margin-top: var(--fh-space-2xl);
        padding-top: var(--fh-space-lg);
    }

    h2:not(.audio-card__title):not(.audio-library__section-title)::before {
        display: none;
    }

    h3 {
        font-size: 1.125rem;
    }

    h4 {
        font-size: 1rem;
    }

    .intro {
        font-size: 1.0625rem;
    }

    /* D-009: Collapsible TOC on mobile */
    .toc {
        padding: var(--fh-space-lg);
    }

    .toc__title {
        cursor: pointer;
        user-select: none;
    }

    .toc__title::after {
        content: ' \25BE';
        font-size: 0.875rem;
    }

    .toc__list {
        display: none;
    }

    .toc.toc--expanded .toc__list {
        display: block;
    }

    .toc.toc--expanded .toc__title::after {
        content: ' \25B4';
    }

    .toc__link {
        padding: var(--fh-space-sm);
        margin: 0 calc(var(--fh-space-sm) * -1);
        font-size: 0.875rem;
    }

    /* D-014: Reading time visual priority */
    .chapter-meta__item:first-child {
        font-size: 0.9375rem;
        color: var(--fh-gray-700);
        font-weight: 600;
    }

    .info-box,
    .test-tip,
    .critical-concept,
    .historical-note,
    .calculation-box {
        padding: var(--fh-space-md);
        margin: 1.5em 0;
    }

    .comparison-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
        mask-image: linear-gradient(to right, black 85%, transparent);
    }

    .comparison-table::-webkit-scrollbar {
        height: 4px;
    }

    .comparison-table::-webkit-scrollbar-thumb {
        background: var(--fh-gray-300);
        border-radius: 2px;
    }

    .comparison-table table {
        min-width: 480px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--fh-space-sm) var(--fh-space-md);
        font-size: 0.875rem;
    }

    .critical-concept th,
    .critical-concept td {
        padding: var(--fh-space-sm) var(--fh-space-md);
        font-size: 0.875rem;
    }

    .chapter-nav {
        grid-template-columns: 1fr;
    }

    .chapter-nav__link--next {
        align-items: flex-start;
        text-align: left;
    }

    .chapter-meta {
        flex-direction: column;
        gap: var(--fh-space-sm);
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: var(--fh-space-md);
        right: var(--fh-space-md);
    }

    /* Audio Player Mobile */
    .audio-player {
        padding: var(--fh-space-md);
    }

    .audio-player__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fh-space-sm);
    }

    .audio-player__icon {
        width: 40px;
        height: 40px;
    }

    .audio-player__title {
        font-size: 1rem;
    }

    /* Audio Library Grid Mobile */
    .audio-library__grid {
        grid-template-columns: 1fr;
        gap: var(--fh-space-md);
    }

    .audio-card {
        padding: var(--fh-space-md);
    }

    .audio-card__header {
        flex-direction: column;
        gap: var(--fh-space-xs);
    }

    .audio-card__chapter {
        align-self: flex-start;
    }

    .audio-card__description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .audio-card__player {
        padding: var(--fh-space-sm);
    }

    /* Mini Player Mobile */
    .mini-player__inner {
        padding: 0 var(--fh-space-sm);
        gap: 8px;
    }

    .mini-player__title {
        font-size: 0.75rem;
    }
}

/* ============================================
   Sticky Mini Player
   ============================================ */
.mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--fh-navy) 0%, #003d82 100%);
    box-shadow: 0 -2px 12px rgba(0, 45, 98, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mini-player.visible {
    transform: translateY(0);
}

.mini-player[hidden] {
    display: block;
}

.mini-player__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--fh-space-md);
    height: 56px;
    max-width: 780px;
    margin: 0 auto;
}

.mini-player__play {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    flex-shrink: 0;
}

.mini-player__play svg {
    width: 18px;
    height: 18px;
}

.mini-player__info {
    flex: 1;
    min-width: 0;
}

.mini-player__title {
    font-family: var(--fh-font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

.mini-player__progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.mini-player__progress-fill {
    height: 100%;
    background: var(--fh-gold, #b08d57);
    border-radius: 2px;
    width: 0;
    transition: width 0.3s linear;
}

.mini-player__speed {
    font-family: var(--fh-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 3px 6px;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.mini-player__close {
    width: 36px;
    height: 36px;
    opacity: 0.6;
    flex-shrink: 0;
}

.mini-player__close:hover {
    opacity: 1;
}

.mini-player__close svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Night Mode: Audio Player & Cards
   ============================================ */
body.night-mode .audio-player {
    background: linear-gradient(135deg, #1e3a5f 0%, #162d4a 100%);
}

body.night-mode .audio-card__player {
    background: linear-gradient(135deg, #1e3a5f 0%, #162d4a 100%);
}

body.night-mode .audio-card {
    border-color: var(--fh-gray-300);
}

body.night-mode .audio-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.night-mode .audio-card__chapter {
    background: #4a90c2;
    color: #1a1f2e;
}

body.night-mode .audio-card__chapter--s7 {
    background: #4a90c2;
    color: #1a1f2e;
}

body.night-mode .audio-card__chapter--sie {
    background: #8fbf9a;
    color: #1a1f2e;
}

body.night-mode .audio-card__chapter--s63 {
    background: #d4a843;
    color: #1a1f2e;
}

body.night-mode .mini-player {
    background: linear-gradient(135deg, #1e3a5f 0%, #162d4a 100%);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Accessibility - Focus States
   ============================================ */
a:focus,
button:focus {
    outline: 2px solid var(--fh-sage);
    outline-offset: 2px;
}

.toc__link:focus {
    outline: 2px solid var(--fh-sage);
    outline-offset: 0;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Night Mode Adjustments
   ============================================ */
body.night-mode .info-box {
    background: var(--fh-gray-100);
    border-left-color: var(--fh-sage);
}

body.night-mode .historical-note {
    background: var(--fh-gray-100);
    border-color: var(--fh-gray-300);
}

body.night-mode .test-tip {
    background: linear-gradient(135deg, #8b7355 0%, #6b5a45 100%);
}

body.night-mode .critical-concept {
    background: var(--fh-gray-100);
}

body.night-mode .toc {
    background: var(--fh-gray-100);
}

body.night-mode .comparison-table {
    background: var(--fh-gray-100);
}

body.night-mode .chapter-nav__link {
    background: var(--fh-gray-100);
}