/* White Room theme (loaded last). The look of the "system window" from the hunter ranks the site is built on:
   - primary blue for the shell, the active menu item and the main buttons; white reading panels for long questions;
   - gold (secondary) for rewards and moves forward: XP, ranks, Pro, starting a test; ember only for streaks and alerts;
   - every subject has its own colour (--subj), shown as the top edge and label of anything that belongs to it;
   - the one bold device: cut corners on the main buttons and the active menu item;
   - type: Chakra Petch for titles, numbers and buttons; Lexend (made for easy reading, with a plain zero that is never
     mistaken for the Greek phi or the empty-set sign) for reading. */

@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/chakra-500.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/chakra-600.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/chakra-700.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/lexend.woff2) format("woff2"); }

:root {
  --font: "Lexend", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --navy: #0a1238; --navy-deep: #060b26;
  --blue: #2f6bff; --blue-d: #1d4ed8; --sky: #7cc6ff;
  --gold: #ffb547; --gold-d: #d98a07; --gold-soft: #fff4dc;
  --ember: #ff6a3d; --ember-soft: #ffece4;
  --ink: #0f1a3d; --mute: #5a6788; --soft: #f1f5ff; --edge: #dbe4fb;
  --cut: 9px;
}
/* subject colours: anything with data-subject takes its colour */
[data-subject] { --subj: var(--blue); --subj-soft: #e8efff; }
[data-subject="maths"] { --subj: #3e63dd; --subj-soft: #e7ecfd; }
[data-subject="further-maths"] { --subj: #5b4bdb; --subj-soft: #ecebfc; }
[data-subject="additional-maths"] { --subj: #4c7dff; --subj-soft: #e8efff; }
[data-subject="physics"] { --subj: #8b5cf6; --subj-soft: #f1ebfe; }
[data-subject="chemistry"] { --subj: #e8791f; --subj-soft: #fdeedf; }
[data-subject="biology"] { --subj: #1f9d63; --subj-soft: #e2f5ec; }
[data-subject="human-biology"] { --subj: #d6457f; --subj-soft: #fbe6ef; }
[data-subject="computer-science"] { --subj: #0e9aab; --subj-soft: #ddf3f5; }
[data-subject="ict"] { --subj: #23948f; --subj-soft: #def2f1; }
[data-subject="geology"] { --subj: #a0623a; --subj-soft: #f5ebe3; }

/* ---------- type ---------- */
body { font: 16px/1.55 var(--font); background:
  radial-gradient(1000px 520px at 88% -10%, rgba(47, 107, 255, .30), transparent 62%),
  radial-gradient(700px 420px at -5% 105%, rgba(124, 198, 255, .12), transparent 60%),
  linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 70%); background-attachment: fixed; }
h1, h2, h3, h4, .section-title, .card-head h3, .page-head h1, .brand b, .btn, .tabs a, .qscore, .stat b, .price-big, .rank-info h2,
.hub-body b, .auth-card h1, .seg-btn, .rank-pos, .rank-name, .rank-xp, .tabs-pill button, .subtabs button, .id-row h2, .dq-card h2, .continue-body h3 { font-family: var(--display); }
h1, h2, h3, .page-head h1, .auth-card h1 { letter-spacing: .01em; }
.page-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.1; }
.page-head h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 10px; background: linear-gradient(90deg, var(--sky), var(--blue)); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.page-head .sub { color: #b8c7f2; font-size: 1rem; max-width: 70ch; margin-top: 10px; }
.section-title { font-size: 1.15rem; font-weight: 700; color: #fff; }
.card-head h3 { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
/* small labels: sentence case, coloured, no capitals */
.eyebrow, .facts dt, .table th, .tg { text-transform: none; letter-spacing: .01em; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: .82rem; color: var(--subj, var(--blue)); }
.eyebrow.light { color: var(--sky); }
.facts dt { font-size: .8rem; font-weight: 700; color: var(--mute); }
.muted { color: var(--mute); }

/* ---------- buttons: cut corners on the main ones ---------- */
.btn { font-weight: 600; font-size: .95rem; letter-spacing: .02em; border-radius: 10px; }
.btn.primary, .btn.gold { border: 0; border-radius: 0; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: none; }
.btn.primary { color: #fff; background: linear-gradient(135deg, #5a8cff 0%, var(--blue) 45%, var(--blue-d) 100%); filter: drop-shadow(0 6px 12px rgba(47, 107, 255, .35)); }
.btn.primary:hover { background: linear-gradient(135deg, #6c99ff 0%, #3d78ff 45%, var(--blue) 100%); }
.btn.gold { color: #2a1a00; background: linear-gradient(135deg, #ffd27a 0%, var(--gold) 50%, var(--gold-d) 100%); filter: drop-shadow(0 6px 12px rgba(217, 138, 7, .3)); }
.btn.gold:hover { background: linear-gradient(135deg, #ffdc92 0%, #ffc15f 50%, var(--gold) 100%); }
.btn.ghost { background: #fff; color: var(--blue-d); border: 1.5px solid #c9d7fb; }
.btn.ghost:hover { background: var(--soft); border-color: var(--blue); }
.btn.sm { --cut: 7px; font-size: .86rem; }
.btn.subj-chip { color: var(--subj); border-color: var(--subj); background: var(--subj-soft); }
.link, .switch a, .crumb a { color: var(--blue); }
.page .crumb a, .main .crumb a { color: var(--sky); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---------- labels and badges ---------- */
.pill { font-family: var(--display); font-weight: 600; background: var(--subj-soft, #e8efff); color: var(--subj, var(--blue-d)); }
.tag { font-family: var(--display); font-weight: 600; font-size: .72rem; }
.hub-badge { font-family: var(--display); background: #e8efff; color: var(--blue-d); }
.hub-badge.pro, .pro-badge { color: #2a1a00; background: linear-gradient(135deg, #ffd27a, var(--gold)); }

/* ---------- cards: subject cards carry their colour on the top edge ---------- */
.card { border: 0; border-radius: 14px; box-shadow: 0 14px 34px rgba(3, 8, 36, .38); }
.card[data-subject], .gce-row[data-subject], .rec-row[data-subject], .place-row[data-subject], .modal[data-subject] { border-top: 4px solid var(--subj); }
.card[data-subject] h2, .card[data-subject] .card-head h3 { color: var(--ink); }
.dq-card h2, .dr-start h2 { color: var(--subj, var(--ink)); }

/* ---------- sidebar ---------- */
.sidebar { background: linear-gradient(180deg, #0d1748 0%, #08102f 100%); border-right: 1px solid rgba(124, 198, 255, .14); }
.tabs a { font-weight: 500; letter-spacing: .02em; color: #a9b7de; border-radius: 10px; }
.tabs a .i { color: #7f92c8; }
.tabs a:hover { color: #fff; background: rgba(124, 198, 255, .08); }
.tabs a[aria-current="page"] { color: #fff; border-radius: 0; background: linear-gradient(135deg, #4c82ff, var(--blue-d)); box-shadow: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tabs a[aria-current="page"] .i { color: #fff; }
.tabs a.parent-on { color: #fff; background: rgba(47, 107, 255, .16); box-shadow: inset 3px 0 0 var(--sky); }
.tabs .subnav { border-left-color: rgba(124, 198, 255, .2); }
.tabs a.nav-cta { color: var(--gold); border: 1px solid rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .06); }
.tabs a.nav-cta .i { color: var(--gold); }
.tabs a.nav-cta:hover { background: rgba(255, 181, 71, .14); }
.tabs a.nav-cta[aria-current="page"] { color: #2a1a00; background: linear-gradient(135deg, #ffd27a, var(--gold)); border-color: transparent; }
.tabs a.nav-cta[aria-current="page"] .i { color: #2a1a00; }
.mobilebar { background: rgba(10, 18, 56, .94); }

/* ---------- hub pages: each card has its own colour ---------- */
.hub-card { border-radius: 14px; border-top: 4px solid var(--tone, var(--blue)); }
.hub-card:hover, .hub-card:focus-visible { border-color: var(--tone, var(--blue)); border-top-color: var(--tone, var(--blue)); }
.hub-icon { background: var(--tone, var(--blue)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; }
.hub-body b { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.hub-card[data-tone="blue"] { --tone: var(--blue); } .hub-card[data-tone="ember"] { --tone: var(--ember); } .hub-card[data-tone="gold"] { --tone: #f0a020; }
.hub-card[data-tone="violet"] { --tone: #8b5cf6; } .hub-card[data-tone="green"] { --tone: #1f9d63; } .hub-card[data-tone="sky"] { --tone: #2a9fe0; }
.hub-card[data-tone="teal"] { --tone: #0e9aab; } .hub-card[data-tone="rose"] { --tone: #d6457f; } .hub-card[data-tone="indigo"] { --tone: #5b4bdb; }

/* ---------- dashboard numbers ---------- */
.stat b { font-weight: 700; font-size: 1.9rem; }
.stats .stat:nth-child(1) b { color: var(--ember); } .stats .stat:nth-child(2) b { color: var(--gold-d); } .stats .stat:nth-child(3) b { color: #7c5cff; }
.rank-info h2 { font-weight: 700; }
.xp-line b, .act strong, .rank-xp { color: var(--gold-d); }
.continue-body h3 { font-weight: 700; font-size: 1.4rem; }

/* ---------- tables, forms ---------- */
.table th { font-family: var(--display); font-weight: 600; font-size: .82rem; color: #3b4a72; background: #eef3ff; }
.input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(124, 198, 255, .35); }
.seg { background: #e6edff; }
.seg-btn.on { background: linear-gradient(135deg, #4c82ff, var(--blue-d)); }
.auth-panel { background: linear-gradient(160deg, #f6f9ff 0%, #e9f0ff 100%); }

/* ---------- GCE Papers and records: the subject leads ---------- */
.gce-row { border-radius: 12px; }
.gce-meta b { color: var(--subj, var(--blue-d)); font-family: var(--display); font-weight: 700; }
.gce-row:hover, .gce-row:focus-visible { border-color: var(--subj, var(--blue)); border-top-color: var(--subj, var(--blue)); }
.rec-row[data-subject] .rec-main b { color: var(--ink); }
.place-row[data-subject] { padding-left: 12px; border-radius: 10px; }
.place-row[data-subject] b { color: var(--subj); font-family: var(--display); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- the staff room sign-in (/staff) ---------- */
.auth-staff { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(255, 181, 71, .14), transparent 60%), linear-gradient(180deg, var(--navy), var(--navy-deep)); }
.staff-card { width: min(100%, 420px); background: #fff; color: var(--ink); border-radius: 16px; padding: 30px 28px; border-top: 4px solid var(--gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.staff-card .brand { color: var(--ink); margin-bottom: 18px; } .staff-card .brand small { color: var(--gold-d); }
.staff-card h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; }
.staff-card .form { margin-top: 20px; }
.staff-link { margin-top: 8px; text-align: center; font-size: .82rem; }
.staff-link a { color: var(--mute); text-decoration: underline; }

/* ---------- phone verification (sign-up, password reset, Profile) ---------- */
.phone-box { display: grid; gap: 8px; }
.phone-row { display: flex; align-items: center; gap: 8px; }
.phone-row input { flex: 1; min-width: 0; }
.phone-cc { font-family: var(--display); color: var(--mute); font-size: .92rem; }
.phone-send { white-space: nowrap; }
.phone-code { display: flex; gap: 8px; }
.phone-code input { flex: 1; min-width: 0; letter-spacing: .3em; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; }
.phone-done { color: #1f9d5c; font-weight: 600; margin: 0; }
.phone-done .linkish { border: 0; background: none; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }
.reset-card { max-width: 440px; }

.pay-deal { margin: 4px 0 10px; font-weight: 700; color: var(--gold-d, #d98a07); }

/* "No code? Continue without it": a plain link, under the phone field */
.phone-skip { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; color: var(--blue-d, #1d4ed8); text-decoration: underline; cursor: pointer; min-height: 36px; }
.phone-skip:focus-visible { outline: 3px solid var(--blue, #2f6bff); outline-offset: 2px; border-radius: 4px; }
.phone-skipnote { margin: 0; }