/* =========================================================================
   Rebound design system (build step 1.5)

   One stylesheet for the whole app. Read top to bottom: tokens (every
   color, size and space has a name), then the base, then components.

   RULES THIS FILE KEEPS, CHECKED BY tests/design_test.php
   - Every text color meets WCAG 2.2 AA contrast on the background it sits
     on (4.5:1), body text much more; form borders and the focus ring meet
     3:1. Checked by computing it, not by eye.
   - Light and dark define exactly the same tokens, and the two copies of
     the dark theme (by choice, and by the device's setting) are identical.
   - No left or right anywhere: margin-inline-start, not margin-left. That
     is what lets Arabic lay out right to left with no second stylesheet.
   - Every control is at least 44px tall: a fingertip, not a mouse pointer.
   - Motion is gentle, and off for anyone who has asked their device for
     less of it.

   THE TYPEFACE IS THE DEVICE'S OWN
   San Francisco on iPhone and Mac, Segoe on Windows, Roboto on Android.
   Nothing to download, so nothing to wait for, and it is the type each
   person's device already reads best in, in every language. (Dani,
   2026-10-10.)

   THE COLOR IS A LEAFY GREEN (Dani, 2026-10-10)
   Anchored on Xbox green (#107C10, brand-600), which is also the button
   color. Built as a scale in OKLCH, a color space where equal steps look
   equal, so every shade is the same hue at a different lightness.
   ========================================================================= */

:root {
    /* Brand: leafy green, hue 143, anchored on #107C10 */
    --brand-50:  #EFFBEE;
    --brand-100: #DDF6DB;
    --brand-200: #BEEDBA;
    --brand-300: #94DD8E;
    --brand-400: #68C463;
    --brand-500: #3DA039;
    --brand-600: #107C10;
    --brand-700: #0F640E;
    --brand-800: #114D10;
    --brand-900: #0D350C;
    --brand-950: #091E08;

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui,
            Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --text-xs:  13px;
    --text-sm:  15px;
    --text-md:  17px;   /* body: Apple's own default reading size */
    --text-lg:  20px;
    --text-xl:  24px;
    --text-2xl: 30px;
    --text-3xl: 38px;
    --leading-tight: 1.25;
    --leading:       1.55;

    /* Space: a 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Shape */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --control-height: 48px;
    --control-height-sm: 44px;   /* the smallest a touch target may be */
    --content-width: 680px;

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --quick: 140ms;
    --gentle: 240ms;

    /* ---- Light theme (the default) ---- */
    color-scheme: light;
    --bg:            #F9FAFA;
    --surface:       #FFFFFF;
    --surface-2:     #F2F5F4;
    --text:          #121614;
    --text-muted:    #575C5A;
    --text-hint:     #696F6C;
    --rule:          #E7EAE9;
    --field-border:  #828885;
    --accent:        #107C10;
    --accent-hover:  #0F640E;
    --on-accent:     #FFFFFF;
    --accent-soft:   #EFFBEE;
    --accent-soft-text: #114D10;
    --focus:         #3DA039;
    --switch-on:     #107C10;
    --switch-knob:   #FFFFFF;
    --link:          #107C10;
    --success:       #196632;
    --success-bg:    #EAFAEC;
    --warning:       #724D0B;
    --warning-bg:    #FFF3E3;
    --danger:        #883835;
    --danger-bg:     #FFEFED;
    --danger-solid:  #B6322D;
    --on-danger:     #FFFFFF;
    --info:          #1A588F;
    --info-bg:       #E9F7FF;
    --shadow:        0 1px 2px rgba(16, 24, 20, 0.06), 0 4px 16px rgba(16, 24, 20, 0.06);
    --toast-bg:      #121614;
    --toast-text:    #F2F5F4;
    --toast-action:  #94DD8E;
}

/* ---- Dark theme, chosen by the person (rbnd_users.appearance) ---- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #121614;
    --surface:       #1B1F1E;
    --surface-2:     #262A28;
    --text:          #F2F5F4;
    --text-muted:    #BABFBD;
    --text-hint:     #949A97;
    --rule:          #2B2F2D;
    --field-border:  #707674;
    --accent:        #107C10;
    --accent-hover:  #0F640E;
    --on-accent:     #FFFFFF;
    --accent-soft:   #0D350C;
    --accent-soft-text: #BEEDBA;
    --focus:         #68C463;
    --switch-on:     #3DA039;
    --switch-knob:   #FFFFFF;
    --link:          #94DD8E;
    --success:       #A7E2B2;
    --success-bg:    #172C1C;
    --warning:       #F4C98E;
    --warning-bg:    #32230E;
    --danger:        #FFBAB3;
    --danger-bg:     #381E1C;
    --danger-solid:  #F07F77;
    --on-danger:     #121614;
    --info:          #A4D6FF;
    --info-bg:       #172839;
    --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
    --toast-bg:      #F2F5F4;
    --toast-text:    #121614;
    --toast-action:  #0F640E;
}

/* ---- Dark theme, following the device when no choice was made ----
   Must match the block above exactly; the design test compares them. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:            #121614;
        --surface:       #1B1F1E;
        --surface-2:     #262A28;
        --text:          #F2F5F4;
        --text-muted:    #BABFBD;
        --text-hint:     #949A97;
        --rule:          #2B2F2D;
        --field-border:  #707674;
        --accent:        #107C10;
        --accent-hover:  #0F640E;
        --on-accent:     #FFFFFF;
        --accent-soft:   #0D350C;
        --accent-soft-text: #BEEDBA;
        --focus:         #68C463;
        --switch-on:     #3DA039;
        --switch-knob:   #FFFFFF;
        --link:          #94DD8E;
        --success:       #A7E2B2;
        --success-bg:    #172C1C;
        --warning:       #F4C98E;
        --warning-bg:    #32230E;
        --danger:        #FFBAB3;
        --danger-bg:     #381E1C;
        --danger-solid:  #F07F77;
        --on-danger:     #121614;
        --info:          #A4D6FF;
        --info-bg:       #172839;
        --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
        --toast-bg:      #F2F5F4;
        --toast-text:    #121614;
        --toast-action:  #0F640E;
    }
}

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--text-md); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

small, .text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--text-muted); }
.text-hint  { color: var(--text-hint); font-size: var(--text-sm); }
.numeric    { font-variant-numeric: tabular-nums; }

/* One visible focus style everywhere, for keyboards; never removed. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Read by screen readers, invisible on screen. */
.visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -100px;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 100;
}
.skip-link:focus { inset-block-start: var(--space-4); }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.stack > * + * { margin-block-start: var(--space-4); }
.stack-sm > * + * { margin-block-start: var(--space-2); }
.stack-lg > * + * { margin-block-start: var(--space-6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster-between { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }

.content { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; padding-inline: var(--space-4); }

/* =========================================================================
   Wordmark (until the logo arrives, Dani 2026-10-10: in progress)
   ========================================================================= */

.wordmark {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.03em;
    color: var(--text); text-decoration: none;
}
.wordmark::before {
    /* A placeholder mark: a simple filled circle in the brand color. The
       logo replaces the whole .wordmark, so nothing else depends on it. */
    content: ""; inline-size: 14px; block-size: 14px;
    border-radius: 50%; background: var(--link);   /* the brighter green in dark */
}

/* =========================================================================
   Card
   ========================================================================= */

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-6);
}
.card > :last-child { margin-block-end: 0; }
@media (max-width: 480px) { .card { padding: var(--space-5); border-radius: var(--radius); } }

/* =========================================================================
   The card layout: one short page in the middle of the screen
   (sign in, the sign-in link, unsubscribe, 404)
   ========================================================================= */

.layout-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--space-5) var(--space-4);
}
.layout-card > .wordmark { margin-block-end: var(--space-5); }
.layout-card > .card { inline-size: 100%; max-inline-size: 440px; }
/* Plain paragraphs only: a notice, an error or a note keeps its own color. */
.layout-card .card p:not([class]) { color: var(--text-muted); }
.layout-card .card strong { color: var(--text); font-weight: 600; }
.layout-card .card form { margin-block-start: var(--space-5); }
.layout-card .card form .btn { margin-block-start: var(--space-4); }
.layout-card .card > .btn { margin-block-start: var(--space-2); }

/* An email address shown back to its owner, on its own line. */
.address {
    display: block; margin-block: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2); color: var(--text);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); overflow-wrap: anywhere;
}

/* The small print under a card's main action, set apart by a rule. */
.note {
    margin-block: var(--space-5) 0;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--rule);
    font-size: var(--text-sm); color: var(--text-hint);
}
.note a { color: var(--text-muted); }

/* A calm "done" mark above a heading. */
.tick {
    display: flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; margin-block-end: var(--space-5);
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-text);
    font-size: var(--text-lg); font-weight: 700;
}

/* =========================================================================
   The app shell (build step 1.6)
   Every signed-in page. On a computer, the destinations run down the side;
   on a phone, they sit along the bottom where a thumb reaches, and the
   page leaves room for them and for the phone's own rounded corners and
   home bar (the safe-area insets).
   ========================================================================= */

.icon { inline-size: 22px; block-size: 22px; flex: none; }

.app { min-block-size: 100vh; min-block-size: 100dvh; }
.app-main { min-inline-size: 0; }

.sidebar {
    position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100dvh;
    display: flex; flex-direction: column; gap: var(--space-6);
    padding: var(--space-5) var(--space-3);
    border-inline-end: 1px solid var(--rule);
    overflow-y: auto;
}
.sidebar > .wordmark { padding-inline: var(--space-3); }
.sidenav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidenav-link {
    display: flex; align-items: center; gap: var(--space-3);
    min-block-size: var(--control-height-sm); padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: var(--text-sm);
    transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.sidenav-link:hover { background: var(--surface-2); color: var(--text); }
.sidenav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-text); }
.sidebar-foot { margin-block-start: auto; display: grid; gap: var(--space-1); padding-inline: var(--space-3); }
.sidebar-foot .btn { justify-self: start; margin-inline-start: calc(-1 * var(--space-3)); }
.sidebar-who { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appbar {
    position: sticky; inset-block-start: 0; z-index: 10;
    display: flex; align-items: center; gap: var(--space-3);
    min-block-size: 56px;
    padding-block-start: env(safe-area-inset-top);
    /* The same on both sides, so it is right whichever way the page reads. */
    padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right));
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-block-end: 1px solid var(--rule);
}
.appbar-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-block-start: 1px solid var(--rule);
}
.tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-block-size: 56px; padding-inline: 2px;
    color: var(--text-muted); text-decoration: none;
    font-size: var(--text-xs); font-weight: 600; line-height: 1.15; text-align: center;
    overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent;
}
.tab[aria-current="page"] { color: var(--link); }
.tab:active { opacity: 0.7; }

@media (min-width: 768px) {
    .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
    .tabbar { display: none; }
}
@media (max-width: 767.98px) {
    .sidebar { display: none; }
    .app-main { padding-block-end: calc(56px + env(safe-area-inset-bottom)); }
}

/* The location switcher (F55): a list that opens under the location's
   name. A real <details>, so it opens with no script at all. */
.switcher { position: relative; min-inline-size: 0; max-inline-size: 100%; }
.switcher > summary {
    list-style: none; display: flex; align-items: center; gap: var(--space-1);
    min-block-size: var(--control-height-sm);
    padding-inline: var(--space-2); margin-inline-start: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm); font-weight: 700; cursor: pointer;
}
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { background: var(--surface-2); }
.switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher > summary .icon { inline-size: 18px; block-size: 18px; color: var(--text-muted); transition: transform var(--quick) var(--ease); }
.switcher[open] > summary .icon { transform: rotate(180deg); }
.switcher-menu {
    position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-start: calc(-1 * var(--space-2));
    z-index: 30; min-inline-size: 260px; max-inline-size: calc(100vw - 2 * var(--space-4));
    margin: 0; padding: var(--space-2);
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.switcher-heading { margin: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.switcher-item {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    inline-size: 100%; min-block-size: var(--control-height-sm); padding: var(--space-2) var(--space-3);
    background: transparent; color: var(--text); border: 0;
    font-size: var(--text-md); font-weight: 500; text-align: start;
}
.switcher-item:hover { background: var(--surface-2); }
.switcher-item[aria-current="true"] { font-weight: 700; }
.switcher-item .icon { color: var(--link); }

/* The page itself */
.page { max-inline-size: 1080px; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-8); }
@media (max-width: 767.98px) { .page { padding-block-start: var(--space-5); } }
.page-head { margin-block-end: var(--space-5); }
.page-narrow { max-inline-size: 720px; margin-inline: auto; }
.page-head > :last-child { margin-block-end: 0; }
.section + .section { margin-block-start: var(--space-7); }
.section > * + * { margin-block-start: var(--space-4); }
.section > h2 { margin-block-end: var(--space-4); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* A page with nothing on it yet says what will be there, calmly. */
.empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center;
    max-inline-size: 460px; margin-inline: auto; padding-block: var(--space-8); }
.empty > p { color: var(--text-muted); margin: 0; }
.empty-mark { display: flex; align-items: center; justify-content: center; inline-size: 64px; block-size: 64px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-text); }
.empty-mark .icon { inline-size: 30px; block-size: 30px; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn, button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: var(--control-height);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit; font-size: var(--text-md); font-weight: 600; line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover, button:hover { background: var(--accent-hover); }
.btn:active, button:active { transform: scale(0.985); }
.btn[disabled], button[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-block { display: flex; inline-size: 100%; }
.btn-sm { min-block-size: var(--control-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--field-border); }
.btn-secondary:hover { background: var(--surface-2); }

.btn-plain { background: transparent; color: var(--link); padding-inline: var(--space-3); }
.btn-plain:hover { background: var(--accent-soft); }

.btn-danger { background: var(--danger-solid); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-solid); filter: brightness(0.92); }

/* =========================================================================
   Forms
   ========================================================================= */

.field { display: grid; gap: var(--space-2); }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; margin-block-end: var(--space-2); }
.card form > .btn { margin-block-start: var(--space-5); }
.card > h2 { font-size: var(--text-lg); }
.steps { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-muted); }
.field + .field { margin-block-start: var(--space-4); }

label, .label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="password"],
select, textarea {
    inline-size: 100%;
    min-block-size: var(--control-height);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-md);   /* 16px or more stops iPhone zooming on focus */
    transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
textarea { min-block-size: 120px; resize: vertical; line-height: var(--leading); }
input::placeholder, textarea::placeholder { color: var(--text-hint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
}
[aria-invalid="true"] { border-color: var(--danger) !important; }

.hint  { font-size: var(--text-sm); color: var(--text-hint); }
.code-input { font-size: var(--text-xl); font-variant-numeric: tabular-nums; letter-spacing: 0.3em; text-align: center; }
.error { font-size: var(--text-sm); color: var(--danger); font-weight: 500; }

/* A toggle: a real checkbox underneath, so keyboards, screen readers and
   forms all work without any script. */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-height-sm); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; margin: 0;
    inline-size: 46px; block-size: 28px; border-radius: var(--radius-pill);
    background: var(--field-border); position: relative; cursor: pointer;
    transition: background-color var(--gentle) var(--ease); flex: none; }
.switch input::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
    inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--switch-knob);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--gentle) var(--ease); }
.switch input:checked { background: var(--switch-on); }
.switch input:checked::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-18px); }

/* A segmented control: a row of choices, one selected (radio buttons). */
.segmented { display: inline-flex; max-inline-size: 100%; overflow-x: auto; padding: 3px; gap: 3px; background: var(--surface-2); border-radius: var(--radius-sm); }
.segmented label { margin: 0; }
.segmented-fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); inline-size: 100%; }
.segmented-fill span { justify-content: center; inline-size: 100%; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm); padding-inline: var(--space-4);
    border-radius: 6px; font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.segmented input:checked + span { background: var(--surface); color: var(--text);
    box-shadow: inset 0 0 0 1px var(--field-border), var(--shadow); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

/* =========================================================================
   Notices and badges
   ========================================================================= */

.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm);
    background: var(--info-bg); color: var(--info); margin-block-end: var(--space-4); }
.notice-success { background: var(--success-bg); color: var(--success); }
.notice-warning { background: var(--warning-bg); color: var(--warning); }
.notice-danger  { background: var(--danger-bg);  color: var(--danger); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
    border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
    background: var(--accent-soft); color: var(--accent-soft-text); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-neutral { background: var(--surface-2); color: var(--text-muted); }
.badge-info    { background: var(--info-bg); color: var(--info); }

/* =========================================================================
   Lists: rows of people, campaigns, requests
   ========================================================================= */

.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.list > li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 56px;
    padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--rule); }
.list > li:last-child { border-block-end: 0; }
.list .grow { flex: 1; min-inline-size: 0; }
.list .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .meta { font-size: var(--text-sm); color: var(--text-muted); }

/* =========================================================================
   Tables: results, call lists, anything with columns
   ========================================================================= */

.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--rule); vertical-align: middle; }
.table th { font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.table tr:last-child td { border-block-end: 0; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Swatch: a color shown as a color (branding, the pattern library)
   ========================================================================= */

.swatch { display: inline-block; inline-size: 28px; block-size: 28px; flex: none;
    border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.swatch-lg { inline-size: 100%; block-size: 64px; border-radius: var(--radius); }

/* =========================================================================
   Writing tools (the theme library, step 2.1)
   ========================================================================= */

.week-label { display: grid; min-inline-size: 104px; font-size: var(--text-sm); font-weight: 600; }
.list a.title { color: var(--text); text-decoration: none; display: block; }
.list a.title:hover { text-decoration: underline; }
.piece { display: grid; gap: var(--space-2); }
.piece > .hint { margin: 0; }
.piece textarea { min-block-size: var(--control-height); }
details.card { margin-block-start: var(--space-4); }
.sending-now { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--surface-2); font-size: var(--text-sm); }
.sending-now p { margin: var(--space-1) 0 0; color: var(--text-muted); }
details.card > summary { cursor: pointer; min-block-size: var(--control-height-sm); display: flex; align-items: center; }
details.card[open] > summary { margin-block-end: var(--space-4); }
.preview-mail { max-inline-size: 600px; }
.preview-line { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--accent); }

/* =========================================================================
   Specialties (staff): who Rebound writes for, laid out top-down
   ========================================================================= */

/* Two or three views of one screen: links, styled like the segmented control. */
.viewswitch { display: inline-flex; flex-wrap: wrap; max-inline-size: 100%; gap: 3px; padding: 3px;
    background: var(--surface-2); border-radius: var(--radius-sm); margin-block-end: var(--space-5); }
.viewswitch a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height-sm);
    padding-inline: var(--space-4); border-radius: 6px; font-weight: 600; font-size: var(--text-sm);
    color: var(--text-muted); text-decoration: none; white-space: nowrap; }
@media (max-width: 520px) {
    .viewswitch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .viewswitch a { justify-content: center; padding-inline: var(--space-2); white-space: normal; text-align: center; }
    .viewswitch .badge { display: none; }
}
.viewswitch a[aria-current="page"] { background: var(--surface); color: var(--text);
    box-shadow: inset 0 0 0 1px var(--field-border), var(--shadow); }

.lede { max-inline-size: 720px; margin-block-start: 0; }

.cards { display: grid; gap: var(--space-5); align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.cards + .section { margin-block-start: var(--space-7); }
.specialty { display: grid; gap: var(--space-4); }
.specialty h2, .specialty p { margin: 0; }
.specialty .part { display: grid; gap: var(--space-2); }
.specialty .part > .btn, .side .card > .btn { justify-self: start; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-block-size: var(--control-height-sm); border-block-end: 1px solid var(--rule); }
.rows a { font-weight: 600; color: var(--text); text-decoration: none; }
.rows a:hover { text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: var(--space-2);
    min-block-size: var(--control-height-sm); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius); background: var(--surface-2);
    color: var(--text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.chip:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.chip .also { color: var(--text-muted); font-weight: 500; }

/* A form beside the things it affects; the side drops below on a phone. */
.split { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.split > .main { flex: 999 1 520px; min-inline-size: 0; }
.split > .side { flex: 1 1 300px; min-inline-size: 0; display: grid; gap: var(--space-4); }
.side .card { display: grid; gap: var(--space-2); }
.side .card p { margin: 0; }
.back { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm); font-weight: 600; }

.choice-group { display: grid; gap: 2px; }
.choice-group + .choice-group { margin-block-start: var(--space-3); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-height-sm);
    font-weight: 500; cursor: pointer; }
.choice input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--accent); }

.rhythm { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.rhythm > .field { margin: 0; }
@media (max-width: 520px) { .rhythm { grid-template-columns: minmax(0, 1fr); } }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.form-actions .hint { margin-inline-start: auto; }

.signup-tile { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-height);
    padding-inline: var(--space-4); border-radius: var(--radius); border: 2px solid var(--accent);
    background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }

/* =========================================================================
   Weekly emails (staff): brief, draft, review, approve (step 2.1c)
   ========================================================================= */

.choices-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.weekly .part { display: grid; gap: var(--space-2); }
.weekly .part + .part { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--rule); }
.weekly h2 { margin: 0; }
.split.weekly { margin-block-start: var(--space-5); }
.text-block { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--surface-2); white-space: pre-line; }
.checks { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1);
    color: var(--danger); font-size: var(--text-sm); font-weight: 500; }
.checks[hidden] { display: none; }
.redraft > summary { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm);
    color: var(--link); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.redraft form { margin-block-start: var(--space-2); }
.pick > li.current { background: var(--accent-soft); }
.pick > li.current a.title { color: var(--accent-soft-text); }
.section-editor { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius);
    background: var(--surface-2); }
.section-editor .text-block, .section-editor .sending-now { background: var(--surface); }

/* The preview: an email, as a reader sees it. */
.mail { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.mail-from { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface-2);
    font-size: var(--text-sm); color: var(--text-muted); }
.mail-from strong { color: var(--text); }
.mail-brand { padding: var(--space-4) var(--space-5); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.mail-body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.mail-body p, .mail-body h3 { margin: 0; }
.mail-body hr { inline-size: 100%; margin: var(--space-2) 0; border: 0; border-block-start: 1px solid var(--rule); }
.mail-answers { display: grid; gap: var(--space-2); }
.mail-answer { display: flex; align-items: center; justify-content: center; min-block-size: var(--control-height-sm);
    border-radius: var(--radius); border: 1.5px solid var(--field-border); font-weight: 600; }
.mail-answer.main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mail-local { padding: var(--space-2) var(--space-3); border: 1px dashed var(--field-border); border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text-muted); }
.mail-section { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.mail-section .eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.mail-rest { font-size: var(--text-sm); color: var(--text-muted); }

/* The year: planning weekly emails ahead (step 2.1d). */
.glance { display: grid; gap: var(--space-4); align-items: start; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.glance + .section { margin-block-start: var(--space-7); }
.glance .card { display: grid; gap: var(--space-2); align-content: start; }
.glance .card > .btn { justify-self: start; }
.glance .big { margin: 0; font-size: var(--text-xl); font-weight: 700; }
.weekbar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.weekbar span { block-size: 12px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--field-border); }
.weekbar span.on { background: var(--accent); box-shadow: none; }
.months { display: grid; gap: var(--space-5); align-items: start; margin-block-start: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.month { display: grid; gap: 0; }
.month h3 { margin: 0 0 var(--space-2); }
.week { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3);
    padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.week.past { opacity: 0.6; }
.week .when { display: grid; align-content: start; font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.week .when .hint { font-size: var(--text-xs); font-weight: 500; }
.week .what { display: grid; gap: var(--space-2); min-inline-size: 0; justify-items: start; }
.week .what > a:not(.open-week) { font-weight: 600; font-size: var(--text-sm); color: var(--text); text-decoration: none; }
.week .what > a:not(.open-week):hover { text-decoration: underline; }
.week .what .hint, .week .what .error { font-size: var(--text-xs); margin: 0; }
.open-week { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); inline-size: 100%;
    min-block-size: var(--control-height-sm); padding-inline: var(--space-3); border: 1.5px dashed var(--field-border);
    border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.open-week span { white-space: nowrap; }
.week .what > .open-week { justify-self: stretch; }
.open-week .go { color: var(--link); }
.open-week:hover { border-color: var(--accent); }

/* =========================================================================
   Emails, How it sounds (business, step 2.2): choices beside a preview
   ========================================================================= */

.page:has(.voice) { max-inline-size: 1320px; }   /* room for the choices and the email side by side */
.voice-card { display: grid; gap: var(--space-4); }
.voice-card h2 { margin: 0; font-size: var(--text-lg); }
.voice-card > h2 + .hint, .voice-card > div > h2 + .hint { margin: calc(-1 * var(--space-3)) 0 0; }
.voice-card .hint, .voice-card p, .voice-card .field { margin: 0; }
.voice-card div > h2 + .hint { margin-block-start: var(--space-1); }

/* How personal: five bars. */
.meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.meter span { block-size: 10px; border-radius: 3px; background: var(--surface-2); }
.meter span.on { background: var(--accent); }

/* One choice from a few, each a pill; the real radio stays, unseen, for
   the keyboard and screen readers. */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill input, .tile input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm);
    padding-inline: var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--field-border);
    background: var(--surface); font-weight: 600; cursor: pointer; }
.pill input:checked + span, .tile input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); }
.pill input:focus-visible + span, .tile input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* A choice that shows what it sounds like. */
.tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tile { display: grid; }
.tile > span { display: grid; gap: var(--space-2); align-content: start; min-block-size: var(--control-height);
    padding: var(--space-4); border-radius: var(--radius); border: 2px solid var(--field-border);
    background: var(--surface); cursor: pointer; }
.tile-sample { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); }
.tile strong { font-size: var(--text-md); }
.tile input:checked + span .tile-sample { color: var(--accent-soft-text); }

/* The preview: an email, as Sarah sees it. */
.split > .voice-preview { flex-basis: 380px; }
.voice-preview { position: sticky; inset-block-start: calc(56px + var(--space-4)); }
.voice-preview h2 { margin: 0; font-size: var(--text-lg); }
.voice-preview .viewswitch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.voice-preview .viewswitch a { justify-content: center; }
.voice-preview > .hint { margin: 0; }
.mail-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mail-offer { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); }
.mail-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mail-note { display: grid; gap: var(--space-1); }
.mail-note p { white-space: pre-line; }
.mail-foot { font-size: var(--text-xs); color: var(--text-muted); }
.your-words { justify-self: start; }
.mail-body [hidden], .voice [hidden] { display: none; }
.partner-preview { display: grid; gap: var(--space-2); }
.mail-box { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); }
.mail-box p { margin: 0; white-space: pre-line; color: var(--text-muted); }
.mail-link { color: var(--link); font-weight: 600; text-decoration: underline; }

/* Save, always in reach: under the page on a computer, above the tabs on a phone. */
.savebar { position: sticky; inset-block-end: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin-block-start: var(--space-5); padding-block: var(--space-4); background: var(--bg); border-block-start: 1px solid var(--rule); }

.voice-toggle { margin-block-end: var(--space-4); }
.voice-toggle[hidden] { display: none; }
.voice-toggle button { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-height-sm);
    border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; }
.voice-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--field-border), var(--shadow); }

@media (min-width: 768px) {
    .voice-toggle:not([hidden]) { display: none; }
}
@media (max-width: 767.98px) {
    .savebar { inset-block-end: calc(56px + env(safe-area-inset-bottom)); }
    .voice-preview { position: static; }
    .voice.js[data-show="choices"] .voice-preview { display: none; }
    .voice.js[data-show="preview"] .voice-choices { display: none; }
    /* Two views say it plainly on a phone: the long intro and a second
       "Preview" heading would only push the choices down. */
    .page:has(.voice.js) .page-head .lede, .voice.js .voice-preview > h2 { display: none; }
}

/* =========================================================================
   Emails, When it goes out (business, step 2.3b)
   ========================================================================= */

.when { max-inline-size: 760px; }
.next-card { border: 2px solid var(--accent); }
.next-when { font-size: var(--text-xl); line-height: 1.25; }
.next-card .hint, .next-card .text-sm { margin: 0; }
.field-short { max-inline-size: 240px; }
.hours { display: grid; }
.hours-day { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4);
    padding-block: var(--space-2); border-block-end: 1px solid var(--rule); }
.hours-day > .error { grid-column: 1 / -1; margin: 0; }
.hours-times { display: grid; grid-template-columns: minmax(0, 10rem) auto minmax(0, 10rem); justify-content: start; align-items: center; gap: var(--space-1); }
.hours-times input[type="time"] { inline-size: 100%; min-inline-size: 0; padding-inline: 8px; font-size: 16px; }
.hours-times input[type="time"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; }
.pill abbr { text-decoration: none; }
.hours-times[hidden], .hours-closed[hidden] { display: none; }
.hours-break { grid-column: 1 / -1; }
.hours-times > span { justify-self: center; }
.hours-break > summary { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm);
    color: var(--link); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.hours-break[open] > summary { margin-block-end: var(--space-2); }
@media (max-width: 520px) { .hours-day { grid-template-columns: minmax(0, 1fr); } }
.closures > li { min-block-size: 56px; gap: var(--space-4); }
.closure { display: grid; gap: 2px; padding-block: var(--space-2); }
.add-closure > summary { list-style: none; justify-self: start; }
.add-closure > summary::-webkit-details-marker { display: none; }
.add-closure[open] > summary { margin-block-end: var(--space-4); }
.closure-form { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.closure-form .field, .closure-form .hint { margin: 0; }
.closure-form > .btn { justify-self: start; }
.closure-dates { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.always { background: var(--surface-2); box-shadow: none; }

/* =========================================================================
   Emails, This week (business, step 2.3c)
   ========================================================================= */

.this-week > .main { flex-basis: 520px; }
.split > .week-preview { flex-basis: 420px; }
.week-preview h2 { margin: 0; font-size: var(--text-lg); }
.week-preview > .hint { margin: 0; }
.groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.group { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: var(--space-3);
    min-block-size: var(--control-height); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    border: 2px solid var(--field-border); background: var(--surface); color: var(--text); text-decoration: none; }
.group:hover { border-color: var(--accent); }
.group.current { border-color: var(--accent); background: var(--accent-soft); }
.group-count { font-size: var(--text-xl); text-align: end; }
.group-text { display: grid; gap: 2px; }
.mail-frame { display: block; inline-size: 100%; block-size: 1100px; border: 0; border-radius: var(--radius-lg); background: #F1F1EE; box-shadow: var(--shadow); }
@media (max-width: 767.98px) { .split > .week-preview { position: static; } .mail-frame { block-size: 900px; } }

/* =========================================================================
   Translation review and Languages (build step 2.4a)
   ========================================================================= */

.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-block: var(--space-4) var(--space-5); }
.glance-item { display: grid; gap: var(--space-1); align-content: start; }
.glance-value { font-size: var(--text-xl); }
.lang-pick { margin-block-start: var(--space-3); }
.lang-pick select { inline-size: auto; }
.queue, .langs { list-style: none; margin: 0; padding: 0; }
.queue > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4); border-block-end: 1px solid var(--rule); }
.queue-text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.queue-title { font-weight: 600; color: var(--text); text-decoration: none; }
.queue-title:hover { text-decoration: underline; }
.queue-status { gap: var(--space-2); }
.queue + .hint, .langs + .hint, .langs-more + .hint { margin-block-start: var(--space-4); }
.split.review { margin-block-start: var(--space-4); }
.review .part h2, .add-reviewer h2 { font-size: var(--text-lg); }
.side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start; }
.side-by-side .field { margin: 0; }
.side-by-side textarea { field-sizing: content; min-block-size: 72px; }   /* grows with the words, where the browser can */
.langs > li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem auto; align-items: center; gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4); border-block-end: 1px solid var(--rule); }
.lang-text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.lang-name { gap: var(--space-2); }
.lang-who { gap: var(--space-2); }
.card .lang-who > .btn { margin-block-start: 0; }
.lang-readers { display: grid; text-align: end; }
.lang-readers strong { font-size: var(--text-lg); }
.langs-more > summary { display: list-item; padding-block: var(--space-3); cursor: pointer; font-weight: 600; }
.add-reviewer { max-inline-size: 640px; margin-block-start: var(--space-5); }
.add-reviewer .btn { justify-self: start; }
@media (max-width: 767.98px) {
    .queue > li { grid-template-columns: minmax(0, 1fr); }
    .langs > li { grid-template-columns: minmax(0, 1fr) auto; }
    .langs > li > .btn { grid-column: 1 / -1; justify-self: start; }
}

/* =========================================================================
   Languages switched on: the wording, businesses' words (build step 2.4b)
   ========================================================================= */

.text-success { color: var(--success); }
.lang-actions { display: grid; gap: var(--space-2); justify-items: end; }
.lang-actions form { margin: 0; }
.card .lang-actions form > .btn { margin-block-start: 0; }
.once, .biz-words, .how-on { margin-block-start: var(--space-4); }
.once h2, .biz-words h2, .how-on h2 { font-size: var(--text-lg); margin: var(--space-1) 0 0; }
.once p, .how-on p { margin-block-end: 0; max-inline-size: 760px; }
.once-done { margin-block: var(--space-4) 0; }
.how-on { max-inline-size: 760px; background: var(--surface-2); box-shadow: none; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.meter { display: grid; gap: var(--space-1); }
.bar { block-size: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; block-size: 100%; background: var(--accent); }
.wording { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; margin-block-start: var(--space-4); }
.wording-side { flex: 1 1 260px; min-inline-size: 0; max-inline-size: 320px; display: grid; gap: var(--space-4); }
.wording-tips { display: grid; gap: var(--space-4); }
.wording-tips p { margin: 0; }
.wording-groups ul { list-style: none; margin: 0; padding: var(--space-2); display: grid; gap: 2px; }
.wording-groups a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    min-block-size: var(--control-height-sm); padding-inline: var(--space-3); border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; }
.wording-groups a:hover { background: var(--surface-2); }
.wording-groups a > .text-sm { white-space: nowrap; }
.wording-groups a[aria-current="page"] { background: var(--accent-soft); font-weight: 600; }
.wording-main { flex: 999 1 560px; min-inline-size: 0; }
.phrase .hint, .phrase .text-sm { margin: 0; }
.approve-all { background: var(--surface-2); box-shadow: none; }
.words { margin-block-start: var(--space-4); max-inline-size: 1100px; }
.own-words { max-inline-size: 760px; }
.own-words .field-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.lang-card { display: grid; gap: var(--space-1); }
.lang-card p { margin: 0; }

/* =========================================================================
   This week's local line (build step 2.5)
   ========================================================================= */

.local-card p { margin: 0; }
.local-overview h2, .local-lines h2 { font-size: var(--text-lg); margin: 0; }
.local-overview p, .local-lines p { margin: 0; }
.local-lines { margin-block-start: var(--space-5); }
.lines-list { list-style: none; margin: 0; padding: 0; }
.lines-list > li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-2) var(--space-5);
    padding-block: var(--space-4); border-block-end: 1px solid var(--rule); }
.lines-name, .lines-text { display: grid; gap: var(--space-1); align-content: start; }
@media (max-width: 767.98px) { .lines-list > li { grid-template-columns: minmax(0, 1fr); } }
.local-line { padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--accent); }

/* =========================================================================
   Toast: a short message at the bottom, with Undo (F40)
   ========================================================================= */

.toast { position: fixed; z-index: 30; inset-block-end: var(--space-5); inset-inline: var(--space-4);
    margin-inline: auto; max-inline-size: 460px;
    display: grid; overflow: hidden;
    background: var(--toast-bg); color: var(--toast-text);
    border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); font-size: var(--text-sm);
    animation: toast-in var(--gentle) var(--ease);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.toast-row, .toast:not(:has(.toast-row)) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-block-size: 48px; padding-block: var(--space-1); padding-inline: var(--space-5) var(--space-2); }
.toast-text { padding-block: var(--space-2); }
.toast-form { margin: 0; flex: none; }
.toast .btn-plain { color: var(--toast-action); font-weight: 700; min-block-size: 44px; padding-inline: var(--space-3); }
.toast .btn-plain:hover { background: transparent; text-decoration: underline; }
.toast-time { display: none; block-size: 3px; background: color-mix(in srgb, var(--toast-text) 15%, transparent); }
.toast-time span { display: block; block-size: 3px; inline-size: 100%; background: var(--toast-action); }
.toast-timed .toast-time { display: block; }
.toast-out { opacity: 0; transform: translateY(8px); }
.toast-static { position: static; animation: none; }   /* for the pattern library */
@media (min-width: 768px) {
    .app .toast { inset-inline-start: calc(240px + var(--space-4)); }   /* centered on the page, not under the sidebar */
}
@media (max-width: 767.98px) {
    .app .toast { inset-block-end: calc(56px + env(safe-area-inset-bottom) + var(--space-3)); }   /* above the tab bar */
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Your team (build step 5.4): Settings' list, Invite someone, Change
   ========================================================================= */

.team-list { list-style: none; margin: 0; padding: 0; }
.team-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
    padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.team-who { display: grid; gap: var(--space-1); min-inline-size: 0; }
.team-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.team-who .text-sm { overflow-wrap: anywhere; }
.team-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.team-actions form { margin: 0; }
.team-roles { margin: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule); }
.page-narrow-start { max-inline-size: 640px; }
.team-fieldset { border: 0; margin-inline: 0; margin-block-end: 0; padding: 0; display: grid; gap: var(--space-2); min-inline-size: 0; }
.team-form > .team-fieldset { margin-block-start: var(--space-5); }
.team-fieldset legend { font-weight: 600; padding: 0; margin-block-end: var(--space-2); }
.team-fieldset .hint { margin: 0; }
.choice-cards { display: grid; gap: var(--space-2); }
.choice-card { align-items: flex-start; padding-block: var(--space-3); padding-inline: var(--space-4); border-radius: var(--radius);
    border: 1.5px solid var(--field-border); background: var(--surface); }
.choice-card:has(input:checked) { border-color: var(--accent); }
.choice-card input { margin-block-start: 2px; }
.choice-text { display: grid; gap: 2px; }
.choice-text .hint { font-weight: 400; }
.team-where-some { padding-inline-start: var(--space-6); }

/* =========================================================================
   This week's calls (build step 5.5)
   ========================================================================= */

.calls h2 { margin: 0; font-size: var(--text-lg); }
.calls-n-text { display: grid; gap: 2px; }
.calls-n-choices { display: inline-flex; gap: 3px; padding: 3px; margin: 0; background: var(--surface-2); border-radius: var(--radius-sm); }
.calls-n-choices button { min-inline-size: 56px; min-block-size: var(--control-height-sm); padding-inline: var(--space-4); border: 0; border-radius: 6px;
    background: transparent; color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; }
.calls-n-choices button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--field-border), var(--shadow); }
.calls-n-choices button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.calls-list { margin-block-start: var(--space-2); }
.calls-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.calls .request-done { margin-block-start: var(--space-2); }
/* Worth reaching out to (step 5.13): a first line, and the ways to reach someone */
.reach-line { display: grid; gap: var(--space-1); margin-block-start: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); }
.reach-line p { margin: 0; }
.reach-line-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.reach-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.reach-another { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; min-block-size: 44px; }
.reach-another:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.calls .request-actions { margin-block-start: var(--space-2); }
.reach-said { margin-block-start: var(--space-1); }
.reach .choice-card span { line-height: var(--leading); }
.reach-from-label { font-size: var(--text-sm); font-weight: 600; }
.reach-open { inline-size: 100%; justify-content: center; min-block-size: 52px; }
.card.stack-sm > .reach-open + .stack-sm { margin-block-start: var(--space-5); }
.reach-points { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }
.reach-note { display: grid; gap: 2px; margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.request.reach-waiting { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); border-radius: var(--radius); background: var(--warning-bg); border-block-start-color: transparent; }
.request.reach-mine { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); border-radius: var(--radius); background: var(--accent-soft); border-block-start-color: transparent; }
.reach-add-note summary { list-style: none; display: inline-flex; align-items: center; }
.reach-add-note summary::-webkit-details-marker { display: none; }
.reach-add-note[open] { flex-basis: 100%; }
.reach-add-note form { margin-block-start: var(--space-2); }
.reach-add-note input { flex: 1 1 220px; }
.request-actions form { margin: 0; }
.reach-outcomes { display: grid; gap: var(--space-2); }
.reach-outcomes form, .card .reach-outcomes form > .btn { inline-size: 100%; margin: 0; }
@media (min-width: 640px) {
  .reach-open { inline-size: auto; }
  .reach-outcomes { display: flex; flex-wrap: wrap; }
  .reach-outcomes form, .card .reach-outcomes form > .btn { inline-size: auto; }
}

/* =========================================================================
   The weekly question, on Home (build step 5.6)
   ========================================================================= */

.question-head { display: grid; gap: var(--space-1); }
.question-head h2 { margin: 0; font-size: var(--text-lg); }
.question-head p { margin: 0; }
.question-meter { display: grid; gap: var(--space-2); }
.question-form, .question-after { padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.question-form .join-field { display: grid; gap: var(--space-2); }
.question-form .hint, .question-after p { margin: 0; }
.question-after { display: grid; gap: var(--space-2); }
.question-title { font-weight: 700; font-size: var(--text-md); }
.question-form textarea { inline-size: 100%; }
.question-card > p:last-child { margin: 0; padding-block-start: var(--space-3); }

/* =========================================================================
   Results, each month (build step 5.7)
   ========================================================================= */

.results-head { align-items: center; }
.results-months { display: flex; align-items: center; gap: var(--space-2); }
.results-month { margin: 0; font-size: var(--text-lg); padding-inline: var(--space-2); }
.results-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.results-big { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius); background: var(--accent-soft); }
.results-big-label { font-weight: 700; }
.results-big-n { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 600; }
.results-big-n strong { font-size: 2.5rem; line-height: 1; }
.results-big-value { display: grid; gap: 2px; padding-block-start: var(--space-2); border-block-start: 1px solid var(--rule); }
.results-value { font-size: var(--text-lg); font-weight: 700; }
.results-big .hint, .results .card > p, .home-results > p { margin: 0; }
.results .card.stack, .home-results { display: grid; gap: var(--space-4); }
.results .card.stack > *, .home-results > * { margin: 0; }
.results-people { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.results-people li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.results-people .hint { grid-column: 1 / -1; }
.results-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.results-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.results-stats-4 { grid-template-columns: repeat(4, 1fr); }
.results-stat { display: grid; gap: 2px; align-content: start; }
.results-stat strong { font-size: var(--text-xl); }
.results-foot { margin: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule); font-size: var(--text-sm); }
.results-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.results-reasons li { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr 2.5rem; gap: var(--space-3); align-items: center; }
.results-reasons strong { text-align: end; }
.results-bar { block-size: 8px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.results-bar span { display: block; block-size: 8px; border-radius: 99px; background: var(--accent); }
.results-values { list-style: none; margin: 0; padding: 0; }
.results-values li { display: grid; grid-template-columns: 1fr 9rem; gap: var(--space-1) var(--space-3); align-items: center; padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.results-values label { display: grid; gap: 2px; }
.results-values .error { grid-column: 1 / -1; margin: 0; }
.results-money { display: flex; align-items: center; gap: var(--space-2); }
.results-money input { inline-size: 100%; min-inline-size: 0; }
.home-results .results-stats { grid-template-columns: 1fr 1fr; }
@media (max-width: 767.98px) {
    .results-two, .results-pair { grid-template-columns: 1fr; }
    .results-stats-4 { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Plain-language explanations (build step 5.10): the ? beside a word, and
   Words we use
   ========================================================================= */

.why { display: inline; }
.why > summary { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; border-radius: 99px;
                 border: 1.5px solid var(--field-border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 700;
                 cursor: pointer; list-style: none; vertical-align: middle; margin-inline-start: var(--space-1); position: relative; }
.why > summary::-webkit-details-marker { display: none; }
.why > summary::after { content: ''; position: absolute; inset: -10px; }
.why[open] > summary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.why-panel { display: block; margin-block: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: 10px; background: var(--accent-soft);
             color: var(--accent-soft-text); font-size: var(--text-sm); font-weight: 400; line-height: 1.5; }
.why-panel a { font-weight: 600; }
.why-head > h2 { display: inline; margin: 0; vertical-align: middle; }
.words-find { display: flex; gap: var(--space-2); }
.words-find input { flex: 1; min-inline-size: 0; }
.words-group h2 { margin: 0 0 var(--space-2); }
.words-group dl { margin: 0; }
.words-word { padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.words-word dt { font-weight: 700; }
.words-word dd { margin: 2px 0 0; }
.words-word:target { background: var(--accent-soft); border-radius: 8px; padding-inline: var(--space-3); }

/* =========================================================================
   How you compare (build step 5.9): a green bar for theirs, a gray one for
   the middle of similar businesses, values as text beside them
   ========================================================================= */

.compare-head { display: grid; gap: var(--space-1); }
.compare-head > *, .compare > p { margin: 0; }
.compare-list { list-style: none; margin: 0; padding: 0; }
.compare-list li { display: grid; gap: var(--space-3); padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.compare-what { display: flex; justify-content: space-between; align-items: start; gap: var(--space-2); }
.compare-what > span:first-child { display: grid; gap: 2px; }
.compare-bars { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr 3rem; gap: var(--space-2) var(--space-3); align-items: center; }
.compare-who { font-size: var(--text-sm); font-weight: 600; }
.compare-track { display: block; }
.compare-bar { display: block; block-size: 10px; border-start-end-radius: 4px; border-end-end-radius: 4px; }
.compare-bar-you { background: var(--accent); }
.compare-bar-typical { background: var(--text-hint); opacity: 0.55; }
.compare-n { text-align: end; }
.compare-tip { margin: 0; font-size: var(--text-sm); }
.compare-foot { padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule); }
.compare-what .badge { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .compare-bars { grid-template-columns: auto 1fr auto; } .compare-who { white-space: nowrap; } }

/* =========================================================================
   Ask Rebound (build step 5.8)
   ========================================================================= */

.assistant-home > div > h2, .assistant-home > div > p { margin: 0; }
.assistant-home > div { display: grid; gap: var(--space-1); }
.assistant-row { display: flex; gap: var(--space-2); align-items: stretch; }
.assistant-row input { flex: 1; min-inline-size: 0; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.assistant-chip { min-block-size: 44px; padding: 0 var(--space-4); border-radius: 99px; border: 1.5px solid var(--field-border); background: var(--surface);
                  color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.assistant-chip:hover { border-color: var(--accent); }
.assistant-turn { display: grid; gap: var(--space-3); }
.assistant-you { justify-self: end; max-inline-size: 85%; margin: 0; padding: var(--space-3) var(--space-4); border-radius: 14px 14px 4px 14px;
                 background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }
.assistant-answer > * { margin: 0; }
.assistant-who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.assistant-dot { inline-size: 8px; block-size: 8px; border-radius: 99px; background: var(--accent); }
.assistant-text { line-height: 1.6; }
.assistant-people { list-style: none; margin: 0; padding: 0; }
.assistant-people li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.assistant-phone { font-weight: 600; white-space: nowrap; }
.assistant-results { grid-template-columns: 1fr 1fr; }
.assistant-said p { margin: 0; }

/* =========================================================================
   For anyone who has asked their device for less motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Post it, print it (step 2.6): the week's post, card and sign, small,
   each with what it's for and its button. The card and sign themselves are
   drawn by assets/share.css, sized to whatever box they're given. */
.share-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-5) var(--space-4); }
.share-piece { display: grid; gap: var(--space-2); align-content: start; }
.share-piece .btn { justify-self: stretch; }
.share-thumb { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); background: #FFFFFF; margin-block-end: var(--space-1); }
.share-thumb:has(.pc) { aspect-ratio: 5 / 8; border-radius: 4px; }
.share-caption > summary { display: list-item; padding-block: var(--space-3); cursor: pointer; font-weight: 600; }   /* keeps its triangle */
.share-caption[open] > summary { margin-block-end: var(--space-2); }
.share-caption textarea { inline-size: 100%; background: var(--surface-2); }

/* A business's sign-up link, until sign-up opens (step 2.6): their name
   under a band of their color, not our wordmark. */
.join-page { display: grid; gap: var(--space-3); }
.join-page h1 { margin: 0; font-size: var(--text-xl); }
.join-page p { margin: 0; }
.join-band { display: block; block-size: 6px; inline-size: 48px; border-radius: var(--radius-pill); }
.join-page .join-name { font-weight: 700; color: var(--text); margin-block-start: calc(-1 * var(--space-1)); }
.join-week { display: grid; gap: var(--space-2); inline-size: 100%; margin-block-start: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.join-week h2 { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.join-week p { margin: 0; color: var(--text-muted); }
.join-page .join-week .join-week-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-hint); }

/* =========================================================================
   The page every answer button opens (build step 3.1). The business's own:
   their color on the button and the chips, set by the page (--brand...).
   ========================================================================= */

.answer-page { display: grid; gap: var(--space-3); }
.answer-page h1 { margin: 0; font-size: var(--text-xl); line-height: 1.25; }
.answer-page p { margin: 0; }
.answer-page .join-band { background: var(--brand, var(--accent)); }
.answer-page .answer-name { font-weight: 700; color: var(--text); margin-block-start: calc(-1 * var(--space-1)); }
.answer-form { display: grid; gap: var(--space-4); margin-block-start: var(--space-2); }
.answer-choices { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.answer-choices legend { padding: 0; margin-block-end: var(--space-2); font-weight: 600; color: var(--text); }
.answer-hint { font-weight: 400; color: var(--text-hint); font-size: var(--text-sm); }
.answer-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.answer-chip { position: relative; display: inline-flex; }
.answer-chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.answer-chip span { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--field-border); color: var(--text); cursor: pointer; }
.answer-chip input:checked + span { border-color: var(--brand-button, var(--accent)); background: var(--brand-soft, var(--surface-2)); color: #1E2321; font-weight: 700; }
.answer-chip input:focus-visible + span { outline: 2px solid var(--brand-button, var(--accent)); outline-offset: 2px; }
.answer-button { min-block-size: 48px; border: 0; border-radius: var(--radius-sm); background: var(--brand-button, var(--accent)); color: var(--brand-button-text, #FFFFFF);
    font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; padding-inline: var(--space-4); }
.answer-line { display: flex; align-items: center; justify-content: center; min-block-size: 48px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--field-border); color: var(--text); font-weight: 600; text-decoration: none; }
.answer-aside { text-align: center; font-size: var(--text-sm); }
.share-tools { display: grid; gap: var(--space-3); margin-block-start: var(--space-1); }
.answer-page .share-link { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
    font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.share-pair { display: flex; gap: var(--space-2); }
.movers-setting, .health-setting { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.movers-setting .hint, .health-setting .hint { margin: 0; }
.movers { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.movers h2 { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.movers-form { display: grid; gap: var(--space-2); }
.movers-form label { font-weight: 600; }
.movers-form input { min-block-size: 48px; }
.movers-form .answer-button { margin-block-start: var(--space-2); }
.movers-places { list-style: none; margin: 0; padding: 0; }
.movers-places li { display: grid; gap: 2px; padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.movers-places li:first-child { border-block-start: 0; padding-block-start: 0; }
.movers-places a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; justify-self: start; }
.share-pair > * { flex: 1; }
button.answer-line { background: none; font: inherit; font-weight: 600; cursor: pointer; padding-inline: var(--space-3); }
.answer-page .share-pair a.answer-line { color: var(--text); }
.answer-check { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 50%;
    background: var(--brand-soft, var(--surface-2)); color: var(--brand-button, var(--accent)); font-size: 26px; font-weight: 700; }
.answer-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.answer-link { min-block-size: 44px; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--link, var(--accent));
    text-decoration: underline; cursor: pointer; }
.answer-notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); }
.answer-preview { margin: 0 0 var(--space-4); inline-size: 100%; max-inline-size: 440px; padding: var(--space-3); border-radius: var(--radius-sm);
    background: #FFF4D6; color: #5C4A12; font-size: var(--text-sm); }
.answer-page a, .answer-page .answer-link { color: var(--brand-link, var(--link)); }
:root[data-theme="dark"] .answer-page a, :root[data-theme="dark"] .answer-page .answer-link { color: var(--brand-link-dark, var(--link)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .answer-page a, :root:not([data-theme="light"]) .answer-page .answer-link { color: var(--brand-link-dark, var(--link)); }
}
.answer-page .answer-line { color: var(--text); }
.answer-foot { margin: var(--space-4) 0 0; max-inline-size: 440px; text-align: center; font-size: 12px; color: var(--text-hint); }

/* The sign-up page (step 4.3): the answer page's look, plus the form. */
.join-langs { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--text-sm); }
.join-langs a, .join-langs strong { display: inline-flex; align-items: center; min-block-size: 44px; }
.join-field { display: grid; gap: var(--space-1); }
.join-field label { font-weight: 600; }
.join-field input, .join-rows input[type="text"] { min-block-size: 48px; inline-size: 100%; box-sizing: border-box; }
.join-rows { display: grid; gap: var(--space-2); }
.join-pet { display: grid; gap: var(--space-2); }
.join-pet + .join-pet { padding-block-start: var(--space-2); border-block-start: 1px solid var(--rule); }
.join-add { justify-self: start; }
.join-trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.join-suggest { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: #FFF7E6;
    border: 1px solid #F0D9A8; color: #1E2321; }
.join-suggest-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.join-suggest-buttons > * { flex: 1 1 auto; padding-inline: var(--space-4); }
.join-suggest p { color: #1E2321; }
.join-suggest .answer-line { color: #1E2321; background: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.join-alert { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: var(--text-sm); }
.join-consent { margin: 0; }
.join-help { margin: 0; }
.join-mail { font-size: 24px; font-weight: 400; }
.join-book { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.join-book h2 { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.answer-page > .answer-line { margin-block-start: var(--space-2); }

/* Book my usual for a household (step 3.2): who it's for, everyone due
   ticked. A real checkbox under a drawn one, so it works with no script. */
.answer-people { display: grid; gap: var(--space-2); }
.answer-person { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 52px;
                 padding: var(--space-2) var(--space-3); border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); cursor: pointer; }
.answer-person input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.answer-box { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px;
              border: 2px solid var(--field-border); border-radius: 6px; background: var(--surface); }
.answer-person input:checked ~ .answer-box { border-color: var(--brand-button, var(--accent)); background: var(--brand-button, var(--accent)); }
.answer-person input:checked ~ .answer-box::after { content: "✓"; color: var(--brand-button-text, #FFFFFF); font-size: 15px; font-weight: 700; line-height: 1; }
.answer-person:has(input:checked) { border-color: var(--brand-button, var(--accent)); background: var(--brand-soft, var(--surface-2)); color: #1E2321; }
.answer-person:has(input:checked) .answer-hint { color: #4A524F; }
.answer-person input:focus-visible ~ .answer-box { outline: 2px solid var(--brand-button, var(--accent)); outline-offset: 2px; }

/* Home: Requests (step 3.2). Each request a block: who and when, what,
   best times, how to reach them, then Booked or Couldn't reach. */
.requests .hint + .request-list, .shared .hint + .request-list, .requests .hint + .requests-empty { margin-block-start: var(--space-4); }
.request-list { list-style: none; margin: 0; padding: 0; }
.request { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.request p { margin: 0; }
.request-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); }
.request-name { font-size: var(--text-lg); }
.request-what { font-weight: 600; }
.request-reach a { color: var(--link); }
.request-actions { margin-block-start: var(--space-2); }
.request-actions form, .request-done form { margin: 0; }
.requests-empty { margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); }
.requests-done-heading { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); color: var(--text-muted); }
.request-done { list-style: none; margin: 0; padding: 0; }
.request-done li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 52px; border-block-start: 1px solid var(--rule); }
.request-done .grow { flex: 1; min-inline-size: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
.answer-person-text { display: grid; gap: 2px; line-height: 1.3; }

/* Not now, I'm all set, a language (step 3.3): one choice from a list,
   drawn like the household list, a dot for a tick. */
.answer-group { padding: 0; margin-block-end: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-hint); }
.answer-radio .answer-box { border-radius: 50%; }
.answer-radio input:checked ~ .answer-box { background: var(--surface); }
.answer-radio input:checked ~ .answer-box::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--brand-button, var(--accent)); }
.answer-radio input:checked ~ .answer-person-text strong { font-weight: 700; }
.answer-person:not(:has(input:checked)) strong { font-weight: 600; }
.answer-letter { max-inline-size: 640px; margin-block-start: var(--space-5); block-size: 900px; }

/* The one preference page (step 3.3): below the unsubscribe button, and
   only below it, a break or a language. */
.prefs { margin-block-start: var(--space-5); }
.prefs h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
.prefs .prefs-instead { margin: 0; }
.prefs .answer-notice { margin-block-start: var(--space-3); }
.layout-card .card .prefs form { margin-block-start: var(--space-3); }
.layout-card .card .prefs .answer-person strong { font-weight: 600; }
.layout-card .card .prefs .answer-person:has(input:checked) strong { font-weight: 700; }

/* Settings, Alerts (step 3.4): one alert, its switches, and where it goes. */
.alerts > * + * { margin-block-start: var(--space-4); }
.alerts > h2 + p { margin-block-start: var(--space-1); }
.alert-kind { display: grid; gap: 2px; }
.alert-kind-next { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.alert-row { display: grid; gap: var(--space-2); }
.alerts form.alert-row { margin-inline: 0; margin-block-end: 0; }
.alerts .alert-kind + .alert-row { margin-block-start: var(--space-3); }
.switch-row { display: flex; justify-content: space-between; inline-size: 100%; gap: var(--space-4); font-weight: 400; }
.switch-row .switch-text > span:first-child { font-weight: 600; }
.switch-row .hint { font-weight: 400; }
.switch-text { display: grid; gap: 2px; min-inline-size: 0; }
.switch-text .hint { overflow-wrap: anywhere; }
.alert-note { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); }
.alert-devices { padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.alert-devices ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.alert-devices li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 48px; }
.alert-devices li .grow { flex: 1; min-inline-size: 0; }
.alert-devices form { margin: 0; }
[hidden] { display: none !important; }

/* Specialties, a service: its sources for the public guide (step 7.4). */
.guide-sources { display: grid; gap: var(--space-3); }
.guide-source { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.guide-source .field + .field { margin-block-start: 0; }

/* Staff Overview: The status page (step 7.5). */
#status { margin-block-end: var(--space-5); }
#status h2 { margin: 0; font-size: var(--text-lg); }
#status > p { margin-block-end: 0; }
.status-rows { display: grid; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.status-part { display: grid; gap: 2px; }
.status-row .badge { flex: none; }
.status-note { border-block-start: 1px solid var(--rule); padding-block-start: var(--space-4); }
.status-note .notice { margin: 0; }
.status-note .notice p { margin: var(--space-1) 0 0; }

/* Every signed-in page: the line while sending is slow (step 7.5). */
.status-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); }
.status-line a { color: inherit; font-weight: 600; }
.sidebar-help { display: block; font-weight: 600; margin-block-end: var(--space-2); }

/* Staff Overview: Keeping Rebound running (step 8.5). */
.running { margin-block-end: var(--space-5); }
.running h2 { margin: 0; font-size: var(--text-lg); }
.running > p { margin-block-end: 0; }
.running .running-glance { margin-block-end: 0; }
.running-alerts .switch-row { align-items: center; }
.running-alerts .switch-row .badge { flex: none; white-space: nowrap; }
.running .running-bad { color: var(--danger); }
.running .running-warn { color: var(--warning); }
.running-problem { display: grid; gap: var(--space-1); margin-block-end: 0; }
.running-jobs > summary { list-style: none; inline-size: max-content; cursor: pointer; }
.running-jobs > summary::-webkit-details-marker { display: none; }
.running-jobs[open] > summary { margin-block-end: var(--space-3); }
.running-jobs .table-scroll { overflow-x: auto; }
.running-jobs .table td, .running-jobs .table th { padding-inline: 0 var(--space-4); }
.running-jobs .running-failing td { background: var(--danger-bg); }
.running-jobs .hint { margin: var(--space-3) 0 0; }
.running-alerts { padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.running-alerts > * + * { margin-block-start: var(--space-3); }
/* For a move or a big change (step 8.9). */
.running-ops { padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.running-ops form { margin: 0; }
.running-ops .notice { margin: 0; }
.running-ops > .hint { margin: 0; }
@media (max-width: 599px) {
  .running-jobs .running-what { display: none; }
}

/* Emails, This week: How often (step 3.5). */
.often { list-style: none; margin: 0; padding: 0; }
.often li { display: flex; gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.often li:first-child { border-block-start: 0; }

/* ---------------------------------------------------------------------------
 * People: bringing in a list (step 4.1)
 * ------------------------------------------------------------------------- */
.people h2 { margin: 0; font-size: var(--text-lg); }
.people .card > p { margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.stat strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sign-up-link { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.sign-up-qr { inline-size: 96px; block-size: 96px; padding: 6px; border-radius: var(--radius-sm); background: #FFFFFF; border: 1px solid var(--rule); box-sizing: border-box; }
.sign-up-qr svg { display: block; inline-size: 100%; block-size: 100%; }
@media (max-width: 480px) { .sign-up-link { grid-template-columns: 1fr; } }
.stat span { font-size: var(--text-sm); color: var(--text-muted); }
.dropzone { position: relative; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: 2px dashed var(--field-border);
    border-radius: var(--radius-lg); text-align: center; cursor: pointer; }
.dropzone.is-over, .dropzone:focus-within { border-color: var(--accent); background: var(--surface-2); }
.dropzone.has-file { border-style: solid; border-color: var(--accent); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.attest { display: flex; gap: var(--space-3); align-items: flex-start; min-block-size: 44px; cursor: pointer; }
.attest input { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 2px; }
.attest > span { display: grid; gap: 2px; }
.map-list { display: grid; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) 90px; gap: var(--space-3); align-items: center;
    padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.map-theirs { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.map-row select { min-block-size: 44px; }
.map-state .ok { color: var(--success, var(--accent)); font-weight: 600; }
@media (max-width: 640px) { .map-row { grid-template-columns: 1fr; gap: var(--space-2); } }
.progress { block-size: 10px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.progress span { display: block; block-size: 100%; background: var(--accent); transition: inline-size 0.6s ease; }
.steps-done { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.steps-done li { display: flex; gap: var(--space-2); align-items: center; }
.steps-done .mark { inline-size: 1.2em; color: var(--accent); font-weight: 700; }
.steps-done .now { font-weight: 700; }
.steps-done .later { color: var(--text-muted); }
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { padding-block: var(--space-3); border-block-start: 1px solid var(--rule); overflow-wrap: anywhere; }
.issue-more summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; color: var(--link); font-weight: 600; }
.import-list { list-style: none; margin: 0; padding: 0; }
.import-list li { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.import-list .grow { flex: 1; min-inline-size: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }

/* People: send it by email (step 4.2) */
.address-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.address-row .address { flex: 1; min-inline-size: 260px; margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2);
    font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.steps-how { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); line-height: 1.5; }
.email-block { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.email-block form { margin: 0; }
.sender-list { list-style: none; margin: 0; padding: 0; }
.sender-list li { display: flex; align-items: center; gap: var(--space-3); min-block-size: 48px; }
.sender-list .grow { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }

/* =========================================================================
   The front desk's memory (build step 4.4): look someone up, add someone,
   a household's whole story, forget.
   ========================================================================= */

.find-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.find-field { display: grid; gap: var(--space-1); flex: 1; min-inline-size: 240px; }
.find-box { display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); min-block-size: 48px; border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm); background: var(--surface); color: var(--text-hint); }
.find-box:focus-within { border-color: var(--accent); outline: 3px solid var(--focus); outline-offset: 1px; }
.find-box input { flex: 1; min-inline-size: 0; border: 0; outline: 0; padding: 0; background: none; font: inherit; font-size: 16px; color: var(--text); min-block-size: 44px; }
.people-find .hint { margin: 0; }
.find-results { list-style: none; margin: 0; padding: 0; }
.find-results li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.find-name { font-weight: 700; font-size: var(--text-lg); color: var(--text); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.find-name:hover { text-decoration: underline; }
.find-sub, .find-who { grid-column: 1 / -1; overflow-wrap: anywhere; }
.find-none { margin: 0; }

.people-add { max-inline-size: 640px; }
.add-form { gap: var(--space-4); }
.add-names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .add-names { grid-template-columns: 1fr; } }
.add-form .attest { margin-block-start: var(--space-2); }
.btn-block { display: flex; inline-size: 100%; min-block-size: 52px; justify-content: center; font-size: 17px; }
.add-blocked { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.add-blocked .address { margin: 0; }
.added { display: grid; gap: var(--space-3); justify-items: start; }
.added h2 { margin: 0; font-size: var(--text-xl); }
.added p { margin: 0; }
.added-check { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-size: 24px; font-weight: 700; }
.added-see { justify-self: center; display: inline-flex; align-items: center; min-block-size: 44px; }

.person h2 { margin: 0; font-size: var(--text-lg); }
.person-reach { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: baseline; }
.person-reach a { overflow-wrap: anywhere; }
.person-phone { font-weight: 600; }
.person-stand { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.care-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.care-member { display: grid; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); align-content: start; }
.care-member strong { font-size: var(--text-lg); }
.visit-form { border-block-start: 1px solid var(--rule); padding-block-start: var(--space-3); }
.visit-form summary { cursor: pointer; font-weight: 600; min-block-size: 44px; display: flex; align-items: center; color: var(--link, var(--accent)); }
.visit-form form { margin-block-start: var(--space-3); }
.visit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.visit-fields label { display: grid; gap: var(--space-1); }
.visit-fields select, .visit-fields input { min-block-size: 44px; }
.story { list-style: none; margin: 0; padding: 0; }
.story li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding-block: var(--space-2); border-block-start: 1px solid var(--rule); }
.story-what { display: grid; gap: 2px; }
@media (max-width: 480px) { .story li { grid-template-columns: 1fr; gap: 0; } }
.person-forget { margin: 0; }
.person-forget a { color: var(--danger); font-weight: 600; }
.care-list { list-style: none; margin: 0; padding: 0; }
.care-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-block-size: 48px; border-block-start: 1px solid var(--rule); }
.care-list form { margin: 0; }
.care-add { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--rule); }
.forget-card { display: grid; gap: var(--space-3); max-inline-size: 600px; border: 1.5px solid var(--danger); }
.forget-card form { margin-block-start: var(--space-2); }
.forget-card h1 { margin: 0; font-size: var(--text-xl); }
.forget-card p { margin: 0; }

/* Ask for a current email (build step 4.5). */
.ask h2 { margin: 0; font-size: var(--text-lg); }
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask-item { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.ask-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--space-3); }
.ask-name { font-weight: 700; font-size: var(--text-lg); color: var(--text); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
a.ask-name:hover { text-decoration: underline; }
.ask-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.ask-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; flex: 1 1 320px; }
.ask-form input { flex: 1 1 220px; min-inline-size: 0; min-block-size: 44px; }
.ask-form .join-suggest { flex-basis: 100%; }
.ask-none { margin: 0; }
.ask .ask-actions form .btn { margin: 0; }
.home-ask ul { list-style: none; margin: 0; padding: 0; }
.home-ask li { display: grid; gap: 2px; padding-block: var(--space-2); border-block-start: 1px solid var(--rule); }
.home-ask .see-all { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.stat a { color: inherit; text-decoration: none; }
/* A total that opens what it counts looks like a link (step 4.6): its words
   in the link colour with an arrow, and an outline under the pointer. */
.stat-link { display: block; min-block-size: 44px; text-decoration: none; color: inherit; border-radius: var(--radius); }
.stat-link .stat { block-size: 100%; box-sizing: border-box; }
.stat-link:hover .stat, .stat-link:focus-visible .stat { outline: 2px solid var(--accent); outline-offset: -2px; }
.stat .stat-go { color: var(--link); font-weight: 600; }
.stat-go::after { content: " \203A"; }
[dir="rtl"] .stat-go::after { content: " \2039"; }
.stat-link:hover .stat-go { text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------------------------------------------------------------------------
 * Everyone on your list (step 4.6): filters, the box and sort, a table on a
 * computer that becomes cards on a phone, and the pages.
 * ------------------------------------------------------------------------- */
.everyone h2 { margin: 0; font-size: var(--text-lg); }
.everyone .card > p { margin: 0; }
.all-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.all-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height-sm); padding-inline: var(--space-4);
    border-radius: 999px; border: 1.5px solid var(--field-border); color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.all-chip:hover { background: var(--surface-2); }
.all-chip-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.all-chip[aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 700; }
.all-chip[aria-current] .all-chip-n { color: inherit; font-weight: 500; }
.all-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.all-search { flex: 1 1 260px; }
.all-sort { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.all-sort select { inline-size: auto; min-block-size: 48px; }
.all-list > p { margin: 0 0 var(--space-3); }
.all-table { inline-size: 100%; border-collapse: collapse; }
.all-table th { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-align: start; white-space: nowrap; }
.all-table td { padding: var(--space-3); border-block-start: 1px solid var(--rule); vertical-align: top; }
.all-table td:not(.all-who) { padding-block-start: calc(var(--space-3) + 10px); }
.all-who-box { display: grid; gap: 2px; }
.all-name { font-weight: 700; color: var(--text); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; justify-self: start; }
.all-name:hover { text-decoration: underline; }
.all-contact, .all-care { overflow-wrap: anywhere; }
.all-status { white-space: nowrap; }
.all-ask { display: flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.all-last, .all-due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.all-pages { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between;
    padding-block-start: var(--space-4); border-block-start: 1px solid var(--rule); }
.all-pager { display: flex; gap: var(--space-2); }
.all-more { display: none; }
.all-download[hidden], .all-tools [hidden] { display: none; }
.all-empty { padding-block: var(--space-4); }
.all-empty p { margin: 0; }
.all-empty-link { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
@media (min-width: 768px) {
    .all-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 767.98px) {
    .all-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); scrollbar-width: none; }
    .all-sort { flex: 1 1 100%; }
    .all-sort select { flex: 1; }
    .all-table, .all-table tbody { display: block; }
    .all-table thead { display: none; }
    .all-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
    .all-table td, .all-table td:not(.all-who) { display: block; padding: 0; border: 0; }
    .all-table td.all-who { grid-column: 1; grid-row: 1; }
    .all-table td.all-status { grid-column: 2; grid-row: 1; display: grid; justify-items: end; align-content: start; padding-block-start: 10px; }
    /* On a phone the care line already says when each one is due; the last visit is enough beside it. */
    .all-last { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); }
    .all-last:empty, .all-table td.all-due, .all-table td.all-joined { display: none; }
    .all-pager { display: none; }
    .all-more { display: inline-flex; inline-size: 100%; justify-content: center; }
    .all-pages:not(:has(.all-more)) .all-pager { display: flex; }
}

/* ---------------------------------------------------------------------------
 * At a glance, the top of Home (step 5.1): is this week handled, then
 * Regulars, Readers and Away. On a phone the three stack, without names.
 * ------------------------------------------------------------------------- */
.handled { border-block-start: 4px solid var(--accent); }
.handled.handled-needs { border-block-start-color: var(--warning); }
.handled h2 { margin: 0; font-size: var(--text-xl); }
.handled > p { margin: var(--space-1) 0 var(--space-3); }
.handled-lines { list-style: none; margin: 0; padding: 0; }
.handled-lines li { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.handled-lines li > span:not(.handled-mark) { flex: 1; min-inline-size: 0; }
.handled-mark { display: inline-flex; flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; }
.handled-ok { background: var(--accent-soft); color: var(--accent-soft-text); }
.handled-do { background: var(--warning-bg); color: var(--warning); }
.handled-calls { background: var(--surface-2); color: var(--link); }
.handled-calls svg { inline-size: 14px; block-size: 14px; }
.handled-title { display: block; font-weight: 600; }
.handled-go { display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -10px; font-weight: 600; white-space: nowrap; }
.handled-go::after, .glance-all::after, .glance-everyone::after { content: "\00a0\203A"; }
[dir="rtl"] .handled-go::after, [dir="rtl"] .glance-all::after, [dir="rtl"] .glance-everyone::after { content: "\00a0\2039"; }
.glance-people h2 { margin: 0; font-size: var(--text-lg); }
.glance-everyone { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.glance-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-block: var(--space-3); }
.glance-stage { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.glance-stage p { margin: 0; }
.glance-stage-head { display: grid; gap: 2px; min-block-size: 44px; color: var(--text); text-decoration: none; }
.glance-stage-head:hover .glance-stage-name { text-decoration: underline; }
.glance-stage-name { font-weight: 700; }
.glance-regulars .glance-stage-name { color: var(--success); }
.glance-readers .glance-stage-name { color: var(--info); }
.glance-away .glance-stage-name { color: var(--text-muted); }
.glance-count { font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.glance-who { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.glance-who li { display: grid; gap: 2px; padding-block: var(--space-2); border-block-start: 1px solid var(--rule); }
.glance-name { font-weight: 600; color: var(--text); text-decoration: none; }
.glance-name:hover { text-decoration: underline; }
.glance-all { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.glance-not { margin: 0; }
@media (max-width: 600px) {
    .glance-stages { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block: var(--space-2); }
    .glance-stage { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-3) 0; border-radius: 0; background: none; border-block-start: 1px solid var(--rule); }
    .glance-stage-head { display: contents; }
    .glance-stage-name { grid-column: 1; grid-row: 1; }
    .glance-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; }
    .glance-stage p { grid-column: 1; grid-row: 2; }
    .glance-who { display: none; }
    .glance-all { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
 * Your next four weeks, and the preview for anyone (step 5.2). The preview
 * no longer sticks: with See it as, the switches and the test it's taller
 * than a screen.
 * ------------------------------------------------------------------------- */
.weeks h2 { margin: 0; font-size: var(--text-lg); }
.weeks > .hint { margin: 0; }
.weeks-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.weeks-done form { margin: 0; }
.weeks-list { list-style: none; margin: 0; padding: 0; }
.week-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: start;
    padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.week-row.is-skipped .week-what > strong { color: var(--text-muted); }
.week-date { display: grid; line-height: 1.25; }
.week-date strong { font-size: var(--text-lg); }
.week-what { display: grid; gap: var(--space-1); min-inline-size: 0; }
.week-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.week-actions form { margin: 0; }
.card .week-actions form > .btn, .card .weeks-done form > .btn, .card .test-form > .btn { margin-block-start: 0; }
@media (max-width: 640px) {
    .week-row { grid-template-columns: minmax(0, 1fr); }
    .week-date { grid-auto-flow: column; justify-content: start; gap: var(--space-2); align-items: baseline; }
    .week-actions { justify-content: flex-start; }
}
.seeas { display: grid; gap: var(--space-2); margin: 0; }
.seeas .hint { margin: 0; }
.seeas-chosen { margin: 0; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.seeas-chosen a { display: inline-flex; align-items: center; min-block-size: 44px; }
.seeas-results { list-style: none; margin: 0; padding: 0; }
.seeas-results li { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); align-items: baseline; border-block-start: 1px solid var(--rule); }
.seeas-results a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.preview-switches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.headsup { margin: 0; }
.headsup a { font-weight: 600; }
.mail-frame-phone { max-inline-size: 390px; margin-inline: auto; }
.test-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.swap-list { list-style: none; margin: 0; padding: 0; }
.swap-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.swap-list form { margin: 0; }
.swap-what { display: grid; gap: var(--space-1); }
.swap-what strong { font-size: var(--text-lg); }
.card .swap-list form > .btn { margin-block-start: 0; }

/* =========================================================================
   Paste your website (step 6.1): Rebound's own public pages, the email
   beside what we found, one card a part
   ========================================================================= */

.layout-start { min-block-size: 100vh; background: var(--bg); }
.start-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) var(--space-5); }
.start-top a:not(.wordmark) { font-weight: 600; }
.start-main { padding: var(--space-4) var(--space-4) var(--space-8); max-inline-size: 1180px; margin-inline: auto; }
.start-narrow { max-inline-size: 460px; margin-inline: auto; }
.start-link { font-weight: 600; justify-self: start; }

.start-hero { display: grid; justify-items: center; gap: var(--space-5); max-inline-size: 640px;
    margin: var(--space-7) auto var(--space-7); text-align: center; }
.start-hero h1 { font-size: clamp(var(--text-2xl), 6vw, 46px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.start-hero .lede { font-size: var(--text-lg); margin: 0; }
.start-hero .notice { margin: 0; text-align: start; }
.start-paste { display: grid; gap: var(--space-2); inline-size: 100%; text-align: start; }
.start-paste-row { display: flex; gap: var(--space-3); }
.start-paste-row input { flex: 1; min-inline-size: 0; }
.start-paste-row .btn { white-space: nowrap; }
@media (max-width: 560px) { .start-paste-row { flex-direction: column; } }
.start-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-inline-size: 980px; }
.start-steps li { display: grid; gap: var(--space-1); align-content: start; }
.start-step-n { font-size: var(--text-xs); font-weight: 700; color: var(--link); }
.start-trust { max-inline-size: 620px; margin: var(--space-6) auto 0; text-align: center; }

/* Reading: each part ticks as it's found. */
.start-ticks { list-style: none; margin: 0; display: grid; gap: var(--space-4); }
.start-ticks li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); color: var(--text-hint); }
.start-ticks li.is-done { color: var(--text); }
.start-tick { inline-size: 22px; block-size: 22px; flex: none; border-radius: 50%; border: 2px solid var(--rule); box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; }
.is-done > .start-tick, .start-on > .start-tick, .start-right > .start-tick { background: var(--accent); border-color: var(--accent); }
.is-done > .start-tick::after, .start-on > .start-tick::after, .start-right > .start-tick::after {
    content: ""; inline-size: 6px; block-size: 11px; border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg); }
.start-ticks li.is-busy > .start-tick { border-top-color: var(--accent); animation: start-spin 0.9s linear infinite; }
@keyframes start-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .start-ticks li.is-busy > .start-tick { animation: none; } }
.start-bar { block-size: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.start-bar span { display: block; block-size: 100%; inline-size: 4%; background: var(--accent); transition: inline-size var(--gentle) var(--ease); }

/* Their email, beside what we found. */
.start-head { max-inline-size: 760px; }
.start-split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) {
    .start-split { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
    .start-preview { position: sticky; inset-block-start: var(--space-4); }
}
.start-preview { display: grid; gap: var(--space-3); min-inline-size: 0; }
.start-frame { inline-size: 100%; max-inline-size: 420px; block-size: 760px; border: 0; border-radius: var(--radius);
    background: #F4F6F5; box-shadow: var(--shadow); }
.start-frame.is-computer { max-inline-size: none; }
.start-parts { min-inline-size: 0; }
.start-parts h2 { font-size: var(--text-lg); margin: 0; }
.start-part { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--rule); scroll-margin-block-start: var(--space-5); }
.start-part-next { border: 2px solid var(--accent); }
.start-part-out, .start-part-missing { border-style: dashed; border-color: var(--field-border); }
.start-part-next.start-part-missing { border-style: solid; border-color: var(--accent); }
.start-part-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.start-part-head h3 { font-size: var(--text-md); margin: 0; }
.start-needed { font-size: var(--text-xs); font-weight: 500; color: var(--text-hint); margin-inline-start: var(--space-1); }
.start-from { font-size: var(--text-xs); color: var(--text-hint); }
.start-value { display: grid; gap: var(--space-2); }
.start-name { font-size: var(--text-lg); }
.start-logo { max-inline-size: 200px; max-block-size: 80px; inline-size: auto; block-size: auto; justify-self: start;
    background: #FFFFFF; padding: var(--space-2); border-radius: var(--radius-sm); }
.start-band { display: inline-block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--band); color: var(--band-text, #FFFFFF); font-weight: 700; font-size: var(--text-md); }
.start-swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.start-swatch { display: inline-grid; gap: var(--space-1); justify-items: center; }
.swatch-pick { inline-size: 44px; block-size: 44px; border-radius: 10px; background: var(--swatch); }
.swatch-sm { inline-size: 20px; block-size: 20px; border-radius: 5px; }
.start-swatch-on .swatch-pick { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.start-swatch-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.start-swatch-quick .btn { gap: var(--space-2); }
.start-swatch-pick { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height-sm); cursor: pointer; }
.start-swatch-pick input { position: absolute; opacity: 0; }
.start-swatch-pick input:checked + .swatch-pick { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.start-swatch-pick input:checked + .text-sm { font-weight: 700; }
.start-swatch-pick input:focus-visible + * { outline: 3px solid var(--focus); outline-offset: 3px; }
.start-swatches input[type="color"] { inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: none; }
.text-xs { font-size: var(--text-xs); }
.start-offer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.start-offer li { display: flex; gap: var(--space-3); align-items: center; }
.start-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-4); margin: 0; font-size: var(--text-sm); }
.start-hours dt { color: var(--text-muted); }
.start-hours dd { margin: 0; }
.start-url { overflow-wrap: anywhere; }
.start-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.start-actions form { margin: 0; }
.start-right { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); font-weight: 600; font-size: var(--text-sm); }
.start-change { font-weight: 600; font-size: var(--text-sm); display: inline-flex; align-items: center; min-block-size: var(--control-height-sm); }
.start-checks { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.start-logos { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.start-logo-pick { display: flex; align-items: center; justify-content: center; min-block-size: 76px; padding: var(--space-2);
    border-radius: 10px; border: 1.5px solid var(--rule); background: #FFFFFF; cursor: pointer; position: relative; }
.start-logo-pick input { position: absolute; opacity: 0; }
.start-logo-pick:has(input:checked) { border: 2.5px solid var(--accent); }
.start-logo-pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.start-logo-pick img { max-inline-size: 100%; max-block-size: 60px; inline-size: auto; block-size: auto; }
.start-logo-none { background: var(--surface); }
.start-logo-none .start-band { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.start-upload input[type="file"] { min-block-size: var(--control-height-sm); }
.start-city { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) 90px 120px; }
.start-city .field + .field { margin-block-start: 0; }
@media (max-width: 480px) { .start-city { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .start-city .field:first-child { grid-column: 1 / -1; } }
.start-save { padding-block-start: var(--space-2); scroll-margin-block-start: var(--space-5); }
.start-save p { text-align: center; margin: 0; }
.start-disabled { opacity: 0.45; cursor: not-allowed; }
.start-promise { align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    border: 1.5px solid var(--field-border); background: var(--surface); }
.start-promise.has-error { border-color: var(--danger); }
.start-promise input { margin-block-start: 2px; }
.start-pending { border: 2px solid var(--accent); }
.start-frame-wrap { position: relative; }
.start-frame-wrap.is-short { max-block-size: 520px; overflow: hidden; }
.start-frame-wrap.is-short::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 90px;
    background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.start-whole { justify-self: center; }

/* =========================================================================
   Choose your plan, and back from Stripe (step 6.2)
   ========================================================================= */

.plan legend h2 { font-size: var(--text-lg); margin: 0; }
.plan-sizes { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-block-start: var(--space-3); }
.plan-sizes .choice-card:has(input:checked) { background: var(--accent-soft); }
.plan-save { color: var(--success); font-weight: 600; }
.plan-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); scroll-margin-block-start: var(--space-5); }
.plan-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--rule); }
.plan-card h2 { font-size: var(--text-lg); margin: 0; }
.plan-card p { margin: 0; }
.plan-card .badge { justify-self: start; }
.plan-card .btn { margin-block-start: var(--space-2); }
.plan-fits { border: 2px solid var(--accent); }
.plan-price strong { font-size: 34px; line-height: 1; }
.plan-people { font-weight: 600; }
.plan-more { display: none; text-align: center; margin: 0; font-weight: 600; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.plan-list li { display: flex; align-items: center; gap: var(--space-3); }
.plan-list .start-tick, .welcome-ok { background: var(--accent); border-color: var(--accent); }
.plan-list .start-tick::after, .welcome-ok::after { content: ""; inline-size: 6px; block-size: 11px; border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg); }
.plan-promises { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan-promises p { display: grid; gap: 2px; margin: 0; }
/* On a phone: the plan that fits, and the others one tap away. */
@media (max-width: 640px) {
    .plan-other { display: none; }
    .plan-more { display: block; }
    .plan-cards:target .plan-other { display: grid; }
    .plan-cards:target + .plan-more { display: none; }
}

.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.welcome-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.welcome-steps li > span:last-child { display: grid; gap: 2px; }
.welcome-icon { inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; border: 2px solid var(--rule); box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; }
.welcome-wait { border-width: 2.5px; border-top-color: var(--accent); animation: start-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .welcome-wait { animation: none; } }

/* =========================================================================
   Plan and billing, pause, leave, Download everything (step 6.3)
   ========================================================================= */

.bill-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-2); }
.bill-head h2 { margin: 0; font-size: var(--text-lg); }
.bill-rows { display: grid; }
.bill-row { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--space-3); align-items: baseline;
    padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.bill-row > .label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; margin: 0; }
.bill-row > a, .bill-row > form > .btn-link, .bill-row > details > summary { font-weight: 600; }
.bill-row details { justify-self: end; }
.bill-row details[open] { grid-column: 1 / -1; justify-self: stretch; }
.bill-row details > summary { cursor: pointer; color: var(--link); list-style: none; }
.bill-row details > summary::-webkit-details-marker { display: none; }
.bill-row details[open] > summary { display: none; }
.bill-email-form .cluster input { flex: 1 1 220px; min-inline-size: 0; }
.bill-leave-link { font-weight: 600; }
.btn-link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { text-decoration-thickness: 2px; }
.bill-meter { display: grid; gap: 6px; }
.bill-meter-bar { block-size: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.bill-meter-fill { block-size: 8px; border-radius: var(--radius-pill); background: var(--accent); }
.bill-meter-warn .bill-meter-fill { background: var(--warning); }
.bill-note { border-inline-start: 4px solid var(--info); }
.bill-over { border-inline-start: 4px solid var(--warning); }
.bill-over .btn, .bill-note a { justify-self: start; }
.bill-center { justify-self: center; text-align: center; }
.bill-card-hero { border: 2px solid var(--accent); }
.bill-card-hero h2 { font-size: var(--text-lg); margin: 0; }
.bill-card-hero .badge, .bill-card-hero .btn { justify-self: start; }
.bill-ticks { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; display: grid; gap: var(--space-2); }
.bill-ticks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.bill-tick { display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 800; flex: none; margin-block-start: 2px; }
.bill-pause-dates { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); }
.bill-pause legend h2 { margin: 0; }
.bill-pause-dates .choice-card:has(input:checked) { background: var(--accent-soft); }
.bill-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.bill-plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bill-plans .plan-card .btn[disabled] { opacity: 0.5; }
.bill-plans .plan-card form { display: grid; }
.bill-files { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; }
.bill-files li { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.bill-files code { font-size: 14px; }
@media (max-width: 640px) {
    .bill-row { grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); }
    .bill-row > .label { grid-column: 1 / -1; }
    .bill-files li { grid-template-columns: 1fr; gap: 2px; }
}
.bill-h, .card > h2.bill-h { font-size: var(--text-lg); margin: 0; }
.bill-strong { font-weight: 600; }
.bill-ticks + .bill-strong { display: inline-block; margin-block-start: var(--space-3); }

/* =========================================================================
   Give a month, get a month (step 6.4)
   ========================================================================= */

.give-link { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; overflow-wrap: anywhere; user-select: all; }
.give-partner { border-inline-start: 4px solid var(--accent); }
.give-list { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; }
.give-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.give-list li .badge { justify-self: end; align-self: start; }
.give-list li > .text-sm { grid-column: 1 / -1; }
.give-steps { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.give-steps li { display: grid; gap: var(--space-1); align-content: start; }
.give-step-n { font-size: var(--text-xs); font-weight: 700; color: var(--accent); }
.give-invited { display: flex; gap: var(--space-3); align-items: center; max-inline-size: 640px; margin: 0 auto var(--space-5); padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-soft-text); }
.give-invited > span:last-child { display: grid; gap: 2px; }
.give-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%; flex: none;
    background: var(--accent); color: var(--on-accent); font-weight: 800; }
.give-news { border-inline-start: 4px solid var(--success); }
.give-news a { justify-self: start; }

/* =========================================================================
   Approve each week, or don't (step 5.11)
   ========================================================================= */

.next-card.is-waiting { border-color: var(--warning); }
.next-card.is-approved { border-color: var(--accent); }
.next-card .notice { margin: 0; }
.approve-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.approve-actions form { margin: 0; }
.approve-card { display: grid; gap: var(--space-4); }
.approve-card .notice { margin: 0; }
.approve-choices { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.approve-choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    border: 2px solid var(--rule); background: var(--surface); cursor: pointer; }
.approve-choice input { margin-block-start: 3px; inline-size: 20px; block-size: 20px; accent-color: var(--accent); flex: none; }
.approve-choice > span { display: grid; gap: 2px; }
.approve-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.approve-choices:disabled .approve-choice { cursor: default; }
.approve-more { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.approve-more p { display: grid; gap: 2px; margin: 0; }
.approve-card:has(input[value="0"]:checked) .approve-more { display: none; }
.approve-card > .btn { justify-self: start; }
.handled-info { background: var(--surface-2); color: var(--text-muted); font-weight: 700; }

/* The ask's link: one week, no sign-in. */
.layout-card > .card:has(.approve-page) { max-inline-size: 560px; }
.approve-page h1 { margin: 0; }
.approve-page > p { margin: 0; }
.approve-groups { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.approve-chip { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--space-4); border-radius: 999px; background: var(--surface-2);
    color: var(--text); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.approve-chip[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.approve-frame { block-size: 760px; }
.layout-card .card form.approve-go { margin-block-start: var(--space-2); }
.layout-card .card form.approve-go .btn { margin-block-start: 0; }
.approve-links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
/* A line whose link is long: on a phone the link goes under the words. */
@media (max-width: 640px) {
    .handled-lines li.handled-stack { flex-wrap: wrap; }
    .handled-lines li.handled-stack > span:not(.handled-mark) { flex-basis: calc(100% - 24px - var(--space-3)); }
    .handled-lines li.handled-stack > .handled-go { margin-inline-start: calc(24px + var(--space-3)); margin-block: 0 -10px; }
}
.approve-page.stack-sm > * + * { margin-block-start: var(--space-3); }

/* =========================================================================
   Your own emails (step 2.7), and one preview everywhere (step 2.8)
   ========================================================================= */

.own-start { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.own-start h2 { margin: 0; font-size: var(--text-lg); }
.own-start .hint { margin: var(--space-1) 0 0; }
.own-list { list-style: none; margin: 0; padding: 0; }
.own-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start;
    padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.own-row .badge { white-space: nowrap; }
.own-what { display: grid; gap: var(--space-1); min-inline-size: 0; }
.own-what > a { color: var(--text); text-decoration: none; }
.own-approve { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-2) 0 0; }
@media (max-width: 640px) { .own-row { grid-template-columns: 1fr; } .own-row .badge { justify-self: start; white-space: normal; } }

.own-kinds { display: grid; gap: var(--space-4); }
.own-kinds h2 { margin: 0; font-size: var(--text-lg); }
.own-kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin: 0; }
.own-kind { display: grid; gap: var(--space-2); justify-items: start; text-align: start; padding: var(--space-4); border-radius: var(--radius-lg);
    border: 2px solid var(--rule); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-block-size: 44px; }
.own-kind:hover, .own-kind:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.own-kind-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-soft-text); }
.own-kind-mark .icon { inline-size: 22px; block-size: 22px; }

.own-state { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.own-state > span { flex: 1 1 280px; }
.own-state form { margin: 0; }
.own-fields { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.own-count { font-size: var(--text-lg); }
.own-group { display: grid; gap: var(--space-2); }
.own-group-label { font-weight: 600; font-size: var(--text-sm); }
.own-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.own-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: 0 var(--space-4); border-radius: 999px;
    border: 2px solid var(--rule); background: var(--surface); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.own-chip input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--accent); }
.own-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.own-chip:has(input:disabled) { opacity: 0.5; cursor: default; }
.own-everyone { display: flex; gap: var(--space-2); align-items: center; min-block-size: 44px; font-weight: 600; }
.own-everyone input { inline-size: 20px; block-size: 20px; accent-color: var(--accent); }
.own-link { display: none; margin-block-start: var(--space-3); }
.own-button:has(input[value="link"]:checked) .own-link { display: grid; }
.own-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.own-pick { margin-block-start: var(--space-2); }
.voice-card:has(input[name="when"][value="suggest"]:checked) .own-pick { display: none; }
.own-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: var(--space-2); }

.preview-groups { margin-block: var(--space-1) 0; }
.often-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-block-size: 44px; }
.often-card summary h2 { margin: 0; font-size: var(--text-lg); }
.often-card summary::after { content: "\203A"; margin-inline-start: auto; font-size: 22px; color: var(--text-muted); transition: transform 0.15s; }
.often-card[open] summary::after { transform: rotate(90deg); }
.often-card[open] > * + * { margin-block-start: var(--space-3); }
.yours { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 0; }
.yours-chip { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--space-3); border-radius: 999px;
    background: var(--warning-bg); color: var(--warning); font-weight: 700; font-size: var(--text-sm); text-decoration: none; }
.yours-chip::before { content: "\270E\00a0"; }
.own-jump { display: none; margin: 0 0 var(--space-3); }
@media (max-width: 767.98px) { .own-jump { display: block; } }

/* Visits, on their own (step 4.7) */
.connect-status { border: 2px solid var(--accent); }
.connect-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.connect-steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: start; }
.connect-steps li > span:last-child { display: grid; gap: 2px; }
.connect-n { display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 800; }
.connect-key { user-select: all; letter-spacing: 0.02em; }
.connect-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); inline-size: 100%; margin: 0; }
.connect-name select { flex: 0 1 220px; min-block-size: 44px; }
.connect-arrived { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.connect-arrived li { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-3); align-items: start; padding-block: var(--space-3);
    border-block-start: 1px solid var(--rule); }
.connect-what { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
  .connect-arrived li { grid-template-columns: 1fr auto; }
  .connect-arrived li > span:first-child { grid-column: 1 / -1; }
}
.connect-name-label .hint { font-weight: 400; }
.connect-name-label { flex: 1 1 240px; min-inline-size: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
/* A health business (step 8.9b): its software on the left, its direct address and report on the right. */
.connect-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-5); align-items: start; }
.connect-health details > summary { cursor: pointer; font-weight: 600; min-block-size: 44px; display: flex; align-items: center; }
.connect-guides { list-style: none; margin: 0; padding: 0; }
.connect-guides li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-block-size: 44px; border-block-end: 1px solid var(--rule); }

/* Your email's inbox check (step 7.2) */
.inbox-checks { list-style: none; margin: 0; padding: 0; }
.inbox-checks li { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-block-start: 1px solid var(--rule); }
.inbox-checks li > * { margin: 0; }
.inbox-record { margin: 0; font-family: var(--font-mono); }
.inbox-home { border: 2px solid var(--warning); }

/* Weekly emails, side by side (step 8.6) */
.weeks-read td { vertical-align: top; }
.weeks-read .nowrap { white-space: nowrap; }
.weeks-read .title { font-weight: 600; }
.weeks-read .flags { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); justify-items: start; }
.weeks-read .flags .badge { white-space: normal; text-align: start; }
.note-card blockquote { margin: 0; padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--rule); color: var(--text-muted); }
.brief-aha { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); }
.learned { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); }
.brief-learn { margin: 0; padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--accent); background: var(--surface-2); border-radius: var(--radius-sm); }
.side-bar { margin-block: var(--space-4); }
.side-bar a { margin-inline-start: auto; font-weight: 600; }
.picture-preview { display: grid; gap: var(--space-2); justify-items: start; }
.picture-preview img { inline-size: 324px; max-inline-size: 100%; block-size: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }