/* Guide page. Reuses the app's tokens from app.css. */

.guidebody {
  min-height: 100dvh;
  padding-block-end: 3rem;
}

.guidebar {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .6rem clamp(.75rem, 3vw, 1.5rem);
  padding-block-start: calc(.6rem + env(safe-area-inset-top));
  background: light-dark(oklch(1 0 0 / .72), oklch(0.19 0.02 var(--h) / .72));
  backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}

.guide {
  max-inline-size: 76ch;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
}

.guide h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-block-end: .5rem; }
.guide h2 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-block: 2.5rem .75rem;
  padding-block-end: .4rem;
  border-block-end: 1px solid var(--border);
  scroll-margin-block-start: 5rem;
}
.guide h3 { font-size: 1.02rem; margin-block: 1.5rem .5rem; color: var(--text); }
.guide p, .guide li { line-height: 1.6; }
.guide p { margin-block-end: .8rem; }
.guide ul, .guide ol { margin-block-end: .9rem; padding-inline-start: 1.4rem; }
.guide li { margin-block-end: .35rem; }
.guide ul ul, .guide ol ul { margin-block: .35rem; }
.guide code {
  font-family: var(--mono); font-size: .88em;
  padding: .12em .38em; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.guide a { color: var(--brand); text-underline-offset: 3px; }

.guide__lede { font-size: 1.05rem; color: var(--text-2); margin-block-end: 1.5rem; }

.guide__toc {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .8rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.guide__toc a {
  min-block-size: var(--tap-min);
  display: inline-grid; place-items: center;
  padding-inline: .9rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .92rem; font-weight: 560;
  text-decoration: none;
}
.guide__toc a:hover { background: var(--surface-3); }

.steps > li { margin-block-end: .7rem; }

.guide__table {
  inline-size: 100%;
  margin-block: .5rem 1.2rem;
  font-size: .94rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.guide__table caption {
  text-align: start; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); padding-block-end: .4rem;
}
.guide__table th, .guide__table td {
  padding: .6rem .8rem; text-align: start; vertical-align: top;
  border-block-end: 1px solid var(--border);
}
.guide__table th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2); background: var(--surface-2);
}
.guide__table tbody tr:last-child td { border-block-end: 0; }

.callout {
  margin-block: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  border-inline-start: 4px solid var(--brand);
  background: var(--brand-soft);
}
.callout--quiet { border-color: var(--border); border-inline-start-color: var(--border-str); background: var(--surface-2); }
.callout--danger { border-color: oklch(from var(--danger) l c h / .5); border-inline-start-color: var(--danger); background: var(--danger-soft); }

.swatch {
  display: inline-block; inline-size: .8em; block-size: .8em;
  border-radius: 3px; margin-inline-end: .35em; vertical-align: baseline;
}
.swatch--warn { background: var(--warn); }

.faq dt { font-weight: 620; margin-block-start: 1.1rem; }
.faq dd { margin-inline-start: 0; color: var(--text-2); line-height: 1.55; }

.guide__foot { margin-block-start: 2.5rem; display: grid; gap: .8rem; justify-items: start; }
.guide__contact { color: var(--text-2); font-size: .95rem; }

@media print {
  .guidebar, .guide__toc, .guide__foot, .noprint { display: none !important; }
  body { background: #fff; color: #000; }
  .guide { max-inline-size: none; padding: 0; }
  .guide h2 { break-after: avoid; }
  .guide__table, .callout, .faq dt { break-inside: avoid; }
  .guide__table th { background: #f4f4f4 !important; }
  .callout { background: #f7f7f7 !important; border-color: #999 !important; }
  @page { margin: 16mm; }
}