/* ==========================================================================
   skins/lean.css — the motorcycle attitude indicator.

   Nothing readable sits on the horizon, which moves and changes colour as you
   lean, and the scale lives outside the disc where the image cannot reach it.
   ========================================================================== */

[data-skin=lean] {
    --chart-line: #ff8a3d;
    --lean-plate: rgba(7, 12, 18, .82);
}

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

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

#horizon {
    transition: transform .18s linear;
}

/* ---------------- bank scale ---------------- */
.l-tick {
    stroke: var(--text-color-secondary);
    stroke-width: 2;
    stroke-linecap: round;
}

.l-tick--major {
    stroke: var(--text-color);
    stroke-width: 3.4;
}

.l-scale-num {
    fill: var(--text-color-secondary);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
}

.l-pointer {
    fill: #ff8a3d;
    transition: transform .18s linear;
}

/* The horizon is a moving two-tone background, so white text over it reads
   half the time and vanishes the other half. A plate fixes it. */
.l-plate rect {
    fill: var(--lean-plate);
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
}

.l-speed {
    fill: #ffffff;
    font-size: 54px;
    font-weight: 400;
    text-anchor: middle;
    font-feature-settings: "tnum";
    letter-spacing: -.02em;
}

.l-speed.over {
    fill: #ff8080;
}

.l-unit {
    fill: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-anchor: middle;
}

.l-lean {
    fill: #ffb054;
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    text-anchor: middle;
}

.l-side {
    fill: rgba(255, 255, 255, .72);
    font-size: 9.5px;
    font-weight: 700;
    /* Tight enough that the longest state — the waiting message — still fits
       inside its plate. Text spilling off the backing defeats the point. */
    letter-spacing: .06em;
    text-anchor: middle;
}

/* ---------------- wings ---------------- */
.l-wings line {
    stroke: #ffdf5e;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.l-wings circle {
    fill: none;
    stroke: #ffdf5e;
    stroke-width: 3;
}

/* ---------------- peak lean, in HTML ---------------- */
.lean-max {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 14px;
}

.lean-max-cell {
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
    text-align: center;
    min-width: 0;
}

.lean-max-cell .k {
    display: block;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
    margin-bottom: 4px;
}

.lean-max-cell .v {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    font-feature-settings: "tnum";
    color: #e07a20;
    white-space: nowrap;
}

[data-theme=dark] .lean-max-cell .v {
    color: #ff9d3b;
}

.lean-max-cell--mid .v {
    color: var(--text-color);
}

@media (prefers-reduced-motion: reduce) {

    #horizon,
    .l-pointer {
        transition: none;
    }
}

/* ---------------- the page around it ---------------- */
[data-skin=lean] .stat[data-stat=lean] {
    background: linear-gradient(180deg, rgba(255, 138, 61, .16), var(--surface-raised));
}

[data-skin=lean] .stat[data-stat=lean] .v {
    color: #c25f10;
}

[data-theme=dark] [data-skin=lean] .stat[data-stat=lean] .v {
    color: #ff9d3b;
}

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

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

    .lean-max-cell {
        padding: 8px 4px;
    }

    .lean-max-cell .v {
        font-size: 1.125rem;
    }

    .lean-max-cell .k {
        font-size: .5625rem;
        letter-spacing: .04em;
    }
}