/* Hanken Grotesk — self-hosted (strict no-CDN rule; OFL.txt alongside the font).
   Variable weight axis 100–900; we use 400–800. Relative url() so WhiteNoise's
   manifest storage rewrites it to the hashed file in production. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk/HankenGrotesk-Variable.c501f578bf3f.woff2") format('woff2');
}

:root {
  /* Brand & neutrals */
  --brand:      #0b6e99;   /* teal — links, primary buttons, placed person */
  --brand-ink:  #095a7e;   /* hover / pressed brand */
  --ink:        #0e1620;   /* headings */
  --body:       #1b2733;   /* body text */
  --muted:      #5b6b7a;   /* secondary text, table labels */
  --card:       #ffffff;
  --subtle:     #f4f7f9;   /* table header, inset panels */
  --page:       #f6f8fa;   /* page background */
  --row-line:   #eef2f5;   /* table row divider */
  --hairline:   #dde4ea;   /* card & control borders */
  --deck-dark:  #0e1620;   /* dark bars (locked banner) */
  --divider:    #cccccc;   /* solid mid-grey band — deck-grid block dividers
                              (#224), matches the club's paper grid's own
                              grey divider rows; distinct from the much
                              lighter --hairline (hairline borders) and
                              --row-line (subtle row tint) */

  /* Status — each a solid + soft-tint pair */
  --ok:         #12864a;  --ok-soft:     #e3f5e9;  /* confirmed / worked / full */
  --warn:       #b5730a;  --warn-soft:   #fdf3e0;  /* in progress / unfilled */
  --danger:     #c22f3a;  --danger-soft: #fdecea;  /* no-show / error */

  /* UI redesign convention (#151): clickable controls use the rounded input,
     button, or pill radii; new static cards, tiles, badges, tables, and overlay
     panels use --r-static. Dense tables have exactly two soft exceptions:
     level pins use 6px and qualification codes use 4px. Native checkboxes stay
     square so multi-select controls do not read as radio buttons. */
  --r-static: 0; --r-code: 4px; --r-pin: 6px; --r-input: 8px; --r-chip: 9px;
  --r-btn: 10px; --r-card: 12px;
  --r-pill: 999px;

  /* Existing spacing — 4px grid */
  --sp-tight: 8px; --sp-base: 12px; --sp-comfy: 14px; --sp-section: 22px;
  /* Opt-in compact-screen scale; legacy screens keep the values above until
     their redesign lands. */
  --sp-row-compact: 2px; --sp-row-comfortable: 6px; --sp-overlay: 8px;
  --sp-card-compact: 10px; --sp-section-compact: 10px;

  /* Elevation */
  --border-flat: 1px solid var(--hairline);
  --shadow-raised: 0 6px 24px rgba(14, 22, 32, 0.14);

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--body);
  background: var(--page);
}

.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--card); border-bottom: var(--border-flat);
  padding: 0.6rem 1.25rem;
}
.brand { font-weight: 800; color: var(--brand); text-decoration: none; font-size: 1.1rem; letter-spacing: -0.01em; }

/* Desktop navigation (#84): two fixed rows, permission-filtered server-side. */
.topbar--authenticated { display: block; padding: 0; border: 0; }
.nav-row-1 { display: flex; align-items: center; gap: 16px; height: 58px;
  padding: 0 24px; background: var(--card); }
.nav-wordmark { flex: 0 0 auto; font-size: 1.15rem; font-weight: 800;
  color: var(--brand); letter-spacing: -0.01em; text-decoration: none; }
.nav-tabs { display: flex; align-items: center; gap: 3px; padding: 4px;
  background: #f0f3f5; border-radius: 10px; }
.nav-tab { padding: 8px 16px; border-radius: 8px; color: var(--muted);
  font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.nav-tab:hover { color: var(--ink); }
.nav-tab--active { color: var(--brand); background: var(--card);
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.12); }
.nav-tab--active:hover { color: var(--brand); }
.nav-account { position: relative; margin-left: auto; }
.nav-account-btn { display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--card); color: var(--body); }
.nav-account-btn:hover { background: var(--card); border-color: #c7cfd6; }
.nav-account-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink); font-size: 0.85rem; font-weight: 700; }
.nav-caret { color: var(--muted); font-size: 0.65rem; }
.nav-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--muted); color: #fff; font-size: 0.66rem; font-weight: 800; }
.nav-account-menu { position: absolute; z-index: 20; top: 42px; right: 0;
  width: min(280px, calc(100vw - 24px)); min-width: 190px; padding: 8px;
  background: var(--card);
  border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(14, 22, 32, 0.16); }
.nav-account-menu[hidden] { display: none; }
.nav-account-summary { display: flex; flex-direction: column; gap: 2px;
  padding: 7px 12px 10px; border-bottom: 1px solid var(--hairline);
  overflow-wrap: anywhere; }
.nav-account-summary strong { color: var(--ink); font-size: 0.9rem; }
.nav-account-summary span, .nav-account-overflow { color: var(--muted);
  font-size: 0.78rem; line-height: 1.35; }
.nav-account-meet-access { padding: 9px 0 4px;
  border-bottom: 1px solid var(--hairline); }
.nav-account-menu-heading { display: block; padding: 0 12px 3px;
  color: var(--muted); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; }
.nav-account-meet-item strong { color: var(--body); font-size: 0.82rem; }
.nav-account-meet-item span { color: var(--muted); font-size: 0.76rem;
  overflow-wrap: anywhere; }
.nav-account-overflow { display: block; padding: 2px 12px 7px; }
.nav-account-menu-item { display: block; width: 100%; padding: 9px 12px;
  border: 0; border-radius: 7px; background: none; color: var(--body);
  font-size: 0.88rem; font-weight: 600; line-height: 1.5; text-align: left;
  text-decoration: none; }
.nav-account-menu-item.nav-account-meet-item { display: flex;
  flex-direction: column; align-items: flex-start; gap: 1px; }
.nav-account-menu-item--primary { color: var(--brand); font-weight: 800; }
.nav-account-menu-item:hover { background: var(--subtle); color: var(--body); }
.nav-account-menu-item--primary:hover { color: var(--brand); }
.nav-account-logout { margin: 0; }
.nav-row-2 { display: flex; align-items: center; height: 42px; padding: 0 24px;
  background: var(--subtle); border-top: 1px solid var(--row-line);
  border-bottom: 1px solid var(--hairline); }
.nav-row-2 nav { display: flex; align-items: center; gap: 22px; }
.nav-sub { color: var(--muted); font-size: 0.83rem; font-weight: 600;
  text-decoration: none; }
.nav-sub:hover { color: var(--ink); }
.nav-sub--active { color: var(--brand); font-weight: 700; }
.nav-sub--active:hover { color: var(--brand); }
.nav-tab:focus-visible, .nav-sub:focus-visible, .nav-account-btn:focus-visible,
.nav-account-menu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Attention count on a nav tab/sub-item (e.g. pending member approvals). */
.nav-badge { display: inline-block; min-width: 1.1rem; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 1.25rem; text-align: center;
  vertical-align: middle; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }

h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
a { color: var(--brand); }
.muted { color: var(--muted); }
.small { font-size: 0.84rem; }

.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.search { display: flex; gap: 0.5rem; }

.card {
  background: var(--card); border: var(--border-flat); border-radius: var(--r-card);
  padding: var(--sp-section); margin-bottom: 1.25rem;
}
.card.narrow { max-width: 480px; }
/* Compose card (Messaging editor): wide enough to write an email in, and the
   subject/name inputs stay readable rather than stretching the full width. */
.card.compose { max-width: 860px; }
.card.compose input[type="text"] { max-width: 520px; }
.columns { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.columns .card { flex: 1 1 300px; }
.columns .card.grow { flex: 2 1 480px; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: var(--border-flat); border-radius: var(--r-card); overflow: hidden; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 12px 18px; }
/* Header band: thead, or the leading th row of thead-less tables */
table.data thead th, table.data tr:first-child th { background: var(--subtle); color: var(--muted);
  font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  white-space: nowrap; }
table.data td { padding: 13px 18px; border-top: 1px solid var(--row-line); font-size: 0.92rem; }
table.data tr:first-child td { border-top: none; }
/* Footer/summary th rows (e.g. a "Total" row) keep the row divider */
table.data tbody tr:not(:first-child) th { border-top: 1px solid var(--row-line); }
/* Density is explicitly opt-in so screens migrate without changing legacy
   tables. Keep horizontal padding intact; only row height changes. */
table.data[data-density="comfortable"] th,
table.data[data-density="comfortable"] td { padding-block: var(--sp-row-comfortable); }
table.data[data-density="compact"] th,
table.data[data-density="compact"] td { padding-block: var(--sp-row-compact); }

.chip {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 0.76rem; font-weight: 600; margin: 0.1rem 0.15rem 0.1rem 0; white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
/* Generic neutral info chip (e.g. a sign-up's "Submitted" status). Renamed from
   .chip.level — that name collided with the level-pin scale below, and its blue
   read as Level 5 once the pins took the real Swimming Canada colours. */
.chip.info { background: #e8f0fe; color: #25467a; }
.chip.locked { background: var(--deck-dark); color: #fff; font-weight: 700; }
/* Meet phase chips (#306): Closed is neutral grey; the Published badge is an
   outline so it never reads as a second status. */
.chip.closed { background: #eceef1; color: #4a5260; }
.chip.published { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 1px currentColor; }
/* Roster "Positions" column (#68, three states since #82 — Sherry): one green
   scale where shade = sign-off progress. ALL states can work the role
   (eligibility = has the course); the shade only says how far the sign-offs
   are. Solid = signed off · soft + dark ring = sign-offs started · soft =
   course done. The ring is an inset box-shadow, not a border, so pill
   geometry doesn't shift between states. */
.chip.pos-done { background: var(--ok); color: #fff; font-weight: 700; }
.chip.pos-mid { background: var(--ok-soft); color: var(--ok); font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--ok); }
.chip.pos-wip { background: var(--ok-soft); color: var(--ok); }
.chip.pos-opt { background: var(--subtle); color: var(--muted);
  border: 1px solid var(--hairline); }
.chip.pos-done, .chip.pos-mid, .chip.pos-wip, .chip.pos-opt { border-radius: var(--r-code); }

/* Level pins (#24): mirror the real Swimming Canada official pins, so the colour
   means what officials already recognise on deck —
   L1 #ea1d3e/white · L2 #fff/#33404d with #c4ccd4 border ·
   L3 #f6641e/#1b2733 · L4 #166534/white · L5 #1e3a8a/white. These exact values
   are domain truth, not styling; see docs/HANDOFF-federation.md for the colour
   source. Never substitute semantic status tokens.
   Pins use the deliberate 6px soft-square exception and are never pill-shaped —
   shape is load-bearing so a green L4 pin never reads as a green status chip.
   Solid = board/glare surfaces;
   .lvlpin--soft = dense laptop tables (same hue, tinted bg + dark same-hue ink).
   L2 is white and ALWAYS carries its border or it vanishes on light surfaces. */
.lvlpin {
  display: inline-block; min-width: 1.4em; text-align: center;
  padding: 2px 8px; border-radius: var(--r-pin); font-size: 0.72rem;
  font-weight: 800; letter-spacing: 0.01em;
}
/* L1/L3 hues are the native macOS Digital Color Meter readings off the real
   pins (Ben, 2026-07-04): red rgb(234,29,62), orange rgb(246,100,30). The
   brighter, clearly-separated red vs orange is the point — they were too close
   before. Orange takes dark ink (white on it is only ~3.1:1); red keeps white. */
.lvlpin.level-1 { background: #ea1d3e; color: #fff; }
.lvlpin.level-2 { background: #ffffff; color: #33404d; border: 1.5px solid #c4ccd4; }
.lvlpin.level-3 { background: #f6641e; color: #1b2733; }
.lvlpin.level-4 { background: #166534; color: #fff; }
.lvlpin.level-5 { background: #1e3a8a; color: #fff; }
.lvlpin--soft.level-1 { background: #fde4e7; color: #b21230; }
.lvlpin--soft.level-2 { background: #ffffff; color: #33404d; border: 1px solid #c4ccd4; }
.lvlpin--soft.level-3 { background: #ffe6d5; color: #b34410; }
.lvlpin--soft.level-4 { background: #dcfce7; color: #166534; }
.lvlpin--soft.level-5 { background: #dbeafe; color: #1e3a8a; }
.lvlpin--sub { background: #1b2733; color: #fff; min-width: 1.4em; }

/* Colour→level key; render wherever pins appear unlabelled (board, roster).
   Doubles as the colour-blind / glare fallback. */
.lvl-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--muted); margin: 0.35rem 0 0.9rem; }

.flash.locked-banner { background: var(--deck-dark); color: #fff; border-color: var(--deck-dark); }

/* Attendance confirmation (M5 step 3): muted by default, bold-coloured when chosen */
.att-set button { margin-right: 0.3rem; background: var(--row-line); color: var(--muted);
  padding: 7px 14px; font-size: 0.85rem; font-weight: 600; border-radius: var(--r-input); }
.att-set button:hover { background: var(--hairline); color: var(--body); }
.att-set button.on-worked { background: var(--ok); color: #fff; font-weight: 700; }
.att-set button.on-worked:hover { background: var(--ok); color: #fff; }
.att-set button.on-noshow { background: var(--warn); color: #fff; font-weight: 700; }
.att-set button.on-noshow:hover { background: var(--warn); color: #fff; }
.att-progress { font-size: 1.05rem; margin-bottom: 0.4rem; }
.att-meter { margin-bottom: 1.1rem; }

.cred { display: block; font-size: 0.85rem; }

input, select, textarea {
  font: inherit; padding: 0.5rem 0.7rem; border: var(--border-flat);
  border-radius: var(--r-input); width: 100%; background: var(--card);
}
input[type="checkbox"] { border-radius: var(--r-static); width: auto; }
textarea { resize: vertical; min-height: 4.5rem; }
form div { margin-bottom: 0.75rem; }
label { display: block; font-size: 0.9rem; margin-bottom: 0.5rem; }
button {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  background: var(--brand); color: #fff; border: none;
  border-radius: var(--r-btn); padding: 0.55rem 1.1rem; cursor: pointer;
}
button:hover { background: var(--brand-ink); }
button.linklike { background: none; color: var(--brand); padding: 0; font-weight: 600; text-decoration: underline; }
button.linklike:hover { background: none; color: var(--brand-ink); }
button.linklike.danger { color: var(--danger); }
button.btn-danger { background: var(--danger); }
button.btn-danger:hover { background: #a5232d; }
/* One PRIMARY action per view (the next lifecycle step); everything else is
   secondary. Base <button> is the primary look; .btn-secondary quiets it. */
button.btn-secondary { background: var(--card); color: var(--brand);
  border: 1.5px solid var(--brand); padding: calc(0.55rem - 1.5px) calc(1.1rem - 1.5px); }
button.btn-secondary:hover { background: var(--subtle); color: var(--brand-ink); }
/* Buttons inside table rows: compact, never mid-word wrapped */
table.data button { white-space: nowrap; padding: 7px 14px; font-size: 0.85rem; }
.row-actions { display: flex; gap: 0.9rem; align-items: center; }
.row-actions form { display: inline; margin: 0; }

details.slotlist { margin-top: 0.75rem; }
details.slotlist > summary {
  cursor: pointer; font-weight: 600; color: var(--muted);
  padding: 0.3rem 0; user-select: none;
}
details.slotlist > summary:hover { color: var(--ink); }
details.slotlist[open] > summary { margin-bottom: 0.4rem; }
button.toggle { background: var(--row-line); color: var(--muted); font-weight: 600; padding: 0.25rem 0.75rem; font-size: 0.85rem; border-radius: var(--r-input); }
button.toggle:hover { background: var(--hairline); color: var(--body); }
button.toggle.on { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
button.toggle.on:hover { background: var(--ok-soft); }

.inline-form { max-width: 420px; }

.selfmark { color: var(--warn); font-weight: 700; margin-left: 0.1rem; }

.rowform { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.rowform div { margin: 0; }
/* Text inputs in an inline row (e.g. the unlock "reason") must not grab the
   global width:100% and push the button onto a second line. */
.rowform input[type="text"] { width: auto; min-width: 13rem; }
/* Let the header action cluster wrap instead of stretching one control full-width */
.page-head > .rowform { flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
input.tiny { width: 4rem; padding: 0.25rem 0.4rem; }
.inlinecheck { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; font-size: 0.85rem; }
.inlinecheck input { width: auto; }
.reqgrid { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.reqitem { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; background: var(--row-line); border-radius: var(--r-input); padding: 0.25rem 0.6rem; }

/* Assignment board: the scroll wrapper owns horizontal movement; the pool is
   its sibling so document scrolling can keep that sidebar sticky. */
.board-root { position: relative; }
.board-shell { display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start; gap: var(--sp-card-compact); }
.board-scroll { max-width: 100%; overflow-x: auto; border: var(--border-flat);
  border-radius: var(--r-static); background: var(--card); }
.board-scroll:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.board-matrix { width: max(100%, calc(155px + var(--board-session-width)));
  table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.board-label-column { width: 155px; }
.board-session-column { width: 168px; }
.board-matrix th, .board-matrix td { width: 168px; min-width: 168px; max-width: 168px;
  padding: var(--sp-row-comfortable) 8px;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  vertical-align: middle; text-align: left; background: var(--card); }
.board-matrix thead th { background: var(--subtle); text-align: center;
  font-weight: 750; white-space: nowrap; }
.board-matrix tr > :last-child { border-right: 0; }
.board-matrix tbody:last-child tr:last-child > * { border-bottom: 0; }
.board-matrix .board-frozen { position: sticky; left: 0; z-index: 3; min-width: 155px;
  max-width: 155px; background: var(--card); box-shadow: 1px 0 0 var(--hairline); }
.board-matrix thead .board-frozen { z-index: 5; background: var(--subtle); }
.board-position-band > th, .board-position-band > td { background: var(--row-line);
  color: var(--ink); font-weight: 800; }
.board-position-band .board-frozen { background: var(--row-line); }
/* Pool ends (#226): a role worked at one end names it on its band row, and a
   role split across ends in a multi-tank session captions each shared cell. */
.board-end-tag { display: inline-block; max-width: 100%; padding: 1px 7px;
  border-radius: var(--r-input); background: var(--card); color: var(--muted);
  font-size: 0.72rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
.board-end-caption { display: block; margin-bottom: 2px; color: var(--muted);
  font-size: 0.7rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.board-summary-part { white-space: nowrap; }
/* `.board-matrix td` sets text-align: left at higher specificity; keep the
   #225 summary centred, so a wide multi-column span stays readable. */
.board-matrix .board-summary-cell { text-align: center; overflow-wrap: anywhere; }
.board-matrix thead th.board-end-column { white-space: normal; overflow-wrap: anywhere; }
/* Deck-grid block gap (#224): a solid grey divider band above the first
   tbody of each grid_group, matching the club's own paper-grid divider rows.
   border-collapse is `separate`, so this per-cell border works with the
   sticky frozen column (it's just another cell in the row) without
   disturbing the collapsed row borders above it. */
.board-matrix .board-group-start > tr:first-child > * { border-top: 12px solid var(--divider); }
.board-row-label { color: var(--muted); font-weight: 600; }
/* Collapsible position bands (#225): the tbody's data-collapsed swaps the slot
   rows for one per-session "n / m filled" summary row. */
.board-collapse-controls { display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-overlay); }
/* Long role names wrap in the 155px frozen column. One flex line (the name's
   zero basis never forces a wrap) is centred in the button via align-content,
   while align-items keeps the icon level with the name's first line; the
   explicit justify-content beats the phone rule that centres every button. */
.board-band-toggle { display: flex; flex-wrap: wrap; align-content: center;
  align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%;
  min-width: 0; min-height: 30px; padding: 2px 4px; border: 0; border-radius: var(--r-input);
  background: transparent; color: inherit; font: inherit; font-weight: 800; text-align: left; }
.board-band-toggle:hover { background: var(--hairline); color: inherit; }
.board-band-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.board-band-toggle > [data-board-band-name] { flex: 1 1 0; min-width: 0;
  white-space: normal; overflow-wrap: break-word; }
.board-band-icon { flex: 0 0 auto; width: 1em; color: var(--muted); }
.board-band-icon::before { content: "\25BE"; }
.board-band-toggle[aria-expanded="false"] .board-band-icon::before { content: "\25B8"; }
.board-matrix tbody[data-collapsed="true"] > tr:not(.board-position-band):not(.board-position-summary),
.board-matrix tbody:not([data-collapsed="true"]) > .board-position-summary { display: none; }
.board-summary-cell { position: relative; color: var(--muted); font-weight: 650; text-align: center; }
.board-summary-warning { color: var(--danger); font-weight: 800; }
.board-position-band.is-armed-target > th, .board-position-band.is-armed-target > td {
  background: var(--ok-soft); box-shadow: inset 0 2px 0 var(--ok), inset 0 -2px 0 var(--ok); }
.board-position-band.is-armed-target .board-band-toggle { color: var(--ok); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media print {
  .board-matrix tbody > tr:not(.board-position-summary) { display: table-row !important; }
  .board-matrix .board-position-summary, .board-collapse-controls,
  .board-band-icon { display: none !important; }
}
.board-session-meta { display: block; margin-top: 2px; color: var(--muted);
  font-size: 0.72rem; font-weight: 500; }
.board-cell { position: relative; height: 46px; }
.board-cell--blank { background: var(--subtle); }
.board-cell.is-armed-target { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.dropzone { display: grid; list-style: none; margin: 0; padding: 0; min-height: 34px;
  min-width: 0; }
.dropzone > * { grid-area: 1 / 1; }
.board-open-item { min-width: 0; list-style: none; }
.dropzone:has(.person) .board-open-item { visibility: hidden; }
.person { display: flex; align-items: center; gap: 5px; margin: 0; padding: 3px;
  width: 100%; min-width: 0; min-height: 34px; border-radius: var(--r-chip);
  background: var(--brand); color: #fff;
  font-size: 0.84rem; font-weight: 650; list-style: none; }
.person.unverified { background: var(--warn); }
.board-referee-warning { margin: 4px 0 0; font-size: 0.72rem; line-height: 1.3;
  color: var(--danger); overflow-wrap: anywhere; }
.board-preference-warning { margin: 4px 0 0; color: var(--muted);
  font-size: 0.72rem; line-height: 1.3; overflow-wrap: anywhere; }
.board-preference-warning .help-disclosure { margin: 2px 0 0; font-size: inherit; }
.board-drag-handle { flex: 0 0 auto; padding: 4px 2px; font-size: 1rem;
  line-height: 1; cursor: grab; user-select: none; }
.board-person-button, .board-arm-button { display: flex; flex: 1; align-items: center;
  min-width: 0; padding: 4px 5px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.board-person-button > span, .board-arm-button > span,
.board-picker-choice > span, .board-picker [data-board-person-display] {
  display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-person-button > span > span:last-child, .board-arm-button > span > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name shortens first; the team code ("(LLST)") and ⚠ always show. */
.board-person-button [data-board-person-name], .board-arm-button [data-board-person-name],
.board-picker [data-board-person-name] {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-person-team { flex-shrink: 0; font-weight: 500; white-space: nowrap; }
.board-open-button { width: 100%; padding: 7px 9px; border: 1.5px dashed #d9b25f;
  background: var(--warn-soft); color: #8a6210; font-weight: 750; text-align: left; }
.board-open-label { color: var(--muted); }
/* A closed spot (#301): not needed, greyed out, no drop target. */
.board-cell--closed { background: var(--subtle); }
.board-closed-item { min-width: 0; list-style: none; }
.board-closed-button { width: 100%; padding: 7px 9px; border: 1px solid var(--hairline);
  background: transparent; color: var(--muted); font-weight: 650; text-align: left;
  cursor: pointer; }
.board-closed-label { color: var(--muted); }
.board-pool { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
  padding: var(--sp-card-compact); border: var(--border-flat); border-radius: var(--r-static);
  background: var(--card); }
.board-pool h2 { margin: 0 0 var(--sp-card-compact); }
.board-person-card { position: relative; padding: var(--sp-card-compact);
  border: var(--border-flat); border-radius: var(--r-static); background: var(--card);
  color: var(--body); font-size: 0.8rem; font-weight: 500; box-shadow: var(--shadow-raised); }
.board-person-card-heading { padding-right: 22px; font-size: 0.86rem; }
.board-person-card-section { margin-top: var(--sp-overlay); }
.board-person-card-label { display: block; margin-bottom: 4px; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.board-person-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.board-person-card-chips .chip { margin: 0; padding: 2px 6px; font-size: 0.7rem; }
.board-person-card-empty, .board-person-card-note, .board-person-card-warning {
  margin: var(--sp-overlay) 0 0; line-height: 1.3; }
.board-person-card-warning { color: var(--warn); font-weight: 700; }
.board-person-card-warning.muted { color: var(--muted); font-weight: 500; }
.board-person-card-close { position: absolute; top: 3px; right: 3px; min-width: 30px;
  padding: 2px 7px; border: 0; background: transparent; color: var(--muted);
  font-size: 1.2rem; line-height: 1; }
.board-selected-person-card { margin-bottom: var(--sp-card-compact); }
.board-person-popover { position: absolute; z-index: 60; width: min(300px, calc(100vw - 16px));
  padding: 0; pointer-events: none; }
.board-person-popover .board-person-card { box-shadow: var(--shadow-raised); }
.board-qualification-key { gap: 4px 10px; margin-top: var(--sp-card-compact); }
.board-qualification-key .roster-key-item { gap: 3px; }
.board-qualification-key .chip { margin: 0; padding: 1px 4px; font-size: 0.64rem; }
.board-pool label { display: block; margin-bottom: var(--sp-card-compact);
  color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.board-pool select { margin-top: 3px; }
.board-pool-list { min-height: 64px; margin: var(--sp-card-compact) 0 0; padding: 0;
  list-style: none; }
.board-pool-person { margin-bottom: 5px; background: var(--subtle); color: var(--body);
  border: 1px solid var(--hairline); }
.board-pool-person[hidden] { display: none; }
.board-pool-person:has(.board-arm-button[aria-pressed="true"]) { border-color: var(--brand);
  background: #eaf3f5; box-shadow: inset 0 0 0 1px var(--brand); }
.board-pool .board-pool-switch { display: flex; align-items: center; gap: 6px;
  color: var(--body); font-weight: 650; cursor: pointer; }
.board-pool-switch input { margin: 0; }
.board-arm-button, .board-picker-choice { flex-wrap: wrap; row-gap: 1px; }
.board-arm-button > [data-board-person-display],
.board-picker-choice > [data-board-person-display] { flex: 1 0 100%; }
.board-pool-asked { flex-basis: 100%; min-width: 0; color: var(--muted);
  font-size: 0.72rem; font-weight: 500; overflow-wrap: anywhere; }
.board-picker-section { margin: var(--sp-overlay) 0 2px; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.board-picker-section:first-child { margin-top: 0; }
.board-arm-status { min-height: 2.4em; margin: var(--sp-card-compact) 0 0;
  color: var(--brand-ink); font-size: 0.8rem; font-weight: 700; }
.board-picker { z-index: 40; min-width: 230px; max-width: 320px; }
.board-picker h3 { margin: 0 0 var(--sp-overlay); font-size: 0.86rem; }
.board-picker-choice, .board-picker-action { display: flex; align-items: center; gap: 6px;
  width: 100%; margin: 2px 0; padding: 7px 8px; border: 0; background: transparent;
  color: var(--body); font-size: 0.84rem; font-weight: 650; text-align: left; }
.board-picker-choice:hover, .board-picker-action:hover { background: var(--subtle); }
.board-picker-actions { display: flex; gap: 6px; margin-top: var(--sp-overlay); }
.board-picker-actions .board-picker-action { justify-content: center; border: var(--border-flat); }
.board-picker-actions .remove { color: var(--danger); }
.board-picker-actions .move { color: var(--ok); }
.board-picker .lvlpin { flex-shrink: 0; }
.board-picker-substitute { display: flex; gap: 6px; margin-top: var(--sp-overlay);
  padding-top: var(--sp-overlay); border-top: var(--border-flat); }
.board-picker-substitute input { flex: 1; padding: 5px 8px; border: var(--border-flat);
  border-radius: var(--r-static); font-size: 0.84rem; background: var(--bg); color: var(--body); }
.board-picker-substitute .board-picker-action { flex-shrink: 0; width: auto; border: var(--border-flat);
  justify-content: center; min-width: 56px; }
.meter { height: 8px; background: var(--row-line); border-radius: var(--r-pill);
  overflow: hidden; width: 240px; max-width: 50%; }
.meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--warn); }
.meter.full > i { background: var(--ok); }
/* Inline meter inside a <summary> — the collapsed "Staffing needed" bar (#2). */
.summary-meter { display: inline-block; vertical-align: middle; margin-left: 0.5rem; }

/* Volunteer points report (#5): summary tiles + per-official magnitude bars.
   Bars use the brand hue (identity/magnitude), NOT the status amber/green —
   they aren't progress toward a target; numbers stay in text tokens. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem; margin: 1rem 0; max-width: 34rem; }
.stat-tile { background: var(--card); border: var(--border-flat);
  border-radius: var(--r-card); padding: 0.75rem 1rem; display: flex;
  flex-direction: column; gap: 0.1rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--muted); }
td.bar-col, th.bar-col { width: 30%; }
.points-meter { display: inline-block; vertical-align: middle; width: 100%; max-width: none; }
.points-meter > i { background: var(--brand); }

/* "Staffing needed" tiles (#71): per-position fill bar + editable needed qty.
   Reuses .meter (full-width here). Kept off .reqgrid, which the availability
   sign-up page still uses. */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem; margin-bottom: 0.75rem; }
.staff-tile { background: var(--subtle); border: var(--border-flat);
  border-radius: var(--r-input); padding: 0.5rem 0.6rem; }
.staff-head { display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; margin-bottom: 0.45rem; }
.staff-code { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.staff-qty { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; }
.staff-qty .tiny { width: 3.4rem; padding: 0.15rem 0.35rem; text-align: center; }
.staff-tile .meter { width: 100%; max-width: none; }
.staffing-hint { margin: 0.3rem 0 0; line-height: 1.2; }

.grid-session { margin-bottom: 1.5rem; }
.print-only { display: none; }

/* Posted grid — "Your assignments" (#104 D3): a signed-in official's own spots,
   surfaced above the full grid. Useful on desktop too, phone-first by nature. */
.myassign { border-left: 3px solid var(--brand); }
.myassign h2 { margin-top: 0; }
.myassign-list { list-style: none; margin: 0; padding: 0; }
.myassign-list li { padding: 0.6rem 0; border-top: 1px solid var(--row-line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; }
.myassign-list li:first-child { border-top: none; }
.myassign-what { font-weight: 700; color: var(--ink); }
.myassign-when { color: var(--muted); font-size: 0.85rem; }
/* Repeated role label: hidden in the grouped desktop grid, shown once the table
   stacks into per-lane cards on a phone (see the .stack block below). */
.rolerep { display: none; }
@media print {
  .topbar, .no-print, form { display: none !important; }
  .print-only { display: block; }
  main { margin: 0; max-width: none; }
  table.data { border: 1px solid #999; }
}

.flash { padding: 11px 16px; border-radius: var(--r-chip); margin-bottom: 1rem;
  font-size: 0.9rem; font-weight: 500; background: #e8f0fe; color: #25467a; }
.flash.error { background: var(--danger-soft); color: var(--danger); }
.flash.success { background: var(--ok-soft); color: var(--ok); }
.flash.warn { background: var(--warn-soft); color: var(--warn); }
ul.flags li { margin-bottom: 0.3rem; }

/* Messaging: Quill 2.0.3 rich-text editor (Team Messaging, #17 redesign).
   Vendored js/quill.min.js + css/quill.snow.css (BSD-3), pinned — same no-CDN
   discipline as htmx/SortableJS. These overrides tie the snow theme to the app
   tokens; body min-heights use max(px, vh) so the editor is generous on tall
   screens but never collapses if a context reports 0 viewport height. */
.ql-toolbar.ql-snow { border-color: var(--hairline); border-top-left-radius: var(--r-input); border-top-right-radius: var(--r-input); background: var(--subtle); }
.ql-container.ql-snow { border-color: var(--hairline); border-bottom-left-radius: var(--r-input); border-bottom-right-radius: var(--r-input); font-family: var(--font); font-size: 0.95rem; }
.ql-editor { min-height: max(320px, 40vh); transition: min-height 0.15s ease; }
/* Grow while actually writing (feedback: the editor should take up more of
   the screen when selected). Focus lives on the contenteditable inside. */
.ql-container:focus-within .ql-editor { min-height: max(480px, 62vh); }
.ql-snow a { color: var(--brand); }

/* --- Staging banner (Phase 5) --------------------------------------------
   Shown only when SITE_ENV=staging. Amber rather than red: this is a standing
   condition, not an error, and a red bar on every page stops being read within
   a day. Sticky so it survives scrolling — the moment it can be scrolled away
   is the moment someone forgets which site they are on. */
.envbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--warn);
  color: #fff;
  padding: .45rem 1rem;
  font-size: .875rem;
  line-height: 1.35;
  text-align: center;
  letter-spacing: .01em;
}
.envbar strong { letter-spacing: .06em; }

/* A tinted page background as a second, peripheral signal — you register it
   before you have read anything. */
body.staging { background: #fffaf0; }

@media print { .envbar { display: none !important; } }

/* ==========================================================================
   LANDING PAGE — public home for anonymous visitors
   ========================================================================== */
.landing-hero {
  display: grid; grid-template-columns: 1fr 300px; gap: 2rem;
  align-items: center; margin-bottom: 2rem;
}
.landing-hero-text h1 { margin: 0 0 0.5rem; }
.landing-hero-text p { color: var(--muted); margin: 0; line-height: 1.7; font-size: 1rem; }

.landing-login {
  padding: 1.25rem; margin-bottom: 0;
}
.landing-login form { display: flex; flex-direction: column; gap: 0.5rem; }
.landing-login input { font-size: 0.9rem; }

.landing-section-head {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--muted); margin: 0 0 1rem;
}

.landing-meets { margin-bottom: 2rem; }

.landing-meet-card {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: center;
  background: var(--card); border: var(--border-flat); border-radius: var(--r-card);
  padding: 1rem 1.25rem; margin-bottom: 0.75rem;
}
.landing-meet-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.landing-meet-title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.landing-meet-meta { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

.landing-meet-action {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem; min-width: 110px;
}
.landing-signup-btn {
  display: inline-block; background: var(--brand); color: #fff;
  padding: 0.45rem 1.2rem; border-radius: var(--r-btn);
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
}
.landing-signup-btn:hover { background: var(--brand-ink); color: #fff; }

.landing-spots { font-size: 0.78rem; color: var(--muted); }
.landing-spots--open { color: var(--ok); font-weight: 600; }

.landing-badge {
  display: inline-block; font-size: 0.78rem; font-weight: 600;
  padding: 0.2rem 0.7rem; border-radius: var(--r-chip);
}
.landing-badge--opening { background: var(--warn-soft); color: var(--warn); }
.landing-badge--closed { color: var(--muted); border: 1px solid var(--hairline); }

/* ==========================================================================
   CLUB MANAGEMENT — add form layout + status pills
   ========================================================================== */
.club-dialog { border: none; border-radius: var(--r-card); padding: 1.5rem;
  width: min(420px, 90vw); box-shadow: var(--shadow-raised);
  background: var(--card); color: var(--body);
}
.club-dialog::backdrop { background: rgba(14, 22, 32, 0.4); }
.club-dialog h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.club-dialog-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.club-dialog-fields label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.club-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.btn-secondary { background: var(--subtle); color: var(--body); border: var(--border-flat); }
.btn-secondary:hover { background: var(--hairline); }
.club-field-hint { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: '⇅'; margin-left: 0.3em; opacity: 0.3; font-size: 0.8em; }
th.sortable[aria-sort="ascending"]::after { content: '↑'; opacity: 0.7; }
th.sortable[aria-sort="descending"]::after { content: '↓'; opacity: 0.7; }

.status-pill {
  display: inline-block; font-size: 0.78rem; font-weight: 600;
  padding: 0.15rem 0.6rem; border-radius: var(--r-chip);
}
.status-pill--ok { background: var(--ok-soft); color: var(--ok); }
.status-pill--muted { background: var(--subtle); color: var(--muted); }

/* ==========================================================================
   RESPONSIVE LAYER — Mobile / PWA Phase 1, item 1 (#104)
   ------------------------------------------------------------------------
   Additive override layer (PLAN-mobile-pwa.md D1): the desktop rules above are
   untouched; everything mobile lives here, at the end, and overrides by MATCHING
   the desktop selector's specificity (never !important — that would poison a
   future mobile-first migration). Two breakpoints, deliberately few:

     900px — the "nothing breaks" tier. Every `table.data` becomes horizontally
             scrollable instead of forcing the page wide (kills the 641–900px
             overflow dead zone the audit flagged). Card max-widths reset; page
             padding tightens. The nav hamburger (item 2) lands at this width too.
     640px — the phone tier. Tables that OPT IN with `.stack` (data-label on each
             <td>, added per-screen in items 3–6) reflow from rows into labelled
             cards. Un-converted tables keep the 900px scroll fallback, so no
             screen is ever broken mid-migration.
   ========================================================================== */

/* "Best on desktop" notice (item 8, D6): admin/coordinator screens stay
   desktop-first this track; a phone gets this small dismissible note instead of
   responsive work. Hidden by default, shown only on narrow screens. Nothing
   *breaks* regardless — the 900px table scroll safety net above handles that. */
.desktop-notice { display: none; }
@media (max-width: 640px) {
  .desktop-notice {
    display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
    padding: 0.6rem 0.85rem; background: var(--warn-soft); color: var(--warn);
    border: 1px solid #f0dcae; border-radius: var(--r-chip); font-size: 0.85rem;
  }
  .desktop-notice-x {
    margin-left: auto; padding: 0 0.4rem; background: none; color: inherit;
    border: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
  }
  .desktop-notice-x:hover { background: none; color: var(--warn); }
}

/* Safe-area insets (item 7): when installed as a standalone PWA with
   viewport-fit=cover, keep the top bars and page clear of the notch / rounded
   corners. No-op in a normal browser (insets resolve to 0).

   NOTE: `main` and `.nav-row-1` are re-padded by the mobile media queries below
   (shorthand `padding`, later in source order), which would wipe a longhand
   inset set here. Their inset handling therefore lives INSIDE those media
   queries, folded into a `max()` against the per-breakpoint mobile value so the
   tight phone padding is the floor and only the notch widens it. Elements not
   overridden at mobile widths (.envbar top, .topbar, .nav-row-2) stay here. */
@supports (padding: max(0px, env(safe-area-inset-left))) {
  .envbar { padding-top: max(0.45rem, env(safe-area-inset-top)); }
  .topbar { padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right)); }
  .nav-row-2 { padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right)); }
}

/* Hamburger (item 2). Hidden on desktop; the three bars are drawn in CSS (one
   <span> + its ::before/::after) so no icon asset is needed. */
.nav-burger { display: none; }
.nav-burger-bars, .nav-burger-bars::before, .nav-burger-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-burger-bars { position: relative; }
.nav-burger-bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav-burger-bars::after { content: ""; position: absolute; top: 6px; left: 0; }

/* Generic square floating panel, introduced by the roster redesign (#152).
   The assignment board reuses this same hidden-toggle overlay in #155. */
.overlay-anchor { position: relative; margin: 0; }
.ui-overlay { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 70vh; overflow-y: auto; padding: var(--sp-overlay);
  background: var(--card); border: var(--border-flat); border-radius: var(--r-static);
  box-shadow: var(--shadow-raised); }
.ui-overlay[hidden] { display: none; }
.ui-overlay fieldset { margin: 0 0 var(--sp-overlay); padding: 0 0 var(--sp-overlay);
  border: 0; border-bottom: 1px solid var(--row-line); }
.ui-overlay legend { margin-bottom: 4px; color: var(--ink); font-weight: 700; }
.ui-overlay .overlay-choice { display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 4px; white-space: nowrap; }
.ui-overlay .overlay-choice input { width: auto; margin: 0; }
.ui-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; color: currentColor; }
.ui-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Officials roster (#152): compact, laptop-first, and isolated from legacy
   tables so unchanged screens keep their existing spacing and corners. */
.roster-page { background: var(--card); border: var(--border-flat);
  border-radius: var(--r-static); padding: var(--sp-card-compact); }
.roster-heading { display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-section-compact); margin-bottom: var(--sp-section-compact); }
.roster-heading h1, .roster-heading p { margin: 0; }
.roster-toolbar { display: flex; align-items: center; gap: var(--sp-overlay);
  margin: 0 0 6px; }
.roster-toolbar > input[type="search"] { max-width: 300px; }
.roster-toolbar .roster-control { display: inline-flex; align-items: center; gap: 6px;
  color: var(--body); border-color: var(--hairline); }
.roster-display-anchor { margin-left: auto; }
.roster-display-anchor .ui-overlay { right: 0; left: auto; }
.roster-filter-overlay { min-width: 280px; }
.roster-display-overlay { min-width: 230px; }
.roster-fixed-column { color: var(--muted); }
.roster-filter-chips { margin: 4px 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--r-pill); background: var(--subtle); font-size: 0.82rem; }
.filter-chip a { color: var(--muted); text-decoration: none; font-weight: 800; }
.roster-qualification-key { display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 18px; margin: 4px 0 6px; }
/* Each swatch sits tight against its own label; the wider gap between items
   keeps a label from reading as belonging to the next swatch. */
.roster-key-item { display: inline-flex; align-items: center; gap: 5px; }
.roster-table-wrap { overflow-x: auto; }
table.data.roster-table { border-radius: var(--r-static); min-width: 700px; }
table.data.roster-table th, table.data.roster-table td { padding-inline: 9px;
  vertical-align: middle; white-space: nowrap; }
table.data.roster-table thead th { background: var(--card); color: var(--body);
  text-transform: none; letter-spacing: 0; font-size: 0.76rem; }
.roster-check { width: 30px; text-align: center; }
.roster-check input { width: auto; margin: 0; accent-color: var(--brand); }
.roster-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.roster-positions { display: inline-flex; align-items: center; gap: 2px; }
.roster-positions .chip { margin: 0; padding: 1px 5px; font-size: 0.7rem; }
.position-more { padding: 2px 6px; border: var(--border-flat); border-radius: var(--r-pill);
  background: var(--card); color: var(--brand); font-size: 0.7rem; font-weight: 600; }
.position-more:hover { background: var(--subtle); color: var(--brand-ink); }
.roster-bulk-bar { position: sticky; bottom: 8px; z-index: 10; display: flex;
  align-items: center; gap: var(--sp-overlay); margin: var(--sp-overlay) 0;
  padding: var(--sp-overlay); background: var(--card); border: var(--border-flat);
  border-radius: var(--r-static); box-shadow: var(--shadow-raised); }
.roster-bulk-bar[hidden] { display: none; }
.roster-bulk-bar [data-email-hint] { margin-left: auto; }
.roster-footer { display: flex; justify-content: space-between; gap: var(--sp-overlay);
  padding-top: 6px; color: var(--muted); font-size: 0.82rem; }

@media (max-width: 900px) {
  main { margin: 1rem auto; padding: 0 0.85rem; }
  /* The inner row already owns the mobile safe-area padding. Avoid applying the
     topbar's generic inset as well, which makes the account control wrap at 320px. */
  .topbar--authenticated { padding-left: 0; padding-right: 0; }

  /* --- Mobile nav (D4) ---------------------------------------------------
     Row 1 becomes a wrapping bar: [burger] [wordmark] … [account]. The primary
     tabs and the whole sub-nav bar collapse; the burger reveals them stacked
     full-width. Account dropdown is untouched (its own toggle). */
  .nav-row-1 { flex-wrap: wrap; height: auto; gap: 10px 12px; padding: 10px 14px; }
  .nav-burger {
    order: -1; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; color: var(--ink);
    background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-input);
  }
  .nav-burger:hover { background: var(--subtle); }
  .nav-burger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .nav-account { order: 0; }          /* stays on the first line, pushed right */
  .nav-row-1 .nav-tabs { display: none; order: 1; }
  .nav-row-2 { display: none; }

  /* Open state: tabs stack below row 1; the sub-nav bar unfolds as a column. */
  .topbar--authenticated[data-nav-open] .nav-tabs {
    display: flex; flex-basis: 100%; flex-direction: column; gap: 4px;
    align-items: stretch;   /* desktop rule centres on the cross-axis; in a
                               column that would centre each tab — reset it so
                               tabs fill the width and read left-aligned */
    background: none; padding: 4px 0;
  }
  .topbar--authenticated[data-nav-open] .nav-tab {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px;
    border-radius: var(--r-input);
  }
  .topbar--authenticated[data-nav-open] .nav-row-2 {
    display: block; height: auto; padding: 6px 14px 10px;
  }
  .topbar--authenticated[data-nav-open] .nav-row-2 nav {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .topbar--authenticated[data-nav-open] .nav-sub {
    display: flex; align-items: center; min-height: 44px;
  }

  /* Safety net: a wide data table scrolls inside itself rather than stretching
     the whole page. Applies to EVERY table.data — in-scope, admin, or not yet
     converted — so a phone never meets horizontal page scroll (D1 dead-zone fix,
     D6 admin overflow guard). `display:block` is what makes overflow-x scroll a
     <table>; the table keeps its normal internal layout. */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data td, table.data th { overflow-wrap: break-word; }

  /* Card max-widths that exceed a phone viewport collapse to full width. */
  .card.narrow, .card.compose { max-width: none; }
  .card.compose input[type="text"] { max-width: none; }
  .columns .card, .columns .card.grow { flex-basis: 100%; }

  /* Safe-area insets for the two elements the shorthand padding above resets:
     the mobile value is the floor, only the notch widens it. Placed after those
     rules (and guarded) so it wins without env() breaking non-supporting UAs. */
  @supports (padding: max(0px, env(safe-area-inset-left))) {
    main { padding-left: max(0.85rem, env(safe-area-inset-left));
      padding-right: max(0.85rem, env(safe-area-inset-right)); }
    .nav-row-1 { padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right)); }
  }
}

@media (max-width: 640px) {
  main { padding: 0 0.75rem; }
  /* Re-assert the inset floor at this tighter value (the 900px rule above is
     overridden by the shorthand on the line above). */
  @supports (padding: max(0px, env(safe-area-inset-left))) {
    main { padding-left: max(0.75rem, env(safe-area-inset-left));
      padding-right: max(0.75rem, env(safe-area-inset-right)); }
  }
  .card { padding: var(--sp-comfy); }

  /* Comfortable touch targets — GATED to the phone breakpoint so the dense
     desktop layout the override layer is protecting is never regressed. Buttons
     become flex so the label centres once the box grows to 44px. */
  button,
  button.toggle,
  .att-set button,
  table.data button,
  .nav-account-menu-item {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-account-menu-item { justify-content: flex-start; }
  input, select { min-height: 44px; }

  /* ---- Opt-in table → card stacking (D2) --------------------------------
     A table.data.stack drops its chrome; each <tr> becomes a card and each
     <td> a "Label: value" row driven by the td's data-label attribute. The
     column headers (thead, or a leading all-<th> row) are hidden — the labels
     carry them. This block is source-ordered AFTER the 900px scroll rule so it
     wins where both match. */
  table.data.stack {
    display: block; overflow: visible;
    border: none; border-radius: 0; background: none;
  }
  table.data.stack thead,
  table.data.stack tr:first-child th { display: none; }
  table.data.stack tbody { display: block; }
  table.data.stack tr {
    display: block; margin-bottom: 0.75rem; padding: 0.35rem 0.75rem;
    background: var(--card); border: var(--border-flat); border-radius: var(--r-card);
  }
  /* Block cell with an inline "Label: value" — value wraps freely (long names,
     tank labels). NOT a space-between flex row: a long value is an anonymous
     flex item with min-width:auto, refuses to shrink, and widens the card past
     the viewport (the bug this pattern is written to avoid). */
  table.data.stack td {
    display: block; padding: 0.45rem 0.25rem; text-align: left;
    border-top: 1px solid var(--row-line); overflow-wrap: anywhere;
  }
  table.data.stack tr td:first-child { border-top: none; }
  table.data.stack td::before {
    content: attr(data-label) ": "; color: var(--muted); font-weight: 700;
  }
  /* A cell with an empty data-label (e.g. a full-width action cell) spans the
     card without a dangling label. */
  table.data.stack td[data-label=""]::before { content: none; }
  /* Row-action buttons go full width and stop being nowrap-cramped on a phone —
     except link-style buttons (e.g. "cancel"), which stay inline text. */
  table.data.stack button:not(.linklike) { white-space: normal; width: 100%; }
  /* The role, blank in the desktop group, reappears on every stacked lane card. */
  table.data.stack .rolerep { display: inline; }
}

/* --- #107 credential tick screen (My qualifications) ---------------------- */
.qual-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.qual-row { padding: 0.55rem 0; border-bottom: 1px solid var(--row-line); }
.qual-tick { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.qual-tick input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.qual-tick input[disabled] { cursor: not-allowed; }
.qual-name { font-weight: 700; color: var(--ink); }
.qual-learn { margin-left: 0.75rem; }
.qual-locked { margin-left: 0.6rem; font-style: italic; }
.qual-detail { margin: 0.45rem 0 0.2rem 1.85rem; padding-left: 0.85rem;
  border-left: 2px solid var(--hairline); }
.qual-signoff { display: flex; align-items: center; gap: 0.7rem; padding: 0.22rem 0; }
.qual-sub { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 8.5rem; }
.qual-sub input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--brand); }
.qual-date { max-width: 10.5rem; }

/* --- #153 official detail ------------------------------------------------- */
.official-detail { max-width: 1180px; }
.official-detail-heading { display: flex; align-items: end; justify-content: space-between;
  gap: var(--sp-base); margin-bottom: var(--sp-card-compact); }
.official-detail-heading h1, .official-detail-heading p { margin-bottom: 0; }
.detail-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-section-compact);
  padding: 4px; border-bottom: var(--border-flat); }
.detail-tabs [role="tab"] { padding: 8px 14px; border: 0;
  border-radius: var(--r-input) var(--r-input) 0 0; background: transparent;
  color: var(--muted); }
.detail-tabs [role="tab"][aria-selected="true"] { color: var(--brand);
  background: var(--card); box-shadow: inset 0 -2px 0 var(--brand); }
.detail-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand);
  outline-offset: 1px; }
.official-detail [data-detail-panel][hidden],
.official-detail [data-profile-values][hidden],
.official-detail [data-profile-fields][hidden] { display: none; }
.detail-profile-grid, .detail-account-grid { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-card-compact); }
.detail-card { min-width: 0; padding: var(--sp-card-compact); background: var(--card);
  border: var(--border-flat); border-radius: var(--r-static); }
.detail-card-heading { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-tight); }
.detail-card h2 { margin-top: 0; }
.detail-card-heading h2 { margin-bottom: 0; }
.detail-fields { margin: var(--sp-card-compact) 0 0; }
.detail-fields > div { display: grid; grid-template-columns: minmax(95px, 0.45fr) 1fr;
  gap: var(--sp-tight); padding-block: var(--sp-row-comfortable);
  border-top: 1px solid var(--row-line); }
.detail-fields dt { color: var(--muted); font-weight: 700; }
.detail-fields dd { margin: 0; overflow-wrap: anywhere; }
.detail-edit-fields { display: grid; gap: var(--sp-tight); margin-top: var(--sp-card-compact); }
.detail-edit-fields label:not(.detail-check) { display: grid; gap: 3px; }
.detail-check { display: flex; align-items: center; gap: var(--sp-tight); }
.detail-edit-fields button { justify-self: start; }
.detail-level-edit { margin-top: var(--sp-section-compact); padding-top: var(--sp-card-compact);
  border-top: var(--border-flat); }
.detail-level-edit h3 { margin: 0 0 var(--sp-tight); }
/* Single-level panel: pin, label, date and status chip wrap on a 320px phone. */
.detail-level-current { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-tight); }
.detail-level-edit .rowform { flex-wrap: wrap; }
.detail-actions { display: flex; align-items: center; gap: var(--sp-tight); }
.detail-qual-table { width: 100%; border-radius: var(--r-static); }
.detail-qual-table th, .detail-qual-table td { white-space: nowrap; }
.detail-qual-table th:first-child, .detail-qual-table td:first-child { white-space: normal; }
/* Qualification group headings (#286): one look for every section row, not
   just the first (table.data tr:first-child th only styles the leading one). */
table.data.detail-qual-table tr.qual-section-row th.qual-section-heading {
  background: var(--subtle); color: var(--ink); font-size: 0.8rem;
  text-transform: none; letter-spacing: 0; font-weight: 700;
  border-top: 1px solid var(--row-line); padding: 8px 18px; }
.qual-cell-form { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.qual-cell-form input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.detail-qual-actions { margin-top: var(--sp-card-compact); }
.detail-support-roles { margin-top: var(--sp-card-compact); }
.detail-support-roles h3, .detail-support-roles legend { margin: 0 0 var(--sp-tight);
  font-size: 0.95rem; font-weight: 750; }
.detail-support-roles ul { margin: 0; padding: 0; list-style: none; }
.detail-support-roles li { display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; border-top: 1px solid var(--row-line); }
fieldset.detail-support-roles { padding: var(--sp-card-compact); border: var(--border-flat);
  border-radius: var(--r-static); }
fieldset.detail-support-roles label { display: block; padding: 4px 0; }
/* "Other REMS courses" card stacked under Qualifications (#278). */
#qualifications > .detail-card + .detail-card { margin-top: var(--sp-card-compact); }
.qual-cell-form input[type="date"] { width: 9.2rem; padding: 4px 5px; }
.learn-star { padding: 2px 6px; border: 0; background: transparent;
  color: #a7b0b8; font-size: 1.15rem; line-height: 1; }
.learn-star.on { color: var(--warn); }
.detail-card .detail-status-chip, .detail-card .lvlpin { border-radius: var(--r-static); }

@media (max-width: 760px) {
  .official-detail-heading { display: block; }
  .detail-tabs { overflow-x: auto; }
  .detail-tabs [role="tab"] { white-space: nowrap; }
  .detail-profile-grid, .detail-account-grid { grid-template-columns: 1fr; }
}

/* --- #154 meet manage ----------------------------------------------------- */
.meet-manage-page .card, .meet-manage-page table.data,
.meet-manage-page .staff-tile { border-radius: var(--r-static); }
.manage-actions button { padding: 6px 11px; border-radius: var(--r-pill); }
/* A greyed-out action, e.g. Send call for volunteers on a meet called before
   recipients were recorded (#306). */
.manage-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Reopen sign-ups (#306): its own full-width row in the action bar. */
.manage-actions .reopen-form { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; }
.manage-actions .reopen-form button { white-space: nowrap; }
.manage-actions .reopen-form input { width: auto; }
.manage-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--sp-card-compact); align-items: start; }
.manage-static-card { padding: var(--sp-card-compact); }
.leadership-list { border-top: var(--border-flat); }
.leadership-row { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.4fr) 36px;
  gap: var(--sp-tight); align-items: center; padding-block: var(--sp-row-comfortable);
  border-bottom: 1px solid var(--row-line); }
.leadership-picker form, .leadership-access form, .manager-chip form { margin: 0; }
.leadership-picker .official-combobox label { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.official-combobox { position: relative; }
.official-combobox input[type="text"] { width: 100%; }
.official-combobox-options { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; padding: 4px; background: var(--card);
  border: var(--border-flat); border-radius: var(--r-static); box-shadow: var(--shadow-raised); }
.official-combobox-options[hidden] { display: none; }
.official-combobox-options [role="option"] { display: block; width: 100%; padding: 7px 9px;
  border: 0; border-radius: var(--r-static); background: var(--card); color: var(--body);
  text-align: left; font-weight: 500; }
.official-combobox-options [role="option"]:hover,
.official-combobox-options [role="option"].active { background: var(--subtle); color: var(--ink); }
.official-combobox-options [role="option"][hidden] { display: none; }
.official-combobox-options [data-combobox-empty] { margin: 6px 8px; }
.access-shield { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  color: #a7b0b8; font-size: 1.25rem; line-height: 1; text-decoration: none; }
button.access-shield:hover { background: transparent; color: var(--brand); }
.access-shield.on { color: var(--brand); }
.other-managers { margin-top: var(--sp-section-compact); }
.other-managers h3 { margin-bottom: var(--sp-tight); }
.manager-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-tight); }
.manager-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 8px;
  background: var(--subtle); border: var(--border-flat); border-radius: var(--r-static);
  font-size: 0.84rem; font-weight: 600; }
.manager-chip .access-shield { width: 24px; height: 24px; font-size: 1rem; }
.manager-add-form { max-width: 360px; }
/* Phones (#254): one column, and each leadership row wraps — the role name on
   its own line, then the picker and shield — so nothing scrolls sideways. */
@media (max-width: 760px) {
  .manage-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .leadership-row { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 4px; }
  .leadership-row > strong { grid-column: 1 / -1; }
  .manager-add-form { max-width: none; }
}
.meet-summary-list { margin: 0; }
.meet-summary-list > div { display: grid; grid-template-columns: 95px 1fr; gap: var(--sp-tight);
  padding-block: var(--sp-row-comfortable); border-top: 1px solid var(--row-line); }
.meet-summary-list dt { color: var(--muted); font-weight: 700; }
.meet-summary-list dd { margin: 0; overflow-wrap: anywhere; }
/* Important dates (#304): sits under the leadership card in the left column. */
.manage-overview-main { min-width: 0; }
.important-dates-list > div { grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); }
.important-dates-list > div.is-past dd { color: var(--muted); }
.important-dates-list dt .small { font-weight: 400; }
.session-staffing-summary { display: flex; align-items: center; gap: var(--sp-tight);
  margin-bottom: var(--sp-tight); color: var(--muted); font-weight: 700; }
.session-board-cta { margin: var(--sp-card-compact) 0 0; }
.session-board-cta a { display: inline-block; padding: 6px 11px; border: 1.5px solid var(--brand);
  border-radius: var(--r-pill); font-weight: 700; text-decoration: none; }
.session-board-cta a:hover { background: var(--subtle); }

/* --- Landing page responsive ----------------------------------------------- */
@media (max-width: 640px) {
  .landing-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .landing-meet-card { grid-template-columns: 1fr; gap: 0.75rem; }
  .landing-meet-action { flex-direction: row; justify-content: flex-start; min-width: 0; }
}

/* Public help and contextual guidance: reuse the app's type, color and cards. */
.nav-help { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; margin-left: auto; padding: 8px; min-height: 44px; white-space: nowrap;
  font-weight: 700; color: var(--brand); text-decoration: none; }
.nav-help span { display: inline-grid; place-items: center; border: 1px solid currentColor;
  border-radius: 50%; width: 20px; height: 20px; font-size: .8rem; }
.nav-help + .nav-account { margin-left: 0; }
.help-hub { max-width: 960px; margin: 0 auto; }
.help-page-head { padding: 12px 0 20px; }
.help-page-head h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 0 0 8px; }
.help-eyebrow { color: var(--brand); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.help-search { padding: 20px; border-radius: var(--r-card); background: var(--subtle); margin-bottom: 32px; }
.help-search label { display: block; font-weight: 700; margin-bottom: 8px; }
.help-search-row { display: flex; gap: 8px; }
.help-search-row input { flex: 1; min-width: 0; margin: 0; }
.help-results { list-style: none; padding: 0; margin-bottom: 0; }
.help-results li { padding: 12px 0; border-top: 1px solid var(--hairline); }
.help-results li a, .help-results li span { display: block; }
.help-category-groups > section { margin-bottom: 36px; }
.help-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-category-card { margin: 0; padding: 20px; }
.help-category-card h3 { margin-top: 0; }
.help-category-card ul, .help-contents ul { padding-left: 20px; margin-bottom: 0; }
.help-category-card li, .help-contents li { margin: 10px 0; }
.help-category-card a { overflow-wrap: anywhere; }
.help-breadcrumb { margin-bottom: 20px; }
.help-contents { margin: 24px 0; }
.help-contents h2 { font-size: 1rem; }
.help-article { max-width: 74ch; padding: 24px 0; border-top: 1px solid var(--hairline); line-height: 1.65; }
.help-article h2, .help-article h3, .help-preferences { scroll-margin-top: 130px; }
.help-article h3 { margin-top: 24px; }
.help-article p, .help-article li { overflow-wrap: anywhere; }
.help-back { margin-top: 24px; font-size: .875rem; }
.help-disclosure { margin: 8px 0; max-width: 74ch; font-size: .875rem; line-height: 1.5; white-space: normal; }
.help-disclosure summary, .help-preferences summary { cursor: pointer; color: var(--brand);
  font-weight: 700; padding: 10px 4px; min-height: 44px; box-sizing: border-box; }
.help-answer { border-left: 2px solid var(--brand); padding: 0 12px; overflow-wrap: anywhere; }
.help-answer p { margin: 4px 0 12px; }
.help-intro { margin: 16px 0; padding: 16px 20px; background: var(--subtle);
  border-left: 3px solid var(--brand); border-radius: var(--r-card); }
.help-intro h3 { margin: 0 0 8px; }
.help-intro p { max-width: 74ch; }
.help-intro form { margin: 0; }
.help-intro button { margin-right: 8px; }
.help-save-error { color: var(--danger); }
.help-empty .btn-secondary { display: inline-flex; text-decoration: none; }
.help-preferences { margin: 24px 0; }
.help-preferences .row-actions { flex-wrap: wrap; }
.help-preferences form { margin: 0; }
.board-cell > .help-disclosure { max-width: 100%; font-size: .75rem; }
.board-cell > .help-disclosure summary { overflow-wrap: anywhere; }
.nav-help:focus-visible, .help-disclosure summary:focus-visible,
.help-hub a:focus-visible, .help-preferences summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 600px) {
  .nav-row-1 { gap: 6px; }
  .nav-account-name { display: none; }
  .help-category-grid { grid-template-columns: minmax(0, 1fr); }
  .help-search, .help-category-card { padding: 16px; }
  .help-intro { padding: 16px; }
  .help-hub li a { display: inline-block; padding: 6px 0; }
  .help-search-row button { min-width: 64px; }
}
@media print {
  .help-search, .help-preferences, .help-back { display: none !important; }
}

/* #252 inline REMS prompt on the tick screen, the level form's REMS field,
   and #253's "no qualifications listed" warning. */
.rems-prompt { margin: 0.55rem 0 0.35rem 1.85rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--hairline); border-left: 3px solid var(--brand);
  border-radius: var(--r-chip); background: var(--subtle); max-width: 32rem; }
.rems-prompt p { margin: 0 0 0.45rem; }
.rems-prompt-title { font-weight: 700; color: var(--ink); }
.rems-prompt-error { color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.rems-prompt-field { display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.85rem; font-weight: 600; }
.rems-prompt-field input { max-width: 16rem; }
.rems-prompt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.rems-level-field { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; }
.rems-level-field input { min-width: 9rem; }
.qual-warning-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.qual-warning-actions form { margin: 0; }
@media (max-width: 600px) {
  .rems-prompt { margin-left: 0; }
  .rems-prompt-field input { max-width: 100%; }
}

/* Add-on-behalf session ticks (#256) */
.session-ticks { border: 0; margin: 0 0 0.75rem; padding: 0; }
.session-ticks legend { padding: 0; font-weight: 600; margin-bottom: 0.25rem; }
.session-ticks label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.session-ticks input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--brand); }

/* REMS review page (#279): phone-first cards; buttons go full width on a
   phone and sit side by side on wider screens. */
.review-filters { display: flex; flex-wrap: wrap; gap: var(--sp-tight) var(--sp-base); align-items: flex-end; margin-bottom: 1rem; }
.review-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; color: var(--muted); }
.review-list { list-style: none; padding: 0; margin: 0; }
.review-card { padding: var(--sp-base) var(--sp-comfy); margin-bottom: var(--sp-base); }
.review-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--sp-base); align-items: baseline; }
.review-kind { margin: 6px 0; }
.review-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-tight); margin: 0 0 6px; }
.review-values dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.review-values dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.review-card--kept, .review-card--dismissed, .review-card--resolved, .review-card--superseded { background: var(--subtle); }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--sp-tight); margin-top: var(--sp-tight); }
.review-actions form { margin: 0; }
.review-intro p { margin: 0 0 6px; }
.review-intro ul { margin: 0 0 6px; padding-left: 1.2rem; }
/* "CSU is correct" (#281): a link to the confirm page, styled as a
   secondary button. */
.review-csu-link { display: inline-block; font-weight: 700; font-size: 0.9rem; text-decoration: none;
  color: var(--brand); background: var(--card); border: 1.5px solid var(--brand); border-radius: var(--r-btn);
  padding: calc(0.55rem - 1.5px) calc(1.1rem - 1.5px); }
.review-csu-link:hover { background: var(--subtle); color: var(--brand-ink); }
.review-csu-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.review-card--csu_applied { background: var(--subtle); }
/* The confirm page. */
.csu-fix-list { margin: 0 0 var(--sp-base); padding-left: 1.2rem; }
.csu-fix-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.csu-fix-warnings { border-left: 3px solid var(--warn); background: var(--subtle); padding: var(--sp-tight) var(--sp-base); margin: 0 0 var(--sp-base); }
.csu-fix-warnings h2 { font-size: 1rem; margin: 0 0 6px; }
.csu-fix-actions { display: flex; flex-wrap: wrap; gap: var(--sp-tight); align-items: center; }
.csu-fix-actions form { margin: 0; }
.review-pages { display: flex; gap: var(--sp-base); justify-content: center; }
@media (max-width: 640px) {
  .review-actions form { flex: 1 1 100%; }
  .review-actions button { width: 100%; min-height: 44px; }
  .review-csu-link { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .csu-fix-actions form, .csu-fix-actions a { flex: 1 1 100%; text-align: center; }
  .csu-fix-actions button { width: 100%; min-height: 44px; }
}

/* Placements remain visible while their ordered save is in flight. */
.person.is-saving { opacity: .55; }
.person.is-saving .board-person-button { cursor: progress; }
.person.is-saving::after {
  content: "";
  display: inline-block;
  width: .65rem;
  height: .65rem;
  margin-inline-start: .25rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: board-saving-spin .7s linear infinite;
}
@keyframes board-saving-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .person.is-saving::after { animation: none; border: 0; background: currentColor; width: .4rem; height: .4rem; }
}

/* #280: matching cards — candidate lists and the link / wrong-number choices. */
.match-candidates { margin-top: 0; }
.link-choices { border: 0; padding: 0; margin: 0 0 var(--sp-base); }
.link-choices legend { font-weight: 700; margin-bottom: 6px; }
.link-choice { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; overflow-wrap: anywhere; font-weight: normal; }
.link-choice input { margin-top: 3px; flex: none; width: auto; }

/* Admin confirmation stays readable inside the horizontally scrolling grid. */
.detail-qual-table tr[data-credential-confirmation] td {
  white-space: normal;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.credential-confirmation-content { width: min(32rem, calc(100vw - 4rem)); }
/* REMS review: both sides and current-page batch actions (#333). */
.nav-badge[hidden] { display: none; }
.review-sides { gap: 1rem; }
.review-sides section { min-width: 0; padding: 0.75rem; background: var(--subtle); border-radius: 6px; overflow-wrap: anywhere; }
.review-sides h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.review-sides p { margin: 0.5rem 0; }
.review-parts { margin: 0; }
.review-parts > div { margin-bottom: 0.5rem; }
.review-parts dd { font-weight: normal; font-size: 0.9rem; }
.review-select { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }
.review-select input { width: 1.2rem; height: 1.2rem; margin: 0; }
.review-batch-bar { position: sticky; top: 0; z-index: 5; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: center; box-shadow: 0 3px 10px #0001; }
#review-batch { position: sticky; top: 0; z-index: 5; margin-bottom: 1rem; }
.review-batch-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.review-card-done { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.review-card-done form { margin: 0; }
#review-summary:not(:empty) { margin: 1rem 0; padding: 0.75rem; background: var(--subtle); border-left: 3px solid var(--brand); }
@media (max-width: 600px) {
  .review-sides { grid-template-columns: 1fr; }
  .review-card { padding: 0.8rem; }
  .review-batch-actions { width: 100%; }
  .review-batch-actions button { flex: 1 1 auto; min-height: 44px; }
  .review-batch-bar { max-height: 45vh; overflow-y: auto; }
}