:root {
    --bulma-link-h: 0deg;
    --bulma-link-s: 0%;
    --bulma-link-l: 29%;
    --app-ink: #17343a;
    --app-muted: #698086;
    --app-surface: #f5f8f6;
    --app-panel: #fff;
    --app-line: #dce7e3;
    --app-primary: #0b7478;
    --app-primary-dark: #07575b;
    --app-mint: #dcefe8;
    --app-epic: #087b68;
    --app-solid: #3b7486;
    --app-possible: #bc7928;
    --app-poor: #8b6f66;
    --app-shadow: 0 18px 50px rgb(30 70 66 / 8%);
}

/* Shared application shell and semantic forecast states. */
.app-body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.app-main {
    flex: 1;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    transform: translateY(-200%);
    border-radius: .4rem;
    color: #fff;
    background: var(--app-primary-dark);
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

.app-page {
    padding-block: clamp(3rem, 8vw, 6rem);
}

.app-flashes {
    padding: 1rem 1rem 0;
}

.condition-editor:focus {
    outline: 3px solid rgb(11 116 120 / 25%);
    outline-offset: 3px;
}

.spot-planning__identity,
.spot-condition-result,
.spot-section-heading,
.spot-day-workbench > header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    gap: 1.5rem;
}

.spot-planning__identity {
    margin-block: 1.5rem 2rem;
}

.spot-planning__layout {
    display: grid;
    min-width: 0;
    gap: 2rem;
}

.spot-planning__main {
    min-width: 0;
}

.spot-planning__freshness,
.spot-section-heading > p,
.spot-day-workbench > header > p {
    color: var(--app-muted);
    font-size: .8rem;
}

.spot-planning__freshness.is-stale {
    padding-left: .75rem;
    border-left: 3px solid var(--app-possible);
}

.spot-planning__freshness .app-status {
    margin-top: .25rem;
}

.spot-condition-result {
    padding: 1rem 1.25rem;
    border: 1px solid var(--app-line);
    border-radius: 1rem;
    background: var(--app-surface);
}

.spot-condition-result__answer {
    color: var(--app-primary-dark);
}

.spot-condition-result form {
    width: min(100%, 28rem);
    margin-bottom: 0;
}

.spot-section-heading {
    margin-bottom: 1rem;
}

.spot-day-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.spot-day {
    display: grid;
    min-width: 0;
    min-height: 8rem;
    padding: .85rem;
    grid-template-rows: auto auto auto 1fr;
    gap: .35rem;
    border: 1px solid var(--app-line);
    border-radius: .8rem;
    color: var(--app-ink);
    background: var(--app-panel);
}

.spot-day > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.spot-day small {
    color: var(--app-muted);
    font-size: .7rem;
}

.spot-day:hover,
.spot-day:focus-visible {
    border-color: var(--app-primary);
    color: var(--app-ink);
}

.spot-day:focus-visible {
    outline: 3px solid rgb(11 116 120 / 35%);
    outline-offset: 2px;
}

.spot-day.is-selected {
    border-color: var(--app-solid);
    background: rgb(59 116 134 / 8%);
    box-shadow: 0 0 0 3px rgb(59 116 134 / 14%);
}

.spot-day-workbench {
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--app-line);
    border-radius: 1rem;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.spot-day-workbench[hidden] {
    display: none;
}

.spot-day-workbench .table-container {
    margin-top: 1rem;
}

.admin-user-table th:last-child,
.admin-user-table td:last-child {
    text-align: right;
}

.admin-user-table td:first-child {
    overflow-wrap: anywhere;
}

.spot-evidence {
    margin-top: 1rem;
}

.spot-evidence__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.spot-evidence__heading > p {
    color: var(--app-muted);
    font-size: .75rem;
}

.spot-evidence__grid {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(8.5rem, .24fr) minmax(34rem, 1fr);
    border: 1px solid var(--app-line);
    border-radius: .8rem;
    background: var(--app-panel);
}

.spot-evidence__row {
    display: contents;
}

.spot-evidence__corner,
.spot-evidence__label {
    display: grid;
    min-width: 0;
    padding: .55rem .7rem;
    align-content: center;
    border-right: 1px solid var(--app-line);
    border-bottom: 1px solid var(--app-line);
}

.spot-evidence__corner small,
.spot-evidence__label small {
    color: var(--app-muted);
    font-size: .65rem;
}

.spot-evidence__axis {
    display: flex;
    min-height: 2.75rem;
    padding-inline: .5rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--app-line);
    color: var(--app-muted);
    background: var(--app-surface);
    font-size: .65rem;
}

.spot-evidence__track {
    position: relative;
    display: grid;
    min-height: 3.5rem;
    padding: .45rem 0;
    grid-template-columns: repeat(var(--timeline-hours), minmax(0, 1fr));
    align-items: center;
    border-bottom: 1px solid var(--app-line);
    background-image:
        linear-gradient(90deg,
            rgb(23 52 58 / 8%) 0 calc(var(--sunrise) / var(--timeline-hours) * 100%),
            transparent calc(var(--sunrise) / var(--timeline-hours) * 100%) calc(var(--sunset) / var(--timeline-hours) * 100%),
            rgb(23 52 58 / 8%) calc(var(--sunset) / var(--timeline-hours) * 100%) 100%),
        linear-gradient(90deg,
            transparent 0 calc(var(--sunrise) / var(--timeline-hours) * 100%),
            var(--app-possible) calc(var(--sunrise) / var(--timeline-hours) * 100%) calc(var(--sunrise) / var(--timeline-hours) * 100% + 2px),
            transparent calc(var(--sunrise) / var(--timeline-hours) * 100% + 2px) calc(var(--sunset) / var(--timeline-hours) * 100% - 2px),
            var(--app-possible) calc(var(--sunset) / var(--timeline-hours) * 100% - 2px) calc(var(--sunset) / var(--timeline-hours) * 100%),
            transparent calc(var(--sunset) / var(--timeline-hours) * 100%) 100%);
}

.spot-evidence__interval,
.spot-evidence__quality,
.spot-evidence__context {
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 2.2rem;
    padding: .25rem;
    grid-column: var(--start) / span var(--span);
    place-items: center;
    border: 0;
    border-bottom: 3px solid;
    border-radius: 0;
    color: var(--app-ink);
    background: transparent;
    font-size: .65rem;
    font-weight: 800;
}

.spot-evidence__interval { cursor: pointer; }
.spot-evidence__interval.is-ideal { border-bottom-color: var(--app-epic); }
.spot-evidence__interval.is-degraded { border-bottom-color: var(--app-possible); }
.spot-evidence__interval.is-no_go { border-bottom-color: #a74550; }
.spot-evidence__interval.is-missing { border-bottom: 3px dashed var(--app-muted); }

.spot-evidence__interval:focus-visible {
    z-index: 2;
    outline: 3px solid rgb(11 116 120 / 38%);
    outline-offset: 2px;
}

.spot-evidence__interval.is-selected {
    z-index: 2;
    background: rgb(59 116 134 / 10%);
    outline: 3px solid var(--app-ink);
    outline-offset: -1px;
}

.spot-evidence__label.is-overall,
.spot-evidence__track.is-overall {
    border-bottom: 0;
    background-color: rgb(59 116 134 / 7%);
}

.spot-evidence__quality {
    border: 0;
    border-radius: .4rem;
    color: #fff;
}

.spot-evidence__quality.is-possible { background: var(--app-possible); }
.spot-evidence__quality.is-solid { background: var(--app-solid); }
.spot-evidence__quality.is-epic { background: var(--app-epic); }

.spot-evidence__context {
    border: 1px dashed var(--app-muted);
    border-radius: .35rem;
    color: var(--app-muted);
    background: rgb(255 255 255 / 75%);
}

.spot-evidence__context.is-provisional {
    border-color: var(--app-possible);
    color: #72500f;
    background: #fff8cf;
}

.spot-evidence__empty {
    padding: .65rem;
    grid-column: 1 / -1;
    color: var(--app-muted);
    font-size: .75rem;
}

.spot-evidence__detail {
    padding: 1rem;
    margin-top: .75rem;
    border: 1px solid var(--app-line);
    border-left: 4px solid var(--app-solid);
    border-radius: .75rem;
    background: var(--app-panel);
}

.spot-evidence__detail[hidden] {
    display: none;
}

.spot-evidence__detail h4 {
    margin-block: .15rem .65rem;
    font-weight: 800;
}

.spot-evidence__detail dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.spot-evidence__detail dl > div {
    padding-left: .65rem;
    border-left: 1px solid var(--app-line);
}

.spot-evidence__detail dt,
.spot-evidence__detail > small {
    color: var(--app-muted);
    font-size: .65rem;
}

.spot-evidence__detail dd {
    margin: 0;
    font-size: .8rem;
    font-weight: 750;
}

.spot-hourly-details {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--app-line);
}

.spot-hourly-details summary {
    color: var(--app-primary-dark);
    font-weight: 800;
    cursor: pointer;
}

.spot-day-windows {
    margin-top: 1rem;
}

.spot-day-windows ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.spot-day-windows li {
    padding: .45rem .65rem;
    border-radius: .5rem;
    background: var(--app-surface);
}

.spot-management {
    padding-top: 1.5rem;
    border-top: 1px solid var(--app-line);
}

.spot-management .buttons {
    align-items: stretch;
    flex-direction: column;
}

.spot-management .button {
    justify-content: flex-start;
    white-space: normal;
}

@media screen and (min-width: 769px) {
    .spot-planning__identity,
    .spot-condition-result,
    .spot-section-heading,
    .spot-day-workbench > header {
        align-items: flex-end;
        flex-direction: row;
    }

    .spot-day-overview {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    .spot-planning__layout {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
        align-items: start;
    }

    .spot-management {
        position: sticky;
        top: 1.5rem;
        padding: 1.25rem;
        border: 1px solid var(--app-line);
        border-radius: .9rem;
        background: var(--app-surface);
    }
}

.condition-editor-layout {
    align-items: flex-start;
    margin-inline: 0;
}

.condition-editor-nav {
    padding: 1rem;
    border: 1px solid var(--app-line);
    border-radius: .75rem;
    background: var(--app-surface);
}

.condition-editor-nav .menu-list a,
.condition-editor-nav .menu-list [aria-current="page"] {
    display: block;
    min-height: 44px;
    padding: .75rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--app-ink);
}

.condition-editor-nav .menu-list a:hover {
    background: #fff;
}

.condition-editor-nav .menu-list a:focus-visible {
    outline: 3px solid rgb(11 116 120 / 35%);
    outline-offset: 2px;
}

.condition-editor-nav .menu-list [aria-current="page"] {
    border-color: var(--app-primary);
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-weight: 700;
}

.condition-add-choices {
    padding-top: 1rem;
    border-top: 1px solid var(--app-line);
}

.condition-remove {
    margin-top: 1rem;
}

.condition-management {
    padding: .75rem 1rem;
    color: var(--app-muted);
}

.condition-management summary {
    cursor: pointer;
}

.condition-unsaved {
    margin-block: 1rem;
}

.direction-compass {
    display: grid;
    width: min(100%, 28rem);
    aspect-ratio: 1;
    padding: .75rem;
    margin: 0 auto;
    grid-template: repeat(5, 1fr) / repeat(5, 1fr);
    gap: .35rem;
    border: 1px solid var(--app-line);
    border-radius: 50%;
    background: var(--app-surface);
}

.direction-sector {
    min-width: 44px;
    min-height: 44px;
    border: 2px solid var(--app-line);
    border-radius: 999px;
    color: var(--app-ink);
    background: #fff;
    font-size: clamp(.65rem, 2vw, .8rem);
    font-weight: 700;
    cursor: pointer;
}

.direction-sector:focus-visible {
    outline: 3px solid rgb(11 116 120 / 35%);
    outline-offset: 2px;
}

.direction-sector.is-p {
    border-color: #16835f;
    color: #07513b;
    background: #cdeedc;
}

.direction-sector.is-x {
    border-color: #bb3e49;
    color: #751f27;
    background: #f8d7da;
}

.direction-sector:nth-of-type(1) { grid-area: 1 / 3; }
.direction-sector:nth-of-type(2) { grid-area: 1 / 4; }
.direction-sector:nth-of-type(3) { grid-area: 1 / 5; }
.direction-sector:nth-of-type(4) { grid-area: 2 / 5; }
.direction-sector:nth-of-type(5) { grid-area: 3 / 5; }
.direction-sector:nth-of-type(6) { grid-area: 4 / 5; }
.direction-sector:nth-of-type(7) { grid-area: 5 / 5; }
.direction-sector:nth-of-type(8) { grid-area: 5 / 4; }
.direction-sector:nth-of-type(9) { grid-area: 5 / 3; }
.direction-sector:nth-of-type(10) { grid-area: 5 / 2; }
.direction-sector:nth-of-type(11) { grid-area: 5 / 1; }
.direction-sector:nth-of-type(12) { grid-area: 4 / 1; }
.direction-sector:nth-of-type(13) { grid-area: 3 / 1; }
.direction-sector:nth-of-type(14) { grid-area: 2 / 1; }
.direction-sector:nth-of-type(15) { grid-area: 1 / 1; }
.direction-sector:nth-of-type(16) { grid-area: 1 / 2; }

.direction-compass__center {
    display: grid;
    grid-area: 3 / 3;
    color: var(--app-primary);
    font-size: 2rem;
    place-items: center;
}

.direction-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .85rem;
}

.direction-legend span::before {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    margin-right: .35rem;
    background: #fff;
    border: 1px solid var(--app-line);
    content: '';
}

.direction-legend .is-preferred::before { background: #cdeedc; border-color: #16835f; }
.direction-legend .is-no-go::before { background: #f8d7da; border-color: #bb3e49; }

@media (max-width: 600px) {
    .direction-compass {
        gap: .15rem;
        padding: .35rem;
    }
}

.auth-page {
    display: grid;
    min-height: calc(100vh - 4.75rem);
    padding-block: clamp(2rem, 7vw, 5rem);
    place-items: center;
    background:
        radial-gradient(circle at 15% 20%, rgb(172 220 205 / 38%), transparent 25rem),
        radial-gradient(circle at 85% 80%, rgb(11 116 120 / 10%), transparent 22rem);
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .8fr);
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 1.5rem;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(6rem, 12vw, 10rem) 1.5rem clamp(5rem, 9vw, 8rem);
    background:
        radial-gradient(circle at 50% 30%, rgb(172 220 205 / 34%), transparent 34rem),
        linear-gradient(180deg, #f8faf8, var(--app-surface));
}

.home-hero::before {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgb(11 116 120 / 8%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(11 116 120 / 8%) 1px, transparent 1px);
    background-size: 4rem 4rem;
    content: "";
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 70%, transparent);
}

.home-hero .container {
    position: relative;
}

.home-hero__copy {
    max-width: 54rem;
    margin: 0 auto clamp(4.5rem, 8vw, 7rem);
    text-align: center;
}

.home-kicker {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--app-primary-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.home-kicker span {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--app-epic);
    box-shadow: 0 0 0 .35rem rgb(8 123 104 / 10%);
}

.home-hero__copy .title {
    margin-bottom: 1.75rem;
    font-size: clamp(3.3rem, 7vw, 6.4rem);
    line-height: .96;
    text-wrap: balance;
}

.home-hero__intro {
    max-width: 43rem;
    margin: 0 auto 2.25rem;
    color: var(--app-muted);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.65;
}

.home-hero__actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
}

.home-hero__actions > span {
    color: var(--app-muted);
    font-size: .85rem;
}

.home-hero__actions > span a {
    color: var(--app-ink);
    font-weight: 750;
}

.product-preview {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 1.75rem;
    background: var(--app-panel);
    box-shadow: 0 40px 100px rgb(24 60 56 / 16%);
}

.product-preview__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    min-height: 4.5rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--app-line);
    background: rgb(245 248 246 / 72%);
}

.product-preview__brand,
.product-preview__nav {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.product-preview__brand {
    font-size: .85rem;
}

.product-preview__nav {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
}

.product-preview__nav span {
    padding: .5rem .8rem;
    border-radius: 999px;
}

.product-preview__nav .is-active {
    color: var(--app-primary-dark);
    background: var(--app-mint);
}

.product-preview__avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    place-items: center;
    border-radius: 50%;
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-size: .7rem;
    font-weight: 800;
}

.product-preview__body {
    padding: clamp(2rem, 5vw, 4.5rem);
}

.product-preview__heading {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.product-preview__heading h2 {
    margin-bottom: .4rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 750;
    letter-spacing: -.04em;
}

.product-preview__heading > div > p:last-child,
.home-preview-note,
.home-step p,
.home-section-heading > p:last-child,
.home-final__inner > p:not(.eyebrow) {
    color: var(--app-muted);
}

.product-preview__freshness {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--app-muted);
    font-size: .72rem;
}

.product-preview__freshness span {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--app-epic);
}

.session-card {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-left: 5px solid var(--app-epic);
    border-radius: 1.1rem;
    background: var(--app-panel);
    box-shadow: 0 16px 40px rgb(30 70 66 / 8%);
}

.session-card__identity {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.6rem 1.75rem;
}

.session-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: .9rem;
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-size: 1.6rem;
    font-weight: 800;
}

.session-card__condition-set {
    margin-bottom: .15rem;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.session-card__identity h3 {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.025em;
}

.session-quality {
    padding: .45rem .8rem;
    border-radius: 999px;
    color: #fff;
    background: var(--app-epic);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.session-card__window {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-block: 1px solid var(--app-line);
    background: var(--app-surface);
}

.session-card__window span {
    color: var(--app-muted);
    font-size: .78rem;
}

.session-card__window strong {
    color: var(--app-primary-dark);
    font-size: 1.05rem;
}

.session-card__conditions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--app-line);
}

.session-card__conditions > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .65rem;
    padding: 1.4rem 1.5rem;
}

.session-card__conditions > div + div {
    border-left: 1px solid var(--app-line);
}

.condition-icon {
    grid-row: 1 / 4;
    color: var(--app-primary);
    font-size: 1rem;
}

.session-card__conditions span:not(.condition-icon) {
    color: var(--app-muted);
    font-size: .68rem;
}

.session-card__conditions strong {
    font-size: 1rem;
}

.session-card__conditions small {
    color: var(--app-muted);
    font-size: .65rem;
}

.session-card__timeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
    padding: 1.5rem 1.75rem 1.25rem;
}

.session-card__timeline div {
    display: grid;
    gap: .5rem;
    text-align: center;
}

.timeline-bar {
    height: .45rem;
    border-radius: 999px;
    background: var(--app-line);
}

.timeline-bar--possible {
    background: #d8ae76;
}

.timeline-bar--solid {
    background: var(--app-solid);
}

.timeline-bar--epic {
    background: var(--app-epic);
}

.session-card__timeline small {
    color: var(--app-muted);
    font-size: .58rem;
}

.home-preview-note {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .75rem;
}

.home-how {
    padding: clamp(7rem, 12vw, 11rem) 1.5rem;
}

.home-section-heading {
    max-width: 44rem;
    margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.home-section-heading > p:last-child {
    max-width: 36rem;
    line-height: 1.65;
}

.home-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
}

.home-step {
    padding-top: 1.75rem;
    border-top: 1px solid var(--app-line);
}

.home-step__number {
    display: inline-block;
    margin-bottom: 3rem;
    color: var(--app-primary-dark);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.home-step .title {
    margin-bottom: .75rem;
}

.home-step p {
    line-height: 1.6;
}

.home-final {
    padding: 0 1.5rem clamp(6rem, 12vw, 10rem);
}

.home-final__inner {
    padding: clamp(3rem, 8vw, 6.5rem);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 85% 15%, rgb(255 255 255 / 40%), transparent 24rem),
        var(--app-mint);
    text-align: center;
}

.home-final__inner .title {
    max-width: 18ch;
    margin: 0 auto 1.25rem;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.02;
}

.home-final__inner > p:not(.eyebrow) {
    max-width: 38rem;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

.app-mobile-login {
    display: none;
    margin-left: auto;
    font-size: .85rem;
    font-weight: 700;
}

.auth-card__main,
.auth-card__aside {
    padding: clamp(1.75rem, 5vw, 3.5rem);
}

.auth-card__main .title {
    margin-bottom: .75rem;
}

.auth-intro {
    max-width: 34rem;
    margin-bottom: 2rem;
    color: var(--app-muted);
    line-height: 1.65;
}

.auth-card .field:not(:last-child) {
    margin-bottom: 1.25rem;
}

.auth-card .input {
    border-color: var(--app-line);
    box-shadow: none;
}

.auth-card .input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .125em rgb(11 116 120 / 15%);
}

.auth-card .help,
.auth-card form ul {
    color: var(--app-muted);
    font-size: .8rem;
}

.auth-card form ul {
    margin-top: .4rem;
}

.auth-card form li {
    color: #b42318;
}

.auth-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.75rem;
}

.auth-card__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--app-ink);
    background: var(--app-mint);
}

.auth-card__aside > p:not(.eyebrow) {
    margin-bottom: 1.5rem;
    color: var(--app-muted);
    line-height: 1.6;
}

.auth-card__aside .button {
    margin-top: .25rem;
}

.auth-benefits {
    display: grid;
    gap: 1rem;
    margin: .5rem 0 2rem;
}

.auth-benefits li {
    position: relative;
    padding-left: 1.8rem;
    line-height: 1.5;
}

.auth-benefits li::before {
    position: absolute;
    top: .1rem;
    left: 0;
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 50%;
    color: var(--app-primary-dark);
    background: var(--app-panel);
    content: "✓";
    font-size: .75rem;
    font-weight: 800;
}

.auth-card__signin {
    padding-top: 1.25rem;
    border-top: 1px solid rgb(11 116 120 / 18%);
    font-size: .9rem;
}

.auth-card__signin a {
    display: inline-block;
    margin-left: .25rem;
    font-weight: 750;
}

.auth-policy {
    padding: 1rem;
    border: 1px solid var(--app-line);
    border-radius: .75rem;
    background: var(--app-surface);
}

.auth-policy .checkbox {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    line-height: 1.45;
}

.auth-policy input {
    flex: 0 0 auto;
    margin-top: .25rem;
}

.empty-state,
.error-state {
    max-width: 42rem;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--app-line);
    border-radius: 1.25rem;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
    text-align: center;
}

.empty-state > *,
.error-state > * {
    margin-inline: auto;
}

.empty-state p,
.error-state p {
    max-width: 34rem;
    color: var(--app-muted);
}

.empty-state-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 50%;
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-size: 1.5rem;
    font-weight: 800;
}

.empty-state-hint,
.error-state .button {
    margin-top: 1.5rem;
}

.setup-panel {
    max-width: 46rem;
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--app-line);
    border-radius: 1.25rem;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.setup-panel__intro {
    max-width: 38rem;
}

.setup-checklist {
    display: grid;
    gap: 0;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.setup-step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--app-muted);
    border-top: 1px solid var(--app-line);
}

.setup-step:last-child {
    border-bottom: 1px solid var(--app-line);
}

.setup-step.is-current {
    color: var(--app-text);
}

.setup-step.is-complete {
    color: var(--app-primary-dark);
}

.setup-step__marker {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 2px solid currentcolor;
    border-radius: 50%;
    font-weight: 800;
}

.setup-step p {
    color: var(--app-muted);
}

.dashboard-section {
    max-width: 64rem;
}

.opportunity-group + .opportunity-group {
    margin-top: 2rem;
}

.dashboard-opportunity {
    display: block;
    height: 100%;
    color: inherit;
}

.dashboard-opportunity:hover,
.dashboard-opportunity:focus-visible {
    border-color: var(--app-primary);
    color: inherit;
}

.dashboard-overviews {
    display: grid;
    gap: 1.25rem;
}

.dashboard-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--app-line);
    border-radius: .75rem;
    overflow: hidden;
}

.dashboard-day {
    min-width: 0;
    padding: 1rem;
}

.dashboard-day + .dashboard-day {
    border-left: 1px solid var(--app-line);
}

.dashboard-home {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.dashboard-home__heading {
    margin-bottom: 2.5rem;
}

.dashboard-planning-horizon {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 2.5rem;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: .75rem;
    overflow: hidden;
    list-style: none;
}

.dashboard-planning-day {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: .75rem 1rem;
}

.dashboard-planning-day + .dashboard-planning-day {
    border-left: 1px solid var(--app-line);
}

.dashboard-planning-day:nth-child(3) {
    border-left: 0;
}

.dashboard-planning-day:nth-child(n + 3) {
    border-top: 1px solid var(--app-line);
}

.dashboard-planning-day__label {
    font-weight: 800;
}

.dashboard-planning-day__date {
    color: var(--app-muted);
    font-size: .8rem;
}

.dashboard-four-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-calendar-day {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--app-line);
    border-radius: 1rem;
    background: var(--app-panel);
}

.dashboard-calendar-day > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--app-line);
}

.dashboard-day-main,
.dashboard-day-possible {
    display: grid;
    gap: .65rem;
    margin-top: .8rem;
}

.dashboard-day-opportunity {
    display: grid;
    gap: .15rem;
    padding: .75rem;
    border-left: 4px solid var(--app-epic);
    border-radius: .45rem;
    color: inherit;
    background: var(--app-surface);
}

.dashboard-day-opportunity.quality-solid {
    border-left-color: var(--app-solid);
}

.dashboard-day-opportunity__quality {
    color: var(--app-primary-dark);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-day-opportunity .app-status {
    margin: .25rem 0 0;
}

.dashboard-day-possible a {
    color: var(--app-muted);
    font-size: .78rem;
}

.dashboard-muted {
    margin-top: .9rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.dashboard-raw-place {
    display: block;
    margin-top: .9rem;
    color: inherit;
}

.raw-wind-strip {
    display: flex;
    gap: 1px;
    align-items: end;
    height: 2.5rem;
    margin-top: .45rem;
}

.raw-wind-strip span {
    flex: 1 1 0;
    min-width: 1px;
    height: max(3px, var(--raw-wind));
    border-radius: 2px 2px 0 0;
    background: #a9b5b7;
}

.dashboard-closest-calls {
    margin-top: 4rem;
}

.dashboard-closest-calls__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-closest-call {
    height: 100%;
}

.dashboard-closest-call__topline,
.dashboard-closest-call__footer {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.dashboard-closest-call__topline .app-status,
.dashboard-closest-call__footer .app-status {
    margin: 0;
}

.dashboard-closest-call__condition-set,
.dashboard-closest-call__reason {
    color: var(--app-muted);
}

.dashboard-closest-call__time,
.dashboard-closest-call__reason {
    margin-top: 1rem;
}

.dashboard-closest-call__footer {
    padding-top: 1rem;
    border-top: 1px solid var(--app-line);
    margin-top: 1.25rem;
}

.dashboard-spots {
    margin-top: 4rem;
}

.dashboard-spot-card + .dashboard-spot-card {
    margin-top: 1.25rem;
}

.dashboard-spot-card__heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dashboard-spot-card__heading p,
.dashboard-spot-day span {
    color: var(--app-muted);
}

.dashboard-spot-card__freshness {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.dashboard-spot-card__freshness .app-status {
    margin: 0;
}

.dashboard-condition-set-results {
    display: grid;
    gap: .75rem;
}

.dashboard-condition-set-result {
    display: grid;
    gap: .25rem;
    padding: .85rem 1rem;
    border-left: 4px solid var(--app-epic);
    border-radius: .55rem;
    color: inherit;
    background: var(--app-surface);
}

.dashboard-condition-set-result.quality-solid {
    border-left-color: var(--app-solid);
}

.dashboard-condition-set-result.quality-possible {
    border-left-color: var(--app-primary);
}

.dashboard-condition-set-result.quality-poor,
.dashboard-condition-set-result.quality-nogo {
    border-left-color: var(--app-muted);
}

.dashboard-condition-set-result:hover,
.dashboard-condition-set-result:focus-visible {
    color: inherit;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 30%, transparent);
}

.dashboard-condition-set-result span,
.dashboard-condition-set-result small {
    color: var(--app-muted);
}

.dashboard-condition-set-result .app-status {
    margin: .2rem 0 0;
}

.dashboard-spot-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: .75rem;
}

.dashboard-spot-day {
    min-width: 0;
    padding: .85rem;
}

.dashboard-spot-day + .dashboard-spot-day {
    border-left: 1px solid var(--app-line);
}

.dashboard-spot-day h4 {
    margin-bottom: .5rem;
    font-size: .78rem;
    font-weight: 800;
}

.dashboard-spot-day a,
.dashboard-spot-day > span {
    display: grid;
    gap: .2rem;
    color: inherit;
    font-size: .8rem;
}

@media (min-width: 1024px) {
    .dashboard-planning-horizon {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-planning-day:nth-child(3) {
        border-left: 1px solid var(--app-line);
    }

    .dashboard-planning-day:nth-child(n + 3) {
        border-top: 0;
    }
}

@media (max-width: 768px) {
    .dashboard-four-days,
    .dashboard-spot-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-closest-calls__grid {
        grid-template-columns: 1fr;
    }

    .dashboard-spot-day:nth-child(3) {
        border-left: 0;
    }

    .dashboard-spot-day:nth-child(n + 3) {
        border-top: 1px solid var(--app-line);
    }

    .dashboard-spot-card__heading,
    .dashboard-spot-card__freshness {
        align-items: flex-start;
        flex-direction: column;
    }
}

.legal-copy {
    max-width: 46rem !important;
}

.app-status {
    --status-color: var(--app-muted);
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--status-color);
    font-size: .78rem;
    font-weight: 750;
}

.app-status-marker {
    width: .65rem;
    height: .65rem;
    border: 2px solid currentcolor;
    border-radius: 50%;
    background: currentcolor;
    box-shadow: inset 0 0 0 2px var(--app-panel);
}

.app-status-detail::before {
    content: "·";
    margin-right: .45rem;
}

.app-status--epic,
.app-status--high,
.app-status--current {
    --status-color: #087b68;
}

.app-status--solid,
.app-status--medium {
    --status-color: #347e6d;
}

.app-status--possible,
.app-status--low,
.app-status--stale {
    --status-color: #925a12;
}

.app-status--poor,
.app-status--unavailable {
    --status-color: #77554b;
}

.footer-data,
.footer-disclaimer {
    color: var(--app-muted);
    font-size: .75rem;
}

.footer-disclaimer strong {
    color: #d9e4e4;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --app-ink: #e5efec;
        --app-muted: #a7bbb6;
        --app-surface: #101817;
        --app-panel: #182321;
        --app-line: #334440;
        --app-primary: #4bb5b5;
        --app-primary-dark: #78d0cd;
        --app-mint: #213d38;
        --app-shadow: 0 18px 50px rgb(0 0 0 / 24%);
    }

    .app-navbar,
    .app-footer,
    .overview-section,
    .detail-hero,
    .dashboard-hero {
        background: rgb(16 24 23 / 94%);
    }

    .title,
    .subtitle,
    .content,
    .navbar-item,
    .button,
    .content h1,
    .content h2 {
        color: var(--app-ink);
    }

    .button.is-primary {
        color: #071312;
    }

    .button.is-white,
    .button.is-light {
        background: var(--app-panel);
    }

    .app-status--epic,
    .app-status--high,
    .app-status--current {
        --status-color: #70d6bb;
    }

    .app-status--solid,
    .app-status--medium {
        --status-color: #8ac6b5;
    }

    .app-status--possible,
    .app-status--low,
    .app-status--stale {
        --status-color: #f0b55e;
    }

    .app-status--poor,
    .app-status--unavailable {
        --status-color: #d8aaa0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 768px) {
    .home-steps {
        grid-template-columns: 1fr;
    }

    .home-hero {
        padding: 4.5rem 1.25rem 4rem;
    }

    .home-hero__copy {
        margin-bottom: 3.5rem;
    }

    .home-hero__copy .title {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .home-hero__actions {
        flex-direction: column;
    }

    .product-preview__bar {
        grid-template-columns: 1fr auto;
    }

    .product-preview__nav {
        display: none;
    }

    .product-preview__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .session-card__identity {
        grid-template-columns: auto 1fr;
        padding: 1.25rem;
    }

    .session-quality {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .session-card__window {
        align-items: flex-start;
        flex-direction: column;
        gap: .4rem;
        padding: 1rem 1.25rem;
    }

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

    .session-card__conditions > div {
        border-top: 1px solid var(--app-line);
    }

    .session-card__conditions > div:nth-child(3) {
        border-left: 0;
    }

    .session-card__timeline {
        overflow-x: auto;
        min-width: 29rem;
    }

    .home-how {
        padding: 6rem 1.25rem;
    }

    .home-step__number {
        margin-bottom: 1.75rem;
    }

    .home-final {
        padding-inline: 1.25rem;
    }

    .home-final__inner {
        border-radius: 1.5rem;
    }

    .app-mobile-login {
        display: flex;
    }

    .auth-page {
        display: block;
        padding: 1.25rem;
    }

    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-card__aside {
        border-top: 1px solid var(--app-line);
    }

    .auth-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .auth-actions .button {
        width: 100%;
    }
}

html {
    background: var(--app-surface);
}

body {
    min-height: 100vh;
    color: var(--app-ink);
    background: var(--app-surface);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a,
.button {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

a:focus-visible,
button:focus-visible,
.app-place-search .input:focus-visible {
    outline: 3px solid rgb(11 116 120 / 35%);
    outline-offset: 3px;
}

.title,
.subtitle,
.content,
.navbar-item,
.button {
    color: var(--app-ink);
}

.title {
    letter-spacing: -.035em;
}

.button.is-primary {
    border-color: transparent;
    color: #fff;
    background: var(--app-primary);
}

.button.is-primary:hover {
    background: var(--app-primary-dark);
}

.button.is-dark {
    background: var(--app-ink);
}

.button.is-white,
.button.is-light {
    border: 1px solid var(--app-line);
    background: rgb(255 255 255 / 72%);
}

.container.is-max-desktop {
    max-width: 1120px !important;
}

.app-navbar {
    min-height: 4.75rem;
    padding-inline: 1.5rem;
    border-bottom: 1px solid rgb(220 231 227 / 85%);
    background: rgb(245 248 246 / 90%);
    backdrop-filter: blur(16px);
}

.app-navbar .navbar-item {
    font-size: .9rem;
}

.app-navbar .navbar-start > .navbar-item {
    position: relative;
    margin-inline: .2rem;
}

.app-navbar .navbar-start > .navbar-item.is-active,
.app-navbar .navbar-start > .navbar-item:hover {
    color: var(--app-ink);
    background: transparent;
}

.app-navbar .navbar-start > a.navbar-item::after {
    position: absolute;
    right: 1rem;
    bottom: .65rem;
    left: 1rem;
    height: 3px;
    transform: scaleX(0);
    border-radius: 999px;
    background: var(--app-possible);
    content: "";
    transform-origin: center;
    transition: transform 160ms ease;
}

.app-navbar .navbar-start > a.navbar-item.is-active::after {
    transform: scaleX(1);
}

.app-place-search {
    display: flex;
    gap: .45rem;
    width: min(23rem, 36vw);
}

.app-place-search .input {
    min-width: 8rem;
}

.app-place-search .input:focus-visible {
    box-shadow: none;
}

.spots-library__search {
    max-width: 38rem;
    margin-block: 1.5rem 2rem;
}

.spots-library__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.spot-library-card {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.spot-library-card__heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.spot-library-card__heading .title {
    margin-bottom: .25rem;
}

.spot-library-card__conditions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    margin-top: 1.25rem;
}

.spot-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
    margin-top: 1.25rem;
}

.spot-status-day {
    min-width: 0;
    padding: .55rem .45rem;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: .65rem;
    background: var(--app-surface);
    text-align: center;
}

.spot-status-day strong,
.spot-status-day__date {
    display: block;
}

.spot-status-day strong {
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.spot-status-day__date {
    margin-bottom: .25rem;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
}

.spot-status-day--epic {
    border-color: rgb(33 159 106 / 35%);
    background: rgb(33 159 106 / 15%);
}

.spot-status-day--solid,
.spot-status-day--descriptive {
    border-color: rgb(35 160 171 / 35%);
    background: rgb(35 160 171 / 13%);
}

.spot-status-day--possible {
    border-color: rgb(229 166 44 / 42%);
    background: rgb(229 166 44 / 14%);
}

.spot-status-day--raw,
.spot-status-day--unconfigured,
.spot-status-day--no_session,
.spot-status-day--unavailable {
    color: var(--app-muted);
    background: rgb(127 145 145 / 10%);
}

.spot-status-strip--raw .spot-status-day {
    border-color: rgb(127 145 145 / 24%);
    background: rgb(127 145 145 / 9%);
}

.spot-library-card__personalize,
.spot-library-card__alternatives summary {
    font-size: .88rem;
    font-weight: 650;
}

.spot-library-card__alternatives {
    width: 100%;
}

.spot-library-card__alternatives summary {
    width: fit-content;
    cursor: pointer;
}

.spot-library-card__alternatives ul {
    margin: .6rem 0 0 1.2rem;
}

.spot-status-strip--mini {
    gap: .2rem;
    margin: 0;
}

.spot-status-strip--mini .spot-status-day {
    min-height: .85rem;
    padding: 0;
    border-radius: 999px;
}

.spot-library-card__unavailable {
    margin-top: 1.25rem;
}

.app-brand {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    color: var(--app-ink);
    font-weight: 750;
    letter-spacing: -.025em;
}

.app-brand__suffix {
    color: #a9b5b7;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--app-primary);
}

.brand-mark svg {
    width: 100%;
    height: 100%;
}

.brand-mark.is-small {
    width: 1.7rem;
    height: 1.7rem;
}

.user-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: .55rem;
    border-radius: 50%;
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-size: .7rem;
    font-weight: 750;
}

.app-user-menu .user-avatar {
    margin-right: 0;
}

.app-user-menu__email {
    max-width: min(20rem, calc(100vw - 2rem));
    overflow-wrap: anywhere;
    color: var(--app-ink);
    font-size: .8rem;
    font-weight: 650;
}

.dashboard-hero {
    padding-top: 5.25rem;
    padding-bottom: 4.5rem;
    background:
        radial-gradient(circle at 80% 10%, rgb(172 220 205 / 32%), transparent 28rem),
        linear-gradient(180deg, #f8faf8, var(--app-surface));
}

.page-heading {
    margin-bottom: 4rem;
}

.page-heading .subtitle,
.detail-heading .subtitle {
    max-width: 43rem;
    margin-top: 1rem;
    color: var(--app-muted);
    line-height: 1.7;
}

.eyebrow {
    margin-bottom: .55rem;
    color: var(--app-primary-dark);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-heading .title {
    margin-bottom: 0;
}

.card {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 1.25rem;
    box-shadow: var(--app-shadow);
}

.opportunity-card,
.compact-opportunity,
.window-card {
    position: relative;
}

.opportunity-card::before,
.compact-opportunity::before,
.window-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--app-epic);
    content: "";
}

.quality-solid::before {
    background: var(--app-solid);
}

.opportunity-card .card-content {
    padding: 1.6rem 1.75rem 1.35rem;
}

.compact-opportunity {
    height: 100%;
}

.compact-opportunity .card-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.6rem;
}

.opportunity-topline {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.quality-tag {
    color: #fff;
    background: var(--app-epic);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quality-solid .quality-tag {
    background: var(--app-solid);
}

.day-label {
    margin-left: .55rem;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
}

.confidence {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    color: var(--app-muted);
    font-size: .72rem;
}

.confidence-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--app-primary);
    box-shadow: 0 0 0 4px rgb(11 116 120 / 10%);
}

.opportunity-copy {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.opportunity-copy .title,
.compact-opportunity .title {
    margin-bottom: .35rem;
}

.window-time {
    text-align: right;
}

.window-time span,
.compact-window span,
.window-summary span {
    display: block;
    margin-bottom: .2rem;
    color: var(--app-muted);
    font-size: .68rem;
    font-weight: 650;
    text-transform: uppercase;
}

.window-time strong {
    font-size: 1.15rem;
}

.forecast-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    margin-bottom: 1.2rem;
    border: 1px solid var(--app-line);
    border-radius: .85rem;
}

.forecast-strip > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .75rem;
    border-right: 1px solid var(--app-line);
}

.forecast-strip > div:last-child {
    border-right: 0;
}

.forecast-strip .is-highlighted {
    background: #edf7f2;
}

.forecast-strip span,
.overview-days span {
    color: var(--app-muted);
    font-size: .65rem;
    text-transform: uppercase;
}

.forecast-strip strong,
.overview-days strong {
    font-size: .8rem;
}

.forecast-strip small,
.overview-days small {
    color: var(--app-muted);
    font-size: .65rem;
}

.quality-epic-text {
    color: var(--app-epic);
}

.quality-solid-text {
    color: var(--app-solid);
}

.quality-possible-text {
    color: var(--app-possible);
}

.quality-poor-text {
    color: var(--app-poor);
}

.card-footer-action {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    color: var(--app-muted);
    font-size: .75rem;
}

.compact-window {
    margin: auto 0 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid var(--app-line);
    border-bottom: 1px solid var(--app-line);
}

.compact-window strong {
    font-size: 1.25rem;
}

.text-link {
    color: var(--app-primary-dark);
    font-size: .82rem;
    font-weight: 750;
}

.overview-section {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background: #edf2ef;
}

.overview-card {
    box-shadow: none;
}

.overview-card .card-content {
    display: grid;
    grid-template-columns: 1.2fr 2.5fr auto;
    gap: 1.5rem;
    align-items: center;
}

.overview-identity {
    display: flex;
    align-items: center;
}

.overview-identity p {
    color: var(--app-muted);
    font-size: .75rem;
}

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

.overview-days > div {
    display: flex;
    flex-direction: column;
    padding: .25rem .8rem;
    border-left: 1px solid var(--app-line);
}

.overview-arrow {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--app-primary-dark);
    background: var(--app-mint);
    font-weight: 700;
}

.detail-hero {
    padding-top: 3.5rem;
    padding-bottom: 0;
    background:
        radial-gradient(circle at 75% 15%, rgb(172 220 205 / 30%), transparent 25rem),
        #f8faf8;
}

.breadcrumb a {
    color: var(--app-primary-dark);
}

.detail-heading {
    margin: 2rem 0 3.5rem;
}

.day-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--app-line);
}

.day-tabs button,
.day-tabs a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem 1rem;
    padding: 1rem 1.25rem;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--app-ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.day-tabs button:hover,
.day-tabs button.is-active,
.day-tabs a:hover,
.day-tabs a.is-active {
    background: rgb(220 239 232 / 45%);
}

.day-tabs button.is-active,
.day-tabs a.is-active {
    border-bottom-color: var(--app-primary);
}

.day-tabs span {
    font-size: .75rem;
    font-weight: 700;
}

.day-tabs strong {
    grid-row: span 2;
    align-self: center;
    font-size: .8rem;
}

.day-tabs small {
    color: var(--app-muted);
}

.detail-content {
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.window-card,
.timeline-card,
.explanation-card {
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 35px rgb(30 70 66 / 6%);
}

.window-card .card-content {
    padding: 1.5rem;
}

.window-card .opportunity-topline {
    margin-bottom: 1.25rem;
}

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

.window-summary > div {
    padding: .35rem 1.1rem;
    border-left: 1px solid var(--app-line);
}

.window-summary > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.window-summary strong {
    font-size: 1.05rem;
}

.timeline-card .card-content,
.explanation-card .card-content {
    padding: 1.5rem;
}

.timeline-legend {
    display: flex;
    gap: 1rem;
    color: var(--app-muted);
    font-size: .68rem;
}

.timeline-legend span {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
}

.timeline-legend i {
    width: .65rem;
    height: .65rem;
    border-radius: 2px;
}

.legend-best {
    background: color-mix(in srgb, var(--app-solid) 10%, transparent);
}

.legend-daylight {
    border: 1px solid var(--app-line);
    background: transparent;
}

.timeline-table {
    width: 100%;
    margin-bottom: .5rem;
    background: transparent;
    font-size: .72rem;
}

.timeline-table th,
.timeline-table td {
    padding: .65rem .55rem;
    border-color: #e7efec;
    text-align: center !important;
    white-space: nowrap;
}

.timeline-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    text-align: left !important;
}

.timeline-table .best-hour {
    background: #edf7f2;
}

.quality-dot {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
}

.quality-dot.is-epic {
    background: var(--app-epic);
}

.quality-dot.is-solid {
    background: var(--app-solid);
}

.quality-dot.is-possible {
    background: var(--app-possible);
}

.quality-dot.is-poor,
.quality-dot.is-no-go {
    background: var(--app-poor);
}

.table-note {
    color: var(--app-muted);
    font-size: .65rem;
}

.condition-list {
    margin-top: 1.5rem;
}

.condition-item {
    display: flex;
    gap: .8rem;
    padding: 1rem 0;
    border-top: 1px solid var(--app-line);
}

.condition-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    color: #fff;
    background: var(--app-epic);
    font-size: .75rem;
    font-weight: 800;
}

.condition-item.is-good .condition-icon {
    background: var(--app-possible);
}

.condition-item.is-degraded .condition-icon {
    background: var(--app-possible);
}

.condition-item.is-no_go .condition-icon,
.condition-item.is-missing .condition-icon {
    background: var(--app-poor);
}

.forecast-freshness {
    display: flex;
    gap: .5rem 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    color: var(--app-muted);
    font-size: .72rem;
}

.alternate-windows {
    margin-bottom: 1.5rem;
}

.alternate-windows .card-content {
    padding: 1.5rem;
}

.alternate-windows li {
    display: flex;
    justify-content: space-between;
    padding-block: .65rem;
    border-top: 1px solid var(--app-line);
}

.condition-item p {
    color: var(--app-ink);
    font-size: .76rem;
}

.condition-item small {
    color: var(--app-muted);
    font-size: .65rem;
}

.forecast-note {
    border: 1px solid #d7e5e1;
    border-radius: 1rem;
    color: var(--app-muted);
    background: #eaf2ef;
    font-size: .72rem;
    line-height: 1.6;
}

.forecast-note strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--app-ink);
}

.home-forecast-search {
    max-width: 38rem;
    margin: 2rem auto 0;
}

.home-forecast-promise {
    margin-top: -.5rem;
    color: var(--app-muted);
    font-size: .8rem;
}

.disposable-forecast {
    min-height: 72vh;
    background:
        radial-gradient(circle at 85% 2%, rgb(82 184 176 / 13%), transparent 24rem),
        var(--app-surface);
}

.forecast-search-heading {
    max-width: 44rem;
    margin: 4rem 0 2rem;
}

.forecast-search-heading .subtitle {
    color: var(--app-muted);
    line-height: 1.6;
}

.forecast-location-search {
    max-width: 46rem;
    margin-bottom: 2rem;
}

.forecast-search-results {
    display: grid;
    max-width: 46rem;
    gap: .75rem;
}

.forecast-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    color: var(--app-ink);
    transition: transform 160ms ease, border-color 160ms ease;
}

.forecast-search-result:hover {
    border-color: var(--app-primary);
    transform: translateX(.25rem);
}

.forecast-search-result small {
    display: block;
    margin-top: .2rem;
    color: var(--app-muted);
}

.forecast-result-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin: 2.5rem 0 2rem;
}

.forecast-result-heading p:last-child {
    color: var(--app-muted);
}

.wind-filter {
    padding: 2rem;
    border: 1px solid var(--app-line);
    border-radius: 1.5rem;
    background: var(--app-panel);
    box-shadow: var(--app-shadow);
}

.wind-filter__copy {
    max-width: 42rem;
}

.wind-filter__copy > p:last-child {
    color: var(--app-muted);
}

.wind-filter__form {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
}

.wind-filter__form .field {
    width: 9rem;
    margin-bottom: 0;
}

.wind-filter__separator {
    padding-bottom: .65rem;
    color: var(--app-muted);
}

.wind-unit {
    color: var(--app-muted) !important;
    font-size: .7rem;
    pointer-events: none;
}

.wind-filter__error {
    margin-top: .75rem;
}

.wind-filter.is-range-invalid .wind-filter__form .input {
    border-color: var(--bulma-danger);
}

.forecast-days {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.forecast-day {
    padding: 1.25rem;
    border: 1px solid var(--app-line);
    border-radius: 1rem;
    background: var(--app-surface);
}

.forecast-day__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.forecast-day__heading .title {
    margin: 0;
}

.forecast-day__heading > div:last-child {
    display: flex;
    gap: .75rem;
    color: var(--app-muted);
    font-size: .75rem;
}

.forecast-day__matches {
    min-height: 1.4rem;
    margin: .5rem 0;
    color: var(--app-primary-dark);
    font-size: .8rem;
    font-weight: 700;
}

.hourly-wind-strip__chart {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    width: 100%;
    margin-top: .25rem;
}

.hourly-wind-strip__heading {
    margin-top: 2rem;
}

.hourly-wind-strip__heading .title {
    margin-bottom: 1rem;
}

.hourly-wind-strip__scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 10rem;
    padding: .15rem .4rem 1.45rem 0;
    color: var(--app-muted);
    font-size: .58rem;
    text-align: right;
}

.hourly-wind-strip__plot {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    min-width: 0;
    height: 10rem;
    border-bottom: 1px solid var(--app-line);
    background: linear-gradient(to bottom, transparent 49%, var(--app-line) 50%, transparent 51%);
}

.forecast-hour.hourly-wind-strip__hour {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--app-line) 45%, transparent);
    color: var(--app-muted);
    background: transparent;
    transition: background 140ms ease, outline-color 140ms ease;
}

.hourly-wind-strip__hour {
    cursor: pointer;
}

.hourly-wind-strip__hour.is-night {
    opacity: .45;
    background: color-mix(in srgb, var(--app-ink) 5%, transparent);
}

.hourly-wind-strip__wind {
    position: absolute;
    right: 18%;
    bottom: 2.65rem;
    left: 18%;
    height: calc(100% - 2.9rem);
    transition: transform 140ms ease;
}

.hourly-wind-strip__bar,
.hourly-wind-strip__gust {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: .25rem .25rem 0 0;
}

.hourly-wind-strip__gust {
    height: var(--hour-gust-height);
    background: color-mix(in srgb, var(--app-primary) 22%, var(--app-line));
}

.hourly-wind-strip__bar {
    height: var(--hour-sustained-height);
    background: color-mix(in srgb, var(--app-primary) 48%, var(--app-line));
    transition: background 140ms ease;
}

.hourly-wind-strip__value {
    position: absolute;
    right: 50%;
    bottom: var(--hour-sustained-height);
    z-index: 1;
    padding-bottom: .08rem;
    color: var(--app-ink);
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    transform: translateX(50%);
}

.hourly-wind-strip__direction {
    position: absolute;
    right: 0;
    bottom: 1.35rem;
    left: 0;
    color: var(--app-ink);
    font-size: .72rem;
    line-height: 1;
    text-align: center;
    transform: rotate(calc(var(--wind-direction) + 180deg));
}

.hourly-wind-strip__tick {
    position: absolute;
    bottom: .15rem;
    left: 0;
    z-index: 1;
    color: var(--app-muted);
    font-size: .58rem;
    line-height: 1;
    transform: translateX(-2px);
}

.hourly-wind-strip__quality {
    position: absolute;
    right: 1px;
    bottom: 0;
    left: 1px;
    height: .24rem;
    border-radius: 1rem;
}

.hourly-wind-strip__hour.is-quality-epic .hourly-wind-strip__quality {
    background: var(--app-epic);
}

.hourly-wind-strip__hour.is-quality-solid .hourly-wind-strip__quality {
    background: var(--app-solid);
}

.hourly-wind-strip__hour.is-quality-possible .hourly-wind-strip__quality {
    background: var(--app-possible);
}

.hourly-wind-strip__hour.is-quality-poor .hourly-wind-strip__quality {
    background: var(--app-poor);
}

.hourly-wind-strip__hour.is-quality-no-go .hourly-wind-strip__quality {
    background: var(--app-poor);
}

.hourly-wind-strip__hour.is-best-window {
    background: color-mix(in srgb, var(--app-solid) 10%, transparent);
}

.hourly-wind-strip__hour:hover .hourly-wind-strip__wind,
.hourly-wind-strip__hour:focus-visible .hourly-wind-strip__wind {
    transform: scaleX(1.12);
}

.hourly-wind-strip__hour:hover .hourly-wind-strip__bar,
.hourly-wind-strip__hour:focus-visible .hourly-wind-strip__bar {
    background: var(--app-primary);
}

.hourly-wind-strip__hour.is-wind-match {
    opacity: 1;
    background: var(--app-mint);
}

.hourly-wind-strip__hour.is-wind-match .hourly-wind-strip__bar {
    background: var(--app-primary-dark);
}

.hourly-wind-strip__hour.is-selected {
    z-index: 2;
    background: rgb(59 116 134 / 12%);
    outline: 2px solid var(--app-solid);
    outline-offset: -2px;
}

.hourly-wind-strip__summary {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--app-line);
}

.hourly-wind-strip__summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hourly-wind-strip__summary-heading span:first-child {
    display: block;
    color: var(--app-muted);
    font-size: .68rem;
}

.hourly-wind-strip__summary-heading strong {
    font-size: 1.25rem;
}

.hourly-wind-strip__summary dl {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.hourly-wind-strip__summary dl div {
    padding: .75rem;
    border-bottom: .3rem solid transparent;
    border-radius: .65rem .65rem .25rem .25rem;
    background: var(--app-surface);
}

.hourly-wind-strip__summary dl .hourly-wind-strip__metric.is-ideal {
    border-bottom-color: var(--app-epic);
}

.hourly-wind-strip__summary dl .hourly-wind-strip__metric.is-degraded {
    border-bottom-color: var(--app-possible);
}

.hourly-wind-strip__summary dl .hourly-wind-strip__metric.is-no_go,
.hourly-wind-strip__summary dl .hourly-wind-strip__metric.is-missing {
    border-bottom-color: var(--app-poor);
}

.hourly-wind-strip__summary dt {
    color: var(--app-muted);
    font-size: .62rem;
}

.hourly-wind-strip__summary dd {
    margin-top: .2rem;
    color: var(--app-ink);
    font-size: .82rem;
    font-weight: 700;
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary {
    display: flex;
    padding: .75rem 1rem;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--app-line);
    border-radius: .65rem;
    background: var(--app-surface);
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary-heading {
    min-width: 6rem;
    margin: 0;
    gap: .5rem;
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary-heading strong {
    font-size: 1rem;
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary dl {
    display: flex;
    margin: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: .35rem 1rem;
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary dl div {
    display: flex;
    padding: 0 0 0 .6rem;
    gap: .3rem;
    border: 0;
    border-left: 2px solid var(--app-line);
    border-radius: 0;
    background: transparent;
}

.hourly-wind-strip.is-compact-summary .hourly-wind-strip__summary dd {
    margin: 0;
}

.forecast-result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--app-line);
    border-radius: 1rem;
}

.forecast-result-footer p,
.forecast-attribution {
    color: var(--app-muted);
    font-size: .75rem;
}

.forecast-box-attribution {
    margin-top: 1rem;
    color: var(--app-muted);
    font-size: .7rem;
    text-align: right;
}

.forecast-box-attribution a {
    color: inherit;
}

.forecast-disclaimer {
    max-width: 44rem;
    margin: 1rem 0;
    color: var(--app-muted);
    font-size: .75rem;
    line-height: 1.6;
}

.forecast-attribution {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem .25rem;
}

.app-footer {
    padding: 3rem 1.5rem 2.5rem;
    color: #a9bcbe;
    background: #17343a;
}

.footer-brand {
    color: #fff;
}

.footer-note {
    max-width: 30rem;
    margin-top: .75rem;
    font-size: .75rem;
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap: 1.25rem;
    font-size: .75rem;
}

.footer-links a {
    color: #d9e4e4;
}

.footer-links a:hover {
    color: #fff;
}

.footer-rule {
    height: 1px;
    margin: 1.5rem 0;
    background: rgb(255 255 255 / 10%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-ink: #e7f0ee;
        --app-muted: #9db1af;
        --app-surface: #102629;
        --app-panel: #193336;
        --app-line: #2a4a4c;
        --app-mint: #214a48;
        --app-primary: #55bbb4;
        --app-primary-dark: #7ad0c9;
        --app-shadow: 0 18px 50px rgb(0 0 0 / 16%);
    }

    .app-navbar,
    .dashboard-hero,
    .detail-hero {
        background-color: rgb(16 38 41 / 94%);
    }

    .card,
    .box,
    .notification,
    .setup-panel,
    .timeline-table th:first-child {
        color: var(--app-ink);
        background: var(--app-panel);
    }

    .box .has-text-grey,
    .notification.is-light {
        color: var(--app-muted) !important;
    }

    .overview-section {
        background: #0d2022;
    }

    .forecast-strip .is-highlighted,
    .timeline-table .best-hour,
    .day-tabs button:hover,
    .day-tabs button.is-active {
        background: #21433e;
    }

    .button.is-white,
    .button.is-light {
        color: var(--app-ink);
        background: var(--app-panel);
    }
}

@media screen and (max-width: 768px) {
    .app-navbar {
        padding-inline: 1rem;
    }

    .spot-evidence__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .spot-evidence__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .spot-evidence__corner,
    .spot-evidence__label {
        border-right: 0;
    }

    .spot-evidence__track {
        min-width: 0;
    }

    .spot-evidence__detail dl {
        grid-template-columns: 1fr;
    }

    .app-navbar .navbar-start > a.navbar-item::after {
        right: auto;
        width: 2.5rem;
    }

    .app-place-search {
        width: 100%;
    }

    .spots-library__grid {
        grid-template-columns: 1fr;
    }

    .spot-status-day {
        padding-inline: .3rem;
    }

    .spot-status-day strong {
        font-size: .66rem;
    }

    .dashboard-days {
        grid-template-columns: 1fr;
    }

    .dashboard-day + .dashboard-day {
        border-top: 1px solid var(--app-line);
        border-left: 0;
    }

    .section {
        padding-inline: 1rem;
    }

    .dashboard-hero {
        padding-top: 3rem;
    }

    .page-heading {
        margin-bottom: 3rem;
    }

    .page-heading .level-right,
    .detail-heading .level-right {
        margin-top: 1.5rem;
    }

    .condition-set-summary.is-mobile {
        align-items: stretch;
        flex-direction: column;
    }

    .condition-set-summary .level-right {
        margin-top: 1rem;
        margin-left: 0;
    }

    .condition-set-actions {
        justify-content: flex-start;
    }

    .spot-condition-result form {
        width: 100%;
    }

    .spot-day {
        min-height: 7rem;
        padding: .7rem;
    }

    .spot-day-workbench[data-default-selection="true"] {
        display: none;
    }

    [data-spot-day-workbench-explicit-selection-value="false"] .spot-day[data-default-selected="true"] {
        border-color: var(--app-line);
        background: var(--app-panel);
        box-shadow: none;
    }

    .spot-hourly-table,
    .spot-hourly-table tbody,
    .spot-hourly-table tr,
    .spot-hourly-table td {
        display: block;
        width: 100%;
    }

    .spot-hourly-table thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .spot-hourly-table tr {
        padding: .75rem 0;
        border-bottom: 1px solid var(--app-line);
    }

    .spot-hourly-table td {
        display: grid;
        padding: .3rem 0;
        grid-template-columns: minmax(7rem, .35fr) 1fr;
        gap: .75rem;
        border: 0;
    }

    .spot-hourly-table td::before {
        color: var(--app-muted);
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 800;
    }

    .admin-user-table,
    .admin-user-table tbody,
    .admin-user-table tr,
    .admin-user-table td {
        display: block;
        width: 100%;
    }

    .admin-user-table thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .admin-user-table tr {
        padding: .75rem 0;
        border-bottom: 1px solid var(--app-line);
    }

    .admin-user-table tr:last-child {
        border-bottom: 0;
    }

    .admin-user-table td {
        display: grid;
        padding: .3rem 0;
        grid-template-columns: minmax(7rem, .35fr) 1fr;
        gap: .75rem;
        border: 0;
        text-align: left;
    }

    .admin-user-table td[data-label]::before {
        color: var(--app-muted);
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 800;
    }

    .admin-user-table td:last-child {
        display: flex;
        justify-content: flex-end;
        padding-top: .6rem;
    }

    .opportunity-copy,
    .card-footer-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .window-time {
        text-align: left;
    }

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

    .forecast-strip > div:nth-child(2) {
        border-right: 0;
    }

    .forecast-strip > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--app-line);
    }

    .overview-card .card-content {
        grid-template-columns: 1fr auto;
    }

    .overview-days {
        grid-column: 1 / -1;
        grid-row: 2;
        overflow-x: auto;
    }

    .overview-days > div {
        min-width: 7rem;
    }

    .day-tabs {
        overflow-x: auto;
    }

    .day-tabs button,
    .day-tabs a {
        min-width: 9rem;
    }

    .window-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0;
    }

    .window-summary > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .timeline-scroll {
        overflow-x: auto;
    }

    .footer-links {
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .forecast-result-heading,
    .forecast-result-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .wind-filter {
        padding: 1.25rem;
    }

    .wind-filter__form {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .wind-filter__form .field {
        width: auto;
    }

    .wind-filter__apply {
        grid-column: 1 / -1;
    }

    .hourly-wind-strip__chart {
        grid-template-columns: 1.8rem minmax(0, 1fr);
    }

    .hourly-wind-strip__scale {
        padding-right: .25rem;
        font-size: .5rem;
    }

    .hourly-wind-strip__wind {
        right: 12%;
        left: 12%;
    }

    .hourly-wind-strip__value {
        font-size: .4rem;
        font-weight: 600;
        letter-spacing: -.04em;
    }

    .hourly-wind-strip__tick.is-secondary-tick {
        display: none;
    }

    .hourly-wind-strip__summary dl {
        grid-template-columns: repeat(2, 1fr);
    }
}