/* ==========================================================================
   OCF Process Design Calculator — Modern Immersive Layout
   Structure: Global Header | Left Inputs | Right 3D (70%) | Bottom Results
   --------------------------------------------------------------------------
   Section index:
     1.  Design tokens (:root)
     1b. Color themes (Blueprint / Charcoal / Slate)
     2.  Reset & global overflow protection
     3.  Utilities (sr-only, noscript, icon sprite)
     4.  App shell
     5.  Global header (topbar / brand / meta / chrome buttons)
     6.  Main workspace — inputs (left) + 3D scene (right)
     7.  Bottom: output / results panels (+ cost panel)
     8.  Glassmorphism card treatment
     9.  Shared cards, panels, collapse controls
    10.  Form controls (fields, toggles, radios)
    11.  Readout tiles
    12.  Data tables (+ cost-estimate table overrides)
    13.  Warnings banner
    14.  Save / Load modal
    15.  Notes / constants footer
    16.  Report (PDF) template chooser
    17.  Responsive (monitors → tablets → phones)
    18.  Print
    19.  Report (PDF) iframe stylesheet
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

/* ---- 1a. Self-hosted web fonts --------------------------------------------
   IBM Plex Sans / Space Grotesk are variable fonts (one woff2 covers the weight
   range); IBM Plex Mono is static per weight. All are served locally from /fonts
   so the app needs no external font CDN. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibmplexsans.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexsans.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibmplexsans.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spacegrotesk.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spacegrotesk.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spacegrotesk.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibmplexmono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibmplexmono-600.woff2) format('woff2');
}

:root{
  /* ---- palette (engineering / process-control identity) ---- */
  --bg:            #0d1620;
  --paper:         #ffffff;
  --ink:           #10202c;
  --ink-soft:      #5b6b74;
  --line:          #d7dee2;
  --line-soft:     #e6ebed;
  --blueprint:     #12293d;
  --blueprint-2:   #1b3a54;

  --ocf:           #3c6e91;   /* process air / source stage        */
  --ocf-bright:    #3d7aa3;   /* ocf hover / pressed states        */
  --ocf-soft:      #e4edf3;
  --btf:           #157a68;   /* biotrickling — biological / water  */
  --btf-soft:      #e2f1ee;
  --btf-deep:      #0d5346;
  --acf:           #a9741f;   /* activated carbon — carbon / earth  */
  --acf-soft:      #f5ecd9;
  --acf-deep:      #7a5314;
  --cost:          #6b5b95;   /* unit costs — cost / finance        */
  --cost-soft:     #ece9f5;

  --ok:            #1f8a4c;
  --warn:          #c8781a;
  --danger:        #c1443e;
  --danger-soft:   #fbe9e8;

  /* ---- dark chrome (header / panel heads / HUD) ---- */
  --chrome-text:       #eaf1f6;  /* bright body text on dark chrome */
  --chrome-text-bright:#dce9f0;  /* buttons / tags on dark chrome   */
  --chrome-text-soft:  #a9c2d1;  /* muted chrome captions/labels    */
  --chrome-eyebrow:    #8fb3c9;  /* eyebrow / short labels          */
  --chrome-muted:      #7d929c;  /* hints / secondary text          */
  --chrome-hint:       #5e7a8c;  /* scene caption hints             */
  --chrome-field:      #7d99a8;  /* meta input placeholders         */
  --chrome-line:       rgba(255,255,255,.25);
  --chrome-line-soft:  rgba(255,255,255,.2);

  /* glass buttons on dark chrome */
  --btn-glass-bg:         rgba(255,255,255,.1);
  --btn-glass-bg-hover:   rgba(255,255,255,.22);
  --btn-glass-brd:        rgba(255,255,255,.2);
  --btn-glass-brd-hover:  rgba(255,255,255,.4);
  --btn-glass-brd-strong: rgba(255,255,255,.45);

  --head-bg:      rgba(18,41,61,.5);   /* panel head background      */
  --field-bg:     rgba(251,252,252,.9);/* input / tile surface       */
  --focus-ring:   #6fa3c2;
  --field-border-hover:#b9c6cd;

  /* ---- glassmorphism tokens ---- */
  --glass-bg:      rgba(255,255,255,0.72);
  --glass-brd:     rgba(255,255,255,0.35);
  --glass-brd-dark:rgba(255,255,255,0.08);
  --glass-blur:    blur(18px) saturate(160%);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.18);

  /* ---- elevation shadows ---- */
  --shadow-topbar: 0 4px 24px rgba(0,0,0,.25);
  --shadow-card:   0 4px 16px rgba(16,32,44,.07);
  --shadow-tile:   0 2px 8px rgba(16,32,44,.08);
  --shadow-modal:  0 18px 50px rgba(0,0,0,.5);

  /* ---- focus rings ---- */
  --ring-ocf:            rgba(60,110,145,.12);
  --ring-blueprint:      rgba(64,150,255,.15);
  --ring-blueprint-strong: rgba(64,150,255,.25);

  /* ---- status surfaces ---- */
  --warn-brd:       #f0c4c1;
  --warn-text:      #7a2f2b;
  --ok-soft:        #e9f6ee;
  --ok-brd:         #bfe4cd;
  --pill-ok-bg:     #e2f5e9;
  --cost-group-bg:  #e4e9ee;
  --cost-group-fg:  #33475c;
  --cost-group-brd: #c4ced6;

  /* ---- responsive design tokens ---- */
  --radius:        10px;
  --radius-sm:     6px;
  --gutter:        clamp(10px, 3.2vw, 24px);
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;

  /* ---- themeable surfaces (were hard-coded; overridden per theme) ---- */
  --bg-gradient:
    radial-gradient(ellipse at 20% 0%, rgba(60,110,145,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(21,122,104,.25) 0%, transparent 55%),
    linear-gradient(160deg, #0d1620 0%, #132333 50%, #0d1a26 100%);
  --chrome-head-bg: linear-gradient(180deg, rgba(18,41,61,.92) 0%, rgba(27,58,84,.95) 100%);
  --chrome-field-bg: rgba(255,255,255,.07);
  --track-bg:       #ccd4d8;
  --track-brd:      #b6c0c5;
  --panel-wash:     rgba(10,20,30,.35);   /* translucent panels over the scene */
  --scene-stage-bg: rgba(0,0,0,0.2);
  --hud-bg:         rgba(10,20,30,0.75);
  --divider-grip:   rgba(120,150,170,.4);
  --blueprint-soft:       rgba(64,150,255,.08);
  --blueprint-soft-hover: rgba(64,150,255,.18);
  --flat-btn-bg:          #eef1f2;
  --flat-btn-bg-hover:    #ffffff;
  --soft-bg:              #f3f6f7;
}

/* ==========================================================================
   1b. COLOR THEMES (user-selectable via the topbar Theme dropdown)
   --------------------------------------------------------------------------
   Three halation-safe palettes — no pure-black backgrounds, no pure-white
   text (reduces astigmatism light-bleed), and muted / desaturated accents
   (reduces chromatic aberration). Selected by setting `data-theme` on
   <html>; the value is applied before first paint by an inline script in
   index.html and persisted to localStorage ("ocf.theme").
     blueprint  → midnight navy          (default — this file's :root values)
     charcoal   → warm dark charcoal, earth-tone accents
     slate      → neutral blue-grey, desaturated cool accents
   ========================================================================== */

/* ---- Warm Charcoal: warm charcoal surfaces, desaturated earth accents ---- */
:root[data-theme="charcoal"]{
  /* surfaces */
  --bg:            #211e1a;
  --paper:         #f7f4ef;
  --ink:           #2a2622;
  --ink-soft:      #6b635a;
  --line:          #d6cfc4;
  --line-soft:     #e4ded4;
  --blueprint:     #2e2a24;
  --blueprint-2:   #3a352e;
  --bg-gradient:
    radial-gradient(ellipse at 20% 0%, rgba(140,110,80,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(95,125,110,.16) 0%, transparent 55%),
    linear-gradient(160deg, #211e1a 0%, #2a251f 50%, #1d1a17 100%);

  /* process accents — desaturated earth tones */
  --ocf:           #6f8294;   --ocf-bright: #8294a5;   --ocf-soft: #dfe5e9;
  --btf:           #5f7d6e;   --btf-soft:   #dfe7e1;   --btf-deep: #3f5c4d;
  --acf:           #a07c4e;   --acf-soft:   #efe5d4;   --acf-deep: #7a5c36;
  --cost:          #87788d;   --cost-soft:  #e8e3e9;
  --ok:            #4e7d5f;
  --warn:          #a07a3f;
  --danger:        #a5584d;
  --danger-soft:   #f0e2dd;

  /* dark chrome */
  --chrome-text:        #ece7df;
  --chrome-text-bright: #f2eee7;
  --chrome-text-soft:   #c4bbae;
  --chrome-eyebrow:     #a89e90;
  --chrome-muted:       #8f877c;
  --chrome-hint:        #6f675e;
  --chrome-field:       #93897c;
  --chrome-line:        rgba(255,255,255,.22);
  --chrome-line-soft:   rgba(255,255,255,.16);
  --chrome-field-bg:    rgba(255,255,255,.06);
  --chrome-head-bg:     linear-gradient(180deg, rgba(46,42,36,.94) 0%, rgba(58,53,46,.96) 100%);

  --btn-glass-bg:         rgba(255,255,255,.08);
  --btn-glass-bg-hover:   rgba(255,255,255,.18);
  --btn-glass-brd:        rgba(255,255,255,.18);
  --btn-glass-brd-hover:  rgba(255,255,255,.36);
  --btn-glass-brd-strong: rgba(255,255,255,.42);

  --head-bg:       rgba(46,42,36,.55);
  --field-bg:      rgba(247,244,239,.92);
  --focus-ring:    #b7a184;
  --field-border-hover:#bfb6a8;

  /* glassmorphism */
  --glass-bg:      rgba(247,244,239,.8);
  --glass-brd:     rgba(255,255,255,.3);
  --glass-brd-dark:rgba(255,255,255,.06);

  /* focus rings / status surfaces */
  --ring-ocf:            rgba(111,130,148,.18);
  --ring-blueprint:      rgba(200,180,140,.15);
  --ring-blueprint-strong: rgba(200,180,140,.28);
  --warn-brd:       #e2cfae;
  --warn-text:      #6b4f2e;
  --ok-soft:        #e4ece5;
  --ok-brd:         #c2d4c5;
  --pill-ok-bg:     #e2ece3;
  --cost-group-bg:  #e9e3d7;
  --cost-group-fg:  #4a4236;
  --cost-group-brd: #cfc5b4;

  /* themeable surfaces */
  --track-bg:           #cfc7ba;
  --track-brd:          #b3aa9b;
  --panel-wash:         rgba(30,27,23,.4);
  --scene-stage-bg:     rgba(0,0,0,.18);
  --hud-bg:             rgba(30,27,23,.78);
  --divider-grip:       rgba(150,135,110,.4);
  --blueprint-soft:       rgba(160,130,80,.12);
  --blueprint-soft-hover: rgba(160,130,80,.22);
  --flat-btn-bg:          #eae5dc;
  --flat-btn-bg-hover:    #f9f7f2;
  --soft-bg:              #efe9e0;
}

/* ---- Neutral Slate: neutral blue-grey surfaces, desaturated cool accents ---- */
:root[data-theme="slate"]{
  /* surfaces */
  --bg:            #17191c;
  --paper:         #f6f7f8;
  --ink:           #23262b;
  --ink-soft:      #5c636c;
  --line:          #cfd4d9;
  --line-soft:     #e0e4e8;
  --blueprint:     #23272d;
  --blueprint-2:   #2e333b;
  --bg-gradient:
    radial-gradient(ellipse at 20% 0%, rgba(107,127,147,.2) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(95,127,115,.14) 0%, transparent 55%),
    linear-gradient(160deg, #17191c 0%, #1c2025 50%, #15171a 100%);

  /* process accents — desaturated cool tones */
  --ocf:           #6b7f93;   --ocf-bright: #7c90a4;   --ocf-soft: #e0e6ec;
  --btf:           #5f7f76;   --btf-soft:   #dfe8e5;   --btf-deep: #41594f;
  --acf:           #9b8a63;   --acf-soft:   #ece7da;   --acf-deep: #75684a;
  --cost:          #82798c;   --cost-soft:  #e7e4ea;
  --ok:            #4c7a62;
  --warn:          #99783f;
  --danger:        #a2534b;
  --danger-soft:   #f0e3e1;

  /* dark chrome */
  --chrome-text:        #e6eaee;
  --chrome-text-bright: #eef1f4;
  --chrome-text-soft:   #b6bec7;
  --chrome-eyebrow:     #9aa4ae;
  --chrome-muted:       #7e8892;
  --chrome-hint:        #5f6872;
  --chrome-field:       #8b959e;
  --chrome-line:        rgba(255,255,255,.2);
  --chrome-line-soft:   rgba(255,255,255,.14);
  --chrome-field-bg:    rgba(255,255,255,.06);
  --chrome-head-bg:     linear-gradient(180deg, rgba(35,39,45,.94) 0%, rgba(46,51,59,.96) 100%);

  --btn-glass-bg:         rgba(255,255,255,.07);
  --btn-glass-bg-hover:   rgba(255,255,255,.17);
  --btn-glass-brd:        rgba(255,255,255,.17);
  --btn-glass-brd-hover:  rgba(255,255,255,.34);
  --btn-glass-brd-strong: rgba(255,255,255,.4);

  --head-bg:       rgba(35,39,45,.55);
  --field-bg:      rgba(246,247,248,.92);
  --focus-ring:    #8fa3b8;
  --field-border-hover:#b3bac2;

  /* glassmorphism */
  --glass-bg:      rgba(246,247,248,.8);
  --glass-brd:     rgba(255,255,255,.3);
  --glass-brd-dark:rgba(255,255,255,.06);

  /* focus rings / status surfaces */
  --ring-ocf:            rgba(107,127,147,.18);
  --ring-blueprint:      rgba(150,165,180,.15);
  --ring-blueprint-strong: rgba(150,165,180,.28);
  --warn-brd:       #e0d0b2;
  --warn-text:      #6b5130;
  --ok-soft:        #e3ebe6;
  --ok-brd:         #c0d2c6;
  --pill-ok-bg:     #e1ebe4;
  --cost-group-bg:  #e3e7ea;
  --cost-group-fg:  #3f4650;
  --cost-group-brd: #c6cdd3;

  /* themeable surfaces */
  --track-bg:           #c9cfd4;
  --track-brd:          #adb4bb;
  --panel-wash:         rgba(23,25,28,.4);
  --scene-stage-bg:     rgba(0,0,0,.16);
  --hud-bg:             rgba(23,25,28,.78);
  --divider-grip:       rgba(120,135,150,.4);
  --blueprint-soft:       rgba(150,165,180,.12);
  --blueprint-soft-hover: rgba(150,165,180,.22);
  --flat-btn-bg:          #e9edf0;
  --flat-btn-bg-hover:    #f4f6f8;
  --soft-bg:              #eef1f4;
}

/* ==========================================================================
   2. RESET & GLOBAL OVERFLOW PROTECTION
   ========================================================================== */
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  overflow-x:hidden;
  overflow-wrap:anywhere;
  word-wrap:anywhere;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  height:100%;
}
@supports (overflow:clip){
  html,body{overflow-x:clip;}
}
body{
  background:var(--bg);
  background-image:var(--bg-gradient);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(13px, calc(12.5px + 0.25vw), 16px);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--ink);}
sup{font-size:.68em;}
sub{font-size:.68em;}
button{font-family:var(--font-body);cursor:pointer;}
img{max-width:100%;height:auto;}
canvas,svg,video{max-width:100%;}
input,select,textarea,button{font-size:14px;}

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
/* Visually hidden but available to screen readers (a11y label pattern). */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* Shown only when JavaScript is disabled. */
.noscript-note{
  padding:16px;text-align:center;
  color:var(--chrome-text-bright);
}
/* Off-screen container for the shared SVG <symbol> sprite. */
.svg-sprite{
  position:absolute;width:0;height:0;overflow:hidden;
}
/* Glyph instances rendered through <use> — stroke/fill inherit from the
   symbol's own presentation attributes, so the size is the only thing set here. */
.icon{
  width:14px;height:14px;
  vertical-align:middle;
  pointer-events:none;
}
/* Placeholder shown when a component fragment fails to load. */
.component-error{
  padding:12px 14px;
  border:1px solid var(--danger);
  background:var(--danger-soft);
  color:var(--danger);
  border-radius:var(--radius-sm);
  font-size:12px;
}

/* ==========================================================================
   4. APP SHELL
   ========================================================================== */
.app{
  max-width:1920px;
  width:100%;
  margin:0 auto;
  padding:0 var(--gutter) 30px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ==========================================================================
   5. GLOBAL HEADER
   ========================================================================== */
.global-header{
  position:sticky;
  top:0;
  z-index:70;
  margin-bottom:12px;
}

/* ---- Mobile: let the global header scroll away with the page ----
   The sticky header (brand title + Load/Save/Report buttons) consumes too
   much vertical space on phones, leaving almost no room to navigate. On
   narrow screens it becomes a normal in-flow block that scrolls off-screen,
   exactly like the print layout already does. */
@media (max-width:900px){
  .global-header{
    position:static;
    z-index:auto;
    margin-bottom:8px;
  }
}

/* ---- Phones: compact the topbar itself ----
   Tighter padding and buttons so even when visible at the top of the page
   the header occupies minimal vertical space on small screens. */
@media (max-width:480px){
  .topbar{padding:10px 10px 8px;}
  .topbar-actions{gap:6px;margin-top:6px;}
  /* Uniform compact height for buttons + theme selector on phones. */
  .topbar-actions .io-btn,
  .theme-select{height:34px;padding-top:0;padding-bottom:0;font-size:12px;}
  .theme-select{max-width:130px;}
  /* Meta inputs keep the 16px font (iOS zoom guard) so they need a taller box. */
  .meta-row .meta-field input{height:38px;}
}

/* ---- topbar (kept inside header) ---- */
.topbar{
  background:var(--chrome-head-bg);
  color:var(--chrome-text);
  border-radius:0 0 14px 14px;
  padding:16px var(--gutter) 14px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-topbar);
  border-bottom:1px solid var(--glass-brd-dark);
}
.topbar::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
.topbar-inner{max-width:1920px;margin:0 auto;position:relative;}
.topbar-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.brand-title{
  font-size:clamp(18px, 2vw, 28px);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--chrome-text);
}
.brand-sub{color:var(--chrome-text-soft);font-size:clamp(11.5px, 0.9vw, 13px);margin-top:4px;max-width:640px;}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto;}
.io-btn{
  background:var(--btn-glass-bg);
  color:var(--chrome-text);
  border:1px solid var(--chrome-line);
  font-weight:600;
  font-size:13px;
  padding:11px 16px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  position:relative;
}
.io-btn:hover{
  background:var(--btn-glass-bg-hover);
  transform:translateY(-1px);
  border-color:var(--btn-glass-brd-strong);
}
.io-btn.primary{background:var(--ocf);border-color:var(--ocf);color:#fff;}
.io-btn.primary:hover{background:var(--ocf-bright);border-color:var(--ocf-bright);}
/* Uniform control height across the whole topbar actions row — buttons AND
   the theme selector are exactly the same size. */
.topbar-actions .io-btn,
.theme-select{height:40px;}

/* ---- Color theme selector (topbar) ----
   Rendered in the body font at the same size as the surrounding topbar
   buttons (.io-btn), so the control matches the rest of the document. */
.theme-select{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--chrome-text);
  background:var(--btn-glass-bg);
  border:1px solid var(--chrome-line);
  border-radius:6px;
  /* Height comes from the shared .topbar-actions rule above (40px, matching
     the buttons); native selects centre their text vertically on their own. */
  padding:0 10px;
  cursor:pointer;
  max-width:150px;
}
.theme-select:hover{border-color:var(--btn-glass-brd-strong);}
.theme-select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;}
.theme-select option{color:var(--ink);background:var(--paper);}
.save-btn{padding-right:14px;}
.save-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
  background:var(--danger);
  box-shadow:none;
  border:none;
  margin-right:4px;
  transition:background .15s ease, transform .15s ease;
}
.save-btn.save-dirty .save-dot{background:var(--danger);}
.save-btn.save-clean .save-dot{background:var(--ok);}
.save-btn.save-dirty{outline:none;}
/* Compact flex-wrap so all meta fields fit on a single row on wide screens;
   Engineer / Reviewer / Approver are given half the flex-basis (meta-field-half)
   so they take half the width and more fields fit per line. */
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.meta-field{
  min-width:0;
  flex:1 1 140px;
}
.meta-field-half{
  flex:1 1 70px;
}
.meta-field label{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-eyebrow);margin-bottom:4px;
}
.meta-field input{
  width:100%;background:var(--chrome-field-bg);border:1px solid var(--chrome-line-soft);
  border-radius:4px;color:var(--chrome-text);padding:6px 8px;font-size:12px;font-family:var(--font-body);
  min-width:0;
}
.meta-field input::placeholder{color:var(--chrome-field);}
.meta-field input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;}
/* One explicit height for ALL header meta inputs — text and date boxes are
   guaranteed identical (native date pickers otherwise render taller). */
.meta-row .meta-field input{height:30px;}
.meta-row .meta-field input[type=date]{
  padding-top:0;padding-bottom:0;
  line-height:normal;
}
.meta-row .meta-field input[type=date]::-webkit-date-and-time-value{
  height:100%;text-align:left; /* WebKit: kill the extra inline-block space */
}
.meta-row .meta-field input[type=date]::-webkit-calendar-picker-indicator{
  margin:0;padding:0;height:100%; /* WebKit indicator otherwise adds height */
}

/* ---- Project metadata & document-control frame (topbar) ----
   Collapsed by default: only the meta field row is visible. Expanding reveals
   the document-control table and its append line. */
.meta-frame{
  margin-top:6px;
  border-top:1px solid var(--glass-brd-dark);
  padding-top:8px;
}
.meta-frame-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--chrome-eyebrow);
}
.meta-frame-title{font-weight:600;}
.meta-toggle{
  flex:0 0 auto;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:var(--btn-glass-bg);
  border:1px solid var(--chrome-line-soft);
  border-radius:4px;
  color:var(--chrome-eyebrow);
  cursor:pointer;
  transition:background .12s ease;
}
.meta-toggle:hover{background:var(--btn-glass-bg-hover);color:var(--chrome-text);}
.meta-toggle .icon{width:12px;height:12px;transition:transform .18s ease;}
.meta-frame.collapsed .meta-toggle .icon{transform:rotate(180deg);}
.meta-frame.collapsed .doc-control{display:none;}

/* Document-control register (visible when the frame is expanded) */
.doc-control{
  margin-top:12px;
  border:1px solid var(--chrome-line-soft);
  border-radius:6px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
}
/* Notes textarea — sits above the document-control register; grows with the
   typed content (height is driven by meta-panel.js), hidden while collapsed. */
.notes-field{
  margin-top:12px;
  border:1px solid var(--chrome-line-soft);
  border-radius:6px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
}
.notes-field label{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-eyebrow);margin-bottom:6px;
}
.notes-field textarea{
  width:100%;min-width:0;resize:none;overflow:hidden;
  background:var(--chrome-field-bg);border:1px solid var(--chrome-line-soft);
  border-radius:4px;color:var(--chrome-text);padding:8px 10px;
  font-size:12px;font-family:var(--font-body);line-height:1.5;min-height:38px;
}
.notes-field textarea::placeholder{color:var(--chrome-field);}
.notes-field textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px;}
.meta-frame.collapsed .notes-field{display:none;}
.doc-control-title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chrome-eyebrow);font-weight:600;
}
.docctrl-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:11.5px;
}
.docctrl-table th{
  text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chrome-eyebrow);padding:4px 6px;border-bottom:1px solid var(--chrome-line-soft);white-space:nowrap;
}
.docctrl-table td{
  padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--chrome-text);overflow-wrap:anywhere;
}
.docctrl-table tbody tr:last-child td{border-bottom:none;}
.doc-del-cell{width:34px;text-align:center;}
.doc-del{
  background:none;border:none;color:var(--chrome-muted);cursor:pointer;
  font-size:11px;line-height:1;padding:2px 5px;border-radius:3px;
}
.doc-del:hover{background:rgba(255,255,255,.12);color:var(--danger);}
/* Append line — one row of inputs below the table */
.doc-append-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
}
.doc-in{
  flex:1 1 90px;min-width:70px;
  background:var(--chrome-field-bg);border:1px solid var(--chrome-line-soft);
  border-radius:4px;color:var(--chrome-text);padding:5px 7px;font-size:12px;font-family:var(--font-body);
}
.doc-in-rev{flex:0 0 52px;min-width:52px;}
.doc-in-date{flex:0 0 138px;min-width:138px;}
.doc-in-purpose{flex:2 1 150px;}
.doc-in::placeholder{color:var(--chrome-field);}
.doc-in:focus{outline:2px solid var(--focus-ring);outline-offset:1px;}
.doc-add{
  flex:0 0 auto;
  padding:5px 12px;font-size:12px;font-weight:600;
  color:var(--chrome-text-bright);background:var(--btn-glass-bg);
  border:1px solid var(--chrome-line);border-radius:4px;cursor:pointer;
}
.doc-add:hover{background:var(--btn-glass-bg-hover);border-color:var(--btn-glass-brd-strong);}

/* ==========================================================================
   6. MAIN WORKSPACE — Inputs (left) + 3D Scene (right)
   ========================================================================== */
.workspace{
  position:relative;
  /* Input-column width, adjustable via the draggable divider. Falls back to 35%
     on first load; JS sets it to an explicit px while dragging. */
  --inputs-w: 35%;
  display:grid;
  grid-template-columns:minmax(300px, var(--inputs-w)) minmax(0, 1fr);
  gap:14px;
  align-items:stretch;
  flex:1 1 auto;
  min-height:0;
  margin-bottom:14px;
}

/* ---- Draggable vertical divider between the input sidebar and 3D scene ----
   Sits at the boundary (right edge of the input column) and resizes the input
   column width while dragged. The grip line is a subtle 1px rule that
   highlights on hover / while dragging. */
.workspace-divider{
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  /* Sit inside the 14px grid gap (to the right of the input column's right
     edge) so the handle never overlaps or blocks the input sidebar. */
  left:calc(var(--inputs-w, 35%) + 2px);
  cursor:col-resize;
  z-index:12;
  touch-action:none;
}
.workspace-divider::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:4.5px;                              /* centre a 1px grip line in the handle */
  width:1px;
  background:var(--divider-grip);
  transition:background .15s, box-shadow .15s;
}
.workspace-divider:hover::before,
.workspace-divider.dragging::before{
  background:var(--ocf, #4a8db8);
  box-shadow:0 0 6px rgba(74,141,184,.55);
}
/* While dragging, block text selection / cursor interference app-wide. */
body.resizing-workspace{
  user-select:none;
  -webkit-user-select:none;
  cursor:col-resize;
}
/* The divider only applies in the two-column layout — hide it whenever the
   workspace collapses to a single column. */
body.inputs-hidden .workspace-divider{display:none;}

/* ---- Left sidebar: input panels ---- */
.input-sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-wash);
  border:1px solid var(--glass-brd-dark);
}
.input-sidebar.hidden{display:none;}

.sidebar-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--chrome-text-soft);
  background:var(--head-bg);
  border-bottom:1px solid var(--glass-brd-dark);
  flex:0 0 auto;
}
/* The panel title is a heading for document outline purposes; keep the mono
   chrome styling of its container instead of the default heading font, and
   match the Results/Cost header label styling. */
.sidebar-head h2{font:inherit;color:var(--chrome-text);font-size:12px;letter-spacing:.18em;flex:1;}
.sidebar-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.sidebar-body{
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Shared thin scrollbars for panel scroll areas */
.sidebar-body, .results-body{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.sidebar-body::-webkit-scrollbar, .results-body::-webkit-scrollbar{width:6px;}
.sidebar-body::-webkit-scrollbar-thumb, .results-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}

/* ---- condensed vertical rhythm inside input panels ----
   Tighter spacing so the full input stack fits with less scrolling. Range
   hints / conditional notes are intentionally hidden inside the input sidebar
   (requested: only the input itself and flags remain). */
.input-sidebar .field .range-hint,
.input-sidebar .field .conditional-note{display:none;}
.input-sidebar .sidebar-body{gap:10px;}
/* Dropdowns match the input font style exactly (same family/weight/size) so
   every <select> in the input panels looks identical to the text boxes. */
.input-sidebar .field select{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink);
  background:var(--field-bg);
  width:100%;
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 9px;
  min-width:0;
}
.input-sidebar .field select:hover{border-color:var(--field-border-hover);}
.input-sidebar .field select:focus{
  outline:none;
  border-color:var(--ocf);
  background:var(--paper);
  box-shadow:0 0 0 3px var(--ring-ocf);
}
/* Condense the BTF panel row spacing to match the other input panels
   (OCF / ACF / Fan already share the condensed .field rhythm). */
.input-sidebar .btf-card .field-grid{gap:7px 10px;}
.input-sidebar .btf-card .field{margin-bottom:0;}
.input-sidebar .btf-card .subhead{margin:8px 0 6px;}
.input-sidebar .btf-card .field label{margin-bottom:2px;}
.input-sidebar .card .card-head{padding:8px 10px;}
.input-sidebar .card .card-body{padding:8px 10px 10px;}
.input-sidebar .subhead{margin:8px 0 6px;}
.input-sidebar .field{margin-bottom:0;}
.input-sidebar .field-grid{gap:7px 10px;grid-template-columns:repeat(3,minmax(0,1fr));}
.input-sidebar .field-group{grid-column:1 / -1;}
.input-sidebar .field-group .field-grid{gap:7px 10px;grid-template-columns:repeat(3,minmax(0,1fr));}
.input-sidebar .field label{margin-bottom:2px;}
.input-sidebar .field input[type=number],
.input-sidebar .field input[type=text],
.input-sidebar .field select{padding:6px 8px;font-size:12px;}
.input-sidebar .field .flag{margin-top:2px;}
.input-sidebar .radio-group{gap:4px;}
.input-sidebar .radio-option{padding:4px 8px;}
/* ACF heater-configuration radios (shown when a heater is required): match the
   text-input box size and sit side-by-side (each filling half the row) instead
   of being stacked and undersized. */
#heaterConfigField .radio-group{flex-direction:row;}
#heaterConfigField .radio-option{
  flex:1 1 0;
  padding:6px 8px;
  font-size:12px;
  justify-content:flex-start;
}
/* ACF shipping-container size radios (shown when ACF vessel type = Containers):
   fit the 20 ft / 40 ft options side-by-side on one line. */
#containerSizeField .radio-group{flex-direction:row;}
#containerSizeField .radio-option{
  flex:1 1 0;
  padding:6px 8px;
  font-size:12px;
  justify-content:flex-start;
}
.input-sidebar .toggle{margin-bottom:2px;}
.input-sidebar .toggle .toggle-track{width:38px;height:20px;border-radius:11px;}
.input-sidebar .toggle .toggle-track::after{width:14px;height:14px;top:2px;left:2px;}
.input-sidebar .toggle input:checked + .toggle-off + .toggle-track::after{transform:translateX(18px);}

.sidebar-restore{display:none;}
body.inputs-hidden .sidebar-restore{display:flex !important;}
body.inputs-hidden #hideInputsBtn{display:none !important;}
body.inputs-hidden .sidebar-body{display:none;}
body.inputs-hidden .sidebar-head{border-bottom:none;}
body.inputs-hidden .input-sidebar{display:flex;}
body.inputs-hidden .workspace{grid-template-columns:1fr;}

/* ---- Right: 3D scene stage (dominant) ---- */
.scene-stage{
  min-height:0;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--scene-stage-bg);
  border:1px solid var(--glass-brd-dark);
}
.scene-stage-inner{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.scene-stage-inner > .card.combined-card{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
}
.scene-stage-inner > .card.combined-card .card-head{
  background:var(--head-bg);
  border-radius:var(--radius) var(--radius) 0 0;
  border:1px solid var(--glass-brd-dark);
  border-bottom:none;
  padding:10px 14px;   /* match the collapsed bar's 10px 14px so the OCF label
                          and chevron stay put when the frame is expanded/collapsed */
  flex:0 0 auto;
}
.scene-stage-inner > .card.combined-card .card-head h3{
  /* Shared label styling for expanded & collapsed so the "OCF" title keeps the
     same font/size when the frame is toggled. Matches the Results/Cost frame
     header labels (mono, uppercase). */
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--chrome-text);
  font-weight:600;
  flex:1;
  min-width:0;
}
.scene-stage-inner > .card.combined-card .card-head .tag{color:var(--chrome-text-bright);background:var(--blueprint-2);}
.scene-stage-inner > .card.combined-card .card-body{
  flex:1 1 auto;
  min-height:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.scene-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  margin-top:0;
  background:var(--panel-wash);
}
.scene-head{
  /* Vertical padding is 0 (the toolbar buttons bring their own padding) and
     right padding is 0, so the header's height and the collapse/expand chevron's
     position are identical between the expanded and collapsed states — the OCF
     label and chevron no longer shift when the frame is toggled. The chevron
     sits at the card-head's 14px padding edge, matching the Results/Cost frame
     chevrons. */
  padding:0 0 0 12px;
  background:var(--panel-wash);
  border-bottom:1px solid var(--glass-brd-dark);
  display:flex;
  align-items:center;
  gap:10px;
}
.scene-head .s-title{color:var(--chrome-text-soft);margin-right:auto;}
.scene-head .s-hint{color:var(--chrome-hint);}
.scene-canvas-holder{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  /* Compact height for the immersive stage — leaves more vertical room for results */
  height:calc((100vh - 260px)*0.5);
  min-height:240px;
  background:transparent;
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.scene-canvas-holder canvas{display:block;width:100%;height:100%;border-radius:var(--radius-sm);}
/* ---- Perspective / orthographic camera toggle ----
   Styled to match the .cost-export-btn ("CSV"/"XLSX") buttons so the 3D-tab
   controls look and size identically to the export buttons. */
.cam-toggle{
  position:static;
  flex:0 0 auto;
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--chrome-text-bright);
  background:var(--btn-glass-bg);
  border:1px solid var(--chrome-line);
  border-radius:4px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.cam-toggle:hover{background:var(--btn-glass-bg-hover);border-color:var(--btn-glass-brd-strong);color:#fff;}
.cam-toggle:focus{outline:2px solid var(--focus-ring);outline-offset:1px;}
.scene-canvas-holder .print-canvas-img{display:none;}
.scene-caption{
  padding:8px 12px;font-size:11px;color:var(--chrome-muted);
  border-top:1px solid var(--glass-brd-dark);background:var(--panel-wash);
}

/* Combined card inner (glassmorphism wrapper for scene) */
.combined-card{position:relative;}

/* ==========================================================================
   7. BOTTOM: Output / Results panels
   ========================================================================== */
.results-section{
  margin-bottom:14px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-wash);
  border:1px solid var(--glass-brd-dark);
}
.results-section.hidden .results-body{display:none;}
.results-section.hidden .results-head{border-bottom:none;}

.results-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--chrome-text-soft);
  background:var(--head-bg);
  border-bottom:1px solid var(--glass-brd-dark);
}
.results-head h2{
  font:inherit;
  flex:1;
  color:var(--chrome-text);
  font-size:12px;
  letter-spacing:.18em;
}
.results-head .restore-btn{margin-left:auto;}

/* Results columns layout selector (dropdown in the Results title bar) */
.results-cols{
  display:flex;
  align-items:center;
  gap:6px;
}
.results-cols-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--chrome-text-soft);
}
.results-head select{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--chrome-text-soft);
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-brd-dark);
  border-radius:4px;
  padding:3px 6px;
}
.results-head select:hover{border-color:#5b7a90;}
.results-head select:focus{outline:none;border-color:var(--ocf);}

.results-body{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:16px;
  max-height:min(74vh, 840px);
  overflow-y:auto;
  grid-auto-flow:dense;
}
/* Result panels sit in a 3-column grid. As grid items they already stretch to
   the SAME height within a row, so neighbouring panels align. Make each card a
   flex column so its body fills the card — keeps stacked / side-by-side panels
   neatly matched (no ragged bottoms). */
.results-body .card{height:100%;display:flex;flex-direction:column;}
.results-body .card .card-body{flex:1 1 auto;}

/* ---- Collapsed 3D visualisation ----
   Toggled via the scene-collapse chevron (ui-interactions.js). Collapsing hides
   the 3D canvas body and leaves a framed head bar ("OCF" label + chevron) styled
   like the Results/Cost frames, and moves the Technical Results frame into the
   right column (beside the Inputs), so Inputs and Calculated Outputs sit side by
   side. */
body.scene-collapsed .scene-stage-inner{flex:0 0 auto;}
body.scene-collapsed .scene-stage-inner > .card.combined-card{flex:0 0 auto;}
body.scene-collapsed .scene-stage-inner > .card.combined-card .card-body{display:none;}
/* Collapsed head bar mirrors the Results/Cost frame style. */
body.scene-collapsed .scene-stage-inner > .card.combined-card .card-head{
  background:var(--head-bg);
  border:1px solid var(--glass-brd-dark);
  border-radius:var(--radius);
  padding:10px 14px;
}
/* Only the collapse/expand chevron remains in the toolbar strip. Its padding is
   now handled by the base .scene-head rule (same 0 0 0 12px in both states), so
   this override just strips the strip's background/border when the frame is
   collapsed. */
body.scene-collapsed .scene-head{background:transparent;border:none;}
body.scene-collapsed .scene-head .cam-toggle:not(#sceneCollapseBtn),
body.scene-collapsed .scene-head .tag{display:none;}
/* The 3D wrapper must not add an outer frame around the collapsed bar. */
body.scene-collapsed .scene-stage{background:transparent;border:none;}
body.scene-collapsed #resultsSection{
  margin-bottom:0;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.scene-collapsed #resultsSection .results-head{flex:0 0 auto;}
body.scene-collapsed #resultsSection .results-body{
  max-height:none;
  flex:1 1 auto;
  overflow-y:auto;
}
/* When the Results frame is ALSO collapsed, keep it as a slim head bar so the
   Cost panel can fill the remaining right column beneath it. */
body.scene-collapsed #resultsSection.hidden{flex:0 0 auto;}
body.scene-collapsed #costSection.hidden{flex:0 0 auto;}
/* When the 3D visualisation AND the Results frame are both collapsed (body
   class `scene-compact` set by ui-interactions.js), the right column holds only
   slim collapsed bars — align it to content so it doesn't stretch into a large
   empty "expanded" frame. */
body.scene-compact .scene-stage{align-self:start;}
/* When OCF, Results, Cost AND Inputs are all collapsed, the workspace holds only
   slim bars — stop it filling the viewport height so the collapsed INPUT frame
   doesn't stretch with empty space beneath it. */
body.workspace-compact .workspace{flex:0 0 auto;}
body.scene-collapsed #costSection{
  margin-bottom:0;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.scene-collapsed #costSection .results-head{flex:0 0 auto;}
body.scene-collapsed #costSection .cost-body{
  max-height:none;
  flex:1 1 auto;
  overflow:auto;
}

/* Independent Cost Result Panel (below Live Results) — full-width, no height
   restriction so the tall cost tabulation has room to expand. */
.cost-section .cost-body{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:16px;
  max-height:none;
  overflow:visible;
  padding:16px;
}
.cost-section .cost-body .card{
  max-width:none;
  margin:0;
  height:auto;
}
.cost-section .cost-body #costResultsCard{
  flex:1 1 auto;
  min-width:0;
  max-width:900px;   /* compact width for easy reference on wide screens */
  margin:0 auto;     /* centre the narrower table */
  /* The .cost-section already provides the single frame — drop the card's own
     border so it doesn't render as a nested second frame. */
  border:none;
}
@media (max-width:980px){
  .cost-section .cost-body{
    flex-direction:column;
  }
}
/* Inline rate inputs rendered in the cost table's Rate column (editable). */
.cost-results-card .rate-input-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
}
.cost-results-card .rate-input{
  width:64px;
  box-sizing:border-box;
  padding:3px 5px;
  font-family:var(--font-mono);
  font-size:12px;
  direction:ltr;
  text-align:left;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  color:var(--danger);
}
.cost-results-card .rate-input-wrap .rate-input{
  width:64px;
  flex:0 0 auto;
  min-width:0;
}
.cost-results-card .rate-input::placeholder{color:var(--ink-soft);opacity:1;}
.cost-results-card .rate-input:focus{
  outline:none;
  border-color:var(--blueprint-2);
  box-shadow:0 0 0 2px var(--ring-blueprint);
}
.cost-results-card .rate-unit{
  flex:0 0 auto;
  margin-left:3px;
  color:var(--ink-soft);
  font-size:12px;
}
/* ---- User-defined cost rows (editable cells + add/delete buttons) ----
   The flex layout lives on an inner .cost-group-bar (a plain div), NOT on the
   <td>: a flex <td> (especially one with colspan) makes browsers generate
   anonymous boxes that break the fixed table layout and compress the row
   leftward. */
.cost-results-card .user-group .cost-group-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cost-results-card .user-group .uc-add-btn{
  padding:2px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--blueprint-2);
  background:var(--blueprint-soft);
  border:1px solid var(--blueprint-2);
  border-radius:4px;
  cursor:pointer;
}
.cost-results-card .user-group .uc-add-btn:hover{background:var(--blueprint-soft-hover);}
.cost-results-card .uc-del-btn{
  padding:1px 6px;
  font-size:12px;
  line-height:1;
  color:var(--danger,#b3261e);
  background:transparent;
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer;
}
.cost-results-card .uc-del-btn:hover{background:rgba(179,38,30,0.12);}
.cost-results-card .uc-input{
  width:100%;
  box-sizing:border-box;
  padding:3px 5px;
  font-family:var(--font-mono);
  font-size:12px;
  text-align:right;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  color:var(--ink);
}
/* Match the numeric QTY/Rate boxes to the Instrumentation line inputs. */
.cost-results-card .uc-input[type="number"]{width:64px;}
.cost-results-card .uc-input:focus{
  outline:none;
  border-color:var(--blueprint-2);
  box-shadow:0 0 0 2px var(--ring-blueprint);
}
.cost-results-card .uc-input.default-cell{color:var(--ink-soft);}
.cost-results-card .user-cost-row td:first-child{width:auto;text-align:center;}
/* User-defined cost-line inputs align with their column (matching the regular
   cost rows): Description left, Qty/Measure right, UoM centred, Rate left. */
.cost-results-card .user-cost-row td:nth-child(2) input{text-align:left;}
.cost-results-card .user-cost-row td:nth-child(3) input{text-align:right;}
.cost-results-card .user-cost-row td:nth-child(4) input{text-align:right;}
.cost-results-card .user-cost-row td:nth-child(5) input{text-align:center;}
.cost-results-card .user-cost-row td:nth-child(6) input{text-align:left;}
.cost-section.hidden .cost-body{display:none;}
.cost-section.hidden .results-head{border-bottom:none;}
.cost-export-btn{
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--chrome-text-bright);
  background:var(--btn-glass-bg);
  border:1px solid var(--chrome-line);
  border-radius:4px;
  cursor:pointer;
  margin-right:8px;
}
.cost-export-btn:hover{background:var(--btn-glass-bg-hover);border-color:var(--btn-glass-brd-strong);color:#fff;}

/* Push the inputs-panel export button to the right end of the sidebar header. */
.sidebar-head .cost-export-btn{margin-left:auto;margin-right:0;}

/* Panel toggle buttons (show/hide inputs, results, cost panel) */
.panel-toggle{
  background:var(--btn-glass-bg);
  color:var(--chrome-text-soft);
  border:1px solid var(--btn-glass-brd);
  width:28px;height:28px;
  border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.panel-toggle:hover{background:var(--btn-glass-bg-hover);color:#fff;border-color:var(--btn-glass-brd-hover);}
.panel-toggle svg{pointer-events:none;}

/* ==========================================================================
   8. GLASSMORPHISM — translucent panel overlays over the 3D canvas
   ========================================================================== */
/* Cards rendered inside the sidebar & results get glass treatment */
.input-sidebar .card,
.results-section .card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius-sm);
  box-shadow:var(--glass-shadow);
}
.input-sidebar .card .card-head,
.results-section .card .card-head{
  background:rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(255,255,255,.35);
}

/* HUD overlay */
.scene-canvas-holder #canvasHudOverlay{
  background:var(--hud-bg) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-brd-dark);
  color:var(--chrome-text-bright) !important;
}

/* ==========================================================================
   9. SHARED CARDS / PANELS / COLLAPSE CONTROLS
   ========================================================================== */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;
  min-width:0;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  box-shadow:var(--shadow-card);
}
.card-head{
  padding:12px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;
}
.card-head h3{font-size:14px;min-width:0;}
.card-head .tag{
  font-family:var(--font-mono);font-size:10.5px;color:#fff;padding:2px 8px;
  border-radius:3px;letter-spacing:.04em;flex:0 0 auto;white-space:nowrap;
}
.btf-results-card .card-head h3{color:var(--btf);}
.btf-results-card .card-head .tag{color:#fff;background:var(--btf);}

/* ---------------- collapsible input panels ---------------- */
.collapse-btn{
  background:var(--blueprint-2);   /* dark chip — the light chevron contrasts on the light card head */
  border:1px solid rgba(0,0,0,.25);
  color:var(--chrome-text-bright);
  width:28px;height:28px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  margin-left:auto; /* keep the tag left-aligned, push the chevron to the right edge */
  flex:0 0 auto;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:background .12s ease, color .12s ease, filter .12s ease;
}
.collapse-btn:hover{background:var(--blueprint);filter:brightness(1.2);border-color:rgba(0,0,0,.35);}
.collapse-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;}
.collapse-btn svg{width:15px;height:15px;pointer-events:none;transition:transform .18s ease;}
/* Chevron matches the collapse/expand direction: points up while the panel is
   open (clicking collapses → content moves up) and points down when collapsed
   (clicking expands → content opens downward). */
.card.collapsed .collapse-btn svg{transform:rotate(180deg);}
.card.collapsed > .card-body{display:none;}
.card.collapsed .card-head{border-bottom:none;}
/* Process-stage accent stripe + tag colour per card type */
.ocf-card .card-head{border-top:3px solid var(--ocf);} .ocf-card .tag{background:var(--ocf);}
.btf-card .card-head{border-top:3px solid var(--btf);} .btf-card .tag{background:var(--btf);}
.acf-card .card-head{border-top:3px solid var(--acf);} .acf-card .tag{background:var(--acf);}
.fan-card .card-head{border-top:3px solid var(--blueprint-2);} .fan-card .tag{background:var(--blueprint-2);}
.fan-results-card .card-head{border-top:3px solid var(--blueprint-2);} .fan-results-card .tag{background:var(--blueprint-2);}
.acf-results-card .card-head{border-top:3px solid var(--acf);} .acf-results-card .tag{background:var(--acf);}
.mass-results-card .card-head{border-top:3px solid var(--ink-soft);} .mass-results-card .tag{background:var(--ink-soft);}
.power-results-card .card-head{border-top:3px solid var(--warn);} .power-results-card .tag{background:var(--warn);}
.cost-card .card-head{border-top:3px solid var(--cost);} .cost-card .tag{background:var(--cost);}
.cost-results-card .card-head{border-top:3px solid var(--cost);} .cost-results-card .tag{background:var(--cost);}
.cost-results-card .tile{border-top-color:var(--cost);}
.combined-card .card-head{border-top:3px solid var(--blueprint-2);} .combined-card .tag{background:var(--blueprint-2);}
.card-body{padding:12px 14px 16px;min-width:0;}

.subhead{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blueprint-2);margin:16px 0 10px;font-weight:600;
  padding-bottom:4px;border-bottom:1px solid var(--line-soft);
}
.subhead:first-child{margin-top:0;}

/* ==========================================================================
   10. FORM CONTROLS
   ========================================================================== */
.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}
.field-grid--tight{margin-bottom:8px;}
.field{margin-bottom:2px;min-width:0;}
.field.span2{grid-column:1 / -1;}
.field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:12px;color:var(--ink);font-weight:500;margin-bottom:3px;
  overflow-wrap:anywhere;
}
.field label .unit{
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft);font-weight:400;
  flex:0 0 auto;white-space:nowrap;
}
.field .input-wrap{position:relative;}
.field input[type=number], .field input[type=text], .field select{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink);background:var(--field-bg);
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  min-width:0;
}
.field input:hover, .field select:hover{border-color:var(--field-border-hover);}
.field input:focus, .field select:focus{
  outline:none;border-color:var(--ocf);background:var(--paper);
  box-shadow:0 0 0 3px var(--ring-ocf);
}
.field .range-hint{font-size:10px;color:var(--chrome-muted);margin-top:3px;font-family:var(--font-mono);}
.field.out-of-range input, .field.out-of-range select{border-color:var(--danger);background:var(--danger-soft);}
.field .flag{display:none;font-size:10.5px;color:var(--danger);margin-top:3px;font-weight:600;}
.field.out-of-range .flag{display:block;}
.field .conditional-note{font-size:10px;color:var(--ink-soft);margin-top:3px;font-style:italic;}

/* ---------------- toggle switch ---------------- */
label.toggle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
}
.toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}
.toggle .toggle-off,
.toggle .toggle-on{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color .15s ease;
  min-width:24px;
}
.toggle .toggle-on{
  color:var(--ink-soft);
  order:3;
}
.toggle .toggle-track{
  position:relative;
  width:44px;
  height:24px;
  background:var(--track-bg);
  border:1px solid var(--track-brd);
  border-radius:13px;
  transition:background .18s ease, border-color .18s ease;
  flex-shrink:0;
  order:2;
}
.toggle .toggle-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s ease;
}
.toggle input:checked + .toggle-off + .toggle-track{
  background:var(--ok);
  border-color:var(--ok);
}
.toggle input:checked + .toggle-off + .toggle-track::after{
  transform:translateX(20px);
}
.toggle input:checked + .toggle-off{
  color:#9aa8af;
}
.toggle input:checked + .toggle-off + .toggle-track + .toggle-on{
  color:var(--ok);
  font-weight:600;
}
.toggle input:focus-visible + .toggle-off + .toggle-track{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.toggle input:not(:checked) + .toggle-off{
  color:var(--ink);
  font-weight:600;
}
.toggle input:not(:checked) + .toggle-off + .toggle-track + .toggle-on{
  color:var(--ink-soft);
}
.toggle:active .toggle-track::after{
  width:22px;
}

/* ---------------- radio group ---------------- */
.radio-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--field-bg);
  transition:border-color .12s ease, background .12s ease;
  min-width:0;
}
.radio-option:hover{border-color:var(--ocf);}
.radio-option input[type=radio]{
  appearance:auto;
  width:auto;
  height:auto;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--ocf);
}
.radio-option .radio-label{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--ink);
  font-weight:500;
  overflow-wrap:anywhere;
}
.radio-option:has(input:checked){
  border-color:var(--ocf);
  background:var(--ocf-soft);
}
.radio-option input:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
@supports not (selector(:has(*))){
  .radio-option input[type=radio]:checked + .radio-label{
    color:var(--ocf);
    font-weight:600;
  }
}
@supports (selector(:has(*))){
  .radio-option:has(input:checked) .radio-label{
    color:var(--ocf);
    font-weight:600;
  }
}
@media print{
  .radio-group input[type=radio]{pointer-events:none;}
  .radio-option{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ==========================================================================
   11. READOUT TILES
   ========================================================================== */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-bottom:12px;
}
@media (max-width:640px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:440px){.tile-grid{grid-template-columns:1fr;}}
.tile{
  background:var(--field-bg);border:1px solid var(--line);border-top:3px solid var(--ink-soft);
  border-radius:4px;padding:8px 10px;min-width:0;
  transition:box-shadow .15s ease, transform .15s ease;
}
.tile:hover{
  box-shadow:var(--shadow-tile);
  transform:translateY(-1px);
}
.btf-results-card .tile{border-top-color:var(--btf);}
.acf-results-card .tile{border-top-color:var(--acf);}
.fan-results-card .tile{border-top-color:var(--blueprint-2);}
.mass-results-card .tile{border-top-color:var(--ink-soft);}
.tile.status-ok{border-top-color:var(--ok);}
.tile.status-warn{border-top-color:var(--warn);}
.tile.status-danger{border-top-color:var(--danger);background:var(--danger-soft);}
.tile .t-label{
  font-family:var(--font-mono);font-size:clamp(9px, 0.7vw, 9.5px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);overflow-wrap:anywhere;
}
.tile .t-value{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(15px, 1.6vw, 20px);
  color:var(--ink);margin-top:3px;
}
.tile .t-value .t-unit{font-size:11px;font-weight:500;color:var(--ink-soft);margin-left:3px;}
.tile .t-flag{font-size:10px;font-weight:600;margin-top:3px;color:var(--danger);}
.tile.status-ok .t-flag{color:var(--ok);}
.tile.status-warn .t-flag{color:var(--warn);}

/* ==========================================================================
   12. DATA TABLES
   ========================================================================== */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:2px;
  min-width:0;
  table-layout:fixed;
}
.data-table th{
  text-align:right;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:6px 8px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
/* Generic 4-column layout: Parameter | Value | Unit | Limit */
.data-table th:nth-child(1),
.data-table td:nth-child(1){
  width:45%;
  text-align:right;
  white-space:normal;
  word-break:break-word;
}
.data-table th:nth-child(2),
.data-table td:nth-child(2){
  width:22%;
}
.data-table th:nth-child(3),
.data-table td:nth-child(3){
  width:20%;
  min-width:100px;
}
.data-table th:nth-child(4),
.data-table td:nth-child(4){display:none;}
.data-table td{
  padding:6px 8px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  overflow-wrap:anywhere;
  text-align:right;
}
.data-table td.num{font-family:var(--font-mono);text-align:right;white-space:normal;}
.data-table td.unit{white-space:normal;}
.mass-results-card .data-table td.unit{white-space:nowrap;min-width:100px;width:100px;}

/* ---- Cost result table (7 columns: S/no., Description, Qty, Measure, UoM,
   Rate, Cost) ----
   Overrides the generic 4-column .data-table layout: all 7 columns visible
   with widths suited to a cost estimate. */
.cost-results-card .data-table th:nth-child(n),
.cost-results-card .data-table td:nth-child(n){display:table-cell;}
.cost-results-card .data-table th:nth-child(1),
.cost-results-card .data-table td:nth-child(1){width:6%;}
.cost-results-card .data-table th:nth-child(2),
.cost-results-card .data-table td:nth-child(2){width:24%;}
.cost-results-card .data-table th:nth-child(3),
.cost-results-card .data-table td:nth-child(3){width:8%;}
.cost-results-card .data-table th:nth-child(4),
.cost-results-card .data-table td:nth-child(4){width:12%;}
.cost-results-card .data-table th:nth-child(5),
.cost-results-card .data-table td:nth-child(5){width:8%;}
.cost-results-card .data-table th:nth-child(6),
.cost-results-card .data-table td:nth-child(6){width:14%;}
.cost-results-card .data-table th:nth-child(7),
.cost-results-card .data-table td:nth-child(7){width:18%;}
.cost-results-card .data-table th,
.cost-results-card .data-table td{white-space:normal;}
.cost-results-card .data-table td:first-child{text-align:center;}
.cost-results-card .data-table td.default-cell{color:var(--ink-soft);font-size:12px;white-space:nowrap;}
/* Column alignment: Description left, UoM centred, everything else right. */
.cost-results-card .data-table th:nth-child(2),
.cost-results-card .data-table td:nth-child(2){text-align:left;}
.cost-results-card .data-table th:nth-child(5),
.cost-results-card .data-table td:nth-child(5){text-align:center;}
.cost-results-card .data-table th:nth-child(3),
.cost-results-card .data-table td:nth-child(3),
.cost-results-card .data-table th:nth-child(4),
.cost-results-card .data-table td:nth-child(4),
.cost-results-card .data-table th:nth-child(6),
.cost-results-card .data-table td:nth-child(6),
.cost-results-card .data-table th:nth-child(7),
.cost-results-card .data-table td:nth-child(7){text-align:right;}
.cost-results-card .data-table td:nth-child(7){font-weight:600;}
/* "Rate" column header left-justified (matches the left-aligned rate inputs). */
.cost-results-card .data-table th:nth-child(6){text-align:left;}
/* Left-justify the Rate cells so the user-defined row rate boxes (plain 64px
   inputs) line up with the rest of the rate inputs in the column. */
.cost-results-card .data-table td:nth-child(6){text-align:left;}
/* User-entered numbers anywhere in the cost panel: red + left-aligned. */
.cost-results-card .data-table .cost-qty,
.cost-results-card .data-table .cost-rate{text-align:left;color:var(--danger);}
.cost-results-card .uc-input[type="number"]{text-align:left;color:var(--danger);}
.data-table tr.danger td{background:var(--danger-soft);}
.data-table tr.danger td:first-child{border-left:3px solid var(--danger);}
.data-table tr.highlight td{background:var(--ocf-soft);font-weight:600;}
.data-table tr.highlight td:first-child{border-left:3px solid var(--ocf);}
.data-table tr.highlight td.num{color:var(--ocf);}
.data-table tr.highlight td.unit{color:var(--ok);}
.data-table tr.cost-group td{
  background:var(--cost-group-bg);font-weight:700;letter-spacing:.6px;color:var(--cost-group-fg);
  padding:5px 10px;border-top:1px solid var(--cost-group-brd);border-bottom:1px solid var(--cost-group-brd);
}
.cost-results-card .data-table tr.cost-group td{text-align:left;}
.cost-results-card .data-table tr.highlight td{text-align:right;}
.cost-results-card .data-table tr.cost-total td{
  text-align:right;background:var(--cost-soft);font-weight:700;border-top:2px solid var(--cost);
}
.cost-results-card .data-table tr.cost-total td:first-child{border-left:3px solid var(--cost);}
.cost-results-card .data-table tr.cost-total td.num{color:var(--cost);font-size:15px;}

/* ---- Detailed Instrumentation / Actuator cost rows (editable QTY/Rate) ---- */
.cost-results-card .data-table tr.cost-collapse-body td{background:var(--field-bg);}
.cost-results-card .data-table .cost-qty,
.cost-results-card .data-table .cost-rate{
  width:64px;
  box-sizing:border-box;
  padding:3px 5px;
  font-family:var(--font-mono);
  font-size:12px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--paper);
  color:var(--danger);   /* user-entered QTY/Rate render red, like the rest of the table */
}
/* QTY text aligns right (matches the Qty column); Rate text aligns left
   (matches the Rate column and the rest of the table's rate boxes). */
.cost-results-card .data-table .cost-qty{text-align:right;}
.cost-results-card .data-table .cost-rate{text-align:left;}
.cost-results-card .data-table .cost-qty::placeholder,
.cost-results-card .data-table .cost-rate::placeholder{color:var(--ink-soft);opacity:1;}
.cost-results-card .data-table .cost-qty:focus,
.cost-results-card .data-table .cost-rate:focus{
  outline:none;
  border-color:var(--blueprint-2);
  box-shadow:0 0 0 2px var(--ring-blueprint);
}
/* Collapsible group headers — click toggles the detail rows. Flex layout on the
   inner .cost-group-bar so the total sits flush right (replaces the previous
   float-based alignment). Flex is applied to the bar div, never the <td>
   itself — a flex <td> with colspan breaks the fixed table layout. */
.cost-results-card .data-table tr.cost-collapsible{cursor:pointer;}
.cost-results-card .data-table tr.cost-collapsible .cost-group-bar{
  display:flex;
  align-items:center;
  gap:6px;
}
.cost-results-card .data-table tr.cost-collapsible .cost-toggle{
  background:none;border:none;color:var(--ink-soft);cursor:pointer;
  padding:0 4px 0 0;vertical-align:middle;
  display:inline-flex;align-items:center;
}
.cost-results-card .data-table tr.cost-collapsible .cost-toggle .icon{
  width:11px;height:11px;
}
.cost-results-card .data-table tr.cost-collapsible .cost-total-val{
  margin-left:auto;
  font-weight:700;
  font-family:var(--font-mono);
  color:var(--cost);
}
/* Hide the detail rows of a collapsed section (scoped per section so collapsing
   one section never hides the other). */
.cost-results-card .data-table tr.cost-collapsible.cost-inst.collapsed ~ tr.cost-inst-body{display:none;}
.cost-results-card .data-table tr.cost-collapsible.cost-act.collapsed  ~ tr.cost-act-body{display:none;}
.data-table td .pill{
  font-family:var(--font-mono);font-size:10px;padding:1px 7px;border-radius:10px;font-weight:600;
  white-space:nowrap;
}
.pill.ok{background:var(--pill-ok-bg);color:var(--ok);}
.pill.bad{background:var(--danger-soft);color:var(--danger);}

/* ==========================================================================
   13. WARNINGS BANNER
   ========================================================================== */
.warn-banner{
  background:var(--danger-soft);border:1px solid var(--warn-brd);border-left:4px solid var(--danger);
  border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:12px;display:none;
}
.warn-banner.show{display:block;}
.warn-banner-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.warn-banner-head h4{font-size:13px;color:var(--danger);display:flex;align-items:center;gap:7px;margin-bottom:0;}
.warn-banner ul{margin:0;padding-left:18px;}
.warn-banner li{font-size:12.5px;color:var(--warn-text);margin:3px 0;overflow-wrap:anywhere;}
.warn-banner.all-clear{background:var(--ok-soft);border-color:var(--ok-brd);border-left-color:var(--ok);}
.warn-banner.all-clear h4{color:var(--ok);}
/* Collapse / expand control — dark chevron with strong contrast on the
   warning-tinted banner background. */
.warn-list-wrap{margin-top:6px;}
.warn-toggle{
  flex:0 0 auto;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.18);
  border-radius:4px;
  color:var(--warn-text);
  cursor:pointer;
  transition:background .12s ease;
}
.warn-toggle:hover{background:rgba(0,0,0,.16);}
.warn-toggle .icon{width:12px;height:12px;transition:transform .18s ease;}
.warn-banner.collapsed .warn-toggle .icon{transform:rotate(180deg);}
.warn-banner.collapsed .warn-list-wrap{display:none;}

/* ==========================================================================
   14. SAVE / LOAD MODAL
   ========================================================================== */
.io-modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,12,18,.7);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.io-modal[hidden]{display:none;}
.io-modal-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  width:min(860px, 100%);max-height:min(88vh, 820px);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-modal);
  overflow:hidden;
}
.io-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);
  background:var(--chrome-head-bg);
}
.io-modal-head h3{color:var(--chrome-text);font-size:15px;display:flex;gap:8px;align-items:center;}
.io-modal-head h3 #ioModalTitle{
  font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;
  color:var(--chrome-eyebrow);text-transform:uppercase;
}
.io-close{
  background:var(--btn-glass-bg);border:1px solid var(--chrome-line);color:var(--chrome-text);
  width:30px;height:30px;border-radius:4px;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease;
}
.io-close:hover{background:var(--btn-glass-bg-hover);}
.io-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--soft-bg);padding:0 12px;
}
.io-tab{
  background:transparent;border:1px solid transparent;border-bottom:none;
  padding:10px 18px;font-weight:600;font-size:13px;color:var(--ink-soft);
  border-top-left-radius:5px;border-top-right-radius:5px;cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.io-tab:hover{color:var(--ink);}
.io-tab.active{background:var(--paper);border-color:var(--line);color:var(--ink);position:relative;top:1px;}
.io-modal-body{display:flex;flex-direction:column;padding:14px 16px 16px;gap:12px;min-height:0;flex:1;}
.io-status{min-height:18px;font-size:12px;color:var(--ok);font-weight:500;}
.io-status.err{color:var(--danger);}
/* Save-tab design summary */
.io-save-summary{
  display:flex;flex-direction:column;gap:4px;
  background:var(--soft-bg);border:1px solid var(--line);border-radius:5px;
  padding:10px 12px;font-family:var(--font-mono);font-size:12px;
}
.io-save-summary .io-save-title{
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:11px;color:var(--ink);border-bottom:1px solid var(--line);
  padding-bottom:4px;margin-bottom:2px;
}
.io-save-summary .io-save-row{display:flex;justify-content:space-between;gap:12px;}
.io-save-summary .io-save-row .k{color:var(--chrome-muted);white-space:nowrap;}
.io-save-summary .io-save-row .v{color:var(--ink);text-align:right;}
@keyframes ioFlash{
  0%, 100%{opacity:1;color:var(--danger);}
  50%{opacity:0.25;color:var(--danger);}
}
.io-status.flash{color:var(--danger);font-weight:700;}
.io-actions{display:flex;gap:8px;flex-wrap:wrap;}
.io-actions .io-btn{background:var(--flat-btn-bg);color:var(--ink);border:1px solid var(--line);}
.io-actions .io-btn:hover{background:var(--flat-btn-bg-hover);border-color:var(--ocf);}
.io-actions .io-btn.primary{background:var(--ocf);border-color:var(--ocf);color:#fff;}
.io-actions .io-btn.primary:hover{background:var(--ocf-bright);}

/* ==========================================================================
   15. NOTES / CONSTANTS FOOTER
   ========================================================================== */
.notes-card{
  margin-top:14px;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd-dark);
  border-radius:var(--radius);
}
.notes-card .card-head h3{color:var(--chrome-text-bright);}
.notes-card .const-item{background:rgba(255,255,255,.08);border:1px solid var(--glass-brd-dark);}
.notes-card .const-item .c-label{color:var(--chrome-muted);}
.notes-card .const-item .c-value{color:var(--chrome-text-bright);}
.notes-card .notes-list{color:var(--chrome-muted);}
.const-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:10px;
}
@media (max-width:900px){.const-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:360px){.const-grid{grid-template-columns:1fr;}}
.const-item{background:var(--field-bg);border:1px solid var(--line-soft);border-radius:4px;padding:8px 10px;min-width:0;}
.const-item .c-label{font-size:10.5px;color:var(--ink-soft);}
.const-item .c-value{font-family:var(--font-mono);font-weight:600;font-size:13px;margin-top:2px;}
.notes-list{margin:10px 0 0;padding-left:18px;font-size:12px;color:var(--ink-soft);}
.notes-list li{margin:4px 0;overflow-wrap:anywhere;}

footer.app-footer{margin-top:18px;font-size:11px;color:var(--chrome-hint);text-align:center;}

/* ==========================================================================
   16. REPORT (PDF) TEMPLATE CHOOSER
   ========================================================================== */
.report-modal{position:fixed;inset:0;background:rgba(10,18,26,0.55);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px;}
.report-modal[hidden]{display:none;}
.report-box{background:var(--paper);border-radius:10px;box-shadow:var(--shadow-modal);width:min(760px,100%);max-height:88vh;overflow:auto;}
.report-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--chrome-head-bg);border-radius:10px 10px 0 0;}
.report-head h3{color:var(--chrome-text);font-size:15px;margin:0;}
.report-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;line-height:1;}
.report-intro{padding:12px 18px 4px;font-size:13px;color:var(--ink-soft);}
.report-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 18px;}
.report-card{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:14px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s, box-shadow .15s;}
.report-card:hover{border-color:var(--blueprint-2);}
.report-card.selected{border-color:var(--blueprint-2);box-shadow:0 0 0 2px var(--ring-blueprint-strong);}
.report-card strong{font-size:13px;color:var(--ink);}
.report-card small{font-size:11px;color:var(--ink-soft);line-height:1.35;}
.swatch{width:100%;height:44px;border-radius:5px;border:1px solid var(--line);}
.swatch-classic{background:linear-gradient(135deg,#1c2d4a 0%,#ffffff 70%,#ccd2d9 100%);}
.swatch-modern{background:linear-gradient(135deg,#0f6bd6 0%,#ffffff 70%,#e2e7ec 100%);}
.swatch-blueprint{background:linear-gradient(135deg,#0b1f33 0%,#2f80c2 45%,#0e2438 100%);}
.report-actions{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);background:var(--paper);position:sticky;bottom:0;border-radius:0 0 10px 10px;}
.report-dense{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);cursor:pointer;}
.report-dense input{width:15px;height:15px;accent-color:var(--blueprint-2);cursor:pointer;}
.report-actions .io-btn{background:var(--blueprint-2);color:#fff;border:1px solid var(--blueprint-2);padding:9px 18px;font-size:13px;font-weight:600;border-radius:6px;cursor:pointer;}
.report-actions .io-btn:hover{background:var(--blueprint);border-color:var(--blueprint);}
@media (max-width:620px){ .report-cards{grid-template-columns:1fr;} }

/* ==========================================================================
   17. RESPONSIVE  (Monitors → Tablets → Mobile-first priority)
   ========================================================================== */

/* ---- LARGE / STANDARD MONITORS (default, > 1100px) ----
   Two-column workspace (35% inputs + 65% scene), 3-col input grid,
   and 3-col equal-height results panels. Already the base styles. */

/* ---- Medium desktop / narrow laptop (<= 1100px) ---- */
@media (max-width:1100px){
  .workspace{
    grid-template-columns:1fr;
  }
  .workspace-divider{display:none;}
  /* Inputs stack full-height above the scene on narrow screens so every
     panel is visible and expands to fit its content instead of being
     squeezed into a short scroll strip. */
  .scene-canvas-holder{
    height:34vh;
    min-height:220px;
  }
  /* Results drop to 2 equal columns on smaller screens. */
  .results-body{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ---- Tablets / large phones-portrait (<= 900px) ---- */
@media (max-width:900px){
  /* Input fields wrap to 2 per row to keep them usable on tablets. */
  .input-sidebar .field-grid,
  .input-sidebar .field-group .field-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .topbar-actions{
    width:100%;
    justify-content:flex-start;
    margin-top:10px;
  }
  .notes-list{padding-left:16px;}
}

/* ---- Small tablets / large phones (<= 600px) ---- */
@media (max-width:600px){
  /* Keep the results grid at 2 columns even on phones — the compact table
     styling below keeps each card readable side-by-side. */
  .results-body{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    padding:10px;
  }
  /* Compact the result cards / tables so two fit side-by-side on phones. */
  .results-body .card-head{padding:9px 10px;}
  .results-body .card-body{padding:10px;}
  .results-body .data-table{font-size:10px;}
  .results-body .data-table th,
  .results-body .data-table td{padding:4px 5px;}
  .scene-canvas-holder{
    height:40vh;
    min-height:200px;
  }
  .workspace{
    gap:10px;
  }
  .app{
    padding:0 12px 22px;
  }
}

/* ---- Phones (<= 480px) ---- */
@media (max-width:480px){
  /* Single column inputs for comfortable touch entry. */
  .input-sidebar .field-grid,
  .input-sidebar .field-group .field-grid{
    grid-template-columns:1fr;
  }
  .field.span2{grid-column:auto;}
  .card-body{padding:12px 12px 14px;}
  .card-head{padding:11px 12px;}
  .brand-title{font-size:18px;}
  .topbar{padding:12px 10px 10px;}
  /* Header meta fields in a tight 2-column grid on phones — keeps all eight
     project/document-control fields compact and scannable. */
  .meta-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 8px;
    margin-top:8px;
  }
  .meta-field label{margin-bottom:2px;font-size:9.5px;}
  /* Higher-specificity selectors so these beat the later @media(pointer:coarse)
     tap-target padding — on phones the fields must stay tight. */
  .meta-row .meta-field input{padding:7px 8px;min-height:0;}
  .meta-field input,
  .field input[type=number], .field input[type=text], .field select{
    font-size:16px;
  }
  .field label{font-size:12.5px;}
  .data-table{font-size:11px;}
  .data-table th,.data-table td{padding:5px 6px;}
  .data-table th{font-size:9px;}
  .results-body{max-height:none;}
  .io-tab{flex:1;text-align:center;}
}

/* ---- Touch devices — larger tap targets ---- */
@media (pointer:coarse){
  .field input[type=number], .field input[type=text], .field select,
  .meta-field input{padding:10px 12px;min-height:42px;}
  .toggle .toggle-track{width:48px;height:28px;border-radius:14px;}
  .toggle .toggle-track::after{width:22px;height:22px;top:2px;left:2px;}
  .toggle input:checked + .toggle-off + .toggle-track::after{transform:translateX(20px);}
  .toggle:active .toggle-track::after{width:26px;}
}

/* ==========================================================================
   18. PRINT
   ========================================================================== */
@media print{
  @page{size:A4;margin:14mm 12mm;}
  body{background:#fff;font-size:10.5px;}
  .app{max-width:none;padding:0;display:block;}
  .global-header{position:static !important;}
  .topbar{margin:0 0 12px;position:static !important;background:#fff !important;color:var(--ink);padding:0 0 10px;border-bottom:2px solid var(--blueprint);}
  .topbar::before{display:none;}
  .brand-title{color:var(--ink) !important;}
  .panel-toggle, .collapse-btn{display:none !important;}
  .meta-field label{color:var(--ink-soft) !important;}
  .meta-field input{background:#fff !important;border:1px solid var(--line) !important;color:var(--ink) !important;}
  .meta-toggle, .doc-add, .doc-del, .doc-append-row{display:none !important;}
  .meta-frame.collapsed .doc-control{display:block !important;}
  .print-hide{display:none !important;}
  .warn-banner{border-width:1px;}
  .warn-toggle{display:none !important;}
  .warn-banner.collapsed .warn-list-wrap{display:block !important;}
  .workspace{display:block !important;}
  .input-sidebar{max-height:none;background:transparent;border:none;}
  .sidebar-head{display:none;}
  .scene-stage{position:static !important;background:transparent;border:none;}
  .scene-stage-inner, .scene-stage-inner > .card.combined-card{height:auto !important;}
  .scene-canvas-holder{height:360px !important;min-height:360px;}
  .scene-canvas-holder canvas{display:none;}
  .print-canvas-img{display:block;width:100%;height:100%;object-fit:contain;margin:0 auto;background:#f4f6f7;}
  .scene-canvas-holder #canvasHudOverlay{display:none !important;}
  .scene-head .s-hint{display:none;}
  .results-section{background:transparent;border:none;}
  .results-head{display:none;}
  .results-body{display:block !important;max-height:none;overflow:visible;padding:0;}
  .results-section.hidden .results-body{display:block !important;}
  .card{page-break-inside:avoid;break-inside:avoid;margin-bottom:12px;border:1px solid #bcc5c9;}
  .card.collapsed > .card-body{display:block !important;margin:0;}  /* always print input fields, even if collapsed on screen */
  .field-grid{grid-template-columns:1fr 1fr;}
  .tile-grid{grid-template-columns:repeat(3,1fr);}
  a[href]::after{content:"";}
}

/* ==========================================================================
   19. REPORT (PDF) — IFRAME-ONLY STYLESHEET
   --------------------------------------------------------------------------
   Styling for the generated PDF report document, which is opened in a hidden
   iframe with its own document (body class "report-doc"). report.js extracts
   everything between the REPORT-CSS-START / REPORT-CSS-END markers below and
   injects it into the report's <style>; every rule is scoped under
   .report-doc, and the page settings use the named pages reportPage /
   viewsPage, so this section is inert in the main app even though it lives
   in styles.css.
   ========================================================================== */
/* REPORT-CSS-START */
.report-doc{page:reportPage;margin:0;padding:0;font-family:var(--r-font);color:var(--r-body);background:var(--r-page-bg);font-size:10.5pt;line-height:1.45;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
@page reportPage{size:A4 portrait;margin:14mm 13mm 20mm;@bottom-center{content:"Page " counter(page);font-family:var(--r-head-font);font-size:8pt;color:#5a6b74;}}
@page viewsPage{size:A4 landscape;margin:9mm 10mm 18mm;@bottom-center{content:"Page " counter(page);font-family:var(--r-head-font);font-size:8pt;color:#5a6b74;}}
*{box-sizing:border-box;}
.report-doc.blueprint .rdata th{background:var(--r-accent);color:#fff;}
.report-doc.blueprint .rdata tr:nth-child(even) td{background:rgba(47,128,194,0.08);}
.report-doc .r-cover{background:var(--r-head-bg);color:var(--r-head-fg);border-radius:4px;padding:14px 18px;display:flex;gap:16px;align-items:center;margin-bottom:14px;page-break-inside:avoid;}
.report-doc .r-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.report-doc .r-logo img{display:block;max-height:50px;max-width:150px;width:auto;height:auto;object-fit:contain;}
.report-doc .r-titleblock{flex:1 1 auto;min-width:0;}
.report-doc .r-kicker{font-family:var(--r-head-font);font-size:7.5pt;letter-spacing:2px;font-weight:700;opacity:0.85;}
.report-doc .r-company{font-family:var(--r-head-font);font-size:10.5pt;font-weight:700;letter-spacing:2.5px;color:var(--r-head-fg);margin-bottom:2px;}
.report-doc .r-titleblock h1{font-family:var(--r-head-font);font-size:16pt;margin:2px 0 0;line-height:1.2;}
.report-doc .r-sys{margin:4px 0 0;font-size:8.5pt;opacity:0.85;}
/* Cover page — single A4 sheet before the visualisation views */
.report-doc .cover-page{page-break-after:always;break-after:page;}
.report-doc .cover-page h2.sec{font-size:11pt;margin:10px 0 4px;}
.report-doc .r-cover-meta{font-size:8pt;opacity:.85;margin-top:6px;line-height:1.5;}
/* Table overrides scoped under .cover-page so they beat the shared .rdata
   rules regardless of source order (same-property overrides). */
.report-doc .cover-page .rcover-tbl th{width:30%;background:none;color:var(--r-sub);font-weight:700;}
.report-doc .cover-page .rcover-tbl th,
.report-doc .cover-page .rcover-tbl td{text-align:left;padding:3px 6px;}
.report-doc .cover-page .docctrl{font-size:7.5pt;}
.report-doc .cover-page .docctrl th{font-size:6.5pt;padding:3px 5px;text-align:left;}
.report-doc .cover-page .docctrl td{text-align:left;padding:3px 5px;}
.report-doc .cover-list{margin:2px 0 8px 16px;padding:0;font-size:8pt;line-height:1.5;}
.report-doc .cover-list li{margin:1px 0;}
/* Section 2 scope / design-summary two-column table */
.report-doc .scope-summary{background:var(--r-card);}
.report-doc .scope-summary td{
  width:50%;vertical-align:top;text-align:left;
  border:1px solid var(--r-line);background:var(--r-card);padding:8px 10px;
}
.report-doc .scope-summary td + td{border-left:none;}
.report-doc .scope-summary .cover-list{margin:4px 0 2px 18px;}
/* Notes block — cover page, just before Document Control & Sign-off */
.report-doc .notes-block{
  border:1px solid var(--r-line);border-left:3px solid var(--r-accent);
  border-radius:3px;background:var(--r-soft);padding:6px 10px;
  font-size:8.5pt;line-height:1.5;color:var(--r-body);
  page-break-inside:avoid;break-inside:avoid;
}
.report-doc .rpage{margin:0 0 12px;}
.report-doc h2.sec{font-family:var(--r-head-font);color:var(--r-accent);font-size:12pt;letter-spacing:0.6px;margin:14px 0 6px;padding-bottom:3px;border-bottom:2px solid var(--r-accent);page-break-after:avoid;break-after:avoid;}
.report-doc .note{font-size:8.5pt;color:var(--r-sub);margin:2px 0 8px;}
/* The views page fills the landscape page: the section takes the full content
   height (182mm < 183mm content box, so nothing spills to a third page) and
   the 2x2 grid flexes to absorb the remaining space after the heading — no
   fixed grid height, no white space at the bottom, larger view figures. */
.report-doc .views-page{page:viewsPage;height:183mm;margin:0;display:flex;flex-direction:column;}
/* Two consecutive elements using the same named page (viewsPage) don't break
   automatically, so force a page break so the second pair of views starts at
   the top of its own landscape page and fills the full height. */
.report-doc .views-page + .views-page{break-before:page;page-break-before:always;}
/* Two views per page: the 1×2 grid stretches to fill the remaining page height
   after the heading — flex-grow distributes the free space (no auto-margins),
   so the figures enlarge to use the whole page. */
.report-doc .views-grid{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:8px;
  width:100%;height:auto;margin:0;padding:0 8mm;box-sizing:border-box;
}
.report-doc .view{margin:0;border:1px solid var(--r-line);border-radius:4px;overflow:hidden;background:var(--r-card);display:flex;flex-direction:column;position:relative;padding:6mm 0;}
.report-doc .view img{width:100%;height:100%;object-fit:contain;background:#eef1f3;display:block;}
/* Caption overlays the bottom of the figure so the image itself fills the
   whole cell (images are captured at the cell aspect → no letterboxing). */
.report-doc .view figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  font-family:var(--r-mono);font-size:7pt;text-align:center;padding:2px 4px;
  color:var(--r-sub);background:rgba(255,255,255,0.82);border-top:1px solid var(--r-line);
}
.report-doc .view-hud{position:absolute;top:6px;right:6px;z-index:2;background:transparent;color:var(--r-body);font-family:var(--r-font);font-size:7pt;line-height:1.4;padding:4px 8px;max-width:58%;text-align:left;}
.report-doc .view-hud-title{font-weight:600;border-bottom:1px solid var(--r-line);margin-bottom:3px;padding-bottom:2px;}
.report-doc .dense-wrap .rpage{display:block;}
.report-doc.dense .dense-wrap .rpage{display:inline-block;width:49%;vertical-align:top;margin-right:0.5%;}
/* Input vs output value colours (blue inputs, green/italic outputs) */
.report-doc .rdata td.v.in{color:var(--r-in);}
.report-doc .rdata td.v.out{color:var(--r-out);font-style:italic;}
/* Cost phase accent */
.report-doc .phase.cost{page-break-before:always;break-before:page;}
.report-doc .phase.cost h2.sec{color:var(--r-cost);border-color:var(--r-cost);}
.report-doc .phase.cost .rdata th{background:var(--r-cost);}
.report-doc .phase.cost .total strong{color:var(--r-cost);}
.report-doc .phase.cost .total.final{background:var(--r-cost);border-color:var(--r-cost);}
.report-doc .phase.cost .total.final span{color:rgba(255,255,255,0.9);}
.report-doc .phase.cost .total.final strong{color:#fff;}
.report-doc .rdata{width:100%;border-collapse:collapse;font-size:8.5pt;}
.report-doc .rdata thead{display:table-header-group;}
.report-doc .rdata tr{page-break-inside:avoid;break-inside:avoid;}
.report-doc .rdata th{background:var(--r-accent);color:#fff;font-family:var(--r-head-font);font-weight:700;text-align:left;padding:4px 6px;}
.report-doc .rdata tr.sec-title th{background:var(--r-accent);color:#fff;font-family:var(--r-head-font);font-size:10.5pt;letter-spacing:0.6px;text-align:left;}
.report-doc .rdata td{border-bottom:1px solid var(--r-line);padding:3px 6px;vertical-align:top;}
.report-doc .rdata tr:nth-child(even) td{background:var(--r-soft);}
.report-doc .rdata td.v{font-family:var(--r-mono);text-align:center;white-space:nowrap;}
.report-doc .rdata.cost td:nth-child(n+3){font-family:var(--r-mono);text-align:right;}
.report-doc .totals{display:flex;justify-content:flex-end;gap:14px;margin-top:10px;}
.report-doc .total{border:1px solid var(--r-line);border-radius:4px;padding:6px 12px;text-align:right;background:var(--r-card);}
.report-doc .total span{display:block;font-size:8pt;color:var(--r-sub);}
.report-doc .total strong{font-family:var(--r-mono);font-size:12pt;color:var(--r-accent);}
.report-doc .total.final{border-color:var(--r-accent);background:var(--r-accent);}
.report-doc .total.final span{color:rgba(255,255,255,0.85);}
.report-doc .total.final strong{color:#fff;}
/* REPORT-CSS-END */

/* ---- Inter Ducts (beta) collapsible row (Loads Result Panel) ---- */
.mass-results-card .idb-head { cursor: pointer; }
.mass-results-card .idb-head:hover td { background: rgba(128,128,128,0.12); }
.mass-results-card .idb-group td {
  font-weight: 600;
  padding-top: 0.6em;
  border-bottom: 1px solid rgba(128,128,128,0.3);
}
.mass-results-card .idb-sub td { padding: 0.15em 0.5em; }