/* legenda.css — the "Legenda" page (v4 S4, #8a). Linked globally by
 * bin/build on every page (I/Q assume it's present and don't add their own
 * <link>); the selectors below only ever match markup that exists on
 * template/pages/legenda.html, so loading it elsewhere is a no-op. Uses the
 * shell's own tokens (--bg-*, --fg-*, --accent*, --border*, --radius-*,
 * --shadow-card, --font-*) — same rule as site.css, nothing here invents a
 * new color or typeface. `.container` is NOT redefined here (owned by Q in
 * site.css, ~1120px max-width) — only the heading block uses it; the frame
 * wrap deliberately sits outside it to go full width (#8a: "sample iframe
 * takes the whole routed area").
 *
 * 2026-10-01 v4: explainer text, key/grid (content/legend.json render),
 * frame label and outer attribution are gone with the matching markup in
 * pages/legenda.html — this file now only sizes the heading + the one
 * full-bleed iframe.
 */

/* ---------- page shell: heading at natural height, iframe fills the rest
   of the routed area (viewport minus nav + feedback bar). ---------- */
.legend-page {
  display: flex;
  flex-direction: column;
  /* The route view's padding-top already clears the fixed nav (site.css
     --offer-nav-h); the page fills the rest of the viewport down to the top
     edge of the fixed feedback bar. --legend-chrome is the bar's measured
     height (pages/legenda.html, at mount + resize); 58px is the no-JS
     fallback (feedback.css bar, one row at every width). */
  height: calc(100dvh - var(--offer-nav-h, 55px) - var(--legend-chrome, 58px));
  min-height: 420px;
}
/* v4 polish: the generic body padding-bottom (feedback.css: 76px, 104px on
   phones) is a scroll-past reserve for flowing pages and is taller than the
   bar itself — on this fixed-height page it left an empty band between the
   sample and the bar (~18px desktop, ~46px at 390). The page's own height
   already stops at the bar, so the reserve is dropped here. */
body[data-route="legenda"] { padding-bottom: 0; }

/* nav clearance comes from the shared route-view rule (site.css
   `[data-route-view] { padding-top: var(--offer-nav-h) }`) like every other
   route — this only adds the heading's own breathing room. */
.legend-head {
  /* longhands ON PURPOSE: a `padding: 80px 0 16px` shorthand would zero the
     shell's `.container { padding-inline: 24px }` (same specificity, later
     file) and glue the heading to the viewport edge at 390px. */
  padding-top: 32px; /* same rhythm as site.css .tool-header (32px + h1 12px) */
  padding-bottom: clamp(12px, 2vw, 20px);
  flex: 0 0 auto;
  /* flex-column item + .container's margin-inline:auto would shrink-to-fit
     and centre the heading; full width keeps it on the shared left edge */
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
/* same title style as every other route's .tool-header h1 (site.css) */
.legend-head h1 {
  margin-top: 12px;
  text-align: left;
  font-family: var(--font-facet); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  color: var(--fg-base);
}

/* ---------- embedded sample (iframe), full-bleed. .legend-frame-wrap is
   itself a flex container and .legend-frame a flex item with flex-grow —
   NOT height:100% on the iframe: a percentage height only resolves against
   a parent with an explicit (not auto/flex-grow-derived) computed height,
   so an iframe with height:100% inside an auto-height flex child silently
   falls back to the UA default ~150px. flex-grow sizes it directly. ---------- */
.legend-frame-wrap { flex: 1 1 auto; display: flex; width: 100%; min-height: 320px; }
.legend-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: #fff;
}