/* ─────────────────────────────────────────────────────────────────────────
   Stars Supporting Stars — Design System
   Spec: docs/superpowers/specs/2026-04-30-visual-redesign-design.md
   ───────────────────────────────────────────────────────────────────────── */

/* === Design Tokens === */

:root {
  /* Main app palette — Navy & Sage */
  --navy:        #1e3a5f;
  --navy-deep:   #0f1e30;
  --navy-muted:  #4a6a8a;
  --sage:        #2d6a4f;
  --sage-light:  #d4ebe0;

  --bg:          #f4f6f8;
  --surface:     #ffffff;

  --text:        #1a202c;
  --text-muted:  #4a5568;
  --text-faint:  #718096;

  --hairline:        #e2e8f0;
  --hairline-soft:   #f0f4f8;

  --red:    #9b2c2c;
  --amber:  #c2841d;

  /* Check-In palette — Starry Night */
  --ci-bg-radial: radial-gradient(circle at 18% 22%, #312e81 0%, #1e1b4b 55%, #0f0d2a 100%);
  --ci-yellow:    #fbbf24;
  --ci-pink:      #f472b6;
  --ci-mint:      #10b981;
  --ci-sky:       #3b82f6;
  --ci-lavender:  #a78bfa;
  --ci-orange:    #f97316;
  --ci-zone-b:    #3b82f6;
  --ci-zone-g:    #10b981;
  --ci-zone-y:    #f59e0b;
  --ci-zone-r:    #ef4444;
  --ci-action:    #f59e0b;

  /* Typography */
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;

  /* Shadows */
  --shadow-card:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.3);
}

/* === Base Reset === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* min-height (not height) so body grows past viewport — `height: 100%`
   caps body's containing block at viewport size, which breaks
   `position: sticky` on any descendant (the sticky element scrolls away
   with body once content exceeds 100vh). */
html, body { min-height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* === Helpers === */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.table-scroll table { border-radius: 0; }
table th, table td { vertical-align: middle; }
/* Onboarding tour — first-time guided walkthrough. Pair with onboarding.js. */
.onboard-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 13, 42, 0.55);
  z-index: 1300;
  pointer-events: auto;
}
.onboard-spotlight {
  position: absolute;
  border: 3px solid var(--ci-yellow, #fbbf24);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(15, 13, 42, 0.55);
  transition: top 0.25s, left 0.25s, width 0.25s, height 0.25s;
  pointer-events: none;
}
.onboard-popover {
  position: absolute;
  background: white; color: var(--text);
  border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  font-family: var(--sans);
  z-index: 1310;
  transition: top 0.25s, left 0.25s;
}
.onboard-step-num { font-size: 0.72rem; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.onboard-title { font-family: var(--serif); font-size: 1.15rem; color: var(--navy-deep); font-weight: 400; margin-bottom: 8px; }
.onboard-body  { font-size: 0.92rem; color: var(--text); line-height: 1.5; margin-bottom: 14px; }
.onboard-actions { display: flex; justify-content: space-between; gap: 10px; }
.onboard-skip {
  background: none; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 7px 14px; font-size: 0.85rem; color: var(--text-muted);
  cursor: pointer; font-family: var(--sans);
}
.onboard-skip:hover { background: var(--hairline-soft); color: var(--text); }
.onboard-next {
  background: var(--navy); color: white; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
}
.onboard-next:hover { background: var(--navy-deep); }

/* Contextual help tip — small "?" button with popover. Pair with the
   help-tooltip.js module: <button class="help-tip" data-tip="..."> */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  padding: 0; margin-left: 6px;
  background: var(--hairline-soft); color: var(--text-muted);
  border: 1px solid var(--hairline); border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
  transition: background 0.1s, color 0.1s;
}
.help-tip:hover { background: var(--navy); color: white; border-color: var(--navy); }
.help-tip[aria-expanded="true"] { background: var(--navy); color: white; border-color: var(--navy); }
.help-tip-popover {
  position: absolute;
  background: white; color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 8px; padding: 10px 12px;
  font-size: 0.85rem; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 1200;
  font-family: var(--sans);
}

/* Row action buttons — small icon-only buttons used inside table cells */
.actions-cell {
  display: flex; gap: 4px; flex-wrap: nowrap;
  justify-content: center; white-space: nowrap;
}
.icon-btn-action {
  background: none; border: 1px solid var(--hairline); border-radius: 5px;
  cursor: pointer; width: 28px; height: 28px; padding: 0;
  font-size: 0.85rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.icon-btn-action:hover { background: var(--hairline-soft); border-color: #cbd5e0; }

/* === Mobile main padding === */

@media (max-width: 480px) {
  main.page { padding: 16px 12px 60px; }
}

/* === Header & Nav === */

.app-header {
  background: linear-gradient(180deg, #234572 0%, var(--navy) 100%);
  color: white;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  /* Below modals (1000+) and notifications (1100+); above page content. */
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.app-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.05rem;
  white-space: nowrap;
}
.app-brand-logo {
  width: 60px; height: 60px; border-radius: 12px;
  background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
}
.app-brand-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.app-nav { display: flex; gap: 2px; margin-left: 12px; }
.app-nav a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.88rem; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.app-nav a:hover { background: rgba(255,255,255,0.08); color: white; }
.app-nav a.active { background: rgba(255,255,255,0.14); color: white; }

.app-header-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.school-pill {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.84rem;
  white-space: nowrap;
}
/* For super_admin's school switcher <select> dropped into the header */
.school-pill select {
  background: transparent; color: white; border: none; outline: none;
  font: inherit; cursor: pointer;
}
.school-pill select option { color: var(--text); background: white; }

.icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: rgba(255,255,255,0.12); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; text-decoration: none;
  transition: background 0.12s;
}
.icon-btn:hover { background: rgba(255,255,255,0.2); }

/* Mobile header — replace the horizontal nav with a hamburger + drawer */
.mobile-nav-toggle {
  display: none;
  font-size: 1.25rem; line-height: 1;
}

.mobile-nav-drawer {
  /* `inset: 0` pins the drawer to the visible viewport on all four sides.
     Avoids using `100vw` / `100vh` which on Samsung Chrome can exceed the
     visible area, pushing the panel off-screen. */
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
}
.mobile-nav-drawer.open { visibility: visible; pointer-events: auto; }

.mobile-nav-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 13, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-nav-drawer.open .mobile-nav-overlay { opacity: 1; }

.mobile-nav-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 300px; max-width: 86%;   /* % is relative to the (visible) drawer */
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
  /* Respect the device's safe areas (notch / nav bar / rounded corners) */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overscroll-behavior: contain;
}
.mobile-nav-drawer.open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav-title {
  font-family: var(--serif); font-size: 1.25rem;
  color: var(--navy-deep); font-weight: 400;
}
.mobile-nav-close {
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--text-muted); cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav-close:hover { background: var(--hairline-soft); color: var(--text); }

.mobile-nav-links {
  display: flex; flex-direction: column;
  padding: 12px;
  flex: 1;
  gap: 2px;
}
.mobile-nav-links a {
  display: block;
  padding: 14px 18px;
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
  font-size: 1rem; font-weight: 500;
  font-family: var(--sans);
}
.mobile-nav-links a:hover { background: var(--hairline-soft); }
.mobile-nav-links a.active { background: var(--navy); color: white; }

.mobile-nav-footer {
  padding: 12px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 2px;
}
.mobile-nav-action {
  display: block;
  background: none; border: none;
  padding: 12px 18px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer; text-align: left;
  font-family: var(--sans);
}
.mobile-nav-action:hover { background: var(--hairline-soft); color: var(--text); }

@media (max-width: 768px) {
  .app-header { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .app-header .app-nav { display: none; }
  /* Settings + Sign Out live in the drawer on mobile, so hide their icons
     in the header to free up room for the brand and school pill */
  .app-header-right .icon-btn { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  /* School pill drops to its own row beneath the brand so a long school
     name can't push the header off-screen. Take full width, allow the
     name to wrap, with the select inside flexing to fit. */
  .app-header-right {
    flex-basis: 100%;
    order: 5;
    margin-left: 0;
    margin-top: 4px;
  }
  .school-pill {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .school-pill select { width: 100%; text-overflow: ellipsis; }
}

/* Check-in page is student-facing — students should never see a nav menu */
.checkin-page .mobile-nav-toggle,
.checkin-page .mobile-nav-drawer { display: none !important; }

/* === Page header pattern === */

main.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 80px;
}
@media (max-width: 720px) { main.page { padding: 22px 16px 60px; } }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy-muted); font-weight: 700;
}
.page-h1 {
  font-family: var(--serif);
  font-size: 2.1rem; line-height: 1.1;
  color: var(--navy-deep);
  margin-top: 6px;
  font-weight: 400;
}
.page-meta { font-size: 0.92rem; color: var(--text-muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; }

.section-eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--navy-muted); font-weight: 700;
  margin-bottom: 12px;
}

/* === Cards & Panels === */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
}
.card.compact { padding: 14px 18px; }
.card-title {
  font-size: 1rem; font-weight: 600; color: var(--text);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

/* KPI stat card variant — used on the Dashboard */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 3px solid var(--sage);
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s, transform 0.12s;
  cursor: pointer;
}
.stat-card:hover {
  border-color: var(--navy-muted);
  border-left-color: var(--navy);
  transform: translateY(-1px);
}
.stat-card.is-warn { border-left-color: var(--red); }
.stat-card.is-warn .stat-value { color: var(--red); }
.stat-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); font-weight: 700;
}
.stat-value {
  font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: var(--navy-deep);
  margin: 10px 0 6px;
  font-weight: 400;
}
.stat-delta { font-size: 0.74rem; color: var(--sage); font-weight: 600; }
.stat-delta.down { color: var(--red); }

/* === Buttons === */

.btn {
  padding: 9px 16px; border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600; font-size: 0.86rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-primary { background: var(--navy); color: white; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-ghost {
  background: var(--surface); color: var(--text);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--navy-muted); }
.btn-accent {
  background: var(--sage-light); color: var(--sage);
  border-color: transparent;
}
.btn-accent:hover { background: #c4e3d3; }
.btn-danger {
  background: var(--surface); color: var(--red);
  border-color: #fc8181;
}
.btn-danger:hover { background: #fff5f5; }
.btn-sm { padding: 5px 12px; font-size: 0.78rem; }

/* === Forms === */

.field-row {
  display: flex; gap: 10px; align-items: flex-end;
  margin-bottom: 14px; flex-wrap: wrap;
}
.field-group {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; gap: 5px;
}
.field-group label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.field-group input,
.field-group select,
.field-group textarea {
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--navy); }

.hint { font-size: 0.8rem; color: var(--text-faint); margin-top: 4px; }
.message { padding: 10px 14px; border-radius: 7px; font-size: 0.85rem; margin-bottom: 14px; }
.message.success { background: var(--sage-light); color: var(--sage); }
.message.error   { background: #fed7d7; color: var(--red); }

/* Password show/hide eye toggle — wired by src/js/password-toggle.js */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { padding-right: 42px; }
.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; padding: 0;
}
.pw-eye:hover { color: var(--navy); background: var(--hairline-soft); }
.pw-eye:focus-visible { outline: none; border-color: var(--navy); color: var(--navy); }
:root[data-theme="dark"] .pw-eye:hover,
:root[data-theme="dark"] .pw-eye:focus-visible { color: #93b8e0; border-color: #93b8e0; }

/* === Pills, Chips, Badges === */

.status-pill {
  display: inline-block;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
}
.status-active    { background: var(--sage-light);     color: var(--sage); }
.status-upcoming  { background: #dbeafe;                color: #1e40af; }
.status-completed { background: var(--hairline-soft);   color: var(--text-muted); }
.status-inactive  { background: var(--hairline-soft); color: var(--text-faint); }
.status-graduated { background: #fef3c7; color: var(--amber); }

.attend-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
}
.attend-pill.present { background: var(--sage-light); color: var(--sage); }
.attend-pill.absent  { background: #fed7d7; color: var(--red); }

.zone-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
}
.zone-chip.zone-B { background: #cfe2f3; color: #2c5282; }
.zone-chip.zone-G { background: var(--sage-light); color: var(--sage); }
.zone-chip.zone-Y { background: #fef3c7; color: var(--amber); }
.zone-chip.zone-R { background: #fed7d7; color: var(--red); }

.role-badge { padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
/* Scoped to .role-badge so the body's role-{role} class (used to gate
   write affordances by role) doesn't leak the badge background onto
   the whole page. */
/* Role badge background/foreground colors. Keys match DB role values after
   the migration 029 rename (school_admin is now the read-only oversight
   role that used to be 'principal'; school_it_admin is the full admin
   role that used to be 'school_admin'). */
.role-badge.role-super_admin       { background: #e9d8fd; color: #553c9a; }
.role-badge.role-school_it_admin   { background: #bee3f8; color: #2b6cb0; }
.role-badge.role-school_counselor  { background: var(--hairline-soft); color: var(--text-muted); }
.role-badge.role-school_admin      { background: #fefcbf; color: #744210; }

/* The new 'school_admin' (formerly 'principal') is a dashboard-only
   oversight role per Lydia's 2026-05-09 review: hide every write
   affordance and the operational nav links (Check-In, Roster, Rounds).
   They retain the Dashboard nav link and bare-min /admin access for
   profile self-service. Pages set body.role-school_admin on boot. */
body.role-school_admin a[href="/checkin"],
body.role-school_admin a[href="/roster"],
body.role-school_admin a[href="/rounds"],
body.role-school_admin #addBtn,
body.role-school_admin #importBtn,
body.role-school_admin #importSection,
body.role-school_admin #createBtn,
body.role-school_admin .actions-cell,
body.role-school_admin .btn-edit-round,
body.role-school_admin .btn-toggle-pair,
body.role-school_admin .btn-status,
body.role-school_admin .btn-delete-round,
body.role-school_admin .btn-do-pair,
body.role-school_admin .btn-remove,
body.role-school_admin .add-pair-form {
  display: none !important;
}

/* === Tables === */

table { width: 100%; border-collapse: collapse; background: var(--surface); }
.card > table:last-child { border-radius: 0 0 10px 10px; overflow: hidden; }
thead { background: #fafbfc; }
th {
  text-align: left; padding: 12px 16px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
td {
  padding: 14px 16px; font-size: 0.92rem;
  color: var(--text);
  border-bottom: 1px solid var(--hairline-soft);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfc; }
tr.inactive td { color: var(--text-faint); }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* === Modals === */

.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,30,48,0.45);
  align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface);
  border-radius: 14px;
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.modal-title-text { font-weight: 700; font-size: 1rem; color: var(--text); }
.modal-close-btn {
  background: none; border: none;
  color: var(--text-faint); font-size: 1.3rem;
  padding: 2px 8px; border-radius: 6px;
  line-height: 1; cursor: pointer;
}
.modal-close-btn:hover { color: var(--text-muted); background: var(--hairline-soft); }
.modal-body { padding: 20px 24px; overflow-y: auto; }

/* === Tabs === */

.tabs {
  display: flex; gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--hairline);
}
.tab-btn {
  padding: 10px 20px;
  border: none; background: none;
  font-size: 0.9rem; color: var(--text-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-weight: 500; cursor: pointer;
  font-family: var(--sans);
}
.tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); }
.tab-btn:hover:not(.active) { color: var(--text-muted); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Mobile twin of .tabs — see admin.html for the markup. With ~8 possible
   tabs for super_admin, the desktop tab row runs off the right edge on
   phone widths. Native <select> is the cleanest mobile replacement: one
   tap shows every option, badges fit in the option text, no scroll
   discoverability problem. */
.tabs-mobile-select { display: none; }
@media (max-width: 600px) {
  .tabs { display: none; }
  .tabs-mobile-select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 24px;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--navy-deep);
    background: white;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    appearance: none; -webkit-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) center,
      calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
  }
  .tabs-mobile-select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(31,55,95,0.12);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Check-In page namespace — Starry Night palette, kid-tablet layout
   ───────────────────────────────────────────────────────────────────────── */

body.checkin-page {
  background: var(--ci-bg-radial), #0b0a1f;
  background-attachment: fixed;
  color: white;
  min-height: 100vh;
}

/* Header re-skin for dark bg */
.checkin-page .app-header {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.checkin-page .app-header-right .school-pill { background: rgba(255,255,255,0.1); }
.checkin-page .app-nav a              { color: rgba(255,255,255,0.7); }
.checkin-page .app-nav a:hover        { background: rgba(255,255,255,0.08); color: white; }
.checkin-page .app-nav a.active       { background: rgba(255,255,255,0.14); }
.checkin-page .icon-btn               { background: rgba(255,255,255,0.1); }
.checkin-page .icon-btn:hover         { background: rgba(255,255,255,0.18); }

.checkin-page main.page { max-width: 800px; padding-top: 32px; }

/* Decorative starfield (CSS box-shadow trick) */
.checkin-page .stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.7;
}
.checkin-page .stars::before, .checkin-page .stars::after {
  content: ''; position: absolute;
  width: 3px; height: 3px; background: white; border-radius: 50%;
}
.checkin-page .stars::before {
  top: 14%; right: 18%;
  box-shadow:
    30px 70px 0 0 rgba(255,255,255,0.5),
    -90px 50px 0 1px rgba(255,255,255,0.4),
    -160px 110px 0 0 rgba(255,255,255,0.45),
    -200px 30px 0 0 rgba(255,255,255,0.35),
    80px 140px 0 0 rgba(255,255,255,0.4);
}
.checkin-page .stars::after {
  top: 65%; left: 8%;
  box-shadow:
    70px -25px 0 0 rgba(255,255,255,0.4),
    130px 50px 0 1px rgba(255,255,255,0.45),
    220px 10px 0 0 rgba(255,255,255,0.35),
    180px -80px 0 0 rgba(255,255,255,0.4);
}

/* Screens (existing markup keeps `.screen` + `[hidden]`) */
.checkin-page .screen { position: relative; z-index: 1; padding: 24px 4px; }
.checkin-page .screen[hidden] { display: none; }
.checkin-page .screen-title {
  font-family: var(--serif);
  font-size: 1.9rem; line-height: 1.1; text-align: center;
  font-weight: 400;
}
.checkin-page .screen-sub {
  text-align: center; color: rgba(255,255,255,0.6);
  font-size: 0.95rem; margin-top: 6px;
}
.checkin-page #roundName { color: rgba(255,255,255,0.55); }

/* Hide top navigation on Check-In so a student can't leave the flow.
   Counselor uses the password-gated Change Round button or Exit button to proceed. */
.checkin-page .app-nav,
.checkin-page .app-header-right .icon-btn { display: none; }

/* Counselor Exit — visible but password-gated. Lets the counselor return to
   the dashboard without exposing other navigation to a student. */
.checkin-page .counselor-exit-btn {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.checkin-page .counselor-exit-btn:hover {
  background: rgba(255,255,255,0.2);
  color: white;
}

/* Mentor selection grid — centered with fixed cell width (looks better on tablet) */
.checkin-page #mentorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
  gap: 18px;
  margin: 18px auto 0;
  justify-content: center;
}

/* Wooden 3D star buttons — six PNGs in different wood-toy gold tones,
   floating with a lively staggered twinkle. The image carries the visual
   depth (highlights, shadows, grain); CSS adds the motion + glow. */
@keyframes starTwinkle {
  0%, 100% { transform: translateY(0)    rotate(0deg)   scale(1);    }
  25%      { transform: translateY(-7px) rotate(-4deg)  scale(1.06); }
  50%      { transform: translateY(-2px) rotate(0deg)   scale(1.02); }
  75%      { transform: translateY(4px)  rotate(4deg)   scale(0.97); }
}

.checkin-page .mentor-btn {
  aspect-ratio: 1;
  padding: 0; border: none;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  filter: drop-shadow(0 8px 16px rgba(80,50,10,0.45));
  animation: starTwinkle 4.5s ease-in-out infinite;
  transition: filter 0.2s;
}
.checkin-page .mentor-btn:hover:not([disabled]):not(.done) {
  filter: drop-shadow(0 14px 26px rgba(255,200,80,0.65)) brightness(1.08);
}

/* Six wooden star PNGs cycling through the mentor list */
.checkin-page .mentor-btn:nth-child(6n+1) { background-image: url('/images/stars/star-1.png'); }
.checkin-page .mentor-btn:nth-child(6n+2) { background-image: url('/images/stars/star-2.png'); }
.checkin-page .mentor-btn:nth-child(6n+3) { background-image: url('/images/stars/star-3.png'); }
.checkin-page .mentor-btn:nth-child(6n+4) { background-image: url('/images/stars/star-4.png'); }
.checkin-page .mentor-btn:nth-child(6n+5) { background-image: url('/images/stars/star-5.png'); }
.checkin-page .mentor-btn:nth-child(6n)   { background-image: url('/images/stars/star-6.png'); }

/* Stagger durations + offsets so the field of stars moves organically */
.checkin-page .mentor-btn:nth-child(2n) { animation-duration: 5.2s; animation-delay: -0.9s; }
.checkin-page .mentor-btn:nth-child(3n) { animation-duration: 4.0s; animation-delay: -1.8s; }
.checkin-page .mentor-btn:nth-child(5n) { animation-duration: 4.7s; animation-delay: -2.6s; }

/* Mentor ID — embossed look so it reads against the wood grain */
.checkin-page .mentor-btn .mentor-id {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.2rem;
  color: #3d1e08;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 -1px 1px rgba(0,0,0,0.25);
  pointer-events: none;
}

.checkin-page .mentor-btn[disabled],
.checkin-page .mentor-btn.done {
  filter: grayscale(0.7) brightness(0.55) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  cursor: default;
  animation: none;
}
.checkin-page .mentor-btn.done .mentor-id { display: none; }
.checkin-page .mentor-btn .done-check {
  position: static;
  font-size: 2.4rem;
  color: #6ee7b7;
  text-shadow: 0 0 10px rgba(110,231,183,0.75);
  filter: drop-shadow(0 0 6px rgba(110,231,183,0.6));
}
.checkin-page .grid-empty { color: rgba(255,255,255,0.5); text-align: center; padding: 40px 20px; }

/* Round picker cards (when 2+ active rounds) */
.checkin-page #roundGrid {
  display: flex; flex-direction: column; gap: 14px; margin-top: 18px;
}
.checkin-page .round-card {
  background: rgba(255,255,255,0.06);
  border: none;
  border-left: 5px solid var(--ci-yellow);
  border-radius: 14px;
  padding: 22px 24px;
  color: white; cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 0.12s, transform 0.12s;
}
.checkin-page .round-card:hover { background: rgba(255,255,255,0.1); transform: translateX(6px); }
.checkin-page .round-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255,255,255,0.04);
}
.checkin-page .round-card.disabled:hover { background: rgba(255,255,255,0.04); transform: none; }
.checkin-page .round-card-name  { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; }
.checkin-page .round-card-dates { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.checkin-page .round-card-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.1);
  align-self: flex-start;
}
.checkin-page .round-card-badge-upcoming { background: rgba(251,191,36,0.18); color: #fbbf24 !important; }
.checkin-page .round-card-badge-closed   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55) !important; }
.checkin-page .btn-change-round {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  padding: 7px 14px; border-radius: 8px;
  font-size: 0.85rem; cursor: pointer;
  margin-bottom: 14px;
  align-self: flex-start;
}
.checkin-page .btn-change-round:hover { background: rgba(255,255,255,0.12); color: white; }

/* Pair display */
.checkin-page .checkin-pair {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 16px;
  margin-bottom: 22px;
}
.checkin-page .pair-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); font-weight: 600;
}
.checkin-page .pair-id { font-family: var(--serif); font-size: 1.5rem; color: white; margin-top: 4px; }
.checkin-page .pair-arrow { font-size: 1.5rem; color: rgba(255,255,255,0.4); }

/* Section labels */
.checkin-page .section-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.checkin-page .section { margin-bottom: 18px; }

/* Read-aloud language: small icon in its own right-aligned bar above the
   mentor/mentee pair display, opens a popover with the language picker.
   Optional setting, sits outside the main check-in flow. */
.checkin-page .checkin-top-bar {
  display: flex; justify-content: flex-end;
  min-height: 36px; margin-bottom: 4px;
}
.checkin-page .speech-lang-control {
  position: relative;
  z-index: 5;
}
.checkin-page .speech-lang-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; color: white;
  width: 36px; height: 36px; cursor: pointer;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.checkin-page .speech-lang-btn:hover { background: rgba(255,255,255,0.18); }
.checkin-page .speech-lang-btn[aria-expanded="true"] {
  background: var(--ci-yellow); color: #1a1d3a; border-color: var(--ci-yellow);
}
.checkin-page .speech-lang-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--ci-bg-end, #1e1b4b);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 8px;
}
.checkin-page .speech-lang-popover[hidden] { display: none; }
.checkin-page .speech-lang-popover-title {
  font-size: 0.78rem; color: rgba(255,255,255,0.75); font-weight: 600;
}
.checkin-page .speech-lang {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; color: white;
  padding: 8px 10px; font-size: 0.9rem; outline: none;
  font-family: var(--sans);
}
.checkin-page .speech-lang option { color: #1a202c; background: white; }
.checkin-page .speech-lang option:disabled { color: #a0aec0; font-style: italic; }

/* Inline speaker / stop / mic buttons */
.checkin-page .speak-btn,
.checkin-page .stop-btn,
.checkin-page .mic-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; color: white;
  width: 36px; height: 36px; cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.checkin-page .speak-btn:hover,
.checkin-page .stop-btn:hover,
.checkin-page .mic-btn:hover { background: rgba(255,255,255,0.18); }
.checkin-page .speak-btn:disabled,
.checkin-page .stop-btn:disabled,
.checkin-page .mic-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.checkin-page .speak-btn.speaking { background: var(--ci-yellow); color: #1a1d3a; }
.checkin-page .mic-btn.recording {
  background: #ef4444; border-color: #ef4444; color: white;
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* In the section label the speak/stop buttons are smaller to match the small caps text */
.checkin-page .section-label .speak-btn,
.checkin-page .section-label .stop-btn { width: 28px; height: 28px; font-size: 0.85rem; }

/* Wrapper for input + speak/mic buttons sitting on the right */
.checkin-page .input-with-speak {
  display: flex; gap: 6px; align-items: stretch;
}
.checkin-page .input-with-speak .checkin-input { flex: 1; }

/* Attendance buttons */
.checkin-page .attend-row { display: flex; gap: 12px; }
.checkin-page .attend-btn {
  flex: 1; padding: 18px;
  border: none; border-radius: 14px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  cursor: pointer; text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.12s, color 0.12s;
}
.checkin-page .attend-btn .attend-sub {
  display: block; font-family: var(--sans); font-size: 0.78rem;
  font-weight: 500; margin-top: 4px; opacity: 0.85;
}
.checkin-page .attend-btn.present.selected { background: var(--ci-mint); color: white; }
.checkin-page .attend-btn.absent.selected  { background: var(--ci-zone-r); color: white; }

/* Zone buttons */
.checkin-page .zone-row { display: flex; gap: 10px; flex-wrap: wrap; }
.checkin-page .zone-btn {
  flex: 1; min-width: 70px; padding: 16px 6px;
  border: none; border-radius: 12px;
  text-align: center; cursor: pointer;
  font-family: var(--serif); font-size: 1.25rem;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.12s, box-shadow 0.12s;
}
.checkin-page .zone-btn:hover { transform: translateY(-2px); }
.checkin-page .zone-btn.selected {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 6px 16px rgba(0,0,0,0.35);
}
.checkin-page .zone-btn.blue   { background: var(--ci-zone-b); }
.checkin-page .zone-btn.green  { background: var(--ci-zone-g); }
.checkin-page .zone-btn.yellow { background: var(--ci-zone-y); }
.checkin-page .zone-btn.red    { background: var(--ci-zone-r); }
.checkin-page .zone-btn .zone-letter { display: block; font-size: 1.5rem; }
.checkin-page .zone-btn .zone-sub { display: block; font-family: var(--sans); font-size: 0.7rem; margin-top: 3px; opacity: 0.95; }

/* Coping input + flag + notes */
.checkin-page .checkin-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; color: white;
  padding: 12px 14px; font-size: 1rem; width: 100%;
  outline: none;
}
.checkin-page .checkin-input::placeholder { color: rgba(255,255,255,0.35); }
.checkin-page .checkin-input:focus { border-color: var(--ci-yellow); }

.checkin-page .flag-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px; padding: 14px 16px; cursor: pointer;
}
.checkin-page .flag-row input[type=checkbox] {
  width: 22px; height: 22px; accent-color: var(--ci-zone-r);
}
.checkin-page .flag-text { color: #fecaca; font-weight: 600; font-size: 0.95rem; }

/* Submit */
.checkin-page .submit-btn {
  width: 100%; padding: 18px;
  border: none; border-radius: 14px;
  background: var(--ci-action); color: white;
  font-family: var(--sans); font-weight: 700; font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: background 0.12s, transform 0.08s;
}
.checkin-page .submit-btn:hover:not(:disabled) { background: #d97706; }
.checkin-page .submit-btn:active:not(:disabled) { transform: scale(0.99); }
.checkin-page .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.checkin-page .btn-back {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.8);
  padding: 12px; border-radius: 12px;
  width: 100%; margin-top: 10px; cursor: pointer;
  font-family: var(--sans); font-size: 0.9rem;
}
.checkin-page .form-error {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3);
  color: #fecaca; padding: 12px 16px; border-radius: 8px;
  font-size: 0.9rem; margin-bottom: 12px;
}

/* Success / no-round / error info screens */
.checkin-page #screen-success,
.checkin-page #screen-no-round,
.checkin-page #screen-error,
.checkin-page #screen-no-school {
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 16px;
  padding: 48px 20px;
  min-height: 50vh;
}
.checkin-page #screen-success:not([hidden]),
.checkin-page #screen-no-round:not([hidden]),
.checkin-page #screen-error:not([hidden]),
.checkin-page #screen-no-school:not([hidden]) { display: flex; }
.checkin-page .success-icon, .checkin-page .info-icon { font-size: 3.6rem; }
.checkin-page .success-title { font-family: var(--serif); font-size: 2rem; color: var(--ci-mint); }
.checkin-page .success-sub, .checkin-page .info-sub { color: rgba(255,255,255,0.6); }
.checkin-page .success-flag {
  margin-top: 16px;
  background: rgba(239,68,68,0.18); color: #fecaca;
  padding: 12px 18px; border-radius: 10px; font-weight: 600;
}
.checkin-page .info-title { font-family: var(--serif); font-size: 1.6rem; }
.checkin-page .btn-reload {
  background: var(--ci-action); color: white; border: none;
  padding: 12px 24px; border-radius: 10px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}

#progressText { text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.55); margin: 14px 0; }
#progressText strong { color: var(--ci-yellow); font-weight: 700; }

/* Reauthentication modal — gates Change Round so students can't switch rounds */
.checkin-page .reauth-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  align-items: center; justify-content: center;
  z-index: 1100; padding: 20px;
}
.checkin-page .reauth-overlay.open { display: flex; }
.checkin-page .reauth-box {
  background: #1e1b4b;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.checkin-page .reauth-title {
  font-family: var(--serif); font-size: 1.5rem; color: white;
  text-align: center; margin-bottom: 6px; font-weight: 400;
}
.checkin-page .reauth-sub {
  text-align: center; color: rgba(255,255,255,0.6);
  font-size: 0.92rem; margin-bottom: 4px;
}
.checkin-page .reauth-email {
  text-align: center; color: var(--ci-yellow);
  font-size: 0.88rem; font-weight: 600; margin-bottom: 18px;
}
.checkin-page .reauth-input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; color: white;
  font-size: 1rem; font-family: var(--sans);
  outline: none;
}
.checkin-page .reauth-input::placeholder { color: rgba(255,255,255,0.4); }
.checkin-page .reauth-input:focus { border-color: var(--ci-yellow); }
.checkin-page .reauth-error {
  background: rgba(239,68,68,0.18);
  color: #fecaca;
  padding: 10px 14px; border-radius: 8px;
  font-size: 0.88rem; margin-top: 12px;
}
.checkin-page .reauth-actions {
  display: flex; gap: 10px; margin-top: 18px;
}
.checkin-page .reauth-actions button { flex: 1; margin-top: 0; }

/* Locked state — applied to body while the post-submit "All Done" screen is
   showing. Hides every escape hatch in the header so a student can't
   navigate away, change rounds, or exit the check-in flow without first
   passing the PIN keypad. The brand and the unlock button on the success
   screen stay visible. visibility:hidden (not display:none) keeps the
   header's height stable so the page doesn't jump. */
.checkin-page.checkin-locked .app-nav,
.checkin-page.checkin-locked .school-pill,
.checkin-page.checkin-locked .icon-btn,
.checkin-page.checkin-locked .counselor-exit-btn { visibility: hidden; }

/* Larger, clearly tappable unlock button on the locked screen. */
.checkin-page .unlock-btn {
  margin-top: 28px;
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 1rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
.checkin-page .unlock-btn:hover { background: rgba(255,255,255,0.14); }

/* PIN keypad — re-uses the .reauth-overlay/.reauth-box scaffolding so the
   modal chrome matches the existing password modal. */
.checkin-page .pin-slots {
  display: flex; justify-content: center; gap: 10px;
  margin: 18px 0 22px;
}
.checkin-page .pin-slot {
  width: 36px; height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--ci-yellow);
}
.checkin-page .pin-slot.filled {
  background: rgba(255,193,7,0.16);
  border-color: var(--ci-yellow);
}
.checkin-page .pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.checkin-page .pin-key {
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px 0;
  font-size: 1.5rem; font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  user-select: none;
}
.checkin-page .pin-key:active { background: rgba(255,255,255,0.18); }
.checkin-page .pin-key:disabled { opacity: 0.4; cursor: not-allowed; }
.checkin-page .pin-key.action {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
}
.checkin-page .pin-lockout {
  text-align: center; color: #fecaca;
  background: rgba(239,68,68,0.18);
  border-radius: 8px; padding: 10px 14px;
  font-size: 0.9rem; margin-top: 12px;
}
.checkin-page .pin-fallback-link {
  display: block; text-align: center;
  margin-top: 14px; font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  cursor: pointer; background: none; border: none;
}