/* Hebron portals + login/sign-up pages: same palette, logo, fonts and light/dark behaviour as the public site.
   Loaded BEFORE each page's own <style>, so it supplies the colour variables those pages use. */

:root {
  /* brand palette (identical to css/styles.css) */
  --blue-950:#101D45; --blue-900:#172A62; --blue-700:#2457A6; --blue-500:#4B82D8;
  --pink-600:#D96B9A; --pink-500:#E889B0; --pink-400:#F3B6CD;

  /* local fonts only: nothing is downloaded */
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* names the portal pages already use, mapped onto the brand palette */
  --green-900:var(--blue-950); --green-700:var(--blue-900); --green-600:var(--blue-700); --green-500:var(--blue-500);
  --gold-500:var(--pink-500); --gold-600:var(--pink-600);
  --cream-50:#F8F5EE; --cream-100:#F0EBDF; --cream-200:rgba(27,23,48,.12);
  --ink-900:#1B1730; --ink-700:#4A4560; --sage-100:#E6EEFA;
  --red-500:#B8402F; --red-600:#9A3425;

  --bg:#F8F5EE; --bg-panel:#FFFFFF; --bg-input:#FFFFFF;
  --bg-sidebar:var(--blue-950); --bg-sidebar-active:var(--blue-900);
  --border:rgba(27,23,48,.12); --border-strong:rgba(27,23,48,.22);
  --text:#1B1730; --text-soft:#4A4560;
  --text-on-dark:#F2EFE6; --text-on-dark-soft:rgba(239,237,249,.72);
  --accent:var(--pink-500); --accent-ink:var(--blue-950);
  --danger:var(--red-500); --correct:#1F7A57;
  --shadow:0 18px 40px -22px rgba(21,15,56,.35);
  --radius-lg:28px; --radius-md:16px; --radius-sm:10px;
  color-scheme:light;
}
[data-theme="dark"], :root[data-theme="dark"] {
  --bg:#141128; --bg-panel:#211C3E; --bg-input:#1A1633;
  --bg-sidebar:#0D0A1F; --bg-sidebar-active:#1B1638;
  --border:rgba(241,238,228,.14); --border-strong:rgba(241,238,228,.24);
  --text:#F2EFE6; --text-soft:#C7C2DC;
  --text-on-dark:#F2EFE6; --text-on-dark-soft:rgba(224,220,240,.72);
  --sage-100:rgba(75,130,216,.18); --cream-100:rgba(255,255,255,.06);
  --red-500:#E58476; --correct:#70C49A;
  --shadow:0 18px 40px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  transition:background .4s cubic-bezier(.22,.68,0,1), color .4s cubic-bezier(.22,.68,0,1); }
h1, h2, h3, h4, .display { font-family:var(--font-display); }
:focus-visible { outline:3px solid var(--pink-500); outline-offset:2px; }

/* ---- buttons: same pill + pink as the public site ---- */
.btn { border-radius:999px; font-weight:600; font-family:var(--font-body); }
.btn-primary, .btn-gold { background:var(--pink-500); color:var(--blue-950); box-shadow:0 12px 24px -16px var(--pink-600); }
.btn-primary:hover, .btn-gold:hover { background:var(--pink-400); }
.btn-ghost { border-color:var(--border-strong); color:var(--text); }
.btn-ghost:hover { background:var(--sage-100); }
[data-theme="dark"] .stat .n { color:var(--blue-500) !important; }
.stat .n { color:var(--blue-700); font-family:var(--font-display); }

/* ---- inputs ---- */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=number], textarea, select {
  background:var(--bg-input); color:var(--text); border:1px solid var(--border-strong); font-family:inherit;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(75,130,216,.2); }

/* ---- logo in the portal sidebar (same shield as the public site, no initials circle) ---- */
.brand-mark { width:auto !important; height:auto !important; background:none !important; border:0 !important; border-radius:0 !important; display:block !important; }
.brand-mark img { height:58px; width:auto; display:block; margin:-6px -4px; }
.brand .brand-text .school { font-family:var(--font-display); font-size:15px; letter-spacing:-.01em; }

/* ---- the same pill dark-mode switch as the public site ---- */
.theme-toggle {
  width:52px !important; height:30px !important; border-radius:999px !important; border:1px solid var(--border-strong) !important;
  background:var(--bg-panel) !important; position:relative; cursor:pointer; padding:0 !important; font-size:0 !important; flex-shrink:0;
  display:block !important; color:inherit;
}
.theme-toggle::after {
  content:'☀️'; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--pink-500); display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
  transition:transform .3s cubic-bezier(.22,.68,0,1), background .3s;
}
[data-theme="dark"] .theme-toggle::after { content:'🌙'; transform:translateX(22px); background:var(--blue-700); }

/* ---- login / sign-up pages ----
   The page itself scrolls normally (no overflow lock, no fixed layers), so tall forms, small phones,
   landscape mode, browser zoom and on-screen keyboards all keep working. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.auth-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; margin:0;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 12% 8%, rgba(232,137,176,.16), transparent 30%), radial-gradient(circle at 90% 92%, rgba(75,130,216,.15), transparent 36%);
  background-repeat:no-repeat; background-size:100% 100%;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
.auth-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px clamp(12px,4vw,22px); width:100%; }
.auth-top .brand { display:flex; align-items:center; gap:.65em; min-width:0; flex:1 1 auto; color:inherit; text-decoration:none; }
.auth-top .brand img { height:clamp(38px,11vw,52px); width:auto; flex-shrink:0; }
.auth-top .brand-text { display:flex; flex-direction:column; line-height:1.2; font-family:var(--font-display); min-width:0; }
.auth-top .brand-text strong { font-size:clamp(.92rem,3.6vw,1.05rem); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth-top .brand-text small { font-family:var(--font-body); font-size:clamp(.64rem,2.6vw,.72rem); font-weight:600; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth-top-actions { display:flex; align-items:center; gap:clamp(8px,2.5vw,14px); flex-shrink:0; }
.auth-top-actions a.back { font-size:13.5px; font-weight:600; color:var(--blue-700); text-decoration:none; white-space:nowrap; }
.auth-top-actions a.back .short { display:none; }
[data-theme="dark"] .auth-top-actions a.back { color:var(--pink-400); }
@media (max-width:560px){
  .auth-top-actions a.back .long { display:none; }
  .auth-top-actions a.back .short { display:inline; }
}
@media (max-width:480px){ .auth-top .brand-text small { white-space:normal; } }
@media (max-width:340px){
  .auth-top .brand-text small { display:none; }
}
.auth-main { flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:12px clamp(12px,4vw,18px) 40px; width:100%; }
.auth-card { width:100%; max-width:440px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:34px 30px 28px; position:relative; overflow:hidden; margin:0 auto; }
.auth-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--pink-500),var(--blue-500),var(--blue-700)); }
.auth-card h1 { font-size:clamp(1.35rem,6vw,1.65rem); margin:6px 0 4px; letter-spacing:-.01em; text-align:center; color:var(--text); overflow-wrap:anywhere; }
.auth-card .sub { font-size:14px; color:var(--text-soft); text-align:center; margin:0 0 22px; overflow-wrap:anywhere; }
.auth-logo { display:block; height:clamp(72px,22vw,104px); width:auto; max-width:100%; margin:-8px auto -2px; }
.auth-card label { display:block; font-size:12.5px; font-weight:600; color:var(--text-soft); margin:0 0 5px; text-align:left; }
.auth-card input, .auth-card select { width:100%; max-width:100%; display:block; padding:11px 13px; font-size:15px; border-radius:12px; margin-bottom:14px; min-width:0; }
.auth-card .row2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
@media (max-width:480px){
  .auth-card .row2 { grid-template-columns:minmax(0,1fr); gap:0; }
  .auth-card { padding:26px 18px 22px; border-radius:22px; }
  .auth-card input, .auth-card select { font-size:16px; } /* stops iOS zooming the page when a field is focused */
}
@media (max-height:520px) and (orientation:landscape){
  .auth-main { align-items:flex-start; }
  .auth-logo { height:56px; }
}
.auth-card .btn { width:100%; justify-content:center; padding:.85em 1.4em; font-size:.98rem; border:0; cursor:pointer; }
.auth-card .btn[disabled] { opacity:.6; cursor:wait; }
.auth-card .msg { font-size:13px; border-radius:12px; padding:10px 13px; margin:2px 0 14px; display:none; text-align:left; line-height:1.45; overflow-wrap:anywhere; }
.auth-card .msg.show { display:block; }
.auth-card .msg.err { background:rgba(184,64,47,.1); color:var(--red-500); border:1px solid rgba(184,64,47,.25); }
.auth-card .switch { margin-top:18px; font-size:13.5px; color:var(--text-soft); text-align:center; }
.auth-card .switch a { color:var(--blue-700); font-weight:600; text-decoration:none; }
[data-theme="dark"] .auth-card .switch a { color:var(--pink-400); }
.auth-card .switch a:hover { text-decoration:underline; }
.auth-card .hint { font-size:12px; color:var(--text-soft); margin:-8px 0 14px; text-align:left; }

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

/* ---- show / hide password ---- */
.pw-wrap { position:relative; display:block; width:100%; }
.pw-wrap input { padding-right:46px !important; }
.pw-toggle { position:absolute; top:0; right:0; height:100%; min-height:40px; width:44px; border:0; background:transparent; color:var(--text-soft);
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:0 12px 12px 0; padding:0; }
.pw-toggle:hover { color:var(--blue-700); }
[data-theme="dark"] .pw-toggle:hover { color:var(--pink-400); }
.auth-card .pw-wrap { margin-bottom:14px; }
.auth-card .pw-wrap input { margin-bottom:0; }
.auth-card .forgot { display:block; text-align:right; margin:-6px 0 14px; font-size:13px; }
.auth-card .forgot a { color:var(--blue-700); font-weight:600; text-decoration:none; }
[data-theme="dark"] .auth-card .forgot a { color:var(--pink-400); }
.auth-card .forgot a:hover { text-decoration:underline; }
.auth-card .msg.ok { background:rgba(31,122,87,.1); color:var(--correct); border:1px solid rgba(31,122,87,.25); }
.auth-card .code-box { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:20px; letter-spacing:.12em; text-align:center; font-weight:700;
  background:var(--sage-100); border:1px dashed var(--border-strong); border-radius:12px; padding:14px 10px; margin:0 0 12px; user-select:all; word-break:break-all; }
.auth-card .btn-ghost { background:transparent; border:1px solid var(--border-strong); }
.auth-card .btn + .btn { margin-top:10px; }
.auth-card.wide { max-width:520px; }

/* ---- images attached to CBT / assignment questions ---- */
.q-img { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:2px 0 12px; }
.q-img-pick { cursor:pointer; display:inline-flex; align-items:center; }
.q-img-hint { font-size:12px; color:var(--text-soft); }
.q-img-prev { width:100%; display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.q-img-prev img { max-width:240px; max-height:180px; width:auto; height:auto; border-radius:10px; border:1px solid var(--border); object-fit:contain; background:var(--bg-panel); }
.qimg { display:block; max-width:100%; max-height:340px; width:auto; height:auto; border-radius:12px; border:1px solid var(--border); margin:8px 0 12px; object-fit:contain; background:var(--bg-panel); }