/* ARFI Observatory Workbench UI v1
 * Shared presentation primitives for population, state and county views.
 * Source validation, visualizations and filters remain owned by each page.
 * Loaded AFTER page-specific CSS so the canonical shell wins.
 */
:root{
 --obs-rail-width:280px;
 --obs-inspector-width:336px;
 --obs-gap:24px;
 --obs-ink:#14202e;
 --obs-navy:#0b2e50;
 --obs-muted:#657b8c;
 --obs-border:#dce3e8;
 --obs-accent:#b28c45;
 --obs-surface:#fff;
 --obs-stage:#f6f8fa;
 --obs-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --obs-serif:"Source Serif 4",Georgia,serif;
 --obs-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
.obs-shell{--nav-width:var(--obs-rail-width);--inspector-width:var(--obs-inspector-width)}
.obs-shell .obs-explorer{background:var(--obs-surface);border-color:var(--obs-border);min-width:0}
.obs-shell .obs-back{display:inline-flex;align-items:center;gap:6px;color:var(--obs-navy);
 text-decoration:none;font:600 11px/1.5 var(--obs-sans)}
.obs-shell .obs-back:hover,.obs-shell .obs-back:focus-visible{text-decoration:underline}
.obs-shell .obs-rail-heading h2{font:400 27px/1.18 var(--obs-serif);
 letter-spacing:-.025em;color:var(--obs-navy)}
.obs-shell .obs-rail-heading small,.obs-shell .obs-page-label,
.obs-shell .obs-inspector-head small{font:500 10px/1.55 var(--obs-mono);
 letter-spacing:.08em;text-transform:uppercase;color:#718494}
.obs-shell .obs-stage{min-width:0;background-color:var(--obs-stage);
 background-image:radial-gradient(#d5dee4 .7px,transparent .7px);background-size:23px 23px}
.obs-shell .obs-page-title{font:400 clamp(26px,2.65vw,38px)/1.14 var(--obs-serif);
 letter-spacing:-.025em;color:#092b44}
.obs-shell .obs-page-subtitle{font:400 12px/1.7 var(--obs-sans);color:#637789;
 max-width:700px}
.obs-shell .obs-status{font:500 10px/1.65 var(--obs-mono);
 color:#537389;overflow-wrap:anywhere}
.obs-shell .obs-period{display:inline-flex;max-width:100%;align-items:center;
 border:1px solid var(--obs-border);background:#fff;padding:8px 12px;
 color:#466f88;font:500 10px/1.5 var(--obs-mono);overflow-wrap:anywhere}
.obs-shell .obs-facts{display:grid;
 grid-template-columns:repeat(var(--obs-fact-columns,4),minmax(0,1fr));
 margin:0 0 17px;border:1px solid var(--obs-border);background:#fff;min-width:0}
.obs-shell .obs-facts--3{--obs-fact-columns:3}
.obs-shell .obs-facts--4{--obs-fact-columns:4}
.obs-shell .obs-facts>div{padding:15px 17px;display:flex;flex-direction:column;
 min-width:0;gap:5px;border-right:1px solid var(--obs-border)}
.obs-shell .obs-facts>div:last-child{border-right:0}
.obs-shell .obs-facts small{font:500 9px/1.5 var(--obs-mono);
 text-transform:uppercase;color:#788b99;letter-spacing:.035em}
.obs-shell .obs-facts strong{font:500 clamp(17px,1.7vw,24px)/1.3 var(--obs-serif);
 color:var(--obs-navy);font-variant-numeric:tabular-nums;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obs-shell .obs-viewer{background:var(--obs-surface);border:1px solid var(--obs-border);
 box-shadow:0 12px 35px #1b32460b;min-width:0}
.obs-shell .obs-toolbar{display:flex;align-items:center;gap:6px;
 padding:11px 13px;border-bottom:1px solid #e6ebef;background:#fff;min-width:0}
.obs-shell .obs-toolbar .obs-toolbar-back{display:inline-flex;align-items:center;
 flex:none;color:#536e81;text-decoration:none;font:600 10px/1.5 var(--obs-sans);
 padding:8px 10px;margin-right:4px;border-right:1px solid var(--obs-border)}
.obs-shell .obs-toolbar .obs-toolbar-back:hover{text-decoration:underline;color:var(--obs-navy)}
.obs-shell .obs-toolbar .obs-view-tabs{display:flex;align-items:center;gap:4px;
 min-width:0;flex:1;flex-wrap:wrap;padding:0;border:0;background:transparent}
.obs-shell .obs-toolbar button[data-view],
.obs-shell .obs-toolbar button[data-county-view]{border:1px solid transparent;
 background:transparent;padding:8px 12px;color:#5d7688;font:600 11px/1.3 var(--obs-sans);
 border-radius:1px;white-space:nowrap}
.obs-shell .obs-toolbar button[data-view][aria-pressed="true"],
.obs-shell .obs-toolbar button[data-county-view][aria-pressed="true"]{background:#edf4f8;
 color:var(--obs-navy);border-color:#d5e1e9;box-shadow:none}
.obs-shell .obs-toolbar button[data-view]:hover,
.obs-shell .obs-toolbar button[data-county-view]:hover{color:var(--obs-navy);background:#f1f5f7}
.obs-shell .obs-toolbar .obs-details-action{margin-left:auto;border:1px solid var(--obs-border);
 background:#fff;color:var(--obs-navy);font:600 10px/1.3 var(--obs-sans);
 padding:9px 12px;white-space:nowrap}
.obs-shell .obs-toolbar .obs-details-action:hover{background:#eef4f7}
.obs-shell .obs-viewer .obs-view-panel{min-width:0}
.obs-shell .obs-inspector{background:#fff;border-color:var(--obs-border);
 min-width:0;overflow-x:hidden}
.obs-shell .obs-inspector-head{border-color:var(--obs-border);background:#fff}
.obs-shell .obs-inspector-head h2{font:400 27px/1.2 var(--obs-serif);
 letter-spacing:-.02em;color:var(--obs-navy)}
.obs-shell .obs-inspector-head button{min-width:33px;min-height:33px;
 border:0;border-radius:2px;background:transparent;font-size:24px;
 display:grid;place-items:center;color:#6b8192}
.obs-shell .obs-inspector-head button:hover{background:#f2f5f7}
.obs-shell .obs-inspector-body{color:var(--obs-ink);overflow-wrap:anywhere}
.obs-shell .obs-inspector-body h3{font:600 10px/1.45 var(--obs-mono);
 color:#74899a;letter-spacing:.075em;text-transform:uppercase}
.obs-shell .obs-value small,.obs-shell .obs-value .metric-label{font:600 10px/1.4 var(--obs-mono);
 letter-spacing:.035em;color:#647e8c}
.obs-shell .obs-value strong,.obs-shell .obs-value .metric{font-family:var(--obs-serif);
 color:var(--obs-navy);font-variant-numeric:tabular-nums}
/* Standard viewport geometry. Pages keep their own map/table/inspector logic. */
.st-layout.obs-shell,.st-layout.obs-shell.details-hidden{
 grid-template-columns:var(--obs-rail-width) minmax(0,1fr) var(--obs-inspector-width)}
.st-layout.obs-shell.details-hidden{grid-template-columns:var(--obs-rail-width) minmax(0,1fr)}
.st-layout.obs-shell .obs-explorer{padding:23px 20px 20px}
.st-layout.obs-shell .obs-rail-heading{margin:25px 0 25px}
.st-layout.obs-shell .obs-stage{padding:25px var(--obs-gap) 30px}
.st-layout.obs-shell .obs-page-title{margin:0 0 8px}
.st-layout.obs-shell .obs-inspector{box-shadow:-9px 0 20px #122f4708}
.st-layout.obs-shell .obs-inspector-head{padding:23px 20px 17px}
.st-layout.obs-shell .obs-inspector-body{padding:20px}
.data-layout.obs-shell .obs-explorer{left:0;top:0;bottom:34px;
 width:var(--obs-rail-width);border:0;border-right:1px solid var(--obs-border);box-shadow:none}
.data-layout.obs-shell .obs-explorer-back{margin:20px 20px 0;flex:none}
.data-layout.obs-shell .obs-rail-heading{padding:16px 20px 13px}
.data-layout.obs-shell .obs-rail-heading h2{margin-top:6px}
.data-layout.obs-shell .obs-stage .obs-page-heading{
 left:calc(var(--obs-rail-width) + var(--obs-gap));top:22px;right:var(--obs-gap)}
.data-layout.obs-shell .obs-stage .obs-page-heading h1{margin:7px 0 8px}
.data-layout.obs-shell .obs-stage .obs-page-heading p:not(.status){margin:0}
.data-layout.obs-shell .obs-viewer{
 left:calc(var(--obs-rail-width) + var(--obs-gap));right:var(--obs-gap);
 top:160px;bottom:48px}
body.nav-collapsed .data-layout.obs-shell .obs-stage .obs-page-heading{left:var(--obs-gap)}
body.nav-collapsed .data-layout.obs-shell .obs-viewer{left:var(--obs-gap)}
body.inspector-open .data-layout.obs-shell .obs-viewer{right:calc(var(--obs-inspector-width) + var(--obs-gap))}
.data-layout.obs-shell .obs-inspector{top:0;right:0;bottom:34px;
 width:var(--obs-inspector-width);border:0;border-left:1px solid var(--obs-border);box-shadow:-9px 0 24px #122f4713}
.data-layout.obs-shell .obs-inspector-head{padding:20px 20px 8px}
.data-layout.obs-shell .obs-inspector-body{padding:20px}
.data-layout.obs-shell .obs-facts{margin:14px 0 17px}
.data-layout.obs-shell .obs-viewer .obs-toolbar .obs-view-tabs{flex:1}
@media(max-width:1380px){
 :root{--obs-rail-width:244px;--obs-inspector-width:310px;--obs-gap:18px}
 .st-layout.obs-shell .obs-explorer{padding:21px 16px}
 .st-layout.obs-shell .obs-stage{padding:22px var(--obs-gap)}
 .data-layout.obs-shell .obs-viewer{top:151px}
}
@media(max-width:1100px){
 :root{--obs-rail-width:280px;--obs-inspector-width:340px}
 .st-layout.obs-shell,.st-layout.obs-shell.details-hidden{grid-template-columns:226px minmax(0,1fr);position:relative}
 .st-layout.obs-shell .obs-inspector{position:absolute;right:0;top:0;
  bottom:0;width:min(var(--obs-inspector-width),90vw);grid-column:auto;z-index:12}
 .st-layout.obs-shell .obs-stage{grid-column:2}
 .data-layout.obs-shell .obs-explorer{left:0;top:0;bottom:0;width:min(330px,90vw);
  box-shadow:12px 0 30px #0b25391f;z-index:24}
 .data-layout.obs-shell .obs-stage .obs-page-heading,
 body.nav-collapsed .data-layout.obs-shell .obs-stage .obs-page-heading{left:var(--obs-gap)}
 .data-layout.obs-shell .obs-viewer,
 body.nav-collapsed .data-layout.obs-shell .obs-viewer{left:var(--obs-gap)}
 .data-layout.obs-shell .obs-inspector{top:0;bottom:0;right:0}
 body.inspector-open .data-layout.obs-shell .obs-viewer{right:var(--obs-gap)}
}
@media(max-width:760px){
 :root{--obs-gap:12px}
 .st-layout.obs-shell,.st-layout.obs-shell.details-hidden{display:flex;flex-direction:column;
  height:auto;overflow:visible}
 .st-layout.obs-shell .obs-explorer{padding:15px 16px}
 .st-layout.obs-shell .obs-stage{padding:18px 13px}
 .st-layout.obs-shell .obs-rail-heading{margin:12px 0 14px}
 .st-layout.obs-shell .obs-page-title{font-size:27px}
 .st-layout.obs-shell .obs-inspector{position:static;width:100%;box-shadow:none}
 .obs-shell .obs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .obs-shell .obs-facts>div{padding:11px 12px}
 .obs-shell .obs-facts>div:nth-child(2n){border-right:0}
 .obs-shell .obs-facts>div:nth-child(n+3){border-top:1px solid var(--obs-border)}
 .obs-shell .obs-facts.obs-facts--3>div:last-child{grid-column:1/-1}
 .obs-shell .obs-facts strong{font-size:19px}
 .obs-shell .obs-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:5px 8px;padding:7px}
 .obs-shell .obs-toolbar .obs-toolbar-back{grid-column:1;grid-row:1;justify-self:start;
  padding:7px;border-right:0;margin:0;min-width:0;width:auto!important}
 .obs-shell .obs-toolbar .obs-details-action{grid-column:2;grid-row:1;
  justify-self:end;margin:0;min-width:0}
 .obs-shell .obs-toolbar .obs-view-tabs{grid-column:1/-1;grid-row:2;
  display:flex;width:100%;min-width:0;flex:none;justify-content:start;
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
 .obs-shell .obs-toolbar button[data-view],
 .obs-shell .obs-toolbar button[data-county-view]{padding:8px 10px;font-size:10px}
 .obs-shell .obs-toolbar .obs-details-action{margin-left:auto}
 .data-layout.obs-shell .obs-stage .obs-page-heading,
 body.nav-collapsed .data-layout.obs-shell .obs-stage .obs-page-heading{left:13px;right:13px;top:10px}
 .data-layout.obs-shell .obs-stage .obs-page-heading h1{font-size:23px}
 .data-layout.obs-shell .obs-viewer,
 body.nav-collapsed .data-layout.obs-shell .obs-viewer{left:12px;right:12px;top:122px;bottom:45px}
 .data-layout.obs-shell .canvas-bottom span:first-child{min-width:0;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
 .data-layout.obs-shell .canvas-bottom span:last-child{flex:none;max-width:45%}
 body.inspector-open .data-layout.obs-shell .obs-viewer{right:12px}
 .data-layout.obs-shell .obs-explorer{width:min(330px,calc(100vw - 16px))}
 .data-layout.obs-shell .obs-inspector{width:min(100vw,420px)}
}
@media(prefers-reduced-motion:reduce){
 .obs-shell .obs-explorer,.obs-shell .obs-inspector,.obs-shell .obs-viewer{transition-duration:.01ms}
}