/* ========================================================================
   STATISTICS EXPLORATION GUIDE
   Styles for /exploration/statistics-guide/
   House style (2026-07): cream/mint/teal/tangerine/gold tokens.
   ======================================================================== */

/* ====================================================================
   PAGE-SCOPED BODY BACKGROUND
   body.stats-guide-page is set via {% block body_class %} — scoped to
   this template only, doesn't touch the site-wide body background.
   ==================================================================== */
body.stats-guide-page {
    background-color: var(--cream);
}

/* ====================================================================
   PAGE TITLE
   ==================================================================== */
.stats-guide-title {
    color: var(--teal-deep);
    font-family: var(--jm-font-display);
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .stats-guide-title {
        font-size: 1.75rem;
    }
}

/* ====================================================================
   ACCORDION REBRAND (modelWalkthroughAccordion, writingStructureAccordion)
   Overrides Bootstrap's default blue active-state via the accordion's own
   CSS custom properties — scoped to this page's stylesheet only.
   ==================================================================== */
.accordion {
    --bs-accordion-active-color: var(--teal-deep);
    --bs-accordion-active-bg: var(--mint);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(18, 181, 166, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230C7A70'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    counter-reset: stats-step;
}

.accordion-item {
    counter-increment: stats-step;
}

.accordion-button {
    position: relative;
    padding-left: 3.5rem;
    font-family: var(--jm-font-display);
    font-weight: 700;
    color: var(--teal-ink);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-button::before {
    content: counter(stats-step);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--teal-deep);
    color: white;
    font-family: var(--jm-font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stats-accordion-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stats-accordion-toggle-btn {
    font-family: var(--jm-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal-deep);
    background: var(--mint);
    border: 1px solid var(--mint2);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
}

.stats-accordion-toggle-btn:hover {
    background: var(--mint2);
    color: var(--teal-deep);
}

/* ====================================================================
   ANNOTATED MODEL WALKTHROUGH
   ==================================================================== */
.stats-section {
    border-left: 4px solid var(--teal);
    padding-left: 1.25rem;
    margin-bottom: 2rem;
}

.stats-section-title {
    color: var(--teal-deep);
    font-family: var(--jm-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-annotation {
    border-left: 4px solid var(--gold);
    background: var(--mint);
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.stats-annotation .annotation-label {
    font-family: var(--jm-font-mono);
    font-weight: 600;
    color: var(--tangerine);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.stats-annotation p {
    margin-bottom: 0;
    color: var(--muted);
}

/* ====================================================================
   MODEL REPORT CHART IMAGES
   ==================================================================== */
.stats-figure {
    margin: 1rem 0 1.25rem;
    text-align: center;
}

.stats-figure img {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.stats-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

.stats-figure-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin: 1rem 0 1.25rem;
}

.stats-figure-row .stats-figure {
    flex: 1 1 280px;
    max-width: 420px;
    margin: 0;
}

/* ====================================================================
   DATASET CARDS
   ==================================================================== */
.stats-dataset-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.25rem;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stats-dataset-card .d-grid.gap-2 {
    margin-top: auto;
}

.stats-dataset-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--teal);
}

.stats-dataset-card .card-header {
    background: var(--teal);
    border-radius: 13px 13px 0 0;
    padding: 0.75rem 1rem;
}

.stats-dataset-card .card-header h6 {
    margin: 0;
    color: white;
    font-weight: 600;
}

.stats-dataset-card .card-body {
    font-size: 0.9rem;
}

/* ====================================================================
   PAGE SECTION HEADINGS
   ==================================================================== */
.guide-section-heading {
    color: var(--teal-deep);
    font-family: var(--jm-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--line);
}

/* ====================================================================
   UTILITIES
   ==================================================================== */
.icon-primary {
    color: var(--teal);
}