/* =====================================================================
   LinguaFace — IELTS visual identity
   =====================================================================

   Written 2026-08-17. This file exists so IELTS can stop borrowing TOEFL's
   look: the listing page used to @include('assets/css/toeflcss') outright,
   which is why the two sections were indistinguishable.

   TOEFL is deliberately untouched. It keeps exam.css and layouts/exam.blade.php;
   IELTS gets this file and layouts/ielts.blade.php. Same fork already proven for
   the SAT interface.

   PALETTE SOURCE
   Scholarly navy + citation gold, from the UI-UX Pro Max colour data
   ("Academic Journal / Scholarly Publishing"). Chosen because the structure the
   client asked for -- dark header bar, centred amber countdown -- is exactly
   that pairing, and because it is unmistakably NOT:
       the SAT section   sage   #7c9473 / #3c4436
       the site primary  blue   #0051FD
       TOEFL's current palette

   Two values were derived rather than taken from the data, both for contrast:
     * the countdown is #F59E0B on navy (~5.9:1). The data's #B45309 on navy is
       ~2.2:1 and would be unreadable on the one element a candidate looks at
       most under time pressure.
     * the four skill accents are the -700 steps, so white text on a filled
       badge clears 4.5:1. The -500/-600 steps do not.

   EVERYTHING IS SCOPED UNDER .ielts-page
   The listing renders through layouts/app.blade.php, which TOEFL and the
   homepage also use. Unscoped rules here would restyle those pages too -- the
   exact mistake this file exists to undo.
   ===================================================================== */

.ielts-page {
  /* ---- brand ---- */
  --if-navy:          #1E3A5F;
  --if-navy-deep:     #162C48;
  --if-navy-soft:     #334155;
  --if-gold:          #B45309;
  --if-gold-bright:   #F59E0B;   /* on-navy text: countdown, active states */

  /* ---- surfaces ---- */
  --if-bg:            #F8FAFC;
  --if-card:          #FFFFFF;
  --if-fg:            #0F172A;
  --if-muted:         #E9EEF5;
  --if-muted-fg:      #475569;
  --if-border:        #CBD5E1;
  --if-danger:        #DC2626;
  --if-success:       #15803D;   /* -700 step: white text on a filled badge clears 4.5:1 */

  /* ---- the four skills ---- */
  --if-listening:     #0F766E;
  --if-reading:       #4338CA;
  --if-writing:       #BE123C;
  --if-speaking:      #6D28D9;

  /* ---- scale ---- */
  --if-r-sm: 8px;
  --if-r:    14px;
  --if-r-lg: 20px;
  --if-s-1:  8px;
  --if-s-2:  12px;
  --if-s-3:  16px;
  --if-s-4:  24px;
  --if-s-5:  32px;
  --if-s-6:  48px;
  --if-shadow:    0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06);
  --if-shadow-lg: 0 2px 4px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.10);

  background: var(--if-bg);
  color: var(--if-fg);
}

.ielts-page *,
.ielts-page *::before,
.ielts-page *::after { box-sizing: border-box; }

.ielts-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--if-s-3);
}

/* ---------------------------------------------------------------
   HERO
   Mobile first: single column, then a two-column split from 768px.
   --------------------------------------------------------------- */
.ielts-hero {
  background: linear-gradient(135deg, var(--if-navy) 0%, var(--if-navy-deep) 100%);
  color: #fff;
  border-radius: 0 0 var(--if-r-lg) var(--if-r-lg);
  padding: var(--if-s-5) 0 var(--if-s-6);
}
.ielts-hero-inner { display: grid; gap: var(--if-s-4); }
.ielts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--if-s-1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--if-gold-bright);
}
.ielts-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--if-gold-bright);
  display: inline-block;
}
.ielts-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}
.ielts-hero p {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #CBD5E1;
}
.ielts-hero-actions { display: flex; flex-wrap: wrap; gap: var(--if-s-2); }

/* ---- buttons ---- */
.ielts-btn {
  display: inline-flex;            /* .btn elsewhere sets padding but no display */
  align-items: center;
  justify-content: center;
  gap: var(--if-s-1);
  min-height: 44px;                /* touch target */
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ielts-btn-primary { background: var(--if-gold-bright); color: #1F1400; }
.ielts-btn-primary:hover,
.ielts-btn-primary:focus { background: #FBBF24; color: #1F1400; }
.ielts-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.ielts-btn-ghost:hover,
.ielts-btn-ghost:focus { background: rgba(255,255,255,.12); color: #fff; }
.ielts-btn:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }

/* ---------------------------------------------------------------
   SKILL STRIP — the four papers, each with its own accent
   --------------------------------------------------------------- */
.ielts-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--if-s-2);
  margin-top: calc(var(--if-s-5) * -1);
  margin-bottom: var(--if-s-5);
}
.ielts-skill {
  display: flex;
  align-items: center;
  gap: var(--if-s-2);
  padding: var(--if-s-3);
  background: var(--if-card);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r);
  box-shadow: var(--if-shadow);
  text-decoration: none;
  color: var(--if-fg);
}
.ielts-skill-badge {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--skill, var(--if-navy));
  color: #fff;
}
.ielts-skill-badge svg { width: 20px; height: 20px; }
.ielts-skill-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.ielts-skill-meta { font-size: .78rem; color: var(--if-muted-fg); }
.ielts-skill[data-skill="listening"] { --skill: var(--if-listening); }
.ielts-skill[data-skill="reading"]   { --skill: var(--if-reading); }
.ielts-skill[data-skill="writing"]   { --skill: var(--if-writing); }
.ielts-skill[data-skill="speaking"]  { --skill: var(--if-speaking); }

/* ---------------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------------- */
.ielts-section { margin-bottom: var(--if-s-6); }
.ielts-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--if-s-2);
  margin-bottom: var(--if-s-3);
}
.ielts-section-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--if-navy);
}
.ielts-section-head a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--if-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ielts-tip {
  display: flex;
  gap: var(--if-s-2);
  padding: var(--if-s-2) var(--if-s-3);
  margin-bottom: var(--if-s-3);
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-left: 4px solid var(--if-gold);
  border-radius: var(--if-r-sm);
  font-size: .875rem;
  color: #7C2D12;
}

/* ---------------------------------------------------------------
   TEST CARDS
   One per row on mobile, two from 640px, three from 1024px.
   --------------------------------------------------------------- */
.ielts-tests {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--if-s-3);
}
.ielts-test {
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  padding: var(--if-s-3);
  background: var(--if-card);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r);
  box-shadow: var(--if-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.ielts-test:hover,
.ielts-test:focus-visible {
  border-color: var(--if-navy);
  box-shadow: var(--if-shadow-lg);
  transform: translateY(-2px);
}
.ielts-test:focus-visible { outline: 3px solid var(--if-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ielts-test { transition: none; }
  .ielts-test:hover, .ielts-test:focus-visible { transform: none; }
}

/* The IELTS badges are 1408x768 cityscapes -- landscape, not square. A square
   thumbnail with object-fit:cover would centre-crop away ~45% of the width and
   take the recognisable half of the skyline with it, so the frame follows the
   artwork's own 11:6 instead. (The SAT set is 1024x1024 and would crop fine, but
   it does not use this stylesheet.) */
.ielts-test-badge {
  flex: 0 0 auto;
  width: 108px;
  aspect-ratio: 11 / 6;
  border-radius: var(--if-r-sm);
  overflow: hidden;
  background: var(--if-muted);
  border: 1px solid var(--if-border);
}
.ielts-test-badge img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ielts-test-body { min-width: 0; flex: 1 1 auto; }
.ielts-test-name {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--if-navy);
  overflow-wrap: anywhere;
}
.ielts-test-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--if-s-1) var(--if-s-2);
  font-size: .8rem;
  color: var(--if-muted-fg);
}
.ielts-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;          /* a wrapped pill looks broken */
}
.ielts-pill-free { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.ielts-pill-parts { background: var(--if-muted); color: var(--if-muted-fg); border: 1px solid var(--if-border); }
.ielts-test-go {
  flex: 0 0 auto;
  color: var(--if-navy);
  display: inline-flex;
}
.ielts-test-go svg { width: 22px; height: 22px; }

.ielts-empty {
  padding: var(--if-s-5);
  text-align: center;
  color: var(--if-muted-fg);
  background: var(--if-card);
  border: 1px dashed var(--if-border);
  border-radius: var(--if-r);
}

/* ---------------------------------------------------------------
   BREAKPOINTS — mobile first, so these only widen the layout
   --------------------------------------------------------------- */
@media (min-width: 640px) {
  .ielts-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ielts-skills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .ielts-shell { padding: 0 var(--if-s-4); }
  .ielts-hero { padding: var(--if-s-6) 0 calc(var(--if-s-6) + var(--if-s-4)); }
  .ielts-hero-inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
@media (min-width: 1024px) {
  .ielts-tests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Very narrow phones: keep the card readable rather than crushing the badge. */
@media (max-width: 380px) {
  .ielts-test { gap: var(--if-s-2); padding: var(--if-s-2); }
  .ielts-test-badge { width: 86px; }
  .ielts-test-name { font-size: .98rem; }
}

/* =====================================================================
   TEST SCREENS
   =====================================================================

   Everything below overrides exam.css, which layouts/ielts.blade.php loads
   first as a structural base. exam.css itself is never edited -- it is shared
   with TOEFL, and editing it is exactly what made the two products identical.

   Scope: every rule sits under .ielts-page, which layouts/ielts.blade.php puts
   on <body>. TOEFL's layout does not, so none of this can reach it. The prefix
   also raises specificity above exam.css's bare class selectors, which is what
   makes the override work without !important.
   ===================================================================== */

/* ---- the bar across the top of every test screen ---- */
.ielts-page .navbar {
  background: var(--if-navy);
  border-bottom: 1px solid var(--if-navy-deep);
  padding: 0 var(--if-s-3);
  min-height: 56px;
  display: flex;
  align-items: center;
  color: #fff;
}
.ielts-page .navbar a,
.ielts-page .navbar .x-of-y-question { color: #fff; }

/* Save & Exit, Next, Start, Submit */
.ielts-page .droplet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.ielts-page .droplet-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ielts-page .droplet-btn.info-next,
.ielts-page .droplet-btn.info-start,
.ielts-page .droplet-btn.submit {
  background: var(--if-gold-bright);
  border-color: var(--if-gold-bright);
  color: #1F1400;
}
.ielts-page .droplet-btn.info-next:hover,
.ielts-page .droplet-btn.info-start:hover,
.ielts-page .droplet-btn.submit:hover { background: #FBBF24; color: #1F1400; }
.ielts-page .droplet-btn.disabled,
.ielts-page .droplet-btn[disabled] { opacity: .45; pointer-events: none; }
.ielts-page .droplet-btn:focus-visible,
.ielts-page .squrelet-btn:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }

.ielts-page .x-of-y-question {
  font-size: .75rem;
  line-height: 1.25;
  text-align: center;
  color: #CBD5E1;
}
.ielts-page .x-of-y-question .current-question-number { color: var(--if-gold-bright); font-weight: 800; }
.ielts-page .rightside-buttons { display: flex; align-items: center; gap: var(--if-s-2); }

/* ---- the countdown: gold, tabular so the digits do not jitter ---- */
.ielts-page .test-timer-wrap { display: flex; align-items: center; gap: var(--if-s-1); }
.ielts-page .test-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 104px;
  height: auto !important;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.45);
  color: var(--if-gold-bright);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.ielts-page .test-timer::before {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* under five minutes the clock turns red and pulses once a second */
.ielts-page .test-timer.is-low {
  background: rgba(220,38,38,.16);
  border-color: rgba(248,113,113,.6);
  color: #FCA5A5;
  animation: ielts-tick 1s steps(2, end) infinite;
}
@keyframes ielts-tick { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .ielts-page .test-timer.is-low { animation: none; }
}

.ielts-page .squrelet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--if-border);
  background: var(--if-card);
  color: var(--if-navy);
  font-weight: 600;
}
.ielts-page .navbar .squrelet-btn {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

/* ---- instruction screens, shown before each paper ---- */
.ielts-page [data-intro-info] h3,
.ielts-page [data-section-info] h3 { color: var(--if-navy); }
.ielts-page [data-section-info] > div {
  max-width: 780px;
  margin: var(--if-s-5) auto;
  padding: var(--if-s-5) !important;
  background: var(--if-card) !important;
  border: 1px solid var(--if-border);
  border-top: 4px solid var(--skill, var(--if-navy));
  border-radius: var(--if-r);
  box-shadow: var(--if-shadow);
}
.ielts-page [data-section-info] p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: var(--if-fg);
  max-width: 68ch;
}
.ielts-page [data-section-info] b { color: var(--if-navy); }

/* per-paper accent, set on <body> by each index view */
.ielts-page.paper-listening { --skill: var(--if-listening); }
.ielts-page.paper-reading   { --skill: var(--if-reading); }
.ielts-page.paper-writing   { --skill: var(--if-writing); }
.ielts-page.paper-speaking  { --skill: var(--if-speaking); }

/* ---- split panes: passage left, questions right ----

   The split belongs on `.reading-mcq`, which is the CONTAINER
   (passage | 5px divider | questions). `.reading` is one PANE inside it.

   These rules used to sit on `.reading`, which made each pane a two-column
   grid of its own children. On the Reading paper that put "Reading Passage 1"
   and the passage title in the left column and the "spend 20 minutes" line and
   the passage body in the right one, so the passage read out of order; the same
   happened to Listening's question groups. Meanwhile `.reading-mcq` kept
   exam.css's `1fr 5px 1fr` at every width, so on a 375px phone the passage
   column was 112px -- about fifteen characters. Both came from the one
   mix-up. */
.ielts-page .reading-mcq {
  display: grid;
  grid-template-columns: 1fr;      /* phones first: stacked */
  gap: var(--if-s-3);
  align-items: start;
}
.ielts-page .reading {
  display: block;                  /* a pane, not a grid */
}

@media (max-width: 899px) {
  /* exam.css pins .reading to calc(100vh - 175px) with its own scrollbar. Two
     nested scroll areas on a phone is the thing HANDOFF §10.6 warned about, so
     the pane grows with its content and the page does the scrolling. */
  .ielts-page .reading {
    height: auto;
    overflow: visible;
    padding: var(--if-s-2);
  }
  /* the bare grey divider <div> between the panes has no height of its own;
     stacked, it would only contribute an empty gap row */
  .ielts-page .reading-mcq > [style*="gray"] { display: none; }
}

@media (min-width: 900px) {
  .ielts-page .reading-mcq {
    grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr);
    height: calc(100vh - 150px);
  }
  .ielts-page .reading-mcq > * {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
  }
}

/* exam.css lays .mcq-body/.scq-body out as three rows with a fixed 100px middle
   one, which TOEFL's markup fills. The IELTS reading paper puts a SINGLE child
   in there (passages-content renders the whole paper as one block), so rows two
   and three became 100px of dead space in the question pane -- most obvious on a
   phone, where it pushed the first question down the screen.

   Scoped with :only-child on purpose: Listening's question-content genuinely
   fills all three rows and must keep the grid. */
.ielts-page .mcq-body:has(> :only-child),
.ielts-page .scq-body:has(> :only-child) {
  display: block;
  height: auto;
}
.ielts-page .reading-mcq,
.ielts-page .mcq-body {
  background: var(--if-card);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r);
  padding: var(--if-s-3);
}
.ielts-page .scq-option {
  display: flex;
  align-items: flex-start;
  gap: var(--if-s-2);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-sm);
  margin-bottom: var(--if-s-1);
  cursor: pointer;
}
.ielts-page .scq-option:hover { border-color: var(--skill, var(--if-navy)); background: #FBFDFF; }

/* ---- the numbered navigator along the bottom ---- */
.ielts-page .ielts-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--if-s-2);
  padding: var(--if-s-2) var(--if-s-3);
  background: var(--if-navy);
  border-top: 1px solid var(--if-navy-deep);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ielts-page .ielts-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: var(--if-s-2);
  border-right: 1px solid rgba(255,255,255,.18);
}
.ielts-page .ielts-nav-group:last-child { border-right: 0; }
/* the part the candidate is actually in. Listening loads one part at a time, so
   without this the bar shows forty identical circles and gives no sense of
   where you are. */
.ielts-page .ielts-nav-group.is-current-part .ielts-nav-label { color: var(--if-gold-bright); }
.ielts-page .ielts-nav-group:not(.is-current-part) .ielts-nav-cell { opacity: .55; }
.ielts-page .ielts-nav-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94A3B8;
  white-space: nowrap;
  margin-right: 2px;
}
.ielts-page .ielts-nav-cell {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}
.ielts-page .ielts-nav-cell.answered { background: #fff; border-color: #fff; color: var(--if-navy); }
.ielts-page .ielts-nav-cell.current {
  background: var(--if-gold-bright);
  border-color: var(--if-gold-bright);
  color: #1F1400;
}
.ielts-page .ielts-nav-cell:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }

/* ---- passage tabs ---- */
.ielts-page .ielts-reading-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s-1);
  margin-bottom: var(--if-s-2);
}
.ielts-page .ielts-reading-tabs .squrelet-btn.active {
  background: var(--if-navy);
  border-color: var(--if-navy);
  color: #fff;
}

/* ---- Writing: live word counter ---- */
.ielts-page .ielts-wordcount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--if-muted);
  border: 1px solid var(--if-border);
  color: var(--if-muted-fg);
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ielts-page .ielts-wordcount b { color: var(--if-navy); font-size: .9rem; }
.ielts-page .ielts-wordcount.is-under { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.ielts-page .ielts-wordcount.is-under b { color: #991B1B; }
.ielts-page .ielts-wordcount.is-met { border-color: #A7F3D0; background: #ECFDF5; color: #065F46; }
.ielts-page .ielts-wordcount.is-met b { color: #065F46; }

/* ---- narrow screens: the bar has to stay usable ---- */
@media (max-width: 640px) {
  .ielts-page .navbar { flex-wrap: wrap; gap: var(--if-s-1); padding: var(--if-s-1) var(--if-s-2); }
  .ielts-page .navbar > div { width: 100%; }
  .ielts-page .rightside-buttons { justify-content: space-between; width: 100%; }
  .ielts-page .test-timer { min-width: 92px; font-size: .95rem; }
  .ielts-page .droplet-btn { padding: 8px 12px; font-size: .75rem; }
  .ielts-page .ielts-nav-cell { width: 30px; height: 30px; }
}

/* ===============================================================
   SITE PAGES  —  section switcher, exam detail
   Added 2026-08-17, when detail/index/records dropped toeflcss.
   =============================================================== */

/* The section switcher renders inside .section-switcher in
   partials/header.blade.php, which is OUTSIDE the .ielts-page wrapper, so the
   custom properties declared on .ielts-page do not reach it -- the colours here
   are literal on purpose, and must stay in step with the tokens above.

   The class is `ielts-switch`, not `toefl-switch`: TOEFL's own navbar still uses
   `toefl-switch` and must keep it, and an unscoped rule on that shared name
   would have restyled TOEFL's switcher too. */
.ielts-switch {
  text-decoration: none;
  font-weight: 700;
  color: #334155;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.ielts-switch:hover        { color: #1E3A5F; }
.ielts-switch[on="yes"]    { color: #1E3A5F; border-bottom-color: #F59E0B; }
.ielts-switch:focus-visible{ outline: 3px solid #F59E0B; outline-offset: 2px; }

/* ---- exam detail: breadcrumb ---- */
.ielts-page .ielts-detail { padding-top: var(--if-s-5); padding-bottom: var(--if-s-6); }

.ielts-page .ielts-crumb {
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-size: .8125rem; color: var(--if-muted-fg);
  margin-bottom: var(--if-s-3);
}
.ielts-page .ielts-crumb a { color: var(--if-muted-fg); text-decoration: none; }
.ielts-page .ielts-crumb a:hover { color: var(--if-navy); text-decoration: underline; }
.ielts-page .ielts-crumb [aria-current] { color: var(--if-navy); font-weight: 700; }

/* ---- exam detail: hero ---- */
.ielts-page .ielts-detail-hero {
  display: grid;
  grid-template-columns: 1fr;          /* phones first */
  gap: var(--if-s-4);
  align-items: center;
  background: linear-gradient(135deg, var(--if-navy) 0%, var(--if-navy-deep) 100%);
  color: #fff;
  border-radius: var(--if-r-lg);
  padding: var(--if-s-5);
  box-shadow: var(--if-shadow-lg);
}
@media (min-width: 768px) {
  .ielts-page .ielts-detail-hero { grid-template-columns: minmax(0,1fr) minmax(0,300px); }
}
.ielts-page .ielts-detail-eyebrow {
  margin: 0 0 .5rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--if-gold-bright);
}
.ielts-page .ielts-detail-title {
  margin: 0 0 .5rem; color: #fff; line-height: 1.15;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}
.ielts-page .ielts-detail-sub { margin: 0; max-width: 46ch; color: #CBD5E1; }
.ielts-page .ielts-detail-badge img {
  display: block; width: 100%; height: auto; border-radius: var(--if-r);
}

/* ---- exam detail: the five papers ---- */
.ielts-page .ielts-papers-title {
  margin: var(--if-s-5) 0 var(--if-s-3);
  font-size: 1.125rem; color: var(--if-navy);
}
.ielts-page .ielts-papers {
  display: grid;
  grid-template-columns: 1fr;                                  /* 375px: 1 up */
  gap: var(--if-s-3);
}
@media (min-width: 560px)  { .ielts-page .ielts-papers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ielts-page .ielts-papers { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.ielts-page .ielts-paper {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  min-height: 44px;                       /* touch target */
  padding: var(--if-s-3);
  background: var(--if-card);
  border: 1px solid var(--if-border);
  border-top: 4px solid var(--skill, var(--if-navy));
  border-radius: var(--if-r);
  box-shadow: var(--if-shadow);
  text-decoration: none; color: var(--if-fg);
  transition: box-shadow .15s ease, transform .15s ease;
}
.ielts-page .ielts-paper:hover { box-shadow: var(--if-shadow-lg); transform: translateY(-2px); color: var(--if-fg); }
.ielts-page .ielts-paper:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }
.ielts-page .ielts-paper-img { display: block; width: 100%; }
.ielts-page .ielts-paper-img img { display: block; width: 100%; height: 96px; object-fit: contain; }
.ielts-page .ielts-paper-name { font-weight: 700; color: var(--if-navy); }
.ielts-page .ielts-paper-meta { font-size: .8125rem; color: var(--if-muted-fg); }

/* per-paper accent, same four colours the test screens use */
.ielts-page .ielts-paper.is-full      { --skill: var(--if-gold-bright); }
.ielts-page .ielts-paper.is-reading   { --skill: var(--if-reading); }
.ielts-page .ielts-paper.is-listening { --skill: var(--if-listening); }
.ielts-page .ielts-paper.is-writing   { --skill: var(--if-writing); }
.ielts-page .ielts-paper.is-speaking  { --skill: var(--if-speaking); }

@media (prefers-reduced-motion: reduce) {
  .ielts-page .ielts-paper { transition: none; }
  .ielts-page .ielts-paper:hover { transform: none; }
}

/* ===============================================================
   TEST SCREENS  —  Listening, Writing, Speaking
   Added 2026-08-17. Until now these three papers were still drawn by
   exam.css, so a candidate met three different palettes in one exam:
     Listening  play button   rgb(80,118,203)   TOEFL blue
     Speaking   record/stop   #4285f4           a third blue
     everything else          IELTS navy + gold
   Selectors below are deliberately one step more specific than exam.css's
   (.ielts-page .audio-container .play-btn beats .audio-container .play-btn)
   rather than relying on load order alone.
   =============================================================== */

/* exam.css makes .test-body a grid, and its single implicit column sizes to
   max-content. So the widest descendant set the width of the whole page: the
   400px recording frame plus the mic-test container's 30px padding came to
   463px, and a 375px phone got a horizontal scrollbar with every screen
   dragged sideways. minmax(0,1fr) lets the column shrink below its content,
   and min-width:0 lets the children do the same. */
.ielts-page .test-body { grid-template-columns: minmax(0, 1fr); }
.ielts-page .test-body > * { min-width: 0; }

/* Form controls. Neither stylesheet declared a colour-scheme, so on a browser
   set to dark mode Chrome drew the essay textarea with its dark UA default --
   #3B3B3B with white text -- inside an otherwise white page. That is a UA
   default, not TOEFL styling (exam.css sets no textarea colour and TOEFL is
   affected identically). Declaring the scheme and the colours makes the paper
   look the same for every candidate. */
.ielts-page { color-scheme: light; }

.ielts-page textarea,
.ielts-page input[type="text"],
.ielts-page input[type="search"] {
  background: var(--if-card);
  color: var(--if-fg);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-sm);
  font: inherit;
  padding: 8px 10px;
}
.ielts-page textarea:focus,
.ielts-page input[type="text"]:focus {
  outline: 3px solid var(--if-gold-bright);
  outline-offset: 1px;
  border-color: var(--if-navy);
}

/* ---------------------------------------------------------------
   LISTENING
   --------------------------------------------------------------- */
.ielts-page .audio-container .play-btn,
.ielts-page .play-question-audio-btn {
  background: var(--skill, var(--if-listening));
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 44px;                 /* touch target */
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.ielts-page .audio-container .play-btn:hover,
.ielts-page .play-question-audio-btn:hover { filter: brightness(1.08); }
.ielts-page .audio-container .play-btn:focus-visible,
.ielts-page .play-question-audio-btn:focus-visible {
  outline: 3px solid var(--if-gold-bright); outline-offset: 2px;
}

.ielts-page .audio-container .audio-progress meter { accent-color: var(--skill, var(--if-listening)); }
.ielts-page .listening-qa { gap: var(--if-s-2); }
.ielts-page .scq-question { font-size: 1rem; line-height: 1.6; }
.ielts-page .scq-answer   { gap: var(--if-s-1); }

/* exam.css pins this to a fixed 400x300, which overflows a 375px phone */
.ielts-page .recording-img-frame {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border-radius: var(--if-r);
  overflow: hidden;
}
.ielts-page .recording-img { border-radius: var(--if-r); }

/* ---------------------------------------------------------------
   WRITING
   --------------------------------------------------------------- */
.ielts-page .essay-textarea,
.ielts-page .discuss-textarea {
  min-height: 16rem;
  line-height: 1.6;
  border-radius: var(--if-r-sm);
}
.ielts-page .essay-title { font-weight: 700; color: var(--if-navy); }
.ielts-page .essay-title-n-word-count {
  align-items: baseline;
  gap: var(--if-s-2);
  padding-bottom: var(--if-s-1);
}
.ielts-page .word-count { font-size: .8125rem; color: var(--if-muted-fg); gap: .35rem; }
.ielts-page .word-count-value { font-weight: 700; color: var(--if-navy); }
.ielts-page .wread-timer {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: 6px 12px;
  background: var(--if-muted);
  border-radius: 999px;
  font-size: .8125rem; color: var(--if-navy);
}
.ielts-page .wread-timer-title { color: var(--if-muted-fg); }
.ielts-page .wread-timer-time  { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   SPEAKING
   --------------------------------------------------------------- */
/* exam.css gives these `max-width:700px; margin:auto`. As grid items of
   .test-body, `margin:auto` replaces the default stretch alignment, so the box
   sizes to its max-content instead of the track -- 463px against a 375px
   column, which is what actually forced the horizontal scrollbar on Speaking.
   width:100% puts it back on the track; max-width still caps it on a desktop. */
.ielts-page .speaking-before-start-container,
.ielts-page .speaking-microphone-test-container {
  width: 100%;
  max-width: 700px;
}
.ielts-page .speaking-before-start-container .instructions,
.ielts-page .speaking-microphone-test-container .instructions { line-height: 1.65; }

@media (max-width: 640px) {
  .ielts-page .speaking-before-start-container,
  .ielts-page .speaking-microphone-test-container { padding: var(--if-s-3); }
}

/* `.card` is scoped to the Speaking containers deliberately. It is also a
   BOOTSTRAP class, and the review page is built on Bootstrap cards with `p-4`
   spacing utilities -- a bare `.ielts-page .card` rule (0,2,0) would outrank
   `p-4` (0,1,0) and quietly re-space every card on that page. */
.ielts-page .checklist,
.ielts-page .speaking-before-start-container .card,
.ielts-page .speaking-microphone-test-container .card {
  background: var(--if-card);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r);
  padding: var(--if-s-3);
  box-shadow: var(--if-shadow);
}
.ielts-page .prompt { font-size: 1rem; line-height: 1.6; color: var(--if-fg); }

/* the mic-test and answer controls: exam.css gives these #4285f4 */
.ielts-page .speaking-microphone-test-container .play-btn,
.ielts-page .audio-player .play-btn,
.ielts-page [data-record-toggle].play-btn {
  background: var(--skill, var(--if-speaking));
  color: #fff;
  border: 0;
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
}
.ielts-page .speaking-microphone-test-container .recorder-ui .stop-btn,
.ielts-page .stop-btn {
  background: var(--if-danger);
  color: #fff;
  border: 0;
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
}
.ielts-page .speaking-microphone-test-container .play-btn:focus-visible,
.ielts-page .stop-btn:focus-visible,
.ielts-page [data-record-toggle].play-btn:focus-visible {
  outline: 3px solid var(--if-gold-bright); outline-offset: 2px;
}

/* exam.css reaches these through
   `.speaking-microphone-test-container .recorder-ui .status-bar` (0,3,0), so a
   two-class rule here loses no matter which file loads last. Matched depth for
   depth, with a plain fallback for any other context. Its `padding: 1rem 6rem`
   is also why the bar could not fit a phone. */
.ielts-page .speaking-microphone-test-container .recorder-ui .status-bar,
.ielts-page .status-bar {
  background: var(--if-muted);
  border-radius: 999px;
  padding: 8px 16px;
  gap: var(--if-s-1);
  color: var(--if-navy);
}
.ielts-page .speaking-microphone-test-container .recorder-ui .recording-label,
.ielts-page .recording-label { font-weight: 700; color: var(--if-danger); }
.ielts-page .speaking-microphone-test-container .recorder-ui .time-indicator,
.ielts-page .time-indicator  { font-variant-numeric: tabular-nums; color: var(--if-navy); }
.ielts-page .prep-speak-row,
.ielts-page .speak-time { color: var(--if-muted-fg); font-variant-numeric: tabular-nums; }

/* ---- narrow screens ---- */
@media (max-width: 640px) {
  .ielts-page .audio-container .play-btn,
  .ielts-page .speaking-microphone-test-container .play-btn,
  .ielts-page .stop-btn { width: 100%; }
  .ielts-page .essay-textarea { min-height: 12rem; }
}

/* ===============================================================
   REVIEW / RESULTS PAGE
   Added 2026-08-17. review.blade.php is a standalone document -- it never
   loaded toeflcss, but it had no IELTS identity either: Bootstrap defaults
   plus a small inline <style>, so a candidate finished an IELTS paper styled
   navy and gold and landed on a generic Bootstrap page.

   Bootstrap stays: the question navigator uses its tab JS (data-bs-toggle),
   and the partials are built on its grid. These rules sit over the top and
   are scoped to .ielts-review so they cannot reach anything else. Nothing here
   overrides a Bootstrap spacing utility (p-4, mb-3 and friends keep working).
   =============================================================== */

.ielts-review { padding-bottom: var(--if-s-6); }

/* ---- header: back, paper, score ---- */
.ielts-review-head {
  background: linear-gradient(135deg, var(--if-navy) 0%, var(--if-navy-deep) 100%);
  color: #fff;
  padding: var(--if-s-4) 0;
  margin-bottom: var(--if-s-4);
}
.ielts-review-head-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--if-s-3);
  max-width: 1120px; margin: 0 auto; padding: 0 var(--if-s-3);
}
.ielts-review-back {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  color: #CBD5E1; text-decoration: none; font-weight: 600; font-size: .875rem;
}
.ielts-review-back:hover { color: #fff; }
.ielts-review-back:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }

.ielts-review-paper {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 6px 14px; border-radius: 999px;
  background: var(--skill, var(--if-navy-soft));
  color: #fff; font-weight: 700; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.ielts-review-score { margin-left: auto; text-align: right; line-height: 1.1; }
.ielts-review-score b {
  display: block;
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--if-gold-bright);
  font-variant-numeric: tabular-nums;
}
.ielts-review-score span { font-size: .75rem; color: #CBD5E1; text-transform: uppercase; letter-spacing: .08em; }

/* per-paper accent, mirroring the test screens */
.ielts-review.paper-reading   { --skill: var(--if-reading); }
.ielts-review.paper-listening { --skill: var(--if-listening); }
.ielts-review.paper-writing   { --skill: var(--if-writing); }
.ielts-review.paper-speaking  { --skill: var(--if-speaking); }

/* ---- question navigator ----
   Up to 40 buttons. A flex row with gap ran off the side of a phone, so this
   wraps into a grid of fixed cells instead. */
.ielts-review-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--if-s-1);
  max-width: 1120px;
  margin: 0 auto var(--if-s-4);
  padding: 0 var(--if-s-3);
}
.ielts-review-nav .btn {
  min-width: 44px; min-height: 44px;      /* touch target */
  padding: 0;
  border-radius: var(--if-r-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--if-border);
  background: var(--if-card);
  color: var(--if-fg);
}
.ielts-review-nav .btn-outline-success { border-color: var(--if-success); color: var(--if-success); }
.ielts-review-nav .btn-outline-danger  { border-color: var(--if-danger);  color: var(--if-danger); }
.ielts-review-nav .btn.active,
.ielts-review-nav .btn-outline-success.active { background: var(--if-success); border-color: var(--if-success); color: #fff; }
.ielts-review-nav .btn-outline-danger.active  { background: var(--if-danger);  border-color: var(--if-danger);  color: #fff; }
.ielts-review-nav .btn:focus-visible { outline: 3px solid var(--if-gold-bright); outline-offset: 2px; }

/* ---- the answer cards (Bootstrap markup, IELTS surface) ---- */
.ielts-review .card {
  border: 1px solid var(--if-border);
  border-radius: var(--if-r);
  box-shadow: var(--if-shadow);
}
.ielts-review .badge.bg-success { background: var(--if-success) !important; }
.ielts-review .badge.bg-danger  { background: var(--if-danger)  !important; }
.ielts-review .badge.bg-info    { background: var(--if-writing) !important; }
.ielts-review .badge.bg-warning { background: var(--if-speaking) !important; color: #fff !important; }

/* The answer boxes in the reading + listening partials. These four rules were
   an inline <style> block in review.blade.php; they live here now so the page
   has one source of colour rather than two. Behaviour is unchanged apart from
   the palette: Bootstrap's #0d6efd rule on .explanation-card became gold, and
   the green/red pair became the IELTS tokens. */
.ielts-review .answer-choice {
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-sm);
  padding: .75rem;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}
.ielts-review .answer-choice:hover { background: var(--if-muted); }
.ielts-review .correct-answer { background: #ECFDF5; border-color: var(--if-success); }
.ielts-review .user-answer    { border-color: var(--if-danger); }
.ielts-review .explanation-card { border-left: 4px solid var(--if-gold-bright); padding-left: 1rem; }
.ielts-review .answer-label { font-weight: 600; margin-right: .5rem; }

@media (max-width: 640px) {
  .ielts-review-score { margin-left: 0; width: 100%; text-align: left; }
}