/* /docs -- the player how-to reference. Rides on rules.css, which
   already has the contents rail, the reading column and the tables
   (same pattern api.css already follows for /api) -- only the things a
   how-to page needs that a rulebook does not live here: screenshot
   figures, the troubleshooting list and the changelog.

   The search box itself (.docs-search-*) used to live in this file --
   it now lives in search.css, shared with /rules and /account, which
   this page also loads. See page-search.js's own header comment for
   why the search code moved to a shared module while each page's
   scroll-spy (docs.js's own setupScrollSpy()) stayed copied. */

/* ---- figures ------------------------------------------------------- */
.docs-figure {
  margin: 4px 0 20px;
  max-width: 560px;
}

.docs-figure-wide { max-width: 100%; }

.docs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mw-line);
  border-radius: 6px;
  background: var(--mw-page);
}

.docs-figure figcaption {
  margin-top: 6px;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  font-style: italic;
}

/* ---- troubleshooting ---------------------------------------------------
   A symptom (dt) the reader recognizes from their own screen, followed
   by what to do about it (dd) -- deliberately organized by what you
   SEE, per the page copy, so this reads as an index of screens rather
   than a chain of causes. */
.docs-trouble { margin: 0; }

.docs-trouble dt {
  color: var(--mw-gold-light);
  font-weight: 800;
  font-size: 1.0625rem;
  margin: 28px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mw-line);
}
.docs-trouble dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.docs-trouble dd {
  margin: 0;
  color: var(--mw-text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 68ch;
}
.docs-trouble dd p { margin: 0 0 10px; }
.docs-trouble dd p:last-child { margin-bottom: 0; }
.docs-trouble dd .rules-list { margin: 8px 0 0; }

/* ---- changelog ------------------------------------------------------ */
.docs-changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--mw-text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 68ch;
}

.docs-changelog li {
  padding: 12px 0;
  border-bottom: 1px solid var(--mw-line);
}
.docs-changelog li:last-child { border-bottom: 0; }

.docs-changelog-date {
  display: block;
  color: var(--mw-text-6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}