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

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400;1,9..40,500&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) ──
   Phase 1 palette rewrite (2026-09-13): Signature Orange +
   Warm Cream + Deep Navy + Soft Black + Cool Gray. Emerald Green
   swap for Multi Level lives in the exam-scoped block below.
   Semantic tokens (success/error) stay independent of brand. */
[data-theme="light"] {
  /* Brand — Signature Orange as neutral default. */
  --brand-primary:       #FF7A00;
  --brand-primary-hover: #E56E00;
  --brand-primary-rgb:   255, 122, 0;
  --brand-secondary:     #0B1F33;    /* deep navy — used for
                                        secondary emphasis, e.g.
                                        headers, nav */
  --brand-accent:        #FF7A00;
  --brand-bg-dark:       #F7F4EE;    /* warm cream page bg */
  --brand-bg-card:       #FFFFFF;
  --brand-text-primary:  #17202A;    /* soft black */
  --brand-text-muted:    #5C6470;
  --brand-border:        #D9DEE3;    /* cool gray */
  --brand-success:       #059669;
  --brand-error:         #DC2626;

  --accent-light:  rgba(255, 122, 0, 0.12);
  --accent-border: rgba(255, 122, 0, 0.3);
  --success-rgb:   5, 150, 105;
  --error-rgb:     220, 38, 38;
  --primary-rgb:   255, 122, 0;
  --brand-accent-rgb: 255, 122, 0;

  --bg-2:        #EDE9E1;   /* one shade darker cream */
  --bg-3:        #E4DFD3;   /* two shades darker cream */
  --surface-2:   #FFFFFF;
  --border-2:    #D9DEE3;
  --text-2:      #5C6470;
  --shadow:      rgba(11, 31, 51, 0.08);   /* navy-tinted */
  --topbar-bg:   rgba(247, 244, 238, 0.96);
  --bottombar-bg:rgba(247, 244, 238, 0.96);
  --highlight-bg:rgba(255, 122, 0, 0.15);
  --highlight-border: #FF7A00;
}

/* ── DARK theme ──
   Phase 1 palette rewrite (2026-09-13): same Signature Orange
   primary, but slightly brighter for contrast on navy; Deep Navy
   as bg. Aurora/glass tokens updated to navy family. */
[data-theme="dark"] {
  --brand-primary:       #FF7A00;
  --brand-primary-hover: #FF9424;
  --brand-primary-rgb:   255, 122, 0;
  --brand-secondary:     #F7F4EE;    /* warm cream for
                                        secondary text in dark */
  --brand-accent:        #FF7A00;
  --brand-bg-dark:       #0B1F33;    /* deep navy page bg */
  --brand-bg-card:       #142B44;
  --brand-text-primary:  #F7F4EE;
  --brand-text-muted:    #B8BEC7;
  --brand-border:        rgba(217, 222, 227, 0.15);
  --brand-success:       #10B981;
  --brand-error:         #EF4444;

  --accent-light:  rgba(255, 122, 0, 0.15);
  --accent-border: rgba(255, 122, 0, 0.35);
  --success-rgb:   16, 185, 129;
  --error-rgb:     239, 68, 68;
  --primary-rgb:   255, 122, 0;
  --brand-accent-rgb: 255, 122, 0;

  --bg-2:        #142B44;
  --bg-3:        #1B3854;
  --surface-2:   #1B3854;
  --border-2:    rgba(217, 222, 227, 0.15);
  --text-2:      #B8BEC7;
  --shadow:      rgba(0, 0, 0, 0.4);
  --topbar-bg:   rgba(11, 31, 51, 0.7);
  --bottombar-bg:rgba(11, 31, 51, 0.7);
  --highlight-bg: rgba(255, 122, 0, 0.25);
  --highlight-border: #FF7A00;

  /* Deep Aurora background — navy gradients */
  --brand-bg-gradient-top:    #0A1A2A;
  --brand-bg-gradient-mid:    #142B44;
  --brand-bg-gradient-bottom: #0B1F33;
  --brand-mesh-violet: rgba(255, 122, 0, 0.06);    /* orange
                                                     glow */
  --brand-mesh-teal:   rgba(0, 148, 114, 0.06);    /* emerald
                                                     glow */
  --brand-mesh-warm:   rgba(247, 244, 238, 0.04);  /* cream
                                                     glow */

  /* Glass — navy tinted */
  --glass-bg:            rgba(20, 43, 68, 0.5);
  --glass-bg-elevated:   rgba(20, 43, 68, 0.7);
  --glass-border:        1px solid rgba(217, 222, 227, 0.15);
  --glass-border-strong: 1px solid rgba(217, 222, 227, 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 1 palette rewrite (2026-09-13): Signature Orange for
   IELTS (matches neutral default), Emerald Green for Multi Level.
   Every token below stays the same NAME as before so existing CSS
   consumers keep resolving; only values change. --brand-primary/-
   hover/-rgb are ALSO overridden per exam-type so buttons/links/
   highlights carry the exam's color, not just the narrow
   --accent-active family. */

/* IELTS — explicit even though it matches the neutral default,
   so a page setting data-exam="ielts" gets a stable resolution
   and can't accidentally inherit multi_level values from cascade
   order. */
[data-exam="ielts"] {
  --brand-primary:       #FF7A00;
  --brand-primary-hover: #E56E00;
  --brand-primary-rgb:   255, 122, 0;
  --accent-active:       var(--brand-primary);
  --accent-active-hover: var(--brand-primary-hover);
  --accent-active-rgb:   var(--brand-primary-rgb);
  --accent-active-light: #FFB366;
  --accent-light:        rgba(255, 122, 0, 0.12);
  --accent-border:       rgba(255, 122, 0, 0.3);
}
[data-theme="dark"][data-exam="ielts"] {
  --brand-primary-hover: #FF9424;
  --accent-active-light: #FFB366;
  --accent-light:        rgba(255, 122, 0, 0.15);
  --accent-border:       rgba(255, 122, 0, 0.35);
}

/* Multi Level — Emerald Green. */
[data-exam="multi_level"] {
  --brand-primary:       #009472;
  --brand-primary-hover: #007A5E;
  --brand-primary-rgb:   0, 148, 114;
  --accent-active:       var(--brand-primary);
  --accent-active-hover: var(--brand-primary-hover);
  --accent-active-rgb:   var(--brand-primary-rgb);
  --accent-active-light: #33B198;
  --accent-light:        rgba(0, 148, 114, 0.12);
  --accent-border:       rgba(0, 148, 114, 0.3);
}
[data-theme="dark"][data-exam="multi_level"] {
  --brand-primary-hover: #14B092;
  --accent-active-light: #33B198;
  --accent-light:        rgba(0, 148, 114, 0.18);
  --accent-border:       rgba(0, 148, 114, 0.4);
}

/* ── 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; }

/* ============================================================
   Phase P.2 — legal pages (offer / refund / contact) + site-wide
   EN/UZ footer toggle. Additive only — appended at end of file,
   no existing rule/variable touched.
   ============================================================ */

/* ── Language switch ──
   <html data-lang="uz"|"en"> is set pre-paint by an inline script in each
   page's <head> (shared/lang-toggle.js only handles the click after that).
   Whichever language doesn't match the current data-lang is hidden. */
[data-lang="uz"] [data-lang="en"],
[data-lang="en"] [data-lang="uz"] { display: none; }

/* ── Language toggle button — mirrors .theme-toggle exactly, sized for a
   2-letter label instead of an emoji glyph. ── */
.lang-toggle {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: 50px;
  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-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: var(--accent-border);
  color: var(--brand-primary);
}

/* ── Site footer ── */
.site-footer {
  border-top: 1px solid var(--brand-border);
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--brand-text-muted);
}
.site-footer a {
  color: var(--brand-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* ── Legal page content (offer / refund / contact) ── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  color: var(--brand-text-primary);
  line-height: 1.75;
  font-size: 15px;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  margin-bottom: 28px;
  color: var(--brand-text-primary);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--brand-text-primary);
}
.legal-page h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin-top: 22px;
  margin-bottom: 8px;
  color: var(--brand-text-primary);
}
.legal-page p { margin-bottom: 14px; }
.legal-page ul, .legal-page ol {
  padding-left: 24px;
  margin: 12px 0 16px;
}
.legal-page li { margin-bottom: 8px; }
.legal-page section { margin-bottom: 8px; }
/* Section-number bolding, e.g. "1.1." at the start of a clause */
.legal-page .clause-num { font-weight: 700; }
.legal-page a { color: var(--brand-primary); }