/* ===================================================================
   PTE 79+ Trainer — foundation: tokens, reset, typography, layout
   =================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Type scale (1.2 ratio, 16px base) */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.8125rem; /* 13 */
  --fs-base:  0.9375rem; /* 15 */
  --fs-md:    1rem;      /* 16 */
  --fs-lg:    1.125rem;  /* 18 */
  --fs-xl:    1.375rem;  /* 22 */
  --fs-2xl:   1.75rem;   /* 28 */
  --fs-3xl:   2.25rem;   /* 36 */
  --fs-4xl:   3rem;      /* 48 */

  /* Exam-passage type: deliberately larger + looser for reading tasks */
  --fs-exam:  1.0625rem;
  --lh-exam:  1.75;

  /* ASCENT type system: three voices, no overlap.
     Display (scores, headlines) · UI (prose, questions) · Mono (labels, telemetry). */
  --ff-disp: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ff-mono: "Martian Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* Motion */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 200ms cubic-bezier(.4,0,.2,1);
  --t-slow: 380ms cubic-bezier(.22,1,.36,1);

  /* Layout */
  --sidebar-w: 244px;
  --content-max: 1180px;
  --reading-max: 68ch;

  --z-sticky: 20;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 90;

  /* ---- The four PTE skills (ASCENT palette). ---- */
  --skill-speaking:  #9A8BFF;  /* coach violet  */
  --skill-writing:   #FFB454;  /* amber         */
  --skill-reading:   #C9FF4D;  /* acid          */
  --skill-listening: #4DE8FF;  /* signal cyan   */

  /* Score bands — acid = achievement, cyan = target, amber = mid, rose = fault */
  --band-superior:   #C9FF4D;  /* 79-90  → 20 points  */
  --band-proficient: #4DE8FF;  /* 65-78  → 10 points  */
  --band-competent:  #FFB454;  /* 50-64  → 0 points   */
  --band-weak:       #FF5C7A;  /* <50                 */

  /* signature chamfer size */
  --chamfer: 12px;
}

/* ---------- Dark theme (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg:          #04060A;   /* substrate */
  --bg-sunk:     #070B11;
  --surface:     #0A0F17;   /* panel */
  --surface-2:   #0E141E;
  --surface-3:   #1A2433;   /* raised */
  --hover:       #131B27;

  --border:      #1E2A3A;
  --border-soft: #141C27;
  --border-loud: #2A3A50;

  --text:        #E8EFF9;
  --text-2:      #8497AE;
  --text-3:      #53657C;
  --text-inv:    #04060A;

  --accent:      #C9FF4D;   /* acid — only ever means progress / primary action */
  --accent-hov:  #DDFF85;
  --accent-sunk: rgba(201,255,77,.12);
  --accent-text: #04060A;

  --ok:      #C9FF4D;  --ok-bg:      rgba(201,255,77,.10);
  --warn:    #FFB454;  --warn-bg:    rgba(255,180,84,.12);
  --danger:  #FF5C7A;  --danger-bg:  rgba(255,92,122,.12);
  --info:    #4DE8FF;  --info-bg:    rgba(77,232,255,.10);

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 24px rgba(0,0,0,.5);
  --shadow-3: 0 40px 90px rgba(0,0,0,.7);

  --grid-line: rgba(132,151,174,.10);
  --scrim: rgba(4,6,10,.78);

  /* ASCENT-layer atmospherics (theme-aware) */
  --nav:         #070B11;                 /* sidebar / nav chrome (design --ink-850) */
  --frame-mid:   #101825;                 /* dark seam inside the hairline frame */
  --accent-glow: rgba(201,255,77,.32);    /* acid bloom on primary surfaces      */
  --scan:        rgba(255,255,255,.012);   /* scanline tint on the substrate      */
  color-scheme: dark;
}

/* ---------- Light theme — the design system's own light palette ----------
   Values taken verbatim from ASCENT's html[data-theme=light] block, so the
   acid/cyan/violet/amber/rose signature is authoritative rather than derived.
   Acid-green remains the sole "progress / primary" colour. */
:root[data-theme="light"] {
  --bg:          #EDEFE9;   /* warm paper substrate (ink-900) */
  --bg-sunk:     #E4E7DE;   /* ink-700 */
  --surface:     #FFFFFF;   /* ink-850 / ink-800 */
  --surface-2:   #F5F7F1;   /* ink-750 */
  --surface-3:   #DCE0D5;   /* ink-600 */
  --hover:       #E4E7DE;

  --border:      #CFD5C7;   /* line */
  --border-soft: #E0E4D9;
  --border-loud: #98A290;   /* line-2 */

  --text:        #0E120C;   /* txt */
  --text-2:      #414A3D;   /* txt-2 */
  --text-3:      #616B5C;   /* txt-3 */
  --text-inv:    #FFFFFF;

  --accent:      #3F6B00;   /* acid — progress / primary action */
  --accent-hov:  #2F5200;   /* acid-hi */
  --accent-sunk: rgba(63,107,0,.10);
  --accent-text: #FFFFFF;

  --ok:      #3F6B00;  --ok-bg:      rgba(63,107,0,.10);
  --warn:    #8A5B00;  --warn-bg:    rgba(138,91,0,.10);
  --danger:  #C0264A;  --danger-bg:  rgba(192,38,74,.09);
  --info:    #00688F;  --info-bg:    rgba(0,104,143,.10);

  --shadow-1: 0 1px 2px rgba(20,28,16,.05);
  --shadow-2: 0 8px 22px rgba(63,107,0,.10);
  --shadow-3: 0 26px 60px rgba(20,28,16,.18);

  --grid-line: rgba(14,18,12,.045);
  --scrim: rgba(20,28,16,.5);

  --skill-speaking:  #5443C9;   /* coach violet  */
  --skill-writing:   #8A5B00;   /* amber         */
  --skill-reading:   #3F6B00;   /* acid          */
  --skill-listening: #00688F;   /* signal cyan   */

  --band-superior:   #3F6B00;
  --band-proficient: #00688F;
  --band-competent:  #8A5B00;
  --band-weak:       #C0264A;

  --nav:         #FFFFFF;                /* sidebar / nav chrome (design --ink-850) */
  --frame-mid:   #E9ECE4;                /* light seam inside the hairline frame */
  --accent-glow: rgba(63,107,0,.28);     /* acid bloom, light-tuned              */
  --scan:        rgba(14,18,12,.022);    /* faint ink scanline on paper          */
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.55 var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.011em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 var(--s-3); padding-left: 1.3em; }
li { margin-bottom: var(--s-1); }
li:last-child { margin-bottom: 0; }

img, svg, canvas { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  font-variant-numeric: inherit;
}
button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

code, kbd, samp, pre { font-family: var(--ff-mono); font-size: 0.92em; }

hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--s-6) 0;
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--accent); color: var(--accent-text); }

/* Focus: visible for keyboard, quiet for mouse */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-loud) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-loud);
  border-radius: var(--r-full);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ---------- Utilities ---------- */
.u-hide { display: none !important; }
.u-invisible { visibility: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.u-row     { display: flex; align-items: center; gap: var(--s-3); }
.u-row-t   { display: flex; align-items: flex-start; gap: var(--s-3); }
.u-col     { display: flex; flex-direction: column; gap: var(--s-3); }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.u-wrap    { flex-wrap: wrap; }
.u-grow    { flex: 1 1 auto; min-width: 0; }
.u-center  { display: flex; align-items: center; justify-content: center; }

.u-gap-1 { gap: var(--s-1); } .u-gap-2 { gap: var(--s-2); }
.u-gap-4 { gap: var(--s-4); } .u-gap-6 { gap: var(--s-6); }

.u-mt-2 { margin-top: var(--s-2); } .u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); } .u-mt-8 { margin-top: var(--s-8); }
.u-mb-2 { margin-bottom: var(--s-2); } .u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-6 { margin-bottom: var(--s-6); }

.u-t2 { color: var(--text-2); }
.u-t3 { color: var(--text-3); }
.u-sm { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }
.u-bold { font-weight: 650; }
.u-mono { font-family: var(--ff-mono); }
.u-nowrap { white-space: nowrap; }
.u-tabnum { font-variant-numeric: tabular-nums; }
.u-caps {
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.u-reading { max-width: var(--reading-max); }
.u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.u-ok     { color: var(--ok); }
.u-warn   { color: var(--warn); }
.u-danger { color: var(--danger); }
.u-info   { color: var(--info); }

/* ---------- App skeleton ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-6) var(--s-8) var(--s-16);
  animation: viewIn var(--t-slow) both;
}
.view--wide { max-width: 1400px; }
.view--narrow { max-width: 860px; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.view-head__title { display: flex; flex-direction: column; gap: var(--s-1); }
.view-head__sub { color: var(--text-2); font-size: var(--fs-base); max-width: 62ch; }

/* Section heading with a hairline rule that fills remaining space */
.section-head {
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-4);
}
.section-head:first-child { margin-top: 0; }
.section-head::after {
  content: ""; flex: 1; height: 1px; background: var(--border-soft);
}
.section-head > h3 { flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  :root { --sidebar-w: 68px; }
  .view { padding: var(--s-5) var(--s-5) var(--s-16); }
}
@media (max-width: 720px) {
  :root { --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; }
  .app { grid-template-columns: 1fr; }
  .view { padding: var(--s-4) var(--s-4) var(--s-16); }
}

@media print {
  .sidebar, .no-print { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}