/* The reading pages (guide, FAQ, privacy, 404). Unlike the scanner these are
   ordinary scrolling documents, so nothing here locks the viewport. Tokens
   come from tokens.css, shared components (buttons, menus, footer, brand)
   from base.css. */

body.doc {
  font-size: 17px;
  line-height: 1.7;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bg-panel);
  color: var(--text);
  border-radius: 0 0 var(--radius) 0;
  box-shadow: var(--shadow-2);
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding: calc(10px + env(safe-area-inset-top)) max(var(--sp-5), env(safe-area-inset-right)) 10px max(var(--sp-5), env(safe-area-inset-left));
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  font-size: 14px;
  line-height: 1.45;
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl);
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1);
}
.site-nav a:hover { color: var(--text); background: var(--bg-raised); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--bg-raised); }

.header-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-1); }
.header-cta { margin-left: var(--sp-2); }

/* ---------- Document ---------- */

.doc-main {
  max-width: 45rem;
  margin: 0 auto;
  padding: var(--sp-6) max(var(--sp-5), env(safe-area-inset-right)) 72px max(var(--sp-5), env(safe-area-inset-left));
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

.prose h1 {
  font-size: clamp(30px, 5.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.prose .lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: var(--sp-7);
  text-wrap: pretty;
}
.prose h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 650;
  margin: var(--sp-7) 0 var(--sp-3);
  scroll-margin-top: 80px;
}
.prose section { scroll-margin-top: 80px; }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) 1.3em; }
.prose li { margin-bottom: 10px; padding-left: 4px; }
.prose li::marker { color: var(--text-dim); font-weight: 600; }
.prose strong { color: var(--text); font-weight: 650; }

.prose a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 3px;
  transition: text-decoration-color var(--dur-1);
}
.prose a:not(.btn):hover { text-decoration-color: currentColor; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-raised);
}

/* FAQ: each question is its own quiet card. */
.faq-item {
  margin-top: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.faq-item h2 { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 var(--sp-2); }
.faq-item > :last-child { margin-bottom: 0; }

.cta-card {
  margin-top: 64px;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.cta-card p { flex: 1 1 16rem; margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-dim); }

/* ---------- Footer ---------- */

body.doc .footer {
  padding: var(--sp-5) max(var(--sp-5), env(safe-area-inset-right)) calc(var(--sp-5) + env(safe-area-inset-bottom)) max(var(--sp-5), env(safe-area-inset-left));
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.45;
}

@media (hover: none) {
  .site-nav a { min-height: var(--tap); }
}

/* ---------- Phones (same breakpoint as the scanner) ---------- */

@media (max-width: 767px) {
  body.doc { font-size: 16px; line-height: 1.65; }
  .site-header {
    flex-wrap: wrap;
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
  }
  .header-tools { margin-left: auto; }
  /* The nav's first link already leads to the scanner. */
  .header-cta { display: none; }
  /* Section links drop to their own swipeable row. */
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    margin: 0 -6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .doc-main { padding: var(--sp-5) max(var(--sp-4), env(safe-area-inset-right)) 56px max(var(--sp-4), env(safe-area-inset-left)); }
  .prose .lead { font-size: 17px; margin-bottom: var(--sp-6); }
  .prose h2 { font-size: 21px; margin-top: var(--sp-6); }
  .prose h2, .prose section { scroll-margin-top: 120px; }
  .faq-item { padding: var(--sp-4); }
  .faq-item h2 { font-size: 17px; margin-top: 0; }
  .cta-card { padding: var(--sp-5); }
  .cta-card .btn { flex: 1 1 auto; }
}