/* ==========================================================================
   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 {
    color-scheme: light dark;
}

/* Marketing-page palette (shared with / and /tideline/) */
[data-bs-theme="dark"] {
    --bg: #0d1117;
    --card: rgba(26, 31, 46, 0.9);
    --border: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.60);
    --accent: #4a90d9;
    --accent-rgb: 74, 144, 217;
    --accent-hover: #5b9fe4;
    --on-accent: #ffffff;
    --amber: #fca01a;
    --amber-rgb: 252, 160, 26;
    --high-rgb: 105, 216, 79;
    --low-rgb: 224, 108, 117;
    --row-bg: rgba(26, 31, 46, 0.4);
    --row-border: rgba(255, 255, 255, 0.03);
    --band-bg: rgba(26, 31, 46, 0.35);
    --shadow-said: rgba(0, 0, 0, 0.5);
}

[data-bs-theme="light"] {
    --bg: #f7f9fc;
    --card: #ffffff;
    --border: rgba(13, 17, 23, 0.14);
    --text: #0d1117;
    --muted: #5a6472;
    --accent: #275f9c;
    --accent-rgb: 39, 95, 156;
    --accent-hover: #1d4a76;
    --on-accent: #ffffff;
    --amber: #9a6206;
    --amber-rgb: 154, 98, 6;
    --high-rgb: 30, 102, 17;
    --low-rgb: 192, 57, 47;
    --row-bg: rgba(13, 17, 23, 0.03);
    --row-border: rgba(13, 17, 23, 0.07);
    --band-bg: rgba(13, 17, 23, 0.028);
    --shadow-said: rgba(13, 17, 23, 0.12);
}

[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-emphasis-color: var(--text);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
}

/* App palette (mirrors the app's wwwroot/app.css :root). These are the
   colours INSIDE the phone mockup and never change with the site theme,
   because the mockup is a picture of the real app, which is dark. */
: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;
}

/* Pin the mockup to the dark palette in both site themes. */
.phone-frame {
    --bg: #0d1117;
    --card: rgba(26, 31, 46, 0.9);
    --border: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.60);
    --accent: #4a90d9;
    --accent-rgb: 74, 144, 217;
    --accent-hover: #5b9fe4;
    --on-accent: #ffffff;
    --amber: #fca01a;
    --amber-rgb: 252, 160, 26;
    --high-rgb: 105, 216, 79;
    --low-rgb: 224, 108, 117;
    --row-bg: rgba(26, 31, 46, 0.4);
    --row-border: rgba(255, 255, 255, 0.03);
    --band-bg: rgba(26, 31, 46, 0.35);
    --shadow-said: rgba(0, 0, 0, 0.5);
    color: var(--text);
}

/* 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(var(--accent-rgb), 0.28);
}

.btn-primary:hover {
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), 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(var(--amber-rgb), 0.10), transparent 60%),
        var(--band-bg);
    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(var(--low-rgb), 0.07);
    border: 1px solid rgba(var(--low-rgb), 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(var(--high-rgb), 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(var(--high-rgb), 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(var(--amber-rgb), 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(var(--low-rgb), 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(var(--high-rgb), 0.2); color: var(--accent-green); border: 1px solid rgba(var(--high-rgb), 0.3); }
.day-badge.badge-maybe { background: rgba(var(--amber-rgb), 0.2); color: var(--accent-orange); border: 1px solid rgba(var(--amber-rgb), 0.3); }
.day-badge.badge-no { background: rgba(var(--low-rgb), 0.2); color: var(--accent-red); border: 1px solid rgba(var(--low-rgb), 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 .modal-title {
    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-verdict-badge.badge-yes { color: var(--accent-green); border-color: var(--accent-green); }
.detail-verdict-badge.badge-maybe { color: var(--accent-orange); border-color: var(--accent-orange); }
.detail-verdict-badge.badge-no { color: var(--accent-red); border-color: var(--accent-red); }

.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;
}

/* Theme toggle button (shared look with the homepage) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* animation-iteration-count is the important line. Without it an
       infinite animation keeps looping, just 0.01ms per loop, so a spinner
       or a pulsing circle flickers at full frame rate instead of stopping.
       That is what "animations off" machines were showing. */
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* A spinner that has stopped looks like a hang, so it keeps turning,
       just slowly. Bootstrap's own spinner does the same. */
    .spinner {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Plotstead puts this to the LEFT of its button, which works when the control
   sits alone in the bottom-right corner. Here the toggle is the last item in a
   header row, so a label to its left would land on the store buttons. Dropping
   it below uses empty space instead. */
.theme-said {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
    box-shadow: 0 6px 18px var(--shadow-said);
    opacity: 0;

    /* Never in the way while invisible, and never a tab stop. */
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 20;
}
.theme-said.is-on {
    opacity: 1;
}

/* The glyph swaps between devices, sun and moon, which have different optical
   weights. Fixing the box stops the circle twitching as it changes. */
.theme-toggle i {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
}

/* ==========================================================================
   Embed (/fineday/embed/)
   The phone demo without the phone: the app shell fills the document so it
   can be framed in a Home Assistant dashboard or any other page. <html>
   carries data-embed (demo.js reads the same flag) and data-bs-theme from
   ?theme=, so the marketing palette above already supplies --bg, --text,
   --accent and friends for both themes.
   ========================================================================== */

html[data-embed],
html[data-embed] body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

/* ?bg=transparent: see through to the host page */
html[data-embed][data-bg="transparent"],
html[data-embed][data-bg="transparent"] body {
    background: transparent;
}

.embed-shell {
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.embed-shell .location-header {
    padding-top: 12px;
}

/* No phone frame, so the scroll container is declared here (the phone's
   copy is scoped to .phone-frame). A thin bar says there is more below. */
.embed-shell .tab-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
}

/* The suburb is fixed by the URL, so the pill is a label, not a button. */
.location-pill-static,
.location-pill-static:hover {
    cursor: default;
    background: var(--bg-chip);
}

.location-pill-static i {
    color: var(--accent);
}

/* Sheets cover the document rather than a phone frame. */
html[data-embed] .modal-overlay {
    position: fixed;
}

/* Light embed. The app palette is dark by design (the phone is dark), so
   the light theme swaps in the site's light house tokens and lifts the
   handful of hard-coded dark greys in the detail sheet. */
html[data-embed][data-bs-theme="light"] {
    --bg-card: #ffffff;
    --bg-chip: #ffffff;
    --border-app: rgba(13, 17, 23, 0.14);
    --border-card: rgba(13, 17, 23, 0.10);
    --border-chip: rgba(13, 17, 23, 0.16);
    --text-dim: #5a6472;
    --text-faint: #7b8694;
    --accent-orange: #9a6206;
    --accent-green: #1e6611;
    --accent-red: #c0392f;
}

html[data-embed][data-bs-theme="light"] .spinner {
    border-color: rgba(13, 17, 23, 0.12);
    border-top-color: var(--accent);
}

html[data-embed][data-bs-theme="light"] .day-row {
    box-shadow: 0 1px 3px rgba(13, 17, 23, 0.06);
}

html[data-embed][data-bs-theme="light"] .day-row:hover { background: #f1f4f8; }
html[data-embed][data-bs-theme="light"] .detail-grab { background: #c9d1dc; }
html[data-embed][data-bs-theme="light"] .detail-close-btn:hover { background: #eef1f6; color: var(--text); }
html[data-embed][data-bs-theme="light"] .detail-stat { background: #eef1f6; }
html[data-embed][data-bs-theme="light"] .detail-summary { color: #2b3340; }

html[data-embed][data-bs-theme="light"] .detail-date,
html[data-embed][data-bs-theme="light"] .detail-stat-value {
    color: #0d1117;
}

html[data-embed][data-bs-theme="light"] .detail-location,
html[data-embed][data-bs-theme="light"] .detail-section-label,
html[data-embed][data-bs-theme="light"] .detail-hour-labels,
html[data-embed][data-bs-theme="light"] .detail-legend,
html[data-embed][data-bs-theme="light"] .detail-stat-label {
    color: #5a6472;
}