:root {
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --border: #e5e7eb;
    --text: #1f2937;
    --muted: #646b78; /* 4.5:1 on --surface-2 */
    --accent: #4f46e5;
    --accent-text: #ffffff;
    --danger: #c81e1e; /* 4.5:1 on --surface-2 */


    --ok: #16a34a; --ok-fg: #ffffff;
    --maybe: #facc15; --maybe-fg: #422006;
    color-scheme: light;
}

/* Dark: html.dark, set by theme.js from the device setting or the system */
:root.dark {
    color-scheme: dark;
    --bg: #030712;
    --surface: #111827;
    --surface-2: #1f2937;
    --border: #374151;
    --text: #f3f4f6;
    --muted: #9ca3af;
    --accent: #818cf8;
    --accent-text: #030712;
    --danger: #f87171;


    --ok: #22c55e; --ok-fg: #030712;
    --maybe: #facc15; --maybe-fg: #030712;
}

/* Answer option colors: each .c-<color> sets --o-bg/--o-fg/--o-bd (cell)
   and --o-dot (swatch); used by cells, menu entries and the editor */
.c-green  { --o-bg: #dcfce7; --o-fg: #166534; --o-bd: #bbf7d0; --o-dot: #22c55e; }
.c-blue   { --o-bg: #dbeafe; --o-fg: #1e40af; --o-bd: #bfdbfe; --o-dot: #3b82f6; }
.c-yellow { --o-bg: #fef9c3; --o-fg: #854d0e; --o-bd: #fef08a; --o-dot: #eab308; }
.c-red    { --o-bg: #fee2e2; --o-fg: #991b1b; --o-bd: #fecaca; --o-dot: #ef4444; }
.c-purple { --o-bg: #f3e8ff; --o-fg: #6b21a8; --o-bd: #e9d5ff; --o-dot: #a855f7; }
.c-orange { --o-bg: #ffedd5; --o-fg: #9a3412; --o-bd: #fed7aa; --o-dot: #f97316; }
.c-teal   { --o-bg: #ccfbf1; --o-fg: #115e59; --o-bd: #99f6e4; --o-dot: #14b8a6; }
.c-gray   { --o-bg: #e5e7eb; --o-fg: #374151; --o-bd: #d1d5db; --o-dot: #6b7280; }
.dark .c-green  { --o-bg: #14532d66; --o-fg: #86efac; --o-bd: #166534; }
.dark .c-blue   { --o-bg: #1e3a8a66; --o-fg: #93c5fd; --o-bd: #1e40af; }
.dark .c-yellow { --o-bg: #713f1266; --o-fg: #fde047; --o-bd: #854d0e; }
.dark .c-red    { --o-bg: #7f1d1d66; --o-fg: #fca5a5; --o-bd: #991b1b; }
.dark .c-purple { --o-bg: #581c8766; --o-fg: #d8b4fe; --o-bd: #6b21a8; }
.dark .c-orange { --o-bg: #7c2d1266; --o-fg: #fdba74; --o-bd: #9a3412; }
.dark .c-teal   { --o-bg: #134e4a66; --o-fg: #5eead4; --o-bd: #115e59; }
.dark .c-gray   { --o-bg: #37415166; --o-fg: #d1d5db; --o-bd: #4b5563; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

#app {
    max-width: 42rem;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--surface);
    box-shadow: 0 0 24px #0000001a;
    position: relative;
}
/* The planner gets wider on large screens: more date columns (up to 7) */
#app:has(> #planner:not([hidden])) { max-width: 60rem; }

h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0; }
code { font-size: .9em; }

button, input, select { font: inherit; color: inherit; }
button {
    cursor: pointer;
    border: 0;
    border-radius: .375rem;
    padding: .5rem 1rem;
    background: var(--surface-2);
}
button:hover { filter: brightness(.96); }
button.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: .35; pointer-events: none; }

.icon-btn {
    width: 2.25rem; height: 2.25rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 999px;
    font-size: 1.25rem; color: var(--muted); text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--accent); }
.dashed {
    width: 100%; height: 2.5rem; margin-top: .5rem;
    background: transparent; color: var(--muted);
    border: 2px dashed var(--border);
}
.dashed:hover { color: var(--text); border-color: var(--muted); }

input, select {
    display: block; width: 100%; margin-top: .25rem;
    padding: .5rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .375rem;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .75rem; }
label.check { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; cursor: pointer; }
label.check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
input[type=number] { margin-bottom: .75rem; }

/* Weekday filter: checkboxes as toggle chips */
fieldset.weekdays { border: 0; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
fieldset.weekdays legend { font-size: .875rem; font-weight: 500; padding: 0; margin-bottom: .375rem; }
label.day { margin: 0; cursor: pointer; }
label.day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.day span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 .375rem;
    border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted); font-weight: 600; font-size: .85rem;
}
label.day input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
label.day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.range input { min-width: 0; }
.range label { margin-bottom: 0; }
.settings-fields .hint { margin: .375rem 0 .75rem; }
input:disabled { opacity: .5; }

.bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.bar h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page { padding: 1rem; }
.card { border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }
.text-btn { background: transparent; color: var(--accent); padding: .25rem .5rem; font-size: .875rem; font-weight: 600; }
.text-btn:hover { filter: none; text-decoration: underline; }
.start-actions { display: flex; gap: .5rem; }
.start-actions button { flex: 1; }
.legal { margin: 1.5rem 0 0; text-align: center; font-size: .8rem; }
.legal a { color: var(--muted); }
.legal-page h2 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.legal-page p { margin: 0 0 .5rem; }
#recent-empty { margin: 0; }
.about { padding-left: 1.1rem; margin: 0; font-size: .925rem; }
.about li { margin-bottom: .5rem; }
.language select { width: auto; }
.hint { font-size: .8rem; color: var(--muted); }
.center { text-align: center; }
.error { color: var(--danger); font-size: .875rem; }

.chip, .badge {
    font-size: .75rem; font-weight: 600;
    padding: .125rem .5rem; border-radius: 999px; white-space: nowrap;
    background: var(--surface-2); color: var(--muted);
}
.badge.warn { background: #fef3c7; color: #92400e; }
.role-btn { border: 0; cursor: pointer; padding: .25rem .625rem; }
.role-btn:hover { color: var(--accent); filter: none; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }

#recent-list { list-style: none; margin: 0; padding: 0; }
#recent-list li { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--border); }
#recent-list a { flex: 1; padding: .6rem 0; color: var(--text); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#recent-list a:hover { color: var(--accent); }

/* --- Grid --- */
#grid-wrap { padding: 0 .5rem .5rem; } /* top spacing: inside the date row, so it sticks at once */
.grid {
    touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
    /* Name block width and offset, set from JS (updateNameBlock) */
    --name-block: 100px;
    --name-offset: 0px;
}
.row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 4px;
    align-items: center;
    margin-bottom: 4px;
}
/* Rows off screen skip layout and painting (long lists). That also clips
   painting to the row, so the 4px between rows is padding here (room for
   the focus ring) instead of margin. */
#rows > .row { content-visibility: auto; contain-intrinsic-size: auto 52px; margin-bottom: 0; padding: 2px 0; }
#rows .cell:focus-visible, #rows .name:focus-visible { outline-offset: 0; }
.row.head { margin: -1px 0 0; padding: calc(.5rem + 1px) 0 .5rem; align-items: stretch; } /* 1px under the bar, see placeSticky */

/* While scrolling, the title bar and the date row stay at the top; the date
   row below the bar (--bar-h, set by app.js). On short screens (phones held
   sideways) only the date row. Opaque, so rows scroll underneath. */
#planner > .bar { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.row.head { position: sticky; top: var(--bar-h, 0px); z-index: 4; background: var(--surface); }
#date-nav { z-index: 5; }
@media (max-height: 500px) {
    #planner > .bar { position: relative; } /* not sticky, but still above the date row's 1px tuck */
}

/* Date columns: --cols visible, --before off-screen to the left (set in
   render), shifted by --drag during a swipe. The 3px clip margin keeps
   focus rings visible without revealing neighbours (gap is 4px). */
.strip { overflow: clip; overflow-clip-margin: 3px; min-width: 0; }
.row.head .strip { position: relative; }
/* Fixed over the ends of the sliding date header; the dates are centered
   in their columns, so the chevrons fit beside them */
#grid-wrap { position: relative; }
#date-nav { position: sticky; top: var(--bar-h, 0px); height: 0; pointer-events: none; }
.date-nav-box { position: absolute; }
.nav-btn {
    position: absolute; pointer-events: auto; top: 50%; transform: translateY(-50%); z-index: 1;
    width: .75rem; height: 2rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--muted);
    font-size: 1.5rem; line-height: 1;
}
/* At the very edge (inside the strip's clip margin) */
.nav-btn.prev { left: -3px; }
.nav-btn.next { right: -3px; }
.nav-btn:hover { color: var(--accent); filter: none; }
.track {
    display: grid; grid-auto-flow: column; gap: 4px; height: 100%;
    grid-auto-columns: calc((100% - (var(--cols) - 1) * 4px) / var(--cols));
    transform: translateX(calc((100% + 4px) / var(--cols) * var(--before, 0) * -1 + var(--drag, 0px)));
}
/* Ease-out cubic, so a flick slows down naturally; duration from JS */
.grid.snapping .track { transition: transform var(--snap-ms, 250ms) cubic-bezier(.33, 1, .68, 1); }
@media (prefers-reduced-motion: reduce) {
    .grid.snapping .track { transition: none; }
}
/* Keyboard focus in the table (roving, see app.js); the strip's clip margin
   leaves room for the ring */
.grid .date:focus-visible, .grid .name:focus-visible, .grid .cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.grid :focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grid.dragging .track, .grid.snapping .track { will-change: transform; }
.grid.dragging { cursor: grabbing; }
.grid.dragging .cell.clickable:active { transform: none; }

.corner { display: flex; align-items: center; justify-content: center; padding-right: 8px; }
.plus-btn {
    width: 1.5rem; height: 1.5rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 999px;
    background: transparent; color: var(--muted);
    font-size: 1.1rem; line-height: 1;
}
.plus-btn:hover { background: var(--surface-2); color: var(--accent); filter: none; }

/* Month/year boundary: straight 2px line on the left (no rounded corners,
   which would bend it into a bracket) */
.date {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .25rem 0;
    font-weight: 600; color: var(--muted); font-size: .9rem;
    border-left: 2px solid transparent;
}
.date.month { border-left-color: #9ca3af; }
.date.year { border-left-color: #111827; }
.dark .date.month { border-left-color: #6b7280; }
.dark .date.year { border-left-color: #f3f4f6; }
.date .lock { width: .7em; height: .7em; margin-right: .2em; opacity: .8; }
.date .day { text-align: center; }
.date .day.span { font-size: .8rem; } /* a date lasting several days: "07.–08.11." */
.date .weekday { font-size: .75rem; font-weight: 500; line-height: 1; }
.date.clickable { cursor: pointer; }
.date.clickable:hover { background: var(--surface-2); }

.count { font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.count.ok { background: var(--ok); color: var(--ok-fg); }
.count.maybe { background: var(--maybe); color: var(--maybe-fg); }

.name, .name-probe { font-weight: 500; }
.name-probe { position: absolute; visibility: hidden; left: -9999px; top: 0; white-space: nowrap; }
.name {
    width: var(--name-block);
    margin-left: var(--name-offset);
    padding-right: 8px;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.name.clickable { cursor: pointer; }
.name.clickable:hover { color: var(--accent); }

.cell {
    height: 3rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: .5rem; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--muted);
    font-size: .875rem; font-weight: 700;
    transition: transform .1s;
}
.cell.clickable { cursor: pointer; }
.cell.clickable:active { transform: scale(.95); }
.cell.opt { background: var(--o-bg); color: var(--o-fg); border-color: var(--o-bd); }
/* Past and cancelled cells: background and border fade toward the page,
   the text keeps its full contrast (fading the whole cell made answers
   unreadable). Cancelled: also hatched, the answer struck through. */
.cell.past, .cell.cancelled {
    background-color: color-mix(in srgb, var(--o-bg, var(--surface-2)) 40%, var(--bg));
    border-color: color-mix(in srgb, var(--o-bd, var(--border)) 40%, var(--bg));
}
.cell.cancelled {
    text-decoration: line-through;
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 18%, transparent) 0 5px, transparent 5px 10px);
}
.date.cancelled .day { text-decoration: line-through; color: var(--danger); }
.count.off { background: var(--surface-2); color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 2rem; }

/* --- Menu, dialogs, toast --- */
.menu {
    position: fixed; z-index: 20;
    min-width: 11rem; max-width: 16rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: .5rem;
    box-shadow: 0 10px 25px #00000033;
    padding: .375rem;
}
.menu button { display: block; width: 100%; text-align: left; background: transparent; padding: .4rem .75rem; font-weight: 500; }
.menu button:hover { background: var(--surface-2); filter: none; }
.menu .split { display: flex; gap: .25rem; }
.menu .split button { flex: 1; width: auto; text-align: center; white-space: nowrap; }
.menu p { margin: .25rem .75rem .5rem; font-size: .875rem; }
.menu p.title { font-weight: 600; margin-bottom: 0; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: .25rem 0; }
.menu .danger { color: var(--danger); }
.menu p.cancel-note { color: var(--danger); font-weight: 600; margin-bottom: 0; }
.menu .opt { color: var(--o-fg); }
/* One of several choices (e.g. a row's role); the chosen one is ticked */
.menu button.choice::before { content: ''; display: inline-block; width: 1.25em; }
.menu button.choice.on { font-weight: 700; }
.menu button.choice.on::before { content: '✓'; }

dialog {
    width: min(24rem, calc(100% - 2rem));
    border: 0; border-radius: .5rem; padding: 1.5rem;
    background: var(--surface); color: var(--text);
    box-shadow: 0 20px 40px #00000040;
    max-height: calc(100dvh - 1rem); /* above the keyboard (see index.html); scrolls inside */
}
dialog.wide { width: min(28rem, calc(100% - 1rem)); padding: 1.25rem; }
/* Touch screens: dialogs with a text field open near the top, so they stay
   put when the keyboard comes up (centered, they jumped up with it) */
@media (pointer: coarse) {
    dialog:has(:is(input:not([type]), input[type=text], input[type=url], textarea):not([readonly])) {
        margin-top: 3rem; margin-bottom: auto;
        max-height: calc(100dvh - 4rem);
    }
}
dialog::backdrop { background: #1f2937bf; }
/* While a modal dialog is open, only the dialog scrolls: the page behind
   it stays put, and scrolling inside the dialog doesn't carry over to it.
   The stable gutter keeps the page from shifting when its scrollbar goes. */
html { scrollbar-gutter: stable; }
html:has(dialog:modal) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
#dialog:focus { outline: none; } /* focused itself when no field is (see ask) */
dialog h3 { margin-bottom: .75rem; }
dialog .hint { margin: .25rem 0 1rem; }
.warning { background: #fef3c7; color: #92400e; border-radius: .375rem; padding: .5rem .75rem; font-size: .875rem; margin: 0 0 .75rem; }

/* Answer options editor */
#options-dialog { width: min(28rem, calc(100% - 1rem)); padding: 1.25rem; }
.option-card { border: 1px solid var(--border); border-radius: .5rem; padding: .625rem; margin-bottom: .5rem; }
.option-row { display: flex; align-items: center; gap: .5rem; }
.option-row input { margin: 0; min-width: 0; }
.option-row input.short { flex: 0 0 4.5rem; }
.option-row input.long { flex: 1; }
.option-card .preview { flex: 0 0 3.5rem; height: 2.25rem; }
.option-row label { margin: 0; }
.option-row label { font-weight: 400; white-space: nowrap; }
.option-row label.counts { display: flex; align-items: center; gap: .375rem; }
.option-row label.counts select { margin: 0; width: auto; padding: .25rem .5rem; }
/* Counts, active, admin only, delete: wraps on narrow screens */
.option-row.settings { flex-wrap: wrap; row-gap: .25rem; }
.option-row .remove {
    margin-left: auto; flex: none;
    width: 2rem; height: 2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--danger); border-radius: 999px;
}
.option-row .remove:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); filter: none; }
.swatches { display: flex; flex-wrap: wrap; gap: .375rem; margin: .5rem 0; }
.swatch { width: 1.625rem; height: 1.625rem; padding: 0; border-radius: 999px; background: var(--o-dot); border: 2px solid transparent; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }

.actions { display: flex; flex-direction: row-reverse; gap: .5rem; margin-top: 1rem; }

/* Small round symbol button (iconButton in app.js) */
.icon-small {
    flex: none; width: 2rem; height: 2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--muted); border-radius: 999px;
}
.icon-small:hover { background: var(--surface-2); color: var(--text); filter: none; }

/* --- Add-ons --- */
.addon-list label.addon { align-items: flex-start; margin-bottom: .75rem; font-weight: 400; }
.addon-list label.addon input { margin-top: .2rem; }
.addon-list .hint { display: block; margin: .125rem 0 0; }
.editor-list .editor-row { margin-bottom: .5rem; }
.option-row select { margin: 0; width: auto; padding: .375rem .5rem; }
.season-start-row { margin-top: .5rem; }
.season-start-row > span { flex: none; color: var(--muted); }
.season-start-row select { flex: 1; min-width: 0; }
.season-start-row select[aria-label="Tag"] { flex: none; }
.option-card .hint { margin: .375rem 0 .25rem; }

/* Row groups (e.g. by role): the group's name, then a hairline at its
   mid-height to the right edge */
.group-label {
    display: flex; align-items: center; gap: .5rem;
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); margin: .375rem 0 .125rem;
}
.group-label::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.group-label:first-child { margin-top: 0; }
.group-toggle {
    display: inline-flex; align-items: center; gap: .375rem; padding: .25rem 0;
    background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.group-toggle:hover { color: var(--text); filter: none; }
.group-toggle .chevron { display: inline-block; transition: transform .15s; }
.group-label.collapsed .chevron { transform: rotate(-90deg); }
.group-count { padding: 0 .375rem; border-radius: 999px; background: var(--surface-2); text-transform: none; }
@media (prefers-reduced-motion: reduce) { .group-toggle .chevron { transition: none; } }

/* Seasons: a thin line in the season's color along the bottom of the date
   header, reaching into the column gaps so it runs through; the season's
   start gets its color as left border. The corner names the season of the
   first visible date, underlined in line with it. */
.date.season-line { position: relative; }
.date.season-line::after {
    content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 3px;
    background: var(--o-dot);
}
.date.season-start { border-left-color: var(--o-dot); }
.season-off::after, .corner-season.season-off { opacity: .55; }
.date.season-off::after { background: repeating-linear-gradient(90deg, var(--o-dot) 0 5px, transparent 5px 9px); }
.corner-season.season-off { border-bottom-style: dashed; }
.corner { position: relative; }
/* With a season name in the corner, the + moves to the names' left edge */
.corner:has(.corner-season) { justify-content: flex-start; padding-left: var(--name-offset); }
.corner:has(.plus-btn:not([hidden])) .corner-season { max-width: calc(100% - var(--name-offset) - 2rem); }
.corner-season {
    position: absolute; right: -4px; bottom: 0; max-width: calc(100% - .5rem);
    padding: 0 6px 1px .25rem;
    font-size: .65rem; font-weight: 600; line-height: 1.2; color: var(--muted);
    border-bottom: 3px solid var(--o-dot);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Season summary of a row */
.summary-season { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.summary-title { font-weight: 600; }
.summary-now { margin-left: .5rem; font-size: .75rem; font-weight: 500; color: var(--accent); }
.summary-rate { font-size: .875rem; color: var(--muted); white-space: nowrap; }
.summary-season .hint { margin: 0; }
.summary-bar { display: flex; height: .5rem; margin-top: .5rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.summary-bar > div { background: var(--o-dot); }
.summary-counts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .5rem; font-size: .75rem; color: var(--muted); }
.summary-counts .opt { color: var(--o-fg); }
.summary-planned { margin: .25rem 0 0; font-size: .75rem; color: var(--accent); }

/* Payments add-on: prepaid roles, one line per row in the statement */
fieldset.payments-roles { border: 0; margin: 0 0 .75rem; padding: 0; }
fieldset.payments-roles legend { font-size: .875rem; font-weight: 500; padding: 0; margin-bottom: .375rem; }
.payments-rows { margin-top: .75rem; }
.payments-row { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-top: 1px solid var(--border); font-size: .875rem; }
.payments-row input { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--accent); }
.payments-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payments-count { color: var(--muted); }
.payments-amount { white-space: nowrap; text-align: right; }
.payments-total { margin: .25rem 0; font-weight: 600; }

/* Label on its own line, then a segmented control in equal parts */
.view-switch { margin: .5rem 0 1rem; }
.view-switch .hint { display: block; margin: 0 0 .375rem; }
.view-switch .segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; background: var(--surface-2); border-radius: .5rem; }
.view-switch button { padding: .375rem .25rem; font-size: .875rem; background: transparent; border-radius: .375rem; white-space: nowrap; }
.view-switch button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.link-danger { background: transparent; color: var(--danger); margin-right: auto; padding-left: 0; font-size: .875rem; text-align: left; }
.access-link { margin-bottom: 1rem; }

.banner {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 1rem; font-size: .875rem;
    background: #fef3c7; color: #92400e;
}
.banner span { flex: 1; }
.banner button { padding: .25rem .75rem; background: #92400e; color: #fff; font-size: .875rem; white-space: nowrap; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { margin: 0; font-size: .8rem; }
.mail-link { display: inline-block; margin-top: .5rem; color: var(--accent); font-size: .9rem; }
.access-link .label { font-weight: 600; font-size: .9rem; }
.access-link .desc { font-size: .8rem; color: var(--muted); }
.access-link .copy { display: flex; gap: .5rem; margin-top: .25rem; }
.access-link input { margin: 0; font-size: .8rem; }

.loader {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.spinner {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fatal { padding: 2rem 1rem; text-align: center; color: var(--muted); }

.toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60;
    background: var(--text); color: var(--surface);
    padding: .5rem 1rem; border-radius: .5rem; font-size: .9rem;
    max-width: calc(100% - 2rem);
}