/* ============================================================
   REAL-TIME LIVE INSTRUMENTS
   Extracted from known-good harper.css during modular migration.
   Do not merge page-specific rules back into harper-core.css.
   ============================================================ */

/* ============================================================
   CURRENT WEATHER — ALTERNATE INSTRUMENT VIEW V2
   ============================================================ */

.weather-view-selector {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin: 14px 2px 8px;
}

.view-choice {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: white;
    color: var(--blue-dark);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.view-choice.active {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: white;
}

.instrument-view {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    margin-top: 20px;
    padding: 20px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.instrument-card {
    min-width: 0;
    padding: 18px 18px 20px;

    text-align: center;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f9fc 100%
    );

    border: 1px solid #ccd9e5;
    border-radius: 12px;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.instrument-title {
    color: var(--blue-dark);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.instrument-gauge,
.wind-instrument {
    display: block;
    width: 100%;
    max-width: 310px;
    height: auto;
    margin: 4px auto 0;
}

.gauge-arc {
    fill: none;
    stroke: #cdd9e4;
    stroke-width: 12;
    stroke-linecap: round;
}

.gauge-tick {
    stroke: #566b7c;
    stroke-width: 2.5;
}

.gauge-number {
    fill: #566b7c;
    font-size: 13px;
    font-weight: 800;
}

.gauge-needle line {
    stroke: #d23b2d;
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.22));
}

.gauge-hub {
    fill: #34495e;
    stroke: white;
    stroke-width: 2.5;
}

.instrument-value {
    margin-top: -8px;

    color: var(--blue-dark);
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 900;
}

.instrument-detail {
    margin-top: 6px;

    color: #526474;
    font-size: 0.9rem;
    font-weight: 700;
}

.compass-face {
    fill: #fbfcfd;
    stroke: #c7d4df;
    stroke-width: 5;
}

.compass-letter {
    fill: #40576a;
    font-size: 15px;
    font-weight: 900;
}

.wind-pointer {
    fill: #d23b2d;
    stroke: #a92f24;
    stroke-width: 1.5;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2));
}

@media (max-width: 760px) {
    .instrument-view {
        grid-template-columns: 1fr;
    }

    .weather-view-selector {
        justify-content: center;
    }
}


/* Ensure the Classic / Instrument selector truly hides inactive view */
.instrument-view[hidden],
.conditions-card[hidden] {
    display: none !important;
}


/* ============================================================
   TEMPERATURE INSTRUMENT V3
   ============================================================ */

.temperature-gauge {
    max-width: 335px;
}

.temp-tick-minor {
    stroke: #8395a5;
    stroke-width: 1.4;
}

.temp-tick-medium {
    stroke: #586d7e;
    stroke-width: 2;
}

.temp-tick-major {
    stroke: #344d61;
    stroke-width: 3;
}

.temp-scale-number {
    fill: #40576a;
    font-size: 12px;
    font-weight: 800;
}

.temp-low-marker {
    stroke: #1772c4;
    stroke-width: 5;
    stroke-linecap: round;
}

.temp-high-marker {
    stroke: #d9342b;
    stroke-width: 5;
    stroke-linecap: round;
}

.temp-range-caption {
    fill: #7a8995;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.temperature-extremes {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 9px;
    font-size: 0.86rem;
    font-weight: 800;
}

.temperature-low {
    color: var(--blue-low);
}

.temperature-high {
    color: var(--red);
}


/* ============================================================
   TEMPERATURE GAUGE FACE / BEZEL
   ============================================================ */

.temperature-gauge .gauge-face-outer {
    fill: #e8eef3;
    stroke: #8fa9bf;
    stroke-width: 3;
}

.temperature-gauge .gauge-face-inner {
    fill: #f3ead8;
    stroke: #d6cbb6;
    stroke-width: 2;
}

.temperature-gauge .gauge-face-center {
    fill: #f8f1e3;
}


/* ============================================================
   BAROMETER INSTRUMENT V4
   ============================================================ */

.barometer-face-outer {
    fill: #e7edf2;
    stroke: #8199ad;
    stroke-width: 3;
}

.barometer-face-inner {
    fill: #e8f0f3;
    stroke: #c3d0d7;
    stroke-width: 2;
}

.barometer-face-center {
    fill: #eef5f7;
}

.barometer-arc {
    fill: none;
    stroke: #b7c9d3;
    stroke-width: 12;
    stroke-linecap: round;
}

.pressure-tick-minor {
    stroke: #8295a3;
    stroke-width: 1.2;
}

.pressure-tick-medium {
    stroke: #566d7d;
    stroke-width: 2;
}

.pressure-tick-major {
    stroke: #344e61;
    stroke-width: 3;
}

.pressure-scale-number {
    fill: #3e5668;
    font-size: 11px;
    font-weight: 800;
}

.gauge-face-caption {
    fill: #758694;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* ============================================================
   WIND INSTRUMENT V4
   ============================================================ */

.wind-face-outer {
    fill: #e7edf2;
    stroke: #8199ad;
    stroke-width: 3;
}

.wind-face-inner {
    fill: #edf3f7;
    stroke: #cad6df;
    stroke-width: 2;
}

.wind-face-center {
    fill: #f7fafc;
}

.wind-tick-minor {
    stroke: #8496a4;
    stroke-width: 1.2;
}

.wind-tick-major {
    stroke: #526879;
    stroke-width: 2.2;
}

.wind-tick-cardinal {
    stroke: #304a5d;
    stroke-width: 3;
}

.wind-cardinal {
    fill: #304a5d;
    font-size: 14px;
    font-weight: 900;
}

.wind-intercardinal {
    fill: #667b8b;
    font-size: 10px;
    font-weight: 800;
}

.wind-gust-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;

    border: 1px solid #d0dae2;
    border-radius: 12px;

    background: #f3f6f8;
}

.wind-gust-label {
    color: #677987;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wind-gust-value {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 900;
}


/* Instrument face color refinement */

.barometer-face-inner {
    fill: #dfecef;
}

.barometer-face-center {
    fill: #edf5f6;
}

.wind-face-inner {
    fill: #e1edf3;
}

.wind-face-center {
    fill: #f0f6f8;
}


.pressure-trend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.pressure-trend-arrow {
    color: var(--blue-dark);
    font-size: 1.55rem;
    line-height: 0.8;
    font-weight: 900;
}


/* ============================================================
   WIND DIRECTION VARIATION
   ============================================================ */

.wind-range-arc {
    fill: none;
    stroke: #2680c2;
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0.55;
}

.wind-range-limit {
    stroke: #1268a8;
    stroke-width: 4;
    stroke-linecap: round;
}


/* ============================================================
   INSTRUMENT VIEW — COMPACT PROPORTIONS
   ============================================================ */

.instrument-view {
    gap: 14px;
    padding: 14px;
}

.instrument-card {
    padding: 12px 12px 14px;
}

.instrument-title {
    font-size: 0.82rem;
    margin-bottom: -2px;
}

.instrument-gauge,
.wind-instrument {
    max-width: 245px;
}

.instrument-value {
    font-size: 1.65rem;
}

.instrument-detail {
    font-size: 0.82rem;
}

.temperature-extremes {
    font-size: 0.80rem;
    gap: 16px;
    margin-top: 6px;
}

.wind-gust-readout {
    margin-top: 6px;
    padding: 3px 9px;
}


/* ============================================================
   INSTRUMENT VIEW — COMPACT PROPORTIONS V2
   ============================================================ */

.instrument-view {
    gap: 10px;
    padding: 10px;
}

.instrument-card {
    padding: 9px 10px 10px;
}

.instrument-title {
    font-size: 0.76rem;
    margin-bottom: -4px;
}

.instrument-gauge,
.wind-instrument {
    max-width: 198px;
}

.instrument-value {
    font-size: 1.45rem;
}

.instrument-detail {
    font-size: 0.76rem;
}

.temperature-extremes {
    font-size: 0.74rem;
    gap: 12px;
    margin-top: 4px;
}

.wind-gust-readout {
    margin-top: 4px;
    padding: 2px 8px;
}

.wind-gust-label {
    font-size: 0.66rem;
}

.wind-gust-value {
    font-size: 0.82rem;
}


/* ============================================================
   COMPACT GAUGES — LABEL READABILITY
   Keep gauge size; enlarge internal dial markings/text.
   ============================================================ */

.temp-scale-number {
    font-size: 15px;
    font-weight: 900;
}

.pressure-scale-number {
    font-size: 14px;
    font-weight: 900;
}

.gauge-face-caption,
.temp-range-caption {
    font-size: 13px;
    font-weight: 800;
}

.wind-cardinal {
    font-size: 17px;
    font-weight: 900;
}

.wind-intercardinal {
    font-size: 12px;
    font-weight: 900;
}

.temp-tick-major,
.pressure-tick-major,
.wind-tick-cardinal {
    stroke-width: 3.5;
}

.temp-tick-medium,
.pressure-tick-medium,
.wind-tick-major {
    stroke-width: 2.4;
}


/* ============================================================
   BAROMETER — READABILITY REFINEMENT
   ============================================================ */

.pressure-scale-number {
    fill: #29485f;
    font-size: 16px;
    font-weight: 900;
}

.pressure-tick-major {
    stroke: #29485f;
    stroke-width: 4;
}

.pressure-tick-medium {
    stroke: #61798a;
    stroke-width: 2.4;
}

.pressure-tick-minor {
    stroke: #9aabb7;
    stroke-width: 1.1;
}

/* ============================================================
   LIVE INSTRUMENTS
   Real-time gauges supplied by live-gauges.js
   ============================================================ */

.live-instrument-view {
    display: block;
    margin-top: 20px;
    padding: 14px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}


/* ------------------------------------------------------------
   Toolbar / chooser
   ------------------------------------------------------------ */

.live-instrument-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.live-instrument-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: var(--blue-dark);
}

.live-instrument-heading strong {
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-instrument-heading #status {
    color: #66717c;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 600;
}

.live-instrument-heading #status.feed-bad {
    color: #a40000;
    font-weight: 800;
}


.live-instrument-chooser {
    position: relative;
    min-width: 180px;
}

.live-instrument-chooser summary {
    padding: 7px 12px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: white;
    color: var(--blue-dark);

    font-size: 0.80rem;
    font-weight: 800;

    cursor: pointer;
    user-select: none;
}

.live-instrument-options {
    display: grid;
    gap: 7px;

    margin-top: 8px;
    padding: 12px;

    background: white;
    border: 1px solid var(--border);
    border-radius: 9px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.live-instrument-options label {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--text);
    font-size: 0.80rem;
    font-weight: 700;
}

.live-instrument-options input[type="checkbox"] {
    width: 17px;
    height: 17px;
}

#live-show-all,\n#live-chooser-return {
    margin-top: 4px;
    padding: 7px 10px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: #f5f8fa;
    color: var(--blue-dark);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;
}


/* ------------------------------------------------------------
   Responsive gauge grid

   Hidden cards are removed from the grid. Remaining gauges
   automatically repack, so there are no empty instrument slots.
   ------------------------------------------------------------ */

.live-gauge-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 12px;
    grid-column: 1 / -1;
}

.live-gauge-card {
    min-width: 0;
    padding: 12px 12px 14px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fc 100%
        );

    border: 1px solid #ccd9e5;
    border-radius: 12px;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.live-gauge-card[hidden] {
    display: none !important;
}

.live-gauge-title {
    margin-bottom: 2px;

    color: var(--blue-dark);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   Gauge faces
   ------------------------------------------------------------ */

.live-gauge {
    display: block;

    width: 100%;
    max-width: 260px;
    height: auto;

    margin: 0 auto;
}

.live-direction-gauge {
    max-width: 250px;
}

.live-instrument-view .dial-arc {
    fill: none;
    stroke: #303840;
    stroke-width: 5;
    stroke-linecap: round;
}

.live-instrument-view .tick {
    stroke: #69737d;
    stroke-width: 2;
}

.live-instrument-view .tick.major {
    stroke: #303840;
    stroke-width: 3;
}

.live-instrument-view .scale-label {
    fill: #59636c;

    font-size: 11px;

    text-anchor: middle;
    dominant-baseline: middle;
}

.live-instrument-view .needle {
    stroke: #c72b2b;
    stroke-width: 4;
    stroke-linecap: round;

    transform-origin: 150px 150px;

    transition:
        transform 1.2s ease-out;
}

.live-instrument-view .hub-outer {
    fill: #343c44;
}

.live-instrument-view .hub-inner {
    fill: #eeeeee;
}


/* ------------------------------------------------------------
   Digital readouts / freshness
   ------------------------------------------------------------ */

.live-digital {
    margin-top: -4px;

    color: var(--blue-dark);

    font-size: 1.55rem;
    line-height: 1.05;
    font-weight: 900;

    text-align: center;
}

.live-units {
    color: #66717c;

    font-size: 0.88rem;
    font-weight: 700;
}

.live-age {
    margin-top: 5px;

    color: #66717c;

    font-size: 0.74rem;
    font-weight: 600;

    text-align: center;
}

.live-age.feed-bad {
    color: #a40000;
    font-weight: 800;
}

.live-instrument-view .gust-readout {
    margin-top: 6px;

    color: #a66f00;

    font-size: 0.80rem;
    font-weight: 800;

    text-align: center;
}


/* ------------------------------------------------------------
   Tablet / phone
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .live-instrument-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .live-instrument-chooser {
        width: 100%;
    }

    .live-gauge-grid {
        grid-template-columns: 1fr;
    }

    .live-gauge {
        max-width: 285px;
    }
}


/* ============================================================
   LIVE INSTRUMENTS — PHYSICAL GAUGE PRESENTATION V1
   ============================================================ */

.live-gauge-card {
    padding: 10px 10px 12px;
}

.live-gauge {
    max-width: 285px;
}

.live-direction-gauge {
    max-width: 275px;
}


/* Outer metallic-style rim */
.live-instrument-view .gauge-bezel-outer {
    fill: none;
    stroke: #8b99a5;
    stroke-width: 11;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.20));
}


/* Slightly recessed instrument face */
.live-instrument-view .gauge-face-arc {
    fill: none;
    stroke: #e8edf1;
    stroke-width: 20;
    stroke-linecap: round;
}


/* Main scale arc */
.live-instrument-view .dial-arc {
    fill: none;
    stroke: #626d76;
    stroke-width: 8;
    stroke-linecap: butt;
}


/* Colored scale segments */
.live-instrument-view .gauge-band {
    fill: none;
    stroke-width: 9;
    stroke-linecap: butt;
}


/* Tick hierarchy */
.live-instrument-view .tick {
    stroke: #68737c;
    stroke-width: 1.8;
}

.live-instrument-view .tick.major {
    stroke: #29343d;
    stroke-width: 3.4;
}


/* Scale numerals */
.live-instrument-view .scale-label {
    fill: #394751;
    font-size: 12px;
    font-weight: 800;
}


/* Main pointer */
.live-instrument-view .needle {
    stroke: #c72b2b;
    stroke-width: 4.5;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.22));
}


/* Center hub */
.live-instrument-view .hub-outer {
    fill: #3d4851;
    stroke: #f7f9fa;
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

.live-instrument-view .hub-inner {
    fill: #dfe4e8;
}


/* Keep digital value prominent */
.live-digital {
    margin-top: -2px;
    font-size: 1.65rem;
}


/* ============================================================
   LIVE INSTRUMENTS — DEPTH / WIND COMPASS REFINEMENT V2
   ============================================================ */

/* Give the gauge itself more separation from the card */
.live-gauge {
    filter:
        drop-shadow(0 3px 3px rgba(0,0,0,0.16));
}


/* Slightly richer instrument-card depth */
.live-gauge-card {
    box-shadow:
        0 3px 9px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.95);
}


/* A little more bezel definition */
.live-instrument-view .gauge-bezel-outer {
    stroke: #7f8f9b;
    stroke-width: 12;

    filter:
        drop-shadow(0 3px 2px rgba(0,0,0,0.22));
}


/* Deepen the recessed face slightly */
.live-instrument-view .gauge-face-arc {
    stroke: #e3e9ed;
    stroke-width: 21;
}


/* ------------------------------------------------------------
   WIND DIRECTION — match the physical gauge family
   ------------------------------------------------------------ */

.live-direction-gauge {
    overflow: visible;

    filter:
        drop-shadow(0 4px 4px rgba(0,0,0,0.18));
}


/* Stronger cardinal markings */
.live-direction-gauge text {
    fill: #29343d !important;
}


/* Bring compass hub into line with the other gauges */
.live-direction-gauge .hub-outer {
    fill: #3d4851;
    stroke: #f7f9fa;
    stroke-width: 2.8;

    filter:
        drop-shadow(0 2px 1px rgba(0,0,0,0.25));
}

.live-direction-gauge .hub-inner {
    fill: #dfe4e8;
}


/* Slightly stronger red direction pointer */
.live-direction-gauge line[stroke="#c72b2b"] {
    stroke-width: 5.5 !important;

    filter:
        drop-shadow(0 2px 1px rgba(0,0,0,0.20));
}


/* Tail remains subordinate */
.live-direction-gauge line[stroke="#69737d"] {
    stroke-width: 4.2 !important;
    opacity: 0.88;
}


/* ============================================================
   LIVE INSTRUMENTS — SIZE REFINEMENT V3
   Bring gauges back into proportion with the index page.
   ============================================================ */

.live-gauge {
    max-width: 240px;
}

.live-direction-gauge {
    max-width: 230px;
}

.live-gauge-card {
    padding: 9px 10px 11px;
}

.live-digital {
    font-size: 1.55rem;
}


/* ============================================================
   LIVE INSTRUMENTS — CENTER LONE FINAL GAUGE
   ============================================================ */

.live-gauge-grid {
    container-type: inline-size;
}

@container (min-width: 774px) and (max-width: 1035px) {
    .live-gauge-card.live-lone-last {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - 24px) / 3);
    }
}


/* ============================================================
   LIVE FEED — SUBTLE HEALTH HEARTBEAT
   ============================================================ */

.live-instrument-heading #status:not(.feed-bad) {
    display: inline-block;
    width: fit-content;

    padding: 3px 8px;
    border-radius: 10px;

    color: #35674a;
    background: rgba(76, 175, 80, 0.08);

    animation:
        live-feed-heartbeat 2.8s ease-in-out infinite;
}

@keyframes live-feed-heartbeat {
    0%,
    100% {
        background: rgba(76, 175, 80, 0.07);
        box-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }

    50% {
        background: rgba(76, 175, 80, 0.20);
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.14);
    }
}


/* Don't animate warnings/errors */
.live-instrument-heading #status.feed-bad {
    animation: none;
}


/* Respect viewers who disable animation */
@media (prefers-reduced-motion: reduce) {
    .live-instrument-heading #status:not(.feed-bad) {
        animation: none;
        background: rgba(76, 175, 80, 0.12);
    }
}


/* ============================================================
   LIVE FEED — STRONGER HEARTBEAT
   ============================================================ */

.live-instrument-heading #status:not(.feed-bad) {
    color: #245c3a;
    background: rgba(76, 175, 80, 0.12);

    animation:
        live-feed-heartbeat-strong 2.2s ease-in-out infinite;
}

@keyframes live-feed-heartbeat-strong {
    0%,
    100% {
        background: rgba(76, 175, 80, 0.10);
        box-shadow:
            0 0 0 rgba(76, 175, 80, 0);
    }

    50% {
        background: rgba(76, 175, 80, 0.34);
        box-shadow:
            0 0 12px rgba(76, 175, 80, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-instrument-heading #status:not(.feed-bad) {
        animation: none;
        background: rgba(76, 175, 80, 0.18);
    }
}


/* Slow the live-feed heartbeat */
.live-instrument-heading #status:not(.feed-bad) {
    animation-duration: 3.6s;
}