/* ==========================================================
   HANTEN CSS FRAMEWORK
   Version 1.0

   v1.2: previous / next exhibit links (.hanten-pager); saved images
   place the transfer question in the Sources text column.

   v1.1.1: aha headline a step smaller than the title, centered.

   v1.1: aha headline uses the title's type; transfer question lines
   balanced; map labels get a light halo so lines and borders don't
   run through them; hanten.app footer on every page and on every
   saved image (js/hanten-brand.js).

   v1.0.1: each exhibit picks its own canvas from the palette;
   aha text is one size and color in every exhibit.

   v1.0: theme canvases return (each theme's page color, with panels
   and charts on white); aha headline line (.hanten-aha-lead);
   "Try it somewhere else" transfer question (.hanten-transfer)
   replaces the closing reflection; related exhibits show H numbers.

   v0.9: exhibit number (.hanten-hnum) shown above the question.

   v0.8: theme colors removed from exhibit pages (all exhibits share
   one neutral background); the body theme class stays as a label.

   v0.7: theme backgrounds softened to half strength so they do not
   compete with the colors inside charts and maps.

   v0.6: theme backgrounds. Each exhibit's <body> carries a
   hanten-theme-<name> class that sets the page color for its theme.

   v0.5: no orphaned words (balanced wrapping on the question,
   subtitle and reflection; pretty wrapping on paragraphs), and
   adjacent dropdowns share one divider line instead of two.

   v0.4: bakes in the Exhibit Page Standards (Design Standards
   section 19): one sans font, no accent bars, centered table
   headers, left-aligned Sources line, white Save/Share buttons.

   Purpose:
   Shared visual foundation for Hanten exhibits.

   Core goals:
   - Question first, but compact.
   - Primary visual enters the first desktop viewport whenever practical.
   - Soft paper background + restrained teal-green borders create
     a recognizable Hanten visual language.
   - One sans-serif family for all exhibit text (no serif/mono).
   - Editorial hierarchy is standardized without making exhibits rigid.
   ========================================================== */

:root {
    /* Typography */
    --hanten-font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    /* Core colors */
    --hanten-paper: #eef1ec;
    --hanten-panel: #ffffff;
    --hanten-text: #1f1f1f;
    --hanten-muted: #666666;
    --hanten-accent: #0e7c86;

    /* Shared structural colors */
    --hanten-border: rgba(14, 124, 134, 0.18);
    --hanten-border-soft: rgba(14, 124, 134, 0.10);
    --hanten-accent-soft: rgba(14, 124, 134, 0.10);

    /* Layout */
    --hanten-page-width: 1200px;
    --hanten-graphic-width: 900px;
    --hanten-text-width: 760px;

    /* Spacing */
    --hanten-space-xs: 0.5rem;
    --hanten-space-sm: 1rem;
    --hanten-space-md: 2rem;
    --hanten-space-lg: 4rem;
    --hanten-space-xl: 6rem;
}

/* ==========================================================
   1. RESET + PAGE
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--hanten-font);
    color: var(--hanten-text);
    background: var(--hanten-paper);
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   2. EXHIBIT FRAME

   Compact by design so question + visual can share the first
   viewport whenever the exhibit format reasonably allows it.
   ========================================================== */

.hanten-exhibit {
    width: 100%;
    max-width: var(--hanten-page-width);

    margin: 0 auto;

    padding:
        clamp(1rem, 2.5vh, 1.75rem)
        clamp(1rem, 3vw, 2rem)
        clamp(2rem, 5vh, 4rem);
}

/* ==========================================================
   3. QUESTION + SUBTITLE
   ========================================================== */

.hanten-question {
    max-width: 900px;

    margin:
        0 auto
        0.35rem;

    text-align: center;

    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.018em;
}

.hanten-subtitle {
    max-width: var(--hanten-text-width);

    margin:
        0 auto
        clamp(0.75rem, 2vh, 1.25rem);

    text-align: center;

    font-size: clamp(0.9rem, 1.35vw, 1rem);
    line-height: 1.4;

    color: var(--hanten-muted);
}

/* ==========================================================
   4. PRIMARY GRAPHIC
   ========================================================== */

.hanten-graphic {
    width: min(100%, var(--hanten-graphic-width));
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   5. STANDARD SURFACES

   Use these classes where appropriate rather than inventing a
   new border/background treatment in every exhibit.
   ========================================================== */

.hanten-panel,
.hanten-card {
    background: var(--hanten-panel);
    border: 1px solid var(--hanten-border);
}

.hanten-takeaway-box {
    /* Aha text sits on the page background: no tint, no accent bar. */
    background: transparent;
}

/* ==========================================================
   6. SHARED TYPOGRAPHY
   ========================================================== */

.hanten-section-title {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.hanten-body {
    font-size: 0.95rem;
    line-height: 1.5;
}

.hanten-takeaway {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
}

.hanten-reflection {
    margin:
        1rem auto
        0;

    text-align: center;

    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 500;

    color: var(--hanten-muted);
}

.hanten-source {
    font-size: 0.76rem;
    line-height: 1.45;

    color: var(--hanten-muted);
}

/* Sources line sits in the text column, left-aligned, so its left
   edge lines up with the aha text and dropdowns (Design Standards 19). */
.hanten-exhibit .hanten-source {
    max-width: var(--hanten-text-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

/* Dropdowns share the text column with the aha text and Sources line. */
.hanten-exhibit details {
    max-width: var(--hanten-text-width);
    margin-left: auto;
    margin-right: auto;
}

/* Related exhibits list inside a dropdown (Design Standards 19). */
.hanten-exhibit .hanten-related {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.hanten-exhibit .hanten-related li {
    margin: 0.3rem 0 0;
}

.hanten-exhibit .hanten-related a {
    color: var(--hanten-accent);
}

/* One sans font for everything, including controls and chart text. */
.hanten-exhibit button,
.hanten-exhibit input,
.hanten-exhibit select,
.hanten-exhibit svg text {
    font-family: var(--hanten-font);
}

/* Tables: centered column headers. Data cells follow the column type:
   text columns (names, labels, descriptions) left-aligned; short-value
   columns (numbers, percentages, ranks, years, dates) centered. Mark
   value columns with class="hanten-num" on the td (or per-exhibit
   nth-child rules). */
.hanten-exhibit td.hanten-num {
    text-align: center;
}
.hanten-exhibit thead th {
    text-align: center;
}

.hanten-exhibit td {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   7. UTILITY ACTIONS

   Save/share controls are secondary to the discovery and should
   normally appear after the explanatory content.
   ========================================================== */

.hanten-utility {
    margin-top: 0.75rem;

    display: flex;
    justify-content: flex-end;
}

.hanten-utility button,
.hanten-utility a {
    font-size: 0.75rem;
    opacity: 0.72;
}

.hanten-utility button {
    background: #ffffff;
}

.hanten-utility button:hover,
.hanten-utility button:focus-visible,
.hanten-utility a:hover,
.hanten-utility a:focus-visible {
    opacity: 1;
}

/* ==========================================================
   8. MOBILE
   ========================================================== */

@media (max-width: 600px) {
    .hanten-exhibit {
        padding-top: 0.9rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .hanten-question {
        font-size: clamp(1.3rem, 6vw, 1.65rem);
        line-height: 1.16;
    }

    .hanten-subtitle {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }

    .hanten-body,
    .hanten-takeaway,
    .hanten-reflection {
        font-size: 0.92rem;
    }
}

/* ==========================================================
   9. TEXT WRAPPING AND DROPDOWN DIVIDERS (v0.5)
   ========================================================== */

/* No orphans: short centered lines wrap evenly, and body
   paragraphs avoid leaving one word alone on the last line. */
.hanten-exhibit .hanten-question,
.hanten-exhibit .hanten-subtitle,
.hanten-exhibit .hanten-reflection {
    text-wrap: balance;
}

.hanten-exhibit p,
.hanten-exhibit li {
    text-wrap: pretty;
}

/* Stacked dropdowns: one divider line between them, not two. */
.hanten-exhibit details + details {
    margin-top: 0 !important;
    border-top: 0 !important;
}

/* ==========================================================
   10. THEME CLASSES (v0.8)
   Each exhibit's <body> carries hanten-theme-<theme> as a label
   only. Exhibit pages all use the same neutral background
   (--hanten-paper); theme colors appear on homepage and Browse
   cards, not behind exhibit content.
   ========================================================== */


/* ==========================================================
   11. EXHIBIT NUMBER (v0.9)
   A small H### label above the question (Decision Log D017).
   ========================================================== */
.hanten-hnum {
    max-width: 900px;
    margin: 0 auto 0.2rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hanten-muted);
}

/* ==========================================================
   12. THEME CANVASES, AHA, TRANSFER, RELATED (v1.0)
   ========================================================== */

/* Theme canvases: the default page color for each theme. Each
   exhibit also sets its own canvas (a <style id="hanten-canvas"> in
   its head), picked from this same palette to suit that exhibit's
   chart colors, which overrides the theme default. */
.hanten-theme-perspective  { --hanten-paper: #EDE7F4; }
.hanten-theme-time         { --hanten-paper: #F4ECDF; }
.hanten-theme-scale        { --hanten-paper: #E2EEF5; }
.hanten-theme-measurement  { --hanten-paper: #E6EFE2; }
.hanten-theme-distribution { --hanten-paper: #F5E6DF; }
.hanten-theme-statistics   { --hanten-paper: #E4E8F0; }
.hanten-theme-probability  { --hanten-paper: #DFF0EB; }
.hanten-theme-optimization { --hanten-paper: #F1EFD8; }
.hanten-theme-systems      { --hanten-paper: #F3E4EA; }
body[class*="hanten-theme-"] { background: var(--hanten-paper); }

/* Aha: the discovery right under the graphic. Every exhibit's aha
   block carries .hanten-aha so its text is the same size and color
   everywhere; the first line (.hanten-aha-lead) is the headline. */
.hanten-exhibit .hanten-aha,
.hanten-exhibit .hanten-aha p,
.hanten-exhibit .hanten-aha li {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--hanten-text) !important;
}
.hanten-aha-lead {
    /* Same font, weight and color as the exhibit title, a step smaller,
       centered. */
    display: block !important;
    margin: 0 0 0.6rem !important;
    text-align: center !important;
    font-family: var(--hanten-font) !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    color: var(--hanten-text) !important;
    text-wrap: balance;
}
.hanten-exhibit .hanten-aha p { margin: 0 0 0.55rem; }
.hanten-exhibit .hanten-aha p:last-child { margin-bottom: 0; }

/* Inside the saved/shared image the aha and transfer sit on the card. */
.hanten-export-card .hanten-transfer { margin-top: 18px; }

/* Transfer question: a new situation where the same idea applies
   (like the Transfer step in the classroom APRUTs). */
.hanten-transfer {
    max-width: var(--hanten-text-width);
    margin: 1.4rem auto 0;
    padding: 1rem 0 1.05rem;
    border-top: 1px solid rgba(26, 62, 110, 0.18);
    border-bottom: 1px solid rgba(26, 62, 110, 0.18);
    text-align: center;
}
.hanten-transfer-kicker {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8F5E00;
}
/* Scenario and question: one size, regular weight, same as the aha
   paragraphs above them. */
.hanten-transfer-scenario,
.hanten-transfer-question {
    max-width: 640px;
    margin: 0 auto 0.3rem;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--hanten-text);
    text-wrap: balance;
}
.hanten-transfer-question { margin-bottom: 0; }
.hanten-exhibit .hanten-transfer + details { margin-top: 0.9rem; border-top: 0 !important; }

/* Related exhibits show their H number. */
.hanten-exhibit .hanten-related .hanten-rel-num {
    display: inline-block;
    min-width: 2.9rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--hanten-muted);
}

/* Balanced lines: a two-line transfer question splits about evenly.
   (Needs this specificity to beat the "pretty" wrap on all <p>.) */
.hanten-exhibit p.hanten-transfer-question,
.hanten-exhibit p.hanten-transfer-scenario {
    text-wrap: balance;
}

/* Map and chart labels: a thin light halo keeps graticule lines,
   borders and rings from running through the text. :where() keeps
   this at zero specificity, so any exhibit's own label styling wins. */
:where(.hanten-exhibit svg text:not([stroke])) {
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* hanten.app on every exhibit page. */
.hanten-site-footer {
    max-width: var(--hanten-text-width);
    margin: 1.4rem auto 0;
    padding: 0.8rem 0 1.4rem;
    border-top: 1px solid rgba(26, 62, 110, 0.14);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hanten-site-footer a {
    color: #1A3E6E !important;
    text-decoration: none !important;
}
.hanten-site-footer a:hover,
.hanten-site-footer a:focus-visible {
    text-decoration: underline !important;
}

/* On phones the aha headline stays a step below the title. */
@media (max-width: 600px) {
    .hanten-aha-lead {
        font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
        line-height: 1.18 !important;
    }
}

/* Previous / next exhibit links, in H-number order. */
.hanten-pager {
    max-width: var(--hanten-text-width);
    margin: 1.6rem auto 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
}
.hanten-pager a {
    color: #1A3E6E !important;
    text-decoration: none !important;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(26, 62, 110, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}
.hanten-pager a:hover,
.hanten-pager a:focus-visible {
    background: #ffffff;
    border-color: #1A3E6E;
}
.hanten-pager + .hanten-site-footer { margin-top: 1rem; }


/* Dropdowns (v1.3): larger headings and text, the same on every exhibit. */
.hanten-exhibit details > summary {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}
.hanten-exhibit details p,
.hanten-exhibit details li {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

/* Previous/next arrows on the same row as Save/Share (joined by
   hanten-brand.js): arrows left, image buttons right. */
.hanten-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
}
.hanten-actionbar .hanten-pager {
    margin: 0;
    max-width: none;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.76rem;
}
.hanten-actionbar .hanten-pager a {
    opacity: 1;
    font-size: 0.76rem;
    padding: 0.5rem 0.75rem;
}
.hanten-actionbar > :last-child { margin-left: auto; }