/* Plain Chalk: one page frame for the guides, tools, help and recruiter pages
   (Fable round 3, "ONE SYSTEM", 3 to 4 October 2026).

   Every page in this family opens the same way: a board band on the shared
   1200px edge (the masthead logo's left edge), an optional breadcrumb, the
   page title at --t-h1, one lede line, then paper at one fixed distance below
   the chalk tray. Paper sections share one heading size and one rhythm, prose
   stops at a reading measure on the same left edge, and every disclosure is
   the same paper row with the drawn plus/minus marker from styles.css.

   This sheet is linked only from this family's pages, after styles.css and
   before each page's own sheet, so a page can still fine-tune. The rules are
   written so they can move into styles.css unchanged (proposal in
   research/GUIDES-TOOLS-PAGES.md). No motion here: css/motion.css owns it. */

body {
  --band-gap: var(--band-pad-top);                       /* tray to first paper line: 44px wide, 28px phone */
  --section-gap: clamp(40px, 4.2vw, 56px);               /* between paper sections: 56px wide, 40px phone */
  --prose: var(--measure, 68ch);                         /* reading measure (66ch), left-aligned on the shared edge */
  --t-lede: clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17px phone, 20px wide */
}

/* ---------- The band ---------- */
:root body :is(.page-hero, .band-head, .not-found-hero) {
  padding-block: var(--band-pad-top) 0 !important;
  margin: 0 0 var(--band-gap) !important;
}
:root body :is(.page-hero, .band-head, .not-found-hero) > :is(.page-wrap, .container) {
  max-width: var(--site-width) !important;
  margin: 0 auto !important;
  padding-bottom: var(--band-pad-bottom) !important;
  text-align: left;
}
:root body :is(.page-hero, .band-head, .not-found-hero) h1 {
  margin: 0 !important;
  max-width: 24ch;
}
:root body :is(.page-hero, .band-head, .not-found-hero) :is(.lede, .band-head__lede) {
  margin: 12px 0 0 !important;
  max-width: 62ch !important;
  font-family: var(--font-ui) !important;
  font-weight: 450 !important;
  font-size: var(--t-lede) !important;
  line-height: 1.5 !important;
  color: var(--chalk-2);
  text-wrap: balance;
}
/* The trail sits 14px above the title; nothing else ever sits above it. */
:root body :is(.page-hero, .band-head, .not-found-hero) .crumbs { margin: 0 0 14px !important; }
/* Whatever follows the lede inside the band (actions, tabs, a search, a note)
   starts one step below it. */
:root body :is(.page-hero, .band-head, .not-found-hero) :is(.lede, .band-head__lede) ~ :is(div, form, nav, ul, p:not(.page-date)) { margin-top: 24px; }
:root body :is(.page-hero, .band-head) :is(.page-date, .page-meta, .kicker) { margin: 12px 0 0 !important; font-family: var(--font-ui) !important; font-size: 15px !important; line-height: 1.5; letter-spacing: 0 !important; color: var(--chalk-3); }

/* ---------- Paper ---------- */
/* The first paper block starts at the band gap: its own top padding goes. */
:root body main > :is(.page-hero, .band-head, .not-found-hero) + :is(section, div, article, details) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Every content shell on these pages is the shared edge, never a centred
   narrow column. Reading width is set on the text instead (below). */
:root body main :is(.page-section, .section, .journey-section) > :is(.page-wrap, .container) {
  max-width: var(--site-width);
}
/* Section headings on paper: one size, one rhythm. A heading that follows
   other content in its section always has room above it. */
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > h2 {
  margin: 0 0 14px;
}
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > :not(h2, .crumbs) + h2 {
  margin-top: clamp(40px, 4.2vw, 56px) !important;
}
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > :not(h2, h3) + h3 {
  margin-top: 28px !important;
}
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > h3 {
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.35;
  letter-spacing: 0;
}
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > h2 + h3 { margin-top: 16px; }

/* A section heading is separated by space, not by a rule: the legacy
   `.page-section h2` top rule drew a line over some headings and not others. */
:root body main .page-section h2 { border-top: 0; padding-top: 0; }

/* Prose stops at the reading measure, on the shared left edge. */
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > :is(p, ul:not([class]), ol:not([class]), blockquote, .prose, article) {
  max-width: var(--prose);
}
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) :is(p, li) { text-wrap: pretty; }
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > :is(ul, ol):not([class]) { padding-left: 1.25em; }
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > :is(ul, ol):not([class]) > li + li { margin-top: 6px; }

/* Small print still carries facts: never under 15px on these pages. */
:root body main :is(.fine, small) { font-size: 15px; line-height: 1.5; }
/* Comparison tables carry the facts being compared: 15px at least. */
:root body main .compare-table.compact :is(th, td, caption) { font-size: max(15px, 1em); line-height: 1.45; }

/* ---------- Buttons ---------- */
/* A long label wraps inside its button rather than widening the page (a
   320px phone pushed "Ten useful habits for online English teaching" 40px
   past the edge). */
:root body main .btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: break-word; }
/* Controls in a row wrap with one gap and never touch; the system's
   .btn + .btn margin is replaced by the gap so a wrapped button starts on
   the same left edge as the first. */
:root body main :is(.btn-row, .action-row, .journey-cta, .quiz-cta-row, .cl-actions, .offer-hero__actions, .guide-more, .finder-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
:root body main :is(.btn-row, .action-row, .journey-cta, .quiz-cta-row, .cl-actions, .offer-hero__actions, .guide-more, .finder-actions) > :is(.btn, .btn-chalk) { margin: 0 !important; }

/* ---------- One disclosure ---------- */
/* A paper row: white, a thin rule, the cut corner, the label in the reading
   face and the drawn plus/minus at the end of the row (styles.css). Folds
   that follow each other sit 8px apart. */
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) {
  margin: 0;
  padding: 0;
  background: var(--surface) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-s);
  box-shadow: none;
}
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) + details { margin-top: 8px; }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  margin: 0;
  padding: 14px 18px;
  font: 600 17px/1.35 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > summary:hover { text-decoration: underline; text-underline-offset: .2em; }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details):hover { border-color: var(--rule-strong) !important; }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details)[open] > summary { border-bottom: 1px solid var(--rule); }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > :not(summary) {
  margin: 0;
  padding: 14px 18px 18px;
}
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > :not(summary) + :not(summary) { padding-top: 0; }
:root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) p { color: var(--ink-2); max-width: var(--prose); }

/* The device-recovery empty state is a chalk panel inside a paper fold. */
:root body main #savedLegacy .board-empty p { color: var(--chalk-2); }

/* A run of questions stays within a glance: label and marker never sit a
   whole page width apart. */
:root body main :is(.page-section, .section) > :is(.page-wrap, .container) > details { max-width: 820px; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > summary { padding: 12px 16px; }
  :root body main :is(.journey-lists details, details.faq, details.feed-fold, details.offer-faq__item, details.draft-rescue, :is(.page-section, .section) > :is(.page-wrap, .container) > details) > :not(summary) { padding: 12px 16px 16px; }
}