/* guide.css — document layer for the partner guidebook at /guide.
   Loaded after styles.css, which supplies the tokens and every component the
   guide illustrates (pills, .kv grids, banners, .qt tables). This file only
   does the two things the app stylesheet has no reason to know about: reading
   typography for a long document, and printing.

   It also carries the app's first @media print block. The screen page and the
   printed one are the same document; the PDF at /api/guide/pdf is the belt to
   this braces, for when a partner wants a page-numbered file to mail on. */

/* ── Reading column ──────────────────────────────────────── */
.guide-body { background: var(--bg); }

.guide-bar {
  height: 60px; background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 3px solid var(--accent); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
}
.guide-bar .home-link { display: block; line-height: 0; }
.guide-bar .logo { height: 28px; width: auto; display: block; }
.guide-bar .spacer { flex: 1; }
.guide-bar .btn { text-decoration: none; }

.guide {
  max-width: 780px; margin: 0 auto; padding: 40px 24px 80px;
  font-size: 15px; line-height: 1.65;
}
.guide p { max-width: 68ch; color: var(--text); }

/* ── Cover ───────────────────────────────────────────────── */
.guide-cover { padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.guide-logo { height: 30px; width: auto; display: block; margin-bottom: 22px; }
.guide-cover h1 { font-size: 40px; letter-spacing: -0.02em; margin: 0; }
.guide-subtitle { color: var(--accent-dark); font-weight: 500; margin: 6px 0 20px; font-size: 16px; }
.guide-intro { color: var(--muted); font-size: 15px; margin: 0; }

/* ── Contents ────────────────────────────────────────────── */
.guide-toc { margin: 28px 0 8px; }
.guide-toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
}
@media (max-width: 620px) { .guide-toc ol { grid-template-columns: 1fr; } }
.guide-toc li { font-size: 15px; font-weight: 500; }
.guide-toc li::before { content: "▪ "; color: var(--accent); }
.guide-toc a { color: var(--text); text-decoration: none; }
.guide-toc a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ── Sections ────────────────────────────────────────────── */
.guide-section { margin-top: 44px; scroll-margin-top: 80px; }
/* Chapter title over a full-width rule, as on the designed guide's pages. */
.guide-section h2 {
  font-size: 24px; letter-spacing: -0.01em; margin: 0 0 18px;
  padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.guide-section h3 { font-size: 17px; color: var(--accent-dark); margin: 26px 0 10px; }
.guide-section > p + p { margin-top: -2px; }

.guide-list { max-width: 68ch; padding-left: 22px; margin: 14px 0; }
.guide-list li { margin-bottom: 7px; }

/* Ordered lists: boxed number badges, like the sign-in steps on the designed
   guide. The badge echoes .onboard-num but square-cornered and a touch larger. */
.guide-ol { list-style: none; padding-left: 0; }
.guide-ol li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.guide-ol-num {
  flex: none; width: 24px; height: 24px; border-radius: 5px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.guide-ol li > div { padding-top: 2px; }

/* Numbered steps, same component as the welcome panel on the desk, with the
   designed guide's colour run: blue, navy, green. */
.guide-steps { margin: 18px 0 22px; }
.guide-steps li:nth-child(2) .onboard-num { background: #233676; }
.guide-steps li:nth-child(2) div strong { color: #233676; }
.guide-steps li:nth-child(3) .onboard-num { background: var(--success); }
.guide-steps li:nth-child(3) div strong { color: var(--success-text); }
.guide-steps li:nth-child(1) div strong { color: var(--accent-dark); }

/* Field reference and status reference: the app's .kv grid with room for a
   full sentence in the value column. */
.guide-fields, .guide-statuses {
  grid-template-columns: 200px 1fr; gap: 14px 18px;
  font-size: 14px; margin: 18px 0 4px; align-items: baseline;
}
.guide-fields dt { color: var(--text); font-weight: 600; }
.guide-statuses dt { justify-self: start; }
.guide-fields dd, .guide-statuses dd { font-weight: 400; color: var(--muted); }
@media (max-width: 620px) {
  .guide-fields, .guide-statuses { grid-template-columns: 1fr; gap: 4px 0; }
  .guide-fields dd, .guide-statuses dd { margin-bottom: 12px; }
}

.guide-table { margin: 18px 0; }
.guide-table .qt td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.guide-table .qt tr:last-child td { border-bottom: none; }
.guide-table .qt td:first-child { font-weight: 600; white-space: nowrap; }

.guide-callout { margin: 20px 0; max-width: 68ch; line-height: 1.6; }
.guide-callout strong { display: block; margin-bottom: 3px; }

.guide-foot {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border);
  color: var(--muted-2); font-size: 13px; }
.guide-foot p { color: inherit; margin: 0; }
.guide-foot .guide-confidential { margin-top: 6px; }

/* ── Print ───────────────────────────────────────────────── */
/* Save as PDF from the browser and this is what comes out. Page numbers are
   the one thing CSS can't give us reliably, which is why /api/guide/pdf
   exists as well. */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  .no-print { display: none !important; }

  html, body { background: #fff; }
  .guide { max-width: none; margin: 0; padding: 0; font-size: 10.5pt; line-height: 1.55; }
  .guide p, .guide-list, .guide-callout { max-width: none; }

  /* Keep the fills: pills and callouts carry meaning, not decoration. */
  .pill, .banner, .onboard-num, .guide-ol-num, .qt th, .chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .guide-cover h1 { font-size: 30pt; }
  .guide-toc { break-after: page; }

  /* Each chapter starts a fresh sheet, like the mailed PDF. Small units stay
     atomic, and each heading stays pinned to the copy underneath it. */
  .guide-section { break-before: page; margin-top: 26px; }
  .guide-section h2 { break-after: avoid; font-size: 15pt; }
  .guide-section h2 + p { break-before: avoid; }
  .guide-section h3 { break-after: avoid; font-size: 12pt; }
  .guide-section h3 + p { break-before: avoid; }
  .guide-fields dt, .guide-statuses dt, .guide-list li, .guide-callout, .guide-steps li { break-inside: avoid; }
  .qt tr { break-inside: avoid; }

  /* Anchors are dead on paper; don't dress them up as live links. */
  .guide-toc a { color: var(--text); text-decoration: none; }

  .guide-foot { margin-top: 32px; }
}