/*
  UI-B answer-first v2 — isolated A/B candidate stylesheet.
  Self-contained: no @import, no external font, no network dependency.

  One idea: the learner's answer carries the most ink on the page. Chrome,
  stage labels and legal apparatus are set small and quiet around it.
   - Layer 2 is a ruled directory of primary destinations, with any earlier-
     fact qualification kept as a narrow note under the decision row.
   - Layer 3 leads with the topic heading; each block uses one compact table
     header, readable answer rows and quiet legal references.
  One accent (navy). Sharp corners. No gradients, shadows, floating cards, or
  decorative imagery. Density comes from short vertical rhythm and edited
  presentation, not from shrinking everything.

  Constraints kept from the accepted baseline, forced by real contract data:
   - fee amounts are NOT nowrapped (compound "+ per dependant" breakdowns up
     to ~56 chars would overflow at 360px);
   - reference labels wrap and may break anywhere;
   - FAQ answer paragraphs keep pre-line so reviewed line breaks survive;
   - .faq-table-wrap remains styled for sanitized structured answers.
*/

:root {
  --paper: #f7f6f1;
  --paper-deep: #efeee7;
  --surface: #ffffff;
  --ink: #20252c;
  --muted: #62666a;
  --quiet: #656761;
  --line: #c7c5bd;
  --line-strong: #777974;
  --accent: #173653;
  --page: min(960px, calc(100vw - 48px));
  --serif: Georgia, "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans: Poppins, Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --type-meta: 11px;
  --type-label: 12px;
  --type-compact: 12.5px;
  --type-body: 15px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--type-body);
  line-height: 1.6;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button { font: inherit; }
::selection { background: #d9e0e5; }

/* Never let unbreakable strings punch through a narrow viewport. */
.article, .lead, .glance, .directory, .crumb-strip, .topic-head {
  overflow-wrap: break-word;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 50;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.prototype-note {
  display: flex;
  align-items: center;
  padding: 2px 0;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.4;
}
.prototype-note span { width: var(--page); margin: 0 auto; }

/* ---------------------------------------------------------------- chrome */

.masthead-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
.masthead-inner {
  width: var(--page);
  min-height: 52px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}
.wordmark {
  min-height: 44px;
  display: block;
  padding: 12px 0;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 20px;
}
.masthead-actions { display: flex; align-items: center; gap: 14px; }
.menu-button {
  min-height: 44px;
  display: none;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
}

.global-nav {
  width: auto;
  min-height: 44px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
}
.global-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
}
.global-nav a:hover, .global-nav a:focus-visible { color: var(--accent); }
.global-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ------------------------------------------------- Layer 2: overview lead */

.lead {
  width: var(--page);
  margin: 0 auto;
  padding: 26px 0 20px;
}
.section-label {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.lead h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}
.lead .standfirst {
  max-width: 46em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* At a glance: rendered only when the contract carries explicit items. */
.glance {
  width: var(--page);
  margin: 0 auto;
  padding: 0 0 18px;
}
.glance h2 {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.glance dl {
  margin: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.glance dl > div { padding: 10px 16px 12px; min-width: 0; }
.glance dl > div + div { border-left: 1px solid var(--line); }
.glance dl > div:first-child { padding-left: 0; }
.glance dl > div:last-child { padding-right: 0; }
.glance dt {
  margin: 0 0 3px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0;
}
.glance dd { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; }

/* --------------------------------------------- Layer 2: ruled directory */

.directory {
  width: var(--page);
  margin: 0 auto;
  padding: 0 0 44px;
}
.directory-head { border-top: 2px solid var(--ink); padding-top: 10px; }
.directory-label {
  margin: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.directory-intro {
  max-width: 62em;
  margin: 4px 0 10px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
}
.directory-list { border-top: 1px solid var(--line-strong); }
.directory-row { border-bottom: 1px solid var(--line); }

/* One destination row: stage tag on the left, title + purpose on the right.
   No counts, no content dumps — the row says what answer lives behind it. */
.guide-gate {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 2px 20px;
  align-items: start;
  min-height: 44px;
  padding: 12px 0 13px;
  color: var(--ink);
  text-decoration: none;
}
.gate-stage { min-width: 0; }
.gate-short {
  display: block;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}
.gate-source {
  display: block;
  margin-top: 2px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.4;
}
.gate-main { min-width: 0; }
.gate-title {
  display: block;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}
.gate-desc {
  display: block;
  max-width: 58em;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}
.guide-gate:hover .gate-title,
.guide-gate:focus-visible .gate-title {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The FAQ destination also lists a few real questions — questions only,
   never their answers. */
.gate-questions {
  margin: 0 0 12px 168px;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.gate-questions li + li { border-top: 1px solid var(--line); }
.gate-questions a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
.gate-questions a:hover,
.gate-questions a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.timing-empty { padding: 18px 0; color: var(--quiet); font-family: var(--sans); font-size: 13px; }

/* -------------------------------------------- Layer 3: shared page head */

.crumb-strip {
  width: var(--page);
  margin: 0 auto;
  padding: 2px 0;
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
}
.crumb-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}
.crumb-back:hover,
.crumb-back:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.crumb-context {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
}

.article { width: var(--page); margin: 0 auto; padding: 0 0 40px; }

.topic-head { padding: 16px 0 4px; }
.topic-kicker {
  margin: 0 0 5px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.topic-head h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}
.topic-desc {
  max-width: 60em;
  margin: 6px 0 0;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
}

/* A rare but important split between assessment time and fact time. */
.special-timing-section {
  margin: 20px 0 24px;
  padding: 18px 20px 20px;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-deep);
  scroll-margin-top: 20px;
}
.special-timing-section.is-standalone { margin-top: 14px; }
.special-timing-axis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.special-timing-axis > div { padding: 11px 14px 10px 0; }
.special-timing-axis > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.special-timing-axis dt {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 700;
  line-height: 1.4;
}
.special-timing-axis dd {
  margin: 2px 0 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.special-reviewed-topics { margin-top: 16px; }
.special-reviewed-topics .learner-topics { gap: 10px; }
.special-reviewed-topics .learner-topic { padding: 16px 18px 15px; }

/* ------------------------------------------- Layer 3: learner topics */

.learner-topics {
  display: grid;
  gap: 14px;
  margin: 0;
}
.learner-topic {
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  scroll-margin-top: 20px;
}
.topic-runhead {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

/* Fee rows: name left, amount right. Amounts do NOT nowrap — compound
   breakdowns must wrap inside their own column on narrow viewports. */
/* A single table header establishes the columns. Content rows stay compact,
   while mobile restores the labels beside each stacked value. */
.guide-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  table-layout: auto;
}
.guide-table th {
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}
.guide-table td {
  padding: 10px 11px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--type-compact);
  line-height: 1.5;
  overflow-wrap: break-word;
  vertical-align: top;
}
.guide-table td a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.inline-references {
  display: inline;
  margin-left: 5px;
  white-space: normal;
}
.guide-table td .inline-references a,
.guide-table td .inline-references span {
  display: inline;
  margin-left: 5px;
  color: var(--accent);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: inherit;
  overflow-wrap: anywhere;
}
.guide-table td .inline-references span { color: var(--quiet); }
.guide-table td .inline-references a:hover,
.guide-table td .inline-references a:focus-visible {
  text-decoration-color: var(--accent);
}
.guide-fee-value {
  color: var(--ink);
  font-weight: 500;
}

/* ------------------------------------------------------ visa library */

.visa-library-page {
  width: var(--page);
  margin: 0 auto;
  padding: 38px 0 54px;
}
.library-lead {
  max-width: 720px;
  padding-bottom: 25px;
}
.library-lead .section-label { margin: 0 0 9px; }
.library-lead h1 {
  margin: 0;
  color: var(--ink);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.12;
}
.library-lead > p:last-child {
  max-width: 660px;
  margin: 13px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
}
.library-tools {
  padding: 15px 0 17px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.library-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  font-family: var(--sans);
}
.library-search-label {
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}
.library-search input {
  width: 100%;
  min-height: 42px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
}
.library-search input:focus { border-bottom-color: var(--accent); }
.library-result-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--quiet);
  font-size: var(--type-meta);
  white-space: nowrap;
}
.library-result-count strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.library-stream-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 11px;
  font-family: var(--sans);
}
.library-stream-filter button {
  min-height: 34px;
  padding: 3px 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--type-meta);
  font-weight: 650;
}
.library-stream-filter button:hover,
.library-stream-filter button:focus-visible,
.library-stream-filter button.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.library-directory { padding-top: 8px; }
.library-stream {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  padding: 27px 0 30px;
  border-bottom: 1px solid var(--line-strong);
}
.library-stream-head p {
  margin: 0 0 4px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.library-stream-head h2 {
  margin: 0;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.library-visa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
}
.library-visa-row {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.library-visa-row:hover .library-visa-copy > strong,
.library-visa-row:focus-visible .library-visa-copy > strong { color: var(--accent); }
.library-visa-code {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.library-visa-copy { min-width: 0; }
.library-visa-copy > strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 120ms ease;
}
.library-visa-copy small {
  display: block;
  margin-top: 3px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.library-visa-arrow {
  color: var(--line-strong);
  font-family: var(--sans);
  font-size: 14px;
}
.library-empty {
  padding: 40px 0;
  text-align: center;
}
.library-empty strong,
.library-empty span { display: block; }
.library-empty span {
  margin-top: 4px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 11px;
}

/* Compact orientation aid on desktop; the content remains linear on mobile. */
.detail-content-layout { margin-top: 20px; }
.detail-content-layout.has-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  gap: 22px;
  align-items: start;
}
.detail-content-main { min-width: 0; }
.detail-topic-index {
  position: sticky;
  top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--sans);
}
.detail-topic-index strong {
  display: block;
  padding: 0 0 7px;
  color: var(--quiet);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.detail-topic-index a {
  display: block;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--type-meta);
  line-height: 1.35;
  text-decoration: none;
}

/* The legal layer reads as citation metadata, not a row of large buttons. */
.reference-chips {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 8px 0 0;
  font-family: var(--sans);
}
.reference-chips-label {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0;
}
.reference-chips a,
.reference-chips > span:not(.reference-chips-label),
.reference-chip-list a,
.reference-chip-list span {
  display: inline;
  margin: 0 7px 0 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.35;
  text-decoration-line: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.reference-chips > span:not(.reference-chips-label),
.reference-chip-list span {
  color: var(--quiet);
  text-decoration: none;
}
.faq-reference-list a,
.faq-reference-list span {
  display: inline;
  margin: 2px 5px 2px 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.35;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.faq-reference-list span { color: var(--quiet); }
.reference-chips a:hover,
.reference-chips a:focus-visible,
.reference-chip-list a:hover,
.reference-chip-list a:focus-visible { text-decoration-color: var(--accent); }
.faq-reference-list a:hover,
.faq-reference-list a:focus-visible { text-decoration-color: var(--accent); }

.timing-group-sources { margin-top: 14px; border-top: 1px solid var(--line-strong); }
.timing-group-sources summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 750;
}
.reference-chip-list { display: flex; flex-wrap: wrap; padding: 0 0 10px; }

/* ------------------------------------------------ Layer 3: FAQ page */

.new-faq-list { margin-top: 2px; }
.faq-article .new-faq-list:first-of-type { border-top: 2px solid var(--ink); }
.new-faq-item { border-bottom: 1px solid var(--line-strong); scroll-margin-top: 20px; }
.faq-disclosure > summary {
  min-height: 52px;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  color: var(--ink);
  cursor: pointer;
  list-style-position: outside;
}
.faq-disclosure > summary::marker { color: var(--accent); }
.faq-disclosure > summary:hover .faq-question,
.faq-disclosure > summary:focus-visible .faq-question { color: var(--accent); }
.faq-question {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.faq-num {
  display: block;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 750;
}
.new-faq-answer { margin-left: 30px; }
.new-faq-answer p {
  max-width: 41em;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}
.new-faq-answer p:last-child { margin-bottom: 0; }
/* A short label-like paragraph set as a run-in subhead (text verbatim). */
.new-faq-answer .faq-subhead {
  margin: 13px 0 5px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.faq-currency-warning {
  max-width: 41em;
  margin: 11px 0 0 30px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
}
.ml-source-warning {
  max-width: 62rem;
  margin: 18px auto 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--paper-deep);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
}
.ml-source-warning a { color: var(--accent); font-weight: 700; }
.faq-reference-block { margin: 11px 0 0 30px; padding-bottom: 16px; }
.faq-reference-block > b {
  display: block;
  margin-bottom: 3px;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 700;
}
.faq-reference-list { display: flex; flex-wrap: wrap; }

/* ------------------------------------------------ Research topic surface */

.research-directory { padding: 0 0 44px; }
.research-article { padding-bottom: 52px; }
.research-question-list {
  margin-top: 16px;
  border-top: 2px solid var(--ink);
}
.research-question-item { border-bottom: 1px solid var(--line-strong); }
.research-answer { padding: 0 0 18px; }
.research-answer p,
.research-answer ul {
  max-width: 48em;
  margin: 0 0 11px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.72;
}
.research-answer ul { padding-left: 21px; }
.research-answer li + li { margin-top: 6px; }
.research-answer-heading {
  max-width: 48em;
  margin: 16px 0 6px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.research-answer code {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.78em;
  overflow-wrap: anywhere;
}
.research-comparison {
  display: block;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 6px;
  border-left: 2px solid var(--amber);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 650;
  line-height: 1.45;
}

/* Sanitized structured FAQ answers (contract HTML) keep a scrollable table
   treatment; the wrapper scrolls so the page never scrolls horizontally. */
.faq-table-wrap {
  max-width: 100%;
  margin: 12px 0 14px;
  overflow-x: auto;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.faq-table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.faq-table-wrap th,
.faq-table-wrap td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.faq-table-wrap th {
  color: var(--ink);
  font-weight: 750;
  background: var(--paper-deep);
}
.faq-table-wrap tr:last-child td { border-bottom: 0; }

/* --------------------------------------------- Sources and licences */

.rights-page {
  width: var(--page);
  margin: 0 auto;
  padding: 0 0 52px;
}
.rights-breadcrumb {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
}
.rights-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.rights-breadcrumb a:hover,
.rights-breadcrumb a:focus-visible { text-decoration: underline; }
.rights-lead {
  max-width: 760px;
  padding: 30px 0 25px;
}
.rights-lead h1 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}
.rights-lead .standfirst {
  max-width: 46em;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.65;
}
.rights-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}
.rights-section {
  min-width: 0;
  padding: 22px 22px 24px 0;
  border-bottom: 1px solid var(--line-strong);
}
.rights-section:nth-child(even):not(.rights-section-wide) {
  padding-right: 0;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.rights-section-wide {
  grid-column: 1 / -1;
  padding-right: 0;
}
.rights-label {
  margin: 0 0 6px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}
.rights-section h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}
.rights-section > p:not(.rights-label) {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.rights-section-wide > p:not(.rights-label) { max-width: 64em; }
.rights-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 10px;
}
.rights-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ state page */

.state-page {
  width: var(--page);
  min-height: 46vh;
  margin: 0 auto;
  padding: 48px 0 64px;
}
.state-page h1 { max-width: 18em; margin: 7px 0 8px; font-size: 30px; line-height: 1.25; }
.state-page p { max-width: 42em; color: var(--muted); font-family: var(--sans); }
.state-page-link {
  min-height: 44px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- footer */

.paper-footer { margin-top: 8px; border-top: 1px solid var(--line-strong); background: var(--paper-deep); }
.footer-inner { width: var(--page); margin: 0 auto; padding: 26px 0 22px; }
.footer-masthead {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px 48px;
  padding-top: 16px;
}
.paper-footer h2, .paper-footer h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 750;
}
.paper-footer p, .paper-footer a {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.65;
}
.footer-links a { display: flex; min-height: 44px; align-items: center; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); }
.footer-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.6;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 820px) {
  /* Use the viewport, not a potentially widened document containing block. */
  :root { --page: calc(100vw - 32px); }
  .lead { padding: 20px 0 16px; }
  .lead h1 { font-size: 26px; }
  .masthead-inner {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 16px;
  }
  .wordmark { grid-column: 1; grid-row: 1; }
  .masthead-actions { grid-column: 2; grid-row: 1; }
  .menu-button { display: none; }
  .global-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 0 0 7px;
    flex-wrap: wrap;
    gap: 0 20px;
  }
  html[data-enhanced="true"] .menu-button { display: inline-flex; }
  html[data-enhanced="true"] .global-nav { display: none; }
  html[data-enhanced="true"] .global-nav[data-open="true"] { display: flex; }

  .guide-gate { grid-template-columns: 1fr; gap: 1px; padding: 10px 0 12px; }
  .gate-stage { display: flex; align-items: baseline; gap: 10px; }
  .gate-source { margin-top: 0; }
  .gate-title { margin-top: 3px; }
  .gate-questions { margin-left: 0; }

  .glance dl { grid-template-columns: 1fr 1fr; }
  .glance dl > div { padding-left: 0; padding-right: 16px; }
  .glance dl > div + div { border-left: 0; }
  .glance dl > div:nth-child(even) { border-left: 1px solid var(--line); padding-left: 16px; }
  .glance dl > div:nth-child(n+3) { border-top: 1px solid var(--line); }

  .detail-content-layout.has-index { display: flex; flex-direction: column; }
  .detail-content-main { order: 2; }
  .detail-topic-index {
    position: static;
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-left: 0;
    white-space: nowrap;
  }
  .detail-topic-index strong { display: none; }
  .detail-topic-index a {
    min-height: 44px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 12px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .detail-topic-index a[aria-current="true"] { background: var(--paper-deep); }

  .visa-library-page { padding-top: 28px; }
  .library-stream { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; }
  .library-visa-grid { grid-template-columns: 1fr; }
  .rights-lead { padding-top: 24px; }
  .rights-directory { grid-template-columns: 1fr; }
  .rights-section,
  .rights-section:nth-child(even):not(.rights-section-wide) {
    grid-column: auto;
    padding: 20px 0 22px;
    border-left: 0;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --page: calc(100vw - 28px); }
  .lead h1 { font-size: 23px; }
  .topic-head h1 { font-size: 22px; }
  .faq-question { font-size: 16px; }
  .learner-topic { padding: 16px 14px 15px; }
  .topic-runhead { font-size: 19px; }
  .guide-table-wrap { overflow: visible; }
  .guide-table,
  .guide-table tbody,
  .guide-table tr,
  .guide-table td { display: block; width: 100%; }
  .guide-table thead {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .guide-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .guide-table tr:first-child { padding-top: 0; }
  .guide-table tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .guide-table td { padding: 3px 0; border: 0; }
  .guide-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: var(--type-meta);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .crumb-strip { justify-content: flex-start; }
  .special-timing-section { padding: 16px 14px 17px; }
  .special-timing-axis { grid-template-columns: 1fr; }
  .special-timing-axis > div { padding: 9px 0; }
  .special-timing-axis > div + div {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .special-reviewed-topics .learner-topic { padding: 14px 12px; }
  .new-faq-answer,
  .faq-currency-warning,
  .faq-reference-block { margin-left: 24px; }
  .visa-library-page { padding: 22px 0 42px; }
  .library-lead { padding-bottom: 19px; }
  .library-lead h1 { font-size: 27px; }
  .rights-page { padding-bottom: 42px; }
  .rights-lead h1 { font-size: 27px; }
  .library-search {
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
  }
  .library-search-label { grid-column: 1 / -1; }
  .library-stream-filter { gap: 0 14px; }
  .library-stream {
    display: block;
    padding: 23px 0 26px;
  }
  .library-stream-head { margin-bottom: 13px; }
  .library-stream-head h2 { font-size: 17px; }
  .library-visa-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-masthead { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }