/* ============================================================
   SEOPulse — Stylesheet (GMC-aligned light theme)
   ============================================================ */

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

:root {
  --blue:    #2563eb; --blue-light: #dbeafe; --blue-dark: #1e40af;
  --green:   #16a34a; --green-light: #dcfce7;
  --red:     #dc2626; --red-light: #fee2e2;
  --amber:   #d97706; --amber-light: #fef3c7;
  --purple:  #7c3aed; --purple-light: #ede9fe; --purple-dark: #5b21b6;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-700: #334155;
  --slate-800: #1e293b; --slate-900: #0f172a;
  --white: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --radius: 12px;
  --sidebar-w: 220px;
  /* Legacy aliases used by JS-generated markup */
  --primary: var(--blue);
  --primary-hover: var(--blue-dark);
  --text: var(--slate-800);
  --text-muted: var(--slate-500);
  --border: var(--slate-200);
  --bg: var(--slate-100);
  --bg-card: var(--white);
  --bg-input: var(--white);
  --yellow: var(--amber);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--slate-100);
  color: var(--slate-800);
  line-height: 1.5;
  font-size: 14px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---- Layout ---- */
#app { display: flex; min-height: 100vh; --sidebar-actual: var(--sidebar-w); }

#sidebar {
  width: var(--sidebar-actual);
  background: var(--slate-800);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  /* Outer sidebar no longer scrolls — only the active nav section (sites
     list OR per-site menu) does. Keeps the footer icons (alerts, mentions,
     settings) pinned at the bottom regardless of portfolio size. */
  overflow: hidden;
  z-index: 10;
  transition: width 200ms ease;
}
/* The active nav section grows to fill the space between the header and
   the footer. `min-height:0` is the flexbox-with-overflow incantation —
   without it, the section refuses to shrink below its content's intrinsic
   height and the overflow:auto on its scroll child never engages.
   `position:relative` anchors the bottom-edge fade overlay (the ::after)
   that tells the user "there's more below — scroll for it". */
#nav-sites,
#nav-menu {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Bottom-edge scroll affordance — a 24px gradient fading from transparent
   to the sidebar background, sitting over the last few pixels of the
   scroll area. Signals "more content below the fold" without needing
   the user to discover the scroll on hover.
   `pointer-events:none` so clicks pass through to the nav items
   underneath. Hidden via `.no-fade` when the JS detects either no
   overflow (everything fits) or we're scrolled to the very bottom —
   without that, the fade greys out the last item permanently and
   makes it look disabled. */
#nav-sites::after,
#nav-menu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--slate-800));
  pointer-events: none;
  opacity: 1;
  transition: opacity 120ms ease;
}
#nav-sites.no-fade::after,
#nav-menu.no-fade::after {
  opacity: 0;
}
#site-list,
#nav-menu {
  overflow-x: hidden;
}
/* Both scroll regions: persistent (not hover-only) themed scrollbar so
   the affordance is always visible. Slightly more opaque thumb than the
   previous hover-revealed one — visibility wins over delicacy here. */
#site-list,
#nav-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
#site-list::-webkit-scrollbar,
#nav-menu::-webkit-scrollbar { width: 6px; }
#site-list::-webkit-scrollbar-track,
#nav-menu::-webkit-scrollbar-track { background: transparent; }
#site-list::-webkit-scrollbar-thumb,
#nav-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}
#site-list::-webkit-scrollbar-thumb:hover,
#nav-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

#content {
  margin-left: var(--sidebar-actual);
  flex: 1;
  padding: 28px 32px;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
  transition: margin-left 200ms ease;
}

/* ---- Sidebar ---- */
.sidebar-header {
  padding: 16px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.logo-link { text-decoration: none; display: inline-block; cursor: pointer; }
.logo-link:hover .logo { opacity: 0.85; }
.logo { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.5px; white-space: nowrap; transition: opacity .15s; }
.logo span { color: #60a5fa; }

.sidebar-pin-toggle {
  background: transparent;
  border: none;
  color: var(--slate-400);
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.sidebar-pin-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }
/* Icon swap: chevron when pinned, pin when collapsed/peek */
.sidebar-pin-toggle .icon-pin { display: none; }
.sidebar-pin-toggle .icon-chevron { display: block; }
#app.sidebar-collapsed .sidebar-pin-toggle .icon-chevron { display: none; }
#app.sidebar-collapsed .sidebar-pin-toggle .icon-pin { display: block; }

.nav-section { padding: 4px 0 8px; }
/* Active site name — sits at the top of the per-site menu, above Dashboard.
   Reads as the section's title; hidden when sidebar is collapsed. */
.nav-site-name {
  padding: 6px 18px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 4px;
}
.nav-site-name:empty { display: none; }
/* When the user has access to >1 site the header acts as a switcher */
.nav-site-name.switchable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  transition: background .12s;
}
.nav-site-name.switchable:hover { background: rgba(255,255,255,0.06); }
.nav-site-name .nav-site-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-site-name .nav-site-caret {
  flex: 0 0 auto;
  opacity: 0.6;
  margin-left: auto;
}
.nav-site-name.switchable:hover .nav-site-caret { opacity: 1; }

/* Site switcher popover — pinned next to the nav header */
.site-switcher-popover {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 4px 0;
  z-index: 9999;
  max-height: 60vh;
  overflow-y: auto;
  min-width: 220px;
  /* Match the themed scrollbar used elsewhere in the sidebar so the
     dropdown's scroll doesn't fall back to the browser default. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.site-switcher-popover::-webkit-scrollbar { width: 6px; }
.site-switcher-popover::-webkit-scrollbar-track { background: transparent; }
.site-switcher-popover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}
.site-switcher-popover::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }
.site-switcher-popover .ssp-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 8px 14px 6px;
  font-weight: 700;
  /* Sticky so the typed-filter hint stays visible while the list scrolls. */
  position: sticky;
  top: 0;
  background: #1e293b;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* Type-to-filter hint — shows "type to filter" until you type, then the query.
   Not uppercased so the live query reads naturally. */
.site-switcher-popover .ssp-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: #64748b;
  flex: 0 0 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-switcher-popover .ssp-hint.active { color: #93c5fd; }
.site-switcher-popover .ssp-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
.site-switcher-popover .ssp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #e2e8f0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-switcher-popover .ssp-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.site-switcher-popover .ssp-fav { color: var(--amber); font-size: 11px; flex: 0 0 auto; }
.site-switcher-popover .ssp-name { overflow: hidden; text-overflow: ellipsis; }
.site-switcher-popover .ssp-foot { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4px; padding: 6px 14px 8px; }
.site-switcher-popover .ssp-all { font-size: 12px; color: #93c5fd; text-decoration: none; }
.site-switcher-popover .ssp-all:hover { color: #fff; }
#app.sidebar-collapsed .nav-site-name { display: none; }
#app.sidebar-collapsed #sidebar:hover .nav-site-name,
#app.sidebar-collapsed #sidebar:focus-within .nav-site-name { display: block; }
.nav-label {
  padding: 10px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #cbd5e1;           /* brighter than slate-400 so the label reads as a heading */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Group separation: every label inside #nav-menu gets a divider line + breathing
   room above, so Find / Fix / Test / Monitor read as four distinct sections. */
#nav-menu .nav-label {
  margin: 14px 12px 0;
  padding: 12px 6px 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item svg { flex-shrink: 0; opacity: 0.7; }
.nav-item:hover svg, .nav-item.active svg { opacity: 1; }
.nav-item:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }
.nav-item.active { color: #fff; border-left-color: var(--blue); background: rgba(37,99,235,0.15); }
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 18px; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  /* Opaque + non-shrinking + above the scroll area, so a long site list can't
     bleed through behind the footer (was showing site names under the icons
     on mobile). */
  background: var(--slate-800);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.user-info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 0 0 4px; }
#user-info { font-size: 12px; color: var(--slate-400); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; padding: 4px 6px; border-radius: 4px; transition: color .15s, background .15s; }
#user-info:hover { color: #fff; background: rgba(255,255,255,0.08); }
.user-logout-btn { color: var(--slate-400); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; flex: 0 0 auto; transition: color .15s, background .15s; }
.user-logout-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
#app.sidebar-collapsed .user-info-row { display: none; }
#app.sidebar-collapsed #sidebar:hover .user-info-row,
#app.sidebar-collapsed #sidebar:focus-within .user-info-row { display: flex; }
.footer-icons { display: flex; justify-content: center; gap: 16px; padding: 8px 0; }
.footer-icon {
  color: var(--slate-400);
  transition: color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  position: relative;
}
.footer-icon:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Back-to-Sites footer icon: only shown on the master/Sites view, where the
   sidebar is auto-closed (master-view) — that's when there's no other way back
   to the Sites dashboard after clicking a footer icon (Alerts, Mentions, etc.).
   Inside a site the full menu + logo handle navigation, so it stays hidden. */
.footer-icon.nav-sites-back { display: none; }
#app.master-view .footer-icon.nav-sites-back { display: flex; }

/* Alerts badge — red pill on the bell icon */
.alerts-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--slate-800);
  pointer-events: none;
}

/* ============================================================
   COLLAPSED SIDEBAR — icon-only strip
   ============================================================ */
#app.sidebar-collapsed { --sidebar-actual: 52px; }

/* Hide all text in collapsed mode */
#app.sidebar-collapsed .logo,
#app.sidebar-collapsed .nav-label,
#app.sidebar-collapsed .nav-item span,
#app.sidebar-collapsed #user-info {
  display: none;
}

/* Centre icons, tighten padding */
#app.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 9px 0;
  border-left-width: 0;
  border-right: 3px solid transparent;
}
#app.sidebar-collapsed .nav-item.active {
  border-right-color: var(--blue);
  border-left-color: transparent;
}
#app.sidebar-collapsed .sidebar-header {
  padding: 12px 0;
  justify-content: center;
}
#app.sidebar-collapsed .logo-link { display: none; }
#app.sidebar-collapsed .sidebar-footer { padding: 10px 4px; }
#app.sidebar-collapsed .footer-icons { flex-direction: column; gap: 6px; }
#app.sidebar-collapsed .site-item { justify-content: center; padding: 8px 0; }
#app.sidebar-collapsed .site-item .fav { display: none; }

/* On the Sites (master) view the cards already list every site, so the sidebar
   site list is redundant — hide it and default the sidebar to closed. */
#app.master-view #nav-sites { display: none !important; }
/* Lock it FULLY closed on the Sites view: neutralise the collapsed sidebar's
   hover/focus peek entirely — width, shadow, and every label/layout reveal —
   so the closed strip doesn't expand, reveal the logo/user-info, or reflow the
   header when the pointer passes over it (the click that navigated here can
   also leave focus inside the sidebar). And hide the pin toggle — there's no
   reason to open it here. (Higher specificity beats the peek rules below.) */
#app.master-view.sidebar-collapsed #sidebar:hover,
#app.master-view.sidebar-collapsed #sidebar:focus-within {
  width: var(--sidebar-actual);
  box-shadow: none;
}
#app.master-view.sidebar-collapsed #sidebar:hover .logo,
#app.master-view.sidebar-collapsed #sidebar:focus-within .logo,
#app.master-view.sidebar-collapsed #sidebar:hover .logo-link,
#app.master-view.sidebar-collapsed #sidebar:focus-within .logo-link,
#app.master-view.sidebar-collapsed #sidebar:hover #user-info,
#app.master-view.sidebar-collapsed #sidebar:focus-within #user-info,
#app.master-view.sidebar-collapsed #sidebar:hover .user-info-row,
#app.master-view.sidebar-collapsed #sidebar:focus-within .user-info-row {
  display: none;
}
#app.master-view.sidebar-collapsed #sidebar:hover .sidebar-header,
#app.master-view.sidebar-collapsed #sidebar:focus-within .sidebar-header {
  padding: 12px 0;
  justify-content: center;
}
#app.master-view.sidebar-collapsed #sidebar:hover .sidebar-footer,
#app.master-view.sidebar-collapsed #sidebar:focus-within .sidebar-footer {
  padding: 10px 4px;
}
#app.master-view.sidebar-collapsed #sidebar:hover .footer-icons,
#app.master-view.sidebar-collapsed #sidebar:focus-within .footer-icons {
  flex-direction: column;
  gap: 6px;
}
#app.master-view .sidebar-pin-toggle { display: none; }
/* When the sidebar is collapsed, hide the text-only site list rather than
   centring it. The .site-item centring rule above is meant for icon nav and
   left the site NAMES awkwardly centred (the reported bug). */
#app.sidebar-collapsed #nav-sites { display: none; }

/* Hover-peek: sidebar slides out as overlay without reflowing content */
#app.sidebar-collapsed #sidebar:hover,
#app.sidebar-collapsed #sidebar:focus-within {
  width: var(--sidebar-w);
  box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}
/* When peeked (hovered) — reveal all labels + normal layout */
#app.sidebar-collapsed #sidebar:hover .logo,
#app.sidebar-collapsed #sidebar:hover .nav-item span,
#app.sidebar-collapsed #sidebar:hover #user-info,
#app.sidebar-collapsed #sidebar:focus-within .logo,
#app.sidebar-collapsed #sidebar:focus-within .nav-item span,
#app.sidebar-collapsed #sidebar:focus-within #user-info {
  display: inline;
}
/* Section labels re-appear as block so margin/border-top separators work */
#app.sidebar-collapsed #sidebar:hover .nav-label,
#app.sidebar-collapsed #sidebar:focus-within .nav-label {
  display: block;
}
#app.sidebar-collapsed #sidebar:hover .nav-item span,
#app.sidebar-collapsed #sidebar:focus-within .nav-item span { display: inline-block; }
#app.sidebar-collapsed #sidebar:hover .logo-link,
#app.sidebar-collapsed #sidebar:focus-within .logo-link { display: inline-block; }
#app.sidebar-collapsed #sidebar:hover .nav-item,
#app.sidebar-collapsed #sidebar:focus-within .nav-item {
  justify-content: flex-start;
  padding: 7px 18px;
  border-right-width: 0;
  border-left-width: 3px;
}
#app.sidebar-collapsed #sidebar:hover .nav-item.active,
#app.sidebar-collapsed #sidebar:focus-within .nav-item.active {
  border-left-color: var(--blue);
  border-right-color: transparent;
}
#app.sidebar-collapsed #sidebar:hover .sidebar-header,
#app.sidebar-collapsed #sidebar:focus-within .sidebar-header {
  padding: 16px 18px 10px;
  justify-content: space-between;
}
#app.sidebar-collapsed #sidebar:hover .sidebar-footer,
#app.sidebar-collapsed #sidebar:focus-within .sidebar-footer { padding: 12px 18px; }
#app.sidebar-collapsed #sidebar:hover .footer-icons,
#app.sidebar-collapsed #sidebar:focus-within .footer-icons { flex-direction: row; gap: 16px; }

.site-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.site-item:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }
.site-item .fav { color: var(--amber); font-size: 10px; }

/* ---- Chart pair grid ---- */
.chart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
/* Cards inside the pair shouldn't add their own bottom margin on top of the
   grid's margin-bottom — that doubled up and left a big gap below the pair. */
.chart-pair > .card { margin-bottom: 0; }

/* ---- View Container ---- */
.view-container { max-width: 1400px; overflow-x: hidden; }

/* Alert banner — compact stack. Capped at 3 visible rows in JS; the
   footer surfaces "+N more · View all" plus a single Dismiss-all button
   so the banner never grows unbounded on alert-heavy days. */
.alert-banner { max-width: 1400px; margin-bottom: 0; }
.alert-banner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #fef3c7;
  border-left: 4px solid #d97706;
  border-bottom: 1px solid #fde68a;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--slate-800);
  animation: alertSlideIn 0.3s ease;
}
.alert-banner-item:first-child { border-radius: 6px 6px 0 0; }
.alert-banner-item:last-child  { border-bottom: none; }
.alert-banner-item:only-child  { border-radius: 6px; }
.alert-banner-icon { font-size: 13px; flex-shrink: 0; color: #92400e; }
.alert-banner-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-banner-msg a { color: var(--blue); text-decoration: underline; font-weight: 500; }
.alert-banner-type {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  color: #92400e; background: #fde68a;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  letter-spacing: 0.3px;
}
.alert-banner-dismiss {
  background: none; border: none; cursor: pointer; font-size: 13px; color: #92400e;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0; line-height: 1;
}
.alert-banner-dismiss:hover { background: #fde68a; }
.alert-banner-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 14px; background: #fef9e7;
  border-radius: 0 0 6px 6px;
  margin-bottom: 12px;
  font-size: 11.5px; color: #92400e;
}
.alert-banner-footer a      { color: var(--blue); text-decoration: underline; cursor: pointer; }
.alert-banner-footer button { background: none; border: none; color: var(--blue); text-decoration: underline; cursor: pointer; font-size: 11.5px; padding: 0; }
@keyframes alertSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Performance chart tooltip — custom HTML node rendered by the Views
   _makePerfTooltip handler. Two layout variants:
     .tt-simple   — single value column (no comparison)
     .tt-compare  — current + delta + prev columns (comparison mode)
   The grid uses 4 / 5 columns respectively; spacers (.tt-empty) keep
   the date headers aligned over the right-hand value columns. */
.chart-tooltip {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  font-size: 12px;
  color: var(--slate-800);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .12s;
  min-width: 200px;
}
.chart-tooltip .tt-grid {
  display: grid;
  gap: 6px 16px;
  align-items: center;
}
.chart-tooltip.tt-compare .tt-grid { grid-template-columns: 10px auto 1fr auto 1fr; }
.chart-tooltip.tt-simple  .tt-grid { grid-template-columns: 10px auto 1fr auto;     }
.chart-tooltip .tt-empty  { /* spacer cell — keeps headers aligned over value cols */ }
.chart-tooltip .tt-header {
  text-align: right;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--blue);
}
.chart-tooltip .tt-header.prev { border-bottom-style: dashed; }
.chart-tooltip .tt-header .dow {
  font-size: 10px; color: var(--text-muted); line-height: 1.1;
  text-transform: none;
}
.chart-tooltip .tt-header .date {
  font-size: 14px; font-weight: 600; color: var(--slate-800); line-height: 1.2;
}
.chart-tooltip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.chart-tooltip .label {
  font-size: 12px; color: var(--slate-800); white-space: nowrap;
}
.chart-tooltip .current,
.chart-tooltip .prev {
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip .prev { color: var(--text-muted); font-weight: 500; }
.chart-tooltip .delta {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip .delta.up   { color: #16a34a; }   /* improvement → green */
.chart-tooltip .delta.down { color: #dc2626; }   /* decline     → red   */

/* Feedback list rows — one body element per row that clamps to 3 lines
   when collapsed and expands to its full height when the <details> is
   open. Avoids the previous duplication (truncated copy in <summary>,
   full copy in the panel beneath). */
.feedback-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.feedback-row:not([open]) .feedback-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feedback-row[open] .feedback-body {
  margin-bottom: 4px;
}

/* ---- Page Header ---- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h2 { font-size: 22px; font-weight: 700; color: var(--slate-900); }
.page-header .subtitle { color: var(--slate-500); font-size: 13px; margin-top: 2px; }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.metric-grid.cwv-grid {
  grid-template-columns: repeat(6, 1fr);
}
.metric-grid.actions-grid {
  display: flex;
  flex-wrap: wrap;
}
.metric-grid.actions-grid .metric-card {
  flex: 0 0 calc((100% - 5 * 16px) / 6);
  min-width: 0;
}
.metric-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.metric-card .label { font-size: 11px; font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.06em; }
.metric-card .value { font-size: 30px; font-weight: 700; color: var(--slate-900); margin-top: 4px; line-height: 1; }
.metric-card .change { font-size: 12px; margin-top: 6px; color: var(--slate-400); }
.metric-card .change.up { color: var(--green); }
.metric-card .change.down { color: var(--red); }
.metric-card .metric-subnote { font-size: 11px; margin-top: 3px; color: var(--slate-400); }
.metric-card[onclick]:hover { box-shadow: 0 2px 8px rgba(59,130,246,0.18); transform: translateY(-1px); transition: all 0.15s ease; }
.metric-card.metric-card-active { outline: 2px solid var(--blue); outline-offset: -2px; }

.metric-card--filterable {
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  border: 2px solid transparent;
  user-select: none;
}
.metric-card--filterable:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.metric-card--active {
  border-color: var(--blue);
  background: var(--blue-light);
}
.metric-card--active .label { color: var(--blue-dark); }
.metric-card--active .value { color: var(--blue); }

/* ---- Internal Links filter builder ---- */
.il-filter-builder { margin-bottom: 12px; }
.il-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.il-filter-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--slate-50); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 8px 5px 14px; font-size: 13px;
}
.il-fp-label { color: var(--text-muted); white-space: nowrap; font-size: 12px; }
.il-fp-input {
  width: 52px; padding: 2px 4px; border: 1px solid var(--border);
  border-radius: 4px; font-size: 13px; text-align: center; background: var(--white);
}
.il-fp-sep { color: var(--text-muted); }
.il-fp-remove {
  background: none; border: none; cursor: pointer;
  color: var(--slate-400); font-size: 16px; line-height: 1; padding: 0 2px;
  transition: color 0.1s;
}
.il-fp-remove:hover { color: var(--red); }
.il-filter-op {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--slate-100); cursor: pointer; font-size: 11px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.04em; transition: all 0.15s;
}
.il-filter-op:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.il-filter-op--or {
  background: var(--amber-light); border-color: var(--amber); color: var(--amber);
}
.il-filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--slate-200) transparent;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 80vh; overflow-y: auto;
}
.card .table-wrap { box-shadow: none; border-radius: 0; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 3px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  text-align: left;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
thead th:hover { color: var(--blue); }
thead th.num { text-align: right; }
thead th .sort-icon { margin-left: 4px; font-size: 10px; opacity: 0.4; }
thead th.sort-asc .sort-icon, thead th.sort-desc .sort-icon { opacity: 1; color: var(--blue); }
tbody td {
  padding: 11px 16px;
  border-top: 1px solid var(--slate-100);
  vertical-align: middle;
}
tbody tr:hover td { background: var(--slate-50); }
td.url { max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.query { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Tooltips ---- */
.tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--slate-400);
}
/* The old CSS ::after tooltip overflowed/clipped near edges and inside
   overflow containers (e.g. a left-aligned card title pushed the centred
   bubble off-screen to the left). Disabled in favour of the shared JS-driven,
   body-appended, viewport-clamped bubble in components.js — the same one the
   ⓘ info icon uses. Both .tip and .info-tip now render via .info-tip-pop. */
.tip::after { content: none !important; }

/* Info icon (ⓘ) variant of .tip — an icon rather than underlined text. */
.info-tip {
  border-bottom: 0;
  cursor: help;
  color: var(--slate-400);
  font-size: 0.85em;
  margin-left: 5px;
  vertical-align: middle;
  font-weight: 400;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.info-tip:hover, .info-tip:focus { color: var(--primary); }
/* The CSS ::after tooltip gets clipped by the scroll/overflow container
   (.view-container has overflow-x:hidden, which also clips vertically, and a
   centred bubble near an edge gets cut horizontally). So disable it and drive
   the tooltip from JS (components.js) as a body-appended, position:fixed bubble
   that's clamped to the viewport — never clipped, on desktop or mobile. */
.info-tip::after { content: none !important; }
/* Deliberate keyboard-only focus ring (no box on mouse click). */
.info-tip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 50%;
}

/* JS-driven info tooltip — pinned to <body>, fixed-position, viewport-clamped. */
.info-tip-pop {
  position: fixed;
  z-index: 1000;
  background: var(--slate-800);
  color: var(--slate-50);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  max-width: min(280px, calc(100vw - 16px));
  width: max-content;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.info-tip-pop.show { opacity: 1; }

/* ---- Content Decay Visual ---- */
.decay-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.decay-bar {
  width: 120px;
  height: 8px;
  background: var(--slate-100);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.decay-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.decay-bar-fill.severe { background: var(--red); }
.decay-bar-fill.moderate { background: var(--amber); }
.decay-bar-fill.mild { background: var(--blue); }
.decay-bar-fill.growth { background: var(--green); }

.decay-pct {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 55px;
  text-align: right;
}
.decay-pct.severe { color: var(--red); }
.decay-pct.moderate { color: var(--amber); }
.decay-pct.mild { color: var(--blue); }
.decay-pct.growth { color: var(--green); }

/* ============================================================
   Uptime heatmap — 7 rows (days) x 24 cells (hours)
   ============================================================ */
.uptime-heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--slate-500);
}
.uptime-heatmap-header {
  display: grid;
  grid-template-columns: 80px repeat(24, 1fr);
  gap: 2px;
  align-items: center;
  padding-right: 2px;
}
.uptime-heatmap-header > div {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.uptime-heatmap-row {
  display: grid;
  grid-template-columns: 80px repeat(24, 1fr);
  gap: 2px;
  align-items: center;
}
.uptime-heatmap-daylabel {
  font-weight: 600;
  color: var(--slate-600);
  font-size: 11px;
}
.uptime-heatmap-cell {
  aspect-ratio: 1;
  min-height: 18px;
  border-radius: 3px;
  background: var(--slate-200);
  cursor: default;
  transition: transform 0.08s ease;
}
.uptime-heatmap-cell:hover { transform: scale(1.2); z-index: 1; }
.uptime-heatmap-cell.up     { background: var(--green); }
.uptime-heatmap-cell.down   { background: var(--red); }
.uptime-heatmap-cell.nodata { background: #e5e7eb; }
.uptime-heatmap-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--slate-500);
  align-items: center;
}
.uptime-heatmap-legend .sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.uptime-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.uptime-status-dot.up   { background: var(--green); }
.uptime-status-dot.down { background: var(--red); }
.uptime-status-dot.unknown { background: var(--slate-400); }

.decay-spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  vertical-align: middle;
}
.decay-spark-bar {
  width: 4px;
  border-radius: 1px;
  background: var(--slate-200);
  min-height: 2px;
}

.decay-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s;
}
.decay-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.decay-card .decay-page { font-size: 13px; margin-bottom: 4px; }
.decay-card .decay-meta { font-size: 12px; color: var(--slate-500); display: flex; gap: 16px; }
.decay-card .decay-meta span { display: flex; align-items: center; gap: 4px; }
.decay-card .decay-right { text-align: right; }

/* ---- Badges / Tags ---- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green { background: var(--green-light); color: #166534; }
.badge-red   { background: var(--red-light);   color: #991b1b; }
.badge-yellow { background: var(--amber-light); color: #92400e; }
.badge-blue  { background: var(--blue-light);  color: var(--blue-dark); }
.badge-purple { background: var(--purple-light); color: var(--purple-dark); }
.badge-muted { background: var(--slate-100);   color: var(--slate-500); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15,23,42,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}
.modal-content .card { margin-bottom: 12px; }
.modal-content .metric-grid { margin-bottom: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--white);
  color: var(--slate-700);
  text-decoration: none;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); opacity: 1; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { color: #991b1b; background: var(--red-light); border-color: rgba(220,38,38,0.2); }
.btn-danger:hover { background: #fecaca; opacity: 1; }
.btn-success { color: #166534; background: var(--green-light); border-color: rgba(22,163,74,0.2); }
.btn-success:hover { background: #bbf7d0; opacity: 1; }
.btn-ghost { background: var(--slate-100); border-color: var(--slate-200); color: var(--slate-700); }
.btn-ghost:hover { background: var(--slate-200); opacity: 1; }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bulk action bar */
.bulk-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--blue-light); border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px; font-size: 13px; color: var(--slate-800);
}

/* External link style */
a.ext-link {
  color: var(--blue); text-decoration: none;
}
a.ext-link:hover { text-decoration: underline; }
a.ext-link .ext-icon { font-size: 11px; margin-left: 3px; opacity: 0.5; }

/* ---- Forms ---- */
.form-row { display: flex; gap: 12px; align-items: end; margin-bottom: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.form-group { display: flex; flex-direction: column; gap: 4px; position: relative; }
.form-group label { font-size: 12px; color: var(--slate-500); }
.form-group input, .form-group select, .form-group textarea {
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-800);
  font-size: 13px;
  font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ---- Chart header (title + toggle row) ---- */
/* Used for the Branded/Non-branded, Query Count, and GA4 Source charts.
   Wraps so the Line/Bar toggle drops below the title when the period label
   + context chips (content group, topic cluster, device) run long. */
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.chart-header h3 { margin: 0; }

/* ---- Date Range Bar ---- */
.date-range-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.date-range-bar input[type="date"] {
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  color: var(--slate-800);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.date-range-bar input[type="date"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.gran-toggle {
  display: inline-flex;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  overflow: hidden;
}
.gran-toggle .btn {
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--slate-200);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
}
.gran-toggle .btn:last-child { border-right: 0; }
.gran-toggle .btn.btn-primary { color: #fff; }

/* Icon-only segmented controls (device toggle: All / Desktop / Mobile).
   Override the wider 14px horizontal padding meant for text buttons (Days /
   Weeks / Months) so the icon-only buttons sit at roughly 30px square — same
   visual weight as the adjacent .btn-icon buttons (Filter / Search / Reset).
   Centering the SVG inside the button keeps it crisp. */
.gran-toggle .dash-device,
.gran-toggle .pi-device {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Square icon-only buttons used inside filter rows (Reset, Page Search). */
.btn.btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .12s, background .12s, border-color .12s;
}
.btn.btn-icon:hover { color: var(--blue); border-color: var(--blue); background: rgba(37,99,235,0.06); }
.btn.btn-icon svg { display: block; }
/* Comparison-mode icon — when active, render with the brand blue
   border + foreground AND release the 30px width lock from .btn-icon so
   the short mode label (PREV / YOY / PREV MO) can sit alongside the
   icon instead of overflowing a square box. */
.dash-compare-btn.compare-active {
  width: auto;
  padding: 0 10px;
  gap: 5px;
  background: var(--blue-light, #eff6ff);
  border-color: var(--blue);
  color: var(--blue);
}
.dash-compare-btn.compare-active:hover {
  background: rgba(37,99,235,0.12);
}
.dash-compare-btn .compare-mode-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
  white-space: nowrap;
}

/* Vertical hairline that separates "filter the dashboard" controls from
   the "jump to a page" search action. */
.date-range-bar .filter-divider {
  width: 1px;
  height: 22px;
  background: var(--slate-200);
  margin: 0 2px;
  flex: 0 0 auto;
}

/* ---- Page Inspector typeahead modal ---- */
.page-search-results .ps-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-search-results .ps-item:last-child { border-bottom: 0; }
.page-search-results .ps-item:hover,
.page-search-results .ps-item.active {
  background: rgba(37,99,235,0.08);
  color: var(--blue-dark, #1e40af);
}
.page-search-results .ps-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.page-search-results .ps-path mark { background: #fef3c7; color: inherit; padding: 0 2px; border-radius: 2px; }
.page-search-results .ps-src {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.page-search-results .ps-src-green { background: #dcfce7; color: #166534; }
.page-search-results .ps-src-blue { background: #dbeafe; color: #1e40af; }
.page-search-results .ps-src-purple { background: #ede9fe; color: #5b21b6; }
.page-search-results .ps-src-muted { background: var(--bg-secondary); color: var(--text-muted); }

/* Inline "open in Page Inspector" icon used inside URL cells. Sits beside
   the existing extLink so the user can pivot to the full per-URL view from
   any list without losing context. */
.inspect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 3px;
  color: var(--text-muted);
  vertical-align: middle;
  transition: color .12s, background .12s;
}
.inspect-icon:hover { color: var(--blue); background: rgba(37,99,235,0.1); }

/* ---- Filter Bar ---- */
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-bar input, .filter-bar select {
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-700);
  font-size: 13px;
  font-family: inherit;
}
.filter-bar input:focus, .filter-bar select:focus {
  outline: none;
  border-color: var(--blue);
}

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 2px;
  background: var(--slate-200);
}
.timeline-item {
  position: relative;
  padding: 12px 0 12px 16px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -17px; top: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--white);
}
.timeline-item.auto::before { background: var(--blue); }
.timeline-item.system::before { background: var(--amber); }
.timeline-item .tl-date { font-size: 11px; color: var(--slate-400); }
.timeline-item .tl-summary { font-size: 13px; margin-top: 2px; color: var(--slate-800); }
.timeline-item .tl-url { font-size: 12px; color: var(--slate-500); margin-top: 2px; }

/* ---- Empty State ---- */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--slate-400);
}
.empty h3 { font-size: 16px; color: var(--slate-800); margin-bottom: 8px; }

/* ---- Loading ---- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--slate-400);
}
.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-right: 10px;
}
.sb {
  width: 5px;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
  animation: sbPulse 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.sb:nth-child(1) { height: 8px;  animation-delay: 0s; }
.sb:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.sb:nth-child(3) { height: 20px; animation-delay: 0.3s; }
.sb:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.sb:nth-child(5) { height: 8px;  animation-delay: 0.6s; }
@keyframes sbPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%       { transform: scaleY(1);   opacity: 1; }
}
/* Small inline variant — used in crawl progress text */
.signal-bars-sm {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
}
.signal-bars-sm .sb {
  width: 3px;
  border-radius: 1px 1px 0 0;
}
.signal-bars-sm .sb:nth-child(1) { height: 4px; }
.signal-bars-sm .sb:nth-child(2) { height: 7px; }
.signal-bars-sm .sb:nth-child(3) { height: 11px; }
.signal-bars-sm .sb:nth-child(4) { height: 7px; }
.signal-bars-sm .sb:nth-child(5) { height: 4px; }

/* ---- Login ---- */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--slate-900);
}
.login-card {
  text-align: center;
  padding: 48px;
  background: var(--slate-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.login-card .logo { font-size: 32px; margin-bottom: 12px; }
.login-card p { color: var(--slate-400); margin-bottom: 24px; }
.btn-google { padding: 12px 24px; font-size: 15px; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 13px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); color: #991b1b; }

/* ---- Mobile header bar ---- */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: var(--slate-800);
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}
.mobile-header .logo { font-size: 16px; margin: 0; }

/* ---- Hamburger button ---- */
.menu-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: #94a3b8;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.menu-toggle:hover span { background: #fff; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Sidebar backdrop ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 9;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .mobile-header { display: flex; }
  .menu-toggle { display: flex; }

  /* Hide logo in sidebar on mobile — it's in the header now */
  #sidebar .sidebar-header { display: none; }

  /* On mobile, always full-width slide-in regardless of collapsed state */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 11;
    width: var(--sidebar-w) !important;
    top: 48px;
    bottom: 0;
  }
  #sidebar.open { transform: translateX(0); }
  /* Mobile: always show labels, cancel collapsed look */
  #app.sidebar-collapsed #sidebar .nav-item span,
  #app.sidebar-collapsed #sidebar .nav-label,
  #app.sidebar-collapsed #sidebar #user-info { display: inline; }
  #app.sidebar-collapsed #sidebar .nav-item {
    justify-content: flex-start;
    padding: 7px 18px;
    border-right-width: 0;
    border-left-width: 3px;
  }
  #app.sidebar-collapsed #sidebar .footer-icons { flex-direction: row; gap: 16px; }

  .sidebar-backdrop.open { display: block; top: 48px; }

  #content {
    margin-left: 0 !important;
    padding: 60px 12px 16px;
  }

  /* Cards tighter on mobile */
  .card { padding: 14px 14px; }
  .metric-card { padding: 14px 16px; }
  .metric-card .value { font-size: 22px; }
  .metric-card .label { font-size: 10px; }

  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric-grid.cwv-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .metric-grid.actions-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-wrap: wrap !important; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h2 { font-size: 18px; }
  .page-header .subtitle { font-size: 12px; }
  .modal-content { max-width: 100%; padding: 16px; }

  /* Stack the branded + query charts vertically on mobile */
  .chart-pair { grid-template-columns: 1fr; }

  /* Tables: allow horizontal scroll, prevent overflow */
  .table-wrap { margin: 0 -14px; border-radius: 0; max-height: 70vh; -webkit-overflow-scrolling: touch; }
  .card .table-wrap { margin: 0 -14px; }
  /* Some cards use inline padding:0 to make the table flush with card edges
     on desktop. On mobile the negative margin above would then push the wrap
     past the card AND past the viewport — neutralise it. */
  .card[style*="padding:0"] .table-wrap,
  .card[style*="padding: 0"] .table-wrap { margin: 0; }
  table { font-size: 12px; min-width: 500px; }
  thead th { padding: 7px 8px; font-size: 10px; }
  tbody td { padding: 8px; }
  td.url { max-width: 180px; font-size: 11px; }
  td.query { max-width: 150px; font-size: 11px; }

  /* Bulk bar + filter bar */
  .bulk-bar { flex-wrap: wrap; padding: 8px 12px; font-size: 12px; }
  .filter-bar { gap: 8px; }
  .filter-bar select, .filter-bar input { font-size: 12px; padding: 5px 8px; }

  /* Tabs scroll horizontally */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 10px 14px; font-size: 12px; }

  /* Button groups wrap */
  .btn-group { flex-wrap: wrap; }
  .btn { font-size: 12px; padding: 5px 10px; }

  /* Timeline */
  .timeline { padding-left: 14px; }

  /* Toast full width on mobile */
  .toast { left: 12px; right: 12px; bottom: 12px; text-align: center; }

  /* Charts slightly shorter on mobile */
  div[style*="height:280px"] { height: 220px !important; }
  div[style*="height:220px"] { height: 180px !important; }
}

@media (max-width: 768px) {
  /* Mobile dashboard filter bar — flex with wrap so we get five rows:
       1. Date inputs:  [Start] to [End]
       2. Granularity:  [Days | Weeks | Months]   (full-width)
       3. Selects:      [Content Group] [Topic Cluster]   (side-by-side)
       4. Device:       [All | Desktop | Mobile]   (full-width)
       5. Trio:         [Filter] [Search] [Reset]   (icon-only, side-by-side)
     Anything not on this list (e.g. .filter-divider) is hidden on mobile
     since dividers don't make sense between wrapped rows. */
  .date-range-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  /* Quick-range preset + compare icons sit at fixed width so they don't
     steal space from the date inputs. Must come BEFORE the trio rule
     below so the trio's wider flex doesn't override them. */
  .date-range-bar > .dash-preset-btn,
  .date-range-bar > .dash-compare-btn {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    padding: 5px 9px;
  }
  /* Dates split the remaining row width 50/50. flex-basis:0 with grow:1
     lets the preset button + "to" separator take their natural width
     and the inputs share whatever's left. */
  .date-range-bar input[type="date"] {
    flex: 1 1 0;
    min-width: 0;
  }
  .gran-toggle {
    flex: 1 1 100%;
    width: 100%;
  }
  .gran-toggle .btn { flex: 1; text-align: center; }
  /* Content Group + Topic Cluster: half each, side by side */
  .date-range-bar > select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    max-width: none;
  }
  /* Vertical divider doesn't make sense between wrapped rows */
  .date-range-bar .filter-divider { display: none; }
  /* Filter / Search / Reset trio — three icon buttons in one row.
     Excludes the leading preset / compare icons so they don't stretch
     to a third of the bar width. */
  .date-range-bar > .btn-icon:not(.dash-preset-btn):not(.dash-compare-btn) {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    max-width: none;
  }

  /* All Sites table */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { width: 100%; table-layout: auto; }
}

@media (max-width: 480px) {
  #content { padding: 56px 8px 12px; }
  .card { padding: 12px 10px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metric-grid.cwv-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .metric-grid.actions-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-wrap: wrap !important; }
  .metric-card { padding: 12px; }
  .metric-card .value { font-size: 20px; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .btn-group { flex-direction: column; }

  /* Even tighter tables */
  thead th { padding: 6px 6px; font-size: 9px; }
  tbody td { padding: 7px 6px; font-size: 11px; }
  td.url { max-width: 140px; font-size: 10px; }
  td.query { max-width: 120px; font-size: 10px; }
  .table-wrap { margin: 0 -10px; overflow-x: auto; }
  .card .table-wrap { margin: 0 -10px; }
  .card[style*="padding:0"] .table-wrap,
  .card[style*="padding: 0"] .table-wrap { margin: 0; }
  table { min-width: 320px; }

  /* Sites list — prevent overflow */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h2 { font-size: 18px; }
  #view { max-width: 100vw; overflow-x: hidden; }
  #content { overflow-x: hidden; }

  /* Cannibalisation cards */
  .card h3 { font-size: 13px; }

  /* Share link code block */
  code { font-size: 10px !important; max-width: 180px !important; }

  /* Uptime heatmap — scale to fit mobile viewport
     Label column: 80px → 36px, cells: min-height removed so aspect-ratio drives size,
     hour header hidden (numbers unreadable at ~13px cell width), gap tightened to 1px.
     On Pixel 7 (~376px usable card width): (376-36-23) / 24 ≈ 13px cells — clearly visible. */
  .uptime-heatmap-header { display: none; }
  .uptime-heatmap-row { grid-template-columns: 36px repeat(24, 1fr); gap: 1px; }
  .uptime-heatmap { gap: 1px; }
  .uptime-heatmap-cell { min-height: 0; border-radius: 2px; }
  .uptime-heatmap-daylabel { font-size: 10px; }

  /* ---- Task Manager (Phase 3-4) mobile fixes ---- */

  /* Task form — force every form-group to full width so fields stack cleanly
     instead of wrapping into awkward 1.5-column rows */
  #task-form .form-group {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  #task-form select,
  #task-form input,
  #task-form textarea { width: 100%; box-sizing: border-box; }
  #task-form .btn-group { flex-direction: row; gap: 8px; flex-wrap: wrap; }
  #task-form .btn-group .btn { flex: 1 1 auto; }

  /* @-mention autocomplete dropdown — fit the viewport */
  #mention-suggest { max-width: calc(100vw - 20px); }
  #mention-suggest .mention-item { padding: 10px 14px; font-size: 14px; }

  /* Notification items — tighter spacing, buttons wrap */
  .notification-item { padding: 12px !important; }
  .notification-item .btn-sm { padding: 4px 10px; font-size: 11px; }

  /* Category admin — stack the add-new form (Name + Colour + Sort + button) */
  .card form[onsubmit*="createTaskCategory"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .card form[onsubmit*="createTaskCategory"] .btn { width: 100%; }

  /* Task list tables — hide lower-priority columns on mobile so the table fits
     natively (no horizontal scroll). The Title cell keeps category chip +
     linked-url/test badges inline, so users still see the key context. */
  .task-list-table { min-width: 0; width: 100%; font-size: 11px; table-layout: fixed; }
  .task-list-table th, .task-list-table td { padding: 6px 4px; }
  /* Title cell: wrap long strings, truncate via line-clamp as a last resort */
  .task-list-table td:first-child,
  .task-list-table th:first-child { word-break: break-word; overflow-wrap: anywhere; }
  .task-list-table td:first-child a { display: inline-block; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }

  /* Cross-site "My Tasks" — cols: 1 Title | 2 Site | 3 Category | 4 Status |
     5 Assigned | 6 Hrs | 7 Due | 8 Month | 9 Edit.
     Hide Site, Category, Assigned, Month. Keep Title, Status, Hrs, Due, Edit.
     Site name is shown under the title as a small secondary line (see JS). */
  .tl-cross th:nth-child(2), .tl-cross td:nth-child(2),
  .tl-cross th:nth-child(3), .tl-cross td:nth-child(3),
  .tl-cross th:nth-child(5), .tl-cross td:nth-child(5),
  .tl-cross th:nth-child(8), .tl-cross td:nth-child(8) { display: none; }

  /* Fixed-width hints for the 5 visible cols on Pixel 7 (~412px wide):
     Title flexes, Due/Status/Hrs/Edit stay compact. */
  .tl-cross { table-layout: fixed; width: 100%; }
  .tl-cross th:nth-child(4), .tl-cross td:nth-child(4) { width: 64px; }  /* Status */
  .tl-cross th:nth-child(6), .tl-cross td:nth-child(6) { width: 42px; text-align: right; }  /* Hrs */
  .tl-cross th:nth-child(7), .tl-cross td:nth-child(7) { width: 62px; white-space: nowrap; }  /* Due */
  .tl-cross th:nth-child(9), .tl-cross td:nth-child(9) { width: 54px; }  /* Edit */

  /* Per-site "Tasks" — cols: 1 Title | 2 Category | 3 Due | 4 Status |
     5 Assigned | 6 Hrs | 7 Edit.
     Hide Category and Assigned. Keep Title, Due, Status, Hrs, Edit. */
  .tl-site th:nth-child(2), .tl-site td:nth-child(2),
  .tl-site th:nth-child(5), .tl-site td:nth-child(5) { display: none; }

  .tl-site { table-layout: fixed; width: 100%; }
  .tl-site th:nth-child(3), .tl-site td:nth-child(3) { width: 62px; white-space: nowrap; }  /* Due */
  .tl-site th:nth-child(4), .tl-site td:nth-child(4) { width: 68px; }  /* Status */
  .tl-site th:nth-child(6), .tl-site td:nth-child(6) { width: 42px; text-align: right; }  /* Hrs */
  .tl-site th:nth-child(7), .tl-site td:nth-child(7) { width: 54px; }  /* Edit */

  /* Tight button in last cell so it doesn't push the row over */
  .task-list-table td .btn-sm { padding: 3px 6px; font-size: 10px; }

  /* Inline site name under the task title on My Tasks (cross-site view).
     Emitted by the JS via .tl-site-inline-note. Hidden at desktop widths
     (see block below). */
  .tl-site-inline-note { display: block !important; font-size: 10px; color: var(--text-muted); margin-top: 2px; word-break: break-word; }
}

/* Hide the inline site-note line at desktop/tablet widths — the Site column is visible there. */
@media (min-width: 641px) {
  .tl-site-inline-note { display: none; }
}

/* ---- Sites grid ---- */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.site-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(37,99,235,0.1); }

/* ---- Verdict colors ---- */
.verdict-improved { color: var(--green); }
.verdict-declined { color: var(--red); }
.verdict-neutral { color: var(--slate-500); }
.verdict-inconclusive { color: var(--amber); }

/* ---- Tab bar ---- */
.tabs {
  display: flex;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 4px;
}
.tab {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  outline: none;
  transition: color 0.15s, border-color 0.15s;
}
/* ---- Collapsible grouped cards (Striking Distance, Query Gaps) ---- */
.sd-group .sd-group-header { background: var(--white) !important; }
.sd-group .sd-group-header:hover { background: #dbeafe !important; }
.sd-group.sd-open .sd-group-body { display: block !important; }
.sd-group.sd-open .sd-chevron { transform: rotate(90deg); }
.sd-group .sd-group-header a { pointer-events: auto; }
.sd-group.sd-open .sd-group-header { background: #dbeafe !important; }
.sd-group table thead th { background: #e0e7ef !important; }

.tab:hover { color: var(--slate-800); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 13px;
  color: var(--slate-400);
}

/* ---- Report Builder Form ---- */
.rb-form-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.rb-form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.rb-form-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.rb-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.rb-field input, .rb-field select, .rb-field textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-800);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rb-field input:focus, .rb-field select:focus, .rb-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.rb-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

.rb-section-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rb-section-item:hover {
  border-color: var(--blue);
  box-shadow: 0 1px 4px rgba(37,99,235,0.08);
}
.rb-section-item .rb-section-info { flex: 1; }
.rb-section-item .rb-section-info strong { font-size: 13px; }
.rb-section-item .rb-section-info .rb-section-desc { font-size: 11px; color: var(--slate-400); }

.rb-sections-empty {
  padding: 24px;
  text-align: center;
  color: var(--slate-400);
  border: 2px dashed var(--slate-200);
  border-radius: 8px;
  font-size: 13px;
}

.rb-add-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.rb-add-bar select {
  flex: 1;
  padding: 9px 12px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-800);
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
.rb-add-bar select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* AI Summary card */
.ai-summary {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.ai-summary h3 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.ai-summary .ai-content { font-size: 13px; line-height: 1.7; color: var(--slate-700); }
.ai-summary .ai-content h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: var(--slate-500);
}
.ai-summary .ai-section {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 3px solid var(--slate-200);
  background: var(--slate-50);
}
.ai-summary .ai-section.ai-positive { border-left-color: var(--green); background: rgba(22,163,74,0.04); }
.ai-summary .ai-section.ai-negative { border-left-color: var(--red); background: rgba(220,38,38,0.04); }
.ai-summary .ai-section.ai-actions { border-left-color: var(--blue); background: rgba(37,99,235,0.04); }
.ai-summary .ai-section.ai-reasoning { border-left-color: #8b5cf6; background: rgba(139,92,246,0.04); }
.ai-summary .ai-section.ai-competitor { border-left-color: #f59e0b; background: rgba(245,158,11,0.04); }
.ai-summary .ai-section.ai-copyblock { border-left-color: #10b981; background: rgba(16,185,129,0.04); }
.ca-copy-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 12px;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
}
.ca-copy-content h2 { font-size: 20px; font-weight: 700; color: var(--slate-800); margin: 0 0 8px 0; font-family: inherit; }
.ca-copy-content h3 { font-size: 16px; font-weight: 600; color: var(--slate-700); margin: 0 0 10px 0; font-family: inherit; }
.ca-copy-content p { font-size: 14px; color: var(--slate-700); margin: 0; }
.ca-copy-btn {
  margin-top: 12px;
  background: #10b981;
  color: white;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ca-copy-btn:hover { background: #059669; color: white; }
.ai-summary .ai-content p { margin-bottom: 8px; }
.ai-summary .ai-content ul, .ai-summary .ai-content ol { margin: 6px 0; padding-left: 20px; }
.ai-summary .ai-content li { margin-bottom: 6px; }
.ai-summary .ai-content li strong { color: var(--slate-800); }
.ai-summary .ai-content h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  margin: 14px 0 4px 0;
}
.ai-summary .ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 12px;
}

/* ---- Content Advisor ---- */
.ca-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.ca-main { min-width: 0; }
.ca-sidebar { position: sticky; top: 16px; }
.ca-form-card { padding: 24px; }
.ca-label { display: block; font-size: 11px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.ca-field-group input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-800);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.ca-field-group input[type="text"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  background: var(--white);
}
.ca-field-group input[type="text"]::placeholder { color: var(--slate-400); }
.ca-suggestion {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ca-suggestion:hover { border-color: var(--blue); background: rgba(37,99,235,0.03); }
.ca-suggestion-url { font-size: 12px; font-weight: 600; color: var(--slate-700); margin-bottom: 4px; word-break: break-all; }
.ca-suggestion-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ca-how-list { display: flex; flex-direction: column; gap: 10px; }
.ca-how-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--slate-700); line-height: 1.4; }
.ca-how-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .ca-layout { grid-template-columns: 1fr; }
  .ca-sidebar { position: static; }
}

/* ---- Ignore Button ---- */
.btn-ignore { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: 14px; line-height: 1; border-radius: 4px; opacity: 0.4; transition: opacity 0.15s, color 0.15s; }
.btn-ignore:hover { opacity: 1; color: var(--red); background: rgba(239,68,68,0.1); }

/* ---- Sortable Table Headers ---- */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--blue); }

/* ---- Keyword Table Mobile ---- */
.kw-table { font-size: 13px; }
.kw-table td, .kw-table th { padding: 8px 10px; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .kw-table { font-size: 12px; }
  .kw-table td, .kw-table th { padding: 6px 6px; }
  .kw-table td:first-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
  .kw-table td:first-child { max-width: 90px; }
  .kw-table td, .kw-table th { padding: 5px 4px; font-size: 11px; }
}

/* ---- Crawler Setup Styles ---- */
#crawlerPageUrl {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
}

#crawlerPageUrl:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-light);
}

#crawlerIframe {
  background: white;
}

#crawlerFormCard div > label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 13px;
  color: var(--slate-700);
}

#crawlerFormCard div > input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  margin-bottom: 4px;
}

#crawlerFormCard div > input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-light);
}

#crawlerFormCard div > button {
  font-size: 12px;
  padding: 4px 8px;
}

#crawlerFormCard [id$="_result"] {
  display: block;
  min-height: 20px;
  font-size: 12px;
  word-break: break-word;
}

/* Print Styles */
@media print {
  /* Hide non-print elements */
  #sidebar, #mobile-header, .sidebar-backdrop,
  .btn, .btn-group, .btn-primary, .btn-sm, .btn-danger,
  .filter-bar, .bulk-bar, .page-header button,
  .nav-item, .toast { display: none !important; }

  /* Full width, no margins */
  #app { display: block !important; }
  #content { margin-left: 0 !important; padding: 0 !important; }
  .view-container { padding: 0; }

  /* Reset backgrounds */
  body { background: white !important; color: black !important; font-size: 11px; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; page-break-inside: avoid; margin-bottom: 16px; }
  .metric-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }

  /* Remove scroll boxes — show all content */
  .table-wrap { max-height: none !important; overflow: visible !important; }
  table { min-width: auto !important; }

  /* Charts need explicit height for print */
  canvas { max-height: 250px !important; }

  /* No link decorations */
  a { color: black !important; text-decoration: none !important; }
  .ext-icon { display: none !important; }

  /* Page breaks */
  .page-header { page-break-after: avoid; }
  h2, h3 { page-break-after: avoid; }

  /* Metric grid print-friendly */
  .metric-grid { gap: 8px; }

  /* AI summary prints nicely */
  .ai-summary { background: #f8f9fa !important; border: 1px solid #ddd !important; }
}

@media (max-width: 768px) {
  .rb-form-grid.cols-2, .rb-form-grid.cols-4 { grid-template-columns: 1fr; }
  .rb-add-bar { flex-direction: column; }
  .qd-grid { grid-template-columns: 1fr !important; }
}

/* ---- Dashboard collapsible sections (accordion) ---- */
details.dash-section { padding: 0; }
details.dash-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-radius: var(--radius);
  user-select: none;
  position: relative;
}
details.dash-section > summary::-webkit-details-marker { display: none; }
details.dash-section > summary::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid var(--text-muted);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-right: 10px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
details.dash-section[open] > summary::before { transform: rotate(90deg); }
details.dash-section > summary:hover { background: var(--bg-secondary); }
details.dash-section .dash-section-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
}
details.dash-section .dash-section-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
details.dash-section[open] > *:not(summary) {
  padding-left: 24px;
  padding-right: 24px;
}
details.dash-section[open] > *:last-child { padding-bottom: 20px; }

/* ---- Star (important) button on test detail ---- */
.btn.star-btn { font-weight: 600; }
.btn.star-btn.is-important {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}
.btn.star-btn.is-important:hover {
  background: #fde68a;
  border-color: #d97706;
}

/* ---- Task comments thread ---- */
.task-comments-card { display: flex; flex-direction: column; }
.task-comments-list { flex: 1; min-height: 60px; }
.task-comments-empty { color: var(--text-muted); font-size: 13px; padding: 16px 4px; text-align: center; }

.task-comment {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.task-comment:last-child { border-bottom: none; }

.task-comment-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.task-comment-main { flex: 1; min-width: 0; }
.task-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.task-comment-author { font-size: 13px; font-weight: 600; color: var(--text); }
.task-comment-meta { font-size: 11px; color: var(--text-muted); margin-left: 6px; font-weight: 400; }
.task-comment-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.task-comment:hover .task-comment-actions { opacity: 1; }

.task-comment-actions button {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.task-comment-actions button:hover { background: var(--slate-100, #f1f5f9); color: var(--text); }
.task-comment-actions button.danger:hover { color: var(--red); }

.task-comment-body {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--text);
}
.task-comment-body p { margin: 0 0 8px; }
.task-comment-body p:last-child { margin-bottom: 0; }

.task-mention {
  background: var(--blue-light);
  color: var(--blue-dark);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.95em;
}

.task-comment-edit { margin-top: 4px; }
.task-comment-edit textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.task-comment-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}

.task-comment-form {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.task-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 60px;
}
.task-comment-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.task-comment-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.task-comment-form-hint { font-size: 11px; color: var(--text-muted); }