/* Interaction layer for the reverse-engineered BeVisible dashboard.
   Uses the app's own CSS variables so menus/tooltips/palette match the baked UI. */
:root { --elmo-z: 2147483000; }

/* ---- generic popover (dropdowns, menus) ---- */
.elmo-pop {
  position: fixed; z-index: var(--elmo-z);
  min-width: 12rem; max-width: 22rem;
  background: var(--popover, oklch(16% 0 0));
  color: var(--popover-foreground, oklch(97% 0 0));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: calc(var(--radius, .45rem) + 2px);
  box-shadow: var(--shadow-lg, 0 22px 48px #0000002e), 0 0 0 1px rgba(0,0,0,.4);
  padding: .3rem; overflow: auto; max-height: min(28rem, 70vh);
  animation: elmo-pop-in .12s cubic-bezier(.16,1,.3,1);
  font-size: .875rem;
}
@keyframes elmo-pop-in { from { opacity:0; transform: translateY(-4px) scale(.98);} to {opacity:1; transform:none;} }
.elmo-item {
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.42rem .55rem; border-radius: calc(var(--radius,.45rem) - 1px);
  cursor:pointer; color: inherit; background:transparent; border:0; text-align:left;
  font-size:.875rem; line-height:1.2; user-select:none; transition: background .1s;
}
.elmo-item:hover, .elmo-item[data-active="1"] { background: var(--accent, rgba(255,255,255,.06)); }
.elmo-item .elmo-ico { width:1.05rem; height:1.05rem; flex:0 0 auto; display:grid; place-items:center; opacity:.85; }
.elmo-item .elmo-ico img, .elmo-item .elmo-ico svg { width:100%; height:100%; object-fit:contain; }
.elmo-item .elmo-label { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.elmo-item .elmo-check { width:1rem; height:1rem; opacity:0; flex:0 0 auto; }
.elmo-item[data-checked="1"] .elmo-check { opacity:1; }
.elmo-sep { height:1px; margin:.3rem .2rem; background: var(--border, rgba(255,255,255,.08)); }

/* Injected filter menus keep their harvested check column (live.js draws the ticks).
   Keep items on one line and let the menu size to its content so nothing wraps. */
.elmo-menu-box [data-slot="menu-checkbox-item"], .elmo-menu-box [data-slot="menu-checkbox-item"] * { white-space: nowrap !important; }
.elmo-menu-box [role="menu"], .elmo-menu-box [data-slot="menu-popup"] { width: max-content !important; max-width: 22rem !important; }
.elmo-group-label { padding:.35rem .55rem .2rem; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; color: var(--muted-foreground, #8a8a8a); }

/* ---- tooltips ---- */
.elmo-tip {
  position: fixed; z-index: var(--elmo-z);
  max-width: 18rem; padding:.4rem .55rem;
  background: var(--popover, oklch(16% 0 0));
  color: var(--popover-foreground, #eee);
  border:1px solid var(--border, rgba(255,255,255,.08));
  border-radius: calc(var(--radius,.45rem) - 1px);
  box-shadow: var(--shadow-md, 0 16px 36px #00000029);
  font-size:.78rem; line-height:1.35; pointer-events:none;
  animation: elmo-pop-in .1s ease-out;
}

/* ---- command palette ---- */
.elmo-cmdk-backdrop {
  position: fixed; inset:0; z-index: calc(var(--elmo-z) + 10);
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh;
  animation: elmo-fade .12s ease-out;
}
@keyframes elmo-fade { from{opacity:0} to{opacity:1} }
.elmo-cmdk {
  width: min(40rem, 92vw); max-height: 68vh; display:flex; flex-direction:column;
  background: var(--popover, oklch(16.5% 0 0));
  border:1px solid var(--border, rgba(255,255,255,.1));
  border-radius: calc(var(--radius,.45rem) + 4px);
  box-shadow: var(--shadow-2xl, 0 40px 80px #0000003d);
  overflow:hidden; animation: elmo-pop-in .14s cubic-bezier(.16,1,.3,1);
}
.elmo-cmdk-input {
  width:100%; border:0; outline:0; background:transparent; color:inherit;
  padding:.95rem 1rem; font-size:1rem;
  border-bottom:1px solid var(--border, rgba(255,255,255,.08));
}
.elmo-cmdk-list { overflow:auto; padding:.4rem; }
.elmo-cmdk-empty { padding:2rem 1rem; text-align:center; color:var(--muted-foreground,#888); font-size:.9rem; }
.elmo-cmdk-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:.4rem; cursor:pointer; }
.elmo-cmdk-item[data-active="1"] { background: var(--accent, rgba(255,255,255,.07)); }
.elmo-cmdk-item .elmo-cmdk-t { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.elmo-cmdk-item .elmo-cmdk-s { font-size:.72rem; color:var(--muted-foreground,#888); flex:0 0 auto; }
.elmo-cmdk-kind { font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; padding:.08rem .32rem; border-radius:.3rem; background:var(--muted,rgba(255,255,255,.06)); color:var(--muted-foreground,#999); flex:0 0 auto; }
.elmo-cmdk-hint { display:flex; gap:.8rem; padding:.5rem .8rem; border-top:1px solid var(--border,rgba(255,255,255,.08)); font-size:.7rem; color:var(--muted-foreground,#888); }
.elmo-kbd { font-family: var(--font-geist-mono, ui-monospace); font-size:.68rem; padding:.05rem .3rem; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:.25rem; }

/* ---- chart hover tooltip (mirrors the real Recharts/shadcn tooltip) ---- */
.elmo-chart-tip {
  position: fixed; z-index: var(--elmo-z); pointer-events:none;
  background: var(--popover, oklch(16% 0 0)); color: var(--popover-foreground,#fafafa);
  border:1px solid var(--border, rgba(255,255,255,.1)); border-radius:.5rem;
  box-shadow: var(--shadow-lg, 0 22px 48px #0000002e);
  padding:.5rem .625rem; font-size:.8rem; line-height:1.3; min-width:9rem;
  transition: opacity .1s ease-out; opacity:0;
}
.elmo-chart-tip .elmo-ct-title { font-weight:600; font-size:.82rem; color: var(--foreground,#fff); margin-bottom:.35rem; }
.elmo-chart-tip .elmo-ct-row { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:.05rem 0; }
.elmo-chart-tip .elmo-ct-left { display:flex; align-items:center; gap:.45rem; min-width:0; }
.elmo-chart-tip .elmo-ct-dot { width:.62rem; height:.62rem; border-radius:3px; flex:0 0 auto; }
.elmo-chart-tip .elmo-ct-icon { width:1rem; height:1rem; border-radius:3px; object-fit:contain; flex:0 0 auto; }
.elmo-chart-tip .elmo-ct-icon-white { filter: brightness(0) invert(1); border-radius:0; } /* monochrome ChatGPT mark -> white on dark */

/* GLOBAL: the OpenAI/ChatGPT mark is a monochrome currentColor SVG that renders BLACK when loaded
   via <img>/<image>. Whiten it everywhere on the dark UI (sidebar, charts, tabs, lists, menus, panel). */
img[src*="openai"], image[href*="openai"], image[*|href*="openai"] { filter: brightness(0) invert(1) !important; }
.elmo-chart-tip .elmo-ct-label { color: var(--muted-foreground,#9a9a9a); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.elmo-chart-tip .elmo-ct-val { font-weight:600; color: var(--foreground,#fff); font-variant-numeric: tabular-nums; flex:0 0 auto; }

/* chart re-render entrance animation (mimics Recharts' grow-in on chart-type change) */
.elmo-chart-anim { animation: elmo-fade .18s ease-out; }
@keyframes elmo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* pie opening animation (sweep-in feel) */
.elmo-pie-in { animation: elmo-pie-in .55s cubic-bezier(.2,.7,.3,1); transform-origin: center; }
@keyframes elmo-pie-in { from { transform: scale(.6) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* toggle active state (chart type switch) */
button.elmo-toggle-on { background: var(--accent, color-mix(in oklab,#fff 10%,transparent)) !important; color: var(--foreground,#fff) !important; }
button.elmo-toggle-on svg { opacity: 1 !important; }

/* ---- setup wizard: plan cards (trial step) ----
   The vendored stylesheet only holds the utilities the harvested pages used, and
   the harvest had one card, so the grid is defined here rather than borrowed. */
.elmo-plan-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .elmo-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elmo-plan { display: flex; flex-direction: column; }
.elmo-plan .elmo-plan-features { flex: 1 1 auto; }
.elmo-plan-badge[hidden] { display: none; }

/* ---- "still calculating" placeholder (lib/calculating.ts) ----
   Stands in for harvested demo data in any region not wired to the worker. */
.elmo-calc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; min-height: 14rem; padding: 2.5rem 1.5rem; text-align: center;
}
.elmo-calc-detail { max-width: 22rem; }
.elmo-calc-dots { display: inline-flex; gap: .3rem; margin-bottom: .35rem; }
.elmo-calc-dots i {
  width: .4rem; height: .4rem; border-radius: 9999px;
  background: var(--muted-foreground, #8a8a8a); opacity: .25;
  animation: elmo-calc-pulse 1.2s ease-in-out infinite;
}
.elmo-calc-dots i:nth-child(2) { animation-delay: .15s; }
.elmo-calc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes elmo-calc-pulse { 0%, 100% { opacity: .25; } 40% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .elmo-calc-dots i { animation: none; opacity: .5; } }

/* ---- search analytics: Google Search Console (lib/live/search-console.ts, gsc.js) ---- */
.elmo-gsc-form { display: contents; }
.elmo-gsc-error {
  width: 100%; padding: .5rem .75rem; border-radius: .5rem; font-size: .8rem; text-align: left;
  color: var(--destructive-foreground, #fca5a5);
  background: color-mix(in srgb, var(--destructive, #ef4444) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--destructive, #ef4444) 30%, transparent);
}
.elmo-gsc-note { font-size: .8rem; color: var(--muted-foreground, #8a8a8a); }
.elmo-gsc-link {
  background: none; border: 0; padding: .25rem 0; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 500; color: var(--foreground, #fff); transition: opacity .15s;
}
.elmo-gsc-link:hover { opacity: .75; }
.elmo-gsc-busy { cursor: progress; opacity: .7; pointer-events: none; }

/* Dropdowns: the popover reuses .elmo-pop / .elmo-item from the menus above. */
.elmo-select { position: relative; display: inline-flex; min-width: 0; }
.elmo-select > button { width: 100%; }
.elmo-select-list { max-width: min(34rem, calc(100vw - 16px)); }
.elmo-select-list .elmo-item:focus { outline: none; background: var(--accent, rgba(255,255,255,.06)); }
.elmo-select-list .elmo-label { display: flex; flex-direction: column; gap: .1rem; }
.elmo-select-list .elmo-detail { font-size: .75rem; color: var(--muted-foreground, #8a8a8a); }

/* Property picker: [ property ▾ ] [ Save ] */
.elmo-gsc-pick { display: flex; width: 100%; gap: .6rem; align-items: stretch; margin-top: .75rem; }
.elmo-gsc-picker { flex: 1 1 auto; }
.elmo-gsc-picker.elmo-gsc-picker > button { height: 2.5rem; font-size: 1rem; padding: 0 .9rem; border-radius: .6rem; }
.elmo-gsc-save.elmo-gsc-save { height: 2.5rem; font-size: 1rem; padding: 0 1rem; border-radius: .6rem; }

/* Date + compare, joined like one control. */
.elmo-gsc-seg { display: inline-flex; min-width: 0; }
.elmo-gsc-seg > .elmo-select:first-child > button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.elmo-gsc-seg > .elmo-select:last-child > button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.elmo-gsc-seg > .elmo-select > button::before { border-radius: inherit; }

.elmo-gsc { display: flex; flex-direction: column; gap: 2rem; }
.elmo-gsc-title { font-size: .95rem; font-weight: 600; }
.elmo-gsc-subtitle { font-size: .8rem; color: var(--muted-foreground, #8a8a8a); margin-top: .15rem; }

/* KPIs + performance chart, one bordered card. */
.elmo-gsc-perf { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 1rem; background: var(--card, #0f0f0f); overflow: hidden; }
.elmo-gsc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.elmo-gsc-kpi {
  display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 0; min-width: 0;
  padding: 1.35rem 1.4rem 1.25rem; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer;
  border-left: 1px solid var(--border, rgba(255,255,255,.08)); transition: opacity .15s, background .15s;
}
.elmo-gsc-kpi:first-child { border-left: 0; }
.elmo-gsc-kpi:hover { background: color-mix(in srgb, var(--foreground, #fff) 2%, transparent); }
.elmo-gsc-kpi[aria-pressed="false"] { opacity: .45; }
.elmo-gsc-kpi:focus-visible { outline: 2px solid var(--ring, #888); outline-offset: -2px; }
.elmo-gsc-kpi-label { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 500; }
.elmo-gsc-kpi-label i { width: .4rem; height: .4rem; border-radius: 9999px; background: var(--c); }
.elmo-gsc-kpi-now { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.elmo-gsc-kpi-now > span { display: flex; flex-direction: column; flex: none; white-space: nowrap; }
.elmo-gsc-kpi-value { font-size: 1.6rem; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.elmo-gsc-kpi-prev { font-size: 1.2rem; line-height: 1.2; font-weight: 500; margin-top: 1rem; font-variant-numeric: tabular-nums; }
.elmo-gsc-kpi-sub { font-size: .8rem; color: var(--muted-foreground, #8a8a8a); margin-top: .25rem; }
.elmo-gsc-spark { flex: 0 1 12.5rem; width: 12.5rem; min-width: 0; height: 3rem; overflow: visible; }
.elmo-gsc-perf-body { padding: 1.5rem 1.75rem 1.25rem; }
.elmo-gsc-perf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.elmo-gsc-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .85rem; color: var(--muted-foreground, #a1a1a1); }
.elmo-gsc-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.elmo-gsc-legend i { width: .6rem; height: .6rem; border-radius: 9999px; }
.elmo-gsc-legend b { width: 1.1rem; border-top: 1.5px dashed var(--muted-foreground, #8a8a8a); }
.elmo-gsc-plot { position: relative; width: 100%; min-height: 380px; }
.elmo-gsc-svg { display: block; overflow: visible; }
.elmo-gsc-gridline { stroke: var(--border, rgba(255,255,255,.08)); stroke-dasharray: 3 4; }
.elmo-gsc-guide { stroke: var(--muted-foreground, #8a8a8a); stroke-opacity: .35; }
.elmo-gsc-tick { font-size: 12px; font-variant-numeric: tabular-nums; }
.elmo-gsc-xtick { fill: var(--muted-foreground, #8a8a8a); }
.elmo-gsc-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 14rem;
  padding: .6rem .75rem; border-radius: .6rem; font-size: .82rem;
  background: var(--popover, #0a0a0a); color: var(--popover-foreground, #fff);
  border: 1px solid var(--border, rgba(255,255,255,.1)); box-shadow: 0 16px 36px #00000055;
}
.elmo-gsc-tip-title { font-weight: 600; margin-bottom: .4rem; }
.elmo-gsc-tip-row { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; color: var(--muted-foreground, #bdbdbd); }
.elmo-gsc-tip-row i { width: .7rem; height: .7rem; border-radius: 2px; flex: none; }
.elmo-gsc-tip-row span { flex: 1; }
.elmo-gsc-tip-row b { color: var(--foreground, #fff); font-family: var(--font-geist-mono, ui-monospace, monospace); font-weight: 600; margin-left: 1.5rem; }

/* Lower cards. */
.elmo-gsc-row { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elmo-gsc-row-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.elmo-gsc-stack { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.elmo-gsc-card { display: flex; flex-direction: column; min-width: 0; min-height: 22rem; padding: 1.4rem 1.4rem 1rem; border-radius: 1.25rem; background: var(--card, #0f0f0f); }
.elmo-gsc-stack .elmo-gsc-card { flex: 1; min-height: 0; }
.elmo-gsc-card-body { flex: 1; display: flex; flex-direction: column; margin-top: 1.1rem; min-width: 0; }
.elmo-gsc-none { flex: 1; display: grid; place-items: center; min-height: 9rem; font-size: .95rem; color: var(--muted-foreground, #8a8a8a); text-align: center; }
.elmo-gsc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.elmo-gsc-table th {
  text-align: right; font-weight: 400; color: var(--muted-foreground, #8a8a8a); width: 7.5rem;
  padding: .6rem .75rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.elmo-gsc-table th:first-child { text-align: left; width: auto; }
.elmo-gsc-table td { text-align: right; padding: .9rem .75rem; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); }
.elmo-gsc-table td:first-child { text-align: left; }
.elmo-gsc-table tr:last-child td { border-bottom: 0; }
.elmo-gsc-strong { font-weight: 600; }
.elmo-gsc-dim { color: var(--muted-foreground, #8a8a8a); }
.elmo-gsc-page { display: flex; flex-direction: column; gap: .2rem; min-width: 0; color: inherit; text-decoration: none; }
.elmo-gsc-page-title { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; font-weight: 500; }
.elmo-gsc-page-title svg { width: 1rem; height: 1rem; flex: none; color: var(--muted-foreground, #8a8a8a); }
.elmo-gsc-page:hover .elmo-gsc-page-title svg { color: var(--foreground, #fff); }
.elmo-gsc-page-path { font-family: var(--font-geist-mono, ui-monospace, monospace); font-size: .8rem; color: var(--muted-foreground, #8a8a8a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elmo-gsc-keyword { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elmo-gsc-bars { display: flex; flex-direction: column; justify-content: center; gap: .85rem; flex: 1; }
.elmo-gsc-bar { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 3.5rem; align-items: center; gap: .75rem; font-size: .85rem; }
.elmo-gsc-bar-label { color: var(--muted-foreground, #8a8a8a); font-variant-numeric: tabular-nums; }
.elmo-gsc-bar-track { height: .55rem; border-radius: 9999px; background: color-mix(in srgb, var(--foreground, #fff) 6%, transparent); overflow: hidden; }
.elmo-gsc-bar-track span { display: block; height: 100%; border-radius: inherit; min-width: 2px; }
.elmo-gsc-bar-value { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .elmo-gsc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elmo-gsc-kpi:nth-child(3) { border-left: 0; }
  .elmo-gsc-kpi:nth-child(n+3) { border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
  .elmo-gsc-row, .elmo-gsc-row-main { grid-template-columns: minmax(0, 1fr); }
}