/* ==========================================================================
   skins/hud.css — the windscreen head-up display.

   Everything but the number goes black: a reflection shows whatever the screen
   emits, so any lit surface becomes a bright rectangle across the glass.
   ========================================================================== */

[data-skin=hud] {
    --hud-ink: #7dff9b;
    --hud-dim: #4f9e63;
    --hud-over: #ff6b6b;
}

.hero--hud {
    max-width: 640px;
    padding: 8px 0;
}

/* Mirrored, so the reflection reads the right way round with the phone laid
   face-up on the dashboard. */
.hud-mirror {
    width: 100%;
    text-align: center;
    transform: scaleX(-1);
    color: var(--hud-ink);
}

.hud-value {
    font-size: clamp(6rem, 34vw, 14rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    font-feature-settings: "tnum";
    text-shadow: 0 0 18px rgba(125, 255, 155, .45);
}

.hud-unit {
    font-size: clamp(1rem, 5vw, 1.6rem);
    font-weight: 500;
    letter-spacing: .3em;
    opacity: .8;
    margin-top: 2px;
}

.hud-limit {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--hud-dim);
    margin-top: 12px;
    min-height: 1.2em;
}

.hud-mirror.over .hud-value,
.hud-mirror.over .hud-unit {
    color: var(--hud-over);
    text-shadow: 0 0 18px rgba(255, 107, 107, .5);
}

/* ---------------- black out the page ---------------- */
[data-skin=hud],
[data-skin=hud] .app,
[data-skin=hud] .header,
[data-skin=hud] .main,
[data-skin=hud] .controls,
[data-skin=hud] .block,
[data-skin=hud] .foot {
    background: #000;
    color: var(--hud-ink);
}

[data-skin=hud] .header,
[data-skin=hud] .controls,
[data-skin=hud] .foot {
    border-color: #161616;
}

[data-skin=hud] .header-title,
[data-skin=hud] .icon-button,
[data-skin=hud] .status,
[data-skin=hud] .foot p {
    color: var(--hud-dim);
}

[data-skin=hud] .btn-primary {
    background: #123a1c;
    color: var(--hud-ink);
    box-shadow: none;
}

[data-skin=hud] .btn-primary.stop {
    background: #4a1010;
    color: #ff9b9b;
}

[data-skin=hud] .btn-ghost {
    color: var(--hud-ink);
    border-color: #2a2a2a;
}

[data-skin=hud] .btn-ghost:disabled {
    color: #35603f;
    border-color: #1c1c1c;
}

[data-skin=hud] .bar-wrap {
    background: #141414;
}

[data-skin=hud] .bar {
    background: var(--hud-ink);
}

[data-skin=hud] .stat {
    background: #0b0b0b;
    box-shadow: none;
}

[data-skin=hud] .stat .k,
[data-skin=hud] .stat .u {
    color: var(--hud-dim);
}

[data-skin=hud] .stat .v {
    color: var(--hud-ink);
}

[data-skin=hud] .chip {
    border-color: #2a2a2a;
    color: var(--hud-dim);
}

[data-skin=hud] .chip:not(.chip--off)[aria-pressed=true] {
    background: #123a1c;
    border-color: #2f6b3d;
    color: var(--hud-ink);
}

[data-skin=hud] .fs-btn {
    background: #0b0b0b;
    border-color: #2a2a2a;
}

/* The article and the related block stay readable: black text on black is no
   use once you pick the phone back up. */
[data-skin=hud] .article,
[data-skin=hud] .related {
    background: var(--bg-color);
    color: var(--text-color-secondary);
}