/* ===========================================================================
   Stoian Co - Living Demo Engine (shared)
   Single source of truth for the showcase demo look + behaviour.
   Loaded by every demo via  ../../_engine/sc-engine.css
   Brand palette: navy #172A53 / coquelicot #F34213 / sea #009069 / citrine #E0CA3C
   =========================================================================== */
:root{
  --navy:#172A53; --coq:#F34213; --sea:#009069; --citrine:#E0CA3C;
  --line:#E2E6EE; --ink:#1D2330; --mut:#5b6577; --paper:#f6f7fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);
  background:var(--paper);font-size:14px;-webkit-text-size-adjust:100%}

/* ---- app shell : header + full-bleed map ------------------------------- */
#sc-app{position:fixed;inset:0;display:flex;flex-direction:column}
#sc-app > header{background:var(--navy);color:#fff;padding:11px 18px;flex:none;z-index:6}
#sc-app > header h1{font-family:'Times New Roman',Georgia,serif;font-weight:400;
  font-size:19px;margin:0;line-height:1.2}
#sc-app > header p{margin:3px 0 0;font-size:12px;opacity:.88}
#sc-main{position:relative;flex:1 1 auto;min-height:0}
/* full-bleed map only inside the engine shell; bespoke-layout demos keep their
   own #map rules (sidebar / fixed-height) untouched. .sc-map opts in anywhere. */
#sc-main #map,#sc-main #cesiumContainer,.sc-map{position:absolute;inset:0}

/* ---- floating dashboard ------------------------------------------------ */
#sc-main{--scdw:372px}
#sc-dash{position:absolute;top:12px;right:12px;width:var(--scdw,372px);
  max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;
  display:flex;flex-direction:column;gap:10px;z-index:5;-webkit-overflow-scrolling:touch}
#sc-dash.left{right:auto;left:12px}

/* Quiet scrollbars inside the panel. Ovidiu, 260727: "when moving the card on the left I
   have the scroll bar there ... can we remove that or make it smaller". The Windows native
   bar is 17px of grey furniture standing between the panel and the map, and on a left
   docked dash that is exactly where the eye travels. Thin and translucent at rest, solid
   under the cursor. It is not removed: this panel genuinely overflows by hundreds of
   pixels and a scroll affordance nobody can see is a panel that looks like it ends early.
   Written once here, so all 60 demos get it and not just the migrated ones. */
#sc-dash,.buildup,.card>.sc-bd{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.38) transparent}
#sc-dash:hover,.buildup:hover,.card>.sc-bd:hover{scrollbar-color:rgba(71,85,105,.62) transparent}
#sc-dash::-webkit-scrollbar,.buildup::-webkit-scrollbar,.card>.sc-bd::-webkit-scrollbar{width:7px;height:7px}
#sc-dash::-webkit-scrollbar-track,.buildup::-webkit-scrollbar-track,.card>.sc-bd::-webkit-scrollbar-track{background:transparent}
#sc-dash::-webkit-scrollbar-thumb,.buildup::-webkit-scrollbar-thumb,.card>.sc-bd::-webkit-scrollbar-thumb{background:rgba(100,116,139,.38);border-radius:4px}
#sc-dash:hover::-webkit-scrollbar-thumb,.buildup:hover::-webkit-scrollbar-thumb,.card>.sc-bd:hover::-webkit-scrollbar-thumb{background:rgba(71,85,105,.62)}

/* The build-up control does not scroll away. It is the one thing a reader reaches for from
   anywhere in a panel that is routinely twice the height of its box, and it was measured at
   45 to 57 percent of the panel on a desktop and up to 94 percent on a phone when the whole
   card was pinned, which is why only the control strip is. The rows and the essence scroll
   under it, and the two boxes meet edge to edge so they still read as one card.
   Ovidiu, 260727: "if I scroll, this must always be visible, like a header". */
#sc-dash>.sc-buhd{position:sticky;top:0;z-index:6;
  border-bottom-left-radius:0;border-bottom-right-radius:0}
#sc-dash>.sc-buhd h2{margin-bottom:6px}
#sc-dash>.sc-buhd+.sc-burest{margin-top:-10px;border-top:0;
  border-top-left-radius:0;border-top-right-radius:0}

/* ---- resizable dashboard : sticky-footer style drag handle -------------------- */
.sc-rsz{position:absolute;top:50%;transform:translateY(-50%);
  right:calc(var(--scdw,372px) + 12px);width:12px;height:60px;z-index:6;
  background:var(--citrine);border:1px solid #fff;border-radius:6px;
  cursor:col-resize;touch-action:none;display:flex;align-items:center;
  justify-content:center;box-shadow:0 1px 6px rgba(20,30,60,.32)}
.sc-rsz::before{content:"\22EE";color:var(--navy);font:13px/1 Arial;font-weight:700}
.sc-rsz:hover,.sc-rsz.drag{background:var(--coq)}
.sc-rsz:hover::before,.sc-rsz.drag::before{color:#fff}
#sc-main.left-dash .sc-rsz{right:auto;left:calc(var(--scdw,372px) + 12px)}
/* freeform handle: rides the inner edge of any floating / side panel */
.sc-rsz-free{position:absolute;top:50%;right:auto;left:auto;
  transform:translateY(-50%);z-index:7}
.sc-rsz-free.on-right{right:3px}
.sc-rsz-free.on-left{left:3px}
#sc-rszbadge{position:fixed;z-index:60;background:var(--navy);color:#fff;
  font:700 12px/1 Consolas,monospace;padding:4px 8px;border-radius:6px;
  pointer-events:none;display:none;box-shadow:0 3px 14px rgba(0,0,0,.34)}
/* mobile: width handle is meaningless on a full-width bottom sheet; a top
   grip lets you drag the sheet taller / shorter instead */
.sc-grip{display:none}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;
  box-shadow:0 2px 12px rgba(20,30,60,.13)}
.card h2{font-family:'Times New Roman',Georgia,serif;font-weight:400;font-size:15px;
  margin:0 0 8px;color:var(--navy);display:flex;align-items:center;gap:6px}
.card h2 .sc-x{margin-left:auto;cursor:pointer;color:var(--mut);font-family:Arial;
  font-size:15px;line-height:1;user-select:none;padding:0 4px}
.card.collapsed .sc-bd{display:none}
.card .sub{font-size:11px;color:var(--mut);margin:-4px 0 8px}

table{border-collapse:collapse;width:100%;font-size:12px}
td,th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
td.r,th.r{text-align:right}
tr.sel-row{cursor:pointer}
tr.sel-row:hover{background:#f0f3f9}
tr.sel-row.active{background:#e4ecf8}
.note{font-size:11px;color:#823038;font-style:italic;margin-top:6px}
.pill{display:inline-block;background:#f0f3f9;border-radius:10px;padding:1px 8px;
  font-size:11px;color:var(--navy)}
.bar{height:14px;border-radius:3px;display:flex;overflow:hidden;margin:6px 0}
.bar .seg{height:100%}

/* ---- KPI tiles --------------------------------------------------------- */
.sc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.sc-kpi{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:8px 9px}
.sc-kpi .v{font-size:18px;font-weight:700;color:var(--navy);line-height:1.1}
.sc-kpi .k{font-size:10.5px;color:var(--mut);margin-top:2px}

/* ---- legend (toggleable + provenance) ---------------------------------- */
.sc-lg{font-size:12px;line-height:1.5}
.sc-lg .row{display:flex;align-items:center;gap:7px;padding:3px 0;cursor:pointer;
  user-select:none}
.sc-lg .row.off{opacity:.4}
.sc-lg .sw{width:13px;height:13px;border-radius:3px;flex:none;
  border:1px solid rgba(0,0,0,.15)}
.sc-lg .sw.ln{height:4px;border-radius:2px;align-self:center}
.sc-lg .sw.dot{border-radius:50%}
.sc-lg .lb{flex:1}
.sc-lg .pv{font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 6px;
  border-radius:9px;text-transform:uppercase;flex:none}
.pv.real{background:#dff0e8;color:#0a6b46}
.pv.syn{background:#fde6df;color:#b23a16}
.pv.mix{background:#fbf3d6;color:#8a6d12}
.sc-prov-note{font-size:10.5px;color:var(--mut);margin-top:7px;line-height:1.4}

/* ---- insights ---------------------------------------------------------- */
.sc-ins{font-size:12px;line-height:1.55;margin:0;padding-left:16px}
.sc-ins li{margin:3px 0}
.sc-ins b{color:var(--navy)}

/* ---- acronym glossary tooltip ------------------------------------------ */
.sc-ab{border-bottom:1px dotted var(--coq);cursor:help}
#sc-tip{position:fixed;z-index:50;max-width:min(262px,calc(100vw - 20px));background:#0f1a33;color:#fff;
  font-size:11.5px;line-height:1.45;padding:8px 10px;border-radius:7px;
  box-shadow:0 4px 18px rgba(0,0,0,.32);pointer-events:none;opacity:0;
  transition:opacity .12s;display:none}
#sc-tip b{color:var(--citrine)}

/* ---- layer-reveal stepper : scroll the slider to turn analysis layers on */
.sc-steps{display:flex;gap:11px;font-size:12px;align-items:stretch}
.sc-steps .rail{position:relative;width:14px;flex:none;border-radius:7px;
  background:var(--line);cursor:pointer;touch-action:none}
.sc-steps .rail .fill{position:absolute;left:0;right:0;top:0;border-radius:7px;
  background:linear-gradient(180deg,var(--sea),var(--navy))}
.sc-steps .rail .thumb{position:absolute;left:50%;top:0;width:22px;height:22px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  border:3px solid var(--coq);box-shadow:0 1px 6px rgba(20,30,60,.4);
  cursor:grab;touch-action:none}
.sc-steps .rail .thumb.drag{cursor:grabbing}
.sc-steps ol{list-style:none;margin:0;padding:0;flex:1;display:flex;
  flex-direction:column;justify-content:space-between;gap:6px}
.sc-steps li{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;
  opacity:.4;transition:opacity .14s}
.sc-steps li.on{opacity:1}
.sc-steps li .sw{width:14px;height:14px;border-radius:3px;flex:none;
  border:1px solid rgba(0,0,0,.15)}
.sc-steps li .sw.ln{height:4px;align-self:center}
.sc-steps li .sw.dot{border-radius:50%}
.sc-steps li .tx{flex:1;line-height:1.25}
.sc-steps li .tx .d{font-size:10.5px;color:var(--mut);margin-top:1px}
.sc-steps li .pv{font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 6px;
  border-radius:9px;text-transform:uppercase;flex:none;align-self:center}
.sc-steps-mode{margin-top:9px;background:#fff;border:1px solid var(--line);
  border-radius:6px;font:600 11px Arial;color:var(--navy);padding:5px 10px;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.sc-steps-mode:hover{border-color:var(--coq);color:var(--coq)}
.sc-steps.toggle-mode .rail{opacity:.28;pointer-events:none}
.sc-steps.toggle-mode li{cursor:pointer}
.sc-steps.toggle-mode li::after{content:"";width:26px;height:15px;border-radius:9px;
  flex:none;margin-left:auto;background:var(--line);position:relative;transition:background .14s}
.sc-steps.toggle-mode li.on::after{background:var(--sea)}
.sc-steps.toggle-mode li::before{content:"";position:absolute;right:11px;width:11px;
  height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .14s;z-index:1}
.sc-steps.toggle-mode li.on::before{transform:translateX(11px)}
.sc-steps .hint{font-size:10.5px;color:var(--mut);margin-top:7px;line-height:1.4}

/* ---- time slider ------------------------------------------------------- */
.sc-time{display:flex;align-items:center;gap:9px}
.sc-time input[type=range]{flex:1;accent-color:var(--coq)}
.sc-time .t{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);
  min-width:64px;text-align:right;font-size:13px}
.sc-time .play{cursor:pointer;border:1px solid var(--line);background:#fff;
  border-radius:6px;width:28px;height:26px;font-size:12px;color:var(--navy)}

/* ---- maplibre cooperative-gesture hint: only meaningful on touch ------- */
.maplibregl-popup,.mapboxgl-popup{max-width:280px}

@media (max-width:768px){
  html,body{overflow-x:hidden}
  #sc-main{--scdw:auto}
  .sc-rsz{display:none}
  #sc-dash{top:auto;bottom:8px;left:8px;right:8px;width:auto;max-width:none;
    max-height:var(--scdh,52vh)}
  #sc-dash.left{left:8px}
  #sc-app > header h1{font-size:17px}
  /* top grip to drag the bottom sheet taller / shorter */
  .sc-grip{display:flex;align-items:center;justify-content:center;height:20px;
    margin:-2px 0 2px;cursor:row-resize;touch-action:none;position:sticky;top:0;
    background:#fff;z-index:2}
  .sc-grip::before{content:"";width:42px;height:5px;border-radius:3px;
    background:var(--line)}
  .sc-grip:active::before{background:var(--coq)}
  .maplibregl-popup,.mapboxgl-popup{max-width:80vw !important}
}

/* ---- shared build-up stepper (SC.buildup) ---- */
.grp{margin-bottom:16px}
.grp h2{font-family:"Times New Roman",serif;color:#172A53;font-weight:400;border-bottom:1px solid #e5e7eb;padding-bottom:4px}
.stepnav{display:flex;align-items:center;gap:6px;margin:6px 0}
.stepnav button{width:30px;height:28px;border:1px solid #cbd5e1;background:#fff;color:#172A53;border-radius:6px;cursor:pointer}
.stepnav button:disabled{opacity:.35;cursor:default}
.stepnav .ct{font:11px Consolas,monospace;color:#64748b}
/* free-mode toggle: the engine wires and relabels this button (SC.buildup opts.freeEl),
   so the engine also styles it. Demos that still carry an inline copy override harmlessly. */
.freebtn{margin-left:auto;width:auto!important;padding:0 9px!important;font-size:10.5px;font-weight:bold;white-space:nowrap}
.freebtn.on{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.buildup{max-height:210px;overflow:auto}
.lgh{font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin:8px 0 3px}
.lrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;padding:4px 6px;border-radius:6px;cursor:pointer;font:12px Arial,sans-serif;color:#172A53}
.lrow:hover{background:#f1f5f9}
.lrow.on{background:#172A53;color:#fff}
.lrow .n{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#e2e8f0;color:#172A53;font:10px Consolas,monospace;display:flex;align-items:center;justify-content:center}
.lrow.on .n{background:rgba(255,255,255,.25);color:#fff}
.lrow .out{margin-left:auto;font:8px Arial,sans-serif;font-weight:700;text-transform:uppercase;background:#E0CA3C;color:#0D1A35;padding:1px 6px;border-radius:8px}
.lrow .out.cc{background:#F34213;color:#fff}
.essence{background:#f8fafc;border-radius:6px;padding:8px;font:11.5px Arial,sans-serif;color:#334155;margin-top:6px}
.cx-meta{font:12px Arial,sans-serif;color:#172A53;font-weight:700;margin-bottom:6px}
.cx-row{font:11px Arial,sans-serif;color:#334155;padding:3px 0;border-top:1px solid #eef2f7}
@media(max-width:640px){.buildup{max-height:140px}}