/* Public pages: the homepage, the NCMHCE hub and every guide, data and tool
   page. Loaded after styles.css and ncmhce/page.css, which supply the tokens,
   header, footer and FAQ list.

   The look is a quiet reference page: one typeface, one accent colour and
   one column, with the tool or the data before the prose. No tinted boxes,
   no side rail, no stat cards and no slogans. If a page needs emphasis, the
   words do it. */

:root {
  --guide-text: #2a3348;
  --guide-muted: #5f6880;
  --guide-line: #e4e7ee;
  --guide-wash: #f6f7fb;
  --guide-accent: #5046c4;
  --guide-good: #11704f;
  --guide-good-soft: #e3f6ec;
  --guide-warn: #9a5b00;
  --guide-warn-soft: #fff4e0;
  --guide-bad: #b42318;
  --guide-bad-soft: #fdecea;
  --guide-column: 720px;
}

/* Site header: the same four links on every public page, then "Sign in",
   which auth-header.js turns into the account button for members. */
.ncmhce-header .header-cta:not(.is-account) {
  display: inline-flex;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  color: #26334b;
  background: none;
  font-size: 14px;
  font-weight: 600;
}

.ncmhce-header .header-cta:not(.is-account):hover {
  color: var(--guide-accent);
  background: none;
  transform: none;
}

.ncmhce-header .header-cta.is-account {
  box-shadow: none;
}

.ncmhce-header .header-cta:hover {
  transform: none;
}

/* One column, shared by the title and the article. */
.guide-page .guide-hero > .ncmhce-shell,
.guide-page .guide-body {
  width: min(calc(100% - 40px), var(--guide-column));
  margin-inline: auto;
}

/* Pages built around a wide table get a wider frame; prose keeps its
   measure inside it. */
.guide-wide .guide-hero > .ncmhce-shell,
.guide-wide .guide-body {
  width: min(calc(100% - 40px), 1080px);
}

.guide-wide .guide-hero .guide-lede,
.guide-wide .guide-article > :not(.guide-table-wrap):not(.tool-panel) {
  max-width: var(--guide-column);
}

.guide-hero {
  padding: 44px 0 0;
}

.guide-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 500;
}

.guide-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: #a3a9b8;
}

.guide-crumbs a {
  color: var(--guide-muted);
  text-underline-offset: 3px;
}

.guide-page .guide-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.guide-hero .guide-lede {
  margin: 14px 0 0;
  color: var(--guide-muted);
  font-size: 18px;
  line-height: 1.6;
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  color: var(--guide-muted);
  font-size: 13px;
}

.guide-body {
  padding-top: 32px;
  padding-bottom: 88px;
}

.guide-article {
  min-width: 0;
  color: var(--guide-text);
  font-size: 17px;
  line-height: 1.7;
}

.guide-article > * + * {
  margin-top: 18px;
}

.guide-page .guide-article h2 {
  margin-top: 56px;
  color: var(--ink);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  scroll-margin-top: 24px;
}

.guide-article h3 {
  margin: 32px 0 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.guide-article p,
.guide-article ul,
.guide-article ol {
  margin-bottom: 0;
}

.guide-article ul,
.guide-article ol {
  padding-left: 22px;
}

.guide-article li + li {
  margin-top: 8px;
}

.guide-article .bar-chart li,
.guide-article .bar-labels li {
  margin-top: 0;
}

.guide-article a {
  color: var(--guide-accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

.guide-article strong {
  color: var(--ink);
  font-weight: 700;
}

/* Buttons are links too; keep them from taking the link colour. */
.guide-article a.button,
.guide-page .lab-actions a.button {
  text-decoration: none;
}

.guide-article a.button-primary,
.guide-page .lab-actions a.button-primary {
  color: #fff;
}

/* The opening answer: plain paragraphs, the first a little larger, so it
   reads as the start of the page rather than a box beside it. */
.guide-lead > p {
  margin: 0;
}

.guide-lead > p + p {
  margin-top: 14px;
}

.guide-lead > p:first-child {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
}

/* Notes: small print under the thing they qualify. */
.guide-note {
  color: var(--guide-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Tables. Wide ones scroll inside their own frame, never the page. */
.guide-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--guide-line);
  border-radius: 10px;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.guide-table caption {
  padding: 12px 16px 0;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.guide-table th,
.guide-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--guide-line);
  text-align: left;
  vertical-align: top;
}

.guide-table thead th {
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.guide-table tbody tr:last-child > * {
  border-bottom: 0;
}

.guide-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bar chart. Plain HTML so it reads without JavaScript and carries its own
   numbers; one series per chart, so the caption names it and no legend is
   needed. No frame: the chart sits in the text like a figure in a report. */
.guide-chart {
  margin: 28px 0 0;
  padding: 0;
}

.guide-chart figcaption {
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.guide-chart figcaption span {
  display: block;
  margin-top: 2px;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 400;
}

.bar-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #c8cddb;
}

/* The 50% line: the reference the whole page argues about. */
.bar-chart::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  border-top: 1px dashed #7d859a;
}

.bar-chart li {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.bar-chart .bar {
  width: min(100%, 44px);
  height: var(--v);
  border-radius: 3px 3px 0 0;
  background: #625bf6;
}

.bar-chart li:hover .bar {
  background: #4a43d8;
}

.bar-chart .bar-value {
  margin-bottom: 6px;
  color: var(--guide-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bar-labels {
  display: flex;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.bar-labels li {
  flex: 1 1 0;
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.bar-axis-note {
  margin: 12px 0 0;
  color: var(--guide-muted);
  font-size: 13px;
}

/* A list of links with one plain line under each, two columns when wide. */
.guide-article .link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  padding: 0;
  list-style: none;
}

.guide-article .link-list li + li {
  margin-top: 0;
}

.link-list a {
  display: block;
  font-size: 16px;
}

.link-list span {
  display: block;
  margin-top: 2px;
  color: var(--guide-muted);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .guide-article .link-list {
    grid-template-columns: 1fr;
  }
}

/* Sources: numbered, small, every one with its access date. */
.guide-sources {
  font-size: 14px;
  line-height: 1.55;
}

.guide-sources li {
  color: var(--guide-muted);
  overflow-wrap: anywhere;
}

/* The end of the page: one plain sentence and one button. */
.guide-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--guide-line);
}

.guide-next p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--guide-text);
  font-size: 16px;
  line-height: 1.6;
}

.guide-next .button {
  white-space: nowrap;
}

/* The offer price, when checkout is open: a small line, not a display number. */
.guide-next .price {
  display: block;
  margin: 4px 0 0;
  color: var(--guide-muted);
  font-size: 15px;
}

.guide-next .price strong,
.guide-next .price span {
  display: inline;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

/* The offer: one sentence tied to the page's question, right after the
   answer, so the next step is obvious while the reader is still deciding. */
.guide-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding: 18px 0;
  border-block: 1px solid var(--guide-line);
}

.guide-offer p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

.guide-offer .button {
  white-space: nowrap;
}

/* A one-line label above the offer sentence, e.g. what the free case is. */
.guide-offer .offer-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--guide-muted);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .guide-offer .button {
    width: 100%;
  }
}

/* Buttons on these pages are flat: the brand purple, no glow, no lift. */
.guide-page .button {
  font-weight: 700;
}

.guide-page .button:hover {
  transform: none;
}

.guide-page .button-primary,
.guide-page .button-primary:hover {
  box-shadow: none;
}

/* Tool panel: the interactive part of a tool page. The explanation around it
   is ordinary HTML so the page reads, and ranks, without the script. */
.tool-panel {
  padding: 24px;
  border: 1px solid var(--guide-line);
  border-radius: 12px;
  background: #fff;
}

.tool-panel h2,
.guide-page .guide-article .tool-panel h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.01em;
}

.tool-panel > p {
  margin: 6px 0 0;
  color: var(--guide-muted);
  font-size: 14px;
}

.tool-form {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.tool-field {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.tool-field > label,
.tool-field > legend {
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.tool-field .hint {
  color: var(--guide-muted);
  font-size: 13px;
  font-weight: 500;
}

.tool-field select,
.tool-field input[type="number"],
.tool-field input[type="date"],
.tool-field input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #cfd4e1;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 16px;
}

.tool-field select:focus-visible,
.tool-field input:focus-visible {
  outline: 3px solid #5145cd;
  outline-offset: 1px;
  border-color: #5145cd;
}

.tool-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-choices label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfd4e1;
  border-radius: 999px;
  color: var(--guide-text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.tool-choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tool-choices input:checked + span {
  color: var(--guide-accent);
}

.tool-choices label:has(input:checked) {
  border-color: var(--guide-accent);
  background: #f3f1ff;
}

.tool-choices label:has(input:focus-visible) {
  outline: 3px solid #5145cd;
  outline-offset: 2px;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tool-actions .button {
  cursor: pointer;
}

.button-quiet {
  color: var(--guide-text);
  background: #fff;
  border-color: #cfd4e1;
}

.tool-result {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--home-line);
}

.tool-result:empty {
  display: none;
}

.tool-result h3 {
  margin: 0;
  font-size: 20px;
}

.tool-result > * + * {
  margin-top: 14px;
}

/* Status chips carry a word as well as a colour, never colour alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.chip-good { color: var(--guide-good); background: var(--guide-good-soft); }
.chip-warn { color: var(--guide-warn); background: var(--guide-warn-soft); }
.chip-bad { color: var(--guide-bad); background: var(--guide-bad-soft); }
.chip-neutral { color: var(--guide-muted); background: #eef0f5; }

/* FAQ inside the reading column: the hub's list without the two-column grid. */
.guide-article .faq-list {
  margin-top: 24px;
}

.guide-article .faq-list details > p {
  max-width: none;
}

@media (max-width: 760px) {
  .guide-hero {
    padding-top: 28px;
  }

  .guide-page .guide-hero h1 {
    font-size: 30px;
  }

  .guide-hero .guide-lede {
    font-size: 16px;
  }

  .guide-body {
    padding-top: 24px;
    padding-bottom: 64px;
  }

  .guide-article {
    font-size: 16px;
  }

  .guide-lead > p:first-child {
    font-size: 17px;
  }

  .guide-page .guide-article h2 {
    margin-top: 44px;
    font-size: 22px;
  }

  .tool-panel {
    padding: 20px 16px;
  }

  .guide-next .button {
    width: 100%;
  }

  .bar-chart .bar-value {
    font-size: 10px;
  }

  /* Hover tips don't exist on touch, and an off-screen tip widened the page.
     The table under each chart carries the same numbers. */
  .bar-tip {
    display: none;
  }

  .bar-labels li {
    font-size: 10px;
  }
}

/* A print button that reads as a small action, not a primary call. */
.guide-print {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  cursor: pointer;
}

@media print {
  .guide-print,
  .site-header,
  .guide-next,
  .ncmhce-cta,
  .site-footer,
  .skip-link {
    display: none !important;
  }

  .guide-body {
    padding: 0;
  }

  .guide-page .guide-hero > .ncmhce-shell,
  .guide-page .guide-body {
    width: auto;
  }

  .guide-hero {
    padding: 0 0 16px;
  }

  .guide-article {
    font-size: 11pt;
  }

  .guide-article a {
    color: inherit;
  }
}

/* Chart hover layer. Every chart sits above a table holding the same numbers,
   so the tooltip is a convenience for mouse readers, not the only way in. */
.bar-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: 190px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .12s;
}

.bar-chart li:hover .bar-tip {
  opacity: 1;
}

.bar-chart li:first-child .bar-tip { left: 0; transform: none; }
.bar-chart li:last-child .bar-tip { left: auto; right: 0; transform: none; }

/* Research gaps read as gaps, not as blanks or as "none". */
.unverified {
  color: var(--guide-muted);
  font-style: italic;
}

.source-link {
  font-size: 13px;
  white-space: nowrap;
}

/* The all-states table is wide by nature; it scrolls inside its frame. */
.state-table {
  min-width: 820px;
  font-size: 13px;
}

.state-table td:nth-child(5) {
  min-width: 240px;
}

/* Keep the state name in view while the wide table scrolls sideways. */
.state-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 var(--home-line);
}

.guide-table-wrap:focus-visible {
  outline: 3px solid #5145cd;
  outline-offset: 2px;
}

/* A one-line data note under a study-guide domain. */
.guide-trap {
  color: var(--guide-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Wide comparison table: a small grey line under the product name. */
.table-sub {
  display: block;
  margin-top: 2px;
  color: var(--guide-muted);
  font-size: 12px;
  font-weight: 500;
}

.prep-table {
  min-width: 1000px;
  font-size: 13px;
}

.prep-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 180px;
  background: var(--paper, #fff);
  box-shadow: 1px 0 0 var(--home-line);
}

/* MSE builder: a compact stack of domains and a read-only output box. */
.mse-domain + .mse-domain {
  padding-top: 14px;
  border-top: 1px solid var(--home-line);
}

.mse-domain .tool-choices label {
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.mse-domain input[type="text"] {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #cfd4e1;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
}

.mse-hint {
  margin: 0;
}

.mse-status:empty {
  display: none;
}

.mse-output {
  margin-top: 22px;
}

.mse-output textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfd4e1;
  border-radius: 12px;
  color: var(--ink);
  background: var(--guide-wash);
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}

/* Sample question: options as plain rows, the answer folded underneath.
   The answer text is in the HTML, so it reads and ranks without a click. */
.guide-article .sample-options {
  padding: 0;
  list-style: none;
}

.guide-article .sample-options li {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--guide-line);
}

.guide-article .sample-options li:last-child {
  border-bottom: 1px solid var(--guide-line);
}

.sample-answer {
  margin-top: 16px;
}

.sample-answer summary {
  cursor: pointer;
  color: var(--guide-accent);
  font-weight: 700;
}

.sample-answer[open] summary {
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------
   Type and colour matched to the GradGPT blog (Oct 2026): Inter, neutral
   greys, 600-weight headings, 16/24 body, 8px buttons. Loaded last so it
   wins over styles.css and page.css on every guide page.
   ------------------------------------------------------------------ */
body.guide-page {
  --ink: #181d27;
  --guide-text: #535862;
  --guide-muted: #535862;
  --guide-line: #e9eaeb;
  --guide-wash: #fafafa;
  --guide-accent: #7f56d9;
  --purple: #7f56d9;
  --purple-dark: #6941c6;
  color: var(--guide-text);
  background: #fff;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}

body.guide-page :is(h1, h2, h3, h4, button, input, select, textarea, summary, .button) {
  font-family: inherit;
}

/* Header: 64px, hairline under it, "Sign in" as a small filled button. */
body.guide-page .ncmhce-header {
  min-height: 64px;
  border-bottom: 1px solid var(--guide-line);
}

body.guide-page .ncmhce-header .primary-nav a {
  color: #414651;
  font-size: 16px;
  font-weight: 600;
}

body.guide-page .ncmhce-header .primary-nav a:hover,
body.guide-page .ncmhce-header .primary-nav a[aria-current="page"] {
  color: var(--ink);
}

body.guide-page .ncmhce-header .header-cta:not(.is-account) {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--purple);
  font-size: 14px;
  font-weight: 600;
}

body.guide-page .ncmhce-header .header-cta:not(.is-account):hover {
  color: #fff;
  background: var(--purple-dark);
}

/* Title block. */
body.guide-page .guide-crumbs,
body.guide-page .guide-meta {
  color: var(--guide-muted);
  font-size: 14px;
  font-weight: 400;
}

body.guide-page .guide-crumbs a {
  color: var(--guide-muted);
  font-weight: 600;
}

body.guide-page .guide-hero h1 {
  color: var(--ink);
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -0.025em;
}

body.guide-page .guide-hero .guide-lede {
  margin-top: 16px;
  color: var(--guide-text);
  font-size: 20px;
  line-height: 30px;
}

body.guide-page .guide-meta {
  margin-top: 16px;
}

/* Article body. */
body.guide-page .guide-article {
  color: var(--guide-text);
  font-size: 16px;
  line-height: 24px;
}

body.guide-page .guide-article > * + * {
  margin-top: 16px;
}

body.guide-page .guide-article h2 {
  margin-top: 48px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
}

body.guide-page .guide-article h3 {
  margin-top: 32px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

body.guide-page .guide-article h2 + *,
body.guide-page .guide-article h3 + * {
  margin-top: 12px;
}

body.guide-page .guide-lead > p {
  color: var(--guide-text);
  font-size: 18px;
  line-height: 28px;
}

body.guide-page .guide-article li + li {
  margin-top: 6px;
}

body.guide-page .guide-article a:not(.button) {
  color: var(--purple);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.guide-page .guide-article a:not(.button):hover {
  color: var(--purple-dark);
}

body.guide-page .guide-article strong {
  color: var(--ink);
  font-weight: 600;
}

body.guide-page .guide-note {
  color: #717680;
  font-size: 14px;
  line-height: 20px;
}

/* Buttons: flat purple, 8px corners. */
body.guide-page .button {
  min-height: 0;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

body.guide-page .button-primary,
body.guide-page .button-primary:hover {
  color: #fff;
  background: var(--purple);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

body.guide-page .button-primary:hover {
  background: var(--purple-dark);
}

body.guide-page .guide-offer p,
body.guide-page .guide-next p {
  color: var(--guide-text);
  font-size: 16px;
  line-height: 24px;
}

/* Tables: grey header row, 14px cells, 12px corners. */
body.guide-page .guide-table-wrap {
  border-color: var(--guide-line);
  border-radius: 12px;
}

body.guide-page .guide-table {
  font-size: 14px;
  line-height: 20px;
}

body.guide-page .guide-table caption {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

body.guide-page .guide-table thead th {
  color: #535862;
  background: var(--guide-wash);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

body.guide-page .guide-table th,
body.guide-page .guide-table td {
  border-color: var(--guide-line);
}

body.guide-page .guide-table tbody th {
  color: var(--ink);
  font-weight: 500;
}

/* FAQ. */
body.guide-page .faq-list summary {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

body.guide-page .faq-list details > p {
  color: var(--guide-text);
  font-size: 16px;
  line-height: 24px;
}

/* Footer. */
body.guide-page .site-footer {
  color: var(--guide-muted);
}

@media (max-width: 760px) {
  body.guide-page .guide-hero h1 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
  }

  body.guide-page .guide-hero .guide-lede {
    font-size: 18px;
    line-height: 28px;
  }

  body.guide-page .guide-article h2 {
    margin-top: 40px;
    font-size: 22px;
    line-height: 30px;
  }

  body.guide-page .ncmhce-header .primary-nav a {
    font-size: 16px;
  }
}

/* Tool panels: every block inside gets breathing room, so buttons never sit
   flush against the field or result above them. */
body.guide-page .tool-panel > * + *,
body.guide-page .tool-form > * + * {
  margin-top: 16px;
}

body.guide-page .tool-actions {
  margin-top: 16px;
  gap: 12px;
}

body.guide-page .tool-field select,
body.guide-page .tool-field input[type="number"],
body.guide-page .tool-field input[type="date"],
body.guide-page .tool-field input[type="text"],
body.guide-page .mse-output textarea {
  border: 1px solid #d5d7da;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

body.guide-page .button-quiet {
  color: #414651;
  background: #fff;
  border: 1px solid #d5d7da;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

body.guide-page .button-quiet:hover {
  color: var(--ink);
  background: #fafafa;
}

/* Horizontal bar chart: one row per item, value at the end. The numbers are
   in the text, so the chart reads without colour or hover. */
.hbar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article .hbar li + li {
  margin-top: 10px;
}

.hbar li {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
}

.hbar .hbar-label {
  color: var(--ink);
  font-weight: 500;
}

.hbar .hbar-label small {
  display: block;
  color: #717680;
  font-size: 12px;
  font-weight: 400;
}

.hbar .hbar-track {
  height: 10px;
  border-radius: 999px;
  background: #f5f5f5;
}

.hbar .hbar-fill {
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: 999px;
  background: #b692f6;
}

.hbar li.is-ours .hbar-fill {
  background: var(--purple);
}

.hbar .hbar-value {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .hbar li {
    grid-template-columns: minmax(0, 1fr) 64px;
    row-gap: 4px;
  }

  .hbar .hbar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* A row that marks our own product in a comparison table. */
body.guide-page .guide-table tr.is-ours th,
body.guide-page .guide-table tr.is-ours td {
  background: #f9f5ff;
}

.tag-ours {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  color: #6941c6;
  background: #f4ebff;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

/* Top picks: three cards at the top of a comparison page. */
.picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article .picks li + li {
  margin-top: 0;
}

.picks li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--guide-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

.picks li.is-ours {
  border: 2px solid var(--purple);
  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.picks .pick-badge {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  color: #6941c6;
  background: #f9f5ff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.picks li.is-ours .pick-badge {
  color: #fff;
  background: var(--purple);
}

.picks .pick-name {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.picks .pick-price {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.picks .pick-why {
  flex: 1;
  color: var(--guide-text);
  font-size: 14px;
  line-height: 20px;
}

.guide-article .picks .button {
  align-self: stretch;
  text-align: center;
  font-size: 14px;
  padding: 10px 14px;
}

.picks .pick-link {
  font-size: 14px;
}

@media (max-width: 760px) {
  .picks {
    grid-template-columns: 1fr;
  }
}

/* Theory cards: techniques visible, the rest folded (still in the HTML). */
.theory-more {
  margin-top: 12px;
}

.theory-more summary {
  cursor: pointer;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
}

.theory-more[open] summary {
  margin-bottom: 8px;
}

/* Form labels and choices (Oct 2026): a clear gap under every label, and
   choices as 8px cards with a radio dot instead of round pills. */
body.guide-page .tool-field > legend,
body.guide-page .tool-field > label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

body.guide-page .tool-choices {
  gap: 12px;
}

body.guide-page .tool-choices label {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  color: #414651;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

body.guide-page .tool-choices label:hover {
  border-color: #b692f6;
}

body.guide-page .tool-choices label:has(input[type="radio"]) {
  padding-left: 40px;
}

body.guide-page .tool-choices label:has(input[type="radio"])::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  box-sizing: border-box;
  border: 1px solid #d5d7da;
  border-radius: 50%;
  background: #fff;
}

body.guide-page .tool-choices label:has(input:checked) {
  border-color: var(--purple);
  background: #f9f5ff;
  box-shadow: 0 0 0 1px var(--purple);
}

body.guide-page .tool-choices label:has(input[type="radio"]:checked)::before {
  border: 5px solid var(--purple);
}

body.guide-page .tool-choices input:checked + span {
  color: #53389e;
}

/* Free case start screen: same heading style as the rest of the page. */
body.guide-page .fc-start h2,
body.guide-page .fc-preview h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
}

body.guide-page .fc-start p,
body.guide-page .fc-preview p {
  color: var(--guide-text);
}

/* Stacked option groups (retake planner, MSE builder): room between groups. */
body.guide-page .tool-field + .tool-field,
body.guide-page .retake-domain + .retake-domain {
  margin-top: 20px;
}

/* Shared reading aids, added after the phone legibility audit (Nov 2026).
   All of them only rearrange text that stays in the HTML. */

/* A short list of links to the sections below, for pages longer than a few
   screens. Plain links, no box. */
.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  font-size: 15px;
  line-height: 1.4;
}

.jump-list a {
  display: inline-block;
  padding: 8px 0;
  color: var(--guide-accent);
  font-weight: 600;
}

.guide-article h2[id],
.guide-article h3[id],
.guide-article section[id] {
  scroll-margin-top: 84px;
}

/* The answer as labelled facts: term on the left, value on the right. */
.key-facts {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
  line-height: 1.45;
}

.key-facts dt {
  color: var(--guide-muted);
  font-size: 15px;
}

.key-facts dd {
  margin: 0;
  color: var(--guide-text);
  font-weight: 600;
}

.guide-hero .key-facts,
.guide-hero .jump-list {
  margin-top: 16px;
}

/* Tables on phones. A table with text in its cells gets .table-stack and a
   data-label on each td: below 560px every row becomes a small block, so no
   column is cut off and no cell is squeezed into a thin strip. A table that is
   too long to stack keeps its sideways scroll and gets a .table-hint above it. */
.table-hint {
  display: none;
  margin: 0 0 6px;
  color: var(--guide-muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .table-hint {
    display: block;
  }
}

@media (max-width: 560px) {
  .guide-table.table-stack,
  .guide-table.table-stack caption,
  .guide-table.table-stack tbody,
  .guide-table.table-stack tr,
  .guide-table.table-stack tbody th,
  .guide-table.table-stack td {
    display: block;
  }

  .guide-table.table-stack {
    min-width: 0;
  }

  .guide-table.table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .guide-table.table-stack tbody tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--guide-line);
  }

  .guide-table.table-stack tbody tr:last-child {
    border-bottom: 0;
  }

  .guide-table.table-stack tbody th,
  .guide-table.table-stack td {
    padding: 3px 0;
    border: 0;
    white-space: normal;
    text-align: left;
  }

  .guide-table.table-stack tbody th[scope="row"] {
    position: static;
    min-width: 0;
    padding-bottom: 5px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
  }

  .guide-table.table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--guide-muted);
    font-size: 12px;
    font-weight: 700;
  }
}

/* A card title that is a real heading inside its summary. */
body.guide-page .guide-article .theory-card summary h3 {
  display: inline;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}