/* The public guide pages. They are plain HTML with no bundler, so they load the design system's
   tokens as a file and declare the three self-hosted fonts themselves.
   tokens.css is copied here by scripts/build-guides.mjs from app/src/tokens.css, which is the
   authority for every value. Don't redefine a token below. */
@import "/guides/tokens.css";

/* The Latin subsets, copied into /fonts by the guides build. Nothing is fetched from Google. */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2) format("woff2-variations");
}

/* One reading column on the cover. */
.wrap { max-width: 44rem; margin-inline: auto; padding-inline: max(var(--s4), env(safe-area-inset-left, 0px)); }

.gnav { border-bottom: 1px solid var(--rule); }
.gnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); }
.gnav nav { display: flex; align-items: center; gap: var(--s4); }
.gnav nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 700; }
.gnav nav a:not(.btn):hover { color: var(--press); text-decoration: underline; }
.brand { font-family: var(--f-form); font-stretch: 80%; font-weight: 800; font-size: 1.3rem; color: var(--press); text-decoration: none; }

main { padding-block: var(--s6) var(--s5); display: grid; gap: var(--s6); }
article { display: grid; gap: var(--s4); }
article h1 { font-size: var(--t-title); }
article h2 { margin-top: var(--s4); }
article h3 { margin-top: var(--s3); }
article ul, article ol { padding-left: 1.3em; display: grid; gap: var(--s1); margin: 0; }
article p, article li { max-width: var(--measure); text-wrap: pretty; }

/* The byline sits under the h1, never above it. */
.byline { font-size: var(--t-small); color: var(--ink-2); }
.lead { font-size: 1.125rem; }
.small { font-size: var(--t-small); color: var(--ink-2); }

/* Official wording on the yellow copy, with a full 1px edge: no side stripes anywhere. */
blockquote.official {
  margin: 0; background: var(--copy); border: 1px solid var(--copy-edge); border-radius: var(--r-field);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2); color: var(--ink);
}
blockquote.official .src { font-size: var(--t-small); color: var(--ink-2); }

.cta { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: var(--s5); display: grid; gap: var(--s3); }
.cta h2 { margin: 0; }

.more ul, .guide-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1.5px solid var(--press); }
.more li, .guide-list li { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }

.gfoot { display: grid; gap: var(--s3); padding-block: var(--s5) var(--s7); border-top: 1.5px solid var(--press); font-size: var(--t-small); color: var(--ink-2); }
.gfoot .notice { background: none; border: 0; padding: 0; display: block; }

/* Questions in a guide use the same ruled rows as the home page. */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { min-height: var(--row); padding: var(--s3) 0; font-weight: 700; cursor: pointer; }

/* The few layout helpers the cost widget needs. They live in app/src/styles.css for the bundled
   pages; these are the same rules, because a guide page has no bundler to import them from. */
.stack { display: grid; gap: var(--s3); min-width: 0; }
.stack.wide { gap: var(--s4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
.muted { color: var(--ink-2); }
:where(ul, ol).plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

/* The audit budget. One block per audit type is in the HTML, so the page reads with no JavaScript;
   src/guide-cost.ts moves data-kind and this shows the block that matches. Without the script the
   mid-term block shows, and the ranges for every type are in the text above it. */
#cost-widget { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: var(--s5); }
.costw { display: grid; gap: var(--s4); }
.costw > h2 { margin: 0; }
.costw-opt { display: none; }
.costw[data-kind="midterm"] .costw-opt[data-kind="midterm"],
.costw[data-kind="certification-solo"] .costw-opt[data-kind="certification-solo"],
.costw[data-kind="certification-team"] .costw-opt[data-kind="certification-team"],
.costw[data-kind="verification"] .costw-opt[data-kind="verification"] { display: grid; }

/* QA A11Y-32: the guide header can't push "Start free" off a phone at 200% text. A11Y-41: the skip link. */
.gnav .wrap, .gnav nav { flex-wrap: wrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s4, 16px); top: var(--s2, 8px); z-index: 30; background: var(--sheet, #fff); padding: 8px 12px; outline: 3px solid var(--focus, #1a5fb4); }