/* ============================================================
   Chewtoy's Dugout — document pages · "Night Pitch" (2026-09)

   The reading shell (inc/doc-start.php + inc/doc-end.php) used by page-faq,
   page-contact, page-privacy-policy, page-terms-of-service, page.php and
   404.php. Canvas artboard: DocPage.dc.html. components.css supplies
   .ctd-toc, .ctd-details, .ctd-prose, .ctd-callout, .ctd-table; this file is
   the two-column layout, the reading measure, the FAQ accordion on native
   <details>, the contact cards and the 404.

   Breakpoints: 1000px (TOC folds above the text) and 640px (phone).
   ============================================================ */

/* ---------- the pitch, turned down ----------
   A doc page gets the LEAST of everything, and the floor is no exception: at
   the storefront's 0.62 the flags and the grass showed between every accordion
   row on the FAQ, which is texture behind prose — the one thing the effects
   layer is not allowed to do. Low enough here to read as stone underfoot and
   nothing more.

   This is the per-page EFFECT BUDGET from DESIGN-SYSTEM.md applied to the one
   token that can express it. The floor is fixed behind the whole document, so
   it cannot be enqueued per page like a stylesheet can — but --ground-amp is
   read off the layer, and the layer is a child of body, so a page that loads
   this file turns the pitch down for itself and nothing else. */
body { --ground-amp: 0.22; }

/* ---------- shell ---------- */
.ctd-doc { padding-block: var(--s-12); }
.ctd-doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.ctd-doc--toc .ctd-doc__grid { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-16); }
.ctd-doc__body { max-width: 760px; }
.ctd-doc__title { font-size: var(--fs-40); }
.ctd-doc__icon { color: var(--accent); }
.ctd-doc--narrow .ctd-doc__body { max-width: none; }

/* ---------- table of contents ---------- */
.ctd-toc__label { padding: 0 12px var(--s-2); }
.ctd-doc__toc a { border-radius: 0 var(--r-1) var(--r-1) 0; }

/* ---------- sections + reading copy ---------- */
.ctd-doc__section { display: flex; flex-direction: column; gap: var(--s-3); }
.ctd-doc__section > .ctd-h3 { padding-bottom: var(--s-2); }
.ctd-doc__prose { font-size: var(--fs-17); color: var(--text-2); max-width: var(--measure); text-wrap: pretty; }
.ctd-doc__prose p, .ctd-doc__prose ul, .ctd-doc__prose ol { margin: 0; }
.ctd-doc__prose > * + * { margin-top: var(--s-3); }
.ctd-doc__prose h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--fs-20); font-weight: 500; line-height: var(--lh-snug); padding-top: var(--s-4); }
.ctd-doc__prose h3, .ctd-doc__prose h4 { font-size: var(--fs-17); font-weight: 700; color: var(--text); padding-top: var(--s-2); }
.ctd-doc__prose strong { color: var(--text); }
.ctd-doc__prose ul, .ctd-doc__prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-2); }
.ctd-doc__prose li::marker { color: var(--accent); }
.ctd-doc__prose code { font-family: var(--font-mono); font-size: var(--fs-14); padding: 1px 6px; border: var(--bw) solid var(--line-1); border-radius: var(--r-1); background: var(--ink-900); color: var(--text); }
.ctd-doc__prose img { border-radius: var(--r-2); border: var(--bw) solid var(--line-1); }
.ctd-doc__table { overflow-x: auto; }
.ctd-doc__table .ctd-table { min-width: 480px; }
.ctd-doc__cta { align-items: center; }
.ctd-doc__cta .ctd-btn { flex: none; }
.ctd-doc__cta-copy { flex: 1; }

/* ---------- FAQ: native <details> on the .ctd-details skin ---------- */
details.ctd-details > summary { list-style: none; }
details.ctd-details > summary::-webkit-details-marker { display: none; }
details.ctd-details > summary .ctd-i { transition: transform var(--t-fast) var(--ease); }
details.ctd-details[open] > summary .ctd-i { transform: rotate(180deg); color: var(--accent); }
details.ctd-details > summary:hover { color: var(--gold-300); }
.ctd-details__a p { margin: 0; }
.ctd-details__a p + p { margin-top: var(--s-3); }
.ctd-details__a a { color: var(--link); }
.ctd-details__a strong { color: var(--text); }
.ctd-doc__faq-group { display: flex; flex-direction: column; }
.ctd-doc__faq-group > .ctd-h3 { padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--line-2); }

/* ---------- contact ---------- */
.ctd-doc__cards { gap: var(--s-4); }
.ctd-doc__card .ctd-card__body { gap: var(--s-3); }
.ctd-doc__card .ctd-i { color: var(--accent); }
.ctd-doc__card .ctd-btn { align-self: flex-start; margin-top: auto; }
/* The address is one unbreakable word and the card is a third of a 3-up grid,
   so on a wide screen the button ran 22px out of its column: `break-all` was
   already asking for the break, and the button's own `white-space: nowrap` was
   refusing it. */
/* An address is not a label, so it is not set like one (2026-09-23). The
   casting's caps and 0.06em tracking made "INFO@CHEWTOYSDUGOUT.CO.UK" wider
   than the card, and break-all then split it anywhere — ".C / O.UK" on the
   contact page. Lower case at the casting's own weight fits the card at every
   width from 1440 down; the wrap is kept only as the last resort, and at the
   @ and the dots rather than mid-word. */
.ctd-doc__card-email {
  white-space: normal; overflow-wrap: anywhere; text-align: center; padding-block: var(--s-2);
  text-transform: none; letter-spacing: 0.01em; font-size: var(--fs-14);
}
.ctd-doc__topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ctd-doc__topic { display: flex; gap: var(--s-3); padding: var(--s-4); border: var(--bw) solid var(--line-1); border-radius: var(--r-2); background: var(--surface); }
.ctd-doc__topic .ctd-i { color: var(--accent); margin-top: 2px; }
.ctd-doc__topic p { margin: var(--s-1) 0 0; font-size: var(--fs-14); color: var(--text-2); }
.ctd-doc__tips .ctd-i { color: var(--ok); }
.ctd-doc__tips li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text-2); }
.ctd-doc__tips li .ctd-i { margin-top: 3px; }

/* ---------- 404 ---------- */
.ctd-doc--404 .ctd-doc__head { align-items: center; text-align: center; }
.ctd-doc--404 .ctd-doc__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; letter-spacing: 0.04em; color: var(--accent-2); }
.ctd-doc--404 .ctd-lede { text-align: center; }
.ctd-doc__actions { justify-content: center; }

/* ---------- effects ----------
   Doc pages are the readable-first end of the design, so they spend the
   least: the rim that every raised surface carries, rules that fade out
   instead of stopping dead, and one bloom on the 404 numeral. No lift, no
   rake, nothing behind the prose — see DESIGN-SYSTEM.md §2 Effects. */
.ctd-doc__topic { box-shadow: var(--fx-rim); }
.ctd-doc__faq-group > .ctd-h3 {
  border-bottom: 0;
  background: var(--fx-fade-line) bottom left / 100% 1px no-repeat;
}
.ctd-doc--404 .ctd-doc__code { text-shadow: var(--fx-glow-headline); }


/* ============================================================
   TOC folds above the text
   ============================================================ */
@media (max-width: 1000px) {
  .ctd-doc { padding-block: var(--s-10); }
  .ctd-doc--toc .ctd-doc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .ctd-doc__toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s-2); }
  .ctd-toc__label { flex-basis: 100%; padding: 0 0 var(--s-1); }
  .ctd-doc__toc a { padding: 6px 10px; border: var(--bw) solid var(--line-2); border-left-width: var(--bw); border-radius: var(--r-pill); font-size: var(--fs-13); }
  .ctd-doc__toc a.on { border-color: var(--accent); }
}

/* ============================================================
   phone
   ============================================================ */
@media (max-width: 640px) {
  .ctd-doc { padding-block: var(--s-8); }
  .ctd-doc__title { font-size: var(--fs-32); }
  .ctd-doc__prose { font-size: var(--fs-16); }
  .ctd-doc__topics { grid-template-columns: 1fr; }
  .ctd-doc__cta { flex-direction: column; align-items: stretch; }
  .ctd-doc__actions { flex-direction: column; align-items: stretch; }
  .ctd-doc__actions .ctd-btn { width: 100%; }
}