/* ── SEED Analytics dashboard ──────────────────────────────────────────────
   Every colour is a custom property declared once on :root (light) and
   re-declared in the prefers-color-scheme block (dark). The SVG chart reads
   these same variables through getComputedStyle, so there is exactly one
   place where a colour is defined.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #f3f4f6;
  --surface-hover: #f7f8fa;

  --border:        #e5e7eb;
  --border-strong: #d3d7de;

  --text:          #14171c;
  --text-2:        #5a626e;
  --text-3:        #878e9a;

  --accent:        #2a78d6;
  --accent-hover:  #2263b3;
  --accent-soft:   #e8f0fc;
  --accent-ink:    #ffffff;

  /* Chart categorical slots — validated for CVD separation on this surface. */
  --series-1:      #2a78d6;  /* visitors  */
  --series-2:      #eb6834;  /* pageviews */

  --chart-grid:    #e9ebef;
  --chart-axis:    #c7ccd4;

  --danger:        #c0392f;
  --danger-soft:   #fdeceb;
  --good:          #1b8a5a;

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .05);
  --shadow-md: 0 1px 3px rgba(16, 20, 28, .06), 0 4px 14px rgba(16, 20, 28, .05);
  --shadow-lg: 0 10px 40px rgba(16, 20, 28, .12);

  --radius:    12px;
  --radius-sm: 8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:            #0f1115;
    --surface:       #16181c;
    --surface-2:     #1d2026;
    --surface-hover: #1f232a;

    --border:        #282c34;
    --border-strong: #363b45;

    --text:          #eef0f3;
    --text-2:        #a3abb8;
    --text-3:        #757e8c;

    --accent:        #3987e5;
    --accent-hover:  #5099f0;
    --accent-soft:   #16233a;
    --accent-ink:    #ffffff;

    /* Dark steps of the same two hues, selected for the dark surface. */
    --series-1:      #3987e5;
    --series-2:      #d95926;

    --chart-grid:    #24282f;
    --chart-axis:    #3a404a;

    --danger:        #f07a72;
    --danger-soft:   #2b1a19;
    --good:          #4cb98a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .55);
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

code, pre { font-family: var(--mono); font-size: 12.5px; }

button { font-family: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons & inputs ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--text-3); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

.btn-icon { width: 34px; padding: 0; color: var(--text-2); }
.btn-icon:hover { color: var(--text); }
.btn-icon.spinning svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-small { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-block { width: 100%; height: 40px; }

input[type="date"], input[type="password"], input[type="text"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Segmented preset control */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.seg-btn {
  height: 28px; padding: 0 12px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Token screen ──────────────────────────────────────────────────────── */

/* The `hidden` attribute is enforced only by the UA stylesheet's
   `[hidden] { display: none }`, which ANY class selector setting `display`
   outranks on specificity. Several components here (.token-screen, .chart-tip)
   set display, so without this rule `el.hidden = true` silently does nothing.
   Keep this above the component rules. */
[hidden] { display: none !important; }

.token-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
  z-index: 50;
}
.token-card {
  width: 100%; max-width: 400px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.token-mark { color: var(--accent); line-height: 0; margin-bottom: 16px; }
.token-card h1 { font-size: 20px; margin-bottom: 6px; }
.token-sub { margin: 0 0 22px; color: var(--text-2); font-size: 13.5px; }
.field { display: block; text-align: left; margin-bottom: 14px; }
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.field input { width: 100%; height: 40px; }
.token-error {
  margin: 0 0 14px; padding: 9px 12px;
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 13px; text-align: left;
}
.token-hint { margin: 18px 0 0; font-size: 12px; color: var(--text-3); }
.token-hint code { color: var(--text-2); }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1360px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { color: var(--accent); line-height: 0; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.brand-sub { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-inputs { display: flex; align-items: center; gap: 6px; }
.date-sep { color: var(--text-3); font-size: 12px; }

.range-note {
  max-width: 1360px; margin: 0 auto;
  padding: 0 24px 10px;
  font-size: 12px; color: var(--text-3);
}
.range-note:empty { display: none; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap { max-width: 1360px; margin: 0 auto; padding: 20px 24px 48px; }

.grid { display: grid; gap: 16px; margin-top: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── KPIs ──────────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.kpi {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.kpi-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value {
  margin-top: 6px;
  font-size: 26px; font-weight: 650; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* ── Panels ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  display: flex; flex-direction: column;
}
.panel-chart { margin-top: 16px; }

.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 14px; }
.panel-sub { margin: 3px 0 0; font-size: 12px; color: var(--text-3); }
.panel-body { padding: 0; flex: 1; min-width: 0; }

.mini-head {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}

.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch-1 { background: var(--series-1); }
.swatch-2 { background: var(--series-2); }

/* ── Chart ─────────────────────────────────────────────────────────────── */

.chart-host { position: relative; padding: 8px 8px 4px; }
.chart-host svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  min-width: 132px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  transform: translate(-50%, -100%);
  transition: opacity .08s ease;
}
.chart-tip[hidden] { display: none; }
.chart-tip .tip-day {
  font-weight: 600; margin-bottom: 6px;
  color: var(--text); white-space: nowrap;
}
.chart-tip .tip-row {
  display: flex; align-items: center; gap: 7px;
  color: var(--text-2); white-space: nowrap;
}
.chart-tip .tip-row + .tip-row { margin-top: 3px; }
.chart-tip .tip-val {
  margin-left: auto; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

/* The scroller keeps wide tables inside their panel — the page itself must
   never scroll sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  position: sticky; top: 0;
  padding: 9px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; white-space: nowrap;
}
tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-hover); }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dim { color: var(--text-3); }

/* Truncating cell with the full value on hover. */
.cell-trunc {
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mono { font-family: var(--mono); font-size: 12px; }

/* Inline share bar behind the label in ranked tables. */
.rank-cell { position: relative; }
.rank-bar {
  position: absolute; left: 0; top: 4px; bottom: 4px;
  background: var(--accent-soft);
  border-radius: 3px;
  z-index: 0;
}
.rank-label { position: relative; z-index: 1; display: block; }

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-2);
  white-space: nowrap;
}

/* ── Horizontal bar breakdowns ─────────────────────────────────────────── */

.split-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px; }
.split-col { min-width: 0; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { min-width: 0; }
.bar-top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; margin-bottom: 4px;
}
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bar-val { color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.bar-track { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }

/* ── States: loading / empty / error ───────────────────────────────────── */

.skeleton { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.sk-line.tall { height: 190px; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
  .btn-icon.spinning svg { animation: none; }
}

.state {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-2);
}
.state-title { font-weight: 600; color: var(--text); margin-bottom: 4px; font-size: 13.5px; }
.state-desc { font-size: 12.5px; color: var(--text-3); max-width: 340px; margin: 0 auto; }
.state-error .state-title { color: var(--danger); }
.state-error .state-desc { word-break: break-word; }
.state-error .btn { margin-top: 12px; }

.kpi-skel .kpi-value { color: var(--text-3); }

/* ── Setup snippet ─────────────────────────────────────────────────────── */

.snippet { position: relative; margin: 16px; }
.snippet pre {
  margin: 0;
  padding: 14px 76px 14px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  white-space: pre;
  color: var(--text);
  line-height: 1.6;
}
.copy-btn { position: absolute; top: 8px; right: 8px; }

.setup-notes {
  margin: 0; padding: 0 16px 16px 32px;
  color: var(--text-2); font-size: 12.5px;
}
.setup-notes li { margin-bottom: 5px; }
.setup-notes code {
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border);
}

/* ── Misc ──────────────────────────────────────────────────────────────── */

.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); flex: none; }
.live-dot i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot i { animation: none; } }

.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
  font-size: 12px; color: var(--text-3);
}

.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--text); color: var(--surface);
  border-radius: 20px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 60;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .topbar-inner { padding: 12px 16px; }
  .range-note { padding: 0 16px 10px; }
  .wrap { padding: 16px 16px 40px; }
  .split-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 22px; }
  .topbar-inner { align-items: stretch; flex-direction: column; }
  .controls { justify-content: space-between; }
  .date-inputs { flex: 1 1 100%; }
  .date-inputs input { flex: 1; }
  .brand-text strong { font-size: 13.5px; }
  .cell-trunc { max-width: 180px; }
  thead th, tbody td { padding-left: 12px; padding-right: 12px; }
}