@charset "utf-8";

/* ==========================================================================
   ELASTIC project page — isolated stylesheet.
   Every token below mirrors the values used site-wide in css/style.css
   (same hex colors, same AvenirNext family, same text-meta / hairline-border
   conventions) so this page reads as part of the same site, without
   depending on or leaking into the shared stylesheet. The only new color
   is the amber brand accent used solely for the "ELASTIC" wordmark, per
   request.
   ========================================================================== */

@font-face {
    font-family: 'AvenirNextCyr';
    src: url('../fonts/AvenirNext/AvenirNextCyr-Regular.eot');
    src: url('../fonts/AvenirNext/AvenirNextCyr-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext/AvenirNextCyr-Regular.woff') format('woff'),
        url('../fonts/AvenirNext/AvenirNextCyr-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirNextCyrDemi';
    src: url('../fonts/AvenirNext/AvenirNextCyr-Demi.eot');
    src: url('../fonts/AvenirNext/AvenirNextCyr-Demi.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext/AvenirNextCyr-Demi.woff') format('woff'),
        url('../fonts/AvenirNext/AvenirNextCyr-Demi.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirNextCyrMedium';
    src: url('../fonts/AvenirNext/AvenirNextCyr-Medium.eot');
    src: url('../fonts/AvenirNext/AvenirNextCyr-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext/AvenirNextCyr-Medium.woff') format('woff'),
        url('../fonts/AvenirNext/AvenirNextCyr-Medium.ttf') format('truetype');
}

/* Latin Modern Mono — LaTeX's \texttt face (lmtt), used only for the wordmark. */
@font-face {
    font-family: 'Latin Modern Mono';
    src: url('../fonts/LatinModern/lmmono-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.elastic-page {
    /* Same palette as the rest of the site (css/style.css :root). */
    --e-black: #080812;
    --e-dark-grey: #666;
    --e-text: #26262c;
    --e-mid-grey: #b0b0b0;
    --e-light-grey: #e9e9e9;
    --e-off-white: #f0f0f0;
    --e-white: #ffffff;
    --e-blue: #3161b5;

    /* Single bright orange accent from the paper, shared by every branded
       highlight on the page. */
    --e-brand: #faa01a;

    /* Muted red / green, used only in the method figure to mirror the
       pruned / selected sample colors from the paper's Figure 1. */
    --e-red: #a8453a;
    --e-green: #3f7d52;
    --e-yellow: #dca933;

    /* Sampled from the allocation-timeline plots so the inline legend in
       Results matches the two traces exactly. */
    --e-seq: #1b7a5a;
    --e-par: #8b5fc4;

    /* The exact background of the timeline plot exports, so letterboxing a
       wide plot inside a square frame is invisible. */
    --e-plot-bg: #f0f0f0;

    --e-font: 'AvenirNextCyrMedium', Helvetica, sans-serif;
    --e-font-demi: 'AvenirNextCyrDemi', Consolas, monaco, monospace;

    --e-border: 1px solid var(--e-mid-grey);
    --e-spacing: 1rem;
    --e-max-width: 62rem;

    margin: 0;
    padding: 0;
    background: var(--e-off-white);
    color: var(--e-black);
    font-family: var(--e-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.elastic-page * {
    box-sizing: border-box;
}

.elastic-page a {
    color: var(--e-black);
    text-decoration: underline;
    text-decoration-color: var(--e-mid-grey);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.2s ease;
}

.elastic-page a:hover {
    color: var(--e-black);
    text-decoration-color: var(--e-black);
}

.elastic-page .hero .author-name {
    text-decoration: none;
}

.elastic-page .hero .author-name:hover {
    color: var(--e-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em;
}

.elastic {
    max-width: var(--e-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 700px) {
    .elastic {
        padding: 0 3rem;
    }
}

@media (min-width: 1100px) {
    .elastic {
        padding: 0 4rem;
    }
}

/* Small uppercase label style, used throughout — identical to .text-meta */
.text-meta {
    font-size: 0.72rem;
    font-family: var(--e-font-demi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.text-sml {
    font-size: 0.82rem;
}

/* Math symbols inside uppercase labels (e.g. the τ axis) must keep their case. */
.no-caps {
    text-transform: none;
}

/* ---------------------------------------------------------------------- */
/* Hero / title block                                                     */
/* ---------------------------------------------------------------------- */

/* The wordmark is type, not a ruled bar. The first line on the page is the
   Overview rule. Under the title, one size, flush left. */
.hero {
    padding: 4.5rem 0 0;
}

.hero__title {
    margin: 0 0 1.15rem;
    font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;
    font-weight: 400;
    font-size: clamp(2.25rem, 5.5vw, 3rem);
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--e-brand);
}

.hero__subtitle,
.hero__authors,
.hero__meta {
    font-family: var(--e-font);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.45;
}

.hero__subtitle,
.hero__authors,
.hero__meta {
    margin: 0;
    max-width: none;
}

.hero__subtitle {
    margin-top: 0;
    color: var(--e-black);
}

.hero__subtitle b {
    font-weight: 600;
    color: var(--e-brand);
}

.hero__authors {
    margin-top: 0.85rem;
}

.hero__authors .author-name {
    color: var(--e-black);
}

.hero__meta {
    margin-top: 0.3rem;
    color: var(--e-black);
    font-family: var(--e-font);
    font-size: 0.95rem;
    font-weight: 400;
}

.hero__meta-sep {
    margin: 0 0.65rem;
    color: var(--e-mid-grey);
}

.hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.75rem;
    margin-top: 1.5rem;
}

.elastic-page .hero a.hero__link {
    color: var(--e-black);
    font-family: var(--e-font);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-transform: uppercase;
    text-decoration: none;
}

.elastic-page .hero a.hero__link:hover {
    color: var(--e-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em;
}

.hero__arrow {
    /* Same absolute size as the homepage contact arrow, not the larger link text. */
    font-size: 0.67rem;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: 0.12em;
}

/* ---------------------------------------------------------------------- */
/* Section divider + heading (mirrors .intro__meta + h5.text-meta)        */
/* ---------------------------------------------------------------------- */

.section-divider {
    border-top: var(--e-border);
    padding-top: 0.75rem;
    margin-top: 4.5rem;
}

.section-heading {
    margin: 0 0 0.25rem;
}

.section-intro {
    max-width: 40rem;
    margin: 0.75rem 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--e-text);
}

/* Step labels inside Method. Numbered in the brand orange like the overview
   points, so the sequence markers read consistently across the page. */
.method-subheading,
.result__heading {
    margin: 3rem 0 0;
    color: var(--e-black);
    font-family: var(--e-font-demi);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}

/* π₀.₅ uses the rollout browser's face. The heading is Demi, whose fallback
   is monospace, so a bare pi would not match the select. */
.pi {
    font-family: var(--e-font);
    font-weight: 400;
}

.method-subheading span {
    color: var(--e-brand);
}

.method-subheading + .section-intro {
    margin-top: 0.5rem;
}

/* Meta-MDP diagram. A continuous denoising axis per candidate: black is the
   state so far, green is the stride Δτ, a cross prunes. Orange is the
   action the verifier picks. */
.meta-mdp {
    margin: 0.75rem 0 1.25rem;
    color: var(--e-black);
}

.meta-mdp svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.meta-mdp svg text {
    font-family: var(--e-font);
    fill: var(--e-black);
}

.meta-mdp svg .meta {
    font-family: var(--e-font-demi);
    letter-spacing: 0.06em;
    fill: var(--e-dark-grey);
}

.meta-mdp .mdp-on { fill: var(--e-black); }
.meta-mdp .mdp-new { fill: var(--e-green); }
.meta-mdp .mdp-pick { fill: var(--e-brand); }
.meta-mdp .mdp-dead { fill: var(--e-black); opacity: 0.28; }
.meta-mdp .mdp-off {
    fill: none;
    stroke: var(--e-mid-grey);
    stroke-width: 1;
}

.meta-mdp svg.meta-mdp__narrow { display: none; }

@media (max-width: 700px) {
    .meta-mdp svg.meta-mdp__wide { display: none; }
    .meta-mdp svg.meta-mdp__narrow { display: block; }
}

/* Full-width still/animation inside Method, framed like .media-slot__frame
   but sized by its own intrinsic aspect ratio. */
.method-media {
    margin: 1.5rem 0;
}

.method-media__caption {
    max-width: 40rem;
    margin-top: 0.75rem;
    color: var(--e-dark-grey);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* The six-panel plot needs the full measure to stay legible. The two
   single-panel frontiers are emitted at identical dimensions and both use the
   default cap, so they line up with each other down the page. */
.method-media--wide {
    max-width: none;
}

.method-media__video,
.method-media__img {
    display: block;
    width: 100%;
    height: auto;
}

/* The failure-modes clip is opaque footage, so it keeps a hairline to separate
   it from the page. The plots are transparent and carry their own axes. */
.method-media__video {
    /* border: var(--e-border); */
    /* background: var(--e-light-grey); */
}

.method-media__img {
    background: transparent;
}

/* ---------------------------------------------------------------------- */
/* Method — figure rows (same shape as the .grid-custom publication rows) */
/* ---------------------------------------------------------------------- */

.method-grid {
    display: grid;
    grid-row-gap: 2rem;
    margin-top: 1.25rem;
}

@media (min-width: 700px) {
    .method-grid {
        grid-template-columns: minmax(9rem, 14rem) minmax(18rem, 1fr);
        grid-column-gap: 2rem;
    }
}

.method-figure {
    display: contents;
}

.method-figure__visual {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    margin-bottom: 0.6rem;
}

@media (min-width: 700px) {
    .method-figure__visual {
        margin-bottom: 0;
    }
}

.method-figure__caption {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--e-dark-grey);
}

.method-figure__caption b {
    color: var(--e-black);
    font-weight: 500;
}

/* Overview clip. The source mov is 44MB; the page serves a compressed mp4. */
.hero-video {
    margin: 1.5rem 0 0;
}

.hero-video__media {
    display: block;
    width: 100%;
    height: auto;
    background: #e8e8e8;
}

/* -- Method figure: parallel samples denoising over time --
   Mirrors the paper's Fig. 1: all samples spawn together at N(0,I) at the
   same instant, then advance in discrete denoising steps (not a continuous
   slide) — some take fewer, larger strides (gold), some take many small
   ones (green), and one stalls and is pruned partway (red). The verifier
   sits beside the plot, matching the paper's layout, and scores the
   samples that reach the end. The track background fades from a noise
   texture (site blue, layered) on the left to clean off-white on the
   right, echoing the paper's noisy-to-clean gradient. */

.hero-figure {
    margin: 1.75rem 0 1.25rem;
}

.hero-figure__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-figure__axis-label--left {
    flex: none;
    color: var(--e-dark-grey);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.hero-figure__plot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.hero-figure__origin,
.hero-figure__endpoint {
    flex: none;
    color: var(--e-dark-grey);
}

.hero-figure__track {
    position: relative;
    flex: 1;
    height: 7rem;
    min-width: 0;
    border-left: var(--e-border);
    border-bottom: var(--e-border);
    background:
        repeating-linear-gradient(115deg, rgba(49, 97, 181, 0.16) 0 2px, transparent 2px 6px),
        linear-gradient(to right, rgba(49, 97, 181, 0.32) 0%, rgba(49, 97, 181, 0.14) 45%, rgba(49, 97, 181, 0.02) 78%, transparent 100%);
}

.hero-figure__gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(8, 8, 18, 0.08);
}

/* τ label, centered under the plot as the horizontal (denoising-time) axis
   caption. Sits after the plot row so it spans the figure width and reads
   as centered under the track. */
.hero-figure__axis-label--bottom {
    margin-top: 0.5rem;
    text-align: center;
    color: var(--e-dark-grey);
}

/* "Sequential" — the horizontal-axis name — directly under the τ caption. */
.hero-figure__axis-label--sequential {
    margin-top: 0.2rem;
    text-align: center;
    color: var(--e-dark-grey);
}

/* Small illustrative denoising frame centered below the whole plot. Kept
   in a fixed-aspect box so swapping frames doesn't reflow the layout. */
.hero-figure__frame {
    margin: 1rem auto 0;
    width: 11rem;
    max-width: 60%;
    border: var(--e-border);
    border-radius: 0.25rem;
    overflow: hidden;
    background: rgba(49, 97, 181, 0.04);
    aspect-ratio: 1 / 1;
}

.hero-figure__frame-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-figure__verifier {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-left: 1rem;
    border-left: var(--e-border);
}

.hero-figure__verifier-label {
    color: var(--e-dark-grey);
}

.hero-figure__verifier-scores {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Hidden until every surviving sample has finished denoising — toggled
       by elastic.js (adds .is-visible) on the same tick clock that drives
       the dots, so this reliably fires only after the slowest lane
       finishes rather than on its own separate timer. */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-figure__verifier-scores.is-visible {
    opacity: 1;
}

.hero-figure__verifier-score {
    font-family: var(--e-font-demi);
    font-size: 0.85rem;
    color: var(--e-mid-grey);
}

.hero-figure__verifier-score--gold { color: var(--e-brand); opacity: 0.6; }
.hero-figure__verifier-score--green { color: var(--e-green); }
.hero-figure__verifier-score.is-selected {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Dots + connecting segments are positioned and faded entirely by
   elastic.js (see initHeroFigure), which drives a single discrete tick
   clock shared by every lane — this guarantees the dot and the segment
   leading to it always agree, and lets every lane advance on the exact
   same schedule of ticks (no more per-lane keyframe-percentage drift).
   Each tick, JS drops a new dot + a short segment connecting it to the
   previous position, and older dots/segments fade out with age rather
   than a single line stretching back to the origin. */
.hero-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.6rem;
    height: 0.6rem;
    margin: -0.3rem 0 0 -0.3rem;
    border-radius: 50%;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: scale(1);
}

.hero-dot.is-current {
    transform: scale(1.25);
}

.hero-dot--gold { background: var(--e-brand); }
.hero-dot--green { background: var(--e-green); }
.hero-dot--red { background: var(--e-red); }

.hero-seg {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    transform-origin: left center;
    transition: opacity 0.35s ease;
}

.hero-seg--gold { background: var(--e-brand); }
.hero-seg--green { background: var(--e-green); }
.hero-seg--red { background: var(--e-red); }

.hero-figure__prune {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    color: var(--e-red);
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.swatch {
    font-weight: 600;
}

.swatch--red { color: var(--e-red); }
.swatch--green { color: var(--e-green); }
.swatch--yellow { color: var(--e-yellow); }

/* Match the two traces in the allocation-timeline plots. */
.swatch--seq { color: var(--e-seq); }
.swatch--par { color: var(--e-par); }

@media (max-width: 640px) {
    /* Keep plot and verifier on one row; drop the N(0,I) / π labels to give
       the track room instead of wrapping the verifier underneath. */
    .hero-figure__row {
        gap: 0.5rem;
    }

    .hero-figure__origin,
    .hero-figure__endpoint {
        display: none;
    }

    .hero-figure__track {
        height: 6rem;
    }

    .hero-figure__verifier {
        padding-left: 0.5rem;
    }
}

/* prefers-reduced-motion is handled in JS: initHeroFigure skips the
   interval timer entirely and renders once at the final resting frame
   (see elastic.js), so there's nothing further to override here. */

/* ---------------------------------------------------------------------- */
/* Results                                                                */
/* A section opens with one hairline. Inside Results, entries are separated by
   space and an index, not by another rule — the plots already have their own. */
.result:first-of-type {
    margin-top: 1.75rem;
}

.result + .result {
    margin-top: 4.5rem;
}

.result__heading {
    margin: 0;
}

.result__index {
    flex: 0 0 1.75rem;
    color: var(--e-brand);
    letter-spacing: 0.08em;
}

.result .section-intro {
    margin: 0.75rem 0 0;
}

.result .method-media {
    margin: 1.5rem 0 0;
}

.result .results-controls {
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------- */
/* Results browser                                                        */
/* ---------------------------------------------------------------------- */

.results-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 14rem;
}

/* An author-level `display` beats the UA stylesheet's [hidden] rule, so the
   hidden state has to be restated here — otherwise the compute-penalty field
   and the timeline slot stay visible when JS hides them. */
.field[hidden],
.media-slot[hidden] {
    display: none;
}

.field__label {
    color: var(--e-dark-grey);
}

.field__select {
    min-width: 14rem;
    max-width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.7rem;
    font-family: var(--e-font);
    font-size: 0.88rem;
    color: var(--e-black);
    background: var(--e-white)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E")
        no-repeat right 0.75rem center;
    border: var(--e-border);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.3s;
}

.field__select:hover,
.field__select:focus-visible {
    border-color: var(--e-black);
    outline: none;
}

/* Episode outcome. Option colouring is honoured by Chrome and Firefox but
   ignored by some native menus (macOS Safari), so the option text also carries
   a check / cross and the badge below states it in words — the colour is a
   reinforcement, never the only signal. */
.field__select option.is-success { color: var(--e-green); }
.field__select option.is-failure { color: var(--e-red); }

.field__select.is-success { color: var(--e-green); }
.field__select.is-failure { color: var(--e-red); }

.outcome {
    margin-left: 0.4rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

.outcome--success { color: var(--e-green); }
.outcome--failure { color: var(--e-red); }

/* Continuous scores stay neutral: colouring them green/red would reimpose the
   pass/fail reading that the number exists to avoid. */
.outcome--metric { color: var(--e-dark-grey); }

/* [hidden] needs restating: .outcome sets no display, but the badge lives
   inside a flex label, and being explicit avoids relying on UA defaults. */
.outcome[hidden] {
    display: none;
}

/* A fixed two-column grid rather than flex: when one slot is hidden (a run
   with no paired timeline), the remaining slot stays in its own column at half
   width instead of stretching across the full measure and blowing a small
   source video up to an unreadable size. */
.results-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    /* Stretch so both slots share the taller height; the labels are then
       pushed to a common baseline (see .media-slot__label) rather than each
       sitting directly under a frame of different height. */
    align-items: stretch;
}

@media (max-width: 640px) {
    .results-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.media-slot {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

/* No border here. The clips are opaque imagery that already reads as a panel,
   so a hairline around them only doubles up with the edge of the content — and
   with the timeline plots, which carry their own axes box, it read as a box
   inside a box. The pre-load placeholder tint is enough to mark the slot. */
.media-slot__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--e-light-grey);
    overflow: hidden;
}

/* Transparent, not black: object-fit: contain letterboxes any clip whose ratio
   doesn't match the square frame (the LIBERO robot view is 224x228), and a
   black fill turned those few pixels into a hard dark band along the edge. */
.media-slot__video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.media-slot__video.is-ready {
    display: block;
}

/* Both slots are the same square box regardless of what's in them, so the pair
   reads as two equal panels. Source ratios vary a lot (96x96 and 256x256 sim
   renders, 224x228 LIBERO, 720x720 real, ~1250x960 timelines); object-fit:
   contain fits each one inside the square without distortion. */
.media-slot__frame {
    aspect-ratio: 1 / 1;
}

/* The timeline plots are wider than tall, so they letterbox top and bottom
   inside the square. --e-plot-bg is sampled from the exports themselves, so the
   bands continue the plot's own background seamlessly instead of showing an edge
   where the clip stops. */
.media-slot[data-slot="timeline"] .media-slot__frame,
.media-slot[data-slot="timeline"] .media-slot__video {
    background: var(--e-plot-bg);
}

/* The execution clip letterboxes against the page tint, so the bands disappear
   rather than framing the footage. */
.media-slot[data-slot="execution"] .media-slot__frame {
    background: var(--e-off-white);
}

.media-slot__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
}

.media-slot__video.is-ready + .media-slot__placeholder {
    display: none;
}

.media-slot__hint {
    margin: 0;
    max-width: 20rem;
    font-family: var(--e-font-demi);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--e-dark-grey);
    word-break: break-all;
    text-transform: none;
}

.media-slot__label {
    /* margin-top:auto pins the label to the bottom of the stretched slot, so
       the two captions align even though the frames differ in height. */
    margin: 0 0 0;
    margin-top: auto;
    padding-top: 0.6rem;
    color: var(--e-dark-grey);
}

.media-slot__label span {
    color: var(--e-brand);
}

.results-note {
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.elastic-footer {
    margin-top: 3rem;
    padding: 1.5rem 0 5rem;
    color: var(--e-dark-grey);
}

.elastic-footer p {
    margin: 0;
}

.bibtex {
    margin: 1rem 0 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    background: rgba(8, 8, 18, 0.04);
    border-radius: 0.25rem;
    color: var(--e-black);
    font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Plots carry their own small axis text; on phones let them keep a legible
   width and scroll sideways instead of shrinking to unreadable. */
@media (max-width: 640px) {
    .result .method-media {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .result .method-media__img {
        min-width: 36rem;
    }

    .result .method-media--wide .method-media__img[src*="dp_sim_frontier"] {
        min-width: 48rem;
    }
}

@media (max-width: 640px) {
    .field__select {
        min-width: 100%;
    }
}

/* ---------------------------------------------------------------------- */
/* Section grid                                                           */
/* Section labels sit in a narrow left column; copy and media share the   */
/* right column, so every block has the same left and right edge.         */
/* Below 900px everything stacks.                                          */
/* ---------------------------------------------------------------------- */

@media (min-width: 900px) {
    .section-divider {
        position: relative;
        padding-left: 11rem;
    }

    .section-divider > .section-heading {
        position: absolute;
        top: 0.75rem;
        left: 0;
        width: 10rem;
    }

    .section-divider > .section-heading + * {
        margin-top: 0;
    }
}

/* LIBERO heatmap: tiles only; the colour legend is HTML so it uses the
   page's type. Gradients are the viridis / magma maps the tiles use. */
.heatmap .method-media__img {
    max-width: 32rem;
}

.heatmap__legend {
    display: grid;
    grid-template-columns: auto auto minmax(6rem, 12rem) auto;
    align-items: center;
    gap: 0.4rem 0.6rem;
    max-width: 32rem;
    margin-top: 0.9rem;
    color: var(--e-dark-grey);
    font-size: 0.78rem;
}

.heatmap__name {
    padding-right: 0.6rem;
    color: var(--e-text);
}

.heatmap__bar {
    height: 0.5rem;
}

.heatmap__bar--steps {
    background: linear-gradient(to right, #440154, #482878, #3e4989, #31688e, #26828e, #1f9e89, #35b779, #6ece58, #b5de2b, #fde725);
}

.heatmap__bar--samples {
    background: linear-gradient(to right, #180f3d, #440f76, #721f81, #9e2f7f, #cd4071, #f1605d, #fd9668, #feca8d, #fcfdbf);
}

@media (max-width: 640px) {
    .result .heatmap .method-media__img {
        min-width: 0;
    }
}

.nowrap {
    white-space: nowrap;
}