/* A quiet GIS focal point. Every colour comes from the site's two approved palettes. */
.ops-console { padding:32px; border-radius:24px; overflow:hidden; }
.ops-console-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.ops-console-heading .eyebrow { font-size:.6875rem; letter-spacing:.14em; margin:0 0 8px; }
.ops-console-heading h3 { font-size:1.25rem; line-height:1.5; margin:0; }
.ops-demo-label { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.ops-console-body { display:grid; grid-template-columns:minmax(0,1fr) 256px; align-items:stretch; gap:32px; padding-block:32px; }
.ops-map-stage { position:relative; min-width:0; height:448px; background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; isolation:isolate; }
.ops-map-stage::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; opacity:.17; pointer-events:none; }
.ops-map-canvas { position:absolute; inset:56px 16px 40px; min-width:0; display:grid; place-items:center; color:var(--muted); cursor:default; }
.ops-map-canvas svg { display:block; }
.ops-map-loading { font-size:.875rem; padding:24px; text-align:center; }
.ops-map-toolbar { position:absolute; top:16px; left:16px; right:16px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; pointer-events:none; }
.ops-scope-switch { display:flex; padding:4px; gap:4px; border:1px solid var(--line); border-radius:12px; background:var(--control); pointer-events:auto; }
.ops-scope-switch button { min-width:64px; min-height:36px; padding:4px 16px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:.8125rem; cursor:pointer; transition:color 300ms ease-out,background-color 300ms ease-out,border-color 300ms ease-out; }
.ops-scope-switch button[aria-pressed=true] { color:var(--cyan); background:var(--surface2); border-color:var(--line); }
.ops-scope-switch button:hover { color:var(--ink); }
.ops-map-level { color:var(--muted); font-size:.6875rem; letter-spacing:.04em; }
.ops-map-navigation { position:absolute; bottom:56px; right:16px; z-index:2; display:grid; gap:4px; padding:4px; background:var(--control); border:1px solid var(--line); border-radius:12px; }
.ops-map-navigation button { width:32px; height:32px; display:grid; place-items:center; padding:8px; background:transparent; color:var(--muted); border:0; border-radius:8px; cursor:pointer; transition:background-color 300ms ease-out,color 300ms ease-out; }
.ops-map-navigation svg { width:16px; height:16px; }
.ops-map-navigation button:hover { color:var(--cyan); background:var(--surface2); }
.ops-map-navigation button:disabled { opacity:.35; cursor:default; }
.ops-map-navigation > span { display:block; color:var(--muted); font-family:Outfit,'Noto Sans SC',sans-serif; font-size:.6875rem; text-align:center; padding-block:4px; }
.ops-map-caption { position:absolute; bottom:16px; left:16px; right:16px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:.6875rem; line-height:1.5; pointer-events:none; }
.ops-map-caption > span:first-child { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.ops-map-caption i { display:inline-block; width:5px; height:5px; background:var(--cyan); border-radius:50%; }
.ops-map-corner { position:absolute; width:16px; height:16px; border-color:var(--cyan); border-style:solid; opacity:.5; pointer-events:none; }
.ops-map-corner.is-top { top:80px; left:16px; border-width:1px 0 0 1px; }
.ops-map-corner.is-bottom { bottom:48px; right:16px; border-width:0 1px 1px 0; }
.ops-map-retry { position:absolute; left:50%; top:60%; transform:translateX(-50%); padding:8px 16px; border:1px solid var(--line); border-radius:12px; background:var(--control); color:var(--ink); font-size:.875rem; cursor:pointer; }
.ops-map-retry[hidden] { display:none; }
.ops-inspector { min-width:0; display:flex; flex-direction:column; gap:16px; }
.ops-selected-site { padding-bottom:0; }
.ops-selected-site .eyebrow { font-size:.6875rem; letter-spacing:.08em; margin:0 0 8px; }
.ops-selected-site h4 { margin:0; font-size:1.0625rem; line-height:1.5; display:flex; align-items:center; gap:8px; color:var(--ink); }
.ops-selected-site h4 svg { width:18px; height:18px; flex-shrink:0; color:var(--cyan); }
.ops-console-kpis { display:grid; gap:16px; }
.ops-console-kpis > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.ops-console-kpis > div > span { color:var(--muted); font-size:.8125rem; }
.ops-console-kpis strong { display:flex; align-items:baseline; gap:8px; color:var(--cyan); font-family:Outfit,'Noto Sans SC',sans-serif; font-size:2rem; font-weight:400; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ops-console-kpis [data-kpi] { font-size:inherit; line-height:1; }
.ops-console-kpis > div:last-child strong { color:var(--ink); }
.ops-console-kpis small { margin-left:0; color:var(--muted); font-size:.75rem; font-weight:400; line-height:1; }
.ops-console-trend { min-width:0; margin-top:auto; }
.ops-console-trend > div:first-child { display:flex; justify-content:space-between; align-items:baseline; }
.ops-console-trend h4 { font-size:.9375rem; margin:0; line-height:1.5; }
.ops-console-trend > div:first-child > span { font-size:.6875rem; color:var(--muted); }
.ops-console-trend .ops-chart { height:120px; margin-top:8px; }
.ops-console-legend { display:flex; gap:16px; color:var(--muted); font-size:.6875rem; margin-top:0; }
.ops-console-legend span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ops-console-legend span::before { content:''; width:14px; height:1px; display:block; background:var(--cyan); }
.ops-console-legend span + span::before { height:0; border-top:1px dashed var(--mint); background:transparent; }
.ops-console-trend details { font-size:.75rem; margin-top:8px; }
.ops-console-trend summary { padding:0; line-height:1.5; min-height:24px; }
.ops-console-trend details p { margin-top:8px; font-size:.75rem; line-height:1.6; }
.ops-console-footer { display:flex; gap:24px; align-items:center; padding-top:24px; border-top:1px solid var(--line); }
.ops-console-footer > span { color:var(--muted); font-size:.6875rem; letter-spacing:.06em; white-space:nowrap; }
.ops-site-switch { display:flex; gap:12px; min-width:0; overflow-x:auto; padding:2px; }
.ops-site-switch button { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; min-height:44px; padding:8px 16px; background:transparent; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:.8125rem; cursor:pointer; transition:color 300ms ease-out,border-color 300ms ease-out,background-color 300ms ease-out; }
.ops-site-switch button > span { font-family:Outfit,'Noto Sans SC',sans-serif; font-size:.6875rem; opacity:.65; }
.ops-site-switch button[aria-pressed=true] { color:var(--cyan); border-color:var(--cyan); background:var(--control); }
.ops-site-switch button:hover { color:var(--ink); background:var(--surface2); }
.ops-console-note { color:var(--muted); font-size:.6875rem; line-height:1.6; margin:16px 0 0; }
.ops-accessible-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.ops-console button:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.ops-map-stage.is-scope-changing .ops-map-canvas { animation:ops-view-enter 450ms ease-out both; }
@keyframes ops-view-enter { from { opacity:.35; transform:scale(.98); } to { opacity:1; transform:none; } }
[data-theme="light"] .ops-console-legend span + span::before { border-color:var(--muted); }
.theme-changing :is(.ops-map-stage,.ops-scope-switch,.ops-map-navigation,.ops-selected-site,.ops-console-kpis > div,.ops-console-footer) { transition:background-color 300ms ease-out,border-color 300ms ease-out,color 300ms ease-out; }
@media(max-width:1000px) {
  .ops-console-body { grid-template-columns:minmax(0,1fr) 224px; gap:24px; }
  .ops-console { padding:24px; }
  .ops-map-caption > span:last-child { max-width:152px; text-align:right; }
}
@media(max-width:760px) {
  .ops-console-heading { gap:16px; align-items:flex-start; }
  .ops-console-heading h3 { font-size:1.0625rem; }
  .ops-demo-label { font-size:.625rem; white-space:normal; max-width:120px; line-height:1.6; text-align:right; }
  .ops-console-body { grid-template-columns:1fr; gap:24px; padding-block:24px; }
  .ops-map-stage { height:344px; }
  .ops-map-canvas { inset:56px 8px 40px; }
  .ops-map-navigation { right:12px; bottom:48px; }
  .ops-map-navigation button { width:36px; height:36px; }
  .ops-map-toolbar { top:12px; left:12px; right:12px; gap:8px; }
  .ops-map-level { font-size:.625rem; }
  .ops-scope-switch button { min-width:56px; padding-inline:12px; }
  .ops-map-caption { bottom:12px; left:12px; right:12px; font-size:.625rem; gap:8px; }
  .ops-map-caption > span:last-child { max-width:120px; }
  .ops-inspector { gap:24px; }
  .ops-selected-site { padding-bottom:0; border:0; }
  .ops-selected-site h4 { font-size:1rem; }
  .ops-selected-site .eyebrow { font-size:.625rem; }
  .ops-console-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .ops-console-kpis > div { display:block; padding:0; border:0; }
  .ops-console-kpis strong { display:block; font-size:1.875rem; margin-top:8px; }
  .ops-console-kpis > div > span { font-size:.6875rem; }
  .ops-console-kpis small { display:block; margin:4px 0 0; font-size:.625rem; }
  .ops-console-trend .ops-chart { height:112px; }
  .ops-console-footer { display:block; padding-top:24px; }
  .ops-console-footer > span { display:block; margin-bottom:12px; }
  .ops-site-switch { gap:8px; }
  .ops-site-switch button { padding-inline:12px; font-size:.75rem; }
  .ops-site-switch button > span { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .ops-console *, .ops-console *::before, .ops-console *::after { animation:none!important; transition:none!important; }
}