/* =====================================================================
   UGMS Smart Attendance & Classroom Assessment System
   Design system — "Institutional Ledger"

   Palette derives from the UG crest: deep navy field, gold rule.
   Type: Bricolage Grotesque (display) / Hanken Grotesk (body) / DM Mono (data)
   Signature element: the verification stamp chain (.ledger)
   ===================================================================== */

:root {
  /* Core palette */
  --navy:        #0B2545;
  --navy-deep:   #071A33;
  --navy-soft:   #16375F;
  --navy-mist:   #E8EDF4;
  --gold:        #C8A44B;
  --gold-soft:   #F3E9CE;

  /* Neutrals */
  --paper:       #F2F4F7;
  --surface:     #FFFFFF;
  --line:        #DDE3EC;
  --line-soft:   #EDF0F5;
  --ink:         #16202F;
  --ink-mid:     #47546B;
  --ink-light:   #7C889C;

  /* Signals */
  --pass:        #16795E;
  --pass-bg:     #E4F2ED;
  --warn:        #A8690B;
  --warn-bg:     #FBF0DC;
  --fail:        #A82117;
  --fail-bg:     #FBE9E7;
  --info:        #1D5FA8;
  --info-bg:     #E5EFF9;

  /* Structure */
  --radius:      6px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --shadow:      0 1px 2px rgba(11,37,69,.06), 0 4px 16px rgba(11,37,69,.06);
  --shadow-lg:   0 8px 40px rgba(11,37,69,.14);
  --sidebar-w:   246px;

  /* Type */
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 .5rem;
  line-height: 1.2;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }

p { margin: 0 0 1rem; }
a { color: var(--navy-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The eyebrow: a gold-ruled label that classifies the block beneath it. */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .5;
}

.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }
.muted { color: var(--ink-light); }
.small { font-size: .82rem; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
   LAYOUT SHELL
   ===================================================================== */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  transition: transform .22s ease;
}

.sidebar-brand {
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-brand img { display: block; height: 30px; width: auto; filter: brightness(0) invert(1); }
.sidebar-brand .brand-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 9px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }
.nav-group { margin-bottom: 16px; }
.nav-group-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  padding: 6px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.8);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 1px;
  border-left: 2px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-item.active {
  background: rgba(200,164,75,.14);
  color: #fff;
  border-left-color: var(--gold);
}
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.nav-item .badge-count {
  margin-left: auto;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 20px;
}

.sidebar-foot {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.42);
  letter-spacing: .05em;
}

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar h1 { font-size: 1.02rem; margin: 0; }
.topbar .page-context { font-family: var(--mono); font-size: 10.5px; color: var(--ink-light); letter-spacing: .1em; text-transform: uppercase; }
.topbar-spacer { flex: 1; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--navy);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.user-chip:hover { border-color: var(--navy-soft); }
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  flex: 0 0 28px;
}
.avatar.gold { background: var(--gold); color: var(--navy-deep); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 208px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 70;
}
.dropdown-menu.open { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--navy-mist); text-decoration: none; }
.dropdown-head { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.dropdown-head .name { font-weight: 600; font-size: 13.5px; }
.dropdown-head .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-light); }

.content { padding: 22px; flex: 1; max-width: 1360px; width: 100%; }

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head .page-title h1 { margin-bottom: 2px; }
.page-head .page-title p { margin: 0; color: var(--ink-mid); font-size: 13.5px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   CARDS & PANELS
   ===================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .card-actions { margin-left: auto; display: flex; gap: 8px; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
.card-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  background: #FAFBFC;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }

/* Statistic tile — the number leads, the label is a mono caption. */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
}
.stat.pass::before { background: var(--pass); }
.stat.fail::before { background: var(--fail); }
.stat.info::before { background: var(--info); }
.stat .stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.stat .stat-value {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--navy);
  line-height: 1.1;
  margin-top: 3px;
}
.stat .stat-meta { font-size: 12.5px; color: var(--ink-mid); margin-top: 2px; }

/* =====================================================================
   SIGNATURE: THE VERIFICATION STAMP CHAIN
   Each attendance submission passes a fixed sequence of checks. The chain
   shows exactly which stage passed, failed, or was skipped.
   ===================================================================== */

.ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.ledger-stage {
  flex: 1 1 0;
  min-width: 92px;
  padding: 10px 10px 11px;
  border-right: 1px solid var(--line-soft);
  position: relative;
  text-align: center;
}
.ledger-stage:last-child { border-right: 0; }
.ledger-stage .stage-name {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-bottom: 5px;
}
.ledger-stage .stage-mark {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid currentColor;
}
.ledger-stage.pass { background: linear-gradient(180deg, var(--pass-bg), transparent 70%); }
.ledger-stage.pass .stage-mark { color: var(--pass); }
.ledger-stage.fail { background: linear-gradient(180deg, var(--fail-bg), transparent 70%); }
.ledger-stage.fail .stage-mark { color: var(--fail); }
.ledger-stage.skip .stage-mark { color: var(--ink-light); border-style: dashed; }
.ledger-stage.pending .stage-mark { color: var(--line); }

.ledger-verdict {
  flex: 0 0 100%;
  border-top: 1px solid var(--line);
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ledger-verdict.verified { background: var(--pass-bg); color: var(--pass); }
.ledger-verdict.rejected { background: var(--fail-bg); color: var(--fail); }

/* =====================================================================
   FORMS
   ===================================================================== */

.form-grid { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field.span-2 { grid-column: span 2; }
.field.span-full { grid-column: 1 / -1; }

.field label, .field > .label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 5px;
}
.field .hint { font-size: 12px; color: var(--ink-light); margin-top: 4px; }
.field .error-text { font-size: 12px; color: var(--fail); margin-top: 4px; }
.required { color: var(--fail); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search],
input[type=tel], input[type=url], select, textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(22,55,95,.1);
}
input:disabled, select:disabled, textarea:disabled { background: var(--paper); color: var(--ink-light); }
input.mono-input { font-family: var(--mono); letter-spacing: .04em; }
textarea { resize: vertical; min-height: 88px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2347546B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.check:hover { border-color: var(--navy-soft); }
.check input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.check .check-label { font-size: 13.5px; font-weight: 500; }
.check .check-hint { font-size: 12px; color: var(--ink-light); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 21px;
  background: var(--line);
  border-radius: 20px;
  position: relative;
  transition: background .16s;
  flex: 0 0 38px;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .16s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: var(--pass); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
fieldset legend { padding: 0; margin-bottom: 12px; width: 100%; }

/* =====================================================================
   BUTTONS
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-deep); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover:not(:disabled) { background: #B8943C; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--navy-soft); background: #FAFBFC; }
.btn-danger { background: var(--fail); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #8E1B12; }
.btn-quiet { background: transparent; color: var(--ink-mid); padding: 6px 9px; }
.btn-quiet:hover:not(:disabled) { background: var(--navy-mist); color: var(--navy); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =====================================================================
   TABLES
   ===================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: 400;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #FAFBFC;
  white-space: nowrap;
}
table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #FAFBFC; }
table.data td .primary-cell { font-weight: 600; color: var(--navy); }
table.data td .sub-cell { font-size: 12px; color: var(--ink-light); }
table.data td.num { font-family: var(--mono); text-align: right; }

.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-mid);
}
.empty .empty-mark {
  width: 42px; height: 42px;
  margin: 0 auto 12px;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-light);
}
.empty h3 { margin-bottom: 4px; }
.empty p { font-size: 13.5px; margin-bottom: 14px; }

/* =====================================================================
   BADGES & STATUS
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--navy-mist);
  color: var(--navy-soft);
  white-space: nowrap;
}
.badge.pass  { background: var(--pass-bg); color: var(--pass); }
.badge.fail  { background: var(--fail-bg); color: var(--fail); }
.badge.warn  { background: var(--warn-bg); color: var(--warn); }
.badge.info  { background: var(--info-bg); color: var(--info); }
.badge.gold  { background: var(--gold-soft); color: #8A6E20; }
.badge.plain { background: var(--paper); color: var(--ink-light); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.badge.live { background: var(--pass-bg); color: var(--pass); }
.badge.live .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* =====================================================================
   ALERTS
   ===================================================================== */

.alert {
  display: flex;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13.5px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.alert .alert-body { flex: 1; }
.alert strong { display: block; margin-bottom: 2px; }
.alert-success { background: var(--pass-bg); border-color: #B6DDD0; color: #0E5A45; }
.alert-error   { background: var(--fail-bg); border-color: #EDC3BE; color: #7E1A12; }
.alert-warn    { background: var(--warn-bg); border-color: #E8D2A4; color: #7C4D08; }
.alert-info    { background: var(--info-bg); border-color: #BFD8F0; color: #164A82; }

.flash-stack {
  position: fixed;
  top: 68px; right: 20px;
  z-index: 90;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash-stack .alert { box-shadow: var(--shadow-lg); margin: 0; }

/* =====================================================================
   FILTER BAR
   ===================================================================== */

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.filters .field { min-width: 150px; flex: 1 1 150px; margin: 0; }
.filters .field label { font-size: 11px; }
.filters .filter-actions { display: flex; gap: 8px; }

.search-inline { position: relative; flex: 2 1 220px; }
.search-inline input { padding-left: 32px; }
.search-inline svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--ink-light);
  pointer-events: none;
}

/* =====================================================================
   PAGINATION
   ===================================================================== */

.pager { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 32px;
  height: 30px;
  padding: 0 9px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mid);
  background: var(--surface);
}
.pager a:hover { border-color: var(--navy-soft); text-decoration: none; }
.pager .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager .gap { border: 0; background: none; }
.pager-meta { font-size: 12.5px; color: var(--ink-light); margin-right: auto; }

/* =====================================================================
   MODAL
   ===================================================================== */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(7,26,51,.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal-head {
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.modal-head h2 { margin: 0; }
.modal-close {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 0 4px;
  color: var(--ink-light);
}
.modal-close:hover { color: var(--navy); }
.modal-body { padding: 18px; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; justify-content: flex-end; }

/* =====================================================================
   AUTH PAGES
   ===================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}

/* Left panel: the navy field carrying the crest and a quiet statement. */
.auth-aside {
  background:
    radial-gradient(120% 90% at 15% 0%, var(--navy-soft) 0%, transparent 55%),
    var(--navy-deep);
  color: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.auth-aside img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.auth-aside h2 {
  color: #fff;
  font-size: 1.85rem;
  max-width: 12ch;
  line-height: 1.15;
  margin: 0 0 12px;
}
.auth-aside p { color: rgba(255,255,255,.72); font-size: 14px; max-width: 40ch; margin: 0; }
.auth-aside .aside-chain {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.auth-aside .aside-chain span { display: flex; align-items: center; gap: 6px; }
.auth-aside .aside-chain span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.auth-main {
  display: grid;
  place-items: center;
  padding: 32px 24px;
}
.auth-card { width: min(392px, 100%); }
.auth-card .auth-logo { display: none; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-card .auth-sub { color: var(--ink-mid); font-size: 13.5px; margin-bottom: 22px; }
.auth-card form { display: grid; gap: 14px; }
.auth-foot { margin-top: 20px; font-size: 12.5px; color: var(--ink-light); text-align: center; }

.denied-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.denied-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow);
}
.denied-card .eyebrow { justify-content: center; }
.denied-card .eyebrow::after { display: none; }

/* =====================================================================
   MISC
   ===================================================================== */

.divider { height: 1px; background: var(--line-soft); margin: 18px 0; border: 0; }

.meter {
  height: 6px;
  background: var(--line-soft);
  border-radius: 20px;
  overflow: hidden;
}
.meter > span { display: block; height: 100%; background: var(--navy-soft); border-radius: 20px; }
.meter.pass > span { background: var(--pass); }
.meter.warn > span { background: var(--warn); }
.meter.fail > span { background: var(--fail); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; }
.kv dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); align-self: center; }
.kv dd { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 16px 20px;
  border-left: 1px solid var(--line);
  font-size: 13.5px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -4.5px; top: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--gold);
}
.timeline .t-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-light); letter-spacing: .06em; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.scrim { position: fixed; inset: 0; background: rgba(7,26,51,.4); z-index: 50; display: none; }
.scrim.open { display: block; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card .auth-logo { display: block; height: 34px; margin-bottom: 22px; }
}

@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .content { padding: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .field.span-2 { grid-column: auto; }
  .page-actions { margin-left: 0; width: 100%; }
  .flash-stack { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
}

@media (max-width: 560px) {
  h1 { font-size: 1.36rem; }
  .stat .stat-value { font-size: 1.62rem; }
  .ledger-stage { min-width: 76px; flex-basis: 33.333%; }
}

@media print {
  .sidebar, .topbar, .page-actions, .filters, .pager, .flash-stack { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   FACE CAPTURE
   The ring around the video is the whole feedback mechanism: it turns
   amber while the framing needs work and green when the service is happy,
   so the person operating the camera never has to read to know.
   ===================================================================== */
.capture-frame {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
}
.capture-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, so moving left looks like moving left */
  display: block;
}
.capture-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid var(--line);
  pointer-events: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.capture-ring.is-good    { border-color: var(--pass); box-shadow: 0 0 0 4px var(--pass-bg); }
.capture-ring.is-adjust  { border-color: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.capture-ring.is-error   { border-color: var(--fail); box-shadow: 0 0 0 4px var(--fail-bg); }
.capture-ring.is-working { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }

.capture-status {
  text-align: center;
  font-size: 14px;
  margin: 16px 0 0;
  min-height: 40px;
  color: var(--ink-light);
}
.capture-status.is-good  { color: var(--pass); font-weight: 600; }
.capture-status.is-error { color: var(--fail); font-weight: 600; }
.capture-status.is-adjust{ color: var(--warn); font-weight: 600; }

.capture-progress {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.capture-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--line);
  transition: background .3s ease, transform .3s ease;
}
.capture-dot.done { background: var(--gold); transform: scale(1.15); }

@media (max-width: 560px) {
  .capture-frame { width: min(280px, 86vw); }
}
@media (prefers-reduced-motion: reduce) {
  .capture-ring, .capture-dot { transition: none; }
}

/* =====================================================================
   SESSION CONSOLE — the projected QR
   ===================================================================== */
.qr-holder {
  display: inline-block;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  line-height: 0;
}
.qr-holder svg { width: min(300px, 68vw); height: auto; }
.qr-url { font-size: 11.5px; color: var(--ink-light); word-break: break-all; margin: 12px 0 4px; }

/* Fullscreen: the code is being read from the back of a hall, so it takes
   the whole screen and everything else gets out of the way. */
.card:fullscreen { display: flex; align-items: center; justify-content: center; background: #fff; }
.card:fullscreen .card-head, .card:fullscreen .qr-url,
.card:fullscreen .btn-row, .card:fullscreen #qr-refresh { display: none; }
.card:fullscreen .qr-holder { border: 0; padding: 0; }
.card:fullscreen .qr-holder svg { width: min(88vh, 88vw); }

/* =====================================================================
   ATTENDANCE LANDING — phone first, minimal payload

   This is the only screen most students will ever see, usually held at
   chest height in a hall with the lights down. So: a deep navy field to
   kill glare, one white card carrying everything, and type large enough
   to read without stopping to focus. The gold rule at the top of the
   card is the same one that runs through the rest of the system.
   ===================================================================== */
.attend-page {
  background:
    radial-gradient(120% 80% at 50% 0%, #16375f 0%, transparent 60%),
    var(--navy);
  min-height: 100vh;
  min-height: 100dvh;               /* dodges the mobile browser chrome */
  display: flex; align-items: center; justify-content: center;
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
}
.attend-shell { width: 100%; max-width: 440px; }

.attend-head {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  color: #fff; font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: .01em; margin-bottom: 18px;
}
.attend-head img { border-radius: 6px; background: #fff; padding: 3px; }

.attend-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 18px 50px rgba(4, 16, 32, .38);
  border-top: 3px solid var(--gold);
  text-align: center;
}
.attend-card h1 {
  font-family: var(--display); font-size: 29px; margin: 6px 0 4px;
  color: var(--navy); letter-spacing: -0.02em; line-height: 1.12;
}
.attend-card .eyebrow { justify-content: center; }

.attend-sub { color: var(--ink-light); font-size: 14.5px; margin: 0 0 4px; line-height: 1.45; }
.attend-topic {
  display: inline-block;
  font-size: 13px; color: var(--navy); margin: 12px 0 0;
  padding: 7px 14px; background: var(--gold-soft);
  border-radius: 100px; font-weight: 600;
}

/* ---- progress through the stages ---- */
.attend-steps {
  display: flex; justify-content: center; gap: 0;
  list-style: none; margin: 24px 0 4px; padding: 0;
}
.attend-steps li {
  position: relative; flex: 1 1 0; max-width: 92px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-light); text-align: center;
}
/* the rule joining one stage to the next */
.attend-steps li::before {
  content: ""; position: absolute; top: 5px; left: -50%;
  width: 100%; height: 2px; background: var(--line);
}
.attend-steps li:first-child::before { display: none; }
.attend-steps li span {
  position: relative; z-index: 1;
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--line); margin: 0 auto 8px;
  box-shadow: 0 0 0 3px var(--surface);
  transition: background .3s ease, transform .3s ease;
}
.attend-steps li.is-done::before { background: var(--pass); }
.attend-steps li.is-done span    { background: var(--pass); }
.attend-steps li.is-now span     { background: var(--gold); transform: scale(1.25); }
.attend-steps li.is-now          { color: var(--navy); font-weight: 700; }

.attend-who {
  text-align: center; font-weight: 600; color: var(--navy);
  margin: 18px 0; font-size: 15px;
  padding: 12px; background: var(--paper); border-radius: 10px;
}
.attend-who .mono {
  display: block; font-family: var(--mono); font-size: 12px;
  font-weight: 400; color: var(--ink-light); margin-top: 3px;
  letter-spacing: .06em;
}

.attend-lead {
  text-align: center; font-size: 15px; color: var(--ink-light);
  margin: 18px 0; line-height: 1.5;
}
.attend-form { margin-top: 20px; }
.attend-form .field { text-align: left; }

.attend-input {
  font-family: var(--mono); font-size: 23px; text-align: center;
  letter-spacing: .1em; padding: 15px 12px;
}
.attend-input:focus { border-color: var(--gold); }

.btn-lg { padding: 16px 20px; font-size: 15.5px; border-radius: 11px; }

.attend-status {
  text-align: center; font-size: 13.5px; color: var(--ink-light);
  min-height: 40px; margin: 16px 0 0; line-height: 1.45;
}
.attend-status.is-good  { color: var(--pass); font-weight: 600; }
.attend-status.is-error { color: var(--fail); font-weight: 600; }
.attend-status.is-adjust{ color: var(--warn); font-weight: 600; }

/* ---- the questions ---- */
.attend-question {
  border-top: 1px solid var(--line-soft);
  padding-top: 20px; margin-top: 20px; text-align: left;
}
.attend-question:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.attend-qnum {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 8px;
  font-weight: 600;
}
.attend-qtext {
  font-size: 16px; font-weight: 600; color: var(--navy);
  line-height: 1.45; margin: 0 0 16px;
}
.attend-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; margin-bottom: 10px;
  border: 1.5px solid var(--line); border-radius: 11px;
  cursor: pointer; font-size: 15px; line-height: 1.4;
  transition: border-color .15s ease, background .15s ease;
}
.attend-option input { margin-top: 2px; accent-color: var(--gold); flex: 0 0 auto; width: 18px; height: 18px; }
.attend-option:has(input:checked) {
  border-color: var(--gold); background: var(--gold-soft);
  font-weight: 600; color: var(--navy);
}
.attend-question textarea { font-size: 15px; }

/* ---- the two endings ---- */
.attend-facts {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 16px 0; border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.attend-facts dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-light);
}
.attend-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: var(--navy); }

.attend-next { margin-top: 20px; }
.attend-next p { margin: 0 0 10px; }

.attend-bad { border-top-color: var(--fail); }
.attend-good { border-top-color: var(--pass); }
.attend-mark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--fail-bg); color: var(--fail);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.attend-good .attend-mark.is-good { background: var(--pass-bg); color: var(--pass); }
.attend-good .ledger { justify-content: center; flex-wrap: wrap; gap: 6px; }

.attend-foot { text-align: center; margin-top: 18px; }
.attend-foot p { color: rgba(255,255,255,.6); font-size: 12.5px; margin: 0; }

/* The camera sits inside the card here, so it wants to be a little smaller. */
.attend-card .capture-frame { width: min(260px, 74vw); margin-top: 6px; }

@media (max-width: 380px) {
  .attend-card { padding: 22px 17px; }
  .attend-card h1 { font-size: 25px; }
  .attend-steps li { font-size: 9px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .attend-steps li span, .attend-option { transition: none; }
}

/* =====================================================================
   QUESTION OPTIONS
   The radio sits outside the text box so "which one is right" is a
   separate gesture from "what does it say" — the two get confused
   otherwise, and picking the wrong key is the costly mistake here.
   ===================================================================== */
.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.option-row input[type="radio"] {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  accent-color: var(--gold);
  cursor: pointer;
}
.option-row .option-label {
  flex: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-light);
  text-align: center;
}
.option-row input[type="text"] {
  flex: 1 1 auto;
  margin: 0;
}
.option-row:has(input[type="radio"]:checked) .option-label {
  color: var(--pass);
}
.option-row:has(input[type="radio"]:checked) input[type="text"] {
  border-color: var(--pass);
  background: var(--pass-bg);
}

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0; color: var(--ink-light);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* A meter below the required threshold reads red rather than gold, so a
   student scanning the page sees the problem before reading the number. */
.meter.is-low span { background: var(--fail); }

/* =====================================================================
   MARKING
   Three columns: who, what they wrote, what it is worth. The mark box
   sits at a fixed width on the right so the eye runs straight down the
   column when working through a stack of answers.
   ===================================================================== */
.mark-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 120px;
  gap: 16px; align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.mark-row:last-child { border-bottom: 0; }
.mark-answer p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.mark-feedback {
  margin-top: 10px; font-size: 13px; padding: 8px 10px;
}
.mark-score { display: flex; align-items: center; gap: 8px; }
.mark-score input {
  width: 66px; text-align: center; font-family: var(--mono);
  font-size: 16px; font-weight: 600; padding: 10px 6px;
}
.mark-score input:not(:placeholder-shown) {
  border-color: var(--pass); background: var(--pass-bg);
}
.mark-outof {
  font-family: var(--mono); font-size: 13px; color: var(--ink-light); white-space: nowrap;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 760px) {
  .mark-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mark-score { justify-content: flex-start; }
}

/* =====================================================================
   TREND CHART
   Deliberately plain: bars, a baseline, and a dashed rule at the pass
   mark. The one thing worth seeing at a glance is which days fell below
   the requirement, so those bars go red and nothing else competes.
   ===================================================================== */
.chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 170px; padding: 0 0 26px;
  border-bottom: 1px solid var(--line);
  position: relative; overflow-x: auto;
}
/* the pass mark, drawn at 75% of the plot height by default */
.chart::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(26px + 75% - 26px * 0.75);
  border-top: 1px dashed var(--line);
  pointer-events: none;
}
.chart-col {
  flex: 1 0 26px; min-width: 26px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
.chart-bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: var(--gold);
  transition: opacity .15s ease;
}
.chart-bar.is-low { background: var(--fail); }
.chart-col:hover .chart-bar { opacity: .75; }
.chart-label {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-light);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .chart-bar { transition: none; } }

/* =====================================================================
   ASK A QUESTION
   Questions are shown the way a student will see them — stem, then the
   answers, with the right one marked. A lecturer checking an AI draft is
   really asking "is that answer right?", so that is what the eye lands on.
   ===================================================================== */
.ask-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.ask-item:first-child { padding-top: 0; }
.ask-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ask-item-body { flex: 1 1 auto; min-width: 0; }
.ask-text {
  display: block; font-size: 15.5px; font-weight: 600;
  color: var(--navy); line-height: 1.45; margin: 0 0 10px;
}
.ask-options { list-style: none; margin: 0; padding: 0; }
.ask-options li {
  padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ask-options li.is-answer {
  border-color: var(--pass); background: var(--pass-bg);
  font-weight: 600; color: var(--navy);
}

.ask-draft {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; margin-bottom: 12px;
  border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ask-draft input[type="checkbox"] {
  margin-top: 3px; width: 20px; height: 20px;
  accent-color: var(--gold); flex: 0 0 auto; cursor: pointer;
}
.ask-draft-body { flex: 1 1 auto; min-width: 0; }
.ask-draft:has(input:checked) {
  border-color: var(--gold); background: var(--gold-soft);
}

/* A value the system works out for itself, shown where a field would be. */
.derived {
  margin: 0; padding: 11px 13px;
  background: var(--paper); border: 1px dashed var(--line);
  border-radius: 9px; font-family: var(--mono); font-size: 13px;
  color: var(--navy);
}

/* =====================================================================
   YEAR TABS
   A student's record spans several academic years, and the earlier ones
   matter — an exam board looks at them. The current year opens first;
   the rest sit beside it rather than being buried in a filter.
   ===================================================================== */
.year-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 2px;
}
.year-tab {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 15px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: 13px; color: var(--ink-light);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.year-tab:hover { border-color: var(--navy-mist); color: var(--navy); }
.year-tab span {
  font-family: var(--body); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
}
.year-tab.is-now {
  border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 600;
}
.year-tab.is-now span { color: var(--gold); }

/* =====================================================================
   ACTIVE LIVENESS
   The instruction is the largest thing on the screen, because a student
   who cannot see what to do will simply fail and not know why. The ring
   fills as the recording runs, so the wait is legible rather than blank.
   ===================================================================== */
.live-instruction {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  color: var(--navy); text-align: center;
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--gold-soft); border-radius: 12px;
}

.live-progress {
  position: absolute; inset: -3px;
  width: calc(100% + 6px); height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.live-progress-track {
  fill: none; stroke: var(--line); stroke-width: 2.5;
}
.live-progress-bar {
  fill: none; stroke: var(--gold); stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset .18s linear;
}

@media (max-width: 380px) {
  .live-instruction { font-size: 17px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-progress-bar { transition: none; }
}

/* =====================================================================
   QUESTION FOLDERS
   Folders are shown as a grid of cards rather than a tree. A lecturer
   scanning for "the anaemia questions" is recognising a name, not
   navigating a hierarchy, so the name is the biggest thing on the card
   and the count sits quietly underneath.
   ===================================================================== */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.folder-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px; min-height: 132px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; text-align: left;
  font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.folder-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 37, 69, .08);
}
.folder-icon { color: var(--gold); margin-bottom: 4px; }
.folder-name {
  font-family: var(--display); font-weight: 600; font-size: 15.5px;
  color: var(--navy); line-height: 1.3;
}
.folder-note {
  font-size: 12.5px; color: var(--ink-light); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.folder-meta {
  margin-top: auto; padding-top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-light);
}
.folder-card .badge { align-self: flex-start; margin-top: 6px; }

/* Loose questions, and the way to make somewhere to put them. */
.folder-card.is-loose { border-style: dashed; }
.folder-card.is-loose .folder-icon { color: var(--ink-light); }
.folder-card.is-new {
  border-style: dashed; background: transparent;
  align-items: flex-start; color: var(--ink-light);
}
.folder-card.is-new:hover { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .folder-card { transition: none; }
  .folder-card:hover { transform: none; }
}

/* A folder offered for use in a class: name, what is in it, one button. */
.folder-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.folder-row:last-child { border-bottom: 0; }
.folder-row-body { min-width: 0; }

/* The bar of things that can be done to a tick list. Moving is the common
   case, so it gets the primary button and its own label; the rest sit to
   one side rather than competing with it. */
.bulk-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
}
.bulk-move { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.bulk-move label {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-light); margin-bottom: 5px;
}
.bulk-move select { max-width: 230px; }
.bulk-rest { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .bulk-bar { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   CLASS MAP
   Classes grouped under the academic year they are in, because that is
   the relationship the four separate screens made hard to see.
   ===================================================================== */
.map-year {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
.map-year-label {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; color: var(--navy); margin: 0; white-space: nowrap;
}
.map-year-rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.map-year-count {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-light); white-space: nowrap;
}
.map-figures {
  display: flex; gap: 14px; margin-top: auto; padding-top: 10px;
  font-size: 12px; color: var(--ink-light);
}
.map-figures strong {
  font-family: var(--mono); font-size: 14px; color: var(--navy); font-weight: 700;
}