/* Sunbeam Dental interior chassis (phase 2 wave A; v2-specs/interiors-plan.md "Chassis").
   Loaded on the 14 interior pages only, after tokens.css + site.css and before the ONE page
   stylesheet css/page-<name>.css. Page waves never edit this file: they file a request in
   v2-specs/shared-requests.md. Precedents: mahwah-int/01 + /02 (bordered sheet, in-sheet title,
   shared back button), mvendo-int/05 (prefooter band, stamped by tools/inject_chrome.py),
   system/mobile.md (house phone system). Deltas are logged in v2-specs/build-log.md,
   "Phase 2 wave A (chassis)". No window.innerWidth anywhere; every value that is viewport
   relative in the recipe is authored as its ratio (Pass 1b). */

/* ------------------------------------------------------------------ chassis tokens */
:root {
  /* display ink on the sheet: --steel moved 25% toward white = rgb(129,146,175), 3.15:1 on white.
     Paler than the body text (family law: display paler than body, contrast from face and colour,
     never weight) and still >= 3:1 for large text. mahwah's own rgb(132,155,193) is 2.82:1 (class B).
     LARGE TEXT ONLY (>= 24px): anything smaller on the sheet uses --steel (5.22:1) or --ink. */
  --steel-pale: rgb(129, 146, 175);

  --sheet-max: 1200px;                 /* mahwah-int: max-width 1200 from 1220 up */
  --sheet-border: 1px solid var(--steel);   /* recipe rgb(3,80,126) -> the brand hue (identity swap) */
  /* vertical rhythm read from mahwah-int/01 + /02 .jpg at 1440 (fixed px, height independent):
     title cap top 40 below the sheet's top border, hairline at 112, content at 143 (hub) or 112
     (article), last text -> exit button 78, button -> bottom border 31, content -> bottom border
     63 when there is no exit row */
  --sheet-pad-top: 34px;               /* tuned on the render: Gelasio caps land at 40 like mahwah's */
  --title-gap: 22px;                   /* H1 line box -> hairline (hub) or -> first media (article) */
  --hub-gap: 30px;                     /* hairline -> first content */
  --exit-gap: 72px;                    /* body -> the exit row (back pill) */
  --sheet-pad-bottom: 30px;
  --sheet-end-gap: 32px;               /* extra room when the body is the sheet's last block */
  --measure: 70ch;                     /* readable prose measure (class B, see .prose) */

  /* phone sheet form (<= 767; DECISION in build-log "Phase 2 wave A"): a 12px canvas gutter
     around a fully bordered sheet. The gutter is the only place the canvas can show beside the
     sheet on a phone, so it is what keeps "a sheet on patterned paper" legible at 390 */
  --sheet-gutter: 12px;
  --sheet-side-border: 1px;
  --sheet-gap-phone: 12px;             /* canvas above and below the sheet on phones */
  --well-inset-phone: 8px;             /* border -> text: text lands 12 + 1 + 8 = 21 from the edge */
}

/* ------------------------------------------------------------------ page frame */
/* sticky footer on short pages: the footer never floats mid-screen over bare canvas */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site-footer { flex: none; }

/* interiors have no hero: content starts below the fixed chrome (125 desktop / 80 bar) */
main.interior { display: block; padding-top: var(--chrome-h); }
/* in-page targets (homepage deep links services.html#checkups, patient-info.html#forms, legal
   contents links) land clear of the fixed chrome */
main.interior [id] { scroll-margin-top: calc(var(--chrome-h) + 24px); }

/* ------------------------------------------------------------------ the sheet (mahwah-int) */
/* margin 3% auto: vertical % resolves against the containing block's WIDTH (mahwah-int/01
   CORRECTION: 43.2 at 1440, 38.4 at 1280, zero coupling to the header height) */
.sheet {
  display: block; position: relative;
  margin: 3% auto;
  background: #fff; border: var(--sheet-border); border-radius: 0; box-shadow: none;
  padding: var(--sheet-pad-top) 0 var(--sheet-pad-bottom);
}
@media (min-width: 768px) { .sheet { max-width: 94%; } }
@media (min-width: 1220px) { .sheet { max-width: var(--sheet-max); } }

/* the well: 94% of the sheet's content box (mahwah 1126.1 of 1198), centred. Every direct
   block of the sheet sits in it; media that must reach further use .bleed (phones only) */
.sheet-head, .sheet-body, .sheet-exit { width: 94%; margin-inline: auto; }

/* title inside the sheet, no strip (mahwah-int/01 + /02) */
.sheet-head { padding-bottom: var(--title-gap); text-align: center; }
.sheet-title {
  font: 400 45.712px/1.2 var(--font-display); letter-spacing: -1px;
  color: var(--steel-pale); text-wrap: balance;
}
/* hub pages (services, before-and-after, patient-info, contact): the 1px rule under the title
   spans the well, border colour (mahwah-int/01 .jpg: x157-1283 at 1440, same ink as the border) */
.sheet--hub .sheet-head { border-bottom: 1px solid var(--steel); }
.sheet--hub .sheet-body { padding-top: var(--hub-gap); }
.sheet-body:last-child { padding-bottom: var(--sheet-end-gap); }

/* exit row: the ONE shared back component (mahwah-int/02 global block "Back to Services").
   It is the FLAVOR atom, a.pill, unchanged; .back-pill only names it for the gate. Optional text
   links (previous / next case) sit beside it in the same row */
.sheet-exit { margin-top: var(--exit-gap); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.sheet-exit a:not(.pill) {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 16px/1.3 var(--font-body); color: var(--steel); text-decoration: underline; text-underline-offset: 3px;
}
.sheet-exit a:not(.pill):hover { color: var(--ink); }

/* ------------------------------------------------------------------ in-sheet type */
/* the deck: one-sentence summary under the page media (mahwah-int/02: Playfair 27.4 pale steel, left) */
.sheet-deck { margin: 0 0 14px; font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); }

/* prose: mahwah body (Raleway 16/27.2 rgb(51,51,51) -> Open Sans 16/27.2 --body-ink).
   Measure capped at ~70ch (class B: mahwah runs ~150-character lines across the 1126 well).
   The column keeps the recipe's alignment axis: the well's LEFT edge, shared with the deck,
   the section heads and the exit pill (mahwah-int/02). .prose--center centres the column on the
   sheet axis (a text-only page with nothing else on the left edge); .prose--wide restores the
   recipe's full-well measure (short blocks only) */
.prose { max-width: var(--measure); font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
.prose--center { margin-inline: auto; }
.prose--wide { max-width: none; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table, .prose figure, .prose .figure { margin: 0 0 21px; }
.prose > :last-child { margin-bottom: 0; }
.prose ul { list-style: disc; padding-left: 26px; }
.prose ol { list-style: decimal; padding-left: 26px; }
/* in-sheet section heads (mahwah-int/02: the homepage H2 style reused, 36.56/400 pale, left) */
.prose h2, .sheet-h2 {
  margin: 32px 0 12px; font: 400 36.56px/1.1 var(--font-display); letter-spacing: -0.99px;
  color: var(--steel-pale); text-wrap: balance;
}
/* sub-head at the deck size (27.424 / 400, pale; still large text) */
.prose h3, .sheet-h3 { margin: 28px 0 10px; font: 400 27.424px/1.25 var(--font-display); color: var(--steel-pale); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose strong { font-weight: 700; }
.prose a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }
.prose a.pill { text-decoration: none; }   /* shared-requests C1: the one button atom never underlines */

/* ------------------------------------------------------------------ figure + caption */
/* the page photo (mahwah-int/02: 1126x563, 2:1, full well, radius 0). .figure--wide crops any
   source to the recipe's 2:1 slot; plain .figure keeps the image's own ratio */
.figure { margin: 0; }
.figure img, .figure video { display: block; width: 100%; height: auto; border-radius: 0; }
.figure--wide img { aspect-ratio: 2 / 1; object-fit: cover; }
.figure figcaption, .caption { margin-top: 10px; font: 400 14px/20px var(--font-body); color: var(--grey-text); }
.figure + .sheet-deck, .figure + .prose, .figure + .sheet-h2 { margin-top: 29px; }

/* ------------------------------------------------------------------ legal prose (privacy) */
/* no donor composition (interiors-plan DECISION): the prose chassis at the readable measure,
   section heads in Gelasio at the deck size, sub-heads Gelasio 20 in full --steel (20px is not
   large text, so the pale ink is not allowed there), and an in-sheet contents list of plain
   text links (no pills), each link a 44px target */
.prose--legal h2 { margin: 40px 0 10px; font: 400 27.424px/1.25 var(--font-display); letter-spacing: 0; color: var(--steel-pale); }
.prose--legal h3 { margin: 24px 0 6px; font: 400 20px/26px var(--font-display); color: var(--steel); }
.legal-toc { margin: 0 0 32px; padding: 0; list-style: none; }
.prose .legal-toc { list-style: none; padding-left: 0; }
.legal-toc a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 16px/1.35 var(--font-body); color: var(--steel); text-decoration: underline; text-underline-offset: 2px;
}
.legal-toc a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ prefooter (mvendo-int/05) */
/* the homepage band, stamped by tools/inject_chrome.py (PREFOOTER) as a direct child of <main>
   after the sheet, minus the map strip; site.css section 9 styles it unchanged. The sheet's 3%
   bottom margin is the canvas strip between the white sheet and the ink band */
main.interior > .contact-band { position: relative; }

/* ------------------------------------------------------------------ tablet (<= 900) */
@media (max-width: 900px) {
  .sheet-title { font-size: 40px; }
  .prose h2, .sheet-h2 { font-size: 33px; }
  .sheet-deck, .prose h3, .sheet-h3, .prose--legal h2 { font-size: 26px; }
  .prose--legal h3 { font-size: 20px; line-height: 26px; }   /* shared-requests E2 */
}

/* ------------------------------------------------------------------ phone sheet (<= 767) */
/* mahwah's own cliff: below 768 its 94% rule stops and the sheet would touch the viewport
   edges. House form instead (DECISION, build-log): a gutter of canvas round a fully bordered
   sheet */
@media (max-width: 767px) {
  .sheet {
    width: calc(100% - 2 * var(--sheet-gutter)); max-width: none;
    margin: var(--sheet-gap-phone) auto;
    border-left-width: var(--sheet-side-border); border-right-width: var(--sheet-side-border);
  }
}

/* ------------------------------------------------------------------ phone system (<= 600) */
/* explicit display sizes (mobile.md type law; the family's frozen 45.7px H1 at 390 is the named
   anti-pattern): H1 45.712 -> 34 (x0.74, 40-48 band), section head 36.56 -> 30 (x0.82),
   deck / sub-head 27.424 -> 24 (x0.875; the 24px floor keeps it large text). Body, captions,
   buttons, links frozen. Line-height ratios locked. Vertical rhythm x0.6 (house band padding) */
@media (max-width: 600px) {
  :root {
    --sheet-pad-top: 20px; --title-gap: 13px; --hub-gap: 18px; --exit-gap: 43px;
    --sheet-pad-bottom: 18px; --sheet-end-gap: 19px;
    /* the sheet's inner width, and how far a .bleed element reaches past the well to meet it */
    --sheet-inner: calc(100vw - 2 * var(--sheet-gutter) - 2 * var(--sheet-side-border));
  }
  /* prose well ~350 (mobile.md), inset from the sheet's own border */
  .sheet-head, .sheet-body, .sheet-exit { width: min(350px, 100% - 2 * var(--well-inset-phone)); }
  .sheet-title { font-size: 34px; }
  .prose h2, .sheet-h2 { font-size: 30px; }
  .sheet-deck, .prose h3, .sheet-h3, .prose--legal h2 { font-size: 24px; }
  .prose--legal h3 { font-size: 20px; line-height: 26px; }   /* shared-requests E2 */
  /* media run full-bleed: to the sheet's inner edges (the gutter form keeps the border whole) */
  .bleed { margin-inline: calc(50% - var(--sheet-inner) / 2); }
  .figure + .sheet-deck, .figure + .prose, .figure + .sheet-h2 { margin-top: 18px; }
}

/* narrow-phone guard (<= 374, matches site.css): a long title never clips */
@media (max-width: 374px) {
  .sheet-title { overflow-wrap: anywhere; }
}