/* A shared dashboard shell: the model stays in place while its side panel changes. */
.monitor-active .explorer{
  grid-template-columns:332px minmax(0,1fr);
  grid-template-rows:100px minmax(0,1fr);
  height:calc(100dvh - 88px);
  min-height:680px;
}
.dashboard-toolbar{
  grid-column:1 / -1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:28px;
  padding:17px 28px 17px 32px;
  background:#f8f7f0;
  border-bottom:1px solid #d5dfd3;
  z-index:5;
}
.dashboard-title{min-width:0;margin-right:auto}
.dashboard-title .monitor-eyebrow{display:block;font-size:8px;letter-spacing:.17em}
.dashboard-title h1{
  display:block;
  font:30px/1.12 var(--display);
  letter-spacing:-.035em;
  margin:9px 0 0;
  white-space:nowrap;
}
.dashboard-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid #d3ded1;
  border-radius:7px;
  background:#eaf0e5;
  flex-shrink:0;
}
.dashboard-tabs button{
  min-height:41px;
  padding:10px 16px;
  border-radius:4px;
  background:transparent;
  color:#60796c;
  font-size:11px;
  white-space:nowrap;
}
.dashboard-tabs button[aria-pressed=true]{
  background:#173e40;
  color:#fffaf0;
  box-shadow:0 2px 6px #173e401c;
}
.dashboard-tabs button:hover:not([aria-pressed=true]){background:#f8faf3;color:#173e40}
.dashboard-toolbar .tour-start{
  width:auto;
  flex-shrink:0;
  margin:0;
  padding:12px 15px;
  min-height:64px;
  gap:11px;
  box-shadow:none;
}
.dashboard-toolbar .tour-start strong{font-size:22px;line-height:1.05}
.dashboard-toolbar .tour-start small{font-size:8px;margin-top:6px}
.dashboard-toolbar .tour-start-icon{font-size:24px}
.dashboard-toolbar .tour-start>span:last-child{margin-left:10px;font-size:10px}
.monitor-active .story-panel,
.monitor-active #monitor-panel{
  grid-column:1;
  grid-row:2;
  min-height:0;
  min-width:0;
  overflow:auto;
  padding:26px 23px 26px 28px;
  scrollbar-width:thin;
  scrollbar-color:#bdcfc4 transparent;
}
.monitor-active .story-panel{display:flex;background:#f5f4ed}
.monitor-active[data-dashboard-section=sensors] .story-panel{display:none}
.monitor-active .story-panel>.eyebrow,
.monitor-active .story-panel>h1,
.monitor-active .story-panel>.intro,
.monitor-active .story-panel>.mode-tabs,
.monitor-active .story-panel>.story-footer{display:none}
.monitor-active .viewport{grid-column:2;grid-row:2;min-height:0}
.monitor-active .waypoint-controls{gap:6px;margin-bottom:11px}
.monitor-active .waypoint-controls button{font-size:10px;min-height:43px;padding:10px}
.monitor-active .area-views{margin-bottom:24px}
.monitor-active .section-label{font-size:8px;letter-spacing:.12em}
.monitor-active .phase-step{min-height:43px;padding:8px 0}
.monitor-active .phase-step .step-name{font-size:11px}
.monitor-active .mobile-phase-description{
  display:block;
  color:#60776a;
  font-size:11px;
  line-height:1.65;
  margin:19px 0 16px;
}
.monitor-active #project-panel>.layer-controls{
  position:static;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin:16px 0 0;
}
.monitor-active #project-panel>.layer-controls button{
  min-height:38px;
  padding:10px 12px;
  justify-content:flex-start;
  font-size:10px;
  box-shadow:none;
}
.monitor-active #project-panel>.play-button{margin-top:16px}
.monitor-active #project-panel>.small-note{font-size:9px}
.monitor-active #survey-panel>.section-label{line-height:1.5}
.monitor-active .monitor-heading h2{
  display:block;
  font:32px/1.08 var(--display);
  letter-spacing:-.035em;
  margin:12px 0;
}
.monitor-active .monitor-heading h2 em{color:#2d7467;font-weight:400}
.monitor-active .monitor-heading p{font-size:11px;margin-bottom:17px}
.monitor-active .monitor-feed-status{margin-bottom:22px}
.monitor-active .monitor-back{display:none}
.monitor-active .viewport>.view-top{
  display:flex!important;
  top:18px;
  left:25px;
  right:24px;
  z-index:4;
}
.monitor-active .view-top h2{font-size:25px;line-height:1.1;margin:12px 0 0;max-width:600px}
.monitor-active .view-badge{font-size:7px;letter-spacing:.11em;padding:5px 7px}
.monitor-active .north{gap:4px}
.monitor-active .north svg{width:15px;height:22px}
.monitor-active .north span{font-size:8px}
.monitor-kpi-status{position:absolute;top:77px;left:25px;right:24px;display:flex;align-items:center;gap:10px}
.monitor-active #monitor-view-badge{font-size:7px;letter-spacing:.08em;padding:5px 8px;line-height:1.2;border-radius:3px}
.monitor-context-note{color:#61796e;font-size:8px;line-height:1.4;background:#f7f8efcf;border-radius:3px;padding:4px 6px;max-width:440px}
.monitor-active .monitor-kpis{top:106px;left:25px;right:74px;max-width:700px;gap:9px}
.monitor-active .monitor-kpis>div{padding:11px 14px;border-radius:5px}
.monitor-active .monitor-kpis strong{font-size:28px;margin:5px 0 3px}
.monitor-active .monitor-kpis>div>span{font-size:9px}
.monitor-active .monitor-kpis>div>small{font-size:8px;line-height:1.4}
.monitor-active #labels-layer{display:block!important}
.monitor-active #navigation-controls{
  display:block!important;
  top:225px;
  left:25px;
  max-width:280px;
  z-index:5;
}
.monitor-active .navigation-controls button{min-height:37px;font-size:10px}
.monitor-active .view-tools{top:225px;right:22px;z-index:6;flex-direction:row}
.monitor-active #view-side{display:block}
.monitor-active .view-tools button{width:36px;height:36px}
.monitor-active #navigation-controls[hidden],
.monitor-active #labels-layer[hidden],
.monitor-active #view-side[hidden],
.monitor-active.sensor-placement-active #navigation-controls{display:none!important}
.monitor-active .viewport>.caption,
.monitor-active .viewport>.legend,
.monitor-active .viewport>.view-bottom,
.monitor-active .viewport>.quality-status,
.monitor-active .viewport>.render-status{display:none!important}
.monitor-active .monitor-flow-card{
  right:22px;
  bottom:18px;
  width:306px;
  padding:15px 17px 13px;
  border-radius:6px;
  box-shadow:0 5px 24px #1e433816;
}
.monitor-active .monitor-flow-heading h3{font-size:21px;margin-top:5px}
.monitor-active .monitor-flow-heading .monitor-eyebrow{font-size:7px}
.monitor-active #monitor-flow-output{font-size:12px}
.monitor-active #monitor-flow-range{margin-top:12px;height:20px}
.monitor-active .monitor-flow-scale{font-size:7px}
.monitor-active .monitor-flow-actions{margin-top:10px;gap:7px}
.monitor-active .monitor-flow-actions button{min-height:36px;padding:9px 10px;font-size:9px}
.monitor-active #monitor-flow-note{font-size:8px;line-height:1.45;margin:9px 0 0}
.monitor-active #monitor-pick-hint{top:285px}
.monitor-active .monitor-view-footer{display:none}
.monitor-active.dashboard-survey #navigation-controls{top:105px}
.monitor-active.dashboard-survey .view-tools{top:105px}
.monitor-active.dashboard-survey .view-top h2{max-width:75%}
.monitor-active.dashboard-survey .compare-labels{top:157px}
.monitor-active.dashboard-survey #compare-divider{top:190px;bottom:85px}
.monitor-active.dashboard-survey .compare-control{left:25px;right:22px;bottom:22px}
.monitor-active.tour-active .explorer{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.monitor-active.tour-active .dashboard-toolbar,
.monitor-active.tour-active .story-panel,
.monitor-active.tour-active #monitor-panel{display:none!important}
.monitor-active.tour-active .viewport{grid-column:1;grid-row:1}
.monitor-active.tour-active .viewport>.view-top,
.monitor-active.tour-active #navigation-controls,
.monitor-active.tour-active #labels-layer{display:none!important}
@media(min-width:761px) and (max-width:1100px){
  .monitor-active .explorer{grid-template-columns:292px minmax(0,1fr)}
  .dashboard-toolbar{gap:16px;padding-left:23px;padding-right:22px}
  .dashboard-title h1{font-size:27px}
  .dashboard-title .monitor-eyebrow{font-size:7px;letter-spacing:.11em}
  .dashboard-tabs button{padding:10px 12px;font-size:10px}
  .dashboard-toolbar .tour-start{padding:12px;gap:8px;min-height:60px}
  .dashboard-toolbar .tour-start strong{font-size:20px}
  .dashboard-toolbar .tour-start small{font-size:7px}
  .dashboard-toolbar .tour-start-icon{display:none}
  .dashboard-toolbar .tour-start>span:last-child{margin-left:4px}
  .monitor-active .story-panel,.monitor-active #monitor-panel{padding:23px 19px}
  .monitor-active .view-top,.monitor-active .monitor-kpi-status{left:20px;right:19px}
  .monitor-active .monitor-kpis{left:20px;right:19px;gap:6px}
  .monitor-active .monitor-kpis>div{padding:10px}
  .monitor-active .monitor-kpis>div>span{font-size:8px}
  .monitor-active .monitor-kpis strong{font-size:25px}
  .monitor-active .monitor-kpis>div>small{font-size:7px}
  .monitor-active #navigation-controls{left:20px}
  .monitor-active .view-tools{right:18px}
  .monitor-active .monitor-flow-card{right:18px;width:280px}
}
@media(max-width:760px){
  .monitor-active .masthead{height:67px;gap:10px;padding:0 13px}
  .monitor-active .brand{font-size:16px;gap:7px;letter-spacing:.12em}
  .monitor-active .brand svg{width:28px;height:28px}
  .monitor-active .brand-sub{font-size:5px;letter-spacing:.14em}
  .monitor-active .masthead .header-actions{gap:12px}
  .monitor-active #numbers-open,.monitor-active #sources-open{display:block;font-size:9px;padding:12px 0}
  .monitor-active .explorer{display:flex;flex-direction:column;height:auto;min-height:0}
  .dashboard-toolbar{
    order:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px 10px;
    padding:17px 14px 13px;
  }
  .dashboard-title{margin:0}
  .dashboard-title .monitor-eyebrow{font-size:6px;letter-spacing:.1em}
  .dashboard-title h1{font-size:25px;line-height:1.05;margin-top:8px;white-space:normal;max-width:200px}
  .dashboard-toolbar .tour-start{grid-column:2;grid-row:1;padding:11px 12px;min-height:57px;gap:5px;max-width:152px}
  .dashboard-toolbar .tour-start strong{font-size:20px}
  .dashboard-toolbar .tour-start small{font-size:7px;line-height:1.4;margin-top:5px}
  .dashboard-toolbar .tour-start-icon,.dashboard-toolbar .tour-start>span:last-child{display:none}
  .dashboard-tabs{grid-column:1 / -1;padding:4px;gap:4px;width:100%;border-radius:5px}
  .dashboard-tabs button{min-height:41px;padding:9px 7px;flex:1;font-size:11px;border-radius:3px}
  .monitor-active .viewport{order:1;height:720px;min-height:720px;width:100%;border-bottom:1px solid #cfdbcd}
  .monitor-active .story-panel,.monitor-active #monitor-panel{
    order:2;
    display:block;
    overflow:visible;
    padding:23px 18px 30px;
    border:0;
  }
  .monitor-active[data-dashboard-section=sensors] .story-panel{display:none}
  .monitor-active #project-panel,.monitor-active #survey-panel{padding:0}
  .monitor-active .section-label{font-size:9px;margin-bottom:13px}
  .monitor-active .waypoint-controls{gap:7px;margin-bottom:13px}
  .monitor-active .waypoint-controls button{min-height:44px;font-size:11px}
  .monitor-active .area-views{margin-bottom:24px}
  .monitor-active .area-views summary{font-size:12px}
  .monitor-active .phase-list{gap:6px}
  .monitor-active .phase-step{padding:6px 0;min-height:56px}
  .monitor-active .phase-step .step-name{font-size:9px}
  .monitor-active .mobile-phase-description{font-size:12px;line-height:1.65;margin:17px 0}
  .monitor-active #project-panel>.layer-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .monitor-active #project-panel>.layer-controls button{min-height:44px;padding:10px;font-size:10px}
  .monitor-active #project-panel>.layer-controls button:last-child{grid-column:1 / -1}
  .monitor-active #project-panel>.small-note{font-size:10px}
  .monitor-active .monitor-heading h2{font-size:33px;margin-top:12px;max-width:400px}
  .monitor-active .monitor-heading h2 br{display:none}
  .monitor-active .monitor-heading h2 em{margin-left:5px}
  .monitor-active .monitor-heading p{font-size:12px}
  .monitor-active .viewport>.view-top{top:18px;left:16px;right:16px}
  .monitor-active .view-top h2{font-size:22px;max-width:290px;margin-top:12px}
  .monitor-active .view-badge{font-size:6px}
  .monitor-active .monitor-kpi-status{top:75px;left:15px;right:15px}
  .monitor-active #monitor-view-badge{font-size:6px;padding:5px 7px}
  .monitor-context-note{font-size:6px;line-height:1.3;padding:3px 4px;max-width:180px}
  .monitor-active .monitor-kpis{top:101px;left:14px;right:14px;gap:5px;grid-template-columns:1.1fr .8fr 1.15fr}
  .monitor-active .monitor-kpis>div{padding:9px 8px}
  .monitor-active .monitor-kpis>div>span{font-size:8px;line-height:1.35;min-height:22px}
  .monitor-active .monitor-kpis strong{font-size:24px;margin:4px 0}
  .monitor-active .monitor-kpis strong small{font-size:15px}
  .monitor-active .monitor-kpis>div>small{font-size:7px;min-height:20px;line-height:1.4}
  .monitor-active #navigation-controls{top:223px;left:14px;max-width:calc(100% - 115px);padding:4px}
  .monitor-active .navigation-actions{gap:4px;flex-wrap:nowrap}
  .monitor-active .navigation-controls button{font-size:9px;min-height:39px;padding:8px 7px}
  .monitor-active .navigation-pad{flex-wrap:wrap}
  .monitor-active .navigation-pad [data-move]{font-size:20px}
  .monitor-active .view-tools{top:223px;right:13px;grid-template-columns:repeat(2,36px);gap:4px}
  .monitor-active .view-tools button{width:36px;height:39px}
  .monitor-active .monitor-flow-card{left:14px;right:14px;bottom:15px;width:auto;padding:14px 16px}
  .monitor-active .monitor-flow-heading h3{font-size:22px}
  .monitor-active #monitor-flow-range{height:23px;margin-top:12px}
  .monitor-active .monitor-flow-actions{margin-top:10px}
  .monitor-active .monitor-flow-actions button{min-height:40px;font-size:10px}
  .monitor-active #monitor-flow-note{font-size:8px;margin-top:10px}
  .monitor-active #monitor-pick-hint{top:290px;width:calc(100% - 100px);font-size:11px;padding:12px}
  .monitor-active.dashboard-survey .viewport{height:530px;min-height:530px}
  .monitor-active.dashboard-survey #navigation-controls{top:105px}
  .monitor-active.dashboard-survey .view-tools{top:105px}
  .monitor-active.dashboard-survey .compare-control{left:14px;right:14px;bottom:17px}
  .monitor-active.dashboard-survey .compare-labels{top:245px;left:14px;right:14px}
  .monitor-active.dashboard-survey #compare-divider{top:275px;bottom:84px}
  .monitor-active.tour-active .viewport{height:calc(100dvh - 67px);min-height:500px}
}
@media(max-width:380px){
  .dashboard-title h1{font-size:23px}
  .dashboard-title .monitor-eyebrow{font-size:5.5px}
  .dashboard-toolbar .tour-start{max-width:138px;padding:10px}
  .dashboard-toolbar .tour-start strong{font-size:19px}
  .monitor-active .masthead .header-actions{gap:10px}
  .monitor-active .brand{font-size:15px}
  .monitor-active .brand svg{width:25px;height:25px}
  .monitor-active .monitor-kpis>div{padding:9px 6px}
  .monitor-active .monitor-kpis strong{font-size:23px}
  .monitor-active .navigation-controls button{font-size:8px;padding:8px 6px}
}