/* report.surface.css — page-only rules for the Miscibility and Operating Pressure 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 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}

/* 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}
/* review F2: the reference's own base rule is margin-top:28px and this page's was 24px, so the
   .hero-stats exception would not have been wholly SAMPLE-driven. Aligned, so the only remaining
   difference is the 10px the reference gets from `.hero-sample + .hero-stats`. */
.hero-stats{margin-top:28px}
.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}

/* ---- review F1: figures escape the 72 ch reading cap ----
   The shared layer caps the reading column at `min(72ch,100%)` and gives the rail a 300 px
   track. Above 1,060 px that leaves a figure 665 px where the served page gave it 1,086 px,
   and the schematic labels, whose size follows the viewBox scale, fell from 10 px to 6 px.
   Prose keeps the cap. The five figure cards and the schematic slot carry `figwide` and take
   the full width of #housecol, which is made an inline-size container so `100cqw` resolves to
   the main column rather than to the capped pane. Neither layer file is touched, and at
   1,060 px and below the rail stacks, the cap lifts, and the rule stands down.
   The pane is centred inside #housecol once the cap bites, so a full-width child would start
   at the pane's left edge and run under the sticky rail. The negative left margin is exactly
   the auto-margin the pane took, so the figure starts at the reading column's own left edge
   and ends where #housecol ends. Measured: 0 overlap with #houserail at 1061, 1280, 1440 and
   1920 px. */
:root[data-variant="R1"] #housecol{container-type:inline-size}
:root[data-variant="R1"] .pane .figwide{
  width:100cqw;max-width:none;margin-left:calc((100% - 100cqw) / 2)}
@media(max-width:1060px){
  :root[data-variant="R1"] .pane .figwide{width:auto;max-width:100%;margin-left:0}
}

/* ---- the MMP ladder's last value label ----
   renderCompare draws each value at x(mmp) + 8 inside a 1040-unit viewBox whose right
   margin is 35, so the label of the highest MMP starts at 1013 and runs past the viewBox.
   The SVG clipped it and the number read "2,13" instead of "2,132" at every width. The
   drawing code is byte-identical to the served page; only the clip is lifted, and the few
   units that now paint outside sit inside the panel body's 18 px padding. */
#mmp_ladder{overflow:visible}

/* ---- the family's dark link colour, which this page did not carry ----
   The reference declares `:root:not([data-theme="light"]) a:not(.ms-btn){color:var(--link)}`
   and this page did not, so every dark-scheme link rendered in --muted. The rule is
   repeated for [data-theme="dark"], because this page writes the attribute explicitly
   where the reference leaves it off. --link is this page's own token (#E5A39B), 7.5:1
   on the panel. */
:root:not([data-theme="light"]) a:not(.ms-btn),
:root[data-theme="dark"] a:not(.ms-btn){color:var(--link)}
:root:not([data-theme="light"]) a:not(.ms-btn):focus-visible,
:root[data-theme="dark"] a:not(.ms-btn):focus-visible{color:var(--link);text-decoration:underline}

/* Keep editorial schematic labels at readable size without changing geometry. */
#s1-host,#s3-host{height:auto;aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
#s1-host>svg,#s3-host>svg{min-width:1750px;height:auto!important}