/* ==========================================================================
   skins/cluster.css — the car instrument binnacle. Near-black ground, warm
   white numerals, red needle. The auxiliary panels are HTML so nothing depends
   on an SVG viewBox to stay readable on a phone.
   ========================================================================== */

[data-skin=cluster] {
    --chart-line: #d8e2ee;
    --cluster-ink: #eef3f9;
    --cluster-dim: #97a2ae;
    --cluster-panel: #12161a;
    --cluster-edge: #262c33;
    --cluster-amber: #eeb54a;
}

.hero--cluster {
    max-width: 460px;
}

.cl-binnacle {
    width: 100%;
    display: flex;
    justify-content: center;
}

#cluster {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------- speedometer ---------------- */
.c-track {
    fill: none;
    stroke: #2b323a;
    stroke-width: 7;
    stroke-linecap: round;
}

.c-redzone {
    fill: none;
    stroke: #ff2b2b;
    stroke-width: 7;
    stroke-linecap: butt;
    opacity: .5;
}

.c-arc {
    fill: none;
    stroke: url(#cArc);
    stroke-width: 7;
    stroke-linecap: round;
}

.c-arc.over {
    stroke: #ff2b2b;
}

.c-arc-glow {
    fill: none;
    stroke: #ffffff;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .22;
}

.c-arc-glow.over {
    stroke: #ff2b2b;
    opacity: .5;
}

.c-tick {
    stroke: var(--cluster-dim);
    stroke-width: 1.4;
}

.c-tick--major {
    stroke: var(--cluster-ink);
    stroke-width: 2.8;
}

.c-tick--red {
    stroke: #ff4d4d;
}

.c-label {
    fill: var(--cluster-ink);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}

.c-peak {
    stroke: #ffc44d;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.c-needle {
    fill: #ff2b2b;
}

#cNeedleGroup {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

#cNeedleGroup.sweeping {
    transition: none;
}

.c-reading {
    fill: var(--cluster-ink);
    font-size: 50px;
    font-weight: 300;
    text-anchor: middle;
    font-feature-settings: "tnum";
    letter-spacing: -.02em;
}

.c-reading.over {
    fill: #ff5c5c;
}

.c-unit {
    fill: var(--cluster-dim);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
    letter-spacing: .15em;
}

/* ---------------- limit sign ----------------
   A real roundel rather than a number in a box: the shape is recognised
   before the digits are read, which is the whole point of road signage. */
.cl-limit {
    position: absolute;
    top: 4%;
    right: 2%;
    width: 22%;
    max-width: 82px;
    /* Safari 14 and below have no aspect-ratio; the padding keeps the
       roundel round there, and aspect-ratio takes over where it exists. */
    height: 0;
    padding-bottom: 22%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdfdfd;
    border: 7px solid #d81e1e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.cl-limit span {
    font-family: var(--font-mono);
    font-size: clamp(1.1rem, 5.5vw, 1.75rem);
    font-weight: 700;
    color: #16181a;
    font-feature-settings: "tnum";
}

.cl-limit.over {
    animation: cLimitFlash .7s steps(1) infinite;
}

@keyframes cLimitFlash {
    50% {
        opacity: .3;
    }
}

/* ---------------- auxiliary panels ---------------- */
.cl-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 16px;
}

.cl-panel {
    padding: 12px 8px 10px;
    border-radius: 12px;
    background: var(--cluster-panel);
    border: 1px solid var(--cluster-edge);
    text-align: center;
    min-width: 0;
}

/* The launch timer is the panel people come to this page for, so it gets the
   extra column width and a warmer edge than its neighbours. */
.cl-panel--launch {
    border-color: #3a3327;
    background: linear-gradient(180deg, #191712, var(--cluster-panel));
}

.cl-k {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cluster-dim);
    margin-bottom: 8px;
}

.cl-v {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-feature-settings: "tnum";
    color: var(--cluster-ink);
    white-space: nowrap;
}

.cl-v--big {
    font-size: 1.5rem;
    line-height: 1.1;
}

.cl-v--odo {
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--cluster-amber);
    letter-spacing: .04em;
}

.cl-sub {
    display: block;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--cluster-dim);
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Signal bars, rising left to right like a fuel gauge filling. */
.cl-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 26px;
}

.cl-bars i {
    display: block;
    width: 7px;
    border-radius: 2px;
    background: #262c33;
    transition: background-color .3s;
}

.cl-bars i:nth-child(1) {
    height: 30%;
}

.cl-bars i:nth-child(2) {
    height: 47%;
}

.cl-bars i:nth-child(3) {
    height: 64%;
}

.cl-bars i:nth-child(4) {
    height: 82%;
}

.cl-bars i:nth-child(5) {
    height: 100%;
}

.cl-bars[data-level=poor] i.lit {
    background: #ff5c5c;
}

.cl-bars[data-level=fair] i.lit {
    background: #ffb020;
}

.cl-bars[data-level=good] i.lit {
    background: #5ddc7a;
}

/* Drag-tree staging lamps. */
.cl-stage {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
}

.cl-stage i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #262c33;
    transition: background-color .15s;
}

.cl-stage i.lit {
    background: #ffb020;
    box-shadow: 0 0 6px rgba(255, 176, 32, .7);
}

@media (prefers-reduced-motion: reduce) {
    #cNeedleGroup {
        transition: none;
    }

    .cl-limit.over {
        animation: none;
    }
}

/* ---------------- the page around it ---------------- */
[data-skin=cluster] .stat {
    background: var(--cluster-panel);
    border: 1px solid var(--cluster-edge);
    box-shadow: none;
}

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

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

[data-skin=cluster] .stat .v .u {
    color: var(--cluster-dim);
}

[data-skin=cluster] .card {
    background: var(--cluster-panel);
    border: 1px solid var(--cluster-edge);
    box-shadow: none;
}

[data-skin=cluster] .card-title {
    color: var(--cluster-dim);
}

[data-skin=cluster] .bar-wrap {
    background: #23282e;
}

[data-skin=cluster] .bar {
    background: #d8e2ee;
}

[data-skin=cluster] .chip {
    border-color: #3a4149;
    color: var(--cluster-dim);
}

[data-skin=cluster] .chip:not(.chip--off)[aria-pressed=true] {
    background: #d81e1e;
    border-color: #d81e1e;
    color: #fff;
}

@media (max-width:420px) {
    .cl-panels {
        gap: 6px;
    }

    .cl-panel {
        padding: 10px 4px 8px;
    }

    .cl-k {
        font-size: .5625rem;
        letter-spacing: .06em;
    }

    .cl-v--big,
    .cl-v--odo {
        font-size: 1.25rem;
    }
}