/* ==========================================================================
   skins/pfd.css — the primary flight display. Phosphor green on near-black,
   carried through the stat tiles so the page reads as one instrument.
   ========================================================================== */

[data-skin=pfd] {
    --pfd-ink: #5cff9d;
    --pfd-dim: #2f8f5c;
    --pfd-panel: #07281a;
    --pfd-line: #0d5c39;
    --chart-line: #5cff9d;
}

.hero--pfd {
    max-width: 560px;
}

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

.p-tick {
    stroke: var(--pfd-dim);
    stroke-width: 1.4;
}

.p-tape-label {
    fill: var(--pfd-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-anchor: middle;
    font-feature-settings: "tnum";
}

.p-pointer {
    fill: var(--pfd-ink);
}

.p-box {
    fill: #041209;
    stroke: var(--pfd-ink);
    stroke-width: 1.6;
}

.p-box-value {
    fill: var(--pfd-ink);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    text-anchor: middle;
    font-feature-settings: "tnum";
}

.p-cap {
    fill: var(--pfd-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-anchor: middle;
}

.p-cap--sub {
    letter-spacing: .1em;
}

.p-centre {
    fill: var(--pfd-ink);
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 500;
    text-anchor: middle;
    font-feature-settings: "tnum";
}

.p-aircraft line {
    stroke: #ffdf5e;
    stroke-width: 3;
    stroke-linecap: round;
}

.p-aircraft circle {
    fill: none;
    stroke: #ffdf5e;
    stroke-width: 2;
}

/* Vertical speed: green climbing, amber descending. */
.p-vs-track {
    fill: #0b1f16;
}

.p-vs-fill[data-dir=up] {
    fill: var(--pfd-ink);
}

.p-vs-fill[data-dir=down] {
    fill: #ffb62e;
}

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

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

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

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

[data-skin=pfd] .stat[data-stat=alt] {
    background: linear-gradient(180deg, #0c4029, var(--pfd-panel));
}

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

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

[data-skin=pfd] .bar-wrap {
    background: #0b1f16;
}

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