/* ==========================================================================
   Fine Day, theme layer on top of Bootstrap 5 (dark)
   Bootstrap handles layout & components; this file supplies the palette,
   the product-page bands, and the live phone demo. The phone-demo styles
   (.weather-card, .day-row, .detail-*, .modal-*) are transplanted from the
   app's wwwroot/app.css so the demo renders exactly like the phone.
   ========================================================================== */

@font-face {
    font-family: 'InterVariable';
    src: url('fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Shared SumnerD dark palette (same values as /tideline/) */
    --bg: #0d1117;
    --card: rgba(26, 31, 46, 0.9);
    --border: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.42);
    --accent: #4a90d9;
    --accent-hover: #5b9fe4;
    --amber: #fca01a;
    --row-bg: rgba(26, 31, 46, 0.4);
    --row-border: rgba(255, 255, 255, 0.03);

    /* App palette (mirrors the app's wwwroot/app.css :root) */
    --bg-card: rgba(26, 31, 46, 0.9);
    --bg-chip: #1a1f2e;
    --border-app: #252932;
    --border-card: rgba(255, 255, 255, 0.07);
    --border-chip: #2a3448;
    --text-dim: rgba(255, 255, 255, 0.42);
    --text-faint: rgba(255, 255, 255, 0.28);
    --accent-orange: #fca01a;
    --accent-green: #69d84f;
    --accent-red: #e06c75;
    --radius-toggle: 12px;
}

/* Map the palette onto Bootstrap's dark theme tokens */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: 'InterVariable', system-ui, sans-serif;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 74, 144, 217;
    --bs-link-hover-color: var(--accent-hover);
}

body {
    font-family: 'InterVariable', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

/* Brand wordmark: the amber sun from the app icon carries "Day" */
.logo {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.logo-accent {
    color: var(--amber);
}

/* Accent primary button (Bootstrap .btn-primary re-skinned) */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: #3f82c8;
    --bs-btn-active-border-color: #3f82c8;
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(74, 144, 217, 0.28);
}

.btn-primary:hover {
    box-shadow: 0 12px 30px rgba(74, 144, 217, 0.4);
}

/* Outline / ghost button */
.btn-ghost {
    --bs-btn-color: var(--muted);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-border-color: var(--border);
    font-weight: 500;
    border: 1px solid var(--border);
}

/* Surfaces */
.surface-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.band-tint {
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(252, 160, 26, 0.10), transparent 60%),
        rgba(26, 31, 46, 0.35);
    border: 1px solid var(--border);
    border-radius: 24px;
}

.section-divider {
    border-top: 1px solid var(--border);
}

.text-muted-2 {
    color: var(--muted) !important;
}

/* Feature chips row */
.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--row-bg);
    border: 1px solid var(--row-border);
    border-radius: 14px;
    padding: 18px;
    font-size: 15px;
    font-weight: 500;
    height: 100%;
}

.feature i {
    color: var(--accent);
    font-size: 22px;
}

/* Pricing + footer */
.price {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.disclaimer {
    max-width: 720px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}

.demo-caption {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    margin: 14px auto 0;
    max-width: 320px;
}

/* ==========================================================================
   Live phone demo
   A phone-shaped frame (same dimensions as the tideline hero carousel)
   holding a working copy of the app. Everything below the frame styles is
   a straight transplant from the app's wwwroot/app.css: same class names,
   same values, so the demo matches the phone exactly.
   ========================================================================== */

.phone-frame {
    position: relative;
    width: 320px;
    max-width: 86vw;
    aspect-ratio: 9 / 18.5;
    border-radius: 36px;
    border: 9px solid #000;
    background: var(--bg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
}

/* Location header - pill-style location button + settings cog */

.location-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 16px 10px;
    flex-shrink: 0;
}

.location-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-chip);
    border-radius: var(--radius-toggle);
    padding: 8px 12px;
    background: var(--bg-chip);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.location-pill:hover { background: #1f2538; }

.location-pill span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.location-pill i { font-size: 16px; flex-shrink: 0; }
.location-pill i:first-child { color: var(--accent); }
.location-pill i:last-child { color: rgba(255, 255, 255, 0.3); }

.header-btn {
    background: var(--bg-chip);
    border: 1px solid var(--border-chip);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.header-btn:hover { background: #1f2538; color: var(--text); }
.header-btn i { font-size: 18px; }

/* Content area */

.phone-frame .tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.phone-frame .tab-content::-webkit-scrollbar { width: 0; }

.drying-page {
    padding: 0 16px 16px;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #1e2533;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Animated weather card (theme follows the live WMO weather code) */

.weather-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    border: none;
    width: 100%;
    padding: 0;
    text-align: left;
    font-family: inherit;
}

/* Theme: Clear sky (warm orange/gold) */
.weather-card.card-clear { background: linear-gradient(135deg, #F17022, #F6A02E); }
.weather-card.card-clear .weather-circle-1 { background-color: rgba(253,184,19,1); }
.weather-card.card-clear .weather-circle-2 { background-color: rgba(246,140,31,0.7); }
.weather-card.card-clear .weather-circle-3 { background-color: rgba(241,125,45,0.5); }

/* White text fails on the bright amber (2.10:1), so the sunny card runs
   deep brown instead (~8:1 on the light stop). The stats strip below is
   untouched: its dark scrim already carries white comfortably. */
.weather-card.card-clear .weather-card-content { color: #2B1703; }
.weather-card.card-clear .weather-card-part .part-name { opacity: 1; }
.weather-card.card-clear .weather-card-part.part-yes .part-summary { color: rgba(43, 23, 3, 0.95); }
.weather-card.card-clear .weather-card-part.part-maybe .part-summary { color: #4A2E00; }
.weather-card.card-clear .weather-card-part.part-no .part-summary { color: #5C1A10; }

/* Theme: Partly cloudy (blue with warm accent) */
.weather-card.card-partly { background: linear-gradient(135deg, #2E5E85, #43759D); }
.weather-card.card-partly .weather-circle-1 { background-color: rgba(252,200,91,1); }
.weather-card.card-partly .weather-circle-2 { background-color: rgba(169,205,232,0.7); }
.weather-card.card-partly .weather-circle-3 { background-color: rgba(127,178,220,0.5); }

/* Theme: Overcast (steel grey) */
.weather-card.card-overcast { background: linear-gradient(135deg, #414B57, #5E6B78); }
.weather-card.card-overcast .weather-circle-1 { background-color: rgba(180,190,200,1); }
.weather-card.card-overcast .weather-circle-2 { background-color: rgba(126,139,153,0.7); }
.weather-card.card-overcast .weather-circle-3 { background-color: rgba(106,119,132,0.5); }

/* Theme: Fog (muted grey-blue) */
.weather-card.card-fog { background: linear-gradient(135deg, #4C5260, #6A7080); }
.weather-card.card-fog .weather-circle-1 { background-color: rgba(200,204,214,1); }
.weather-card.card-fog .weather-circle-2 { background-color: rgba(157,163,176,0.7); }
.weather-card.card-fog .weather-circle-3 { background-color: rgba(134,140,154,0.5); }

/* Theme: Drizzle (soft blue) */
.weather-card.card-drizzle { background: linear-gradient(135deg, #3A5F82, #4D789C); }
.weather-card.card-drizzle .weather-circle-1 { background-color: rgba(174,202,224,1); }
.weather-card.card-drizzle .weather-circle-2 { background-color: rgba(111,154,184,0.7); }
.weather-card.card-drizzle .weather-circle-3 { background-color: rgba(88,131,164,0.5); }

/* Theme: Freezing (icy teal) */
.weather-card.card-freezing { background: linear-gradient(135deg, #305F6E, #457B8A); }
.weather-card.card-freezing .weather-circle-1 { background-color: rgba(166,220,228,1); }
.weather-card.card-freezing .weather-circle-2 { background-color: rgba(104,174,188,0.7); }
.weather-card.card-freezing .weather-circle-3 { background-color: rgba(78,147,162,0.5); }

/* Theme: Rain (deep blue) */
.weather-card.card-rain { background: linear-gradient(135deg, #2F5580, #5580A8); }
.weather-card.card-rain .weather-circle-1 { background-color: rgba(127,166,203,1); }
.weather-card.card-rain .weather-circle-2 { background-color: rgba(76,119,160,0.7); }
.weather-card.card-rain .weather-circle-3 { background-color: rgba(58,100,145,0.5); }

/* Theme: Showers (darker blue) */
.weather-card.card-showers { background: linear-gradient(135deg, #274A72, #497199); }
.weather-card.card-showers .weather-circle-1 { background-color: rgba(107,151,194,1); }
.weather-card.card-showers .weather-circle-2 { background-color: rgba(62,102,147,0.7); }
.weather-card.card-showers .weather-circle-3 { background-color: rgba(47,85,128,0.5); }

/* Theme: Snow (soft blue-grey) */
.weather-card.card-snow { background: linear-gradient(135deg, #46538A, #66739E); }
.weather-card.card-snow .weather-circle-1 { background-color: rgba(219,226,242,1); }
.weather-card.card-snow .weather-circle-2 { background-color: rgba(166,180,212,0.7); }
.weather-card.card-snow .weather-circle-3 { background-color: rgba(130,144,180,0.5); }

/* Theme: Thunderstorm (deep purple) */
.weather-card.card-storm { background: linear-gradient(135deg, #33335E, #5A4E8C); }
.weather-card.card-storm .weather-circle-1 { background-color: rgba(133,121,192,1); }
.weather-card.card-storm .weather-circle-2 { background-color: rgba(87,76,142,0.7); }
.weather-card.card-storm .weather-circle-3 { background-color: rgba(59,59,107,0.5); }

/* Theme: Hail (dark purple) */
.weather-card.card-hail { background: linear-gradient(135deg, #29294A, #4A3E6E); }
.weather-card.card-hail .weather-circle-1 { background-color: rgba(122,110,176,1); }
.weather-card.card-hail .weather-circle-2 { background-color: rgba(69,60,106,0.7); }
.weather-card.card-hail .weather-circle-3 { background-color: rgba(46,46,78,0.5); }

/* Animated background circles */
.weather-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.weather-circle {
    position: absolute;
    border-radius: 50%;
    animation: weather-pulse 5s ease-in-out infinite;
}

.weather-circle-1 { height: 80px; width: 80px; right: -20px; top: -30px; z-index: 3; animation-duration: 5s; }
.weather-circle-2 { height: 150px; width: 150px; right: -50px; top: -70px; z-index: 2; animation-duration: 7s; }
.weather-circle-3 { height: 200px; width: 200px; right: -50px; top: -100px; z-index: 1; animation-duration: 10s; }

@keyframes weather-pulse {
    50% { transform: scale(1.2); }
}

/* Card content (condition row, headline, day parts) */
.weather-card-content {
    position: relative;
    z-index: 10;
    min-height: 140px;
    padding: 0.75rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #fff;
}

.weather-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.weather-card-condition {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 400;
    font-size: 1.125rem;
}

.weather-card-condition i { font-size: 1.25rem; }

.weather-card-headline {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Day-part breakdown (Morning / Noon / All day) */
.weather-card-parts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.weather-card-part {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.weather-card-part .part-name {
    font-weight: 500;
    flex-shrink: 0;
    /* Fixed-width label column so the summaries line up vertically. */
    min-width: 4.5rem;
    opacity: 0.8;
}

.weather-card-part .part-summary {
    font-weight: 300;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-card-part.part-yes .part-summary { color: rgba(255, 255, 255, 0.95); }
.weather-card-part.part-maybe .part-summary { color: rgba(255, 220, 150, 0.95); }
.weather-card-part.part-no .part-summary { color: rgba(255, 160, 160, 0.9); }

/* Detail strip at the bottom of the card */
.weather-card-detail {
    position: relative;
    z-index: 10;
    background: rgba(0, 0, 0, 0.18);
    padding: 0.5rem 1.25rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem 0.75rem;
    color: #fff;
    overflow: hidden;
}

.weather-card-detail-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem 0.75rem;
    font-size: 0.75rem;
    overflow: hidden;
}

.weather-card-detail-stats span {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    opacity: 0.9;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.weather-card-detail-stats i { font-size: 0.8125rem; flex-shrink: 0; }

/* Error banner */

.error-banner {
    background: rgba(224, 108, 117, 0.07);
    border: 1px solid rgba(224, 108, 117, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--accent-red);
    font-size: 13px;
}

/* Day list */

.day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
}

.day-row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.625rem 0.875rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-toggle);
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--text);
}

.day-row:hover { background: rgba(26, 31, 46, 0.7); }

/* Thin verdict-tinted gradient strip on the left edge */
.day-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--accent-green), rgba(105, 216, 79, 0.1));
}

/* Faint verdict-tinted glow in the top-right corner */
.day-row::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.04;
}

.day-row.badge-yes::before { background: linear-gradient(to bottom, var(--accent-green), rgba(105, 216, 79, 0.1)); }
.day-row.badge-yes::after { background: radial-gradient(circle, var(--accent-green), transparent 70%); }
.day-row.badge-maybe::before { background: linear-gradient(to bottom, var(--accent-orange), rgba(252, 160, 26, 0.1)); }
.day-row.badge-maybe::after { background: radial-gradient(circle, var(--accent-orange), transparent 70%); }
.day-row.badge-no::before { background: linear-gradient(to bottom, var(--accent-red), rgba(224, 108, 117, 0.1)); }
.day-row.badge-no::after { background: radial-gradient(circle, var(--accent-red), transparent 70%); }

/* Row opacity (No-day dimming + the distance/confidence fade) is set
   inline from demo.js so there's a single source of truth. */

.day-row > * {
    position: relative;
    z-index: 1;
}

.day-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.day-row-date {
    font-size: 0.8125rem;
    color: var(--text);
    font-weight: 500;
}

.day-row-windows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    padding-left: 0.25rem;
}

.day-window-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.day-window-item i { font-size: 0.875rem; opacity: 0.6; }

.day-window-none {
    font-size: 0.75rem;
    color: var(--text-dim);
    opacity: 0.5;
    font-style: italic;
}

.day-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1875rem 0.625rem;
    border-radius: 100px;
    white-space: nowrap;
}

.day-badge.badge-yes { background: rgba(105, 216, 79, 0.2); color: var(--accent-green); border: 1px solid rgba(105, 216, 79, 0.3); }
.day-badge.badge-maybe { background: rgba(252, 160, 26, 0.2); color: var(--accent-orange); border: 1px solid rgba(252, 160, 26, 0.3); }
.day-badge.badge-no { background: rgba(224, 108, 117, 0.2); color: var(--accent-red); border: 1px solid rgba(224, 108, 117, 0.3); }

/* Refresh button */

.refresh-button {
    background: var(--bg-chip);
    color: var(--text);
    border: 1px solid var(--border-chip);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-family: inherit;
    margin-top: 8px;
}

.refresh-button:hover:not(:disabled) { background: #1f2538; }
.refresh-button:disabled { opacity: 0.5; cursor: not-allowed; }
.refresh-button i { font-size: 16px; }

/* Settings sheet content */

.more-page {
    padding: 0 16px 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.more-section { margin-bottom: 24px; }

.more-section-header {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    margin-top: 16px;
}

.more-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    margin-bottom: 5px;
}

.more-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.more-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-chip);
    border: 1px solid var(--border-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    flex-shrink: 0;
}

.more-item-icon i { font-size: 18px; }

.more-item-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
}

.more-item-desc {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 2px;
}

.more-item-desc a { color: var(--accent); text-decoration: none; }
.more-item-desc a:hover { text-decoration: underline; }

.more-footer {
    text-align: center;
    padding: 20px 0;
    color: var(--text-faint);
    font-size: 12px;
}

/* Toggle switch */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a3448;
    border-radius: 24px;
    transition: 0.2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text);
    border-radius: 50%;
    transition: 0.2s;
}

.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Modals: bottom sheets scoped INSIDE the phone frame, so they slide up
   over the demo screen, not the whole page. Percent heights resolve
   against the frame, standing in for the app's vh units. */

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-sheet {
    background: var(--bg);
    border: 1px solid var(--border-app);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 78%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #161c2a;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

.modal-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #161c2a;
    flex-shrink: 0;
}

.modal-search-bar i { color: var(--text-dim); font-size: 18px; }

.modal-search-bar input {
    flex: 1;
    min-width: 0;
    background: var(--bg-chip);
    border: 1px solid var(--border-chip);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.modal-search-bar input:focus { border-color: var(--accent); }
.modal-search-bar input::placeholder { color: var(--text-faint); }

.modal-results {
    padding: 8px 20px 20px;
    /* Fixed viewport (~4 rows) so the sheet doesn't resize as results
       stream in — the list scrolls internally instead. */
    flex: 0 0 auto;
    height: 264px;
    max-height: 45%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    margin-bottom: 5px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    transition: background 0.15s;
}

.search-result-item:hover { background: rgba(26, 31, 46, 0.7); }
.search-result-item i { color: var(--accent); font-size: 18px; }

.search-result-suburb { font-size: 15px; font-weight: 500; }
.search-result-name { font-size: 13px; color: var(--text-dim); }

.search-result-empty {
    color: var(--text-faint);
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
}

/* Day detail bottom sheet */

.detail-sheet {
    max-height: 88%;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-grab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 4px;
    flex-shrink: 0;
}

.detail-grab {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #38414f;
    flex-shrink: 0;
}

.detail-close-btn {
    background: var(--bg-chip);
    border: 1px solid var(--border-chip);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.detail-close-btn:hover { background: #1f2538; color: var(--text); }

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 18px 4px;
    flex-shrink: 0;
}

.detail-date {
    color: #f2f5f9;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
}

.detail-location {
    color: #8b93a0;
    font-size: 0.875rem;
    margin-top: 2px;
}

.detail-verdict-badge {
    border-radius: 20px;
    border: 1px solid;
    padding: 6px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    flex-shrink: 0;
}

.detail-summary {
    color: #c3cad4;
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 12px 18px 16px;
    flex-shrink: 0;
}

.detail-section-label {
    color: #7d8695;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 18px 10px;
    flex-shrink: 0;
}

.detail-hour-strip {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 72px;
    margin: 0 18px 4px;
    flex-shrink: 0;
}

.detail-hour-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-width: 0;
    transition: height 0.3s;
}

.detail-hour-labels {
    display: flex;
    justify-content: space-between;
    color: #6b7480;
    font-size: 0.625rem;
    margin: 0 18px 14px;
    flex-shrink: 0;
    gap: 4px;
}

.detail-legend {
    display: flex;
    gap: 12px;
    font-size: 0.6875rem;
    color: #8b93a0;
    margin: 0 18px 16px;
    flex-shrink: 0;
}

.detail-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
}

.detail-stats {
    display: flex;
    gap: 10px;
    padding: 0 18px 22px;
    flex-shrink: 0;
}

.detail-stat {
    flex: 1;
    background: #161d29;
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
}

.detail-stat-label {
    color: #6b7480;
    font-size: 0.6875rem;
    margin-bottom: 5px;
}

.detail-stat-value {
    color: #e8ecf2;
    font-size: 0.9375rem;
    font-weight: 500;
}