/* ===================================================================
   Live Class Portal - application design system
   Built on public/brand-tokens.css (Mawhiba Future v0.3.2).
   Loaded by BOTH public/student.html and public/teacher.html.

   What this file enforces:
     spacing scale   4 / 8 / 12 / 16 / 24 / 32 / 40 / 48   (no other value)
     radius scale    16 sm / 24 md / 32 lg; 9999 = solid CTA button ONLY
     type scale      11 / 13 / 14 / 16 / 18 / 20 / 24 / 28 / 36
     buttons         primary yellow, accent teal, secondary soft teal,
                     tertiary neutral, danger; one set of states
     cards           light surfaces only, hairline border, no dark card
     colour          four brand colours over neutrals, 60 / 30 / 7 / 3
     contrast        every text colour clears 4.5:1 on its own background
     shadows         only the three values the brand kit ships
     focus           3px solid #1a1c1a, offset 2px (teal fails 3:1 on white)

   Two derived values are NOT in the brand kit and are flagged in the
   handover note: --c-teal-ink (teal darkened so teal-coded TEXT can
   clear 4.5:1) and the --c-danger / --c-record family (the kit has no
   destructive or record colour).
   =================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;                     /* never follow a dark OS */

  /* brand, four colours */
  --c-teal:        #0bd5c8;
  --c-teal-soft:   rgba(11, 213, 200, 0.16);
  --c-teal-line:   rgba(11, 213, 200, 0.34);
  --c-teal-ink:    #0a6f69;   /* derived: teal at 6.0:1 on white, for teal-coded TEXT */
  --c-yellow:      #ffd04f;
  --c-yellow-soft: rgba(255, 208, 79, 0.28);
  --c-yellow-ink:  #6b5200;   /* derived: for text inside a soft-yellow tag */
  --c-purple:      #7a47ae;
  --c-purple-soft: rgba(122, 71, 174, 0.14);
  --c-purple-ink:  #5a2f8a;
  --c-orange:      #ff7b3d;
  --c-orange-soft: rgba(255, 123, 61, 0.18);
  --c-orange-ink:  #9c4310;

  /* functional, outside the decorative palette: destructive + the record affordance */
  --c-danger:      #b3261e;
  --c-danger-soft: #fde7e6;
  --c-record:      #d92a25;   /* white on it = 4.9:1 */
  --c-record-hot:  #e0302b;   /* white on it = 4.5:1 */

  /* neutrals, straight from brand-tokens.css */
  --ink:         #1a1c1a;
  --ink-muted:   #5c635c;     /* 6.1:1 on white, 5.4:1 on --bg */
  --line:        rgba(26, 28, 26, 0.08);
  --line-strong: #d1d5d1;
  --bg:          #f4f6f4;
  --bg-sunk:     #e6e8e6;
  --surface:     #ffffff;

  /* spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* radius */
  --r-sm: 16px; --r-md: 24px; --r-lg: 32px; --r-pill: 9999px;

  /* type */
  --fs-tiny: 11px; --fs-caption: 13px; --fs-sm: 14px; --fs-body: 16px;
  --fs-lead: 18px; --fs-20: 20px; --fs-h2: 24px; --fs-h1: 28px; --fs-display: 36px;
  --lh-tight: 1.15; --lh-body: 1.55; --lh-loose: 1.65;

  /* elevation, the brand kit's entire shadow vocabulary */
  --shadow-hover:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.05);

  --focus: var(--ink);
  --dock-h: 0px;                            /* set from JS on the student page */
  --net-h:  0px;                            /* height of the connection strip when it is up */
  --tap: 48px;                              /* brand minimum tap target */
}

/* the OS theme must never repaint this page */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  html, body { background: var(--bg); color: var(--ink); }
}

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

html {
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;                          /* Latin body */
}
html[dir="rtl"] body { font-weight: 500; }   /* Arabic bumps one weight */

h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: -0.01em; font-weight: 700; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- icons */
.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; color: var(--c-teal); }
.ic svg { width: 1em; height: 1em; display: block; stroke-width: 2; }
/* inside a coloured control the icon follows the control's own text colour */
.btn .ic, .tag .ic, .stat .ic, .chip .ic { color: currentColor; }

/* ---------------------------------------------------------------- text */
.u-muted   { color: var(--ink-muted); }
.u-sm      { font-size: var(--fs-sm); }
.u-caption { font-size: var(--fs-caption); }
.u-nowrap  { white-space: nowrap; }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* an English fragment inside Arabic, isolated so bidi never reorders it */
.en { direction: ltr; unicode-bidi: isolate; font-weight: 400; }
html[dir="rtl"] .en { display: inline-block; }

/* section label: plain text, never a pill, never yellow */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink);
  letter-spacing: 0;
  margin: 0 0 var(--s-2);
}
html[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-tiny); }
.eyebrow .ic { font-size: 16px; color: var(--c-teal); }
.eyebrow__note { font-weight: 400; color: var(--ink-muted); }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.card + .card { margin-top: var(--s-3); }
.card--flush { padding: 0; overflow: hidden; }
.card--roomy { padding: var(--s-6); border-radius: var(--r-lg); }
.card--teal  { background: var(--c-teal-soft); border-color: transparent; }
.card--sunk  { background: var(--bg); border-color: var(--line); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-4); text-align: center;
  color: var(--ink-muted); font-size: var(--fs-sm);
}
.empty .ic { font-size: 24px; color: var(--c-teal); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--bg-sunk);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { font-size: 18px; }
.btn:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; transition-duration: 60ms; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* primary: the solid yellow CTA. Pill radius lives here and on --accent, nowhere else. */
.btn--primary   { --btn-bg: var(--c-yellow); --btn-fg: var(--ink); font-weight: 700; border-radius: var(--r-pill); padding: 0 var(--s-6); }
/* accent: solid teal CTA with dark ink. White on teal is banned. */
.btn--accent    { --btn-bg: var(--c-teal);   --btn-fg: var(--ink); font-weight: 700; border-radius: var(--r-pill); padding: 0 var(--s-6); }
/* secondary: soft teal */
.btn--secondary { --btn-bg: var(--c-teal-soft); --btn-fg: var(--c-teal-ink); }
/* tertiary: neutral, the workhorse */
.btn--tertiary  { --btn-bg: var(--bg-sunk); --btn-fg: var(--ink); }
/* destructive */
.btn--danger    { --btn-bg: var(--c-danger-soft); --btn-fg: var(--c-danger); }
/* dark: solid #1a1c1a with white text, the kit's approved dark fill. Used for the
   one control whose "on" state must read as a stop, not as an invitation. */
.btn--dark      { --btn-bg: var(--ink); --btn-fg: var(--surface); font-weight: 700; border-radius: var(--r-pill); padding: 0 var(--s-6); }
/* quiet: text-only action inside a dense row */
.btn--quiet     { --btn-bg: transparent; --btn-fg: var(--c-teal-ink); }
.btn--quiet:hover:not(:disabled) { --btn-bg: var(--c-teal-soft); }

.btn--sm  { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-caption); }
.btn--lg  { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-body); border-radius: var(--r-lg); }
.btn--xl  { min-height: 64px; padding: 0 var(--s-6); font-size: var(--fs-lead); font-weight: 700; border-radius: var(--r-lg); }
.btn--lg.btn--primary, .btn--xl.btn--primary,
.btn--lg.btn--accent,  .btn--xl.btn--accent { border-radius: var(--r-pill); }
.btn--block { width: 100%; }
.btn--icon  { padding: 0; width: var(--tap); }
.btn--icon.btn--sm { width: 36px; }

/* selected state inside a group of choices. Opt in with .btn--choice so a plain
   toggle button (camera, mics) keeps its own colour instead of turning teal. */
.btn--choice[aria-pressed="true"] { --btn-bg: var(--c-teal); --btn-fg: var(--ink); font-weight: 700; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------------------------------------------------------------- focus */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.on-dark :focus-visible, .toast--spot :focus-visible { outline-color: var(--ink); }

/* ---------------------------------------------------------------- forms */
.field { display: block; margin-bottom: var(--s-3); }
.field__label {
  display: block; font-size: var(--fs-caption); font-weight: 600;
  color: var(--ink-muted); margin-bottom: var(--s-1);
}
.field__hint  { display: block; font-size: var(--fs-caption); color: var(--ink-muted); margin-top: var(--s-1); }
.field__error {
  display: none; font-size: var(--fs-caption); font-weight: 600;
  color: var(--c-danger); margin-top: var(--s-1);
}
.field.is-invalid .field__error { display: block; }

.input, .textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--s-3);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  transition: border-color 80ms ease;
}
.textarea { min-height: 150px; resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.input:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .textarea:focus { border-color: var(--ink); background: var(--surface); }
.field.is-invalid .input { border-color: var(--c-danger); }
.input[dir="rtl"], .textarea[dir="rtl"] { text-align: right; font-weight: 500; }

.checkline {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; font-size: var(--fs-caption); color: var(--ink-muted); cursor: pointer;
}
.checkline input { width: 18px; height: 18px; accent-color: var(--c-teal-ink); }

/* ---------------------------------------------------------------- chips + tags */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: var(--bg); color: var(--ink);
  border-radius: var(--r-sm); padding: var(--s-1) var(--s-3);
  font-size: var(--fs-sm); font-weight: 600;
}
.chip--me { background: var(--c-teal); color: var(--ink); }

.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: var(--bg-sunk); color: var(--ink-muted);
  border-radius: var(--r-sm); padding: var(--s-1) var(--s-2);
  font-size: var(--fs-tiny); font-weight: 600; line-height: 1.4;
}
.tag .ic { font-size: 12px; }
.tag--ok     { background: var(--c-teal-soft);   color: var(--c-teal-ink); }
.tag--warn   { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.tag--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.tag--family { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.tag--hi     { background: var(--c-teal-soft);   color: var(--c-teal-ink); }
.tag--mid    { background: var(--c-yellow-soft); color: var(--c-yellow-ink); }
.tag--lo     { background: var(--bg-sunk);       color: var(--ink-muted); }

/* Verdict of one answer. Teacher side only: the kid never receives a verdict.
   Soft brand fill, dark ink (the teacher scans these at a glance across a full
   queue, so the label has to be the readable part), icon carries the colour. */
.tag--v { font-size: var(--fs-caption); padding: var(--s-1) var(--s-2); color: var(--ink); }
.tag--v .ic { font-size: 14px; }
.tag--v-good    { background: var(--c-teal-soft); }
.tag--v-wrong   { background: var(--c-orange-soft); }
.tag--v-arabic  { background: var(--c-purple-soft); }
.tag--v-unclear { background: var(--bg-sunk); }
.tag--v-good .ic    { color: var(--c-teal-ink); }
.tag--v-wrong .ic   { color: var(--c-orange-ink); }
.tag--v-arabic .ic  { color: var(--c-purple-ink); }
.tag--v-unclear .ic { color: var(--ink-muted); }
/* a verdict the AI grader did not produce: same bucket, visibly softer, and it says why on hover.
   A server WITH a key still falls back to the built-in rules per clip when a call fails. */
.tag--v.is-rule { opacity: .8; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag__note { margin-inline-start: 4px; font-weight: 600; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

/* analysis still running: quiet, outlined, never a colour that reads as a result */
.tag--v-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-muted); }
.tag--v-pending .ic { color: var(--ink-muted); animation: spin 1.6s linear infinite; }

/* a live count, solid teal with dark ink */
.stat {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--c-teal); color: var(--ink);
  border-radius: var(--r-sm); padding: var(--s-1) var(--s-3);
  font-size: var(--fs-caption); font-weight: 700;
}
.stat .ic { font-size: 15px; }

/* ---------------------------------------------------------------- toasts */
.toaster {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + var(--net-h) + var(--s-3));
  left: calc(env(safe-area-inset-left, 0px) + var(--s-3));
  right: calc(env(safe-area-inset-right, 0px) + var(--s-3));
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: 100%; max-width: 460px;
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--c-teal);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-sm); font-weight: 600;
  animation: toast-in 200ms ease-out;
}
.toast .ic { font-size: 20px; color: var(--c-teal-ink); margin-top: 1px; }
.toast__body { flex: 1; min-width: 0; }
.toast__sub  { display: block; font-weight: 400; color: var(--ink-muted); margin-top: var(--s-1); overflow-wrap: anywhere; }
.toast__close {
  flex: none; width: 28px; height: 28px; margin-block-start: -2px; margin-inline-end: -6px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--ink-muted); cursor: pointer; font-size: 16px;
}
.toast__close .ic { color: currentColor; font-size: 16px; }
.toast__close:hover { background: var(--bg); }
.toast.is-out { animation: toast-out 180ms ease-in forwards; }

.toast--warn   { border-inline-start-color: var(--c-orange); }
.toast--warn .ic   { color: var(--c-orange-ink); }
.toast--danger { border-inline-start-color: var(--c-danger); }
.toast--danger .ic { color: var(--c-danger); }

/* the loud one a child cannot miss: solid teal, dark ink, 9.4:1 */
.toast--spot {
  background: var(--c-teal); border-color: var(--c-teal);
  border-inline-start-color: var(--c-teal);
  font-size: var(--fs-body); font-weight: 700;
}
.toast--spot .ic { color: var(--ink); }
.toast--spot .toast__sub { color: rgba(26, 28, 26, 0.78); font-weight: 500; }
.toast--spot .toast__close { color: var(--ink); }
.toast--spot .toast__close:hover { background: rgba(26, 28, 26, 0.10); }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- connection bar */
.netbar {
  position: fixed; z-index: 70; inset-inline: 0; top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-2)) var(--s-4) var(--s-2);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--c-orange-soft); color: var(--c-orange-ink);
  border-bottom: 1px solid var(--c-orange);
  font-size: var(--fs-caption); font-weight: 600;
}
.netbar .ic { font-size: 16px; color: currentColor; }

/* ---------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: none; place-items: center;
  padding: var(--s-4);
  background: rgba(26, 28, 26, 0.5);
}
.modal.is-open { display: grid; }
.modal__box {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: var(--s-6);
  animation: modal-in 160ms ease-out;
}
.modal__box--sm { width: min(420px, 100%); }
.modal__head  { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-2); }
.modal__title { font-size: var(--fs-lead); font-weight: 700; flex: 1; }
.modal__desc  { font-size: var(--fs-caption); color: var(--ink-muted); margin-bottom: var(--s-4); }
.modal__foot  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--bg-sunk); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

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

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover:not(:disabled), .btn:active:not(:disabled) { transform: none; box-shadow: none; }
  .skeleton::after { display: none; }
}

/* Persistent, tappable recovery for recordings blocked by the browser. */
.playback-prompt {
  position: fixed; z-index: 120; top: calc(env(safe-area-inset-top, 0px) + var(--net-h, 0px) + 52px);
  inset-inline: var(--s-3); margin-inline: auto; max-width: 380px;
  padding: var(--s-4); box-shadow: var(--shadow-raised); overflow-wrap: anywhere;
}
.playback-prompt p { font-size: var(--fs-sm); }
.playback-prompt__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.playback-prompt__actions .btn { min-height: 44px; white-space: normal; }