/* Analytics + explore pages (engagement, monetization, events, funnels, query, dashboards, alerts).
   Uses the app.css tokens only. Side lists are the kit .list/.list-item, tags are .chip, page and card
   spacing comes from .stack/.row gaps — nothing here sets an outer margin. */

/* ------------------------------------------------------------------ results & big numbers */
.oql-result { min-width: 0; }
.ex-numbers { display: grid; gap: var(--sp-3) var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; }
.ex-number { min-width: 0; }
.ex-number-v { font-size: var(--fs-6); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* dashboard number tiles read like a .kpi: left-aligned value under the card title */
.ex-w-number { display: flex; flex-direction: column; justify-content: flex-start; }
/* a row of stat() pairs (session length, currency flows) */
.ex-stats { column-gap: var(--sp-6); }

/* ------------------------------------------------------------------ heatmaps */
table.ex-heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; font-size: var(--fs-1); }
table.ex-heat th { font-weight: 500; color: var(--muted); padding: var(--sp-1) var(--sp-1); text-align: center; white-space: nowrap; }
table.ex-heat th.l, table.ex-heat td.l { text-align: left; }
table.ex-heat td { height: 26px; padding: 0 var(--sp-1); text-align: center; vertical-align: middle; border-radius: calc(var(--radius-s) - 2px); min-width: 34px; transition: background-color var(--dur-3) var(--ease); }
table.ex-heat td.l { color: var(--text-2); white-space: nowrap; padding: 0 var(--sp-3) 0 0; }
/* light text only where the accent fill is dark enough for it (dark theme: from 60%; light theme: from 85%) */
:root:not([data-theme="light"]) table.ex-heat td.hot, table.ex-heat td.hot2 { color: var(--on-primary); }
/* hour grid: equal columns (only every third header has text) */
table.ex-heat.hour { table-layout: fixed; }
table.ex-heat.hour th.l { width: 40px; }
table.ex-heat.hour th { padding-left: 0; padding-right: 0; }
table.ex-heat.hour td { height: 22px; padding: 0; min-width: 0; font-size: 0; line-height: 22px; }
table.ex-heat.hour td:hover { outline: 1px solid var(--text-2); outline-offset: -1px; }
table.ex-heat.hour td.l { font-size: var(--fs-1); padding: 0 var(--sp-2) 0 0; outline: none; overflow: hidden; }
table.ex-heat tr.ex-avg td { border-top: 1px solid var(--border); font-weight: 600; }

/* ------------------------------------------------------------------ funnels + side lists */
.ex-split-side { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap); align-items: start; }
/* two-line list items (title + query / step count) in the query and funnel side panels */
.ex-side-list { max-height: 60vh; overflow-y: auto; }
.ex-side-list .list-item { flex-direction: column; align-items: stretch; gap: 0; }
.ex-side-list code { display: block; color: var(--faint); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-side-list code.ex-hist { color: var(--text-2); font-size: var(--fs-2); }
.ex-side-list .ex-sub { display: block; color: var(--faint); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* meta in the UI font: mono is for code */
.ex-side-label { padding-top: var(--sp-3); }
.ex-side-empty { padding: var(--sp-3) 10px; }
.ex-side > .tabs { margin-bottom: 0; }
.ex-help { padding-top: var(--sp-3); border-top: 1px solid var(--border); line-height: 1.6; }
.ex-saved-row { display: flex; align-items: center; gap: 2px; }
.ex-saved-row > .list-item { flex: 1; min-width: 0; }
.ex-saved-row > .btn { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.ex-saved-row:hover > .btn, .ex-saved-row:focus-within > .btn { opacity: 1; }

.ex-funnel { display: flex; flex-direction: column; gap: var(--gap); }
.ex-funnel-step { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ex-funnel-head { display: flex; align-items: center; gap: var(--sp-2); }
.ex-funnel-idx { width: 20px; height: 20px; border-radius: 50%; background: var(--hover); color: var(--text-2); display: inline-grid; place-items: center; font-size: var(--fs-1); font-weight: 600; flex: none; }
.ex-funnel-pct { min-width: 52px; text-align: right; }
.ex-funnel-track { height: 10px; border-radius: var(--radius-s); background: var(--hover); overflow: hidden; }
.ex-funnel-track i { display: block; height: 100%; border-radius: var(--radius-s); transition: width var(--dur-3) var(--ease); }
.ex-funnel-drop { padding-left: calc(20px + var(--sp-2)); }
.ex-step-row { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--gap-s); align-items: center; }
.ex-narrow { width: 96px; }
.ex-countcell { display: grid; grid-template-columns: minmax(48px, 1fr) 6ch; gap: var(--sp-2); align-items: center; justify-items: end; min-width: 120px; font-variant-numeric: tabular-nums; }
.ex-countcell .bar { width: 100%; }

/* ------------------------------------------------------------------ query console */
.ex-query { grid-template-columns: minmax(0, 1fr) 320px; }
.ex-editor { position: relative; border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.ex-editor:hover { border-color: var(--faint); }
.ex-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* the highlight overlay and the textarea must share every metric (oqlEditor reads them back) */
.ex-editor pre, .ex-editor textarea {
  margin: 0; padding: var(--sp-3); font: var(--fs-3)/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; tab-size: 2;
  min-height: 64px; border: 0; background: transparent; letter-spacing: 0;
}
.ex-editor pre { position: absolute; inset: 0; pointer-events: none; color: var(--text); overflow: hidden; }
.ex-editor textarea { position: relative; width: 100%; color: transparent; caret-color: var(--text); resize: vertical; outline: none; height: auto; display: block; }
.ex-editor textarea, .ex-editor textarea:focus, .ex-editor textarea:hover { box-shadow: none; }
.ex-editor textarea::selection { background: var(--accent-bg); color: transparent; }
.tok-kw { color: var(--s5); font-weight: 600; }
.tok-fn { color: var(--s1); }
.tok-str { color: var(--s2); }
.tok-num { color: var(--s3); }
.tok-src { color: var(--s6); font-weight: 600; }
.tok-err { text-decoration: wavy underline var(--bad); text-underline-offset: 3px; }
/* autocomplete: a menu-layer surface with the kit .menu look */
.ex-suggest { position: absolute; z-index: var(--z-menu); min-width: 220px; max-width: 360px; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-1); transform-origin: top left; animation: pop-in var(--dur-1) var(--ease-out); }
.ex-suggest div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); border-radius: calc(var(--radius) - var(--sp-1)); cursor: pointer; font: var(--fs-2) var(--mono); }
.ex-suggest div small { color: var(--faint); font-family: var(--font); }
.ex-suggest div.on, .ex-suggest div:hover { background: var(--hover); }
.ex-toolbar, .ex-toolbar > .row { gap: var(--gap-s); min-width: 0; }

/* ------------------------------------------------------------------ dashboards */
.ex-dash { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-w { min-width: 0; display: flex; flex-direction: column; }
.ex-w .card-b { flex: 1; }
.ex-w.w1 { grid-column: span 1; } .ex-w.w2 { grid-column: span 2; } .ex-w.w3 { grid-column: span 3; } .ex-w.w4 { grid-column: span 4; }
.ex-w .ex-w-tools { opacity: 0; transition: opacity var(--dur-1) var(--ease); display: flex; gap: 2px; }
.ex-w:hover .ex-w-tools, .ex-w:focus-within .ex-w-tools { opacity: 1; }
.ex-w.dragging { opacity: .45; }
.ex-w.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.ex-w .err-box { font-size: var(--fs-2); }

/* ------------------------------------------------------------------ alerts */
.ex-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--pad); border-bottom: 1px solid var(--border); transition: background-color var(--dur-1) var(--ease); }
.ex-rule:hover { background: var(--panel-2); }
.ex-rule:last-child { border-bottom: 0; }
.ex-rule-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ex-state { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.ex-state.s1 { background: var(--warn); }
.ex-state.s2 { background: var(--bad); box-shadow: 0 0 0 0 var(--bad); animation: ex-ping calc(var(--dur-3) * 5) var(--ease) infinite; }
.ex-state.s3 { background: var(--faint); }
.ex-state.off { background: var(--border-2); }
@keyframes ex-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ex-presets { gap: var(--gap-s); }
.ex-preset { text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; color: inherit; font: inherit; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.ex-preset:hover { border-color: var(--accent); background: var(--hover); }
.ex-timeline { position: relative; padding-left: 18px; }
.ex-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border-2); }
.ex-tl-item { position: relative; padding-bottom: var(--gap); }
.ex-tl-item:last-child { padding-bottom: 0; }
.ex-tl-item::before { content: ""; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--bad); }
.ex-tl-item.closed::before { border-color: var(--ok); }
.ex-targets { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ex-target { display: inline-flex; align-items: center; gap: var(--sp-1); height: 20px; padding: 0 var(--sp-2); border-radius: calc(var(--radius-s) - 1px); background: var(--hover); color: var(--text-2); font: var(--fs-1) var(--mono); border-left: 2px solid var(--ok); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-target.s1 { border-left-color: var(--warn); }
.ex-target.s2 { border-left-color: var(--bad); color: var(--text); }
.ex-target.s3 { border-left-color: var(--faint); }
/* collapsible "advanced" block in forms (alerts, studio games) */
.ex-adv { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--sp-3); }
.ex-adv > summary { display: flex; align-items: center; min-height: var(--ctl-h); padding: var(--sp-1) 0; list-style: none; cursor: pointer; color: var(--text-2); font-weight: 500; }
.ex-adv > summary::before { content: "›"; display: inline-block; width: 1em; color: var(--muted); transition: transform var(--dur-1) var(--ease); }
.ex-adv > summary::-webkit-details-marker { display: none; }
.ex-adv[open] > summary::before { transform: rotate(90deg); }
.ex-adv[open] { padding-bottom: var(--sp-3); }
.ex-adv[open] > summary { padding-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ events & economy */
.ex-props { flex-wrap: nowrap; overflow: hidden; max-width: 520px; }
.ex-props .chip { height: 22px; padding: 0 8px; flex: none; }

/* grids follow the content width, like the kit grids */
@container content (max-width: 1080px) {
  .ex-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-w.w3, .ex-w.w4 { grid-column: span 2; }
  .ex-query { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ex-dash { grid-template-columns: minmax(0, 1fr); }
  .ex-w.w1, .ex-w.w2, .ex-w.w3, .ex-w.w4 { grid-column: auto; }
  .ex-rule { grid-template-columns: auto minmax(0, 1fr); }
  .ex-rule > :nth-child(3), .ex-rule > :nth-child(4) { grid-column: 2; justify-self: start; text-align: left; }
  .ex-step-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ex-split-side { grid-template-columns: minmax(0, 1fr); }
  .ex-number-v { font-size: var(--fs-kpi); }
  .ex-countcell { min-width: 90px; }
}
/* no hover on touch: row tools stay visible; editor text at 16px so iOS doesn't zoom on focus */
@media (hover: none), (max-width: 760px) {
  .ex-saved-row > .btn, .ex-w .ex-w-tools { opacity: 1; }
}
@media (pointer: coarse) {
  .ex-editor pre, .ex-editor textarea { font-size: 16px; }
  .ex-suggest div { min-height: 40px; }
}
@media (pointer: coarse) { :root .ex-props .chip { height: 24px; padding: 0 8px; } }   /* static labels, not targets */