/* Hallmark · genre: editorial/austere · macrostructure: Stat-Led (staff) + Workbench (owner) · design-system: design.md · designed-as-app
 * theme: custom (Big Apple Ballroom site) · paper oklch(98.3% 0.003 30) · accent oklch(46% 0.095 18) rose · display Anton · body Inter · serif Lora (one slot)
 * nav: N7 brutal slab · footer: none · enrichment: none · axes: light / display-condensed / warm
 * contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 */

/* BAB PAYROLL — APP COMPONENTS. Built from _ds tokens only. Mobile-first; the owner desk widens at 56rem and 75rem. */

/* ── Masthead (N7): the site's near-black bar, tracked uppercase links, coral underline on the current page ── */
.mast { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-mast); color: var(--color-mast-ink); border-bottom: 1px solid var(--color-mast-rule); }
.mast__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-md); display: flex; align-items: stretch; gap: var(--space-lg); min-height: var(--mast-h); }
.mast__brand { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-mast-ink); text-decoration: none; white-space: nowrap; }
.mast__brand:hover { text-decoration: none; }
.mast__wordmark { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.mast__app { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-coral); line-height: 1; padding-top: 2px; }
.mast__nav { display: flex; align-items: stretch; gap: var(--space-md); margin-left: auto; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mast__nav::-webkit-scrollbar { display: none; }
.mast__nav a { position: relative; display: inline-flex; align-items: center; color: var(--color-mast-ink); font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; white-space: nowrap; text-decoration: none; opacity: .82; transition: opacity var(--dur-micro) var(--ease-out); }
.mast__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--space-sm); height: 2px; background: var(--color-coral); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.mast__nav a[aria-current="page"] { opacity: 1; }
.mast__nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .mast__nav a:hover { opacity: 1; } .mast__nav a:hover::after { transform: scaleX(1); } }
.mast__nav a:focus-visible { outline-offset: calc(-1 * var(--space-2xs)); }
.mast__who { display: none; align-items: center; color: var(--color-mast-dim); font-size: var(--text-xs); white-space: nowrap; }
/* Phones: smaller wordmark, no app label, tighter links; a scroll fade if the owner's five links still overflow */
@media (max-width: 39.99rem) {
  .mast__inner { gap: var(--space-md); min-height: var(--mast-h-sm); }
  .mast__wordmark { font-size: var(--text-sm); letter-spacing: 0.05em; }
  .mast__app { display: none; }
  .mast__nav { gap: var(--space-sm); font-size: 0; padding-right: var(--space-lg); mask-image: linear-gradient(to right, black calc(100% - var(--space-lg)), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-lg)), transparent); }
  .mast__nav a { font-size: 11px; letter-spacing: 0.1em; }
}
@media (min-width: 40rem) { .mast__who { display: inline-flex; } .mast__inner { padding-inline: var(--space-lg); } }

/* ── Page frame ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--space-lg) var(--space-md) calc(var(--space-2xl) + env(safe-area-inset-bottom)); }
.wrap--narrow { max-width: var(--wrap-narrow); }
@media (min-width: 40rem) { .wrap { padding-inline: var(--space-lg); padding-top: var(--space-xl); } }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.head__main { min-width: 0; flex: 1 1 18rem; }
.head__sub { margin: var(--space-xs) 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--text-md); color: var(--color-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.head__aside { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.sub { color: var(--color-muted); font-size: var(--text-sm); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-xs); }
.strike { text-decoration: line-through; color: var(--color-muted); }
.hidden { display: none !important; }

/* ── Surfaces: one containment layer, hairline, no shadow ── */
.card { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-md); margin-bottom: var(--space-md); }
.card > h2:first-child, .card > .card__head { margin-bottom: var(--space-sm); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.card--tint { background: var(--color-tint); border-color: transparent; }
.card--warn { background: var(--color-warn-tint); border-color: transparent; }
.card--danger { background: var(--color-danger-tint); border-color: transparent; }
@media (min-width: 40rem) { .card { padding: var(--space-lg); } }

/* Callout: a labelled note, not a striped card */
.note { background: var(--color-tint); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.note strong { color: var(--color-ink); display: inline-flex; align-items: center; gap: var(--space-xs); }
.note strong::before { content: ''; width: 6px; height: 6px; background: var(--color-accent); flex: none; }
.note p { margin: 0; max-width: none; }

/* ── Stat-led hero (staff view): the figure is the page ── */
.hero { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-lg) var(--space-md); margin-bottom: var(--space-lg); display: grid; gap: var(--space-md); }
.hero__figure { font-family: var(--font-display); font-size: var(--text-figure); line-height: 1; letter-spacing: 0.01em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hero__figure small { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-xs); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.hero__cta { display: grid; gap: var(--space-xs); }
@media (min-width: 40rem) {
  .hero { grid-template-columns: 1fr auto; align-items: end; padding: var(--space-lg); }
  .hero__meta { grid-column: 1 / -1; }
  .hero__cta { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
}

/* ── Segmented switch (weeks / tabs) ── */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-surface); padding: var(--space-3xs); gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.seg__btn { min-height: var(--control-h-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink-2); font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-button); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg__btn[aria-selected="true"] { background: var(--color-ink); color: var(--color-accent-ink); }
.seg__btn:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .seg__btn:not([aria-selected="true"]):hover { background: var(--color-paper-2); } }
@media (min-width: 40rem) { .seg { width: auto; min-width: 20rem; } }
.wk-sum { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: baseline; margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.wk-sum .money { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); letter-spacing: 0.01em; }

/* ── Day groups + rows ── */
.day { margin-bottom: var(--space-md); }
.day__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-ink); margin-bottom: var(--space-2xs); }
.day__head .money { font-weight: 600; font-size: var(--text-sm); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--color-rule); }
.row__main { display: grid; grid-template-columns: var(--space-xs) minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: start; padding: var(--space-sm) 0; list-style: none; cursor: pointer; }
.row__main::-webkit-details-marker { display: none; }
div.row__main { cursor: default; }
.row__dot { width: var(--space-xs); height: var(--space-xs); margin-top: 0.4em; background: var(--color-rule-2); flex: none; }
.row--ok .row__dot, .row--confirmed .row__dot, .row--final .row__dot { background: var(--color-ok); }
.row--unmarked .row__dot { background: var(--color-warn); }
.row--flagged .row__dot { background: var(--color-danger); }
.row--override .row__dot { background: var(--color-danger); outline: 2px dashed var(--color-danger); outline-offset: 1px; }
.row__desc { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); line-height: 1.3; overflow-wrap: anywhere; }
.row__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); align-items: center; font-size: var(--text-xs); color: var(--color-muted); }
.row__amt { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-weight: 700; font-size: var(--text-md); white-space: nowrap; }
.row__body { padding: 0 0 var(--space-sm) calc(var(--space-xs) + var(--space-sm)); display: grid; gap: var(--space-sm); }
.row__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.row__hint { font-size: var(--text-xs); color: var(--color-muted); flex-basis: 100%; }
.row .notes { margin: 0; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.notes p { margin: 0 0 var(--space-2xs); max-width: none; }
.notes .by { color: var(--color-muted); font-size: var(--text-xs); }
details.row[open] > .row__main { background: var(--color-paper-2); margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); }
@media (hover: hover) { summary.row__main:hover { background: var(--color-paper-2); margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); } }
.row__form { padding: var(--space-sm) 0; }

/* ── Status tags: tracked, tiny, tinted. Override = dashed red, unmistakable. ── */
.tag { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-ink-2); border: 1px solid transparent; white-space: nowrap; }
.tag--draft { background: var(--color-paper-2); }
.tag--confirmed, .tag--ok { background: var(--color-ok-tint); color: var(--color-ok); }
.tag--flagged, .tag--danger, .tag--missing { background: var(--color-danger-tint); color: var(--color-danger); }
.tag--unmarked, .tag--warn, .tag--awaiting_confirmation { background: var(--color-warn-tint); color: var(--color-warn); }
.tag--final, .tag--locked, .tag--exported { background: var(--color-ink); color: var(--color-accent-ink); }
.tag--open, .tag--info { background: var(--color-info-tint); color: var(--color-info); }
.tag--override { background: var(--color-surface); color: var(--color-danger); border: 1.5px dashed var(--color-danger); white-space: normal; line-height: 1.3; }
/* legacy class names still emitted by a few renderers */
.badge { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-ink-2); border: 1px solid transparent; white-space: nowrap; }
.badge--confirmed, .badge--ok { background: var(--color-ok-tint); color: var(--color-ok); }
.badge--flagged, .badge--danger, .badge--missing { background: var(--color-danger-tint); color: var(--color-danger); }
.badge--unmarked, .badge--warn, .badge--awaiting_confirmation { background: var(--color-warn-tint); color: var(--color-warn); }
.badge--final, .badge--locked, .badge--exported { background: var(--color-ink); color: var(--color-accent-ink); }
.badge--open { background: var(--color-info-tint); color: var(--color-info); }
.badge--override { background: var(--color-surface); color: var(--color-danger); border: 1.5px dashed var(--color-danger); }

/* ── Buttons: the site's voice. 44px, uppercase, tracked, 2px corners. Eight states. ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-button); text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--color-surface); color: var(--color-ink); transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; width: var(--space-md); height: var(--space-md); border: 2px solid currentColor; border-color: var(--color-accent-ink) transparent var(--color-accent-ink) transparent; border-radius: 50%; animation: spin 700ms linear infinite; color: var(--color-ink); }
.btn--secondary[aria-busy="true"]::after, .btn--ghost[aria-busy="true"]::after { border-color: var(--color-ink) transparent var(--color-ink) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn--primary { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); }
.btn--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost { background: transparent; color: var(--color-accent); padding-inline: var(--space-xs); min-height: var(--control-h-sm); }
.btn--danger { background: var(--color-danger-tint); color: var(--color-danger); border-color: transparent; }
.btn--sm { min-height: var(--control-h-sm); padding-inline: var(--space-sm); font-size: 11px; }
.btn--block { width: 100%; }
.btn.is-error { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-tint); }
.btn.is-success { border-color: var(--color-ok); color: var(--color-ok); background: var(--color-ok-tint); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
  .btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .btn--ghost:hover { background: var(--color-tint); }
  .btn--danger:hover { background: var(--color-danger); color: var(--color-accent-ink); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* Owner action bar: labelled groups instead of seven equal buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: flex-end; }
.actions .btn { padding-inline: var(--space-md); }
.actions__group { display: grid; gap: var(--space-2xs); }
.actions__label { font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-muted); }
.actions__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.actions__group--end { margin-left: auto; }
.sync-line { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ── Owner contribution band: figures separated by rules, not four boxed cards ── */
.band { display: grid; gap: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-md); margin-bottom: var(--space-md); }
.band__who h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: 0.02em; text-transform: uppercase; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; }
.fig { padding: var(--space-xs) var(--space-md) var(--space-xs) 0; border-top: 1px solid var(--color-rule); }
.fig__n { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.fig__sub { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }
.fig--warn .fig__n { color: var(--color-warn); }
@media (min-width: 56rem) {
  .band { grid-template-columns: minmax(12rem, 1fr) 2.2fr; align-items: center; padding: var(--space-lg); }
  .fig { border-top: 0; border-left: 1px solid var(--color-rule); padding-left: var(--space-md); }
}

/* (The three-column owner desk was retired 2026-09-27 for tabs; see .seg__count / tr.people-detail.) */
#classes table .btn--sm { padding-inline: var(--space-xs); }
#classes td:last-child .btn { display: flex; }
.two-col { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }

/* ── Tables (owner desk only) ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-xs) var(--space-xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
th { color: var(--color-muted); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; padding-top: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.is-unmarked td { background: var(--color-warn-tint); }
tr.is-flagged td { background: var(--color-danger-tint); }
tr.is-clickable { cursor: pointer; }
tr.is-selected td { background: var(--color-tint); font-weight: 600; }
@media (hover: hover) { tr.is-clickable:hover td { background: var(--color-paper-2); } }
tr.subtotal td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--color-ink); }
.people-name { font-weight: 600; }
.people-roles { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
td.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
/* Owner desk tabs (Michael 2026-09-27: "separate tabs so that I don't have one long scroll") */
.seg__count { display: inline-block; min-width: 1.25em; margin-left: var(--space-2xs); padding: 0 0.35em; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 10px; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.seg__count:empty { display: none; }
.seg__btn[aria-selected="true"] .seg__count { background: var(--color-accent-ink); color: var(--color-ink); }
main > section { display: grid; gap: var(--space-md); }
/* A person's lines open in place under their row. */
tr.people-detail > td { padding: 0 0 var(--space-md); border-bottom: 1px solid var(--color-ink); background: var(--color-surface); }
.person { padding: var(--space-sm) var(--space-xs) 0; }
@media (min-width: 56rem) { .person { padding-inline: var(--space-md); } }
/* People list: the number cells may wrap their sublines so the table fits a 17rem column or a phone. */
#people td.num { white-space: normal; }
#people td.num .small { white-space: normal; }
/* Pay by type under each person (owner desk). Wraps to as many rows as the phone needs; one line on a wide desk. */
tr.people-types td { padding-top: 0; border-bottom: 1px solid var(--color-rule); }
tr.people-types + tr td { border-top: 0; }
#people tr[data-staff]:not(.people-types):has(+ tr.people-types) td { border-bottom: 0; }
.types { display: grid; max-width: 26rem; grid-template-columns: minmax(0, 1fr) auto; gap: 1px var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.types__item { display: contents; }
.types__label { color: var(--color-ink-2); min-width: 0; }
.types__item .num { text-align: right; white-space: nowrap; }
.types__item--recon .types__label, .types__item--recon .num { font-weight: 600; color: var(--color-ink); }
.types__item--warn .types__label, .types__item--warn .num { color: var(--color-warn); font-weight: 600; }
.types__item--first .types__label, .types__item--first .num { border-top: 1px solid var(--color-rule-2); padding-top: 2px; margin-top: 2px; }
.breakdown__row--sub { font-weight: 600; background: var(--color-paper-2); padding-inline: var(--space-xs); }
.breakdown__row--guarantee { background: var(--color-tint); padding-inline: var(--space-xs); }
.breakdown__row--guarantee .money { color: var(--color-accent); }
.breakdown__row .small { font-weight: 400; }

/* ── Forms: 44px controls, label above, no layout shift ── */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-sm); min-width: 0; }
.field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink-2); }
.field input, .field select, .field textarea, .control { min-height: var(--control-h); padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 16px; color: var(--color-ink); transition: background var(--dur-micro) var(--ease-out); }
.field textarea { min-height: 6rem; padding-block: var(--space-xs); resize: vertical; }
.field input[type=number] { font-variant-numeric: tabular-nums; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-danger); }
.field input:disabled, .field select:disabled { opacity: .55; cursor: not-allowed; }
@media (hover: hover) { .field input:hover, .field select:hover, .control:hover { background: var(--color-paper-2); } }
.field .help { min-height: 1lh; font-size: var(--text-xs); color: var(--color-muted); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-md); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form-grid .span2 { grid-column: span 2; } }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.check-row label { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-h); font-size: var(--text-sm); }
.check-row input { accent-color: var(--color-accent); width: var(--space-md); height: var(--space-md); }
.period-pick { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.period-pick select { min-height: var(--control-h); padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; max-width: 100%; }
select.control--sm { min-height: var(--control-h-sm); font-size: var(--text-sm); }

/* ── Week heads inside the owner's person card ── */
.week-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-ink); }
.week-head h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.week-head .money { font-weight: 700; }
.person-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.person-head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: 0.02em; text-transform: uppercase; }
.person-head .money { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: 0.01em; }
.rates-line { font-size: var(--text-xs); color: var(--color-muted); }
.section-title { margin-top: var(--space-lg); }

/* ── Day sheet on My pay: lessons · intros · hours · pay per day, tap to open the day ── */
.sheet { margin-bottom: var(--space-md); }
.sheet__head, .sheet__row { display: grid; grid-template-columns: minmax(0, 1fr) 3.1rem 2.9rem 3.1rem 4.6rem; gap: var(--space-2xs); align-items: center; }
.sheet__head { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-ink); }
.sheet__head .num { letter-spacing: 0.02em; }
.sheet__row { min-height: var(--control-h); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); list-style: none; cursor: pointer; }
.sheet__row::-webkit-details-marker { display: none; }
.sheet__row .num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet__row .money { font-weight: 700; }
.sheet__row--empty { cursor: default; color: var(--color-muted); }
.sheet__date { font-weight: 600; display: flex; flex-direction: column; min-width: 0; }
.sheet__date small { font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.sheet__day[open] > .sheet__row { background: var(--color-paper-2); margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); border-bottom-color: transparent; }
.sheet__day > .rows { padding-left: var(--space-xs); border-left: 2px solid var(--color-rule-2); margin: 0 0 var(--space-sm); }
@media (hover: hover) { .sheet__day:not([open]) > .sheet__row:hover { background: var(--color-paper-2); margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); } }
@media (min-width: 40rem) { .sheet__head, .sheet__row { grid-template-columns: minmax(0, 1fr) 4rem 4rem 4.5rem 6rem; gap: var(--space-sm); } .sheet__head { letter-spacing: var(--tracking-label); } }

/* Five-way tab bar: scrolls sideways on a phone, never wraps */
.seg--scroll { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg--scroll::-webkit-scrollbar { display: none; }
.seg--scroll .seg__btn { flex: 0 0 auto; padding-inline: var(--space-md); }
@media (min-width: 40rem) { .seg--scroll .seg__btn { flex: 1 1 0; } }

/* Events: prefilled rows, the person fills hours (and rate when Michael left it blank) */
.event { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.event__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); align-items: baseline; }
.event__name { font-weight: 600; }
.event__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-xs); align-items: end; }
.event__inputs .field { margin: 0; }
.breakdown { display: grid; gap: 0; }
.breakdown__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-sm); align-items: baseline; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.breakdown__row .money { font-weight: 700; }
.breakdown__row--total { border-bottom: 0; border-top: 1px solid var(--color-ink); font-weight: 700; }

/* ── Day-by-day entry sheet (manager / desk) ── */
.days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-xs); }
.days__week { grid-column: 1 / -1; margin: var(--space-sm) 0 var(--space-2xs); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-ink); display: flex; justify-content: space-between; align-items: baseline; }
.days__week .num { font-size: var(--text-sm); color: var(--color-muted); }
.day-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: var(--space-sm); min-height: var(--control-h); border-bottom: 1px solid var(--color-rule); }
.day-row label { font-size: var(--text-sm); display: flex; flex-direction: column; line-height: 1.2; }
.day-row label .muted { font-size: var(--text-xs); }
.day-row--usual { background: var(--color-paper-2); }
.day-row--touched { background: var(--color-tint); }
.day-row__ops { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: 2px; }
.day-row__ops .btn--sm { min-height: 28px; padding-inline: var(--space-xs); font-size: 11px; }
.day-row input { min-height: 40px; width: 100%; text-align: right; font-variant-numeric: tabular-nums; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 16px; }
.day-row input.is-dirty { border-color: var(--color-accent); }
.day-row--off label { color: var(--color-muted); }
@media (min-width: 40rem) { .days { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xl); } }

/* ── Pinned confirm bar (staff) ── */
.foot { position: sticky; bottom: 0; z-index: var(--z-raised); background: var(--color-surface); border-top: 1px solid var(--color-rule); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); margin: var(--space-lg) calc(-1 * var(--space-md)) calc(-1 * (var(--space-2xl) + env(safe-area-inset-bottom))); box-shadow: var(--shadow-sheet); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; justify-content: space-between; }
.foot .sub { flex: 1 1 14rem; }
.foot .btn { flex: 1 1 auto; }
@media (min-width: 40rem) { .foot { margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); } .foot .btn { flex: 0 0 auto; } }

/* ── Toasts: fixed stack, never shift layout ── */
.toast { position: fixed; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); max-width: min(24rem, calc(100% - 2 * var(--space-md))); background: var(--color-ink); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); z-index: var(--z-toast); animation: toast-in var(--dur-short) var(--ease-out); }
.toast--error { background: var(--color-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2xs)); } to { opacity: 1; transform: none; } }
.empty { color: var(--color-muted); text-align: center; padding: var(--space-lg) var(--space-md); font-size: var(--text-sm); }
details.disclosure > summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--color-accent); min-height: var(--control-h-sm); display: inline-flex; align-items: center; }
pre.json { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-paper-2); padding: var(--space-sm); border-radius: var(--radius-sm); overflow: auto; max-height: 320px; }
.login { max-width: 26rem; margin: 8vh auto 0; }
.login h1 { margin-bottom: var(--space-2xs); }
.login .head__sub { margin-bottom: var(--space-lg); }
.class-title { font-weight: 600; }
.attendees { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

@media print {
  .mast, .btn, .foot, .seg, .no-print, .actions { display: none !important; }
  body { background: none; }
  .card { border: 0; padding: 0; break-inside: avoid; }
}