/* Capillary Desaturation report: surface rules. Author: Imad A. Adel.
   Linked after the page's own <style> blocks and after the shared report layer.
   Part 1 is the house-layer block exactly as the accepted reference carries it.
   Part 2 holds the reference's page-level shell rules this page's base sheet lacks.
   Part 3 holds this page's own components, carried over from the accepted build. */
/* ===== house layer ===== */
.appearance{display:flex;align-items:center;gap:6px}
.applbl{font-size:.58rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.appearance .fbtn{padding:5px 9px;font-size:.66rem}
.fbtn{font:inherit;font-size:.72rem;line-height:1.2;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);border-radius:6px;padding:6px 11px;cursor:pointer;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),border-color 160ms ease}
.fbtn:active{transform:scale(.97)}
.fbtn.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.fbtn.ghost{background:transparent;border-style:dashed}
.fbtn:focus-visible{outline:2px solid var(--sky,var(--blue));outline-offset:2px}
.cue{font-size:.64rem;color:var(--muted);margin:0 0 6px}
.scrollx{overflow-x:auto}
.figacts{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 8px}
.disc{border:1px solid var(--line);border-radius:8px;background:var(--panel);margin-top:20px}
.disc>summary{cursor:pointer;list-style:none;padding:12px 16px;font-size:.74rem;font-weight:800;
  letter-spacing:.06em;color:var(--ink)}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::after{content:'+';float:right;font-weight:700;color:var(--muted)}
.disc[open]>summary::after{content:'\2013'}
.disc>summary:focus-visible{outline:2px solid var(--sky,var(--blue));outline-offset:-2px}
.disc-b{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px;font-size:.84rem;
  line-height:1.7;color:var(--muted)}
#figdlg{border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--ink);
  padding:0;width:min(1200px,94vw);max-width:94vw}
#figdlg::backdrop{background:rgba(8,12,20,.56)}
.figdlg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding:12px 16px}
.figdlg-t{font-size:.78rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#figdlg{margin:auto;max-height:94vh}
.figdlg-b{padding:10px}
.figbig{height:min(72vh,720px)}
.nojs{max-width:62rem;margin:24px auto;padding:16px 20px;border:1px solid var(--line2);
  border-radius:8px;line-height:1.65}
.credit{font-size:.72rem;line-height:1.7;color:var(--muted);margin-top:18px}
.bd{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.1em;
  border-radius:3px;padding:1px 5px;vertical-align:1px;text-transform:uppercase}
/* The SAMPLE badge carries the visible half of the data boundary, so it is the one
   label that must not be hard to read. The surface's own --orange is #E87722, which
   is 2.96:1 on a white panel and 2.74:1 on a tinted one -- both below 4.5:1 at this
   size and weight. The badge therefore carries its own pair rather than the token,
   and declares it for both ways a surface in this family expresses its scheme: a
   [data-theme] attribute and the media query. Light 6.8:1, dark 5.3:1. */
.bd-sample{--bd-ink:#8A4B08;--bd-line:#B4670F;--bd-bg:#FFF4E8;
  color:var(--bd-ink);border:1px solid var(--bd-line);background:var(--bd-bg)}
.bd-hold{--bd-ink:#4C5A69;--bd-line:#8A98A8;--bd-bg:transparent;
  color:var(--bd-ink);border:1px solid var(--bd-line);background:var(--bd-bg)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bd-sample{--bd-ink:#F0A868;--bd-line:#B4670F;
    --bd-bg:rgba(232,119,34,.13)}
  :root:not([data-theme="light"]) .bd-hold{--bd-ink:#A9B6C6;--bd-line:#6B7A8C;
    --bd-bg:transparent}
}
:root[data-theme="dark"] .bd-sample{--bd-ink:#F0A868;--bd-line:#B4670F;
  --bd-bg:rgba(232,119,34,.13)}
:root[data-theme="dark"] .bd-hold{--bd-ink:#A9B6C6;--bd-line:#6B7A8C;--bd-bg:transparent}
:root[data-theme="light"] .bd-sample{--bd-ink:#8A4B08;--bd-line:#B4670F;--bd-bg:#FFF4E8}
:root[data-theme="light"] .bd-hold{--bd-ink:#4C5A69;--bd-line:#8A98A8;--bd-bg:transparent}
@media (prefers-reduced-motion:reduce){
  .fbtn{transition:none}
}

#house-sample-mark{margin-left:9px;vertical-align:2px}
/* skip link — the baseline had none */
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}


/* ===== part 2: reference shell rules absent from this page's base sheet ===== */
.hero-sample{margin-top:24px;font-size:.74rem;color:var(--muted);position:relative;z-index:1}
.hero-sample+.hero-stats{margin-top:10px}
.hstat .v{font-size:1.16rem;overflow-wrap:anywhere}
.hstat .k{overflow-wrap:anywhere}
.pane .guide-note{margin-top:16px}
:root:not([data-theme="light"]) .guide-note .gn-badge{color:#0B1220}

/* ===== part 3: this page's own components ===== */
/* evidence labels: the family badge shape; outline colour carries the label's meaning,
   the SAMPLE label keeps the house fill so it stays the one filled badge */
.bd:not(.bd-sample){border:1px solid currentColor;white-space:normal}
.bd-measured{color:var(--green)}.bd-derived{color:var(--accent)}.bd-scenario{color:var(--muted)}.bd-planned{color:var(--orange)}.bd-sheet{color:var(--muted)}.bd-schem{color:var(--muted)}
.bd.bd-hold{color:var(--red);background:transparent}
#houserail dd .bd{margin:0 4px 5px 0}
/* the manuscript row carries three actions beside the citation: the citation takes
   the full reading-column width and the actions wrap below it */
.ms-row{flex-wrap:wrap}
.ms-cite{flex:1 1 100%}
/* paired figures and tables stack in the 72ch reading column: side by side they were
   about 300 px wide and their value labels overlapped */
:root[data-variant="R1"] .pane .grid-2{grid-template-columns:minmax(0,1fr)}
/* the method disclosure sits inside a panel body, which takes line-height 1.65 on phones;
   the disclosure keeps the body line-height the reference's disclosure has */
.pb details.disc{line-height:1.5}
/* phones: a figure card spans the panel body's full width, as the plot box did on the served
   page (354 px at 390), so axis ticks and legends keep their room */
@media(max-width:480px){.pb>.plot-box{margin-left:-18px;margin-right:-18px}}
/* below 360 px even the served width clips the longest legend entry and runs the endpoint
   chart's category labels together; the chart text steps down a size there */
@media(max-width:360px){:root[data-variant="R1"] .main{padding-left:8px;padding-right:8px}
  .js-plotly-plot .legend text,.js-plotly-plot .xtick text{font-size:10px!important}}
/* the water-wet reference value stays on one line in its hero card: its size follows the
   card width, the other three cards keep the shared size */
/* the scroll cue above a table takes the panel body's inset, so it aligns with the table */
.panel-x>.cue{padding-left:18px;padding-right:18px}
.hstat{container-type:inline-size}
#hv_ww{white-space:nowrap;font-size:min(1.16rem,10.5cqi)}
/* text contrast, 4.5:1 floor. Dark scheme: the blue stage badges measured 4.3-4.4:1 on
   the highlighted table rows. Light scheme: figure annotations drawn in the manuscript
   silver (#8E8E8E) measured 3.3:1 on the white figure card; only that ink is darkened,
   every coloured annotation keeps its colour. Colour only; no figure value changes. */
:root:not([data-theme="light"]) .badge.b-used,:root:not([data-theme="light"]) .badge.b-sf{color:#A9C9F7}
:root[data-theme="light"] .js-plotly-plot .annotation-text[style*="fill: rgb(142, 142, 142)"]{fill:#666666!important}
.availability{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);margin:18px 0 22px}
.availability .k{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.availability .v{display:block;font-size:13px}
.hero-band .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px;position:relative;z-index:1}
.hero-band .actions .btn{min-height:44px}
.hero-band .actions .txtlink{font-weight:700;color:var(--accent);text-decoration:underline;background:none;border:0;padding:0;font-size:14px;cursor:pointer;min-height:44px}
.interp{font-size:15px;line-height:1.65;max-width:72ch;color:var(--ink);margin:0 0 6px}
.reqnote{margin-top:10px;font-size:13px;line-height:1.55}