@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Plus+Jakarta+Sans:wght@400..800&display=swap");
@import "./site-tokens.css";

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.site-header-inner {
  width: 100%;
  max-width: var(--page-max);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.wordmark { margin: 0; display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; font-size: var(--text-base); letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark-mark { width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-alert); color: var(--color-on-accent); }
.wordmark-mark svg { width: 1.05rem; height: 1.05rem; }
.nav-links { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.nav-link { min-height: 2.5rem; display: inline-flex; align-items: center; padding-inline: var(--space-sm); border-radius: var(--radius-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--color-ink); background: var(--color-paper-2); }
@media (max-width: 40rem) {
  :root { --header-h: 5.5rem; }
  .site-header-inner { flex-wrap: wrap; gap: 0; padding-block: var(--space-xs); }
  .nav-links { width: 100%; justify-content: space-between; }
}
@media (max-width: 26rem) {
  .nav-link-optional { display: none; }
  .nav-link { padding-inline: var(--space-xs); }
}

/* ---------- Footer ---------- */
.site-footer { margin-block-start: var(--space-3xl); background: var(--color-paper-2); border-block-start: var(--rule-hair) solid var(--color-rule); }
.site-footer-inner { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-xl) var(--page-gutter) var(--space-2xl); display: grid; gap: var(--space-xl); }
.footer-brand { display: grid; gap: var(--space-sm); align-content: start; }
.footer-brand p:not(.wordmark) { margin: 0; max-width: 34ch; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.footer-group h2 { margin: 0 0 var(--space-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.footer-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.footer-group a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; }
.footer-group a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 40rem) { .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Home: hero + search ---------- */
.home-layout { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) 0; display: grid; gap: var(--space-2xl); }
.home-main { min-width: 0; display: grid; gap: var(--space-2xl); align-content: start; }
@media (min-width: 64rem) {
  .home-layout { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: var(--space-2xl) var(--space-xl); }
  .home-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-lg)); }
}
/* Aside */
.home-aside { display: grid; gap: var(--space-lg); }
.safety-callout { padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-caution-rule); border-radius: var(--radius-card); background: var(--color-caution-soft); }
.safety-callout h2 { margin: 0; display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-base); line-height: 1.35; }
.safety-callout h2 svg { flex: none; width: 1.1rem; height: 1.1rem; margin-block-start: 0.15rem; color: var(--color-caution); }
.safety-callout p { margin: var(--space-xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.aside-block { display: grid; gap: var(--space-sm); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.aside-block > h2 { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.topic-group { display: grid; gap: var(--space-2xs); }
.topic-group h3 { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); letter-spacing: 0; }
.topic-group ul, .source-list { margin: 0; padding: 0; list-style: none; display: grid; }
.topic-group a { display: block; padding-block: 0.3rem; color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.topic-group a:hover { text-decoration: underline; text-underline-offset: 3px; }
.source-list a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 1rem; gap: var(--space-sm); align-items: center; padding-block: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); text-decoration: none; }
.source-list li:last-child a { border-block-end: 0; }
.source-list strong { color: var(--color-ink); white-space: nowrap; }
.source-list span { color: var(--color-muted); line-height: 1.4; }
.source-list svg { width: 0.95rem; height: 0.95rem; color: var(--color-muted); }
.source-list a:hover strong { color: var(--color-accent); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .home-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .safety-callout { grid-column: 1 / -1; }
}

/* Public report responses share the frame without altering reviewed markup. */
.report-site { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.report-site * { box-sizing: border-box; }
.report-site :where(h1, h2, h3) { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.02em; color: var(--color-ink); }
.report-site main, .report-site .editorial-report { max-width: none; margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.report-site .editorial-report h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
.report-site .editorial-report > header { padding-block-end: var(--space-lg); margin-block-end: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.report-site .editorial-report a, .report-site main > a { color: var(--color-accent); }
.report-site .editorial-report nav { color: var(--color-muted); font-size: var(--text-sm); }
.report-site .editorial-report section[aria-label="Report text"] p { margin-block: var(--space-lg); }
.report-site .editorial-skip, .report-site .skip { z-index: calc(var(--z-sticky) + 1); background: var(--color-surface); padding: var(--space-xs) var(--space-sm); }
.report-site :where(a, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
@media print {
  .report-site .site-header, .report-site .site-footer, .report-site .home-aside, .report-site .editorial-skip, .report-site .skip { display: none; }
  .report-site .home-layout { display: block; padding: 0; max-width: none; }
}