/* Tokens from DESIGN.md (lifted from docs/designs/onboarding-reference.html).
   Light = paper, dark = night pond. data-theme="auto" follows the system; "light"/"dark" is the user override. */
@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --paper: #F3F6F1; --surface: #FBFCF9; --raised: #FFFFFF; --text: #16333C; --muted: #5C7178;
    --primary: #1F7A78; --on-primary: #FFFFFF; --primary-hover: #196A68;
    --accent: #F6C945; --on-accent: #16333C; --coral: #F0806A;
    --success: #257A58; --warning: #9A6408; --error: #B53C30;
    --success-tint: #DCEEE6; --warning-tint: #FBEFCF; --error-tint: #F6DEDA; --band-warm: #FBEFCF;
    --line: #16333C; --shadow: 0 2px 0 rgba(22,51,60,.14); --hl: var(--accent); --avatar-ol: #16333C;
    /* otter avatar background tints (assets/mascot/build.py TINTS) */
    --otter-tint-1: #C9E9DC; --otter-tint-2: #CCE0F6; --otter-tint-3: #F1DDBB; --otter-tint-4: #F4CFDD; --otter-tint-5: #DAD2F2; --otter-tint-6: #F5E7A4; --otter-tint-7: #B9DFEC;
    --sm: 8px; --md: 14px; --lg: 16px; --fab: 18px;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #0E1F24; --surface: #152B32; --raised: #1B3540; --text: #E8F1EE; --muted: #93AAB0;
    --primary: #5CC4BB; --on-primary: #0B2226; --primary-hover: #7AD3CB;
    --coral: #F58E79; --success: #4CC38F; --warning: #E8A83A; --error: #EF7B6E;
    --success-tint: #173A31; --warning-tint: #3A3018; --error-tint: #3B2222; --band-warm: #1B3540;
    --line: #E8F1EE; --shadow: 0 2px 0 rgba(0,0,0,.4); --hl: rgba(246,201,69,.3); --avatar-ol: #081316;
    /* otter avatar background tints (assets/mascot/build.py TINTS) */
    --otter-tint-1: #1F4A45; --otter-tint-2: #1F3A5C; --otter-tint-3: #4A3B22; --otter-tint-4: #4C2D3E; --otter-tint-5: #37345A; --otter-tint-6: #4A4420; --otter-tint-7: #1C4A5E;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --paper: #0E1F24; --surface: #152B32; --raised: #1B3540; --text: #E8F1EE; --muted: #93AAB0;
        --primary: #5CC4BB; --on-primary: #0B2226; --primary-hover: #7AD3CB;
        --coral: #F58E79; --success: #4CC38F; --warning: #E8A83A; --error: #EF7B6E;
        --success-tint: #173A31; --warning-tint: #3A3018; --error-tint: #3B2222; --band-warm: #1B3540;
        --line: #E8F1EE; --shadow: 0 2px 0 rgba(0,0,0,.4); --hl: rgba(246,201,69,.3); --avatar-ol: #081316;
        /* otter avatar background tints (assets/mascot/build.py TINTS) */
        --otter-tint-1: #1F4A45; --otter-tint-2: #1F3A5C; --otter-tint-3: #4A3B22; --otter-tint-4: #4C2D3E; --otter-tint-5: #37345A; --otter-tint-6: #4A4420; --otter-tint-7: #1C4A5E;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font: 400 16px/1.5 Figtree, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700; margin: 0; }
/* textarea and select too: below 16px, iOS zooms the page in on focus. */
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
/* Blazor moves focus to the heading on navigation, for screen readers. That is not a control, so no ring. */
h1[tabindex="-1"]:focus-visible { outline: none; }
mark { background: linear-gradient(transparent 58%, var(--hl) 58% 92%, transparent 92%); color: inherit; padding: 0 2px; }

/* Single phone column, centered on wide screens (DESIGN.md Layout). */
.page { max-width: 480px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) var(--space-md) calc(16px + env(safe-area-inset-bottom)); }

h1 { font-size: clamp(2rem, 9vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; margin: 10px 0 8px; }
.frido { display: block; width: 100%; max-width: 330px; height: auto; margin: var(--space-lg) auto var(--space-sm); }

.boot { display: grid; place-items: center; min-height: 100dvh; }
.boot img { width: 160px; height: auto; }
body:has(.app) .boot { display: none; }

/* Slight life: Frido floats (DESIGN.md Motion). Reduced motion shows the end state. */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
.float { animation: bob 5s ease-in-out infinite; transform-origin: 50% 80%; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

#blazor-error-ui {
    background: var(--error-tint);
    color: var(--error);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    font: 500 .9375rem/1.4 Figtree, sans-serif;
    padding: .8rem 3rem .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}
#blazor-error-ui a.reload { color: var(--error); font-weight: 700; text-underline-offset: 2px; }
#blazor-error-ui .dismiss { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--error); font-size: 1.25rem; cursor: pointer; }
.blazor-error-boundary { background: var(--error-tint); color: var(--error); padding: 1rem; border-radius: var(--lg); }
.blazor-error-boundary::after { content: "Something went wrong on this screen."; }

/* Forms and buttons (DESIGN.md Components). One primary action per screen. */
.stack { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; }
.field label { font: 600 .8125rem Figtree; letter-spacing: .01em; }
.input {
    min-height: 48px;
    width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--muted);
    border-radius: var(--sm);
    padding: 0 14px;
}
textarea.input { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input:focus-visible { border-color: var(--primary); border-width: 2px; outline: none; }
.input.bad { border-color: var(--error); }
.btn {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--md);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s, transform .12s ease-out;
}
.btn:hover:not([disabled]) { background: var(--primary-hover); }
/* A link that looks like the button, for actions that must work before the app has started (the static Landing). */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn:active:not([disabled]) { transform: scale(.98); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-plain {
    min-height: 44px;
    background: none;
    border: 0;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    cursor: pointer;
    font-weight: 500;
    font-size: .9375rem;
}
.note { font-size: .875rem; line-height: 1.45; color: var(--muted); margin: 0; }
.note.bad { color: var(--error); }
.btn-plain.danger { color: var(--error); }
.head-row h1 { margin: 0; }
.head-row .btn-plain .icon { width: 18px; height: 18px; vertical-align: -3px; }
.new-crew { margin-bottom: var(--space-md); }
.speech { display: flex; align-items: center; gap: var(--space-sm); }
.speech img { width: 96px; flex: none; height: auto; }
.bubble { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--lg); padding: 12px 16px; margin: 0; }
.bubble p { margin: 0; }

/* The app frame: one phone column, with room for the tab bar when it is there. */
.app { max-width: 480px; margin: 0 auto; }
.app.with-tabs { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* Bottom tab bar with the raised centre action (DESIGN.md Layout). */
.tabs {
    position: fixed;
    inset: auto 0 0 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1.5px solid color-mix(in srgb, var(--line) 15%, transparent);
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
    /* Above Home's card deck (z-index up to 5), below menus and pickers. */
    z-index: 6;
}
.tab {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 56px;
    min-height: 44px;
    color: var(--muted);
    text-decoration: none;
    font: 600 .75rem Figtree;
    letter-spacing: .02em;
}
.tab.active { color: var(--primary); }
.tab .icon { width: 24px; height: 24px; }
.tab.fab {
    width: 56px;
    height: 56px;
    border-radius: var(--fab);
    background: var(--primary);
    color: var(--on-primary);
    transform: translateY(-22px);
    box-shadow: var(--shadow);
}
.tab.fab .icon { width: 28px; height: 28px; }
.tab.fab.active { color: var(--on-primary); }

/* The onboarding wizard: its own composed screen, no tab bar (DESIGN.md Layout). */
.wizard { min-height: 100dvh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.wizard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: calc(12px + env(safe-area-inset-top)) var(--space-md) var(--space-xs);
    min-height: 52px;
}
.wizard-top .step-label { font: 600 12px Figtree; letter-spacing: .02em; color: var(--muted); margin-left: auto; }
.wizard-step {
    flex: 1;
    padding: var(--space-sm) var(--space-md) calc(16px + env(safe-area-inset-bottom));
    align-content: start;
}
.wizard-step > * { animation: rise .35s ease-out both; }
.wizard-step > *:nth-child(2) { animation-delay: .05s; }
.wizard-step > *:nth-child(3) { animation-delay: .1s; }
.wizard-step > *:nth-child(n+4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.guide { width: 96px; flex: none; height: auto; }
.ring-art { display: block; width: 170px; height: auto; margin: 0 auto; }
.avatar-big { display: grid; place-items: center; justify-self: center; }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.how li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; }
.how b { font: 700 1.1rem "Bricolage Grotesque", sans-serif; color: var(--primary); }
.how strong { font-weight: 600; display: block; }
.how .note { display: block; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.sw i { width: 28px; height: 28px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .12s ease-out; }
.sw[aria-checked="true"] { outline: 2.5px solid var(--primary); outline-offset: -2px; }
.sw[aria-checked="true"] i { transform: scale(1.12); }
.card { background: var(--surface); border-radius: var(--lg); padding: var(--space-md); display: grid; gap: var(--space-sm); justify-items: start; }
.card.stack { justify-items: stretch; }
.pill { display: inline-block; font: 600 12px Figtree; padding: 4px 10px; border-radius: 999px; }
.pill.ok { background: var(--success-tint); color: var(--success); }
.pill.warn { background: var(--warning-tint); color: var(--warning); }
.pill.bad { background: var(--error-tint); color: var(--error); }
.input.code { font: 600 1.5rem/1 Figtree; letter-spacing: .4em; text-align: center; }
.loop-art { display: block; width: 250px; max-width: 80%; height: auto; margin: 0 auto; }

/* Empty screens: Frido fills the space so it reads as "nothing yet", not "broken". */
.empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-sm);
    min-height: calc(100dvh - 160px);
    align-content: center;
    padding-bottom: var(--space-xl);
}
.empty-frido { width: min(78vw, 300px); height: auto; display: block; }
.empty h1 { margin: 0; }
.empty .note { max-width: 32ch; }
.empty .btn { margin-top: var(--space-md); max-width: 320px; }

/* Loading: grey blocks in the shape of what is coming, with a slow sheen. */
.skel-group { display: grid; gap: var(--space-sm); }
.skel-group + .skel-group { margin-top: var(--space-sm); }
.skel { position: relative; overflow: hidden; background: color-mix(in srgb, var(--line) 10%, var(--surface)); border-radius: 16px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 12%, transparent), transparent); animation: sheen 1.4s ease-in-out infinite; }
@keyframes sheen { to { transform: translateX(100%); } }
.skel-card { height: 132px; }
.skel-title { height: 1.6rem; width: 55%; border-radius: 8px; }
.skel-row { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-md); align-items: center; padding: 10px var(--space-md); height: 68px; }
.skel-row span { display: grid; gap: 8px; }
.skel-dot { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--line) 12%, var(--surface)); }
.skel-line { display: block; height: 10px; width: 70%; border-radius: 5px; background: color-mix(in srgb, var(--line) 12%, var(--surface)); }
.skel-line.short { width: 40%; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; display: none; } }

/* For labels and text that only screen readers need. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.swatches-group { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.swatches-group legend { font: 600 .8125rem Figtree; padding: 0; }
.sw { cursor: pointer; }
.sw-dot { width: 28px; height: 28px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .12s ease-out; }
.sw:has(:checked), .sw:has(.sw-custom.chosen) { outline: 2.5px solid var(--primary); outline-offset: -2px; }
.sw:has(:checked) .sw-dot, .sw-custom.chosen { transform: scale(1.12); }
.sw-custom { background: conic-gradient(#F0806A, #F6C945, #8FD9B6, #7FB3E6, #B9A6E6, #E58FB0, #F0806A); }
.sw-custom.chosen { background: var(--pick); }
.sw:has(:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Home and the signed-out welcome: Frido carries the screen, then one clear action. */
.welcome, .home-greeting { display: grid; justify-items: center; text-align: center; gap: var(--space-xs); }
.welcome { gap: var(--space-sm); }
.welcome .btn, .welcome .btn-plain { margin-top: var(--space-sm); }
.home-greeting { margin-bottom: var(--space-md); }
.home-greeting .note { max-width: 32ch; }

/* "Where to start": real links, one line each. */
.next-steps { margin-top: var(--space-lg); }
.next-steps-title { font: 600 .75rem Figtree; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-sm); }
.next-steps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.next-card {
    display: grid;
    grid-template-columns: 24px 1fr 20px;
    align-items: center;
    gap: var(--space-md);
    min-height: 64px;
    padding: 12px var(--space-md);
    background: var(--surface);
    border-radius: var(--lg);
    color: var(--text);
    text-decoration: none;
}
.next-card:hover { background: var(--raised); }
.next-card strong { display: block; font-weight: 600; }
.next-card .note { display: block; }
.next-card .icon { width: 24px; height: 24px; color: var(--primary); }
.next-card .icon:last-child { width: 20px; height: 20px; color: var(--muted); }

/* Plans: rows, the progress ring and the yes/maybe/no pills (DESIGN.md Components). */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.section-title { font: 600 .75rem Figtree; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: var(--space-lg) 0 var(--space-sm); }
.plan-row { background: var(--surface); border-radius: var(--lg); padding: var(--space-md); display: grid; gap: var(--space-sm); box-shadow: var(--shadow); }
.plan-row header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.plan-row h3 { font: 700 1.1rem "Bricolage Grotesque", Figtree, sans-serif; margin: 0; letter-spacing: -.01em; }
.plan-row h3 a { color: inherit; text-decoration: none; }
.ring { display: inline-flex; align-items: center; gap: var(--space-sm); font: 600 .875rem Figtree; font-variant-numeric: tabular-nums; }
.ring svg { width: 32px; height: 32px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: color-mix(in srgb, var(--line) 15%, transparent); }
.ring-fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray .6s ease-in-out; }
.rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.rsvp-btn { min-height: 44px; border: 1.5px solid transparent; border-radius: 999px; font: 600 .875rem Figtree; cursor: pointer; }
.rsvp-btn.yes { background: var(--success-tint); color: var(--success); }
.rsvp-btn.maybe { background: var(--warning-tint); color: var(--warning); }
.rsvp-btn.no { background: var(--error-tint); color: var(--error); }
.rsvp-btn[aria-pressed="true"] { border-color: currentColor; }
.rsvp-btn[disabled] { opacity: .5; }
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.chip { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--muted); border-radius: 999px; background: none; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.who { display: flex; align-items: center; gap: var(--space-sm); }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days .chip { min-width: 48px; padding: 0 10px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.btn.danger { background: var(--error-tint); color: var(--error); }
/* One primary per screen; the rest are secondary. */
.btn.secondary { background: var(--raised); color: var(--text); }
.btn.secondary:hover:not([disabled]) { background: color-mix(in srgb, var(--line) 12%, var(--raised)); }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }

/* With plans on Home, Frido steps aside: small, beside the greeting, so the cards come first. */
.home-greeting.compact { grid-template-columns: 72px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: var(--space-md); }
.home-greeting.compact h1 { font-size: 1.3rem; }
.home-frido { width: 72px; height: auto; grid-row: span 2; }
.page > h1 + .note { margin: var(--space-xs) 0 var(--space-lg); }
.row-2 { align-items: start; }
.occurrence { display: grid; gap: var(--space-sm); margin-top: var(--space-md); justify-items: start; }
.occurrence > .plan-row { justify-self: stretch; }
.rsvp-btn[aria-pressed="true"] { border-width: 2px; border-color: currentColor; font-weight: 700; }
.plan-row h3 a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Answers: avatars with a ring and badge in the colour of the answer, and the ⋯ menu ---- */
:root { --tone-yes: var(--success); --tone-maybe: var(--warning); --tone-no: var(--error); --tone-none: var(--muted); }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
.pill .icon { width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }

.people { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; }
.person { display: grid; justify-items: center; gap: 4px; min-width: 48px; max-width: 64px; }
.person-avatar { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2.5px var(--tone); }
.person .badge { position: absolute; right: -5px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-tint); color: var(--tone); box-shadow: 0 0 0 2px var(--surface); }
.person .badge .icon { width: 12px; height: 12px; vertical-align: 0; }
.person-name { font: 600 .75rem Figtree; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.yes { --tone: var(--tone-yes); --tone-tint: var(--success-tint); }
.person.maybe { --tone: var(--tone-maybe); --tone-tint: var(--warning-tint); }
.person.no { --tone: var(--tone-no); --tone-tint: var(--error-tint); }
.person.none { --tone: var(--tone-none); --tone-tint: var(--surface); }
.person.none .person-avatar { box-shadow: none; outline: 2px dashed var(--muted); outline-offset: 0; }
.person.none .person-avatar svg { opacity: .55; }
.person.small { min-width: 0; }
.person.small .person-avatar { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--tone); }
.person.small .badge { width: 14px; height: 14px; right: -4px; bottom: -3px; box-shadow: 0 0 0 1.5px var(--surface); }
.person.small .badge .icon { width: 9px; height: 9px; }
.people.chain { padding: 0; gap: 10px; overflow: visible; }

.progress-line { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.progress-line .menu { margin-left: auto; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn:hover { background: color-mix(in srgb, var(--line) 10%, transparent); }
.menu { position: relative; }
/* A bottom sheet, not an anchored dropdown: position:fixed escapes any scrolling or stacked ancestor, so it never gets clipped. */
.menu-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); border: 0; z-index: 40; cursor: default; animation: fade-in .15s ease-out; }
.menu-list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; list-style: none; margin: 0 auto; max-width: 480px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--raised); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.28); animation: sheet-up .18s ease-out; }
.menu-grip { width: 36px; height: 4px; border-radius: 99px; background: var(--muted); opacity: .4; margin: 4px auto 8px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .menu-scrim, .menu-list { animation: none; } }
.menu-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; font-weight: 500; cursor: pointer; }
.menu-item:hover { background: color-mix(in srgb, var(--line) 8%, transparent); }
.menu-item[aria-checked="true"] { font-weight: 700; }
.menu-list li.rsvp { padding: 10px 4px 16px; border-bottom: 1.5px dashed color-mix(in srgb, var(--line) 25%, transparent); margin-bottom: 6px; }
.rsvp-btn.current { outline: 2.5px solid currentColor; outline-offset: 2px; }
.rsvp-btn.primary.current { outline-color: var(--paper); outline-offset: -4px; }
.menu-item.yes .icon { color: var(--success); } .menu-item.maybe .icon { color: var(--warning); } .menu-item.no .icon { color: var(--error); }

.rsvp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rsvp-btn .icon { width: 18px; height: 18px; }

/* Plans list card, and the later-dates rows on a plan */
.plan-card { display: grid; gap: 6px; padding: var(--space-md); background: var(--surface); border-radius: var(--lg); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.plan-card:hover { background: var(--raised); }
.plan-card-top { display: flex; align-items: center; gap: var(--space-sm); }
.plan-card-top strong { font: 700 1.1rem "Bricolage Grotesque", Figtree, sans-serif; letter-spacing: -.01em; margin-right: auto; }
.plan-card-top > .icon:last-child { color: var(--muted); }
.plan-card-next { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.plan-card-next .icon { color: var(--primary); }
.plan-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: 4px; }
.later { background: var(--surface); border-radius: var(--lg); box-shadow: var(--shadow); }
.later summary { list-style: none; display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: 0 var(--space-md); cursor: pointer; font-weight: 600; }
.later summary::-webkit-details-marker { display: none; }
.later summary > span:first-child { margin-right: auto; }
.later summary > .icon:last-child { color: var(--muted); transition: transform .15s; }
.later[open] summary > .icon:last-child { transform: rotate(90deg); }
.later .plan-row { box-shadow: none; padding-top: 0; }

/* A card that opens to reveal more (You screen: My otter, the merged Profile/Devices sections). */
details.card > summary { list-style: none; display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font: 700 1.1rem "Bricolage Grotesque", Figtree, sans-serif; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary > .icon:last-child { color: var(--muted); transition: transform .15s; margin-left: auto; flex: none; }
details.card[open] > summary > .icon:last-child { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.card > summary > .icon:last-child { transition: none; } }
.mine { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tone-c) 16%, transparent); color: var(--tone-c); }
.mine.yes { --tone-c: var(--tone-yes); } .mine.maybe { --tone-c: var(--tone-maybe); } .mine.no { --tone-c: var(--tone-no); } .mine.none { --tone-c: var(--tone-none); }
.mine .icon { width: 16px; height: 16px; }

/* Friends */
.member { display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-md); background: var(--surface); border-radius: var(--lg); }
.member > span:first-of-type { margin-right: auto; display: grid; }
.card > .icon { width: 24px; height: 24px; color: var(--primary); }
.btn.danger .icon { width: 18px; height: 18px; vertical-align: -3px; }
@media (prefers-reduced-motion: reduce) { .later summary > .icon:last-child { transition: none; } }
.member.pending { opacity: .75; }
.member.pending svg { opacity: .6; }
.menu-item[aria-checked="true"] { background: color-mix(in srgb, var(--line) 10%, transparent); }

/* Nudges kept in the app */

/* You */
.profile { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.profile h1 { font-size: 1.6rem; }
.list + .btn { margin-top: var(--space-md); }

/* ---- Create a plan: the stepper (DESIGN.md Layout, onboarding-style composed screens) ---- */
.step-head { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; margin: 0 calc(-1 * var(--space-md)) var(--space-sm); padding: env(safe-area-inset-top) var(--space-md) 0; position: sticky; top: 0; z-index: 5; background: var(--paper); }
.step-head .close { margin-left: auto; margin-right: -12px; }
.step-label { font: 600 .75rem Figtree; letter-spacing: .02em; color: var(--muted); margin-left: auto; }
.step-head .icon-btn { margin-left: -12px; }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--muted); opacity: .4; transition: width .25s, opacity .25s, background .25s; }
.dots i[aria-current] { width: 22px; background: var(--primary); opacity: 1; }
.step { align-content: start; }
.step > * { animation: rise .35s ease-out both; }
.step > *:nth-child(2) { animation-delay: .05s; }
.step > *:nth-child(3) { animation-delay: .1s; }
.step > *:nth-child(n+4) { animation-delay: .15s; }
.stepper .btn { margin-top: var(--space-sm); }
.field-label { font: 600 .8125rem Figtree; letter-spacing: .01em; margin: var(--space-sm) 0 0; }
.chip[aria-checked="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.options { display: grid; gap: var(--space-sm); }
.option { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; text-align: left; min-height: 56px; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--muted); border-radius: var(--md); cursor: pointer; color: var(--text); }
.option strong { display: block; font-weight: 600; }
.option .note { display: block; }
.option-mark { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; color: transparent; }
.option-mark .icon { width: 14px; height: 14px; }
.option[aria-checked="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.option[aria-checked="true"] .option-mark { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.counter { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-sm) 0; }
.counter output { display: grid; justify-items: center; min-width: 72px; }
.counter output strong { font: 700 2.75rem/1 "Bricolage Grotesque", Figtree, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.counter-btn { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.counter-btn .icon { width: 24px; height: 24px; }
.counter-btn[disabled] { opacity: .35; cursor: not-allowed; }

.plan-preview { display: grid; gap: 8px; padding: var(--space-md); background: var(--surface); border-radius: var(--lg); box-shadow: var(--shadow); }
.plan-preview > strong { font: 700 1.3rem "Bricolage Grotesque", Figtree, sans-serif; letter-spacing: -.01em; }
.preview-row { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.preview-row .icon { color: var(--primary); }

/* ---- Hand-drawn outlines (DESIGN.md Shapes) ----
   An SVG displacement filter was tried first and rejected: browsers sample it a whole pixel at a time, so a thin
   stroke steps and breaks. Instead each sketched thing gets a border-only layer (::before) with uneven stroke widths,
   uneven corner radii, a hair of tilt and drift. sketch.js gives every element its own numbers, seeded by where it sits in the page so nothing shimmers on re-render; the CSS here is the fallback shape. The element itself takes
   the same radii so its fill never pokes out. It is pure CSS, static (no boil), crisp at every pixel density, and text and
   icons sit above it, never distorted. Inputs cannot hold a pseudo-element, so Field wraps them in an .inwrap. */
:is(.chip, .btn, .option, .counter-btn, .rsvp-btn, .tab.fab, .inwrap, .plan-preview, .plan-row, .plan-card, .card, .next-card, .member, .later, .bubble) { position: relative; }
:is(.chip, .btn, .option, .counter-btn, .rsvp-btn, .tab.fab, .inwrap, .plan-preview, .plan-row, .plan-card, .card, .next-card, .member, .later, .bubble, .menu-list) {
    --r: 19px 8px 17px 10px / 10px 18px 8px 19px;
    --w: 1.5px 2.4px 1.6px 1.3px;
    --t: -.22deg;
    border-radius: var(--r);
}
:is(.chip, .rsvp-btn) { --r: 26px 20px 24px 21px / 21px 26px 20px 24px; }
.inwrap { --r: 11px 6px 12px 7px / 7px 12px 6px 11px; }

:is(.chip, .btn, .option, .counter-btn, .rsvp-btn, .tab.fab, .inwrap, .plan-preview, .plan-row, .plan-card, .card, .next-card, .member, .later, .bubble, .menu-list)::before {
    content: "";
    position: absolute;
    inset: 0;
    border: solid var(--stroke, var(--line));
    border-width: var(--w);
    border-radius: var(--r);
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--t));
    pointer-events: none;
}
:is(.chip, .btn, .option, .counter-btn, .rsvp-btn, .tab.fab) { --stroke: var(--line); }
:is(.plan-preview, .plan-row, .plan-card, .card, .next-card, .member, .later, .bubble) { --stroke: color-mix(in srgb, var(--line) 55%, transparent); }
:is(.menu-list, .bubble) { --stroke: var(--line); }
.inwrap { --stroke: var(--muted); }
.rsvp-btn { --stroke: color-mix(in srgb, currentColor 55%, transparent); }
.rsvp-btn[aria-pressed="true"]::before { --stroke: currentColor; border-width: 2.4px 2.8px 2.5px 2.3px; }

/* Their old plain borders give way to the drawn ones. */
.chip, .chip[aria-pressed="true"], .chip[aria-checked="true"], .option, .option[aria-checked="true"], .counter-btn, .rsvp-btn, .rsvp-btn[aria-pressed="true"], .bubble, .menu-list { border-color: transparent; }
.inwrap > .input { border: 0; border-radius: inherit; background: var(--surface); }
.inwrap:focus-within::before { --stroke: var(--primary); border-width: 2.4px 2.7px 2.3px 2.5px; }
.inwrap:has(.input.bad)::before { --stroke: var(--error); }
.inwrap:has(.input:focus-visible), .input:focus-visible { outline: none; }
.btn[disabled]::before, .counter-btn[disabled]::before { opacity: .6; }
.option .option-mark { position: relative; z-index: 1; }
.chip[aria-checked="true"]::before, .chip[aria-pressed="true"]::before, .option[aria-checked="true"]::before { --stroke: var(--line); }
.tab.fab::before { inset: 0; }
.inwrap { display: block; }

/* Install */
.install { display: grid; gap: var(--space-md); justify-items: start; }
.install .btn { justify-self: stretch; }
.steps { width: 100%; }
.steps li { grid-template-columns: 28px 1fr; align-items: start; }
.steps li > .icon { width: 24px; height: 24px; color: var(--primary); margin-top: 2px; }
.steps strong { display: block; }

/* Install guide: Share on Safari's bar, and what the icon will look like */
.safari-bar { width: 100%; max-width: 300px; height: auto; margin-top: var(--space-sm); color: var(--muted); }
.safari-bar .share-ring { stroke: var(--primary); stroke-width: 2.2; }
.safari-bar .share-glyph { stroke: var(--text); }
.app-icon { display: grid; justify-items: center; gap: var(--space-sm); margin: var(--space-sm) auto 0; text-align: center; }
.app-icon img { width: 72px; height: 72px; border-radius: 22.5%; box-shadow: var(--shadow); }
.app-icon figcaption { display: grid; gap: 2px; max-width: 24ch; }


/* Answering: "I'm in" is big and on the right, under the thumb; maybe and can't are quiet text. */
.rsvp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.rsvp-quiet { display: flex; gap: 2px; }
.rsvp-btn.quiet { background: none; color: var(--muted); border-color: transparent; font-weight: 600; font-size: .875rem; padding: 0 10px; }
.rsvp-btn.quiet::before { display: none; }
.rsvp-btn.quiet .icon { width: 16px; height: 16px; }
.rsvp-btn.primary { flex: 1; max-width: 190px; min-height: 52px; background: var(--success); color: var(--paper); font-size: 1.05rem; font-weight: 700; }
.rsvp-btn.primary .icon { width: 20px; height: 20px; }
.update { display: flex; gap: var(--space-xs); align-items: baseline; flex-wrap: wrap; margin: 0; font-size: .875rem; }
.pill.info { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--text); }
.subtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-xs); margin-bottom: var(--space-md); }
.subtabs .chip { justify-content: center; padding: 0 8px; }
.chip[aria-selected="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip[disabled] { opacity: .5; cursor: not-allowed; }

/* A crew: its name, its otters, and (for the admin) a manage panel. */
.crew { display: grid; gap: var(--space-md); }
.crew-head { display: flex; align-items: center; gap: var(--space-sm); }
.crew-head h2 { margin: 0; font-size: 1.25rem; flex: 1; }
.otters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-md) var(--space-sm); }
.otters li { display: grid; align-content: start; justify-items: center; gap: 2px; text-align: center; font-size: .8125rem; }
.otters li.pending { opacity: .65; }
.otters strong { max-width: 100%; overflow-wrap: anywhere; }
.otters .tag { color: var(--muted); font-size: .75rem; min-height: 1.2em; }
.manage { display: grid; gap: var(--space-sm); border-top: 1.5px dashed color-mix(in srgb, var(--line) 30%, transparent); padding-top: var(--space-md); }

/* Wizard header: back on the left, close on the right, the progress truly in the middle. */
.step-head { display: grid; grid-template-columns: 44px 1fr 44px; gap: 0; }
.step-head .side { display: flex; align-items: center; }
.step-head .side.end { justify-content: flex-end; }
.step-head .icon-btn, .step-head .close { margin: 0 -8px; }
.step-head .centre { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-head .step-label { margin: 0; }

/* The repeat line sits with its chips as one block. */
.repeat-box { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.repeat-box .chips { margin-bottom: 0; }
.summary { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-xs) 0 0; padding: 10px var(--space-md); border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 14%, transparent); }
.summary .icon { color: var(--primary); flex: none; }

/* Calendar picker */
.datepick { position: relative; }
.dp-scrim { position: fixed; inset: 0; background: none; border: 0; z-index: 7; cursor: default; }
.dp-field { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.dp-field .icon { color: var(--primary); width: 20px; height: 20px; }
.datepick .dp-panel { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 2 * var(--space-md))); padding: var(--space-sm); gap: var(--space-xs); background: var(--raised); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.dp-head { display: flex; align-items: center; justify-content: space-between; }
.dp-head strong { font: 700 1rem "Bricolage Grotesque", sans-serif; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; justify-items: center; }
.dp-dow { font: 600 .75rem Figtree; color: var(--muted); padding: 4px 0; }
.dp-day { width: 100%; max-width: 44px; aspect-ratio: 1; border: 1.5px solid transparent; border-radius: 50%; background: none; color: var(--text); font: 600 .9375rem Figtree; cursor: pointer; }
.dp-day:hover:not([disabled]) { background: color-mix(in srgb, var(--line) 10%, transparent); }
.dp-day.today { border-color: var(--muted); }
.dp-day[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Centered popup dialogs (otter customization, edit details) */
.otter-trigger { border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; }
.card.modal-panel { position: fixed; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 2 * var(--space-md))); max-height: calc(100vh - 2 * var(--space-md)); overflow-y: auto; padding: var(--space-md); gap: var(--space-sm); background: var(--raised); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.card.modal-panel-big { width: min(420px, 96vw); max-height: 92vh; }
.modal-panel-head { display: flex; align-items: center; justify-content: space-between; }
.dp-day[disabled] { opacity: .3; cursor: default; }

/* "I'm in": a short burst on that date's card only. */
.plan-row.celebrate { animation: glow .9s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.plan-row.celebrate .pill.ok { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.confetti { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 3; }
.confetti i { position: absolute; left: var(--x); top: -12px; width: 9px; height: 5px; border-radius: 1.5px; background: var(--c); opacity: 0;
    animation: fall .85s cubic-bezier(.35, 0, .85, .6) var(--d) both; }
@keyframes fall {
    0% { opacity: 1; top: -12px; transform: translateX(0) rotate(0); }
    80% { opacity: 1; }
    100% { opacity: 0; top: 100%; transform: translateX(var(--dx)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .plan-row.celebrate, .plan-row.celebrate .pill.ok { animation: none; } }
.step > *:has(.dp-panel) { position: relative; z-index: 9; }

/* Two options side by side (monthly: weekday or date). */
.options.two { grid-template-columns: 1fr 1fr; }
.options.two .option { padding: 10px; gap: 8px; }
.tp-title { font: 600 .8125rem Figtree; color: var(--muted); margin: 0; }
.tp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; justify-items: center; }
.tp-grid .dp-day { font-variant-numeric: tabular-nums; }
.datepick.right .dp-panel { left: auto; right: 0; }
.datepick .dp-panel { justify-items: stretch; }
.dp-panel .dp-grid, .dp-panel .tp-grid { width: 100%; }

/* Time wheels */
.wheels { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--space-xs); }
.wheel { height: 200px; width: 88px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 80px 0; scrollbar-width: none; overscroll-behavior: contain; }
.wheel::-webkit-scrollbar { display: none; }
.wheel-item { display: block; width: 100%; height: 40px; border: 0; background: none; scroll-snap-align: center; color: var(--muted); font: 600 1.25rem Figtree; font-variant-numeric: tabular-nums; cursor: pointer; }
.wheel-item[aria-selected="true"] { color: var(--text); font-weight: 700; }
.wheel-colon { font: 700 1.5rem Figtree; color: var(--muted); }
.wheel-band { position: absolute; left: 0; right: 0; top: 80px; height: 40px; border-radius: 10px; pointer-events: none;
    background: color-mix(in srgb, var(--primary) 16%, transparent); }

/* Home's two lists as a stack of cards, one on top of another, with a couple peeking behind. */
.stack-deck { display: grid; }
.stack-card { grid-area: 1 / 1; align-self: start; touch-action: pan-y;
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .26s ease; }
.stack-card.dragging { transition: none; }
.stack-card.top { transform: none; opacity: 1; z-index: 4; }
/* A hair of delay per layer, back to front, so the deck cascades into place rather than every card moving as one. */
.stack-card.peek-1 { transform: translateY(14px) scale(.95) rotate(-1.5deg); opacity: .95; z-index: 3; pointer-events: none; transition-delay: .03s, 0s; }
.stack-card.peek-2 { transform: translateY(26px) scale(.9) rotate(1.5deg); opacity: .85; z-index: 2; pointer-events: none; transition-delay: .06s, .02s; }
.stack-card.peek-3 { transform: translateY(26px) scale(.9); opacity: 0; z-index: 1; pointer-events: none; transition-delay: .06s, .02s; }
/* The card that just lost the top spot flies off like a swiped-away card, dot tap or drag alike, then settles
   into the back of the deck once it is off-screen. */
.stack-card.exit-left { transform: translateX(-130%) rotate(-10deg); opacity: 0; z-index: 5; pointer-events: none; }
.stack-card.exit-right { transform: translateX(130%) rotate(10deg); opacity: 0; z-index: 5; pointer-events: none; }
/* z-index on a grid item still opens its own stacking context, which traps the card's answer-menu sheet below the
   tab bar (z-index 6) no matter how high the sheet's own z-index goes. Raise the one card whose sheet is open above
   the tab bar so the sheet reads as the bottom-most overlay it is meant to be. */
.stack-card:has(.menu-list) { z-index: 46; }

@media (prefers-reduced-motion: reduce) { .stack-card { transition: opacity .26s ease; transition-delay: 0s; } .stack-card.peek-1, .stack-card.peek-2, .stack-card.exit-left, .stack-card.exit-right { transform: none; } }

/* The dots under a stack: same shape as the wizard's, but each one is a real, tappable tab. */
.dots.nav { justify-content: center; margin: var(--space-sm) 0 var(--space-md); }
.dots.nav .dot { border: 0; background: none; padding: 6px 3px; cursor: pointer; }
.dots.nav .dot i { display: block; }



/* The hook is always two lines: the problem, then Frido's answer. German's first line is ~12.5em wide, so it scales with the phone to fit down to 320px. */
.hook { white-space: nowrap; }
.hook:lang(de) { font-size: clamp(1.35rem, 7vw, 2.75rem); }

/* The signed-out Home: a chat states the problem, Frido steps in, then soft full-width bands. Left-aligned throughout. */
.landing { display: grid; margin: calc(-12px - env(safe-area-inset-top)) calc(-1 * var(--space-md)) calc(-16px - env(safe-area-inset-bottom)); }
.landing-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: calc(12px + env(safe-area-inset-top)) var(--space-md) 12px; }
.brand { display: inline-flex; align-items: center; gap: 6px; font: 700 1.05rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.brand img { width: 26px; height: 26px; }
.landing-top nav { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.landing-top nav a { color: var(--primary); }
.flag { width: 16px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 30%, transparent); }
.lang-chip { display: inline-flex; align-items: center; gap: 8px; }
.lang-chip .flag { width: 20px; }

.landing-chat { padding: var(--space-md) var(--space-md) calc(var(--space-lg) + 28px); }
.landing-chat h1 { margin-bottom: var(--space-md); }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chat .msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.chat .msg.me { margin-left: auto; flex-direction: row-reverse; }
.chat .bubble { background: var(--raised); border: 1.5px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px; }
.chat .me .bubble { background: var(--success-tint); border-radius: 16px 16px 4px 16px; }
.chat .who { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.chat .gap { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 6px 0; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chat .gap::before, .chat .gap::after { content: ""; width: 40px; border-top: 1.5px dashed var(--muted); opacity: .6; }


.band { display: grid; gap: var(--space-sm); padding: 28px var(--space-md); }
.band h2 { font: 700 2rem/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; margin: 0; }
.band-butter { background: var(--band-warm); }
.band-butter { gap: var(--space-lg); }
/* Art floats on alternating sides and the words wrap around its round shape. */
.flow { display: flow-root; }
.flow-right { text-align: right; }
.flow .note { margin-top: var(--space-sm); }
.flow-art { width: min(52%, 210px); height: auto; shape-outside: circle(48%); }
.flow-art-left { float: left; margin: 0 var(--space-sm) 0 calc(-1 * var(--space-sm)); }
.flow-art-right { float: right; margin: 0 calc(-1 * var(--space-sm)) 0 var(--space-sm); }
.flow-right h2 { padding-top: 18%; }
.band-mint { background: var(--success-tint); }
.band-sea { background: color-mix(in srgb, var(--primary) 12%, var(--paper)); }
.band-sea { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.lang-switch { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px; border: 1.5px solid var(--muted); border-radius: 999px; background: none; color: var(--text); font: 600 0.75rem Figtree, sans-serif; cursor: pointer; }
.band-sea .btn { margin-top: var(--space-sm); }
.demo-plan { display: grid; gap: 6px; margin-top: var(--space-sm); padding: 12px; background: var(--raised); border: 1.5px solid var(--line); border-radius: var(--lg); box-shadow: var(--shadow); }
.demo-plan strong { font: 700 1.1rem "Bricolage Grotesque", sans-serif; }
.demo-chain { display: flex; }
.demo-chain > * + * { margin-left: -6px; }
.band-steps { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.band-steps li { display: grid; grid-template-columns: 30px 1fr; padding: 10px 0; border-top: 1.5px solid color-mix(in srgb, var(--line) 15%, transparent); }
.band-steps b { font: 700 1.3rem "Bricolage Grotesque", sans-serif; color: var(--primary); }
.band-steps strong, .band-steps .note { display: block; }
.band .hook:lang(de) { font-size: clamp(1.35rem, 7vw, 2.75rem); }

/* Bands meet on a soft wave, not a ruled line: each band paints its own wavy top edge in its colour, alternate ones mirrored. */
.band { position: relative; }
.band::before {
    content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: inherit;
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C45 2 85 0 130 9s92 18 138 9 62-16 92-8V28z'/%3E%3C/svg%3E");
    -webkit-mask: var(--wave) center / 100% 100% no-repeat; mask: var(--wave) center / 100% 100% no-repeat;
}
.band-mint::before { transform: scaleX(-1); }

/* A panel that opens in place (crew manage, new crew): grows and fades in, shrinks and fades out. */
.reveal { display: grid; align-self: start; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease-in, opacity .18s ease-in, margin .22s ease-in; }
/* Closed inside a .stack, it gives back the gap too, so the card ends where its content ends. */
.stack > .reveal:not(.open) { margin-top: calc(-1 * var(--space-md)); }
.reveal.open { grid-template-rows: 1fr; opacity: 1; transition-timing-function: ease-out; }
.reveal > * { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }

/* Update toast (js/update.js): ink background and one action, like the Undo toast. Sits above the tab bar. */
#update-toast {
    position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(448px, calc(100% - 2 * var(--space-md))); z-index: 999;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm) var(--space-md);
    padding: 12px var(--space-md); border-radius: var(--md);
    background: var(--text); color: var(--paper); box-shadow: var(--shadow);
    font: 500 .9375rem/1.4 Figtree, sans-serif;
}
#update-toast[hidden] { display: none; }
#update-toast .update-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 25%, transparent); overflow: hidden; }
#update-toast .update-bar[hidden] { display: none; }
#update-toast .update-bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
#update-toast .update-now { min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
#update-toast .update-now[hidden] { display: none; }
/* You > Device: which build this is, for support. */
.app-version { text-align: center; margin-top: var(--space-sm); user-select: all; }

/* ---- The iOS app (docs/designs/friendolin-native-app.md) ---- */

/* Text follows the iPhone's text-size setting; Figtree stays the face (design D24). */
html.native { font: -apple-system-body; font-family: Figtree, system-ui, sans-serif; }
/* The boot Frido only shows when starting takes longer than 400 ms (design D22). */
html.native .boot img { opacity: 0; }
html.native.slow-boot .boot img { opacity: 1; transition: opacity .2s ease-out; }
@media (prefers-reduced-motion: reduce) { html.native.slow-boot .boot img { transition: none; } }

/* Offline: cached screens with a strip saying when they are from (design D12). */
.offline-strip { position: sticky; top: 0; z-index: 5; margin: 0; padding: 8px var(--space-md); padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--warning-tint); color: var(--warning); font: 600 .875rem/1.4 Figtree, sans-serif; text-align: center; }

/* "Updated to v1.2" after an update, like the update toast (T19). */
.app-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(448px, calc(100% - 2 * var(--space-md))); z-index: 999; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: 12px var(--space-md); border-radius: var(--md); background: var(--text); color: var(--paper); box-shadow: var(--shadow); font: 500 .9375rem/1.4 Figtree, sans-serif; }
.app-toast-action { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-md); border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* A bottom sheet with content, not a menu (Stop sharing, Delete my account). */
.menu-list.sheet { padding: 8px var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); max-height: 85dvh; overflow-y: auto; }
.card-frido { width: 96px; height: auto; display: block; }

/* Free / busy rows: crew preview, Who's free. A word in every pill, never colour alone. */
.free-list { gap: 0; }
.free-row { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; }
.free-row > span:nth-child(2) { flex: 1; }
.free-list.card { padding: var(--space-sm) var(--space-md); }

/* Get the app (iPhone web after the App Store launch, design D3/D4/D9/D20). */
.get-the-app { display: grid; gap: var(--space-md); justify-items: start; }
/* Frido scales with the screen so the badge and "Open it" stay above the fold on an SE with Safari's bars (D9). */
.wall-frido { width: auto; max-height: 22dvh; max-width: 70vw; height: auto; display: block; }
.wall-sub { margin: 0; }
.wall-reasons { width: 100%; }
.wall-reasons p { margin: 0; display: flex; align-items: center; gap: var(--space-sm); }
.wall-reasons .icon { width: 20px; height: 20px; flex: none; color: var(--primary); }
/* Placeholder for Apple's official black badge artwork (an allowed exception to the palette), swapped in at launch. */
.appstore-badge { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; background: #000; color: #fff;
    font: 600 1rem Figtree, sans-serif; text-decoration: none; }
.open-app { min-height: 44px; display: inline-flex; align-items: center; }

.privacy-list { display: grid; gap: var(--space-sm); padding-left: 1.2em; margin: 0; }