/* Nurburgring Weather Forecast — dark pit-wall look, brand blue from the trackometer app. */

:root {
    /* Lifted again — a genuinely mid-grey slate now rather than a night theme.
       The gauge FACE alone stays true black: that's the mini's glass. */
    --ground: #2e3440;
    --card: #3a4150;
    --edge: #525c6e;
    --ink: #eef1f5;
    --dim: #b6bfcb;
    --brand: #3B8EDE;      /* the app's disc blue (trip.svg) */
    --wet: #4fb3ff;
    --warn: #e6a23c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--ground);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, sans-serif;
    line-height: 1.45;
}

header { padding: 22px 24px 10px; text-align: center; position: relative; }

/* The faint corner marks framing the centred heading — both drained to a quiet grey
   (the artwork is brand-coloured; grayscale + a brightness lift reads as light grey
   on the dark ground). */
.corner-mark { position: absolute; top: 20px; opacity: 0.22; filter: grayscale(1) brightness(1.6); }
.corner-mark.left { left: 24px; height: 44px; width: auto; }
.corner-mark.right { right: 24px; height: 40px; width: auto; }
h1 { font-size: 1.5rem; font-weight: 600; }
.subtitle { color: var(--dim); margin-top: 2px; }
.meta { color: var(--dim); font-size: 0.8rem; margin-top: 6px; }

.divergence {
    margin: 10px 24px;
    padding: 10px 14px;
    border-left: 4px solid var(--warn);
    background: rgba(230, 162, 60, 0.12);
    border-radius: 6px;
    font-size: 0.95rem;
}
.hidden { display: none; }

.maprow {
    display: flex;
    gap: 12px;
    margin: 12px 24px;
    /* With the sector cards gone, the map row IS the page: it takes everything the
       header and footer leave of the window instead of the old 54vh. */
    height: calc(100vh - 225px);
    min-height: 340px;
}

#map {
    flex: 0 0 70%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid var(--edge);
    /* Map gestures stay on the map: touch drags pan the MAP (not the page), and hitting
       a zoom limit never spills the wheel into a page scroll. */
    touch-action: none;
    overscroll-behavior: contain;
}

/* The app's follow button, sitting in the map's top-right; app.js shows it only after
   the user has moved the map off its home framing. */
.follow-btn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    filter: drop-shadow(1.5px 1.5px 3px rgba(0, 0, 0, 0.55));
}

.side {
    flex: 1;                      /* the remaining 30% */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#gauge {
    background: var(--card);      /* matched to the section list's panel, per the user */
    border: 1px solid var(--edge);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;           /* anchors the corner maker's mark */
}

/* BlueFrog's mark in the gauge box's bottom-right: wordmark over the frog, both very
   faint grey — furniture on the glass, not content. */
.gauge-brand {
    position: absolute;
    right: 12px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0.22;
    pointer-events: none;
}
.gauge-brand span {
    color: #9aa3b0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.gauge-brand span strong { font-weight: 700; }
.gauge-brand img {
    width: 20px;
    height: 20px;
    filter: grayscale(1) brightness(1.9);   /* the brand-blue frog, drained to a lighter grey */
}
/* Sized from the height, not the panel width, so the section list below always gets
   enough of the column to show all eight rows without scrolling. Grown with the row
   now that the sector cards no longer need the space back. */
#gauge svg { height: 30vh; width: auto; max-width: 100%; }

/* The Fake / Real weather switch between the gauge and the section list: Fake pins the
   demonstration clouds to sections 5 and 8, Real follows the live per-section readings. */
#mode-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: 10px;
    color: var(--dim);
    font-size: 0.85rem;
    flex: none;
}
.switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.switch input { display: none; }
.switch .slider {
    position: absolute;
    inset: 0;
    background: #2c323d;
    border-radius: 11px;
    transition: background 0.15s;
    cursor: pointer;
}
.switch .slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8ebf0;
    top: 3px;
    left: 3px;
    transition: transform 0.15s;
}
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(20px); }

#side-lower {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: 10px;
    padding: 10px 14px;
    overflow-y: auto;
    min-height: 0;
}

/* The per-section next-rain list living under the gauge: section name on the left,
   the estimated time until rain on the right, headed by the fleet's rain disc. */
.sec-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.sec-list-head svg { width: 22px; height: 22px; margin-right: 40px; }
.sec-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
}
.sec-row:last-child { border-bottom: none; }
.sec-row .num { color: var(--dim); }
.sec-row .name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sec-row .t { color: var(--ink); white-space: nowrap; min-width: 44px; text-align: right; }
.sec-row .rain { color: var(--wet); white-space: nowrap; min-width: 96px; text-align: right; }
.sec-row .rain.dry { color: var(--dim); }

@media (max-width: 900px) {
    .maprow { flex-direction: column; height: auto; }
    #map { flex: none; height: 44vh; }
}

/* The car marker: the trackometer map disc — white ring, angled shadow — with a
   roadster glyph where the app would show the tracker's own artwork. */
.car-marker { filter: drop-shadow(1.5px 1.5px 3px rgba(0, 0, 0, 0.55)); }

/* The badge PNG's own ring is thin at 40 px; this reinstates the marker's proper white
   rim, drawn over the disc's edge so the size stays exactly 40. The round mask crops the
   zoomed artwork, which is how the coupé reads larger without the marker growing. */
.car-badge {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2.5px solid #fff;
    background: #3B8EDE;
    overflow: hidden;
    position: relative;
}
.car-badge img {
    width: 132%;
    height: 132%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* The warning band's rain glyph: a hard one-second blink, no fade. The map's rain
   clouds flash on the same clock. */
#gauge .warn-blink { animation: warn-blink 1s linear infinite; }
.rain-flash { animation: warn-blink 1s linear infinite; }
@keyframes warn-blink {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.sector-dot {
    background: var(--card);
    border: 2px solid var(--brand);
    border-radius: 50%;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer { padding: 14px 24px 24px; color: var(--dim); font-size: 0.75rem; }
footer a { color: var(--brand); }