/**
 * UNIQorn - Tarot Learning Hub (塔罗学习)
 * Styling System & Component Architecture
 *
 * Rules:
 * - Base background strictly var(--white)
 * - Editorial typography: serif titles, high-contrast clean body, refined mono accents
 * - Fine hairlines, generous whitespace, meaningful red point
 * - Responsive 2:3 card grid, fluid drawer modal, seamless mobile experience
 */

:root {
    --learn-bg: var(--white);
    --learn-navy: #0e1b2b;
    --learn-navy-soft: #1a2c42;
    --learn-muted: var(--muted);
    --learn-muted-light: var(--meta);
    --learn-hairline: rgba(14, 27, 43, 0.08);
    --learn-hairline-strong: rgba(14, 27, 43, 0.16);
    --learn-card-bg: var(--white);
    --learn-card-border: rgba(14, 27, 43, 0.10);
    --learn-card-shadow: 0 4px 16px rgba(14, 27, 43, 0.04);
    --learn-card-shadow-hover: 0 16px 36px rgba(14, 27, 43, 0.10);
    --learn-radius: 8px;
    --learn-transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    /* --card-ratio (2.75 / 4.75) now lives in foundation.css: the free draw
       needs the same deck proportion, and a token two pages share cannot have
       its only declaration inside one of them. */
}

/* Base Container & Shell Alignment */
.learn-main {
    background-color: var(--learn-bg);
    color: var(--learn-navy);
    min-height: 100vh;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(4rem, 8vw, 8rem);
}

.learn-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

/* ==========================================================================
   1. Hero & Worldview
   ========================================================================== */

.learn-hero {
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--learn-hairline);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.learn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    color: var(--learn-muted);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.learn-eyebrow .eyebrow-num {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--learn-navy);
}

.learn-eyebrow .eyebrow-sep {
    color: var(--learn-hairline-strong);
}

.learn-eyebrow .eyebrow-sub {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
}

.learn-title {
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4.2vw, 3.5rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0.02em;
    color: var(--learn-navy);
    margin: 0 0 1.5rem;
}

.learn-lede {
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    line-height: 1.8;
    color: var(--learn-muted);
    max-width: 48ch;
    margin: 0 0 2.5rem;
}

/* Navigation Pills */
.learn-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    color: var(--learn-navy);
    text-decoration: none;
    background: var(--white);
    transition: all var(--learn-transition);
}

.nav-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--learn-muted-light);
    transition: background-color var(--learn-transition);
}

.nav-pill:hover,
.nav-pill:focus-visible {
    border-color: var(--learn-navy);
    background-color: rgba(14, 27, 43, 0.02);
    transform: translateY(-1px);
}

.nav-pill:hover .pill-dot,
.nav-pill:focus-visible .pill-dot {
    background-color: var(--learn-navy);
}

/* ==========================================================================
   Section Intro Shared Styling
   ========================================================================== */

.learn-section {
    margin-bottom: clamp(4.5rem, 9vw, 8rem);
    scroll-margin-top: 5rem;
}

.section-intro {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--learn-navy);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--learn-navy);
    margin: 0 0 1rem;
}

.section-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--learn-muted);
    max-width: 56ch;
    margin: 0;
}

/* ==========================================================================
   2. The Fool's Journey (大阿卡纳心智地图)
   ========================================================================== */

.journey-stages-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.journey-stage-block {
    background: var(--white);
    border: 1px solid var(--learn-hairline);
    border-radius: var(--learn-radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: border-color var(--learn-transition);
}

.journey-stage-block:hover {
    border-color: var(--learn-hairline-strong);
}

.stage-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--learn-hairline);
    padding-bottom: 1.5rem;
}

.stage-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.stage-number {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--learn-navy);
    background: rgba(14, 27, 43, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.stage-range {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--learn-muted);
}

.stage-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--learn-navy);
    margin: 0 0 0.5rem;
}

.stage-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--learn-muted);
    margin: 0;
    max-width: 60ch;
}

/* Stage Cards Grid */
.stage-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

.journey-card-card {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    border-radius: var(--learn-radius);
    transition: transform var(--learn-transition);
}

.journey-card-card:hover,
.journey-card-card:focus-visible {
    transform: translateY(-4px);
    outline: none;
}

.journey-card-card .card-visual {
    position: relative;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--learn-card-border);
    background-color: #f6f8fa;
    box-shadow: var(--learn-card-shadow);
    transition: box-shadow var(--learn-transition), border-color var(--learn-transition);
}

.journey-card-card:hover .card-visual,
.journey-card-card:focus-visible .card-visual {
    box-shadow: var(--learn-card-shadow-hover);
    border-color: var(--learn-navy);
}

.journey-card-card .card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.journey-card-card:hover .card-visual img {
    transform: scale(1.03);
}

.card-num-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(14, 27, 43, 0.85);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

.journey-card-card .card-info {
    padding-top: 0.75rem;
}

.journey-card-card .card-names {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.35rem;
}

.journey-card-card .name-zh {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--learn-navy);
}

.journey-card-card .name-en {
    font-size: 0.75rem;
    color: var(--learn-muted);
}

.card-archetype-snip {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--learn-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   3. 78-Card Archive & Interactive Library
   ========================================================================== */

.library-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    background: var(--white);
    padding: 1.5rem;
    border: 1px solid var(--learn-hairline);
    border-radius: var(--learn-radius);
}

/* Filter Tabs */
.filter-tabs-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--learn-hairline-strong);
    background: var(--white);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--learn-muted);
    cursor: pointer;
    transition: all var(--learn-transition);
}

.filter-tab .tab-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    opacity: 0.8;
}

.filter-tab:hover {
    color: var(--learn-navy);
    border-color: var(--learn-navy);
    background-color: rgba(14, 27, 43, 0.02);
}

.filter-tab.is-active {
    background: var(--learn-navy);
    border-color: var(--learn-navy);
    color: var(--white);
    font-weight: 500;
}

.filter-tab.is-active .tab-count {
    color: var(--white);
    opacity: 0.9;
}

/* Search Box */
.library-search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--learn-hairline);
}

.search-input-inner {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 560px;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 0.875rem;
    font-size: 0.875rem;
    opacity: 0.5;
    pointer-events: none;
}

#tarot-search-input {
    width: 100%;
    padding: 0.6875rem 2.25rem 0.6875rem 2.5rem;
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--learn-navy);
    background: var(--white);
    transition: border-color var(--learn-transition), box-shadow var(--learn-transition);
}

#tarot-search-input:focus {
    outline: none;
    border-color: var(--learn-navy);
    box-shadow: 0 0 0 3px rgba(14, 27, 43, 0.06);
}

.search-clear-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 0.8125rem;
    color: var(--learn-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.search-clear-btn:hover {
    color: var(--learn-navy);
}

.search-status {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--learn-muted);
}

/* 78-Card Grid */
.tarot-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.5rem clamp(0.75rem, 1.5vw, 1.25rem);
}

.tarot-card-item {
    display: flex;
    flex-direction: column;
}

.tarot-card-item.is-hidden {
    display: none !important;
}

.card-item-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--learn-radius);
    transition: transform var(--learn-transition);
}

.card-item-button:hover,
.card-item-button:focus-visible {
    transform: translateY(-5px);
    outline: none;
}

.card-thumbnail-wrap {
    position: relative;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--learn-card-border);
    background-color: var(--paper);
    box-shadow: var(--learn-card-shadow);
    transition: box-shadow var(--learn-transition), border-color var(--learn-transition);
}

.card-item-button:hover .card-thumbnail-wrap,
.card-item-button:focus-visible .card-thumbnail-wrap {
    box-shadow: var(--learn-card-shadow-hover);
    border-color: var(--learn-navy);
}

.card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.card-item-button:hover .card-thumbnail {
    transform: scale(1.04);
}

.card-attr-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(14, 27, 43, 0.85);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

.card-caption {
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-title-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.card-zh {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--learn-navy);
}

.card-en {
    font-size: 0.75rem;
    color: var(--learn-muted);
}

.card-element-tag {
    font-size: 0.6875rem;
    color: var(--learn-muted-light);
    margin: 0;
}

.card-keywords-snip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.snip-pill {
    font-size: 0.6875rem;
    background: rgba(14, 27, 43, 0.04);
    color: var(--learn-muted);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}

/* Empty State */
.tarot-empty-state {
    text-align: center;
    padding: 5rem 1.5rem;
    border: 1px dashed var(--learn-hairline-strong);
    border-radius: var(--learn-radius);
    background: var(--white);
}

.empty-icon {
    font-size: 2rem;
    color: var(--learn-muted-light);
    margin-bottom: 1rem;
}

.empty-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--learn-navy);
    margin: 0 0 0.5rem;
}

.empty-desc {
    font-size: 0.9375rem;
    color: var(--learn-muted);
    margin: 0 0 1.5rem;
}

.empty-reset-btn {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--learn-navy);
    background: var(--learn-navy);
    color: var(--white);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity var(--learn-transition);
}

.empty-reset-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   4. Methodology & Spreads
   ========================================================================== */

.methodology-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
    margin-bottom: 3.5rem;
}

.methodology-card {
    background: var(--white);
    border: 1px solid var(--learn-hairline);
    border-radius: var(--learn-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--learn-transition);
}

.methodology-card:hover {
    border-color: var(--learn-hairline-strong);
}

.card-step-num {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--learn-navy);
    margin-bottom: 1rem;
}

.methodology-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--learn-navy);
    margin: 0 0 0.5rem;
}

.methodology-lede {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--learn-navy-soft);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.methodology-body {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--learn-muted);
    margin: 0;
}

/* Spreads Section */
.spreads-container {
    background: var(--white);
    border: 1px solid var(--learn-hairline);
    border-radius: var(--learn-radius);
    padding: clamp(1.75rem, 4vw, 3rem);
}

.spreads-header-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--learn-navy);
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--learn-hairline);
    padding-bottom: 1rem;
}

.spreads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.spread-item {
    display: flex;
    flex-direction: column;
}

.spread-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--learn-muted-light);
    margin-bottom: 0.5rem;
}

.spread-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--learn-navy);
    margin: 0 0 0.75rem;
}

.spread-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--learn-muted);
    margin: 0 0 1.25rem;
    flex-grow: 1;
}

.spread-schema {
    display: flex;
    gap: 0.5rem;
}

.schema-box {
    flex: 1;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.625rem 0.5rem;
    background: var(--paper);
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--radius-sm);
    color: var(--learn-navy);
}

.schema-box.is-focus {
    border-color: var(--learn-navy);
    color: var(--learn-navy);
    background: rgba(14, 27, 43, 0.05);
    font-weight: 600;
}

/* ==========================================================================
   5. Ecosystem Continuity & Next Steps
   ========================================================================== */

.continuity-box {
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--learn-radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--white);
}

.continuity-header {
    margin-bottom: 2.5rem;
}

.continuity-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--learn-navy);
    margin: 0 0 0.75rem;
}

.continuity-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--learn-muted);
    max-width: 56ch;
    margin: 0;
}

.continuity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.continuity-card {
    background: var(--white);
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--learn-radius);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--learn-transition), border-color var(--learn-transition);
}

.continuity-card:hover {
    transform: translateY(-3px);
    border-color: var(--learn-navy);
}

.continuity-card.is-primary {
    border-color: var(--learn-navy);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.card-badge-hot {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--learn-navy);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
}

.continuity-card .card-icon {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.continuity-card .card-title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--learn-navy);
    margin: 0 0 0.5rem;
}

.continuity-card .card-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--learn-muted);
    margin: 0 0 1.5rem;
    flex-grow: 1;
}

.continuity-card .card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--learn-navy);
    text-decoration: none;
    padding: 0.625rem 1rem;
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--radius-md);
    transition: all var(--learn-transition);
}

.continuity-card .card-link:hover {
    border-color: var(--learn-navy);
    background: rgba(14, 27, 43, 0.04);
}

.continuity-card .card-link.btn--primary {
    background: var(--learn-navy);
    color: var(--white);
    border-color: var(--learn-navy);
}

.continuity-card .card-link.btn--primary:hover {
    background: var(--learn-navy-soft);
    border-color: var(--learn-navy-soft);
}

/* ==========================================================================
   6. Tarot Card Modal / Drawer Component
   ========================================================================== */

.tarot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.tarot-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.tarot-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 27, 43, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tarot-modal-container {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 100%;
    background: var(--white);
    box-shadow: -12px 0 40px rgba(14, 27, 43, 0.18);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.tarot-modal.is-open .tarot-modal-container {
    transform: translateX(0);
}

.tarot-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--learn-hairline-strong);
    background: var(--white);
    color: var(--learn-navy);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--learn-transition);
}

.tarot-modal-close:hover {
    background: var(--learn-navy);
    color: var(--white);
    border-color: var(--learn-navy);
}

.tarot-modal-content {
    padding: clamp(2rem, 4vw, 3.5rem);
}

/* Modal Body Column */
.tarot-modal-body {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   6b. The reading line — 正位 → 逆位, driven by scroll
   --------------------------------------------------------------------------
   One indigo stroke, generated by tools/reading-line.py in a 660 x 1000
   reference frame. It enters and leaves the block: in from the upper left,
   through the 正位 card, a knot, the red anchor, a wide swing, back through
   the 逆位 card, out at the bottom.

   Scroll advances --read-p 0 → 1, and that one number is the whole interface:
   the drawn length of the ink and the opacity of the reversed side. JS writes
   it and nothing else.

   --read-p defaults to 1, so with no JS — or reduced motion, or in print — the
   whole reading is present. JS only ever writes it inline, and inline wins, so
   "JS is driving" and "nothing is hidden" are the same declaration and cannot
   drift apart.

   The stage carries the generator's own aspect ratio. That is what keeps
   preserveAspectRatio="none" from ever actually stretching anything: view box
   and box are the same shape at every width, so the amplitude and wavelength
   the generator verified survive to the screen.
   -------------------------------------------------------------------------- */

.tarot-reading {
    --read-p: 1;
    /* Overwritten by learn.js from the path's own getTotalLength(). The literal
       is the generator's figure, so the no-JS render is right too. */
    --line-len: 1434;
    position: relative;
    aspect-ratio: 660 / 1000;
    container-type: size;
}

.reading-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* The line is only ever what has been read. The dash is the whole path; the
   offset pulls it back to the start, so the visible length is --read-p of the
   line — at --read-p 0 there is no line on screen at all, and it is drawn from
   the entry as the reader scrolls.

   There used to be a faint second path under this one showing the whole route.
   It is gone: Wallance asked for ink, not a plan of the ink. */
.line-ink {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--line-len);
    stroke-dashoffset: calc(var(--line-len) * (1 - var(--read-p)));
}

/* The anchor — the point in the heart. One per screen, graphic only.

   The dot rides the tip of the ink along the path, and parks the moment the
   ink reaches the generator's seat (--anchor-pos, read from data-anchor-at on
   the stage). From there the ink keeps going and the dot stays.

   The anchor is on its own SVG path (id="anchor-path"), separate from the ink.
   SVG has no way to make an element follow a path at a different rate than
   the one its geometry is on; a single <path> with stroke-dashoffset carries
   the ink, and a separate path with its own JS-driven dot keeps the two
   motions independent. */
.line-anchor-path {
    fill: none;
    stroke: none;
}

.line-anchor {
    fill: var(--anchor-red);
    stroke: var(--white);
    stroke-width: 2;
    /* At --read-p 0 the ink is zero length and the dot is at the entry point,
       which is off the left of the stage — so it was a lone red dot against
       the drawer's edge with nothing attached to it. Removing the track is
       what orphaned it: it used to sit at the start of a visible route.
       It arrives with the line, over the first ~4% of the path, which is
       about when the dot itself clears the block's edge.
       --read-p defaults to 1, so no-JS and reduced motion keep the dot. */
    opacity: clamp(0, calc(var(--read-p) * 24), 1);
}

/* The two cards, on opposite diagonals. Percentages of the 660 x 1000 frame. */
.reading-card {
    position: absolute;
    margin: 0;
    width: 30.303%;
    aspect-ratio: var(--card-ratio);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--learn-card-border);
    box-shadow: var(--shadow-lg);
}

.reading-card[data-card="upright"]  { left: 7.576%;  top: 6%; }
.reading-card[data-card="reversed"] { left: 45.455%; top: 57%; }

.reading-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Reversed is the same card turned over — geometry, not a second asset. */
.reading-card[data-card="reversed"] .reading-card-image {
    transform: rotate(180deg);
}

/* The two copy blocks are the space the diagonals open. The sketch's 正位 and
   逆位 labels sit in exactly these two places. */
.reading-copy {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.reading-copy[data-copy="upright"]  { left: 50%;    top: 7.6%;  width: 43.939%; }
.reading-copy[data-copy="reversed"] { left: 6.061%; top: 59.6%; width: 35.758%; }

/* Sized against the stage, so the composition scales as one object. The clamp
   floor is what keeps the copy legible when the drawer is narrow. */
.reading-tag {
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.65cqw, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--learn-muted);
    margin-bottom: 0.5rem;
}

.reading-title {
    font-family: var(--font-display);
    font-size: clamp(14px, 2.9cqw, 21px);
    font-weight: 500;
    color: var(--learn-navy);
    margin: 0 0 0.625rem;
}

.reading-desc {
    font-size: clamp(12px, 2.2cqw, 15.5px);
    line-height: 1.75;
    color: var(--learn-muted);
    margin: 0;
}

/* Surfaces as the ink travels toward it, and is solid well before the ink
   arrives: the generator puts the anchor at 0.406 of the path and the reversed
   card at 0.794, so the window closes at 0.70 — the reader sees the shadow side
   settle before the line touches it, not while it is still half transparent. */
.reading-card[data-card="reversed"],
.reading-copy[data-copy="reversed"] {
    opacity: clamp(0, calc((var(--read-p) - 0.46) * 4.17), 1);
}


.tarot-modal-header {
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--learn-hairline);
    padding-bottom: 1.5rem;
}

.tarot-modal-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.meta-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--learn-navy);
    background: rgba(14, 27, 43, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.meta-element {
    font-size: 0.75rem;
    color: var(--learn-muted);
}

.tarot-modal-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
}

.tarot-modal-title .title-zh {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--learn-navy);
}

.tarot-modal-title .title-en {
    font-size: 0.9375rem;
    color: var(--learn-muted);
}

.tarot-modal-archetype {
    font-size: 0.9375rem;
    color: var(--learn-navy-soft);
    line-height: 1.5;
    margin: 0 0 1rem;
    font-weight: 500;
}

.tarot-modal-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tarot-modal-keywords .keyword-tag {
    font-size: 0.75rem;
    background: #f1f4f8;
    color: var(--learn-navy);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
}

/* Guidance Panes are gone: the two orientations are stages on the reading
   line, not tabs. Nothing is hidden, so nothing needs a panel wrapper. */

/* Soul Reflection Prompt — where the line comes to rest */
.tarot-modal-prompt {
    background: var(--white);
    border: 1px solid var(--learn-hairline-strong);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-top: 2.25rem;
    margin-bottom: 2.5rem;
}

.prompt-header {
    margin-bottom: 0.5rem;
}

.prompt-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--learn-navy);
    letter-spacing: 0.05em;
}

.prompt-text {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--learn-navy);
    margin: 0;
}

/* Modal Footer Actions */
.tarot-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--learn-hairline);
    padding-top: 1.5rem;
}

.modal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--learn-transition);
}

.modal-action-btn.btn--quiet {
    border: 1px solid var(--learn-hairline-strong);
    color: var(--learn-navy);
    background: var(--white);
}

.modal-action-btn.btn--quiet:hover {
    border-color: var(--learn-navy);
    background: rgba(14, 27, 43, 0.03);
}

.modal-action-btn.btn--primary {
    border: 1px solid var(--learn-navy);
    background: var(--learn-navy);
    color: var(--white);
    margin-left: auto;
}

.modal-action-btn.btn--primary:hover {
    background: var(--learn-navy-soft);
    border-color: var(--learn-navy-soft);
}

/* ==========================================================================
   7. Responsive Adaptations
   ========================================================================== */

@media (max-width: 860px) {
    .tarot-modal-container {
        max-width: 100%;
    }

    .tarot-modal-content {
        padding: 2rem 1.5rem;
    }

    .modal-action-btn.btn--primary {
        margin-left: 0;
        width: 100%;
    }

    .modal-action-btn.btn--quiet {
        width: 100%;
    }
}

@media (max-width: 580px) {
    .tarot-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 0.75rem;
    }

    .card-attr-badge {
        font-size: 0.625rem;
        padding: 0.1rem 0.35rem;
    }

    .stage-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
    }

    .filter-tabs-wrapper {
        gap: 0.35rem;
    }

    .filter-tab {
        padding: 0.4rem 0.625rem;
        font-size: 0.75rem;
    }

    .search-input-inner {
        min-width: 100%;
    }

    .hide-on-mobile {
        display: none;
    }
}