/* figures.css — styles for the interactive figures registered in lib/solutionFigures.js.
 *
 * Linked only on solution pages that register a figure, not site-wide: this is ~7 KB that
 * exactly one problem needs today, and the solution page is the most-visited page type on
 * the site. (css/design-system.css is the home for shared tokens; this file consumes them
 * and adds nothing global.)
 *
 * House rules for anything in here — the figure is meant to read as a journal figure, not
 * as a web widget: no gradients, no glows, no drop shadows, no rounded cards, flat ink on
 * white paper, hairline rules. Every colour below is also separated in luminance, so the
 * figure survives greyscale printing and red-green colour blindness.
 */

.ss-fig {
    /* Figure palette. Six values, all drawn from the site's design tokens. */
    --fig-ink: #1a1a2e;          /* structure: axes, tube wireframe, rules            */
    --fig-muted: #6c757d;        /* ticks, minor labels, hints                        */
    --fig-hot: #e5194b;          /* the +V electrode and high-field annotations       */
    --fig-a: #00857a;            /* panel c: small-grain force curve                  */
    --fig-b: #b8560f;            /* panel c: large-grain force curve                  */
    --fig-field: #8b5cf6;        /* the E reference curve in panel c                  */
    --fig-deposit: #2d2d2d;      /* what has already been collected on the wire       */
    --fig-rule: #dee2e6;
    --fig-paper: #ffffff;

    /* The same face and size as the statement and the solution around it (SS Text at the prose
       size), so the figure reads as part of the page rather than as a widget dropped into it.
       The prose's paragraph indent and hyphenation must not reach it. */
    font-family: var(--ss-font-text);
    font-size: var(--ss-text-prose);
    line-height: var(--ss-lh-ui);
    text-align: left;
    text-indent: 0;
    hyphens: none;
    -webkit-hyphens: none;
    color: var(--fig-ink);
    background: var(--fig-paper);

    display: grid;
    gap: 18px 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "panel-a"
        "controls"
        "panel-b"
        "panel-c"
        "caption";

    max-width: 1100px;
    margin: 1.6rem auto;
    padding: 18px 0 16px;
    border-top: 1px solid var(--fig-rule);
    border-bottom: 1px solid var(--fig-rule);
}

/* ---------------------------------------------------------------- panels */

.ss-fig-panel {
    position: relative;
    min-width: 0;
    background: var(--fig-paper);
}

.ss-fig-panel--a { grid-area: panel-a; aspect-ratio: 4 / 5; }
.ss-fig-panel--b { grid-area: panel-b; aspect-ratio: 4 / 3; }
.ss-fig-panel--c { grid-area: panel-c; aspect-ratio: 4 / 3; }

.ss-fig-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

.ss-fig-panel--a .ss-fig-canvas { cursor: grab; }
.ss-fig-panel--a.is-dragging .ss-fig-canvas { cursor: grabbing; }

/* Panel b's grain is draggable; the script sets `grab` when the pointer is over it. */
.ss-fig-panel--b .ss-fig-canvas.is-grabbing { cursor: grabbing; }

/* Panel c's title is real markup, so the maths in it is the page's own MathJax. */
.ss-fig-ptitle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-left: 2.2em;
    font-size: var(--ss-fs-14);
    line-height: var(--ss-lh-snug);
    color: var(--fig-muted);
    pointer-events: none;
}

.ss-fig-canvas:focus-visible {
    outline: 2px solid var(--fig-a);
    outline-offset: 2px;
}

/* Labels that ride on the 3-D scene. Real DOM, so the maths in them is the same
   server-rendered MathJax as the rest of the page rather than canvas text. */
.ss-fig-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0 3px;
    background: rgba(255, 255, 255, 0.86);   /* knockout, so a label stays readable over the wireframe */
    font-size: var(--ss-text-prose-small);
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform;
}

.ss-fig-label--hot { color: var(--fig-hot); }
.ss-fig-label--muted { color: var(--fig-muted); }
.ss-fig-label[hidden] { display: none; }

/* The poster carries the figure before hydration and forever if JS never runs. */
.ss-fig-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ss-fig.is-live .ss-fig-poster { display: none; }

/* Bottom-right: the panel letter owns the top-left, the legend the bottom-left, and
   the +V label the top-centre. */
.ss-fig-hint {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    font-family: var(--ss-font-ui);
    font-size: var(--ss-text-meta);
    color: var(--fig-muted);
    pointer-events: none;
    transition: opacity 0.25s linear;
}

.ss-fig-hint.is-gone { opacity: 0; }

/* ------------------------------------------------------------- controls */

.ss-fig-controls {
    grid-area: controls;
    display: grid;
    gap: 10px 20px;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}

.ss-fig-control {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 2px 10px;
}

.ss-fig-control > label {
    font-size: var(--ss-text-prose-small);
    font-weight: var(--ss-fw-regular);
    color: var(--fig-ink);
    margin: 0;
}

.ss-fig-control .ss-fig-value {
    font-size: var(--ss-text-prose-small);
    color: var(--fig-muted);
    font-variant-numeric: tabular-nums;
    justify-self: start;
}

.ss-fig-control input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 300px;
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.ss-fig-control input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--fig-rule);
}

.ss-fig-control input[type="range"]::-moz-range-track {
    height: 2px;
    background: var(--fig-rule);
}

.ss-fig-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    margin-top: -7.5px;
    border: none;
    border-radius: 50%;
    background: #000000;
}

.ss-fig-control input[type="range"]::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border: none;
    border-radius: 50%;
    background: #000000;
}

.ss-fig-control input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--fig-a);
    outline-offset: 2px;
}

.ss-fig-control input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--fig-a);
    outline-offset: 2px;
}

.ss-fig-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ss-fig-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ss-control-sm);
    padding: 0 var(--ss-space-3);
    border: 1px solid var(--fig-rule);
    border-radius: var(--ss-radius);
    background: var(--fig-paper);
    color: var(--fig-deposit);
    font-family: var(--ss-font-ui);
    font-size: var(--ss-text-ui);
    font-weight: var(--ss-fw-strong);
    cursor: pointer;
}

.ss-fig-btn:hover { background: var(--ss-surface-alt); }

.ss-fig-btn:focus-visible {
    outline: 2px solid var(--fig-a);
    outline-offset: 2px;
}

.ss-fig-btn[aria-pressed="true"] {
    background: var(--fig-ink);
    border-color: var(--fig-ink);
    color: var(--fig-paper);
}

.ss-fig-btn svg { display: block; }

/* -------------------------------------------------- caption and credit */

.ss-fig-caption {
    grid-area: caption;
    margin: 2px 0 0;
    font-size: var(--ss-text-prose-small);
    line-height: var(--ss-lh-snug);
    color: var(--fig-deposit);
    text-align: left;
    text-indent: 0;
}

/* The caption is set in one weight throughout; <b> in the markup marks the lead-in
   and the panel letters structurally, and is left to the colour to carry. */
.ss-fig-caption b { color: var(--fig-ink); font-weight: 400; }

/* Panel letters inside the caption, matching the ones drawn on the panels. */
.ss-fig-caption .pl {
    font-weight: 400;
    color: var(--fig-ink);
}

/* With JS off — or before the script has run — the figure is the poster, the caption and
   the credit: a complete static figure rather than two blank boxes and dead controls. */
.ss-fig:not(.is-live) .ss-fig-panel--b,
.ss-fig:not(.is-live) .ss-fig-panel--c,
.ss-fig:not(.is-live) .ss-fig-controls,
.ss-fig:not(.is-live) .ss-fig-hint {
    display: none;
}

/* …and the half of the caption that describes those panels goes with them. */
.ss-fig:not(.is-live) .ss-fig-live-only {
    display: none;
}

.ss-fig:not(.is-live) .ss-fig-panel--a {
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 520px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 900px) {
    .ss-fig {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        grid-template-areas:
            "panel-a panel-b"
            "panel-a panel-c"
            "controls controls"
            "caption caption";
    }

    /* Panel a spans both right-hand rows instead of setting its own ratio, so the
       three panels always share one baseline and one total height. */
    .ss-fig-panel--a { aspect-ratio: auto; height: 100%; }

    /* Two rows: the three sliders share the full width, the buttons and the live ratio
       sit beneath them. One row could not hold "Проницаемость ε₂" without wrapping it. */
    .ss-fig-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 26px;
    }

    .ss-fig-buttons {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 899px) {
    /* One slider per row: at this width a label and its value cannot share a half-column
       without wrapping into each other. */
    .ss-fig-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Four buttons have to make one row on a 360px screen. */
    .ss-fig-btn {
        padding: 0 var(--ss-space-2);
        font-size: var(--ss-text-meta);
    }

    .ss-fig-buttons { gap: 6px; }

    .ss-fig-buttons {
        grid-column: 1 / -1;
    }
}

/* Someone who asked not to be moved gets the figure paused on arrival; the play
   button still works, so the animation stays available, just never uninvited. */
@media (prefers-reduced-motion: reduce) {
    .ss-fig-hint { transition: none; }
}

/* The solution page styles <figure> and <figcaption> itself, in an inline <style> that
   the browser sees after this file (solution_post.ejs:257-264). Those rules are one
   type-selector more specific than a bare class, so the figure's own box has to say it
   twice to keep its margins. Scoped, not !important. */
.content-body .ss-fig {
    margin: 1.6rem auto;
    padding: 18px 0 16px;
}

.content-body .ss-fig-caption {
    margin: 2px 0 0;
    text-align: left;
}

/* The figure follows the prose size down on phones through the --ss-text-prose token. */
@media (max-width: 768px) {
    .ss-fig {
        gap: 14px 16px;
    }
}

/* ------------------------------------------------ wide figures (7.2.14) */

/* Two full-width figures one above the other with the controls they share between them
   (partials/figures/mesh-lens.ejs). Each figure is one wide panel and its caption. */
.ss-fig-group {
    margin: 1.6rem 0;
    border-top: 1px solid var(--ss-rule);
    border-bottom: 1px solid var(--ss-rule);
}

.ss-fig.ss-fig--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "panel"
        "caption";
    max-width: none;
    margin: 0;
    padding: 16px 0 12px;
    border: 0;
}

.content-body .ss-fig.ss-fig--wide {
    margin: 0;
    padding: 16px 0 12px;
}

.ss-fig-panel--wide {
    grid-area: panel;
    aspect-ratio: 3 / 2;
}

.ss-fig-panel--wide .ss-fig-canvas { cursor: grab; }

/* Рис. 2 of 7.2.14 is drawn on a dark stage (the dark end of the colour map), so its hint is light. */
.ss-fig-panel--dark .ss-fig-hint { color: #ece8f6; padding: 0 6px 4px 0; }
.ss-fig-panel--wide.is-dragging .ss-fig-canvas { cursor: grabbing; }

.ss-fig-controls--shared {
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--ss-rule);
    font-family: var(--ss-font-text);
}

.ss-fig-readout {
    font-family: var(--ss-font-text);
    font-size: var(--ss-text-prose-small);
    color: var(--ss-text);
    align-self: end;
}

.ss-fig-readout b {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.ss-fig-readout [hidden] { display: none; }

/* Without the script the panels would be blank boxes and the sliders dead. */
.ss-fig-group:not(.is-live) .ss-fig-panel--wide,
.ss-fig-group:not(.is-live) .ss-fig-controls {
    display: none;
}

/* Рис. 2 of 7.2.14 is a long thin beam: a short panel, and the script fits the beam to it. */
.ss-fig-panel--wide.ss-fig-panel--short { aspect-ratio: 2 / 1; }

@media (min-width: 900px) {
    .ss-fig-panel--wide { aspect-ratio: 16 / 7; }
    .ss-fig-panel--wide.ss-fig-panel--short { aspect-ratio: 3 / 1; }
}