/* ============================================================
   Components — Textbook Layout
   ============================================================
   All reusable UI components for the textbook design.
   Every value references tokens.css variables.

   Reference: pages/learn/DESIGN-POC.html
   Component inventory: docs/11-component-inventory.md
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    font-family: var(--font-ui);
}

.navbar .logo {
    font-size: var(--text-navbar-logo);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.navbar .logo .mark {
    width: var(--mark-size);
    height: var(--mark-size);
    background: var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mark-font);
    font-weight: var(--font-bold);
    color: var(--text-on-accent);
}

.navbar .spacer {
    flex: 1;
}

.navbar input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-2xl);
    color: var(--text-muted);
    font-size: var(--text-navbar-input);
    font-family: var(--font-ui);
    outline: none;
    width: var(--navbar-input-width);
}

.navbar input:focus {
    border-color: var(--accent);
    color: var(--text);
}

.nav-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: var(--space-xs) var(--space-xl);
    border-radius: var(--radius-md);
    font-size: var(--text-navbar-btn);
    font-family: var(--font-ui);
    cursor: pointer;
    margin-left: var(--space-lg);
    transition: all var(--transition-fast);
}

.nav-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
}

/* ============================================================
   TOC SIDEBAR
   ============================================================ */

.toc {
    font-family: var(--font-ui);
}

.toc::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.toc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

.toc h3 {
    font-size: var(--text-toc-heading);
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: var(--space-2xl) var(--space-4xl) var(--space-xs);
}

.toc ul {
    list-style: none;
}

.toc li a {
    display: block;
    padding: var(--space-xs) var(--space-4xl);
    color: var(--text-dim);
    text-decoration: none;
    font-size: var(--text-toc);
    border-left: var(--border-accent-width-sm) solid transparent;
    transition: all var(--transition-fast);
}

.toc li a:hover {
    color: var(--text-muted);
}

.toc li a.active {
    color: var(--accent-light);
    border-left-color: var(--accent);
}

.toc li.sub a {
    padding-left: var(--space-7xl);
    font-size: var(--text-toc-sub);
}

.toc li.chapter a {
    color: var(--text-muted);
    font-weight: var(--font-medium);
    font-size: var(--text-toc-chapter);
}

.toc li.dimmed a {
    opacity: 0.25;
}

.toc li.chapter > ul.subs {
    display: none;
    list-style: none;
    padding-left: var(--space-md);
    margin: 0;
}

.toc li.chapter.active > ul.subs {
    display: block;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */

.breadcrumb {
    font-size: var(--text-breadcrumb);
    color: var(--text-dim);
    margin-bottom: var(--space-6xl);
    font-family: var(--font-ui);
}

.breadcrumb a {
    color: var(--text-dim);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb .sep {
    margin: 0 var(--space-sm);
}

.page-title {
    font-size: var(--text-page-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-tight);
}

.page-subtitle {
    font-size: var(--text-page-subtitle);
    color: var(--text-muted);
    margin-bottom: var(--space-xl);
    font-style: italic;
}

.page-quote {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-muted);
    margin: var(--space-sm) 0 var(--space-xl) 0;
    padding: 0;
    max-width: 60ch;
    border-left: 2px solid var(--border-active);
    padding-left: var(--space-md);
}

.page-quote p {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-xs) 0;
}

.page-quote cite {
    display: block;
    font-style: normal;
    font-size: var(--text-page-subtitle);
    color: var(--text-dim);
    text-align: right;
}

/* ============================================================
   SECTION TITLE
   ============================================================ */

.section-title {
    font-size: var(--text-section-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    margin: 0 0 var(--space-3xl);
    scroll-margin-top: calc(var(--navbar-height) + var(--space-4xl));
}

/* ============================================================
   BODY TEXT
   ============================================================ */

.body-text {
    margin-bottom: var(--space-3xl);
}

.body-text b {
    color: var(--text-bright);
}

.body-text em {
    color: var(--accent-light);
    font-style: italic;
}

/* ============================================================
   FIGURE (Animation Container)
   ============================================================ */

.figure {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: var(--space-5xl) 0;
}

/* --- Canvas Wrapper --- */
.fig-canvas-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.fig-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: var(--figure-height);
}

.fig-canvas-wrap canvas.hidden {
    display: none;
}

/* --- Info Panel (positioned LEFT of figure, outside canvas) --- */
.fig-info {
    position: absolute;
    right: calc(100% + var(--fig-info-offset));
    top: 0;
    width: var(--fig-info-width);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    font-family: var(--font-ui);
    font-size: var(--text-fig-info);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    z-index: var(--z-figure-info);
    transition: all var(--transition-normal);
}

.fig-info .fi-title {
    font-size: var(--text-fig-info-title);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--accent);
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.fig-info .fi-toggle {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: var(--text-fig-toggle);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-fast);
}

.fig-info .fi-toggle:hover {
    color: var(--text);
}

.fig-info p {
    margin-bottom: var(--space-xs);
    font-size: var(--text-fig-info);
}

.fig-info b {
    color: var(--text);
}

.fig-info.collapsed {
    width: auto;
    min-width: var(--fig-info-collapsed-min);
    padding: var(--space-md) var(--space-xl);
}

.fig-info.collapsed p {
    display: none;
}

.fig-info.collapsed .fi-title {
    margin-bottom: 0;
}

/* When viewport < 1500px the fig-info has no room to sit outside the figure
   on the left without overlapping the TOC. Move it to an overlay inside the
   canvas top-left corner (same position as in fullscreen mode). */
@media (max-width: 1500px) {
    .fig-info {
        right: auto;
        left: var(--space-xl);
        top: var(--space-xl);
        background: var(--bg-overlay);
        backdrop-filter: blur(var(--blur-overlay));
        border-color: var(--border-active);
    }
}

/* --- 2D/3D Toggle --- */
.dim-toggle {
    position: absolute;
    top: var(--space-xl);
    left: var(--space-xl);
    display: flex;
    z-index: var(--z-figure-controls);
}

.dim-btn {
    padding: var(--space-2xs) var(--space-xl);
    font-size: var(--text-dim-btn);
    font-weight: var(--font-semibold);
    font-family: var(--font-ui);
    background: var(--bg-dim-btn);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dim-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.dim-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: none;
}

.dim-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.dim-btn:hover:not(.active) {
    color: var(--text);
    background: var(--bg-dim-btn-hover);
}

/* --- Small Toggle Buttons --- */
.btn-sm {
    padding: var(--space-2xs) var(--space-xl);
    font-size: var(--text-dim-btn);
    font-family: var(--font-ui);
    background: var(--bg-dim-btn);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-sm.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.btn-sm:hover:not(.active) {
    color: var(--text);
    background: var(--bg-dim-btn-hover);
}

/* --- Expand Button --- */
.expand-btn {
    position: absolute;
    top: var(--space-xl);
    right: var(--space-xl);
    background: var(--bg-dim-btn);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: var(--text-expand-btn);
    width: var(--fig-expand-size);
    height: var(--fig-expand-size);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-figure-controls);
    transition: all var(--transition-fast);
}

.expand-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Close Button (only in fullscreen) --- */
.close-btn {
    display: none;
}

/* --- Controls Below Canvas --- */
.fig-controls {
    display: flex;
    align-items: center;
    gap: var(--fig-controls-gap);
    padding: var(--fig-controls-padding-v) var(--fig-controls-padding-h);
    border-top: 1px solid var(--border);
    font-family: var(--font-ui);
    font-size: var(--text-fig-controls);
}

.fig-controls label {
    color: var(--text-dim);
    white-space: nowrap;
    min-width: var(--fig-controls-label-min);
}

.fig-controls input[type="range"] {
    flex: 1;
    max-width: var(--slider-max-width);
    accent-color: var(--slider-accent);
    height: var(--slider-height);
}

.fig-controls .val {
    color: var(--accent);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    font-size: var(--text-control-value);
    min-width: var(--fig-controls-value-min);
}

.fig-controls .sep {
    width: 1px;
    height: var(--fig-controls-sep-height);
    background: var(--border);
}

/* --- Figure Caption --- */
.fig-caption {
    padding: var(--space-md) var(--fig-controls-padding-h);
    font-size: var(--text-fig-caption);
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
}

/* ============================================================
   FIGURE READOUT (dynamic physics values strip)
   ============================================================ */

.fig-readout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fig-controls-gap);
    padding: var(--space-md) var(--fig-controls-padding-h);
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    font-family: var(--font-ui);
    font-size: var(--text-fig-controls);
}

.fig-readout .fig-rv {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.fig-readout .fig-rl {
    font-family: var(--font-ui);
    font-size: var(--text-control-value);
    color: var(--text-dim);
}

.fig-readout .fig-rval {
    font-family: var(--font-mono);
    font-size: var(--text-fig-controls);
    font-weight: var(--font-semibold);
    /* color set per-item via style attribute */
}

.fig-readout .sep {
    width: 1px;
    height: var(--fig-controls-sep-height);
    background: var(--border);
}

/* ============================================================
   FULLSCREEN MODE
   ============================================================ */

.figure.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fullscreen);
    margin: 0;
    border-radius: 0;
    border: none;
    background: var(--bg-fullscreen);
    display: flex;
    flex-direction: column;
}

.figure.fullscreen .fig-canvas-wrap {
    flex: 1;
}

.figure.fullscreen .fig-canvas-wrap canvas {
    width: 100%;
    height: 100%;
}

.figure.fullscreen .fig-info {
    right: auto;
    left: var(--space-5xl);
    top: var(--fig-info-fullscreen-top);
    width: var(--fig-info-fullscreen-width);
    background: var(--bg-overlay);
    padding: var(--space-3xl) var(--space-4xl);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(var(--blur-overlay));
    border-color: var(--border-active);
}

.figure.fullscreen .dim-toggle {
    left: var(--fig-dim-fullscreen-left);
    top: var(--space-5xl);
}

.figure.fullscreen .expand-btn {
    display: none;
}

.figure.fullscreen .close-btn {
    display: flex;
    position: absolute;
    top: var(--space-5xl);
    left: var(--space-5xl);
    z-index: var(--z-figure-close);
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-overlay);
    border: 1px solid var(--border-active);
    color: var(--text-muted);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--radius-lg);
    font-size: var(--text-close-btn);
    font-family: var(--font-ui);
    cursor: pointer;
    backdrop-filter: blur(var(--blur-overlay));
    transition: all var(--transition-fast);
}

.figure.fullscreen .close-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
}

.figure.fullscreen .fig-controls {
    position: absolute;
    bottom: var(--space-6xl);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-6xl);
    backdrop-filter: blur(var(--blur-overlay));
    z-index: var(--z-figure-controls);
    border-top: none;
}

.figure.fullscreen .fig-readout {
    position: absolute;
    top: var(--space-xl);
    right: var(--space-xl);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md);
    background: var(--bg-overlay);
    backdrop-filter: blur(var(--blur-overlay));
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-4xl);
    font-size: var(--text-toc-chapter);
    border-top: none;
}

.figure.fullscreen .fig-readout .fig-rl {
    font-size: var(--text-breadcrumb);
}

.figure.fullscreen .fig-readout .fig-rval {
    font-size: var(--text-page-subtitle);
}

.figure.fullscreen .fig-readout .sep {
    width: 100%;
    height: 1px;
}

.figure.fullscreen .fig-caption {
    display: none;
}

/* ============================================================
   FORMULA BLOCK
   ============================================================ */

.formula-block {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: var(--border-accent-width) solid var(--color-formula);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-3xl) var(--space-6xl);
    margin: var(--space-5xl) 0;
    text-align: center;
    font-family: var(--font-math);
}

.formula-label {
    font-size: var(--text-formula-label);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--space-sm);
    font-family: var(--font-ui);
}

.formula-expr {
    font-size: var(--text-formula-expr);
    color: var(--color-formula);
    font-weight: var(--font-bold);
}

.formula-expr .blue {
    color: var(--accent-light);
}

.formula-note {
    font-size: var(--text-formula-note);
    color: var(--text-muted);
    margin-top: var(--space-sm);
    font-family: var(--font-body);
}

/* ============================================================
   ASIDE: TIP (Pruefungstipp)
   ============================================================ */

aside.tip {
    background: var(--color-tip-bg);
    border-left: var(--border-accent-width-sm) solid var(--color-tip);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-2xl) var(--space-4xl);
    margin: var(--space-5xl) 0;
    font-size: var(--text-aside);
}

aside.tip h4 {
    font-size: var(--text-aside-heading);
    font-weight: var(--font-semibold);
    color: var(--color-tip);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-xs);
    font-family: var(--font-ui);
}

aside.tip p {
    margin-bottom: var(--space-xs);
    line-height: var(--leading-relaxed);
}

aside.tip b {
    color: var(--text-bright);
}

/* ============================================================
   ASIDE: INSIGHT (Einsicht / Merke)
   ============================================================ */

aside.insight {
    background: var(--color-insight-bg);
    border-left: var(--border-accent-width-sm) solid var(--color-insight);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-2xl) var(--space-4xl);
    margin: var(--space-5xl) 0;
    font-size: var(--text-aside);
    color: var(--color-insight);
    font-style: italic;
}

/* ============================================================
   MARGIN NOTES
   ============================================================ */

.margin-note {
    font-size: var(--text-margin-note);
    color: var(--text-dim);
    line-height: var(--leading-normal);
    font-family: var(--font-ui);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--border);
    margin-bottom: var(--space-2xl);
}

.margin-label {
    font-size: var(--text-margin-label);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-2xs);
    display: block;
}

.margin-label.def      { color: var(--color-definition); }
.margin-label.formula   { color: var(--color-formula); }
.margin-label.ref       { color: var(--color-reference); }
.margin-label.key       { color: var(--color-key); }

.margin-formula {
    font-family: var(--font-math);
    font-size: var(--text-margin-formula);
    color: var(--color-formula);
    font-weight: var(--font-semibold);
    margin: var(--space-2xs) 0;
}

.margin-note a {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--text-margin-link);
}

.margin-note a:hover {
    text-decoration: underline;
}

.margin-note b {
    color: var(--text-muted);
}

/* ============================================================
   PAGE NAVIGATION
   ============================================================ */

.page-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-9xl);
    padding-top: var(--space-3xl);
    border-top: 1px solid var(--border);
}

.page-nav a {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--text-page-nav);
    font-family: var(--font-ui);
}

.page-nav a:hover {
    opacity: 0.7;
}

/* ============================================================
   SLIDER ROW (from inventory: 14 pages)
   ============================================================ */

.slider-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xs) 0;
    margin-top: var(--space-sm);
    font-size: var(--text-slider-label);
    font-family: var(--font-ui);
    color: var(--text);
}

.slider-row label {
    min-width: var(--fig-controls-label-min);
    color: var(--text-dim);
    white-space: nowrap;
}

.slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--slider-accent);
    height: var(--slider-height);
}

.slider-row .val {
    min-width: var(--fig-controls-value-min);
    text-align: right;
    color: var(--accent);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    font-size: var(--text-control-value);
}

/* ============================================================
   TOGGLE ROW (from inventory: 16 pages)
   ============================================================ */

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xs) 0;
    font-size: var(--text-slider-label);
    font-family: var(--font-ui);
}

.toggle-row input[type="checkbox"] {
    accent-color: var(--checkbox-accent);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    cursor: pointer;
}

.toggle-row label {
    cursor: pointer;
    color: var(--text);
}

/* ============================================================
   CHECK ROW (exercise sections)
   ============================================================ */

.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
    font-size: var(--text-slider-label);
    font-family: var(--font-ui);
    color: var(--text);
    cursor: pointer;
}

.check-row input[type="checkbox"] {
    accent-color: var(--color-insight);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    cursor: pointer;
}

/* ============================================================
   RADIO ROW (from inventory: 6 pages)
   ============================================================ */

.radio-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-2xs) 0;
    font-size: var(--text-slider-label);
    font-family: var(--font-ui);
    color: var(--text);
    cursor: pointer;
}

.radio-row input[type="radio"] {
    accent-color: var(--accent);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    cursor: pointer;
}

/* ============================================================
   SMALL SELECT (from inventory: 16 pages)
   ============================================================ */

select.small-select {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-lg);
    color: var(--text);
    font-size: var(--text-select);
    font-family: var(--font-ui);
    cursor: pointer;
    outline: none;
    margin: var(--space-xs) 0;
}

select.small-select:focus {
    border-color: var(--accent);
}

/* ============================================================
   SOLUTION BOX (from inventory: 6 pages)
   ============================================================ */

.solution-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: var(--border-accent-width) solid var(--color-insight);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-xl) var(--space-2xl);
    margin: var(--space-lg) 0;
    font-size: var(--text-slider-label);
    font-family: var(--font-ui);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

.solution-box .step-label {
    color: var(--color-insight);
    font-size: var(--text-margin-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-xs);
}

.solution-box .step-result {
    color: var(--accent);
    font-weight: var(--font-bold);
}

/* ============================================================
   OBSERVE BOX (from inventory: 10 pages)
   ============================================================ */

.observe-mini {
    font-size: var(--text-observe);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-left: var(--border-accent-width-sm) solid var(--border);
    background: var(--color-tip-bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--font-ui);
}

/* ============================================================
   VERIFICATION BOX (from inventory: 8 pages)
   ============================================================ */

.verification-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-lg) 0;
    font-size: var(--text-verification);
    font-family: var(--font-ui);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.verification-box .v-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2xs) 0;
}

.verification-box .v-label {
    color: var(--text-dim);
}

.verification-box .v-value {
    color: var(--accent);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
}

.verification-box .v-match {
    color: var(--color-insight);
    font-weight: var(--font-bold);
}

/* ============================================================
   COLOR LEGEND (from inventory: 14 pages)
   ============================================================ */

.color-legend {
    font-family: var(--font-ui);
    font-size: var(--text-margin-label);
    color: var(--text-dim);
}

.color-legend .legend-block {
    margin-bottom: var(--space-lg);
}

.color-legend .legend-title {
    font-size: var(--text-margin-label);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-dim);
    margin-bottom: var(--space-2xs);
}

.color-legend .legend-bar {
    width: 100%;
    height: var(--space-lg);
    border-radius: var(--radius-sm);
}

.color-legend .legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-margin-label);
    color: var(--text-dim);
    margin-top: var(--space-2xs);
}

/* ============================================================
   BUTTON ROW
   ============================================================ */

.btn-row {
    display: flex;
    gap: var(--space-sm);
}

/* ============================================================
   UTILITY: HIDDEN
   ============================================================ */

.hidden {
    display: none;
}

/* ============================================================
   FRACTION (inline math notation)
   ============================================================ */

.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 var(--space-2xs);
}

.frac .num {
    border-bottom: 1px solid currentColor;
    padding: 0 var(--space-2xs) var(--frac-padding);
    line-height: var(--leading-tight);
}

.frac .den {
    padding: var(--frac-padding) var(--space-2xs) 0;
    line-height: var(--leading-tight);
}

/* ============================================================
   VECTOR ARROW NOTATION
   ============================================================ */

.vec {
    position: relative;
    display: inline-block;
    padding-right: var(--space-2xs);
}

.vec::after {
    content: '\2192';
    position: absolute;
    top: -0.55em;
    left: 0;
    right: 0;
    font-size: 0.7em;
    text-align: center;
}

/* ============================================================
   LANDING PAGE
   ============================================================
   Classes used only by index.html (the project landing page).
   Kept scoped with a .landing-* / .plotter-* / .featured-* /
   .lernhub-* prefix so they do not pollute the textbook
   component namespace above.

   Reuses .navbar, .nav-btn, .logo, .mark from the textbook
   components — only the hero, section, card, and footer
   pieces are landing-specific.
   ============================================================ */

/* Anchor variant of .nav-btn — used for scroll-spy links inside
   the navbar. The existing .nav-btn rule is unchanged; this is
   a more specific selector that only removes the anchor's default
   underline so <a class="nav-btn"> matches <button class="nav-btn">. */
.navbar a.nav-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* --- Header (contains the fixed navbar + hero block) --- */
.landing-header {
    padding: 0 var(--content-padding);
}

/* --- Hero --- */
.landing-hero {
    max-width: calc(var(--content-width) + var(--margin-gap) + var(--margin-width));
    margin: 0 auto;
    padding: calc(var(--navbar-height) + var(--space-9xl)) 0 var(--space-8xl);
    text-align: center;
}

.landing-logo {
    display: block;
    width: 100%;
    max-width: var(--content-width);
    aspect-ratio: 32 / 9;
    margin: 0 auto var(--space-4xl);
}

.landing-tagline {
    font-size: var(--text-page-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    max-width: var(--content-width);
    margin: 0 auto var(--space-4xl);
}

.landing-description {
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: var(--content-width);
    margin: 0 auto var(--space-7xl);
}

.landing-cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4xl);
}

.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-6xl);
    font-family: var(--font-ui);
    font-size: var(--text-aside);
    font-weight: var(--font-semibold);
    color: var(--text-bright);
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.landing-cta:hover {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent-light);
}

/* --- Main wrapper --- */
.landing-main {
    padding: 0 var(--content-padding);
}

/* --- Section --- */
.landing-section {
    max-width: calc(var(--content-width) + var(--margin-gap) + var(--margin-width));
    margin: 0 auto;
    padding: var(--space-9xl) 0;
    border-top: 1px solid var(--border);
}

.landing-section-title {
    font-size: var(--text-page-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-xs);
    scroll-margin-top: calc(var(--navbar-height) + var(--space-4xl));
}

.landing-section-subtitle {
    font-size: var(--text-page-subtitle);
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--space-8xl);
}

/* --- Plotter grid --- */
.plotter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6xl);
}

.plotter-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-7xl);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition-normal);
}

.plotter-card:hover {
    border-color: var(--accent);
    transform: translateY(calc(-1 * var(--space-2xs)));
}

.plotter-card-tag {
    font-family: var(--font-ui);
    font-size: var(--text-formula-label);
    font-weight: var(--font-semibold);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--space-2xl);
}

.plotter-card-title {
    font-size: var(--text-section-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-lg);
}

.plotter-card-description {
    font-size: var(--text-aside);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4xl);
    flex: 1;
}

.plotter-card-arrow {
    font-family: var(--font-ui);
    font-size: var(--text-aside);
    font-weight: var(--font-semibold);
    color: var(--accent);
    transition: color var(--transition-fast);
}

.plotter-card:hover .plotter-card-arrow {
    color: var(--accent-light);
}

/* --- Lernhub --- */
.lernhub-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-6xl);
}

.lernhub-intro {
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: var(--content-width);
}

/* --- About --- */
.about-block {
    max-width: var(--content-width);
    font-size: var(--text-body);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

.about-block p {
    margin-bottom: var(--space-4xl);
}

.about-block p:last-child {
    margin-bottom: 0;
}

.about-block a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.about-block a:hover {
    color: var(--accent-light);
    text-decoration: underline;
}

/* --- Footer --- */
/* Also used by learn hub (pages/learn/index.html) */
.landing-footer {
    padding: var(--space-7xl) var(--content-padding) var(--space-8xl);
    border-top: 1px solid var(--border);
    font-family: var(--font-ui);
    font-size: var(--text-fig-caption);
    color: var(--text-dim);
}

.landing-footer-inner {
    max-width: calc(var(--content-width) + var(--margin-gap) + var(--margin-width));
    margin: 0 auto;
    text-align: center;
}

.landing-footer .footer-line {
    margin-bottom: var(--space-xs);
}

.landing-footer .footer-line:last-child {
    margin-bottom: 0;
}

.landing-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.landing-footer a:hover {
    color: var(--text-muted);
    text-decoration: underline;
}

/* --- Landing-page responsive --- */
@media (max-width: 860px) {
    .plotter-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        padding: calc(var(--navbar-height) + var(--space-8xl)) 0 var(--space-7xl);
    }

    .landing-section {
        padding: var(--space-8xl) 0;
    }
}

/* ============================================================
   LEARN HUB
   ============================================================
   Classes used only by pages/learn/index.html (the learn hub
   index page). Hub cards are dense horizontal rows — the hub
   is a navigation surface, not a marketing surface.

   Reuses .navbar, .nav-btn, .logo, .mark from the textbook
   navbar set; .page-header, .page-title, .page-subtitle from
   the textbook page-header set; and .landing-footer /
   .landing-footer-inner from the landing page footer set.
   ============================================================ */

/* --- Header: contains the fixed navbar + intro page-header --- */
.hub-header {
    padding: 0 var(--content-padding);
}

/* --- Intro wrapper: centers .page-header and pushes it below
       the fixed navbar --- */
.hub-intro {
    max-width: calc(var(--content-width) + var(--margin-gap) + var(--margin-width));
    margin: 0 auto;
    padding: calc(var(--navbar-height) + var(--space-9xl)) 0 var(--space-8xl);
}

/* --- Main wrapper --- */
.hub-main {
    padding: 0 var(--content-padding);
}

/* --- Category section --- */
.hub-category {
    max-width: calc(var(--content-width) + var(--margin-gap) + var(--margin-width));
    margin: 0 auto;
    padding: var(--space-9xl) 0;
    border-top: 1px solid var(--border);
}

.hub-category-title {
    font-size: var(--text-section-title);
    font-weight: var(--font-bold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6xl);
    scroll-margin-top: calc(var(--navbar-height) + var(--space-4xl));
}

/* --- Grid: cards stack vertically --- */
.hub-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* --- Card: horizontal flex row (title+description | dim buttons) --- */
.hub-card {
    display: flex;
    align-items: center;
    gap: var(--space-4xl);
    padding: var(--space-4xl) var(--space-6xl);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.hub-card:not(.hub-card-disabled):hover {
    border-color: var(--border-active);
}

/* --- Card body (left: title + description) --- */
.hub-card-body {
    flex: 1;
    min-width: 0;
}

.hub-card-title {
    font-size: var(--text-body);
    font-weight: var(--font-semibold);
    color: var(--text-bright);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2xs);
}

.hub-card-description {
    font-family: var(--font-ui);
    font-size: var(--text-margin-note);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* --- Card dims (right: button group) --- */
.hub-card-dims {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

.hub-card-dim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-2xl);
    font-family: var(--font-ui);
    font-size: var(--text-navbar-btn);
    font-weight: var(--font-semibold);
    color: var(--text-on-accent);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.hub-card-dim:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

.hub-card-dim.disabled {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Disabled card modifier: dims title + description colors --- */
.hub-card-disabled .hub-card-title {
    color: var(--text-muted);
}

.hub-card-disabled .hub-card-description {
    color: var(--text-dim);
}

/* --- Learn-hub responsive: card collapses from horizontal row
       to vertical stack below 860px --- */
@media (max-width: 860px) {
    .hub-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2xl);
    }

    .hub-card-dims {
        align-self: stretch;
    }

    .hub-intro {
        padding: calc(var(--navbar-height) + var(--space-8xl)) 0 var(--space-7xl);
    }

    .hub-category {
        padding: var(--space-8xl) 0;
    }
}