/*
 * The zoom readout.
 *
 * Bottom centre, above the action bar, and transient — it exists to answer one
 * question during a pinch and then get out of the way. It is `pointer-events:
 * none` throughout: the canvas underneath owns dragging, and a strip across the
 * bottom that quietly ate a pan would be worse than no bar at all.
 */

.zoom-bar {
    position: fixed;
    /* The fallback only: zoomBar.js measures the action bar and the build
       stamp each time the bar appears and sets `bottom` from them. This is
       the same sum in tokens — region C's reserve (bar + offset + safe-area
       inset), the stamp's ~20px plus its 2px gap, and an 8px clearance — so
       it is right at every breakpoint even if the measurement cannot run. */
    bottom: calc(var(--region-c-reserve, 120px) + 30px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    padding: 10px 16px 8px;
    border-radius: 10px;

    background: rgba(10, 15, 26, 0.82);
    border: 1px solid rgba(45, 65, 99, 0.9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Level with the HUD, so if it ever does overlap the action bar it is
       seen rather than silently painted over. */
    z-index: var(--z-hud, 100);

    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.zoom-bar.zb-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
}

/* The grade is decorative; the readout is the information. Motion off means
   it appears and disappears rather than sliding. */
.zoom-bar.zb-no-motion,
.zoom-bar.zb-no-motion.zb-visible {
    transition: none;
    transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .zoom-bar,
    .zoom-bar.zb-visible {
        transition: none;
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------------- readout */

.zb-readout {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-primary, #e8eef7);
    font-variant-numeric: tabular-nums;
    /* The number changes every wheel notch; without tabular figures the whole
       string shifts under the eye on each step. */
    min-width: 4ch;
    text-align: center;
}

/* At the default view, the readout earns the accent — "1x" is the one value
   worth recognising without reading. */
.zoom-bar.zb-at-home .zb-readout {
    color: var(--color-accent-gold-light, #f4d03f);
}

/* ------------------------------------------------------------------ track */

.zb-track {
    position: relative;
    width: 208px;
    height: 4px;
    border-radius: 2px;
    background: rgba(45, 65, 99, 0.85);
}

.zb-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        rgba(6, 182, 212, 0.45),
        var(--color-accent-cyan-light, #22d3ee));
}

.zb-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: var(--color-text-primary, #e8eef7);
    box-shadow: 0 0 0 2px rgba(10, 15, 26, 0.9), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.zoom-bar.zb-at-home .zb-thumb {
    background: var(--color-accent-gold-light, #f4d03f);
}

/* ------------------------------------------------------------------ ticks */

.zb-ticks {
    position: absolute;
    inset: 0;
}

.zb-tick {
    position: absolute;
    top: -3px;
    width: 1px;
    height: 10px;
    margin-left: -0.5px;
    background: rgba(200, 216, 236, 0.5);
}

/* The default view's stop. Taller, brighter and gold, because it is the one
   the whole scale is measured FROM — every other tick is "twice that" or
   "half that", and a reader needs to find it before the rest mean anything. */
.zb-tick-home {
    top: -6px;
    height: 16px;
    width: 2px;
    margin-left: -1px;
    background: var(--color-accent-gold, #d4af37);
}

.zb-tick-label {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #b8c4d4);
    white-space: nowrap;
}

.zb-tick-home .zb-tick-label {
    color: var(--color-accent-gold, #d4af37);
    font-weight: 700;
}

/* Room for the labels under the track. */
.zoom-bar {
    padding-bottom: 22px;
}

/* --------------------------------------------------------------- compact */

/* A phone has the action bar closer to the content and less width to give. */
@media (max-width: 560px) {
    .zoom-bar {
        padding: 8px 12px 20px;
    }

    .zb-track { width: 160px; }
    .zb-readout { font-size: 14px; }
    .zb-tick-label { font-size: 8px; }
}