/* Bundled so web, iOS and Android render the same type. Both are variable fonts, so one file per subset
   covers every weight in use. SIL Open Font License, see ../fonts/OFL-*.txt. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url('../fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Literata';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/literata-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Literata';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/literata-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Mirrors design/tokens.json. These are the Day values; the Night values are redefined on the dusk and night
   skies further down. ThemeTokenTests and SkyStylesheetTests fail the build when a value drifts from that
   file. The sky gradients, switch-off and moon are tokens too; the rest after them come from the approved
   artboards, which use them without naming them. */
:root {
    --gc-primary: #3F6B57;
    --gc-primary-strong: #2C4D3E;
    --gc-primary-tint: #DDE9E1;
    --gc-selected-tile: #E3EEE7;
    --gc-on-primary: #FFFFFF;
    --gc-accent: #F2B63D;
    --gc-accent-tint: #FBEFCF;
    --gc-surface: #F1F4EE;
    --gc-raised: #FFFFFF;
    --gc-line: #D3DCD2;
    --gc-divider: #E4EAE3;
    --gc-ink: #1B2620;
    --gc-muted: #56625B;
    --gc-placeholder: #6A756E;
    --gc-help: #2F5D8C;
    --gc-help-strong: #234A71;
    --gc-help-tint: #E1EAF4;
    --gc-raised-shadow: 0 1px 0 rgba(27,38,32,0.04), 0 22px 44px -16px rgba(27,38,32,0.24);
    --gc-radius-card: 32px;
    --gc-radius-sheet: 32px;
    --gc-radius-group: 20px;
    --gc-radius-tile: 16px;
    --gc-radius-field: 12px;
    --gc-radius-chip: 10px;
    --gc-radius-button: 999px;
    --gc-font-ui: Nunito, system-ui, sans-serif;
    --gc-font-tip: Literata, Georgia, serif;
    --gc-switch-off: #C9D2C8;
    --gc-moon: #F3EEDC;
    --gc-surface-night: #16121E;
    --gc-sky-dawn: linear-gradient(180deg, #F7D5BE 0%, #F3E6D8 26%, #F1F4EE 50%);
    --gc-sky-day: linear-gradient(180deg, #D8E6DF 0%, #E6EEE8 26%, #F1F4EE 46%);
    --gc-sky-golden: linear-gradient(180deg, #F4C979 0%, #F3DDB0 26%, #F1F4EE 52%);
    --gc-sky-dusk: linear-gradient(180deg, #6B4F80 0%, #3A2D4C 30%, #221B2D 56%, #16121E 100%);
    --gc-sky-night: linear-gradient(180deg, #2B2238 0%, #1C1727 40%, #16121E 100%);
    --gc-sky-help: linear-gradient(180deg, #E4ECF5 0%, #EEF1F2 26%, #F1F4EE 48%);
    --gc-ink-soft: #3D4A42;
    --gc-on-help: #FFFFFF;
    --gc-glass: rgba(255,255,255,0.55);
    --gc-glass-edge: rgba(255,255,255,0.8);
    --gc-control: #FFFFFF;
    --gc-control-edge: #D9E0D8;
    --gc-bar: rgba(255,255,255,0.72);
    --gc-bar-edge: rgba(255,255,255,0.95);
    --gc-bar-shadow: 0 12px 30px -8px rgba(27,38,32,0.22);
    --gc-rail-shadow: 0 12px 30px -10px rgba(27,38,32,0.18);
    --gc-tile: #FFFFFF;
    --gc-tile-edge: #D3DCD2;
    --gc-sheet: #FFFFFF;
    --gc-scrim: rgba(27,38,32,0.35);
    --gc-arc-horizon: rgba(27,38,32,0.16);
    --gc-arc-dots: rgba(27,38,32,0.32);
    --gc-arc-end: rgba(27,38,32,0.45);
    --gc-arc-open-label: #2C4D3E;
    --gc-sun-halo: rgba(242,182,61,0.2);
    --gc-moon-halo: rgba(243,238,220,0.12);
}

html, body {
    font-family: var(--gc-font-ui);
    font-weight: 600;
    color: var(--gc-ink);
    background: var(--gc-surface);
}

::placeholder {
    color: var(--gc-placeholder);
    opacity: 1;
}

/* Mud's default radius is the field radius; buttons are fully round everywhere. */
.mud-button-root.mud-button {
    border-radius: var(--gc-radius-button);
}

/* The admin area's shell: a nav column from 1024px, a bottom strip below. Member screens use the sky shell
   further down instead. Kept free of Tailwind so the app lays out before Tailwind's build step has run. */
.gc-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gc-content {
    flex: 1;
    padding: 1rem;
    padding-bottom: 5rem; /* leaves room for the bottom bar on narrow viewports */
}

.gc-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-around;
    background: var(--gc-surface);
    border-top: 1px solid var(--gc-line);
    z-index: 10;
}

.gc-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 1024px) {
    .gc-app {
        flex-direction: row;
    }

    .gc-nav {
        position: static;
        flex-direction: column;
        justify-content: flex-start;
        width: 96px;
        border-top: none;
        border-right: 1px solid var(--gc-line);
        padding-top: 1rem;
        gap: 0.5rem;
    }

    .gc-content {
        padding-bottom: 1rem;
    }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--gc-primary-strong);
}

.btn-primary {
    color: var(--gc-on-primary);
    background-color: var(--gc-primary);
    border-color: var(--gc-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gc-primary);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* App splash while the WASM payload downloads. Rendered before Blazor boots, so it uses only the tokens
   above and Blazor's --blazor-load-percentage variables. Follows the "sky is the clock" direction: a dawn
   sky, the GrowClose leaf, and the sun climbing the day arc as the payload loads. */
.gc-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--gc-sky-dawn);
    font-family: var(--gc-font-ui);
    color: var(--gc-ink);
}

.gc-splash-arc {
    width: min(20rem, 68vw);
    height: auto;
}

    .gc-splash-horizon {
        stroke: var(--gc-arc-horizon);
        stroke-width: 1;
    }

    .gc-splash-path {
        fill: none;
        stroke: var(--gc-arc-dots);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 0 14;
    }

    /* Sun + halo ride the arc. The path matches .gc-splash-path's d attribute.
       Blazor sets --blazor-load-percentage to a bare number (0..100). We seek a
       paused 100s traversal with a negative delay of that many seconds, so load
       42 -> -42s -> 42% along the arc. No % unit on the variable is needed. */
    .gc-splash-halo,
    .gc-splash-sun {
        offset-path: path("M20 150 Q160 -60 300 150");
        offset-rotate: 0deg;
        animation: gc-splash-travel 100s linear -0.01s 1 both paused;
        animation-delay: calc(var(--blazor-load-percentage, 0) * -1s);
    }

    .gc-splash-halo {
        fill: var(--gc-sun-halo);
    }

    .gc-splash-sun {
        fill: var(--gc-accent);
        transform-box: fill-box;
        transform-origin: center;
        /* Layer the breathe pulse on top of the arc traversal. */
        animation:
            gc-splash-travel 100s linear 1 both paused,
            gc-splash-breathe 2.4s ease-in-out infinite;
        animation-delay: calc(var(--blazor-load-percentage, 0) * -1s), 0s;
    }

.gc-splash-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

    .gc-splash-leaf {
        width: 2rem;
        height: 2rem;
        fill: none;
        stroke: var(--gc-primary);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .gc-splash-name {
        font-size: 1.75rem;
        font-weight: 900;
        letter-spacing: -0.01em;
    }

.gc-splash-text {
    min-height: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gc-muted);
}

    .gc-splash-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

@keyframes gc-splash-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.72; transform: scale(0.86); }
}

@keyframes gc-splash-travel {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the sun parked at the load position, just drop the pulse. */
    .gc-splash-sun {
        animation: gc-splash-travel 100s linear 1 both paused;
        animation-delay: calc(var(--blazor-load-percentage, 0) * -1s);
    }
}

@media (prefers-color-scheme: dark) {
    .gc-splash {
        background: var(--gc-sky-night);
        color: var(--gc-moon);
    }

    .gc-splash-halo { fill: var(--gc-moon-halo); }
    .gc-splash-sun { fill: var(--gc-moon); }
    .gc-splash-leaf { stroke: #9FD6B8; }
    .gc-splash-horizon { stroke: rgba(255,255,255,0.16); }
    .gc-splash-path { stroke: rgba(255,255,255,0.32); }
    .gc-splash-text { color: #B5ACC0; }
}

/* Neutral full-screen loader the AuthGuard holds while it decides where to send
   the viewer, so the target page (e.g. Today's skeleton) never flashes before a
   redirect. Sits on the same dawn sky as the boot splash for a seamless handoff. */
.gc-guard-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gc-sky-dawn);
    color: var(--gc-muted);
}

.gc-guard-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 3px solid var(--gc-arc-horizon);
    border-top-color: var(--gc-accent);
    animation: gc-guard-spin 0.8s linear infinite;
}

@keyframes gc-guard-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gc-guard-spinner {
        animation: none;
        border-top-color: var(--gc-arc-horizon);
    }
}

@media (prefers-color-scheme: dark) {
    .gc-guard-loading {
        background: var(--gc-sky-night);
    }

    .gc-guard-spinner {
        border-color: rgba(255, 255, 255, 0.16);
        border-top-color: var(--gc-moon);
    }
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* --- Member screens --------------------------------------------------------------------------------------
   Card, chip, bar and sheet styles for onboarding, assessment, reveal and Today, drawn from the tokens at the
   top of this file. The reserved help blue (--gc-help) is used only for help/safety UI. Missed days never use
   error red. */

.gc-step, .gc-page {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gc-muted {
    color: var(--gc-muted);
}

.gc-card {
    background: var(--gc-raised);
    border-radius: var(--gc-radius-card);
    padding: 1.25rem 1.375rem;
    box-shadow: var(--gc-raised-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gc-chip {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: var(--gc-radius-chip);
    border: 1px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.gc-chip-selected {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
    color: var(--gc-on-primary);
}

.gc-chip:focus-visible, .gc-button:focus-visible, .gc-choice-card:focus-visible, .gc-link-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-button {
    min-height: 44px;
    padding: 0.6rem 1.5rem;
    border-radius: var(--gc-radius-button);
    border: none;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

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

.gc-link-button {
    min-height: 44px;
    background: none;
    border: none;
    color: var(--gc-primary-strong);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.gc-input, .gc-textarea {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--gc-radius-field);
    border: 1px solid var(--gc-placeholder);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
}

.gc-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    color: var(--gc-ink);
    cursor: pointer;
}

.gc-toggle input[type="checkbox"] {
    appearance: none;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--gc-radius-chip);
    border: 1.5px solid var(--gc-line);
    background: var(--gc-raised);
    cursor: pointer;
    position: relative;
}

.gc-toggle input[type="checkbox"]:checked {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
}

.gc-toggle input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 8px;
    height: 14px;
    border: solid var(--gc-on-primary);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.gc-toggle input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-api-message {
    color: var(--gc-ink);
    background: var(--gc-accent-tint);
    border-radius: var(--gc-radius-field);
    padding: 0.75rem 1rem;
}

.gc-help-link {
    color: var(--gc-help);
    font-weight: 800;
}

.gc-choice-card {
    min-height: 88px;
    padding: 1.25rem;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.gc-style-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0 0.625rem 0 0.5rem;
    border-radius: var(--gc-radius-chip);
    background: var(--gc-style-tint);
    color: var(--gc-style-text);
    font-weight: 800;
}

.gc-style-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gc-style-bar {
    display: grid;
    grid-template-columns: 11rem 1fr 3rem;
    align-items: center;
    gap: 0.5rem;
}

.gc-style-bar-track {
    height: 0.6rem;
    border-radius: var(--gc-radius-button);
    background: var(--gc-divider);
    overflow: hidden;
}

.gc-style-bar-fill {
    height: 100%;
}

.gc-misfire-gap {
    border-left: 4px solid var(--gc-accent);
    padding-left: 0.75rem;
}

.gc-idea {
    font-family: var(--gc-font-tip);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
}

.gc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--gc-raised);
    border-radius: var(--gc-radius-sheet) var(--gc-radius-sheet) 0 0;
    padding: 1.25rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 20;
}

.gc-dots {
    display: grid;
    grid-template-columns: repeat(7, 1.5rem);
    gap: 0.4rem;
}

.gc-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--gc-divider);
}

.gc-dot-connected {
    background: var(--gc-primary);
}

.gc-skipped {
    color: var(--gc-muted);
}

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

.gc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gc-tip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.gc-skeleton {
    color: var(--gc-muted);
    min-height: 12rem;
}

/* Today's idea being written. Every resting style is the fully grown frame, so with reduced motion (which
   switches all animation off above) the seedling still shows complete rather than as an empty card. */
.gc-idea-preparing {
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    overflow: hidden;
}

.gc-idea-preparing-scene {
    width: 11rem;
    height: auto;
    overflow: visible;
}

.gc-idea-preparing-sun circle {
    fill: var(--gc-accent);
    transform-box: fill-box;
    transform-origin: center;
    animation: gc-splash-breathe 2.4s ease-in-out infinite;
}

.gc-idea-preparing-rays {
    stroke: var(--gc-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transform-origin: 112px 36px;
    animation: gc-spin 14s linear infinite;
}

.gc-idea-preparing-soil {
    fill: none;
    stroke: var(--gc-line);
    stroke-width: 3;
    stroke-linecap: round;
}

.gc-idea-preparing-stem {
    fill: none;
    stroke: var(--gc-primary);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: gc-idea-stem 4s ease-out infinite;
}

.gc-idea-preparing-leaf {
    fill: var(--gc-primary);
    transform-box: fill-box;
    animation: gc-idea-leaf 4s ease-out infinite;
}

.gc-idea-preparing-leaf--right {
    transform-origin: left bottom;
    animation-delay: 0.1s;
}

.gc-idea-preparing-leaf--left {
    fill: var(--gc-primary-strong);
    transform-origin: right bottom;
    animation-delay: 0.45s;
}

.gc-idea-preparing-sprout {
    transform-origin: 68px 102px;
    animation: gc-idea-sway 4s ease-in-out infinite;
}

.gc-idea-preparing-mote {
    fill: var(--gc-accent);
    opacity: 0.6;
    animation: gc-idea-mote 3s ease-out infinite;
}

.gc-idea-preparing-mote:nth-of-type(2) { animation-delay: 1s; }
.gc-idea-preparing-mote:nth-of-type(3) { animation-delay: 2s; }

.gc-idea-preparing-copy p {
    margin: 0;
}

.gc-idea-preparing-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gc-ink);
}

.gc-idea-preparing-dots span {
    animation: gc-coach-typing 1.2s ease-in-out infinite;
}

.gc-idea-preparing-dots span:nth-child(2) { animation-delay: 0.15s; }
.gc-idea-preparing-dots span:nth-child(3) { animation-delay: 0.3s; }

.gc-idea-preparing-bar {
    position: relative;
    width: min(14rem, 80%);
    height: 0.375rem;
    margin-top: 0.5rem;
    border-radius: var(--gc-radius-button);
    background: var(--gc-primary-tint);
    overflow: hidden;
}

    .gc-idea-preparing-bar span {
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        border-radius: inherit;
        background: var(--gc-primary);
        animation: gc-idea-bar 1.8s ease-in-out infinite;
    }

@keyframes gc-idea-stem {
    0% { stroke-dashoffset: 1; }
    35%, 88% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes gc-idea-leaf {
    0%, 25% { transform: scale(0); }
    45%, 88% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes gc-idea-sway {
    0%, 45% { transform: rotate(0deg); }
    60% { transform: rotate(-3deg); }
    75% { transform: rotate(2deg); }
    88%, 100% { transform: rotate(0deg); }
}

@keyframes gc-idea-mote {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translateY(-40px); opacity: 0; }
}

@keyframes gc-idea-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* The sprout mark, drawn from the same line icon as the Today tab rather than an emoji. */
.gc-sprout::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.35em;
    vertical-align: -0.2em;
    background-color: var(--gc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12c0-4.4 2.9-7 7.5-7 0 4.4-2.9 7-7.5 7z'/%3E%3Cpath d='M12 14.5c0-3.5-2.4-5.5-6.5-5.5 0 3.5 2.4 5.5 6.5 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12c0-4.4 2.9-7 7.5-7 0 4.4-2.9 7-7.5 7z'/%3E%3Cpath d='M12 14.5c0-3.5-2.4-5.5-6.5-5.5 0 3.5 2.4 5.5 6.5 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gc-pulse-chart polyline {
    stroke: var(--gc-primary);
}

.gc-pulse-chart circle {
    fill: var(--gc-primary);
}

.gc-pulse-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gc-history-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gc-divider);
}

/* Coach chat screen (GC-804), drawn from CoachEmpty, CoachChat and CoachHelp. The sky and top bar come from
   the layout; help blue appears only on the offered-helpline card, which reuses the shared solid HelpCard. */
.gc-coach-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-coach-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 40rem;
    margin: 0 auto;
    width: 100%;
}

.gc-coach-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-coach-header .gc-coach-title {
    margin: 0;
    flex-grow: 1;
}

.gc-coach-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gc-coach-thread-menu {
    position: relative;
}

/* The conversation menu drops below the ⋯ button in the top bar. */
.gc-coach-thread-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    gap: 8px;
}

.gc-coach-thread-heading {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 800;
}

.gc-coach-thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-coach-thread-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-coach-thread-action {
    flex: 1;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--gc-ink);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.gc-coach-thread-delete {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-coach-thread-action:focus-visible, .gc-coach-thread-delete:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* First-use intro: the sprout mark and the invitation, flat on the sky (no raised card). */
.gc-coach-empty {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 6px 0;
}

.gc-coach-empty-mark {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background: var(--gc-primary-tint);
    color: var(--gc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-coach-empty-mark .gc-icon {
    width: 28px;
    height: 28px;
}

.gc-coach-empty-intro {
    margin: 0;
    font-size: 20px;
    line-height: 29px;
    font-weight: 700;
}

/* Starter chips under the intro. */
.gc-coach-starters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-coach-starters-label {
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-coach-starters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gc-coach-starter {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--gc-radius-chip);
    border: 1.5px solid var(--gc-line);
    background: var(--gc-glass);
    color: var(--gc-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.gc-coach-starter:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* The disclaimer note: a glass strip with an info mark and the one help-blue link on this screen. */
.gc-coach-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 6px 12px 14px;
    border-radius: 16px;
    background: var(--gc-glass);
    border: 1px solid var(--gc-glass-edge);
}

.gc-coach-note-icon {
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--gc-ink-soft);
}

.gc-coach-note-text {
    margin: 0;
    flex-grow: 1;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.gc-coach-note-emergency {
    color: var(--gc-help);
    font-weight: 800;
}

.gc-coach-note-dismiss {
    width: 44px;
    height: 44px;
    margin: -10px 0;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gc-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-coach-note-dismiss:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* Messages: user bubbles right, Coach bubbles left beside a small sprout avatar. */
.gc-coach-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-coach-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.gc-coach-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--gc-primary-tint);
    color: var(--gc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-coach-bubble {
    max-width: 82%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 16px;
    line-height: 23px;
    font-weight: 600;
}

.gc-coach-bubble p {
    margin: 0;
}

.gc-coach-bubble-markdown > *:first-child {
    margin-top: 0;
}

.gc-coach-bubble-markdown > *:last-child {
    margin-bottom: 0;
}

.gc-coach-bubble-markdown p,
.gc-coach-bubble-markdown ul,
.gc-coach-bubble-markdown ol {
    margin: 0 0 10px;
}

.gc-coach-bubble-markdown ul,
.gc-coach-bubble-markdown ol {
    padding-left: 20px;
}

.gc-coach-bubble-markdown li + li {
    margin-top: 4px;
}

.gc-coach-bubble-assistant {
    background: var(--gc-raised);
    border: 1px solid var(--gc-line);
    border-radius: 6px 20px 20px 20px;
}

.gc-sky--dusk .gc-coach-bubble-assistant, .gc-sky--night .gc-coach-bubble-assistant {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.gc-coach-bubble-user {
    align-self: flex-end;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    border-radius: 20px 20px 6px 20px;
}

/* Three breathing dots while a reply is still on its way. */
.gc-coach-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gc-coach-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--gc-ink);
    opacity: 0.3;
    animation: gc-coach-typing 1.2s ease-in-out infinite;
}

.gc-coach-typing-dot:nth-child(3) { animation-delay: 0.15s; }
.gc-coach-typing-dot:nth-child(4) { animation-delay: 0.3s; }

@keyframes gc-coach-typing {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Cards belonging to a Coach reply sit indented past the avatar; a member card sits on the right. */
.gc-coach-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 36px;
}

.gc-coach-cards--user {
    margin-left: 0;
    align-items: flex-end;
}

.gc-coach-card {
    width: 100%;
    max-width: 320px;
}

/* Confirm / counsellor card: the raised glass object from CoachChat. */
.gc-coach-confirm {
    width: 100%;
    max-width: 320px;
    gap: 12px;
}

.gc-coach-confirm-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-coach-confirm-title {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}

.gc-coach-confirm-note {
    margin: 0;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-coach-confirm-actions {
    display: flex;
    gap: 8px;
}

.gc-coach-confirm-yes, .gc-coach-confirm-no {
    flex: 1 1 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.gc-coach-confirm-yes {
    border: 0;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
}

.gc-coach-confirm-no {
    border: 1.5px solid var(--gc-line);
    background: transparent;
    color: var(--gc-ink);
}

.gc-coach-confirm-yes:disabled, .gc-coach-confirm-no:disabled {
    opacity: 0.5;
    cursor: default;
}

.gc-coach-confirm-yes:focus-visible, .gc-coach-confirm-no:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* The message pill and its send / stop button. */
.gc-coach-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    box-sizing: border-box;
    padding: 0 6px 0 20px;
    border-radius: 28px;
    background: var(--gc-raised);
    border: 1px solid var(--gc-line);
    box-shadow: 0 1px 0 rgba(27,38,32,0.04), 0 18px 36px -18px rgba(27,38,32,0.28);
}

.gc-sky--dusk .gc-coach-composer, .gc-sky--night .gc-coach-composer {
    box-shadow: none;
}

.gc-coach-composer-input {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--gc-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    resize: none;
    outline: none;
}

.gc-coach-composer-input:disabled {
    color: var(--gc-muted);
}

.gc-coach-send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-coach-send:disabled {
    opacity: 0.5;
    cursor: default;
}

.gc-coach-stop {
    min-height: 44px;
    flex-shrink: 0;
    padding: 0 16px 0 12px;
    border-radius: 22px;
    border: 1px solid var(--gc-control-edge);
    background: var(--gc-control);
    color: var(--gc-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.gc-coach-send:focus-visible, .gc-coach-stop:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* "What Coach knows" list inside the shared sheet. */
.gc-coach-context-list {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}

/* --- Date Planner (GC-901) -----------------------------------------------------------------------------------
   A framed chat that scrolls inside itself beside the live plan card, rather than a page that grows forever.
   The page fills the shell's height; the chat frame is the flexible column and its message list is the only
   thing that scrolls, so the composer stays pinned at the foot. The outline sits in a raised card on the right
   from 900px, and drops beneath the chat on a narrow screen. */
.gc-dateplanner-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    /* Fill the shell content so the chat frame has a height to scroll within. */
    height: 100%;
    min-height: 0;
}

.gc-dateplanner-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Two columns from 1024 px, matching the Today page's split (.gc-today--split): the chat on the left in the
   wider 1.5fr column, the plan outline on the right in the 1fr column, with the same 32 px gutter and
   top-aligned columns. Below 1024 px they stack, chat then plan. */
@media (min-width: 1024px) {
    .gc-dateplanner-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 0;
        align-items: start;
    }
}

/* The chat frame: a bordered, raised panel that does not grow with the conversation. */
.gc-dateplanner-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    /* Never taller than the viewport, so the message list scrolls instead of the page. */
    max-height: calc(100dvh - 220px);
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--gc-line);
    border-radius: 20px;
    background: var(--gc-raised);
    box-shadow: var(--gc-raised-shadow, 0 18px 36px -18px rgba(27,38,32,0.28));
}

.gc-sky--dusk .gc-dateplanner-chat, .gc-sky--night .gc-dateplanner-chat {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Inside the frame the message list is the one scrolling region; the composer below it stays put. */
.gc-dateplanner-chat .gc-coach-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.gc-dateplanner-chat .gc-coach-composer {
    flex-shrink: 0;
}

/* The plan outline as a raised card on the right. */
.gc-dateplan-outline {
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--gc-line);
    border-radius: 20px;
    background: var(--gc-raised);
    box-shadow: var(--gc-raised-shadow, 0 18px 36px -18px rgba(27,38,32,0.28));
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    /* Keep the plan card in view while the chat scrolls, and let a long plan scroll on its own. Matches the
       chat frame's height so the two columns are the same height beside each other. */
    .gc-dateplan-outline {
        position: sticky;
        top: 0;
        max-height: calc(100dvh - 220px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.gc-sky--dusk .gc-dateplan-outline, .gc-sky--night .gc-dateplan-outline {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.gc-dateplan-outline-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gc-dateplan-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-dateplan-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gc-dateplan-field dt {
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-dateplan-field dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.gc-dateplan-logistics h3,
.gc-dateplan-costs h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
}

.gc-dateplan-logistics ul {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
}

.gc-dateplan-costs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-dateplan-costs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
}

.gc-dateplan-cost-range {
    white-space: nowrap;
    color: var(--gc-muted);
    font-weight: 700;
}

.gc-dateplan-cost-total {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--gc-line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
}

.gc-dateplan-over-budget {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-accent);
}

/* The printable plan sheet is off-screen while viewing; the print rules below reveal it. */
.gc-plan-print {
    display: none;
}

/* --- Printing a date plan (GC-901) ---------------------------------------------------------------------------
   The screen shows an app; a printout should show a clean, branded document. The plan sheet (.gc-plan-print)
   lives deep inside the Blazor #app root, so we cannot display:none the app to hide it - a descendant of a
   hidden ancestor stays hidden. Instead we hide everything with visibility (which still lays out, and which a
   descendant can override) and make only the sheet and its contents visible, then position it at the page
   origin. Fixed print-safe colours on purpose - a page prints white regardless of the on-screen sky/theme. */
@media print {
    body * {
        visibility: hidden;
    }

    .gc-plan-print, .gc-plan-print * {
        visibility: visible;
    }

    .gc-plan-print {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 32px 36px;
        box-sizing: border-box;
        background: #ffffff;
        color: #1b2620;
        font-family: inherit;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .gc-plan-print-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 16px;
        border-bottom: 2px solid #2f7d5b;
    }

    .gc-plan-print-leaf {
        display: inline-flex;
        width: 34px;
        height: 34px;
        color: #2f7d5b;
    }

    .gc-plan-print-leaf svg {
        width: 100%;
        height: 100%;
    }

    .gc-plan-print-wordmark {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: #2f7d5b;
    }

    .gc-plan-print-title {
        margin: 22px 0 4px;
        font-size: 26px;
        font-weight: 800;
        color: #1b2620;
    }

    .gc-plan-print-subtitle {
        margin: 0 0 22px;
        font-size: 14px;
        color: #55635b;
    }

    .gc-plan-print-fields {
        margin: 0 0 22px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 28px;
    }

    .gc-plan-print-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e3e9e4;
        break-inside: avoid;
    }

    .gc-plan-print-field dt {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #55635b;
    }

    .gc-plan-print-field dd {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #1b2620;
    }

    .gc-plan-print-section {
        margin: 0 0 22px;
        break-inside: avoid;
    }

    .gc-plan-print-section h2 {
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #2f7d5b;
    }

    .gc-plan-print-logistics {
        margin: 0;
        padding-left: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 15px;
        color: #1b2620;
    }

    .gc-plan-print-costs {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .gc-plan-print-costs li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        font-size: 15px;
        color: #1b2620;
    }

    .gc-plan-print-cost-range {
        white-space: nowrap;
        color: #55635b;
        font-weight: 700;
    }

    .gc-plan-print-cost-total {
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid #cfd8d1;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        font-size: 16px;
        font-weight: 700;
        color: #1b2620;
    }

    .gc-plan-print-over-budget {
        margin: 8px 0 0;
        font-size: 14px;
        font-weight: 700;
        color: #b4432f;
    }

    .gc-plan-print-footer {
        margin-top: 28px;
        padding-top: 14px;
        border-top: 1px solid #e3e9e4;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #55635b;
    }
}

/* --- The sky is the clock ------------------------------------------------------------------------------------
   Shared design components (Components/Design). The sky element carries the time-of-day band as a class; the
   dusk and night bands redefine the colour variables, so everything inside, older styles included, turns to
   the Night palette without dark rules of its own. */

.gc-sky {
    --gc-sky-gradient: var(--gc-sky-day);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--gc-ink);
    background-color: var(--gc-surface);
}

/* Fixed to the viewport so the gradient stays the height of the screen however long the page scrolls. */
.gc-sky::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--gc-sky-gradient);
}

.gc-sky--dawn { --gc-sky-gradient: var(--gc-sky-dawn); }
.gc-sky--day { --gc-sky-gradient: var(--gc-sky-day); }
.gc-sky--golden { --gc-sky-gradient: var(--gc-sky-golden); }
.gc-sky--dusk { --gc-sky-gradient: var(--gc-sky-dusk); }
.gc-sky--night { --gc-sky-gradient: var(--gc-sky-night); }
.gc-sky--help { --gc-sky-gradient: var(--gc-sky-help); }

.gc-sky--dusk, .gc-sky--night {
    color-scheme: dark;
    --gc-primary: #9FD6B8;
    --gc-primary-strong: #C3E8D3;
    --gc-primary-tint: rgba(159,214,184,0.16);
    --gc-selected-tile: rgba(159,214,184,0.16);
    --gc-on-primary: #1B2620;
    --gc-accent: #F2B63D;
    --gc-accent-tint: rgba(242,182,61,0.16);
    --gc-surface: #16121E;
    --gc-raised: rgba(255,255,255,0.08);
    --gc-line: rgba(255,255,255,0.13);
    --gc-divider: rgba(255,255,255,0.10);
    --gc-ink: #EFEBF3;
    --gc-muted: #B5ACC0;
    --gc-placeholder: #A198AC;
    --gc-help: #9CC1EA;
    --gc-help-strong: #C3DAF2;
    --gc-help-tint: rgba(156,193,234,0.16);
    --gc-switch-off: rgba(255,255,255,0.24);
    --gc-raised-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
    --gc-ink-soft: #CFC7D8;
    --gc-on-help: #1B2620;
    --gc-glass: rgba(255,255,255,0.10);
    --gc-glass-edge: rgba(255,255,255,0.16);
    --gc-control: rgba(255,255,255,0.10);
    --gc-control-edge: rgba(255,255,255,0.16);
    --gc-bar: rgba(40,32,54,0.66);
    --gc-bar-edge: rgba(255,255,255,0.13);
    --gc-bar-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
    --gc-rail-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
    --gc-tile: rgba(255,255,255,0.10);
    --gc-tile-edge: rgba(255,255,255,0.18);
    --gc-sheet: #292530;
    --gc-scrim: rgba(0,0,0,0.5);
    --gc-arc-horizon: rgba(255,255,255,0.22);
    --gc-arc-dots: rgba(255,255,255,0.36);
    --gc-arc-end: rgba(255,255,255,0.45);
    --gc-arc-open-label: #F6CB6E;
}

/* So overscroll and the strip under the browser's own bars match the sky instead of flashing Day. */
html:has(.gc-sky--dusk), html:has(.gc-sky--night),
body:has(.gc-sky--dusk), body:has(.gc-sky--night) {
    background: var(--gc-surface-night);
}

.gc-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gc-icon--sm {
    width: 16px;
    height: 16px;
}

/* Shell: tab bar (a rail from 1024px), top bar, content. */

.gc-shell {
    display: flex;
    flex-direction: column;
}

.gc-shell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-shell-content {
    flex: 1;
    /* Clears the floating tab bar: 64 high and 20 off the bottom, plus room to breathe. */
    padding: 0 16px calc(108px + env(safe-area-inset-bottom));
}

.gc-navbar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 10;
    height: 64px;
    box-sizing: border-box;
    border-radius: 32px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--gc-bar);
    border: 1px solid var(--gc-bar-edge);
    box-shadow: var(--gc-bar-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
}

.gc-navbar-brand, .gc-navbar-spacer, .gc-navbar-help, .gc-navbar-logout {
    display: none;
}

.gc-navbar-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gc-ink-soft);
    text-decoration: none;
}

.gc-navbar-tab[aria-current="page"] {
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font-weight: 800;
}

.gc-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}

.gc-topbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

.gc-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gc-glass-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    border-radius: 22px;
    border: 1px solid var(--gc-glass-edge);
    background: var(--gc-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gc-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.gc-topbar-help {
    color: var(--gc-help);
}

.gc-leave-quickly {
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 22px;
    border: 1px solid var(--gc-control-edge);
    background: var(--gc-control);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gc-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .gc-shell {
        flex-direction: row;
        align-items: flex-start;
        padding: 16px;
    }

    .gc-shell-main {
        padding: 8px 32px 0 48px;
    }

    .gc-shell-content {
        padding: 0 0 32px;
    }

    .gc-navbar {
        position: sticky;
        top: 16px;
        left: auto;
        right: auto;
        bottom: auto;
        width: 240px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        flex-shrink: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 22px 14px 18px;
        box-shadow: var(--gc-rail-shadow);
    }

    .gc-navbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 10px 24px;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: -0.01em;
    }

    .gc-navbar-brand .gc-icon {
        width: 28px;
        height: 28px;
        stroke-width: 2;
        color: var(--gc-primary);
    }

    .gc-navbar-tab {
        flex: none;
        height: 48px;
        border-radius: 24px;
        padding: 0 16px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        font-size: 16px;
    }

    .gc-navbar-spacer {
        display: block;
        flex-grow: 1;
    }

    .gc-navbar-help {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 48px;
        border-radius: 24px;
        padding: 0 16px;
        background: var(--gc-help-tint);
        color: var(--gc-help);
        font-size: 16px;
        font-weight: 800;
        text-decoration: none;
    }

    .gc-navbar-logout {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
        height: 48px;
        border-radius: 24px;
        padding: 0 16px;
        border: 1px solid var(--gc-control-edge);
        background: var(--gc-control);
        color: var(--gc-ink);
        font: inherit;
        font-size: 16px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
    }

    .gc-navbar-logout:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .gc-topbar {
        padding: 0;
    }

    .gc-topbar-title {
        text-align: left;
        font-size: 16px;
    }

    /* The rail's Get help link takes over from the top bar's lifebuoy on wide screens. */
    .gc-topbar--layout .gc-topbar-help {
        display: none;
    }
}

/* The raised object. */

.gc-raised {
    background: var(--gc-raised);
    border-radius: var(--gc-radius-card);
    padding: 18px 22px 16px;
    box-shadow: var(--gc-raised-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-sky--dusk .gc-raised, .gc-sky--night .gc-raised {
    border: 1px solid var(--gc-line);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@media (min-width: 1024px) {
    .gc-raised {
        padding: 28px 34px 26px;
        gap: 18px;
    }
}

/* Day arc and step arc. */

.gc-dayarc, .gc-steparc {
    width: 100%;
}

.gc-dayarc-frame, .gc-steparc-frame {
    position: relative;
    width: 100%;
}

.gc-dayarc-frame svg, .gc-steparc-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gc-steparc-frame {
    aspect-ratio: 390 / 64;
}

.gc-dayarc--auto .gc-dayarc-frame--wide {
    display: none;
}

@media (min-width: 1024px) {
    .gc-dayarc--auto .gc-dayarc-frame--phone {
        display: none;
    }

    .gc-dayarc--auto .gc-dayarc-frame--wide {
        display: block;
    }
}

.gc-arc-horizon {
    stroke: var(--gc-arc-horizon);
    stroke-width: 1;
}

.gc-arc-dots {
    fill: none;
    stroke: var(--gc-arc-dots);
    stroke-linecap: round;
}

.gc-arc-progress {
    fill: none;
    stroke: var(--gc-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.gc-arc-start {
    fill: var(--gc-primary);
}

.gc-arc-checkin {
    fill: var(--gc-surface);
    stroke: var(--gc-primary);
    stroke-width: 2;
}

.gc-arc-checkin--open {
    fill: var(--gc-accent);
    stroke: var(--gc-surface);
}

.gc-arc-end {
    fill: var(--gc-surface);
    stroke: var(--gc-arc-end);
    stroke-width: 2;
}

.gc-arc-sun-halo { fill: var(--gc-sun-halo); }
.gc-arc-sun { fill: var(--gc-accent); }
.gc-arc-moon-halo { fill: var(--gc-moon-halo); }
.gc-arc-moon { fill: var(--gc-moon); }
.gc-arc-star { fill: rgba(255,255,255,0.6); }

.gc-dayarc-label {
    position: absolute;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--gc-ink-soft);
    white-space: nowrap;
}

.gc-dayarc-frame--wide .gc-dayarc-label {
    font-size: 14px;
}

.gc-dayarc-label--open {
    color: var(--gc-arc-open-label);
    font-weight: 800;
}

.gc-steparc {
    max-width: 480px;
    margin: 0 auto;
}

.gc-steparc-count {
    margin: 0 0 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-ink-soft);
}

/* Answer tiles. */

.gc-tiles {
    display: grid;
    grid-template-columns: repeat(var(--gc-tiles-columns, 1), minmax(0, 1fr));
    gap: 8px;
}

.gc-tile {
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid var(--gc-tile-edge);
    background: var(--gc-tile);
    color: var(--gc-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
}

.gc-tiles--tinted {
    gap: 10px;
}

.gc-tiles--tinted .gc-tile {
    min-height: 64px;
    padding: 0 18px;
    justify-content: space-between;
    text-align: left;
    font-size: 17px;
}

.gc-tiles--tinted .gc-tile[aria-checked="true"] {
    padding: 0 12px 0 17px;
    border: 2px solid var(--gc-primary);
    background: var(--gc-selected-tile);
    font-weight: 900;
}

.gc-tiles--solid .gc-tile[aria-checked="true"] {
    border: 2px solid var(--gc-primary);
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font-weight: 900;
}

.gc-tile:disabled {
    opacity: 0.5;
    cursor: default;
}

.gc-tile-check {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-tile-check .gc-icon {
    stroke-width: 2.6;
}

/* Chip. */

.gc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--gc-radius-chip);
    background: var(--gc-tag-bg, var(--gc-primary-tint));
    color: var(--gc-tag-fg, var(--gc-primary-strong));
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.gc-tag--icon {
    padding-left: 8px;
}

@media (min-width: 1024px) {
    .gc-tag {
        height: 32px;
        font-size: 15px;
    }
}

/* Switch. The real input covers the drawn track, so the browser's own focus, click and keyboard handling apply. */

.gc-switch-row {
    min-height: 52px;
    box-sizing: border-box;
    padding: 6px 14px 6px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.gc-switch-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-switch-label {
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-switch-description {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-switch {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 32px;
}

.gc-switch-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.gc-switch-track {
    position: relative;
    display: block;
    width: 52px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--gc-switch-off);
    border: 1.5px solid var(--gc-switch-off);
    transition: background-color 0.15s ease;
}

.gc-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 23px;
    height: 23px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(27,38,32,0.3);
    transition: left 0.15s ease;
}

.gc-switch-input:checked + .gc-switch-track {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
}

.gc-switch-input:checked + .gc-switch-track .gc-switch-thumb {
    left: 23px;
}

.gc-switch-input:focus-visible + .gc-switch-track {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-switch-input:disabled {
    cursor: default;
}

.gc-switch-input:disabled + .gc-switch-track {
    opacity: 0.5;
}

/* Bottom sheet; a centred dialog from 1024px. */

.gc-sheet-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gc-sheet-scrim {
    position: absolute;
    inset: 0;
    background: var(--gc-scrim);
}

.gc-bottom-sheet {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 22px calc(34px + env(safe-area-inset-bottom));
    border-radius: var(--gc-radius-sheet) var(--gc-radius-sheet) 0 0;
    background: var(--gc-sheet);
    color: var(--gc-ink);
    box-shadow: 0 -18px 40px rgba(27,38,32,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Focus moves here only so keyboard users start inside the sheet; the sheet itself is not a control. */
.gc-bottom-sheet:focus {
    outline: none;
}

.gc-bottom-sheet-grabber {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--gc-line);
}

.gc-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gc-bottom-sheet-title {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-bottom-sheet-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--gc-surface);
    color: var(--gc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .gc-sheet-layer {
        align-items: center;
    }

    .gc-bottom-sheet {
        max-width: 560px;
        padding-bottom: 28px;
        border-radius: var(--gc-radius-sheet);
    }

    .gc-bottom-sheet-grabber {
        display: none;
    }
}

/* Help card. Help blue belongs here and in the other help and safety UI, nowhere else. */

.gc-helpcard {
    background: var(--gc-raised);
    border-radius: var(--gc-radius-group);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.gc-helpcard-name {
    margin: 0;
    flex-grow: 1;
    font-size: 18px;
    line-height: 24px;
    font-weight: 900;
}

.gc-helpcard-availability {
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-help);
}

.gc-helpcard-description {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-helpcard-actions {
    display: flex;
    gap: 8px;
}

.gc-help-button {
    flex: 1 1 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 22px;
    border: 1.5px solid var(--gc-help);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.gc-help-button--primary {
    background: var(--gc-help);
    color: var(--gc-on-help);
}

.gc-help-button--secondary {
    background: transparent;
    color: var(--gc-help);
}

.gc-helpcard--solid {
    background: var(--gc-help);
    color: var(--gc-on-help);
    border-radius: 24px;
    box-shadow: 0 18px 32px -14px rgba(47,93,140,0.6);
}

.gc-helpcard--solid .gc-helpcard-availability,
.gc-helpcard--solid .gc-helpcard-description {
    color: inherit;
}

.gc-helpcard--solid .gc-help-button--primary {
    background: var(--gc-on-help);
    border-color: var(--gc-on-help);
    color: var(--gc-help);
}

.gc-helpcard--solid .gc-help-button--secondary {
    border-color: color-mix(in srgb, var(--gc-on-help) 80%, transparent);
    color: var(--gc-on-help);
}

.gc-helpcard-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--gc-on-help) 16%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-helpcard-icon .gc-icon {
    width: 18px;
    height: 18px;
}

/* One focus ring on every new control: 3px fern. */
.gc-navbar-tab:focus-visible, .gc-navbar-help:focus-visible, .gc-navbar-logout:focus-visible, .gc-glass-button:focus-visible,
.gc-leave-quickly:focus-visible, .gc-tile:focus-visible, .gc-bottom-sheet-close:focus-visible,
.gc-help-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* --- GC-803: Today and the daily loop -----------------------------------------------------------------------
   Today, the tip card, the check-in / why / swap sheets, the Pulse and reflection cards, the daily questions
   and the welcome-back card, drawn to match Main, Evening, Web, CheckIn, WhySheet, SwapSheet, Pulse,
   Reflection, WelcomeBack and QCount->QDone. Everything is coloured from the tokens at the top of this file,
   so the dusk and night skies (which redefine those tokens) recolour it with no dark rules of its own. */

.gc-today, .gc-questions, .gc-reflection {
    gap: 18px;
}

/* Time-of-day greeting under the day arc. */
.gc-today-greeting {
    padding: 0 6px;
}

.gc-today-greeting-title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gc-today-greeting-sub {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .gc-today-greeting-title {
        font-size: 44px;
        line-height: 50px;
        font-weight: 900;
        letter-spacing: -0.015em;
    }

    .gc-today-greeting-sub {
        font-size: 18px;
        line-height: 26px;
    }
}

/* The side column of the wide Today layout. Below 1024 px it is just part of the single column, in the
   phone app's order, and the week card (which only the wide board shows) stays hidden. */
.gc-today-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gc-today-side:empty {
    display: none;
}

.gc-today-week {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.gc-today-week-sub {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.gc-today-week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.gc-today-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gc-today-week-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gc-muted);
}

/* Two columns from 1024 px: every item sits in the left column except the side, which spans the rows beside
   them. Row gaps are margins so the side's row span adds no empty space under the idea. */
@media (min-width: 1024px) {
    .gc-today.gc-today--split {
        max-width: 1100px;
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 0;
        align-items: start;
    }

    .gc-today--split > * {
        grid-column: 1;
        margin-bottom: 18px;
    }

    .gc-today--split > .gc-today-side {
        grid-column: 2;
        grid-row: 1 / span 12;
    }

    .gc-today--split .gc-today-week {
        display: flex;
    }
}

/* The tip card: the one raised object on Today. Uses .gc-raised for the surface. */
.gc-tip-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-tip-card-effort {
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-tip-card-head-spacer {
    flex-grow: 1;
}

.gc-icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: -7px -12px -7px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gc-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-icon-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: 22px;
}

.gc-tip-card-idea-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-tip-card-reflection {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.gc-tip-card-action {
    margin: 0;
    font-size: 19px;
    line-height: 27px;
    font-weight: 800;
}

.gc-tip-card-collapsed-title {
    margin: 0;
    font-size: 19px;
    line-height: 26px;
    font-weight: 800;
}

@media (min-width: 1024px) {
    .gc-tip-card-action {
        max-width: 34em;
        font-size: 22px;
        line-height: 31px;
    }
}

/* Collapsible "What you could say" / reflection. */
.gc-tip-card-details {
    margin: 0;
}

.gc-tip-card-summary {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--gc-divider);
    font-size: 15px;
    font-weight: 700;
    color: var(--gc-ink-soft);
    cursor: pointer;
    list-style: none;
}

.gc-tip-card-summary::-webkit-details-marker {
    display: none;
}

.gc-tip-card-summary-text {
    flex-grow: 1;
}

.gc-tip-card-details[open] .gc-tip-card-summary svg:last-child {
    transform: rotate(180deg);
}

.gc-tip-card-say {
    margin: 6px 0 0;
    color: var(--gc-muted);
}

/* Action row: I'll do it (or How did it go? once committed) is the full-width primary; Help me plan, Swap
   and How did it go? share the line beneath it. */
.gc-tip-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.gc-tip-card-commit {
    display: block;
    width: 100%;
    min-height: 52px;
}

.gc-text-button {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--gc-primary-strong);
    font: inherit;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

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

.gc-text-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: var(--gc-radius-button);
}

/* "How did it go?" as a secondary sits in the action row; push it to the end so Help me plan / Swap group
   on the left and it sits on the right. */
.gc-tip-card-checkin {
    margin-left: auto;
}

/* The "Did you do it?" confirm shown when swapping after committing. */
.gc-tip-card-did-you {
    margin-top: 10px;
}

.gc-tip-card-did-you p {
    margin: 0 0 8px;
}

/* Sheet extras: the tip recap, a short subhead, and the privacy line. */
.gc-sheet-recap {
    margin: 0;
    font-size: 17px;
    line-height: 25px;
    color: var(--gc-muted);
}

.gc-sheet-sub {
    margin: -6px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.gc-sheet-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* The choice tiles used inside sheets get a little more room between them. */
.gc-choice-tiles {
    gap: 10px;
}

@media (min-width: 480px) {
    .gc-choice-tiles {
        --gc-tiles-columns: 2;
    }
}

/* Onboarding answers stay full-width so they line up with the question above them. */
.gc-step .gc-choice-tiles {
    --gc-tiles-columns: 1;
}

/* Why this tip? bullets and the "what we've learned" link. */
.gc-why-reasons {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-why-reason {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
}

.gc-why-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 9px;
    border-radius: 4px;
    background: var(--gc-primary);
}

.gc-why-learn {
    height: 52px;
    margin-top: 2px;
    border-top: 1px solid var(--gc-divider);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--gc-primary-strong);
    text-decoration: none;
}

.gc-why-learn-text {
    flex-grow: 1;
}

/* Weekly Pulse card. */
.gc-pulse-card {
    gap: 22px;
}

.gc-pulse-intro h2 {
    margin: 0;
}

.gc-pulse-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-pulse-row-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.gc-pulse-row-head label {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}

.gc-pulse-value {
    min-width: 32px;
    text-align: right;
    font-size: 26px;
    line-height: 28px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.gc-pulse-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-round-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 22px;
    border: 1.5px solid var(--gc-control-edge);
    background: var(--gc-control);
    color: var(--gc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-round-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-pulse-slider {
    flex-grow: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    accent-color: var(--gc-primary);
}

.gc-pulse-ends {
    display: flex;
    justify-content: space-between;
    padding: 0 54px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--gc-muted);
}

/* Welcome back card. */
.gc-welcome-back-head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-welcome-back-head p {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.gc-welcome-back-skip {
    align-self: flex-start;
    text-decoration: none;
}

/* Today prompt cards (questions, reflection). */
.gc-prompt-card {
    gap: 12px;
}

.gc-prompt-card-text h2 {
    margin: 0;
}

.gc-prompt-card .gc-button {
    align-self: flex-start;
}

/* Daily questions: category chip, prompt, tile answers, follow-up, done screen. */
.gc-question {
    background: var(--gc-raised);
    border-radius: var(--gc-radius-card);
    padding: 18px 22px 20px;
    box-shadow: var(--gc-raised-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-sky--dusk .gc-question, .gc-sky--night .gc-question {
    border: 1px solid var(--gc-line);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.gc-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--gc-divider);
    overflow: hidden;
}

.gc-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gc-primary);
    transition: width 0.2s ease;
}

.gc-question-prompt {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-question-title {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-question-subhead {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--gc-muted);
}

.gc-question-followup-label {
    font-size: 16px;
    font-weight: 800;
}

/* Rated: the five-point agreement scale, a dot ramp on each tile. */
.gc-rating-scale {
    display: flex;
    gap: 3px;
    margin-right: 6px;
}

.gc-rating-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: var(--gc-line);
}

.gc-rating-dot--on {
    background: var(--gc-primary);
}

.gc-rating .gc-tile {
    justify-content: flex-start;
    gap: 12px;
}

/* Forced choice: two large cards with an "or" divider. */
.gc-forced {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-forced-card {
    min-height: 96px;
    box-sizing: border-box;
    border-radius: var(--gc-radius-group);
    border: 1.5px solid var(--gc-tile-edge);
    background: var(--gc-tile);
    color: var(--gc-ink);
    padding: 20px;
    text-align: left;
    font: inherit;
    font-size: 19px;
    line-height: 27px;
    font-weight: 800;
    cursor: pointer;
}

.gc-forced-card--selected {
    border: 2px solid var(--gc-primary);
    background: var(--gc-selected-tile);
    font-weight: 900;
}

.gc-forced-card:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-forced-or {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-muted);
}

.gc-forced-or span {
    flex-grow: 1;
    height: 1px;
    background: var(--gc-line);
}

/* Questions finished (QDone). */
.gc-questions-done {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.gc-questions-done-head h2 {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 900;
    letter-spacing: -0.015em;
}

.gc-questions-done-head p {
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
}

.gc-questions-done-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--gc-ink-soft);
}

.gc-questions-done-notes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gc-questions-done-notes .gc-icon {
    color: var(--gc-primary);
}

.gc-questions-done .gc-button {
    align-self: stretch;
    min-height: 52px;
}

/* Weekly reflection. */
.gc-reflection-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-reflection-head p {
    margin: 6px 0 0;
}

.gc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-field label {
    font-size: 17px;
    line-height: 24px;
    font-weight: 800;
}

.gc-reflection-text {
    min-height: 104px;
    border-radius: var(--gc-radius-tile);
    resize: vertical;
}

.gc-reflection-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.gc-reflection-scope-hint {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

/* Push permission pre-prompt on Settings. */
.gc-push-prompt-text h3 {
    margin: 0 0 4px;
}


/* --- GC-805: Progress, History, Us, profile reveal ----------------------------------------------------------
   Progress (the days-connected dot strip, the filled Pulse line, the stat lede), History (pill filters and
   card-listed ideas), Us (the linked-avatar arc and the shared sheet) and the profile reveal (the paired
   give / may-feel style grid). Everything is coloured from the tokens at the top of this file, so the dusk and
   night skies recolour it with no dark rules of its own. A rest day is a hollow neutral dot and a skipped idea
   a muted tag - error red is never used here. */

.gc-progress {
    gap: 18px;
}

.gc-progress-lede {
    padding: 0 6px;
}

.gc-progress-lede-title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gc-progress-lede-sub {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.gc-progress-card-title {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-progress-days-count {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--gc-muted);
}

/* The days-connected strip: one dot per day so far this month, wrapping. Connected is a filled fern dot,
   a rest day a hollow ring - neutral, never a red miss. Overrides the 7-wide GC-803 calendar grid. */
.gc-progress-days .gc-dots {
    grid-template-columns: repeat(auto-fill, 1rem);
    gap: 0.45rem;
    justify-content: space-between;
}

.gc-progress-days .gc-dot {
    width: 1rem;
    height: 1rem;
}

.gc-dot-rest {
    background: transparent;
    border: 2px solid var(--gc-line);
}

.gc-progress-legend {
    display: flex;
    gap: 18px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-progress-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gc-progress-legend .gc-dot {
    width: 0.7rem;
    height: 0.7rem;
}

/* The Pulse line as a filled area with a haloed latest point. */
.gc-progress-pulse .gc-pulse-chart {
    width: 100%;
    height: auto;
}

.gc-pulse-area {
    fill: var(--gc-primary-tint);
    stroke: none;
}

.gc-pulse-line {
    stroke: var(--gc-primary-strong);
}

.gc-pulse-dot {
    fill: var(--gc-primary-strong);
}

.gc-pulse-dot--latest {
    fill: var(--gc-primary);
    stroke: var(--gc-surface);
    stroke-width: 2;
}

.gc-progress-reflection-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-progress-reflection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-progress-reflection-week {
    font-size: 14px;
    font-weight: 700;
}

.gc-progress-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 2px 0 0;
    font-weight: 800;
}

.gc-progress-links-sep {
    color: var(--gc-muted);
}

/* --- History ------------------------------------------------------------------------------------------------ */

.gc-history {
    gap: 16px;
}

.gc-history-title {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-history-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-history-favourites-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.gc-history-favourites-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--gc-primary);
}

.gc-history-empty {
    margin: 0;
    color: var(--gc-muted);
}

.gc-history-list {
    margin: 0;
    padding: 0.25rem 1.375rem;
    list-style: none;
    gap: 0;
}

.gc-history-item {
    /* GC-803 already gives .gc-history-item its column layout and divider; add a little rhythm. */
    gap: 0.5rem;
    padding: 0.9rem 0;
}

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

.gc-history-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gc-history-date {
    font-size: 14px;
    font-weight: 700;
}

.gc-history-item-title {
    font-size: 17px;
    line-height: 23px;
    font-weight: 800;
}

.gc-history-item-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The outcome tag reads positive; the skipped tag reads muted (never red). */
.gc-history-skipped {
    background: var(--gc-divider);
    color: var(--gc-muted);
}

.gc-history-favourite {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--gc-primary-strong);
}

/* --- Us ----------------------------------------------------------------------------------------------------- */

.gc-us {
    gap: 0;
}

.gc-us-arc {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
}

.gc-us-arc-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gc-us-arc-thread {
    fill: none;
    stroke: var(--gc-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.gc-us-arc-thread-glow {
    fill: none;
    stroke: var(--gc-primary-tint);
    stroke-width: 10;
    stroke-linecap: round;
}

.gc-us-avatar {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border-radius: 26px;
    border: 3px solid var(--gc-surface);
    box-shadow: 0 0 0 2px var(--gc-primary);
    font-size: 22px;
    font-weight: 900;
}

.gc-us-avatar--you {
    left: 18%;
    bottom: 12%;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
}

.gc-us-avatar--partner {
    right: 18%;
    top: 28%;
    background: var(--gc-accent-tint);
    color: var(--gc-ink);
    box-shadow: 0 0 0 2px var(--gc-accent);
}

.gc-us-sheet {
    margin-top: 16px;
    gap: 16px;
}

.gc-us-heading {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-us-count-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gc-us-count {
    font-size: 52px;
    line-height: 52px;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.gc-us-count-divider {
    align-self: stretch;
    width: 1px;
    background: var(--gc-line);
}

.gc-us-count-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gc-us-count-label {
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-us-count-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.gc-us-note {
    border-radius: var(--gc-radius-group);
    padding: 14px 16px;
    background: var(--gc-primary-tint);
}

.gc-us-note-from {
    font-size: 14px;
    font-weight: 800;
}

.gc-us-note-text {
    margin: 4px 0 0;
    font-size: 19px;
    line-height: 27px;
}

.gc-us-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 6px 0 18px;
    border-radius: 26px;
    background: var(--gc-raised);
    border: 1px solid var(--gc-line);
}

.gc-us-compose-input {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--gc-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    outline: none;
}

.gc-us-compose-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-us-compose-send:focus-visible,
.gc-us-compose-input:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-us-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

.gc-us-privacy .gc-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Profile reveal ----------------------------------------------------------------------------------------- */

.gc-reveal {
    gap: 16px;
}

.gc-reveal-title {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-reveal-sentence {
    margin: 0;
    font-size: 16px;
    line-height: 23px;
    font-weight: 600;
}

.gc-reveal-footer {
    margin: 4px 0 0;
    font-size: 14px;
}

/* The paired give / may-feel grid: each style a row with two mini-bars; the two top rows are tinted. */
.gc-reveal-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-reveal-pair-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0 2px 4px;
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-ink-soft);
}

/* The two bars sit under the head columns; the label spans the row above them. */
.gc-reveal-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px;
    margin: 0 -10px;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid transparent;
}

.gc-reveal-row--top {
    background: var(--gc-style-tint);
    border-color: color-mix(in srgb, var(--gc-style-text) 30%, transparent);
}

.gc-reveal-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gc-reveal-toptag {
    font-size: 13px;
    font-weight: 800;
    color: var(--gc-style-text, var(--gc-primary-strong));
}

.gc-reveal-row-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.gc-reveal-bar {
    height: 10px;
    border-radius: 5px;
    background: var(--gc-divider);
    overflow: hidden;
}

.gc-reveal-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.gc-reveal-summary {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
    padding-top: 12px;
    padding-left: 0.75rem;
    border-top: 1px solid var(--gc-divider);
}

.gc-reveal-summary p {
    margin: 0;
    font-size: 16px;
    line-height: 23px;
    font-weight: 700;
}

.gc-reveal-summary-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--gc-accent-tint);
    color: var(--gc-primary-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-reveal-cta {
    align-self: stretch;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* --- GC-806: help, safety, support and paywall --------------------------------------------------------------
   The Get help / Emergency screen, the support-mode card, the paywall sheet and the subscription-return card,
   drawn to match Help, Emergency, SupportToday and Paywall. Everything is coloured from the tokens at the top
   of this file, so the dusk and night skies (which redefine those tokens) recolour it with no dark rules of
   its own. The reserved help blue (--gc-help / --gc-help-strong / --gc-help-tint / --gc-on-help) appears only
   in this block's help and safety UI and in the shared Get help lifebuoy - never on the paywall body or the
   subscription-return card, which stay on the fern primary. */

.gc-help {
    gap: 14px;
}

.gc-help-header {
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-help-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 30px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-help);
}

.gc-help-title-icon {
    width: 28px;
    height: 28px;
}

.gc-help-lede {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* Emergency: the first and biggest action, a solid help-blue call button. */
.gc-emergency {
    display: flex;
    flex-direction: column;
}

.gc-emergency-call {
    min-height: 76px;
    box-sizing: border-box;
    padding: 12px 20px;
    border-radius: 24px;
    background: var(--gc-help);
    color: var(--gc-on-help);
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    box-shadow: 0 18px 32px -14px rgba(47, 93, 140, 0.55);
}

.gc-emergency-call-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--gc-on-help) 16%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-emergency-call-text {
    display: flex;
    flex-direction: column;
}

.gc-emergency-call-number {
    font-size: 23px;
    line-height: 28px;
    font-weight: 900;
}

.gc-emergency-call-sub {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
}

.gc-emergency-call:focus-visible {
    outline: 3px solid var(--gc-help);
    outline-offset: 3px;
}

/* Country line under the emergency button. */
.gc-help-country {
    margin: -4px 0 0;
    padding: 0 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-help-country-switch select {
    min-height: 44px;
    padding: 0 8px;
    border-radius: var(--gc-radius-field);
    border: 1px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-help);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.gc-help-country-switch select:focus-visible {
    outline: 3px solid var(--gc-help);
    outline-offset: 2px;
}

.gc-help-section-title {
    margin: 6px 6px 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 900;
}

.gc-help-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-help-finder {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.gc-help-finder-link {
    min-height: 52px;
    box-sizing: border-box;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gc-ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 1px solid var(--gc-line);
}

.gc-help-finder li:last-child .gc-help-finder-link {
    border-bottom: none;
}

.gc-help-finder-name {
    flex-grow: 1;
}

.gc-help-finder-link .gc-icon {
    color: var(--gc-muted);
}

.gc-help-finder-link:focus-visible {
    outline: 3px solid var(--gc-help);
    outline-offset: 2px;
    border-radius: var(--gc-radius-field);
}

.gc-help-offline {
    margin: 0;
    padding: 0 6px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* Support mode: the card that replaces the daily tip. Safety UI, so its one action is help blue. */
.gc-support-card {
    gap: 14px;
}

.gc-support-card-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-support-card-title {
    margin: 0;
    font-size: 21px;
    line-height: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-support-card-sub {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-ink-soft);
}

.gc-support-talk {
    min-height: 56px;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 28px;
    background: var(--gc-help);
    color: var(--gc-on-help);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 26px -14px rgba(47, 93, 140, 0.6);
}

.gc-support-talk:focus-visible {
    outline: 3px solid var(--gc-help);
    outline-offset: 2px;
}

.gc-support-links {
    display: flex;
    flex-direction: column;
}

.gc-support-link {
    min-height: 60px;
    box-sizing: border-box;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gc-ink);
    text-decoration: none;
    border-top: 1px solid var(--gc-divider);
}

.gc-support-link-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The counsellor row's mark is fern (a service, not the crisis action); the crisis action above is help blue. */
.gc-support-link-icon--fern {
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
}

.gc-support-link-text {
    flex-grow: 1;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-support-link-chevron {
    color: var(--gc-muted);
}

.gc-support-link:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: var(--gc-radius-field);
}

.gc-support-resume {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--gc-divider);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.gc-support-resume-confirm {
    padding-top: 10px;
    border-top: 1px solid var(--gc-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--gc-ink-soft);
}

.gc-support-resume-confirm p {
    margin: 0;
}

.gc-support-resume-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Paywall sheet. Not safety UI: the fern primary, with help blue only on the Get help lifebuoy. */
.gc-paywall {
    gap: 0;
}

.gc-paywall-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gc-paywall-mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 22px;
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-paywall-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-paywall-not-now {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 22px;
    background: var(--gc-surface);
    color: var(--gc-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.gc-paywall-not-now:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-paywall-title {
    margin: 14px 0 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-paywall-lede {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-paywall-benefits {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-paywall-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gc-paywall-benefit-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 18px;
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-paywall-benefit-text {
    display: flex;
    flex-direction: column;
}

.gc-paywall-benefit-title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-paywall-benefit-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

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

.gc-paywall-plan {
    min-height: 96px;
    box-sizing: border-box;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid var(--gc-tile-edge);
    background: var(--gc-tile);
    color: var(--gc-ink);
    padding: 12px 16px;
    text-align: left;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.gc-paywall-plan--selected {
    border: 2px solid var(--gc-primary);
    background: var(--gc-selected-tile);
}

.gc-paywall-plan:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-paywall-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gc-paywall-plan-name {
    font-size: 17px;
    font-weight: 900;
}

.gc-paywall-plan-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--gc-ink-soft);
}

.gc-paywall-trial {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.gc-paywall-minor {
    margin: 8px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.gc-paywall-start {
    margin-top: 12px;
    min-height: 56px;
    align-self: stretch;
    justify-content: center;
}

.gc-paywall-legal {
    margin: 4px 0 0;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 800;
}

.gc-paywall-legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--gc-primary-strong);
}

/* Subscription return: a single raised card, fern primary. */
.gc-subscription-return {
    align-items: center;
    text-align: center;
    gap: 12px;
}

.gc-subscription-return-mark {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-subscription-return-title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 800;
}

.gc-subscription-return-go {
    align-self: stretch;
    min-height: 52px;
    justify-content: center;
    text-decoration: none;
}

/* --- GC-808: More and settings ------------------------------------------------------------------------------
   The member hub (More) and Settings, drawn to match the Settings / WebSettings artboards: a page heading on
   the sky, a help-blue Get help row, then flat white groups (radius 20) of list rows and fields. Only the two
   settings that exist in code appear - the questions-a-day pace and notifications - so the artboards' account,
   faith, family, subscription, privacy and per-type notification schedules are absent by design (GC-822/
   GC-825/GC-827). Coloured from the tokens at the top of this file, so the dusk and night skies recolour it
   with no dark rules of its own. The reserved help blue (--gc-help / --gc-help-tint) appears only on the Get
   help row here, nowhere else on these screens. */

.gc-settings {
    gap: 20px;
}

.gc-settings-title {
    margin: 0;
    padding: 0 6px;
    font-size: 30px;
    line-height: 44px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
    .gc-settings-title {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -0.015em;
    }
}

/* Get help: a help-blue tinted row, the one help-coloured element on these screens. */
.gc-settings-help {
    min-height: 60px;
    box-sizing: border-box;
    padding: 8px 14px 8px 16px;
    border-radius: var(--gc-radius-group);
    background: var(--gc-help-tint);
    color: var(--gc-help-strong);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.gc-settings-help-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--gc-help);
}

.gc-settings-help-text {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gc-settings-help-name {
    font-size: 17px;
    line-height: 22px;
    font-weight: 900;
}

.gc-settings-help-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.gc-settings-help .gc-icon:last-child {
    flex-shrink: 0;
    color: var(--gc-help);
}

.gc-settings-help:focus-visible {
    outline: 3px solid var(--gc-help);
    outline-offset: 2px;
}

/* A titled section: a small heading over one white group. */
.gc-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-settings-section-title {
    margin: 0;
    padding: 0 6px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    color: var(--gc-ink-soft);
}

/* The white group; rows and fields divide themselves with a top border. */
.gc-settings-group {
    background: var(--gc-raised);
    border-radius: var(--gc-radius-group);
    box-shadow: var(--gc-raised-shadow);
    overflow: hidden;
}

.gc-sky--dusk .gc-settings-group, .gc-sky--night .gc-settings-group {
    border: 1px solid var(--gc-line);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.gc-settings-group--padded {
    padding: 6px 16px;
}

/* A navigating row inside a group (chevron at the end). */
.gc-settings-row {
    min-height: 52px;
    box-sizing: border-box;
    padding: 6px 14px 6px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gc-ink);
    text-decoration: none;
}

.gc-settings-row + .gc-settings-row {
    border-top: 1px solid var(--gc-divider);
}

/* Same row, but a real <button> (Logout): strip native chrome so it matches the anchor rows. */
.gc-settings-row--button {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gc-settings-row--button:disabled {
    opacity: 0.6;
    cursor: default;
}

.gc-settings-row-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--gc-ink-soft);
}

.gc-settings-row-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-settings-row .gc-icon:last-child {
    flex-shrink: 0;
    color: var(--gc-muted);
}

.gc-settings-row:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: -3px;
}

/* A field row inside a group (a control, not a link): the pace slider lives here. */
.gc-settings-field {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-settings-field + .gc-settings-field-actions,
.gc-settings-field-actions {
    padding: 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-settings-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gc-settings-field-label {
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.gc-settings-field-value {
    font-size: 22px;
    line-height: 24px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--gc-primary-strong);
}

.gc-settings-field-hint {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.gc-settings-slider {
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: var(--gc-primary);
    cursor: pointer;
}

.gc-settings-slider:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: var(--gc-radius-field);
}

/* --- GC-807: sign-in, onboarding and assessment -------------------------------------------------------------
   The web sign-in / sign-up screen (WebSignIn), the onboarding step chrome shared by every Onb* board (a Back
   control, the "n of N" count, Get help and the StepArc), and the assessment question screen (QRated / QForced
   / QMostLeast). The step bodies and answer tiles reuse the shared controls above (gc-tiles, gc-chips,
   gc-choice-card, gc-button, gc-input, StepArc), so this block is only the wrappers around them. Everything is
   coloured from the tokens at the top of this file, so the dusk and night skies recolour it with no dark rules
   of its own. The reserved help blue (--gc-help) appears only on the Get help lifebuoy / link here. */

/* Sign in: a hero panel beside the authenticator card. On a phone the hero collapses above the card. */
.gc-auth {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

.gc-auth-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--gc-radius-card);
    padding: 28px 28px 36px;
    background: var(--gc-sky-gradient, var(--gc-sky-dawn));
    display: flex;
    flex-direction: column;
    gap: 48px;
}

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

.gc-auth-logo {
    width: 30px;
    height: 30px;
    color: var(--gc-primary);
}

.gc-auth-wordmark {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}

.gc-auth-hero-copy {
    max-width: 34rem;
}

.gc-auth-hero-title {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--gc-ink);
}

.gc-auth-hero-sub {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--gc-ink-soft);
}

.gc-auth-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.gc-auth-card {
    width: 100%;
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-auth-help {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    color: var(--gc-help);
    text-decoration: none;
}

/* GC-820: the hero's decorative horizon + climbing-sun art, and the single sign-in/sign-up card. */
.gc-auth-hero-art {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.gc-auth-hero-horizon { stroke: var(--gc-arc-horizon); stroke-width: 1; }
.gc-auth-hero-arc { fill: none; stroke: var(--gc-arc-dots); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 14; }
.gc-auth-hero-halo { fill: var(--gc-sun-halo); }
.gc-auth-hero-sun { fill: var(--gc-accent); }

.gc-sky--dusk .gc-auth-hero-halo, .gc-sky--night .gc-auth-hero-halo { fill: var(--gc-moon-halo); }
.gc-sky--dusk .gc-auth-hero-sun, .gc-sky--night .gc-auth-hero-sun { fill: var(--gc-moon); }

.gc-auth-callback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.gc-auth-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-auth-card-title {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}

.gc-auth-card-sub {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-auth-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-social-btn {
    height: 52px;
    border-radius: var(--gc-radius-button);
    border: 1px solid var(--gc-control-edge);
    background: var(--gc-control);
    color: var(--gc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.gc-social-btn:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-social-glyph {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.gc-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-auth-divider::before,
.gc-auth-divider::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: var(--gc-line);
}

@media (min-width: 1024px) {
    /* The shell doesn't stretch its content to the viewport, so the split takes the height itself: 68px for
       the shell padding and top bar above, 48px for the padding below. */
    .gc-auth {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
        min-height: calc(100dvh - 116px);
    }

    /* The hero shares the page's sky, so at full height it needs an edge to still read as a panel. */
    .gc-auth-hero {
        flex: 0 0 48%;
        gap: 32px;
        box-shadow: inset 0 0 0 1px var(--gc-glass-edge), var(--gc-raised-shadow);
        padding: clamp(40px, 4vh, 56px) clamp(44px, 3.5vw, 64px) clamp(48px, 6vh, 72px);
    }

    /* In flow on desktop so the sky scene grows with the panel and always lands just above the headline. */
    .gc-auth-hero-art {
        position: relative;
        top: auto;
        flex: 1 1 0;
        min-height: 180px;
        height: 100%;
        max-height: 520px;
        margin: auto calc(-1 * clamp(44px, 3.5vw, 64px)) 0;
        width: auto;
        align-self: stretch;
    }

    .gc-auth-hero-copy {
        max-width: 44rem;
    }

    .gc-auth-hero-title {
        font-size: clamp(48px, 3.6vw, 64px);
        line-height: 1.1;
        text-wrap: balance;
    }

    .gc-auth-hero-sub {
        font-size: clamp(17px, 1.2vw, 20px);
        line-height: 1.55;
    }

    .gc-auth-main {
        flex-grow: 1;
        justify-content: center;
    }
}

/* Onboarding chrome: the Back / count / Get help row over the StepArc, above the step body. */
.gc-onboarding {
    gap: 16px;
}

.gc-onboarding-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
}

.gc-onboarding-count {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-ink-soft);
}

.gc-onboarding-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Assessment: the Back / Get help row, the section chip over the prompt, then the shared answer tiles. */
.gc-assessment {
    gap: 16px;
}

.gc-assessment-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
}

.gc-assessment-chrome-spacer {
    width: 44px;
    height: 44px;
}

.gc-assessment-prompt {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-assessment-title {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}


/* --- GC-809: admin shell (layout nav, safety queue and case, dashboard) -------------------------------------
   The admin area (AdminLayout, Dashboard, Safety/Queue, Safety/Case), drawn to match AdminReview,
   AdminSafetyCase and AdminMobileNav. Unlike the member screens the admin area does not wear a sky, so it
   never picks up the .gc-sky--night token flip; the prefers-color-scheme block at the end of THIS block
   redefines the surface tokens for .gc-admin so the shell is dark-mode safe on its own. Everything is drawn
   from theme variables (var(--gc-*)) - no fixed hex for a surface - and every background pairs with a text
   colour.

   Responsive nav (acceptance b): a nav card beside the content with 32px module rows at >=1024px AND a fine
   (mouse) pointer; a burger-triggered slide-in drawer with 48px rows below 1024px OR on a coarse (touch)
   pointer. The default (mobile-first) rules below are the drawer; the desktop rail is opted into only by the
   (min-width:1024px) and (pointer:fine) query, so a touch laptop keeps the finger-sized drawer.
   No member name is rendered on any safety screen - the queue and case DTOs carry none, and the only name
   that ever appears (a contact's legal name) is behind the reason-gated, audit-logged break-glass panel. */

.gc-admin {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--gc-surface);
    color: var(--gc-ink);
    font-family: var(--gc-font-ui);
}

/* Top bar with the burger: the default (mobile / touch) presentation. */
.gc-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    box-sizing: border-box;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: var(--gc-raised);
    border-bottom: 1px solid var(--gc-line);
}

.gc-admin-burger {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--gc-line);
    border-radius: 22px;
    background: var(--gc-raised);
    color: var(--gc-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-admin-burger:focus-visible,
.gc-admin-group-header:focus-visible,
.gc-admin-nav-link:focus-visible,
.gc-admin-open-link:focus-visible,
.gc-admin-back:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-admin-brand-mark {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke-width: 2;
    color: var(--gc-primary);
}

.gc-admin-brand {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* The scrim behind the open drawer. */
.gc-admin-scrim {
    position: fixed;
    inset: 60px 0 0;
    z-index: 20;
    background: var(--gc-scrim);
}

/* The nav: a slide-in drawer by default. gc-nav from the top of the file also matches, so reset the pieces
   of it that do not apply to the admin drawer. */
.gc-admin-nav {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 25;
    width: min(304px, 84vw);
    box-sizing: border-box;
    padding: 8px 12px 16px;
    background: var(--gc-raised);
    border: none;
    border-right: 1px solid var(--gc-line);
    box-shadow: 12px 0 30px -12px var(--gc-scrim);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
}

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

/* The nav card's own heading (brand + Admin badge). Hidden in the drawer, shown in the desktop rail. */
.gc-admin-nav-head {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 12px;
}

.gc-admin-nav-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-admin-badge {
    height: 24px;
    padding: 0 8px;
    border-radius: var(--gc-radius-chip);
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}

/* A nav link and a group header both sit on a 48px row in the drawer. */
.gc-admin-nav-link,
.gc-admin-group-header {
    box-sizing: border-box;
    min-height: 48px;
    border-radius: 24px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gc-ink-soft);
    text-decoration: none;
}

.gc-admin-group-header {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--gc-ink);
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.gc-admin-group-header--safety {
    color: var(--gc-help);
}

.gc-admin-group-title {
    flex-grow: 1;
}

.gc-admin-group-icon {
    flex-shrink: 0;
}

.gc-admin-group-chevron {
    flex-shrink: 0;
    color: var(--gc-muted);
}

.gc-admin-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gc-admin-nav-sub {
    padding-left: 40px;
    font-weight: 700;
}

/* The active module: fern fill, white text. NavLink adds .active. */
.gc-admin-nav-link.active {
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font-weight: 800;
}

.gc-admin-content {
    padding: 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Page chrome shared by the admin pages. */
.gc-admin-page-head {
    margin-bottom: 16px;
}

.gc-admin-title {
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-admin-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-admin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* GC-910: the switch-mode control, shared by both sides. On the admin topbar it pushes to the right; in the
   More hub it is dropped into a settings row via the gc-mode-switch--row modifier. */
.gc-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-button);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.gc-mode-switch:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-mode-switch-icon {
    display: inline-flex;
    color: var(--gc-primary);
}

.gc-admin-mode-switch {
    margin-left: auto;
}

/* In the More hub the switch is a full-width row, matching the other settings rows (radius 20, flat list). */
.gc-mode-switch--row {
    width: 100%;
    min-height: 56px;
    justify-content: flex-start;
    border-radius: var(--gc-radius-group);
}

/* GC-910: the "where to?" chooser shown to a Platform.Admin holder after sign-in. One raised object per
   screen (the choices), centred on the sky. */
.gc-whereto {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gc-whereto-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.gc-whereto-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gc-whereto-brand-mark {
    width: 28px;
    height: 28px;
    color: var(--gc-primary);
}

.gc-whereto-wordmark {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-whereto-title {
    margin: 8px 0 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-whereto-sub {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.gc-whereto-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-whereto-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 18px;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-card);
    background: var(--gc-raised);
    box-shadow: var(--gc-raised-shadow);
    color: var(--gc-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gc-whereto-choice:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-whereto-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--gc-radius-tile);
}

.gc-whereto-choice-icon--app {
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
}

.gc-whereto-choice-icon--admin {
    background: var(--gc-help-tint);
    color: var(--gc-help-strong);
}

.gc-whereto-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.gc-whereto-choice-name {
    font-size: 18px;
    font-weight: 900;
}

.gc-whereto-choice-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.gc-whereto-choice-go {
    color: var(--gc-muted);
    flex-shrink: 0;
}

/* Dashboard tiles: a responsive card grid, each a count over a label. */
.gc-admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.gc-admin-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: var(--gc-radius-group);
    background: var(--gc-raised);
    border: 1px solid var(--gc-line);
    color: var(--gc-ink);
    text-decoration: none;
}

.gc-admin-tile:hover {
    border-color: var(--gc-primary);
}

.gc-admin-tile-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-admin-tile-count {
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Filters row on the queue. */
.gc-admin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.gc-admin-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-admin-field-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--gc-ink-soft);
}

.gc-admin-select,
.gc-admin-input,
.gc-admin-textarea {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--gc-radius-field);
    border: 1px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
    font-weight: 700;
}

.gc-admin-textarea {
    min-height: 64px;
    padding: 8px 12px;
    font-weight: 600;
    resize: vertical;
}

.gc-admin-select:focus-visible,
.gc-admin-input:focus-visible,
.gc-admin-textarea:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-admin-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.gc-admin-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--gc-primary);
}

/* Queue table. */
.gc-admin-table-card {
    padding: 0;
    overflow-x: auto;
}

.gc-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.gc-admin-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--gc-muted);
    border-bottom: 1px solid var(--gc-line);
    white-space: nowrap;
}

.gc-admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gc-divider);
    vertical-align: middle;
}

.gc-admin-table tbody tr:last-child td {
    border-bottom: none;
}

.gc-admin-open-link {
    font-weight: 800;
    color: var(--gc-primary-strong);
    text-decoration: none;
    white-space: nowrap;
}

/* Severity pill: neutral by default, help-blue for High, accent for Imminent, muted for Concern. */
.gc-admin-sev {
    height: 28px;
    padding: 0 12px;
    border-radius: var(--gc-radius-chip);
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 900;
    background: var(--gc-divider);
    color: var(--gc-ink);
    border: none;
}

.gc-admin-sev--high {
    background: var(--gc-help);
    color: var(--gc-on-help);
}

.gc-admin-sev--imminent {
    background: var(--gc-help-strong);
    color: var(--gc-on-help);
}

.gc-admin-sev--concern {
    background: var(--gc-help-tint);
    color: var(--gc-help-strong);
}

.gc-admin-chip--help {
    background: var(--gc-help-tint);
    border-color: var(--gc-help-tint);
    color: var(--gc-help-strong);
}

.gc-admin-chip--age {
    background: var(--gc-accent-tint);
    border-color: var(--gc-accent-tint);
    color: var(--gc-ink);
}

.gc-admin-status-pill {
    height: 28px;
    padding: 0 10px;
    border-radius: var(--gc-radius-chip);
    display: inline-flex;
    align-items: center;
    background: var(--gc-divider);
    color: var(--gc-ink);
    font-size: 14px;
    font-weight: 800;
}

/* Case screen. */
.gc-admin-case-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-admin-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    min-height: 44px;
    color: var(--gc-help);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.gc-admin-case-flags {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Three panes: stacked on a phone, three columns on a wide screen. */
.gc-admin-panes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.gc-admin-pane {
    min-height: 0;
    gap: 14px;
}

.gc-admin-pane-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.gc-admin-pane-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 900;
}

.gc-admin-pane-hint {
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* Timeline. */
.gc-admin-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gc-admin-timeline-item {
    position: relative;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-admin-timeline-dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid var(--gc-help);
    background: var(--gc-raised);
}

.gc-admin-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
}

.gc-admin-timeline-row strong {
    flex-grow: 1;
}

.gc-admin-timeline-meta {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.gc-admin-timeline-time {
    margin: 0;
    font-size: 14px;
}

.gc-admin-evidence {
    margin: 2px 0 0;
    padding: 8px 12px;
    border-radius: var(--gc-radius-field);
    background: var(--gc-help-tint);
    border: 1px solid var(--gc-help-tint);
    color: var(--gc-ink-soft);
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
}

.gc-admin-lock-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* Actions pane. */
.gc-admin-assign-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gc-admin-assign-row > div {
    flex-grow: 1;
}

.gc-admin-assignee {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.gc-admin-subsection {
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--gc-divider);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-admin-subsection h3,
.gc-admin-subsection legend {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 900;
}

.gc-admin-referral-note {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* Break-glass pane. */
.gc-admin-glass-lock {
    color: var(--gc-help);
    vertical-align: middle;
}

.gc-admin-glass-note {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--gc-radius-field);
    background: var(--gc-help-tint);
    color: var(--gc-help-strong);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.gc-admin-glass-note .gc-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.gc-admin-glass-contents {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-admin-glass-transcript {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    line-height: 21px;
}

/* The desktop rail: only for a wide viewport driven by a fine (mouse) pointer. A touch laptop keeps the
   drawer. This is acceptance (b): 32px module rows here, 48px in the drawer above. */
@media (min-width: 1024px) and (pointer: fine) {
    .gc-admin {
        display: flex;
        gap: 16px;
        padding: 16px;
        box-sizing: border-box;
    }

    /* The burger, its top bar and the scrim belong to the drawer only. */
    .gc-admin-topbar,
    .gc-admin-scrim {
        display: none;
    }

    .gc-admin-nav {
        position: sticky;
        top: 16px;
        left: auto;
        bottom: auto;
        z-index: 1;
        width: 224px;
        flex-shrink: 0;
        align-self: flex-start;
        max-height: calc(100vh - 32px);
        border: 1px solid var(--gc-line);
        border-radius: var(--gc-radius-group);
        padding: 14px 10px;
        box-shadow: none;
        transform: none;
        transition: none;
    }

    .gc-admin-nav-head {
        display: flex;
    }

    /* 32px module rows on the desktop rail. */
    .gc-admin-nav-link,
    .gc-admin-group-header {
        min-height: 32px;
        border-radius: 16px;
        font-size: 14px;
    }

    .gc-admin-nav-sub {
        padding-left: 24px;
    }

    /* Group headers on the rail read as small section captions. */
    .gc-admin-group-header {
        color: var(--gc-muted);
    }

    .gc-admin-group-header--safety {
        color: var(--gc-help);
    }

    .gc-admin-content {
        flex-grow: 1;
        min-width: 0;
        padding: 0;
    }

    .gc-admin-page-head {
        padding: 0 4px;
    }

    /* Three panes side by side on the case screen. */
    .gc-admin-panes {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Dark mode for the admin shell. The admin area has no sky, so it never picks up .gc-sky--night's token
   flip - redefine the surface tokens here so the shell stays dark-mode safe on its own, mirroring the night
   values used by the member screens. Scoped to .gc-admin so nothing else is affected. */
@media (prefers-color-scheme: dark) {
    .gc-admin {
        color-scheme: dark;
        --gc-surface: #16121E;
        --gc-raised: #221B2D;
        --gc-line: rgba(255,255,255,0.13);
        --gc-divider: rgba(255,255,255,0.10);
        --gc-ink: #EFEBF3;
        --gc-ink-soft: #CFC7D8;
        --gc-muted: #B5ACC0;
        --gc-placeholder: #A198AC;
        --gc-primary: #9FD6B8;
        --gc-primary-strong: #C3E8D3;
        --gc-primary-tint: rgba(159,214,184,0.16);
        --gc-selected-tile: rgba(159,214,184,0.16);
        --gc-on-primary: #1B2620;
        --gc-accent-tint: rgba(242,182,61,0.16);
        --gc-help: #9CC1EA;
        --gc-help-strong: #C3DAF2;
        --gc-help-tint: rgba(156,193,234,0.16);
        --gc-on-help: #1B2620;
        --gc-scrim: rgba(0,0,0,0.5);
        --gc-raised-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
    }

    /* The night raised surface reads better as a solid panel here than the member glass. */
    .gc-admin .gc-card,
    .gc-admin .gc-admin-tile {
        background: var(--gc-raised);
    }
}


/* GC-820: email-first sign-in panel (FR-ONB-09), drawn to the WebSignIn / CheckEmail boards. Colours come
   from the --gc-* tokens so the panel follows the sky into dark; the mockup's fixed hex map onto them
   (primary #3F6B57 -> --gc-primary, surface #F1F4EE -> --gc-raised for the pills, line #CBD5CA is the
   control edge, muted #56625B -> --gc-muted). */
.gc-email-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gc-field-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--gc-ink);
}

.gc-auth-input {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--gc-control-edge);
    border-radius: var(--gc-radius-tile);
    background: var(--gc-control);
    font-size: 16px;
    font-weight: 700;
    color: var(--gc-ink);
}

.gc-auth-input::placeholder {
    color: var(--gc-placeholder);
}

/* Room for the eye toggle sitting inside the field wrapper. */
.gc-field-with-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.gc-auth-input--has-toggle {
    padding-right: 52px;
}

.gc-password-toggle {
    position: absolute;
    right: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--gc-muted);
    cursor: pointer;
}

.gc-password-toggle:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-btn-primary {
    height: 52px;
    border: none;
    border-radius: var(--gc-radius-button);
    background: var(--gc-primary);
    color: var(--gc-on-primary);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.gc-btn-primary:disabled {
    opacity: 0.5;
    cursor: default;
}

.gc-reassurance {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* CheckEmail: six individual digit boxes (60px, radius 14, centred, weight 900). */
.gc-code-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.gc-code-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.gc-code-box {
    height: 60px;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1.5px solid var(--gc-line);
    background: var(--gc-control);
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    color: var(--gc-ink);
}

.gc-code-box:focus-visible {
    outline: none;
    border: 2px solid var(--gc-primary);
}

.gc-code-resend strong {
    font-weight: 800;
    color: var(--gc-ink-soft);
}

.gc-step-title {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}

.gc-step-sub {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-step-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gc-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--gc-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
}

.gc-link:disabled {
    opacity: 0.5;
    cursor: default;
    text-decoration: none;
}

.gc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.gc-hint {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-message {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-muted);
}


/* GC-826 — Web offline behaviour (SPEC §25, mockups OfflineToday / OnlineAgain / OfflineFull).
   The app-wide connection notice sits above the floating tab bar; the never-signed-in offline screen is a
   full page on the help sky. Every colour is a token so both follow the sky into dark. */

.gc-connection-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 92px;
    z-index: 1100;
    pointer-events: none;
}

.gc-connection-notice-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 10px 14px 10px 16px;
    border-radius: var(--gc-radius-group);
    box-shadow: var(--gc-bar-shadow);
    pointer-events: auto;
}

.gc-connection-notice-strip--offline {
    background: var(--gc-ink);
    color: var(--gc-surface);
}

.gc-connection-notice-strip--online {
    background: var(--gc-primary);
    color: var(--gc-on-primary);
}

.gc-connection-notice-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.gc-connection-notice-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
}

.gc-connection-notice-sub {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    opacity: 0.82;
}

.gc-connection-notice-retrying {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.82;
}

.gc-connection-notice-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--gc-on-primary) 20%, transparent);
}

.gc-connection-notice-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 20px;
    color: inherit;
    background: color-mix(in srgb, var(--gc-surface) 14%, transparent);
}

.gc-connection-notice-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: gc-spin 0.9s linear infinite;
}

.gc-connection-notice-spinner--ink {
    width: 20px;
    height: 20px;
    border-color: var(--gc-line);
    border-top-color: var(--gc-primary);
}

@keyframes gc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gc-connection-notice-spinner {
        animation: none;
    }
}

/* From 1024 px the tab bar becomes a left rail, so the notice no longer needs to clear a bottom bar. */
@media (min-width: 1024px) {
    .gc-connection-notice {
        bottom: 20px;
    }
}

/* Never-signed-in offline full screen (mockup OfflineFull). */
.gc-offline-full {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 62px 22px 34px;
    box-sizing: border-box;
}

.gc-offline-full-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gc-primary);
}

.gc-offline-full-leaf {
    width: 26px;
    height: 26px;
}

.gc-offline-full-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}

.gc-offline-full-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 34rem;
}

.gc-offline-full-title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: -0.015em;
    color: var(--gc-ink);
}

.gc-offline-full-message {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.gc-offline-full-retrying {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--gc-ink-soft);
}

.gc-offline-full-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 34rem;
}

.gc-offline-full-help {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--gc-radius-group);
    background: var(--gc-help-tint);
    color: var(--gc-help-strong);
    text-decoration: none;
}

.gc-offline-full-help-icon {
    color: var(--gc-help);
    display: flex;
    align-items: center;
}

.gc-offline-full-help-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.gc-offline-full-help-title {
    font-size: 16px;
    font-weight: 800;
}

.gc-offline-full-help-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.gc-offline-full-retry {
    width: 100%;
    min-height: 56px;
    border-radius: var(--gc-radius-button);
    font-size: 17px;
}

/* --- Settings shell and sub-pages ---------------------------------------------------------------------------
   Every Settings screen shares one frame: from 1024 px the destinations sit in a side column next to the
   page (the WebSettings board); below that the root lists them under Get help and each sub-page has a way
   back to that list. Only design tokens, so the dusk and night skies recolour it. */

.gc-settings-shell {
    display: block;
}

.gc-settings-shell-side {
    display: none;
}

.gc-settings-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 6px;
    color: var(--gc-primary-strong);
    font-weight: 800;
    text-decoration: none;
}

.gc-settings-back:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: var(--gc-radius-field);
}

.gc-settings-intro {
    margin: -8px 0 0;
    padding: 0 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.gc-settings-nav {
    display: flex;
    flex-direction: column;
}

.gc-settings-row--current {
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
}

.gc-settings-list {
    margin: 4px 0 8px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.gc-settings-group--padded > .gc-settings-field-hint {
    padding: 10px 0;
}

.gc-settings-field--pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 12px;
}

@media (min-width: 1024px) {
    .gc-settings-shell {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    .gc-settings-shell-side {
        display: block;
        position: sticky;
        top: 16px;
    }

    .gc-settings-shell-body {
        max-width: none;
        margin: 0;
    }

    .gc-settings-nav--list, .gc-settings-back {
        display: none;
    }
}

/* --- Baby check-in and what follows it ----------------------------------------------------------------------
   The due-date sheet, the arrival form, the loss pages and Remember your baby. Deliberately plain and calm:
   the same flat groups as Settings, one primary action, no celebration and no alarm colours. The neutral
   button is also the quieter button used elsewhere. */

.gc-button--neutral {
    background: var(--gc-raised);
    color: var(--gc-ink);
    box-shadow: inset 0 0 0 1px var(--gc-line);
}

.gc-baby-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-baby-actions .gc-button {
    width: 100%;
    min-height: 52px;
}

.gc-baby-done {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.gc-baby-resource {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-baby-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gc-baby-resource-head h2 {
    margin: 0;
}

.gc-baby-resource-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--gc-help);
}

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

.gc-settings-row-text .gc-settings-row-name {
    flex-grow: 0;
}

@media (min-width: 1024px) {
    .gc-baby-actions {
        flex-direction: row;
    }

    .gc-baby-actions .gc-button {
        width: auto;
    }
}


/* --- GC-821: web onboarding design fidelity ----------------------------------------------------------------
   The question-bank follow-up screen (QFollowUp), the tap-to-continue hint under an answer, the questions-a-day
   stepper (QCount), the baby-due path (OnbDue / BabyArrived), the partner "leave their name out" card
   (OnbPartnerName) and the faith "another faith" reveal (OnbFaithOther). Everything is coloured from the
   --gc-* tokens so the dusk and night skies recolour it with no dark rules of its own. */

/* The "Tap an answer to keep going." hint under a self-advancing question (QRated / QForced). */
.gc-question-hint {
    margin: 4px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--gc-muted);
}

/* QFollowUp: the answered question with the chosen answer as a chip, over the free-text box. */
.gc-question-followup {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-question-answered {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-question-answered-text {
    flex-grow: 1;
}

.gc-question-answered-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px 0 10px;
    border: 0;
    border-radius: var(--gc-radius-chip);
    background: var(--gc-primary-tint);
    color: var(--gc-primary-strong);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.gc-question-answered-chip:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* The free-text box carries the selected 2px fern border of the mockup. */
.gc-question-followup-input {
    box-sizing: border-box;
    min-height: 168px;
    padding: 16px 18px;
    border-radius: var(--gc-radius-tile);
    border: 2px solid var(--gc-primary);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
    font-size: 17px;
    line-height: 25px;
    font-weight: 700;
    resize: none;
    outline: none;
}

.gc-question-followup-input:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-question-followup-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-question-followup-privacy .gc-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* QCount: the "How many questions a day?" stepper - a big -/+ pair around a large number, a range slider
   below, then the "Start my first 5" button. Reuses the round control button and the pace slider look. */
.gc-pace {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gc-pace-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-pace-stepper-row {
    display: flex;
    align-items: center;
    gap: 28px;
}

.gc-pace-step-button {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 28px;
    border: 1.5px solid var(--gc-control-edge);
    background: var(--gc-control);
    color: var(--gc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-pace-step-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.gc-pace-step-button:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-pace-count {
    width: 120px;
    text-align: center;
    font-size: 96px;
    line-height: 100px;
    font-weight: 900;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.gc-pace-unit {
    font-size: 17px;
    font-weight: 800;
}

.gc-pace-est {
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-pace-range {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-pace-range input[type="range"] {
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: var(--gc-primary);
    cursor: pointer;
}

.gc-pace-range input[type="range"]:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
    border-radius: var(--gc-radius-field);
}

.gc-pace-range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-muted);
}

.gc-pace-hint {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-pace .gc-button {
    min-height: 56px;
    align-self: stretch;
    justify-content: center;
}

/* A leading question / step lede: a big heading with a calm sub, used by OnbDue and the pace step. */
.gc-step-lede {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-step-lede h1 {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.gc-step-lede p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* OnbDue: the "Due <month> <year>" row, the multiples 2-col grid, and the calm footnote. */
.gc-due-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-due-row-label {
    width: 40px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 800;
}

.gc-due-months {
    --gc-tiles-columns: 2;
}

.gc-due-note {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* A field wrapper reused by the year inputs on OnbDue / OnbPartnerBirth-no-name / faith-other. */
.gc-field-year {
    height: 60px;
    box-sizing: border-box;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    padding: 0 18px;
    font: inherit;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.gc-field-year:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

/* OnbPartnerName: the "Leave their name out" secondary card under the name field. */
.gc-secondary-card {
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--gc-radius-tile);
    border: 1.5px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    padding: 14px 18px;
    text-align: left;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.gc-secondary-card:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-secondary-card-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gc-secondary-card-title {
    font-size: 17px;
    font-weight: 800;
}

.gc-secondary-card-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-secondary-card-chevron {
    flex-shrink: 0;
    color: var(--gc-muted);
}

/* A tinted tile whose label runs to two lines (a title over a muted sub), such as the "Another faith" option.
   The tile keeps its space-between layout so the check circle still sits at the end. */
.gc-tiles--tinted .gc-tile--stacked {
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: flex-start;
}

.gc-tile-stacked-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.gc-tile-sub {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

/* OnbFaithOther: the revealed optional "Which faith would you like to see?" field with its note. */
.gc-faith-other {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-faith-other-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gc-muted);
}

.gc-faith-other-note .gc-icon {
    flex-shrink: 0;
    margin-top: 2px;
}


/* --- SAVINGS-001: Savings goals -----------------------------------------------------------------------------
   The /savings page: the new-goal composer, a card per goal (balance vs target, estimate line, add-movement
   mini-form, movement list), mirroring the Wishes page. Every colour is a --gc-* token so it follows the sky
   into dark, and each background is paired with its own text colour. */

.gc-savings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gc-savings-name,
.gc-savings-target,
.gc-savings-amount,
.gc-savings-note {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--gc-radius-field);
    border: 1px solid var(--gc-line);
    background: var(--gc-raised);
    color: var(--gc-ink);
    font: inherit;
    font-weight: 700;
}

.gc-savings-name::placeholder,
.gc-savings-target::placeholder,
.gc-savings-amount::placeholder,
.gc-savings-note::placeholder {
    color: var(--gc-placeholder);
}

.gc-savings-name:focus-visible,
.gc-savings-target:focus-visible,
.gc-savings-amount:focus-visible,
.gc-savings-note:focus-visible {
    outline: 3px solid var(--gc-primary);
    outline-offset: 2px;
}

.gc-savings-composer .gc-settings-field-actions,
.gc-savings-target {
    margin-top: 8px;
}

.gc-savings-goal-name {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--gc-ink);
}

.gc-savings-balance {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--gc-ink);
}

.gc-savings-estimate {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--gc-primary-strong);
}

.gc-savings-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.gc-savings-add .gc-savings-amount,
.gc-savings-add .gc-savings-note {
    flex: 1 1 120px;
    width: auto;
}

.gc-savings-tx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-savings-tx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--gc-divider);
    font-size: 15px;
    color: var(--gc-ink);
}

.gc-savings-tx-amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gc-savings-tx-note {
    flex-grow: 1;
    color: var(--gc-muted);
}