/* ============================================================
   Smart Notes reader: header, contents drawer, block cards
   ============================================================ */

.reader { background: var(--bg); min-height: 100vh; }

/* ---------------------------------------------------------- reader header */

.reader-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.6);
    border-bottom: 1px solid var(--border);
}
.reader-bar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 9px var(--sp-5);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.reader-title {
    flex: 1 1 auto;
    min-width: 0;
}
.reader-title b {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reader-title small {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reader-progress {
    height: 3px;
    background: var(--surface-3);
}
.reader-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary), #ff6a6f);
    transition: width .2s linear;
}

.mode-switch {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px;
    flex: none;
}

/* On a phone the four modes become a full-width segmented control on their
   own row — squeezing them into the bar pushed the page sideways. */
@media (max-width: 760px) {
    .reader-bar-inner { padding-bottom: 8px; }
    .mode-switch {
        order: 10;
        flex: 1 0 100%;
        justify-content: stretch;
    }
    .mode-switch button {
        flex: 1;
        justify-content: center;
        padding: 8px 6px;
        min-width: 0;
    }
    .mode-switch button .mode-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    /* at the very narrow end the icons alone carry the meaning */
    .mode-switch button .mode-label { display: none; }
    .mode-switch button { padding: 9px 4px; }
}
.mode-switch button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mode-switch button.is-active { background: var(--surface-2); color: var(--primary); box-shadow: var(--shadow-xs); }

/* ---------------------------------------------------------- reader body */

.reader-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5) calc(var(--sp-9) + var(--bottomnav-h));
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
}

.toc {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    max-height: calc(100vh - var(--header-h) - var(--sp-7));
    overflow-y: auto;
    padding-right: 4px;
}
.toc h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 10px;
}
.toc-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--muted-2);
    background: var(--surface);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}
.toc a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    transition: background var(--t-fast), color var(--t-fast);
}
.toc a:hover { background: var(--surface); color: var(--text); }
.toc a.is-current { background: var(--primary-soft); color: var(--primary-dark); }
.toc a .toc-n {
    width: 20px;
    flex: none;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted-2);
}
.toc a.is-current .toc-n { color: var(--primary); }
.toc a .toc-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- grouped contents, for lessons written without headings ---- */
.toc-group { border-radius: 9px; }
.toc-group + .toc-group { margin-top: 1px; }
.toc-group > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    cursor: pointer;
    list-style: none;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    user-select: none;
}
.toc-group > summary::-webkit-details-marker { display: none; }
.toc-group > summary:hover { background: var(--surface); color: var(--text); }
.toc-group > summary svg { flex: none; opacity: .75; }
.toc-group > summary .toc-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-group > summary .toc-count {
    flex: none;
    background: var(--surface-3);
    color: var(--muted);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-size: 10.5px;
}
.toc-group[open] > summary { color: var(--text); }
.toc-group[open] > summary .toc-count { background: var(--primary-soft); color: var(--primary-dark); }
/* a caret that turns, so the row reads as expandable without an extra icon */
.toc-group > summary::after {
    content: "";
    width: 5px; height: 5px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
    flex: none;
    transition: transform var(--t-fast);
}
.toc-group[open] > summary::after { transform: rotate(45deg); }
.toc-group > a { padding-left: 32px; font-weight: 600; }
.toc a.is-sub { padding-left: 24px; }
.toc a.is-sub .toc-n { opacity: .6; }

.reader-body {
    max-width: var(--reader-max);
    font-size: var(--reader-size);
    line-height: var(--reader-line);
}
.reader-body > * + * { margin-top: var(--sp-4); }

.reader-hero { margin-bottom: var(--sp-5); }
.reader-hero h1 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 8px; }
.reader-hero .row-gap { color: var(--muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------- block card */

.block {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    scroll-margin-top: calc(var(--header-h) + 18px);
}
.block__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 10px;
}
.block__label svg { width: 14px; height: 14px; }
.block__title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
    line-height: 1.35;
}
/* one rhythm inside a card: a paragraph break should read like a line break,
   so a merged section does not look looser than a card written as one block */
.block__body > p { margin-bottom: .3em; }
.block__body > p:last-child { margin-bottom: 0; }
.block__body ul, .block__body ol { margin-bottom: .5em; }

/* "10 → int" runs: value and meaning line up in two columns */
.block__body .pairs {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 0;
    margin: 0 0 .4em;
}
.block__body .pairs dt {
    font-weight: 600;
    color: var(--text-strong);
    padding-right: 14px;
}
.block__body .pairs dd { margin: 0; }
.block__body .pairs dd::before {
    content: "→";
    opacity: .55;
    margin-right: .5em;
}
/* infographic points: Important and the exam cards, one numbered row per point */
.block__body .points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.block__body .points__item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.block__body .points__n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .78em;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 16%, transparent);
    color: var(--text-strong);
}
.block__body .points__detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 10px;
    margin-top: 3px;
}
.block__body .points__label {
    font-weight: 700;
    font-size: .86em;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .7;
    align-self: center;
}
.block__body .points__body > p:last-child { margin-bottom: 0; }

/* Exam facts are authored as keyword/value pairs ("Block size:" / "64 bits").
   The keyword owns a stable column, so a learner can scan down the facts like
   an answer key instead of hunting through a paragraph or disconnected bullets. */
.exam-intro,
.keyword-intro {
    margin: 0 0 11px;
    padding: 8px 11px;
    border-left: 3px solid var(--fam);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--fam) 8%, transparent);
    color: var(--text-strong);
    font-weight: 650;
}
.block__body .exam-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.exam-fact {
    display: grid;
    grid-template-columns: 30px minmax(150px, .62fr) minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 18%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 86%, var(--fam-soft));
    overflow: hidden;
}
.exam-fact__n {
    display: grid;
    place-items: center;
    min-height: 42px;
    background: color-mix(in srgb, var(--fam) 12%, transparent);
    color: var(--fam);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 800;
}
.exam-fact__key {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 9px 12px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 15%, var(--border));
    color: var(--text-strong);
    font-size: .83em;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.exam-fact__value {
    min-width: 0;
    padding: 9px 12px;
    color: var(--text);
    line-height: 1.48;
    overflow-wrap: anywhere;
}
.exam-fact__value > p { margin: 0; }
.exam-fact.is-statement .exam-fact__value { grid-column: 2 / -1; }

/* Explanation cards use the same alignment idea without exam numbering. */
.keyword-notes {
    display: grid;
    gap: 7px;
}
.keyword-note {
    display: grid;
    grid-template-columns: minmax(135px, .55fr) minmax(0, 1fr);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 15%, var(--border));
    border-radius: 9px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 78%, var(--fam-soft));
}
.keyword-note__key {
    padding: 9px 12px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border));
    color: var(--fam);
    font-size: .84em;
    font-weight: 760;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.keyword-note__value {
    min-width: 0;
    padding: 9px 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.keyword-note__value > p { margin: 0; }
.keyword-note.is-wide { display: block; }
.keyword-note.is-wide .keyword-note__value { background: transparent; }

/* Every remaining Explanation card follows the same teaching hierarchy. The
   left rail answers "what kind of detail is this?" while the right column holds
   the actual explanation, code, flow or list. */
.explain-sheet {
    display: grid;
    gap: 9px;
}
.explain-lead {
    display: grid;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 24%, var(--border));
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 74%, var(--fam-soft));
}
.explain-lead__label {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    background: color-mix(in srgb, var(--fam) 13%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--fam) 18%, var(--border));
    color: var(--fam);
    font-size: .77em;
    font-weight: 820;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.explain-lead__body {
    min-width: 0;
    padding: 11px 14px;
    color: var(--text-strong);
    line-height: 1.58;
    overflow-wrap: anywhere;
}
.explain-lead__body > p { margin-bottom: .32em; }
.explain-lead__body > p:last-child { margin-bottom: 0; }
.explain-parts {
    display: grid;
    gap: 7px;
}
.explain-part {
    display: grid;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 15%, var(--border));
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 84%, var(--fam-soft));
}
.explain-part__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 11px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border));
    color: var(--fam);
}
.explain-part__n {
    flex: none;
    padding: 4px 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--fam) 12%, transparent);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
}
.explain-part__label {
    min-width: 0;
    font-size: .79em;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.explain-part__body {
    min-width: 0;
    padding: 9px 13px;
    line-height: 1.54;
    overflow-wrap: anywhere;
}
.explain-part__body > p { margin-bottom: .3em; }
.explain-part__body > p:last-child { margin-bottom: 0; }
.explain-part.is-example { border-color: color-mix(in srgb, var(--info) 23%, var(--border)); }
.explain-part.is-example .explain-part__head { color: var(--info); }
.explain-part.is-reason { border-color: color-mix(in srgb, var(--violet) 23%, var(--border)); }
.explain-part.is-reason .explain-part__head { color: var(--violet); }
.explain-part.is-result,
.explain-part.is-correct { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.explain-part.is-result .explain-part__head,
.explain-part.is-correct .explain-part__head { color: var(--success); }
.explain-part.is-important,
.explain-part.is-wrong { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
.explain-part.is-important .explain-part__head { color: var(--warning); }
.explain-part.is-wrong { border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); }
.explain-part.is-wrong .explain-part__head { color: var(--danger); }
.explain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 6px;
}
.explain-list li {
    position: relative;
    padding: 7px 9px 7px 22px;
    border: 1px solid color-mix(in srgb, var(--fam) 13%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--fam) 5%, var(--surface-2));
    line-height: 1.4;
}
.explain-list li::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fam);
}
.explain-sheet .viz,
.explain-sheet .viz-pre { margin-block: 0; }

/* ---------------------------------------------------------- definitions
   Definitions are revision material: the meaning is visually primary and every
   scope/example/tool list sits under a named heading instead of floating as
   unrelated lines. The source wording remains untouched. */
.definition-sheet {
    display: grid;
    gap: 10px;
}
.definition-lead {
    display: grid;
    grid-template-columns: minmax(104px, .27fr) minmax(0, 1fr);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 28%, var(--border));
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 72%, var(--fam-soft));
}
.definition-lead__label {
    display: flex;
    align-items: center;
    padding: 12px 13px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 18%, var(--border));
    background: color-mix(in srgb, var(--fam) 14%, transparent);
    color: var(--fam);
    font-size: .75em;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.definition-lead__body {
    min-width: 0;
    padding: 12px 15px;
    color: var(--text-strong);
    font-size: 1.015em;
    line-height: 1.58;
    overflow-wrap: anywhere;
}
.definition-lead__body > p,
.definition-lead__detail > p { margin-bottom: .35em; }
.definition-lead__body > p:last-child,
.definition-lead__detail > p:last-child { margin-bottom: 0; }
.definition-lead__detail {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed color-mix(in srgb, var(--fam) 22%, var(--border));
    color: var(--text);
    font-size: .94em;
}
.definition-term {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--fam) 10%, transparent);
}
.definition-term span {
    flex: none;
    color: var(--fam);
    font-size: .7em;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.definition-term strong { color: var(--text-strong); }
.definition-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.definition-section {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 17%, var(--border));
    border-radius: 11px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 84%, var(--fam-soft));
}
.definition-section:only-child,
.definition-section.is-visual,
.definition-section.is-code { grid-column: 1 / -1; }
.definition-section__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border));
    background: color-mix(in srgb, var(--fam) 7%, transparent);
    color: var(--fam);
}
.definition-section__n {
    flex: none;
    padding: 4px 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--fam) 13%, transparent);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1;
}
.definition-section__label {
    min-width: 0;
    font-size: .79em;
    font-weight: 820;
    letter-spacing: .025em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.definition-section__body {
    min-width: 0;
    padding: 10px 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.definition-section__body > p:last-child { margin-bottom: 0; }
.definition-section.is-heading-only .definition-section__head { border-bottom: 0; }
.definition-list,
.study-list,
.study-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.definition-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.definition-list li,
.study-list li {
    position: relative;
    min-width: 0;
    padding: 8px 10px 8px 25px;
    border: 1px solid color-mix(in srgb, var(--fam) 13%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--fam) 5%, var(--surface-2));
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.definition-list li::before,
.study-list li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--fam);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fam) 11%, transparent);
}

/* ------------------------------------------------ structured pasted prose
   Some ChatGPT notes contain several mini-sections inside one paragraph block.
   Once headings are confidently detected, restore that hierarchy as a compact
   study sheet. Ordinary prose keeps the borderless reader treatment. */
.block--plain.block--structured {
    --fam: var(--fam-concept-a);
    --fam-soft: var(--fam-concept-b);
    padding: var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--fam) 20%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-2) 91%, var(--fam-soft));
}
.block--plain.block--structured::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(180deg, var(--fam), color-mix(in srgb, var(--fam) 22%, transparent));
}
.block--plain.block--structured .block__tools { top: 9px; right: 9px; }
.study-sheet { display: grid; gap: 9px; }
.study-intro {
    display: grid;
    grid-template-columns: minmax(92px, .23fr) minmax(0, 1fr);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 20%, var(--border));
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fam) 6%, transparent);
}
.study-intro__label {
    display: flex;
    align-items: center;
    padding: 10px 11px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 15%, var(--border));
    color: var(--fam);
    font-size: .72em;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.study-intro__body { min-width: 0; padding: 10px 12px; }
.study-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.study-section {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--fam) 17%, var(--border));
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}
.study-section.is-visual { grid-column: 1 / -1; }
.study-section.is-checks { grid-column: 1 / -1; }
.study-section.is-comparison { grid-column: 1 / -1; }
.study-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border));
    background: color-mix(in srgb, var(--fam) 7%, transparent);
    color: var(--fam);
}
.study-section__n {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 850;
    opacity: .78;
}
.study-section__label {
    min-width: 0;
    color: var(--text-strong);
    font-size: .8em;
    font-weight: 790;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.study-section__body {
    min-width: 0;
    padding: 10px 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.study-section__body > p:last-child { margin-bottom: 0; }
.study-section.is-heading-only .study-section__head { border-bottom: 0; }
.study-checks li {
    position: relative;
    padding: 7px 8px 7px 28px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--fam) 5%, transparent);
    line-height: 1.4;
}
.study-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.study-checks li::before {
    content: "✓";
    position: absolute;
    left: 8px;
    top: 8px;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border: 1px solid color-mix(in srgb, var(--fam) 45%, var(--border));
    border-radius: 4px;
    color: var(--fam);
    font-size: 8px;
    font-weight: 900;
}
.study-code {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--fam) 18%, var(--border));
    border-radius: 8px;
    background: var(--code-bg);
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: .88em;
    line-height: 1.62;
    overflow-x: auto;
    white-space: pre;
}
.card-table--comparison th {
    color: var(--fam);
    background: color-mix(in srgb, var(--fam) 9%, var(--surface-2));
}
.card-table--comparison td:first-child {
    color: var(--text-strong);
    font-weight: 720;
    background: color-mix(in srgb, var(--fam) 4%, transparent);
}
.card-table--compact th,
.card-table--compact td { padding-block: 8px; }
.definition-sheet .viz,
.definition-sheet .viz-pre,
.study-sheet .viz,
.study-sheet .viz-pre { margin-block: 0; }

/* Empty imports never become giant blank learner cards. Editors still see a
   compact actionable warning in preview, and a title-only card becomes a tidy
   divider rather than an empty container. */
.block--title-only { padding-block: 13px; }
.block--title-only .block__label { margin-bottom: 5px; }
.block--title-only .block__title { margin-bottom: 0; }
.empty-block-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px dashed color-mix(in srgb, var(--warning) 42%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    color: var(--muted);
    font-size: .86em;
}
.empty-block-note svg { flex: none; color: var(--warning); }

@media (max-width: 620px) {
    .exam-fact { grid-template-columns: 28px minmax(0, 1fr); }
    .exam-fact__n { grid-row: 1 / span 2; }
    .exam-fact__key { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border)); }
    .exam-fact__value { grid-column: 2; }
    .exam-fact.is-statement .exam-fact__value { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .keyword-note { grid-template-columns: 1fr; }
    .keyword-note__key { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border)); }
    .explain-lead,
    .explain-part { grid-template-columns: 1fr; }
    .explain-lead__label,
    .explain-part__head { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border)); }
    .explain-lead__label { padding-block: 8px; }
    .definition-lead,
    .study-intro { grid-template-columns: 1fr; }
    .definition-lead__label,
    .study-intro__label {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--fam) 14%, var(--border));
        padding-block: 8px;
    }
    .definition-sections,
    .study-sections { grid-template-columns: 1fr; }
    .definition-section,
    .definition-section.is-code,
    .definition-section.is-visual,
    .study-section.is-visual,
    .study-section.is-checks { grid-column: 1; }
    .study-section.is-comparison { grid-column: 1; }
    .study-checks { grid-template-columns: 1fr; }
    .definition-term { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* term and meaning: a quiet rule between the columns reads better than an arrow */
.block__body .pairs--plain { gap: 6px 0; }
.block__body .pairs--plain dt { border-left: 2px solid var(--accent, currentColor); padding-left: 10px; }
.block__body .pairs--plain dd::before { content: none; }
.block__body .pairs--plain dd { padding-left: 14px; opacity: .92; }
/* "Memory sentence:" — names the lines that follow it */
.block__body > p.sub {
    font-weight: 600;
    color: var(--text-strong);
    margin-top: .5em;
}
.block__body > p.sub:first-child { margin-top: 0; }

.block__tools {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.block:hover .block__tools, .block:focus-within .block__tools { opacity: 1; }
.block__tools .iconbtn { width: 32px; height: 32px; background: var(--surface-2); }

/* family colouring — every family names its accent once, and visuals.css
   builds the card chrome (rail, medallion, diagram tints) out of these two */
.block            { --fam: var(--muted);          --fam-soft: var(--surface); }
.block--concept   { --fam: var(--fam-concept-a);  --fam-soft: var(--fam-concept-b); }
.block--code      { --fam: var(--fam-code-a);     --fam-soft: var(--info-soft); }
.block--io        { --fam: var(--fam-io-a);       --fam-soft: var(--fam-io-b); }
.block--callout   { --fam: var(--fam-callout-a);  --fam-soft: var(--fam-callout-b); }
.block--exam      { --fam: var(--fam-exam-a);     --fam-soft: var(--fam-exam-b); }
.block--mcq       { --fam: var(--fam-mcq-a);      --fam-soft: var(--fam-mcq-b); }
.block--practice  { --fam: var(--fam-practice-a); --fam-soft: var(--fam-practice-b); }
.block--summary   { --fam: var(--fam-summary-a);  --fam-soft: var(--fam-summary-b); }
.block--table     { --fam: var(--fam-table-a);    --fam-soft: var(--fam-table-b); }
.block--steps     { --fam: var(--fam-steps-a);    --fam-soft: var(--fam-steps-b); }
.block--lines     { --fam: var(--fam-lines-a);    --fam-soft: var(--fam-lines-b); }
.block--explain   { --fam: var(--fam-explain-a);  --fam-soft: var(--fam-explain-b); }
.block--plain     { --fam: var(--border-strong);  --fam-soft: var(--surface); }
.block[data-type="warning"],
.block[data-type="common_error"] { --fam: var(--danger); --fam-soft: var(--danger-soft); }
.block[data-type="definition"]   { --fam: var(--primary); --fam-soft: var(--primary-soft); }

.block--heading {
    background: transparent;
    border: 0;
    padding: var(--sp-5) 0 0;
}
.block--heading .block__title { font-size: 1.45em; letter-spacing: -.015em; }
.block--heading.is-sub .block__title { font-size: 1.2em; }
.block--heading .block__label { display: none; }

.block--concept  .block__label { color: var(--fam-concept-a); }

/* ---------------------------------------------------------------- prose
   A lesson is mostly plain paragraphs — 445 of them in this database. Giving
   every one a bordered box, an accent rail and a grey "PARAGRAPH" medallion
   turns the page into a wall of identical containers and leaves the real
   cards nothing to stand out against. Prose is therefore just prose. */
.block--plain {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 2px 2px 2px 0;
}
.block--plain .block__label { display: none; }
.block--plain .block__title { font-size: 1.06em; margin-bottom: 6px; }
.block--plain .block__tools { top: -2px; right: -2px; }
/* consecutive paragraphs read as one passage, not as separate items */
.reader-body > .block--plain + .block--plain { margin-top: var(--sp-3); }

/* ---------------------------------------------------------- explanation
   The card that unpacks the program above it. There are hundreds, so it needs
   an identity without shouting: a quiet slate wash and a soft rail. */
.block--explain {
    background: var(--fam-explain-b);
    border-color: color-mix(in srgb, var(--fam-explain-a) 20%, transparent);
}
.block--explain .block__label { color: var(--fam-explain-a); }
.block--explain[data-type="simple_explanation"] { border-style: dashed; }

/* the parser links an explanation to its program — surface that link */
.explains-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
}
.explains-link:hover { color: var(--fam); border-color: color-mix(in srgb, var(--fam) 45%, transparent); }

.block--callout  { background: var(--fam-callout-b); border-color: color-mix(in srgb, var(--fam-callout-a) 26%, transparent); }
.block--callout  .block__label { color: var(--fam-callout-a); }
.block--exam     { background: var(--fam-exam-b); border-color: color-mix(in srgb, var(--fam-exam-a) 26%, transparent); }
.block--exam     .block__label { color: var(--fam-exam-a); }
.block--practice { background: var(--fam-practice-b); border-color: color-mix(in srgb, var(--fam-practice-a) 26%, transparent); }
.block--practice .block__label { color: var(--fam-practice-a); }
.block--summary  { background: var(--fam-summary-b); border-color: color-mix(in srgb, var(--fam-summary-a) 26%, transparent); }
.block--summary  .block__label { color: var(--fam-summary-a); }
.block--table    .block__label { color: var(--fam-table-a); }
.block--steps    .block__label { color: var(--fam-steps-a); }
.block--lines    .block__label { color: var(--fam-lines-a); }
.block--io       .block__label { color: var(--fam-io-a); }
.block--mcq      .block__label { color: var(--fam-mcq-a); }

/* specific types that deserve their own accent */
.block[data-type="warning"]      { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.block[data-type="warning"]      .block__label { color: var(--danger); }
.block[data-type="common_error"] { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.block[data-type="common_error"] .block__label { color: var(--danger); }
.block[data-type="definition"]   .block__label { color: var(--primary); }
.block[data-type="formula"]      { font-size: .97em; }
/* the accent rail in visuals.css carries the quote bar, so no border-left here */
.block[data-type="quote"]        { font-style: italic; color: var(--muted); --fam: var(--border-strong); }

/* ---------------------------------------------------------- line by line */

.lines { display: flex; flex-direction: column; gap: 10px; }
.lines-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.lines-no {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fam-lines-a);
    background: var(--fam-lines-b);
    border-radius: 7px;
    height: 24px;
    display: grid;
    place-items: center;
}
.lines-code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--code-bg);
    color: var(--code-text);
    padding: 8px 11px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 8px;
    white-space: pre;
}
.lines-exp { font-size: .95em; color: var(--text); }

/* ---------------------------------------------------------- dry run */

.block--table .table-scroll { margin: 0 -4px; }
.block[data-type="dry_run"] {
    --fam: var(--fam-steps-a);
    --fam-soft: var(--fam-steps-b);
    border-color: color-mix(in srgb, var(--fam) 25%, var(--border));
    background: color-mix(in srgb, var(--surface-2) 94%, var(--fam-soft));
}
.block[data-type="dry_run"] .block__label { color: var(--fam); }
.dryrun-sheet {
    display: grid;
    gap: 9px;
    min-width: 0;
}
.dryrun-guide {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--fam) 22%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--fam) 8%, transparent);
}
.dryrun-guide__pulse {
    position: relative;
    flex: none;
    width: 10px;
    height: 10px;
    border: 2px solid color-mix(in srgb, var(--fam) 35%, transparent);
    border-radius: 50%;
    background: var(--fam);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fam) 10%, transparent);
}
.dryrun-guide > span:nth-child(2) {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}
.dryrun-guide b {
    color: var(--text-strong);
    font-size: .8em;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.dryrun-guide small {
    color: var(--muted);
    font-size: .74em;
}
.dryrun-guide__count {
    margin-left: auto;
    flex: none;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--fam) 13%, transparent);
    color: var(--fam);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
}
.dryrun-scroll {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--fam) 20%, var(--border));
    border-radius: 11px;
    background: var(--surface-2);
    scrollbar-color: color-mix(in srgb, var(--fam) 35%, transparent) transparent;
}
.block--table .dryrun-scroll { margin: 0; }
.dryrun-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .91em;
}
.dryrun-table th,
.dryrun-table td {
    padding: 10px 12px;
    border-right: 1px solid color-mix(in srgb, var(--fam) 12%, var(--border));
    border-bottom: 1px solid color-mix(in srgb, var(--fam) 12%, var(--border));
    text-align: left;
    vertical-align: middle;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.dryrun-table tr > *:last-child { border-right: 0; }
.dryrun-table tbody tr:last-child > * { border-bottom: 0; }
.dryrun-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--surface-2) 84%, var(--fam-soft));
    color: var(--text-strong);
    font-size: .74em;
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dryrun-table thead th.is-condition { color: var(--warning); }
.dryrun-table thead th.is-action { color: var(--info); }
.dryrun-table thead th.is-result { color: var(--success); }
.dryrun-table tbody tr {
    --trace-row: color-mix(in srgb, var(--fam) 2.5%, transparent);
    background: var(--trace-row);
}
.dryrun-table tbody tr:nth-child(even) {
    --trace-row: color-mix(in srgb, var(--fam) 5%, transparent);
}
.dryrun-table tbody tr:hover {
    --trace-row: color-mix(in srgb, var(--fam) 9%, transparent);
}
.dryrun-step,
.dryrun-trace-head {
    position: sticky !important;
    left: 0;
    z-index: 3 !important;
    min-width: 112px;
    max-width: 230px;
    background: color-mix(in srgb, var(--surface-2) 90%, var(--fam-soft)) !important;
    box-shadow: 1px 0 0 color-mix(in srgb, var(--fam) 18%, var(--border));
}
.dryrun-step {
    z-index: 1 !important;
    color: var(--text-strong);
    font-weight: 700;
}
.dryrun-step__n {
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-right: 8px;
    border: 1px solid color-mix(in srgb, var(--fam) 32%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fam) 12%, transparent);
    color: var(--fam);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 850;
    vertical-align: middle;
}
.dryrun-step__label {
    display: inline;
    font-size: .86em;
    line-height: 1.35;
    vertical-align: middle;
}
.dryrun-table td.is-empty {
    text-align: center;
    background: color-mix(in srgb, var(--muted) 2%, transparent);
}
.dryrun-empty { color: var(--muted-2); opacity: .55; }
.dryrun-table td.is-set,
.dryrun-table td.is-changed {
    position: relative;
    color: var(--text-strong);
    font-weight: 650;
    background: color-mix(in srgb, var(--fam) 8%, var(--trace-row));
}
.dryrun-table td.is-changed::after,
.dryrun-table td.is-set::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fam);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fam) 11%, transparent);
}
.dryrun-table td.is-condition:not(.is-empty) {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 7%, var(--trace-row));
}
.dryrun-table td.is-action:not(.is-empty) {
    border-left: 2px solid color-mix(in srgb, var(--info) 38%, transparent);
}
.dryrun-table td.is-result:not(.is-empty) {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 7%, var(--trace-row));
}
.dryrun-table td.is-code {
    font-family: var(--font-mono);
    font-size: .9em;
}
.dryrun-table tr.is-final > * {
    border-top: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    background: color-mix(in srgb, var(--success) 7%, var(--surface-2));
}
.dryrun-table tr.is-final .dryrun-step__n {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}
.dryrun-expression {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--fam) 22%, var(--border));
    border-radius: 10px;
    overflow: hidden;
}
.dryrun-expression > span {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--fam) 12%, transparent);
    color: var(--fam);
    font-size: .73em;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.dryrun-expression code {
    min-width: 0;
    padding: 11px 13px;
    background: var(--code-bg);
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: .92em;
    overflow-x: auto;
}

/* Narrative dry runs: object creation, inherited members and memory sketches. */
.dryrun-walkthrough { gap: 12px; }
.drywalk-intro {
    padding: 10px 12px;
    border-left: 3px solid color-mix(in srgb, var(--fam) 55%, transparent);
    border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--fam) 6%, transparent);
    color: var(--text);
}
.drywalk {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.drywalk-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}
.drywalk-step__rail {
    position: relative;
    display: flex;
    justify-content: center;
}
.drywalk-step__rail::after {
    content: "";
    position: absolute;
    top: 31px;
    bottom: -1px;
    left: 50%;
    width: 1px;
    background: linear-gradient(var(--fam), color-mix(in srgb, var(--fam) 13%, transparent));
}
.drywalk-step:last-child .drywalk-step__rail::after { display: none; }
.drywalk-step__rail > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid color-mix(in srgb, var(--fam) 38%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 82%, var(--fam-soft));
    color: var(--fam);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 850;
    box-shadow: 0 0 0 4px var(--surface-2);
}
.drywalk-step__card {
    min-width: 0;
    margin-bottom: 11px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fam) 18%, var(--border));
    border-radius: 11px;
    background: var(--surface-2);
}
.drywalk-step__head {
    padding: 9px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--fam) 16%, var(--border));
    background: color-mix(in srgb, var(--fam) 8%, transparent);
    color: var(--text-strong);
    font-size: .84em;
    font-weight: 780;
}
.drywalk-step__body {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
}
.drywalk-code {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--fam) 15%, transparent);
    border-radius: 9px;
    background: var(--code-bg);
    color: var(--code-text);
    white-space: pre;
}
.drywalk-code code {
    font-family: var(--font-mono);
    font-size: .9em;
}
.drywalk-prose { color: var(--text); }
.drywalk-prose > :first-child { margin-top: 0; }
.drywalk-prose > :last-child { margin-bottom: 0; }
.drywalk-prose.is-result {
    position: relative;
    padding: 8px 10px 8px 30px;
    border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
    border-radius: 9px;
    background: color-mix(in srgb, var(--success) 7%, transparent);
    color: var(--text-strong);
}
.drywalk-prose.is-result::before {
    content: "✓";
    position: absolute;
    left: 10px;
    top: 8px;
    color: var(--success);
    font-weight: 850;
}
.drywalk-diagram .viz { margin: 0; }
.drywalk-diagram .preformatted,
.drywalk-diagram pre { margin: 0; }
.drywalk-empty { color: var(--muted); font-size: .88em; }
.block[data-type="comparison"] .card-table th:first-child { background: var(--surface-3); }

@media (max-width: 620px) {
    .dryrun-guide small { display: none; }
    .dryrun-guide__count { padding-inline: 7px; }
    .dryrun-table { min-width: 520px; font-size: .88em; }
    .dryrun-table th,
    .dryrun-table td { padding: 9px 10px; }
    .dryrun-step,
    .dryrun-trace-head { min-width: 92px; max-width: 145px; }
    .dryrun-step__n { width: 24px; height: 24px; margin-right: 5px; }
    .dryrun-step__label { font-size: .82em; }
    .dryrun-expression { grid-template-columns: 1fr; }
    .dryrun-expression > span { padding-block: 7px; }
    .drywalk-step { grid-template-columns: 31px minmax(0, 1fr); gap: 7px; }
    .drywalk-step__rail > span { width: 27px; height: 27px; border-radius: 8px; }
    .drywalk-step__rail::after { top: 27px; }
    .drywalk-step__head { padding: 8px 10px; }
    .drywalk-step__body { padding: 9px 10px; }
}

/* ---------------------------------------------------------- locked block */

.block--locked {
    position: relative;
    overflow: hidden;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    background: linear-gradient(180deg, var(--surface-2), var(--primary-soft));
}
.block--locked .block__body {
    color: var(--muted);
    filter: blur(.25px);
}
.locked-cta {
    margin-top: var(--sp-4);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.locked-cta .badge { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------- notes / footer */

.note-box { margin-top: var(--sp-3); }
.note-item {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: var(--fs-sm);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.reader-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
}
.reader-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.reader-nav a:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--text); }
.reader-nav a small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.reader-nav a b { font-size: var(--fs-sm); font-weight: 650; }
.reader-nav .next { text-align: right; justify-content: flex-end; }

/* ---------------------------------------------------------- settings sheet */

.sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 210;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
    transform: translateY(102%);
    transition: transform .26s var(--ease);
    max-width: 520px;
    margin: 0 auto;
}
.sheet.is-open { transform: none; }
.sheet-grip {
    width: 40px; height: 4px;
    border-radius: 4px;
    background: var(--border-strong);
    margin: 0 auto var(--sp-4);
}
.sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row > span { font-size: var(--fs-sm); font-weight: 650; display: inline-flex; align-items: center; gap: 9px; }

.fontsize-ctl { display: inline-flex; align-items: center; gap: 4px; }
.fontsize-ctl button {
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}
.fontsize-ctl button:hover { border-color: var(--primary); color: var(--primary); }
.fontsize-ctl output { min-width: 42px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

/* contents drawer on small screens */
.toc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 190;
    display: none;
}
.toc-drawer-backdrop.is-open { display: block; }