/* User-guide pages. Loads after style.css and reuses its tokens; everything
   here is guide-only so the marketing pages never pay for it. The layout is a
   sticky contents rail beside a measured article; the components (steps,
   callouts, UI labels, troubleshooting accordions) exist so long procedural
   copy stays scannable. Print rules at the bottom double as the PDF layout. */

/* ---- Guide hero: compact version of the product hero ---- */

.guide-hero { padding: 2.75rem 0 3.25rem; }
.guide-hero .lede { margin-top: 1rem; }
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.88rem;
}
.guide-meta strong { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.guide-hero .cta-row { margin-top: 1.6rem; }

/* ---- Shell: contents rail + article ---- */

.guide-shell {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: 2.5rem 0 4rem;
}

.guide-toc {
  position: sticky;
  top: 1.25rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding-right: 0.25rem;
  font-size: 0.92rem;
}
.guide-toc h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.guide-search { position: relative; margin-bottom: 1.1rem; }
.guide-search input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55em 0.8em;
}
.guide-search input:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 1px; }
.guide-search input::placeholder { color: var(--muted); }

.toc-group { margin: 0 0 1.1rem; }
.toc-group > strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.guide-toc ul { list-style: none; margin: 0; padding: 0; }
.guide-toc li { margin: 0; }
.guide-toc a {
  display: block;
  padding: 0.28em 0.6em;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.guide-toc a:hover { background: var(--panel); color: var(--green-ink); }
.guide-toc a.is-current {
  border-left-color: var(--green);
  background: var(--panel);
  font-weight: 600;
}
.toc-note { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
.toc-empty { display: none; color: var(--muted); font-size: 0.88rem; padding: 0.25rem 0.6em; }
.guide-toc.is-filtering .toc-empty.is-shown { display: block; }
.guide-toc .is-hidden { display: none; }

/* ---- Article ---- */

.guide-article { max-width: 50rem; min-width: 0; counter-reset: chapter; }
.guide-article > section + section { margin-top: 3.25rem; }
.guide-article section > h2::before {
  counter-increment: chapter;
  content: counter(chapter) ". ";
  color: var(--green-ink);
}
.guide-article section > h2 {
  font-size: var(--step-4);
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding-top: 1.75rem;
}
.guide-article section:first-child > h2 { border-top: 0; padding-top: 0; }
.guide-article h3 { margin-top: 2rem; }
.guide-article h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.6rem 0 0.5rem;
}
.guide-article p, .guide-article li { max-width: 66ch; }
.guide-article ul { padding-left: 1.25rem; }
.guide-article li + li { margin-top: 0.35rem; }

/* Anchor links appear on hover so headings stay quiet. */
.anchor-link {
  margin-left: 0.4rem;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
}
h2:hover .anchor-link, h3:hover .anchor-link,
.anchor-link:focus-visible { opacity: 1; }
.anchor-link:hover { color: var(--green-ink); }

/* Names of buttons, menus, fields and statuses as they appear in the app. */
.ui {
  font-family: var(--font-body);
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.08em 0.45em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
}
.path { font-weight: 600; }

/* ---- Steps: the tile motif carries the numbering ---- */

.step-list {
  list-style: none;
  counter-reset: step;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
}
.step-list > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 2.6rem;
  margin: 0;
  max-width: 66ch;
}
.step-list > li + li { margin-top: 0.85rem; }
.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 6px;
  background: var(--coal);
  color: var(--lime);
  font: 700 0.9rem/1.7rem var(--font-display);
  text-align: center;
}
.step-list .step-detail { display: block; color: var(--muted); font-size: 0.93rem; margin-top: 0.15rem; }

/* ---- Callouts ---- */

.callout {
  border-left: 4px solid var(--green);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  max-width: 66ch;
  font-size: 0.97rem;
}
.callout > strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 0.25rem;
}
.callout-warn { border-left-color: #B8860B; }
.callout-warn > strong:first-child { color: #8A6508; }

/* ---- Reference tables (statuses, tiers, rates) ---- */

.guide-table-scroll { overflow-x: auto; margin: 1.25rem 0; }
.guide-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.guide-table th, .guide-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}
.guide-table tbody th { font-weight: 600; white-space: nowrap; }

/* Status swatches echo the register row colours. */
.swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 0.45em;
  vertical-align: -0.05em;
}

/* ---- Screenshots ---- */

.guide-shot { margin: 1.4rem 0; }
.guide-shot .feature-shot { box-shadow: 0 0.6rem 1.8rem rgba(18, 22, 29, 0.08); }
.guide-shot figcaption { margin-top: 0.55rem; color: var(--muted); font-size: 0.88rem; max-width: 66ch; }

/* ---- Troubleshooting accordions ---- */

.ts-list { margin: 1.25rem 0; }
.ts-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ts-item + .ts-item { margin-top: 0.7rem; }
.ts-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
}
.ts-item summary::-webkit-details-marker { display: none; }
.ts-item summary::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--green);
  align-self: center;
}
.ts-item[open] summary { border-bottom: 1px solid var(--line); }
.ts-item summary:hover { color: var(--green-ink); }
.ts-body { padding: 0.9rem 1.1rem 1rem; font-size: 0.97rem; }
.ts-body p { max-width: 70ch; }
.ts-cause { color: var(--muted); }
.ts-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin: 1rem 0; }
.ts-toggle {
  font: 600 0.88rem var(--font-body);
  color: var(--green-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 0.15em;
}
.ts-toggle:hover { text-decoration-thickness: 2px; }

/* ---- FAQ shares the accordion look ---- */
.faq-q summary { font-weight: 600; }

/* ---- Guides hub cards ---- */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.75rem 1.6rem;
  box-shadow: 0 0.8rem 2.2rem rgba(18, 22, 29, 0.07);
}
.guide-card .product-title-row { margin-bottom: 0.9rem; }
.guide-card > p { color: var(--muted); }
.guide-card .cta-row { margin-top: auto; padding-top: 1.4rem; align-items: center; }
.guide-card-contents { list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: 0.92rem; color: var(--muted); }
.guide-card-contents li { position: relative; padding-left: 1.4rem; margin: 0.4rem 0; }
.guide-card-contents li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--green);
}

/* ---- Back to top ---- */

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: none;
  padding: 0.55em 0.95em;
  border: 0;
  border-radius: 8px;
  background: var(--coal);
  color: #fff;
  font: 600 0.88rem var(--font-body);
  cursor: pointer;
  box-shadow: 0 0.5rem 1.5rem rgba(18, 22, 29, 0.35);
}
.back-to-top:hover { background: var(--coal-raise); }
.back-to-top.is-shown { display: block; }

/* ---- Mobile ---- */

@media (max-width: 56em) {
  .guide-shell { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.75rem; }
  .guide-toc {
    position: static;
    max-height: 45vh;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
  }
  .guide-cards { grid-template-columns: 1fr; }
}

/* ---- Print / PDF ----
   The committed PDFs are printed from these pages (scripts/build_guide_pdfs.mjs),
   so this block is the PDF's layout as well as the reader's Ctrl+P. */

@media print {
  .site-header, .guide-toc, .site-footer, .back-to-top, .ts-toolbar,
  .skip-link, .consent-banner, .guide-hero .cta-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .guide-hero { background: var(--coal) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 1.5rem 0; }
  .guide-shell { display: block; padding: 1.25rem 0 0; }
  .guide-article { max-width: none; }
  .guide-article section { break-inside: auto; }
  .guide-article section > h2 { break-after: avoid; break-before: page; }
  .guide-article section:first-child > h2 { break-before: auto; }
  h3, h4 { break-after: avoid; }
  .step-list > li, .callout, .ts-item, .guide-table tr, .guide-shot { break-inside: avoid; }
  .ts-item, .ui { border-color: #999; }
  .ts-item summary { cursor: default; }
  .anchor-link { display: none; }
  .guide-shot .feature-shot { box-shadow: none; border-color: #999; }
  a { color: #000; text-decoration: none; }
  .guide-article a[href^="https://"]:not(.shot-link)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
  .print-only { display: block !important; }
}

.print-only { display: none; }