/* ==========================================================================
   TOEFL site pages — listing, exam detail, and the product header chrome.

   WHAT THIS FILE IS FOR
   The TestGlider-match identity for TOEFL's SITE pages, built 2026-08-19 from
   design/toefl-listing-testglider.html and design/toefl-detail-testglider.html,
   both of which were measured off TestGlider's live TOEFL pages at a 1280px
   viewport rather than estimated from screenshots. The measured reference
   values are recorded in design/_toefl-shared.md.

   WHAT IT IS NOT FOR
   - The TOEFL EXAM SCREENS. Those are public/assets/css/exam.css and
     layouts/exam.blade.php, and CLAUDE.md rule 4 says they are never edited:
     sharing them is what made the products identical in the first place.
   - The legacy TOEFL pages. assets/css/toeflcss.blade.php still styles those
     and is untouched. Nothing here overrides it, because this file is only
     pushed onto the pages that opted in.

   HOW IT LOADS
   @push('styles') on each TOEFL site page, exactly as ielts.css does. It is not
   in the global bundle, so a page that does not ask for it is unaffected.

   PALETTE — READ THIS BEFORE CHANGING A COLOUR
   These are TestGlider's tokens (#175FFC and their pastel tints), NOT the
   LinguaFace colour standard of HANDOFF §10.16 (purple #23075B hero / white
   body / #0051FD accent). That standard still governs the homepage and anything
   new; this file is inside the client-directed reversal recorded in §10.18 and
   extended to IELTS in §10.20-10.22. The reversal is now recorded explicitly in
   claudecode/colour-standard.mjs so this file is EXEMPT BY DECISION rather than
   passing that contract by being invisible to it.

   The head/subnav block below is a deliberate mirror of the .ielts-head-* block
   in ielts.css lines ~807-935. One blade renders both
   (partials/header-product.blade.php); the CSS is per product so that the IELTS
   sheet, which shipped and was signed off on 2026-08-18, is never reopened.
   Keep the two in step by hand — the contract asserts they have the same rule
   set, so a divergence fails loudly.
   ========================================================================== */

/* ==========================================================================
   1. HEADER — mirrors .ielts-head-* exactly. Values are TestGlider's live
      measurements; where their site and the mockup disagreed the live site won.
   ========================================================================== */
.toefl-head { position: sticky; top: 0; z-index: 11; background: #FFFFFF; }
.toefl-head-main { border-bottom: 1px solid #E8EAED; }
.toefl-head-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.toefl-head-main .toefl-head-shell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* The logo keeps app.css's .navbar-logo sizing untouched — 50px. It is the one
   element the client asked not to change, so nothing here sets its size. */
.toefl-head-brand { flex: 0 0 auto; text-decoration: none; }

.toefl-head-product { font-size: 16px; font-weight: 600; color: #111114; }
.toefl-head-partner {
  font-size: 12px;
  color: #8A8C91;
  white-space: nowrap;
}
.toefl-head-partner b { color: #36373B; font-weight: 700; }

.toefl-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toefl-head-link {
  font-size: 13px;
  font-weight: 600;
  color: #4A4B4D;
  padding: 6px 16px;
  text-decoration: none;
  border-radius: 9999px;
  transition: color 120ms ease, background-color 120ms ease;
}
a.toefl-head-link:hover { color: #175FFC; background: #F7F9FB; }
.toefl-head-sep {
  width: 1px;
  height: 12px;
  background: #E8EAED;
  flex: 0 0 auto;
}
.toefl-head-purchase {
  background: #175FFC;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 0;
  text-decoration: none;  /* it is an <a> for IELTS and TOEFL since 2026-08-29 */
  white-space: nowrap;
}
.toefl-head-avatar {
  padding: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #E8EAED;
  background: #FFFFFF;
  color: #175FFC;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: border-color 120ms ease;
}
.toefl-head-avatar:hover { border-color: #B8BCC0; color: #175FFC; }
.toefl-head-avatar svg { width: 20px; height: 20px; }

/* Controls with no destination. Deliberately not links: there is no reviews
   table, no community and no purchase flow anywhere in this codebase, and
   pointing them at "#" would advertise pages that do not exist. §10.21. */
.toefl-head-link[aria-disabled="true"],
.toefl-head-purchase[aria-disabled="true"] { opacity: .45; cursor: default; }
a.toefl-head-purchase:hover { background: #0B4BD4; }   /* only the linked variant */

.toefl-head :focus-visible { outline: 3px solid #175FFC; outline-offset: 2px; border-radius: 6px; }

/* ---- the sub-nav row ---- */
.toefl-subnav { background: #FFFFFF; border-bottom: 1px solid #E8EAED; }
.toefl-subnav-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.toefl-subnav-row::-webkit-scrollbar { display: none; }

/* SCOPED to .toefl-subnav on purpose. `toefl-switch` is an OLD class that
   assets/css/toeflcss.blade.php already styles, and the legacy view
   resources/views/toefl/home.blade.php still uses it. An unscoped rule on that
   shared name would restyle those too. Inside the new sub-nav these win; outside
   it, the legacy rules are untouched. Mirrors .ielts-switch. */
.toefl-subnav .toefl-switch {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #111114;
  padding: 16px 8px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.toefl-subnav a.toefl-switch:hover        { color: #175FFC; }
.toefl-subnav .toefl-switch[on="yes"]     { color: #175FFC; border-bottom-color: #175FFC; }
.toefl-subnav .toefl-switch:focus-visible { outline: 3px solid #175FFC; outline-offset: 2px; }
.toefl-subnav .toefl-switch[aria-disabled="true"] { opacity: .45; cursor: default; }

@media (max-width: 900px) {
  /* the partner lockup and the secondary links are the first things TestGlider
     drops at narrow widths */
  .toefl-head-partner,
  .toefl-head-link,
  .toefl-head-sep { display: none; }
  .toefl-head-shell { padding: 0 16px; }
}

/* ==========================================================================
   2. PAGE SHELL

   Everything below is scoped under .toefl-tg. layouts/app.blade.php is shared
   with the homepage and IELTS, so an unscoped rule here would leak onto them —
   the same discipline .ielts-page uses. The class goes on the page wrapper, not
   on <body>, because the footer partial sits outside it.
   ========================================================================== */
.toefl-tg {
  background: #FFFFFF;
  color: #111114;
  padding-bottom: 64px;
}
.toefl-tg .tg-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.toefl-tg .tg-band { padding-top: 40px; }
.toefl-tg a { text-decoration: none; color: inherit; }

/* The detail page's content column is 960 wide, not 1280. That is TestGlider's
   own choice on that page and is recorded in design/_toefl-shared.md so it does
   not read as a mistake. */
.toefl-tg--detail .tg-shell { max-width: 960px; }

/* ==========================================================================
   3. UTILITY CARDS — the listing's three entry points
   ========================================================================== */
.toefl-tg .tg-utils {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.toefl-tg .tg-util {
  position: relative;
  overflow: hidden;
  min-height: 248px;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.toefl-tg .tg-util:hover { transform: translateY(-3px); }
.toefl-tg .tg-util:nth-child(1) { background: #F7F9FB; }
.toefl-tg .tg-util:nth-child(2) { background: #F4F8FF; }
.toefl-tg .tg-util:nth-child(3) { background: #F1FEFF; }
.toefl-tg .tg-util .tg-kicker { margin: 0 0 4px; font-size: 14px; font-weight: 400; color: #5B5C61; }
.toefl-tg .tg-util .tg-title  { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.toefl-tg .tg-util .tg-art {
  position: absolute; right: 20px; bottom: 18px;
  width: 120px; height: 120px; opacity: .95;
}
.toefl-tg .tg-util .tg-art svg { width: 100%; height: 100%; display: block; }
.toefl-tg .tg-util[aria-disabled="true"] { opacity: .55; cursor: default; }
.toefl-tg .tg-util[aria-disabled="true"]:hover { transform: none; }
.toefl-tg .tg-soon {
  align-self: flex-start;
  margin-top: 8px;
  background: #F0F2F4; color: #4A4B4D;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
}

/* ==========================================================================
   4. CLOSER TO YOUR GOAL — one in-progress card, shown only when the student
      really has an unfinished session. Not a rail.
   ========================================================================== */
.toefl-tg .tg-goal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.toefl-tg .tg-goal-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.toefl-tg .tg-inprogress {
  background: #F0F2F4; color: #222;
  font-size: 14px; font-weight: 400;
  padding: 4px 8px; border-radius: 8px;
}
.toefl-tg .tg-goal-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 354px; max-width: 100%;
  background: #FFFFFF; border: 1px solid #E8EAED; border-radius: 16px; padding: 24px;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.toefl-tg .tg-goal-card:hover { transform: translateY(-3px); }
.toefl-tg .tg-goal-card .tg-nm  { margin: 0 0 2px; font-size: 16px; font-weight: 400; color: #8A8C91; }
.toefl-tg .tg-goal-card .tg-sub { margin: 0; font-size: 18px; font-weight: 700; }
.toefl-tg .tg-goal-card .tg-art { width: 72px; height: 72px; flex: 0 0 auto; }
.toefl-tg .tg-goal-card .tg-art img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ==========================================================================
   5. MOCK TESTS — full-width white rows
   ========================================================================== */
.toefl-tg .tg-tests-head { margin: 0 0 16px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.toefl-tg .tg-rows { display: flex; flex-direction: column; gap: 16px; }
.toefl-tg .tg-row {
  display: flex; align-items: center; gap: 20px;
  background: #FFFFFF; border: 1px solid #E8EAED; border-radius: 20px;
  min-height: 144px; padding: 24px 20px;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms cubic-bezier(.22,.61,.36,1);
}
.toefl-tg .tg-row:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(0,0,0,.18); }
.toefl-tg .tg-row .tg-icon { width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center; }
.toefl-tg .tg-row .tg-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.toefl-tg .tg-row .tg-id { flex: 1 1 auto; min-width: 0; }
.toefl-tg .tg-free {
  display: inline-block; background: #F4F8FF; color: #175FFC;
  font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 6px; margin-bottom: 6px;
}
.toefl-tg .tg-row .tg-nm { margin: 0; font-size: 20px; font-weight: 600; color: #222; }
.toefl-tg .tg-graded { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.toefl-tg .tg-graded svg { width: 28px; height: 28px; }
.toefl-tg .tg-graded span { font-size: 12px; font-weight: 600; color: #222; }
.toefl-tg .tg-scores { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.toefl-tg .tg-badges { display: flex; gap: 6px; }
.toefl-tg .tg-badge {
  width: 40px; height: 50px; background: #F7F9FB; border-radius: 8px;
  padding: 8px 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.toefl-tg .tg-badge svg { width: 16px; height: 16px; }
.toefl-tg .tg-badge em { font-style: normal; font-size: 13px; font-weight: 600; color: #222; }
.toefl-tg .tg-scores > span { font-size: 12px; font-weight: 600; color: #222; }
.toefl-tg .tg-take {
  background: #222; color: #FFFFFF; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 9999px; border: 0; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
}
.toefl-tg .tg-take:hover { background: #000000; }

/* A test with no questions must not look startable — §10.27's first trap.
   Apple and Banana both take this state, and it is one decision applied to
   both rather than two special cases. */
.toefl-tg .tg-row--empty { background: #FCFCFD; }
.toefl-tg .tg-row--empty:hover { transform: none; box-shadow: none; }
.toefl-tg .tg-row--empty .tg-icon { opacity: .5; }
.toefl-tg .tg-comingsoon {
  background: #F0F2F4; color: #4A4B4D;
  font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 9999px;
  flex: 0 0 auto; white-space: nowrap; cursor: default;
}
.toefl-tg .tg-pill-soon {
  display: inline-block; background: #F0F2F4; color: #4A4B4D;
  font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 6px; margin-bottom: 6px;
}

/* ==========================================================================
   6. EXAM DETAIL
   ========================================================================== */
.toefl-tg .tg-crumb { font-size: 14px; font-weight: 600; color: #175FFC; padding-top: 24px; }
.toefl-tg .tg-crumb a:hover { text-decoration: underline; }
.toefl-tg .tg-crumb span { color: #8A8C91; }

.toefl-tg .tg-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid #E8EAED; border-radius: 10px;
  padding: 12px 16px; margin-top: 16px;
}
.toefl-tg .tg-pill b { font-size: 16px; font-weight: 600; color: #614ECA; }
.toefl-tg .tg-pill span { font-size: 16px; font-weight: 500; color: #111114; }

.toefl-tg .tg-full {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #F7F9FB; border-radius: 24px; padding: 32px; margin-top: 24px;
}
.toefl-tg .tg-full h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #111114; }
.toefl-tg .tg-full p { margin: 0 0 16px; font-size: 14px; font-weight: 400; color: #4A4B4D; }
.toefl-tg .tg-full-art { width: 164px; height: 164px; flex: 0 0 auto; }
.toefl-tg .tg-full-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.toefl-tg .tg-start {
  display: inline-block;
  background: #175FFC; color: #FFFFFF;
  font-size: 16px; font-weight: 600;
  padding: 12px 24px; border-radius: 9999px; border: 0; cursor: pointer;
}
.toefl-tg .tg-start:hover { background: #114AC6; }

.toefl-tg .tg-sections-head { margin: 40px 0 4px; font-size: 24px; font-weight: 600; }
.toefl-tg .tg-sections-intro { margin: 0 0 16px; font-size: 14px; font-weight: 400; color: #4A4B4D; }
.toefl-tg .tg-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.toefl-tg .tg-skill {
  background: #FFFFFF; border: 0.667px solid #F0F2F4; border-radius: 24px;
  padding: 24px 32px; min-height: 207px;
  display: flex; flex-direction: column;
}
.toefl-tg .tg-skill h3 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #111114; }
.toefl-tg .tg-skill p { margin: 0; font-size: 14px; font-weight: 400; color: #4A4B4D; line-height: 20px; }
.toefl-tg .tg-skill-foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: flex-end; }
.toefl-tg .tg-section-btn {
  background: #222; color: #FFFFFF; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 9999px; border: 0; cursor: pointer; white-space: nowrap;
}
.toefl-tg .tg-section-btn:hover { background: #000000; }

/* The empty state again, on the detail page's four skill cards. A skill with no
   questions is never a link, so /toefl/start-exam/... is unreachable for it from
   the UI — which is what stops the 404 that abort() would otherwise produce. */
.toefl-tg .tg-skill--empty { background: #FCFCFD; }
.toefl-tg .tg-skill--empty h3 { color: #4A4B4D; }
.toefl-tg .tg-section-soon {
  background: #F0F2F4; color: #4A4B4D;
  font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: 9999px; white-space: nowrap; cursor: default;
}

/* The whole-test empty notice, shown instead of the Full Test start button. */
.toefl-tg .tg-empty-note {
  margin-top: 16px;
  background: #F7F9FB; border-left: 4px solid #B8BCC0; border-radius: 0 8px 8px 0;
  padding: 16px 20px; font-size: 14px; line-height: 1.6; color: #4A4B4D;
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .toefl-tg .tg-utils { grid-template-columns: 1fr; }
  .toefl-tg .tg-skills { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .toefl-tg .tg-shell { padding: 0 16px; }
  .toefl-tg .tg-row { flex-wrap: wrap; }
  .toefl-tg .tg-row .tg-id { flex: 1 1 60%; }
  .toefl-tg .tg-full { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .toefl-tg .tg-util,
  .toefl-tg .tg-goal-card,
  .toefl-tg .tg-row { transition: none; }
  .toefl-tg .tg-util:hover,
  .toefl-tg .tg-goal-card:hover,
  .toefl-tg .tg-row:hover { transform: none; }
}

/* ---- mobile product header, 2026-09-07 (HANDOFF §10.129) ------------------

   MEASURED in headless Chrome at a 390px mobile viewport, against the live
   pages, before this block existed: /toefl and /toefl/mock-tests each
   overflowed the document by 52px.

   The cause is `.toefl-head-right`. It is a non-wrapping flex row holding
   Reviews / Blog / Community + Purchase + the avatar, and it measured 143px.
   Beside the 199px brand anchor and the 52px product word in a 16px-padded
   shell, the row cannot fit 390px.

   NOT the sub-nav. `.toefl-subnav-row` already carries `overflow-x: auto`, so
   the `.toefl-switch` links that appear to hang ~220px off-screen are
   SCROLLABLE CONTENT inside it, not document overflow. Proven by removal, not
   by reading the overhang list: hiding `.toefl-subnav-row` outright left
   `documentElement.scrollWidth` at 442px, unchanged. It was the largest number
   in the audit and the wrong thing to chase.

   NOT THE SHELL PADDING EITHER. An earlier draft of this block reset
   `.toefl-head-shell` to 16px side padding, on the stated theory that it was
   spending 40px a side. It is not: the existing `@media (max-width: 900px)`
   rule already sets `padding: 0 16px`, and the measured value before this
   block was 16px. That rule was a no-op and has been dropped.


   KNOWN LIMIT, MEASURED, NOT FIXED HERE. This block gets /toefl to zero at
   390px and at 375px. It does NOT at 320px, where the page is still 32px over:
   the 199px brand plus the 129px Purchase+avatar group plus 32px of padding
   needs 360px, and `.toefl-head-shell` does not wrap. IELTS does not have this
   problem because its shell carries `flex-wrap: wrap` at this breakpoint and
   simply gets taller. Extending that wrap to TOEFL and SAT is the obvious
   follow-up and is deliberately NOT done here -- it changes the header's shape
   on every phone, which is a design call, not a measurement. See HANDOFF
   §10.129.
   640px because the header is all that changes here and it fits comfortably by
   then. No exam screen is touched, and `exam.css` is not touched (CLAUDE.md
   rule 4). */
@media (max-width: 640px) {
  .toefl-head-main .toefl-head-shell { gap: 8px; }

  /* Reviews / Blog / Community are the widest items in the row and the least
     load-bearing during a test. Hidden on phones only; they stay in the footer
     and on every larger screen. Scoped to `-head-main` so the sub-nav row,
     which scrolls on its own, keeps all of its links. */
  .toefl-head-main .toefl-head-link,
  .toefl-head-main .toefl-head-sep { display: none; }

  /* The partner byline wraps to a second line at this width and pushes the
     header taller than the sticky offset expects. */
  .toefl-head-partner { display: none; }

  /* MEASURED, and load-bearing HERE. Hiding the links and the byline alone
     leaves /toefl 22px over at 390px -- the row still carries the 199px brand,
     the 52px product word and a 129px Purchase+avatar group. Dropping the
     product word closes that last 22px: the page then measures 390px exactly,
     with no document scroll.

     The logo is 189px and its own note records the client asking for it not to
     be resized, so the product word is the item that goes -- it is the one
     thing repeated by the logo, the sub-nav and the page heading beneath.

     The same rule is deliberately NOT applied to SAT, where it was measured to
     change nothing. See the note in sat-home.css. */
  .toefl-head-product { display: none; }

  .toefl-head-right { gap: 6px; }
  .toefl-head-purchase { font-size: 13px; padding: 7px 12px; }
}