/* ==========================================================================
   test-v2.css — rules specific to the aptitude test page template.

   v2-core.css is shared by every v2 template, so nothing here is added there.
   Everything below serves a case that only the test family has:

   1. CMS-fallback guide prose. Eight of the 25 pages in the family have no
      git-owned content file, so their guide is markdownified CMS body copy
      rather than the curated `guide:` sections. That HTML contains element
      types the curated sections never do — h3/h4, images, blockquotes,
      horizontal rules — which v2-core does not style, and which would
      otherwise render as browser defaults inside a v2 page.
   2. The tips list, likewise CMS-sourced and present on 17 of the 25 pages.
   3. Anchor scroll offsets for the ids the contents rail targets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero without a try-one aside

   v2-core sets the hero to `minmax(0,1fr) 344px`, sized for the sample-question
   aside. Seventeen of the 25 pages in this family cannot show that aside — eight
   have no free test at all, and nine carry a test whose every question needs a
   table, chart, figure or passage that will not fit in it. Without this rule
   those pages reserve an empty 344px column beside the H1.
   -------------------------------------------------------------------------- */

/* v2-core's 38px gap above the CTAs is measured from the facts card. Where a
   page has no facts to show, the CTAs would otherwise float a long way below
   the intro paragraph. */

/* --------------------------------------------------------------------------
   Guide list markers

   v2-core lays guide lists out with `display: flex` on the ul/ol, which
   blockifies the list items and suppresses their markers — so the `li::marker`
   colour it defines never paints, and every bulleted list in a guide renders as
   unindented plain paragraphs. Restoring `list-item` here brings the markers
   back for this template without touching the shared file.
   -------------------------------------------------------------------------- */
/* The tips list draws its own numerals in ::before, so it opts back out. */

/* Anchor targets: the contents rail jumps to guide sections and to CMS
   Q&A headings, both of which sit flush to the top of the viewport without
   this. */

/* --------------------------------------------------------------------------
   CMS-fallback guide prose
   -------------------------------------------------------------------------- */
/* Worked-example images. Owned guide sections carry them too on the pages with
   no free test, where the example questions are the only demonstration of the
   format, so both variants share one rule. */
/* Wide CMS tables scroll rather than pushing the page sideways. */

/* --------------------------------------------------------------------------
   Tips
   -------------------------------------------------------------------------- */
.tv2 .tv2-tips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px;
  counter-reset: tv2-tip;
}
.tv2 .tv2-tip { counter-increment: tv2-tip; position: relative; padding-left: 42px; }
.tv2 .tv2-tip::before {
  content: counter(tv2-tip);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 500 13px 'IBM Plex Mono', monospace;
  color: #1257E8; background: #EEF4FF; border: 1px solid #D8E3FB;
}
.tv2 .tv2-tip h3 {
  margin: 0 0 8px; font-size: 19px; line-height: 1.35; font-weight: 500;
  color: #14203A; max-width: 46ch;
}
.tv2 .tv2-tip p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; color: #414B5E; max-width: 68ch; }
.tv2 .tv2-tip p:last-child { margin-bottom: 0; }
.tv2 .tv2-tip a { color: #1257E8; }
.tv2 .tv2-tip ul, .tv2 .tv2-tip ol { margin: 0 0 12px; padding-left: 22px; }
.tv2 .tv2-tip li { font-size: 17px; line-height: 1.6; color: #414B5E; }

@media (max-width: 620px) {
  .tv2 .tv2-tip { padding-left: 34px; }
  .tv2 .tv2-tip::before { width: 24px; height: 24px; font-size: 12px; }
}

/* Video tutorials */
.tv2-videos { padding: 72px 0 8px; scroll-margin-top: 16px; }
.tv2-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.tv2-videos__item { display: block; text-decoration: none; }
.tv2-videos__thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #14203A; }
.tv2-videos__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; opacity: .92; transition: opacity .15s; }
.tv2-videos__item:hover .tv2-videos__thumb img { opacity: 1; }
.tv2-videos__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(20,32,58,.82); }
.tv2-videos__play::after { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.tv2-videos__title { display: block; margin: 12px 0 2px; font: 500 16px/1.4 'Circular', sans-serif; color: #14203A; }
.tv2-videos__duration { display: block; font-size: 13px; color: #5A6478; }
.tv2-videos__player iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
@media (max-width: 820px) { .tv2-videos__grid { grid-template-columns: 1fr; } }

/* Single-column hero (no aside). The children keep max-widths sized for the old
   two-column layout, so without this they sit in the left 60% with a dead half
   beside them. Centred on a readable measure, matching the live hero this
   replaces. Scoped to --single so a hero that ever regains an aside is
   untouched.

   Centring is done with auto inline margins, NOT by making __main a centred
   flex column: that shrink-wraps the facts block, which collapses its 2x2 grid
   into a single stack four rows tall. */
/* One line at desktop: the 20ch cap wrapped the longer family names
   (Diagrammatic Reasoning Test). Mobile still wraps via the fluid clamp. */
/* Fact cells stay left-aligned inside the centred block: a label above a value
   reads as a column, and centring each cell makes the pairs wander. */

/* Breadcrumb centred with the hero. It sits INSIDE the hero band, above the H1
   — the conventional, more accessible position, since it says where you are
   before you read the title — so left-aligning it under a fully centred hero
   left it looking orphaned. (The live page dodges this by putting its
   breadcrumb BELOW the centred hero, where left alignment is correct because it
   joins left-aligned content. Keeping it above the H1 is the better trade.)
   Scoped to this template: the other v2 heroes are left-aligned. */

/* Rail unboxed (this template only, Guy 2026-09-01): the cards and both
   contents navs lose their outline, radius, padding and background, so the
   blocks separate by space and the row rules are the only structure. The
   other five profile templates keep the boxed rail. */

/* Types-of-question band: the cluster's front door. Two columns desktop,
   one below 980px, matching the guide's breakpoints. */
@media (max-width: 980px) { .tv2 .tv2-qtypes__grid { grid-template-columns: 1fr; } }

/* Trailing hub link under a card grid (publishers card set). */

/* Diagram frame (HANDOFF §16 shared grammar). */

/* Reviews, this template only: cards sit side by side and the quote leads.
   The shared stacked-card style (v2-core) stays for the employer template.
   One padding rhythm across the tail (videos, FAQs band, reviews), and the
   reviews section drops its v1-era centred head and hairline divider. */
.tv2 .tv2-videos { padding: 64px 0; }

/* Page closer: one quiet line back to the free test. */

/* Byline spans above the intro grid, so the contents panel top-aligns with
   the "What is" heading rather than with the metadata line. */

/* "What's inside" strip: the difficulty mix as a segmented bar (§16 grammar:
   one hue in shades, mono micro-label, figures in the legend). */
.tv2 .tv2-inside { margin: 18px 0 0; max-width: 560px; }
.tv2 .tv2-inside__label { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #5A6478; margin-bottom: 10px; }
.tv2 .tv2-inside__bar { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; }
.tv2 .tv2-inside__seg { display: block; }
.tv2 .tv2-inside__seg--easy { background: #EEF4FF; }
.tv2 .tv2-inside__seg--medium { background: #DCE8FF; }
.tv2 .tv2-inside__seg--hard { background: #1257E8; }
.tv2 .tv2-inside__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font: 500 13px/1.4 'IBM Plex Mono', monospace; color: #414B5E; font-variant-numeric: tabular-nums; }
.tv2 .tv2-inside__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; border: 1px solid #C9D3E4; }
.tv2 .tv2-inside__swatch--easy { background: #EEF4FF; }
.tv2 .tv2-inside__swatch--medium { background: #DCE8FF; }
.tv2 .tv2-inside__swatch--hard { background: #1257E8; border-color: #1257E8; }
.tv2 .tv2-inside__skills { margin-top: 24px; max-width: 560px; }
.tv2 .tv2-inside__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tv2 .tv2-inside__tags li { margin: 0; padding: 6px 10px; border: 1px solid #DFE6F2; border-radius: 5px; background: #F7F9FD; color: #414B5E; font-size: 13px; line-height: 1.4; }
.tv2 .tv2-test-heading { margin-bottom: 56px; }
.tv2 .tv2-test-heading__launch { margin-top: 24px; line-height: 1.8; }
.tv2 .tv2-test-download { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 18px 20px; border-radius: 8px; background: #F5F8FD; border: 1px solid #E3EAF5; }
.tv2 .tv2-test-download__icon { flex-shrink: 0; margin-top: 2px; color: #1257E8; }
.tv2 .tv2-test-download__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #14203A; }
.tv2 .tv2-test-download .tv2-test-heading__note { line-height: 1.8; }
.tv2 .tv2-test-download__reassurance { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #5A6478; }
@media (max-width: 600px) {
  .tv2 .tv2-test-heading { margin-bottom: 40px; }
  .tv2 .tv2-test-download { padding: 16px; }
}

.tv2 .tv2-inside__tags li.tv2-inside__tag-link { padding: 0; border-color: #C8D8F7; }
.tv2 .tv2-inside__tag-link a { display: block; padding: 6px 10px; color: #1257E8; text-decoration: none; border-radius: 4px; }
.tv2 .tv2-inside__tag-link a:hover { background: #E9F0FF; text-decoration: underline; }
.tv2 .tv2-inside__tag-link a:focus-visible { outline: 2px solid #1257E8; outline-offset: 3px; }
.tv2 .tv2-inside__tag-link span { margin-left: 4px; }

/* Question 1 on load, under the hero (lean pages, SERP study 25 Sep 2026).
   A tinted band, joined straight onto the hero (the hero's hairline is dropped
   via v2_hero_flush), so the white question card reads as the first thing to do. */
.tv2-hero-band--flush + .tv2-q1-band { margin-top: -20px; }
.tv2-q1-band { background: #F5F8FD; }
.tv2-q1-band__inner { max-width: 1120px; margin: 0 auto; padding: 32px 24px; }
.tv2 .tv2-q1 { margin: 0; }
.tv2 .tv2-q1 .free-test-question { margin: 0; box-shadow: 0 1px 3px rgba(20, 30, 50, 0.08); }
/* The question card itself: a plain "Question 1 of N" label, no divider, the
   table caption moved under the table so the answers line up with its top, and
   a quiet text-link solution toggle so people answer before they look. */
.tv2 .tv2-q1 .free-test-question__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.tv2 .tv2-q1 .free-test-question__num { background: none; color: #5A6478; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tv2 .tv2-q1 .free-test-table caption { caption-side: bottom; padding: 10px 0 0; font-weight: 500; }
.tv2 .tv2-q1 .free-test-solution { margin-top: 8px; }
.tv2 .tv2-q1 .free-test-solution__summary { display: inline-flex; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; }
.tv2 .tv2-q1 .free-test-solution[open] .free-test-solution__summary { margin-bottom: 12px; }
.tv2 .tv2-q1 .free-test-solution__body { border-top: 1px solid var(--ft-border); border-radius: 8px; }
.tv2 .tv2-q1 .tv2-q1__after { grid-column: 1 / -1; }
.tv2 .tv2-q1 .tv2-q1__after[hidden] { display: none; }
.tv2-q1__after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px; }
.tv2-q1__mark { margin: 0; font-size: 15px; line-height: 1.5; color: #414B5E; }
.tv2 a.tv2-q1__carry { padding: 9px 16px; font-size: 15px; }
.tv2-q1__mark:empty { display: none; }
/* Question 1 typography, simplified (Guy, 25 Sep 2026): one weight for the
   question, one for labels, regular for everything else. The solution sits on
   the band's own tint with no separate label, since the toggle already names it. */
.tv2 .tv2-q1 .free-test-question__num { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.tv2 .tv2-q1 .free-test-question__tag { font-size: 13px; font-weight: 500; }
.tv2 .tv2-q1 .free-test-question__stem { font-size: 19px; font-weight: 600; }
.tv2 .tv2-q1 .free-test-table { font-size: 15px; }
.tv2 .tv2-q1 .free-test-table thead th { font-weight: 600; }
.tv2 .tv2-q1 .free-test-table thead th:not(:first-child) { text-align: right; }
.tv2 .tv2-q1 .free-test-table th[scope="row"] { font-weight: 400; }
.tv2 .tv2-q1 .free-test-table caption { font-size: 14px; font-weight: 400; }
.tv2 .tv2-q1 .free-test-option__label { font-size: 15px; }
.tv2 .tv2-q1 .free-test-option__letter { font-weight: 600; }
.tv2 .tv2-q1 .free-test-solution__body { background: #F5F8FD; border-color: #E3EAF5; font-size: 15px; }
.tv2 .tv2-q1 .free-test-solution__body::before { content: none; }
.tv2 .tv2-q1 .free-test-question__options .free-test-option__label::after { font-weight: 500; }
/* Question 1 answer states, on the v2 palette (navy #14203A, azure #1257E8,
   green #0E7A50, red #C22A22). Cards stay white with a neutral border (Guy: no
   full coloured bars); colour lives only in the letter circle and a small label, and the untouched options fade back once an answer is in. */
.tv2 .tv2-q1 .free-test-option__label { align-items: center; padding: 12px 16px; border-width: 1px; border-color: #DFE3EA; transition: border-color .15s, background .15s, opacity .15s; }
.tv2 .tv2-q1 .free-test-option__label:hover { border-color: #1257E8; background: #F6F8FC; }
.tv2 .tv2-q1 .free-test-option__letter { min-width: 28px; height: 28px; border-radius: 50%; background: #EEF1F6; color: #14203A; font-size: 13px; }
.tv2 .tv2-q1 .free-test-option__body { padding-top: 0; }
.tv2 .tv2-q1 .free-test-option__input:checked + .free-test-option__label { box-shadow: none; }
.tv2 .tv2-q1 .free-test-option.is-correct .free-test-option__label { border-color: #DFE3EA; background: #fff; box-shadow: none; }
.tv2 .tv2-q1 .free-test-option.is-correct .free-test-option__letter { background: #0E7A50; color: #fff; }
.tv2 .tv2-q1 .free-test-option.is-incorrect .free-test-option__label { border-color: #DFE3EA; background: #fff; box-shadow: none; }
.tv2 .tv2-q1 .free-test-option.is-incorrect .free-test-option__letter { background: #C22A22; color: #fff; }
.tv2 .tv2-q1 .free-test-option.is-correct .free-test-option__label::after { content: "\2713  Correct"; font-size: 13px; font-weight: 600; padding-left: 12px; }
.tv2 .tv2-q1 .free-test-option.is-incorrect .free-test-option__label::after { content: "\2717  Your answer"; font-size: 13px; font-weight: 600; padding-left: 12px; }
.tv2 .tv2-q1 .free-test-question__options:has(.is-correct) .free-test-option:not(.is-correct):not(.is-incorrect) .free-test-option__label { opacity: .55; }
.tv2 .tv2-q1 .free-test-option.is-correct .free-test-option__input:focus-visible + .free-test-option__label,
.tv2 .tv2-q1 .free-test-option.is-incorrect .free-test-option__input:focus-visible + .free-test-option__label { outline: 0; }
.tv2 .tv2-q1 .free-test-question__options:has(.is-correct) .free-test-option__label:hover { border-color: #DFE3EA; background: #fff; }
/* Verbal: question 1's passage sits above the card, as a plain reading panel. */
/* Shape answers (abstract, spatial, diagrammatic) keep their corner badge, so it
   carries only the tick or cross; the word labels above are for text answers. */
.tv2 .tv2-q1 .free-test-option--shape .free-test-option__label { flex-direction: column; align-items: center; }
.tv2 .tv2-q1 .free-test-option--shape.is-correct .free-test-option__label::after { content: "\2713"; padding: 0; font-size: 12px; background: #0E7A50; color: #fff; }
.tv2 .tv2-q1 .free-test-option--shape.is-incorrect .free-test-option__label::after { content: "\2717"; padding: 0; font-size: 12px; background: #C22A22; color: #fff; }
.tv2 .tv2-q1 .ft-diagram { background: none; border: 0; padding: 0; }
.tv2 .tv2-q1 .ft-diagram svg { max-width: 420px; max-height: 260px; margin: 8px auto 16px; }
/* Verbal: passage and question share one white card, passage left, question right
   (as in the full test), stacking on narrow screens. */
.tv2 .tv2-q1--verbal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 40px; align-items: start;
  background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-radius); padding: 2.52rem; box-shadow: 0 1px 3px rgba(20, 30, 50, 0.08); }
.tv2 .tv2-q1--verbal .tv2-q1__passage { position: static; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.tv2 .tv2-q1__passage-label { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #5A6478; }
.tv2 .tv2-q1--verbal .ft-passage__body { font-size: 16px; line-height: 1.65; color: #14203A; }
.tv2 .tv2-q1--verbal > .free-test-solution,
.tv2 .tv2-q1--verbal > .tv2-q1__after { grid-column: 1 / -1; margin-top: 0; }
.tv2 .tv2-q1--verbal .free-test-question { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
@media (max-width: 760px) {
  .tv2 .tv2-q1--verbal { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
}
.tv2 .tv2-q1 .ft-rank th { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }
@media (max-width: 600px) {
  .tv2 .tv2-q1 .ft-rank { table-layout: fixed; font-size: 14px; }
  .tv2 .tv2-q1 .ft-rank th, .tv2 .tv2-q1 .ft-rank td { padding: 8px 6px; }
  .tv2 .tv2-q1 .ft-rank th:not(:first-child), .tv2 .tv2-q1 .ft-rank td.opt { width: 58px; }
  .tv2 .tv2-q1 .ft-rank th { font-size: 12px; }
  .tv2 .tv2-q1 .ft-rank td { overflow-wrap: anywhere; }
}
.tv2 .tv2-q1 .ft-rank thead th { color: #14203A; }
.tv2 .tv2-q1 .ft-rank thead th:first-child { text-align: left; }
/* Shape questions: no panel behind the sequence, more air before the answers,
   and the answer cards share the full width of the card. */
.tv2 .tv2-q1 .ft-seq { background: none; border: 0; padding: 0; margin: 4px 0 32px; gap: 12px; }
.tv2 .tv2-q1 .free-test-question__options--wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px; }
.tv2 .tv2-q1 .free-test-option--shape .free-test-option__label { width: 100%; padding: 16px 12px 20px; }
.tv2 .tv2-q1 .ft-seq .ft-cell { width: 76px; height: 76px; }
.tv2 .tv2-q1 .ft-seq .ft-cell svg { width: 52px; height: 52px; }
@media (max-width: 600px) { .tv2 .tv2-q1 .ft-seq .ft-cell { width: 54px; height: 54px; } .tv2 .tv2-q1 .ft-seq .ft-cell svg { width: 38px; height: 38px; } }
/* Spatial figure questions: the answer cards are wide here, so the cubes and nets can be too. */
.tv2 .tv2-q1 .free-test-question--figure .free-test-option--shape .ft-cell { width: 112px; height: 112px; }
.tv2 .tv2-q1 .free-test-question--figure .free-test-option--shape .ft-cell svg { width: 108px; height: 108px; }
@media (max-width: 600px) { .tv2 .tv2-q1 .free-test-question--figure .free-test-option--shape .ft-cell { width: 84px; height: 84px; } .tv2 .tv2-q1 .free-test-question--figure .free-test-option--shape .ft-cell svg { width: 80px; height: 80px; } }