/* TerraSuite / GeoCalc Studio — UI skin (screen presentation only).
   Extracted verbatim from the user's R1 module pages of 2026-09-14, where it was injected as the
   last stylesheet of every page; the four blocks are identical in all twelve pages. Loaded after
   geocalc.css and geocalc.identity.css by build/gen_pages.mjs. No calculation code depends on it. */

/* ---------------------------------------------------------------- block 1 of 4 · <style id="gc-vivid-blue-ui-skin"> */
/* ============================================================================
   UI SKIN ONLY — vivid blue engineering workspace
   Injected as the final stylesheet on 2026-09-14.
   IMPORTANT: no DOM ids/classes, event wiring, calculation code or SVG generation
   logic is changed by this layer. Screen presentation only.
   ============================================================================ */
@media screen {
  :root{
    --paper:#f1f6fa;
    --sheet:#ffffff;
    --rule:#d6e3ec;
    --rule-2:#e7eef3;
    --ink:#122b3b;
    --ink-2:#4f6573;
    --ink-3:#70838f;
    --ink-3-line:#8fa0aa;

    /* brand accent — vivid engineering blue */
    --earth:#0a7fda;
    --earth-soft:#e9f5ff;
    --hl:#e7f4ff;

    /* groundwater remains a distinct, calmer blue */
    --water:#365f9b;
    --water-soft:rgba(54,95,155,.11);

    --failure:#ba3b36;
    --pass:#24724f;
    --caution:#96620e;

    --radius-sm:7px;
    --radius-md:12px;
    --ctrl-h:40px;
    --head-h:56px;
    --shadow-sm:0 7px 24px rgba(25,68,96,.08);
    --shadow-md:0 18px 46px rgba(25,68,96,.13);
  }

  html{background:#eef5fa;}
  body{
    background:
      radial-gradient(circle at 8% 0%, rgba(32,151,237,.09), transparent 25%),
      linear-gradient(180deg,#f5f9fc 0,#eef5fa 440px,#edf4f8 100%);
    color:var(--ink);
  }

  /* ---------------------------------------------------------------- header */
  .run-head{
    height:var(--head-h);
    padding:0 22px;
    gap:13px;
    background:linear-gradient(100deg,#075b9f 0%,#0878cf 58%,#0b8be9 100%);
    border-bottom:1px solid rgba(255,255,255,.18);
    box-shadow:0 5px 20px rgba(6,56,96,.18);
    color:#fff;
  }
  .run-head .rh-section,
  .run-head .rh-section button{
    color:#fff;
    font-weight:700;
    border-bottom-color:rgba(255,255,255,.35);
  }
  .run-head .rh-section button:hover{border-bottom-color:#fff;}
  .run-head .rh-sep{color:rgba(255,255,255,.55);}
  .run-head .rh-tool{
    color:rgba(255,255,255,.88);
    font-style:normal;
    font-weight:500;
  }
  .run-head .rh-right{gap:8px;}
  .rh-btn{
    height:36px;
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.30);
    border-radius:8px;
    font-weight:600;
    letter-spacing:.015em;
  }
  .rh-btn:hover,
  .rh-btn[aria-pressed=true]{
    color:#fff;
    background:rgba(255,255,255,.19);
    border-color:rgba(255,255,255,.60);
  }
  select.rh-btn option{color:#122b3b;background:#fff;}

  /* ---------------------------------------------------------- main workspace */
  .studio{
    max-width:1540px;
    grid-template-columns:minmax(0,1.28fr) minmax(430px,.82fr);
    gap:24px;
    padding:24px 24px 100px;
  }
  .studio-stage{gap:12px;top:calc(var(--head-h) + 16px);}
  .studio-title{
    position:relative;
    padding:17px 18px 16px 20px;
    background:rgba(255,255,255,.96);
    border:1px solid var(--rule);
    border-radius:14px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  .studio-title::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:4px;
    background:linear-gradient(180deg,#22a2f4,#0873ca);
  }
  .studio-title h1{
    font-size:23px;
    font-weight:750;
    color:#102c3f;
    letter-spacing:-.022em;
  }
  .studio-title .method{
    margin-top:5px;
    color:#657a87;
    font-size:11.5px;
    line-height:1.45;
    white-space:normal;
  }
  #stReport{
    flex:none;
    min-width:92px;
  }

  /* Figure remains the original interactive SVG; only its frame is restyled. */
  .studio-canvas{
    padding:10px 10px 8px;
    background:#fff;
    border:1px solid #cfdee8;
    border-radius:14px;
    box-shadow:0 12px 34px rgba(23,63,91,.10);
    overflow:hidden;
  }
  #studioFig{
    overflow:hidden;
    border-radius:9px;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  }
  .studio-canvas svg{background:#fff;}

  /* The readout was already generated after #studioFig. Present it as an engineering
     status strip instead of overlaying the drawing. */
  .studio-readout{
    position:relative;
    inset:auto;
    top:auto;left:auto;right:auto;
    margin:9px 2px 1px;
    padding:9px 10px;
    min-height:42px;
    gap:7px 8px;
    background:linear-gradient(180deg,#f8fcff,#eef7fe);
    border:1px solid #d3e7f5;
    border-radius:10px;
    pointer-events:none;
  }
  .studio-readout .ro{
    gap:6px;
    min-height:27px;
    padding:4px 8px;
    border:1px solid #dceaf4;
    border-radius:8px;
    background:#fff;
  }
  .studio-readout .ro-sym{color:#597181;font-size:12px;}
  .studio-readout .ro-val{color:#0c5f9f;font-size:15px;font-weight:750;}
  .studio-readout .ro-val .unit{color:#738996;}
  .studio-readout .badge{margin-left:auto;}

  /* Brighten only the fixed drawing palette using CSS attribute overrides.
     The SVG generator code itself remains byte-for-byte unchanged. */
  .studio-canvas svg [stroke="#1660c4"]{stroke:#0a86e5 !important;}
  .studio-canvas svg [fill="#1660c4"]{fill:#0a86e5 !important;}
  .studio-canvas svg [stroke="#e3ecf8"]{stroke:#e7f4ff !important;}
  .studio-canvas svg [fill="#e3ecf8"]{fill:#e7f4ff !important;}
  .studio-canvas svg [stroke="#2e4a7a"]{stroke:#3569a6 !important;}
  .studio-canvas svg [fill="#2e4a7a"]{fill:#3569a6 !important;}
  .studio-canvas svg [stroke="#dcdde0"]{stroke:#d6e3ec !important;}
  .studio-canvas svg [fill="#dcdde0"]{fill:#d6e3ec !important;}

  /* ------------------------------------------------------------ right panel */
  .studio-panel.tool-panel{
    border:1px solid #cfdee8;
    border-radius:14px;
    box-shadow:0 12px 34px rgba(23,63,91,.10);
    overflow:hidden;
    background:#fff;
  }
  .studio-tabs.tool-tabs{
    gap:6px;
    padding:7px;
    background:#edf6fc;
    border-bottom:1px solid #d6e5ef;
    border-radius:0;
    overflow:visible;
  }
  .studio-tabs.tool-tabs button{
    min-height:38px;
    border-radius:8px;
    color:#5b7281;
    letter-spacing:.045em;
    padding:9px 8px;
    transition:background .14s ease,color .14s ease,box-shadow .14s ease;
  }
  .studio-tabs.tool-tabs button:hover{
    color:#0b609e;
    background:#fff;
  }
  .studio-tabs.tool-tabs button[aria-selected=true]{
    color:#fff;
    background:linear-gradient(145deg,#0d8bea,#0872c6);
    box-shadow:0 5px 14px rgba(8,114,198,.24);
  }
  .studio-tabpage.tool-tabpage{padding:18px 20px 22px;}

  /* ------------------------------------------------------------- stepper */
  .stepper{
    gap:6px;
    margin:0 0 20px;
  }
  .stepper li{
    min-height:56px;
    gap:7px;
    padding:8px 8px;
    color:#718591;
    background:#fbfdff;
    border:1px solid #dde9f0;
    border-bottom:2px solid #d8e5ed;
    border-radius:9px;
  }
  .stepper li:hover{
    color:#275b7c;
    background:#f2f9fe;
    border-color:#bbd9ec;
  }
  .stepper li .st-n{
    width:24px;height:24px;
    color:#6a8290;
    background:#fff;
    border-color:#cadbe5;
  }
  .stepper li .st-t{font-size:11px;letter-spacing:.025em;}
  .stepper li.current{
    color:#075d9d;
    background:linear-gradient(180deg,#f2f9ff,#e7f4ff);
    border-color:#8bc9f0;
    border-bottom-color:#0a82df;
    box-shadow:0 3px 10px rgba(10,127,218,.08);
  }
  .stepper li.current .st-n{
    color:#fff;
    background:#0a82df;
    border-color:#0a82df;
    box-shadow:0 3px 8px rgba(10,127,218,.22);
  }
  .stepper li.done{
    color:#376a8a;
    background:#f8fcff;
    border-color:#d3e6f3;
    border-bottom-color:#71b9e8;
  }
  .stepper li.done .st-n{
    color:#0872c6;
    background:#eaf6ff;
    border-color:#98ccef;
  }

  /* ---------------------------------------------------------- stage forms */
  .st-head{
    margin:0 0 15px;
    padding:0 0 12px;
    border-bottom:1px solid #e4edf3;
  }
  .st-head h2{
    color:#15364b;
    font-size:18px;
    font-weight:750;
    letter-spacing:-.012em;
  }
  .st-blurb{color:#647a87;font-size:13px;line-height:1.55;}

  .st-fields .given-row:not(.st-row-choice){
    padding:6px 7px;
    margin:1px -7px;
    border-radius:8px;
  }
  .st-fields .given-row:not(.st-row-choice):hover{background:#f7fbfe;}
  .given-row .g-sym{color:#1a4057;}
  .given-row .g-desc{color:#4c6472;}
  .given-row .g-unit{color:#7a8e99;}
  .given-row input[type=number],
  .given-row select,
  .st-cell-in input[type=number]{
    border-color:#cadbe5;
    border-radius:7px;
    background:#fff;
    box-shadow:inset 0 1px 1px rgba(24,61,85,.035);
  }
  .given-row input[type=number]:hover,
  .given-row select:hover,
  .st-cell-in input[type=number]:hover{border-color:#97bdd7;}
  .given-row input[type=number]:focus,
  .st-cell-in input[type=number]:focus,
  .layers input:focus,
  .layers select:focus{
    border-color:#0a82df !important;
    box-shadow:0 0 0 3px rgba(21,145,229,.14) !important;
    outline:none;
  }

  .st-row-choice{
    padding:6px 7px;
    margin:1px -7px 3px;
    border-radius:8px;
  }
  .st-row-choice:hover{background:#f7fbfe;}
  .seg{
    border-color:#c8d9e4;
    border-radius:8px;
    background:#f8fbfd;
    padding:2px;
    gap:2px;
  }
  .seg button{
    min-height:30px;
    border:0;
    border-radius:6px;
    color:#536d7b;
    background:transparent;
    padding:6px 10px;
  }
  .seg button:hover{color:#075d9d;background:#edf7fe;}
  .seg button[aria-pressed=true]{
    color:#fff;
    background:linear-gradient(145deg,#0d8bea,#0872c6);
    box-shadow:0 3px 8px rgba(8,114,198,.20);
  }
  .st-info{
    color:#0878cf;
    border-color:#b8d8ec;
    background:#f5fbff;
  }
  .st-info:hover,.st-info:focus-visible{
    color:#fff;
    border-color:#0a82df;
    background:#0a82df;
  }
  .st-note{
    color:#436273;
    background:#eef8ff;
    border-left-color:#1594ec;
  }

  /* repeating layers / struts */
  .st-list{
    margin-top:10px;
    padding-top:2px;
  }
  .st-list-head{
    padding:0 2px 7px;
    border-bottom:1px solid #e7eef3;
  }
  .st-list-lab{color:#5c7483;font-weight:700;}
  .st-item{
    border-color:#d8e5ed;
    border-radius:10px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:0 2px 7px rgba(28,70,96,.035);
  }
  .st-item:hover{border-color:#b6d5e8;}
  .st-item:focus-within{
    border-color:#68b8eb;
    box-shadow:0 0 0 3px rgba(21,145,229,.11);
  }
  .st-item-head{padding-bottom:5px;border-bottom:1px solid #edf2f5;}
  .st-item-lab{color:#264b63;}
  .st-item-sum{color:#69808e;}
  .st-add{
    min-height:36px;
    color:#0874c7;
    background:#f5fbff;
    border-color:#9bc9e7;
    border-radius:8px;
  }
  .st-add:hover{background:#eaf6ff;border-color:#5aafe4;}

  /* -------------------------------------------------------------- buttons */
  .btn{
    min-height:38px;
    border-radius:8px;
    border-color:#c8d8e3;
    color:#304f62;
    background:#fff;
    font-weight:650;
  }
  .btn:hover{
    color:#075d9d;
    border-color:#8cbdda;
    background:#f8fcff;
    box-shadow:0 3px 9px rgba(28,79,111,.07);
  }
  .btn-primary{
    color:#fff;
    border-color:#0874c8;
    background:linear-gradient(145deg,#0d8bea,#0872c6);
    box-shadow:0 6px 15px rgba(8,114,198,.22);
  }
  .btn-primary:hover{
    color:#fff;
    border-color:#0562ab;
    background:linear-gradient(145deg,#087bd3,#065fa7);
    box-shadow:0 7px 18px rgba(8,99,171,.26);
  }
  .stage-nav{
    margin-top:18px;
    padding-top:15px;
    border-top-color:#e1ebf1;
  }
  .stage-nav .btn-quiet{color:#738793;}

  /* ------------------------------------------------------------ results */
  .studio-tabpage[data-tabpage="result"] .sec-h{
    color:#416275;
    font-weight:750;
    letter-spacing:.085em;
    margin-top:24px;
  }
  .st-card{
    position:relative;
    padding:12px 14px 13px;
    border-color:#d8e5ed;
    border-radius:10px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:0 4px 13px rgba(23,63,91,.055);
  }
  .st-card::before{
    content:"";
    position:absolute;
    top:0;left:0;bottom:0;
    width:3px;
    border-radius:10px 0 0 10px;
    background:#8cc9ee;
  }
  .st-card-h{
    color:#4c6879;
    font-weight:750;
  }
  .st-card-t td{padding:5px 7px;}
  .st-card-t tr:last-child td{border-bottom:0;}
  .st-card-note{
    margin:8px -2px -1px;
    padding:8px 10px;
    background:#f3f9fd;
    border-radius:7px;
    color:#677e8c;
  }
  .badge{border-radius:999px;padding:5px 8px;font-weight:750;}
  .badge-pass{background:#edf8f2;}
  .badge-fail{background:#fff0ef;}
  .badge-check{background:#fff7e8;}

  .answer{
    padding:8px 12px;
    border:1px solid #d7e8f3;
    border-radius:10px;
    background:#f8fcff;
  }
  .answer .a-row{
    padding:7px 3px;
    border-bottom:1px solid #e5eef4;
  }
  .answer .a-row:last-child{border-bottom:0;}
  .answer .a-row.primary{
    margin:0 -4px 3px;
    padding:10px 8px;
    background:#eaf6ff;
    border-left:3px solid #0a82df;
    border-radius:7px;
  }
  .answer .a-row.primary .a-val{color:#075f9f;font-size:27px;}
  .verify{
    border-color:#d7e5ed;
    background:#f8fbfd;
    box-shadow:none;
  }

  /* ------------------------------------------------------- calculations */
  .calc-mode-toggle{
    border-color:#c9dae5;
    border-radius:8px;
    background:#f6fafc;
    padding:2px;
    gap:2px;
  }
  .calc-mode-toggle button{
    border:0;
    border-radius:6px;
    padding:7px 11px;
    color:#627987;
    background:transparent;
  }
  .calc-mode-toggle button[aria-selected=true]{
    color:#fff;
    background:#0a7fda;
    box-shadow:0 3px 8px rgba(10,127,218,.18);
  }
  .studio-tabpage[data-tabpage="calc"] .blk{
    padding:13px 12px 14px;
    margin-bottom:10px;
    border:1px solid #e0eaf0;
    border-radius:9px;
    background:#fcfeff;
  }
  .studio-tabpage[data-tabpage="calc"] .blk:last-child{
    border:1px solid #e0eaf0;
    margin-bottom:0;
    padding-bottom:14px;
  }
  .tool-panel .step-h{color:#1a4057;font-weight:750;}
  .tool-panel .eq-val{
    border-top-color:#dbe7ee;
    color:#31566d;
  }
  .tool-panel .eq-val b{color:#075f9f;}
  .tool-panel .gf-block{
    border-color:#d8e5ed;
    background:#f9fcfe;
    box-shadow:none;
  }
  .tool-panel .gf-answer{
    background:#eaf6ff;
    border-left-color:#0a82df;
  }

  /* -------------------------------------------------------------- theory */
  .studio-tabpage[data-tabpage="theory"]{color:#4f6674;}
  .tool-tabpage[data-tabpage="theory"] .th-h2{
    color:#17394f;
    border-bottom-color:#dce7ee;
  }
  .tool-tabpage[data-tabpage="theory"] .th-h2 .th-num{color:#0877ca;}
  .th-eq{
    background:#eef8ff;
    border-left-color:#0a82df;
  }
  .th-ex{border-color:#d8e5ed;background:#fbfdff;}
  .tool-tabpage[data-tabpage="theory"] .th-cta{
    background:#edf8ff;
    border-color:#8bc5e9;
  }

  /* --------------------------------------------------------- warnings/info */
  .st-alerts .warn{
    padding:9px 10px;
    border-radius:8px;
    background:#fbfcfd;
  }
  .st-alerts .warn-caution{background:#fff8ec;}
  .st-alerts .warn-stop{background:#fff2f1;}
  .st-info-back{background:rgba(7,38,60,.48);backdrop-filter:blur(2px);}
  .st-info-win{
    border:1px solid #cfe0ea;
    border-radius:12px;
    box-shadow:0 22px 60px rgba(7,38,60,.24);
  }

  /* ---------------------------------------------------------- ground drawer */
  .drawer-back{background:rgba(7,38,60,.38);backdrop-filter:blur(2px);}
  .drawer{
    border-left-color:#c7dce9;
    box-shadow:-16px 0 48px rgba(7,38,60,.18);
  }
  .drawer header{
    background:#f1f8fd;
    border-bottom-color:#d7e5ed;
  }
  .drawer header h2{color:#17394f;}
  .layers th{background:#f4f9fc;}
  .layers td{border-bottom-color:#e7eef3;}

  /* ---------------------------------------------------------- responsiveness */
  @media (max-width:1180px){
    .studio{grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:18px;padding-left:16px;padding-right:16px;}
    .stepper li{padding-left:6px;padding-right:6px;}
    .stepper li .st-t{font-size:10.5px;}
  }
  @media (max-width:980px){
    .studio{grid-template-columns:1fr;padding:16px 12px 90px;}
    .studio-stage{position:static;}
    .studio-readout{margin-top:7px;}
  }
  @media (max-width:560px){
    :root{--head-h:52px;}
    .run-head{padding:0 10px;gap:7px;}
    .rh-btn{padding:0 8px;}
    .studio-title{padding:14px 13px 13px 16px;}
    .studio-title h1{font-size:20px;}
    .studio-tabs.tool-tabs{gap:3px;padding:5px;}
    .studio-tabs.tool-tabs button{font-size:10px;letter-spacing:.02em;padding:8px 4px;}
    .stepper{gap:4px;}
    .stepper li{min-height:52px;border-radius:7px;}
    .studio-tabpage.tool-tabpage{padding:15px 13px 18px;}
  }
}

/* ---------------------------------------------------------------- block 2 of 4 · <style id="gc-layer-card-polish"> */
/* UI-only polish for repeating soil layer cards. No DOM/event/calculation changes. */
@media screen {
  .st-list[data-list="layers"] .st-item{
    overflow:hidden;
    border:1px solid #cfe0eb;
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 14px rgba(24,72,105,.055);
  }
  .st-list[data-list="layers"] .st-item:hover{
    border-color:#a9cee6;
    box-shadow:0 7px 20px rgba(24,72,105,.075);
  }
  .st-list[data-list="layers"] .st-item:focus-within{
    border-color:#58abe4;
    box-shadow:0 0 0 3px rgba(20,135,232,.09), 0 8px 22px rgba(24,72,105,.075);
  }

  .st-list[data-list="layers"] .st-item-head{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #e3edf4;
    background:linear-gradient(180deg,#fbfdff 0%,#f6faff 100%);
  }
  .st-list[data-list="layers"] .st-item-lab{
    color:#143f5d;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .st-list[data-list="layers"] .st-item-sum{
    justify-self:end;
    min-width:0;
    padding:5px 9px;
    border:1px solid #d5e8f5;
    border-radius:999px;
    background:#eef7ff;
    color:#496d86;
    font-family:var(--font-mono);
    font-size:11.5px;
    line-height:1.2;
    white-space:nowrap;
  }
  .st-list[data-list="layers"] .st-del{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:8px;
    color:#9aabb6;
    background:transparent;
    font-size:18px;
    line-height:1;
    transition:.14s ease;
  }
  .st-list[data-list="layers"] .st-del:hover:not(:disabled){
    color:#b83d3d;
    background:#fff2f2;
    border-color:#f0caca;
  }

  /* Two clean columns: Name | H_i, then gamma | phi (gamma_sat occupies the next cell when visible). */
  .st-list[data-list="layers"] .st-item-body{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:15px 18px;
    align-items:start;
    padding:16px 16px 17px;
  }
  .st-list[data-list="layers"] .st-cell{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    margin:0;
  }
  .st-list[data-list="layers"] .st-cell-lab{
    min-height:18px;
    display:flex;
    align-items:baseline;
    gap:5px;
    color:#20465f;
    font-size:13px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.005em;
  }
  .st-list[data-list="layers"] .st-cell-lab small{
    color:#667d8b;
    font-size:11.5px;
    line-height:1.25;
    font-weight:500;
    letter-spacing:0;
  }

  /* Input + unit becomes one visual control while the original input remains untouched. */
  .st-list[data-list="layers"] .st-cell-in{
    width:100%;
    min-width:0;
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    overflow:hidden;
    border:1px solid #c7dce9;
    border-radius:10px;
    background:#fff;
    box-shadow:inset 0 1px 1px rgba(20,60,85,.025);
    transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
  }
  .st-list[data-list="layers"] .st-cell-in:hover{
    border-color:#94bee0;
  }
  .st-list[data-list="layers"] .st-cell-in:focus-within{
    border-color:#1487e8;
    box-shadow:0 0 0 3px rgba(20,135,232,.12);
    background:#fff;
  }
  .st-list[data-list="layers"] .st-cell-in input[type="number"],
  .st-list[data-list="layers"] .st-cell-in input[type="text"]{
    width:100%;
    min-width:0;
    height:40px;
    margin:0;
    padding:0 11px;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#102d41;
    font-size:14.5px;
    line-height:40px;
  }
  .st-list[data-list="layers"] .st-cell-in input[type="number"]{
    text-align:right;
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
  }
  .st-list[data-list="layers"] .st-cell-text .st-cell-in input[type="text"]{
    text-align:left;
    font-family:var(--font-text);
  }
  .st-list[data-list="layers"] .st-unit{
    min-width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border-left:1px solid #e0ecf3;
    background:#f5faff;
    color:#617b8c;
    font-size:11.5px;
    font-weight:650;
    white-space:nowrap;
  }

  /* The omitted bottom-layer thickness is information, not an editable field. */
  .st-list[data-list="layers"] .st-cell-static .st-static{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 11px;
    border:1px dashed #c8dce8;
    border-radius:10px;
    background:linear-gradient(180deg,#f8fbfd,#f3f8fb);
    color:#607987;
    font-size:12.5px;
    font-style:normal;
  }

  /* Better density on narrow right panels / tablets. */
  @media (max-width:1040px){
    .st-list[data-list="layers"] .st-item-body{
      grid-template-columns:1fr;
      gap:12px;
    }
    .st-list[data-list="layers"] .st-item-sum{
      max-width:180px;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }
}

/* ---------------------------------------------------------------- block 3 of 4 · <style id="gc-compact-overlay-polish"> */
/* Further UI-only refinements.
   - Compact repeating layer cards
   - Overlay compact quick readout on the figure
   - Use a single typeface in Calculations
   - Small visual cleanup of calc/results blocks
   No JS, no DOM or data-path changes, no calculation changes. */
@media screen {
  /* ------------------------------------------------- compact layer cards */
  .st-list[data-list="layers"] .st-item{border-radius:12px;}
  .st-list[data-list="layers"] .st-item-head{
    gap:10px;
    padding:9px 12px;
  }
  .st-list[data-list="layers"] .st-item-lab{
    font-size:14px;
  }
  .st-list[data-list="layers"] .st-item-sum{
    padding:4px 8px;
    font-size:11px;
  }
  .st-list[data-list="layers"] .st-del{
    width:26px;height:26px;border-radius:7px;font-size:17px;
  }
  .st-list[data-list="layers"] .st-item-body{
    gap:12px 14px;
    padding:12px 12px 13px;
  }
  .st-list[data-list="layers"] .st-cell{gap:5px;}
  .st-list[data-list="layers"] .st-cell-lab{
    min-height:16px;
    font-size:12.5px;
  }
  .st-list[data-list="layers"] .st-cell-lab small{font-size:11px;}
  .st-list[data-list="layers"] .st-cell-in{
    min-height:38px;
    border-radius:9px;
  }
  .st-list[data-list="layers"] .st-cell-in input[type="number"],
  .st-list[data-list="layers"] .st-cell-in input[type="text"]{
    height:36px;
    padding:0 10px;
    font-size:14px;
    line-height:36px;
  }
  .st-list[data-list="layers"] .st-unit{
    min-width:43px;
    padding:0 8px;
    font-size:12px;
  }
  .st-list[data-list="layers"] .st-cell-note,
  .st-list[data-list="layers"] .st-cell-readonly{
    min-height:38px;
    padding:9px 10px;
    border-radius:9px;
    font-size:13px;
  }

  /* -------------------------------------- compact readout overlay on figure */
  .studio-stage{overflow:visible;}
  .studio-canvas{
    position:relative;
    padding:10px;
  }
  .studio-readout{
    position:absolute;
    top:12px; left:12px; right:12px;
    margin:0;
    min-height:0;
    padding:0;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
    gap:6px;
    flex-wrap:wrap;
    background:transparent;
    border:0;
    box-shadow:none;
    z-index:6;
    pointer-events:none;
  }
  .studio-readout .ro{
    min-height:0;
    padding:4px 8px 5px;
    gap:5px;
    border:1px solid rgba(210,228,240,.96);
    border-radius:10px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(8px);
    box-shadow:0 6px 16px rgba(16,56,84,.10);
  }
  .studio-readout .ro-sym{
    font-size:11px;
    line-height:1;
    color:#5d7584;
  }
  .studio-readout .ro-val{
    font-size:12.5px;
    line-height:1.05;
    color:#0a6dbd;
    font-weight:780;
  }
  .studio-readout .ro-val .unit{
    font-size:10.5px;
    color:#708795;
  }
  .studio-readout .badge{
    margin-left:0;
    padding:4px 7px;
    font-size:10.5px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(210,228,240,.96);
    box-shadow:0 6px 16px rgba(16,56,84,.08);
  }

  /* Give the figure a little more headroom so the overlay breathes. */
  #studioFig{padding-top:4px;}

  /* ------------------------------------------------ single calc typeface */
  .studio-tabpage[data-tabpage="calc"],
  .studio-tabpage[data-tabpage="calc"] *{
    font-family:var(--font-text) !important;
    font-style:normal !important;
  }
  .studio-tabpage[data-tabpage="calc"] .sym,
  .studio-tabpage[data-tabpage="calc"] .mono,
  .studio-tabpage[data-tabpage="calc"] .num,
  .studio-tabpage[data-tabpage="calc"] .val,
  .studio-tabpage[data-tabpage="calc"] td.num,
  .studio-tabpage[data-tabpage="calc"] th.num{
    font-variant-numeric:tabular-nums;
  }

  /* -------------------------------------------- calculations visual cleanup */
  .studio-tabpage[data-tabpage="calc"] .calc-mode-toggle{
    margin-bottom:12px;
  }
  .studio-tabpage[data-tabpage="calc"] .blk{
    padding:11px 11px 12px;
    border-radius:10px;
    background:linear-gradient(180deg,#ffffff,#fcfeff);
    box-shadow:0 3px 10px rgba(24,72,105,.035);
  }
  .studio-tabpage[data-tabpage="calc"] .step-h{
    margin-bottom:7px;
  }
  .studio-tabpage[data-tabpage="calc"] table{
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    overflow:hidden;
    border:1px solid #dde8ef;
    border-radius:10px;
    background:#fff;
  }
  .studio-tabpage[data-tabpage="calc"] th,
  .studio-tabpage[data-tabpage="calc"] td{
    padding:7px 9px;
    vertical-align:top;
    border-bottom:1px solid #eaf1f5;
  }
  .studio-tabpage[data-tabpage="calc"] tr:last-child td{border-bottom:0;}
  .studio-tabpage[data-tabpage="calc"] th{
    background:#f5f9fc;
    color:#426274;
    font-weight:700;
  }
  .studio-tabpage[data-tabpage="calc"] .calc-fig{
    margin:10px 0;
    padding:10px;
    border:1px solid #dce8f0;
    border-radius:10px;
    background:#fbfdff;
  }
  .studio-tabpage[data-tabpage="calc"] .calc-fig figcaption{
    margin-top:8px;
    color:#627987;
    font-size:12px;
  }
  .studio-tabpage[data-tabpage="calc"] .eq-val,
  .studio-tabpage[data-tabpage="calc"] .gf-block,
  .studio-tabpage[data-tabpage="calc"] .gf-answer{
    border-radius:9px;
  }

  /* --------------------------------------------------- light global tidy-up */
  #stCards{
    gap:10px;
  }
  .answer .a-row{
    gap:10px;
  }
  .verify,
  #remarks .warn,
  .st-card,
  .answer{
    box-shadow:0 3px 10px rgba(24,72,105,.035);
  }

  @media (max-width:980px){
    .studio-readout{
      position:absolute;
      top:10px; left:10px; right:10px;
      gap:5px;
    }
    .studio-readout .ro{padding:4px 7px;}
    .studio-readout .ro-sym{font-size:10.5px;}
    .studio-readout .ro-val{font-size:12px;}
  }

  @media (max-width:640px){
    .st-list[data-list="layers"] .st-item-body{
      grid-template-columns:1fr;
    }
    .studio-readout{
      position:static;
      margin-top:8px;
      padding-top:0;
    }
  }
}

/* ---------------------------------------------------------------- block 4 of 4 · <style id="gc-final-visual-polish"> */
/* Final visual polish layer — CSS only. No DOM/JS/calculation changes. */
@media screen {
  :root{
    --ui-blue:#0b84e6;
    --ui-blue-dark:#075f9f;
    --ui-blue-soft:#eaf6ff;
    --ui-blue-line:#cfe4f3;
    --ui-panel:#ffffff;
    --ui-canvas:#f3f8fc;
    --ui-ink:#16384d;
    --ui-muted:#647c8a;
  }

  /* ----------------------------------------------------------- page / chrome */
  body{
    background:
      radial-gradient(circle at 7% 0%,rgba(33,151,235,.065),transparent 24%),
      linear-gradient(180deg,#f7fbfe 0%,#f1f6fa 100%);
  }
  .run-head{
    box-shadow:0 1px 0 rgba(31,83,116,.05),0 6px 18px rgba(31,83,116,.035);
  }
  .rh-btn{
    border-radius:8px;
    transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease;
  }
  .rh-btn:hover{
    color:#075f9f;
    border-color:#95c8e9;
    background:#f5fbff;
  }

  /* ------------------------------------------------------------- main shell */
  .studio{
    align-items:start;
  }
  .studio-stage,
  .studio-panel{
    border-radius:15px;
  }
  .studio-panel{
    border-color:#ccdee9;
    box-shadow:0 14px 34px rgba(19,63,92,.075);
    overflow:hidden;
  }
  .studio-title{
    border-color:#ccdee9;
    box-shadow:0 10px 28px rgba(19,63,92,.065);
  }
  .studio-title h1{
    color:#123b57;
  }
  .studio-title .method{
    max-width:76ch;
  }

  /* --------------------------------------------------------------- top tabs */
  .studio-tabs.tool-tabs{
    position:relative;
    gap:4px;
    padding:6px;
    background:#edf6fc;
  }
  .studio-tabs.tool-tabs button{
    position:relative;
    min-height:36px;
    padding:8px 11px;
    border:1px solid transparent;
    font-size:11.5px;
    font-weight:750;
    letter-spacing:.025em;
  }
  .studio-tabs.tool-tabs button:hover{
    border-color:#d6e8f4;
    box-shadow:0 2px 7px rgba(20,72,104,.04);
  }
  .studio-tabs.tool-tabs button[aria-selected=true]{
    background:linear-gradient(145deg,#1593ef,#0875ca);
    border-color:#0875ca;
    box-shadow:0 5px 13px rgba(8,117,202,.22);
  }
  .studio-tabpage.tool-tabpage{
    background:#fff;
  }

  /* ------------------------------------------------------------- stepper */
  .stepper{
    gap:5px;
    margin-bottom:16px;
  }
  .stepper li{
    min-height:51px;
    padding:7px 7px;
    border-radius:8px;
  }
  .stepper li .st-n{
    width:22px;height:22px;
    font-size:11px;
  }
  .stepper li .st-t{
    font-size:10.5px;
    font-weight:700;
  }
  .stepper li.current{
    background:linear-gradient(180deg,#f5fbff,#eaf6ff);
  }

  /* --------------------------------------------------------- generic forms */
  .given-row input[type="number"],
  .given-row input[type="text"],
  .st-cell input[type="number"],
  .st-cell input[type="text"],
  .st-cell select,
  .layers input,
  .layers select{
    border-radius:8px;
  }
  .given-row input[type="number"]:focus,
  .given-row input[type="text"]:focus,
  .st-cell input:focus,
  .st-cell select:focus,
  .layers input:focus,
  .layers select:focus{
    border-color:#1389e8 !important;
    box-shadow:0 0 0 3px rgba(19,137,232,.10) !important;
  }
  .seg{
    border-radius:8px;
    border-color:#cbdde8;
    background:#f8fbfd;
  }
  .seg button{
    min-height:32px;
    padding:6px 10px;
    font-weight:650;
  }
  .seg button[aria-pressed=true]{
    background:linear-gradient(145deg,#138be9,#0876ca);
    color:#fff;
  }
  .st-blurb{
    max-width:72ch;
  }
  .st-add{
    box-shadow:0 2px 8px rgba(17,105,166,.04);
  }

  /* ----------------------------------------------------------- figure card */
  .studio-canvas{
    border-color:#c8dce9;
    box-shadow:0 14px 36px rgba(16,57,86,.10);
  }
  #studioFig{
    border:1px solid #edf3f7;
    border-radius:10px;
  }
  .studio-readout .ro{
    transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
  }
  .studio-readout .ro:hover{
    transform:translateY(-1px);
    border-color:#b7d8ec;
    box-shadow:0 8px 20px rgba(16,56,84,.13);
  }

  /* -------------------------------------------------------------- RESULTS */
  #stCards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:start;
  }
  .st-card{
    min-width:0;
    padding:0;
    overflow:hidden;
    border:1px solid #d4e4ee;
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 14px rgba(18,62,90,.055);
  }
  .st-card::before{display:none;}
  .st-card-h{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 11px;
    border-bottom:1px solid #e5eef4;
    background:linear-gradient(180deg,#f9fcff,#f2f8fc);
    color:#254e68;
    font-size:12.5px;
    font-weight:800;
  }
  .st-card-t{
    margin:0 !important;
  }
  .st-card-t td{
    padding:6px 10px;
    border-bottom:1px solid #edf3f6;
  }
  .st-card-t td.lab{
    color:#637986;
    font-family:var(--font-text);
    font-size:12px;
  }
  .st-card-t td.num{
    color:#173f58;
    font-size:12.5px;
    font-weight:700;
  }
  .st-card-note{
    margin:0;
    padding:8px 10px;
    border-top:1px solid #e6f0f6;
    border-radius:0;
    background:#f5faff;
    color:#657e8d;
    font-size:11.5px;
    line-height:1.45;
  }
  .studio-tabpage[data-tabpage="result"] .sec-h{
    margin:20px 0 8px;
    padding-bottom:6px;
    border-bottom:1px solid #e4edf3;
    color:#345c74;
    font-size:11px;
  }
  .answer{
    padding:6px 10px;
    border-color:#d5e8f5;
    background:#fbfdff;
  }
  .answer .a-row{
    min-height:40px;
    padding:7px 5px;
  }
  .answer .a-row.primary{
    padding:9px 10px;
    background:linear-gradient(90deg,#e7f5ff,#f5fbff);
    border-left:3px solid #0b86e3;
  }
  .answer .a-sym{
    color:#587181;
    font-size:13px;
  }
  .answer .a-val{
    color:#173d56;
    font-weight:720;
  }
  .answer .a-row.primary .a-val{
    color:#0866aa;
    font-size:24px;
  }
  .verify{
    padding:10px 12px;
    border-radius:9px;
    background:#f7fbfe;
  }

  /* -------------------------------------------------------- CALCULATIONS */
  .studio-tabpage[data-tabpage="calc"]{
    color:#3f5969;
  }
  .studio-tabpage[data-tabpage="calc"] .calc-mode-toggle{
    display:inline-flex;
    margin:0 0 13px;
    padding:3px;
    border:1px solid #d2e1ea;
    background:#f4f8fb;
  }
  .studio-tabpage[data-tabpage="calc"] .calc-mode-toggle button{
    min-width:82px;
    font-size:11.5px;
    font-weight:700;
  }
  .studio-tabpage[data-tabpage="calc"] .blk{
    position:relative;
    padding:12px 13px 13px;
    border-color:#dce8ef;
    background:#fff;
  }
  .studio-tabpage[data-tabpage="calc"] .blk::before{
    content:"";
    position:absolute;
    left:0;top:9px;bottom:9px;
    width:2px;
    border-radius:2px;
    background:#9fd0ef;
  }
  .studio-tabpage[data-tabpage="calc"] .step-h{
    color:#1d4d69;
    font-size:15px;
    font-weight:800;
  }
  .studio-tabpage[data-tabpage="calc"] p,
  .studio-tabpage[data-tabpage="calc"] .eq,
  .studio-tabpage[data-tabpage="calc"] .eq-sub,
  .studio-tabpage[data-tabpage="calc"] .eq-val,
  .studio-tabpage[data-tabpage="calc"] td,
  .studio-tabpage[data-tabpage="calc"] th{
    font-family:var(--font-text) !important;
  }
  .studio-tabpage[data-tabpage="calc"] p{
    line-height:1.62;
  }
  .studio-tabpage[data-tabpage="calc"] .eq{
    margin:6px 0 2px;
    padding:7px 9px;
    border-left:3px solid #8fc9ee;
    background:#f5faff;
    border-radius:0 7px 7px 0;
    color:#234d67;
  }
  .studio-tabpage[data-tabpage="calc"] .eq-sub{
    color:#617b8a;
    font-size:12.5px;
  }
  .studio-tabpage[data-tabpage="calc"] .eq-val{
    margin-top:7px;
    padding-top:7px;
  }
  .studio-tabpage[data-tabpage="calc"] .eq-val b{
    color:#0871bd;
  }
  .studio-tabpage[data-tabpage="calc"] .calc-doc-head{
    margin-bottom:14px;
    padding:14px 15px;
    border:1px solid #d7e7f1;
    border-radius:11px;
    background:linear-gradient(135deg,#f7fbff,#eef7fd);
  }
  .studio-tabpage[data-tabpage="calc"] .cdh-kicker{
    color:#0b79cf;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .studio-tabpage[data-tabpage="calc"] .cdh-title{
    margin-top:3px;
    color:#173f59;
  }
  .studio-tabpage[data-tabpage="calc"] .cdh-meta{
    color:#6b808d;
  }

  /* ------------------------------------------------------------- THEORY */
  .studio-tabpage[data-tabpage="theory"]{
    color:#455f6f;
    line-height:1.67;
  }
  .studio-tabpage[data-tabpage="theory"] > p{
    max-width:78ch;
  }
  .tool-tabpage[data-tabpage="theory"] .th-h2{
    position:relative;
    margin-top:26px;
    padding:0 0 8px 13px;
    border-bottom:1px solid #dce8ef;
    color:#173f58;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .tool-tabpage[data-tabpage="theory"] .th-h2::before{
    content:"";
    position:absolute;
    left:0;top:2px;bottom:9px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg,#22a1f3,#0873c8);
  }
  .th-eq{
    margin:12px 0;
    padding:10px 13px;
    border:1px solid #d6e9f6;
    border-left:3px solid #0b86e3;
    border-radius:0 9px 9px 0;
    background:linear-gradient(90deg,#edf8ff,#f9fcff);
    color:#1e4a65;
  }
  .th-figure{
    margin:16px 0;
    padding:10px;
    border:1px solid #dbe7ee;
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 12px rgba(24,72,105,.045);
  }
  .th-figure svg{
    border-radius:8px;
    background:#fbfdff;
  }
  .th-figure figcaption{
    margin-top:8px;
    padding-top:7px;
    border-top:1px solid #edf2f5;
    color:#687f8c;
    font-size:11.5px;
  }
  .tool-tabpage[data-tabpage="theory"] .th-cta{
    margin:20px 0 8px;
    padding:11px 13px;
    border:1px solid #9ccdeb;
    border-radius:9px;
    background:linear-gradient(90deg,#eaf7ff,#f7fcff);
  }
  .tool-tabpage[data-tabpage="theory"] .th-cta a{
    color:#0876c7;
    font-weight:750;
  }

  /* ------------------------------------------------------- warnings/status */
  .warn{
    border-radius:9px;
  }
  .st-alerts .warn,
  #remarks .warn{
    border-left-width:3px;
  }
  .badge{
    letter-spacing:.015em;
  }

  /* ---------------------------------------------------------- small polish */
  .tool-panel-solution,
  .studio-tabpage[data-tabpage="theory"]{
    scrollbar-width:thin;
    scrollbar-color:#b9d5e7 transparent;
  }
  ::selection{
    background:#cceaff;
    color:#10374f;
  }

  @media (max-width:1180px){
    #stCards{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .studio-tabs.tool-tabs button{padding-left:7px;padding-right:7px;}
    .studio-tabpage[data-tabpage="calc"] .calc-mode-toggle{display:flex;}
    .studio-tabpage[data-tabpage="calc"] .calc-mode-toggle button{flex:1;}
  }
}

/* text columns in step tables read left-aligned (numbers stay right-aligned) */
.tool-panel-solution table td.txt, .report table td.txt { text-align: left; }