/* Quick Start Guide typography + print rules (Discussion #364).
 *
 * Scoped under `.guide-doc` (the article on /guide) so nothing else
 * on the site is affected. Plain CSS — no Tailwind build step needed,
 * mirroring legal.css. The audience is deliberately non-technical:
 * larger base type, short measure, generous spacing, numbered steps.
 *
 * The DB-stored override body reuses these classes, so a superuser
 * editing the HTML keeps the same look without touching CSS.
 */

.guide-doc {
  color: #1f2937;
  font-size: 1.0625rem;      /* 17px — a notch larger than app copy */
  line-height: 1.65;
}

.guide-doc h1 {
  font-size: 1.875rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

/* Subtitle line directly under the h1. */
.guide-doc .guide-lede {
  color: #4b5563;
  font-size: 1.0625rem;
  margin: 0 0 1.5rem 0;
}

.guide-doc h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #065f46;            /* emerald-800 — friendly, matches brand */
  margin: 2.25rem 0 0.75rem 0;
  padding-top: 1.25rem;
  border-top: 2px solid #d1fae5;
  scroll-margin-top: 4rem;
}

.guide-doc h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111827;
  margin: 1.5rem 0 0.5rem 0;
}

.guide-doc p { margin: 0 0 0.875rem 0; }

.guide-doc ul, .guide-doc ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}
.guide-doc ul { list-style: disc; }
.guide-doc ol { list-style: decimal; }
.guide-doc li { margin-bottom: 0.375rem; }
.guide-doc li::marker { color: #059669; font-weight: 700; }

.guide-doc strong { color: #111827; font-weight: 700; }

.guide-doc a { color: #047857; text-decoration: underline; }
.guide-doc a:hover { color: #065f46; }

/* ── Table of contents ─────────────────────────────────────────── */
.guide-toc {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem 0;
  font-size: 0.9375rem;
}
.guide-toc .guide-toc-title {
  font-weight: 700;
  color: #065f46;
  margin-bottom: 0.375rem;
}
.guide-toc ol { margin: 0; padding-left: 1.25rem; }
.guide-toc li { margin-bottom: 0.125rem; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }

/* ── Screenshots ───────────────────────────────────────────────── */
.guide-doc figure {
  margin: 1rem auto 1.25rem auto;
  text-align: center;
}
.guide-doc figure img,
.guide-doc img.guide-shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Phone-width captures shouldn't blow up to the article's full
   640px+ measure — cap them at a realistic handset width. */
.guide-doc figure img.guide-shot-phone { max-width: 300px; }
.guide-doc figure img.guide-shot-wide  { max-width: 560px; }
.guide-doc figcaption {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.375rem;
}

/* Two phone shots side by side (stack on narrow screens). */
.guide-shot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}
.guide-shot-row figure { flex: 0 1 260px; margin: 0.5rem 0 1rem 0; }
.guide-shot-row figure img.guide-shot-phone { max-width: 100%; }

/* ── Callouts ──────────────────────────────────────────────────── */
.guide-tip, .guide-warn {
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9375rem;
}
.guide-tip {
  border-left: 4px solid #10b981;
  background: #ecfdf5;
  color: #065f46;
}
.guide-warn {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
}
.guide-tip strong, .guide-warn strong { color: inherit; }

/* ── "Button" chips — name a UI control inline ─────────────────── */
.guide-btn {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  background: #f9fafb;
  color: #111827;
  font-size: 0.875em;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Map-tool legend table ─────────────────────────────────────── */
.guide-tools {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 0.75rem 0 1.25rem 0;
  font-size: 0.9375rem;
}
.guide-tools th {
  background: #f3f4f6;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}
.guide-tools td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.guide-tools tr:last-child td { border-bottom: none; }
.guide-tools td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: #111827;
}
.guide-tools td img {
  width: 2rem;
  height: 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  display: block;
}

/* ── Numbered step blocks (install steps etc.) ─────────────────── */
.guide-steps { counter-reset: guide-step; list-style: none; padding-left: 0; }
.guide-steps > li {
  counter-increment: guide-step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.75rem;
}
.guide-steps > li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0.0625rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #059669;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Print — "Print / Save as PDF" gives a clean handout ───────── */
@media print {
  /* Hide the app chrome; the article becomes the whole document. */
  .guide-no-print { display: none !important; }

  body { background: #ffffff !important; }
  main { padding: 0 !important; }
  .guide-doc,
  article.guide-doc {
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 11pt;
  }

  @page { margin: 1.6cm; }

  /* Keep a heading with the content that follows it, and never
     split a screenshot, callout, or step across pages. */
  .guide-doc h2 { break-after: avoid-page; }
  .guide-doc h3 { break-after: avoid-page; }
  .guide-doc figure,
  .guide-tip, .guide-warn,
  .guide-steps > li,
  .guide-tools tr { break-inside: avoid-page; }

  .guide-doc figure img { box-shadow: none; }
  .guide-doc a { color: inherit; text-decoration: none; }
}

/* ── In-app shell (Disc #534 V2.20 item 1) ─────────────────────────
   Signed-in users get the guide inside base.html so the sidebar is
   there to navigate back out of — on an iOS home-screen PWA there is
   no browser chrome, so the standalone shell was a dead end.

   Printing from that shell has to strip the app furniture the same way
   `.guide-no-print` strips the standalone header: sidebar, mobile top
   bar, page footer and the toast layer are chrome, not document.

   The height/overflow unwind is the part that actually matters.
   base.html nests two scroll containers between <body> and <main>
   (`flex h-full` → `flex-1 flex flex-col overflow-hidden` → `main
   flex-1 overflow-auto`); left alone they clip the article to a single
   viewport and the printout is one page of a twelve-page guide. The
   two wrappers are addressed STRUCTURALLY (`> div`, `> div > div`)
   rather than by their Tailwind classes, which churn.

   All of it is scoped to `body.guide-app` so no other page's print
   output changes. */
@media print {
  body.guide-app aside,
  body.guide-app header,
  body.guide-app footer,
  body.guide-app #toast-container { display: none !important; }

  body.guide-app,
  body.guide-app > div,
  body.guide-app > div > div,
  body.guide-app main {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.guide-app main {
    padding: 0 !important;
    margin: 0 !important;
  }
}