/* ============================================================
   MockPoint — shared.css
   Global variables, typography, theme, cursor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Theme variables ──
   Rebrand Day 1 (2026-08-01): the 11 --brand-* tokens carry distinct
   light/dark values (per Olloyor), so they live in the per-theme blocks
   below, not :root — :root keeps only genuinely theme-independent tokens.
   --accent-light/--accent-border are NOT in the 11-token list; kept as
   auxiliary derived-opacity variants (unchanged names), re-derived from
   the new --brand-primary RGB so selected/hover tints stay consistent. */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  --topbar-h:   56px;
  --bottombar-h: 68px;

  /* ── Breakpoints (Phase 6.1.B, 2026-08-26) ──
     Project-wide standard going forward, replacing the ad-hoc mix found
     across the codebase (900/700/768/640/480px, some pages with none).
     Enforced by convention + review, not tooling.

     IMPORTANT — these are reference values only, NOT usable inside an
     @media condition. CSS custom properties cannot be read inside an
     @media feature query in any browser (media queries are evaluated
     independent of the cascade that resolves custom properties) —
     `@media (max-width: var(--bp-tablet))` is invalid and silently
     matches nothing. Every actual @media block in this codebase must
     use the literal pixel number below, kept in sync with these by
     convention. Fine to reference these vars anywhere else (widths,
     JS via getComputedStyle, etc.) — just never inside @media (). */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
}

/* ── Container width strategy (Phase 6.1.B, documented not yet applied) ──
   Pattern for NEW mobile-friendly containers going forward. Existing
   hardcoded containers (results.html's 860px .page-inner, review pages'
   900px min-widths, etc.) are NOT refactored in this phase — Sub-phases
   C-F fix those per page. This is the target shape for anything new:

     .container { max-width: 1024px; margin: 0 auto; padding: 0 24px; }

   then, at the 768px mobile breakpoint (--bp-tablet's literal value,
   same var()-in-@media caveat as above):

     .container { padding: 0 16px; max-width: 100%; }

   Desktop and tablet share the same 1024px cap (natural collapse as the
   viewport narrows toward 768px); only the padding and the explicit
   100% cap change at the mobile breakpoint. */

/* ── LIGHT theme (default) ──
   Neutrals inverted per Olloyor's Day 1-followup spec (2026-08-01):
   page bg is now the tinted surface, cards are white-on-tint (was the
   opposite in the first Day 1 pass). Border/text updated to keep a
   consistent purple hue through the neutral scale rather than true gray. */
[data-theme="light"] {
  --brand-primary:       #6D28D9;
  --brand-primary-hover: #5B21B6;
  --brand-primary-rgb:   109,40,217;
  --brand-secondary:     #0891B2;
  --brand-accent:        #D97706;
  --brand-bg-dark:       #EDE9FE;
  --brand-bg-card:       #FFFFFF;
  --brand-text-primary:  #1F1035;
  --brand-text-muted:    #7C3AED;
  --brand-border:        rgba(109, 40, 217, 0.12);
  --brand-success:       #059669;
  --brand-error:         #DC2626;

  --accent-light:  rgba(109, 40, 217, 0.12);
  --accent-border: rgba(109, 40, 217, 0.3);
  --success-rgb:   5, 150, 105;
  --error-rgb:     220, 38, 38;
  --primary-rgb:   109, 40, 217;
  --brand-accent-rgb: 217, 119, 6;

  --bg-2:        #f5f5f5;
  --bg-3:        #ebebeb;
  --surface-2:   #f9f9f9;
  --border-2:    #cccccc;
  --text-2:      #5B21B6;
  --shadow:      rgba(0,0,0,0.08);
  --topbar-bg:   rgba(255,255,255,0.96);
  --bottombar-bg:rgba(255,255,255,0.96);
  --highlight-bg:#ede4ff;
  --highlight-border: #6D28D9;
}

/* ── DARK theme ── */
[data-theme="dark"] {
  --brand-primary:       #7C3AED;
  --brand-primary-hover: #6D28D9;
  --brand-primary-rgb:   124,58,237;
  --brand-secondary:     #06B6D4;
  --brand-accent:        #F59E0B;
  --brand-bg-dark:       #0F0A1E;
  --brand-bg-card:       #1A1032;
  --brand-text-primary:  #F5F3FF;
  --brand-text-muted:    #A78BFA;
  --brand-border:        #372163;
  --brand-success:       #10B981;
  --brand-error:         #EF4444;

  --accent-light:  rgba(124, 58, 237, 0.12);
  --accent-border: rgba(124, 58, 237, 0.3);
  --success-rgb:   16, 185, 129;
  --error-rgb:     239, 68, 68;
  --primary-rgb:   124, 58, 237;
  --brand-accent-rgb: 245, 158, 11;

  --bg-2:        #141414;
  --bg-3:        #1e1e1e;
  --surface-2:   #252525;
  --border-2:    rgba(245,242,236,0.15);
  --text-2:      #c8c4be;
  --shadow:      rgba(0,0,0,0.4);
  --topbar-bg:   rgba(15, 10, 30, 0.7);
  --bottombar-bg:rgba(15, 10, 30, 0.7);
  --highlight-bg: rgba(124,58,237,0.25);
  --highlight-border: #7C3AED;

  /* Deep Aurora background system (dark mode only) */
  --brand-bg-gradient-top:    #0A0716;
  --brand-bg-gradient-mid:    #1A0F2E;
  --brand-bg-gradient-bottom: #0F0A1E;
  --brand-mesh-violet: rgba(124, 58, 237, 0.08);
  --brand-mesh-teal:   rgba(6, 182, 212, 0.06);
  --brand-mesh-warm:   rgba(245, 158, 11, 0.05);

  /* Glass surface system (dark mode only) */
  --glass-bg:            rgba(26, 16, 50, 0.5);
  --glass-bg-elevated:   rgba(26, 16, 50, 0.7);
  --glass-border:        1px solid rgba(167, 139, 250, 0.15);
  --glass-border-strong: 1px solid rgba(167, 139, 250, 0.25);
  --glass-blur:          blur(12px);
  --glass-blur-strong:   blur(16px);
  --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Exam-type accent (Phase 3, consolidated here in 4B) ──
   --accent-active/-hover/-light/-rgb (interactive accent) and
   --accent-light/--accent-border (low-opacity tint variants — same family
   as the theme-level tokens of the same name above, just made exam-type
   aware) resolve differently per data-exam, set on <html> pre-paint.
   Previously duplicated separately inside index.html and tests.html
   (Phase 3B) — consolidated here since Reading/Writing/Results (4C+) and
   the Listening sub-group labels (4B) need them too.

   Base rules use the DARK-theme numbers — correct as-is for any page that
   never sets data-theme at all (tests.html, dark-only by design). The
   [data-theme="light"] compounded rules layer on top with higher
   specificity, overriding to the light-theme numbers wherever
   data-theme="light" is ALSO present (index.html, listening.html, future
   4C+ pages). IELTS's --accent-active/-hover/-rgb alias --brand-primary's
   own per-theme variables via var(), so those three already track theme
   with no compounding needed; the rest are literals and do need the split. */
[data-exam="ielts"] {
  --accent-active:       var(--brand-primary);
  --accent-active-hover: var(--brand-primary-hover);
  --accent-active-rgb:   var(--brand-primary-rgb);
  --accent-active-light: #8B5CF6;
  --accent-light:        rgba(124,58,237,0.12);
  --accent-border:       rgba(124,58,237,0.3);
}
[data-theme="light"][data-exam="ielts"] {
  --accent-light:  rgba(109,40,217,0.12);
  --accent-border: rgba(109,40,217,0.3);
}
[data-exam="multi_level"] {
  --accent-active:       #14B8A6;
  --accent-active-hover: #0D9488;
  --accent-active-rgb:   20,184,166;
  --accent-active-light: #2DD4BF;
  --accent-light:        rgba(20,184,166,0.12);
  --accent-border:       rgba(20,184,166,0.3);
}
[data-theme="light"][data-exam="multi_level"] {
  --accent-active:       #0D9488;
  --accent-active-hover: #0F766E;
  --accent-active-rgb:   13,148,136;
  --accent-active-light: #2DD4BF;
  --accent-light:        rgba(13,148,136,0.12);
  --accent-border:       rgba(13,148,136,0.3);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  background:  var(--brand-bg-dark);
  color:       var(--brand-text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size:   16px;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
  isolation: isolate;
}

/* Deep Aurora background — dark mode only, light mode keeps the flat --brand-bg-dark above */
[data-theme="dark"] body {
  background: linear-gradient(180deg, var(--brand-bg-gradient-top) 0%, var(--brand-bg-gradient-mid) 50%, var(--brand-bg-gradient-bottom) 100%);
  min-height: 100vh;
  position: relative;
}

[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 15% 20%, var(--brand-mesh-violet), transparent 50%),
    radial-gradient(ellipse 600px 400px at 85% 80%, var(--brand-mesh-teal), transparent 50%),
    radial-gradient(ellipse 400px 300px at 50% 50%, var(--brand-mesh-warm), transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Glass surface utility — dark mode only. Scoped under [data-theme="dark"]
   (rather than a bare .glass-surface rule) since --glass-* tokens are only
   defined for dark; a bare rule would resolve to unset/transparent in
   light mode and visually break any element the class is applied to. */
[data-theme="dark"] .glass-surface {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}

[data-theme="dark"] .glass-surface--elevated {
  background: var(--glass-bg-elevated);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-strong);
}

/* ── Cursor — default system cursor ── */
body { cursor: default; }

/* Pointer on all interactive elements */
a, button, select,
.mcq-item, .tfng-btn, .match-select,
.dd-option, .dd-drop, .dd-drop-clear,
.flow-option, .flow-drop, .flow-drop-clear,
.match-answer-cell, .bb-bubble, .bb-section-btn,
.theme-toggle, .lang-btn, .nav-cta,
.start-btn, .instr-btn, .modal-btn,
.writing-tab, .card-btn, .price-btn,
.faq-q, .footer-link, .tb-logo,
[onclick], [draggable="true"] {
  cursor: pointer !important;
}

/* Text cursor on inputs and textareas */
input[type="text"], input[type="password"],
input[type="email"], textarea {
  cursor: text !important;
}

/* Grab cursor on draggable items */
[draggable="true"] {
  cursor: grab !important;
}
[draggable="true"]:active {
  cursor: grabbing !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-text-muted); }
html { scrollbar-width: none; }
body { -ms-overflow-style: none; }

/* ── Highlight ── */
.mb-highlight {
  background: var(--highlight-bg);
  border-bottom: 2px solid var(--highlight-border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

#mb-highlight-btn {
  position: fixed;
  display: none;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  z-index: 9000;
  box-shadow: 0 4px 16px var(--accent-border);
  transition: opacity 0.15s;
}
#mb-highlight-btn.visible { display: block; }

/* ── Theme toggle button ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-card);
  color: var(--brand-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent-border);
  color: var(--brand-primary);
}

/* ── Focus rings ──
   New addition (none existed before) — box-shadow ring at reduced opacity,
   not outline, so it doesn't affect layout/box model. Scoped to keyboard
   focus (:focus-visible) so it doesn't add a ring on every mouse click. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-border);
}

/* ============================================================
   Mobile foundation (Phase 6.1.B, 2026-08-26)
   Global, additive infrastructure only — no page-specific layout
   fixes live here. Sub-phases C-F handle per-page work on top of
   this. All @media conditions below use the literal 768px value
   documented as --bp-tablet in :root above (var() doesn't work
   inside @media conditions — see that comment for why).
   ============================================================ */

/* Prevents "whole page scrolls sideways on mobile" — the classic
   symptom of one overflowing element blowing out the viewport width.
   Global safety net; the actual overflow source (if one exists on a
   given page) still belongs in that page's own fix, this just stops
   it from taking the whole page down with it. */
body { overflow-x: hidden; }

/* Minimum comfortable tap target, Apple HIG's 44x44px, mobile only —
   desktop hover-precision pointers don't need this, and min-height/
   min-width (not height/width) means nothing already >=44px shrinks
   or gets distorted; a button only grows via its own padding if it's
   currently smaller. Selector list is two things at once: the site's
   ACTUAL small-touch-target offenders found in the 6.1.A audit
   (.bb-bubble — Reading/Listening's 32x32px question-number nav,
   named explicitly in that audit as needing this fix now, even though
   Reading/Listening's own per-page layout work is a later sub-phase)
   plus generic forward-looking hooks (.btn, .tab, .nav-bubble,
   [role="button"]) that match nothing in this codebase today but
   establish the intended convention for new markup. Confirmed via
   grep before writing this: neither .btn, .tab, .nav-bubble, nor
   [role="button"] exists anywhere in the codebase yet — only the bare
   `button` element selector and .bb-bubble have any real effect right
   now. .part-tab (speaking.html's own undersized tabs) deliberately
   left out here — speaking.html itself is Sub-phase D's scope, not
   6.1.B's; adding it would reach into a page this phase isn't meant
   to touch. `select` added beyond the original spec (2026-08-26) —
   custom-styled native selects (speaking_instructions.html's own
   .lang-select among others, site-wide) have the identical
   too-small-to-tap risk as a button and weren't otherwise covered;
   kept as a bare element selector rather than per-page classes for
   the same site-wide-consistency reasoning as `button` above. */
@media (max-width: 768px) {
  button, select, .btn, .tab, .nav-bubble, [role="button"], .bb-bubble {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 16px floor on mobile — below 16px, iOS Safari auto-zooms the
   viewport on input focus (a hardcoded browser behavior, not a CSS
   bug to work around any other way). body is already 16px site-wide
   (see the shared `body` rule above) so this line is a no-op for
   plain text; the real target is input/textarea/select, which do NOT
   inherit font-size from body by default in any browser's UA
   stylesheet, so a page setting them smaller for density would
   silently trigger the zoom without this override. */
@media (max-width: 768px) {
  body, input, textarea, select {
    font-size: 16px;
  }
}

/* ── Utility ── */
.hidden { display: none !important; }