html {
    --bg:#05080f; --board:#0a1120; --panel:#0c1424; --panel2:#101b30;
    --line:rgba(150,175,210,.10); --line2:rgba(150,175,210,.18);
    --txt:#eef3fb; --txt2:#c7d4e6; --mut:#8294ad; --mut2:#5c6b82;
    --blue:#4d9dff; --blued:#2f6fd0; --grn:#46d39a; --amb:#e7b15a;
    --red:#f2708a; --red2:#c33a52; --redsoft:#e9b8c1; --teal:#38cdb8;
    --inset:rgba(8,14,24,.5); --sidebar:linear-gradient(180deg,#0a1222,#070c16);
    --lbl:#dbe6f5; --lbl2:#7a90ad; --cap:rgba(150,180,215,.6); --cap2:rgba(150,180,215,.7);
    --hdb:#9fd0ff; --hdb2:#7fc0e5; --hdb3:#a8dcf6; --hda:#f0c574; --hdg:#cdd8e8;
    --accb:#7fb4ff; --accb3:#5fb0ff; --accb4:#8fd0ff; --btnt:#cfe0fb; --chipt:#c3d2e6;
    --accg:#46d39a; --acca:#f0913f; --acca2:#e7b15a; --accw:#5aa6d8;
    --dis:#5c6b82; --chipbg:rgba(15,24,40,.6); --onacc:#06121f;
    --icard:rgba(15,24,40,.85); --strip:rgba(6,11,20,.72); --track:rgba(160,190,230,.10); --rail:#070c16; --fgdone:#cfe6dc; --ringpend:#2b3a52; --tagpend:#55637a;
  
    /* ---- formation / geological section (dark) ---- */
    --sky1:#0a1220; --sky2:#0b1524; --fm-ground:#25324a;
    --fm-soil:#3a3428;
    --fm-shale:#2b3648; --fm-shale2:#212c3d;
    --fm-silt:#333a44; --fm-silt2:#2a313b;
    --fm-seal:#3d4450; --fm-seal-line:rgba(200,215,235,.14); --fm-seal-edge:rgba(150,180,215,.35);
    --fm-sand:#4a4033; --fm-sand2:#3e352a;
    --fm-pay:rgba(224,160,70,.30); --fm-pay2:rgba(190,120,45,.22); --fm-pay-edge:rgba(120,185,255,.45);
    --fm-owc:rgba(103,182,255,.55); --fm-owc-label:rgba(140,195,250,.80);
    --fm-water:rgba(60,120,200,.30);
    --fm-grain:rgba(200,215,235,.06); --fm-base:#242a33;
    --fm-line:rgba(160,190,225,.16);
    --fm-label:rgba(190,215,240,.60); --fm-label-pay:rgba(165,205,250,.85);
  
    /* ---- splash (dark) ---- */
    --sp1:#0d1626; --sp2:#080f1c; --sp3:#04070d;
    --sp-grid:rgba(150,180,220,.035); --sp-glow:rgba(77,157,255,.10);
    --sp-ring:rgba(120,175,255,.10); --sp-ring2:rgba(120,175,255,.06);
    --sp-title:#eef3fb; --sp-sub:#c7d4e6; --sp-mono:#7fb4ff; --sp-foot:rgba(199,212,230,.72);
    --sp-logo-shadow:rgba(77,157,255,.28); --sp-divider:#4d9dff;
    --wb-wall:#0a1119; --wb-edge:rgba(90,120,160,.30); --wb-bore:#05090f;
    --wb-shadow:rgba(0,0,0,.55); --wb-tube:#0c2a2c; --wb-tube-edge:#1d4044;
  }
  html[data-theme="light"] {
    --bg:#eef1f6; --board:#ffffff; --panel:#ffffff; --panel2:#f4f6fa;
    --line:rgba(40,60,90,.12); --line2:rgba(40,60,90,.20);
    --txt:#16202f; --txt2:#3a4759; --mut:#566578; --mut2:#8492a4;
    --blue:#2f6fd0; --blued:#2f6fd0; --grn:#1d8a5a; --amb:#b9831f;
    --red:#c33a52; --red2:#9d2338; --redsoft:#8d4553; --teal:#0e8f7a;
    --inset:#eef2f8; --sidebar:linear-gradient(180deg,#ffffff,#eef2f7);
    --lbl:#1d2836; --lbl2:#5c6c80; --cap:rgba(38,56,80,.68); --cap2:rgba(38,56,80,.78);
    --hdb:#1461ae; --hdb2:#14638f; --hdb3:#186a92; --hda:#8a6112; --hdg:#3a475a;
    --accb:#2762bd; --accb3:#1f74c4; --accb4:#15669f; --btnt:#15406f; --chipt:#3f4f63;
    --accg:#0e7a4f; --acca:#a2540b; --acca2:#8d6210; --accw:#1a6690;
    --dis:#7b8797; --chipbg:rgba(228,234,243,.9); --onacc:#ffffff;
    --icard:#f1f4f9; --strip:#f7f9fc; --track:rgba(40,60,90,.14); --rail:#ffffff; --fgdone:#1a6b49; --ringpend:#c6cfdb; --tagpend:#8a95a6;
  
    /* ---- formation / geological section (light) ---- */
    --sky1:#eef3fa; --sky2:#f5f7fb; --fm-ground:#cdd3dc;
    --fm-soil:#c9b291;
    --fm-shale:#c2ccd9; --fm-shale2:#aeb9c8;
    --fm-silt:#cdcec8; --fm-silt2:#bcbdb6;
    --fm-seal:#a7b0bb; --fm-seal-line:rgba(60,80,105,.28); --fm-seal-edge:rgba(60,85,120,.55);
    --fm-sand:#e8d9b6; --fm-sand2:#dcc99f;
    --fm-pay:rgba(190,120,40,.30); --fm-pay2:rgba(160,95,30,.22); --fm-pay-edge:rgba(50,95,150,.50);
    --fm-owc:rgba(45,110,180,.65); --fm-owc-label:rgba(40,85,135,.85);
    --fm-water:rgba(90,150,215,.34);
    --fm-grain:rgba(110,85,55,.16); --fm-base:#b0b6bd;
    --fm-line:rgba(70,90,115,.28);
    --fm-label:rgba(45,65,90,.70); --fm-label-pay:rgba(35,70,110,.90);
  
    /* ---- splash (light) ---- */
    --sp1:#ffffff; --sp2:#eef2f8; --sp3:#e0e8f5;
    --sp-grid:rgba(40,70,110,.02); --sp-glow:rgba(47,111,208,.09);
    --sp-ring:rgba(47,111,208,.06); --sp-ring2:rgba(47,111,208,.04);
    --sp-title:#101a2c; --sp-sub:#14202e; --sp-mono:#4a77b8; --sp-foot:rgba(20,28,40,.82);
    --sp-logo-shadow:rgba(47,111,208,.16); --sp-divider:#2f6fd0;
    --wb-wall:#9aa6b5; --wb-edge:rgba(45,65,95,.55); --wb-bore:#6f7d8f;
    --wb-shadow:rgba(35,50,70,.28); --wb-tube:#7d93a6; --wb-tube-edge:#4d6376;
  }
  html {
    --font-main:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
    /* 1 page title */ --fs-page-title:32px; --fw-page-title:700; --lh-page-title:1.15; --ls-page-title:-0.5px;
    /* 2 page subtitle */ --fs-page-subtitle:14.5px; --fw-page-subtitle:400; --lh-page-subtitle:1.5; --ls-page-subtitle:0.1px;
    /* 3 section heading */ --fs-section-heading:16px; --fw-section-heading:600; --lh-section-heading:1.3; --ls-section-heading:0.2px;
    /* 4 card title */ --fs-card-title:17.5px; --fw-card-title:700; --lh-card-title:1.3; --ls-card-title:-0.2px;
    /* 5 body text */ --fs-body:14px; --fw-body:400; --lh-body:1.55; --ls-body:0px;
    /* 6 equipment label */ --fs-equip-label:11.5px; --fw-equip-label:600; --lh-equip-label:1.3; --ls-equip-label:0.3px;
    /* 7 technical caption */ --fs-tech-caption:10px; --fw-tech-caption:500; --lh-tech-caption:1.3; --ls-tech-caption:0.5px;
    /* 8 live-value label */ --fs-live-label:11px; --fw-live-label:600; --lh-live-label:1.3; --ls-live-label:0.8px;
    /* 9 live-value number */ --fs-live-value:22px; --fw-live-value:600; --lh-live-value:1.1; --ls-live-value:0px;
    /* 10 button text */ --fs-button:13.5px; --fw-button:600; --lh-button:1; --ls-button:0.2px;
    /* 11 table header */ --fs-table-header:11px; --fw-table-header:600; --lh-table-header:1.3; --ls-table-header:0.6px;
    /* 12 table content */ --fs-table-content:13px; --fw-table-content:400; --lh-table-content:1.4; --ls-table-content:0px;
    /* 13 status badge */ --fs-status-badge:11px; --fw-status-badge:600; --lh-status-badge:1; --ls-status-badge:0.4px;
    /* 14 footer text */ --fs-footer:11.5px; --fw-footer:400; --lh-footer:1.4; --ls-footer:0.2px;
  }
  html, body { margin:0; padding:0; background:var(--bg); transition:background .25s ease; }
  * { box-sizing:border-box; }
  @keyframes dashflow { to { stroke-dashoffset:-32; } }
  @keyframes pvtpulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
  @keyframes streamflow { to { stroke-dashoffset:-18; } }
  @keyframes flowup { to { stroke-dashoffset:-28; } }
  @keyframes toolspin { to { transform:rotate(360deg); } }
  @keyframes ringpulse { 0%{ transform:scale(1); opacity:.75; } 70%{ transform:scale(2.6); opacity:0; } 100%{ opacity:0; } }
  @keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
  @keyframes glowpulse { 0%,100%{ opacity:.4; } 50%{ opacity:.95; } }
  @keyframes qcRock { 0%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } 100%{ transform:rotate(-7deg); } }
  @keyframes qcRock80 { 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-40deg); } 75%{ transform:rotate(40deg); } }
  @keyframes qcTilt80 { 0%,100%{ transform:perspective(1200px) rotateX(0deg); } 25%{ transform:perspective(1200px) rotateX(40deg); } 75%{ transform:perspective(1200px) rotateX(-40deg); } }
  @keyframes qcMixA { 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-15px,32px); } 50%{ transform:translate(7px,72px); } 75%{ transform:translate(17px,28px); } }
  @keyframes qcMixB { 0%,100%{ transform:translate(0,0); } 30%{ transform:translate(13px,50px); } 60%{ transform:translate(-17px,86px); } 85%{ transform:translate(-6px,22px); } }
  @keyframes qcMixC { 0%,100%{ transform:translate(0,0); } 20%{ transform:translate(9px,18px); } 55%{ transform:translate(-11px,62px); } 80%{ transform:translate(15px,38px); } }
  @keyframes qcSloshA { 0%,100%{ transform:translate(-7px,3px); } 50%{ transform:translate(7px,-3px); } }
  @keyframes qcSloshB { 0%,100%{ transform:translate(6px,-4px); } 50%{ transform:translate(-6px,4px); } }
  @keyframes qcArrowPulse { 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
  @keyframes gaugeSweep { 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
  @keyframes rise { 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.85; } 86%{ opacity:.85; } 100%{ transform:translateY(-238px); opacity:0; } }
  @keyframes rise2 { 0%{ transform:translateY(0); opacity:0; } 18%{ opacity:.75; } 100%{ transform:translateY(-26px); opacity:0; } }
  @keyframes rock { 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
  @keyframes heatwave { 0%,100%{ opacity:.2; } 50%{ opacity:.65; } }
  @keyframes plunge { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
  @keyframes work { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-2px) rotate(-3deg); } }
  @keyframes workarm { 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-16deg); } }
  @keyframes pumpstroke { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }
  @keyframes sensorflow { to { stroke-dashoffset:-20; } }
  @keyframes splashUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  @keyframes splashRing { 0%,100%{ opacity:.35; } 50%{ opacity:.7; } }
  @keyframes monFade { from { opacity:0; } to { opacity:1; } }

/* ==========================================================================
   Shared control styling — one look for every screen.
   .ui-btn is the base; add .ui-btn-primary / -ghost / -sub for the variant.
   ========================================================================== */
.ui-btn { font-family:inherit; font-size:12px; font-weight:500; line-height:1; white-space:nowrap;
          display:inline-flex; align-items:center; justify-content:center; gap:7px;
          height:34px; padding:0 14px; border-radius:9px; cursor:pointer; box-sizing:border-box;
          transition:border-color .15s ease, color .15s ease, background .15s ease, filter .15s ease; }
.ui-btn-ghost { background:var(--panel); border:1px solid var(--line2); color:var(--txt2); }
.ui-btn-ghost:hover { border-color:var(--blue); color:var(--txt); }
.ui-btn-sub { background:var(--icard); border:1px solid var(--line2); color:var(--mut); }
.ui-btn-sub:hover { border-color:var(--blue); color:var(--txt2); }
.ui-btn-primary { background:linear-gradient(180deg,var(--blue),var(--blued)); border:1px solid var(--blued);
                  color:#ffffff; font-weight:600; box-shadow:0 4px 12px rgba(47,111,208,.20); }
.ui-btn-primary:hover { filter:brightness(1.06); }
.ui-btn[disabled], .ui-btn.is-off { opacity:.5; cursor:not-allowed; filter:none; }
/* ==========================================================================
   Validation procedure card — same visual language as the Detailed PVT
   Analysis cards. Geometry lives here so it can compact on short screens;
   only the tint / status colours come in from Main.js as inline style.
   ========================================================================== */
.val-card { width:100%; height:100%; min-width:0; min-height:0; box-sizing:border-box;
            text-align:left; cursor:pointer; font-family:inherit; color:var(--txt);
            background:var(--panel); border:1px solid var(--line); border-bottom-width:2.5px;
            border-radius:14px; padding:26px 26px 20px; overflow:hidden;
            display:flex; flex-direction:column; align-items:stretch; gap:0;
            transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
            box-shadow:0 1px 2px rgba(10,20,40,.04), 0 8px 20px rgba(10,20,40,.03); }
.val-card:hover { transform:translateY(-3px);
                  box-shadow:0 2px 4px rgba(10,20,40,.05), 0 14px 28px rgba(10,20,40,.08); }
.val-card .vc-head { display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; }
.val-card .vc-icon { width:50px; height:50px; flex:0 0 auto; border-radius:50%;
                     display:flex; align-items:center; justify-content:center; }
.val-card .vc-icon svg { width:24px; height:24px; }
.val-card .vc-title { display:block; flex:0 0 auto; font-size:17px; font-weight:700;
                      letter-spacing:-.3px; margin-top:16px; color:var(--txt); }
.val-card .vc-desc { flex:0 0 auto; font-size:12.5px; color:var(--txt2);
                     line-height:1.55; font-weight:400; margin-top:8px; }
.val-card .vc-foot { margin-top:auto; padding-top:16px; flex:0 0 auto;
                     display:flex; align-items:center; justify-content:flex-end; }
.val-card .vc-open { width:36px; height:36px; flex:0 0 auto; border-radius:50%;
                     border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; }
.val-card .vc-open svg { width:14px; height:14px; }

/* Same card, tightened when three rows have to share a short viewport.
   .is-3row is the 9-procedure bottom-hole path, which needs more height
   before it can use the full-size metrics. */
@media (max-height:820px) {
  .val-card { padding:16px 18px 12px; }
  .val-card .vc-icon { width:40px; height:40px; }
  .val-card .vc-icon svg { width:20px; height:20px; }
  .val-card .vc-title { font-size:15.5px; margin-top:10px; }
  .val-card .vc-desc { font-size:12px; line-height:1.45; margin-top:5px; }
  .val-card .vc-foot { padding-top:8px; }
  .val-card .vc-open { width:28px; height:28px; }
  .val-card .vc-open svg { width:13px; height:13px; }
}
@media (max-height:1010px) {
  .val-card.is-3row { padding:16px 18px 12px; }
  .val-card.is-3row .vc-icon { width:40px; height:40px; }
  .val-card.is-3row .vc-icon svg { width:20px; height:20px; }
  .val-card.is-3row .vc-title { font-size:15.5px; margin-top:10px; }
  .val-card.is-3row .vc-desc { font-size:12px; line-height:1.45; margin-top:5px; -webkit-line-clamp:1; }
  .val-card.is-3row .vc-foot { padding-top:8px; }
  .val-card.is-3row .vc-open { width:28px; height:28px; }
  .val-card.is-3row .vc-open svg { width:13px; height:13px; }
}

/* very short viewports (720p): one more notch down so the description still shows */
@media (max-height:760px) {
  .val-card { padding:13px 16px 10px; }
  .val-card .vc-icon { width:34px; height:34px; }
  .val-card .vc-icon svg { width:18px; height:18px; }
  .val-card .vc-title { font-size:14.5px; margin-top:8px; }
  .val-card .vc-desc { font-size:11.5px; line-height:1.4; margin-top:4px; }
  .val-card .vc-foot { padding-top:6px; }
  .val-card .vc-open { width:26px; height:26px; }
  .val-card .vc-open svg { width:12px; height:12px; }
  .val-card.is-3row { padding:10px 14px 8px; }
  .val-card.is-3row .vc-icon { width:30px; height:30px; }
  .val-card.is-3row .vc-icon svg { width:16px; height:16px; }
  .val-card.is-3row .vc-title { font-size:14px; margin-top:6px; }
  .val-card.is-3row .vc-desc { font-size:11px; line-height:1.35; margin-top:3px; }
  .val-card.is-3row .vc-foot { padding-top:5px; }
  .val-card.is-3row .vc-open { width:24px; height:24px; }
  .val-card.is-3row .vc-open svg { width:11px; height:11px; }
}

/* card description: clamps to whole lines, one line less on short screens
   so a description is never cut through the middle of a line */
.card-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
@media (max-height:820px) { .card-desc { -webkit-line-clamp:1; } }

/* bottom action bar shared by the stage screens */
.ui-actionbar { flex:0 0 auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ui-actionbar-end { margin-left:auto; display:flex; align-items:center; gap:9px; }

/* ---- module navigation tabs + action buttons: one hover behaviour ---- */
.nav-btn, .act-btn { transition: border-color .15s ease, filter .15s ease; }
.nav-btn:hover { border-color: var(--blue) !important; }
.act-btn:hover { border-color: var(--blue) !important; filter: brightness(1.08); }
.act-btn[style*="not-allowed"]:hover { filter: none; }

/* ==========================================================================
   PVT calculators (components/OilCalc.js, components/GasCalc.js)
   Shared .oc-* styling. Accent: amber for oil, blue for .oc.is-gas.
   ========================================================================== */
.oc { display:flex; flex-direction:column; min-height:0; flex:1; gap:12px; font-family:var(--font-main); color:var(--txt);
       --oc-acc:var(--amb); --oc-rgb:231,177,90; --oc-btn1:#e7b15a; --oc-btn2:#c98f34; --oc-btnt:#2a1c05; }
.oc.is-gas { --oc-acc:var(--blue); --oc-rgb:77,157,255; --oc-btn1:#4d9dff; --oc-btn2:#2f6fd0; --oc-btnt:#04162e; }

.oc-bar { flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.oc-tabs { display:flex; gap:4px; padding:4px; border-radius:11px; background:var(--panel); border:1px solid var(--line); }
.oc-tab { font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.2px; padding:8px 15px; border-radius:8px;
          border:1px solid transparent; background:transparent; color:var(--mut); cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease; }
.oc-tab:hover { color:var(--txt); }
.oc-tab.is-on { color:var(--oc-acc); background:rgba(var(--oc-rgb),.10); border-color:rgba(var(--oc-rgb),.35); }
.oc-bar-actions { margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

.oc-btn { font-family:inherit; font-size:var(--fs-button); font-weight:var(--fw-button); letter-spacing:var(--ls-button);
          height:36px; padding:0 17px; border-radius:10px; cursor:pointer; white-space:nowrap;
          transition:border-color .15s ease, filter .15s ease; }
.oc-btn-ghost { background:var(--panel); border:1px solid var(--line2); color:var(--txt2); }
.oc-btn-ghost:hover { border-color:var(--oc-acc); color:var(--txt); }
.oc-btn-amber, .oc-btn-acc { background:linear-gradient(180deg,var(--oc-btn1),var(--oc-btn2)); border:1px solid var(--oc-btn2);
                             color:var(--oc-btnt); box-shadow:0 5px 14px rgba(var(--oc-rgb),.22); }
.oc-btn-amber:hover, .oc-btn-acc:hover { filter:brightness(1.06); }

.oc-view { flex:1; min-height:0; display:flex; flex-direction:column; }
.oc-view[hidden] { display:none; }

.oc-grid { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:14px; }
.oc-col { min-height:0; display:flex; flex-direction:column; gap:14px; overflow-y:auto; overflow-x:hidden; padding-right:2px; }

.oc-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px 16px;
           box-shadow:0 1px 2px rgba(10,20,40,.04); }
.oc-card > h3 { margin:0 0 12px; font-size:var(--fs-section-heading); font-weight:var(--fw-section-heading);
                letter-spacing:var(--ls-section-heading); color:var(--txt); display:flex; align-items:center; gap:9px; }
.oc-card > h3::before { content:""; width:3px; height:14px; border-radius:2px; background:var(--oc-acc); flex:0 0 auto; }
.oc-card-res { flex:1; min-height:0; display:flex; flex-direction:column; }

.oc-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 12px; }
.oc-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.oc-field > span { font-size:11px; font-weight:600; letter-spacing:.3px; color:var(--lbl2); display:flex; align-items:baseline; gap:5px; }
.oc-field > span em { font-style:normal; font-weight:400; font-size:10px; color:var(--mut2); }
.oc-field.is-manual > span { color:var(--oc-acc); }
.oc-field-wide { flex:1; min-width:0; }

.oc input[type="number"], .oc input[type="text"], .oc select, .oc textarea {
  font-family:inherit; font-size:13px; color:var(--txt); background:var(--inset);
  border:1px solid var(--line2); border-radius:9px; padding:8px 10px; width:100%; min-width:0;
  transition:border-color .15s ease, box-shadow .15s ease; }
.oc textarea { font-family:var(--font-mono); font-size:11.5px; line-height:1.5; resize:vertical; }
.oc input:focus, .oc select:focus, .oc textarea:focus {
  outline:none; border-color:var(--oc-acc); box-shadow:0 0 0 3px rgba(var(--oc-rgb),.14); }
.oc select { cursor:pointer; }
.oc-field.is-manual input { border-color:rgba(var(--oc-rgb),.45); }

.oc-props { display:flex; flex-direction:column; gap:9px; }
.oc-prop { border:1px solid var(--line); border-radius:11px; padding:9px 12px; background:var(--icard);
           display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.oc-prop-head { flex:1 1 230px; min-width:0; display:flex; align-items:center; gap:10px; }
.oc-prop-n { flex:0 0 auto; width:20px; height:20px; border-radius:6px; background:rgba(var(--oc-rgb),.13);
             color:var(--oc-acc); font-family:var(--font-mono); font-size:10.5px; font-weight:600;
             display:flex; align-items:center; justify-content:center; margin-top:1px; }
.oc-prop-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.oc-prop-title { font-size:13.5px; font-weight:600; color:var(--txt); }
.oc-prop-sub { font-size:10.5px; color:var(--mut); font-weight:400; line-height:1.35;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-chk { flex:0 0 auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--mut); cursor:pointer; user-select:none; }
.oc-chk input { accent-color:var(--oc-acc); width:14px; height:14px; cursor:pointer; }
.oc-prop-ctl { flex:2 1 280px; min-width:0; display:flex; flex-wrap:wrap; gap:7px; }
.oc-prop-ctl select { flex:1 1 180px; }
.oc-prop-n { align-self:center; }

.oc-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin-bottom:11px; }
.oc-tile { border:1px solid var(--line); border-bottom:2px solid rgba(var(--oc-rgb),.55); border-radius:10px;
           background:var(--icard); padding:9px 11px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.oc-tile-lbl { font-size:var(--fs-live-label); font-weight:var(--fw-live-label); letter-spacing:var(--ls-live-label);
               color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-tile-val { font-family:var(--font-mono); font-size:19px; font-weight:600; color:var(--txt); line-height:1.15; }
.oc-tile-unit { font-size:10.5px; color:var(--mut2); }

.oc-meta { font-size:11.5px; color:var(--mut); margin:0 0 9px; }
.oc-tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--icard); }
.oc-res-table { flex:1; min-height:0; overflow-y:auto; }
.oc table { width:100%; border-collapse:collapse; font-size:var(--fs-table-content); }
.oc thead th { position:sticky; top:0; z-index:1; background:var(--strip); color:var(--mut);
               font-size:var(--fs-table-header); font-weight:var(--fw-table-header); letter-spacing:var(--ls-table-header);
               text-align:left; padding:8px 10px; white-space:nowrap;
               border-bottom:1px solid var(--line2); }
.oc tbody td { padding:7px 10px; border-bottom:1px solid var(--line); color:var(--txt2); white-space:nowrap; }
.oc tbody tr:last-child td { border-bottom:none; }
.oc tbody tr.is-key td { color:var(--txt); font-weight:500; }
.oc tbody tr.oc-empty td { color:var(--mut2); font-style:italic; text-align:center; padding:14px 10px; white-space:normal; }
.oc td.oc-num { font-family:var(--font-mono); color:var(--txt); }
.oc td.oc-unit { color:var(--mut); }
.oc td.oc-method { color:var(--mut); white-space:normal; }
.oc tfoot td { padding:8px 10px; background:var(--strip); color:var(--txt2); font-size:11.5px;
               border-top:1px solid var(--line2); white-space:normal; }

.oc-subtabs { flex:0 0 auto; display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.oc-subtab { font-family:inherit; font-size:12px; font-weight:500; padding:7px 13px; border-radius:9px;
             background:var(--panel); border:1px solid var(--line); color:var(--mut); cursor:pointer;
             transition:border-color .15s ease, color .15s ease; }
.oc-subtab:hover { border-color:var(--oc-acc); color:var(--txt); }
.oc-subtab.is-on { color:var(--oc-acc); border-color:rgba(var(--oc-rgb),.45); background:rgba(var(--oc-rgb),.09); }
.oc-subtab.is-off { opacity:.45; }
.oc-card-batch { flex:1; min-height:0; overflow-y:auto; }
.oc-batch[hidden] { display:none; }
.oc-paste { display:flex; align-items:flex-end; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.oc-detail { margin-top:14px; }
.oc-detail[hidden] { display:none; }
.oc-detail > h4 { margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--txt2); }

@media (max-width:1100px) {
  .oc-grid { grid-template-columns:minmax(0,1fr); overflow-y:auto; }
  .oc-col { overflow:visible; }
}

/* ---- gas-only pieces: Z sub-panels, composition table, notes, chart ---- */
.oc-subpanel { flex:1 1 100%; min-width:0; border:1px solid var(--line); border-radius:10px;
               background:var(--panel); padding:10px 12px; display:flex; flex-direction:column; gap:9px; }
.oc-subpanel[hidden] { display:none; }
.oc-subpanel .oc-meta { margin:0; }
.oc-eqs { display:flex; flex-direction:column; gap:3px; font-family:var(--font-mono); font-size:11px; color:var(--txt2);
          border-left:2px solid rgba(var(--oc-rgb),.45); padding-left:10px; }
.oc-eqs strong { font-family:var(--font-main); font-size:11px; color:var(--oc-acc); letter-spacing:.3px; }

.oc-card-notes { flex:0 0 auto; max-height:210px; display:flex; flex-direction:column; }
.oc-notes { overflow-y:auto; font-size:11.5px; line-height:1.5; color:var(--txt2); }
.oc-notes p { margin:0 0 7px; }
.oc-notes p:last-child { margin-bottom:0; }

.oc-comp-table { max-height:none; }
.oc-comp-table input { padding:5px 7px; font-size:12px; border-radius:7px; min-width:88px; }
.oc-comp-table input[readonly] { background:var(--strip); color:var(--mut); border-color:var(--line); }
.oc-comp-table tbody td { padding:3px 5px; }
.oc-qc { display:flex; align-items:center; gap:8px; }
.oc-badge { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.6px; padding:3px 8px;
            border-radius:999px; white-space:nowrap; }
.oc-badge.is-pass { background:rgba(70,211,154,.14); color:var(--grn); border:1px solid rgba(70,211,154,.4); }
.oc-badge.is-fail { background:rgba(240,145,63,.12); color:var(--acca); border:1px solid rgba(240,145,63,.35); }

.oc-chart { margin-top:12px; border:1px dashed var(--line2); border-radius:10px; background:var(--icard);
            min-height:80px; display:flex; align-items:center; justify-content:center; padding:10px; }
.oc-chart img { max-width:100%; max-height:420px; border-radius:8px; display:block; }
.oc-chart:has(img[hidden]) { display:none; }
.oc input[type="file"] { padding:6px 8px; font-size:12px; }
.oc select:disabled { opacity:.5; cursor:not-allowed; }

/* ==========================================================================
   PAGE LAYOUT SYSTEM (2026-09-28) — one frame for every module / stage.
   --page-h   : the working height under the top bar. It never goes below
                --page-min-h, so on very short windows / high zoom the page
                scrolls instead of clipping or squashing the schematic.
   .pg        : page frame (full width, compact padding, column flow)
   .pg-head   : ONE compact header row — title · short description · status ·
                page actions on the right. Same height on every module.
   .lab-body  : schematic | side-panel grid used by the laboratory stages.
   ========================================================================== */
html { --topbar-h:52px; --page-min-h:600px;
       --page-h:max(var(--page-min-h), calc(var(--app-h, 100vh) - var(--topbar-h)));   /* --app-h: real visible height (Responsive.js) */
       --page-pad-x:clamp(12px,1.25vw,22px); --page-pad-y:10px; --page-gap:10px; }
#app { min-width:0; }   /* responsive since 2026-10-30: pages adapt instead of forcing a 768 px canvas */
main { min-width:0; }

.pg { height:var(--page-h); width:100%; min-width:0; box-sizing:border-box; overflow:hidden;
      padding:var(--page-pad-y) var(--page-pad-x) 12px; display:flex; flex-direction:column;
      gap:var(--page-gap); background:var(--bg); }
.pg-head { flex:0 0 auto; display:flex; align-items:center; gap:10px 14px; min-height:36px; min-width:0; }
.pg-head .pg-icon { width:32px; height:32px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pg-head .pg-icon svg { width:17px; height:17px; }
.pg-titles { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px 12px; flex-wrap:nowrap; overflow:hidden; }
.pg-eyebrow { font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue); font-weight:600; white-space:nowrap; flex:0 0 auto; }
.pg-title { margin:0; font-size:18px; font-weight:700; letter-spacing:-.3px; line-height:1.2; color:var(--txt); white-space:nowrap; flex:0 0 auto; }
.pg-desc { margin:0; font-size:12.5px; line-height:1.3; color:var(--mut); font-weight:400; min-width:0; flex:0 1 auto;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-end { margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.pg-work { flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; }

.lab-body { flex:1 1 auto; min-height:0; min-width:0; display:grid; gap:10px;
            grid-template-columns:minmax(0,1fr) clamp(280px,21vw,330px); grid-template-rows:minmax(0,1fr); }
.lab-schem { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }
.lab-side { min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overflow-x:hidden; }

/* stable numeric readouts: digits never change width, so values don't make the layout jump */
.num, [style*="IBM Plex Mono"] { font-variant-numeric:tabular-nums; }

/* narrow windows / high zoom: stack schematic above the side panel and let the page scroll.
   Phones and portrait tablets stack; a landscape tablet keeps the desktop side-by-side layout.
   components/Responsive.js uses the same rule (html.vp-stack). */
@media (max-width:760px), (max-width:1100px) and (orientation:portrait) {
  .pg.pg-stack { height:auto; min-height:var(--page-h); overflow:visible; }
  .pg-stack .lab-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; }
  .pg-stack .lab-schem { height:max(380px, calc(var(--page-h) - 150px)); flex:0 0 auto; }
  .pg-stack .lab-side { overflow:visible; }
  .pg-desc { display:none; }
}
@media (max-height:640px) {
  .pg-desc { display:none; }
}

/* one geometry for every page action button (main action, next/back, reset). Colours stay
   with each page's state logic; only size / padding / type are unified here. */
.ui-btn { font-size:12.5px; }
.act { height:34px !important; min-height:34px; padding:0 16px !important; font-size:12.5px !important; line-height:1 !important;
       border-radius:9px !important; display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
       white-space:nowrap; box-sizing:border-box; flex:0 0 auto; font-family:inherit; }
.act-bar { flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:34px; }
.act-bar .act-sp { flex:1 1 16px; min-width:0; }


/* ---------- Sampling section (module01) side panel, shared by Wellhead / Separator / Bottom Hole (2026-09-28) ---------- */
.m01-panel{display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;overflow:hidden;padding:12px;background:var(--rail);border-left:1px solid var(--line);box-sizing:border-box;}
.m01-card{background:var(--icard);border:1px solid var(--line2);border-radius:10px;box-sizing:border-box;}
.m01-fig{flex:1 1 auto;min-height:0;padding:8px;display:flex;align-items:stretch;justify-content:center;}
.m01-fig > svg{flex:1 1 auto;min-width:0;min-height:0;}
.m01-note{flex:0 0 auto;padding:9px 11px;}
.m01-k{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.9px;color:var(--mut);margin-bottom:4px;}
.m01-t{font-size:11px;line-height:1.45;color:var(--txt2);text-wrap:pretty;}
:root{--m01-side:clamp(336px, 21vw, 400px);}

/* Module 01 Overview (2026-09-29): secondary equipment details shown on hover / keyboard focus (tap) */
.ovh { cursor:help; outline:none; }
.ovh .ovhit { fill:transparent; stroke:none; }
.ovh:hover .ovhit, .ovh:focus .ovhit { fill:rgba(95,168,255,.10); stroke:#5fa8ff; stroke-width:1; stroke-dasharray:3 2; }
.ovh .ovtip { opacity:0; pointer-events:none; transition:opacity .15s ease; filter:drop-shadow(0 4px 10px rgba(10,20,40,.18)); }
.ovh:hover .ovtip, .ovh:focus .ovtip { opacity:1; }
.ovs:hover rect { stroke-width:2; }

/* ===== Sampling module · one field system (components/FieldSketch.js), 2026-09-30 =====
   Sampling pages keep the whole system visible but dim the equipment that is not being
   sampled. Dimming is a visual focus only - flows in dimmed equipment keep moving. */
.fz-g{transition:opacity .45s ease, filter .45s ease;}
.fz-dim{opacity:.4;filter:grayscale(.55);transition:opacity .45s ease, filter .45s ease;}
.fz-dim .fz-minor{display:none;}
html[data-theme="light"] .fz-dim{opacity:.36;}
/* step card on sampling pages: number, short title and progress only (details in Explain This Stage) */
.m01-pc .pc-q,.bhs-pc .pc-q{display:none;}

/* ==========================================================================
   VALIDATION LAYOUT (2026-10-21) — one frame for every Validation procedure,
   taken from Restoration: .pg-head header (eyebrow · title · status · details
   buttons) | .lab-body grid = simulation area (.vl-sim) + fixed right sidebar
   (.lab-side, same width everywhere). Sidebar = page sections (.vl-sec) on top,
   the procedure dock (.vl-dock) at the bottom. The dock always has the same
   rows: stage card (fixed height) · Previous / Restart / Next · Explain ·
   Run / Pause · [Run All | Reset All] · [page navigation], and empty rows keep
   their height, so every common control sits at the same place on every
   Validation page and stage.
   ========================================================================== */
.vl-sim { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden;
          border:1px solid var(--line); border-radius:16px; padding:10px 14px; box-sizing:border-box;
          background-image:linear-gradient(rgba(150,175,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,210,.035) 1px,transparent 1px);
          background-size:34px 34px; }
.vl-fig { flex:1 1 auto; min-height:0; min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.vl-fig > svg { display:block; width:100%; height:100%; min-height:0; }
.vl-chip:empty { display:none; }
.vl-status { align-self:center; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; white-space:nowrap; }
.vl-status i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; display:inline-block; }
.vl-chip { align-self:center; flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.6px; padding:3px 8px; border-radius:6px;
           background:var(--chipbg); border:1px solid var(--line2); color:var(--chipt); white-space:nowrap; }
/* sidebar page sections (same card as "Sample Under Test") */
.vl-sec { flex:0 0 auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 13px; display:flex; flex-direction:column; gap:8px; min-width:0; box-sizing:border-box; }
.vl-sec-hd { display:flex; align-items:center; gap:8px; min-width:0; }
.vl-sec-t { font-size:13px; font-weight:600; color:var(--txt); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-k { font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--mut); text-transform:uppercase; }
.vl-cards { display:grid; grid-template-columns:1fr 1fr; gap:7px; min-width:0; }
.vl-c { background:var(--icard); border:1px solid var(--line2); border-radius:8px; padding:6px 10px; min-width:0; box-sizing:border-box; }
.vl-cl { font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.7px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; }
.vl-cv { font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--txt); }
.vl-cv small { font-size:9px; font-weight:400; color:var(--mut); }
.vl-cs { font-size:9.5px; color:var(--mut2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-fill { flex:1 1 auto; min-height:4px; }
/* page sections scroll inside the sidebar when they are taller than the space above the dock */
.vl-scroll { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overflow-x:hidden; }
/* live process monitor (dark readout card, same language as the Restoration readout) */
.vl-mon { flex:0 0 auto; background:rgba(9,15,27,.95); border:1.4px solid rgba(150,175,210,.22); border-radius:11px; padding:10px 12px; color:#dfe8f5;
          font-family:'IBM Plex Mono',monospace; display:flex; flex-direction:column; gap:5px; animation:monFade .4s ease; }
.vl-mon-k { font-size:9.5px; letter-spacing:1.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-mon-v { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.vl-mon-v b { font-size:30px; font-weight:600; letter-spacing:-1px; line-height:1.05; }
.vl-mon-v span { font-size:12px; color:#8fa3bf; }
.vl-mon-bar { position:relative; height:8px; border-radius:4px; background:rgba(150,175,210,.14); }
.vl-mon-bar::after { content:''; position:absolute; right:0; top:-4px; bottom:-4px; width:1.6px; background:#46d39a; }   /* target mark */
.vl-mon-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:4px; transition:width .2s linear; }
.vl-mon-row { display:flex; justify-content:space-between; gap:6px; font-size:9px; letter-spacing:.4px; color:#8fa3bf; white-space:nowrap; }
.vl-mon-row > * { overflow:hidden; text-overflow:ellipsis; }
.vl-mon-t { font-size:9.5px; line-height:1.35; }
/* procedure dock */
.vl-dock { flex:0 0 auto; display:flex; flex-direction:column; gap:7px; min-width:0; }
.vl-dock .pc-card { height:134px; overflow:hidden; }
.vl-dock .pc-tt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:0 0 auto; }
.vl-dock .pc-q { -webkit-line-clamp:3; flex:0 1 auto; }
.vl-dock .pc-seg { margin-top:auto; flex:0 0 auto; }
.vl-dock .pc.side .pc-acts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:var(--pc-h) var(--pc-h); gap:6px; }
.vl-dock .pc.side .pc-acts .pc-b { width:100%; min-width:0; }
.vl-dock .pc-b[data-a="primary"], .vl-dock .pc-b[data-a="reset"] { grid-column:1 / -1; }
.vl-dock .pc-b[data-a="runAll"]:not([style*="none"]) ~ .pc-b[data-a="reset"] { grid-column:auto; }
.vl-fwd { display:flex; gap:6px; height:36px; min-width:0; }
.vl-fwd > * { flex:1 1 auto; min-width:0; height:100% !important; min-height:0 !important; padding:0 8px !important; box-sizing:border-box;
              font-family:inherit; font-size:12px !important; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:9px !important; }
@media (max-height:780px) {
  .vl-dock { gap:5px; }
  .vl-dock .pc-card { height:114px; }
  .vl-dock .pc-q { -webkit-line-clamp:2; }
  .vl-sec { padding:9px 11px; gap:7px; }
  .vl-c { padding:4px 9px; }
  .vl-cv { font-size:13px; margin-top:1px; }
  .vl-cards { gap:6px; }
}
/* stacked (narrow) layout: the dock follows the sections */
@media (max-width:760px), (max-width:1100px) and (orientation:portrait) { .pg-stack .vl-fill { display:none; } .pg-stack .vl-scroll { overflow:visible; } }

/* ===========================================================================
   PVT Calculator (Module 05) — components/PvtCalc.js, PvtChart.js
   Full-page layout in the project's page language (same hero, pills and card
   treatment as the Validation page): hero (eyebrow · title · Fluid pills) ·
   view tabs + context + status · one full-width view · right overlay
   "Explain This Stage" drawer (overlays, never resizes the workspace).
   Theme variables only; accent per fluid (oil amber, gas blue).
   =========================================================================== */
.pv-page { height:var(--page-h); display:flex; min-width:0; }
.pv-host { flex:1 1 auto; min-width:0; min-height:0; display:flex; }
.pv { --pv-acc:var(--amb); --pv-rgb:231,177,90; flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column;
  gap:10px; padding:16px clamp(16px,2.2vw,34px) 14px; max-width:1680px; width:100%; margin:0 auto; position:relative;
  font-family:var(--font-main); color:var(--txt); background:var(--bg); }
.pv[data-fluid="gas"] { --pv-acc:var(--blue); --pv-rgb:77,157,255; }
/* dark theme: the calculator's 9.5–11.5 px captions, units and labels need more contrast than the global
   muted tones give (--mut2 #5c6b82 is 3.4:1 on the panel). Scoped here so the procedure pages keep their look.
   Ratios on --panel #0c1424: mut 7.9:1, mut2 6.6:1, lbl2 7.3:1. */
:root:not([data-theme="light"]) .pv { --mut:#9aabc3; --mut2:#8a9cb6; --lbl2:#93a5bf; }
.pv svg { flex:0 0 auto; }
.pv-top { flex:0 0 auto; display:flex; flex-direction:column; gap:12px; }
.pv-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pv-mono { font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--mut); font-weight:600; white-space:nowrap; }

/* hero — Validation page pattern */
.pv-hero { display:flex; align-items:center; gap:20px; }
.pv-hero-l { flex:1 1 auto; min-width:0; }
.pv-eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue); font-weight:600; }
.pv-rule { width:24px; height:3px; border-radius:2px; background:var(--pv-acc); }
.pv-titlerow { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:7px; }
.pv-title { margin:0; font-size:clamp(21px,1.9vw,27px); font-weight:700; letter-spacing:-.7px; color:var(--txt); }
.pv-sub { margin:0; font-size:12.5px; color:var(--txt2); min-width:0; }
.pv-hero-r { flex:0 0 auto; display:flex; align-items:center; gap:12px; }

/* pills — the project's toggle buttons (Validation "Sample Source") */
.pv-pills { display:inline-flex; flex-wrap:wrap; gap:6px; min-width:0; }
.pv-pills button { font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.2px; line-height:1.2; color:var(--txt2); background:var(--chipbg);
  border:1px solid var(--line2); border-radius:7px; padding:6px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.pv-pills button:hover { color:var(--txt); border-color:rgba(var(--pv-rgb),.55); }
.pv-pills button.is-on { color:var(--txt); background:rgba(var(--pv-rgb),.14); border-color:var(--pv-acc); }
.pv-pills svg { width:14px; height:14px; }
.pv-fluid button { font-size:12px; padding:7px 15px; }
.pv-fluid button[data-fluid="oil"].is-on { background:rgba(231,177,90,.14); border-color:var(--amb); }
.pv-fluid button[data-fluid="gas"].is-on { background:rgba(77,157,255,.14); border-color:var(--blue); }
.pv-fluid button[data-fluid="oil"] svg { color:var(--amb); }
.pv-fluid button[data-fluid="gas"] svg { color:var(--blue); }

/* visible keyboard focus everywhere in the calculator */
.pv button:focus-visible, .pv summary:focus-visible, .pv input[type="checkbox"]:focus-visible, .pv-file:focus-within,
.pv-tab:focus-visible, .pv-errlink:focus-visible { outline:2px solid var(--pv-acc); outline-offset:2px; }
.pv-in:focus-within, .pv textarea:focus { border-color:var(--pv-acc); box-shadow:0 0 0 3px rgba(var(--pv-rgb),.18); }

/* tab bar · context · status */
.pv-bar { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:8px; }
.pv-tabs { display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-width:0; }
.pv-tab { font-family:inherit; font-size:13px; font-weight:600; color:var(--mut); background:none; border:none; border-radius:8px;
  padding:8px 13px; cursor:pointer; white-space:nowrap; position:relative; }
.pv-tab:hover { color:var(--txt); background:rgba(var(--pv-rgb),.06); }
.pv-tab.is-on { color:var(--txt); background:rgba(var(--pv-rgb),.12); }
.pv-tab.is-on::after { content:""; position:absolute; left:10px; right:10px; bottom:-9px; height:2.5px; border-radius:2px; background:var(--pv-acc); }
.pv-ctx { display:flex; gap:6px; flex-wrap:wrap; }
.pv-ctx span { font-family:var(--font-mono); font-size:10.5px; color:var(--txt2); padding:3px 8px; border-radius:6px; border:1px solid var(--line); background:var(--icard); white-space:nowrap; }
.pv-status { font-size:12px; color:var(--mut); display:flex; align-items:center; gap:7px; min-width:0; max-width:100%; padding:4px 11px; border-radius:999px; border:1px solid var(--line); background:var(--panel); }
.pv-status svg { width:15px; height:15px; }
.pv-status b { color:var(--txt); font-weight:600; white-space:nowrap; }
.pv-status span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-status.is-ok svg { color:var(--grn); }
.pv-status.is-warn { border-color:rgba(231,177,90,.5); }
.pv-status.is-warn svg { color:var(--amb); }
.pv-status.is-err { border-color:rgba(242,112,138,.5); }
.pv-status.is-err svg, .pv-status.is-err b { color:var(--red); }
.pv-status.is-stale b { color:var(--blue); animation:blink 1s ease-in-out infinite; }
.pv-bar-end { margin-left:auto; display:flex; gap:8px; align-items:center; }
.pv-explain-btn svg { width:15px; height:15px; }
.pv-explain-btn.is-on { border-color:var(--pv-acc); color:var(--txt); background:rgba(var(--pv-rgb),.10); }

/* main area: one view at full width; long content scrolls here, not the page */
.pv-work { flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.pv-main { flex:1 1 auto; min-height:0; overflow:auto; position:relative; scrollbar-gutter:stable; padding:2px 2px 4px; }
.pv-view { min-height:100%; display:flex; flex-direction:column; gap:12px; }

/* cards — .val-card treatment (radius 14, 2.5 px accent foot, soft shadow) */
.pv-card { background:var(--panel); border:1px solid var(--line); border-bottom:2.5px solid rgba(var(--pv-rgb),.55); border-radius:14px; padding:14px 16px 16px;
  box-shadow:0 1px 2px rgba(10,20,40,.04), 0 8px 20px rgba(10,20,40,.03); min-width:0; }
.pv-card-quiet { border-bottom-color:var(--line2); }
.pv-card-h { display:flex; align-items:center; gap:9px; margin:0 0 12px; min-width:0; }
.pv-card-h h3 { margin:0; font-size:var(--fs-section-heading,14px); font-weight:var(--fw-section-heading,700); color:var(--txt); }
.pv-step { width:22px; height:22px; flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:11px; font-weight:700; color:var(--pv-acc); background:rgba(var(--pv-rgb),.14); border:1px solid rgba(var(--pv-rgb),.45); }

/* inputs view */
.pv-ihead { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.pv-ihead-l { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 300px; min-width:0; }
.pv-ihead-t { font-size:12px; color:var(--mut); }
.pv-ihead-r { display:flex; gap:8px; flex-wrap:wrap; }
.pv-chip.is-example { cursor:default; color:var(--blue); border-color:rgba(77,157,255,.5); background:rgba(77,157,255,.08); font-size:11.5px; font-weight:600; }
.pv-chip.is-example svg { width:14px; height:14px; }
.pv-icols { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
.pv-icol { display:flex; flex-direction:column; gap:14px; min-width:0; }
.pv-opt { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-bottom:12px; }
.pv-opt-l { font-size:11.5px; font-weight:600; color:var(--lbl2); min-width:120px; display:inline-flex; align-items:center; gap:4px; }
.pv-grid1, .pv-grid2, .pv-grid3, .pv-grid4 { display:grid; gap:10px 14px; align-items:start; }
.pv-grid1 { grid-template-columns:minmax(0,1fr); }
.pv-grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pv-grid3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pv-grid4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pv-grid1 + .pv-grid2, .pv-grid2 + .pv-grid2, .pv-grid2 + .pv-grid3, .pv-grid3 + .pv-grid2 { margin-top:10px; }
[class^="pv-grid"] + .pv-opt { margin-top:14px; }
.pv-f { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:4px; row-gap:5px; align-items:center; justify-items:start; min-width:0; }
.pv-f > .pv-in, .pv-f > textarea, .pv-f > .pv-fixed, .pv-f > .pv-derived { justify-self:stretch; }
.pv-f > :not(.pv-l):not(.pv-help) { grid-column:1 / -1; }
.pv-l { font-size:11.5px; font-weight:600; letter-spacing:.2px; line-height:16px; color:var(--lbl2); min-width:0; }
.pv-l sub, .pv-opt-l sub { line-height:0; }
.pv-l em { font-style:normal; font-weight:400; color:var(--mut2); }
.pv-help { width:20px; height:20px; padding:0; border:none; background:none; color:var(--mut); cursor:pointer; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.pv-help:hover { color:var(--pv-acc); }
.pv-help svg { width:15px; height:15px; }
.pv-opt-l .pv-help { width:18px; height:18px; }
.pv-in { display:flex; align-items:stretch; min-width:0; border:1px solid var(--line2); border-radius:9px; background:var(--inset); overflow:hidden; }
.pv-in input, .pv-in select { flex:1 1 auto; min-width:0; border:none; background:transparent; color:var(--txt); font-family:var(--font-mono);
  font-size:13px; padding:8px 10px; outline:none; }
.pv-in select { font-family:var(--font-main); cursor:pointer; }
.pv-in select option { background:var(--panel); color:var(--txt); }
.pv-u { flex:0 0 auto; display:flex; align-items:center; padding:0 10px; font-size:11.5px; color:var(--mut); background:var(--panel2); border-left:1px solid var(--line); white-space:nowrap; }
.pv textarea { width:100%; box-sizing:border-box; border:1px solid var(--line2); border-radius:9px; background:var(--inset); color:var(--txt); font-family:var(--font-mono);
  font-size:12px; line-height:1.5; padding:8px 10px; resize:vertical; outline:none; }
.pv-fixed { font-size:12px; color:var(--txt2); padding:7px 10px; border:1px dashed var(--line2); border-radius:9px; background:var(--icard); }
.pv-err { font-size:11.5px; color:var(--red); line-height:1.4; }
.pv-err::before { content:"✕ "; font-weight:700; }   /* not colour alone */
.pv-err:empty { display:none; }
.pv-f.is-err .pv-in, .pv-f.is-err textarea { border-color:var(--red); box-shadow:0 0 0 3px rgba(242,112,138,.12); }
.pv-err-block { display:block; margin-top:8px; }
.pv-hint, .pv-note { font-size:11.5px; color:var(--mut); line-height:1.45; margin:0; }
.pv-note { margin-top:10px; }
.pv-check { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--txt2); cursor:pointer; user-select:none; margin-top:10px; }
.pv-tools .pv-check { margin-top:0; }
.pv-check input { accent-color:var(--pv-acc); width:15px; height:15px; margin:0; }
.pv-derived { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px dashed rgba(var(--pv-rgb),.5); border-radius:9px; background:rgba(var(--pv-rgb),.05); min-width:0; }
.pv-dv { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--txt); }
.pv-dv em, .pv-sc-v em { font-family:var(--font-main); font-style:normal; font-size:11.5px; font-weight:400; color:var(--mut); }
.pv-adv { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.pv-adv > summary { cursor:pointer; font-size:12px; font-weight:600; color:var(--txt2); list-style:none; display:flex; align-items:center; gap:8px; border-radius:6px; }
.pv-adv > summary::-webkit-details-marker { display:none; }
.pv-adv > summary::before { content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease; margin:0 2px; }
.pv-adv[open] > summary::before { transform:rotate(45deg); }
.pv-adv[open] > summary { margin-bottom:12px; color:var(--txt); }
.pv-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.pv-go { margin-left:auto; }
.pv-next { margin-top:0; padding:10px 0 4px; border-top:1px solid var(--line); }
.pv-next-t { flex:1 1 240px; font-size:12px; color:var(--txt2); display:inline-flex; align-items:center; gap:7px; min-width:0; }
.pv-next-t svg { width:15px; height:15px; color:var(--grn); }
.pv-next .ui-btn svg { width:14px; height:14px; }
.pv-errsum { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.55; color:var(--txt); border:1px solid rgba(242,112,138,.45);
  background:rgba(242,112,138,.08); border-radius:10px; padding:9px 12px; }
.pv-errsum[hidden] { display:none; }
.pv-errsum > svg { width:16px; height:16px; color:var(--red); margin-top:2px; }
.pv-errlink { font:inherit; color:var(--red); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.pv-errlink:hover { color:var(--txt); }
.pv-manual { margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--icard); }
.pv-manual-read { font-size:12px; color:var(--txt2); margin-bottom:10px; }
.pv-manual input[type="file"] { font-size:11.5px; color:var(--mut); max-width:100%; }
.pv-zimg { margin-top:10px; max-width:100%; max-height:420px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.pv-dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:12px; line-height:1.5; }
.pv-dl dt { color:var(--lbl2); font-weight:600; }
.pv-dl dd { margin:0; color:var(--txt2); }

/* composition */
.pv-comp-wrap { max-height:330px; overflow:auto; border:1px solid var(--line); border-radius:10px; margin-top:4px; }
.pv-comp input { width:100%; min-width:0; box-sizing:border-box; border:1px solid transparent; background:transparent; color:var(--txt); font-family:var(--font-mono); font-size:12px; padding:4px 6px; border-radius:6px; }
.pv-comp input:focus { outline:none; border-color:var(--pv-acc); background:var(--inset); }
.pv-comp td:nth-child(2) { min-width:120px; }
.pv-paste { margin-top:10px; font-size:12px; color:var(--txt2); }
.pv-paste summary { cursor:pointer; font-weight:600; }
.pv-paste textarea { margin:8px 0; }

/* messages (range · accuracy · assumptions · errors): icon + heading, never colour alone */
.pv-msg { font-size:12px; line-height:1.5; color:var(--txt2); border:1px solid var(--line2); background:var(--panel2); border-radius:10px; padding:9px 12px; }
.pv-msg + .pv-msg { margin-top:8px; }
.pv-msg-h { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--txt); }
.pv-msg-h svg { width:15px; height:15px; }
.pv-msg ul { margin:4px 0 0; padding-left:22px; }
.pv-msg li span { color:var(--mut); }
.pv-msg.is-warn { border-color:rgba(231,177,90,.5); background:rgba(231,177,90,.08); }
.pv-msg.is-warn .pv-msg-h svg { color:var(--amb); }
.pv-msg.is-info { border-color:rgba(77,157,255,.4); background:rgba(77,157,255,.06); }
.pv-msg.is-info .pv-msg-h svg { color:var(--blue); }
.pv-msg.is-err { border-color:rgba(242,112,138,.5); background:rgba(242,112,138,.08); }
.pv-msg.is-err .pv-msg-h svg { color:var(--red); }
.pv-msg.is-ok { border-color:rgba(70,211,154,.45); background:rgba(70,211,154,.07); }
.pv-msg.is-ok .pv-msg-h svg { color:var(--grn); }
.pv-warnlist:empty { display:none; }
.pv-tag { font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:1px 6px; border-radius:5px;
  border:1px solid rgba(var(--pv-rgb),.5); color:var(--pv-acc); background:rgba(var(--pv-rgb),.08); white-space:nowrap; }
.pv-empty { padding:24px; font-size:13px; color:var(--txt2); line-height:1.6; }

/* tables */
.pv-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.pv-tbl thead th { position:sticky; top:0; z-index:1; background:var(--strip); color:var(--mut); font-size:var(--fs-table-header,11px); font-weight:600;
  letter-spacing:.3px; text-align:left; padding:8px 10px; border-bottom:1px solid var(--line2); white-space:nowrap; vertical-align:bottom; }
.pv-tbl thead th em { display:block; font-style:normal; font-weight:400; font-size:10.5px; color:var(--mut2); text-transform:none; letter-spacing:0; }
.pv-tbl tbody td { padding:6px 10px; border-bottom:1px solid var(--line); color:var(--txt2); white-space:nowrap; }
.pv-tbl tfoot td { padding:7px 10px; background:var(--strip); font-size:12px; color:var(--txt2); }
.pv-num { font-family:var(--font-mono); text-align:right; }
.pv-tbl th:not(:first-child) { text-align:right; }
.pv-tbl.pv-comp th, .pv-tbl.pv-comp td, .pv-tbl th.pv-txt, .pv-tbl td.pv-txt { text-align:left; }
.pv-tbl-wrap { flex:1 1 auto; min-height:180px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.pv-res tbody tr { cursor:pointer; }
.pv-res tbody tr:hover td { background:rgba(var(--pv-rgb),.05); }
.pv-res tbody tr.is-pb td { font-weight:600; color:var(--txt); background:rgba(var(--pv-rgb),.06); }
.pv-res tbody tr.is-sel td { background:rgba(var(--pv-rgb),.18); color:var(--txt); }
.pv-res tbody tr.is-sel td:first-child { box-shadow:inset 3px 0 0 var(--pv-acc); }
.pv-res tbody tr.is-sel td:first-child::before { content:"▸ "; color:var(--pv-acc); }   /* selection not by colour alone */
.pv-res tbody tr:focus-visible { outline:2px solid var(--pv-acc); outline-offset:-2px; }
.pv-na { color:var(--mut2) !important; }
.pv-na sup { color:var(--red); }
.pv-notes { margin:8px 0 0; padding:0 12px 10px 30px; font-size:11.5px; color:var(--mut); line-height:1.45; }
.pv-tools { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.pv-tools-end { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pv-tbl-title { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12px; color:var(--mut); line-height:1.4; flex:1 1 300px; min-width:0; }
.pv-tbl-title b { color:var(--txt); }
.pv-tbl-title span { padding:2px 8px; border-radius:6px; border:1px solid var(--line); background:var(--icard); color:var(--txt2); }
.pv-scal-wrap { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:8px 12px; }
.pv-scal-wrap > summary { cursor:pointer; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--mut); list-style:none; }
.pv-scal-wrap > summary::-webkit-details-marker { display:none; }
.pv-scal-wrap[open] > summary { margin-bottom:8px; }
.pv-scalars { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.pv-sc { display:flex; flex-direction:column; gap:3px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:var(--icard); min-width:0; }
.pv-sc.is-assumed { border-style:dashed; border-color:rgba(231,177,90,.6); }
.pv-sc-l { font-size:11px; font-weight:600; color:var(--lbl2); }
.pv-sc-v { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--txt); }
.pv-sc-m { font-size:10.5px; color:var(--mut); line-height:1.35; }
.pv-sc-m b { font-weight:700; color:var(--txt2); }
.pv-sc.is-assumed .pv-sc-m b { color:var(--amb); }

/* charts view: the chart takes the whole width and the remaining height */
.pv-charts { min-height:100%; }
.pv-props button { font-size:12.5px; min-width:44px; justify-content:center; }
.pv-cmp { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--mut); min-width:0; }
.pv-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line2); border-radius:999px; background:var(--chipbg); color:var(--txt2); cursor:pointer; font-size:11.5px; }
.pv-chip:has(input:checked) { border-color:var(--pv-acc); color:var(--txt); background:rgba(var(--pv-rgb),.10); }
.pv-chip input { accent-color:var(--pv-acc); margin:0; }
.pv-chart-card { flex:1 1 auto; min-height:460px; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px 10px; position:relative; box-shadow:0 1px 2px rgba(10,20,40,.04), 0 8px 20px rgba(10,20,40,.03); }
.pv-chart-head { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; }
.pv-chart-title { font-size:14px; font-weight:700; color:var(--txt); }
.pv-chart-title span { font-weight:400; color:var(--mut); font-size:12px; margin-left:6px; }
.pv-chart-meta { display:flex; flex-wrap:wrap; gap:4px 6px; }
.pv-chart-meta span { font-size:11px; color:var(--txt2); padding:2px 8px; border-radius:6px; border:1px solid var(--line); background:var(--icard); white-space:nowrap; }
.pv-legend { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11.5px; color:var(--txt2); margin:6px 0 2px; }
.pv-legend:empty { display:none; }
.pv-lg { display:inline-flex; align-items:center; gap:6px; }
.pv-lg em { font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--mut); }
.pv-lg.is-primary { color:var(--txt); font-weight:600; }
.pv-lg-sq { width:9px; height:9px; border:2px solid; display:inline-block; }
.pv-chart-host { flex:1 1 auto; min-height:300px; position:relative; }
.pv-chart-host[hidden] { display:none; }
.pc-chart { position:absolute; inset:0; outline:none; cursor:crosshair; }
.pc-chart:focus-visible { box-shadow:inset 0 0 0 2px rgba(var(--pv-rgb),.7); border-radius:8px; }
.pc-chart svg { display:block; }
.pc-tip { position:absolute; z-index:5; pointer-events:none; min-width:190px; max-width:340px; background:var(--panel); border:1px solid var(--line2); border-radius:10px;
  box-shadow:0 8px 22px rgba(10,20,40,.18); padding:8px 10px; font-size:12px; color:var(--txt2); }
.pc-tip-head { font-weight:700; color:var(--txt); margin-bottom:4px; font-family:var(--font-mono); }
.pc-tip-row { display:flex; align-items:center; gap:7px; padding:1px 0; }
.pc-tip-row i { width:10px; height:3px; border-radius:2px; flex:0 0 auto; }
.pc-tip-row.is-meas i { width:8px; height:8px; border:2px solid; background:none; border-radius:0; }
.pc-tip-row span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-tip-row b { font-family:var(--font-mono); color:var(--txt); font-weight:600; }
.pc-tip-why { margin-top:5px; color:var(--red); font-size:11px; line-height:1.35; }
.pv-chart-msg { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); max-width:80%; text-align:center; font-size:12.5px; line-height:1.6; color:var(--txt2);
  background:var(--panel); border:1px solid var(--line2); border-radius:10px; padding:12px 16px; box-shadow:0 4px 14px rgba(10,20,40,.10); }
.pv-chart-msg[hidden] { display:none; }
/* compact point strip: instruction before a selection, a value summary after (details go to the drawer) */
.pv-pointbar { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; min-height:38px; margin-top:6px; padding:6px 10px; border-radius:10px;
  border:1px solid rgba(var(--pv-rgb),.35); background:rgba(var(--pv-rgb),.05); font-size:12px; color:var(--txt2); }
.pv-pointbar:empty { display:none; }
.pv-pointbar.is-empty { border-color:var(--line); background:var(--icard); color:var(--mut); }
.pv-pointbar > svg { width:15px; height:15px; color:var(--blue); }
.pv-pb-p { display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-mono); white-space:nowrap; }
.pv-pb-p em { font-family:var(--font-main); font-style:normal; font-size:10.5px; color:var(--mut); }
.pv-pb-p b { color:var(--txt); font-size:13px; }
.pv-pvals { display:flex; flex-wrap:wrap; gap:4px 6px; flex:1 1 300px; min-width:0; }
.pv-pv { display:inline-flex; align-items:baseline; gap:5px; padding:2px 8px; border:1px solid var(--line); border-radius:7px; background:var(--panel); font-family:var(--font-mono); font-size:12px; color:var(--txt); white-space:nowrap; }
.pv-pv b { font-family:var(--font-main); font-size:11px; color:var(--mut); font-weight:600; }
.pv-pv em { font-family:var(--font-main); font-style:normal; font-size:10px; color:var(--mut2); }
.pv-pv i { font-style:normal; color:var(--mut2); }
.pv-pv.is-cur { border-color:var(--pv-acc); background:rgba(var(--pv-rgb),.10); }
.pv-eqbtn { height:28px; padding:0 10px; margin-left:auto; }
.pv-phase { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--line2); white-space:nowrap; }
.pv-phase.is-saturated { color:var(--amb); border-color:rgba(231,177,90,.5); }
.pv-phase.is-undersaturated { color:var(--blue); border-color:rgba(77,157,255,.5); }
.pv-phase.is-bubble-point { color:var(--grn); border-color:rgba(70,211,154,.5); }
/* single pressure: a result summary in place of the plot */
.pv-single { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:18px 6px 8px; }
.pv-single[hidden] { display:none; }
.pv-single-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pv-single-h b { font-family:var(--font-mono); font-size:18px; color:var(--txt); }
.pv-pvals-lg { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; width:100%; flex:none; }
.pv-pvals-lg .pv-pv { flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; font-size:16px; font-weight:600; background:var(--icard); border-radius:10px; }
.pv-pvals-lg .pv-pv b { font-size:11.5px; }
.pv-notes-row { display:flex; flex-direction:column; gap:6px; }
.pv-notes-row:empty { display:none; }
.pv-note-box { font-size:12px; color:var(--txt2); border:1px solid var(--line2); border-radius:10px; padding:7px 12px; background:var(--panel); }
.pv-note-box > summary { cursor:pointer; display:flex; align-items:center; gap:7px; font-weight:600; color:var(--txt); }
.pv-note-box > summary svg { width:15px; height:15px; }
.pv-note-box ul { margin:6px 0 2px; padding-left:22px; line-height:1.45; }
.pv-note-box li span { color:var(--mut); }
.pv-note-box.is-gap { border-color:rgba(242,112,138,.45); }
.pv-note-box.is-gap svg { color:var(--red); }
.pv-note-box.is-warn { border-color:rgba(231,177,90,.5); }
.pv-note-box.is-warn svg { color:var(--amb); }
.pv-note-box.is-info svg { color:var(--blue); }

/* measured + methods */
.pv-template { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin:0 0 6px; }
.pv-template code { font-family:var(--font-mono); font-size:11.5px; color:var(--txt); background:var(--inset); border:1px solid var(--line); border-radius:7px; padding:5px 8px; white-space:normal; overflow-wrap:anywhere; min-width:0; }
.pv-template-b { display:flex; gap:6px; flex-wrap:wrap; }
.pv-measured .pv-l { display:block; margin:10px 0 5px; }
.pv-measured .pv-opt { margin:12px 0 0; }
.pv-file { position:relative; overflow:hidden; cursor:pointer; }
.pv-file input { position:absolute; inset:0; opacity:0; cursor:pointer; }
#pv-meas-errs:not(:empty) { margin-top:12px; }
.pv-stats { min-height:0; }
.pv-tbl td.pv-wrap { white-space:normal; min-width:150px; }
.pv-calc { color:var(--txt) !important; }
.pv-mgrid { columns:2; column-gap:14px; }
.pv-mgrid > .pv-card { break-inside:avoid; margin-bottom:14px; display:block; }
.pv-meth { padding:10px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:5px; }
.pv-card-h + .pv-meth { border-top:none; padding-top:0; }
.pv-meth.is-cur .pv-meth-h b { color:var(--pv-acc); }
.pv-meth-h { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; }
.pv-meth-r { font-size:11.5px; color:var(--txt2); line-height:1.5; }
.pv-meth-ref { font-size:11px; color:var(--mut); line-height:1.45; }
.pv-eq { margin:0; font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--txt2); background:var(--inset); border:1px solid var(--line);
  border-radius:8px; padding:7px 9px; white-space:pre-wrap; word-break:break-word; }
.pv-subs { margin:0; padding-left:18px; font-family:var(--font-mono); font-size:11px; line-height:1.55; color:var(--txt); word-break:break-word; }
.pv-vstat { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:2px 8px; border-radius:999px; border:1px solid var(--line2); white-space:nowrap; }
.pv-vstat svg { width:13px; height:13px; }
.pv-vstat.is-cross-checked { color:var(--grn); border-color:rgba(70,211,154,.5); background:rgba(70,211,154,.07); }
.pv-vstat.is-discrepancy { color:var(--amb); border-color:rgba(231,177,90,.55); background:rgba(231,177,90,.08); }
.pv-vstat.is-unverified { color:var(--mut); border-style:dashed; }
.pv-rng { display:inline-block; margin:1px 2px 1px 0; padding:0 6px; border-radius:5px; border:1px solid var(--line); background:var(--icard); font-family:var(--font-mono); font-size:10.5px; white-space:nowrap; }
.pv-rng i { font-family:var(--font-main); font-style:normal; font-size:10px; color:var(--mut); }
.pv-rng.is-corroborated { border-color:rgba(70,211,154,.45); }
.pv-rng.is-corroborated i { color:var(--grn); }
.pv-rng.is-discrepancy { border-color:rgba(231,177,90,.55); }
.pv-rng.is-discrepancy i { color:var(--amb); }
.pv-rng.is-unverified { border-style:dashed; }
.pv-refs { margin:0; padding-left:20px; font-size:12px; color:var(--txt2); line-height:1.55; }
.pv-batch .oc-card-batch { overflow:visible; }
.oc.oc-embed { --oc-acc:var(--amb); --oc-rgb:231,177,90; flex:none; gap:0; }
.oc-skips { font-size:12px; color:var(--txt2); border:1px solid rgba(242,112,138,.4); background:rgba(242,112,138,.06); border-radius:10px; padding:8px 12px; margin-bottom:12px; }
.oc-skips ul { margin:4px 0 0; padding-left:18px; }
.oc-detail-pick { max-width:320px; margin-top:14px; }
.oc-fields-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.oc-fields-row .oc-field { min-width:220px; }

/* explain drawer: overlay on the right of the work area; sections reuse StepGuide's .sgSec/.sgLbl/.sgTxt/.sgVal */
.pv-explain { position:absolute; right:0; top:0; bottom:0; width:clamp(290px,22vw,350px); z-index:40; pointer-events:none; }
.pv-ex-in { height:100%; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; background:var(--panel); border:1px solid var(--line2); border-radius:12px;
  box-shadow:-8px 0 24px rgba(10,20,40,.16); padding:0 16px 18px; opacity:0; transform:translateX(24px); transition:opacity .18s ease, transform .18s ease; }
.pv-explain.is-open { pointer-events:auto; }
.pv-explain.is-open .pv-ex-in { opacity:1; transform:none; }
.pv-explain:not(.is-open) .pv-ex-in { visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.pv-ex-head { position:sticky; top:0; z-index:1; background:var(--panel); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:start; padding:14px 0 10px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.pv-ex-title { font-size:15px; font-weight:700; color:var(--txt); grid-column:1; grid-row:1; }
.pv-ex-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:1.2px; color:var(--pv-acc); font-weight:600; grid-column:1; grid-row:2; }
.pv-ex-close { grid-column:2; grid-row:1 / span 2; width:28px; height:28px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--mut); cursor:pointer; font-size:13px; }
.pv-ex-close:hover { color:var(--txt); border-color:var(--pv-acc); }
.pv-ex-body { display:flex; flex-direction:column; gap:12px; }
.pv-ex-sec .sgTxt p { margin:0 0 6px; }
.pv-ex-sec .sgTxt ul { margin:4px 0 0; padding-left:18px; }
.pv-ex-vals { display:flex; flex-wrap:wrap; gap:6px; }
.pv-ex-vals .sgVal b { text-transform:none; letter-spacing:.2px; font-size:11px; }   /* keep symbols readable: ρg, μg, not PG, MG */
.pv-ex-body .pv-eq { margin:0; }

/* responsive */
@media (max-width:1280px) {
  .pv-grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pv-sub { display:none; }
}
@media (max-width:1100px) {
  .pv-icols { grid-template-columns:minmax(0,1fr); }
  .pv-mgrid { columns:1; }
}
@media (max-width:1000px) {
  .pv-explain { left:0; right:0; top:auto; bottom:0; width:auto; height:min(56vh,440px); position:fixed; }
  .pv-ex-in { border-radius:12px 12px 0 0; transform:translateY(24px); }
}
@media (max-width:760px) {
  .pv { padding:12px 14px 12px; }
  .pv-page { height:auto; min-height:var(--page-h); }
  .pv-main, .pv-work { overflow:visible; }
  .pv-hero { flex-wrap:wrap; gap:10px; }
  .pv-hero-r { width:100%; }
  .pv-grid2, .pv-grid3, .pv-grid4 { grid-template-columns:minmax(0,1fr); }
  .pv-bar-end { margin-left:0; }
  .pv-tabs { width:100%; }
  .pv-status { order:5; width:100%; box-sizing:border-box; }
  .pv-opt-l { min-width:0; width:100%; }
  .pv-scalars { grid-template-columns:minmax(0,1fr); }
  .pv-dl { grid-template-columns:minmax(0,1fr); }
  .pv-tools-end { margin-left:0; }
  .pv-chart-card { min-height:420px; padding:10px 8px 8px; }
  .pv-chart-host { min-height:280px; }
  .pv-eqbtn { margin-left:0; }
  .pv-next .ui-btn { flex:1 1 auto; }
}

/* ===========================================================================
   RESPONSIVE LAYER (2026-10-30) — desktop (> 1100 px) is unchanged.
   Tablet (761–1100 px): panels rearrange; portrait stacks equipment above the
   controls, landscape keeps the side-by-side desktop layout.
   Phone (≤ 760 px): equipment full width, controls below, Explain drawer as a
   bottom sheet (StepGuide), the page scrolls vertically, never sideways.
   Pages are built with inline styles, so overrides here use !important and
   only ever apply inside a phone / tablet query or html.vp-stack.
   components/Responsive.js sets html.vp-* and adds the equipment zoom bar.
   =========================================================================== */
html, body { max-width:100%; }
body { overflow-x:hidden; }

/* ---- equipment frames in stacked layouts: full width, own aspect ratio, nothing clipped ---- */
html.vp-stack .pg-stack .lab-schem { height:auto !important; flex:0 0 auto !important; }
html.vp-stack .rz-on { position:relative; overflow:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
html.vp-stack .rz-on [data-rz-svg] { width:calc(var(--rz, 1) * 100%) !important; height:auto !important; max-width:none !important; max-height:none !important; flex:0 0 auto !important; }
html.vp-stack .rz-on :has(> [data-rz-svg]) { flex:0 0 auto !important; min-height:0 !important; height:auto !important; justify-content:flex-start !important; align-items:flex-start !important; overflow:visible !important; }
/* the drawing's container is held to the frame width (a wide caption row above the drawing must wrap, not widen it) */
html.vp-stack .rz-on :has(> [data-rz-svg]) { width:auto; min-width:0 !important; max-width:100%; }
html.vp-stack .rz-on :has(> [data-rz-svg]) > :not([data-rz-svg]) { flex-wrap:wrap; min-width:0; max-width:100%; }
html.vp-stack .rz-on.rz-zoomed { max-height:min(72vh, 620px); }
.rz-bar { position:sticky; z-index:6; top:8px; left:calc(100% - 132px); align-self:flex-end; float:right; margin:8px 8px 4px 0; width:124px; height:38px; box-sizing:border-box; flex:0 0 auto;
  display:flex; align-items:center; gap:2px; padding:3px; border-radius:10px; background:var(--panel); border:1px solid var(--line2); box-shadow:0 4px 14px rgba(10,20,40,.16); }
.rz-bar button { width:30px; height:30px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:7px; background:none; color:var(--txt2); cursor:pointer; }
.rz-bar button:hover { background:var(--chipbg); color:var(--txt); }
.rz-bar button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.rz-bar svg { width:17px !important; height:17px !important; position:static !important; inset:auto !important; }
.rz-val { flex:1 1 auto; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--mut); }
@media (pointer:coarse) { .rz-bar { width:156px; height:46px; left:calc(100% - 164px); } .rz-bar button { width:38px; height:38px; } }

/* ---- shared page header wraps instead of clipping ---- */
@media (max-width:1100px) {
  .pg-head { flex-wrap:wrap; row-gap:8px; }
  .pg-end { flex-wrap:wrap; row-gap:6px; }
}
@media (max-width:760px) {
  .pg { padding:10px 12px 14px; }
  .pg-titles { flex-wrap:wrap; overflow:visible; row-gap:2px; flex:1 1 100%; }
  .pg-title { white-space:normal; font-size:17px; }
  .pg-end { margin-left:0; flex:1 1 100%; justify-content:flex-start; }
  .lab-side { gap:10px; }
}

/* ---- top bar ---- */
@media (max-width:760px) {
  .tb { padding:0 10px !important; gap:6px !important; }
  .tb-logo { height:28px !important; }
  .tb-nav { margin-left:0 !important; gap:2px !important; }
  .tb-nav button { font-size:0 !important; gap:0 !important; padding:0 10px !important; min-width:40px; height:40px; justify-content:center; }
  .tb .ui-btn > span { display:none; }
  .tb .ui-btn { padding:0 11px; min-width:40px; height:40px; }
}

/* ---- dashboard ---- */
@media (max-width:1100px) {
  .dash { height:auto !important; min-height:var(--page-h); padding:32px clamp(16px,4vw,40px) !important; justify-content:flex-start !important; overflow:visible !important; overflow-x:clip !important; }
  .dash-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .dash { padding:22px 16px 28px !important; gap:20px !important; }
  .dash-logo { height:46px !important; }
  .dash-grid { grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  .dash-grid > button { padding:18px 18px 16px !important; min-height:0 !important; }
  .dash-strip { grid-template-columns:minmax(0,1fr) !important; }
  .dash-strip > button { border-right:none !important; border-bottom:1px solid var(--line) !important; padding:18px !important; }
  .dash-strip > button:last-child { border-bottom:none !important; }
}

/* ---- comfortable tap targets on touch screens ---- */
@media (pointer:coarse) {
  html .pc { --pc-h:44px; }                /* procedure controls (ProcCtl's own .pc rule loads later, so html raises specificity) (ProcCtl): Previous / Next / Run / Reset */
  html .vl-fwd { height:44px; }
  .ovs { pointer-events:bounding-box; }    /* overview sample-point tags: the whole tag is the tap target */
  .ui-btn, .act, .pv-pills button, .pv-tab, .bd-btn { min-height:40px; }
  .pv-help { width:32px; height:32px; }
  .pv-check input { width:20px; height:20px; }
}

/* ---- Module 01 Sampling: board above the panel in stacked layouts ---- */
html.vp-stack .m01 { height:auto !important; min-height:var(--page-h); overflow:visible !important; }
html.vp-stack .m01-head { height:auto !important; flex:0 0 auto !important; flex-wrap:wrap; padding:10px 14px !important; gap:8px 12px !important; }
html.vp-stack .m01-btns { flex-wrap:wrap !important; justify-content:flex-start !important; flex:1 1 100% !important; }
html.vp-stack .m01-grid { display:flex !important; flex-direction:column; overflow:visible !important; flex:0 0 auto !important; }
html.vp-stack .m01-board { flex:0 0 auto; }
html.vp-stack .m01-bh { position:relative !important; inset:auto !important; width:100%; flex:1 1 auto; }
html.vp-stack .bhs-root { position:relative; grid-template-columns:minmax(0,1fr); }
html.vp-stack .bhs-scene { display:flex; flex-direction:column; }
html.vp-stack .bhs-scene svg { position:relative; inset:auto; }
html.vp-stack .bhs-panel, html.vp-stack .m01-panel, html.vp-stack .m01-bhpanel { border-left:none !important; border-top:1px solid var(--line); overflow:visible !important; max-height:none !important; }
html.vp-stack .bhs-fig, html.vp-stack .bhs-proc, html.vp-stack .m01-fig { flex:0 0 auto !important; min-height:260px; }
html.vp-stack .bhs-steps { overflow:visible; }
@media (pointer:coarse) { .bhs-act { flex-basis:44px; height:44px; } .bhs-nb { width:36px; height:34px; } .bhs-st { padding:8px 6px; } }

/* ---- menu pages (Validation · Detailed PVT Analysis · Viscosity): cards reflow ---- */
@media (max-width:1100px) {
  .menu-page { height:auto !important; min-height:var(--page-h); overflow:visible !important; }
  .menu-grid { max-height:none !important; grid-auto-rows:minmax(190px,auto) !important; }
  .menu-grid:not(.val-grid) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .menu-page { padding:16px 14px 24px !important; gap:14px !important; }
  .menu-hero { flex-wrap:wrap; gap:12px !important; }
  .menu-hero > * { flex:1 1 100% !important; flex-wrap:wrap; }
  .menu-grid, .menu-grid:not(.val-grid) { grid-template-columns:minmax(0,1fr) !important; grid-auto-rows:auto !important; gap:12px !important; }
  .menu-grid > * { grid-column:auto !important; grid-row:auto !important; height:auto !important; min-height:0 !important; }
  .menu-grid .val-card, .menu-grid > button { padding:16px 18px 14px !important; }
  .menu-grid .vc-desc { -webkit-line-clamp:unset !important; display:block !important; overflow:visible !important; }
}

/* ---- About: inline grids reflow ---- */
@media (max-width:1100px) {
  .about { height:auto !important; min-height:var(--page-h); overflow:visible !important; }
  .about [style*="repeat(5,"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .about [style*="flex:1; min-height:0; display:grid"] { flex:0 0 auto !important; }
}
@media (max-width:760px) {
  .about { padding:14px 14px 22px !important; }
  .about [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  .about [style*="repeat(5,"], .about [style*="repeat(4,"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ---- Report: sections become a horizontal strip, the document keeps its own scroller ---- */
@media (max-width:760px) {
  .rp-bar { margin:10px 12px 8px !important; padding:12px 14px !important; }
  .rp-bar .rp-btn { min-height:40px; }
  .rp-wrap { flex-direction:column; padding:0 12px 12px !important; gap:8px !important; }
  .rp-nav { flex:0 0 auto !important; display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:6px !important; scrollbar-width:thin; }
  .rp-nav-h { display:none; }
  .rp-nav-b { width:auto !important; flex:0 0 auto; white-space:nowrap; margin:0 !important; min-height:38px; }
  .rp-pane { flex:1 1 auto; min-height:0; padding:10px !important; }
  .rp-page { padding:18px 14px !important; overflow-x:auto; }
  .rp-cover { padding:30px 14px !important; }
}

/* ---- stage navigation (Differential Liberation, Separator Test): one scrolling row on phones ---- */
@media (max-width:760px) {
  .stage-strip { flex-wrap:nowrap !important; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
  .stage-strip > button { flex:0 0 auto !important; min-width:96px; min-height:44px; scroll-snap-align:start; }
}