/* ==========================================================================
   Topic summaries — printable A4 revision sheets
   Roomier redesign (2026-06): larger type, generous whitespace, GDC-first.
   House-style pass (2026-07): Bricolage headers, mono eyebrow chips,
   tangerine/gold accent moments, soft-teal-shadow sheet.
   Extracted from the inline <style> in detail.html.
   All colours come from theme.css tokens (no raw brand hex).

   NOTE: most per-topic sheets (exams/templates/exams/cheatsheets/sheets/*)
   predate the "roomier redesign" and still use an older class vocabulary
   (.section-num, .body-text, .two-col, .formula-label, .meta/.logo,
   .subsection, .error-icon/.tip-icon) that had NO rules anywhere in the
   CSS tree — this file now styles both vocabularies so every sheet picks
   up house style, not just the two that already use .section-badge.
   ========================================================================== */

.ts-wrap {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5pt;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--cream);
    padding: 28px 16px;
    min-height: 80vh;
}

/* Layout helpers so this page is edge-to-edge under the app shell */
.ts-wrap-page .page-wrapper { padding-bottom: 0 !important; }
.ts-wrap-page .container-fluid { padding: 0 !important; }

/* ---- A4 sheet -------------------------------------------------------------
   One .a4-sheet = one printed A4 page. Generous 1.4cm padding so content
   breathes; each sheet breaks onto its own page when printing.            */
.a4-sheet {
    width: 21cm;
    min-height: 29.7cm;
    margin: 0 auto 24px;
    padding: 1.4cm;
    background: var(--paper);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.a4-sheet + .a4-sheet { break-before: page; }

/* ---- Floating controls bar (screen only) -------------------------------- */
.ts-controls {
    position: sticky; top: 56px; z-index: 100;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    padding: 10px 16px; border-radius: 0 0 10px 10px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    max-width: 21cm; margin: 0 auto 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.ts-controls label { font-size: 10pt; font-weight: 500; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; }
.ts-controls select { font-size: 10pt; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--color-border); }
.ts-controls .btn-teal { background: var(--teal); color: #fff; border: none; padding: 6px 16px; border-radius: 5px; cursor: pointer; font-size: 10pt; font-weight: 500; }
.ts-controls .btn-teal:hover { background: var(--teal-deep); }
.ts-controls .btn-outline { background: var(--paper); color: var(--color-text-muted); border: 1px solid var(--color-border); padding: 6px 16px; border-radius: 5px; cursor: pointer; font-size: 10pt; }

/* ---- Sheet header / footer ---------------------------------------------- */
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 3px solid var(--teal); }
.sheet-header h1 {
    font-family: var(--jm-font-display); font-size: 19pt; font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sheet-header > div { font-size: 9.5pt; color: var(--color-text-muted); }

/* Header-right brand mark (".meta" wraps ".logo" + url in the older sheets) */
.sheet-header .meta {
    text-align: right; font-family: var(--jm-font-mono); font-size: 8pt;
    color: var(--muted); line-height: 1.5; flex-shrink: 0;
}
.sheet-header .logo {
    font-family: var(--jm-font-display); font-weight: 800; font-size: 11pt;
    letter-spacing: -0.01em; color: var(--teal-deep);
}

/* Level pill — mono eyebrow chip. HL pops tangerine, the combined SL&HL
   marker gets the gold highlight treatment; plain/SL stays teal. */
.level-badge {
    display: inline-block; font-family: var(--jm-font-mono); font-size: 8.5pt; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff; background: var(--teal); padding: 2px 10px; border-radius: 999px;
    vertical-align: middle;
}
.level-badge.hl { background: var(--tangerine); }
.level-badge.slhl { background: var(--gold); color: var(--teal-ink); }

.sheet-footer, .ts-footer {
    margin-top: 18px; padding-top: 8px; border-top: 2px solid var(--teal);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--jm-font-mono); font-size: 8pt; letter-spacing: 0.02em; color: var(--color-text-light);
}

/* ---- Section header ------------------------------------------------------ */
.section-header {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 12px; padding-bottom: 6px;
    border-bottom: 2px solid var(--teal);
    break-after: avoid;
}
/* Numbered circle — ".section-num" is the class most sheets actually use;
   ".section-badge" is the newer name. Same look, both supported. */
.section-badge, .section-num {
    width: 30px; height: 30px; background: var(--teal); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--jm-font-mono); font-weight: 700; font-size: 13pt; flex-shrink: 0;
}
.section-title {
    font-family: var(--jm-font-display); font-size: 13.5pt; font-weight: 700;
    letter-spacing: -0.01em; color: var(--ink);
}
.section-subtitle { font-size: 9.5pt; color: var(--color-text-muted); margin-left: 4px; }

/* Intro paragraph under a section header (older sheets: ".body-text") */
.body-text { font-size: 10pt; line-height: 1.55; margin: 6px 0 10px; color: var(--color-text); }

/* GDC subheading inside a section (e.g. "GDC: Derivative at a Point") —
   mono tangerine kicker, the house idiom for a section-level pop. */
.subsection {
    font-family: var(--jm-font-mono); font-size: 8.5pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--tangerine);
    margin: 16px 0 6px; padding-top: 6px; border-top: 1px dashed var(--line);
}

/* ---- Formula box --------------------------------------------------------- */
.formula-box {
    background: var(--mint); border-left: 4px solid var(--teal);
    padding: 11px 16px; margin: 10px 0; border-radius: 0 6px 6px 0;
    font-size: 11pt; line-height: 1.55; break-inside: avoid;
}
/* Mono eyebrow kicker naming the formula (older sheets: ".formula-label") */
.formula-label {
    display: block; font-family: var(--jm-font-mono); font-size: 8pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-deep);
    margin-bottom: 4px;
}

/* Two boxes side by side (older sheets: ".two-col"; newer: ".cols-2" below) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.two-col > .formula-box { margin: 0; }

/* ---- Worked example ------------------------------------------------------ */
.example-box, .worked-example {
    background: var(--color-bg-subtle); border: 1px solid var(--line);
    padding: 12px 16px; margin: 10px 0; border-radius: 6px; break-inside: avoid;
}
.example-box .label, .worked-example .ex-label {
    font-family: var(--jm-font-mono); font-weight: 700; color: var(--teal-deep); font-size: 8.5pt;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.worked-example .ex-q { font-weight: 600; margin-bottom: 6px; }
.worked-example .ex-step { margin: 3px 0; padding-left: 6px; }
/* Final answer — gold highlight chip, the house idiom for "the takeaway". */
.worked-example .ex-answer {
    display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
    font-weight: 700; color: var(--teal-ink); background: var(--gold);
}

/* ---- GDC steps ----------------------------------------------------------- */
.gdc-block {
    background: var(--color-bg-muted); border: 1px solid var(--line);
    border-left: 4px solid var(--cyan);
    padding: 10px 14px; margin: 8px 0; border-radius: 0 6px 6px 0;
    font-size: 10pt; line-height: 1.6; break-inside: avoid;
}
.gdc-title { font-weight: 700; color: var(--teal-deep); font-size: 9.5pt; margin-bottom: 4px; }
.gdc-key {
    display: inline-block; font-family: var(--jm-font-mono);
    font-size: 9pt; background: var(--paper); border: 1px solid var(--line);
    border-radius: 4px; padding: 0 5px; color: var(--color-text);
}

/* ---- Callout boxes: error / tip / key ------------------------------------ */
.error-box, .tip-box, .key-box {
    padding: 10px 14px; margin: 10px 0; border-radius: 0 6px 6px 0;
    font-size: 10.5pt; line-height: 1.5; break-inside: avoid;
}
.error-box { background: var(--color-danger-bg); border-left: 4px solid var(--color-danger); }
.tip-box   { background: var(--color-info-bg);   border-left: 4px solid var(--cyan); }
.key-box   { background: var(--color-success-bg); border-left: 4px solid var(--color-success); font-weight: 500; }
.error-box .icon, .error-icon { color: var(--color-danger); font-weight: 700; margin-right: 5px; }
.tip-box .icon, .tip-icon     { color: var(--teal-deep); margin-right: 5px; }
.key-box .icon                { color: var(--color-success); margin-right: 5px; }

/* ---- GDC reference comparison table (TI-84 / Nspire / Casio side by side) - */
.gdc-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 9.5pt; break-inside: avoid; }
.gdc-table th, .gdc-table td { border: 1px solid var(--line); padding: 7px 9px; vertical-align: top; text-align: left; }
.gdc-table thead th { background: var(--mint); color: var(--teal-deep); font-weight: 700; font-size: 9pt; }
.gdc-table td:first-child { font-weight: 600; width: 26%; background: var(--color-bg-subtle); }
.gdc-table .gdc-key { font-size: 8.5pt; }
.gdc-table tbody tr:nth-child(even) td:not(:first-child) { background: var(--color-bg-subtle); }

/* ---- Numeric worked-example table (Euler's method etc.) ------------------ */
.euler-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 8.5pt; }
.euler-table td, .euler-table th { border: 1px solid var(--color-border); padding: 3px 6px; text-align: center; }

/* ---- Two-column flow inside a sheet (optional, for dense formula lists) --- */
.cols-2 { column-count: 2; column-gap: 20px; }
.cols-2 > * { break-inside: avoid; }

/* ---- Mark annotation ----------------------------------------------------- */
.mark { float: right; font-family: var(--jm-font-mono); font-weight: 700; font-size: 9.5pt; color: var(--color-text-muted); }

/* ---- Diagrams ------------------------------------------------------------ */
.a4-sheet svg { max-width: 100%; height: auto; }

/* ==========================================================================
   Cheatsheet LIBRARY (the topic-picker grid, not the printable sheets)
   ========================================================================== */
.cs-library { max-width: 960px; }
.cs-eyebrow {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 3px 12px; margin-bottom: 0.6rem; border-radius: 999px;
    background: var(--mint); border: 1px solid var(--line); color: var(--teal-deep);
    font-family: var(--jm-font-mono); font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.cs-library-title {
    font-family: var(--jm-font-display); font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink);
}
.cs-library-pills .nav-link {
    color: var(--teal-deep);
    font-family: var(--jm-font-mono); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cs-library-pills .nav-link.active {
    background: var(--teal) !important;
    color: #fff;
}
.cs-library-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-library-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.cs-library-card-title {
    font-family: var(--jm-font-display); color: var(--ink);
}
.cs-library-card-meta {
    font-family: var(--jm-font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
    .ts-wrap { padding: 0 !important; background: #fff !important; font-size: 10.5pt; }
    .a4-sheet { box-shadow: none !important; margin: 0 !important; width: 100% !important; min-height: 0 !important; padding: 1.2cm !important; }
    .ts-controls { display: none !important; }
    nav, footer, #beta-banner, .page-wrapper > .container-fluid:first-child { display: none !important; }
    @page { size: A4 portrait; margin: 1cm; }
    .section-header, .section-badge, .section-num, .level-badge,
    .formula-box, .formula-label, .example-box, .worked-example, .gdc-block,
    .error-box, .tip-box, .key-box, .sheet-header, .sheet-footer, .ts-footer,
    .subsection, .gdc-table thead th {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}