/* WATER AS SPECTRUM · V10.2 UI FOUNDATION / Phase 2
 * Layout-only override. Scientific modules and experiment schema v8 are inherited
 * from V10.1 unchanged. One main vertical scroll owner: the iframe document.
 * Any matrix overflow is horizontal only. Do not hide vertical bars cosmetically.
 */
:root{
  --ui-text:#ecf1ed;--ui-secondary:#becfc4;--ui-muted:#a0b8aa;
  --ui-surface:#111e18;--ui-inset:#182a20;--ui-edge:#365348;
  --ui-accent:#e9ac83;--ui-focus:#ffe2a5;
}
html,body,html[data-geogeek-embedded="true"],html[data-geogeek-embedded="true"] body{
  height:auto!important;min-height:100%!important;
  overflow-x:clip!important;overflow-y:visible!important;
}
body,html[data-geogeek-embedded="true"] body{overflow-y:auto!important;}
.shell,html[data-geogeek-embedded="true"] .shell{
  display:flex!important;flex-direction:column;
  height:auto!important;min-height:100dvh!important;overflow:visible!important;
}
.topbar{min-height:58px!important;padding:10px clamp(16px,2vw,26px)!important;gap:12px}
.topbar h1{font-size:clamp(24px,2.3vw,30px);margin:2px 0 0}
.topbar .micro{font-size:9px;letter-spacing:.07em}
.appnav,html[data-geogeek-embedded="true"] .appnav{
  min-height:46px!important;padding-inline:clamp(12px,1.8vw,25px)!important;
  position:relative;flex:0 0 auto;
}
.appnav .nav-scroll{scrollbar-width:thin;scrollbar-color:#6c897a transparent;max-width:100%;min-width:0}
.appnav .tab{min-height:46px;padding:0 11px;font-size:12px;letter-spacing:0}
.appnav .tab .no{font-size:10px}
.appnav-end{font-size:10px}
#v10Science{margin:6px clamp(12px,1.8vw,25px)!important;padding:7px 11px!important;
  border:1px solid var(--ui-edge)!important;border-radius:6px!important;
  color:var(--ui-secondary)!important;font:12px/1.5 system-ui,sans-serif!important;
}
#v10Science summary{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:0!important;cursor:pointer}
#v10Science p{max-width:110ch;color:var(--ui-secondary)}
.workspace,.workspace.no-rail,html[data-geogeek-embedded="true"] .workspace{
  flex:0 0 auto;min-height:0!important;height:auto!important;align-items:start;
}
.workspace{grid-template-columns:minmax(0,1fr) clamp(295px,27vw,390px)}
.main-space,.chart-area,.chart-main,html[data-geogeek-embedded="true"] .main-space{
  flex:0 0 auto!important;min-height:0!important;max-height:none!important;
  height:auto!important;overflow:visible!important;
}
.workspace-head,html[data-geogeek-embedded="true"] .workspace-head{
  min-height:72px!important;padding:12px clamp(14px,1.7vw,23px)!important;
  gap:12px;align-items:center;
}
.space-title{font-size:clamp(19px,1.85vw,25px);line-height:1.2;margin:4px 0}
.space-subtitle{font-size:12px;line-height:1.45;max-width:75ch;color:var(--ui-secondary)}
.eyebrow{font-size:10px;letter-spacing:.06em}
.head-controls{max-width:none!important;align-items:center;gap:6px}
.head-controls .tiny-btn,.head-controls .ghost-btn{min-height:36px;height:auto;font:500 12px/1.3 system-ui,sans-serif;padding:6px 9px}
.header-actions{gap:5px}
.chart-top{min-height:45px;padding:7px clamp(14px,1.7vw,23px)}
.plot-tab{min-height:38px;font:600 12px/1.25 system-ui,sans-serif}
.plot-flag{font-size:10px;color:var(--ui-muted)}
.chart-main,html[data-geogeek-embedded="true"] .chart-main{
  padding:14px clamp(14px,1.7vw,23px) 28px!important;display:flex;
  flex-direction:column;gap:13px;
}
.chart-main.path-workbench{overflow:visible!important;min-height:0!important}
.hero-plot{flex:0 0 auto!important;min-height:380px;height:auto!important;overflow:visible}
.hero-plot .graph{flex:0 0 auto;min-height:310px;height:340px}
.chart-footer{font:11px/1.5 system-ui,sans-serif}
.metric small,.hint-strip{font-size:12px;line-height:1.5}
.u9-active .chart-main,.u9-container,.rt-shell{
  flex:0 0 auto!important;overflow:visible!important;
  max-height:none!important;height:auto!important;min-height:0!important;
}
.u9-container{padding:4px!important}
.u9-summary{min-height:0;padding:16px}
.rt-shell{padding:15px;gap:12px}
.rt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rt-card{overflow:visible}
.rt-svg{max-height:none}
.side-rail{
  min-height:0!important;height:auto!important;max-height:none!important;
  align-self:stretch;overflow:visible!important;background:var(--ui-surface)
}
.side-head,html[data-geogeek-embedded="true"] .side-head{
  min-height:72px!important;padding:12px 16px!important
}
.side-head h2{font-size:20px}
.side-head small{font-size:12px;line-height:1.45}
.control-scroll,.workspace .control-scroll{
  flex:0 0 auto!important;overflow:visible!important;height:auto!important;
  max-height:none!important;padding:11px 17px 24px!important;
}
.control-section{padding:11px 0 16px}
.section-title h3{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.025em}
.param-top label{font-size:13px}
.param .note{font-size:11px;line-height:1.5}
.switch,.preset-btn,.rt-choice{min-height:38px}
.rt-primary{min-height:42px}
.probe-bar{min-height:55px}
.foot{height:auto;min-height:32px}
.u9-matrix{overflow-x:auto!important;overflow-y:clip!important}
.dialog-body{overflow-y:auto} /* modal, separate temporary interaction context */
:where(button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ui-focus)!important;outline-offset:2px
}
@media(max-width:1200px){
  .workspace{grid-template-columns:minmax(0,1fr) 300px}
  .rt-grid{grid-template-columns:1fr}
  .workspace-head{align-items:start}
  .head-controls{flex-wrap:wrap}
  .head-controls .header-actions{max-width:100%}
  .hero-plot{min-height:350px}
}
@media(max-width:820px){
  .workspace,.workspace.no-rail,html[data-geogeek-embedded="true"] .workspace{
    display:flex!important;flex-direction:column!important
  }
  .main-space,.side-rail{width:100%;min-width:0}
  .side-rail{border-left:0;border-top:1px solid var(--ui-edge)}
  .workspace-head{flex-direction:column;align-items:start}
  .head-controls{justify-content:flex-start}
  .control-scroll{padding:12px 17px 24px!important}
  .u9-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .appnav .tab{min-height:44px;padding:0 10px}
  .plot-tab{min-height:42px}
  .chart-main{padding:12px 10px 18px!important}
  .rt-shell{padding:10px}
  .rt-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-plot{min-height:300px}
  .hero-plot .graph{min-height:245px;height:285px}
}
@media(prefers-reduced-motion:reduce){
  .ghost-btn,.soft-btn,.tab,.plot-tab,.tiny-btn,.toast{transition:none!important}
}