/* ==========================================================================
   skins/dial.css — the classic round gauge. Dark face in both themes, because
   a white speedometer does not read as one.
   ========================================================================== */

[data-skin=dial] {
    --chart-line: var(--primary-color);
}

.hero--dial {
    max-width: 420px;
}

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

.d-face {
    fill: url(#faceGrad);
}

.d-bezel {
    fill: none;
    stroke: url(#bezelGrad);
    stroke-width: 5;
}

.d-inner-ring {
    fill: none;
    stroke: #fff;
    stroke-opacity: .05;
    stroke-width: 1;
}

.d-track {
    fill: none;
    stroke: var(--dial-track);
    stroke-width: 7;
    stroke-linecap: round;
}

.d-redline {
    fill: none;
    stroke: var(--dial-needle);
    stroke-width: 7;
    stroke-linecap: butt;
    opacity: .55;
}

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

.d-arc.over {
    stroke: var(--dial-needle);
}

.d-glow {
    fill: none;
    stroke: var(--dial-accent-1);
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .45;
}

.d-glow.over {
    stroke: var(--dial-needle);
}

.t-major {
    stroke: var(--dial-ink);
    stroke-width: 2.4;
}

.t-minor {
    stroke: var(--dial-ink-dim);
    stroke-width: 1.1;
    opacity: .75;
}

.t-red {
    stroke: var(--dial-needle);
}

.t-label {
    fill: var(--dial-ink);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: central;
}

.peak-tick {
    stroke: #ffc44d;
    stroke-width: 3;
    stroke-linecap: round;
}

.needle {
    fill: var(--dial-needle);
}

.hub-ring {
    fill: url(#hubGrad);
}

.hub-dot {
    fill: #0e1114;
}

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

#reading.over {
    fill: var(--dial-needle);
}

#readingUnit {
    fill: var(--dial-ink-dim);
    font-size: 12px;
    font-weight: 500;
    text-anchor: middle;
    letter-spacing: .14em;
}

#odo {
    fill: var(--dial-ink-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    text-anchor: middle;
    letter-spacing: .06em;
}

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

#needleGroup.sweeping {
    transition: none;
}

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