/* The training guides' typography (#606), loaded by the public /guides pages
   (after public.css) and by every app page through base.html, where the staff
   guides overlay shows the same content.

   Every selector is scoped under .guide-doc (tests/test_guides_styles.py pins
   it): app pages load Tailwind, and a bare `h1` or `a` rule here would restyle
   the whole app. Tailwind's preflight also strips what the guides lean on --
   list markers, heading sizes, paragraph margins, link colour and underline,
   the <hr> rule -- so this file restores each one explicitly rather than
   relying on browser defaults the way public.css could. Each restored value is
   the one public.css or the browser default gave the public page, so moving
   the rules here leaves that page as it was.

   public.css's custom properties are not on app pages, so colours are literal. */

.guide-doc {
  color: #111827;
  line-height: 1.6;
  /* Long URLs and code wrap instead of widening the page or the overlay. Not
     `anywhere`: that would let table cells shrink below their longest word,
     squashing a wide table instead of letting it scroll in its own box. */
  overflow-wrap: break-word;
}

.guide-doc h1 { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 700; }
.guide-doc h2 { margin: 1.75rem 0 .35rem; font-size: 1.05rem; font-weight: 600; }
.guide-doc h3 { margin: 1.25rem 0 .3rem; font-size: .95rem; font-weight: 600; }
.guide-doc p { margin: .6rem 0; }
.guide-doc a { color: #4f46e5; font-weight: 500; text-decoration: underline; }
.guide-doc a:hover { color: #4338ca; }

/* The browser's default rule, which preflight flattens to a 1px pale line. */
.guide-doc hr {
  height: auto;
  margin: .5em auto;
  overflow: hidden;
  color: gray;
  border-style: inset;
  border-width: 1px;
  border-color: currentColor;
}

.guide-doc ul, .guide-doc ol { margin: .6rem 0; padding-left: 1.4rem; }
.guide-doc ul { list-style-type: disc; }
.guide-doc ol { list-style-type: decimal; }
.guide-doc ul ul, .guide-doc ol ul { list-style-type: circle; }
.guide-doc ul ul ul, .guide-doc ol ul ul { list-style-type: square; }
.guide-doc li { margin: .35rem 0; }

/* The index's own list: the browser's default list margin, a narrower indent
   and looser items than a guide's. Two classes outrank `.guide-doc ul`. */
.guide-doc .guide-index { margin: 1em 0; padding-left: 1.25rem; }
.guide-doc .guide-index li { margin: .6rem 0; }

.guide-doc .back-link { margin: 0 0 1rem; font-size: .875rem; }

.guide-doc blockquote {
  margin: 1rem 0;
  padding: .5rem 1rem;
  border-left: 3px solid #4f46e5;
  background: #f9fafb;
  color: #4b5563;
}
.guide-doc blockquote p { margin: .35rem 0; }

/* A guide's inline code; the index's /join stays plain, as it always was. */
.guide-doc.guide code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  background: #f3f4f6;
  padding: .1rem .3rem;
  border-radius: .25rem;
}
.guide-doc pre { overflow-x: auto; }

/* display:block + overflow-x lets a wide table scroll inside its own box on a
   narrow screen instead of widening the page or the overlay. */
.guide-doc table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .9rem;
}
.guide-doc th, .guide-doc td {
  padding: .5rem .6rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}
.guide-doc th { font-weight: 600; }

/* Admin Screen Tour figures (docs/training/admin-screen-tour.md). A row of linked
   screenshots; each phone shot is phone-width. A tall page is shown from a committed
   top-of-page crop (*-top.webp) and capped again here, and tapping it opens the full
   image. Nothing here is interactive: no script, nothing inline. `display: inline`
   and `baseline` undo preflight's block images; the tour shots set their own. */
.guide-doc img { display: inline; vertical-align: baseline; max-width: 100%; height: auto; }
.guide-doc .tour-shots {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  margin: 1rem 0 .35rem;
}
.guide-doc .tour-shots a { display: block; flex: 0 1 13.5rem; min-width: 0; }
.guide-doc .tour-shots a.tour-wide { flex-basis: 100%; }
.guide-doc img.tour-shot {
  display: block;
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
}
.guide-doc img.tour-shot-wide { max-height: none; }
.guide-doc .tour-caption { margin: 0 0 1rem; font-size: .8rem; color: #4b5563; }

/* Inside the overlay only (the dialog's body, app/templates/_guides_overlay.html).
   The title is smaller because the overlay's own header already names the guide.
   Two classes and a type outrank the phone rule's `.guide-doc h1` below. */
.guide-doc.guide-overlay-body h1 { font-size: 1.25rem; }

/* Narrow screens: public.css's phone rules for the guides, carried here with the
   rest. The h1 rule has to be here too, or `.guide-doc h1` above would outrank
   public.css's bare `h1` override and grow the public titles on a phone. */
@media (max-width: 30rem) {
  .guide-doc h1 { font-size: 1.3rem; }
  .guide-doc ul, .guide-doc ol { padding-left: 1.1rem; }
  .guide-doc blockquote { padding: .5rem .75rem; }
  /* Two phone shots side by side at ~150px each are too small to read; one per row. */
  .guide-doc .tour-shots a { flex-basis: 100%; }
  .guide-doc img.tour-shot { max-width: 18rem; }
}