/* platform-detail.css — Gifts Platform habitat-page styles.
   Chrome (tokens, palette, type, .frame header/nav/footer, .site-notice,
   .skip-link, bare-element rules) is NOT defined here — it is @import-ed from
   the canonical design system, so it can NEVER drift from the rest of the site.
   The @imports MUST stay first (CSS requires @import before any other rule).
   Depth is two levels up: platform pages live at /site/platform/ and that tree
   deploys to the site root, served at /design. Mirrors recipes-detail.css. */
@import url("../../design/tokens.css");   /* Layer 0 — the DNA (palette, type, rhythm, layout) */
@import url("../../design/shell.css");    /* Layer 1 — the chrome + block set (.frame header/nav/footer) */

/* Below: ONLY the `.platform-detail` scoped rules the shared shell does not own.
   Ported verbatim (intent-preserving) from the former inline <style> block in
   build_habitat_pages.py's _page_shell + render_index, re-scoped under
   .platform-detail so they cannot leak into the shared chrome. */

.platform-detail{ max-width:min(72ch, 92vw); margin:0 auto; padding:var(--gap-wide, 2rem) 0; }

.platform-detail .lede{ font-size:1.1rem; }

/* The catalog table: a multi-column table whose intrinsic content width set the
   DOCUMENT width and forced page-level h-scroll on mobile (536px @ 390 viewport,
   gate-measured, S14.1740). Same containment idiom as shell.css's .guide-index-table
   and pre/.ts-scroll: let the table scroll INSIDE its own block (display:block makes
   overflow-x apply to the table box itself) so the page column stays put. A table
   that already fits is unaffected (overflow-x only adds a scrollbar when content
   exceeds). Diagnosed from chrome_clearance_render_gate, not guessed. */
.platform-detail table.catalog{ display:block; max-width:100%; overflow-x:auto;
  -webkit-overflow-scrolling:touch; border-collapse:collapse; width:100%; margin:1rem 0; }
.platform-detail table.catalog th,
.platform-detail table.catalog td{ border:1px solid var(--rule, #ddd); padding:.4rem .6rem;
  text-align:left; }

.platform-detail .disp{ font-variant:small-caps; }

.platform-detail .ceiling{ font-size:.9rem; color:var(--muted, #555);
  border-left:3px solid var(--rule, #ccc); padding-left:.75rem; }

.platform-detail .genesis,
.platform-detail .planned{ border:1px solid var(--rule, #e0e0e0); border-radius:6px;
  padding:1rem; background:var(--wash, #fafafa); }

.platform-detail .canon{ font-size:.85rem; color:var(--muted, #666); margin-top:2.5rem;
  border-top:1px solid var(--rule, #eee); padding-top:1rem; }

/* index (hub) — the returner-default landing. Ported from render_index's
   former inline injection. */
.platform-detail ul.section-index{ list-style:none; padding:0; }
.platform-detail ul.section-index li{ margin:.6rem 0; }
.platform-detail ul.section-index .lead{ display:block; color:var(--muted, #555);
  font-size:.92rem; }
.platform-detail .whats-changed{ background:var(--wash, #f6f8fa); border-radius:6px;
  padding:1rem; }
.platform-detail .onramp{ margin-top:2rem; font-size:.95rem; }