/* Layout pieces built on the tokens in app.css. */

/* ---------- Page header + toolbar ---------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.page-head .lede { margin: 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.toolbar .input { width: auto; min-width: 14rem; }

/* ---------- Pager ---------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.pager-buttons { display: flex; align-items: center; gap: .5rem; }
.pager-position { font-size: .9rem; white-space: nowrap; }

@media (max-width: 640px) {
    .toolbar .input { flex: 1 1 100%; min-width: 0; }
    .pager-buttons { width: 100%; justify-content: space-between; }
}

.check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: var(--text-muted);
    cursor: pointer;
}

.breadcrumb { font-size: .9rem; color: var(--text-muted); margin: 0 0 .5rem; }
.breadcrumb a { color: var(--text-muted); }

/* ---------- Tables ---------- */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }

table.data th,
table.data td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }

table.data th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--brand-mint-soft);
    white-space: nowrap;
}

table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--brand-mint-soft); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions .btn { padding: .35rem .6rem; font-size: .85rem; }

.row-inactive td { opacity: .55; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-neutral { background: #e7edec; color: var(--text-muted); }
.badge-accent { background: var(--brand-mint-soft); color: var(--brand-800); }
.badge-present { background: #e8f5e9; color: #1b5e20; }
.badge-absent { background: #fdecea; color: #b3261e; }
.badge-excused { background: #e7f0fd; color: #16437e; }
.badge-late { background: #fff4e5; color: #8a5300; }

.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #e7edec;
    font-size: .82rem;
}

.chip button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.chip button:hover { color: var(--danger); }

/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgb(14 65 57 / 55%);
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal {
    width: 100%;
    max-width: 32rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(14 65 57 / 28%);
    outline: none;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.modal-head h2 { margin: 0; }
.modal-close { font-size: 1.35rem; line-height: 1; padding: .1rem .5rem; }
.modal-body { padding: 1.25rem; }

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

.modal-wide { max-width: 46rem; }

/* ---------- Empty + loading ---------- */

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.empty-title { font-weight: 600; margin: 0 0 .35rem; }
.empty-hint { color: var(--text-muted); margin: 0 0 1rem; }

.loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2.5rem;
    color: var(--text-muted);
}

.spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

/* ---------- Sections ---------- */

.section { margin-top: 2rem; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.section-head h2 { margin: 0; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 11rem; }

/* ---------- Check-in screen ---------- */
/* Built for a phone or tablet held in a hallway: large targets, no hover reliance. */

.checkin-summary {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Each tally is also the filter for that status, so it's a button. */
.checkin-stat {
    display: flex;
    flex-direction: column;
    appearance: none;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: .35rem .6rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 4.5rem;
}

.checkin-stat:hover { background: var(--brand-mint-soft); }
.checkin-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkin-stat.is-active {
    border-color: var(--accent);
    background: var(--brand-mint-soft);
}

.checkin-stat.is-active .value,
.checkin-stat.is-active .label { color: var(--accent); }

.checkin-stat .value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }

.checkin-stat .label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.checkin-list { display: flex; flex-direction: column; gap: .6rem; }

.checkin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.checkin-row.is-dirty { border-color: var(--accent); background: var(--brand-mint-soft); }
.checkin-name { font-size: 1.05rem; font-weight: 600; }
.checkin-part { font-size: .85rem; color: var(--text-muted); }

.status-group { display: flex; gap: .4rem; flex-wrap: wrap; }

.status-btn {
    min-width: 5.25rem;
    min-height: 2.9rem;
    padding: .5rem .75rem;
    font: inherit;
    font-weight: 650;
    font-size: .92rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.status-btn:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text); }
.status-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status-btn.selected-present { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.status-btn.selected-late { background: #fff4e5; border-color: #b26a00; color: #8a5300; }
.status-btn.selected-excused { background: #e7f0fd; border-color: #1a5fb4; color: #16437e; }
.status-btn.selected-absent { background: #fdecea; border-color: #c62828; color: #b3261e; }

.save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 -2px 12px rgb(14 65 57 / 12%);
}

/* ---------- Schedule ---------- */

.schedule-group { margin-bottom: 2rem; }

.schedule-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .6rem;
}

.schedule-when { font-weight: 600; }
.schedule-meta { font-size: .88rem; color: var(--text-muted); }

@media (max-width: 640px) {
    .app-header { gap: .75rem; }
    .app-main { padding: 1.25rem .9rem; }
    .status-btn { flex: 1; min-width: 4.5rem; }
    .checkin-row { align-items: stretch; }
    .status-group { width: 100%; }
}

/* ---------- Import dialog ---------- */

.import-summary { margin: 0 0 1rem; padding-left: 1.25rem; }
.import-summary li { margin-bottom: .25rem; }

.import-issues { list-style: none; margin: 0 0 1rem; padding: 0; }

.import-issues li {
    padding: .6rem .75rem;
    margin-bottom: .4rem;
    border-radius: 8px;
    background: var(--danger-bg);
    border: 1px solid #f5c6c2;
    font-size: .9rem;
}

.import-issues.import-notices li {
    background: var(--brand-mint-soft);
    border-color: var(--brand-mint-200);
    color: var(--text);
}

.import-issues .badge { margin-right: .4rem; }

/* ---------- Parent "today" panel ---------- */

.today-card {
    padding: 1rem 1.1rem;
    margin-bottom: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-mint);
    border-radius: var(--radius);
}

.today-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.today-child { font-size: 1.1rem; font-weight: 650; }

.today-actions {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}

.scan-hint { margin: 0 0 .75rem; font-size: .9rem; color: var(--text-muted); }
.btn-scan { min-height: 2.9rem; min-width: 7rem; }

/* ---------- Printable check-in code ---------- */

.print-sheet {
    max-width: 34rem;
    margin: 1.5rem auto;
    padding: 2rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.print-title { font-size: 1.6rem; margin: 0 0 .25rem; color: var(--brand-800); }
.print-sub { margin: 0 0 .35rem; color: var(--text-muted); }
.print-qr { margin: 1.5rem auto; max-width: 20rem; }
.print-qr svg { width: 100%; height: auto; display: block; }
.print-instruction { font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.5; }

@media print {
    .app-header,
    .no-print,
    #blazor-error-ui { display: none !important; }

    .app-main { padding: 0; max-width: none; }

    body { background: #fff; }

    .print-sheet {
        border: none;
        margin: 0;
        padding: 0;
        max-width: none;
    }

    .print-qr { max-width: 26rem; }
}

/* ---------- Rehearsal list: past vs upcoming ---------- */

.subhead {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 1.25rem 0 .5rem;
}

.subhead-past { margin-top: 2rem; }

/* The panel's action bar already provides the gap; a second one reads as a stray break. */
.tab-panel .subhead:first-of-type { margin-top: 0; }

/* Finished rehearsals recede rather than disappear — still readable, clearly done.
   Rows needing attention opt out of the dimming so they don't get lost down here. */
.table-past { opacity: .82; }
.table-past .row-past td { color: var(--text-muted); }
.table-past .row-past strong { font-weight: 600; color: var(--text-muted); }
.table-past tbody tr:hover { opacity: 1; }

.tally { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- Admin today panel ---------- */

.today-card.is-past { border-left-color: var(--border); opacity: .85; }

.today-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}

.mini-stat { display: flex; flex-direction: column; }
.mini-stat .value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.mini-stat .value .of { font-size: .9rem; font-weight: 500; color: var(--text-muted); }

.mini-stat .label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.mini-stat.is-warning .value { color: var(--danger); }

/* ---------- Per-person call slots ---------- */

.today-checkin { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

/* ---------- Collector picker ---------- */

.collector-list { display: flex; flex-direction: column; gap: .5rem; }

.collector-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.collector-option:hover { border-color: var(--brand-600); }
.collector-option.is-selected { border-color: var(--accent); background: var(--brand-mint-soft); }

/* ---------- New-version prompt ---------- */

#app-update-ui {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .7rem 1rem;
    background: var(--brand-900);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgb(14 65 57 / 35%);
    font-size: .92rem;
}

#app-update-ui[hidden] { display: none; }

#app-update-ui button {
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 35%);
    background: rgb(255 255 255 / 12%);
    color: #fff;
    padding: .3rem .8rem;
}

#app-update-ui button:hover { background: rgb(255 255 255 / 22%); }

#app-update-ui #app-update-dismiss {
    border: none;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 .25rem;
}

/* ---------- Add-to-home-screen card ---------- */

.install-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--brand-mint-200);
    border-left: 4px solid var(--brand-mint);
    border-radius: var(--radius);
}

.install-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.install-body { flex: 1; min-width: 12rem; }
.install-title { font-weight: 650; margin-bottom: .15rem; }
.install-text { margin: 0; font-size: .9rem; color: var(--text-muted); }

.install-steps {
    margin: .75rem 0 0;
    padding-left: 1.15rem;
    font-size: .9rem;
    color: var(--text);
}

.install-steps li { margin-bottom: .25rem; }

.install-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .install-actions { width: 100%; }
    .install-actions .btn { flex: 1; }
}

/* ---------- Collected rows ---------- */

.collected-state { display: flex; align-items: center; }
.checkin-row:has(.collected-state) { opacity: .72; }

/* Leading panel on a dashboard: flush with the heading above, spaced from what follows. */
.section-lead { margin-top: 0; margin-bottom: 2rem; }

/* The install card reads as a footnote when it trails a dashboard rather than opening it. */
.card-grid + .install-card { margin-top: 1.5rem; margin-bottom: 0; }

/* ---------- Call time cell ---------- */

.slot-cell { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.icon-btn:hover { border-color: var(--brand-600); color: var(--accent); background: var(--brand-mint-soft); }
.icon-btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ---------- Add family ---------- */

.family-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: .75rem;
    background: var(--surface);
}

.family-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.family-card-title { font-weight: 600; font-size: .95rem; }

.btn-small { padding: .3rem .6rem; font-size: .85rem; }

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.review-head { margin: 1rem 0 .5rem; font-size: 1rem; }

/* Radios stack rather than sitting inline: the labels run long. */
.review-choice { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .4rem; }
.review-choice input { margin-top: .2rem; }

.family-done {
    border: 1px solid var(--brand-mint-200);
    background: var(--brand-mint-soft);
    border-radius: 10px;
    padding: 1.25rem;
}

.family-done h2 { margin-top: 0; }

/* ---------- Tabs ---------- */

/* Deliberately not a scroll container. `overflow-x: auto` computes overflow-y to auto
   as well, and the tabs' -1px bottom margin then pushes their border box past the
   content box — producing a scrollbar over a 1px overhang. Two tabs never need to
   scroll, so they wrap instead. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-top: 1.5rem;
}

.tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    /* Sits over the container's border rather than under it. */
    margin-bottom: -1px;
    padding: .6rem .9rem;
    font: inherit;
    font-weight: 550;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.tab-active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-count {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--bg);
    font-size: .8rem;
    color: var(--text-muted);
}

.tab-active .tab-count { background: var(--brand-mint-soft); color: var(--accent); }

.tab-panel { margin-top: 1.5rem; }

/* No heading in a panel — the tab is the heading — so the actions sit alone. */
.panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Picker inside a dialog: the list scrolls, the dialog itself doesn't grow off screen. */
.picker-list { max-height: 22rem; overflow-y: auto; }

/* ---------- In-app QR scanning ---------- */

.scan-launcher { margin-bottom: 1.25rem; }

.scan-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 60vh;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

/* Fills the frame rather than letterboxing, so the code is as large as possible. */
.scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Somewhere to aim. Purely a hint - decoding uses the whole frame. */
.scan-reticle {
    position: absolute;
    inset: 18%;
    border: 3px solid var(--brand-mint);
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 35%);
    pointer-events: none;
}

/* ---------- Danger zone ---------- */

/* Set apart at the foot of a list, below everything routine, so a purge is never
   adjacent to the buttons used daily. Tinted rather than red-buttoned: the opening
   button stays neutral, and only the final confirm inside the dialog goes red. */
.danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #f5c6c2;
    border-radius: var(--radius);
    background: var(--danger-bg);
}

.danger-zone h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--danger);
}

.danger-zone p { margin: .15rem 0 0; font-size: .9rem; }

/* What a purge takes, itemised in the first confirmation. */
.purge-list { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.purge-list li { margin-bottom: .25rem; }

/* ---------- Maintenance ---------- */
/* Counts scanned at a glance, so the number carries the weight and the label sits under it. */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.stat {
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.stat-value { font-size: 1.5rem; font-weight: 650; line-height: 1.2; color: var(--brand-800); }
.stat-label { font-size: .85rem; color: var(--text-muted); }

/* The purge belonging to one count, on the card that shows it. Deliberately not red:
   opening a confirmation is not itself the destructive step. */
.purge-chip { width: 100%; margin-top: .55rem; }

/* Stacked whole-list purges read as one block, not three unrelated warnings. */
.section .danger-zone + .danger-zone { margin-top: .75rem; }

/* Each family's children, itemised under the row so the cost of the delete is visible. */
.family-children { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--text-muted); }
.family-children li { margin-bottom: .15rem; }

/* ---------- Location picker ---------- */

/* A control with a small button beside it, e.g. the location dropdown and its pencil. */
.input-with-action { display: flex; align-items: center; gap: .4rem; }
.input-with-action .input { flex: 1; min-width: 0; }

.location-list { list-style: none; margin: 0 0 1rem; padding: 0; }

.location-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
}

.location-list .location-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.location-list .input { flex: 1; min-width: 0; padding: .35rem .5rem; }

/* ---------- Characters and ensembles ---------- */

.role-chips { margin-bottom: .45rem; }

/* ---------- Schedule import and agenda ---------- */

.section-title { font-size: 1rem; margin: 1.25rem 0 .5rem; }

.tab-picker { list-style: none; margin: 0; padding: 0; }
.tab-picker li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}

.schedule-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: var(--surface);
}

.schedule-preview summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.schedule-preview[open] summary { margin-bottom: .5rem; }

.agenda td { vertical-align: top; }
.agenda-break td { color: var(--text-muted); font-style: italic; }

/* One child's slots, under their call time on the parent views. */
.my-slots { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .88rem; }
.my-slots li { display: flex; gap: .6rem; }
.my-slots .when { white-space: nowrap; font-weight: 600; min-width: 8.5rem; }

/* ---------- Coming up (admin home) ---------- */

.upcoming-week {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 1rem 0 .35rem;
}

.upcoming-list { list-style: none; margin: 0; padding: 0; }

.upcoming-list a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .4rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.upcoming-list a:hover { border-color: var(--brand-600); background: var(--brand-mint-soft); }

.upcoming-date { display: flex; flex-direction: column; min-width: 8.5rem; font-weight: 600; }
.upcoming-what { display: flex; flex-direction: column; flex: 1; min-width: 12rem; }
.upcoming-flags { display: flex; gap: .35rem; flex-wrap: wrap; }

.my-slots-toggle summary { cursor: pointer; }
.my-slots li.is-break { color: var(--text-muted); font-style: italic; }
.my-slots li.is-break .when { font-weight: 400; }

/* ---------- Rehearsal page: agenda and call list ---------- */

.panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}

.panel .section-head { margin-bottom: .75rem; }
.panel .section-head h2 { font-size: 1.15rem; }

.agenda-list { list-style: none; margin: 0; padding: 0; }

.agenda-list li {
    display: flex;
    align-items: center;
    gap: .4rem 1rem;
    flex-wrap: wrap;
    padding: .55rem 0;
    border-top: 1px solid var(--border);
}

.agenda-list li:first-child { border-top: none; }
.agenda-list li.is-break { color: var(--text-muted); font-style: italic; }
.agenda-list li.is-break strong { font-weight: 500; }

.agenda-time { min-width: 10rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda-body { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.agenda-actions { display: flex; align-items: center; gap: .4rem; }

.chip-btn {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    padding: .2rem .65rem;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
}

.chip-btn:hover { border-color: var(--brand-600); background: var(--brand-mint-soft); }
.chip-btn.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.filter-row .input[type="search"] { flex: 1; min-width: 12rem; }
.filter-row select.input { width: auto; }

.selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    border-radius: 8px;
    background: var(--brand-mint-soft);
    border: 1px solid var(--brand-600);
}

.selection-bar strong { margin-right: .5rem; }

.call-table .group-row td {
    background: var(--bg);
    font-weight: 600;
    font-size: .88rem;
    border-top: 2px solid var(--border);
}

.people-picker {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.people-picker li { padding: .35rem .6rem; border-top: 1px solid var(--border); }
.people-picker li:first-child { border-top: none; }
.people-picker .check { color: var(--text); width: 100%; }
.people-picker .check span { display: flex; flex-direction: column; }

.people-tools { margin-bottom: .5rem; }
.people-tools select.input { width: auto; }

/* ---------- Row action menu ---------- */

.name-badges { margin-top: .25rem; display: flex; gap: .3rem; flex-wrap: wrap; }

.action-menu { display: inline-block; }

.action-menu-backdrop { position: fixed; inset: 0; z-index: 90; }

.action-menu-list {
    position: fixed;
    z-index: 91;
    width: 13rem;
    padding: .3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgb(14 65 57 / 18%);
    text-align: left;
}

.action-menu-item {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}

.action-menu-item:hover:not(:disabled),
.action-menu-item:focus-visible { background: var(--brand-mint-soft); outline: none; }
.action-menu-item:disabled { color: var(--text-muted); cursor: default; opacity: .6; }
.action-menu-item.is-danger { color: var(--danger); }

.action-menu-divider { border: none; border-top: 1px solid var(--border); margin: .3rem 0; }