/* The framed report fills the space left under the page's own chrome.
 *
 * Shared by BOTH pages that frame a report — client/report.html and
 * staff/preview.html — because they had drifted into two different answers:
 * the client view used `height: 80vh` (20% of the window wasted, report
 * scrolling inside a short box) and the staff preview used a hardcoded
 * `height="800"` HTML attribute that no stylesheet targeted at all, since its
 * iframe carried an `id` where the CSS selector expected a `class`. Reported
 * from QA on 2026-09-02: "the client preview doesn't use the whole page and I
 * have to scroll in the iframe to see it all."
 *
 * WHY A FIXED FILL RATHER THAN SIZING TO CONTENT. Auto-height would need the
 * frame's own scrollHeight, and the frame is cross-origin and sandboxed WITHOUT
 * `allow-same-origin` (CLAUDE.md invariant 4) — so it cannot be measured from
 * here, by design. The alternative is asking the report to post its height out,
 * which would put a scripting requirement on researcher- and LLM-authored
 * content and make the viewer's layout depend on the report cooperating. Neither
 * is worth it: filling the viewport gives one scrollbar in the place a reader
 * expects it.
 *
 * SCOPED WITH :has() ON PURPOSE. The flex rules apply only to a page that
 * actually frames a report, so every other staff and client page keeps the
 * layout it already had. Without that scoping this file would silently restyle
 * the dashboard, the org list and the sign-in page. A browser without `:has()`
 * support falls back to the frame simply being flex-sized inside a
 * non-flex parent, which degrades to roughly the old behaviour rather than
 * breaking.
 */

body:has(.report-frame) {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

/* The staff page's generous bottom gutter is right for a document and wrong under a
 * frame whose job is to fill the viewport — it left 48px of dead space below the
 * report. Trimmed to match the side padding so the frame reaches the bottom with a
 * consistent margin rather than a shelf. Caught by the e2e geometry assertion, which
 * measures the gap rather than reading the CSS. */
body:has(.report-frame) main > .al-page {
  padding-bottom: var(--space-4, 16px);
}

/* `main` for the client viewer, and `main > .container` as well for the staff
 * chrome, whose base template wraps content in a Bootstrap container. Every
 * element between `body` and the iframe has to be a flex column, or `flex: 1` on
 * the frame has nothing to grow inside and it collapses to its content height —
 * which on the staff preview means a frame a few pixels tall. Added when
 * Bootstrap was wired up on 2026-09-02; the selector list is the coupling
 * between these two files, and tests/e2e asserts the geometry on both pages so
 * a future wrapper cannot break it silently. */
body:has(.report-frame) main,
body:has(.report-frame) main > .container,
body:has(.report-frame) main > .al-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* `width: 100%` is not redundant with the stretch a column flex item gets by default.
   * `.al-page` centres itself with `margin: 0 auto`, and an auto margin on a flex item
   * consumes the free space instead of stretching — so the page collapsed to the width
   * of its widest line and the "full-width" frame rendered 545px wide in a 1314px
   * window, centred, looking like a deliberate narrow column. Nothing in the CSS reads
   * wrong; it is only visible on screen. The two e2e assertions measured height alone
   * and passed throughout, which is why they now measure width as well. */
  width: 100%;
  /* Without min-height:0 a flex child refuses to shrink below its content's
   * intrinsic height, so the iframe would push the page taller than the
   * viewport and reintroduce the outer scrollbar this file exists to remove. */
  min-height: 0;
}

.report-frame {
  /* var(--rule) is defined in client.css; staff pages do not load it, so the
   * fallback is what they use. Both resolve to the same grey. */
  border: 1px solid var(--rule, #e0e0e0);
  flex: 1;
  min-height: 0;
  width: 100%;
}