:root {
    --bg: #0b0f1a;
    --panel: rgba(18, 24, 38, 0.72);
    --panel-border: rgba(255, 255, 255, 0.10);
    --text: #eef2fb;
    --muted: #97a2bd;
    --accent: #ffae57;
    --accent-2: #ff6b6b;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    --radius-lg: 24px;
    --radius-md: 16px;

    /* score 1 (worst) -> 5 (best) */
    --score-1: #6b7690;
    --score-2: #8894ad;
    --score-3: #f2c94c;
    --score-4: #ffa94d;
    --score-5: #ff6b4a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, system-ui, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% -10%, rgba(255, 140, 90, 0.16), transparent 40%),
        radial-gradient(circle at 85% 0%, rgba(120, 140, 255, 0.12), transparent 45%),
        var(--bg);
    min-height: 100vh;
}

a {
    color: inherit;
}

.shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 56px;
}

.glass {
    background: var(--panel);
    backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius-lg);
}

/* ---------- topbar ---------- */

/* Packed from the left rather than space-between: the dashboard's topbar
   has a third item (the search box) and the subpages' does not, so
   distributing the free space put the logo mid-row on one and hard right on
   the other. Left-packing pins the logo just after the hamburger on every
   page, and the search box pushes itself to the far right instead. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* .page-shell (settings/login/signup pages) has no max-width of its own -
   only the .dashboard/.card content nested inside it does - so a bare
   .topbar there would span the full page edge to edge instead of lining up
   with the centered content below it. Matches .shell's width so the logo
   sits in the same place across every page. */
.page-shell > .topbar {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.brand {
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.quick-search {
    display: flex;
    gap: 8px;
    flex: 1 1 260px;
    max-width: 360px;
    margin-left: auto;
}

/* Below this the search can no longer share the row, so give it one of its
   own at full width - otherwise margin-left:auto would strand it against
   the right edge with dead space beside it. */
@media (max-width: 700px) {
    .quick-search {
        flex-basis: 100%;
        max-width: none;
        margin-left: 0;
    }
}

.quick-search input {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    padding: 9px 12px;
    font-size: 14px;
}

.quick-search button {
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0 !important;
    color: var(--muted);
}

.icon-button:hover {
    color: var(--text);
}

.icon-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    cursor: pointer;
    order: -1;
}

/* ---------- left-side nav drawer ---------- */

.nav-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(4, 6, 12, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 71;
    width: 280px;
    max-width: 82vw;
    background: #12172a;
    border-right: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.nav-drawer.open {
    transform: translateX(0);
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.nav-drawer-title {
    font-weight: 700;
    font-size: 16px;
}

.nav-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-drawer-links a {
    padding: 12px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-size: 15px;
}

@media (hover: hover) and (pointer: fine) {
    .nav-drawer-links a:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

.nav-drawer-divider {
    height: 1px;
    background: var(--panel-border);
    margin: 10px 0;
}

.nav-drawer-user {
    margin: 0 0 4px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
}

/* ---------- today card (swipeable) ---------- */

.today-card {
    position: relative;
    padding: 0;
    margin-bottom: 16px;
    border-top: 4px solid var(--score-color, var(--accent));
    overflow: hidden;
}

.today-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: rgba(12, 16, 26, 0.55);
    backdrop-filter: blur(6px);
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, color 0.15s ease;
    opacity: 0.55;
}

.today-nav:hover {
    opacity: 1;
    color: var(--text);
}

.today-nav.hidden {
    visibility: hidden;
    pointer-events: none;
}

.today-nav-prev {
    left: 10px;
}

.today-nav-next {
    right: 10px;
}

/* Only show click arrows on devices with a real pointer - touch devices
   already have native swipe, no need to clutter the card with buttons. */
@media (hover: hover) and (pointer: fine) {
    .today-nav {
        display: flex;
    }
}

.today-pager {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.today-pager::-webkit-scrollbar {
    display: none;
}

.today-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    padding: 32px 28px;
    box-sizing: border-box;
}

/* Wherever the click arrows are shown they float over the card, reaching
   44px in from each edge (10px offset + 34px wide), so the page needs to
   clear that or they sit on top of the content - most visibly over the two
   ends of the timeline arc, which spans the full content width. Must come
   after the shorthand padding above, which would otherwise win on equal
   specificity regardless of the media query. */
@media (hover: hover) and (pointer: fine) {
    .today-page {
        padding-left: 56px;
        padding-right: 56px;
    }
}

.today-page-verdict {
    text-align: center;
}

.today-secondary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--panel-border);
    text-align: left;
}

.today-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 0 16px;
}

.today-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--panel-border);
}

.today-dots .dot.active {
    background: var(--accent);
}

.verdict-location {
    margin: 0 0 6px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
}

.verdict-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.verdict-main-secondary {
    justify-content: flex-start;
}

.verdict-icon {
    font-size: 56px;
    line-height: 1;
    flex-shrink: 0;
}

.verdict-main-secondary .verdict-icon {
    font-size: 34px;
}

.verdict-headline {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.verdict-main-secondary .verdict-headline {
    font-size: 19px;
}

/* Event name leads, its quality sits beneath in slightly smaller text -
   the same shape the Earlier-today rows use. */
.verdict-quality {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.verdict-main-secondary .verdict-quality {
    font-size: 15px;
}

.verdict-time {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.verdict-note {
    margin: 14px auto 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.score-1 { --score-color: var(--score-1); }
.score-2 { --score-color: var(--score-2); }
.score-3 { --score-color: var(--score-3); }
.score-4 { --score-color: var(--score-4); }
.score-5 { --score-color: var(--score-5); }

/* ---------- sunset/sunrise curved timeline ---------- */

.sky-timeline {
    margin: 26px 0 4px;
    text-align: left;
}

/* Height follows from the width so the aspect ratio holds - a fixed height
   would reintroduce the stretch. Only min-height is safe here: the SVG must
   always be limited by width, since a height-limited one would be drawn
   narrower than its container and the percentage-positioned labels below
   would no longer line up with the dots above them. */
.sky-timeline-svg {
    width: 100%;
    height: auto;
    min-height: 52px;
    display: block;
    overflow: visible;
}

.sky-timeline-curve {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 2;
}

.sky-timeline-band {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.sky-timeline-band-golden {
    stroke: #ffae57;
}

.sky-timeline-band-blue {
    stroke: #4a7fd4;
}

.sky-timeline-dot {
    fill: var(--muted);
    stroke: #0c101a;
    stroke-width: 2;
}

.sky-timeline-dot.dot-is-golden {
    fill: #ffae57;
}

.sky-timeline-dot.dot-is-blue {
    fill: #4a7fd4;
}

.sky-timeline-dot.dot-is-peak {
    fill: var(--score-5);
}

.sky-timeline-dot.dot-is-now {
    fill: #ffd84d;
}

.sky-timeline-labels {
    position: relative;
    height: 62px;
    margin-top: 6px;
}

.sky-timeline-label {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

/* Two staggered rows: adjacent markers can sit only minutes apart (blue
   hour starts ~9 min after golden hour ends at low latitudes), so
   alternating rows keeps neighbouring labels from overlapping. */
.sky-timeline-label.row-2 {
    top: 32px;
}

.sky-timeline-label.align-center {
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
}

.sky-timeline-label.align-start {
    align-items: flex-start;
    text-align: left;
}

.sky-timeline-label.align-end {
    right: 0;
    left: auto !important;
    align-items: flex-end;
    text-align: right;
}

.sky-timeline-label-time {
    font-size: 11px;
    font-weight: 700;
}

.sky-timeline-label-text {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sky-timeline-label.is-golden .sky-timeline-label-time,
.sky-timeline-label.is-golden .sky-timeline-label-text {
    color: #ffae57;
}

.sky-timeline-label.is-blue .sky-timeline-label-time,
.sky-timeline-label.is-blue .sky-timeline-label-text {
    color: #6f9bea;
}

.sky-timeline-label.is-peak .sky-timeline-label-time,
.sky-timeline-label.is-peak .sky-timeline-label-text {
    color: var(--score-5);
}

/* Ties the reading below the arch to the yellow marker sitting on it. */
.sky-timeline-now-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffd84d;
    margin-right: 7px;
    vertical-align: baseline;
}

.sky-timeline-current-time {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.sky-timeline-current-time strong {
    color: var(--text);
}

/* ---------- day-at-a-glance page ---------- */

.day-segments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.day-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.day-segment-label {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.day-segment-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.day-segment-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

.day-segment-temp {
    font-weight: 700;
    font-size: 16px;
}

.day-segment-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.day-segment-desc {
    font-size: 12px;
    margin-top: 2px;
}

.day-segment-meta {
    color: var(--muted);
    font-size: 10px;
    margin-top: 6px;
}

/* ---------- light-times page ---------- */

.light-list {
    display: grid;
    gap: 4px;
}

.light-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--panel-border);
}

.light-row:last-child {
    border-bottom: none;
}

.light-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.light-label {
    flex: 1;
    font-size: 14px;
}

.light-time {
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

/* ---------- recent history page ---------- */

.history-list {
    display: grid;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 13px;
}

.history-row:last-child {
    border-bottom: none;
}

.history-date {
    color: var(--muted);
    width: 44px;
    flex-shrink: 0;
}

.history-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.history-predicted {
    flex: 1;
    font-weight: 600;
}

.history-observed {
    color: var(--muted);
    text-align: right;
    flex-shrink: 0;
}

/* ---------- meter ---------- */

.meter {
    max-width: 320px;
    margin: 18px auto 0;
}

.today-secondary .meter {
    margin: 12px 0 0;
}

.meter-track {
    height: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--score-color, var(--accent));
    border-radius: 6px;
}

.meter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.meter-compact {
    max-width: 220px;
    margin-top: 12px;
}

.meter-compact .meter-track {
    height: 5px;
}

.meter-mini {
    max-width: 120px;
    margin: 8px auto 0;
}

.meter-mini .meter-track {
    height: 4px;
}

/* ---------- why panel ---------- */

.why-panel {
    margin-bottom: 24px;
    padding: 4px 24px;
}

.why-panel summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    color: var(--muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.why-panel summary::-webkit-details-marker {
    display: none;
}

.why-panel summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
}

.why-panel[open] summary::before {
    transform: rotate(90deg);
}

.why-panel[open] summary {
    color: var(--text);
}

.breakdown {
    padding: 4px 0 20px;
    display: grid;
    gap: 12px;
}

.breakdown-item .breakdown-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.breakdown-bar {
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.breakdown-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 4px;
}

.why-footnote {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

/* ---------- day strip ---------- */

.section-heading {
    margin: 0 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.section-heading-link {
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.section-heading-link:hover {
    text-decoration: underline;
}

.day-card[data-day-href] {
    cursor: pointer;
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .day-card[data-day-href]:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

.day-strip {
    margin-bottom: 32px;
}

/* ---------- swipeable day/history tile strips ---------- */
/* Same scroll-snap + click-arrow pattern as .today-pager/.today-nav,
   generalized so "Next few days" and "Last few days" can share one set of
   rules instead of each getting a copy. */

.tile-strip {
    position: relative;
}

.tile-pager {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tile-pager::-webkit-scrollbar {
    display: none;
}

.tile-page {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    box-sizing: border-box;
}

.tile-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: rgba(12, 16, 26, 0.55);
    backdrop-filter: blur(6px);
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, color 0.15s ease;
    opacity: 0.55;
}

.tile-nav:hover {
    opacity: 1;
    color: var(--text);
}

.tile-nav.hidden {
    visibility: hidden;
    pointer-events: none;
}

.tile-nav-prev {
    left: -4px;
}

.tile-nav-next {
    right: -4px;
}

@media (hover: hover) and (pointer: fine) {
    .tile-nav {
        display: flex;
    }
}

.tile-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
}

.tile-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--panel-border);
}

.tile-dots .dot.active {
    background: var(--accent);
}

.day-card {
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.day-card .day-name {
    display: block;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.day-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.day-event {
    text-align: center;
}

.day-event-icon {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

.day-event-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0 0 8px;
    cursor: zoom-in;
    background: rgba(255, 255, 255, 0.05);
}

.day-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.day-event-label {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.day-event-time {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

.score-text-1 { color: var(--score-1); }
.score-text-2 { color: var(--score-2); }
.score-text-3 { color: var(--score-3); }
.score-text-4 { color: var(--score-4); }
.score-text-5 { color: var(--score-5); }

/* ---------- location search / grid ---------- */

.location-section {
    margin-bottom: 28px;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.location-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: block;
}

.location-card .location-card-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.location-card .location-card-region {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.location-card .location-card-next {
    display: block;
    color: var(--text);
    font-size: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

.location-card.active {
    border: 1px solid var(--accent);
}

/* ---------- error / empty states ---------- */

.state-card {
    padding: 28px;
    text-align: center;
    margin-bottom: 16px;
}

.state-card h1 {
    font-size: 22px;
    margin: 0 0 8px;
}

.state-card p {
    color: var(--muted);
    margin: 0;
}

/* ---------- footer ---------- */

footer {
    margin-top: 40px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

footer a {
    color: var(--muted);
    text-decoration: underline;
}

.footer-links a {
    text-decoration: none;
    margin: 0 8px;
}

/* ---------- settings/login pages reuse a subset of the above ---------- */

/* Top padding and content width match .shell so the topbar - and with it
   the SkyTime logo - lands in exactly the same place on every page. */
.page-shell {
    min-height: 100vh;
    padding: 24px 20px 48px;
}

.dashboard {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.card {
    border-radius: var(--radius-lg);
    padding: 24px;
}

.hero-card, .settings-header {
    border-radius: 28px;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.eyebrow {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--muted);
}

h1, h2, h3 {
    margin: 0 0 10px;
}

.subtitle {
    margin: 0;
    color: var(--muted);
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text);
    cursor: pointer;
}

.button.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
}

.button.ghost {
    background: rgba(255, 255, 255, 0.05);
}

.settings-form {
    display: grid;
    gap: 20px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.compact-grid {
    grid-template-columns: repeat(4, 1fr);
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

input[type="number"], input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="time"], select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

select {
    color-scheme: dark;
}

/* The dropdown popup itself often ignores color-scheme/background and
   renders as the OS's light list regardless - force readable text there
   explicitly rather than relying on the near-white --text color, which is
   invisible against that light background until an item is hovered. */
select option {
    color: #14161f;
    background-color: #ffffff;
}

.obs-filter-bar {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
}

.obs-filter-bar .save-row {
    grid-column: 1 / -1;
}

.obs-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.obs-table-head, .obs-row > summary {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1.1fr 1.3fr 1.1fr;
    gap: 12px;
    align-items: center;
}

.obs-table-head {
    padding: 0 14px 0 28px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.obs-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.obs-row > summary {
    position: relative;
    padding: 14px 14px 14px 28px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}

.obs-row > summary::-webkit-details-marker {
    display: none;
}

.obs-row > summary::before {
    content: '\25B8';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}

.obs-row[open] > summary::before {
    content: '\25BE';
}

.obs-row-detail {
    padding: 0 14px 16px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.obs-row-detail .settings-form {
    margin-top: 14px;
    gap: 14px;
}

.obs-photo-link {
    display: block;
    max-width: 260px;
    margin: 14px 0 4px;
    border-radius: 10px;
    overflow: hidden;
}

.obs-photo-link img {
    display: block;
    width: 100%;
    height: auto;
}

.obs-status {
    font-weight: 600;
    font-size: 13px;
}

.obs-status.is-pending {
    color: var(--accent);
}

.obs-status.is-reviewed {
    color: #41d18d;
}

.save-row {
    display: flex;
    justify-content: flex-end;
}

.score-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.score-choice {
    position: relative;
    cursor: pointer;
}

.score-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.score-choice span {
    display: inline-flex;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.score-choice input:checked + span {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--text);
    border-color: transparent;
}

.score-choice input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.error-card {
    border-left: 4px solid #e26d6d;
}

.success-card {
    border-left: 4px solid #41d18d;
}

code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .settings-grid, .compact-grid {
        grid-template-columns: 1fr;
    }

    .hero-card, .settings-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .obs-table-head {
        display: none;
    }

    .obs-row > summary {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .obs-status {
        margin-top: 2px;
    }

    .location-grid {
        grid-template-columns: 1fr 1fr;
    }

    .day-event-time {
        font-size: 10px;
    }

    .verdict-main {
        flex-direction: column;
        gap: 10px;
    }

    .verdict-main-secondary {
        flex-direction: row;
    }
}

@media (max-width: 420px) {
    .location-grid {
        grid-template-columns: 1fr;
    }

    .day-event-icon {
        font-size: 22px;
    }

    .day-segments {
        grid-template-columns: 1fr;
    }

    .day-segment {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 12px 14px;
        gap: 10px;
    }

    .day-segment-label {
        margin-bottom: 0;
        width: 60px;
        flex-shrink: 0;
    }

    .day-segment-main {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .day-segment-icon {
        margin-bottom: 0;
    }

    .day-segment-info {
        align-items: flex-end;
        text-align: right;
        flex: 1;
        min-width: 0;
    }

    .day-segment-desc {
        margin-top: 0;
        white-space: nowrap;
    }

    .day-segment-meta {
        margin-top: 2px;
    }
}

/* ---------- captured-photo lightbox ---------- */

.lightbox[hidden] {
    display: none;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 8, 14, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lightbox-content {
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 14px;
    object-fit: contain;
}

.lightbox-caption {
    text-align: center;
}

.lightbox-rating {
    display: block;
    font-size: 19px;
    font-weight: 700;
}

.lightbox-meta {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- history table page ---------- */

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.history-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.history-row-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .history-row-link:hover {
        background: rgba(255, 255, 255, 0.07);
    }
}

.history-row-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.history-row-icon {
    font-size: 30px;
}

.history-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-row-date {
    font-weight: 600;
    font-size: 15px;
}

.history-row-meta {
    color: var(--muted);
    font-size: 13px;
}

.history-row-rating {
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- dedicated day page ---------- */

/* Single column even on desktop: each event now carries a full timeline,
   which needs the width for its labels to stay legible. */
.day-detail-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.day-detail-event {
    text-align: center;
    border-top: 4px solid var(--score-color, var(--accent));
}

.day-detail-empty {
    border-top-color: var(--panel-border);
}

.day-detail-icon {
    display: block;
    font-size: 48px;
    line-height: 1;
    margin: 8px 0;
}

.day-detail-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 10px 0;
    cursor: zoom-in;
    background: rgba(255, 255, 255, 0.05);
}

.day-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Event name leads and the quality sits under it, the same hierarchy the
   dashboard verdict uses - which one you're looking at should be the first
   thing readable, not the smallest text on the card. */
.day-detail-title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.day-detail-label {
    margin: 10px 0 4px;
    font-size: 19px;
    font-weight: 700;
}

.day-adjacent-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.day-adjacent-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: var(--text);
}

.day-adjacent-nav a:last-child {
    flex-direction: row-reverse;
    text-align: right;
}

.day-adjacent-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.day-adjacent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.day-adjacent-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.day-adjacent-date {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 640px) {
    .day-detail-grid {
        grid-template-columns: 1fr;
    }

    .day-adjacent-nav {
        grid-template-columns: 1fr;
    }

    .day-adjacent-nav a:last-child {
        flex-direction: row;
        text-align: left;
    }
}