/* crowd.css - the crowd simulation. Tokens (--bg, --card, --text, --muted, --line, --accent, --amber, --red, --ok) come from obeya.css. Sizes are rem so the tile mode can scale them. */
/* page-level rules only apply to the standalone page (html.cs-page): the same file is loaded INLINE in the Obeya page, where nothing global may change */
html.cs-page,html.cs-page body{height:100%}
.cs-app [hidden],.cs-in [hidden]{display:none!important}
html.cs-page body{overflow:hidden;background:var(--bg);color:var(--text)}
.cs-app{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.cs-top{display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);background:var(--card)}
.cs-back{font:600 .875rem/1.2 Inter,sans-serif;text-decoration:none;color:var(--accent-text);white-space:nowrap;padding:.4rem .2rem}
.cs-back:hover{text-decoration:underline}
.cs-title{margin:0;font:800 1.1rem/1.1 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-title em{font-style:normal;font-weight:600;color:var(--muted);margin-left:.35rem}
.cs-top-tools{display:flex;gap:.5rem}
.cs-top .ob-theme{color:var(--text)}
.cs-main{display:grid;grid-template-columns:minmax(0,1fr) 23.5rem;min-height:0}
.cs-stage{position:relative;min-height:0;min-width:0;background:var(--bg-2);overflow:hidden}
.cs-stage canvas#gl{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}
.cs-stage.is-barrier canvas#gl{cursor:crosshair}
.cs-stage canvas#gl:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.cs-ic{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.15em}
.cs-note{margin:0;padding:.3rem 1rem;font-size:.72rem;line-height:1.3;color:var(--muted);border-top:1px solid var(--line);background:var(--card)}

/* overlays on the 3D stage */
.cs-kpis{position:absolute;left:.75rem;top:.75rem;display:flex;flex-wrap:wrap;gap:.45rem;max-width:calc(100% - 28rem);pointer-events:none}
.cs-k{background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:.75rem;padding:.4rem .7rem;min-width:5.2rem;box-shadow:0 6px 18px -12px rgba(10,20,40,.5)}
.cs-k span{display:block;font:600 .66rem/1.2 Inter,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cs-k b{display:block;font:700 1.25rem/1.15 "IBM Plex Mono",monospace;margin-top:.1rem}
.cs-k b small{font-size:.65em;font-weight:500;color:var(--muted)}
.cs-k i{display:block;font:500 .7rem/1.2 Inter,sans-serif;font-style:normal;color:var(--muted);max-width:9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-k.cs-d-r b{color:var(--red)} .cs-k.cs-d-a b{color:var(--amber)} .cs-k.cs-d-g b{color:var(--ok)}
.cs-k--clock b{font-size:1.1rem}
.cs-k--clock span{max-width:8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-views{position:absolute;right:.75rem;top:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end;max-width:min(26rem,55%)}
.cs-views button,.cs-light{min-width:2.6rem;justify-content:center;display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--text);font:600 .78rem/1 Inter,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.cs-views button:hover{border-color:var(--accent)}
.cs-views button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 18%,var(--card));border-color:var(--accent);color:var(--accent-text)}
.cs-light input{width:6rem;accent-color:var(--accent)}
.cs-chartwrap{position:absolute;left:.75rem;bottom:.75rem;width:min(22rem,46%);height:7.4rem;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:.75rem;padding:.35rem .5rem .25rem}
.cs-chartwrap canvas{width:100%;height:calc(100% - 1rem);display:block}
.cs-chartlbl{display:block;font:500 .62rem/1.2 Inter,sans-serif;color:var(--muted);margin-top:.15rem}
.cs-legend{position:absolute;right:.75rem;bottom:.75rem;display:flex;gap:.7rem;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font:600 .72rem/1 Inter,sans-serif;color:var(--text)}
.cs-legend.is-off{opacity:.35}
.cs-legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.3rem;vertical-align:-.05rem}
.cs-legend i.g{background:#4d8dff}.cs-legend i.a{background:#f5a623}.cs-legend i.r{background:#e1382d}
.cs-webgl-fail{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;font-weight:600}
.cs-pop{position:absolute;right:.75rem;top:7.1rem;width:min(21rem,calc(100% - 1.5rem));background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1rem 1rem;box-shadow:var(--shadow);z-index:5}
.cs-pop[hidden]{display:none}
.cs-pop-x{position:absolute;right:.4rem;top:.4rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.cs-pop-x:hover{background:var(--accent-soft)}
.cs-pop-h{font:600 .9rem/1.2 Inter,sans-serif;padding-right:2.4rem}
.cs-pop-h b{font:700 1.7rem/1 "IBM Plex Mono",monospace}
.cs-pop-h span{display:block;margin-top:.2rem;font-size:.78rem}
.cs-d-r{color:var(--red)} .cs-d-a{color:var(--amber)} .cs-d-g{color:var(--ok)}
.cs-pop-w{margin:.5rem 0;font-size:.86rem;color:var(--muted)}
.cs-pop-k{display:flex;gap:1.2rem;margin:.4rem 0 .6rem}
.cs-pop-k div{display:flex;flex-direction:column}
.cs-pop-k dt{font:600 .66rem/1 Inter,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cs-pop-k dd{margin:.2rem 0 0;font:700 1rem/1 "IBM Plex Mono",monospace}
.cs-pop-s{font:700 .78rem/1.2 Inter,sans-serif;margin:.4rem 0 .3rem}
.cs-adv{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cs-adv li{display:flex;gap:.6rem;align-items:center;justify-content:space-between;font-size:.84rem;line-height:1.3;padding:.5rem .6rem;border-radius:.6rem;background:var(--bg-2)}
.cs-tilebar{position:absolute;right:.6rem;bottom:.6rem}
.cs-tbtn{width:2.6rem;height:2.6rem;min-width:40px;min-height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--text);display:grid;place-items:center;cursor:pointer}
.cs-tbtn svg{width:1.1rem;height:1.1rem}

/* side panel */
.cs-panel{overflow:auto;border-left:1px solid var(--line);background:var(--bg);padding:.6rem .75rem 1.5rem}
.cs-sec{border:1px solid var(--line);border-radius:1rem;background:var(--card);margin-bottom:.65rem}
.cs-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;font:700 .92rem/1.2 "Inter Tight",Inter,sans-serif;min-height:2.75rem}
.cs-sec>summary::-webkit-details-marker{display:none}
.cs-sec>summary::after{content:"";margin-left:auto;width:.55rem;height:.55rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.cs-sec[open]>summary::after{transform:rotate(225deg)}
.cs-sec-b{padding:0 .9rem .9rem}
.cs-presets{display:grid;gap:.45rem;margin-bottom:.7rem}
.cs-preset{display:flex;gap:.65rem;align-items:center;text-align:left;padding:.55rem .7rem;border-radius:.8rem;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;min-height:2.75rem}
.cs-preset b{display:block;font:700 .86rem/1.2 Inter,sans-serif}
.cs-preset small{display:block;font:400 .74rem/1.3 Inter,sans-serif;color:var(--muted)}
.cs-preset .cs-ic{width:1.4rem;height:1.4rem;color:var(--accent-text)}
.cs-preset:hover{border-color:var(--accent)}
.cs-preset[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cs-ctl{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.55rem 0}
.cs-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.4rem .8rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);font:600 .8rem/1.1 Inter,sans-serif;cursor:pointer}
.cs-btn:hover:not(:disabled){border-color:var(--accent)}
.cs-btn:disabled{opacity:.45;cursor:default}
.cs-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.cs-btn--pri{background:linear-gradient(135deg,#7ab4ff,var(--accent) 45%,var(--accent-2));border-color:transparent;color:var(--btn-text)}
.cs-btn--sm{min-height:2.25rem;padding:.3rem .65rem;font-size:.76rem;white-space:nowrap}
.cs-btn[hidden]{display:none}
.cs-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.cs-seg button{min-height:2.4rem;min-width:2.6rem;padding:0 .6rem;border:0;background:transparent;color:var(--text);font:700 .8rem/1 "IBM Plex Mono",monospace;cursor:pointer}
.cs-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
.cs-clock{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.4rem 0 0;font-size:.78rem;color:var(--muted)}
.cs-clock b{color:var(--text);font-family:"IBM Plex Mono",monospace}
.cs-row{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;margin:.55rem 0 .8rem}
.cs-row[hidden]{display:none}
.cs-row label{font:600 .84rem/1.2 Inter,sans-serif}
.cs-row output{font:600 .8rem/1.2 "IBM Plex Mono",monospace;color:var(--accent-text);text-align:right}
.cs-row input[type=range]{grid-column:1/-1;width:100%;margin:.25rem 0 0;height:2rem;accent-color:var(--accent);background:transparent}
.cs-row small{grid-column:1/-1;font-size:.72rem;line-height:1.35;color:var(--muted)}
.cs-sub{font:700 .72rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.9rem 0 .45rem}
.cs-exits{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.cs-sw{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.45rem .55rem;border-radius:.7rem;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;min-height:2.75rem;font:500 .76rem/1.2 Inter,sans-serif}
.cs-sw b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ok);color:#04130a;font:800 .8rem/1 Inter,sans-serif;flex:none}
.cs-sw span{flex:1;min-width:0}
.cs-sw-s{font-style:normal;font-weight:700;font-size:.68rem;color:var(--ok);text-transform:uppercase;letter-spacing:.05em}
.cs-sw.is-off{border-color:color-mix(in srgb,var(--red) 55%,var(--line))}
.cs-sw.is-off b{background:var(--red);color:#fff}
.cs-sw.is-off .cs-sw-s{color:var(--red)}
.cs-sw:hover{border-color:var(--accent)}
.cs-hint{margin:.4rem 0 0;font-size:.76rem;line-height:1.4;color:var(--muted)}
.cs-imp-h{display:flex;flex-direction:column;gap:.1rem;margin:.2rem 0 .5rem}
.cs-imp-h b{font:700 .86rem/1.25 Inter,sans-serif}
.cs-imp-h span{font-size:.74rem;color:var(--muted)}
.cs-imp-h--base{margin-top:.9rem}
.cs-chips{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.cs-chip{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;align-items:center;padding:.45rem .65rem;border-radius:.7rem;border:1px solid var(--line);background:var(--bg-2)}
.cs-chip-l{grid-column:1/-1;font:600 .68rem/1.2 Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cs-chip-v{font:500 .9rem/1.2 "IBM Plex Mono",monospace;color:var(--muted)}
.cs-chip-v b{color:var(--text);font-weight:700}
.cs-chip-v s{text-decoration:none}
.cs-chip-v em{font-style:normal;margin:0 .15rem}
.cs-chip-d{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem;border-radius:999px;font:700 .78rem/1 "IBM Plex Mono",monospace;background:var(--line);color:var(--muted)}
.cs-chip.cs-good{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.cs-chip.cs-good .cs-chip-d{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.cs-chip.cs-bad{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.cs-chip.cs-bad .cs-chip-d{background:color-mix(in srgb,var(--red) 20%,transparent);color:var(--red)}
.cs-ab{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.cs-ab[hidden]{display:none}
.cs-ab figure{margin:0}
.cs-ab canvas{width:100%;height:auto;aspect-ratio:4/3;border-radius:.6rem;border:1px solid var(--line);display:block}
.cs-ab figcaption{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.cs-log{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-height:17rem;overflow:auto}
.cs-log-i{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;padding:.45rem .6rem;border-radius:.6rem;border-left:4px solid var(--line);background:var(--bg-2);font-size:.8rem;line-height:1.3}
.cs-log-i time{font:600 .74rem/1.4 "IBM Plex Mono",monospace;color:var(--muted)}
.cs-log-r{grid-column:2;font-size:.74rem;color:var(--muted)}
.cs-log-i.cs-good{border-left-color:var(--ok)} .cs-log-i.cs-good .cs-log-r{color:var(--ok)}
.cs-log-i.cs-bad{border-left-color:var(--red)} .cs-log-i.cs-bad .cs-log-r{color:var(--red)}
.cs-log-empty{font-size:.78rem;color:var(--muted)}
.cs-hots{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.cs-hotb{display:flex;align-items:baseline;gap:.35rem;width:100%;text-align:left;padding:.5rem .7rem;border-radius:.7rem;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;min-height:2.5rem;font:500 .8rem/1.2 Inter,sans-serif}
.cs-hotb b{font:700 1rem/1 "IBM Plex Mono",monospace}
.cs-hotb span{margin-left:auto;color:var(--muted);font-size:.74rem;text-align:right}
.cs-hotb.cs-d-r b{color:var(--red)} .cs-hotb.cs-d-a b{color:var(--amber)}
.cs-hotb:hover{border-color:var(--accent)}
.cs-panel::-webkit-scrollbar{width:9px}

/* tile mode: only the stage, scaled by the root font size */
html.cs-tile body{background:var(--bg-2)}
html.cs-tile .cs-app{grid-template-rows:minmax(0,1fr) auto}
html.cs-tile .cs-main{grid-template-columns:minmax(0,1fr)}
html.cs-tile .cs-top,html.cs-tile .cs-panel{display:none}
html.cs-tile .cs-note{padding:.15rem .6rem;font-size:.6rem;background:var(--card)}
html.cs-tile .cs-kpis{max-width:calc(100% - 1.5rem)}
html.cs-tile .cs-k{padding:.3rem .55rem;min-width:4rem}
html.cs-tile .cs-k b{font-size:1.05rem}
html.cs-tile .cs-chartwrap{width:min(20rem,38%)}
html.cs-tile .cs-legend{bottom:.6rem;right:3.6rem;padding:.25rem .6rem;font-size:.62rem}
html.cs-tile .cs-pop{top:.6rem}

/* tablet and phone: the panel goes under the 3D view, the page scrolls vertically, never sideways */
@media(max-width:960px){
  .cs-kpis{max-width:calc(100% - 1.5rem)}
  html.cs-page body{overflow:auto;overflow-x:hidden}
  .cs-app{height:auto;min-height:100vh;display:block}
  .cs-main{display:block}
  .cs-stage{height:62vh;min-height:20rem}
  .cs-panel{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .cs-title{font-size:.95rem}
  .cs-title em{display:none}
  .cs-chartwrap{display:none}
  .cs-k{min-width:0;padding:.3rem .5rem}
  .cs-k b{font-size:1rem}
  .cs-k i{display:none}
  .cs-views{max-width:calc(100% - 1.5rem);top:auto;bottom:3.2rem}
  .cs-views button span{display:none}
  .cs-views button{padding:.35rem .6rem}
  .cs-legend{bottom:.6rem}
  .cs-pop{top:auto;bottom:.6rem;right:.6rem}
  html.cs-tile .cs-app{height:100vh;height:100dvh;display:grid}
  html.cs-tile .cs-main{display:grid}
  html.cs-tile .cs-stage{height:auto;min-height:0}
}
@media(max-width:420px){.cs-exits{grid-template-columns:1fr}.cs-k--clock{display:none}}

html.cs-tile .cs-legend{top:3.4rem;bottom:auto;right:.6rem}

/* inline mode (window.CovinceCrowd.mount): the stage fills its host box, sizes scale from the host's own font size */
.cs-in{position:absolute;inset:0;overflow:hidden;color:var(--text);background:#070a14;color-scheme:dark}
.cs-in .cs-stage{position:absolute;inset:0;height:auto;min-height:0;background:#070a14}
.cs-in .cs-pop{top:.6rem;bottom:auto;right:.6rem}

/* inline on the Obeya page: a vertical swipe on the 3D view scrolls the page (tablet), a sideways drag still turns the view */
.cs-in .cs-stage canvas#gl{touch-action:pan-y}