/* ==========================================================================
   Photography Tools — Camera LCD Dark UI Design System
   ========================================================================== */

/* --- Design tokens ---------------------------------------------------------
   Spacing, radius, and type scales shared by every widget on the photography
   tools dashboard. Scoped to .dash-page so they live alongside the theme
   tokens defined in photography-dashboard.css. Usage rules:

   - Use --pt-space-* for padding / margin / gap
   - Use --pt-radius-* for border-radius (50% stays literal for circles)
   - Use --pt-text-* for font-size, --pt-weight-* for font-weight
   - Never introduce new discrete values outside the scale; if you need
     something in between, pick the closer token and reconsider whether
     the design really needs a new step.
   -------------------------------------------------------------------------- */
.dash-page {
    /* Spacing (2px half-step scale) */
    --pt-space-0-5: 0.125rem;   /*  2px */
    --pt-space-1:   0.25rem;    /*  4px */
    --pt-space-1-5: 0.375rem;   /*  6px */
    --pt-space-2:   0.5rem;     /*  8px */
    --pt-space-2-5: 0.625rem;   /* 10px */
    --pt-space-3:   0.75rem;    /* 12px */
    --pt-space-3-5: 0.875rem;   /* 14px */
    --pt-space-4:   1rem;       /* 16px */
    --pt-space-5:   1.25rem;    /* 20px */
    --pt-space-6:   1.5rem;     /* 24px */
    --pt-space-8:   2rem;       /* 32px */

    /* Border radius */
    --pt-radius-xs: 0.25rem;   /*  4px — chips */
    --pt-radius-sm: 0.375rem;  /*  6px — small buttons */
    --pt-radius-md: 0.5rem;    /*  8px — inputs, cards */
    --pt-radius-lg: 0.75rem;   /* 12px — panels, tiles */
    --pt-radius-xl: 1rem;      /* 16px — large panels */
    --pt-radius-full: 9999px;    /*      — pills */

    /* Type scale */
    --pt-text-2xs:  0.625rem;    /* 10px */
    --pt-text-xs: 0.6875rem;   /* 11px */
    --pt-text-sm: 0.75rem;     /* 12px */
    --pt-text-base: 0.8125rem;   /* 13px */
    --pt-text-md: 0.875rem;    /* 14px */
    --pt-text-lg: 0.9375rem;   /* 15px */
    --pt-text-xl: 1.125rem;    /* 18px */
    --pt-text-2xl:  1.25rem;     /* 20px */
    --pt-text-3xl:  1.375rem;    /* 22px */
    --pt-text-4xl:  1.5rem;      /* 24px */
    --pt-text-5xl:  1.625rem;    /* 26px */
    --pt-text-6xl:  1.875rem;    /* 30px */

    /* Font weights */
    --pt-weight-normal: 400;
    --pt-weight-medium: 500;
    --pt-weight-semi: 600;
    --pt-weight-bold: 700;
}

/* --- Panel (dark card container) --- */
.calc-panel {
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-xl);
    padding: var(--pt-space-6);
    margin-bottom: var(--pt-space-8);
}
@media (min-width: 640px) {
    .calc-panel {
        padding: var(--pt-space-8);
    }
}

.calc-panel__title {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-4xl);
    font-weight: var(--pt-weight-bold);
    color: var(--pt-text);
    margin-bottom: var(--pt-space-1-5);
    line-height: 1.25;
}
@media (min-width: 640px) {
    .calc-panel__title {
        font-size: var(--pt-text-6xl);
    }
}

.calc-panel__desc {
    color: var(--pt-text-muted);
    font-size: var(--pt-text-lg);
    line-height: 1.5;
    margin-bottom: var(--pt-space-6);
}

/* --- Input fields --- */
.calc-input__label {
    display: block;
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-muted);
    margin-bottom: var(--pt-space-1-5);
}

.calc-input__field {
    width: 100%;
    padding: var(--pt-space-2-5) var(--pt-space-3);
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    color: var(--pt-text);
    font-size: var(--pt-text-md);
    line-height: 1.5;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.calc-input__field::placeholder {
    color: var(--pt-text-faint);
}
.calc-input__field:focus {
    outline: none;
    border-color: var(--pt-accent);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
/* Dark select arrow */
.calc-input__field option {
    background-color: var(--pt-surface);
    color: var(--pt-text);
}

/* Sub-label for smaller inputs within custom fields */
.calc-input__sublabel {
    display: block;
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-faint);
    margin-bottom: var(--pt-space-1);
}

/* Custom fields container (e.g., custom drone specs) */
.calc-custom-fields {
    background-color: var(--pt-surface);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-4);
    margin-bottom: var(--pt-space-6);
}
.calc-custom-fields__title {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-secondary);
    margin-bottom: var(--pt-space-3);
}

/* --- Segmented toggle control (replaces radio buttons) --- */
.calc-toggle {
    display: inline-flex;
    background-color: var(--pt-surface);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-1);
    gap: var(--pt-space-0-5);
}

.calc-toggle input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.calc-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-2) var(--pt-space-3-5);
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-muted);
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    white-space: nowrap;
    user-select: none;
}
.calc-toggle__btn:hover {
    color: var(--pt-text-secondary);
}

/* Active state via adjacent sibling of checked radio */
.calc-toggle input[type="radio"]:checked + .calc-toggle__btn {
    background-color: var(--pt-accent);
    color: var(--pt-chrome-bg);
}

/* --- Calculate button --- */
.calc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-3) var(--pt-space-8);
    background-color: var(--pt-accent);
    color: var(--pt-chrome-bg);
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-semi);
    border-radius: var(--pt-radius-full);
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}
.calc-btn:hover {
    background-color: var(--pt-accent-bright);
}
.calc-btn:active {
    background-color: var(--pt-accent);
}
.calc-btn--full-mobile {
    width: 100%;
}
@media (min-width: 640px) {
    .calc-btn--full-mobile {
        width: auto;
    }
}

/* --- Results readout — camera top-plate LCD panel ---
   Recessed dark well with etched label, tabular digit face, and
   amber accent for primary values. Matches the .lens-strip
   aesthetic so the whole dashboard reads as camera hardware. */
.calc-readout {
    position: relative;
    background-color: #0d1420; /* deeper than surface — LCD well */
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    padding: var(--pt-space-2) var(--pt-space-3) var(--pt-space-2);
    overflow: hidden;
    /* Recessed inset — same vocabulary as .lens-strip */
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 1px 0 rgba(255,255,255,0.04);
}
/* Thin amber top rail — the dormant "segment off" glow of an LCD */
.calc-readout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.4375rem;
    right: 0.4375rem;
    height: 1px;
    background-color: rgba(245,158,11,0.18);
    pointer-events: none;
}
/* Faint LCD inner shadow — flat-design replacement for the legacy
   scanline gradient. Solid colors only, no gradients per project policy. */
.calc-readout::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
    opacity: 0.6;
}
.calc-readout > * {
    position: relative;
    z-index: 1;
}

.calc-readout__label {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6a7384; /* dim LCD label */
    margin-bottom: var(--pt-space-0-5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calc-readout__value {
    font-size: var(--pt-text-2xl);
    font-weight: var(--pt-weight-bold);
    color: #d5dce8; /* standard LCD digit — bright off-white */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-family: var(--pt-font-mono);
    line-height: 1.1;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calc-readout__value--primary {
    color: var(--pt-accent-bright); /* the amber "highlighted segment" */
    text-shadow: 0 0 8px rgba(251,191,36,0.25);
}

.calc-readout__value--lg {
    font-size: var(--pt-text-5xl);
}

.calc-readout__note {
    font-size: var(--pt-text-xs);
    color: #7a8392;
    margin-top: var(--pt-space-0-5);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calc-readout__unit {
    font-size: var(--pt-text-sm);
    color: #7a8392;
    font-weight: var(--pt-weight-medium);
    margin-left: var(--pt-space-1);
}

/* Sub-section within readout (e.g., time ranges) */
.calc-readout__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.calc-readout__row + .calc-readout__row {
    margin-top: var(--pt-space-2);
}
.calc-readout__row-label {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
}
.calc-readout__row-value {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-bold);
    color: var(--pt-text);
}
.calc-readout__row-value--primary {
    color: var(--pt-accent-bright);
}

/* Readout section header */
.calc-readout__heading {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-secondary);
    margin-bottom: var(--pt-space-3);
}

/* --- Presets section (ND filter) --- */
.calc-presets {
    border-top: 1px solid var(--pt-border);
    margin-top: var(--pt-space-6);
    padding-top: var(--pt-space-6);
}
.calc-presets__title {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-secondary);
    margin-bottom: var(--pt-space-3);
}

.calc-preset-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--pt-space-2) var(--pt-space-4);
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    color: var(--pt-text-secondary);
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    border-radius: var(--pt-radius-md);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.calc-preset-btn:hover {
    background-color: var(--pt-surface-raised);
    border-color: var(--pt-border-strong);
}

/* Preset result area */
.calc-preset-result {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: var(--pt-space-4);
    margin-top: var(--pt-space-4);
}
/* Override the inner combo rows */
.calc-preset-result .preset-combo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pt-space-1-5) var(--pt-space-3);
    background-color: var(--pt-surface);
    border-radius: var(--pt-radius-md);
    border: 1px solid var(--pt-border-strong);
}
.calc-preset-result .preset-combo-row + .preset-combo-row {
    margin-top: var(--pt-space-1);
}
.calc-preset-result .preset-combo-label {
    font-size: var(--pt-text-md);
    color: var(--pt-text-secondary);
}
.calc-preset-result .preset-combo-value {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-accent-bright);
}

/* --- Location picker --- */
.calc-location {
    background-color: var(--pt-surface);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-4);
    margin-bottom: var(--pt-space-4);
}
.calc-location .calc-input__label {
    color: var(--pt-text-muted);
}
.calc-location .calc-input__field {
    background-color: var(--pt-surface);
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
}
.calc-location__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--pt-space-2) var(--pt-space-4);
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-accent-bright);
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--pt-radius-md);
    cursor: pointer;
    transition: background-color 150ms ease;
    white-space: nowrap;
}
.calc-location__btn:hover {
    background-color: rgba(245, 158, 11, 0.2);
}
.calc-location__status {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
    margin-top: var(--pt-space-2);
}

/* --- Stats grid cards (sun/moon, milky way) --- */
.calc-stat-card {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-4);
}
.calc-stat-card__icon {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-1);
}
.calc-stat-card__label {
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-muted);
}
.calc-stat-card__value {
    font-size: var(--pt-text-xl);
    font-weight: var(--pt-weight-bold);
    color: var(--pt-text);
}
.calc-stat-card__value--sm {
    font-size: var(--pt-text-md);
}
.calc-stat-card__sub {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
}

/* Moon tip / special tip card */
.calc-tip-card {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-4);
    margin-top: var(--pt-space-4);
}
.calc-tip-card__label {
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-muted);
    margin-bottom: var(--pt-space-1);
}
.calc-tip-card__text {
    font-size: var(--pt-text-md);
    color: var(--pt-text-secondary);
}

/* Tips list */
.calc-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.calc-tips-list li {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
    padding: var(--pt-space-0-5) 0;
}
.calc-tips-list li::before {
    content: "\2022";
    color: var(--pt-text-faint);
    margin-right: var(--pt-space-2);
}

/* --- Verdict panel (milky way) — semantic colors stay --- */
.calc-verdict {
    border-radius: var(--pt-radius-lg);
    padding: var(--pt-space-4);
    margin-bottom: var(--pt-space-4);
}
.calc-verdict--excellent {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.calc-verdict--good {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.calc-verdict--fair {
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.calc-verdict--poor {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* --- Trail length estimator / subsection --- */
.calc-subsection {
    border-top: 1px solid var(--pt-border);
    margin-top: var(--pt-space-6);
    padding-top: var(--pt-space-6);
}
.calc-subsection__title {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-secondary);
    margin-bottom: var(--pt-space-2);
}

/* --- Badge (used for circumpolar status, "active now", etc.) --- */
.calc-badge {
    display: inline-block;
    padding: var(--pt-space-1) var(--pt-space-2-5);
    border-radius: var(--pt-radius-full);
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    background-color: var(--pt-accent, #f59e0b);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.calc-badge--muted {
    background-color: var(--pt-bg-elev2, var(--pt-border));
    color: var(--pt-text-muted);
}

/* --- Tab switcher (used in astro-events widget) --- */
.calc-tabs {
    display: flex;
    gap: var(--pt-space-2);
    border-bottom: 1px solid var(--pt-border);
    margin-bottom: var(--pt-space-4);
}
.calc-tabs__btn {
    background: none;
    border: none;
    padding: var(--pt-space-2) var(--pt-space-3-5);
    color: var(--pt-text-muted);
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-semi);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms ease, border-color 150ms ease;
}
.calc-tabs__btn:hover {
    color: var(--pt-text-secondary);
}
.calc-tabs__btn.is-active {
    color: var(--pt-text);
    border-bottom-color: var(--pt-accent, #f59e0b);
}
.calc-tabs__btn:focus-visible {
    outline: 2px solid var(--pt-accent, #f59e0b);
    outline-offset: 2px;
    border-radius: var(--pt-radius-xs);
}

/* --- CSP-friendly text helpers (avoid inline style="color:..."). --- */
.calc-text-muted { color: var(--pt-text-muted); }
.calc-text-faint { color: var(--pt-text-faint); }
.calc-text-secondary { color: var(--pt-text-secondary); }
.calc-text-success { color: #10b981; }
.calc-text-amber   { color: var(--pt-accent); }
.calc-text-accent  { color: var(--pt-accent-bright); }
.calc-text-danger  { color: #ef4444; }

/* Compact status verdict (e.g., "Visible from your location") */
.calc-note {
    font-size: var(--pt-text-base);
    color: var(--pt-text-muted);
    line-height: 1.4;
}
.calc-note--tight { padding: 0.5rem 0; }
.calc-note--hint {
    margin-top: var(--pt-space-3);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
}
.calc-note--verdict {
    margin-top: var(--pt-space-2);
    font-weight: var(--pt-weight-semi);
}
.calc-note--caption {
    margin-top: var(--pt-space-1);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-faint);
    line-height: 1.4;
}

/* Strong sub-text inside a stat card (e.g., "Visible from your location") */
.calc-stat-card__sub--success { color: #10b981; font-weight: var(--pt-weight-semi); }

/* A subsection that shouldn't render its top divider (first one after a tab) */
.calc-subsection--flush {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* A subsection that spans the full grid width (breaks out of parent grid) */
.calc-subsection--span {
    grid-column: 1 / -1;
}

/* Badge inline offset (used inside tab card labels) */
.calc-badge--inline { margin-left: 0.25rem; }

/* Learn-more block typography (shared across widgets) */
.calc-learn__title {
    color: var(--pt-text);
    font-size: var(--pt-text-lg);
    font-weight: var(--pt-weight-semi);
    margin-bottom: var(--pt-space-2);
}
.calc-learn__p {
    color: var(--pt-text-muted);
    font-size: var(--pt-text-md);
    line-height: 1.6;
    margin-bottom: var(--pt-space-3);
}
.calc-learn__p:last-child { margin-bottom: 0; }

/* Timezone note below widget results */
.calc-tz-note {
    margin-top: var(--pt-space-1-5);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-faint);
    text-align: center;
}
.calc-tz-note--block {
    margin-top: var(--pt-space-3);
    font-size: var(--pt-text-sm);
    text-align: left;
}

/* Shadow calculator input row */
.calc-shadow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--pt-space-3);
    align-items: end;
    margin-bottom: var(--pt-space-2-5);
}
@media (max-width: 480px) {
    .calc-shadow-row { grid-template-columns: 1fr; }
}
.calc-shadow-row__label {
    display: block;
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-muted);
    margin-bottom: var(--pt-space-1);
}
.calc-shadow-row__input {
    width: 100%;
    padding: var(--pt-space-2) var(--pt-space-2-5);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    background-color: var(--pt-surface);
    color: var(--pt-text);
    font-size: var(--pt-text-md);
}

/* Milky Way dome legend (below the SVG sky chart) */
.mw-legend {
    display: flex;
    gap: var(--pt-space-4);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--pt-space-2) 0;
    font-size: var(--pt-text-xs);
    font-family: var(--pt-font-ui);
}
.mw-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    color: var(--pt-text-muted);
}
.mw-legend__swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.mw-legend__swatch--milky-way { background-color: #c4b5fd; opacity: 0.6; }
.mw-legend__swatch--gc { background-color: var(--pt-accent-bright); }
.mw-legend__swatch--horizon { background-color: #475569; }
.mw-legend__swatch--moon { background-color: #e2e8f0; }
.mw-legend__swatch--stars { background-color: #e2e8f0; opacity: 0.5; }

/* Milky Way core-window readout + night timebar (below the dome) */
.mw-core-window {
    margin: var(--pt-space-2) 0 0;
}
.mw-core-window__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--pt-space-1);
}
.mw-core-window__3d {
    flex: 0 0 auto;
    background: var(--pt-surface);
    color: var(--pt-accent);
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    font-weight: 600;
    cursor: pointer;
}
.mw-core-window__3d:hover {
    border-color: var(--pt-accent);
    background: var(--pt-surface-raised);
}
.mw-core-window__bar {
    display: block;
    width: 100%;
    height: auto;
}

/* Milky Way widget: full-width vertical stack */
#milky-way-svg-container {
    flex-direction: column;
}
@media (max-width: 500px) {
    #milky-way-svg-container svg {
        max-height: none;
    }
}
#milky-way-key-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pt-space-2-5);
}
@media (max-width: 640px) {
    #milky-way-key-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- SVG diagram container (dark bg) --- */
.calc-diagram {
    margin-top: var(--pt-space-6);
    display: flex;
    justify-content: center;
}

/* --- Sky chart container (stays dark — visualization) --- */
.calc-sky-chart {
    background-color: #111827;
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-4);
    margin-top: var(--pt-space-6);
    display: flex;
    justify-content: center;
    min-height: 220px;
}

/* --- Compass container --- */
.calc-compass {
    margin-top: var(--pt-space-4);
    display: flex;
    justify-content: center;
}

/* --- Timezone label --- */
.calc-timezone {
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
    margin-bottom: var(--pt-space-3);
}

/* --- Long Exposure Table --- */
.calc-panel .le-table {
    width: 100%;
    font-size: var(--pt-text-md);
    border-collapse: collapse;
}
.calc-panel .le-table thead tr {
    background-color: var(--pt-surface);
}
.calc-panel .le-table th {
    padding: var(--pt-space-2) var(--pt-space-3);
    text-align: left;
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--pt-border-strong);
}
.calc-panel .le-table tbody tr {
    border-bottom: 1px solid var(--pt-border);
}
.calc-panel .le-table tbody tr:hover {
    background-color: var(--pt-surface);
}
.calc-panel .le-table td {
    padding: var(--pt-space-2) var(--pt-space-3);
    color: var(--pt-text-secondary);
}
.calc-panel .le-table td:first-child {
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text);
}
/* Effect badges — semantic colors stay */
.calc-panel .le-effect-waterfall {
    background-color: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}
.calc-panel .le-effect-silky {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}
.calc-panel .le-effect-clouds {
    background-color: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}
/* Legend dots */
.calc-panel .le-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-3);
    margin-top: var(--pt-space-3);
}
.calc-panel .le-legend__item {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1-5);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
}
.calc-panel .le-legend__dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--pt-radius-xs);
}
.calc-panel .le-legend__dot--waterfall { background-color: rgba(16, 185, 129, 0.4); }
.calc-panel .le-legend__dot--silky { background-color: rgba(59, 130, 246, 0.4); }
.calc-panel .le-legend__dot--clouds { background-color: rgba(139, 92, 246, 0.4); }

/* ==========================================================================
   Astro Events widget — compact rows, ring markers, glyphs
   ========================================================================== */

/* Astro Events — compact event rows */
.ae-event-strip {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1);
    max-height: 220px;
    overflow-y: auto;
    margin: var(--pt-space-2) 0;
    scrollbar-width: thin;
    scrollbar-color: var(--pt-border) transparent;
}
.ae-row {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    padding: var(--pt-space-1-5) var(--pt-space-2-5);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-page-bg);
    cursor: pointer;
    transition: border-color 120ms ease;
    font-size: var(--pt-text-sm);
    color: var(--pt-text);
    text-align: left;
    width: 100%;
}
.ae-row:hover { border-color: rgba(245, 158, 11, 0.4); }
.ae-row.is-selected {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.05);
}
.ae-row__glyph { flex-shrink: 0; width: 20px; height: 20px; }
.ae-row__glyph svg { width: 20px; height: 20px; display: block; }
.ae-row__name {
    flex: 1;
    min-width: 0;
    font-weight: var(--pt-weight-semi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ae-row__date {
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ae-row__stat {
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
    font-family: var(--pt-font-mono);
    white-space: nowrap;
}
.ae-row__badge {
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--pt-space-0-5) var(--pt-space-1-5);
    border-radius: var(--pt-radius-full);
    white-space: nowrap;
}
.ae-row__badge--good { color: #047857; background: rgba(16, 185, 129, 0.12); }
.ae-row__badge--warn { color: #b45309; background: rgba(245, 158, 11, 0.12); }
.ae-row__badge--muted { color: var(--pt-text-faint); background: var(--pt-surface); }
[data-theme="dark"] .ae-row__badge--good { color: #6ee7b7; }
[data-theme="dark"] .ae-row__badge--warn { color: #fcd34d; }

.ae-row__sky {
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-medium);
    white-space: nowrap;
}

/* SVG ring markers */
.ae-ring-marker { cursor: pointer; }
.ae-ring-marker:hover { opacity: 0.8; }
.ae-ring-marker--dimmed { opacity: 0.15; }

@media (prefers-reduced-motion: reduce) {
    .ae-row { transition: none; }
}

/* Glyphs — shared sizing */
.ae-glyph { display: block; }

/* ============================================================
   Shared empty / loading / error states
   One layout, one typography, one icon set for every widget.
   All values pull from Task 1 tokens — light + dark themes work.
   ============================================================ */
.pt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    min-height: 180px;
    padding: var(--pt-space-6) var(--pt-space-4);
    border-radius: var(--pt-radius-lg);
    background-color: var(--pt-page-bg);
    border: 1px dashed var(--pt-border);
    text-align: center;
}

/* Error states are a quiet single-row notice, never a large dead box —
   the surrounding tool keeps its layout and the failure stays incidental. */
.pt-empty--error {
    flex-direction: row;
    min-height: 0;
    padding: var(--pt-space-2) var(--pt-space-3);
    gap: var(--pt-space-2);
    border-style: solid;
    text-align: left;
}
.pt-empty--error .pt-empty__icon {
    width: 1.125rem;
    height: 1.125rem;
}
.pt-empty--error .pt-empty__sub {
    margin-left: var(--pt-space-1);
}

.pt-empty__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    color: var(--pt-text-faint);
    flex: none;
}

.pt-empty__msg {
    margin: 0;
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-medium);
    color: var(--pt-text-muted);
    line-height: 1.35;
}

.pt-empty__sub {
    margin: 0;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-faint);
    line-height: 1.4;
    max-width: 32ch;
}

/* Loading dot pulse — three dots, staggered. Static under reduced motion. */
.pt-empty__icon--dots .pt-empty__dot {
    opacity: 0.35;
    animation: ptEmptyDot 1.2s ease-in-out infinite;
}
.pt-empty__icon--dots .pt-empty__dot--1 { animation-delay: 0s; }
.pt-empty__icon--dots .pt-empty__dot--2 { animation-delay: 0.15s; }
.pt-empty__icon--dots .pt-empty__dot--3 { animation-delay: 0.3s; }

@keyframes ptEmptyDot {
    0%, 60%, 100% { opacity: 0.25; }
    30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-empty__icon--dots .pt-empty__dot {
        animation: none;
        opacity: 0.6;
    }
}

/* Inline loading pill — for row-level async fills inside a larger layout */
.pt-loading-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1-5);
    padding: var(--pt-space-0-5) var(--pt-space-2);
    border-radius: var(--pt-radius-full);
    background-color: var(--pt-page-bg);
    border: 1px solid var(--pt-border);
    font-size: var(--pt-text-xs);
    font-style: italic;
    color: var(--pt-text-faint);
    line-height: 1.2;
    vertical-align: baseline;
}

.pt-loading-pill__dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--pt-radius-full);
    background-color: var(--pt-text-faint);
    animation: ptPillPulse 1.2s ease-in-out infinite;
}

@keyframes ptPillPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-loading-pill__dot {
        animation: none;
        opacity: 0.6;
    }
}