:root {
  /* Colours taken from the CIE logo: blue, green, orange, gold */
  --cie-blue: #2f4f9e;
  --cie-green: #2e9e4f;
  --cie-orange: #f28c28;
  --cie-gold: #c8934a;
  --bg: #f5f6f8;
  --card: #fff;
  --text: #1d2330;
  --muted: #667085;
  --line: #e2e5ea;
  --accent: var(--cie-blue);
  --accent-ink: #fff;
  /* light tint of the main colour; follows the admin's brand colour */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
  --danger: #c62828;
  --warn: #b26a00;
  --ok: #1b7f3b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: relative;
}

/* thin brand stripe in the four logo colours */
header::after,
.exam-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--cie-green) 0 25%, var(--cie-blue) 25% 50%, var(--cie-orange) 50% 75%, var(--cie-gold) 75%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo {
  height: 36px;
  width: auto;
  display: block;
}

.logo-lg {
  height: 64px;
  width: auto;
  display: block;
}

.login-logo {
  display: block;
  max-width: 260px;
  max-height: 110px;
  margin: 0 auto 12px;
}

.small {
  font-size: 13px;
}

header h1 {
  font-size: 17px;
  margin: 0;
}

main {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.narrow {
  max-width: 420px;
  margin: 60px auto;
}

h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

label {
  display: block;
  font-weight: 600;
  margin: 12px 0 4px;
}

input,
textarea,
select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: inherit;
}

textarea {
  min-height: 160px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
}

button {
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.secondary {
  background: #e8ecf4;
  color: var(--text);
}

button.danger {
  background: var(--danger);
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

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

.muted {
  color: var(--muted);
}

.error {
  color: var(--danger);
  min-height: 1.5em;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.tabs button {
  background: #e8ecf4;
  color: var(--text);
}

.tabs button.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.hidden {
  display: none !important;
}

/* Proctor <-> student chat (exam side panel and the proctor's detail window) */
.chat-log {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
  font-size: 0.9em;
}
.chat-msg {
  padding: 5px 8px;
  border-radius: 8px;
  max-width: 90%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.theirs { background: var(--accent-soft); align-self: flex-start; }
.chat-msg.mine { background: var(--accent); color: var(--accent-ink); align-self: flex-end; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; }
.exam-side .chat select { margin-top: 4px; }
.paused-card { border-left: 4px solid var(--warn); }
.tile.unread { outline: 3px solid var(--warn); }

.wa-list { max-height: 220px; overflow-y: auto; padding-left: 18px; }

.phone-box { border: 2px dashed var(--accent); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.phone-box ol { margin: 6px 0; padding-left: 20px; }
.code-big { font-size: 1.5em; letter-spacing: 0.15em; font-family: monospace; }
.code-input { font-size: 1.6em; letter-spacing: 0.3em; text-align: center; font-family: monospace; }
.screen-shot { width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #000; }

/* Urdu (student pages): right-to-left, a Nastaliq/Naskh font from the computer, more line height */
.lang-btn { float: inline-end; font-size: 1.05em; }
body.urdu { font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Urdu Typesetting", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.9; font-size: 118%; }
body.urdu .timer, body.urdu .code-big, body.urdu .code-input, body.urdu input[type=email], body.urdu input[type=password] { direction: ltr; }
body.urdu .chat-msg.theirs { align-self: flex-end; }
body.urdu .chat-msg.mine { align-self: flex-start; }

/* Manual marking */
dialog.wide-dlg { width: min(900px, 96vw); }
.mk-q { margin: 10px 0; }
.mk-opts li { padding: 2px 4px; border-radius: 4px; }
.mk-opts li.key { color: var(--ok); font-weight: 600; }
.mk-opts li.chosen:not(.key) { color: var(--danger); font-weight: 600; }
.mk-save { position: sticky; bottom: 0; background: var(--card); padding: 10px 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--accent-soft); }

/* Staff role can't use this (admin.js applyRole); separate from .hidden so other toggles don't undo it. */
.no-role {
  display: none !important;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: #e8ecf4;
}

.badge.ok {
  background: #dff3e5;
  color: var(--ok);
}

.badge.bad {
  background: #fde3e3;
  color: var(--danger);
}

.badge.warn {
  background: #fff1d6;
  color: var(--warn);
}

/* system check */
.checks li {
  margin: 6px 0;
  list-style: none;
}

.checks li::before {
  content: "⏳ ";
}

.checks li.pass::before {
  content: "✅ ";
}

.checks li.fail::before {
  content: "❌ ";
}

.meter {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.meter>div {
  height: 100%;
  width: 0;
  background: var(--ok);
  transition: width .1s;
}

.preview {
  width: 100%;
  max-width: 360px;
  border-radius: 8px;
  background: #000;
}

/* exam */
.exam-bar {
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
}

.timer.low {
  color: var(--danger);
}

/* Exam screen: exam details on top, side panel (time, progress, question list) on the left, question on the right. */
.exam-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  gap: 20px;
  max-width: 1600px;
  margin: 20px auto;
  padding: 0 16px;
  align-items: start;
}

.exam-layout main {
  margin: 0;
  padding: 0;
  max-width: none;
}

.exam-side {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px;
}

.exam-side .timer {
  font-size: 26px;
}

.exam-side #submitBtn {
  width: 100%;
}

.progress {
  height: 10px;
  margin: 4px 0;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}

.progress > div {
  width: 0;
  height: 100%;
  background: var(--ok);
  transition: width .3s;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.palette button {
  padding: 7px 0;
  font-size: 14px;
}

.palette button.answered {
  background: color-mix(in srgb, var(--ok) 18%, #fff);
  box-shadow: inset 0 0 0 2px var(--ok);
}

.palette-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.palette-legend .key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #e8ecf4;
}

.palette-legend .key.current {
  background: var(--accent);
}

.palette-legend .key.answered {
  background: color-mix(in srgb, var(--ok) 18%, #fff);
  box-shadow: inset 0 0 0 2px var(--ok);
}

@media (max-width: 800px) {
  .exam-layout {
    grid-template-columns: 1fr;
  }

  .exam-chat {
    position: static;
    width: auto !important;
    height: auto;
    resize: none;
  }

  .exam-chat .chat-log { max-height: 240px; }

  .chat-wide { display: none; }

  .exam-side {
    position: static;
    max-height: none;
  }

  .palette {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  }
}

.question {
  margin-bottom: 14px;
}

.question .opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 6px 0;
  cursor: pointer;
  font-weight: 400;
}

.question .opt input {
  width: auto;
  margin-top: 4px;
}

.question .opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* The student doesn't see their own camera during the exam (only the proctor does). The video stays on the page,
   tiny and invisible, because snapshots and the AI checks read their frames from it; a small badge says it is on. */
.selfcam {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Camera/mic warning that keeps scrolling under the exam title, so students can't miss it (deters cheating).
   Two identical halves: moving the track by half its width loops without a jump. */
.ticker {
  flex: 1 0 100%;
  margin: 0 -20px -10px;
  overflow: hidden;
  background: #b71c1c;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  white-space: nowrap;
  pointer-events: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}

.ticker-half { display: flex; }

.ticker span { padding: 0 40px; }

.ticker span::before {
  content: '● ';
  color: #ff8a80;
  animation: blink 1.2s steps(1) infinite;
}

/* Urdu pages are right-to-left: the strip starts on the right, so it moves the other way. */
[dir="rtl"] .ticker-track { animation-name: ticker-rtl; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes ticker-rtl { to { transform: translateX(50%); } }
@keyframes blink { 50% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .ticker span::before { animation: none; }
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* Exam window lost focus (e.g. Snipping Tool): blank the questions until the student comes back. */
#examView.shielded main {
  visibility: hidden;
}

.watermark {
  position: fixed;
  inset: -20%;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  gap: 70px 90px;
  transform: rotate(-25deg);
  overflow: hidden;
  color: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 20, 30, .92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.overlay .box {
  max-width: 480px;
}

.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--danger);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  max-width: 90vw;
}

/* proctor grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.tile {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  font-size: 12px;
}

.tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #222;
  display: block;
}

.tile .meta {
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.tile.offline {
  opacity: .55;
}

.tile.flagged {
  border-color: var(--warn);
}

.tile.hot {
  border-color: var(--danger);
  animation: pulse 1s 3;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 4px rgba(198, 40, 40, .35);
  }
}

.feed {
  max-height: 260px;
  overflow: auto;
  font-size: 13px;
}

.feed div {
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}

dialog {
  width: min(900px, 95vw);
  border: 0;
  border-radius: 10px;
  padding: 20px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, .5);
}

.snaps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  max-height: 280px;
  overflow: auto;
}

.snaps img {
  width: 100%;
  border-radius: 4px;
}

/* checks: amber for "works, but not ideal" */
.checks li.warn::before {
  content: "⚠️ ";
}

.summary {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef1f6;
  font-weight: 600;
}

.summary.ok {
  background: #dff3e5;
  color: var(--ok);
}

.summary.bad {
  background: #fde3e3;
  color: var(--danger);
}

/* exam header (setup page, exam info, results) */
.exam-header-top {
  display: flex;
  gap: 16px;
  align-items: center;
}

.exam-header h2,
.exam-header-top h2 {
  margin: 2px 0;
}

.course {
  font-weight: 600;
  color: var(--accent);
}

.header-text {
  margin: 2px 0;
}

.instructions {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f7f8fb;
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  white-space: pre-wrap;
}

.instructions p {
  margin: 4px 0 0;
}

details.card summary {
  cursor: pointer;
}

/* student exam list */
.exam-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.exam-item:last-child {
  border-bottom: 0;
}

.countdown {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

/* star ratings */
.stars-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  background: none;
  color: #c9ced8;
  font-size: 30px;
  line-height: 1;
  padding: 0 2px;
}

.star.on,
.star:hover {
  color: var(--cie-orange);
}

.star:focus-visible {
  outline: 2px solid var(--accent);
  border-radius: 4px;
}

.fb-avg div {
  margin: 4px 0;
}

.fb-dist {
  flex: 1 1 260px;
}

.fb-bar {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  gap: 8px;
  align-items: center;
  margin: 3px 0;
  font-size: 13px;
}

.fb-bar .bar {
  height: 10px;
  background: var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.fb-bar .bar span {
  display: block;
  height: 100%;
  background: var(--cie-orange);
}

/* admin tables */
.table-wrap {
  overflow-x: auto;
}

td.actions {
  white-space: nowrap;
}

td.actions>* {
  margin: 2px 4px 2px 0;
}

button.link {
  background: none;
  color: var(--accent);
  padding: 0;
  font-weight: 600;
}

button {
  padding: 8px 14px;
}

/* printing: results sheet / login slips */
.print-only {
  display: none;
}

@media print {
  body {
    background: #fff;
  }

  body>*:not(#printArea) {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  dialog {
    display: none !important;
  }
}

.print-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.print-brand img {
  height: 56px;
}

.print-site {
  font-weight: 700;
  font-size: 18px;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.print-table th,
.print-table td {
  border: 1px solid #999;
  padding: 4px 6px;
}

.slips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slip {
  border: 1px dashed #777;
  padding: 10px;
  break-inside: avoid;
  font-size: 13px;
  line-height: 1.6;
}

.slip .print-brand img {
  height: 36px;
}

.slip-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.slip code {
  font-size: 15px;
}

@media (max-width: 640px) {
  main {
    padding: 0 12px;
  }

  .exam-header-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* checkbox + long label text on one line */
label.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  margin: 10px 0;
}

label.check input {
  width: auto;
  margin-top: 4px;
  flex: none;
}

/* admin layout with sidebar */
.admin-layout {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
}

.sidebar {
  width: 260px;
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  flex-shrink: 0;
}

.sidebar-brand {
  margin-bottom: 32px;
  padding: 0 4px;
}

.sidebar-logo {
  height: 44px;
  margin-bottom: 12px;
  display: block;
}

.sidebar-brand h1 {
  font-size: 18px;
  margin: 0;
  line-height: 1.25;
}

.sidebar .tabs.vertical {
  flex-direction: column;
  margin: 0;
  gap: 6px;
}

.sidebar .tabs.vertical button {
  text-align: left;
  background: transparent;
  width: 100%;
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.sidebar .tabs.vertical button:hover {
  background: #e8ecf4;
}

.sidebar .tabs.vertical button.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.admin-content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }

  .sidebar-brand {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
  }

  .sidebar-logo {
    margin-bottom: 0;
    height: 36px;
  }

  .sidebar .tabs.vertical {
    flex-direction: row;
    margin: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .sidebar .tabs.vertical button {
    text-align: center;
    width: auto;
    white-space: nowrap;
  }

  .admin-content {
    height: auto;
    overflow-y: visible;
  }
}
.eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; } .eye-btn:hover { opacity: 1; } .disabled { cursor: not-allowed; text-decoration: none; }

/* sign-in pages */
.card-sub {
  text-align: center;
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--muted);
}

.pw-wrap {
  position: relative;
}

.pw-wrap input {
  padding-right: 40px;
}

button.wide {
  width: 100%;
  margin-top: 4px;
}

.links {
  text-align: center;
  margin: 12px 0 0;
}

.big-link {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.resend {
  font-size: 13px;
}

.welcome {
  font-weight: 600;
  color: var(--ok);
}

/* 1 → 2 → 3 progress for sign-up */
.steps {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  counter-reset: step;
}

.steps li {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding-top: 6px;
  border-top: 4px solid var(--line);
  counter-increment: step;
}

.steps li::before {
  content: counter(step) ". ";
}

.steps li.active {
  color: var(--accent);
  font-weight: 600;
  border-color: var(--accent);
}

.steps li.done {
  color: var(--ok);
  border-color: var(--cie-green);
}

/* admin: students tab */
.pill-tabs button {
  border-radius: 99px;
  padding: 6px 14px;
}

.ok-msg {
  color: var(--ok);
  font-weight: 600;
}

.students-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

#tab-students {
  max-width: 1400px;
}

.folders {
  flex: 0 0 220px;
  padding: 14px;
  position: sticky;
  top: 10px;
}

.folders h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 4px 6px 6px;
}

.folders h3:not(:first-child) {
  margin-top: 18px;
}

.folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.folder-list button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 6px;
}

.folder-list button::before {
  content: "📁";
  margin-right: 2px;
}

#statusFolders button::before {
  content: none;
}

.folder-list button span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-list button:hover {
  background: #e8ecf4;
}

.folder-list button.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.folder-list .count {
  font-size: 12px;
  opacity: .8;
}

.students-main {
  flex: 1;
  min-width: 0;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, #fff);
}

.students-table th.sel,
.students-table td.sel {
  width: 32px;
}

.students-table input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.students-table tbody tr:hover {
  background: #f7f8fb;
}

.students-table tr.selected {
  background: var(--accent-soft);
}

.students-table td.actions button {
  padding: 4px 10px;
  font-size: 13px;
}

td.empty {
  text-align: center;
  padding: 24px;
}

@media (max-width: 900px) {
  .students-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .folders {
    position: static;
    flex: none;
  }
}

.students-table .badge,
.students-table td:nth-child(4),
.students-table td:nth-child(5) {
  white-space: nowrap;
}

.students-table td:nth-child(2) {
  min-width: 140px;
}

.narrow h2[data-site-name] {
  text-align: center;
  margin-bottom: 2px;
}

/* second line under the institute name, e.g. "Online Examination Portal" */
.site-tagline {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
}

.narrow .site-tagline {
  text-align: center;
  margin-bottom: 14px;
}

/* "you left the exam" warnings: amber, the final one red */
.overlay.strike {
  background: rgba(120, 70, 0, .95);
}

.overlay.strike.final {
  background: rgba(150, 20, 20, .97);
}

.overlay.strike h2 {
  font-size: 28px;
}

.overlay.strike p {
  font-size: 17px;
}

/* exam.html?aitest: live readout of the AI checks, for staff testing */
.ai-debug {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 100;
  max-width: min(720px, 95vw);
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .8);
  color: #7CFC9A;
  font: 12px/1.4 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}

/* ---------- admin guidance: getting-started card, (i) tooltips, help page ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar button.sidebar-link {
  margin-top: 14px;
  padding: 6px 16px;
  text-align: left;
  font-size: 14px;
}

.guide-wrap {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 16px;
}

.guide {
  border-top: 3px solid var(--accent);
  margin-bottom: 0;
}

.guide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.guide-head h2 {
  margin: 0;
}

.guide-actions {
  margin-left: auto;
  display: flex;
  gap: 16px;
}

.guide-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.guide-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfd;
}

.guide-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.guide-tick {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8ecf4;
  color: var(--accent);
  font-weight: 700;
}

.guide-steps li.done {
  background: #f1faf4;
  border-color: #cdebd6;
}

.guide-steps li.done .guide-tick {
  background: var(--ok);
  color: #fff;
}

.guide-steps li button {
  flex: none;
  padding: 6px 14px;
}

#guideAllDone {
  margin: 10px 0 0;
}

/* (i) tooltip: hover (mouse), keyboard focus, or tap to open */
.tip-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  font-weight: 400;
}

button.tip {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: #e8ecf4;
  color: var(--accent);
  font: italic 700 12px/18px Georgia, "Times New Roman", serif;
  text-align: center;
}

/* bigger invisible tap area for fingers */
button.tip::after {
  content: "";
  position: absolute;
  inset: -10px;
}

button.tip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tip-text {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.tip-wrap.open .tip-text,
.tip:focus-visible+.tip-text {
  display: block;
}

@media (hover: hover) {
  .tip-wrap:hover .tip-text {
    display: block;
  }
}

.tip-wrap.hush:not(.open) .tip-text {
  display: none;
}

p.empty-state {
  text-align: center;
  padding: 24px;
}

/* help page */
#tab-help {
  max-width: 860px;
}

.help h3 {
  font-size: 15px;
  margin: 16px 0 4px;
}

.help ol,
.help ul {
  padding-left: 22px;
  margin: 6px 0;
}

.help li {
  margin: 4px 0;
}

.help-toc a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  .guide-wrap {
    padding: 0 12px;
    margin-top: 12px;
  }

  /* on phones the tooltip is a bar at the bottom of the screen, so it never runs off the edge */
  .tip-text {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    width: auto;
    max-width: none;
    font-size: 14px;
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  /* "Print / save as PDF" on the Help tab: print only the help text */
  body.print-help>#adminApp {
    display: block !important;
  }

  body.print-help #printArea {
    display: none !important;
  }

  body.print-help .admin-content {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  body.print-help #tab-help {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.print-help .help .card {
    border: 0;
    padding: 0;
    margin-bottom: 14px;
  }

  body.print-help .help section {
    break-inside: avoid;
  }
}

/* colour pickers (Settings → Brand colours, exam colour) */
input[type=color] {
  height: 40px;
  padding: 3px;
  cursor: pointer;
}

.color-input {
  width: 70px;
}

.color-row label {
  flex: 1 1 140px;
}

/* Watch live (proctor) and walkie-talkie voice messages (both pages). */
.watch-live { width: 100%; max-height: 420px; object-fit: contain; background: #000; border-radius: 6px; }
.talk { width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
/* While recording, the button fills from the left with the microphone level (--lvl, set by voice.js). */
.talk.talking { background: linear-gradient(to right, rgba(255, 255, 255, .35) var(--lvl, 0%), transparent var(--lvl, 0%)), var(--danger); border-color: var(--danger); color: #fff; }
.chat-msg audio { display: block; width: 100%; min-width: 200px; height: 32px; margin-top: 4px; }

/* Student chat column (right of the questions, where the camera picture used to be): full height, wider with the
   ⤢ button, or drag its corner to any width (remembered on this computer). */
.exam-chat {
  position: sticky;
  top: 80px;
  width: 300px;
  min-width: 240px;
  max-width: 640px;
  height: calc(100vh - 100px);
  overflow: hidden;
  resize: horizontal;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.exam-chat.wide { width: 480px; }

.exam-chat .chat summary { cursor: pointer; }

/* Messages fill the column; the quick messages, typing box and talk button sit at the bottom. */
.exam-chat .chat-log { height: calc(100vh - 330px); min-height: 120px; max-height: none; }
/* Urdu text is taller: leave more room so the talk button stays on screen (the column scrolls if it still doesn't fit). */
body.urdu .exam-chat .chat-log { height: calc(100vh - 470px); }
.exam-chat { overflow-y: auto; }

.chat-wide { align-self: flex-end; padding: 2px 10px; font-size: 13px; }

/* Proctor: hold-to-talk with the microphone chooser next to it. */
.talk-row { margin-top: 6px; flex-wrap: nowrap; }
.talk-row .talk { flex: 1; }
.talk-row select { width: auto; max-width: 40%; }

/* System check: numbered steps, done in order. The next one is highlighted; finished ones get a tick. */
.setup-steps { list-style: none; counter-reset: setup; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.setup-steps li { counter-increment: setup; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 12px 10px 48px; border: 1px solid var(--line); border-radius: 8px; opacity: .6; }
.setup-steps li > span { flex: 1 1 220px; }
.setup-steps li .meter { flex: 1 1 100%; margin: 0; }
.setup-steps li .check { margin: 0; }
.setup-steps li::before { content: counter(setup); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: var(--line); color: var(--muted); }
.setup-steps li.now { opacity: 1; border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.setup-steps li.now::before { background: var(--accent); color: var(--accent-ink); }
.setup-steps li.done { opacity: 1; }
.setup-steps li.done::before { content: '✓'; background: var(--ok); color: #fff; }
body.urdu .setup-steps li { padding: 10px 48px 10px 12px; }
body.urdu .setup-steps li::before { left: auto; right: 12px; }
/* The Urdu font's tall line height pushed the number off-centre: plain font, no extra line height. */
.setup-steps li::before { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 14px; line-height: 1; }