/* ============================================================
   FREE TOOLS (exams/templates/exams/*): calculators, calendar
   ------------------------------------------------------------
   Plain CSS, no Tailwind. Sits on top of course-pages.css (cs-kicker,
   cs-wrap, cs-seo) and the design-system tokens (--text-*, --space-*,
   --pad-x, .sec-solid, .sec-blue, .btn-cobalt). Every selector is
   prefixed tl- . No pills, gradients, icon grids or counters: rules,
   spacing and type do the work. Each tool keeps its own commented block.
   ============================================================ */

/* ============================================================
   Shared page chrome (calculator; reusable by other tools)
   ============================================================ */
.tl { color: var(--cs-ink, #12192b); }
.tl-head { padding-bottom: 0; }
.tl-crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 var(--space-md, 28px); padding: 0;
  font-family: 'Inter', sans-serif; font-size: var(--text-xs, 12px); color: #94a3b8;
}
.tl-crumbs li + li::before { content: '\203A'; margin-right: 6px; color: #cbd5e1; }
.tl-crumbs a { color: #64748b; text-decoration: none; }
.tl-crumbs a:hover { color: var(--cs-blue, #1d4ed8); text-decoration: underline; }
.tl-crumbs [aria-current] { color: #475569; }
.tl-h1 {
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.12;
  color: var(--cs-navy, #172554); margin: 0;
}
.tl-h2 {
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.2;
  color: var(--cs-navy, #172554); margin: 0 0 12px;
}
.tl-meta {
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px);
  color: var(--cs-slate, #64748b); margin: 12px 0 0;
}
.tl-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tl-answer {
  font-family: 'Inter', sans-serif; font-size: var(--text-lg, 18px); line-height: 1.6;
  color: #334155; margin: var(--space-md, 28px) 0 0;
  padding-left: 16px; border-left: 3px solid var(--cs-navy, #172554);
}
.tl p { line-height: 1.65; }
.tl-answer a, .tl-explain a, .tl-results a { color: var(--cs-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 2px; }
.tl-note { font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); margin: 10px 0 0; }
.tl-error { color: #b91c1c; font-size: var(--text-sm, 14px); margin: 6px 0 0; }

/* ============================================================
   Score calculator (WP B5): band strip, form, results, CTA
   ============================================================ */

/* Band strip: the ACST report band scale in HTML. Lowest 50% on the
   left, segment widths in proportion, the band in play tinted. */
.tl-strip { margin: 16px 0; }
.tl-strip__bar {
  display: flex; height: 22px;
  border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 4px; overflow: hidden;
  background: #fff;
}
.tl-strip__seg { display: block; height: 100%; transition: background-color .15s ease; }
.tl-strip__seg + .tl-strip__seg { border-left: 1px solid var(--cs-hair, #e2e8f0); }
.tl-strip__seg--b4, .tl-strip__item--b4 { flex: 50 1 0; }
.tl-strip__seg--b3, .tl-strip__item--b3 { flex: 25 1 0; }
.tl-strip__seg--b2, .tl-strip__item--b2 { flex: 15 1 0; }
.tl-strip__seg--b1, .tl-strip__item--b1 { flex: 10 1 0; }
.tl-strip__seg.is-on { background: #dbe3fb; box-shadow: inset 0 -3px 0 var(--cs-navy, #172554); }
.tl-strip__key {
  display: flex; list-style: none; margin: 6px 0 0; padding: 0;
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.3;
}
.tl-strip__item { min-width: 0; padding-right: 4px; color: var(--cs-slate, #64748b); }
.tl-strip__label { display: block; font-weight: 500; }
.tl-strip__sub { display: block; font-size: 11px; }
.tl-strip__item.is-on .tl-strip__label { color: var(--cs-ink, #12192b); font-weight: 600; }
/* The narrow top bands cannot hold a label at phone width: the key
   becomes two rows of two, still lowest first. */
@media (max-width: 520px) {
  .tl-strip__key { flex-wrap: wrap; row-gap: 8px; }
  .tl-strip__key .tl-strip__item { flex: 1 1 50%; }
}
.tl-strip--compact { margin: 10px 0 0; }
.tl-strip--compact .tl-strip__bar { height: 8px; border-radius: 3px; }
.tl-strip--compact .tl-strip__seg.is-on { background: var(--cs-navy, #172554); box-shadow: none; }

/* Form */
.tl-form { margin-top: 8px; }
.tl-field {
  background: #fff; border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 6px;
  padding: 14px 16px; margin-bottom: 12px;
}
.tl-field__label {
  display: block; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: var(--text-base, 16px); color: var(--cs-navy, #172554); margin-bottom: 8px;
}
.tl-field__input { display: flex; align-items: center; gap: 10px; }
.tl-field__input input {
  width: 6.5rem; padding: 8px 10px;
  font: 500 var(--text-lg, 18px) 'Inter', sans-serif; color: var(--cs-ink, #12192b);
  border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
}
.tl-field__input input:focus { outline: 2px solid var(--cs-blue, #1d4ed8); outline-offset: 1px; border-color: transparent; }
.tl-field__of { font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }
.tl-field__hint { font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); margin: 8px 0 0; }
.tl-field.has-error { border-color: #fca5a5; }
.tl-field.has-error input { border-color: #b91c1c; }
.tl-field.has-error .tl-field__hint { color: #b91c1c; }
.tl-form__foot { margin-top: 16px; }
.tl-form__foot .tl-note { margin-top: 12px; }

/* Results */
.tl-result { border-top: 1px solid var(--cs-hair, #e2e8f0); padding: 18px 0 6px; }
.tl-result:first-of-type { border-top: 2px solid var(--cs-navy, #172554); }
.tl-result__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tl-result__head h3 {
  font-family: 'Lora', serif; font-weight: 600; font-size: var(--text-lg, 18px);
  color: var(--cs-navy, #172554); margin: 0;
}
.tl-result__mark { margin: 0; color: var(--cs-slate, #64748b); font-size: var(--text-sm, 14px); }
.tl-result__pct { margin: 8px 0 0; }
.tl-result__pct .ta-pubfig__value { font-weight: 600; font-size: var(--text-lg, 18px); color: var(--cs-navy, #172554); }
.tl-result__pct .ta-pubfig__meta { font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }
.tl-result__pct .ta-pubfig--locked { color: var(--cs-slate, #64748b); }
.tl-result__band { margin: 0; }
.tl-result__next { margin: 8px 0 0; color: #334155; }
.tl-note--guide { border-left: 2px solid #cbd5e1; padding-left: 10px; }

/* One CTA strip */
.tl-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tl-cta__inner p { margin: 0; color: #334155; }
@media (max-width: 640px) {
  .tl-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Exam calendar (WP B2): sourced date tables, feeds, reminder form
   ============================================================ */
.tl-exam + .tl-exam { padding-top: 0; }
.tl-exam a, .tl-feeds a, .tl-remind a, .tl-cta p a, .tl-head .tl-meta a {
  color: var(--cs-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 2px;
}
.tl-cycle {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #1e3a8a;
  margin: var(--space-md, 28px) 0 10px;
}
.tl-h2 + .tl-cycle { margin-top: 6px; }

/* The table scrolls inside its own box on a phone; the page never does. */
.tl-cal-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 8px; background: #fff;
}
.tl-cal {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); line-height: 1.55;
}
.tl-cal th, .tl-cal td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0);
}
.tl-cal thead th {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8;
  background: var(--cs-paper, #fbfaf6); border-bottom: 2px solid var(--cs-navy, #172554);
}
.tl-cal tbody tr:last-child td { border-bottom: none; }
.tl-cal-date {
  width: 30%; font-weight: 600; color: var(--cs-navy, #172554);
}
.tl-cal-what { display: block; font-weight: 600; color: var(--cs-ink, #12192b); }
.tl-cal-sub { display: block; color: #475569; }
.tl-cal-guide { margin: 8px 0 0; color: #334155; }
.tl-cal-guide strong { font-weight: 600; color: var(--cs-navy, #172554); }
.tl-cal-src { margin: 6px 0 0; font-size: 12.5px; color: var(--cs-slate, #64748b); }
.tl-cal-add { width: 22%; }
.tl-cal-add a, .tl-cal-add span { display: block; white-space: nowrap; }
.tl-cal-add a + a { margin-top: 4px; }
.tl-cal-add span { color: #94a3b8; }

/* Status is a word, not a badge. */
.tl-status {
  display: block; margin-top: 3px;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #1e3a8a;
}
.tl-status--expected { color: #b45309; }
.tl-cal tr.is-past td { color: #94a3b8; }
.tl-cal tr.is-past .tl-cal-date, .tl-cal tr.is-past .tl-cal-what, .tl-cal tr.is-past .tl-status { color: #94a3b8; }

/* On a phone each row becomes a block (date, what, links) as the
   cs-compare device does, so nothing is clipped behind a scroll. */
@media (max-width: 600px) {
  .tl-cal-wrap { overflow: visible; }
  .tl-cal { min-width: 0; display: block; }
  .tl-cal thead { display: none; }
  .tl-cal tbody, .tl-cal tr, .tl-cal td { display: block; width: auto; }
  .tl-cal tr { padding: 12px 14px; border-bottom: 1px solid var(--cs-hair, #e2e8f0); }
  .tl-cal tbody tr:last-child { border-bottom: none; }
  .tl-cal td { padding: 0; border-bottom: none; }
  .tl-cal-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
  .tl-cal-date .tl-status { margin-top: 0; }
  .tl-cal-add { margin-top: 8px; }
  .tl-cal-add a, .tl-cal-add span { display: inline-block; margin: 0 16px 0 0; }
  .tl-cal-add a + a { margin-top: 0; }
  .tl-feed-name { flex-basis: 100%; }
}

/* Feeds: one ruled line per exam. */
.tl-feed-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid #dbe3f0; }
.tl-feed-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding: 12px 0; border-bottom: 1px solid #dbe3f0;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px);
}
.tl-feed-name { min-width: 6.5rem; font-weight: 600; color: var(--cs-navy, #172554); }

/* Reminder form */
.tl-remind__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px); align-items: start;
}
@media (max-width: 760px) { .tl-remind__grid { grid-template-columns: minmax(0, 1fr); } }
.tl-remind__form {
  background: #fff; border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 8px;
  padding: 18px 18px 20px;
}
.tl-remind__label {
  display: block; padding: 0; margin: 14px 0 6px;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); font-weight: 600;
  color: var(--cs-navy, #172554);
}
.tl-remind__form > .tl-remind__label:first-of-type { margin-top: 0; }
.tl-remind__opt { font-weight: 400; color: var(--cs-slate, #64748b); }
.tl-remind__input {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: 400 16px 'Inter', sans-serif; color: var(--cs-ink, #12192b);
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
}
.tl-remind__input:focus { outline: 2px solid var(--cs-blue, #1d4ed8); outline-offset: 1px; border-color: transparent; }
.tl-remind__input[aria-invalid="true"] { border-color: #b91c1c; }
.tl-remind__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.tl-remind__check {
  display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); line-height: 1.5; color: #334155;
}
.tl-remind__check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--cs-blue, #1d4ed8); }
.tl-remind__check--optin { margin: 16px 0 18px; color: var(--cs-slate, #64748b); }
.tl-remind__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tl-remind__done { border-left: 3px solid var(--cs-navy, #172554); padding: 4px 0 4px 16px; }
.tl-remind__done-title {
  font-family: 'Lora', serif; font-style: italic; font-size: var(--text-xl, 20px);
  color: var(--cs-navy, #172554); margin: 0 0 6px;
}
.tl-remind__done p { margin: 0; color: #334155; }

/* ============================================================
   apply pages (WP E3): /how-to-apply-selective-high-school/ and
   /how-to-apply-opportunity-class/. Every selector is tl-apply-.
   A ruled, numbered guide set like print: serif numerals in a
   gutter, hairlines between steps, small capitals for labels.
   The print block at the end makes "Print this checklist" a clean
   one-page sheet (html.tl-apply-print-checklist is set by the
   button) and strips the site chrome from a whole-page print.
   ============================================================ */
.tl-apply a:not(.btn) { color: var(--cs-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 2px; }
.tl-apply .tl-crumbs a { color: #64748b; text-decoration: none; }
.tl-apply-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Answer first: three labelled facts */
.tl-apply-facts { margin: var(--space-md, 28px) 0 0; border-top: 2px solid var(--cs-navy, #172554); }
.tl-apply-fact {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 20px;
  padding: 14px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0);
}
.tl-apply-fact dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #1e3a8a; padding-top: 3px;
}
.tl-apply-fact dd {
  margin: 0; font-family: 'Inter', sans-serif; font-size: var(--text-base, 16px);
  line-height: 1.6; color: #1e293b;
}
@media (max-width: 640px) {
  .tl-apply-fact { grid-template-columns: minmax(0, 1fr); }
}

/* Timeline strip: one ruled line per date */
.tl-apply-strip { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-apply-strip__row {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto; gap: 4px 16px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0);
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px);
}
.tl-apply-strip__date { font-weight: 600; color: var(--cs-navy, #172554); font-variant-numeric: tabular-nums; }
.tl-apply-strip__what { color: #1e293b; }
.tl-apply-strip__note { display: block; font-size: 12.5px; color: var(--cs-slate, #64748b); }
.tl-apply-strip__row.is-past { color: #94a3b8; }
.tl-apply-strip__row.is-past .tl-apply-strip__date,
.tl-apply-strip__row.is-past .tl-apply-strip__what { color: #94a3b8; }
.tl-apply-strip__row.is-next { box-shadow: inset 3px 0 0 var(--cs-navy, #172554); padding-left: 12px; }
@media (max-width: 560px) {
  .tl-apply-strip__row { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-apply-strip__what { grid-column: 1 / -1; grid-row: 2; }
}

/* The numbered steps */
.tl-apply-steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: none; }
.tl-apply-step {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 12px;
  padding: 26px 0 24px; border-top: 1px solid var(--cs-hair, #e2e8f0);
  scroll-margin-top: 72px;
}
.tl-apply-step:first-child { border-top: 2px solid var(--cs-navy, #172554); }
.tl-apply-step__num {
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: 2.1rem; line-height: 1; color: var(--cs-navy, #172554);
  font-variant-numeric: lining-nums;
}
.tl-apply-step__title {
  font-family: 'Lora', serif; font-weight: 600; font-size: var(--text-xl, 20px);
  line-height: 1.3; color: var(--cs-navy, #172554); margin: 2px 0 6px;
}
.tl-apply-step__when {
  margin: 0 0 10px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: var(--text-sm, 14px); color: #1e293b;
}
.tl-apply-step__do, .tl-apply-traps ul, .tl-apply-links { list-style: disc; }
.tl-apply-step__do li::marker, .tl-apply-traps li::marker, .tl-apply-links li::marker { color: #94a3b8; }
.tl-apply-step__do { margin: 0; padding-left: 1.1em; }
.tl-apply-step__do li { margin: 0 0 8px; line-height: 1.65; color: #334155; }
.tl-apply-step__aside {
  margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--cs-hair, #e2e8f0);
  font-size: var(--text-sm, 14px); color: #334155;
}
.tl-apply-traps { margin: 14px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid #b45309; }
.tl-apply-traps__head {
  margin: 0 0 4px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #92400e;
}
.tl-apply-traps ul { margin: 0; padding-left: 1.1em; }
.tl-apply-traps li { margin: 0 0 6px; line-height: 1.6; color: #334155; font-size: var(--text-sm, 14px); }
.tl-apply-step__meta { margin: 14px 0 0; font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.55; color: var(--cs-slate, #64748b); }
.tl-apply-step__meta > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 10px; margin-top: 3px; }
.tl-apply-step__meta dt { font-weight: 600; color: #475569; }
.tl-apply-step__meta dd { margin: 0; }
.tl-apply-step__meta a { color: inherit; }
@media (max-width: 560px) {
  .tl-apply-step { grid-template-columns: minmax(0, 1fr); }
  .tl-apply-step__num { font-size: 1.6rem; margin-bottom: 4px; }
  .tl-apply-step__meta > div { grid-template-columns: minmax(0, 1fr); }
}

/* Who it applies to: the cs-compare table, first column a little wider */
.tl-apply-matrix tbody th { white-space: normal; min-width: 11rem; }
.tl-apply-matrix td:first-child { white-space: normal; }

/* Printable checklist */
.tl-apply-checklist__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tl-apply-checklist__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-apply-checklist__list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0); line-height: 1.5; color: #1e293b;
}
.tl-apply-box {
  flex: none; width: 16px; height: 16px; margin-top: 3px;
  border: 1.5px solid var(--cs-navy, #172554); border-radius: 2px; background: #fff;
}
.tl-apply-checklist__foot { margin: 12px 0 0; font-size: 12.5px; color: var(--cs-slate, #64748b); overflow-wrap: anywhere; }

/* Help links and "More in" */
.tl-apply-links { margin: 10px 0 0; padding-left: 1.1em; }
.tl-apply-links li { margin: 0 0 6px; }
.tl-apply-more__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-apply-more__list li { padding: 12px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0); }
.tl-apply-more__list a { font-weight: 600; }
.tl-apply-more__list span { display: block; font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }

@media print {
  body:has(> main.tl-apply) > *:not(main) { display: none !important; }
  .tl-apply .tl-cta, .tl-apply .tl-apply-print { display: none !important; }
  .tl-apply section, .tl-apply nav { background: #fff !important; padding-top: 12px; padding-bottom: 12px; }
  .tl-apply a:not(.btn) { color: #000; }
  .tl-apply-step { break-inside: avoid; }

  html.tl-apply-print-checklist main.tl-apply > *:not(.tl-apply-checklist) { display: none !important; }
  html.tl-apply-print-checklist .tl-apply-checklist { padding: 0 !important; }
  html.tl-apply-print-checklist .tl-apply-checklist .cs-wrap { max-width: none; padding: 0; }
  html.tl-apply-print-checklist .tl-apply-checklist .tl-h2 { font-size: 16pt; margin-bottom: 6pt; color: #000; }
  html.tl-apply-print-checklist .tl-apply-checklist__list li { padding: 5pt 0; font-size: 10.5pt; break-inside: avoid; }
  html.tl-apply-print-checklist .tl-apply-box { border-color: #000; }
  html.tl-apply-print-checklist .tl-apply-checklist__foot { font-size: 8.5pt; color: #333; }
}

/* ============================================================
   readiness (WP B9): /selective-readiness-check/ and
   /oc-readiness-check/. Every selector is tl-ready-. The question
   surface itself is the .ts-* system (test-surface.css), always
   light; the rules below only turn its full-viewport application
   layout into cards stacked down a document, as the battle replay
   does (learnhub.css, BATTLE REPLAY).
   ============================================================ */
.tl-ready-sec .cs-wrap { max-width: 1080px; }
.tl-ready-intro { max-width: 720px; }
.tl-ready-year { max-width: 260px; }
.tl-ready-startrow { margin: 18px 0 0; }
.tl-ready-form .tl-ready-foot { margin-top: 20px; }

/* Sticky position and clock while the check runs. */
.tl-ready-bar {
  /* Under the site's sticky header (base.html: clamp(48px, 7vw, 58px)). */
  position: sticky; top: calc(clamp(48px, 7vw, 58px) + 8px); z-index: 5;
  scroll-margin-top: calc(clamp(48px, 7vw, 58px) + 8px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 12px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); color: #334155;
}
.tl-ready-bar[hidden] { display: none; }
.tl-ready-bar__answered { color: var(--cs-slate, #64748b); }
.tl-ready-clock {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: var(--text-lg, 18px); color: var(--cs-navy, #172554);
}
.tl-ready-clock.is-low { color: #b91c1c; }
.tl-ready-live { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tl-ready-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tl-ready-nav[hidden] { display: none; }
.tl-ready-nav [hidden] { visibility: hidden; display: inline-flex; }

/* One question: a label line over a bordered, always-light surface. */
.tl-ready-q { margin: 0 0 22px; }
.tl-ready-q[hidden] { display: none; }
.tl-ready-q__label {
  margin: 0 0 8px; font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px);
  font-weight: 600; color: var(--cs-navy, #172554);
}
.tl-ready-q--gone { background: #fff; border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 8px; padding: 14px 16px; }
.tl-ready-q--gone p { margin: 0; }
.tl-ready .tl-ready-surface {
  height: auto; min-height: 0;
  color-scheme: light; background: var(--ts-paper, #fff); color: var(--ts-ink, #111827);
  border: 1px solid var(--ts-rule, #e5e7eb); border-radius: 8px; overflow: hidden;
}
.tl-ready .tl-ready-surface .ts-split { flex: 0 0 auto; min-height: 0; }
.tl-ready .tl-ready-surface .ts-pane__body { overflow: visible; overscroll-behavior: auto; }
.tl-ready .tl-ready-surface .ts-panehead__toggle,
.tl-ready .tl-ready-surface .ts-divider,
.tl-ready .tl-ready-surface .ts-rail,
.tl-ready .tl-ready-surface .ts-paneswitch { display: none !important; }
.tl-ready .tl-ready-surface .ts-pane--passage { border-right: 1px solid var(--ts-rule, #e5e7eb); }
/* A long passage scrolls inside its own column beside the question. */
@media (min-width: 768px) {
  .tl-ready .tl-ready-surface .ts-pane--passage .ts-pane__body { max-height: 70vh; overflow-y: auto; }
}
@media (max-width: 767px) {
  .tl-ready .tl-ready-surface .ts-pane--passage { border-right: 0; border-bottom: 1px solid var(--ts-rule, #e5e7eb); }
  .tl-ready .tl-ready-surface .ts-pane--passage .ts-pane__body { max-height: 60vh; overflow-y: auto; }
}
.tl-ready-explain { margin: 0 var(--ts-8, 32px) var(--ts-6, 24px); border-top: 1px solid var(--ts-rule, #e5e7eb); padding-top: 12px; }
.tl-ready-explain summary { cursor: pointer; font-weight: 600; color: var(--ts-accent, #1d4ed8); }
@media (max-width: 767px) { .tl-ready-explain { margin: 0 16px 16px; } }

/* Result: the three tiers as ruled lines, then the questions by tier. */
.tl-ready-tiers { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-ready-tiers li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0); font-family: 'Inter', sans-serif;
}
.tl-ready-tiers__val { color: var(--cs-navy, #172554); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-ready-group + .tl-ready-group { margin-top: 28px; }
.tl-ready-group__count {
  display: block; margin-top: 2px; font-family: 'Inter', sans-serif; font-style: normal;
  font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b);
}
.tl-ready-soon .btn { margin-top: 6px; }

/* ============================================================
   practice pages (WP B10): section sample questions, writing
   practice, and the embedded item document (html.tl-prac-embed)
   ============================================================ */
.tl-prac a:not(.btn) { color: var(--cs-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 2px; }
.tl-prac .tl-crumbs a { color: #64748b; text-decoration: none; }

/* Exam tabs: two plain links with a rule under the current one. */
.tl-prac-tabs {
  display: flex; gap: 24px; margin: var(--space-md, 28px) 0 0;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0);
  font-family: 'Inter', sans-serif; font-size: var(--text-base, 16px);
}
.tl-prac .tl-prac-tabs a {
  color: var(--cs-slate, #64748b); text-decoration: none;
  padding: 8px 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tl-prac .tl-prac-tabs a:hover { color: var(--cs-navy, #172554); }
.tl-prac .tl-prac-tabs a[aria-current] { color: var(--cs-navy, #172554); font-weight: 600; border-bottom-color: var(--cs-navy, #172554); }

/* Items: wide enough that the test surface gets its two-column layout on
   a desktop; one column (with its Passage/Question switch) on a phone. */
.tl-prac-wide { max-width: 1040px; }
.tl-prac-item { padding: 22px 0 10px; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-prac-item:first-of-type { border-top: 2px solid var(--cs-navy, #172554); }
.tl-prac-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-prac-item__head h3 {
  font-family: 'Lora', serif; font-weight: 600; font-size: var(--text-lg, 18px);
  color: var(--cs-navy, #172554); margin: 0;
}
.tl-prac-item__type { margin: 0; font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }
.tl-prac-frame {
  display: block; width: 100%; height: 520px; border: 1px solid var(--cs-hair, #e2e8f0);
  border-radius: 6px; background: #fff;
}
.tl-prac-norm { margin: 8px 0 0; font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }
.tl-prac-empty { border-left: 3px solid var(--cs-hair, #e2e8f0); padding-left: 16px; }
.tl-prac-typelist { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.tl-prac-typelist li { break-inside: avoid; margin: 0 0 8px; line-height: 1.45; }
@media (max-width: 640px) { .tl-prac-typelist { columns: 1; } }

/* Writing prompts and the marker's tabs */
.tl-prac-year {
  font-family: 'Lora', serif; font-weight: 600; font-size: var(--text-lg, 18px);
  color: var(--cs-navy, #172554); margin: 24px 0 8px;
}
.tl-prac-prompts { margin: 0; padding-left: 1.4em; }
.tl-prac-prompt { padding: 12px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0); }
.tl-prac-prompt__body { color: #334155; line-height: 1.6; overflow-wrap: anywhere; }
.tl-prac-prompt__body img { max-width: 100%; height: auto; }
.tl-prac-prompt__body p { margin: 0 0 8px; }
.tl-prac-dl { margin: 12px 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-prac-dl dt { font-weight: 600; color: var(--cs-navy, #172554); padding-top: 10px; }
.tl-prac-dl dd { margin: 2px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--cs-hair, #e2e8f0); color: #334155; }
.tl-prac-script__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0); }
.tl-prac-script__text { margin: 0; }
.tl-prac-script__note { margin: 0; font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); border-left: 2px solid #cbd5e1; padding-left: 10px; }
@media (max-width: 640px) { .tl-prac-script__row { grid-template-columns: 1fr; gap: 6px; } }

/* The item document inside the iframe. The test surface is a full-height
   application (100vh shell, panes that scroll); in an iframe it must be a
   document instead, so its height can be posted to the host page. */
html.tl-prac-embed, html.tl-prac-embed body.ts-page { height: auto; min-height: 0; overflow: visible; }
html.tl-prac-embed .ts-shell { height: auto; min-height: 0; }
html.tl-prac-embed .ts-pane__body { overflow: visible; }
html.tl-prac-embed .ts-pane--passage .ts-pane__body { max-height: 560px; overflow-y: auto; }
.tl-prac-check {
  margin: 0 var(--ts-8, 32px) 20px; padding-top: 14px;
  border-top: 1px solid var(--ts-rule, #e5e7eb);
  font-family: 'Inter', sans-serif; color: var(--ts-ink, #111827);
}
@media (max-width: 767px) { .tl-prac-check { margin: 0 16px 16px; } }
.tl-prac-check__form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-prac-check__btn { cursor: pointer; }
.tl-prac-check__hint { margin: 0; font-size: 13px; color: var(--ts-ink-3, #6b7280); }
.tl-prac-verdict { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.tl-prac-verdict.is-right { color: var(--ts-pos, #15803d); }
.tl-prac-verdict.is-wrong, .tl-prac-verdict.is-error { color: var(--ts-neg, #b91c1c); }
.tl-prac-answers { margin: 0 0 12px; padding-left: 1.4em; }
.tl-prac-explain { padding: 0; }
.tl-prac-explain__title { font-size: 14px; font-weight: 650; margin: 0 0 8px; }

/* ============================================================
   schools (WP B8): /selective-schools/, /opportunity-class-schools/
   and one page per school. The directory is the cs-compare table
   (stacked blocks on a phone); facts are ruled lines; the target is
   one bordered block. No chips, badges, icons or counters.
   ============================================================ */
.tl-school-dir .sec-solid a:not(.btn), .tl-school .sec-solid a:not(.btn) {
  color: var(--cs-blue, #1d4ed8); text-decoration: underline; text-underline-offset: 2px;
}
.tl-school-dir .tl-crumbs a, .tl-school .tl-crumbs a { color: #64748b; text-decoration: none; }
.tl-school-dir .tl-apply-more__list a, .tl-school .tl-apply-more__list a { text-decoration: none; }
.tl-h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--text-base, 16px); font-weight: 700;
  color: var(--cs-navy, #172554); margin: 22px 0 6px;
}
.tl-school-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--cs-slate, #64748b); }
.tl-school-muted { color: var(--cs-slate, #64748b); }
.tl-school-src { display: block; margin-top: 4px; font-size: 12.5px; color: var(--cs-slate, #64748b); }
.tl-school-lede { color: #475569; margin: 0 0 10px; }

/* Directory: filters are plain labelled selects on one ruled line. */
.tl-school-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px;
  margin: 14px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--cs-hair, #e2e8f0);
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px);
}
.tl-school-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.tl-school-filter span {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8;
}
.tl-school-filter select {
  font: 500 var(--text-sm, 14px) 'Inter', sans-serif; color: var(--cs-ink, #12192b);
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
}
.tl-school-filter select:focus { outline: 2px solid var(--cs-blue, #1d4ed8); outline-offset: 1px; }
.tl-school-count { margin: 0 0 0 auto; color: var(--cs-slate, #64748b); }
.tl-school-table tbody th a { color: var(--cs-navy, #172554); }
.tl-school-sort {
  all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.tl-school-sort:hover, .tl-school-sort:focus-visible { color: var(--cs-navy, #172554); }
.tl-school-sort:focus-visible { outline: 2px solid var(--cs-blue, #1d4ed8); outline-offset: 2px; }
th[aria-sort] .tl-school-sort { color: var(--cs-navy, #172554); }
th[aria-sort='ascending'] .tl-school-sort::after { content: ' \2191'; }
th[aria-sort='descending'] .tl-school-sort::after { content: ' \2193'; }
.tl-school-table tr[hidden] { display: none; }
.tl-school-equity tbody th { white-space: normal; min-width: 11rem; }
.tl-school-rules { margin: 8px 0 0; padding-left: 1.1em; }
.tl-school-rules li { margin: 0 0 8px; line-height: 1.6; }
@media (max-width: 640px) {
  .tl-school-filter { flex: 1 1 140px; min-width: 0; }
  .tl-school-count { margin: 0; flex-basis: 100%; }
  .tl-school-table tr[hidden] { display: none; }
}

/* School page */
.tl-school-preview {
  background: #fffbeb; border-bottom: 1px solid #fcd34d; padding: 10px 0;
  font-family: 'Inter', sans-serif; font-size: var(--text-sm, 14px); color: #78350f;
}
.tl-school-photo { margin: 0; }
.tl-school-photo img {
  display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain;
  background: var(--cs-paper, #fbfaf6); border: 1px solid var(--cs-hair, #e2e8f0); border-radius: 6px;
}
.tl-school-photo figcaption { margin: 8px 0 0; font-size: 12.5px; color: var(--cs-slate, #64748b); line-height: 1.5; }
.tl-school-facts { margin: 6px 0 0; border-top: 2px solid var(--cs-navy, #172554); }
.tl-school-fact {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 20px;
  padding: 12px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0);
}
.tl-school-fact dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #1e3a8a; padding-top: 3px;
}
.tl-school-fact dd { margin: 0; line-height: 1.6; color: #334155; overflow-wrap: anywhere; }
.tl-school-plain { margin: 6px 0 0; padding-left: 1.1em; }
.tl-school-plain li { margin: 0 0 6px; line-height: 1.6; }
@media (max-width: 640px) {
  .tl-school-fact { grid-template-columns: minmax(0, 1fr); }
}
.tl-school-intro p { margin: 0 0 12px; }
.tl-school-known { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-school-known li { padding: 12px 0; border-bottom: 1px solid var(--cs-hair, #e2e8f0); line-height: 1.6; color: #334155; }
.tl-school .tl-school-srclink { font-size: 12.5px; color: var(--cs-slate, #64748b); white-space: nowrap; }
.tl-school-quotes { list-style: none; margin: 0 0 12px; padding: 0; }
.tl-school-quotes li { padding: 10px 0 10px 14px; border-left: 2px solid #cbd5e1; margin: 0 0 10px; color: #334155; }
.tl-school-target {
  border: 1px solid #cbd5e1; border-top: 3px solid var(--cs-navy, #172554); border-radius: 6px;
  padding: 18px 20px; background: #fff;
}
.tl-school-target__label {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #1e3a8a; margin: 0 0 6px;
}
.tl-school-target__why { margin: 0 0 10px; font-size: var(--text-sm, 14px); color: var(--cs-slate, #64748b); }
.tl-school-target__line { margin: 0 0 10px; color: var(--cs-ink, #12192b); }
.tl-school-target__sections { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-school-target__sections li {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0); font-size: var(--text-sm, 14px);
}
.tl-school-target__sections li span:last-child { font-weight: 600; color: var(--cs-navy, #172554); text-align: right; }
.tl-school-near { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-hair, #e2e8f0); }
.tl-school-near li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--cs-hair, #e2e8f0);
}
.tl-school-near li span { color: var(--cs-slate, #64748b); white-space: nowrap; font-size: var(--text-sm, 14px); }