/* Vendored Geist (SIL OFL) — served by the binary, no third-party fetch. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2');
}

/* ============================================================
   1. Winston Design System — colors_and_type.css
   Terminal-inspired, minimal, modern. Light + dark.
   Imported from the design project; keep edits confined to
   section 2 so this half can be re-synced wholesale.
   ============================================================ */

/* ------------------------------------------------------------
   1.1 PRIMITIVES — raw color and type values
   ------------------------------------------------------------ */
:root {
  /* Type families */
  --font-sans: 'Geist', ui-sans-serif, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, ~1.2 ratio, anchored at 14px body) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 52px;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.5;
  --leading-prose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii — Winston is firmly 2px everywhere. */
  --radius-none: 0px;
  --radius:      2px;
  --radius-pill: 999px;

  /* Borders — hairline by default */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Layout */
  --max-prose: 64ch;
  --max-content: 1100px;
  --container-pad: 24px;
}

/* ------------------------------------------------------------
   1.2 LIGHT THEME — warm paper, ink text, ember accent
   ------------------------------------------------------------ */
:root,
:root[data-theme="light"] {
  --bg:        oklch(98.5% 0.004 85);   /* warm paper */
  --bg-soft:   oklch(96.5% 0.005 85);   /* sunken panel */
  --bg-raised: oklch(100% 0 0);         /* card / modal */
  --bg-inset:  oklch(94.5% 0.006 85);   /* code block, inputs */

  --fg:        oklch(20% 0.005 85);     /* primary ink */
  --fg-muted:  oklch(45% 0.006 85);     /* secondary */
  --fg-faint:  oklch(62% 0.006 85);     /* tertiary, captions */
  --fg-disabled: oklch(78% 0.005 85);

  --border:        oklch(89% 0.006 85);  /* hairline */
  --border-strong: oklch(78% 0.008 85);  /* visible separator */
  --border-focus:  oklch(45% 0.12 55);   /* ember focus ring */

  --accent:        oklch(55% 0.14 55);   /* ember */
  --accent-fg:     oklch(99% 0 0);
  --accent-soft:   oklch(95% 0.03 55);
  --accent-border: oklch(80% 0.08 55);

  --ok:        oklch(52% 0.12 145);
  --ok-soft:   oklch(94% 0.03 145);
  --warn:      oklch(65% 0.13 75);
  --warn-soft: oklch(95% 0.04 80);
  --err:       oklch(52% 0.18 25);
  --err-soft:  oklch(95% 0.03 25);
  --info:      oklch(52% 0.13 235);
  --info-soft: oklch(95% 0.025 235);

  --selection-bg: oklch(85% 0.08 55);
  --selection-fg: oklch(20% 0.005 85);

  --shadow-sm: 0 1px 0 0 oklch(85% 0.005 85 / 0.8);
  --shadow-md: 0 1px 2px 0 oklch(0% 0 0 / 0.04), 0 1px 0 0 oklch(85% 0.005 85 / 0.6);
  --shadow-overlay: 0 8px 32px -8px oklch(0% 0 0 / 0.12), 0 0 0 1px var(--border);

  color-scheme: light;
}

/* ------------------------------------------------------------
   1.3 DARK THEME — soft near-black, paper text, warmer ember
   ------------------------------------------------------------ */
:root[data-theme="dark"] {
  --bg:        oklch(15% 0.005 250);    /* soft black, faintly cool */
  --bg-soft:   oklch(18% 0.005 250);
  --bg-raised: oklch(20% 0.006 250);
  --bg-inset:  oklch(13% 0.005 250);

  --fg:        oklch(94% 0.005 85);
  --fg-muted:  oklch(70% 0.006 85);
  --fg-faint:  oklch(52% 0.006 85);
  --fg-disabled: oklch(35% 0.005 85);

  --border:        oklch(28% 0.006 250);
  --border-strong: oklch(38% 0.008 250);
  --border-focus:  oklch(72% 0.13 65);

  --accent:        oklch(72% 0.13 65);  /* warmer phosphor amber */
  --accent-fg:     oklch(15% 0.005 250);
  --accent-soft:   oklch(28% 0.06 65);
  --accent-border: oklch(45% 0.10 65);

  --ok:        oklch(72% 0.14 145);
  --ok-soft:   oklch(28% 0.05 145);
  --warn:      oklch(78% 0.13 75);
  --warn-soft: oklch(30% 0.06 75);
  --err:       oklch(70% 0.17 25);
  --err-soft:  oklch(28% 0.07 25);
  --info:      oklch(72% 0.12 235);
  --info-soft: oklch(28% 0.05 235);

  --selection-bg: oklch(40% 0.10 65);
  --selection-fg: oklch(94% 0.005 85);

  --shadow-sm: 0 1px 0 0 oklch(8% 0 0 / 0.6);
  --shadow-md: 0 1px 2px 0 oklch(0% 0 0 / 0.4), 0 1px 0 0 oklch(8% 0 0 / 0.6);
  --shadow-overlay: 0 8px 32px -8px oklch(0% 0 0 / 0.6), 0 0 0 1px var(--border);

  color-scheme: dark;
}

/* Auto follow OS preference if no explicit theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        oklch(15% 0.005 250);
    --bg-soft:   oklch(18% 0.005 250);
    --bg-raised: oklch(20% 0.006 250);
    --bg-inset:  oklch(13% 0.005 250);
    --fg:        oklch(94% 0.005 85);
    --fg-muted:  oklch(70% 0.006 85);
    --fg-faint:  oklch(52% 0.006 85);
    --fg-disabled: oklch(35% 0.005 85);
    --border:        oklch(28% 0.006 250);
    --border-strong: oklch(38% 0.008 250);
    --border-focus:  oklch(72% 0.13 65);
    --accent:        oklch(72% 0.13 65);
    --accent-fg:     oklch(15% 0.005 250);
    --accent-soft:   oklch(28% 0.06 65);
    --accent-border: oklch(45% 0.10 65);
    --ok:        oklch(72% 0.14 145);
    --ok-soft:   oklch(28% 0.05 145);
    --warn:      oklch(78% 0.13 75);
    --warn-soft: oklch(30% 0.06 75);
    --err:       oklch(70% 0.17 25);
    --err-soft:  oklch(28% 0.07 25);
    --info:      oklch(72% 0.12 235);
    --info-soft: oklch(28% 0.05 235);
    --selection-bg: oklch(40% 0.10 65);
    --selection-fg: oklch(94% 0.005 85);
    --shadow-sm: 0 1px 0 0 oklch(8% 0 0 / 0.6);
    --shadow-md: 0 1px 2px 0 oklch(0% 0 0 / 0.4), 0 1px 0 0 oklch(8% 0 0 / 0.6);
    --shadow-overlay: 0 8px 32px -8px oklch(0% 0 0 / 0.6), 0 0 0 1px var(--border);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------
   1.4 SEMANTIC ELEMENTS — element-level defaults
   ------------------------------------------------------------ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv01", "cv11"; /* Geist alternates: terminal-style ascii */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-snug); margin: 0; }

p, .p { font-size: var(--text-base); line-height: var(--leading-prose); margin: 0; }

.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-faint);
}

code, kbd, .mono, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "zero", "ss02";
}

code:not(pre code) {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
  font-size: 0.88em;
}

pre {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  overflow: auto;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration-color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------
   1.5 COMPONENTS — meter, sparkline
   ------------------------------------------------------------ */
.meter {
  --segs: 20;
  --pct: 0%;
  --col: var(--ok);
  position: relative;
  height: 12px;
  background: var(--bg-inset);
  border-radius: var(--radius);
  -webkit-mask: repeating-linear-gradient(to right,
      #000 0,
      #000 calc((100% - (var(--segs) - 1) * 1px) / var(--segs)),
      transparent calc((100% - (var(--segs) - 1) * 1px) / var(--segs)),
      transparent calc((100% - (var(--segs) - 1) * 1px) / var(--segs) + 1px));
          mask: repeating-linear-gradient(to right,
      #000 0,
      #000 calc((100% - (var(--segs) - 1) * 1px) / var(--segs)),
      transparent calc((100% - (var(--segs) - 1) * 1px) / var(--segs)),
      transparent calc((100% - (var(--segs) - 1) * 1px) / var(--segs) + 1px));
}
.meter::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--pct);
  background: var(--col);
  border-radius: inherit;
  transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
}
.meter.ok   { --col: var(--ok); }
.meter.warn { --col: var(--warn); }
.meter.err  { --col: var(--err); }
.meter.accent { --col: var(--accent); }
.meter.muted  { --col: var(--fg-muted); }
.meter.sm { height: 6px; }
.meter.lg { height: 18px; }
.meter.smooth { -webkit-mask: none; mask: none; }

.sparkline { width: 100%; height: 40px; display: block; }
.sparkline-line { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.sparkline-area { fill: var(--accent-soft); }
.sparkline-axis { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; }

/* ============================================================
   2. track — application chrome
   ============================================================ */

* { box-sizing: border-box; }
body { margin: 0; }

/* --- top bar ------------------------------------------------ */
.topbar {
  height: 48px;
  border-bottom: 1px solid var(--border-strong);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mark {
  width: 22px; height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.wordmark { font-weight: var(--weight-medium); font-size: var(--text-base); text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.topbar .sep { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }
.topbar .crumb { font-family: var(--font-mono); font-size: var(--text-xs); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar a, .topbar form button.link { font-size: var(--text-xs); color: var(--fg-muted); text-decoration: none; }
.topbar a:hover, .topbar form button.link:hover { color: var(--fg); }

button.link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--fg-muted);
}
.theme-toggle {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
}
.theme-toggle:hover { color: var(--fg); }

/* --- page --------------------------------------------------- */
main {
  max-width: var(--page-max, 1040px);
  margin: 0 auto;
  padding: 32px 28px 56px;
}
.page-wide   { --page-max: 1040px; }
.page-report { --page-max: 920px; }
.page-narrow { --page-max: 760px; }
.page-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.page-head .meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }
.page-head .right { margin-left: auto; }

/* --- controls ----------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 5px 12px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.ghost {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border);
}
.btn.ghost:hover { background: var(--bg-inset); color: var(--fg); filter: none; }
.btn.danger {
  background: transparent;
  color: var(--err);
  border-color: var(--err);
  white-space: nowrap;
}
.btn.danger:hover { background: var(--err-soft); filter: none; }

input[type=text], input[type=password] {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--fg);
  width: 100%;
}
input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); }

/* Segmented range control */
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg a {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 5px 11px;
  background: transparent;
  color: var(--fg-muted);
  text-decoration: none;
}
.seg a + a { border-left: 1px solid var(--border); }
.seg a:hover { background: var(--bg-inset); color: var(--fg); text-decoration: none; }
.seg a.active { background: var(--fg); color: var(--bg); }
/* Compact variant for card headers (geo Countries/Regions/Cities). */
.seg.sm { align-self: center; }
.seg.sm a { font-size: 10px; padding: 3px 8px; }

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chips a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 3px 9px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
}
.chips a::after { content: "✕"; color: var(--fg-faint); }
.chips a:hover { border-color: var(--err); text-decoration: none; }
.chips a:hover::after { color: var(--err); }

/* --- hairline section --------------------------------------- */
.section { margin-bottom: 32px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 14px;
}
.section-head h2 { font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: -0.005em; }
.section-head .note { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
/* IDs and keys are case-sensitive — opt them out of the eyebrow's uppercasing. */
.section-head .note .val { text-transform: none; letter-spacing: 0; font-size: 11px; }
.section-head .note a { color: var(--fg-faint); text-decoration: none; }
.section-head .note a:hover { color: var(--fg); }
.section-head .note a.active { color: var(--fg); }
.section.danger .section-head { border-bottom-color: var(--err); }
.section.danger h2 { color: var(--err); }

.hint { font-size: var(--text-sm); color: var(--fg-muted); }

/* --- front page site table ---------------------------------- */
.site-cols {
  display: grid;
  grid-template-columns: 150px 1fr 140px 84px 76px 66px 66px 24px;
  gap: 14px;
  align-items: center;
}
.site-head {
  padding: 0 12px 7px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.site-row {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.site-row:hover { background: var(--bg-soft); }
/* The whole row opens the report, but the settings link has to stay a separate
   anchor — so stretch the report link over the row instead of nesting them. */
.site-row .row-link { color: inherit; text-decoration: none; }
.site-row .row-link::after { content: ""; position: absolute; inset: 0; }
.site-row .gear { position: relative; z-index: 1; }
.site-row .name { display: flex; align-items: center; gap: 9px; font-size: var(--text-base); font-weight: var(--weight-medium); }
.dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ok); flex-shrink: 0; }
.dot.idle { background: var(--fg-disabled); }
.site-row .sparkline { height: 32px; }
.site-row .domain, .num { font-family: var(--font-mono); }
.site-row .domain { font-size: var(--text-xs); color: var(--fg-muted); }
.num { font-size: 12.5px; text-align: right; }
.num.dim { color: var(--fg-muted); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row .gear {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-faint);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2px 8px; justify-self: end; text-decoration: none;
}
.site-row .gear:hover { background: var(--bg-inset); color: var(--fg); text-decoration: none; }
.site-row .go { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-faint); text-align: right; }
.table-foot {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 14px 12px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-faint);
}
.table-foot a { color: var(--fg-muted); text-decoration: none; }
.table-foot a:hover { color: var(--fg); }
.table-foot .totals { margin-left: auto; }

/* --- report ------------------------------------------------- */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 26px 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat .value { font-size: 34px; font-weight: var(--weight-medium); letter-spacing: -0.015em; line-height: 1; font-feature-settings: "tnum"; }
.stat .label {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: 7px;
}
.stat .delta { text-transform: none; letter-spacing: 0; }
.stat-rule { border-left: 1px solid var(--border); }

.charts { margin: 20px 0 34px; display: flex; flex-direction: column; gap: 22px; }
.chart-block .section-head { margin-bottom: 8px; }
.chart-wrap { height: 148px; position: relative; }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; }
.panel { margin-bottom: 16px; }
.panel .section-head { margin-bottom: 6px; }
.brow {
  display: grid;
  grid-template-columns: 1fr 72px 52px 52px;
  gap: 10px;
  align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  font-size: var(--text-sm);
}
a.brow:hover { background: var(--bg-soft); text-decoration: none; }
.brow .num { font-size: 11.5px; }
.brow .dim { color: var(--fg-muted); font-size: 11px; }
.brow .drop { color: var(--err); font-size: 11px; }
.funnel .hint { font-size: var(--text-xs); }

/* Numeric property: sum / avg / min / max / n above the value list. */
.numeric {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 6px 2px 8px;
  border-bottom: 1px solid var(--border);
}
.numeric-stat { display: flex; flex-direction: column; gap: 1px; }
.numeric-stat .label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.numeric-stat .value { font-family: var(--font-mono); font-size: 12.5px; }

/* --- settings ----------------------------------------------- */
.snippet { position: relative; margin-bottom: 10px; }
.snippet pre { margin: 0; padding: 12px 14px; font-size: var(--text-xs); }
.copy {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--fg-muted);
  cursor: pointer;
}
.copy:hover { background: var(--bg-inset); color: var(--fg); }
.reveal {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent;
  color: var(--fg-muted); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.reveal:hover { background: var(--bg-inset); color: var(--fg); }
.key-line { display: inline-flex; align-items: center; gap: 8px; }

/* --- login -------------------------------------------------- */
.login-main {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px;
  max-width: none;
}
.login-box { width: 340px; max-width: 100%; }
.login-head { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-head .mark { width: 28px; height: 28px; font-size: var(--text-md); }
.login-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-raised); padding: 22px 22px 24px;
}
.login-foot {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-faint);
}
.banner-err {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--err); background: var(--err-soft);
  border: 1px solid var(--err); border-radius: var(--radius);
  padding: 6px 10px; margin-bottom: 16px;
}

/* --- site switcher (report header) -------------------------- */
.switcher { position: relative; }
.switcher > summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px 10px;
}
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { background: var(--bg-inset); }
.switcher-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 20;
  min-width: 180px;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: 4px 0;
}
.switcher-menu a {
  display: block; padding: 5px 12px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--fg-muted); text-decoration: none;
}
.switcher-menu a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.switcher-menu a.active { color: var(--fg); }

/* --- narrow screens ----------------------------------------- */
@media (max-width: 900px) {
  main { padding: 24px 16px 48px; }
  .topbar { padding: 0 16px; }
  .panels { grid-template-columns: 1fr; }
  /* Let the range control drop to its own line rather than run off the edge. */
  .page-head { flex-wrap: wrap; row-gap: 12px; }
  .stat-strip { gap: 24px; }
  .stat-rule { display: none; }
  /* Drop the trend, domain and arrow columns; keep name + the three numbers. */
  .site-cols { grid-template-columns: 1fr auto auto auto auto; gap: 12px; }
  .site-cols > .trend, .site-cols > .domain, .site-cols > .go { display: none; }
}