/* Staff portal (Phase 3) — components that exist only on staff pages.
   Everything shared (buttons, badges, cards, toast) comes from styles.css/portal.css;
   this file must not restyle those. Field-tool rules: big tap targets, high contrast,
   nothing hover-only. */

/* ---- Home tiles (F2) ---- */
/* Single full-width column (feedback 2026-08-05): one tool per row, in David's order. */
.staff-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

/* Quick links: recognizable logo, with the word under it so nobody has to guess
   which vendor is which (feedback 2026-08-05 round 4). */
.link-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.link-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 74px;
  padding: 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.link-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 1.6rem;
  line-height: 1;
}
.link-logo-mark svg { width: 30px; height: 30px; }
.link-logo-word {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.link-logo[aria-disabled="true"] { opacity: 0.45; }

/* Field documents read as titles, not icons: emoji beside the words, full width. */
.link-logos-docs { flex-direction: column; gap: 8px; }
.link-logos-docs .link-logo {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  padding: 13px 14px;
  min-height: 52px;
}
.link-logos-docs .link-logo-word { font-size: 0.95rem; text-align: left; }
/* One row, one line, nothing below it (feedback 2026-08-05 round 3), with a little
   more air than that first pass (round 4) — the EAP tile below stays tight. */
.staff-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.staff-tile:active { transform: scale(0.99); }
.staff-tile .tile-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.staff-tile .tile-label {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-tile .badge { margin-left: auto; flex-shrink: 0; }
.staff-tile[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* The EAP tile must be findable in a hurry — the one loud tile on the page. */
.staff-tile-eap {
  grid-column: 1 / -1;
  background: #c0392b;
  border-color: #c0392b;
  color: var(--white);
  /* Stays tight while the others got more air (feedback round 4): the loud tile
     doesn't need size to be found. */
  min-height: 52px;
  padding: 10px 14px;
}

/* ---- Directory (F11) ---- */
.dir-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.dir-main { flex: 1; min-width: 0; }
.dir-name { font-weight: 700; }
.dir-title { font-size: 0.85rem; color: var(--muted); }
.dir-actions { display: flex; gap: 8px; }
/* tel:/mailto: buttons: 44px minimum tap target, one-handed reach */
.dir-actions .btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- EAP page (F3) ---- */
/* One heading treatment for the whole page (feedback 2026-08-05 round 3): blue and
   bold, same size everywhere, so the sections read as one set. The EMS block is the
   single exception — red, because it's the one you reach for mid-emergency. */
.eap-h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--blue-700);
  margin: 22px 0 6px;
}
.eap-h2-alert { color: #c0392b; }
.eap-nowait-list { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.eap-911 {
  display: block;
  width: 100%;
  padding: 20px;
  border: 0;
  border-radius: 14px;
  background: #c0392b;
  color: #fff;
  font-family: "Staatliches", sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
}
/* The 911 rule as a statement, not a button (feedback 2026-08-06). */
.eap-911-block {
  border: 2px solid #c0392b;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--white);
}
.eap-911-head {
  color: #c0392b;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.ems-row { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: .88rem; }
.ems-row:first-child { border-top: 0; }
.ems-label { font-weight: 800; color: var(--blue-900); white-space: nowrap; }
.eap-ems-note { font-size: .78rem; color: var(--muted); margin: 8px 0 12px; }
.loc-coords { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 10px 0 2px; }
.loc-addr { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }

.eap-call-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.eap-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--blue-700);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}
.eap-call .eap-call-num { color: var(--blue-700); white-space: nowrap; }
.eap-call .eap-call-note { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.eap-steps { padding-left: 1.4em; }
.eap-steps li { margin: 10px 0; }
/* Sub-items under "Checklists & Other Numbers": same blue/bold family as .eap-h2,
   one step down in size so they still read as children of that heading. */
.eap-section summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 10px 0;
  color: var(--blue-700); /* feedback 2026-08-05: section headers in Y.E.T.I. blue */
}
.eap-subhead { font-weight: 700; font-size: 0.85rem; margin-top: 10px; color: var(--blue-900); }
.eap-updated { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 18px; }

/* Offline states, kept blunt: a leader in a dead zone needs certainty, not subtlety. */
.eap-offline-ok { background: var(--sky-100); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; text-align: center; }

/* Draft watermark — shown only while EAP content is placeholder. */
.eap-draft-banner {
  background: var(--accent);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}

/* ---- Roster (F4) ---- */
.roster-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.seg { display: inline-flex; border: 1.5px solid var(--blue-700); border-radius: 10px; overflow: hidden; }
.seg-btn {
  border: 0; background: transparent; color: var(--blue-700);
  font: inherit; font-size: 0.78rem; font-weight: 700; padding: 8px 12px; cursor: pointer;
}
.seg-btn.is-on { background: var(--blue-700); color: #fff; }

.grouphead-lg {
  font-family: "Staatliches", sans-serif;
  font-size: 1rem; letter-spacing: 0.03em; color: var(--blue-900);
  margin: 14px 0 4px;
}
.roster-group-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 12px 0 4px;
}
.roster-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.roster-row:last-child { border-bottom: 0; }
/* Check-in is the LAST control on the row and the biggest (feedback round 5): status
   pill first, then this on the far right. 48px target for gloved thumbs. */
.checkin-btn {
  min-width: 48px; min-height: 48px; border-radius: 12px;
  border: 2px solid var(--blue-700); background: var(--white); color: var(--blue-700);
  font-size: 1.2rem; font-weight: 800; cursor: pointer; flex-shrink: 0;
  order: 3;
}
.checkin-btn.is-present { background: #1e7d4f; border-color: #1e7d4f; color: #fff; }
/* NO `order` here. .roster-row is shared by the roster, the trips list, quick-add and
   student search, and those last three end in a plain trailing button. A flex item
   with no order is 0, so giving .roster-main order:1 threw every one of those buttons
   to the LEFT of the row. Only the roster's own controls carry an order, which lifts
   them past the default-0 main block; everywhere else DOM order just works. */
.roster-main { flex: 1; min-width: 0; }
.roster-row > .status-pill { order: 2; flex-shrink: 0; }
.roster-name { font-weight: 700; }
/* The name is a link into the student's record (feedback round 5). */
.roster-name-btn {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--blue-700); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.roster-sub { font-size: 0.72rem; color: var(--muted); }

/* The three readiness indicators, straight off the Contact record: waiver,
   registration (paperwork) and emergency contact. Tapping one opens the student. */
.roster-inds { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 3px; }
.ind {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 3px 8px; background: var(--white);
  font: inherit; font-size: 0.66rem; font-weight: 700; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.ind-mark { font-size: 0.72rem; line-height: 1; }
.ind-ok { border-color: #1e7d4f; color: #1e7d4f; }
.ind-warn { border-color: #b8860b; color: #8a6508; }
.ind-bad { border-color: #c0392b; color: #c0392b; }
.ind-unknown { opacity: 0.6; }

/* Canceled collapses by default — history, not the trip in front of you. */
.roster-collapsed { margin: 6px 0; }
.roster-collapsed > summary {
  cursor: pointer; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 10px 0;
}

/* Trip rows: status — date — name on one headline, so a column of trips scans down
   the two things you sort by (feedback 2026-08-06). Manage stays hard right. */
.trip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
/* Status, date and name are one headline at one size (feedback 2026-08-06) — they
   read as a single line rather than a label stuck on the front of a title. */
.trip-head > * { font-size: 1.15rem; line-height: 1.25; }
.trip-date {
  font-weight: 700;
  color: var(--blue-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.trip-name { font-weight: 800; min-width: 0; }
/* The status badge is a pill from portal.css, which pins font-size:.7rem. This
   selector is two classes deep so it wins; padding is re-cut for the larger text
   and the letter-spacing dropped so "OPEN" doesn't sprawl at this size. */
.trip-head > .badge { font-size: 1.15rem; padding: 0.05rem 0.5rem; letter-spacing: 0; }
.trip-today { flex-shrink: 0; align-self: center; margin-left: auto; white-space: nowrap; }
/* margin-left:auto pins it to the far edge regardless of how wide the text block is.
   With TODAY present, TODAY takes the auto margin and this just follows it. */
.trip-manage { flex-shrink: 0; align-self: center; margin-left: auto; }
.trip-today + .trip-manage { margin-left: 8px; }

/* The trip's actions plus the registration dropdown, wrapping on narrow phones. */
.roster-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
/* Registration reads "Registration [Open v]" — the label stays put, the select is
   sized to its content rather than the full-width .staff-input default. */
.reg-select { display: inline-flex; align-items: center; gap: 6px; }
.reg-select > span { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.reg-select .staff-input {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
}
/* Activity under the roster title — the trip's identity, above the logistics line. */
.roster-activity {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--blue-700);
  font-size: 0.95rem;
}
.roster-activity:empty { display: none; }
.seg-wrap { flex-wrap: wrap; }
.roster-sub a { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.roster-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.status-pill {
  border: 1.5px solid var(--line); background: var(--white);
  font: inherit; font-size: 0.68rem; font-weight: 700; color: var(--ink);
  border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}

/* Status sheet */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(11, 61, 99, 0.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40;
}
.status-sheet {
  background: var(--white); border-radius: 16px 16px 0 0; width: 100%; max-width: 480px;
  padding: 16px; box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
}
.sheet-title { font-weight: 800; margin-bottom: 10px; }
.sheet-opt {
  display: block; width: 100%; text-align: left; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font: inherit; font-weight: 700; margin-bottom: 8px; cursor: pointer; min-height: 48px;
}
.sheet-opt small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.sheet-opt.danger { color: #c0392b; border-color: #c0392b; }
.btn.block { display: block; width: 100%; text-align: center; }

/* Forms */
.staff-input {
  display: block; width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font: inherit; font-size: 0.9rem;
  background: var(--white); color: var(--ink); margin: 6px 0 10px;
}
.staff-input:focus { outline: 2px solid var(--blue-700); outline-offset: 1px; }
.staff-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.staff-check {
  display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem;
  margin: 6px 0 10px; cursor: pointer;
}
.staff-check input { width: 20px; height: 20px; flex-shrink: 0; }
.msg-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.msg-checks label {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 12px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.msg-checks label.is-on { border-color: var(--blue-700); background: var(--sky-100); }

/* Fleet */
.fleet-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.fleet-row:last-child { border-bottom: 0; }
.fleet-main { flex: 1; min-width: 0; }
/* Big on purpose (feedback): "VAN 1 – Blue" selectable at a glance. */
.fleet-name { font-family: "Staatliches", sans-serif; font-size: 1.25rem; letter-spacing: .02em; }
.fleet-sub { font-size: 0.75rem; color: var(--muted); }

/* Collapsible inspection checklist + forms shared by the new tools. */
.staff-details { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; margin: 8px 0; }
.staff-details summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--blue-700); }
.staff-details .grouphead { padding-top: 6px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.radio-row label {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 12px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.radio-row label.is-on { border-color: var(--blue-700); background: var(--sky-100); }

/* ---- Student detail (feedback 2026-08-06) ----
   Built on .review / .review-section / .review-row from styles.css so it reads like
   the household portal's confirmation screen. These rules add what that layout
   lacks: a header that can carry an Edit button, and the per-section forms. */
.review-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.review-section h3 .btn { font-size: 0.75rem; padding: 3px 10px; }
.sd-body { padding-bottom: 2px; }
/* Inputs inside a section body need the section's padding, which .review-row
   supplies for read-only rows. */
.sd-body .staff-input,
.sd-body .staff-label { margin-left: 0.9rem; margin-right: 0.9rem; width: calc(100% - 1.8rem); box-sizing: border-box; }
.sd-body .staff-label { display: block; margin-top: 8px; }
.sd-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0.9rem 12px;
  border-top: 1px solid var(--line);
}
.sd-form-head { padding: 10px 0.9rem 0; font-weight: 800; color: var(--blue-900); }
.sd-sub-head {
  padding: 8px 0.9rem 2px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.sd-empty { padding: 8px 0.9rem 10px; font-size: 0.85rem; color: var(--muted); }
.sd-date { font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.sd-missing { color: #c0392b; }
/* A refusal on the create-trip form. It shared .muted with the hint text, so the one
   line telling you the trip was NOT created looked like every other grey note. */
.tc-error { color: #a4262c; font-weight: 600; background: #fdf3f4; border: 1px solid #f0c9cb;
  border-radius: 6px; padding: 8px 10px; }
/* A staff note, shown on the list rows so it is readable without opening the record —
   a flag you have to click through is a flag nobody reads. Clamped to two lines so one
   long note cannot push the rest of the queue off the screen. */
.roster-note {
  font-size: 0.74rem;
  color: var(--blue-900);
  background: var(--sky-100);
  border-left: 3px solid var(--blue-500);
  border-radius: 4px;
  padding: 3px 7px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The full note on the student screen: newlines as typed, and it wraps rather than
   stretching the section on a long unbroken string. */
.sd-note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--sky-100);
  border-left: 3px solid var(--blue-500);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

/* One emergency contact: name + relationship + how to reach them, then Edit. */
.sd-contact {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0.9rem; border-top: 1px solid var(--line);
}
.sd-contact-main { flex: 1; min-width: 0; }
.sd-contact-name { font-weight: 700; }
.sd-contact-rel { font-size: 0.72rem; color: var(--muted); margin-left: 6px; }
.sd-contact-reach { font-size: 0.8rem; }
.sd-contact-reach a { color: var(--blue-700); font-weight: 700; text-decoration: none; }

/* "Complete Review": the status dropdown IS the Salesforce picklist, beside the
   one-tap button and the date it was last set. */
.sd-review {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0.9rem 12px; border-top: 1px solid var(--line);
}
.sd-review-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sd-review-select { width: auto; margin: 0; padding: 6px 10px; font-size: 0.8rem; font-weight: 700; }

/* Status as the control centre (feedback 2026-08-06): flag, label, the editable
   status, and when it last changed — one row per gate. */
.sd-status-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 0.9rem; border-top: 1px solid var(--line);
}
.sd-status-flag { font-size: 1rem; line-height: 1; }
.sd-status-label { flex: 1; min-width: 8rem; font-size: 0.85rem; font-weight: 700; }
.sd-status-value { font-size: 0.85rem; font-weight: 700; color: var(--blue-900); }
.sd-status-note { padding: 8px 0.9rem 0; font-size: 0.78rem; color: var(--muted); }
.sd-review-echo { padding: 8px 0.9rem 10px; font-size: 0.82rem; font-weight: 700; border-top: 1px solid var(--line); }
.sd-review-echo .sd-date { font-weight: 400; }
.sd-primary-note {
  margin: 8px 0.9rem 10px; padding: 8px 10px;
  background: var(--sky-100); border-radius: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--blue-900);
}

/* Paper-waiver capture: the shrunk photo, shown so staff can see the signature is
   legible before filing it. */
.sd-w-thumb {
  display: block;
  max-width: calc(100% - 1.8rem);
  margin: 8px 0.9rem 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#sd-w-preview .sd-date { display: block; padding: 0 0.9rem 4px; }
.sd-status-value a { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.sd-status-value a:hover { text-decoration: underline; }

/* School affiliations and club rows: name + dates on the left, the status control
   (or badge) on the right. */
.sd-aff {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0.9rem; border-top: 1px solid var(--line);
}
.sd-aff-main { flex: 1; min-width: 0; }
.sd-aff-name { font-weight: 700; }
.sd-aff .sd-review-select { flex-shrink: 0; }

/* The call-home tick sits in the flag column so it lines up with the emoji above it. */
.sd-status-flag input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* Call home: the tick is green only while the call still counts (within a year).
   A checked-but-grey box means there is a date on file that has aged out. */
.sd-status-flag input[type="checkbox"].is-current { accent-color: #1e7d4f; }
.sd-status-value.sd-ok { color: #1e7d4f; }
.sd-status-value.sd-stale { color: #8a6508; }

/* Fleet rows lead with the vehicle emoji, matching the grouped headings. */
.fleet-emoji { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }

/* Fleet sections are separated by a rule, not a heading (feedback 2026-08-06). */
.fleet-divider {
  height: 0;
  border-top: 2px solid var(--line);
  margin: 10px 0 2px;
}

/* Who is doing this — shown, not chosen. */
.co-whoami {
  padding: 10px 12px;
  margin: 6px 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--sky-100);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Incident photos: thumbnails with a remove button, up to four. */
.in-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.in-photo { width: 104px; }
.in-photo img { width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block; }
.in-photo .btn { width: 100%; margin-top: 4px; }
.ind-detail { margin-top: 10px; font-size: 0.9rem; }
.ind-ok { color: #1e7d4f; font-weight: 700; padding: 3px 0; }
.ind-bad { color: #c0392b; font-weight: 700; padding: 3px 0; }

/* Training / certification table: title — date last taken — status — action. */
.tr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0.9rem; border-top: 1px solid var(--line);
}
.tr-title { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 700; }
.tr-req { color: #c0392b; font-weight: 800; }
.tr-date { font-size: 0.78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-row .badge { flex-shrink: 0; }
.tr-row .btn { flex-shrink: 0; }

/* Trip report wizard: a step strip, panels, and a back/next footer. */
.tr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tr-steps span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px;
  border: 1.5px solid var(--line); color: var(--muted); background: var(--white);
}
.tr-steps span.is-on { border-color: var(--blue-700); background: var(--blue-700); color: #fff; }
.tr-steps span.is-done { border-color: #1e7d4f; color: #1e7d4f; }
.tr-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tr-nav .btn { flex: 1; min-width: 9rem; }

/* A standing instruction rather than a control — SMS opt-out and account changes go
   through one inbox, so the answer is an address. */
.sd-note {
  margin: 0 0.9rem 10px;
  padding: 8px 10px;
  background: var(--sky-100);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--blue-900);
}
.sd-note a { color: var(--blue-700); font-weight: 700; }

/* A certificate row's title is a link when a document is attached. */
.tr-file { color: var(--blue-700); font-weight: 700; text-decoration: none; }
.tr-file:hover { text-decoration: underline; }

/* Missing-required banner on the training list — the one thing worth acting on. */
.tr-alert {
  margin: 0 0.9rem 8px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fbe1e2;
  color: #a4262c;
  font-size: 0.84rem;
  font-weight: 700;
}
.tr-alert-ok { background: #d8efe0; color: #1a7a44; }

/* ---- Student Story (docs/student-stories-plan.md) ---- */
.story-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.story-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); color: var(--ink); font: inherit; cursor: pointer;
  text-align: left;
}
.story-chip.is-on { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.story-chip-sub { font-size: 0.68rem; opacity: 0.75; }
.story-photo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.story-photo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(255, 255, 255, 0.94);
}
.story-loading img {
  width: 96px; height: 96px;
  animation: story-bounce 1.1s ease-in-out infinite;
}
.story-loading p { font-weight: 700; color: var(--blue-900); margin: 0; }
@keyframes story-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.06); }
}

/* Edit Trip renders a multi-value picklist as a real multi-select, so an Age Group with
   three values keeps three. Without a height it collapses to one row and looks like a
   dropdown that has lost its arrow. */
select.staff-input[multiple] { height: auto; padding: 6px 8px; }
select.staff-input[multiple] option { padding: 3px 2px; }

/* ---- Create Trip: the Salesforce-style organization lookup (2026-09-16) ----
   Search box until a record is chosen, then a pill with a cross. The menu is absolutely
   positioned, so .lk owns the positioning context; without it the results would hang off
   the card instead of the field. */
.lk { position: relative; }
.lk-in { margin-bottom: 10px; }
.lk-pill {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--blue-500); border-radius: 10px;
  padding: 9px 11px; background: var(--sky-100); margin: 6px 0 10px;
}
.lk-ic {
  width: 22px; height: 22px; border-radius: 4px; flex: none;
  background: var(--blue-700); color: var(--white);
  display: grid; place-items: center; font-size: 0.7rem;
}
.lk-nm {
  flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-x {
  background: none; border: 0; color: var(--muted); font-size: 1.2rem;
  cursor: pointer; padding: 0 4px; line-height: 1; min-width: 32px; min-height: 32px;
}
.lk-x:hover { color: var(--accent-dark); }
.lk-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% - 4px);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
}
.lk-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 11px; background: none; border: 0; font: inherit;
  text-align: left; cursor: pointer; color: var(--ink);
}
.lk-opt:hover, .lk-opt:focus-visible { background: var(--sky-100); }
.lk-tx { min-width: 0; }
.lk-t1 {
  display: block; font-size: 0.86rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-t2 { display: block; font-size: 0.72rem; color: var(--muted); }
.lk-empty { padding: 11px; font-size: 0.82rem; color: var(--muted); }

/* The chevron on the trip-type tiles and the club rows. */
.tile-chev { margin-left: auto; color: var(--blue-700); font-size: 1.2rem; flex: none; }
.tc-club-row {
  width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.tc-club-row:hover { background: var(--sky-100); }

/* ---- Student archive row (2026-09-16) ----
   Sits under the student's name: a quiet note plus one control, not a card. */
.sd-archive-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--cream);
}
.sd-archive-row .muted { margin: 0; font-size: 0.82rem; flex: 1; min-width: 0; }

/* A disabled Archive reads as "not yet", not as broken — the note beside it says why. */
.sd-archive-row .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Archive anyway" is the quieter of the two — it skips a waiting period, so it should
   read as the deliberate second choice rather than the obvious first one. */
#sd-archive.is-armed { border-color: var(--accent-dark); color: var(--accent-dark); background: #fdf6e8; }

/* ---- Volunteer detail: paperwork review (2026-09-17) ----
   Each paperwork row opens a panel with the submitted documents and the review
   control, so "see what they sent" and "accept it" are one place. */
.vd-pw { border-bottom: 1px solid var(--line); }
.vd-pw:last-child { border-bottom: 0; }
.vd-pw-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 0.9rem; background: none; border: 0; font: inherit;
  text-align: left; cursor: pointer; color: var(--ink);
}
.vd-pw-head:hover { background: var(--sky-100); }
.vd-pw-label { font-weight: 600; }
.vd-pw-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 0.75rem; color: var(--muted); }
.vd-pw-panel { padding: 2px 0.9rem 12px; background: var(--sky-100); }
.vd-pw-files { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.vd-pw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; }
.vd-pw-grid .staff-label { display: block; margin: 0; width: auto; }
.vd-pw-grid .staff-input { margin-left: 0; margin-right: 0; width: 100%; }
.vd-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; padding: 0 0.9rem; }
.vd-edit-grid .staff-label { display: block; margin: 8px 0 0; width: auto; }
.vd-edit-grid .staff-input { margin-left: 0; margin-right: 0; width: 100%; }
.vd-edit-full { grid-column: 1 / -1; }

/* ---- Filter chips + the certificate review queue (David, 2026-09-28) ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .2rem; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--blue-900);
  border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .84rem;
  font-weight: 700; cursor: pointer; line-height: 1.3;
}
.chip:hover { border-color: var(--blue-700); }
.chip[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.chip .chip-n { opacity: .7; font-weight: 600; margin-left: .3rem; }

.cq-row { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  margin-bottom: .7rem; background: #fcfeff; }
.cq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.cq-name { font-weight: 800; color: var(--blue-900); }
.cq-meta { font-size: .84rem; color: var(--muted); margin: .2rem 0 .5rem; }
.cq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cq-actions .staff-input { width: auto; min-width: 9rem; margin: 0; }
.cq-actions label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.cq-nofile { font-size: .82rem; color: #b25000; font-weight: 700; }
.cq-hint { font-size: .8rem; color: var(--muted); margin: 0 0 .5rem; font-style: italic; }
.cq-actions .cq-hint { font-style: normal; font-weight: 700; color: var(--blue-700); margin: 0; }

/* Family Sign-in Check (2026-09-29). */
.fc-form { display: flex; gap: 8px; align-items: center; }
.fc-form .staff-input { flex: 1; margin: 0; }
.fc-finding { border-left: 4px solid var(--blue-500); background: var(--sky-100, #eef6fb); padding: 8px 10px; border-radius: 0 8px 8px 0; margin: 6px 0; font-size: .88rem; }
.fc-finding.is-bad { border-left-color: #d13438; background: #fdf3f3; }
.fc-finding.is-warn { border-left-color: #c77c00; background: #fffaf0; }
.fc-finding.is-ok { border-left-color: #1a7a44; background: #eef8f1; }
.fc-sub { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px; }
.fc-row { padding: 8px 0; border-top: 1px solid var(--line); font-size: .85rem; }
.fc-row.is-picked { background: #eef8f1; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.fc-row-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fc-row-name { font-weight: 700; }
.fc-row-meta { color: var(--muted); font-size: .8rem; margin-top: 2px; overflow-wrap: anywhere; }
.fc-row button.linkish { background: none; border: 0; padding: 0; color: var(--blue-700); font-weight: 700; cursor: pointer; font: inherit; }

/* Club Manager sections (David, 2026-10-02): a solid rule between High School and
   Middle School, and a heading that reads as a section, not another row. */
.club-group-head {
  font-family: "Staatliches", sans-serif;
  font-size: 1.35rem; letter-spacing: 0.03em; color: var(--blue-900);
  margin: 26px 0 2px; padding: 14px 0 6px;
  border-top: 3px solid var(--blue-700);
  border-bottom: 1px solid var(--line);
}
.club-group-head:first-child { margin-top: 4px; }
.club-group-head .club-group-count {
  font-family: inherit; font-size: 0.85rem; color: var(--muted); margin-left: 6px; letter-spacing: 0.02em;
}