/* ==========================================================================
   Athar dashboard — one hand-written stylesheet, no build step. Loaded as a
   plain <link rel="stylesheet">, so the CSP never needs 'unsafe-inline' for
   styles (unlike the old Tailwind runtime, which did). Every colour is a
   var() indirection so light/dark can swap the underlying value at runtime;
   theme-init.js sets [data-theme] before this file is allowed to paint.

   The two palettes are not inversions of each other: a dark UI needs its
   surfaces to step *up* in lightness away from the canvas, while a light UI
   reads better when panels stay near-white and separation comes from
   borders instead.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --accent: #b06d12;       /* darkened from the brand amber to clear 4.5:1 on white */
  --accent-soft: #8a5410;
  --accent-wash: rgba(176, 109, 18, 0.10);
  --on-accent: #ffffff;

  --canvas: #fbfaf9;       /* very slightly warm, so it does not glare next to amber */
  --surface: #ffffff;
  --raised: #f4f2ef;
  --line: #e4e0da;
  --line-soft: #eeebe6;

  --ink: #18181b;
  --ink-muted: #5c5c66;
  --ink-faint: #8b8b95;

  --positive: #15803d;
  --negative: #b91c1c;
  --series-2: #6b6b76;

  /* Fixed regardless of theme: the heat-map ramp's contrast must not change
     between light and dark, so its frame sits on one deliberate mid-tone in
     both. See heatcanvas.js's header comment. */
  --heat-frame-bg: #6b6b76;
  --heat-frame-grid: rgba(255, 255, 255, 0.14);
  --heat-wire-border: rgba(255, 255, 255, 0.55);
  --heat-wire-label-bg: rgba(15, 15, 18, 0.62);
  --heat-wire-label-ink: #f5f5f5;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #e9a23b;       /* the brand amber, already legible on near-black */
  --accent-soft: #c77b2e;
  --accent-wash: rgba(233, 162, 59, 0.12);
  --on-accent: #09090b;

  --canvas: #09090b;
  --surface: #0e0e11;
  --raised: #17171b;
  --line: #26262e;
  --line-soft: #1c1c22;

  --ink: #fafafa;
  --ink-muted: #a1a1aa;
  --ink-faint: #6b6b76;

  --positive: #4ade80;
  --negative: #f87171;
  --series-2: #8b8b95;

  --heat-frame-bg: #6b6b76;
  --heat-frame-grid: rgba(255, 255, 255, 0.14);
  --heat-wire-border: rgba(255, 255, 255, 0.55);
  --heat-wire-label-bg: rgba(15, 15, 18, 0.72);
  --heat-wire-label-ink: #f5f5f5;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-wash); }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ── Buttons, selects, segmented controls ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
  min-height: 36px; transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { border-color: var(--accent-soft); background: var(--accent-soft); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { color: var(--ink); }
.btn-block { width: 100%; min-height: 44px; }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; }

.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-muted);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--ink); }

.select {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 13px; min-height: 36px;
  max-width: 16rem;
}

.segmented { display: flex; gap: 2px; background: var(--raised); padding: 2px; border-radius: 8px; flex-wrap: wrap; }
.segmented-btn {
  border: none; background: transparent; color: var(--ink-faint); border-radius: 6px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer; min-height: 30px;
}
.segmented-btn:hover { color: var(--ink-muted); }
.segmented-btn.is-active { background: var(--line); color: var(--ink); }
.segmented-sm .segmented-btn { padding: 5px 8px; font-size: 11.5px; min-height: 26px; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 85%, transparent); backdrop-filter: blur(8px); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand-word { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.logo-mark { display: block; flex: 0 0 auto; }
.logo-bg { fill: #0e0e11; }
.logo-dot { fill: var(--accent); }
.logo-ring { fill: none; stroke: var(--accent); }
.logo-ring-1 { stroke-opacity: .55; stroke-width: 1.6; }
.logo-ring-2 { stroke-opacity: .22; stroke-width: 1.2; }

.topbar-select { max-width: 14rem; }
.topbar-spacer { flex: 1 1 auto; min-width: 8px; }
.active-visitors { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.active-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.active-dot.is-live { background: var(--positive); }

main.main { padding: 24px 0 32px; display: flex; flex-direction: column; gap: 16px; }
.footer { padding: 8px 0 32px; font-size: 12px; color: var(--ink-faint); }

/* ── Panels (shared card shell) ───────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }

/* ── Boot / global states ─────────────────────────────────────────────── */
.boot-center { min-height: 100dvh; display: grid; place-items: center; padding: 24px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.boot-error-title { color: var(--negative); font-size: 13px; margin: 0; }
.boot-error-detail { color: var(--ink-faint); font-size: 12px; margin: 4px 0 0; }

.state { border: 1px dashed var(--line); border-radius: 10px; padding: 36px 20px; text-align: center; color: var(--ink-muted); min-height: 14rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.state-dashed { min-height: 12rem; }
.state-title { font-weight: 600; color: var(--ink); font-size: 14px; }
.state-hint, .state-detail { color: var(--ink-faint); font-size: 12.5px; }
.state-error { border-style: solid; border-color: var(--negative); }
.state-error .state-detail { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color: var(--negative); word-break: break-word; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 24rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; gap: 4px; }
.login-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 12px; }
.login-subtitle { font-size: 13px; color: var(--ink-muted); }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-footnote { margin-top: 28px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }

.field { display: block; }
.field-label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.field-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }
.text-input {
  width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px;
}
.text-input:focus { border-color: var(--accent); outline: none; }
.form-error { border: 1px solid color-mix(in srgb, var(--negative) 40%, transparent); background: color-mix(in srgb, var(--negative) 10%, transparent); color: var(--negative); border-radius: 8px; padding: 8px 12px; font-size: 13px; }

/* ── Add website ───────────────────────────────────────────────────────── */
.add-website-card { max-width: 28rem; margin: 24px auto; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 24px; }
.add-website-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.add-website-sub { margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.add-website-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }

/* ── Snippet ───────────────────────────────────────────────────────────── */
.snippet-code-wrap { overflow-x: auto; padding: 12px 16px; }
.snippet-code { white-space: pre; font-size: 12px; color: var(--ink-muted); }
.snippet-hint { border-top: 1px solid var(--line-soft); padding: 10px 16px; font-size: 12px; color: var(--ink-faint); }

/* ── Stat tiles ────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* Grid/flex items default to min-width:auto, which honours a nowrap-text
   descendant's full content width instead of letting ellipsis do its job —
   the classic cause of a panel silently forcing the page wider than its
   viewport. Every grid/flex container below that can hold a long, unbroken
   string (a page path, a CSS selector, a stat value) gets min-width:0 on
   its immediate items so they shrink to the track/flex-basis instead. */
.stat-grid > * { min-width: 0; }
.stat-tile { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.stat-delta { font-size: 11.5px; font-weight: 600; flex: 0 0 auto; }
.stat-delta-good { color: var(--positive); }
.stat-delta-bad { color: var(--negative); }
.stat-tile-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; }
.stat-value { font-size: 22px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-value-accent { color: var(--accent); }
.stat-spark-slot { flex: 0 0 auto; }
.sparkline-path { fill: none; stroke: var(--series-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
.sparkline-path-accent { stroke: var(--accent); opacity: 1; }

.revenue-row { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.revenue-row > * { min-width: 0; }
.revenue-tile { flex: 1 1 12rem; min-width: 12rem; }

/* ── Chart ─────────────────────────────────────────────────────────────── */
.chart-panel { padding: 16px; }
.chart { position: relative; }
.chart-empty { height: 260px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-faint); font-size: 13px; }
.chart-svg { width: 100%; display: block; touch-action: none; }
.chart-grid { stroke: var(--line-soft); stroke-width: 1; }
.chart-axis-label { fill: var(--ink-faint); font-size: 10px; }
.chart-area-stop-start { stop-color: var(--accent); stop-opacity: .28; }
.chart-area-stop-end { stop-color: var(--accent); stop-opacity: .02; }
.chart-compare { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-opacity: .55; stroke-linejoin: round; }
.chart-line-views { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line-visitors { fill: none; stroke: var(--series-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-hover-line { stroke: var(--ink-faint); stroke-width: 1; stroke-opacity: .6; }
.chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-dot-views { fill: var(--accent); }
.chart-dot-visitors { fill: var(--series-2); }
.chart-tooltip {
  position: absolute; top: 8px; z-index: 10; min-width: 9.5rem; pointer-events: none;
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 12px;
  font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.chart-tooltip-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.chart-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0; color: var(--ink-muted); }
.chart-tooltip-value { color: var(--ink); }
.chart-tooltip-swatch { display: inline-block; width: 12px; height: 2px; border-radius: 2px; margin-right: 6px; }
.chart-tooltip-swatch-views { background: var(--accent); }
.chart-tooltip-swatch-visitors { background: var(--series-2); }
.chart-tooltip-swatch-compare { background: none; border-top: 2px dashed var(--ink-faint); height: 0; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--ink-faint); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-swatch { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); }
.chart-legend-item:nth-child(2) .chart-legend-swatch { background: var(--series-2); }
.chart-legend-swatch-dashed { background: none; border-top: 2px dashed var(--ink-faint); height: 0; }

/* ── Heatmap ───────────────────────────────────────────────────────────── */
.heatmap-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.heatmap-page-select { flex: 1 1 16rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.heatmap-blurb { padding: 8px 16px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-faint); }
.heatmap-body { padding: 16px; }
.heatmap-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.heatmap-grid > * { min-width: 0; }
.heatmap-grid-bands { grid-template-columns: 1.4fr 1fr; }
.heatmap-side-title { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.heatmap-note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

.heat-viewport-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.heat-viewport-label { font-size: 11.5px; color: var(--ink-faint); }
.heat-viewport-select { font-size: 12px; max-width: 24rem; }

.heat-frame-outer { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.heat-topbar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.heat-topbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.heat-topbar-path { margin-left: 6px; font-size: 10px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-topbar-path { flex: 1 1 auto; }
.heat-badge {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
/* The badge is the one-glance answer to "am I looking at the page or at a
   drawing of it?", so the two states must not be a subtle shade apart. */
.heat-badge-real { border-color: color-mix(in srgb, var(--positive) 45%, transparent); color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.heat-badge-schematic { border-color: var(--line); color: var(--ink-faint); background: var(--raised); }

.heat-frame { position: relative; aspect-ratio: 16 / 10; background: var(--heat-frame-bg); background-image:
    linear-gradient(to right, var(--heat-frame-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--heat-frame-grid) 1px, transparent 1px);
  background-size: 10% 8%;
}
/* With a real page under it the grid is noise, and the frame's own mid-tone is
   only visible through the capture's own translucency. */
.heat-frame.has-page { background-image: none; }
.heat-page-layer, .heat-wire-layer, .heat-canvas-layer { position: absolute; inset: 0; }
.heat-page-layer { overflow: hidden; }

/* object-fit is `fill`, deliberately, and this is the load-bearing line of the
   whole feature. The frame's aspect-ratio is set from the image's own
   dimensions, so `fill` and `contain` agree to within sub-pixel rounding — but
   only `fill` is *guaranteed* to map the image edge-to-edge with the box the
   heat canvas plots percentages against. `contain` would letterbox on any
   rounding disagreement, and a letterbox is a constant offset applied to every
   sample: a heatmap that is uniformly, invisibly wrong.

   Greyscale, reduced contrast and a touch of transparency are not styling. The
   heat ramp's legibility was tuned against one fixed mid-tone (see the
   --heat-frame-bg comment and heatcanvas.js); an arbitrary page underneath
   would otherwise put saturated colour beneath a saturated ramp and make cold
   blue over a blue hero indistinguishable from nothing. Flattening the page to
   a neutral document restores the contrast the ramp was designed for, and it
   is what every heatmap tool does for the same reason. */
.heat-page-img {
  display: block; width: 100%; height: 100%; object-fit: fill;
  filter: grayscale(1) contrast(.8) brightness(1.04);
  opacity: .95;
}
.heat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wireframe-box {
  position: absolute; border: 1px dashed var(--heat-wire-border); border-radius: 3px;
  display: flex; align-items: flex-start; overflow: hidden;
}
.wireframe-box-label {
  font-size: 8.5px; line-height: 1.4; background: var(--heat-wire-label-bg); color: var(--heat-wire-label-ink);
  padding: 1px 4px; border-radius: 0 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.heat-caption { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.heat-caption-warn { color: var(--negative); }

/* ── Page capture panel ────────────────────────────────────────────────── */
.capture-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.capture-status { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-muted); }
.capture-status-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ink-faint); }
.capture-status-dot.is-on { background: var(--positive); }
.capture-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.capture-row > * { min-width: 0; }
.capture-row-end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.capture-file { flex: 1 1 12rem; min-width: 0; font-size: 11.5px; color: var(--ink-muted); }
.capture-file::file-selector-button {
  font: inherit; font-size: 11.5px; margin-right: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: 5px 10px;
}
.capture-file::file-selector-button:hover { border-color: var(--accent); }
.capture-width { width: 5.5rem; min-height: 30px; padding: 4px 8px; font-size: 12px; text-align: right; }
.capture-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.capture-feedback { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.capture-feedback.is-error { color: var(--negative); }
.capture-remove { margin-top: 10px; }
.capture-note { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }
/* The privacy statement is body-weight and always on screen, not a tooltip:
   it is the sentence that keeps "nothing about your pages is collected" true. */
.capture-privacy {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--raised);
  font-size: 11.5px; line-height: 1.65; color: var(--ink-muted);
}
.capture-privacy strong { color: var(--ink); }
.heat-foot-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--ink-faint); }
.heat-ramp-legend { display: inline-flex; align-items: center; gap: 8px; }
.heat-ramp-swatch { display: inline-block; width: 88px; height: 8px; border-radius: 4px; background: linear-gradient(to right, rgb(40,90,210), rgb(40,190,200), rgb(60,200,110), rgb(235,175,55), rgb(225,55,45)); }

/* ── Bar lists (metric panels + click-map element list) ───────────────── */
.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bar-list-empty { padding: 24px 0; text-align: center; font-size: 13px; color: var(--ink-faint); }
.bar-row {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px;
  font-size: 13px; overflow: hidden; min-height: 30px;
}
.bar-row-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-wash); border-radius: 6px; z-index: 0; }
.bar-row-flag, .bar-row-label, .bar-row-share, .bar-row-value { position: relative; z-index: 1; }
.bar-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12.5px; }
.bar-row-share { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-faint); }
.bar-row-value { flex: 0 0 auto; width: 3rem; text-align: right; font-size: 12.5px; color: var(--ink-muted); }

/* ── Metric panels ─────────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.metrics-grid > * { min-width: 0; }
.metric-panel-body { padding: 10px 12px; min-height: 12rem; }
.metric-message { padding: 32px 0; text-align: center; font-size: 13px; color: var(--ink-faint); }
.metric-message-error { color: var(--negative); }

/* ── Scroll-depth / attention bands ───────────────────────────────────── */
.band-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.band-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.band-row:last-child { border-bottom: none; }
.band-row-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-wash); z-index: 0; }
.band-row-depth, .band-row-share, .band-row-count { position: relative; z-index: 1; }
.band-row-depth { width: 3rem; flex: 0 0 auto; font-size: 11.5px; color: var(--ink-muted); }
.band-row-share { font-size: 13px; color: var(--ink); }
.band-row-count { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); }

.callout { border: 1px solid var(--line); background: var(--raised); border-radius: 8px; padding: 14px 16px; }
.callout-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.callout-value { margin-top: 4px; font-size: 22px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.callout-hint { margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }

/* ==========================================================================
   Responsive. Verified at 1440 / 1024 / 768 / 390px: no horizontal body
   scroll at any width, every interactive control at least 44px tall on
   narrow screens, tables/lists reflow rather than requiring their own
   horizontal scrollbar.
   ========================================================================== */
@media (max-width: 1024px) {
  .metrics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .heatmap-grid, .heatmap-grid-bands { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* Five tiles over two columns leaves the last row with one empty cell —
     let the odd tile out span the full row instead of leaving a blank box. */
  .stat-grid .stat-tile:last-child { grid-column: 1 / -1; }
  .topbar-inner { min-height: 52px; }
  .active-visitors { order: 5; flex-basis: 100%; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 19px; }
  .segmented-btn { min-height: 44px; padding: 8px 10px; }
  .btn, .icon-btn, .select, .text-input { min-height: 44px; }
  .topbar-select { max-width: 10rem; }
  .chart-tooltip { min-width: 8rem; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}