/* Text mode (shared/text-mode.js, blocks baked in by tools/build.py).
   The standard view is unchanged: every .tm-only block carries the hidden attribute. */

body.text-mode .tm-only[hidden] { display: block !important; }

/* A sighted student who lands in the accessible view by mistake has to be able to tell.
   A screen-reader user never sees this, so the tint costs them nothing. Pale yellow is
   the one hue no module uses (their tints are blue, peach, green, violet, pink, cyan), so
   it cannot read as a module colour; dark body text on it stays far above WCAG AA.
   html too, so the tint fills a short page to the bottom of the window. The sidebar and the
   module strip paint the page grey themselves, so they are tinted with it; left grey, the
   sidebar is a quarter of a desktop screen still saying "Notes". Cards keep their white. */
html:has(body.text-mode), body.text-mode,
body.text-mode .sidebar, body.text-mode .area-spine { background: #FFF5D1 !important; }

/* The pictures, step-through controls and embedded PDF that the text stands in for.
   Hand-authored pages (projects, About) have no .v5-article, so tools/build_accessible_pages.py
   marks each image it describes and the rule below hides exactly those. */
body.text-mode img[data-tm-described],
body.text-mode .v5-article img[src*="svgs/"],
body.text-mode .v5-article .svg-build,
body.text-mode .v5-article iframe[src*="cs145_Equations.pdf"] { display: none !important; }

/* Page stylesheets uppercase some headings, and Chrome hands the uppercased text to
   screen readers and Braille displays; keep the text blocks in normal case. */
body.text-mode .tm-only h1, body.text-mode .tm-only h2, body.text-mode .tm-only h3,
body.text-mode .tm-only h4, body.text-mode .tm-only h5, body.text-mode .tm-only h6,
body.text-mode .tm-only .tm-label { text-transform: none !important; letter-spacing: normal !important; }

.tm-figure {
    margin: .75rem 0 1.25rem;
    padding: .65rem .95rem;
    border-left: 3px solid #94A3B8;
    background: #F8FAFC;
    line-height: 1.55;
}
.tm-figure .tm-label { display: block; font-weight: 600; margin-bottom: .25rem; }
/* A figure's data, when svgs/<fig>.data.html exists (tools/check_figure_data.py). */
.tm-figure-data { margin: 0 0 1.25rem; padding: 0 .95rem .4rem; border-left: 3px solid #94A3B8; background: #F8FAFC; }
.tm-only table.tm-data { display: table; border-collapse: collapse; margin: .6rem 0; font-size: .95rem; }
.tm-only table.tm-data caption { caption-side: top; text-align: left; font-weight: 600; padding: .2rem 0; }
.tm-only table.tm-data th, .tm-only table.tm-data td { border: 1px solid #CBD5E1; padding: .2rem .55rem; text-align: left; }
.tm-equations { margin: 1.5rem 0; }

/* The visible Notes / Accessible choice on hand-authored pages that have figures
   (tools/build_accessible_pages.py). Lesson pages have their own .mode-toggle; this copies
   its look (the v5 pill, top right) but is scoped to .tm-modes so neither styles the other. */
.tm-modes {
    position: fixed; top: 60px; right: 1rem; z-index: 998;
    display: flex; gap: 2px; padding: 3px;
    background: var(--v5-surface, #FFFFFF);
    border: 1px solid var(--v5-hairline, #E5E7EB);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(14, 14, 16, 0.05);
}
.tm-modes .mode-btn {
    font: 500 0.65rem/1.2 var(--v5-mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--v5-muted, #52525B);
    padding: 5px 12px; border: 0; border-radius: 999px;
    background: transparent; cursor: pointer;
}
.tm-modes .mode-btn:hover { color: var(--v5-ink, #0E0E10); }
.tm-modes .mode-btn.active { background: var(--v5-ink, #0E0E10); color: #FFFFFF; }
.tm-modes .mode-btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
@media print { .tm-modes { display: none; } }

/* First thing a screen reader reaches; visible only while it has keyboard focus. */
.tm-skip {
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.tm-skip:focus {
    position: fixed; left: 1rem; top: 1rem; z-index: 100000;
    width: auto; height: auto; overflow: visible;
    padding: .6rem 1rem; border-radius: 6px;
    background: #111827; color: #fff;
    font: 600 14px/1.3 system-ui, -apple-system, sans-serif;
}

.tm-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}