/* ==========================================================================
   Snubber app shell and native look.

   The goal is an app that feels like iOS / Android, not a web page:
   - the platform's system font, no text selection or tap flashes on controls,
     no rubber-band scrolling of the whole page, safe areas around notches;
   - no app bar (the selected tab says where you are), a translucent bottom tab bar (phones)
     or a navigation rail (tablets, phones held sideways);
   - pressed states instead of hover, grouped lists, segmented controls, sheets.
   Breakpoint: below 768 px is the phone layout, 768 px and up the tablet layout.
   Platform tweaks hang off .platform-ios / .platform-android on the shell.
   ========================================================================== */

:root {
    --tab-bar-height: 56px;
    --rail-width: 92px;
    --radius-card: 16px;
    --radius-row: 12px;
    --gap: 16px;
    /* --host-inset-* are set by the shell when the host measures the insets itself (ISafeArea). */
    --safe-top: var(--host-inset-top, env(safe-area-inset-top, 0px));
    --safe-bottom: var(--host-inset-bottom, env(safe-area-inset-bottom, 0px));
    --safe-left: var(--host-inset-left, env(safe-area-inset-left, 0px));
    --safe-right: var(--host-inset-right, env(safe-area-inset-right, 0px));
    --hairline: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    --pressed: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    --bar-bg: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    --font-system: -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Helvetica Neue", sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--mud-palette-background);
    font-family: var(--font-system);
    -webkit-text-size-adjust: 100%;
    /* The page itself never bounces or pulls to refresh: only the content area scrolls. */
    overscroll-behavior: none;
    overflow: hidden;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* No double-tap zoom delay on controls. */
    touch-action: manipulation;
}

/* Text the user types or might copy stays selectable. */
input, textarea, [contenteditable], .selectable {
    -webkit-user-select: text;
    user-select: text;
}

img, svg {
    -webkit-user-drag: none;
}

/* --- Shell ---------------------------------------------------------------------------------- */

.app-shell {
    display: flex;
    height: 100dvh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Nothing scrolls under the status bar. */
    padding-top: var(--safe-top);
}

/* Sub-pages (not in the menu): a back link at the top of the content, where the app bar's used to be. */
.page-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: -8px 0 8px -8px;
    padding-right: 8px;
    border-radius: 999px;
    color: var(--mud-palette-primary);
    text-decoration: none;
    font-size: 16px;
}

.page-back:active {
    background: var(--pressed);
}

/* For screen readers only (each page's title). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--gap) calc(var(--gap) + var(--safe-right)) calc(var(--tab-bar-height) + var(--safe-bottom) + var(--gap)) calc(var(--gap) + var(--safe-left));
}

.page {
    max-width: 1180px;
    margin: 0 auto;
}

.splash {
    display: grid;
    place-items: center;
    height: 60vh;
    opacity: 0.85;
}

/* Bottom tab bar (phones). */
.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /* The bar itself plus the gesture/home-indicator zone under it (border-box: the padding counts in the height). */
    box-sizing: border-box;
    height: calc(var(--tab-bar-height) + var(--safe-bottom));
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--hairline);
    z-index: 20;
}

.tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 500;
}

.tab-bar-item.active {
    color: var(--mud-palette-primary);
}

.tab-bar-item:active {
    opacity: 0.6;
}

/* Android: Material 3 navigation bar with a pill behind the active icon. */
.platform-android {
    --tab-bar-height: 64px;
}

.platform-android .tab-bar-item .mud-icon-root {
    padding: 4px 18px;
    border-radius: 999px;
    box-sizing: content-box;
}

.platform-android .tab-bar-item.active .mud-icon-root {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

/* Navigation rail (tablets). */
.nav-rail {
    display: none;
}

@media (min-width: 768px) {
    .tab-bar {
        display: none;
    }

    .nav-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        /* Wider by the left inset (a phone held sideways has its camera cutout there). */
        width: calc(var(--rail-width) + var(--safe-left));
        box-sizing: border-box;
        padding: calc(var(--safe-top) + 12px) 0 calc(var(--safe-bottom) + 12px) var(--safe-left);
        background: var(--mud-palette-surface);
        border-right: 0.5px solid var(--hairline);
        flex: 0 0 auto;
        overflow-y: auto;
    }

    .nav-rail-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 76px;
        padding: 8px 0;
        border-radius: 14px;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
    }

    .nav-rail-item.active {
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }

    .nav-rail-item:active {
        background: var(--pressed);
    }

    /* Phones held sideways (~390 px tall): a tighter rail, so every entry fits. */
    @media (max-height: 520px) {
        .nav-rail {
            gap: 2px;
            padding-top: calc(var(--safe-top) + 6px);
            padding-bottom: calc(var(--safe-bottom) + 6px);
        }

        .nav-rail-item {
            padding: 4px 0;
            gap: 2px;
            font-size: 11px;
        }
    }

    .app-content {
        padding: var(--gap) calc(var(--gap) + var(--safe-right)) calc(var(--gap) + var(--safe-bottom)) var(--gap);
    }
}

/* Pressed feedback for anything tappable; hover only where a real pointer exists. */
.tappable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.tappable:active {
    background-color: var(--pressed);
}

@media (hover: hover) and (pointer: fine) {
    .tappable:hover,
    .policy-item:not(.current):hover {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    }
}

/* --- Cards and grouped lists ------------------------------------------------------------ */

.card {
    background: var(--mud-palette-surface);
    border-radius: var(--radius-card);
    padding: 16px;
    border: 0.5px solid var(--hairline);
}

.card + .card {
    margin-top: var(--gap);
}

.section-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
}

.list-group {
    margin-bottom: 24px;
}

.list-group-header {
    margin: 0 0 6px 16px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.list-group-body {
    background: var(--mud-palette-surface);
    border-radius: var(--radius-row);
    overflow: hidden;
    border: 0.5px solid var(--hairline);
}

.list-group-footer {
    margin: 6px 16px 0;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.list-row + .list-row {
    border-top: 0.5px solid var(--hairline);
}

.list-row-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    background: var(--row-icon-color, var(--mud-palette-primary));
    flex: 0 0 auto;
}

.list-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.list-row-title {
    font-size: 16px;
}

.list-row-subtitle {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row-detail {
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    white-space: nowrap;
}

.list-row-chevron {
    color: var(--mud-palette-text-disabled);
    flex: 0 0 auto;
}

.empty-state {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 32px 16px;
}

/* --- Segmented control -------------------------------------------------------------------- */

.segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    max-width: 100%;
}

.segmented-option {
    flex: 1;
    min-height: 32px;
    padding: 4px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.segmented-option.selected {
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
}

.segmented.full {
    display: flex;
}

/* Android: Material segmented buttons. */
.platform-android .segmented {
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 0;
    gap: 0;
}

.platform-android .segmented-option {
    border-radius: 0;
}

.platform-android .segmented-option + .segmented-option {
    border-left: 1px solid var(--hairline);
}

.platform-android .segmented-option.selected {
    box-shadow: none;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
}

/* --- Plan screen ------------------------------------------------------------------------------
   One sentence of conditions (pills that open sheets), then the verdict and the live drawing.
   Phones stack them; tablets put the drawing beside the sentence and the verdict (landscape) or
   beside the verdict under a full-width sentence (portrait). */

.page.wide {
    max-width: 1600px;
}

.plan-layout {
    display: grid;
    gap: var(--gap);
    align-items: start;
}

.plan-layout > .card {
    margin-top: 0;
}

@media (min-width: 768px) {
    .plan-conditions { grid-area: conditions; }
    .plan-verdict, .plan-waiting { grid-area: verdict; }
    .plan-explore { grid-area: explore; }

    /* Every state needs its areas defined, or the named cards land on top of each other: one column by default
       (the guided first plan), two for a plan with its verdict (below). */
    .plan-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "conditions" "verdict" "explore";
    }
}

@media (min-width: 768px) and (orientation: landscape) {
    .plan-layout.answered {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas: "conditions explore" "verdict explore";
        grid-template-rows: auto 1fr;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    .plan-layout.answered {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "conditions conditions" "verdict explore";
    }
}

.plan-layout.guided {
    max-width: 640px;
    margin: 0 auto;
}

.plan-setup {
    max-width: 560px;
    margin: 0 auto;
}

/* The sentence: large, calm type with tappable blanks, one line per kind of input (boat, water and seabed, wind,
   safety margin). A long line still wraps, indented, so each kind stays a block. */
.sentence {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.sentence-line {
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
}

.sentence-line + .sentence-line {
    margin-top: 2px;
}

@media (max-width: 380px) {
    .sentence {
        font-size: 20px;
    }
}

.pill-wrap {
    white-space: nowrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: baseline;
    margin: 2px 0;
    padding: 1px 12px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.pill:active {
    transform: scale(0.96);
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.pill-gust {
    background: color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent);
    color: var(--mud-palette-secondary-darken);
}

.theme-dark .pill-gust {
    color: var(--mud-palette-secondary);
}

.pill-boat {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    max-width: 100%;
}

.pill-boat .pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill-icon {
    font-size: 0.8em !important;
}

/* The margin (safety policy): quieter than the conditions; a dot when this plan differs from the default. */
.pill-policy {
    position: relative;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent);
    color: var(--mud-palette-tertiary);
}

.pill-policy.overridden::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    box-shadow: 0 0 0 2px var(--mud-palette-background);
}

/* An empty blank (first plan): dashed, and the next one to fill breathes. */
.pill.blank {
    background: transparent;
    border: 1.5px dashed color-mix(in srgb, var(--mud-palette-text-primary) 35%, transparent);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.pill.blank.next {
    border: 1.5px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    animation: pill-breathe 1.6s ease-in-out infinite;
}

@keyframes pill-breathe {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); }
}

.sentence-note {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sentence-note .mud-icon-root {
    font-size: 15px;
}

.stale-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-row);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
    font-size: 13px;
}

/* First plan: what's left to answer. */
.plan-waiting p {
    margin: 10px 0 12px;
}

.plan-waiting-steps {
    display: flex;
    gap: 8px;
}

.plan-waiting-steps > span {
    flex: 1;
    padding: 6px 0;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
}

.plan-waiting-steps > span.done {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.plan-waiting-steps > span.current {
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* --- Verdict --------------------------------------------------------------------------------- */

.verdict-seal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
    animation: seal-stamp 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.setup-cannot-hold .verdict-seal {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

@keyframes seal-stamp {
    from { transform: scale(1.35); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.verdict-number {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 10px 0 4px;
}

.verdict-number-text {
    padding-bottom: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

/* Secondary figures under the length: small, one line, separated by dots. */
.verdict-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.verdict-sub:empty {
    display: none;
}

.verdict-sub > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--mud-palette-text-secondary);
}

/* Less important text: small and quiet. */
.fine {
    display: block;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.setup-cannot-hold .big-number {
    color: var(--mud-palette-error);
}

.verdict-limits {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-row);
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-size: 14px;
}

.verdict-limits .setup-limits {
    margin: 8px 0;
}

.verdict-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.verdict-fact {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: var(--radius-row);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.verdict-fact-value {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.verdict-fact-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.verdict-fact.bad .verdict-fact-value {
    color: var(--mud-palette-error);
}

.verdict-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.verdict-actions > :first-child:not(:only-child) {
    flex: 1;
}

/* Native disclosure for the details, styled as a row. */
.verdict-why, .explore-charts, .sheet-more {
    margin-top: 14px;
    border-top: 0.5px solid var(--hairline);
}

.verdict-why > summary, .explore-charts > summary, .sheet-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 4px;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
    list-style: none;
}

.verdict-why > summary::-webkit-details-marker,
.explore-charts > summary::-webkit-details-marker,
.sheet-more > summary::-webkit-details-marker {
    display: none;
}

.verdict-why > summary::after, .explore-charts > summary::after, .sheet-more > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

details[open] > summary::after {
    transform: rotate(-135deg);
}

.sheet-more p {
    margin: 6px 0;
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

/* --- Explore (the former stress test) ------------------------------------------------------ */

.explore-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.explore-head .section-title {
    margin-bottom: 0;
    font-size: 17px;
}

.explore-sliders .field-label {
    font-size: 13px;
    margin-top: 8px;
}

.explore-head .hint {
    margin: 0;
}

.explore.exploring {
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-tertiary);
}

.pill-back {
    flex: none;
    font-size: 14px;
    padding: 4px 12px;
    background: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
}

.breaking-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-row);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    font-size: 14px;
}

.breaking-point.reached .fine {
    color: inherit;
    opacity: 0.85;
}

.breaking-point .mud-icon-root {
    flex: none;
    margin-top: 1px;
    color: var(--mud-palette-secondary-darken);
}

.breaking-point.reached {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    animation: seal-stamp 0.3s ease-out;
}

.breaking-point.reached .mud-icon-root {
    color: inherit;
}

.explore-sliders {
    margin-top: 4px;
}

.explore-charts-grid {
    display: grid;
    gap: 8px 16px;
}

@media (min-width: 1024px) {
    .explore-charts-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.explore-charts-grid .chart-caption {
    margin-top: 8px;
}

/* --- Sheets: stepper, tiles, lists ---------------------------------------------------------- */

.plan-sheet .mud-dialog-content {
    padding-bottom: 4px;
}

.stepper + .stepper {
    margin-top: 18px;
}

.stepper-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.stepper-button {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.stepper-button:active {
    background: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.stepper-button:disabled {
    opacity: 0.35;
    cursor: default;
}

.stepper-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.stepper-number {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stepper-unit {
    font-size: 18px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.stepper-slider {
    margin-top: 4px;
}

.stepper-hint {
    margin-top: 0;
}

.seabed-tiles, .type-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.seabed-tile, .type-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1.5px solid var(--hairline);
    border-radius: var(--radius-card);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.seabed-tile:active, .type-tile:active {
    background: var(--pressed);
}

.seabed-tile.selected, .type-tile.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.seabed-tile-icon, .type-tile .mud-icon-root {
    color: var(--mud-palette-primary);
}

.seabed-tile-name, .type-tile > span {
    font-weight: 700;
}

.seabed-tile-hint {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.seabed-tiles + .hint {
    margin-top: 12px;
}

.chip.selected {
    border-color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 18%, var(--mud-palette-surface));
}

.sheet-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    border-radius: var(--radius-row);
    border: 0.5px solid var(--hairline);
    overflow: hidden;
}

.sheet-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sheet-list-item + .sheet-list-item {
    border-top: 0.5px solid var(--hairline);
}

.sheet-list-item > span {
    flex: 1;
}

.sheet-list-item.selected {
    font-weight: 600;
}

.sheet-list-check {
    color: var(--mud-palette-primary);
}

/* Premium forecast at the top of the wind sheet. */
.forecast-panel {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
}

.forecast-panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.forecast-panel-head .mud-icon-root {
    color: var(--mud-palette-info);
}

.forecast-panel-place {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.forecast-figures {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 10px;
    font-size: 15px;
}

.forecast-figures strong, .forecast-figures > span:nth-child(2) {
    font-size: 24px;
    font-weight: 700;
}

.forecast-figures small {
    font-size: 15px;
    font-weight: 400;
}

.forecast-figures .mud-button-root {
    margin-left: auto;
    align-self: center;
}

/* --- Quick boat setup ------------------------------------------------------------------------- */

.quick-setup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    margin-bottom: 8px;
}

.quick-setup-dots {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.quick-setup-dots > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.quick-setup-dots > span.done {
    background: var(--mud-palette-primary);
}

.quick-setup-dots > span.current {
    width: 22px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
}

.quick-setup-title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.quick-setup .hint + .type-tiles {
    margin-top: 16px;
}

.quick-setup .stepper {
    margin: 16px 0;
}

.type-tile {
    min-height: 92px;
    justify-content: space-between;
}

/* --- Precision ring ------------------------------------------------------------------------------ */

.precision-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--ring-size);
    height: var(--ring-size);
}

.precision-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.precision-ring-track {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-width: 4;
}

/* Green for the boat's own figures over an orange track for the estimates: the ring is always fully coloured. */
.precision-ring-fill {
    fill: none;
    stroke: var(--mud-palette-success);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.precision-ring.complete .precision-ring-fill {
    stroke: var(--mud-palette-success);
}

.precision-ring-value {
    position: relative;
    font-size: calc(var(--ring-size) * 0.3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.precision-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.precision-head .hint {
    margin-top: 2px;
}

.precision-list {
    list-style: none;
    margin: 12px 0 4px;
    padding: 0;
    border-radius: var(--radius-row);
    border: 0.5px solid var(--hairline);
    overflow: hidden;
}

.precision-row {
    display: flex;
    align-items: center;
    background: var(--mud-palette-surface);
}

.precision-row + .precision-row {
    border-top: 0.5px solid var(--hairline);
}

.precision-row-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.precision-row-main:disabled {
    cursor: default;
}

.precision-row-main:not(:disabled):active {
    background: var(--pressed);
}

/* Green check for the boat's own figure, orange pencil for an estimate or a missing one. */
.precision-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
}

.precision-mark .mud-icon-root {
    font-size: 15px;
}

.precision-row.entered .precision-mark {
    background: var(--mud-palette-success);
}

.precision-row.estimated .precision-mark {
    background: var(--mud-palette-warning);
}

.precision-row-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.precision-row-label {
    font-size: 14px;
    font-weight: 600;
}

.precision-row-text small {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.precision-row.estimated .precision-row-text small {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.theme-dark .precision-row.estimated .precision-row-text small {
    color: var(--mud-palette-warning);
}

.precision-row-chevron {
    color: var(--mud-palette-text-secondary);
}

.precision-confirm {
    flex: none;
    margin-right: 10px;
    padding: 4px 12px;
    border: 1px solid var(--mud-palette-success);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-success);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.precision-confirm:active {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

/* Boat editor fields: a thin border in the ring's colours, green for the boat's own figure, orange for an estimate. */
.precision-field {
    border-radius: 12px;
    outline: none;
}

.precision-field.entered .mud-input-outlined-border,
.precision-field.entered .picker-field {
    border-color: var(--mud-palette-success) !important;
}

.precision-field.estimated .mud-input-outlined-border,
.precision-field.estimated .picker-field {
    border-color: var(--mud-palette-warning) !important;
}

.precision-field.entered > .segmented {
    box-shadow: 0 0 0 1px var(--mud-palette-success);
}

.precision-field.estimated > .segmented {
    box-shadow: 0 0 0 1px var(--mud-palette-warning);
}

/* Reached from the checklist: a short glow says which field it is. */
.precision-field:focus {
    animation: field-found 1.2s ease-out;
}

@keyframes field-found {
    0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.precision-card .hint {
    margin-top: 12px;
}

/* --- Logbook passport ----------------------------------------------------------------------- */

.passport {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.passport-stat {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--radius-card);
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--hairline);
}

.passport-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.passport-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.passport-seabeds {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.passport-seabed {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 25%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 700;
    opacity: 0.6;
}

.passport-seabed.seen {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    opacity: 1;
}

/* A stamp: round, slightly turned, with the seabed and the chain let out. */
.stamp {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    transform: rotate(-8deg);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.stamp .mud-icon-root {
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .pill.blank.next, .verdict-seal, .breaking-point.reached {
        animation: none;
    }
}

.field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 15px;
    margin-top: 14px;
}

.field-value {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hint {
    display: block;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.chip {
    border: 1px solid var(--hairline);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chip:active {
    background: var(--pressed);
}

.big-number {
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.big-number small {
    font-size: 24px;
    font-weight: 600;
    margin-left: 4px;
}

.sizing-checks {
    margin-top: 8px;
}

.sizing-checks .hint {
    margin-top: 2px;
}

.sizing-checks .governs {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.policy-help {
    width: 320px;
    max-width: 80vw;
    text-align: left;
}

.policy-help p {
    margin: 0 0 6px;
}

.policy-help p:last-child {
    margin-bottom: 0;
}

/* "Safety policy (i)": opens an explanation sheet instead of a tooltip that can't fit. */
.info-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.info-link .mud-icon-root {
    font-size: 16px;
}

.info-link:active {
    opacity: 0.6;
}

.policy-list {
    display: grid;
    gap: 10px;
}

.policy-item {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-row);
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.policy-item:active {
    background: var(--pressed);
}

.policy-item.current {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.policy-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}

.policy-item-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 11px;
    font-weight: 600;
}

.policy-item-text {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.info-sheet .hint {
    margin: 12px 0 16px;
}

/* Section that can't hold in this forecast: red ring without shifting the layout. */
.setup-cannot-hold {
    border-color: var(--mud-palette-error) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-error);
    background-color: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface)) !important;
}

.setup-limits {
    margin: 0;
    padding-left: 1.2rem;
}

.setup-limits li {
    margin-bottom: 4px;
}

.chart-caption {
    font-size: 14px;
    margin: 18px 0 6px;
}

/* --- Forms ---------------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.form-actions > * {
    flex: 1;
}

/* Pinned to the bottom of the content area, covering its bottom padding (nothing shows below it). */
.sticky-actions {
    position: sticky;
    bottom: calc(-1 * var(--gap));
    z-index: 2;
    margin-bottom: calc(-1 * var(--gap));
    padding: 12px 0 var(--gap);
    background: linear-gradient(transparent, var(--mud-palette-background) 30%);
}

/* MudBlazor touches: rounder, flatter, larger touch targets. */
.mud-button-root {
    border-radius: 12px !important;
    min-height: 44px;
}

.mud-input-control {
    margin-top: 8px !important;
}

/* Dialogs become bottom sheets on phones. */
@media (max-width: 767.98px) {
    .mud-dialog-container .mud-dialog {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: var(--safe-bottom);
        animation: sheet-up 0.22s ease-out;
    }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.mud-snackbar-location-bottom-center {
    bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 12px) !important;
}

@media (min-width: 768px) {
    .mud-snackbar-location-bottom-center {
        bottom: calc(var(--safe-bottom) + 24px) !important;
    }
}

/* --- Premium gate ------------------------------------------------------------------------------- */

.premium-gate {
    text-align: center;
}

.premium-gate-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.premium-gate-text {
    margin: 0 0 8px;
    color: var(--mud-palette-text-secondary);
}

.premium-gate-list {
    display: inline-block;
    margin: 4px 0 12px;
    padding-left: 20px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
}

.premium-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --- Map ------------------------------------------------------------------------------------------
   The map fills the content area edge to edge (under the translucent bars); controls float above it. */

.app-content:has(.map-page) {
    padding: 0;
    overflow: hidden;
}

.page.map-page {
    position: relative;
    max-width: none;
    height: 100%;
}

.map-gate {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--gap);
}

/* MapLibre's stylesheet (loaded later) makes its container position: relative; keep it filling the page. */
.map-host, .map-host.maplibregl-map {
    position: absolute;
    inset: 0;
    background: var(--mud-palette-background);
}

.wind-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.map-overlay {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.map-overlay > * {
    pointer-events: auto;
}

.map-top {
    top: 12px;
    left: 12px;
    right: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.map-side {
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-chip, .map-button, .map-bottom {
    background: var(--bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 0.5px solid var(--hairline);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    color: var(--mud-palette-text-primary);
}

.map-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
}

button.map-chip {
    cursor: pointer;
}

button.map-chip:active, .map-button:active {
    opacity: 0.7;
}

/* Metric and model on one line: "[icon] Wind · AROME France". */
.model-chip {
    position: relative;
    overflow: hidden;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px 4px 10px;
}

.chip-layer-icon {
    flex: none;
    font-size: 18px !important;
    color: var(--mud-palette-primary);
}

/* An old forecast: the icon and its age turn amber (a newer run should exist) or red (over a day old). */
.model-chip.freshness-old .chip-layer-icon, .model-chip.freshness-old .chip-age { color: var(--mud-palette-warning); }
.model-chip.freshness-stale .chip-layer-icon, .model-chip.freshness-stale .chip-age { color: var(--mud-palette-error); }

.chip-age {
    font-weight: 600;
}

/* While the run's steps for the area arrive: a hairline along the chip's bottom edge, over it, not in the layout. */
.chip-progress {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 1px;
    background: var(--hairline);
    overflow: hidden;
}

.chip-progress > span {
    display: block;
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width 0.2s ease-out;
}

.model-updated {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.model-updated.freshness-old { color: var(--mud-palette-warning); }
.model-updated.freshness-stale { color: var(--mud-palette-error); }

.model-chip-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
    white-space: nowrap;
}

.model-chip {
    max-width: 100%;
}

/* Too long for the phone: the model's name gives way first, the metric and the age stay. */
.model-chip-text > span:not(.chip-age) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-chip-text strong {
    font-size: 13.5px;
}

.model-chip-text span {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.position-chip {
    font-variant-numeric: tabular-nums;
}

/* The model on the map: a thicker outline (inset, so nothing moves) and a check before its name. */
.model-item.current {
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.model-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.model-current-icon {
    color: var(--mud-palette-primary);
}

.model-item.unavailable {
    opacity: 0.55;
    cursor: default;
}

/* The metrics a model offers, in its card. */
.layer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.layer-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.layer-chip .mud-icon-root {
    font-size: 17px;
    color: var(--mud-palette-primary);
}

.layer-chip:active {
    background: var(--pressed);
}

.layer-chip.selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.layer-chip.selected .mud-icon-root {
    color: inherit;
}

/* Round, as tall as the model chip; the touch area stays 44 px. */
.map-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
}

.map-button::after {
    content: "";
    position: absolute;
    inset: -4px;
}

.map-button .mud-icon-root {
    font-size: 20px;
}

.chip-chevron {
    flex: none;
    font-size: 18px !important;
    color: var(--mud-palette-text-secondary);
}

a.map-button {
    text-decoration: none;
}

.map-button.active {
    color: var(--mud-palette-primary);
}

.map-bottom {
    left: 12px;
    right: 12px;
    bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 30px);
    padding: 5px 10px 6px;
    border-radius: var(--radius-card);
}

/* ‹ slider › */
.map-time {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.map-track {
    flex: 1;
    min-width: 0;
}

/* The moment shown, one small line above the slider. */
.map-time-label {
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-time-label strong {
    font-size: 13.5px;
}

.map-time-label span {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.map-step {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.map-step:disabled {
    opacity: 0.3;
}

.map-slider {
    margin: 0 4px;
}

/* Under the slider: day marks, spanning exactly the thumb's travel (MudSlider's small thumb is 2 px wide). */
.map-ruler {
    position: relative;
    height: 11px;
    margin: -4px 5px 2px;
    color: var(--mud-palette-text-secondary);
}

.map-ruler-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 3px;
    transform: translateX(-50%);
    background: color-mix(in srgb, currentColor 45%, transparent);
}

.map-ruler-tick.major {
    height: 8px;
    background: currentColor;
}

/* The day's name just after its midnight mark: "this day starts here". */
.map-ruler-label {
    position: absolute;
    top: 0;
    padding-left: 3px;
    font-size: 9.5px;
    line-height: 9.5px;
    white-space: nowrap;
}


.wind-legend-ticks > span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.wind-legend-ticks > span.start {
    transform: none;
}

/* The last label carries the unit and ends at the bar's right edge. */
.wind-legend-ticks > span.end {
    transform: translateX(-100%);
}

.wind-legend-bar {
    height: 5px;
    border-radius: 4px;
}

.wind-legend-ticks {
    position: relative;
    height: 12px;
    margin-top: 1px;
    font-size: 9.5px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The colour scale: a thin strip along the map's bottom edge (above the tab bar), its numbers just above it,
   haloed so they read on any colour. No box. */
.map-legend-edge {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: calc(var(--tab-bar-height) + var(--safe-bottom));
    display: flex;
    flex-direction: column-reverse;
    pointer-events: none;
}

.map-legend-edge .wind-legend-bar {
    height: 5px;
    border-radius: 0;
}

.map-legend-edge .wind-legend-ticks {
    margin: 0 0 3px;
    height: 13px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-shadow: 0 0 3px var(--mud-palette-background), 0 0 2px var(--mud-palette-background), 0 0 1px var(--mud-palette-background);
}

.map-legend-edge .wind-legend-ticks > span.start { padding-left: 8px; }
.map-legend-edge .wind-legend-ticks > span.end { padding-right: 8px; }

@media (min-width: 768px) {
    .map-legend-edge { bottom: var(--safe-bottom); }
    .map-top { top: 16px; left: 16px; }
    .map-side { top: 16px; right: 16px; }

    .map-bottom {
        left: auto;
        right: 16px;
        bottom: calc(30px + var(--safe-bottom));
        width: 440px;
    }
}

/* Tap-for-wind popup (MapLibre renders it, outside any component). */
.wind-popup-arrow {
    width: 15px;
    height: 15px;
    margin-left: 6px;
    vertical-align: -2px;
    fill: var(--mud-palette-primary);
}

.wind-popup-shell .maplibregl-popup-content {
    padding: 10px 30px 10px 12px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--font-system);
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.wind-popup-shell.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--mud-palette-surface); }
.wind-popup-shell.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--mud-palette-surface); }
.wind-popup-shell.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--mud-palette-surface); }
.wind-popup-shell.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--mud-palette-surface); }

.wind-popup-shell .maplibregl-popup-close-button {
    width: 28px;
    height: 28px;
    color: var(--mud-palette-text-secondary);
    font-size: 18px;
}

.wind-popup strong {
    font-size: 14px;
}

.wind-popup-time {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.theme-dark .maplibregl-ctrl-attrib {
    background: rgba(0, 0, 0, 0.55);
    color: #ddd;
}

.theme-dark .maplibregl-ctrl-attrib a {
    color: #ddd;
}

/* The boat: a dot, with a pointer when the GPS gives a course. */
.boat-marker {
    position: relative;
    width: 28px;
    height: 28px;
}

.boat-marker-dot {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.boat-marker-heading {
    display: none;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid var(--mud-palette-primary);
}

.boat-marker.has-course .boat-marker-heading {
    display: block;
}

/* --- Pickers (anchor) ---------------------------------------------------------------------------
   A field-like button that opens a sheet: no dropdown list to scroll through on a phone. */

.picker-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 14px;
    min-height: 56px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent);
    border-radius: 12px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.picker-field:active {
    background: var(--pressed);
}

.picker-field-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.picker-field-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.picker-field-value {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-field-value.empty {
    color: var(--mud-palette-text-secondary);
}

.picker-field > .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.anchor-search {
    margin-bottom: 8px;
}

.anchor-groups {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-row);
    border: 0.5px solid var(--hairline);
    overflow: hidden;
}

.anchor-group + .anchor-group, .anchor-groups > .anchor-item + .anchor-group {
    border-top: 0.5px solid var(--hairline);
}

.anchor-group-header, .anchor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.anchor-group-header:active, .anchor-item:active {
    background: var(--pressed);
}

.anchor-group-name {
    flex: 1;
    font-weight: 600;
}

.anchor-group-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.anchor-group-check, .anchor-item .mud-icon-root {
    color: var(--mud-palette-primary);
}

.anchor-group-chevron {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease;
}

.anchor-group.open .anchor-group-chevron {
    transform: rotate(180deg);
}

.anchor-item {
    padding-left: 28px;
    border-top: 0.5px solid var(--hairline);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

.anchor-groups > .anchor-item {
    padding-left: 14px;
    border-top: 0;
    background: var(--mud-palette-surface);
}

.anchor-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.anchor-item-text small {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.anchor-item.selected .anchor-item-text > span {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.anchor-groups + .hint, .anchor-groups > .hint {
    padding: 12px 14px;
}

/* Quick setup: bridle or snubber, one tile per line with what it means. */
.bridle-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.bridle-tile {
    min-height: 0;
    gap: 2px;
    padding: 12px 14px;
}

.bridle-tile small {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.quick-setup .form-actions {
    justify-content: space-between;
}

.policy-item-default {
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* --- Range slider (two thumbs: wind and gusts) --------------------------------------------------- */

.range-slider {
    position: relative;
    height: 36px;
    margin: 2px 8px;
}

.range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 15%, transparent);
}

/* Between the wind and the gusts: a teal-to-orange band. */
.range-fill {
    position: absolute;
    left: var(--low);
    right: calc(100% - var(--high));
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: linear-gradient(to right, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.range-thumb {
    position: absolute;
    left: -10px;
    width: calc(100% + 20px);
    top: 0;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

.range-thumb.on-top {
    z-index: 2;
}

.range-thumb::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
}

.range-thumb::-moz-range-track {
    background: transparent;
    border: 0;
}

.range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-surface);
    background: var(--thumb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.range-thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-surface);
    background: var(--thumb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.range-low { --thumb: var(--mud-palette-primary); }
.range-high { --thumb: var(--mud-palette-secondary); }

.range-thumb:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--thumb) 35%, transparent);
}

.field-value .wind-value { color: var(--mud-palette-primary); }
.field-value .gust-value { color: var(--mud-palette-secondary-darken); }
.theme-dark .field-value .gust-value { color: var(--mud-palette-secondary); }

/* "Try it": the card picks its drawing by its own width, so a phone and a narrow tablet column both get the compact
   one (bigger text, no dragging; the sliders under it move the boat). */
.explore {
    container-type: inline-size;
}

.explore-drawing-compact {
    display: none;
}

@container (max-width: 520px) {
    .explore-drawing-wide {
        display: none;
    }

    .explore-drawing-compact {
        display: block;
    }
}

/* Once the card knows its width it renders only the drawing that fits (ExploreCard.razor.js uses the same 520 px). */
.explore .explore-drawing-only {
    display: block;
}

.explore-legend {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}

.explore-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.explore-legend i {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 3px solid #58d68d;
}

.explore-legend i.legend-dashed {
    border-top: 2px dashed var(--mud-palette-text-secondary);
}

/* --- Anchor pictures --------------------------------------------------------------------------- */

/* Square, on white (the pictures are product shots on white), so they read the same in dark mode. */
.anchor-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 0.5px solid var(--hairline);
    overflow: hidden;
    color: #8a9a98;
}

.anchor-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.anchor-thumb.large {
    width: 112px;
    height: 112px;
    border-radius: 14px;
}

.picker-field .anchor-thumb {
    width: 38px;
    height: 38px;
}

.anchor-item {
    gap: 12px;
}

.anchor-item-chevron {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.2s ease;
}

.anchor-item-chevron.turned {
    transform: rotate(180deg);
}

/* The catalogue: a model unfolded, with its picture, holding figures and notes. */
.anchor-details {
    display: flex;
    gap: 14px;
    padding: 12px 14px 14px 28px;
    border-top: 0.5px solid var(--hairline);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

.anchor-holding {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    font-size: 14px;
}

.anchor-notes {
    margin: 8px 0 4px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.anchor-sheet .mud-dialog-content {
    padding-top: 4px;
}

/* --- Subscription test switch -------------------------------------------------------------------- */

.tier-switch {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: 12px;
    font-weight: 600;
}

.tier-switch > span {
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
}

.tier-switch:not(.premium) > span:first-child,
.tier-switch.premium > span:last-child {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tier-switch.premium > span:last-child {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.anchor-details > div {
    flex: 1;
    min-width: 0;
}

.anchor-details .fine,
.anchor-notes {
    overflow-wrap: anywhere;
}

.explore-legend i.legend-rope {
    border-top: 3px solid #e9cf9a;
}

/* --- Boat catalogue: brand logos, model figures ------------------------------------------------ */

/* Square, on white (logos are drawn for white), so they read the same in dark mode. */
.boat-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 0.5px solid var(--hairline);
    overflow: hidden;
    color: #5f7a77;
}

.boat-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.boat-logo.large {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.boat-logo-initials {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #3d5b58;
}

.picker-field .boat-logo {
    width: 38px;
    height: 38px;
}

.boat-groups .anchor-group-header {
    gap: 12px;
}

/* The boat list is virtualised (Blazor's Virtualize takes the nearest ancestor whose overflow isn't visible for its
   scroll container): round its corners with a clip instead of overflow: hidden, or it would watch the whole list
   instead of the sheet. Its spacers sit between "Not listed" and the first brand: keep that hairline. */
.boat-groups {
    overflow: visible;
    clip-path: inset(0 round var(--radius-row));
}

.boat-groups > .anchor-item + div + .anchor-group {
    border-top: 0.5px solid var(--hairline);
}

.boat-brand-only .anchor-item-text > span {
    font-style: italic;
}

.boat-details {
    flex-direction: column;
    gap: 6px;
}

.boat-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    font-size: 14px;
}

.boat-list-loading {
    display: grid;
    place-items: center;
    padding: 24px;
}

.boat-model-card .picker-field {
    margin-top: 0;
}

/* A steady height while the search narrows the list: the sheet doesn't jump under the thumb. */
.boat-sheet .mud-dialog-content {
    min-height: min(72vh, 640px);
}

/* --- Plan forecast (Premium) --------------------------------------------------------------------
   The wind and gust blanks spin while the forecast that fills them is read; the line under the sentence unfolds to
   show how it was used (period, models, reference, timing, shifts). */

/* Over the figure, so the pill keeps its width and the sentence doesn't re-wrap while it spins. */
.pill.loading {
    position: relative;
}

.pill.loading .pill-text, .pill.loading .pill-icon {
    opacity: 0.3;
}

.pill-spinner.mud-progress-circular {
    position: absolute;
    left: calc(50% - 0.4em);
    top: calc(50% - 0.4em);
    width: 0.8em !important;
    height: 0.8em !important;
    color: currentColor;
}

.stepper-value.loading .stepper-number {
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.stepper-spinner.mud-progress-circular {
    align-self: center;
    width: 18px !important;
    height: 18px !important;
    color: var(--mud-palette-text-secondary);
}

.forecast-note {
    margin-top: 8px;
    border-radius: var(--radius-row);
    transition: background-color 0.2s ease;
}

.forecast-note.open {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, var(--mud-palette-surface));
    border: 0.5px solid var(--hairline);
}

.forecast-note-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.forecast-note.open .forecast-note-head {
    padding: 8px 12px 4px;
}

.forecast-note-head:disabled {
    cursor: default;
}

.forecast-note-head .mud-icon-root {
    flex: none;
    font-size: 15px;
    color: var(--mud-palette-info);
}

.forecast-note-spinner.mud-progress-circular {
    flex: none;
    width: 15px !important;
    height: 15px !important;
    color: var(--mud-palette-info);
}

.forecast-note-text {
    flex: 1;
    min-width: 0;
}

.forecast-note.under .forecast-note-head,
.forecast-note.under .forecast-note-head .mud-icon-root {
    color: var(--mud-palette-warning-darken);
}

.theme-dark .forecast-note.under .forecast-note-head,
.theme-dark .forecast-note.under .forecast-note-head .mud-icon-root {
    color: var(--mud-palette-warning);
}

.forecast-note-chevron {
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 6px 3px 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.forecast-note.open .forecast-note-chevron {
    transform: translateY(3px) rotate(-135deg);
}

.forecast-note-body {
    padding: 6px 12px 12px;
    animation: forecast-unfold 0.22s ease-out;
}

@keyframes forecast-unfold {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.forecast-note-where {
    margin: 8px 0;
}

/* Every model's strongest wind and gusts; the reference row is the one the plan uses. */
.forecast-models {
    display: grid;
    gap: 4px;
}

.forecast-models-head, .forecast-model {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 84px;
    align-items: center;
    gap: 8px;
}

.forecast-models-head {
    padding: 0 10px;
}

.forecast-models-head span:not(:first-child) {
    text-align: right;
}

.forecast-model {
    padding: 8px 10px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    animation: forecast-arrive 0.35s ease-out;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.forecast-model:active {
    transform: scale(0.98);
}

@keyframes forecast-arrive {
    from { opacity: 0.2; }
    to { opacity: 1; }
}

.forecast-models.loading .forecast-model {
    animation: forecast-reading 1.1s ease-in-out infinite;
}

@keyframes forecast-reading {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.forecast-model-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}

.forecast-model-name .fine {
    font-weight: 400;
}

.forecast-model-value {
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.forecast-model-value small {
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.forecast-model.used {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.forecast-model.used .forecast-model-value {
    font-size: 18px;
    font-weight: 800;
}

.forecast-model.used .forecast-model-value.wind { color: var(--mud-palette-primary); }
.forecast-model.used .forecast-model-value.gust { color: var(--mud-palette-secondary-darken); }
.theme-dark .forecast-model.used .forecast-model-value.gust { color: var(--mud-palette-secondary); }

/* The reference's wind (solid) and gusts over the period, with the strongest moment marked. */
.forecast-trend {
    margin: 10px 0 4px;
}

.forecast-trend svg {
    display: block;
    width: 100%;
    height: 44px;
    overflow: visible;
}

.forecast-trend polyline {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.forecast-trend .trend-wind { stroke: var(--mud-palette-primary); }
.forecast-trend .trend-gust { stroke: var(--mud-palette-secondary-darken); }
.theme-dark .forecast-trend .trend-gust { stroke: var(--mud-palette-secondary); }

.forecast-trend .trend-peak {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.forecast-trend figcaption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.trend-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trend-legend i {
    display: inline-block;
    width: 12px;
    border-top: 2px solid var(--mud-palette-primary);
}

.trend-legend i.gust {
    margin-left: 6px;
    border-top-color: var(--mud-palette-secondary-darken);
}

.theme-dark .trend-legend i.gust {
    border-top-color: var(--mud-palette-secondary);
}

.forecast-advice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.forecast-advice .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 16px;
    color: var(--mud-palette-text-secondary);
}

.forecast-advice.warn .mud-icon-root {
    color: var(--mud-palette-warning-darken);
}

.theme-dark .forecast-advice.warn .mud-icon-root {
    color: var(--mud-palette-warning);
}

.forecast-note-use {
    margin-top: 12px;
}

/* The wind sheet's panel: "In use" while the draft follows the forecast. */
.forecast-figures.loading > span {
    opacity: 0.5;
}

.forecast-figures-action {
    margin-left: auto;
}

.forecast-in-use {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mud-palette-primary);
}

/* --- "Try it" fold ------------------------------------------------------------------------------
   Folded by default in portrait (CSS decides until the skipper taps), open in landscape and in a "what if". */

.explore-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.explore-toggle:disabled {
    cursor: default;
}

.explore-toggle-text {
    min-width: 0;
}

.explore-chevron {
    flex: none;
    width: 8px;
    height: 8px;
    margin: 6px 4px 0 0;
    border-right: 2px solid var(--mud-palette-primary);
    border-bottom: 2px solid var(--mud-palette-primary);
    transform: translateY(-3px) rotate(-135deg);
    transition: transform 0.2s ease;
}

.explore-sub-folded {
    display: none;
}

.explore.folded .explore-body { display: none; }
.explore.folded .explore-head { margin-bottom: 0; }
.explore.folded .explore-chevron { transform: rotate(45deg); }
.explore.folded .explore-sub-open { display: none; }
.explore.folded .explore-sub-folded { display: block; }

@media (orientation: portrait) {
    .explore.fold-auto .explore-body { display: none; }
    .explore.fold-auto .explore-head { margin-bottom: 0; }
    .explore.fold-auto .explore-chevron { transform: rotate(45deg); }
    .explore.fold-auto .explore-sub-open { display: none; }
    .explore.fold-auto .explore-sub-folded { display: block; }
}

.explore.unfolded .explore-body, .explore.fold-auto .explore-body {
    animation: forecast-unfold 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .forecast-note-body, .forecast-model, .forecast-models.loading .forecast-model, .explore .explore-body {
        animation: none;
    }
}

/* --- Alerts ---------------------------------------------------------------------------------------
   The AlertCenter's face in the shell: an alarm covers the screen until silenced; other alerts are a banner. */

.alert-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: var(--radius-card);
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--hairline);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    animation: forecast-unfold 0.22s ease-out;
}

.alert-banner-icon {
    flex: none;
    margin-top: 1px;
    color: var(--mud-palette-info);
}

.alert-banner.severity-warning .alert-banner-icon { color: var(--mud-palette-warning-darken); }
.theme-dark .alert-banner.severity-warning .alert-banner-icon { color: var(--mud-palette-warning); }

.alert-banner.severity-critical {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
}

.alert-banner.severity-critical .alert-banner-icon { color: var(--mud-palette-error); }

.alert-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alert-banner-text span {
    color: var(--mud-palette-text-secondary);
}

.alert-banner-ok {
    flex: none;
    min-width: 44px;
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* The alarm: impossible to miss, readable at arm's length at night, big thumbs. */
.alarm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: calc(var(--safe-top, 0px) + 24px) 24px calc(var(--safe-bottom, 0px) + 24px);
    background: #b3261e;
    color: #fff;
    text-align: center;
    animation: alarm-pulse 1.2s ease-in-out infinite;
}

@keyframes alarm-pulse {
    0%, 100% { background: #b3261e; }
    50% { background: #8c1d18; }
}

.alarm-overlay-icon .mud-icon-root {
    font-size: 64px;
}

.alarm-overlay h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
}

.alarm-overlay p {
    max-width: 420px;
    margin: 0;
    font-size: 18px;
}

.alarm-overlay-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 360px);
    margin-top: 16px;
}

.alarm-button {
    min-height: 56px;
    border: 2px solid #fff;
    border-radius: 16px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.alarm-button.primary {
    background: #fff;
    color: #b3261e;
}

.alarm-overlay .alarm-overlay-fine {
    font-size: 13px;
    opacity: 0.85;
}

/* The anchor watch, at the top of the anchor alarm's sheet while it runs. */
.watch-panel {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-row);
    border-left: 4px solid var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface));
}

.watch-panel.dragging {
    border-left-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
}

.watch-panel.blind {
    border-left-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

/* The Plan's "Drop anchor" once anchored: two lines (state, margin left) and a bar of the circle used. */
.mud-button-root.drop-anchored {
    position: relative;
    overflow: hidden;
    text-transform: none;
    line-height: 1.15;
}

/* MudBlazor's warning orange with white text reads poorly: a deeper orange in light, dark text in dark. */
.mud-button-root.drop-anchored.mud-button-filled-warning {
    background-color: #b45309;
    color: #fff;
}

.theme-dark .mud-button-root.drop-anchored.mud-button-filled-warning {
    background-color: #f59e0b;
    color: #1f1300;
}

.drop-anchored-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.drop-anchored-text small {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
}

.drop-anchored-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.18);
}

.drop-anchored-bar > span {
    display: block;
    height: 100%;
    background: currentColor;
    opacity: 0.85;
    transition: width 0.6s ease;
}

.watch-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    animation: pill-breathe 2s ease-in-out infinite;
}

.watch-panel.dragging .watch-dot { background: var(--mud-palette-error); }
.watch-panel.blind .watch-dot { background: var(--mud-palette-warning); }

.watch-figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 6px;
}

.watch-distance, .watch-radius > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 2px;
}

.watch-distance .fine, .watch-radius .fine {
    flex-basis: 100%;
}

.watch-radius {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.watch-radius > div {
    justify-content: center;
}

.watch-number {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.watch-number.small {
    font-size: 24px;
}

.watch-unit {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.stepper-button.small {
    width: 40px;
    height: 40px;
}

.watch-problem, .watch-advice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-row);
    font-size: 14px;
}

.watch-problem {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
}

.watch-advice {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
}

.watch-advice > span {
    flex: 1;
    min-width: 180px;
}

@media (prefers-reduced-motion: reduce) {
    .alarm-overlay, .watch-dot, .alert-banner {
        animation: none;
    }
}

/* --- Anchor alarm sheet: the small map ------------------------------------------------------------ */

.anchor-map {
    position: relative;
    height: 230px;
    margin: 0 -4px;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    border: 0.5px solid var(--hairline);
}

.anchor-map.maplibregl-map {
    position: relative;
}

.anchor-map.offline::after {
    content: "Map offline";
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.anchor-map-anchor {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #0f6e66;
    border: 2px solid #0f6e66;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Above the boat: with "Here" they sit on the same spot, and the anchor is what gets dragged. */
.anchor-map .anchor-map-anchor {
    z-index: 2;
}

.anchor-map.draggable .anchor-map-anchor {
    cursor: grab;
}

.anchor-map-anchor svg {
    width: 20px;
    height: 20px;
}

.anchor-map-boat svg {
    display: block;
    width: 14px;
    height: 28px;
    fill: var(--mud-palette-primary);
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.anchor-map-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin: 6px 0 4px;
}

.anchor-map-caption span:last-child {
    margin-left: auto;
}

.anchor-map-caption i {
    display: inline-block;
    width: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

.anchor-map-caption .legend-swing {
    height: 10px;
    border-radius: 3px;
    background: color-mix(in srgb, #0f6e66 25%, transparent);
    border: 1.5px solid #0f6e66;
}

.theme-dark .anchor-map-caption .legend-swing {
    background: color-mix(in srgb, #5fd3c4 25%, transparent);
    border-color: #5fd3c4;
}

.anchor-map-caption .legend-alarm {
    border-top: 2px dashed #d0453a;
}

.anchor-sheet .stepper {
    margin-top: 14px;
}

.anchor-where {
    margin: 16px 0 8px;
}

.anchor-compass {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-row);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.anchor-compass .mud-icon-root {
    flex: none;
    font-size: 28px;
    color: var(--mud-palette-primary);
    transition: transform 0.2s ease;
}

.anchor-compass > span {
    display: flex;
    flex-direction: column;
}

.anchor-watching {
    margin-top: 12px;
}