/* 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 {
    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 {
    border-top: none;
    padding-top: 0;
    margin-top: var(--fh-space-2xl);
}

/* Decorative element for section headers */
h2::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::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-display);
    font-size: 1.25rem;
    color: var(--fh-gray-700);
    line-height: 1.7;
    margin-bottom: var(--fh-space-2xl);
    padding-bottom: var(--fh-space-xl);
    border-bottom: 1px solid var(--fh-gray-200);
}

.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 {
    background: linear-gradient(to bottom, transparent 50%, rgba(124, 152, 133, 0.15) 50%);
    padding: 0 3px;
    font-weight: 600;
    color: var(--fh-gray-900);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.key-term:hover {
    background: linear-gradient(to bottom, transparent 40%, rgba(124, 152, 133, 0.25) 40%);
}

/* ============================================
   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;
}

.cp__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Buttons — always white; the .cp sits inside a dark navy container in both modes */
.cp__btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        opacity 0.15s,
        transform 0.15s;
}

.cp__btn:hover {
    opacity: 0.85;
    transform: scale(1.08);
}

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

.cp__btn svg {
    width: 20px;
    height: 20px;
}

.cp__play {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    order: 1;
}

.cp__play svg {
    width: 22px;
    height: 22px;
}

.cp__skip {
    width: 32px;
    height: 32px;
    opacity: 0.7;
}

.cp__skip:first-child {
    order: 0;
}

.cp__skip:nth-child(3) {
    order: 2;
}

/* Progress bar */
.cp__progress-wrap {
    flex: 1;
    min-width: 0;
    order: 3;
}

.cp__progress-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
}

.cp__progress-bar:hover {
    height: 8px;
}

.cp__progress-bar:hover .cp__handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cp__buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    width: 0;
    transition: width 0.3s ease;
}

.cp__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--fh-gold, #b08d57);
    border-radius: 3px;
    width: 0;
    transition: width 0.05s linear;
}

.cp__handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition:
        opacity 0.15s,
        transform 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Time display */
.cp__time {
    font-family: var(--fh-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    flex-shrink: 0;
    order: 4;
    min-width: 80px;
    text-align: center;
}

.cp__sep {
    margin: 0 2px;
    opacity: 0.5;
}

/* Speed button */
.cp__speed {
    font-family: var(--fh-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 40px;
    text-align: center;
    order: 5;
}

/* Playing state pulse */
.cp--playing .cp__play {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   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-sm);
    margin-bottom: var(--fh-space-sm);
}

.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);
    margin: 0 0 var(--fh-space-xs);
    line-height: 1.3;
}

.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-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-bottom: 1px solid var(--fh-gray-200);
    padding-bottom: var(--fh-space-sm);
    margin: 0 0 var(--fh-space-xs);
}

.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);
}

/* 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;
}

/* 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);
}

/* ============================================
   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;
}

/* ============================================
   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 {
        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 {
        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 {
        flex-direction: column;
        gap: var(--fh-space-sm);
        padding: var(--fh-space-sm) var(--fh-space-md);
    }

    .header__title {
        font-size: 1rem;
    }

    .breadcrumb {
        font-size: 0.75rem;
    }

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

    h2 {
        font-size: 1.5rem;
        margin-top: var(--fh-space-2xl);
        padding-top: var(--fh-space-lg);
    }

    h2::before {
        width: 30px;
        height: 2px;
    }

    h3 {
        font-size: 1.125rem;
    }

    h4 {
        font-size: 1rem;
    }

    .intro {
        font-size: 1.125rem;
    }

    .toc {
        padding: var(--fh-space-lg);
    }

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

    .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;
    }

    .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;
    }

    /* Custom Player Mobile */
    .cp__row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cp__skip {
        width: 36px;
        height: 36px;
    }

    .cp__play {
        width: 40px;
        height: 40px;
    }

    .cp__progress-wrap {
        flex-basis: 100%;
        order: 6;
    }

    .cp__time {
        font-size: 0.7rem;
        min-width: auto;
    }

    .cp__handle {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        width: 16px;
        height: 16px;
    }

    .cp__progress-bar {
        height: 8px;
    }

    /* 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;
    }

    .audio-card__description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -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 .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);
}