/* ---------- Tokens ---------- */
:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --border: #e7e7ea;
  --border-strong: #d9d9de;
  --text: #111827;
  --text-2: #374151;
  --muted: #6b7280;
  --faint: #9ca3af;

  --primary: #1f2340;
  --primary-hover: #2a2f55;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --success: #2f9e5b;
  --success-soft: #e8f6ee;
  --info: #2b6fd6;
  --info-soft: #e8f0fd;
  --warn: #d9792b;
  --warn-soft: #fdf0e6;
  --low-bg: #fff4dc;
  --low-text: #d97706;
  --banner-bg: #ecf8ef;
  --banner-text: #1f7a44;
  /* Status text. Darker than the fills above so 13px labels pass 4.5:1. */
  --present: #1f7a44;
  --late: #b45309;
  --absent: #c7343a;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(17 24 39 / .05);
  --shadow: 0 1px 3px rgb(17 24 39 / .06), 0 1px 2px rgb(17 24 39 / .04);
  --shadow-lg: 0 24px 48px -12px rgb(17 24 39 / .25);

  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 120ms;
  --med: 200ms;

  --sidebar-w: 260px;
  --rail-w: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.icon { width: 18px; height: 18px; flex: none; }

/* ---------- App layout ---------- */
.app { display: flex; height: 100vh; height: 100dvh; }

/* ---------- Sidebar ----------
   260px with labels, or the 64px icon rail. Items are 40px squares with 20px icons, and every
   icon sits 32px from the left edge in both widths, so only the labels move. */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 11px 16px 12px; /* 11px right + the 1px border keep rail items 40px wide */
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width 220ms var(--ease);
}
.app.rail .sidebar { width: var(--rail-w); }
.label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 160ms var(--ease); }
.app.rail .label { opacity: 0; pointer-events: none; }

.side-head { display: flex; align-items: center; gap: 10px; height: 40px; margin-bottom: 16px; }
.brand { font-size: 16px; font-weight: 600; line-height: 1; }
.sidebar-toggle {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sidebar-toggle .icon { width: 20px; height: 20px; }
.sidebar-toggle:hover { background: var(--surface-2); color: var(--text); }
.app.narrow .sidebar-toggle { display: none; }

.nav-main, .nav-bottom, .periods { display: flex; flex-direction: column; gap: 8px; }
.nav-bottom { margin-top: auto; }
.nav-item {
  width: 100%; height: 40px;
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-item .icon { width: 20px; height: 20px; }
.nav-item > .label { flex: 1; color: var(--text-2); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); }
.nav-item.active > .label { color: var(--text); font-weight: 600; }

/* "Periods" heading; a short divider in the rail. */
.section { position: relative; flex: none; height: 22px; margin-top: 4px; padding: 4px 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.section::after {
  content: "";
  position: absolute; left: 8px; top: 11px;
  width: 24px; height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.app.rail .section::after { opacity: 1; }

/* Each period has a number tile where the other items have an icon. */
.period { padding-left: 9px; }
.period-tile {
  width: 22px; height: 22px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.period.active .period-tile { border-color: var(--primary); background: var(--primary); color: #fff; }
.nav-item > .count { flex: none; color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-note { margin: 0; padding: 0 10px; color: var(--muted); font-size: 11px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.topbar {
  flex: none;
  padding: 12px 20px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-row { display: flex; align-items: center; gap: 12px; }
.search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text);
}
.search input::placeholder { color: var(--muted); }
.search:focus-within { box-shadow: 0 0 0 2px var(--info-soft); }
.actions { display: flex; align-items: center; gap: 4px; flex: none; }
.status:empty { display: none; }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:disabled { opacity: .4; }
.btn-xl { width: 100%; height: 56px; font-size: 18px; border-radius: 12px; }
/* ---------- Toolbar actions ---------- */
.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.action .icon { width: 16px; height: 16px; }
.action:hover { background: var(--surface-2); }
.action-outline-danger { border-color: #f5c6c7; color: var(--absent); }
.action-outline-danger:hover { background: var(--danger-soft); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.btn-link .icon { width: 15px; height: 15px; }
.btn-link:hover:not(:disabled) { background: var(--surface-2); }
.btn-link:disabled { opacity: .4; }
.btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn-secondary { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); }
/* --danger is too light for text (3.9:1), so red text and buttons use the darker --absent. */
.btn-danger { background: var(--absent); color: #fff; }
.btn-danger:hover { background: #ad2b31; }
/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(17 24 39 / .45);
  animation: fade-in var(--med) var(--ease);
}
.modal-backdrop.closing { animation: fade-out 150ms ease-in forwards; pointer-events: none; }
.modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  outline: 0;
  overflow: hidden;
  animation: pop-in 240ms var(--ease);
}
.modal-backdrop.closing .modal { animation: pop-out 150ms ease-in forwards; }
.modal-sm { width: min(420px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--muted);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 16px 24px 24px; overflow-y: auto; }
.modal-text { margin: 0 0 20px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.97); } }
.muted { color: var(--muted); }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.field input, .money-input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 16px;
  font-weight: 400;
}
.money-input { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.money-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; }
.field input:focus, .money-input:focus-within { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); outline: 0; }
.field-error { margin: 0 0 12px; color: var(--absent); font-size: 13px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button {
  height: 56px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 22px;
  font-weight: 500;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.keypad button:hover { background: var(--surface-2); }
.keypad .icon { width: 22px; height: 22px; }
.keypad .key-clear { grid-column: 1 / -1; border: 0; color: var(--absent); font-size: 18px; }
.keypad .key-clear:hover { background: var(--danger-soft); }

/* ---------- Shared bits ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1; }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  resize: vertical;
}
.field textarea:focus { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); outline: 0; }
.field input[type="time"] { max-width: 180px; }
.modal-actions .spacer { flex: 1; }
.danger-link { color: var(--absent); }
.danger-link:hover { background: var(--danger-soft) !important; }
.file-btn { cursor: pointer; }
.page-head .btn-primary, .page-head .btn-secondary { height: 40px; padding: 0 16px; }
.page-head .btn-primary .icon, .page-head .btn-secondary .icon { width: 16px; height: 16px; }
.panel-head .spacer { flex: 1; }
.panel-head > div > .stat-sub { margin-top: 2px; }
.panel a, .panel-empty a { color: var(--info); font-weight: 500; }
.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--absent); }

/* ---------- Status colors ---------- */
.status-present { color: var(--present); }
.status-late { color: var(--late); }
.status-absent { color: var(--absent); }
.status-notyet { color: var(--muted); }

/* ---------- Attendance ---------- */
.page-title { display: flex; flex-direction: column; min-width: 0; }
.page-title small { color: var(--muted); font-size: 12px; font-weight: 500; }
.page-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-step { display: flex; align-items: center; gap: 2px; }
.date-step .action { padding: 0 8px; }
.date-step input {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14px;
}
.page-head button:disabled { opacity: .4; }
.student-name { font-weight: 500; }
.table .status-col { text-align: right; }
.status-cell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.status-text { min-width: 56px; font-size: 13px; font-weight: 600; text-align: left; }
/* Shows on an overridden row, left of the P / L / A; clicking it undoes the edit. */
.edited-undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.edited-undo:hover { color: var(--text); }
.edited-undo .icon { width: 14px; height: 14px; }
.seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.seg button {
  width: 36px; height: 32px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg .seg-present[aria-pressed="true"] { background: var(--success-soft); color: var(--present); box-shadow: inset 0 0 0 1px #a9dcbd; }
.seg .seg-late[aria-pressed="true"] { background: var(--warn-soft); color: #9a4a0a; box-shadow: inset 0 0 0 1px #f1c9a6; }
.seg .seg-absent[aria-pressed="true"] { background: var(--danger-soft); color: var(--absent); box-shadow: inset 0 0 0 1px #f5c6c7; }

/* Keeps its full height so the page scrolls, instead of the column squeezing and clipping it. */
.att-panel { flex: none; }

/* ---------- Classes ---------- */
.roster { max-height: 380px; overflow-y: auto; }
.roster .list-row { padding: 6px 8px 6px 16px; }

/* ---------- Kiosk (check-in screen) ---------- */
.kiosk-mode .sidebar { display: none; }
.kiosk {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Dark bar across the top, laid out like the library's student kiosk. */
.kiosk-bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--primary);
  color: #fff;
}
.kiosk-class { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.kiosk-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.kiosk-clock #clock { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kiosk-clock #date, .kiosk-count { font-size: 15px; color: rgb(255 255 255 / .8); }
.kiosk-count { margin: 0; justify-self: end; font-weight: 500; font-variant-numeric: tabular-nums; }
.kiosk-bar .action { color: #fff; border-color: rgb(255 255 255 / .3); }
.kiosk-bar .action:hover { background: rgb(255 255 255 / .1); }

.kiosk-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 30%) 1fr;
}
.kiosk-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.kiosk-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--surface-2); }
.kiosk-tab { flex: 1; height: 44px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 16px; font-weight: 600; }
.kiosk-tab[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.kiosk-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; }
.kiosk-label { font-size: 15px; font-weight: 600; color: var(--text-2); }
.kiosk-search {
  flex: none;
  height: 64px;
  padding: 0 18px;
  gap: 12px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.kiosk-search .icon { width: 22px; height: 22px; }
.kiosk-search input { font-size: 22px; }
.kiosk-search:focus-within { border-color: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }
.kiosk-entry .btn-xl { height: 60px; font-size: 20px; }
.kiosk-help { margin: 0; color: var(--muted); font-size: 16px; }
.kiosk-session { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.kiosk-session.done { background: var(--surface-2); }
.kiosk-session-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kiosk-session p { margin: 0; }
.kiosk-session-title { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kiosk-session-name { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.kiosk-session-sub { color: var(--text-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.kiosk-session .stopwatch { text-align: center; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.kiosk-session .btn-primary { height: 44px; padding: 0 22px; font-size: 16px; justify-self: end; }
.kiosk-list-title { margin: 14px 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kiosk-session + .kiosk-list-title, .kiosk-list-title:first-child { margin-top: 0; }
/* Leave waitlist: quiet gray, so it doesn't compete with Go now. */
.btn-gray { flex: none; height: 44px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 16px; font-weight: 600; }
.btn-gray:hover { background: var(--border); }
.kiosk-undo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark label actions" "mark name name";
  align-items: center;
  gap: 0 12px;
  padding: 10px 8px 18px 14px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--success-soft);
  animation: fade-in var(--med) var(--ease);
}
.kiosk-undo[hidden] { display: none; }
.kiosk-undo-mark {
  grid-area: mark;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--present);
  color: #fff;
}
.kiosk-undo-mark .icon { width: 22px; height: 22px; stroke-width: 2.5; }
.kiosk-undo-label span { white-space: nowrap; }
.kiosk-undo-label { grid-area: label; color: var(--present); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The name is the confirmation: big enough to read while turning away from the door. */
.kiosk-undo-name { grid-area: name; padding-right: 8px; color: var(--text); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kiosk-undo-actions { grid-area: actions; display: flex; align-items: center; gap: 2px; }
.kiosk-undo .btn-link { font-size: 15px; white-space: nowrap; color: var(--text); text-decoration: underline; }
.kiosk-undo-close {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.kiosk-undo-close:hover { background: rgb(17 24 39 / .06); }
.kiosk-undo-close .icon { width: 18px; height: 18px; }
/* Runs out over 8s, then the view closes the notice. */
.kiosk-undo-bar {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--present);
  transform-origin: left;
  animation: undo-countdown 8s linear forwards;
}
@keyframes undo-countdown { to { transform: scaleX(0); } }

/* Only the list scrolls. */
.kiosk-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px;
}
.kiosk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  margin-bottom: 6px;
  padding: 8px 10px 8px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.kiosk-row.highlight { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.kiosk-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 500; overflow-wrap: anywhere; }
.kiosk-row .btn-primary { height: 44px; padding: 0 22px; font-size: 16px; flex: none; }
/* Checked in: dimmed, but --muted on white still passes 4.5:1. */
.kiosk-row.done { border-color: transparent; }
.kiosk-row.done .kiosk-name { color: var(--muted); font-weight: 400; }
.kiosk-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-right: 10px;
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.kiosk-done .icon { width: 16px; height: 16px; color: var(--present); }
.kiosk-empty { padding: 40px 0; color: var(--muted); font-size: 18px; text-align: center; }

/* Narrow screens: entry on top, roster below, and the whole page scrolls. */
@media (max-width: 820px) {
  .kiosk { overflow-y: auto; }
  .kiosk-bar { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 16px; }
  .kiosk-bar .action { grid-area: 1 / 2; }
  .kiosk-clock { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; white-space: nowrap; }
  .kiosk-clock #clock { font-size: 24px; }
  .kiosk-count { grid-column: 1 / -1; justify-self: start; }
  .kiosk-class { font-size: 17px; }
  .kiosk-body { flex: none; display: block; }
  .kiosk-entry { padding: 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .kiosk-list { overflow: visible; padding: 12px 16px; }
  .kiosk-name { font-size: 17px; }
  .kiosk-row { flex-wrap: wrap; gap: 4px 12px; }
  /* Name on its own line, so Go now and Leave waitlist beside it don't squeeze it. */
  .kiosk-row.wait .kiosk-name { flex: 1 0 100%; }
  /* Too narrow for three columns: details on top, then the timer and the button. */
  .kiosk-session { grid-template-columns: 1fr auto; }
  .kiosk-session-info { grid-column: 1 / -1; }
  .kiosk-session .stopwatch { text-align: left; }
}

.pin-modal .modal-text { margin-bottom: 16px; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 8px; }
.pin-dots span {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pin-dots span.on { background: var(--primary); border-color: var(--primary); }
.pin-error { min-height: 18px; text-align: center; }

@media (max-width: 760px) {
  .page-head { flex-wrap: wrap; }
  .page-head .spacer { display: none; }
  .page-head h1, .page-title { flex-basis: 100%; }
  .page-head .btn-primary, .page-head .btn-secondary { padding: 0 12px; }
  .page-body .stats-row { grid-template-columns: repeat(2, 1fr); }
  .page-body .panels { grid-template-columns: minmax(0, 1fr); }
  .page-body .panel-head { flex-wrap: wrap; }
  .status-cell { gap: 6px; }
}

/* ---------- Motion ---------- */
.keypad button:active,
.action:active,
.seg button:active,
.btn-primary:active:not(:disabled),
.btn-secondary:active,
.btn-danger:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :active { transform: none !important; }
  /* The countdown is what closes the undo notice, so it has to keep running. */
  .kiosk-undo-bar { animation: undo-countdown 8s linear forwards !important; }
}
/* ---------- Pages (shared layout for sidebar sections) ---------- */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { margin: 0; font-size: 20px; font-weight: 600; }
.page-head .spacer { flex: 1; }
.page-head .search { flex: 0 1 320px; min-width: 160px; border: 1px solid var(--border); }
.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Panels clip their contents, so without this they shrink to fit instead of letting the page scroll. */
.page-body > * { flex-shrink: 0; }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { margin-top: 4px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.positive { color: var(--success); }
.stat-sub { margin-top: 2px; color: var(--muted); font-size: 12px; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(320px, calc(50% - 8px)), 1fr)); gap: 16px; align-items: start; }
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-head .stat-sub { margin: 0; }
.panel-body { padding: 12px 16px 16px; }
.panel-empty { padding: 28px 16px; color: var(--muted); text-align: center; font-size: 13px; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .muted { color: var(--muted); }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.list-row:last-child { border-bottom: 0; }
button.list-row { transition: background var(--fast) var(--ease); }
button.list-row:hover { background: var(--surface-2); }
.list-icon {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}
.list-icon .icon { width: 16px; height: 16px; }
.list-icon.cash { background: var(--success-soft); color: var(--success); }
.list-icon.wallet { background: var(--info-soft); color: var(--info); }
.list-icon.card { background: var(--warn-soft); color: var(--warn); }
.list-icon.danger { background: var(--danger-soft); color: var(--danger); }
.list-text { flex: 1; min-width: 0; }
.list-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub { color: var(--muted); font-size: 12px; }
.list-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-amount.positive { color: var(--success); }
.list-amount.negative { color: var(--danger); }

@media (max-width: 760px) {
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .table td { border: 0; padding: 4px 16px; }
  .table td.status-col { grid-column: 1 / -1; }
  /* The header row is hidden here, so cells that need a name carry it with them. */
  .table td[data-label]::before { content: attr(data-label) ": "; }
  /* When the row is too narrow, Edited · Undo wraps onto its own line above the buttons. */
  .status-cell { flex-wrap: wrap-reverse; }
  .edited-undo { order: 1; }
}
/* ---------- Attendance and Restroom tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; border-bottom: 1px solid var(--border-strong); }
.tab { margin-bottom: -1px; padding: 10px 16px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 500; text-decoration: none; }
.tab:hover { color: var(--text-2); }
.tab[aria-current="page"] { border-bottom-color: var(--primary); color: var(--text); }
.tabs-brief { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-controls { border-style: dashed; }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-row .spacer { flex: 1; }
.demo-row input[type="time"] { height: 40px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; }
.demo-error { margin: 0; padding: 0 16px 12px; }
.restroom-rule { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); font-size: 16px; font-weight: 600; }
.restroom-grid { display: grid; grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); gap: 16px; align-items: start; }
.restroom-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 980px) { .restroom-grid { grid-template-columns: minmax(0, 1fr); } }
.trip-list .list-text { display: flex; flex-direction: column; gap: 2px; }
.trip-list .list-row { flex-wrap: wrap; }

/* ---------- Settings ---------- */
.settings { width: 100%; max-width: 920px; margin: 0 auto; gap: 48px; padding-top: 32px; }
.settings-section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: start; }
.settings-label { margin: 0; padding-top: 2px; font-size: 14px; font-weight: 500; }
.settings-main { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.setting-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.setting-title { font-size: 14px; font-weight: 600; }
.setting-sub { margin: 0; color: var(--muted); font-size: 12px; }
.setting-row input { flex: none; width: 96px; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 15px; text-align: right; }
.setting-row input:focus { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); outline: 0; }
.setting-control { display: flex; align-items: center; gap: 8px; }
.setting-unit { color: var(--muted); font-size: 13px; }
.settings-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px; }
.settings-foot-start { justify-content: flex-start; }
.settings-foot .field-error { margin: 0; }
.settings-foot .btn-primary, .settings-main .btn-secondary, .settings-main .btn-danger { height: 38px; padding: 0 16px; font-size: 14px; flex: none; }
.settings-main .btn-secondary, .settings-main .btn-danger { cursor: pointer; }
.settings-main a.btn-secondary { text-decoration: none; }
.support-email { color: var(--text); font-size: 13px; user-select: all; }
.settings-main .icon { width: 16px; height: 16px; }
.settings-main > :last-child { border-bottom: 0; }
.settings-main > .setting-row:has(+ .settings-foot) { border-bottom: 0; padding-bottom: 4px; }
.settings-plain { display: grid; justify-items: start; gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
.settings-plain .btn-danger { background: var(--danger-soft); color: var(--absent); }
.settings-plain .btn-danger:hover { background: var(--absent); color: #fff; }
.saved-note { display: inline-flex; align-items: center; gap: 4px; color: var(--present); font-size: 13px; animation: fade-in var(--med) var(--ease); }
.saved-note[hidden] { display: none; }
.saved-note .icon { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .settings-section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .setting-row { flex-wrap: wrap; }
  .setting-text { flex-basis: 220px; }
}