/* Luna — Mark's p45 design (29 Oct 2026).
   All values come from ui/tokens.css (--luna-* tokens extracted verbatim
   from the design bundle; see DESIGN.md). Component metrics follow the
   design's inline styles: cards 12px/1px #e3e8f0, controls 8px, tables
   13px with #edf2f8/#f1f5fa rules and #fafcfe stripes, primary button
   #1e6fe8 (hover #1460d6), popovers 12px with 0 12px 32px
   rgba(20,40,80,0.14), modals 14px with a #fafcfe footer, inputs #d9e2ee
   with a #1e6fe8 + #e3edfd focus ring. Old class names are unchanged —
   only values. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--luna-canvas);
  color: var(--luna-ink);
  font-family: var(--luna-font);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--luna-link); }
a:hover { color: var(--luna-primary-deep); }
/* focus ring (design: 0 0 0 3px #e3edfd on the #1e6fe8 border) */
:focus-visible { outline: none; box-shadow: var(--luna-focus-ring); border-radius: 4px; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.dim { color: var(--luna-ink-2nd); }
.muted { color: var(--luna-ink-muted); }
@keyframes lunaSpin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px; border-radius: 99px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: lunaSpin 0.8s linear infinite;
}

.logo { display: flex; width: 28px; height: 28px; color: var(--luna-primary); flex: none; }
.logo::before {
  content: ""; width: 28px; height: 28px; border-radius: 99px;
  background: currentColor;
  -webkit-mask: radial-gradient(circle 9px at 68% 32%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 9px at 68% 32%, transparent 98%, #000 100%);
}

/* ---------- app shell: rail + panel + page (p45: 60px 264px 1fr) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.snav {
  display: grid;
  grid-template-columns: var(--snav-rail-width) var(--snav-panel-width);
  background: var(--snav-chrome-bg);
  height: 100vh; position: sticky; top: 0; z-index: 40; flex: none;
}

/* Level 1 — the icon rail (design: 40px icon tiles, radius 10) */
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; overflow-y: auto; scrollbar-width: thin;
  background: var(--snav-chrome-bg);
  border-right: 1px solid var(--snav-chrome-border);
}
/* p47: the Canary Builds logo at the top of the icon rail (design:
   30px, 14px below, flex none — from the bundle, icons/canary-builds.png) */
/* p49 icons: the demo's Material Symbols Rounded glyphs (app.js icon()),
   sized by font-size; 'FILL' 1 where the demo fills (active rail/nav,
   panel tile, sources ticks, issue severities), weight 300 for idle
   rail/nav rows. p50: inline SVG (msrpaths.js) — each icon carries its
   three variants and these rules pick one via --msr-v0/-v1/-vL. */
.msr {
  display: inline-block; flex: none; width: 1em; height: 1em;
  fill: currentColor; overflow: hidden; user-select: none;
  --msr-v0: inline; --msr-v1: none; --msr-vL: none;
}
.msr > .v0 { display: var(--msr-v0); }
.msr > .v1 { display: var(--msr-v1); }
.msr > .vL { display: var(--msr-vL); }
.msr.fill { --msr-v0: none; --msr-v1: inline; --msr-vL: none; }
.msr.light { --msr-v0: none; --msr-v1: none; --msr-vL: inline; }
.rail-item .msr, .nav-item .msr { --msr-v0: none; --msr-v1: none; --msr-vL: inline; }
.rail-item.active .msr, .nav-item.active .msr { --msr-v0: none; --msr-v1: inline; --msr-vL: none; }
.rail-logo { width: 30px; height: 30px; object-fit: contain; margin-bottom: 14px; flex: none; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--snav-rail-label);
  font-size: 12px; line-height: 16px; font-weight: 500;
  text-align: center; flex: none;
}
.rail-item .rail-ico { display: flex; color: var(--snav-rail-icon); }
.rail-item .rail-lbl { display: none; } /* design rail is icon-only (aria-label stays) */
.rail-item:hover { background: #edf2f8; }
.rail-item.active { background: var(--luna-active-2); color: var(--luna-link); }
.rail-item.active .rail-ico { color: var(--luna-link); }
.rail-item:focus-visible { box-shadow: var(--snav-focus); border-radius: 10px; }
html[data-theme="dark"] .rail-item:hover { background: var(--snav-hover); }
/* p48 demo: the account avatar sits at the BOTTOM of the icon rail
   (margin-top:auto pushes it down); its menu opens to the right of the
   rail, anchored to the avatar's bottom edge. */
.rail .avatar-wrap { margin-top: auto; margin-left: 0; flex: none; }
.rail .avatar-menu {
  /* p49: fixed, not absolute — the rail scrolls (overflow-y:auto), which
     clipped an absolute menu to nothing, so Theme/Log out were unreachable */
  position: fixed; left: 70px; right: auto; top: auto; bottom: 12px;
  width: 280px;
}

/* Level 2 — the panel (design sidebar: white, 18px 12px, 14px items) */
.panel {
  border-right: 1px solid var(--snav-chrome-border);
  background: var(--snav-chrome-bg);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
}
.panel-body {
  overflow-y: auto; padding: 18px 8px 20px 0; scrollbar-width: thin;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
/* p48 demo panel head: 34px icon tile (radius 9, #eaf3ff/#0f55c4),
   17px/600 title, 12px muted count underneath */
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px; margin: 0 12px 14px;
}
.panel-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--luna-active); color: var(--luna-primary-deep);
  display: flex; align-items: center; justify-content: center;
}
.panel-head-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.panel-title {
  font-size: 17px; font-weight: 600; color: var(--luna-ink);
  margin: 0; line-height: 1.2; overflow-wrap: anywhere;
}
.panel-count { font-size: 12px; color: var(--luna-ink-muted); }
/* p48 demo "Filter tools" row: bordered box, filter glyph, 13px */
.panel-filter { margin: 0 4px 14px; padding: 0 4px; position: relative; }
/* p49: the demo filter_list glyph (18px, muted) sits inside the box */
.panel-filter .pf-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--luna-ink-muted); pointer-events: none; }
.panel-filter input {
  width: 100%; height: 33px; padding: 0 10px 0 32px;
  border: 1px solid var(--luna-border); border-radius: 8px;
  background: var(--snav-chrome-bg); outline: none;
  font-size: 13px; color: var(--luna-ink); font-family: inherit;
}
.panel-filter input:focus-visible { border-color: var(--luna-primary); box-shadow: var(--luna-focus-ring); }
.panel-filter input::placeholder { color: var(--luna-ink-muted); }
.panel-filter-empty { padding: 10px; font-size: 13px; color: var(--luna-ink-muted); }
.nav { display: flex; flex-direction: column; gap: 0; }
.nav-group { display: flex; flex-direction: column; margin-top: 14px; }
.nav-group:first-child { margin-top: 0; }
.nav-label,
.nav-sublabel {
  font-size: 11px; line-height: 16px; font-weight: 600; color: var(--snav-subheading);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 10px; padding: 4px 10px;
  display: flex; align-items: center; gap: 6px;
}
.nav-sublabel.crowned .nav-crown { color: var(--snav-crown); margin-left: 0; opacity: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--snav-item-text);
  font-size: 14px; line-height: 1.35; font-weight: 400; text-align: left;
  min-height: 33px;
}
.nav-item:hover { background: var(--snav-hover); }
.nav-item.active { background: var(--luna-active); color: var(--luna-primary-deep-2); font-weight: 500; }
.nav-item .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nav-item .ico { display: flex; flex: none; color: #7d8796; }
html[data-theme="dark"] .nav-item .ico { color: #808b9a; }
.nav-item.active .ico, html[data-theme="dark"] .nav-item.active .ico { color: inherit; }
.nav-badge {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
  font-family: var(--mono);
  background: var(--luna-fill-muted); color: var(--luna-ink-2nd);
}
.nav-badge.bad { background: var(--luna-tag-bad-bg); color: var(--luna-tag-bad-fg); }
/* premium markers: gold crown + dot (design crown oklch(0.62 0.13 75) ≈ #b7860f) */
.nav-crown {
  display: inline-flex; align-items: center;
  margin-left: 4px; color: var(--snav-crown); opacity: 0.9; flex: none;
}
.nav-dot {
  width: 6px; height: 6px; border-radius: 99px; background: var(--snav-dot);
  margin-left: -6px; flex: none;
}
.nav-item .lbl + .nav-crown { margin-left: 0; }

/* Data sources card (p48 demo sidebar bottom card: #f5f8fc tile,
   "N of M connected", one 6px segment per source, per-source rows with
   check/hollow icons, Connect Google pill) */
.sources-card {
  margin: 16px 4px 6px 6px; padding: 14px; border: 1px solid var(--luna-border);
  border-radius: 12px; display: flex; flex-direction: column; gap: 10px;
  background: var(--luna-card-soft);
  margin-top: auto;
}
.sources-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.sources-head > span:first-child { font-weight: 600; }
.sources-head > .mono { color: var(--luna-ink-2nd); font-size: 12px; }
.sources-segs { display: flex; gap: 3px; }
.sources-seg { flex: 1; height: 6px; border-radius: 3px; background: #dfe6f0; }
.sources-seg.on { background: var(--luna-primary); }
html[data-theme="dark"] .sources-seg { background: var(--luna-fill-muted); }
/* p49: the dark rule above outranked .on, so dark segments never lit */
html[data-theme="dark"] .sources-seg.on { background: var(--luna-primary); }
.sources-list { display: flex; flex-direction: column; gap: 5px; }
.sources-item {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--luna-ink-nav); cursor: default;
}
.sources-item .si-ico { display: flex; color: var(--luna-up-text); flex: none; }
.sources-item.off .si-ico { color: var(--luna-ink-faint); }
.sources-item.off .si-label { color: var(--luna-ink-muted); }
/* "Connect Google to fill the gaps" (design: white pill, #cfdcf0 border) */
.link-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border: 1px solid var(--luna-border-strong); border-radius: 8px;
  background: var(--luna-card); text-align: center;
  font-size: 12px; color: var(--luna-link); font-weight: 600;
}
.link-btn:hover { background: var(--luna-active); }

/* ---------- p48 desktop control row (demo top-bar chips) ----------
   Desktop has NO sticky topbar: the four chips — date range, project
   picker, "Go to tool…" search, Add keywords — sit at the top right of
   each screen's page-head row (placeShellChrome() moves #shell-controls
   there; below 768px it returns to the .topbar phone header). */
.topbar { display: none; }
.shell-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 0 1 auto; justify-content: flex-end;
}
.switcher-wrap { position: relative; }
/* project chip (demo: globe glyph + domain + chevron, single line) */
.project-switcher {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 7px 10px 7px 12px; border: 1px solid var(--luna-border); border-radius: 8px;
  background: var(--luna-card); text-align: left; max-width: 300px;
  font-size: 13px; white-space: nowrap;
}
.project-switcher:hover { border-color: var(--luna-border-hover); }
.sw-globe { display: flex; color: var(--luna-ink-muted); flex: none; }
#sw-initial, #sw-name { display: none; }
#sw-domain {
  font-family: inherit; font-size: 13px; font-weight: 400; color: var(--luna-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-chev { display: flex; color: var(--luna-ink-muted); }
.switcher-menu { width: 300px; }

/* "Go to tool..." search (demo chip: search icon + placeholder + ⌘K,
   a compact chip in the header row) */
.toolsearch-wrap {
  /* demo chip: one 160px bordered box — search glyph, placeholder, ⌘K */
  position: relative; flex: none; width: 180px; min-width: 0; height: 34px;
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px;
  border: 1px solid var(--luna-border); border-radius: 8px; background: var(--luna-card);
}
.toolsearch-wrap:hover { border-color: var(--luna-border-hover); }
.toolsearch-wrap:focus-within { border-color: var(--luna-primary); box-shadow: var(--luna-focus-ring); }
.toolsearch-wrap::after {
  content: "⌘K";
  flex: none;
  font-size: 11px; font-weight: 600; color: var(--luna-ink-muted);
  border: 1px solid var(--luna-border); border-radius: 4px; padding: 1px 5px;
}
.toolsearch {
  flex: 1; min-width: 0; height: 32px; padding: 0 2px;
  border: 0; background: transparent; outline: none; font-size: 13px; color: var(--luna-ink);
}
.toolsearch::-webkit-search-cancel-button { display: none; }
.toolsearch::placeholder { color: var(--luna-ink-muted); }
.toolsearch-btn {
  order: -1; width: 24px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--luna-ink-muted); flex: none; padding: 0;
}
.toolsearch-btn:hover { color: var(--luna-link); }
.toolsearch-menu { left: 0; right: 0; top: calc(100% + 6px); max-height: 420px; overflow-y: auto; }
.toolsearch-item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.toolsearch-item .ts-label { font-weight: 500; color: var(--luna-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolsearch-item .ts-panel { font-size: 12px; color: var(--luna-ink-muted); flex: none; }
.toolsearch-item.selected, .toolsearch-item:hover { background: var(--luna-active); }

.topbar-add {
  height: 34px; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px 7px 10px; flex: none;
}
.icon-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--luna-border); border-radius: 8px;
  background: var(--luna-card); color: var(--luna-ink-2nd); flex: none;
}
.icon-btn:hover { color: var(--luna-link); border-color: var(--luna-border-hover); }
.menu-btn { display: none; }
.topbar-logo { display: none; }

/* the date chip in the shell row reuses .range-btn (rangePicker);
   demo chip shows icon + label only */
.shell-date .range-btn { padding: 7px 12px; }
.shell-date .range-btn .vs { display: none; }

/* p47 phone "Install Luna" banner (mobile design; shown <768px only,
   wired in install.js — dismissible, hidden when already installed) */
.install-banner { display: none; }

/* p47 phone tool chips (mobile design: horizontal scroller of the
   current panel's tools; <768px only, built in app.js) */
.tool-chips { display: none; }

/* p47 phone search sheet Cancel control (mobile design full-screen
   tool-search sheet; <768px only, wired in app.js) */
.toolsearch-cancel { display: none; }
.avatar-wrap { position: relative; margin-left: 4px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--luna-avatar-bg); border: 0; color: var(--luna-avatar-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex: none;
}
.avatar:hover { background: #c9dcf8; }
html[data-theme="dark"] .avatar:hover { background: var(--luna-active-2); }

.screen-root {
  width: 100%; margin: 0 auto;
  padding: 8px 32px 32px;
  display: flex; flex-direction: column; gap: 18px;
}

/* breadcrumb (p48 demo: "Panel / Section · domain" — one grey 13px line
   above the H1, ellipsized when long) */
.crumbs {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; color: var(--luna-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs .crumb-where { color: var(--luna-ink-muted); }
.crumbs .crumb-sep { color: var(--luna-ink-muted); }
.crumbs .crumb-project {
  color: var(--luna-ink-muted);
  overflow: hidden; text-overflow: ellipsis;
}

/* dropdown menus (design popover: 12px radius, 0 12px 32px shadow) */
.menu {
  position: absolute; background: var(--luna-card);
  border: 1px solid var(--luna-border); border-radius: 12px;
  box-shadow: var(--luna-shadow-pop);
  padding: 8px; z-index: 50; min-width: 220px;
}
.switcher-menu { left: 0; top: calc(100% + 6px); }
.avatar-menu { right: 0; top: calc(100% + 6px); }
/* p48 demo profile menu: Theme row with the Light/Dark segmented
   control (the desktop sun/moon topbar button is gone with the topbar;
   the phone keeps its own header toggle) */
.menu-theme {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  font-size: 14px; color: var(--luna-ink-nav);
}
.menu-theme .mi-ico { display: flex; color: var(--luna-ink-muted); }
.menu-theme .mt-label { flex: 1; }
.menu-theme .segmented { border-radius: 7px; }
.menu-theme .seg-btn { height: auto; padding: 4px 10px; font-size: 12px; border-radius: 0; }
.menu-label {
  font-size: 11px; font-weight: 600; color: var(--luna-ink-heading);
  padding: 6px 10px 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.menu-item {
  width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; color: var(--luna-ink-nav);
  font-size: 14px; display: block;
}
.menu-item:hover { background: var(--luna-tile); color: var(--luna-ink); }
/* p49 demo profile menu rows: 19px muted glyph + label; Log out in red */
.avatar-menu .menu-item { display: flex; align-items: center; gap: 10px; }
#ws-list .menu-item.selected { background: var(--luna-card-soft); font-weight: 600; }
.avatar-menu .menu-item[hidden] { display: none; }
.avatar-menu .mi-ico { display: flex; color: var(--luna-ink-muted); }
.avatar-menu #logout-btn, .avatar-menu #logout-btn .mi-ico { color: var(--luna-down-text); }
.menu-item.accent { color: var(--luna-link); font-weight: 600; }
.menu-item.accent:hover { background: var(--luna-active); }
.menu-item.project-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.menu-item.project-item:hover, .menu-item.project-item.selected { background: var(--luna-card-soft); }
.menu-item.project-item .pi-name { font-weight: 600; font-size: 13px; color: var(--luna-ink); }
.menu-item.project-item .pi-domain { font-size: 11.5px; color: var(--luna-ink-muted); font-family: var(--mono); }
.menu-divider { height: 1px; background: var(--luna-border-soft); margin: 6px 4px; }
.menu-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.menu-meta strong { font-size: 14px; }
.menu-meta span { font-size: 12px; color: var(--luna-ink-muted); }

/* ---------- shared page header (p48 demo: crumb · H1 · sub in one left
   column; #shell-controls docked at the right; screen actions wrap to a
   right-aligned second row) ---------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px 16px;
  padding-top: 16px;
}
.page-head-left {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1 1 320px;
}
.page-title-row { display: flex; align-items: center; gap: 8px; }
.page-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.qmark {
  width: 19px; height: 19px; border-radius: 99px; border: 1px solid var(--luna-border);
  color: var(--luna-ink-muted); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: help;
  background: transparent; padding: 0; flex: none;
}
.page-desc { margin: 2px 0 0; color: var(--luna-ink-2nd); font-size: 13px; max-width: 70ch; text-wrap: pretty; }
.source-line {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--luna-ink-muted); margin-top: 2px; flex-wrap: nowrap;
}
.source-line > span:last-child { min-width: 0; }
.source-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--luna-up-text); flex: none; }
.source-dot.off { background: var(--luna-ink-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-actions:not(:empty) { flex-basis: 100%; justify-content: flex-end; }
.page-actions:empty { display: none; }
/* the per-screen range picker is the phone's control; desktop uses the
   global date chip in the shell control row (same Luna.state.range) */
@media (min-width: 768px) {
  .page-actions .range-wrap { display: none; }
}
.range-btn {
  height: 32px; display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--luna-border); border-radius: 8px;
  background: var(--luna-card); white-space: nowrap; font-size: 13px;
}
.range-btn:hover { border-color: var(--luna-border-hover); }
.range-btn .ico { display: flex; color: var(--luna-ink-muted); }
.range-btn strong { font-weight: 600; }
.range-btn .vs { color: var(--luna-ink-muted); font-size: 12px; }
.range-menu { right: 0; top: 40px; width: 250px; }
.range-note {
  font-size: 11.5px; color: var(--luna-ink-muted); padding: 8px 10px 4px;
  border-top: 1px solid var(--luna-border-soft); margin-top: 4px;
}

/* ---------- buttons (design: 8px radius; primary #1e6fe8/#1460d6) ---------- */
.btn {
  height: 32px; padding: 7px 12px; border: 1px solid transparent;
  border-radius: 8px; background: var(--luna-tile); color: var(--luna-ink);
  font-weight: 500; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--luna-fill-muted); }
.btn.primary {
  background: var(--luna-primary); color: var(--luna-on-accent); font-weight: 600; border-color: transparent;
}
.btn.primary:hover { background: var(--luna-primary-hover); color: var(--luna-on-accent); }
.btn.secondary { border-color: var(--luna-border); background: var(--luna-card); }
.btn.secondary:hover { background: var(--luna-card-soft); }
.btn.soft { background: var(--luna-chip-bg); color: var(--luna-link); border-color: transparent; font-weight: 500; }
.btn.soft:hover { background: var(--luna-active); }
.btn.danger { color: var(--luna-down-text); border-color: #f0c4bb; background: var(--luna-card); }
.btn.danger:hover { background: var(--luna-tag-bad-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--luna-ink-2nd); }
.btn.ghost:hover { background: var(--luna-tile); color: var(--luna-ink); }
.btn.small { height: 28px; padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.tiny { height: 24px; padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.btn.big { height: 44px; padding: 0 20px; font-size: 16px; line-height: 1.5; border-radius: 8px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn .ico { display: flex; }

/* ---------- cards & sections (design: 12px radius, 1px #e3e8f0, no shadow) ---------- */
.card {
  background: var(--luna-card); border: 1px solid var(--luna-border);
  border-radius: 12px; padding: 20px;
}
.card.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card.clickable:hover { border-color: var(--luna-border-hover); }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 4px 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--luna-border-soft);
}
.card-head.no-border { border-bottom: 0; padding-bottom: 0; }
.card-title { margin: 0 4px 4px 0; font-size: 14px; font-weight: 600; }
.card-sub { font-size: 13px; color: var(--luna-ink-2nd); margin: 0 4px 4px 0; text-wrap: pretty; line-height: 1.4; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.card-body.tight { padding: 12px; }
.section { display: flex; flex-direction: column; gap: 18px; }

.grid { display: grid; gap: 12px; }
.card { min-width: 0; } /* grid/flex items may shrink below content so .table-wrap scrolls, never the page (p41) */
.grid.scorecards { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.grid.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.grid.trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* scorecard / KPI (design KPI: 13px label #5b6576, 28px/600 value, 12px delta) */
.scorecard {
  background: var(--luna-card); border: 1px solid var(--luna-border);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; min-height: 184px;
  transition: border-color .15s; text-align: left;
}
.scorecard:hover { border-color: var(--luna-border-hover); }
.sc-label {
  align-self: flex-start; font-size: 13px; font-weight: 400; color: var(--luna-ink-2nd);
  border-bottom: 1px dashed var(--luna-border-strong); cursor: help; padding: 0;
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
}
.sc-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sc-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sc-unit { font-size: 12.5px; color: var(--luna-ink-muted); }
.sc-note { font-size: 12px; color: var(--luna-ink-2nd); text-wrap: pretty; }
.sc-spark { margin-top: auto; }
.sc-source {
  font-size: 11px; color: var(--luna-ink-muted); font-family: var(--mono);
  border-top: 1px solid var(--luna-border-soft); padding-top: 8px;
}
.sc-off .sc-off-title { font-size: 15px; font-weight: 600; color: var(--luna-ink-muted); }
.sc-off-note { font-size: 12.5px; color: var(--luna-ink-2nd); text-wrap: pretty; }

/* ---------- p48 demo Home blocks ---------- */
/* KPI card (demo: 13px label + 30px tinted icon tile, 28px/600 value,
   12px/600 delta) */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--luna-card); border: 1px solid var(--luna-border);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; text-align: left; min-width: 0;
  transition: border-color .15s;
}
.kpi:hover { border-color: var(--luna-border-hover); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-label { font-size: 13px; color: var(--luna-ink-2nd); min-width: 0; }
.kpi-ico {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
/* the demo's four KPI tints (light pairs; dark uses the dark ramp) */
.kpi-ico.t1 { background: #e3edfd; color: #0b4fb8; }
.kpi-ico.t2 { background: #e6f0ff; color: #1e6fe8; }
.kpi-ico.t3 { background: #e7f3fe; color: #2f8ff0; }
.kpi-ico.t4 { background: #e9f6fe; color: #3aa3f2; }
html[data-theme="dark"] .kpi-ico.t1 { background: #1a3456; color: #8ab9ff; }
html[data-theme="dark"] .kpi-ico.t2 { background: #15294a; color: #6aa8ff; }
html[data-theme="dark"] .kpi-ico.t3 { background: #132640; color: #6aa8ff; }
html[data-theme="dark"] .kpi-ico.t4 { background: #10161e; color: #8ab9ff; }
.kpi-val-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-delta { font-size: 12px; font-weight: 600; color: var(--luna-ink-muted); }
.kpi-delta.up { color: var(--luna-up-text); }
.kpi-delta.down { color: var(--luna-down-text); }
.kpi-off-note { font-size: 12px; color: var(--luna-ink-2nd); text-wrap: pretty; }
.kpi-off-link { font-size: 12px; font-weight: 600; color: var(--luna-link); background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; }
.kpi-off-link:hover { text-decoration: underline; }
.kpi-src { margin-top: auto; font-size: 11px; color: var(--luna-ink-muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* trend bar chart (demo: 28 weekday/weekend bars, 5px gaps, #1e6fe8/#8ccbfa) */
.trend-legend {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 14px; flex-wrap: wrap;
}
.trend-legend .trend-title { font-weight: 600; }
.trend-legend .trend-keys { display: flex; gap: 16px; font-size: 12px; color: var(--luna-ink-muted); flex-wrap: wrap; }
.trend-key { display: flex; align-items: center; gap: 6px; }
.trend-key .swatch { width: 8px; height: 8px; border-radius: 2px; background: var(--luna-primary); }
.trend-key.we .swatch { background: var(--luna-blue-4); }
.trend-bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.trend-bar { flex: 1; min-width: 0; background: var(--luna-primary); border-radius: 4px 4px 0 0; }
.trend-bar.we { background: var(--luna-blue-4); }
html[data-theme="dark"] .trend-bar.we { background: var(--luna-blue-1); opacity: .55; }
.trend-empty { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--luna-ink-muted); }

/* Next actions list (demo: 30px icon tile + 600 title + muted body) */
.action-card { display: flex; flex-direction: column; padding: 14px 16px; height: 100%; }
.action-card .ac-title { font-size: 14px; font-weight: 600; padding: 0 4px 8px; }
.action-row {
  display: flex; gap: 12px; align-items: center; padding: 9px 4px;
  border: 0; border-top: 1px solid var(--luna-border-row); border-radius: 0;
  background: transparent; text-align: left; width: 100%;
  cursor: pointer; font-family: inherit; color: inherit;
}
.action-row:hover { background: var(--snav-hover); }
.action-ico {
  width: 30px; height: 30px; border-radius: 8px; background: var(--luna-tile);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.action-main { display: flex; flex-direction: column; flex: 1; font-size: 13px; line-height: 1.4; min-width: 0; }
.action-title { font-weight: 600; }
.action-body { color: var(--luna-ink-muted); }

/* Traffic mix / share block (demo: 14px segment bar + swatch legend) */
.share-segbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.share-seg { height: 100%; min-width: 2px; }
.share-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.share-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.share-item .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.share-item .sh-label { color: var(--luna-ink-2nd); }
.share-item .sh-pct { font-weight: 600; }

/* two-up rows on the Overview (chart + actions, movers + mix) */
.ov-duo { display: flex; flex-direction: column; gap: 18px; }
/* stacked (phone/narrow): blocks keep their content height — a shrunk
   card clipped the Top movers footer link */
.ov-duo > * { flex: none; height: auto; }
@media (min-width: 1100px) {
  /* design: span 8 + span 4 of the 12-column block grid */
  .ov-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .ov-duo.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* chips / tags (design tag: 12px/600 radius 6; chip: 999px #eef4fd/#1460d6) */
.chip {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--luna-tag-muted-bg); color: var(--luna-tag-muted-fg);
  display: inline-flex; align-items: center; line-height: 18px;
}
.chip.good { background: var(--luna-tag-good-bg); color: var(--luna-tag-good-fg); }
.chip.bad { background: var(--luna-tag-bad-bg); color: var(--luna-tag-bad-fg); }
.chip.warn { background: var(--luna-amber-soft); color: var(--luna-amber); }
.chip.accent { background: var(--luna-chip-bg); color: var(--luna-link); }
.chip.neutral { background: var(--luna-tag-muted-bg); color: var(--luna-tag-muted-fg); }
.tag-pill {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; min-width: 92px; text-align: center; display: inline-block; line-height: 18px;
}
.tag-pill.bad { background: var(--luna-tag-bad-bg); color: var(--luna-tag-bad-fg); }
.tag-pill.good { background: var(--luna-tag-good-bg); color: var(--luna-tag-good-fg); }
.tag-pill.info { background: var(--luna-tag-info-bg); color: var(--luna-tag-info-fg); }

/* severity labels (design tag geometry) */
.sev-label {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  padding: 2px 8px; border-radius: 6px; display: inline-block; line-height: 18px;
}
.sev-label.now { background: var(--luna-tag-bad-bg); color: var(--luna-tag-bad-fg); }
.sev-label.soon { background: var(--luna-amber-soft); color: var(--luna-amber); }
.sev-label.info { background: var(--luna-tag-info-bg); color: var(--luna-tag-info-fg); }

/* segmented control (design: bordered 8px group, active #eaf3ff/#1460d6/600) */
.segmented {
  display: flex; padding: 0; gap: 0;
  background: var(--luna-card); border: 1px solid var(--luna-border-input); border-radius: 8px;
  overflow: hidden auto; max-width: 100%;
}
.seg-btn {
  height: 30px; padding: 0 12px; border: 0; border-left: 1px solid var(--luna-border-input);
  border-radius: 0; background: transparent; color: var(--luna-ink-2nd);
  font-weight: 400; font-size: 12.5px; white-space: nowrap;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn:hover { background: var(--luna-tile); }
.seg-btn.on {
  background: var(--luna-active); color: var(--luna-link);
  font-weight: 600;
}

/* filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px; background: var(--luna-card);
  border: 1px solid var(--luna-border); border-radius: 12px;
}
.input, .select {
  height: 32px; padding: 0 12px; border: 1px solid var(--luna-border-input);
  border-radius: 8px; background: var(--luna-card); outline: none;
  font-size: 14px;
}
.input::placeholder { color: var(--luna-ink-faint); }
.input:focus-visible, .select:focus-visible { border-color: var(--luna-primary); box-shadow: var(--luna-focus-ring); }
textarea.input { height: auto; min-height: 38px; line-height: 1.6; }
.input.grow { flex: 1 1 180px; min-width: 150px; }

/* tables (design: th 12px/500 #7d8796 on #edf2f8 rule; td 13px, #f1f5fa
   row rules, #fafcfe stripe on even rows) */
.table-wrap { overflow: auto; max-width: 100%; }
.table-wrap.max560 { max-height: 560px; }
table.table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
}
table.table.min900 { min-width: 900px; }
table.table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--luna-card); text-align: left;
  padding: 9px 16px; font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--luna-ink-muted);
  border-bottom: 1px solid var(--luna-border-soft); white-space: nowrap;
}
table.table th.align-r, table.table td.align-r { text-align: right; }
table.table th .th-inner { border-bottom: 1px dashed var(--luna-border-strong); cursor: help; }
table.table th.sortable { cursor: pointer; user-select: none; }
table.table th .arrow { color: var(--luna-ink); margin-left: 4px; }
table.table th[aria-sort] { color: var(--luna-ink); font-weight: 600; }
table.table td {
  padding: 9px 16px; border-bottom: 1px solid var(--luna-border-row);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
table.table tbody tr:nth-child(even):not(.detail-row) { background: var(--luna-stripe); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr.row-click { cursor: pointer; }
table.table tbody tr.row-click:hover { background: var(--luna-tile); }
table.table td.sticky-col, table.table th.sticky-col {
  position: sticky; left: 0; z-index: 3; background: var(--luna-card);
}
table.table tbody td.sticky-col { z-index: 1; background: var(--luna-card); }
table.table tbody tr:nth-child(even):not(.detail-row) td.sticky-col { background: var(--luna-stripe); }
table.table tbody tr.row-open td.sticky-col, table.table tbody tr.row-click:hover td.sticky-col { background: var(--luna-tile); }
table.table tbody tr.detail-row td { background: var(--luna-card-soft); }
.mono-cell { font-family: var(--mono); }
td.num { font-family: var(--mono); text-align: right; }
.pos-good { color: var(--luna-up-text); }
.pos-none { color: var(--luna-ink-muted); }
.url-cell { font-family: var(--mono); font-size: 12px; color: var(--luna-link); white-space: nowrap; }
.row-count {
  font-size: 12px; color: var(--luna-ink-muted);
  font-family: inherit;
}

/* definition grid */
.def-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 16px; font-size: 13px; align-items: baseline;
}
.def-grid > span { color: var(--luna-ink-muted); font-size: 12.5px; }
.def-grid > strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* bars (design: 6px track #eef3f9, radius 3px, ramp fills) */
.hbar-row { display: flex; flex-direction: column; gap: 4px; }
.hbar-head { display: flex; justify-content: space-between; font-size: 13px; gap: 10px; }
.hbar-head .name { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-head .val { font-weight: 600; font-size: 13px; flex: none; }
.hbar { height: 6px; border-radius: 3px; background: var(--luna-grid-track); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 3px; background: var(--luna-blue-1); }
.hbar-fill.accent { background: var(--luna-primary); }
.hbar-fill.good { background: var(--luna-up-text); }
.hbar-fill.warn { background: var(--luna-warn); }
.hbar-fill.bad { background: var(--luna-down-text); }
/* p51 demo Thematic scores ramp (row 1 → 4+) */
.hbar-fill.r0 { background: #0b4fb8; }
.hbar-fill.r1 { background: #1e6fe8; }
.hbar-fill.r2 { background: #2f8ff0; }
.hbar-fill.r3 { background: #3aa3f2; }
html[data-theme="dark"] .hbar-fill.r0 { background: #8ab9ff; }
html[data-theme="dark"] .hbar-fill.r1 { background: #2a6fe0; }
html[data-theme="dark"] .hbar-fill.r2 { background: #5aa2f5; }
html[data-theme="dark"] .hbar-fill.r3 { background: #6bb8f5; }

/* audit (design issues list: 12px 20px rows, #f1f5fa rules) */
.audit-issue-row { border-bottom: 1px solid var(--luna-border-row); }
.audit-issue-head {
  width: 100%; display: flex; align-items: center;
  gap: 12px; padding: 12px 20px; border: 0; background: var(--luna-card);
  text-align: left; font: inherit; font-size: 14px; color: inherit; cursor: pointer;
}
.audit-issue-head:hover { background: var(--luna-card-soft); }
.audit-issue-head.open { background: var(--luna-tile); }
.sev-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.sev-dot.now { background: var(--luna-down); }
.sev-dot.soon { background: var(--luna-warn); }
.sev-dot.info { background: var(--luna-ink-muted); }
/* p51 demo row: 14px regular title, 12px muted group, 14px/600 count */
.issue-title { flex: 1 1 0; min-width: 0; font-size: 14px; font-weight: 400; color: var(--luna-ink); text-wrap: pretty; }
.issue-count { min-width: 36px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--luna-ink); }
.issue-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--luna-ink-2nd); }
.issue-facts b { font-weight: 600; color: var(--luna-ink); }
.issue-change.good { color: var(--luna-up-text); }
.issue-change.bad { color: var(--luna-down-text); }
.issue-chev { display: flex; color: var(--luna-ink-faint); transition: transform .15s; }
.issue-chev.open { transform: rotate(90deg); }
.issue-detail {
  padding: 4px 20px 20px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px; background: var(--luna-card);
}
.issue-detail h4 {
  margin: 0; font-size: 11px; font-weight: 600; color: var(--luna-ink-heading);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.issue-detail p { margin: 0; font-size: 13px; color: var(--luna-ink-2nd); text-wrap: pretty; }
.issue-example { font-size: 12px; font-family: var(--mono); color: var(--luna-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* p49 Site Audit, from the demo audit block: a 280px health card (150px
   conic gauge, delta line, 2x2 stats grid, then Luna's score notes)
   beside the issues list; one column below 900px. */
.audit-top {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 900px) { .audit-top { grid-template-columns: minmax(0, 1fr); } }
.audit-health {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px; min-width: 0;
}
.audit-gauge {
  width: 150px; height: 150px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--luna-primary) var(--deg), #e6eef9 0);
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .audit-gauge { background: conic-gradient(var(--luna-primary) var(--deg), #1f2a38 0); }
.audit-gauge-in {
  width: 120px; height: 120px; border-radius: 50%; background: var(--luna-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.audit-gauge-in .n { font-size: 40px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.audit-gauge-in .of { font-size: 12px; color: var(--luna-ink-muted); line-height: 1.3; }
.audit-gauge-in .of[data-tip] { margin-top: 4px; border-bottom: 1px dashed var(--luna-border-strong); cursor: help; }
.audit-delta { font-size: 12px; font-weight: 600; color: var(--luna-ink-muted); text-align: center; }
.audit-delta.good { color: var(--luna-up-text); }
.audit-delta.bad { color: var(--luna-down-text); }
.audit-stats { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.audit-stat {
  padding: 10px; border-radius: 8px; background: var(--luna-card-soft);
  display: flex; flex-direction: column; min-width: 0; text-align: left;
  border: 1px solid transparent; font-family: inherit; color: inherit;
}
button.audit-stat { cursor: pointer; }
button.audit-stat:hover { border-color: var(--luna-border-hover); }
.audit-stat.on.now { border-color: var(--luna-down-text); }
.audit-stat.on.soon { border-color: var(--luna-warn); }
.audit-stat.on.info { border-color: var(--luna-primary); }
.audit-stat .as-label { font-size: 11px; color: var(--luna-ink-muted); }
.audit-stat .as-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.audit-stat .as-sub { font-size: 11px; color: var(--luna-ink-2nd); }
.audit-stat .as-unit { font-size: 12px; font-weight: 500; color: var(--luna-ink-muted); }
/* p51: Thematic scores card (demo: 14px/600 title, 12px gaps); Luna's
   score notes sit under the bars */
.audit-areas { display: flex; flex-direction: column; gap: 12px; }
.audit-notes {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  border-top: 1px solid var(--luna-border-row); padding-top: 12px;
  font-size: 12px; color: var(--luna-ink-muted); text-wrap: pretty;
}
/* p51 "Issues to fix" head (demo: 14px 20px, 14px/600 title, 12px muted
   "sorted by impact"); Luna's Export / Check again as quiet text buttons */
.audit-issues-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--luna-border-row);
}
.aih-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.aih-tools { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; }
.aih-sorted { font-size: 12px; color: var(--luna-ink-muted); }
.audit-act {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; margin: -3px -2px;
  border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--luna-link); cursor: pointer; white-space: nowrap;
}
.audit-act:hover { background: var(--luna-tile); }
.audit-act:disabled { color: var(--luna-ink-muted); cursor: default; background: none; }
.audit-filter-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px;
  border: 1px solid var(--luna-border); border-radius: 99px; background: var(--luna-tile);
  font: inherit; font-size: 12px; color: var(--luna-ink); cursor: pointer;
}
.audit-drag { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.audit-drag .ad-head { font-size: 12px; color: var(--luna-ink-muted); }
.audit-drag .ad-row { font-size: 12.5px; color: var(--luna-ink-2nd); text-wrap: pretty; }
.audit-issues { min-width: 0; }
.sev-ico { display: flex; flex: none; }
.sev-ico.now { color: var(--luna-down-text); }
.sev-ico.soon { color: var(--luna-warn); }
.sev-ico.info { color: var(--luna-primary); }
.issue-group { font-size: 12px; color: var(--luna-ink-muted); }
.audit-pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* demo "Crawl history" timeline */
.audit-history { display: flex; flex-direction: column; gap: 4px; }
.audit-history .ah-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.ah-trend { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.ah-trend .ad-head { font-size: 11px; color: var(--luna-ink-muted); }
.ah-shown { font-size: 11px; color: var(--luna-ink-muted); align-self: flex-start; white-space: nowrap; }
.ah-more { align-self: flex-start; }
.ah-list { display: flex; flex-direction: column; }
.ah-row { display: flex; gap: 12px; }
.ah-rail { display: flex; flex-direction: column; align-items: center; }
.ah-dot {
  width: 28px; height: 28px; border-radius: 50%; background: var(--luna-tile);
  color: var(--luna-primary); display: flex; align-items: center; justify-content: center; flex: none;
}
.ah-dot.good { color: var(--luna-up-text); }
.ah-dot.bad { color: var(--luna-down-text); }
.ah-line { flex: 1; width: 1px; background: var(--luna-border); min-height: 12px; }
.ah-row:last-child .ah-line { visibility: hidden; }
.ah-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: 14px; font-size: 13px; line-height: 1.45; }
.ah-date { font-size: 11px; color: var(--luna-ink-muted); }
.ah-title { font-weight: 600; }
.ah-meta { color: var(--luna-ink-2nd); overflow-wrap: anywhere; }

.ring-wrap { position: relative; width: 96px; height: 96px; flex: none; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-center .n { font-size: 26px; font-weight: 600; line-height: 1; }
.ring-center .of { font-size: 11px; color: var(--luna-ink-muted); }

/* what changed */
.change-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--luna-border-row);
}
.change-row:last-child { border-bottom: 0; }
.change-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 300px; min-width: 0; }
.change-title { font-weight: 600; font-size: 14px; text-wrap: pretty; }
.change-detail { color: var(--luna-ink-2nd); font-size: 13px; text-wrap: pretty; }

/* lists */
ul.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.list > li {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--luna-border); border-radius: 10px;
  padding: 9px 12px; background: var(--luna-card);
}
ul.list > li .grow { flex: 1; min-width: 0; }
ul.list > li strong { font-weight: 600; }
/* empty state */
.empty-state {
  padding: 28px 20px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; text-align: center; color: var(--luna-ink-2nd);
}
.empty-state .empty-title { font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--luna-ink-2nd); }
.empty-state .empty-note { font-size: 14px; line-height: 1.43; color: var(--luna-ink-2nd); max-width: 400px; }

/* forms (design: label 12px/500 #5b6576; input 9px 12px #d9e2ee radius 8;
   focus #1e6fe8 + 3px #e3edfd) */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--luna-ink-2nd); }
.form input, .form select, .form textarea {
  padding: 9px 12px; border: 1px solid var(--luna-border-input); border-radius: 8px;
  background: var(--luna-card); font-weight: 400; font-size: 14px; outline: none; min-height: 38px;
  color: var(--luna-ink);
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  border-color: var(--luna-primary); box-shadow: var(--luna-focus-ring);
}
.form .err { color: var(--luna-down-text); font-size: 12.5px; margin: 0; min-height: 1em; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.space { justify-content: space-between; }
.form.inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.form.inline label { flex-direction: column; }
.form .mono-input, .form textarea.mono-input { font-family: var(--mono); font-size: 12.5px; }

/* not-connected screen (design connect card: centered, check list, blue CTA) */
.connect-card {
  width: 100%; max-width: 640px; margin: 0 auto; background: var(--luna-card);
  border: 1px solid var(--luna-border); border-radius: 12px; padding: 48px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.connect-head { display: flex; align-items: center; gap: 12px; }
.connect-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--luna-active); color: var(--luna-link);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 22px; font-weight: 700;
}
.connect-eyebrow {
  font-size: 11.5px; font-weight: 600; color: var(--luna-ink-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.connect-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.connect-note { font-size: 12.5px; color: var(--luna-ink-muted); text-align: center; }
/* p44: the Connect Google guard's inline explanation (missing-setting
   message; never a navigation substitute) */
.connect-msg {
  font-size: 13px; line-height: 1.55; text-align: left;
  color: var(--luna-amber); background: var(--luna-amber-soft);
  border: 1px solid var(--luna-pro-border);
  border-radius: 8px; padding: 10px 12px;
}
.ghost-tile {
  height: 118px; border: 1px dashed var(--luna-border-dashed); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--luna-card);
}
.ghost-tile .t { font-size: 13px; font-weight: 600; color: var(--luna-ink-2nd); }
.ghost-tile .n { font-size: 12px; color: var(--luna-ink-muted); text-wrap: pretty; }

/* modal (design: radius 14, #fafcfe footer with top rule) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: var(--luna-dim);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow: auto;
  background: var(--luna-card); border: 1px solid var(--luna-border);
  border-radius: 14px;
  box-shadow: var(--luna-shadow-pop);
  display: flex; flex-direction: column;
}
.modal.wide { max-width: 900px; }
.modal-head { padding: 20px 22px 4px; display: flex; flex-direction: column; gap: 2px; }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.modal-head .modal-sub { color: var(--luna-ink-2nd); font-size: 13px; }
.modal-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--luna-border-soft);
  background: var(--luna-stripe); border-radius: 0 0 14px 14px;
}
.secret-box {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--luna-border); border-radius: 8px;
  background: var(--luna-code-bg); flex-wrap: wrap;
}
.secret-box code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

/* toast (dark, 8px) + tooltip (design heatmap-badge style) */
.toast {
  position: fixed; top: 12px; right: 12px; z-index: 999;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px; border-radius: 8px;
  background: var(--luna-ink); color: #fff;
  font-size: 13px; line-height: 1.45;
  box-shadow: var(--luna-shadow-pop);
}
.tooltip {
  position: fixed; transform: translate(-50%, calc(-100% - 8px));
  z-index: 800; max-width: 260px; padding: 10px 12px; border-radius: 8px;
  background: var(--luna-ink); color: #fff; font-size: 12px; line-height: 1.45;
  border: 0;
  box-shadow: var(--luna-shadow-cell);
  pointer-events: none;
}
html[data-theme="dark"] .toast { background: #2a3442; }
html[data-theme="dark"] .tooltip { background: #e9eef6; color: var(--luna-ink); }

/* phone (<768px): hamburger + left drawer with both levels */
.drawer-backdrop {
  position: fixed; inset: 0; background: var(--luna-dim); z-index: 39;
}
.drawer-rail-list { display: none; }
.drawer-back { display: none; }

/* Installed (standalone) mode only: stop the pull-to-refresh trap and
   rubber-banding over the app shell. Browser tabs keep normal behaviour. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
}

@media (max-width: 767px) {
  /* ---- p48m phone shell (Luna Mobile.html, copied 1:1): one white
     header row — 28px logo, two-line project picker (flex:1, "Project"
     eyebrow), 44px search icon, 32px avatar. The hamburger, header
     theme toggle and header Add keywords are NOT in the design: nav is
     the title's expand_more → All tools sheet, theme lives in the
     profile sheet, and Add keywords is the action row's blue pill.
     Desktop keeps every one of those controls. ---- */
  .topbar {
    display: flex;
    flex-wrap: nowrap; gap: 4px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px 14px;
    background: var(--luna-card);
    border-bottom: 1px solid var(--luna-border);
  }
  .shell-controls { display: contents; }
  .shell-date { display: none; }
  .sw-globe { display: none; }
  .menu-btn { display: none; }            /* design: no hamburger — All tools sheet */
  #theme-btn { display: none; }           /* design: Theme lives in the profile sheet */
  .topbar-add { display: none; }          /* design: the action row's Keywords pill */
  .topbar-logo { display: block; order: -2; width: 28px; height: 28px; object-fit: contain; flex: none; margin-right: 4px; }
  .switcher-wrap { order: -1; flex: 1 1 auto; min-width: 0; }
  .project-switcher {
    max-width: none; height: 44px; padding: 0 8px; gap: 4px;
    border: 0; border-radius: 10px; background: transparent;
  }
  .project-switcher:hover, .project-switcher:focus-visible { background: var(--snav-hover); border-color: transparent; }
  #sw-name {
    display: block; font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* design: the picker hugs its name — expand_more sits right after it,
     search + avatar stay at the row's right edge (the wrap keeps flex:1) */
  .project-switcher { min-width: 0; width: auto; max-width: 100%; }
  .project-switcher .sw-text { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 0 1 auto; line-height: 1.2; }
  .project-switcher .sw-text::before {
    content: "Project"; font-size: 11px; line-height: 1.2;
    color: var(--luna-ink-muted); font-weight: 400;
  }
  .project-switcher .sw-domain { display: none; }
  .project-switcher .sw-chev { font-size: 20px; }

  /* tool search: collapsed to a 44px icon that opens the design's
     full-screen search sheet (app.js toggles .search-open) */
  .toolsearch-wrap {
    order: 0; flex: none; max-width: none; flex-basis: auto; min-width: 0;
    width: auto; height: auto; padding: 0; border: 0; background: transparent;
  }
  .toolsearch-wrap:focus-within { box-shadow: none; }
  .toolsearch-btn { order: 0; padding: 0; }
  .toolsearch-wrap::after { content: none; }
  .toolsearch-wrap .toolsearch { display: none; }
  .toolsearch-btn {
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; font-size: 24px; color: var(--luna-ink-2nd);
  }
  /* p50: the demo's header search glyph is 24px; the button's data-size
     (18) is the desktop chip's, and icon() sizes inline. */
  .toolsearch-btn .msr { font-size: 24px !important; }
  .toolsearch-btn:hover { background: var(--snav-hover); color: var(--luna-ink-2nd); }
  .toolsearch-cancel { display: none; }
  .toolsearch-wrap.search-open {
    position: fixed; inset: 0; z-index: 60;
    background: var(--luna-card); padding-top: env(safe-area-inset-top, 0px);
    display: flex; align-items: center; gap: 4px; max-width: none;
  }
  .toolsearch-wrap.search-open .toolsearch {
    display: block; flex: 1; height: 44px; border: 0; border-radius: 0;
    background: transparent; font-size: 16px; padding: 0 8px;
  }
  .toolsearch-wrap.search-open .toolsearch:focus-visible { box-shadow: none; }
  .toolsearch-wrap.search-open .toolsearch-btn { display: none; }
  .toolsearch-wrap.search-open .toolsearch-cancel {
    display: flex; align-items: center; height: 40px; padding: 0 8px 0 4px;
    border: 0; background: transparent; color: var(--luna-link);
    font-size: 15px; font-weight: 500; cursor: pointer; flex: none;
  }
  .toolsearch-wrap.search-open .toolsearch-menu {
    position: fixed; left: 0; right: 0; top: calc(44px + env(safe-area-inset-top, 0px)); bottom: 0;
    max-height: none; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto;
  }
  .toolsearch-wrap.search-open .toolsearch-item { padding: 12px 10px; font-size: 15px; }
  .icon-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; }
  .icon-btn:hover { background: var(--snav-hover); border-color: transparent; }
  .avatar-wrap { margin-left: 0; }

  /* ---- p48m design main column order: head → chips → action row →
     blocks, each region carrying its own 16px gutters ---- */
  .screen-root { padding: 0; gap: 0; }
  .screen-root > .section { gap: 0; }
  .page-head { padding: 16px 16px 12px; flex-direction: column; gap: 4px; align-items: stretch; }
  /* the desktop flex-basis (320px) would become a 320px height in the
     column head and open a blank gap above the action row */
  .page-head-left { flex: none; }
  .page-title { font-size: 22px; }
  .crumbs { font-size: 12px; }
  .page-title-row { min-height: 32px; gap: 2px; }
  /* design: the title's expand_more opens the All tools sheet */
  .title-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: transparent; color: var(--luna-ink-muted); cursor: pointer; flex: none;
  }
  .title-menu-btn:hover { background: var(--snav-hover); }

  /* p48 blocks on phone: KPI 2-up at 22px like the p47 scorecards */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 22px; }

  /* the desktop chip strip node stays out of the way on phone (the
     in-page .phone-chips copy renders instead, after the head) */
  #tool-chips { display: none; }
  .phone-chips:not([hidden]) {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 0 16px 12px; flex: none; margin: 0;
  }
  .phone-chips::-webkit-scrollbar { display: none; }
  .tool-chip {
    flex: none; height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--luna-border); background: var(--luna-card);
    color: var(--luna-ink-nav); font-size: 13px; font-weight: 500;
    white-space: nowrap; cursor: pointer;
  }
  .tool-chip.active { background: var(--luna-primary); border-color: var(--luna-primary); color: var(--luna-primary-on-accent); }

  /* p48m action row (design: 44px white date pill flex:1 + the blue
     "+ Keywords" pill; radius 10, gap 8, 16px gutters) */
  .phone-actions { display: flex; gap: 8px; padding: 0 16px; flex: none; }
  .phone-actions .range-wrap { flex: 1; min-width: 0; }
  .phone-actions .range-btn {
    width: 100%; height: 44px; padding: 0 12px; border-radius: 10px;
    background: var(--luna-card); border: 1px solid var(--luna-border);
    font-size: 14px; gap: 8px;
  }
  .phone-actions .range-btn .vs { display: none; }
  .phone-actions .range-btn .ico { color: var(--luna-ink-muted); flex: none; }
  /* design: label regular weight, expand_more pinned to the pill's right */
  .phone-actions .range-btn strong { font-weight: 400; flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .phone-kw-btn {
    flex: none; height: 44px; padding: 0 16px 0 12px;
    border: 0; border-radius: 10px; background: var(--luna-primary);
    color: var(--luna-primary-on-accent); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; cursor: pointer;
  }
  .phone-kw-btn:hover { background: var(--luna-primary-hover); }
  .phone-kw-btn .ico { display: flex; }

  /* the screen's own buttons (Export, …) wrap under the action row —
     same controls as desktop, nothing hidden */
  .page-actions {
    flex-basis: auto; justify-content: flex-start;
    padding: 14px 16px 0; gap: 8px;
  }
  .page-actions:not(:empty) { margin: 0; }

  /* the design's blocks column: 14px gaps, 16px gutters, 24px tail */
  .screen-root > .section > .section {
    padding: 14px 16px 24px; gap: 14px;
  }

  /* p47 install banner (design: #eaf3ff note card, 40px logo tile,
     Install button, dismiss ×; shown by install.js when it applies) */
  .install-banner:not([hidden]) {
    display: flex; align-items: center; gap: 10px; flex: none;
    margin: 12px 16px 0; padding: 10px 6px 10px 12px;
    border-radius: 12px; background: var(--luna-note-bg);
    border: 1px solid var(--luna-note-border);
  }
  .install-banner .install-logo {
    width: 40px; height: 40px; border-radius: 10px; background: var(--luna-card);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .install-banner .install-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; color: var(--luna-note-text); }
  .install-banner .install-copy strong { font-size: 14px; font-weight: 600; color: var(--luna-ink); }
  .install-banner .btn { height: 36px; padding: 0 14px; flex: none; }
  .install-banner .install-close {
    width: 36px; height: 36px; border: 0; background: transparent; flex: none;
    color: var(--luna-note-text); font-size: 22px; line-height: 1; cursor: pointer;
  }

  /* p47/p48m menus/modals become bottom sheets (radius 18px 18px 0 0,
     shadow 0 -8px 32px, safe-area padding) */
  .switcher-menu, .avatar-menu, .range-menu {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    max-height: 70vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: var(--luna-shadow-sheet);
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; min-width: 0;
  }
  /* the design sheet handle + rows */
  .switcher-menu::before, .avatar-menu::before, .range-menu::before {
    content: ""; display: block; width: 36px; height: 4px;
    border-radius: 2px; background: var(--luna-border-input);
    margin: 0 auto; flex: none;
  }
  /* :not([hidden]) — display:flex must not outrank [hidden], or the
     projects sheet shows on every load */
  .switcher-menu:not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
  .switcher-menu[hidden] { display: none; }
  .switcher-menu .menu-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--luna-ink-muted);
    padding: 10px 10px 8px;
  }
  .switcher-menu .menu-divider { background: var(--luna-border-soft); margin: 6px 4px; }
  /* design projects row: 28px tinted initial tile (radius 7), domain
     15px/600, meta 12px muted, check on the active project */
  .switcher-menu .project-item {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 12px 10px; border-radius: 8px; font-size: 15px;
  }
  .switcher-menu .project-item::before {
    content: attr(data-initial); flex: none;
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--luna-active); color: var(--luna-link);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }
  .switcher-menu .project-item .pi-name { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
  .switcher-menu .project-item .pi-domain { font-size: 12px; flex: none; }
  .switcher-menu .project-item.selected::after {
    content: "✓"; color: var(--luna-link); font-size: 15px; font-weight: 600;
  }
  .switcher-menu .menu-item, .avatar-menu .menu-item { padding: 12px 10px; font-size: 15px; }

  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: var(--luna-shadow-sheet);
  }
  .modal-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }

  /* p47 single-column content: KPI cards 2-up at 22px values, 14px gaps */
  .grid { gap: 14px; }
  .grid.scorecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-value { font-size: 22px; }
  .grid.tiles, .grid.stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* phone: long button labels wrap instead of overflowing the 390px viewport */
  .btn { white-space: normal; height: auto; min-height: 32px; }

  /* ---- p48m All tools sheet (design "ov.menu"): handle, head row,
     46px group tiles (radius 13, active filled), 46px item rows ---- */
  .alltools-backdrop[hidden], .alltools-sheet[hidden] { display: none; }
  .alltools-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: var(--luna-dim);
  }
  .alltools-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    background: var(--luna-card); border-top: 1px solid var(--luna-border);
    border-radius: 18px 18px 0 0; box-shadow: var(--luna-shadow-sheet);
    max-height: 88%; display: flex; flex-direction: column;
  }
  .sheet-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--luna-border-input); margin: 4px auto 6px; flex: none;
  }
  .alltools-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 8px 6px 18px; flex: none;
  }
  .alltools-title { font-size: 17px; font-weight: 600; color: var(--luna-ink); }
  .alltools-close {
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: var(--luna-ink-muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .alltools-close:hover { background: var(--snav-hover); }
  .alltools-groups {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    padding: 0 10px 12px; border-bottom: 1px solid var(--luna-border-soft); flex: none;
  }
  .alltools-groups::-webkit-scrollbar { display: none; }
  .alltools-tile {
    flex: none; width: 72px; display: flex; flex-direction: column;
    align-items: center; gap: 6px; padding-top: 2px;
    border: 0; background: transparent; cursor: pointer;
  }
  .alltools-tile .tile-ico {
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--luna-tile); color: var(--luna-ink-2nd);
    display: flex; align-items: center; justify-content: center;
  }
  .alltools-tile .tile-lbl {
    font-size: 11px; line-height: 1.2; text-align: center;
    color: var(--luna-ink-2nd); font-weight: 400;
  }
  .alltools-tile .msr { --msr-v0: inline; --msr-v1: none; --msr-vL: none; }
  .alltools-tile.on .tile-ico { background: var(--luna-primary); color: var(--luna-primary-on-accent); }
  .alltools-tile.on .msr { --msr-v0: none; --msr-v1: inline; --msr-vL: none; }
  .alltools-tile.on .tile-lbl { color: var(--luna-link); font-weight: 600; }
  .alltools-body {
    overflow-y: auto; padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 12px;
  }
  .alltools-panel { font-size: 12px; font-weight: 600; color: var(--luna-ink-2nd); padding: 0 10px; }
  .alltools-sec { display: flex; flex-direction: column; gap: 2px; }
  .alltools-heading {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--luna-ink-muted);
    padding: 4px 10px;
  }
  .alltools-item {
    min-height: 46px; display: flex; align-items: center; gap: 12px;
    padding: 0 10px; border: 0; border-radius: 10px;
    background: transparent; color: var(--luna-ink-nav);
    font-size: 15px; font-weight: 400; cursor: pointer; text-align: left;
  }
  .alltools-item:hover { background: var(--snav-hover); }
  .alltools-item.on { background: var(--luna-active); color: var(--luna-link); font-weight: 600; }

  /* the snav stays a fixed left drawer (unreachable on phone now that
     the design's All tools sheet is the navigation; kept for the
     768px-crossing fallback and any deep link that opens it) */
  .snav {
    position: fixed; top: 0; left: 0; height: 100dvh;
    width: clamp(100px, calc(100vw - 60px), 360px);
    grid-template-columns: 1fr;
    z-index: 40; box-shadow: var(--luna-shadow-pop);
    transform: translateX(-102%);
    transition: transform 0.2s ease-in-out;
  }
  .snav.open { transform: translateX(0); }
  .rail { display: none; }
  .panel { border-right: 0; }
  .panel-body { overflow-y: auto; padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* p49: display:flex below outranked [hidden], so the drawer showed the
     rail list AND the panel at once; one level at a time again */
  .drawer-rail-list[hidden], .panel-body[hidden] { display: none; }
  /* drawer level 1: the rail entries as horizontal rows */
  .drawer-rail-list {
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; padding: 12px 8px; flex: 1;
  }
  .drawer-rail-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 10px;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--snav-item-text); font-size: 15px; line-height: 1.35;
    text-align: left;
  }
  .drawer-rail-row.active { background: var(--luna-active); }
  .drawer-rail-row .rail-ico { color: var(--snav-rail-icon); }
  .drawer-rail-row.active .rail-ico { color: var(--snav-item-text); }

  /* drawer level 2: the panel + back button */
  .drawer-back {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; margin: 8px 8px 4px; padding: 0 12px;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--snav-item-text); font-weight: 500; font-size: 15px;
  }
  .panel-head { margin: 12px 12px 4px; padding: 0; }
  .panel-filter { margin: 0 12px 14px; padding: 0; }
  .panel-filter .pf-ico { left: 10px; }
  .sources-card { margin: 16px 12px 6px; }
  .nav-sublabel { margin-top: 24px; font-size: 15px; line-height: 1.35; }
  .nav-item { font-size: 15px; line-height: 1.35; padding: 12px 10px; }

  .toast { top: auto; bottom: 16px; right: 12px; }
  .table-wrap { overflow-x: auto; }
  .btn, .input, .select { min-height: 44px; }
  .btn.small, .btn.tiny { min-height: 34px; }
  /* Installed-mode polish: the page itself must never scroll sideways */
  .card { min-width: 0; }
  .filter-bar .select { min-width: 0; max-width: 100%; }
  .card > div > .url-cell, .card > div > .url-cell a {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  }
}

/* charts */
.chart-grid { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; }
.chart-y {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 12px; color: var(--luna-ink-muted);
  font-family: var(--mono);
}
.chart-x {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--luna-ink-muted); font-family: var(--mono); padding-left: 32px;
}

/* auth */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--luna-canvas);
}
.auth-card { width: 100%; max-width: 420px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.auth-brand-text strong { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.auth-brand-text span { font-size: 11.5px; color: var(--luna-ink-muted); }
.auth-note { margin: 0; font-size: 12.5px; color: var(--luna-ink-muted); text-align: center; }
.tabs { display: flex; gap: 0; background: var(--luna-card); border: 1px solid var(--luna-border-input); padding: 0; border-radius: 8px; overflow: hidden; }
.tab {
  flex: 1; height: 34px; border: 0; border-left: 1px solid var(--luna-border-input); border-radius: 0;
  background: transparent; color: var(--luna-ink-2nd); font-weight: 400; font-size: 13px;
}
.tab:first-child { border-left: 0; }
.tab.active { background: var(--luna-active); color: var(--luna-link); font-weight: 600; }

/* maps grid heatmap (design grid: 44px circles on the blue ramp) */
.map-heatmap { display: grid; gap: 14px; }
.map-cell {
  width: var(--map-cell, 44px); height: var(--map-cell, 44px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: inherit;
  font-weight: 600; font-size: 13px;
  box-shadow: var(--luna-shadow-cell);
}
.map-cell.rank-1 { background: var(--luna-blue-1); color: var(--luna-on-accent); }
.map-cell.rank-2 { background: var(--luna-grid-2); color: var(--luna-on-accent); }
.map-cell.rank-3 { background: var(--luna-grid-3); color: var(--luna-primary-deep); }
.map-cell.rank-4 { background: var(--luna-blue-5); color: var(--luna-primary-deep); }
.map-cell.rank-5 { background: var(--luna-grid-4); color: var(--luna-primary-deep); }
.map-cell.rank-out { background: var(--luna-fill-muted); color: var(--luna-ink-heading); box-shadow: none; }

/* misc reused bits */
.kv-note { font-size: 11.5px; color: var(--luna-ink-muted); font-family: var(--mono); }
.small-note { font-size: 12px; color: var(--luna-ink-muted); }
.heatmap-canvas { max-width: 100%; border: 1px solid var(--luna-border); border-radius: 10px; background: var(--luna-card); }
.answer-body {
  margin: 0; padding: 10px 12px; border: 1px solid var(--luna-border);
  border-radius: 8px; background: var(--luna-code-bg); white-space: pre-wrap;
  font-size: 12.5px; font-family: var(--mono); max-height: 320px; overflow: auto;
  color: #22324a;
}
html[data-theme="dark"] .answer-body { color: var(--luna-ink-cell); }
.report-frame { width: 100%; height: 620px; border: 1px solid var(--luna-border); border-radius: 8px; background: #fff; }
.day-tile {
  flex: none; width: 52px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0; border-radius: 8px;
  background: var(--luna-card); border: 1px solid var(--luna-border);
}
.day-tile .d { font-size: 10.5px; color: var(--luna-ink-muted); }
.day-tile .p { font-family: var(--mono); font-weight: 600; }
.days-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }

/* In a glance (p31). The period buttons wrap so a 390px phone does not
   scroll sideways. Colour is never the only signal: the arrow and the
   word are in the text. */
.glance-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.glance-periods { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.glance-period {
  min-height: 44px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--luna-border-input); background: var(--luna-card); color: var(--luna-ink-2nd);
  font-weight: 500; font-size: 13px;
}
.glance-period.on { background: var(--luna-active); color: var(--luna-link); border-color: var(--luna-border-hover); }
.glance-verdict {
  display: flex; align-items: center; gap: 10px;
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.glance-verdict.up { color: var(--luna-up-text); }
.glance-verdict.down { color: var(--luna-down-text); }
.glance-verdict.flat { color: var(--luna-warn); }
.glance-verdict.none { color: var(--luna-ink-2nd); }
.glance-sentence { margin: 0; font-size: 15px; text-wrap: pretty; }
.glance-meta { margin: 0; font-size: 12.5px; color: var(--luna-ink-muted); text-wrap: pretty; }
.glance-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.glance-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 4px 10px; align-items: baseline;
  padding-top: 8px; border-top: 1px solid var(--luna-border-soft); min-width: 0;
}
.glance-row > * { min-width: 0; overflow-wrap: anywhere; }
.glance-kicker { font-size: 11px; color: var(--luna-ink-muted); }
.glance-change { font-weight: 650; }
.glance-change.up { color: var(--luna-up-text); }
.glance-change.down { color: var(--luna-down-text); }
.glance-change.flat { color: var(--luna-warn); }
.glance-src { grid-column: 1 / -1; font-size: 11.5px; color: var(--luna-ink-muted); }
.glance-how { font-size: 12.5px; color: var(--luna-ink-2nd); }

/* Raven chat. Two panes inside the screen. Bubbles use the existing
   accent and the sidebar hover token. */
.chat-shell {
  display: flex; gap: 12px; height: calc(100dvh - 220px); min-height: 320px; min-width: 0;
}
.chat-side, .chat-main {
  border: 1px solid var(--luna-border); border-radius: 12px; background: var(--luna-card);
  min-width: 0; min-height: 0;
}
.chat-side {
  width: 260px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px;
}
.chat-side-note { margin: 0; font-size: 12px; color: var(--luna-ink-muted); }
.chat-sessions { overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1; }
.chat-session { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.chat-session.on { background: var(--luna-active); }
.chat-session-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border: 0; background: transparent; text-align: left; padding: 8px; border-radius: 8px;
}
.chat-session-open:hover { background: var(--snav-hover); }
.chat-session-title {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-session-age { flex: none; font-size: 11px; color: var(--luna-ink-muted); }
.chat-archive { opacity: 0; border: 0; background: transparent; color: var(--luna-ink-2nd); border-radius: 8px; padding: 6px; }
.chat-session:hover .chat-archive, .chat-session:focus-within .chat-archive { opacity: 1; }
.chat-main { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-bar h2 { margin: 0; font-size: 16px; }
.chat-thread {
  flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px;
  min-height: 0; max-width: 42rem; width: 100%; margin: 0 auto; padding: 4px 2px 8px;
}
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(100%, 40rem); }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 8px 12px; overflow-wrap: anywhere; }
.chat-bubble.user {
  background: var(--luna-primary); color: var(--luna-on-accent);
  border-radius: 12px 12px 4px 12px;
}
.chat-bubble.assistant {
  background: var(--snav-hover); color: var(--luna-ink);
  border-radius: 12px 12px 12px 4px;
}
.chat-bubble p { margin: 0 0 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 0; padding-left: 18px; }
.chat-bubble code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--luna-fill-muted); padding: 0 4px; border-radius: 4px;
}
.chat-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-tool {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 99px; padding: 2px 8px; font-size: 12px;
  background: var(--luna-chip-bg); color: var(--luna-ink-2nd);
}
.chat-tool.bad { background: var(--luna-tag-bad-bg); color: var(--luna-down-text); }
.chat-actions { display: flex; gap: 2px; opacity: 0; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { opacity: 1; }
.chat-actions button, .chat-suggest {
  border: 0; background: transparent; color: var(--luna-ink-2nd); border-radius: 8px; padding: 4px;
}
.chat-actions button:hover, .chat-suggest:hover { background: var(--snav-hover); color: var(--luna-ink); }
.chat-suggest {
  text-align: left; padding: 8px 10px; border: 1px solid var(--luna-border); background: var(--luna-card);
}
.chat-suggestions { display: flex; flex-direction: column; gap: 6px; }
.chat-intro { margin: 0; color: var(--luna-ink-2nd); }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; max-width: 42rem; width: 100%; margin: 0 auto; }
.chat-compose textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 160px;
  border-radius: 8px; border: 1px solid var(--luna-border-input); padding: 8px 10px;
  background: var(--luna-card); color: var(--luna-ink);
}
.chat-gate {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  max-width: 42rem; margin: 0 auto;
}
.chat-dots { display: flex; gap: 4px; padding: 4px 0; }
.chat-dots span {
  width: 6px; height: 6px; border-radius: 99px; background: var(--luna-ink-muted);
  animation: chatBlink 1s infinite;
}
.chat-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatBlink { 50% { opacity: 0.25; } }
@media (max-width: 767px) {
  .chat-shell { flex-direction: column; height: auto; min-height: 0; }
  .chat-side { width: auto; max-height: 180px; }
  .chat-main { min-height: 420px; }
  .chat-actions, .chat-archive { opacity: 1; }
}
.glance-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 767px) {
  .glance-verdict { font-size: 24px; }
  .glance-row { grid-template-columns: 1fr 1fr; }
  .glance-label, .glance-src { grid-column: 1 / -1; }
}

@media print {
  .snav, .topbar, .toast, .tooltip, .page-actions { display: none !important; }
  .screen-root { padding: 0; }
}

/* ---- AI visibility (p33; palette remapped to the p45 ramp) ---- */
:root { /* re-declared alias (tokens.css is the source; kept for the .aiviz uses below) */ }
.aiviz-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.aiviz-pill {
  border: 1px solid var(--luna-border-input); background: var(--luna-card); color: var(--luna-ink-2nd);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 500;
  min-height: 32px; cursor: pointer;
}
.aiviz-pill.active { background: var(--luna-active); border-color: var(--luna-border-hover); color: var(--luna-link); }
/* tabs (design tab group: bordered, active tinted) */
.aiviz-tabs { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--luna-border-input); border-radius: 8px; overflow: hidden; }
.aiviz-tab {
  border: 0; border-left: 1px solid var(--luna-border-input); background: none; color: var(--luna-ink-2nd);
  font-size: 13px; font-weight: 400; padding: 6px 12px; min-height: 32px; cursor: pointer;
}
.aiviz-tab:first-child { border-left: 0; }
.aiviz-tab:hover { background: var(--luna-tile); }
.aiviz-tab.active { color: var(--luna-link); background: var(--luna-active); font-weight: 600; }
.aiviz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.aiviz-empty {
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  border: 1px dashed var(--luna-border-dashed); border-radius: 10px; color: var(--luna-ink-muted);
  padding: 26px 14px; text-align: center;
}
.aiviz-empty strong { font-size: 16px; color: var(--luna-ink-2nd); font-weight: 600; }
.aiviz-empty span { font-size: 14px; }
.aiviz-how summary::-webkit-details-marker { display: none; }
.aiviz-how-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(430px, 92vw);
  background: var(--luna-card); border: 1px solid var(--luna-border); border-radius: 12px;
  box-shadow: var(--luna-shadow-pop); padding: 12px 14px; font-size: 12.5px; color: var(--luna-ink-2nd);
}
.aiviz-how { position: relative; }
.aiviz-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--luna-border); border-radius: 8px; }
.aiviz-topic-row td { cursor: default; }
.aiviz-expand > td { background: var(--luna-card-soft); }
.aiviz-prompt-box { padding: 10px 0; }
.aiviz-intent { height: 10px; border-radius: 5px; background: var(--luna-border-input); width: 72px; }
@media (max-width: 767px) {
  .aiviz-tab { padding: 8px 4px; font-size: 12px; gap: 8px; }
  .aiviz-tabs { gap: 0; }
  .aiviz-how-body { left: 0; right: 0; width: auto; }
}

/* ---- provider-framework chrome (p38) ---- */

/* premium crown marker (gold in the p45 design) */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  padding: 0 8px;
  border: 1px solid transparent;
  line-height: 18px;
}
.badge-chip.chip-luna { color: var(--luna-tag-good-fg); background: var(--luna-tag-good-bg); border-color: var(--luna-tag-good-bg); }
.badge-chip.chip-provider { color: var(--luna-amber); background: var(--luna-amber-soft); border-color: var(--luna-amber-soft); }
.badge-chip.chip-write { color: var(--luna-tag-bad-fg); background: var(--luna-tag-bad-bg); border-color: var(--luna-tag-bad-bg); }

.chip-free {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--luna-tag-good-fg);
  background: var(--luna-tag-good-bg);
  border-radius: 4px;
  padding: 1px 5px;
}

/* p38: filter bars wrap instead of overflowing on phones */
.filter-bar { flex-wrap: wrap; }
.filter-bar .input { max-width: 100%; }

/* p48: "More from your sources" — the kept p41–p47 overview numbers */
.ov-more-title { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
#sources-count { font-family: inherit; font-size: 12px; color: var(--luna-ink-2nd); }
.movers-tracker { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--luna-ink-muted); }
.movers-tracker .select { height: 30px; font-size: 12px; min-width: 0; max-width: 260px; }

/* ---- p52 phone bottom tab bar (Luna Mobile.html nav; Mark's p52
   override: ON on phone, never on desktop). Five 56px cells in a white
   bar (border-top, 4px padding + safe area); glyph 22px in a 56x30
   radius-15 pill — active: filled glyph, link colour, #e6f0ff/#15294a
   pill; idle: wght-300 glyph, ink-2nd; 11px/500 label. ---- */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--luna-card); border-top: 1px solid var(--luna-border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .tab-cell {
    height: 56px; min-width: 0; padding: 0; border: 0; background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--luna-ink-2nd); font-family: inherit; cursor: pointer;
  }
  .tab-pill {
    width: 56px; height: 30px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
  }
  .tab-cell .msr { --msr-v0: none; --msr-v1: none; --msr-vL: inline; }
  .tab-lbl { font-size: 11px; font-weight: 500; line-height: 1.2; }
  .tab-cell.on { color: var(--luna-link); }
  .tab-cell.on .tab-pill { background: #e6f0ff; }
  html[data-theme="dark"] .tab-cell.on .tab-pill { background: #15294a; }
  .tab-cell.on .msr { --msr-v0: none; --msr-v1: inline; --msr-vL: none; }
  /* the page scrolls clear of the bar; the toast sits above it */
  .main-col { padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* ---- p52 cards as the demo: no monospace provenance lines, no
     page-level source note (both stay as tooltips / on desktop) ---- */
  .source-line { display: none; }
  .kpi-src, .sc-source { display: none; }
  .kpi-off-note { display: none; }
  .scorecard { min-height: 0; }

  /* ---- p52 demo block metrics: 14px between blocks, cards 16px 20px
     (the demo's chart/table/list cards), 13px table text with plain
     numbers (the demo keeps monospace for URL columns only) ---- */
  .ov-duo { gap: 14px; }
  .screen-root > .section > .section > .section { gap: 14px; }
  .card { padding: 16px 20px; }
  .card.flush { padding: 0; }
  .action-card { padding: 14px 16px; }
  .chart-y, .chart-x { font-family: inherit; }
  td.num { font-family: inherit; font-variant-numeric: tabular-nums; }
  table.table { font-size: 13px; }

  /* Top movers head = demo table head: title + count left, compact
     12px controls right (Luna's tracker picker sits where the demo has
     Filters; Export as the demo's Export chip) */
  .ov-movers .card-head { align-items: center; padding: 12px 20px; }
  .ov-movers .movers-ctrls { flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; }
  .ov-movers .movers-tracker { flex: 1; min-width: 0; }
  .ov-movers .movers-tracker .mt-lbl { display: none; }
  .ov-movers .movers-tracker .select {
    min-height: 0; height: 30px; flex: 1; min-width: 0; max-width: none;
    font-size: 12px; color: var(--luna-ink-2nd); border-radius: 8px;
  }
  .ov-movers .btn.small {
    min-height: 0; height: 30px; padding: 5px 10px; gap: 6px; flex: none;
    font-size: 12px; font-weight: 400; color: var(--luna-ink-2nd); border-radius: 8px;
  }

  /* kept "In a glance" card: one padding (its head sat padded inside the
     padded card), periods as the demo's 36px chips */
  .glance-card .card-head { padding: 0; }
  .glance-period { min-height: 36px; height: 36px; padding: 0 14px; border-radius: 999px; }
  .ov-more-title { margin: 4px 0 0; }
}