/*
 * The panorama: ridges behind the author's graph, style "C" (user decision 2026-10-31, prototyped
 * on 21 ridges): the supporters' ridges in the site's accent cyan, 1.7 px, their band's opacity
 * × 3.2 (at most 0.85); everybody else's neutral-500, 1.1 px, × 2.2 (at most 0.55). Two hues and
 * two weights keep dozens of ridges from melting into one grey mass; the band's opacity (it fades
 * with depth and crowding, assets/geometry/panorama.ts) comes per ridge as `--ridge-opacity`. The
 * graph is the front layer: its opaque ground hides whatever ridge runs behind it, and its ink
 * plates stay the darkest line on the page.
 *
 * A ridge the pointer (or a tap, or the keyboard) is on lights up above the others — full opacity,
 * a heavier stroke — with its name in a card, the rest dim. Brought to the front it is drawn large
 * in the graph's frame (paper ground, halftone, an ink line with a cyan plate) over the faded route
 * (UI/MountainGraph `data-route-away`), with the front bar's way back.
 */
@layer components {
    .panorama {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .panorama__stage {
        position: relative;
        /* The ridges are as wide as the graph; on a phone only the part in view is shown (until the
           controller moves them into the graph's stage). `clip`: not a scroll container. */
        overflow: hidden;
        overflow: clip;
    }

    .panorama__ridges {
        position: absolute;
        /* Where UI/MountainGraph's drawing starts (its padding); the controller then lines the
           ridges up exactly and follows the graph's sideways scroll. */
        inset-block-start: var(--space-4);
        inset-inline-start: 0;
        z-index: 0;
        display: block;
        max-inline-size: none;
        pointer-events: none;
        font-family: var(--font-body);
    }

    /* Moved into UI/MountainGraph's stage, behind its drawing: the stage's box exactly, so the
       ridges scroll and zoom with the graph (same view box). */
    .panorama__ridges--hosted,
    .panorama__foreground.panorama__foreground--hosted {
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
    }

    .panorama__front {
        position: relative;
        z-index: 1;
    }

    .panorama__ridge {
        fill: none;
        stroke: var(--color-neutral-500);
        stroke-width: 1.1;
        stroke-linejoin: round;
        opacity: min(calc(var(--ridge-opacity, 0.2) * 2.2), 0.55);
    }

    .panorama__ridge--supporter {
        stroke: var(--color-accent);
        stroke-width: 1.7;
        opacity: min(calc(var(--ridge-opacity, 0.2) * 3.2), 0.85);
    }

    /* One ridge lit: the others step back, the lit one is drawn again above them. */
    .panorama:is([data-spotlight='highlighted'], [data-spotlight='foreground']) [data-part='layer'] .panorama__ridge {
        opacity: min(calc(var(--ridge-opacity, 0.2) * 1.1), 0.3);
    }

    .panorama__ridge.panorama__ridge--lit {
        opacity: 1;
        stroke: var(--color-text);
        stroke-width: 2.6;
    }

    .panorama__ridge--supporter.panorama__ridge--lit {
        stroke: var(--color-accent-700);
    }

    @media (prefers-reduced-motion: no-preference) {
        .panorama__ridge {
            transition: opacity 160ms ease-out;
        }
    }

    .panorama__names {
        display: none;

        & text {
            fill: var(--color-neutral-700);
            font-size: 9px;
            font-style: italic;
            text-anchor: middle;
            paint-order: stroke;
            stroke: var(--color-bg);
            stroke-width: 3px;
            stroke-linejoin: round;
        }
    }

    .panorama[data-names='on'] .panorama__names {
        display: inline;
    }

    /* A ridge in front: over the faded route, under the card. */
    .panorama__foreground {
        position: absolute;
        inset-block-start: var(--space-4);
        inset-inline-start: 0;
        z-index: 2;
        display: block;
        max-inline-size: none;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
    }

    .panorama[data-spotlight='foreground'] .panorama__foreground {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        .panorama__foreground {
            transition: opacity 280ms ease-out, transform 280ms ease-out, visibility 280ms;
        }
    }

    .panorama__foreground-ground {
        fill: var(--color-bg);
    }

    .panorama__foreground-dot {
        fill: var(--color-text);
        opacity: 0.35;
    }

    .panorama__foreground-line,
    .panorama__foreground-plate {
        fill: none;
        stroke-width: 2.4;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .panorama__foreground-line {
        stroke: var(--color-text);
    }

    .panorama__foreground-plate {
        stroke: var(--color-accent);
        mix-blend-mode: multiply;
    }

    /* The lit ridge's name. Positioned by the controller (percent of the drawing's box). */
    .panorama__card {
        position: absolute;
        z-index: 3;
        display: grid;
        gap: 0.1em;
        justify-items: start;
        /* `max-content`: the card's measured width never depends on where it stood before (an absolute box
           near the stage's right edge shrinks to fit) — the controller places it by that width (QA 2026-11-03). */
        inline-size: max-content;
        max-inline-size: min(16rem, 100vw - 2rem);
        padding: var(--space-2xs) var(--space-xs);
        background: var(--color-surface);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-s);
        color: var(--color-text);
        font-family: var(--font-body);
        line-height: 1.3;
        /* A hover card never takes the pointer from the ridge under it. */
        pointer-events: none;

        &[hidden] {
            display: none;
        }
    }

    .panorama__card-kicker {
        color: var(--color-text-muted);
        font-size: var(--text-xs);
    }

    /* No `max-inline-size: 100%` here: .text-truncate's padding sits outside the grid area (its negative
       margin), so 100% of the area cut every name by that padding — "Bezmenný hreb…" at 1440 (QA
       2026-10-31). The card sizes to the name; only one longer than the card's maximum is shortened. */
    .panorama__card-name {
        font-size: var(--text-m);
    }

    /* "Zobraziť v popredí": only on a pinned card (a tap, the keyboard) — a mouse clicks the ridge. */
    .panorama__card .panorama__card-front {
        display: none;
        min-block-size: 44px;
        margin-inline-start: calc(-1 * var(--space-xs));
        pointer-events: auto;
    }

    .panorama__card[data-state='pinned'] .panorama__card-front {
        display: inline-flex;
    }

    .panorama__card[data-state='pinned'] {
        pointer-events: auto;
    }

    /* Up to four photo thumbnails (photos F6): tiny paper prints, no link, nothing to enlarge. */
    .panorama__card-thumbs {
        display: flex;
        gap: 4px;
        margin-block: 2px;

        &[hidden] {
            display: none;
        }

        & img {
            display: block;
            inline-size: 32px;
            block-size: 32px;
            max-inline-size: none;
            object-fit: cover;
            border: 2px solid var(--color-bg);
            box-shadow: 0 0 0 1px var(--color-border, rgb(0 0 0 / 0.15));
            pointer-events: none;
            user-select: none;
        }
    }

    /* "Nahlásiť": on a card one can reach (a tap, the keyboard) — a hover card never takes the pointer. */
    .panorama__card .panorama__card-report {
        display: none;
        font-size: var(--text-xs);
        pointer-events: auto;
    }

    .panorama__card:is([data-state='pinned'], [data-state='keyboard']) .panorama__card-report {
        display: inline;
    }

    .panorama__front-report {
        font-size: var(--text-s);
    }

    /* The front ridge's thumbnails: printed on paper, on a thin stem down to the ridge. */
    .panorama__thumb-paper {
        fill: var(--color-bg);
        stroke: var(--color-text);
        stroke-opacity: 0.25;
        stroke-width: 0.5;
    }

    .panorama__thumb-stem {
        stroke: var(--color-text);
        stroke-width: 1;
        stroke-opacity: 0.6;
    }

    .panorama__thumb-more {
        fill: var(--color-text);
        font-family: var(--font-body);
        font-size: 10px;
        font-weight: 600;
        text-anchor: end;
        dominant-baseline: hanging;
        paint-order: stroke;
        stroke: var(--color-bg);
        stroke-width: 3px;
    }

    .panorama__front-bar {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 4;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-1) var(--space-2);
        padding-inline: var(--space-1);
        background: color-mix(in srgb, var(--color-bg) 88%, transparent);

        &[hidden] {
            display: none;
        }
    }

    .panorama__front-title {
        display: grid;
        min-inline-size: 0;
        margin: 0;
        line-height: 1.25;
    }

    .panorama__front-kicker {
        color: var(--color-text-muted);
        font-size: var(--text-xs);
    }

    .panorama__front-name {
        font-size: var(--text-l);
    }

    .panorama__front-bar .panorama__back {
        min-block-size: 44px;
    }

    .panorama__controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);

        &[hidden] {
            display: none;
        }
    }

    .panorama[data-busy='true'] .panorama__controls {
        opacity: 0.6;
    }

    .panorama__names-toggle {
        position: relative;
        cursor: pointer;

        &:has(.panorama__names-input:focus-visible) {
            outline: 2px solid var(--color-focus);
            outline-offset: 2px;
        }
    }

    .panorama__names-input {
        position: absolute;
        inline-size: 0;
        block-size: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* Scoped to the toggle: a bare `.panorama__icon--on` loses to `.btn svg { display: block }` of the
       same layer, and both icons showed. */
    .panorama__names-toggle .panorama__icon--on,
    .panorama__names-toggle:has(.panorama__names-input:checked) .panorama__icon--off {
        display: none;
    }

    .panorama__names-toggle:has(.panorama__names-input:checked) .panorama__icon--on {
        display: inline-block;
    }

    .panorama__note {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* The hint in the pointer's words: a finger taps, a mouse points (both server-rendered). */
    .panorama__hint-pointer {
        display: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .panorama__hint-touch {
            display: none;
        }

        .panorama__hint-pointer {
            display: inline;
        }
    }
}