/* ==========================================================================
   Photography Tools — Instrument Components (shared)

   Loaded by the tools dashboard AND by embed surfaces (tour detail, planner,
   photo spots, traveler dashboard). Everything here is keyed off --pt-*
   tokens; on the dashboard those come from .dash-page, on other pages from
   the .pt-scope wrapper defined at the bottom of this file.

   Flat design only — no gradients, anywhere, ever.
   ========================================================================== */

/* --- Motion tokens (one easing, one duration — see PhotoTools.Motion) --- */
.dash-page,
.pt-scope {
    --pt-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --pt-dur: 240ms;
}

/* ==========================================================================
   Readout typographic scale
   LABEL — tiny uppercase Inter, faint
   VALUE — mono, tabular, the instrument number
   UNIT  — small mono, muted, rides after the value
   ========================================================================== */
.pt-readout {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pt-readout__label {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    white-space: nowrap;
}

.pt-readout__value {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--pt-text);
    white-space: nowrap;
}

.pt-readout--lg .pt-readout__value { font-size: 1.75rem; }
.pt-readout--sm .pt-readout__value { font-size: 1.125rem; }

.pt-readout__value--accent { color: var(--pt-accent); }
.pt-readout__value--ok     { color: var(--pt-ok); }
.pt-readout__value--bad    { color: var(--pt-bad); }

.pt-readout__unit {
    font-family: var(--pt-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--pt-text-muted);
    margin-left: 0.125rem;
}

/* ==========================================================================
   Light Clock (see light-clock.js) — the Sun & Moon hero panorama.
   The canvas holds rendered scene content (a photometric sky); the chassis
   around it stays dead-flat. No gradients here — the sky lives on the canvas.
   ========================================================================== */
.pt-light-clock {
    position: relative;
    margin-bottom: 0.5rem;
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--pt-illust-bg);
}

.pt-light-clock__canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
}

.pt-light-clock__readouts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--pt-chrome-bg);
    border-top: 1px solid var(--pt-border);
}

.pt-light-clock__readouts .pt-readout {
    flex: 0 0 auto;
}

/* ==========================================================================
   Score Ring (see score-ring.js)
   ========================================================================== */
.pt-scorering {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.pt-scorering svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pt-scorering--lg { width: 96px; }
.pt-scorering--md { width: 48px; }
.pt-scorering--sm { width: 20px; }

.pt-scorering--lg svg { width: 96px; height: 96px; }
.pt-scorering--md svg { width: 48px; height: 48px; }
.pt-scorering--sm svg { width: 20px; height: 20px; }

.pt-scorering__num {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    fill: var(--pt-text);
}

.pt-scorering__label {
    font-family: var(--pt-font-ui);
    font-size: 7.5px; /* SVG user units */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pt-scorering__sub {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    text-align: center;
}

/* ==========================================================================
   Instrument warm-up skeletons (see PhotoTools.UI.skeletonHtml)
   Ghosts shaped like the instrument they precede. Stepped-opacity pulse —
   steps(), never a shimmer (a shimmer is a gradient).
   ========================================================================== */
.pt-warmup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    color: var(--pt-border-strong);
    animation: pt-warmup-pulse 1.4s steps(3, end) infinite alternate;
}

.pt-warmup svg { display: block; }

.pt-warmup--row {
    flex-direction: row;
    justify-content: flex-start;
}

.pt-warmup__bar {
    background: var(--pt-surface-raised);
    border-radius: 2px;
    height: 0.625rem;
}

@keyframes pt-warmup-pulse {
    from { opacity: 0.35; }
    to   { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-warmup { animation: none; opacity: 0.5; }
}

/* ==========================================================================
   .pt-scope — instrument token scope for embeds
   The LIGHT (warm cream) instrument palette, mirrored from
   .dash-page[data-theme="light"] in photography-dashboard.css. Embeds match
   the light editorial pages they sit on; the dark instrument chrome is
   opt-in via data-theme="dark" on the .pt-scope root. Keep these values in
   sync with the .dash-page light block.
   ========================================================================== */
.pt-scope {
    --pt-font-ui: 'Inter', system-ui, sans-serif;
    --pt-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
    --pt-font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

    --pt-page-bg: #f4efe7;
    --pt-chrome-bg: #fffdf9;
    --pt-surface: #fbf6f0;
    --pt-surface-raised: #f0e8dc;
    --pt-border: #ede4d9;
    --pt-border-strong: #ddd0be;
    --pt-text: #1c1c1c;
    --pt-text-secondary: #3d3a35;
    --pt-text-muted: #6b6459;
    --pt-text-faint: #8a8174;
    --pt-accent: #d4922a;
    --pt-accent-bright: #a8721e;
    --pt-secondary: #3a9e8f;
    --pt-ok: #059669;
    --pt-bad: #dc2626;
    --pt-illust-bg: #b8d8f0;
    --pt-illust-fill: #7a899e;
    --pt-illust-ground: #8b9a6f;
    --pt-illust-detail: #4a6741;
    --pt-illust-grid: #97b5cc;
    --pt-moon-shadow: #5c564c;
    --pt-moon-lit: #faf7f2;
    --pt-moon-border: #b3a893;

    color: var(--pt-text);
    color-scheme: light;
    font-family: var(--pt-font-ui);
    font-variant-numeric: tabular-nums;
}

/* Opt-in dark instrument chrome for embeds (mirrors the .dash-page dark
   palette). No surface uses it today; set data-theme="dark" on a .pt-scope
   root to get the dark card back. */
.pt-scope[data-theme="dark"] {
    --pt-page-bg: #0f172a;
    --pt-chrome-bg: #111827;
    --pt-surface: #1f2937;
    --pt-surface-raised: #374151;
    --pt-border: #1f2937;
    --pt-border-strong: #374151;
    --pt-text: #f3f4f6;
    --pt-text-secondary: #d1d5db;
    --pt-text-muted: #9ca3af;
    --pt-text-faint: #6b7280;
    --pt-accent: #e0a23c;
    --pt-accent-bright: #edb25a;
    --pt-secondary: #4bb5a4;
    --pt-ok: #10b981;
    --pt-bad: #ef4444;
    --pt-illust-bg: #0f172a;
    --pt-illust-fill: #1e293b;
    --pt-illust-ground: #1e293b;
    --pt-illust-detail: #374151;
    --pt-illust-grid: #253044;
    --pt-moon-shadow: #1e293b;
    --pt-moon-lit: #e2e8f0;
    --pt-moon-border: #475569;

    color-scheme: dark;
}

/* ==========================================================================
   Conditions Ledger — tour detail money surface

   The light instrument card that sits on the cream editorial tour page
   beside the booking widget. Server-rendered-first; the Score Ring re-mounts
   to the same box so there is no layout shift.

   Flat solid colors only — no gradients, no shimmer. Every color is a --pt-*
   token so the card follows the instrument palette.
   ========================================================================== */
.pt-ledger {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pt-ledger__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--pt-border-strong);
    padding-bottom: 0.75rem;
}

.pt-ledger__eyebrow {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-ledger__daterange {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pt-text-secondary);
    white-space: nowrap;
}

.pt-ledger__verdict {
    font-family: var(--pt-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pt-text);
    margin: 0;
}

/* Ring + per-day strip */
.pt-ledger__scorewrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.pt-ledger__ring {
    flex: none;
}

.pt-ledger__days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.pt-ledger__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pt-ledger__daylabel {
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    white-space: nowrap;
}

.pt-ledger__daychip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--pt-page-bg);
}

.pt-ledger__daychip--ok     { background: var(--pt-ok); }
.pt-ledger__daychip--accent { background: var(--pt-accent); }
.pt-ledger__daychip--bad    { background: var(--pt-bad); }

/* Phenomenon readout rows */
.pt-ledger__rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--pt-border-strong);
    padding-top: 0.875rem;
}

.pt-ledger__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pt-ledger__rowname {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-muted);
    width: 5.5rem;
    flex: none;
}

.pt-ledger__rowval {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pt-text);
}

.pt-ledger__rowval--ok             { color: var(--pt-ok); }
.pt-ledger__rowval--accent         { color: var(--pt-accent); }
.pt-ledger__rowval--bad            { color: var(--pt-bad); }
.pt-ledger__rowval--text-faint     { color: var(--pt-text-faint); }
.pt-ledger__rowval--text-secondary { color: var(--pt-text-secondary); }

.pt-ledger__rowmeta {
    font-family: var(--pt-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pt-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Kp pill — solid, band-colored */
.pt-ledger__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pt-page-bg);
}

.pt-ledger__pill--ok         { background: var(--pt-ok); }
.pt-ledger__pill--accent     { background: var(--pt-accent); }
.pt-ledger__pill--bad        { background: var(--pt-bad); }
.pt-ledger__pill--text-faint { background: var(--pt-text-faint); }

/* CTA */
.pt-ledger__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pt-accent);
    text-decoration: none;
    transition: color var(--pt-dur) var(--pt-ease);
}

.pt-ledger__cta:hover { color: var(--pt-accent-bright); }

@media (max-width: 480px) {
    .pt-ledger__scorewrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ==========================================================================
   Scene caption chrome (see PhotoTools.UI.setCaption)
   Location + instant + brand line pinned inside the WebGL showpieces so a
   screenshot carries its own provenance. Flat chip, no gradients.
   ========================================================================== */
.pt-caption {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px 5px;
    pointer-events: none;
    background: rgba(5, 8, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    max-width: 60%;
}

/* Scenes whose top edge is occupied by chrome (button columns, compass
   tapes) pin the caption to the bottom instead. */
.pt-caption--bottom {
    top: auto;
    bottom: 8px;
}

.pt-caption__title {
    font-family: var(--pt-font-display, 'Outfit', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: #f3f4f6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-caption__sub {
    font-family: var(--pt-font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.625rem;
    color: #9ca3af;
}

.pt-caption__brand {
    margin-top: 2px;
    font-family: var(--pt-font-ui, 'Inter', sans-serif);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ==========================================================================
   Conditions Ledger — multi-night moon-dark timebar

   One slim row per tour night: solid twilight bands (day → night) with a thin
   moon-up strip and the highlighted moon-dark window (astro-dark + moon down),
   the best astro shooting window. Flat solid fills only — no gradients.
   ========================================================================== */
.pt-tb {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border-top: 1px solid var(--pt-border-strong);
    padding-top: 0.875rem;
}

.pt-tb__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.pt-tb__title {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-muted);
}

.pt-tb__axis {
    font-family: var(--pt-font-mono);
    font-size: 0.625rem;
    color: var(--pt-text-faint);
}

.pt-tb__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.pt-tb__daylabel {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--pt-text-secondary);
    width: 3rem;
    flex: none;
    text-align: right;
}

.pt-tb__track {
    position: relative;
    flex: 1 1 auto;
    height: 18px;
    min-width: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--pt-illust-bg);
}

.pt-tb__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Solid dark-sky twilight palette (brightest → darkest). */
.pt-tb__band--day      { fill: #3b4a63; }
.pt-tb__band--golden   { fill: #b9772e; }
.pt-tb__band--civil    { fill: #3a4a7a; }
.pt-tb__band--nautical { fill: #26325c; }
.pt-tb__band--astro    { fill: #182545; }
.pt-tb__band--night    { fill: #0b1120; }

.pt-tb__moon { fill: #64748b; }

/* Moon-dark window — the premium astro window, outlined in the ok token. */
.pt-tb__darkwin {
    fill: none;
    stroke: var(--pt-ok);
    stroke-width: 1.4;
}

.pt-tb__moonhrs {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--pt-ok);
    width: 3.25rem;
    flex: none;
    text-align: right;
}

.pt-tb__moonhrs--none {
    color: var(--pt-text-faint);
}

.pt-tb__more {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    color: var(--pt-text-faint);
    margin-top: 0.125rem;
}

.pt-tb__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.pt-tb__key {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-tb__swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    flex: none;
}

.pt-tb__swatch--night   { background: #0b1120; border: 1px solid #26325c; }
.pt-tb__swatch--moon    { background: #64748b; }
.pt-tb__swatch--darkwin { background: transparent; border: 1.5px solid var(--pt-ok); }

/* ==========================================================================
   Conditions Ledger — poster-first "live sky" thumbnail

   A static photo poster linking to the live tool. The image is real sky (not
   chrome), the overlay label is a solid pill — no gradients.
   ========================================================================== */
.pt-ledger__thumb {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--pt-border-strong);
    text-decoration: none;
    line-height: 0;
}

.pt-ledger__thumbimg {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: cover;
}

.pt-ledger__thumblabel {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--pt-chrome-bg);
    color: var(--pt-text);
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
}

.pt-ledger__thumb:hover .pt-ledger__thumblabel {
    color: var(--pt-accent-bright);
}

/* ==========================================================================
   "Tonight at …" homepage module (see tonight-module.js)
   A single light instrument strip on the editorial homepage — the
   funnel's first taste of the tools. Flat solid colors only.
   ========================================================================== */
.pt-tonight {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 14px;
    /* Contain descendant min-content width: without this the strip's
       phantom scrollWidth widens the whole document on narrow phones,
       letting the page pan sideways into blank space. */
    overflow-x: clip;
}

.pt-tonight__lead {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 9rem;
}

.pt-tonight__place {
    font-family: var(--pt-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pt-text);
}

.pt-tonight__ring {
    width: 48px;
    height: 48px;
    flex: none;
}

.pt-tonight__stats {
    display: flex;
    gap: 1.75rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.pt-tonight__cta {
    margin-left: auto;
    font-family: var(--pt-font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pt-accent);
    text-decoration: none;
    white-space: nowrap;
}

.pt-tonight__cta:hover {
    color: var(--pt-accent-bright);
}

@media (max-width: 640px) {
    .pt-tonight__cta { margin-left: 0; }
}

/* ==========================================================================
   Conditions Dashboard — canonical shared conditions component

   The instrument card that ships to every photo-spot detail page and the tour
   tools accordion. Same instrument language as the Conditions Ledger:
   flat --pt-* tokens only, no gradients. Reuses .pt-readout and .pt-ledger__*
   wherever it can; the classes below are the layout chrome unique to the
   dashboard (2x2 card grid, drone card, framed timeline).
   ========================================================================== */
.pt-cd {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pt-cd__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .pt-cd__grid { grid-template-columns: 1fr 1fr; }
}

/* Instrument card chrome — mirrors .pt-ledger proportions, one notch tighter. */
.pt-cd__card {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.pt-cd__card--full { grid-column: 1 / -1; }

.pt-cd__cardhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-cd__cardhead svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    color: var(--pt-text-muted);
}

.pt-cd__cardhead-spread {
    justify-content: space-between;
    gap: 0.75rem;
}

/* Two-column readout grid inside a card. */
.pt-cd__readouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

/* Value + trailing unit share one baseline. */
.pt-cd__vu {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

/* Text-valued readout (a phase word, not an instrument number). */
.pt-readout__value--text {
    font-family: var(--pt-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
}

/* Score card — the Score Ring plus its one-line read. */
.pt-cd__card--score {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pt-cd__scoretip {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--pt-text-muted);
    max-width: 24ch;
    margin: 0;
}

/* Drone card ------------------------------------------------------------- */
.pt-cd-drone__verdict {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--pt-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--pt-page-bg);
}

.pt-cd-drone__verdict--ok   { background: var(--pt-ok); }
.pt-cd-drone__verdict--warn { background: var(--pt-accent); }
.pt-cd-drone__verdict--bad  { background: var(--pt-bad); }

.pt-cd-drone__alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.pt-cd-drone__alert {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--pt-page-bg);
}

.pt-cd-drone__alert--warn { background: var(--pt-accent); }
.pt-cd-drone__alert--bad  { background: var(--pt-bad); }
.pt-cd-drone__alert--info { background: var(--pt-secondary); }

.pt-cd-drone__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

@media (min-width: 640px) {
    .pt-cd-drone__stats { grid-template-columns: repeat(4, 1fr); }
}

.pt-cd-drone__ban {
    border: 1px solid var(--pt-bad);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-family: var(--pt-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pt-bad);
}

.pt-cd-drone__zones-label {
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: 0.375rem;
}

.pt-cd-drone__zones-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.pt-cd-drone__footer {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pt-cd-drone__confidence {
    font-family: var(--pt-font-mono);
    font-size: 0.6875rem;
    color: var(--pt-text-faint);
}

/* Framed 24h timeline — the timeline is its own instrument card so its
   header no longer sits on the bare page background beside the cards above
   it. Chrome only; the SVG internals draw their own plot. */
.pt-cd-timeline {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: 12px;
    padding: 1rem;
}

.pt-cd-timeline__title {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    margin-bottom: 0.5rem;
}

.pt-cd-timeline__plot {
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--pt-chrome-bg);
    /* The timeline SVG reads --color-surface / --color-border for its plot
       fill, axis line and moon-cutout. Re-scope those to instrument tokens
       here so the timeline matches the cards above it; the colored twilight
       and phenomenon bands keep their own hard-coded fills untouched. */
    --color-surface: var(--pt-chrome-bg);
    --color-border: var(--pt-border-strong);
}

.pt-cd-timeline__note {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    color: var(--pt-text-muted);
    margin-top: 0.375rem;
}

/* Warm-up skeleton stack for the whole component. */
.pt-cd__loading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem 0;
}

/* A warm-up skeleton must actually vanish once its slot hydrates: .pt-warmup
   sets display:flex, which otherwise beats a plain .hidden toggle. */
.pt-warmup.hidden { display: none; }