/* Sky colors are registered so the background can fade between themes */
@property --sky-1 { syntax: '<color>'; inherits: true; initial-value: #0b1430; }
@property --sky-2 { syntax: '<color>'; inherits: true; initial-value: #1b1147; }
@property --glow-a { syntax: '<color>'; inherits: true; initial-value: #5b6cff; }
@property --glow-b { syntax: '<color>'; inherits: true; initial-value: #8a4dff; }

:root {
    --ink: #ffffff;
    --ink-2: #cdd3e4;
    --ink-3: #9aa3bd;
    --card: rgba(12, 17, 34, 0.62);
    --card-line: rgba(255, 255, 255, 0.11);
    --field: rgba(255, 255, 255, 0.07);
    --field-line: rgba(255, 255, 255, 0.16);
    --accent: #3987e5;
    --accent-ink: #9cc6ff;

    /* Mood levels */
    --level-high: #0ca30c;
    --level-medium: #3987e5;
    --level-low: #fab219;
    --level-verylow: #d03b3b;

    /* Factors that raise / lower the score */
    --up: #3987e5;
    --down: #e0564f;

    --radius: 20px;
    --radius-sm: 12px;
}

/* Themes: the sky follows the weather and time of day */
body[data-theme="clear-day"]    { --sky-1: #1d56bd; --sky-2: #0d2760; --glow-a: #ffb347; --glow-b: #4aa8ff; }
body[data-theme="clear-night"]  { --sky-1: #0b1430; --sky-2: #1b1147; --glow-a: #5b6cff; --glow-b: #8a4dff; }
body[data-theme="cloudy"]       { --sky-1: #3a4a68; --sky-2: #19212f; --glow-a: #8fa0bd; --glow-b: #55678a; }
body[data-theme="cloudy-night"] { --sky-1: #1b2233; --sky-2: #0d111a; --glow-a: #55678a; --glow-b: #3b4763; }
body[data-theme="rain"]         { --sky-1: #20426e; --sky-2: #0e1a30; --glow-a: #3a7bd5; --glow-b: #2bb3c0; }
body[data-theme="rain-night"]   { --sky-1: #111e37; --sky-2: #090e1c; --glow-a: #2f62ad; --glow-b: #1f8894; }
body[data-theme="storm"],
body[data-theme="storm-night"]  { --sky-1: #2c2244; --sky-2: #0d0a19; --glow-a: #7a5cff; --glow-b: #ffcf4a; }
body[data-theme="snow"]         { --sky-1: #3f6088; --sky-2: #1d3150; --glow-a: #cfe6ff; --glow-b: #8fb8ff; }
body[data-theme="snow-night"]   { --sky-1: #1c2c47; --sky-2: #0c1424; --glow-a: #8fb8ff; --glow-b: #5d7fb8; }
body[data-theme="fog"]          { --sky-1: #4a5566; --sky-2: #222933; --glow-a: #aab4c4; --glow-b: #6d7a8e; }
body[data-theme="fog-night"]    { --sky-1: #222933; --sky-2: #10141b; --glow-a: #6d7a8e; --glow-b: #4a5566; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--sky-2);
    min-height: 100vh;
    line-height: 1.5;
    transition: --sky-1 1.2s ease, --sky-2 1.2s ease, --glow-a 1.2s ease, --glow-b 1.2s ease;
    -webkit-font-smoothing: antialiased;
}

/* Background */
.sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(165deg, var(--sky-1) 0%, var(--sky-2) 78%);
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}

.orb-a {
    width: 46vmax;
    height: 46vmax;
    top: -18vmax;
    right: -10vmax;
    background: var(--glow-a);
    animation: drift-a 26s ease-in-out infinite alternate;
}

.orb-b {
    width: 40vmax;
    height: 40vmax;
    bottom: -20vmax;
    left: -12vmax;
    background: var(--glow-b);
    opacity: 0.35;
    animation: drift-b 32s ease-in-out infinite alternate;
}

@keyframes drift-a {
    to { transform: translate(-6vmax, 5vmax) scale(1.08); }
}

@keyframes drift-b {
    to { transform: translate(7vmax, -4vmax) scale(1.12); }
}

.page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 36px 20px 28px;
}

/* Masthead */
.masthead {
    text-align: center;
    margin-bottom: 26px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 7px;
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
    border: 1px solid var(--card-line);
}

.brand-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-ai {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    vertical-align: middle;
}

.tagline {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-2);
}

/* Search */
.search {
    /* Above the cards, so the suggestions can drop over them */
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 6px 6px 6px 16px;
    background: var(--card);
    border: 1px solid var(--field-line);
    border-radius: 999px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Places offered while typing a location */
.suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    list-style: none;
    padding: 6px;
    background: #141b33;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.suggestions li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.suggestions li:hover,
.suggestions li.is-active {
    background: rgba(255, 255, 255, 0.12);
}

.suggestion-name {
    color: var(--ink);
    font-weight: 500;
}

.suggestion-where {
    color: var(--ink-3);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.search-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--ink-3);
    flex: none;
}

.search input {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}

.search input::placeholder {
    color: var(--ink-3);
}

.search button,
.activity-form button,
.opt-out-form button,
.subscribe-button {
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0c1122;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.2s;
}

.search button:hover,
.activity-form button:hover,
.opt-out-form button:hover,
.subscribe-button:hover {
    transform: translateY(-1px);
}

.search button:active,
.activity-form button:active,
.opt-out-form button:active,
.subscribe-button:active {
    transform: translateY(0);
}

.search button:disabled,
.activity-form button:disabled,
.opt-out-form button:disabled,
.subscribe-button:disabled {
    opacity: 0.55;
    cursor: progress;
    transform: none;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px auto 26px;
}

.chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--card-line);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ink);
}

.chip.is-active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.search input:focus-visible {
    outline: none;
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    padding: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.card-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.card-note {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-3);
}

.card-head {
    margin-bottom: 14px;
}

.sub-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.results {
    display: grid;
    gap: 18px;
    transition: opacity 0.25s;
}

.results.is-refreshing {
    opacity: 0.45;
    pointer-events: none;
}

.top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rec-card {
    flex: 1;
}

/* Entrance animation */
.reveal {
    opacity: 0;
    transform: translateY(14px);
}

.reveal.is-in {
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rise {
    to { opacity: 1; transform: none; }
}

/* Current weather */
.now-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.location {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.now-meta {
    font-size: 13px;
    color: var(--ink-3);
}

.now-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    flex: none;
    color: var(--ink);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    50% { transform: translateY(-5px); }
}

.now-main {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 6px 0 20px;
}

.now-temp {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.now-temp .unit {
    font-size: 20px;
    font-weight: 500;
    color: var(--ink-2);
    margin-left: 2px;
}

.condition {
    font-size: 17px;
    font-weight: 500;
}

.feels {
    font-size: 13px;
    color: var(--ink-3);
    min-height: 1.5em;
}

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

.stat {
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--field);
}

.stat dt {
    font-size: 12px;
    color: var(--ink-3);
}

.stat dd {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
}

/* Mood */
.mood-top {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 14px 0 16px;
}

.gauge {
    position: relative;
    width: 148px;
    height: 148px;
    flex: none;
    --level: var(--level-medium);
}

.gauge[data-level="high"],
.day-mood[data-level="high"] { --level: var(--level-high); }
.gauge[data-level="medium"],
.day-mood[data-level="medium"] { --level: var(--level-medium); }
.gauge[data-level="low"],
.day-mood[data-level="low"] { --level: var(--level-low); }
.gauge[data-level="verylow"],
.day-mood[data-level="verylow"] { --level: var(--level-verylow); }

.gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-track,
.gauge-fill {
    fill: none;
    stroke-width: 9;
}

/* The track is a lighter step of the fill's own color */
.gauge-track {
    stroke: color-mix(in srgb, var(--level) 24%, transparent);
    transition: stroke 0.6s;
}

.gauge-fill {
    stroke: var(--level);
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), stroke 0.6s;
}

.gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gauge-score {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.gauge-max {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
}

.mood-label {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--field);
    border: 1px solid var(--card-line);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    --level: var(--level-medium);
}

/* Colored dot carries the level; the text stays in ink */
.badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--level);
}

.badge.level-high { --level: var(--level-high); }
.badge.level-medium { --level: var(--level-medium); }
.badge.level-low { --level: var(--level-low); }
.badge.level-verylow { --level: var(--level-verylow); }

.summary {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--field);
    border-left: 3px solid rgba(255, 255, 255, 0.45);
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 18px;
}

.factor-list {
    list-style: none;
}

.factor {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(60px, 1fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}

.factor-name {
    color: var(--ink-2);
}

/* Diverging bar: gains grow right of the centre line, losses grow left */
.factor-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) center / 1px 100% no-repeat,
        rgba(255, 255, 255, 0.07);
}

.factor-bar.is-empty {
    background: none;
}

.factor-fill {
    position: absolute;
    top: 0;
    bottom: 0;
}

.factor-fill.is-up {
    left: 50%;
    background: var(--up);
    border-radius: 0 4px 4px 0;
}

.factor-fill.is-down {
    right: 50%;
    background: var(--down);
    border-radius: 4px 0 0 4px;
}

.factor-value {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.factor-none {
    font-size: 13px;
    color: var(--ink-3);
    padding: 6px 0;
}

/* Forecast */
.forecast-list {
    list-style: none;
}

.day {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.3fr) 48px minmax(150px, 1.2fr) minmax(170px, 1.1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-top: 1px solid var(--card-line);
    border-radius: 10px;
    font-size: 14px;
    transition: background 0.2s;
}

.day:first-child {
    border-top: none;
}

.day:hover {
    background: rgba(255, 255, 255, 0.05);
}

.day-name {
    font-weight: 700;
}

.day-date {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-3);
}

.day-cond {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--ink-2);
}

.day-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--ink);
}

.day-cond-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-rain {
    font-size: 13px;
    color: var(--accent-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.day-temp {
    display: flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.temp-min {
    width: 30px;
    text-align: right;
    color: var(--ink-3);
}

.temp-max {
    width: 30px;
    font-weight: 700;
}

.temp-track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.temp-range {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.78);
}

.day-mood {
    display: grid;
    grid-template-columns: 26px minmax(40px, 1fr) 62px;
    align-items: center;
    gap: 10px;
    --level: var(--level-medium);
}

.day-score {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mood-meter {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--level) 24%, transparent);
    overflow: hidden;
}

.mood-meter-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--level);
    transform-origin: left;
    animation: grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms + 250ms);
}

@keyframes grow {
    from { transform: scaleX(0); }
}

.day-mood-label {
    font-size: 13px;
    color: var(--ink-2);
}

/* Recommendations */
.rec-list {
    list-style: none;
    counter-reset: rec;
    margin-top: 12px;
}

.rec-list li {
    counter-increment: rec;
    position: relative;
    padding: 12px 0 12px 42px;
    font-size: 14px;
    color: var(--ink-2);
    border-top: 1px solid var(--card-line);
}

.rec-list li:first-child {
    border-top: none;
}

.rec-list li::before {
    content: counter(rec);
    position: absolute;
    left: 0;
    top: 11px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--field);
    border: 1px solid var(--card-line);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

/* Activity check */
.activity-form {
    display: flex;
    gap: 10px;
}

.activity-form input {
    flex: 1;
    min-width: 0;
}

.activity-form .button-ghost,
.opt-out-form button {
    background: transparent;
    border: 1px solid var(--field-line);
    color: var(--ink);
}

.activity-form .button-ghost:hover,
.opt-out-form button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.activity-card .chips {
    justify-content: flex-start;
    margin: 12px 0 0;
}

.activity-card .notice {
    margin-top: 14px;
}

.activity-result {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--card-line);
}

.activity-result.is-refreshing {
    opacity: 0.45;
    transition: opacity 0.2s;
}

.activity-headline {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 700;
}

.activity-reasons {
    list-style: none;
    margin-top: 8px;
}

.activity-reasons li,
.activity-suggestion {
    padding: 3px 0;
    font-size: 14px;
    color: var(--ink-2);
}

.activity-suggestion {
    margin-top: 6px;
    color: var(--ink);
}

.activity-result .card-note {
    margin-top: 16px;
}

/* Curiosity */
.curiosity-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.curiosity-prompt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--card-line);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--ink-2);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.curiosity-prompt:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.curiosity-place {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-ink);
}

/* Subscribe */
.subscribe-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 5px;
}

.optional {
    color: var(--ink-3);
    font-weight: 400;
}

.activity-form input,
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--field-line);
    border-radius: 10px;
    background: var(--field);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group select optgroup,
.form-group select option {
    color: #0c1122;
}

.activity-form input::placeholder,
.form-group input::placeholder {
    color: var(--ink-3);
}

.activity-form input:focus,
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.subscribe-button {
    justify-self: start;
    grid-column: 1 / -1;
}

.subscribe-form .notice {
    grid-column: 1 / -1;
}

/* Notices */
.notice {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notice-error {
    background: rgba(208, 59, 59, 0.2);
    border: 1px solid rgba(240, 120, 120, 0.55);
    color: #ffe1e1;
}

.notice-success {
    background: rgba(12, 163, 12, 0.18);
    border: 1px solid rgba(90, 210, 90, 0.5);
    color: #e2ffe2;
}

.notice-info {
    background: rgba(57, 135, 229, 0.18);
    border: 1px solid rgba(120, 170, 240, 0.5);
    color: #e3efff;
}

#unsubscribeBanner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    max-width: 560px;
    margin: 0 auto 20px;
}

.banner-button {
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0c1122;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.banner-button:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Opting out, under the subscribe form */
.opt-out {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--card-line);
}

.subscription-status {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}

.subscription-status + .subscription-status {
    margin-top: 4px;
}

.opt-out-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: 460px;
    margin-top: 12px;
}

.opt-out-form .form-group {
    flex: 1;
    min-width: 0;
}

.opt-out .notice {
    margin-top: 12px;
}

.link-button {
    /* Padding makes a comfortable tap target without moving the text */
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--accent-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:disabled {
    opacity: 0.55;
    cursor: progress;
}

#errorState {
    max-width: 560px;
    margin: 0 auto 20px;
    text-align: center;
}

/* Loading placeholders */
.skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.skeleton {
    height: 300px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.05) 70%) var(--card);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

.skeleton-wide {
    grid-column: 1 / -1;
    height: 220px;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Footer */
.footer {
    margin-top: 26px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
}

.footer a {
    color: var(--ink-2);
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Tablet */
@media (max-width: 860px) {
    .top-grid,
    .skeleton-grid {
        grid-template-columns: 1fr;
    }

    /* Single column: weather, then mood, then recommendations */
    .stack {
        display: contents;
    }

    .now-card { order: 1; }
    .mood-card { order: 2; }
    .rec-card { order: 3; }

    .subscribe-form {
        grid-template-columns: 1fr 1fr;
    }

    /* Three fields in two columns: the email takes the first row */
    .subscribe-form .form-group:first-child {
        grid-column: 1 / -1;
    }

    .curiosity-list {
        grid-template-columns: 1fr;
    }

    .day {
        grid-template-columns: 76px minmax(0, 1fr) 44px minmax(120px, 1fr);
        row-gap: 8px;
    }

    .day-mood {
        grid-column: 2 / -1;
    }
}

/* Phone */
@media (max-width: 520px) {
    .page {
        padding: 24px 16px 20px;
    }

    .card {
        padding: 18px;
    }

    .brand-name {
        font-size: 22px;
    }

    .search button {
        padding: 11px 16px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .mood-top {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .badges {
        justify-content: center;
    }

    .day {
        grid-template-columns: 64px minmax(0, 1fr) 40px;
        padding: 12px 2px;
    }

    .day-temp,
    .day-mood {
        grid-column: 1 / -1;
    }

    .subscribe-form {
        grid-template-columns: 1fr;
    }

    .subscribe-button {
        justify-self: stretch;
    }

    .activity-form {
        flex-wrap: wrap;
    }

    .opt-out-form {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-form input {
        flex-basis: 100%;
    }

    .activity-form button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}