/* Coach Tracker: design system.
   The look is the studio's new brand kit (received 10 October 2026; docs/BRAND.md): dark first, mostly monochrome, one spot colour (#CFC58A), square corners,
   thin rules, no shadows, no gradients, Switzer throughout. How each rule is applied, and the few files that carry the name, are in
   docs/BRAND.md. Status is always carried by text and an icon as well as colour. Every text and control colour pair below is
   checked against WCAG by tests/test_look.py, so a colour cannot be changed into something unreadable without a test failing. */

@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* The brand palette, as supplied (brand-kit/colours.json). Nothing below is a new colour except the status text shades, which are the
   brand's green, orange and red made lighter (dark theme) or darker (light theme) until they reach 4.5:1 as text, and the gold of a
   member's name on the light theme (the brand's gold made darker the same way). */
:root {
  --ink-900: #08080B; --ink-800: #0B0B0E; --ink-700: #141418; --ink-600: #1E1E23; --ink-500: #2C2C32;
  --grey-500: #5E5E63; --grey-400: #8C8C91; --grey-300: #B4B4B6; --grey-200: #CFCFCC;
  --stone-200: #E4E3DE; --stone-100: #EDECE7; --paper-white: #FAF7F1;
  --spot-era: #CFC58A;
  --gutter: 16px;
  --header-h: 56px;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --danger-fill: #B84C36; --on-danger: #FFFFFF;   /* a filled red button or badge: white on this reads at 5.1:1 */
  --font: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark is the brand's base design, and what a phone set to dark gets under Auto. The app itself starts on Light (js/core/theme.js);
   Dark and Auto are a person's choice under Account. */
:root {
  --paper: #0B0B0E; --surface: #141418; --surface-2: #1E1E23; --stone: #2C2C32; --line: #2C2C32; --line-strong: #8C8C91;
  --ink: #E4E3DE; --ink-2: #CFCFCC; --ink-3: #8C8C91; --on-ink: #0B0B0E;
  --accent: #CFC58A; --on-accent: #0B0B0E; --focus: #CFC58A; --scrim: rgba(8,8,11,.72);
  --person: #CFC58A;   /* a member's name: the brand's gold, so each person's card is easy to find while scrolling */
  --ok: #7E9C6E; --ok-bg: #272C27; --ok-line: #7E9C6E; --ok-fill: #7E9C6E; --on-ok: #0B0B0E;
  --warn: #E2894B; --warn-bg: #392921; --warn-line: #E2894B;
  --danger: #D37764; --danger-bg: #34201F; --danger-line: #C8553D;
  --info: #E4E3DE; --info-bg: #1E1E23; --info-line: #5E5E63;
  color-scheme: dark;
}

/* Light is the brand inverted: stone for the page, off-white for cards, ink for text. */
:root[data-theme="light"] {
  --paper: #E4E3DE; --surface: #FAF7F1; --surface-2: #EDECE7; --stone: #D9D8D2; --line: #CFCFCC; --line-strong: #5E5E63;
  --ink: #0B0B0E; --ink-2: #2C2C32; --ink-3: #5E5E63; --on-ink: #FAF7F1;
  --accent: #0B0B0E; --on-accent: #FAF7F1; --focus: #0B0B0E; --scrim: rgba(11,11,14,.5);
  --person: #7C6100;   /* the same gold, made deeper until it reads as text on stone and off-white (the brand's own gold is too pale) */
  --ok: #45563D; --ok-bg: #E1E5D7; --ok-line: #7E9C6E; --ok-fill: #476138; --on-ok: #FFFFFF;
  --warn: #7C4B29; --warn-bg: #F5E1D0; --warn-line: #E2894B;
  --danger: #823728; --danger-bg: #F0D7CD; --danger-line: #C8553D;
  --info: #0B0B0E; --info-bg: #EDECE7; --info-line: #8C8C91;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper: #E4E3DE; --surface: #FAF7F1; --surface-2: #EDECE7; --stone: #D9D8D2; --line: #CFCFCC; --line-strong: #5E5E63;
    --ink: #0B0B0E; --ink-2: #2C2C32; --ink-3: #5E5E63; --on-ink: #FAF7F1;
    --accent: #0B0B0E; --on-accent: #FAF7F1; --focus: #0B0B0E; --scrim: rgba(11,11,14,.5);
    --person: #7C6100;
    --ok: #45563D; --ok-bg: #E1E5D7; --ok-line: #7E9C6E; --ok-fill: #476138; --on-ok: #FFFFFF;
    --warn: #7C4B29; --warn-bg: #F5E1D0; --warn-line: #E2894B;
    --danger: #823728; --danger-bg: #F0D7CD; --danger-line: #C8553D;
    --info: #0B0B0E; --info-bg: #EDECE7; --info-line: #8C8C91;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon.sm { width: 16px; height: 16px; }
.icon.lg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---------- layout ---------- */
.screen { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter) calc(88px + env(safe-area-inset-bottom)); }
.screen.no-nav { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.topbar-inner { max-width: 680px; margin: 0 auto; height: var(--header-h); display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter); }
.topbar h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.brand-mark { height: 22px; width: auto; display: block; }
.page-title { font-size: 26px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin: 22px 0 6px; }
.page-sub { color: var(--ink-2); margin: 0 0 18px; }
h2.section { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin: 26px 0 10px; }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.nav-inner { max-width: 680px; margin: 0 auto; display: flex; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 8px; text-decoration: none; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; min-height: 56px; border-top: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--ink); border-top-color: var(--accent); }
.nav a[aria-current="page"] .icon { stroke-width: 2.4; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; user-select: none; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink); padding: 0 12px; }
.btn.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-danger); }
.btn.danger.secondary { background: transparent; color: var(--danger); border-color: var(--danger-line); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius); border: 0; background: transparent; color: var(--ink); }
.icon-btn:active { background: var(--stone); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; background: var(--stone); color: var(--ink-2); line-height: 1.3; white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.ink { background: var(--ink); color: var(--on-ink); }
button.chip { border: 0; cursor: pointer; min-height: 40px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 16px; }
.textarea { min-height: 88px; resize: vertical; }
.input.is-suggested { border-style: dashed; font-style: italic; color: var(--ink-2); }  /* a suggestion is not an entry: dashed and italic, as on the card */
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
.field-error { color: var(--danger); font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.hint { color: var(--ink-3); font-size: 13px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); flex: none; }
.seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 3px; gap: 2px; background: var(--surface); }
.seg button { border: 0; background: transparent; min-height: 40px; padding: 0 14px; border-radius: var(--radius); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card + .card { margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 64px; }
a.list-item:active, button.list-item:active { background: var(--surface-2); }
button.list-item { width: 100%; text-align: left; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; font-weight: 500; margin: 12px 0; }
.banner .icon { margin-top: 1px; }
.banner.info { background: var(--info-bg); color: var(--info); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.danger { background: var(--danger-bg); color: var(--danger); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner button { margin-left: auto; }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-2); }
.empty .icon { width: 36px; height: 36px; color: var(--ink-3); margin-bottom: 8px; }
.empty h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.skeleton { background: var(--stone); animation: pulse 1.4s ease-in-out infinite; border-radius: var(--radius); }
@keyframes pulse { 50% { opacity: .5; } }
.loading-note { display: flex; align-items: center; gap: 10px; padding: 14px 2px 0; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--ink); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- sheets and toasts ---------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease-out; }
.sheet { width: 100%; max-width: 680px; max-height: 92dvh; background: var(--paper); border-radius: var(--radius); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: rise .2s ease-out; padding-bottom: env(safe-area-inset-bottom); }
.sheet.tall { height: 92dvh; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 14px 8px 8px 20px; }
.sheet-head h2 { margin: 0; font-size: 18px; flex: 1; letter-spacing: -.01em; }
.sheet-grab { width: 40px; height: 4px; background: var(--line-strong); border-radius: var(--radius); margin: 8px auto 0; opacity: .6; }
.sheet-body { overflow-y: auto; padding: 4px 20px 24px; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--paper); }
.sheet-foot .btn { flex: 1; }
@keyframes rise { from { transform: translateY(24px); opacity: .6; } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 700px) { .scrim { align-items: center; } .sheet { border-radius: var(--radius); max-height: 86vh; } .sheet.tall { height: 86vh; } }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast { pointer-events: auto; background: var(--ink); color: var(--on-ink); padding: 12px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; max-width: 480px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; animation: rise .2s ease-out; }
.toast.danger { background: var(--danger-fill); color: var(--on-danger); }
.toast button { background: transparent; border: 0; color: inherit; text-decoration: underline; font-weight: 700; padding: 8px 12px; min-height: 40px; }

/* ---------- class screen ---------- */
.class-bar { position: sticky; top: 0; z-index: 35; background: var(--paper); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.class-bar-main { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 4px; min-height: 58px; }
.class-id { flex: 0 0 auto; min-width: 0; line-height: 1.15; }  /* the date, time, class and week are never squeezed by the status chip */
.class-id .when { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.class-id .what { font-size: 13px; color: var(--ink-2); display: block; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name line takes no width of its own (width 0, then as wide as the date line above it), so a long Mariana Tek name is cut short with an ellipsis and can never squeeze the status chip. The whole name is shown again under the header when it is long (.meta-name). */
.meta-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.sync-chip { min-height: 40px; border: 0; }
.class-meta { max-width: 680px; margin: 0 auto; padding: 10px var(--gutter) 0; }
.class-meta .meta-line { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.progress { height: 6px; border-radius: var(--radius); background: var(--stone); overflow: hidden; margin-top: 10px; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius); transition: width .3s; }
.tools { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 32; background: var(--paper); padding: 8px 0 8px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); border-bottom: 1px solid transparent; }
.tools.stuck { border-bottom-color: var(--line); }
.tools-inner { display: flex; gap: 8px; align-items: center; }
.search { position: relative; flex: 1; min-width: 0; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search input { padding-left: 38px; min-height: 44px; border-radius: var(--radius); }
body.typing .tools { visibility: hidden; }
.filters { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }

.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; overflow: clip; content-visibility: auto; contain-intrinsic-size: auto 760px; scroll-margin-top: 140px; }
.member.dim { background: var(--surface-2); }
.member-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; }
.member-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--person); }
.person { color: var(--person); }  /* a member's name wherever it heads a row: the class page, the jump list, the search for someone to add */
.member-sub { font-size: 13px; color: var(--ink-2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.att-btn { margin-left: auto; flex: none; min-height: 44px; border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.att-btn.attended { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.att-btn.absent, .att-btn.no_show, .att-btn.cancelled { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 6px; }
.member-banner { margin: 0 14px 8px; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.member-banner.warn { background: var(--warn-bg); color: var(--warn); }
.member-banner.danger { background: var(--danger-bg); color: var(--danger); }
.member-banner.info { background: var(--info-bg); color: var(--info); }
.member-banner .btn { margin-left: auto; flex: none; }

.ex { padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ex-head { display: flex; align-items: flex-start; gap: 8px; }
.ex-num { flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--radius); background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; box-sizing: border-box; }
.ex.confirmed .ex-num { background: var(--ok-fill); color: var(--on-ok); }
.ex-title { font-weight: 600; font-size: 16px; line-height: 1.25; }
.ex-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.ex-tools { margin-left: auto; display: flex; gap: 0; flex: none; margin-right: -8px; margin-top: -6px; }
.sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sets[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sets[data-n="5"], .sets[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sets[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sets[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.setbox { position: relative; }
.setbox .cap { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 3px; padding: 0 2px; min-height: 16px; }
.setbox .glyph { display: inline-flex; }
.setbox .glyph .icon { width: 14px; height: 14px; }
.setbox input { width: 100%; height: 54px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); background: var(--surface); text-align: center; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 4px; }
.setbox input::placeholder { color: var(--ink-3); font-weight: 400; }
.setbox .under { font-size: 11.5px; font-weight: 600; text-align: center; min-height: 15px; margin-top: 3px; color: var(--ink-3); }
.setbox[data-state="suggested"] input { border-style: dashed; color: var(--ink-3); font-style: italic; font-weight: 500; background: transparent; }
.setbox[data-state="draft"] input { border-color: var(--ink); }
.setbox[data-state="pending"] input { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.setbox[data-state="pending"] .cap { color: var(--warn); }
.setbox[data-state="confirmed"] input { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.setbox[data-state="confirmed"] .cap { color: var(--ok); }
.setbox[data-state="skipped"] input { background: repeating-linear-gradient(135deg, var(--surface-2) 0 7px, var(--stone) 7px 14px); border-color: var(--line-strong); color: var(--ink-2); font-size: 15px; letter-spacing: .02em; }
.setbox[data-state="conflict"] input, .setbox[data-state="error"] input { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.setbox[data-state="conflict"] .cap, .setbox[data-state="error"] .cap { color: var(--danger); }
.setbox[data-state="invalid"] input { border-color: var(--danger); background: var(--danger-bg); }
.setbox[data-state="locked"] input { opacity: .62; }  /* dimmed, but the numbers stay readable (above 5:1); the "Set n" caption is not dimmed */
.setbox input:read-only { cursor: default; }
.setbox input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.ex-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; }
.ex-status { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; line-height: 1.25; }
.ex-status.ok { color: var(--ok); font-weight: 600; }
.ex-status.warn { color: var(--warn); font-weight: 600; }
.ex-status.danger { color: var(--danger); font-weight: 600; }
.ex-status .icon { width: 16px; height: 16px; }
.ex-status span { min-width: 0; }
.btn.confirm { min-width: 124px; }
.ex.confirmed .btn.confirm { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); pointer-events: none; }
.ex-note { font-size: 13px; color: var(--ink-2); margin-top: 6px; display: flex; gap: 6px; }
.member.locked .ex-head { opacity: .8; }  /* never the status line: "Marked absent. Change attendance…" must stay readable */

.kbar { position: fixed; left: 0; right: 0; z-index: 80; background: var(--surface); border-top: 1px solid var(--line-strong); display: none; padding: 6px 8px; }
.kbar.on { display: block; }
.kbar-inner { max-width: 680px; margin: 0 auto; display: flex; gap: 8px; align-items: center; }
.kbar .btn { min-height: 44px; }
.kbar .where { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbar .btn { padding: 0 14px; min-width: 48px; }
.fab-row-unused { position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab { min-height: 48px; box-shadow: var(--shadow); }


/* adjust sheet */
.adj-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.adj-row:last-child { border-bottom: 0; }
.adj-set { font-weight: 700; font-size: 14px; }
.adj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); height: 48px; }
.stepper button { height: 100%; border: 0; background: var(--surface-2); font-size: 22px; font-weight: 600; }
.stepper span { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.adj-skip { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* history */
.hist { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; margin-bottom: 10px; }
.hist-sets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.hist-set { text-align: center; border-radius: var(--radius); padding: 6px 2px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.hist-set b { display: block; font-size: 17px; }
.hist-set small { color: var(--ink-3); font-size: 11.5px; }
.hist-set.skip { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--stone) 6px 12px); }

/* conflict */
.conflict-box { border: 1.5px solid var(--danger-line); background: var(--danger-bg); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.vs > div { background: var(--surface); border-radius: var(--radius); padding: 10px; border: 1px solid var(--line); }
.vs b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }

/* login */
.auth { max-width: 420px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top)) var(--gutter) 40px; }
.auth .wordmark { height: 28px; width: auto; display: block; margin-bottom: 40px; }
.auth.has-tagline .wordmark { margin-bottom: 14px; }
.auth .tagline { margin: 0 0 40px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }  /* a label: the brand's small, tracked, uppercase style */
.auth h1 { font-size: 28px; letter-spacing: -.02em; line-height: 1.08; text-transform: uppercase; margin: 0 0 8px; }

/* class list */
.date-nav { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; }
.date-nav .when { flex: 1; text-align: center; font-weight: 700; font-size: 17px; }
.class-card { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; margin-bottom: 10px; min-height: 76px; }
.class-card:active { background: var(--surface-2); }
.class-time { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.class-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.mini-progress { width: 64px; height: 5px; border-radius: var(--radius); background: var(--stone); overflow: hidden; margin-top: 6px; }
.mini-progress i { display: block; height: 100%; background: var(--accent); }

/* admin */
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub a { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 104px; font-weight: 700; }
.hub a span { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; padding-top: 2px; } .kv dd { margin: 0; }
.slot-row { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.slot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot-fields .wide { grid-column: 1 / -1; }
.slot-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.linkbox { word-break: break-all; background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius); border: 1px dashed var(--line-strong); font-size: 13px; }

@media (min-width: 700px) {
  :root { --gutter: 24px; }
  .setbox input { height: 58px; }
}
@media print {
  .nav, .topbar, .class-bar, .fab-row, .kbar, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
}

.tool-btn { position: relative; min-width: 46px; padding: 0 12px; flex: none; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius); background: var(--stone); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--paper); line-height: 1; }
.badge.alert { background: var(--danger-fill); color: var(--on-danger); }
.filters { margin-top: 2px; padding-bottom: 2px; }
.meta-line > span:first-child { font-weight: 600; color: var(--ink); }

.att-group { margin-left: auto; flex: none; display: flex; gap: 6px; align-items: center; }
.att-btn.quick { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.att-group.split .att-btn:not(.quick) { padding: 0 10px; min-width: 40px; justify-content: center; }
.stepper span { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-size: 19px; font-weight: 700; }
.stepper span small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
@keyframes flash-ring { from { box-shadow: 0 0 0 3px var(--focus); } to { box-shadow: 0 0 0 3px transparent; } }
.setbox.flash input { animation: flash-ring 3.5s ease-out; }

.class-id .when { white-space: nowrap; }
.sync-chip { margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.sync-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thin rules on status banners, so a tinted banner is still seen against the light page. */
.banner, .member-banner { border: 1px solid transparent; }
.banner.info, .member-banner.info { border-color: var(--info-line); }
.banner.warn, .member-banner.warn { border-color: var(--warn-line); }
.banner.danger, .member-banner.danger { border-color: var(--danger-line); }
.banner.ok { border-color: var(--ok-line); }

/* The brand pictures come in two files, light on dark and dark on light. The page carries both and the theme shows one. */
.brand-mark.on-light, .wordmark.on-light { display: none; }
:root[data-theme="light"] .brand-mark.on-dark, :root[data-theme="light"] .wordmark.on-dark { display: none; }
:root[data-theme="light"] .brand-mark.on-light, :root[data-theme="light"] .wordmark.on-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-mark.on-dark, :root:not([data-theme="dark"]) .wordmark.on-dark { display: none; }
  :root:not([data-theme="dark"]) .brand-mark.on-light, :root:not([data-theme="dark"]) .wordmark.on-light { display: block; }
}