/* report.surface.css - page-only rules for the Gas Composition and Foam report.
   Author: Imad A. Adel.

   The shared layer files are byte-identical to the family asset and are never edited. Every
   rule below belongs to this page: either a shell rule the family reference carries and this
   page did not, or a correction the maroon token family or the .f3d dark island needs and the
   navy family does not. Linked after report.layout.css. */

/* ---- the family's neutral tokens, light scheme ----
   FORMAT-CONFORMANCE item 7 requires the same text, muted, panel and background tokens as
   the reference. The accent family (--blue, --accent, --link, --navy) stays maroon by the
   lead's decision of 2026-09-18 and is not touched here; the three neutrals below are
   hairline and rule colours, where the served page differed from the family by three or
   four units. The dark scheme already matches, so only the light scheme is declared. */
:root[data-theme="light"]{--faint:#5F6B78;--line:#D9E1EA;--line2:#C2CEDA}

/* ---- shell rules the family reference carries and the served page did not ---- */
#house-sample-mark{margin-left:9px;vertical-align:2px}
footer.footbar .fcredit{display:block;font-size:.72rem;margin-top:4px}
footer.footbar .freturn{display:block;font-size:.72rem;margin-top:6px}
footer.footbar .freturn a{color:inherit}
:root:not([data-theme="light"]) footer.footbar .freturn a,
:root[data-theme="dark"] footer.footbar .freturn a{color:var(--link)}

/* The hero source row, in the reference's geometry. The colours are this page's tokens:
   the reference draws it on a fixed navy band, this page's hero is transparent in both
   schemes (report-link-style), so the rule reads --line and --muted instead. */
.ms-row{display:flex;align-items:center;gap:22px;margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22);position:relative;z-index:1}
:root[data-theme="light"] .ms-row{border-color:var(--line)}
.ms-cite{font-size:.8rem;line-height:1.55;color:var(--muted)}
.ms-cite cite{font-style:italic;color:var(--ink)}

/* ---- type and box parity with the family reference (format items 4 and 5) ----
   Colour keeps this page's own tokens; only the type and the box are aligned. */
.hero-band .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.hstat{border-top-width:1px}
.hstat .v{font-size:1.16rem}
.hstat .k{font-weight:400}
.guide-note{padding-top:14px;padding-bottom:13px;margin-top:16px;margin-bottom:16px;
  line-height:1.6}
.nav{padding-bottom:40px}
@media(max-width:1060px){.nav-item{padding-left:22px;padding-right:22px}}

/* The topbar's Adel Labs mark and the footer return both read --muted on this page and the
   family reference draws them in the link colour. --link is this page's own token: #500000 in
   the light scheme and #E5A39B in the dark one, where the topbar's local palette puts it at
   4.9:1 on #17191D. */
:root:not([data-theme="light"]) .topbar .report-endorsement,
:root[data-theme="dark"] .topbar .report-endorsement{color:var(--link)}

/* ---- figures are exempt from the layer's reading cap ----
   Above 1060 px the shared layer opens the source-rail grid and caps the whole pane:
   `:root[data-variant="R1"] .pane{max-width:min(72ch,100%)}`. That cap is right for prose and
   wrong for a figure: at 1280 px and wider it shrank every Plotly figure and every schematic
   card to about two thirds of the main column, and a schematic's labels shrink with its card.
   The pane keeps the layer's cap, so every prose measure is byte-identical to the reference's;
   the content column becomes an inline-size container and the three figure panels and the
   schematic slot, which carry the `figwide` class, are sized to it instead. Moving the cap to
   the pane's children was tried first and rejected: `ch` resolves against each element's own
   font size, so the smaller-typeface .note box capped at 562 px against the column's 703 px.
   Neither layer file is edited. */
:root[data-variant="R1"] #housecol{container-type:inline-size}
:root[data-variant="R1"] .pane>.figwide{width:100cqi;max-width:none}

/* ---- the 375 px schematic: a contained horizontal scroll, not a smaller drawing ----
   Measured on the served page at 375 px: #s4-host renders a 1270-unit viewBox in a 307 px
   box (scale 0.242), so its 8 to 10 unit labels paint at 1.93 to 2.42 px; #s6-host renders
   a 760-unit viewBox in the same box (scale 0.404) and its 10.5 to 12.5 unit labels paint
   at 4.24 to 5.05 px. The cause is the viewBox scale, not the viewport, so the same labels
   are under 11 px at 1440 as well.

   The fix is presentation only. Each host becomes its own horizontal scroller and its SVG is
   given a minimum width. Two floors are applied, and the larger wins:
     - the 11 px floor, from the smallest authored label in each viewBox:
         #s4-host  1270 x 11/8    = 1746 px
         #s6-host   760 x 11/10.5 =  796 px
     - no label smaller than on the served page at any width. The served page draws no source
       rail, so its figure column is wider: measured, its smallest #s6-host label reaches
       16.63 px at 1920 (scale 1.587 in a 1206 px card), which needs 760 x 16.63/10.5 = 1204 px.
       The served #s4-host peaks at 7.58 px, which 1746 px already clears.
   So #s4-host takes 1750 px and #s6-host 1210 px, giving 11.02 px and 16.72 px as their
   smallest labels at every width in both schemes.
   The SVG's own aspect ratio then sets the height, so preserveAspectRatio="xMidYMid meet" no
   longer letterboxes the drawing back down to the card width. The family scroll cue sits above
   each host, and the #s4-stat / #s6-stat readout lines, which carry the measured values, are
   siblings of the scroller and never scroll out of view. No SVG geometry, no seeded drawing
   and no measured value is changed. */
#s4-host{height:auto;aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain}
#s4-host>svg{min-width:1750px;height:auto!important}
#s6-host{height:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
#s6-host>svg{min-width:1210px;height:auto!important}
.f3d .cue{color:var(--muted);margin:0 0 8px}