/* v2.23: Remove blue tap highlight — native-like */
* { -webkit-tap-highlight-color: transparent; }
a, button, .btn, .list-row, .chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* =========================================================================
   ApexityEdu — Screen-specific styles
   ========================================================================= */

/* --- Home dashboard layouts ---------------------------------------- */
.dash-grid {
  display: grid;
  /* v2.31 (MOBILE-TAB-FLOW): shrinkable content column (see .app-shell) */
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

.dash-stack { display: flex; flex-direction: column; gap: var(--space-5); }
/* v2.31 (MOBILE-TAB-FLOW): min(220px, 100%) so the auto-fit floor can never
   exceed the content column on small phones (Templates renders its kind cards
   through this grid). */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-4); }

/* Identity card */
.identity-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.identity-card .ic-banner {
  height: 56px;
  background: var(--ink-surface);
  position: relative;
}
.identity-card .ic-banner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--marigold);
}
.identity-card .ic-body {
  padding: 0 var(--space-5) var(--space-5);
  margin-top: -28px;
}
.identity-card .ic-avatar {
  position: relative;
  width: 64px; height: 64px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--indigo);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
/* Same flex automatic-minimum-size guard as the student card (see the long
   comment below): an <img> flex item with a portrait aspect ratio would
   otherwise be laid out at its transferred intrinsic height and spill out of
   the ring. Applies to the profile screen's identity card. */
.identity-card .ic-avatar > img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}
.identity-card .ic-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin-bottom: 2px;
}
.identity-card .ic-name-bn {
  font-family: var(--font-bengali);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin-bottom: var(--space-3);
}
.identity-card .ic-meta {
  display: grid;
  /* mono values (phone, NID) must not widen the card */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.identity-card .ic-avatar {
  overflow: hidden;
  position: relative;
}
.identity-card .ic-avatar img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

.identity-card .ic-meta .im-label { color: var(--ink-mute); }
.identity-card .ic-meta .im-val { font-weight: var(--fw-medium); color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }

/* v2.15 (IC-HERO): the STUDENT identity card — the MAIN ATTRACTION of the
   student home. It is deliberately styled unlike any other card in the app:
   a tall gradient crown, a floating photo medallion, a glass-effect name
   plate and a two-column detail grid on a tinted base.

   Everything is themeable via CSS variables so a school theme can restyle
   it without touching markup:
     --ic-grad-a / --ic-grad-b   crown gradient stops
     --ic-ring / --ic-avatar-bg  photo ring + fallback fill
     --ic-accent                 accent rule under the crown

   CSS BUGFIX (photo overflowed the top of the card)
   -------------------------------------------------
   `.ic-avatar` is a flex container and the <img> was a flex ITEM. A flex
   item's automatic minimum size (`min-height: auto`) overrides `height:100%`,
   so a portrait photo was laid out at its *transferred* intrinsic height
   (e.g. 168px inside a 112px ring) and `align-items: center` pushed the
   excess out of BOTH ends — visibly spilling over the top of the card,
   because the `.ic-student` avatar rule never re-declared `overflow: hidden`.
   The fix is threefold and each part is load-bearing:
     1. `.ic-avatar` keeps `overflow: hidden` in the student variant too, so
        nothing can ever paint outside the ring.
     2. The image is taken OUT of flex flow (`position: absolute; inset: 0`)
        so the flex min-size rule cannot apply to it at all.
     3. `min-width/min-height: 0` on the image defuses the automatic minimum
        size for any future layout that does keep it in flow.
   ------------------------------------------------------------------------ */
.identity-card.ic-student {
  position: relative;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-tint) 100%);
  box-shadow:
    0 1px 2px rgba(20, 20, 43, 0.06),
    0 24px 48px -24px rgba(20, 20, 43, 0.45);
}
/* A hairline ring that reads as a "card within the page" at any theme. */
.identity-card.ic-student::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  pointer-events: none;
}

/* ---- The crown ---- */
.identity-card.ic-student .ic-banner {
  height: 132px;
  position: relative;
  background: linear-gradient(125deg,
    var(--ic-grad-a, var(--indigo)) 0%,
    var(--ic-grad-b, var(--marigold-deep)) 100%);
  overflow: hidden;
}
.identity-card.ic-student .ic-banner-fill {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.30) 0%, transparent 44%),
    radial-gradient(circle at 12% 112%, rgba(255, 255, 255, 0.20) 0%, transparent 46%);
}
.identity-card.ic-student .ic-banner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ic-accent, var(--marigold)), transparent);
}

/* ---- Body ---- */
.identity-card.ic-student .ic-body {
  position: relative;
  padding: 0 var(--space-5) var(--space-5);
  margin-top: -60px;
  text-align: center;
}

/* ---- The photo medallion ----
   FIX (1): `overflow: hidden` is re-declared here. The base `.identity-card
   .ic-avatar` sets it, but this more specific selector previously did not,
   so anything oversized painted straight out of the card. */
.identity-card.ic-student .ic-avatar {
  position: relative;          /* containing block for the absolute <img> */
  width: 116px;
  height: 116px;
  border: 5px solid var(--ic-ring, var(--surface));
  border-radius: 50%;
  background: var(--ic-avatar-bg, var(--indigo));
  color: var(--paper);
  font-size: var(--fs-2xl);
  margin: 0 auto var(--space-3);
  overflow: hidden;            /* ← the guard rail */
  isolation: isolate;
  box-shadow:
    0 10px 26px -10px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* FIX (2) + (3): the photo is positioned, NOT a flex item, so the flex
   automatic-minimum-size rule can never inflate it past the ring. */
.identity-card.ic-student .ic-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

/* ---- Name plate ---- */
.identity-card.ic-student .ic-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.identity-card.ic-student .ic-name-bn {
  font-family: var(--font-bengali);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin-bottom: var(--space-2);
}
.identity-card.ic-student .ic-chips {
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Headline stats (attendance / dues / class) ---- */
.identity-card.ic-student .ic-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.identity-card.ic-student .ic-stat { text-align: center; min-width: 0; }
.identity-card.ic-student .ic-stat-val {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.identity-card.ic-student .ic-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ---- Detail grid ---- */
.identity-card.ic-student .ic-meta {
  text-align: left;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  border-top: 0;
  padding: var(--space-4) var(--space-1) 0;
}
.identity-card.ic-student .ic-meta .im-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.identity-card.ic-student .ic-meta .im-val { text-align: right; }

/* Guardians card */
.guardians-card .gc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.guardians-card .gc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.guardians-card .gc-item .gc-rel {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
  font-weight: var(--fw-semibold);
}

/* Today strip */
.today-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.today-strip .ts-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--marigold);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.today-strip .ts-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.today-strip .ts-value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.today-strip .ts-sub {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Teacher timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 7px; top: 24px; bottom: -12px;
  width: 1px;
  background: var(--hairline);
}
.timeline-item:last-child::before { display: none; }
.timeline-item .ti-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--hairline-strong);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.timeline-item.now .ti-dot { border-color: var(--marigold); background: var(--marigold); }
.timeline-item.done .ti-dot { border-color: var(--forest); background: var(--forest); }
.timeline-item .ti-time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  min-width: 80px;
}
.timeline-item .ti-content { flex: 1; }
.timeline-item .ti-title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.timeline-item .ti-sub { font-size: var(--fs-xs); color: var(--ink-mute); }

/* Homework mark workspace */
.hw-mark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  height: calc(100vh - var(--ribbon-h) - var(--topbar-h) - 120px);
  align-items: start;
}
@media (max-width: 1100px) { .hw-mark { grid-template-columns: minmax(0, 1fr); height: auto; } }
.hw-mark .hm-canvas-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.hw-mark .hm-stage {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.hw-mark .hm-canvas {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius-lg) - 4px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.hw-mark .hm-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hw-mark .hm-tools {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 2px;
  box-shadow: var(--shadow-md);
}
/* v2.14 (HM-TOOLBAR): spacious, padded annotation toolbar — segmented tool
   group + action buttons, comfortable touch targets, wraps on phones. */
.hw-mark .hm-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.hw-mark .hm-toolgroup {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 3px;
}
.hw-mark .hm-tool {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hw-mark .hm-tool:hover { background: var(--surface); color: var(--ink); }
.hw-mark .hm-tool.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hairline);
}
.hw-mark .hm-tool-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--hairline);
  flex-shrink: 0;
}
.hw-mark .hm-toolsep {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 2px 2px;
}
.hw-mark .hm-tool.hm-action { color: var(--ink-soft); }
.hw-mark .hm-tool.hm-action:hover { background: var(--paper-soft); color: var(--ink); }
.hw-mark .hm-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - var(--ribbon-h) - var(--topbar-h) - 160px);
}
@media (max-width: 1100px) {
  .hw-mark .hm-panel { max-height: none; }
  .hw-mark .hm-tool { min-height: 44px; padding: 0 16px; }
}

/* v2.14 (PHOTO-CROP): mandatory square crop stage for person photos. */
.photo-crop {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.photo-crop-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid var(--marigold);
  background:
    repeating-conic-gradient(var(--paper-deep) 0% 25%, var(--surface) 0% 50%) 0 0 / 22px 22px;
  background-color: var(--paper-deep);
  touch-action: none;
  cursor: grab;
  user-select: none;
  min-height: 200px;
}
.photo-crop-stage:empty {
  min-height: 340px;
}
.photo-crop-stage:active { cursor: grabbing; }
.photo-crop-stage .photo-crop-img {
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.photo-crop input[type=range] { accent-color: var(--marigold); }

/* Marks entry spreadsheet */
.marks-sheet {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.marks-sheet table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.marks-sheet thead th {
  position: sticky;
  top: 0;
  background: var(--paper-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  z-index: 1;
}
.marks-sheet thead th.num { text-align: right; }
.marks-sheet tbody td {
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.marks-sheet tbody td.cell-name { padding: var(--space-3); }
.marks-sheet tbody td.cell-input { padding: 4px; }
.marks-sheet tbody td.cell-grade { padding: var(--space-3); text-align: right; font-family: var(--font-mono); }
.marks-sheet tbody td.cell-input input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  border-radius: 0;
  height: 100%;
}
.marks-sheet tbody td.cell-input input:focus {
  background: var(--marigold-soft);
  outline: 2px solid var(--marigold);
  outline-offset: -2px;
}
.marks-sheet tbody td.cell-input input.invalid {
  background: var(--vermillion-soft);
  color: var(--vermillion);
}
.marks-sheet tbody tr:hover { background: var(--surface-tint); }

/* Attendance mark grid */
.am-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}
.am-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-align: center;
}
.am-card:hover { border-color: var(--ink-mute); }
.am-card .ac-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-card .ac-roll {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  margin-bottom: var(--space-2);
}
.am-card .ac-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.am-card.s-present { border-color: var(--forest); background: var(--forest-soft); }
.am-card.s-present .ac-status { background: var(--forest); color: var(--surface); }
.am-card.s-late { border-color: var(--marigold); background: var(--marigold-soft); }
.am-card.s-late .ac-status { background: var(--marigold-deep); color: var(--surface); }
.am-card.s-absent { border-color: var(--vermillion); background: var(--vermillion-soft); }
.am-card.s-absent .ac-status { background: var(--vermillion); color: var(--surface); }
.am-card.s-leave { border-color: var(--indigo); background: var(--indigo-soft); }
.am-card.s-leave .ac-status { background: var(--indigo); color: var(--surface); }

/* Routine weekly grid */
.routine-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--fs-xs);
}
.routine-grid .rg-head {
  background: var(--paper-soft);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  font-size: var(--fs-2xs);
  text-align: center;
}
.routine-grid .rg-time {
  background: var(--paper-soft);
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  text-align: right;
}
.routine-grid .rg-cell {
  background: var(--surface);
  padding: var(--space-2);
  min-height: 56px;
}
.routine-grid .rg-cell.has-class {
  background: var(--marigold-soft);
  border-left: 3px solid var(--marigold);
}
.routine-grid .rg-cell .rgc-subject { font-weight: var(--fw-semibold); font-size: var(--fs-2xs); }
.routine-grid .rg-cell .rgc-meta { font-size: var(--fs-2xs); color: var(--ink-mute); margin-top: 2px; }
.routine-grid .rg-cell.rg-conflict {
  background: var(--vermillion-soft);
  border-left: 3px solid var(--vermillion);
}

/* Quiz builder ------------------------------------------------------------- */
.quiz-builder-form { max-width: 920px; margin: 0 auto; }
.quiz-builder-section {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
  padding: var(--space-4);
}
.quiz-option-row {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.quiz-option-row > input[type="text"] { flex: 1; min-width: 0; }
.quiz-option-letter { width: 28px; text-align: center; color: var(--marigold-deep); font-weight: var(--fw-semibold); }
.quiz-correct-toggle { white-space: nowrap; color: var(--forest); }
.quiz-correct-toggle input, .quiz-builder-settings input { accent-color: var(--marigold); }
.quiz-builder-settings { align-items: start; }
@media (max-width: 620px) {
  .quiz-option-row { flex-wrap: wrap; }
  .quiz-option-row > input[type="text"] { flex-basis: calc(100% - 44px); }
  .quiz-correct-toggle { margin-left: 32px; }
}

/* Quiz question card */
.quiz-q {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.quiz-q .qq-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--marigold-deep);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.quiz-q .qq-text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}
.quiz-q .qq-options { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-q .qq-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.quiz-q .qq-option:hover { border-color: var(--marigold); background: var(--marigold-soft); }
.quiz-q .qq-option.is-selected { border-color: var(--marigold); background: var(--marigold-soft); }
.quiz-q .qq-option input { accent-color: var(--marigold); }

/* Result marksheet */
.marksheet {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.marksheet .ms-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-5);
  border-bottom: 2px solid var(--ink);
}
.marksheet .ms-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.marksheet .ms-head .ms-meta { text-align: right; font-size: var(--fs-xs); color: var(--ink-mute); }
.marksheet .ms-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--hairline);
}
.marksheet .ms-summary .ms-stat {
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
  text-align: center;
}
.marksheet .ms-summary .ms-stat:last-child { border-right: 0; }
.marksheet .ms-summary .ms-stat .ms-stat-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.marksheet .ms-summary .ms-stat .ms-stat-val {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* Certificate preview */
.certificate {
  background: linear-gradient(135deg, var(--surface-tint), var(--paper));
  border: 4px double var(--ink);
  padding: var(--space-12);
  text-align: center;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.certificate::before, .certificate::after {
  content: "";
  position: absolute;
  width: 60px; height: 60px;
  border: 2px solid var(--marigold);
}
.certificate::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.certificate::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.certificate h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.certificate .cert-school {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-6);
}
.certificate .cert-body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}
.certificate .cert-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  font-style: italic;
  margin: var(--space-4) 0;
}
.certificate .cert-foot {
  display: flex;
  justify-content: space-around;
  margin-top: var(--space-12);
}
.certificate .cert-sign {
  text-align: center;
}
.certificate .cert-sign .cert-line {
  width: 200px;
  border-top: 1px solid var(--ink);
  margin-bottom: 6px;
}
.certificate .cert-sign .cert-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
}

/* Tree (admin academics) */
.tree { padding-left: 0; }
.tree-node { padding-left: var(--space-4); }
.tree-node .tn-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tree-node .tn-row:hover { background: var(--paper-soft); }
.tree-node .tn-icon { width: 16px; height: 16px; color: var(--ink-mute); }

/* Feature flag grid (superadmin) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-3);
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feature-card .fc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.feature-card .fc-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.feature-card .fc-code { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-mute); }
.feature-card .fc-deps { font-size: var(--fs-2xs); color: var(--ink-mute); }
.feature-card .fc-deps strong { color: var(--marigold-deep); }

/* v2.10: gateway picker button — shown in the "Choose a payment method"
   modal when a school has multiple active payment gateways. */
.gateway-pick-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.gateway-pick-btn:hover {
  border-color: var(--marigold);
  background: var(--surface-raised, var(--surface));
}

/* v2.10: Public results-and-fees page styles. */
.public-page { min-height: 100vh; min-height: 100svh; padding-top: var(--ribbon-h); background: var(--surface); }
.public-header { background: var(--surface); border-bottom: 1px solid var(--hairline); padding: var(--space-6) 0; }
.public-header h1 { font-family: var(--font-display); font-size: var(--fs-2xl); margin: var(--space-2) 0 var(--space-1); }
.public-logo { display: inline-block; color: var(--marigold-deep); font-weight: var(--fw-semibold); text-decoration: none; margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.public-main { padding: var(--space-6) 0; }
.public-footer { border-top: 1px solid var(--hairline); padding: var(--space-4) 0; margin-top: var(--space-6); }
.school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); }
.school-public-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-4); text-decoration: none; color: inherit; gap: var(--space-3);
  transition: border-color 120ms ease, transform 120ms ease;
}
.school-public-card:hover { border-color: var(--marigold); transform: translateY(-1px); }
.spc-head { display: flex; gap: var(--space-3); align-items: center; }
.spc-logo { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface-raised, var(--cream)); }
.spc-logo-placeholder { display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); color: var(--marigold-deep); font-size: var(--fs-lg); }
.spc-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.spc-code { font-size: var(--fs-2xs); }
.spc-action { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.spc-action-label { font-weight: var(--fw-semibold); color: var(--marigold-deep); }
.spc-action-arrow { color: var(--marigold-deep); }
/* Directory card (v2.12.2): one card per school listing its enabled public
   features, or a "coming soon" note. Never collapses to "No schools yet"
   while schools exist. */
.school-public-card--directory { gap: var(--space-2); }
.spc-actions { display: flex; flex-direction: column; gap: var(--space-1); }
.spc-actions .spc-action { text-decoration: none; color: inherit; }
.spc-actions .spc-action:hover .spc-action-label,
.spc-actions .spc-action:hover .spc-action-arrow { color: var(--marigold); }
.spc-soon { font-size: var(--fs-xs); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-style: italic; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }

/* School card (superadmin list) */
.school-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.school-card:hover { border-color: var(--marigold); box-shadow: var(--shadow-md); }
.school-card .sc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.school-card .sc-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.school-card .sc-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  margin-top: 2px;
}
.school-card .sc-stats {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
}
.school-card .sc-stat-val { font-family: var(--font-mono); font-weight: var(--fw-semibold); }

/* SMS composer preview */
.sms-preview {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  position: relative;
}
.sms-preview .sms-bubble {
  background: var(--marigold-soft);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  max-width: 80%;
}
.sms-preview .sms-meta {
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
}

/* Health card form */
.health-card-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .health-card-form { grid-template-columns: minmax(0, 1fr); } }

/* KPI strip */
.kpi-strip {
  display: grid;
  /* v2.31 (MOBILE-TAB-FLOW): `min(180px, 100%)` — on a 320-360px phone the
     bare 180px floor could outgrow the content column and widen the page. */
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.kpi-strip .kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.kpi-strip .kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--marigold);
}
.kpi-strip .kpi.kpi-forest::before { background: var(--forest); }
.kpi-strip .kpi.kpi-vermillion::before { background: var(--vermillion); }
.kpi-strip .kpi.kpi-indigo::before { background: var(--indigo); }
/* kpi-marigold: referenced by C.kpi('...', { color: 'marigold' }) in many
   screens (superadmin.html, attendance.js, sms.js, inventory.js, reports.js,
   admissions.js, home.js, fees.js, people.js, files-admin.js, fees-admin.js,
   promote.js). The default .kpi::before is already marigold, so this rule
   is technically a no-op — but adding it makes the intent explicit and
   future-proofs against a change to the default. */
.kpi-strip .kpi.kpi-marigold::before { background: var(--marigold); }
.kpi-strip .kpi .kpi-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-2);
}
.kpi-strip .kpi .kpi-val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-strip .kpi .kpi-sub {
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  margin-top: 4px;
}

/* Activity feed */
.feed { display: flex; flex-direction: column; gap: 0; }
.feed-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item .fi-avatar { flex-shrink: 0; }
.feed-item .fi-body { flex: 1; }
.feed-item .fi-text { font-size: var(--fs-sm); }
.feed-item .fi-text strong { font-weight: var(--fw-semibold); }
.feed-item .fi-time {
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Drawer detail row */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  gap: var(--space-4);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row .dr-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.detail-row .dr-val {
  font-size: var(--fs-sm);
  text-align: right;
  word-break: break-word;
}

/* Section header inside screens */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}
.section-head h2 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Inline notice callout */
.callout {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--marigold);
  background: var(--marigold-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.callout-info { border-color: var(--indigo); background: var(--indigo-soft); }
.callout-success { border-color: var(--forest); background: var(--forest-soft); }
.callout-danger { border-color: var(--vermillion); background: var(--vermillion-soft); }
/* callout-warning / callout-error / callout-marigold: variants used by
   C.callout('warning'|'error'|'marigold', ...) in JS. Without these the
   callout falls back to the base .callout style (marigold), which is
   especially wrong for callout-error (would look like a warning instead
   of a red error). */
.callout-warning { border-color: var(--marigold-deep); background: var(--marigold-soft); }
.callout-error { border-color: var(--vermillion); background: var(--vermillion-soft); color: var(--vermillion); }
.callout-marigold { border-color: var(--marigold); background: var(--marigold-soft); }

/* Mobile: hide sidebar items, show in more sheet */
@media (max-width: 880px) {
  .page-title { margin-bottom: var(--space-4); }
  .page-title h1 { font-size: var(--fs-xl); }
  .marksheet .ms-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marksheet .ms-summary .ms-stat:nth-child(2n) { border-right: 0; }

  /* ----- KPI strip: 2-col grid on mobile (wraps cleanly) -----
     v2.31 (MOBILE-TAB-FLOW): minmax(0, 1fr) — a KPI label/number that can't
     break (a long money string, a mono ID) used to set the track floor and
     widen the page instead of letting the strip reflow. */
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .kpi-strip .kpi { padding: var(--space-3); }
  .kpi-strip .kpi .kpi-val { font-size: var(--fs-xl); }

  /* ----- Today strip: 2-col on mobile ----- */
  .today-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  /* ----- Identity card: tighten padding -----
     IMPL-MOBILE: also cap the card width at 480px and center it so a
     wide identity card doesn't stretch edge-to-edge on tablets / large
     phones (where it looks like a sprawling banner). On phones <480px
     the max-width is moot (viewport is narrower) and the card fills
     the screen as before. */
  .identity-card { max-width: 480px; margin-left: auto; margin-right: auto; }
  .identity-card .ic-body { padding: 0 var(--space-4) var(--space-4); }

  /* ----- Tables: ensure horizontal scroll with momentum on iOS ----- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ----- Marks entry spreadsheet: horizontal scroll ----- */
  .marks-sheet { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ----- Routine weekly grid: horizontal scroll (keep cell sizing intact) -----
     IMPL-MOBILE: tighten the time column from 80px → 56px so the 7 day
     columns get ~24px more breathing room. The grid still scrolls
     horizontally (7 day columns × minmax(80px,1fr) won't fit on a phone),
     but each swipe reveals more useful content per scroll. */
  .routine-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    grid-template-columns: 56px repeat(7, minmax(80px, 1fr));
  }

  /* ----- Marksheet header: stack meta below the title ----- */
  .marksheet .ms-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
  }
  .marksheet .ms-head .ms-meta { text-align: left; }

  /* ----- Receipt: stack header on mobile ----- */
  .receipt { padding: var(--space-4); }
  .receipt .r-header {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }
  .receipt .r-meta { text-align: left; }

  /* ----- Certificate: shrink padding on mobile ----- */
  .certificate { padding: var(--space-6); }
  .certificate h1 { font-size: var(--fs-2xl); }
  .certificate .cert-name { font-size: var(--fs-xl); }
  .certificate .cert-foot { margin-top: var(--space-6); }
  .certificate .cert-sign .cert-line { width: 140px; }

  /* ----- Timeline: collapse time column to fit narrow widths ----- */
  .timeline-item { gap: var(--space-2); }
  .timeline-item .ti-time { min-width: 60px; font-size: var(--fs-2xs); }

  /* ----- SMS preview: bubble can be wider ----- */
  .sms-preview .sms-bubble { max-width: 88%; }

  /* ----- Section heads: allow action buttons to wrap ----- */
  .section-head { flex-wrap: wrap; gap: var(--space-2); }

  /* ----- School card stats: wrap on mobile ----- */
  .school-card .sc-stats { flex-wrap: wrap; gap: var(--space-3); }

  /* ----- Feature grid: tighter minmax ----- */
  .feature-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
  /* Single-column KPI on very narrow widths */
  .kpi-strip { grid-template-columns: minmax(0, 1fr); }
  .today-strip { grid-template-columns: minmax(0, 1fr); }

  /* Attendance picker: 2-col cards, bigger tap targets */
  .am-grid { grid-template-columns: repeat(2, 1fr); }
  .am-pick, .am-undo { min-width: 40px; min-height: 40px; }

  /* Quiz options: full-width tap rows */
  .quiz-q .qq-option { min-height: 48px; padding: 12px 14px; }

  /* Marksheet summary: 2 cols still readable */
  .marksheet .ms-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Page title: smaller on phones */
  .page-title h1 { font-size: var(--fs-xl); }

  /* Homework mark workspace: tighter gap */
  .hw-mark { gap: var(--space-3); }
  .hw-mark .hm-panel { padding: var(--space-3); }

  /* Quiz question text: smaller on phones */
  .quiz-q { padding: var(--space-4); }
  .quiz-q .qq-text { font-size: var(--fs-md); }

  /* Identity card meta: keep 2-col (labels are short) */
}

/* --- People list: keyboard-navigable rows (PPL-12) ----------------------- */
/* Rows with tabindex="0" get a visible focus ring so keyboard users can see
   which row they're on before pressing Enter/Space to open the drawer. */
.tbl tbody tr[tabindex="0"]:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: -2px;
}

/* --- RSCR-20: attendance-mark 4-button status picker --------------------- */
/* Each roster card has a row of 4 small buttons (P/L/A/L) + an ↺ undo button
   so teachers can jump straight to the status they want instead of cycling
   through 3 intermediate values. The active button gets a marigold fill. */
.am-picker {
  display: flex;
  gap: 4px;
  margin-top: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.am-pick {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.am-pick:hover { background: var(--paper-soft); }
.am-pick.is-active {
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
}
.am-undo {
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-mute);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.am-undo:hover { background: var(--paper-soft); color: var(--ink); }

/* --- RSCR-6 / RSCR-15: quiz timer + question palette --------------------- */
.qp-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-2);
}
.qp-pb {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink-mute);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qp-pb.is-answered {
  background: var(--forest-soft);
  border-color: var(--forest);
  color: var(--forest);
}
.qp-pb.is-current {
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
}
.qp-pb.is-unanswered {
  background: var(--paper-soft);
  color: var(--ink-mute);
}
.qp-pb:hover { transform: translateY(-1px); }
.qp-timer {
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink);
}
.qp-timer.is-low {
  background: var(--vermillion-soft);
  color: var(--vermillion);
  font-weight: var(--fw-semibold);
}

/* --- RSCR-28: notices read/unread visual ---------------------------- */
.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marigold);
  flex-shrink: 0;
}
.card.is-unread {
  border-color: var(--marigold);
  box-shadow: 0 0 0 1px var(--marigold-soft);
}

/* =========================================================================
   v2.12 — Marks entry sheet (mobile-suited) + attendance mobile polish
   ========================================================================= */

/* Marks entry: bordered, touch-friendly sheet. The grade-point display is
   gone from the frontend — grades are computed by the results engine. */
.marks-entry-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.me-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-tint);
}
.me-table { display: flex; flex-direction: column; }
.me-row {
  display: grid;
  grid-template-columns: 72px 1fr 160px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.me-row:last-child { border-bottom: 0; }
.me-row-head {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: var(--paper-soft);
  padding: var(--space-2) var(--space-4);
}
.me-input input[type=number] {
  width: 100%;
  min-height: 44px;               /* comfortable touch target */
  padding: 8px 12px;
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  border: 1.5px solid var(--hairline-strong); /* VISIBLE border */
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.me-input input[type=number]:focus {
  outline: none;
  border-color: var(--marigold-deep);
  box-shadow: 0 0 0 3px var(--marigold-soft);
}
.me-input input[type=number].invalid {
  border-color: var(--vermillion);
  box-shadow: 0 0 0 3px var(--vermillion-soft);
}
@media (max-width: 720px) {
  .me-row { grid-template-columns: 52px 1fr 128px; padding: var(--space-2) var(--space-3); }
  .me-row-head { display: none; } /* rows become label-less cards */
  .me-name { font-size: var(--fs-sm); }
  .me-roll { font-size: var(--fs-xs); }
}

/* Attendance grids: friendlier touch targets on phones */
@media (max-width: 720px) {
  .am-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px; }
  .am-card { padding: 10px; }
  .am-pick {
    min-width: 40px;
    min-height: 40px;
    font-size: var(--fs-sm);
  }
  .cal { gap: 2px; }
  .cal-cell { min-height: 38px; }
  .sticky-bar { flex-direction: column; gap: 10px; align-items: stretch !important; }
  .sticky-bar .row { justify-content: flex-end; flex-wrap: wrap; }
}

/* v2.13 (ROUTINE-ROLES): read-only routine cells don't invite clicks. */
.routine-grid .rg-cell.rg-readonly { cursor: default; }
.routine-grid .rg-cell.has-class.rg-readonly:hover { background: var(--marigold-soft); }

/* --- v2.13 (HW-MULTI-FILE): marking screen stage additions ------------- */
/* Pager strip above the stage — v2.14: proper padded buttons. */
.hw-mark .hm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.hw-mark .hm-page-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .15s ease;
}
.hw-mark .hm-page-btn:hover:not([disabled]) { background: var(--marigold-soft); }
.hw-mark .hm-page-btn[disabled] { opacity: 0.4; pointer-events: none; }
.hw-mark .hm-page-arrow { font-size: var(--fs-md); line-height: 1; }
.hw-mark .hm-pager-label {
  min-width: 180px;
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hw-mark .hm-pager { justify-content: space-between; }
  .hw-mark .hm-pager-label { min-width: 0; flex: 1; }
  .hw-mark .hm-page-text { display: none; }
  .hw-mark .hm-page-btn { padding: 0 12px; }
}
/* Big-text stage for text-only submissions — the written answer IS the
   centrepiece: large serif type on the register-paper background. */
.hw-mark .hm-text-stage {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  min-height: 320px;
}
.hw-mark .hm-text-eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-4);
}
.hw-mark .hm-text-body {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.hw-mark .hm-text-body-sm {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.hw-mark .hm-text-inline {
  margin-top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
/* Non-image attachment placeholder page */
.hw-mark .hm-file-stage {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}
.hw-mark .hm-file-stage .hm-file-icon { font-size: 48px; line-height: 1; }
.hw-mark .hm-file-stage .btn { width: auto; }

/* =========================================================================
   v2.15 — SMS automation rules + attendance time-tracking
   ========================================================================= */

/* --- SMS automation: one row per configurable event -------------------- */
.sms-rule-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sms-rule-row:hover { border-color: var(--ink-mute); }
/* An enabled rule is visually "live" — a tinted rail on the leading edge. */
.sms-rule-row.is-on {
  border-color: var(--forest);
  background: linear-gradient(90deg, color-mix(in srgb, var(--forest) 6%, transparent), transparent 30%);
}
.sms-rule-row .row-main { flex: 1; min-width: 0; }
.sms-rule-row .row-sub { flex-wrap: wrap; }

/* The per-event colour dot. */
.sms-rule-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--ink-mute);
}
.sms-rule-dot.tone-forest     { background: var(--forest); }
.sms-rule-dot.tone-marigold   { background: var(--marigold-deep); }
.sms-rule-dot.tone-vermillion { background: var(--vermillion); }
.sms-rule-dot.tone-indigo     { background: var(--indigo); }

/* Inline one-line preview of the configured message. */
.sms-rule-preview {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* The phone-style preview box used in every message editor. */
.sms-preview-box {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 44px;
  max-width: 360px;
}

/* Teacher-recruitment form builder rows wrap instead of overflowing. */
.tsm-field-row { padding: var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }

@media (max-width: 720px) {
  .sms-rule-row { flex-wrap: wrap; }
  .sms-rule-row > .row.gap-2 { width: 100%; justify-content: flex-end; }
  .sms-preview-box { max-width: 100%; }
  .tsm-field-row > * { flex: 1 1 100% !important; }
}

/* v2.15 (IC-HERO): the student identity card gets its own full-width hero
   row at the top of the home screen. On wide screens it is centred and
   capped so it reads as a showpiece rather than a stretched banner; on
   phones it fills the width. */
.ic-hero {
  display: flex;
  justify-content: center;
}
.ic-hero > .identity-card {
  width: 100%;
  max-width: 560px;
}
@media (max-width: 720px) {
  .ic-hero > .identity-card { max-width: 100%; }
  .identity-card.ic-student .ic-body { padding: 0 var(--space-4) var(--space-4); }
  .identity-card.ic-student .ic-name { font-size: var(--fs-xl); }
  .identity-card.ic-student .ic-stat-val { font-size: var(--fs-md); }
}

/* v2.15: per-class weekend exceptions in the off-days card. Each row pairs a
   class name with one toggle chip per school-wide weekend day. */
.off-class-row {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--hairline);
}
.off-class-row:last-child { border-bottom: 0; }
/* An "is-active" chip here means WORKING (an exception to the weekend), so
   colour it as a positive state rather than the default filter blue. */
.off-class-row .chip-filter.is-active {
  border-color: var(--forest);
  color: var(--forest);
  background: var(--forest-soft);
}
@media (max-width: 720px) {
  .off-class-row { flex-direction: column; align-items: flex-start !important; gap: var(--space-1) !important; }
}

/* =========================================================================
   v2.24 (ASTRA-DECK) — Astra banner in the student Quiz tab
   =========================================================================
   Space-themed banner announcing the new Astra quiz client (/astra). The
   palette deliberately steps outside the paper/ink tokens: the banner is a
   slice of the Astra deck itself (deep-space indigo-black, star specks,
   cyan glow), framed by the app's own radius/shadow so it still feels
   native. "Launch Astra" deep-links to the deck (shared login, no re-auth);
   "Use legacy quiz" dismisses to a slim permanent link (astra-mini) so the
   deck remains one click away whichever client the student settles on.
   ============================================================================ */

.astra-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(103, 232, 249, 0.35);
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(103, 232, 249, 0.18) 0%, rgba(103, 232, 249, 0) 55%),
    radial-gradient(90% 120% at 10% 120%, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0) 60%),
    linear-gradient(160deg, #0a0d1f 0%, #05060f 58%, #04050c 100%);
  color: #eef0f6;
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: 0 12px 32px -18px rgba(3, 4, 12, 0.65);
}
/* Star specks — three layered dot fields drifting slowly across the card. */
.astra-banner-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 70%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 18%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 55%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 28%, rgba(103, 232, 249, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 62%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 12%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 88%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 82%, rgba(165, 180, 252, 0.7) 50%, transparent 51%);
  animation: astra-drift 60s linear infinite alternate;
}
@keyframes astra-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-14px, -10px, 0); }
}
.astra-banner-body { position: relative; }
.astra-banner-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.astra-banner-new {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  color: #05060f;
  background: #67e8f9;
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
}
.astra-banner-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: #ffffff;
}
.astra-banner-sub {
  margin: var(--space-2) 0 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(238, 240, 246, 0.72);
}
.astra-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
/* Button colour overrides — the app's marigold reads poorly on deep space,
   so inside the banner the primary action is the deck's own cyan. */
.astra-banner .btn { border-radius: 999px; }
.astra-banner .btn-marigold {
  background: #67e8f9;
  border-color: #67e8f9;
  color: #05060f;
  font-weight: var(--fw-semibold);
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
}
.astra-banner .btn-marigold:hover {
  background: #7eefFa;
  border-color: #7eefFa;
  color: #05060f;
}
.astra-banner .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(238, 240, 246, 0.85);
}
.astra-banner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
/* Slim permanent link after dismissal (or for students who never expanded). */
.astra-mini { margin-bottom: var(--space-4); }
.astra-mini-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.astra-mini-link:hover {
  border-color: #67e8f9;
  color: var(--ink);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.35);
}
.astra-mini-star { color: var(--marigold-deep); }
.astra-mini-arrow { color: var(--ink-mute); }
.astra-mini-link:hover .astra-mini-arrow { color: var(--ink); }
@media (max-width: 720px) {
  .astra-banner { padding: var(--space-5); }
  .astra-banner-heading { font-size: var(--fs-md); }
}