/* Measurebase — dashboard app shell */

/* Semantic tokens, the same values as style.css :root (2026-10-17). Declared
   here too so this sheet never depends on a visitor's cached style.css:
   without them var(--danger) and friends resolve to nothing and every red
   turns into plain text colour. Keep both lists identical. */
:root {
  --danger: #d93025;
  --danger-hover: #b3261e;
  --danger-soft: rgba(217,48,37,0.10);
  --success-soft: rgba(30,142,62,0.10);
  --warning-text: #c93400;
  --warning-soft: rgba(255,138,0,0.12);
  --info-soft: rgba(0,113,227,0.10);
  --focus-ring: 0 0 0 3px rgba(0,113,227,0.15);
  --surface: #ffffff;
  --radius-pill: 999px;
  --radius-ctl: 8px;   /* buttons, selects, small cards */
}

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg-soft-2);
}

/* ---------- Sidebar ---------- */

/* Shell bootstrap: apply workspace nav visibility before dashboard.js runs (anti-CLS). */
html[data-mb-workspace="customer"] .sidebar .sidebar-section-label:has(+ a[href*="partner/"]),
html[data-mb-workspace="customer"] .sidebar nav a.side-link[href*="partner/"] {
  display: none !important;
}

html[data-mb-agency-nav="direct"] .sidebar .sidebar-section-label:has(+ a[href*="partner/"]),
html[data-mb-agency-nav="direct"] .sidebar nav a.side-link[href*="domains.html"],
html[data-mb-agency-nav="direct"] .sidebar nav a.side-link[href*="billing.html"] {
  display: none !important;
}

html[data-mb-client-view="1"] .sidebar nav a.side-link[href*="billing.html"] {
  display: none !important;
}

/* ---------- Role gating ----------
   data-mb-can-* / data-mb-is-owner are stamped on <html> by
   js/dashboard.js applyRoleGating() from MBAuth.roleCan(), whose matrix
   mirrors the backend's abortUnlessRole tiers. CSS only hides what the API
   would reject; the server remains the actual gate. The billing selector
   matches both the pre-rewrite (billing.html) and rewritten (/<id>/billing)
   href spellings. */
html[data-mb-can-billing="0"] .sidebar nav a.side-link[href*="billing"] {
  display: none !important;
}

html[data-mb-can-team="0"] #open-invite-member,
html[data-mb-can-team="0"] #org-panel button[type="submit"],
html[data-mb-can-team="0"] #org-panel .btn-primary {
  display: none !important;
}

html[data-mb-can-team="0"] #org-panel input,
html[data-mb-can-team="0"] #org-panel select {
  pointer-events: none;
  background: var(--bg-soft);
  color: var(--text-soft);
}

/* Non-owners see the Danger Zone panel with an explanation (settings.html
   fills in their role); only the delete control itself is withheld. Until
   2026-09-15 the whole panel was hidden here, which read as "deletion is
   impossible" to admins who did not know the owner was another login. */
html[data-mb-is-owner="0"] #delete-account-start {
  display: none !important;
}

/* Viewers: the two big create/change CTAs disappear; every other operate
   control is disabled in JS (see domains.js's roleCan('operate') checks),
   and a read-only banner announces the mode (dashboard.js). */
html[data-mb-can-operate="0"] #open-new-domain,
html[data-mb-can-operate="0"] #open-gtm-script {
  display: none !important;
}

/* Inline role dropdown in the team table (js/team.js renderMemberRow). */
.role-select {
  font-family: var(--font);
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.role-select:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Reserve sidebar control dimensions; skeleton until shell JS finishes
   (the switcher trigger's own min-height sits in its main rule below). */
.account-switcher-text .name,
.plan-chip .name {
  min-height: 1.3em;
}

.account-switcher-text .sub,
.plan-chip .sub {
  min-height: 1.15em;
}

.app:not(.shell-ready) .account-switcher-text .name,
.app:not(.shell-ready) .account-switcher-text .sub,
.app:not(.shell-ready) .plan-chip .name,
.app:not(.shell-ready) .plan-chip .sub,
.app:not(.shell-ready) .sidebar-footer .avatar,
.app:not(.shell-ready) .account-switcher-trigger .acct-avatar {
  color: transparent;
  user-select: none;
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--border-soft) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shell-skeleton 1.2s ease-in-out infinite;
}

.app:not(.shell-ready) .sidebar-footer .avatar,
.app:not(.shell-ready) .account-switcher-trigger .acct-avatar {
  color: transparent;
}

@keyframes shell-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.sidebar {
  /* Sits on the paper ground (no own fill) — content cards carry the white. */
  background: transparent;
  border-right: 1px solid var(--border-soft);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 10px 24px;
}

.sidebar-logo .logo-mark {
  display: none;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 20px;
}

.sidebar-top .sidebar-logo {
  padding: 0;
}

/* Hidden (owner, 2026-10-23): the logo beside it already links to the
   account overview. */
.sidebar-door {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border-soft);
  background: #fff;
  font-size: 15px;
  color: var(--text-soft);
  flex-shrink: 0;
}

.sidebar-door:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Account switcher ---------- */

.account-switcher {
  position: relative;
  margin: 0 0 14px;
}

.account-switcher-trigger {
  width: 100%;
  min-height: 48px; /* reserved before shell JS fills it */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.account-switcher-trigger:hover { background: var(--bg-soft); }

.acct-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-ctl);
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.account-switcher-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.account-switcher-text .name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-switcher-text .sub {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-switcher-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .15s ease;
}

.account-switcher-chevron svg {
  width: 14px;
  height: 14px;
}

.account-switcher-trigger[aria-expanded="true"] .account-switcher-chevron {
  transform: rotate(180deg);
}

.account-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 30;
  /* The menu is absolutely positioned BELOW the trigger, so what it can
     occupy depends on where the trigger sits -- which is not a constant. It
     moves between the .sidebar-logo and .sidebar-top headers, and the menu
     itself grows a "Viewing client account" block in partner views. The old
     flat calc(100vh - 100px) budgeted from the top of the VIEWPORT rather
     than from the top of the MENU, so with enough accounts the list ran off
     the bottom of the screen with no way to scroll to it (the sidebar is
     height:100vh, so the page has nothing to scroll).
     sizeAccountSwitcherMenu() in js/dashboard.js measures the real gap on
     open; this fallback only applies if that never runs. */
  max-height: var(--switcher-max-h, calc(100vh - 200px));
  /* Without this the element is content-box, so max-height excludes the 6px
     padding either side plus the 1px border -- the rendered menu came out
     14px taller than the budget and ate almost all of the margin meant to
     keep it clear of the viewport edge. */
  box-sizing: border-box;
  overflow-y: auto;
  /* Don't hand the scroll to the page once the list hits its end. */
  overscroll-behavior: contain;
}

.account-switcher-menu.open { display: block; }

.account-switcher-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 6px 8px 4px;
}

.account-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-ctl);
  font-size: 13px;
  color: var(--text);
}

.account-switcher-item:hover { background: var(--bg-soft); }

.account-switcher-item.is-active {
  background: rgba(0, 113, 227, 0.06);
}

.account-switcher-item .account-switcher-check {
  margin-left: auto;
  color: var(--accent);
  display: inline-flex;
  flex-shrink: 0;
  visibility: hidden;
}

.account-switcher-item.is-active .account-switcher-check {
  visibility: visible;
}

.account-switcher-check svg { width: 14px; height: 14px; }

.account-switcher-add {
  font-weight: 500;
  color: var(--text-soft);
}

.account-switcher-add.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


.account-switcher-add-ic {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-ctl);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.account-switcher-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 2px;
}

.account-switcher-trigger.is-partner-client-view {
  border-color: rgba(0, 113, 227, 0.28);
  background: rgba(0, 113, 227, 0.05);
}

.account-switcher-trigger.is-partner-client-view .account-switcher-text .sub {
  color: var(--accent);
  font-weight: 500;
}

.account-switcher-context {
  margin: 2px 2px 8px;
  padding: 10px;
  border-radius: var(--radius-ctl);
  background: rgba(0, 113, 227, 0.06);
  border: 1px solid rgba(0, 113, 227, 0.14);
}

.account-switcher-context-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
}

.account-switcher-context-client {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.account-switcher-context-client .acct-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.account-switcher-context-meta {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 8px;
}

.account-switcher-context-meta strong {
  color: var(--text);
  font-weight: 700;
}

.account-switcher-context-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.account-switcher-context-link:hover {
  text-decoration: underline;
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 18px 10px 6px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-ctl);
  font-size: 14px;
  color: var(--text-soft);
  font-weight: 500;
}

.side-link .ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-link .ic svg { width: 16px; height: 16px; }

.side-link:hover {
  background: rgba(255,255,255,0.72);
  color: var(--text);
}

.side-link.active {
  /* Elevated white pill on the paper ground. */
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.plan-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}

.plan-chip:hover { background: var(--border-soft); }

.plan-chip .name {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
}

.plan-chip .sub {
  color: var(--text-faint);
}

.plan-chip .quota-bar {
  margin-top: 6px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
}

.plan-chip .quota-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

/* ---------- Main ---------- */

.main {
  min-width: 0;
}

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(249,249,247,0.78); /* paper-tinted, matches the ground */
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h1 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  /* Narrow screens: the title gives way to the controls and ellipsises
     instead of running underneath them (2026-10-17). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.alert-bell-wrap {
  position: relative;
}

.alert-bell-btn {
  position: relative;
}

/* Beats .icon-btn's own 30x30 sizing on specificity (compound selector),
   not source order -- .icon-btn's rule happens to appear later in this
   file, so a plain same-specificity override here would lose the cascade. */
.icon-btn.alert-bell-btn {
  width: 36px;
  height: 36px;
}

.alert-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Two states (2026-10-19): .is-new = unseen alerts, solid; .is-seen = acknowledged but
   still open, outlined with the same count. Red when anything open is critical, orange
   when they are all warnings. The bell icon takes the same colour while alerts are open. */
.alert-bell-badge { box-sizing: border-box; border: 1.5px solid transparent; box-shadow: 0 0 0 2px #fff; }
.alert-bell-badge.is-new.is-warning { background: var(--warning, #ff8a00); }
.alert-bell-badge.is-new.is-critical { background: var(--danger); }
.alert-bell-badge.is-seen { background: #fff; line-height: 13px; }
.alert-bell-badge.is-seen.is-warning { color: var(--warning-text); border-color: var(--warning, #ff8a00); }
.alert-bell-badge.is-seen.is-critical { color: var(--danger); border-color: var(--danger); }
.alert-bell-btn.has-open { color: var(--warning-text); }
.alert-bell-btn.has-open.is-critical { color: var(--danger); }

/* Bounded to the viewport, not just to its own content. This hangs off a
   position:sticky topbar, so anything that extends past the fold cannot be
   scrolled to -- on a short viewport the footer link and the last alerts were
   permanently out of reach. Capping the height makes the list scroll instead. */
.alert-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 40;
  overflow: hidden;
}

/* display:flex above would otherwise beat the `hidden` attribute's UA
   display:none and leave the dropdown permanently open. */
.alert-bell-dropdown[hidden] {
  display: none;
}

.alert-bell-dropdown-header,
.alert-bell-dropdown-footer {
  flex-shrink: 0;
}

.alert-bell-dropdown-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}

/* Same flex min-height:auto trap as .modal-body -- without min-height:0 this
   keeps its full content height and pushes the footer out of the capped box. */
.alert-bell-dropdown-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
}

.alert-bell-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.alert-bell-item {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
}

.alert-bell-item:last-child { border-bottom: none; }
.alert-bell-item-row { display: flex; gap: 10px; align-items: flex-start; }
.alert-bell-item-text { flex: 1; min-width: 0; display: block; }
.alert-bell-item:hover { background: var(--bg-soft); }

.alert-bell-item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.alert-bell-item.severity-critical .alert-bell-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  margin-right: 6px;
}

.alert-bell-item.severity-warning .alert-bell-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  margin-right: 6px;
}

.alert-bell-item-message {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

.alert-bell-dropdown-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.alert-bell-dropdown-footer a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.setup-guide-wrap {
  position: relative;
}

.setup-guide-btn {
  position: relative;
}

/* Beats .icon-btn's own 30x30 sizing on specificity (compound selector),
   not source order -- .icon-btn's rule happens to appear later in this
   file, so a plain same-specificity override here would lose the cascade. */
.icon-btn.setup-guide-btn {
  width: 36px;
  height: 36px;
}

.setup-guide-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.setup-guide-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 40;
  overflow: hidden;
}

.setup-guide-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}

.setup-guide-progress {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
}

.setup-guide-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
}

.setup-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
}

.setup-guide-item:last-child { border-bottom: none; }
.setup-guide-item:hover { background: var(--bg-soft); }

.setup-guide-item-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  color: #fff;
}

.setup-guide-item.is-done .setup-guide-item-check {
  background: var(--success);
  border-color: var(--success);
}

.setup-guide-item-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.setup-guide-item.is-done .setup-guide-item-title {
  color: var(--text-faint);
  text-decoration: line-through;
}

.setup-guide-item-desc {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  margin-top: 2px;
}

.setup-guide-item-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.setup-guide-item:hover .setup-guide-item-dismiss {
  opacity: 1;
}

.setup-guide-item-dismiss:hover {
  background: var(--border-soft);
  color: var(--text);
}

.overview-setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
}

.overview-setup-item:last-child { border-bottom: none; }
.overview-setup-item:hover { background: var(--bg-soft); }

.overview-setup-item-text {
  flex: 1;
  min-width: 0;
}

.overview-setup-item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.overview-setup-item-desc {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 2px;
}

.overview-setup-item-arrow {
  flex-shrink: 0;
  color: var(--text-faint);
}

.overview-alerts-empty {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.overview-alert-item {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
}

.overview-alert-item:last-child { border-bottom: none; }
.overview-alert-item:hover { background: var(--bg-soft); }

.overview-alert-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.overview-alert-item.severity-critical .overview-alert-item-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  margin-right: 7px;
}

.overview-alert-item.severity-warning .overview-alert-item-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  margin-right: 7px;
}

.overview-alert-item-message {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}

.sidebar-toggle.icon-btn {
  display: none;
  flex-shrink: 0;
}

.sidebar-backdrop {
  display: none;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

a.avatar {
  text-decoration: none;
  transition: opacity .15s ease;
}

a.avatar:hover { opacity: 0.85; }

button.avatar {
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s ease;
}

button.avatar:hover { opacity: 0.85; }

.avatar-menu {
  position: relative;
}

.avatar-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 40;
}

.avatar-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-ctl);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.avatar-menu-item:hover { background: var(--bg-soft); }

.avatar-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--border-soft);
}

.content {
  padding: 32px;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Stat cards ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.stat-card .label {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.stat-card .value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stat-card .delta {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 500;
}

.delta.up { color: var(--success); }
.delta.warn { color: var(--warning-text); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--text-faint); }

/* ---------- Loading skeletons (stat cards, charts, tables) ---------- */
/* A disabled button had no styling of its own, so a button held inert during
   a network round-trip looked exactly like a live one. pointer-events is
   belt-and-braces on top of the disabled attribute. */
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

/* Toggle `.is-loading` on `.stat-card` / `.panel-body` while data is being
   fetched — see js/dashboard.js's getDataLoadingTargets()/setDataLoadingState(). */

:root {
  /* Soft single-hue blue sweep (low contrast on purpose). To revert to the
     neutral grey shimmer, swap this for:
     --skeleton-grad: linear-gradient(90deg, var(--bg-soft) 25%, var(--border-soft) 37%, var(--bg-soft) 63%);
     Or for the earlier blue→orange version:
     --skeleton-grad: linear-gradient(90deg, rgba(0, 113, 227, 0.16) 20%, rgba(255, 138, 0, 0.26) 50%, rgba(0, 113, 227, 0.16) 80%); */
  --skeleton-grad: linear-gradient(90deg,
    rgba(0, 113, 227, 0.10) 20%,
    rgba(0, 113, 227, 0.20) 50%,
    rgba(0, 113, 227, 0.10) 80%);
}

@keyframes skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.stat-card.is-loading .value,
.stat-card.is-loading .delta {
  color: transparent;
  border-radius: 4px;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.panel-body.is-loading {
  position: relative;
  min-height: 80px;
}

/* Loading placeholders inside a rendered panel (stats + log pages,
   2026-10-19): three shimmer lines in place of a plain "Loading…". */
.mb-skel { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; }
.mb-skel span, .mb-skel-bar {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.mb-skel span:nth-child(1) { width: 68%; }
.mb-skel span:nth-child(2) { width: 92%; }
.mb-skel span:nth-child(3) { width: 48%; }
td.mb-skel-cell { padding: 0; }
.mb-skel-bar { display: inline-block; width: 64px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .mb-skel span, .mb-skel-bar { animation: none; } }

.panel-body.is-loading > * { visibility: hidden; }

.panel-body.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.data-loading-surface.is-loading {
  position: relative;
  min-height: 160px;
}

.data-loading-surface.is-loading:not(.panel-body):not(.stat-card) > * {
  visibility: hidden;
}

.data-loading-surface.is-loading:not(.panel-body):not(.stat-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: inherit;
}

/* A single loading piece of text (one grid card's subtitle, one detail-page
   lead line) -- too small for the panel/stat-card skeleton above, which is
   sized for a whole container. Width is per-usage via an inline style or a
   modifier; this just supplies the shimmer look at line-of-text size. */
.skeleton-text {
  display: inline-block;
  width: 90px;
  max-width: 100%;
  height: 0.85em;
  border-radius: 4px;
  vertical-align: middle;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ---------- Panels ---------- */

.panel {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel-danger {
  border-color: var(--danger);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.panel-header p {
  font-size: 13px;
  color: var(--text-faint);
  margin: 2px 0 0;
}

.panel-body { padding: 24px; }
.panel-body.no-pad { padding: 0; }

/* ---------- Usage chart (css-only bars) ---------- */

.chart-wrap {
  display: flex;
  gap: 10px;
  padding-top: 48px;
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
}

.chart-plot { position: relative; flex: 1; min-width: 0; }

.chart-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.chart-grid span { display: block; height: 0; border-top: 1px solid var(--border-soft); }
.chart-grid span:last-child { border-top-color: var(--border); }

.chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
}

.chart .bar-col {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.chart .bar {
  width: 100%;
  min-height: 3px;
  align-self: flex-end;
  background: linear-gradient(180deg, var(--accent-orange), var(--accent));
  border-radius: 6px 6px 3px 3px;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity .15s ease;
}

.chart .bar-col:hover .bar,
.chart .bar-col:focus .bar { opacity: 1; }

/* Stacked, multi-category bars (see renderBotChart in dashboard/domain.html)
   -- same width/baseline as .bar above, but built from per-category
   .bar-segment fills instead of one gradient. column-reverse + a flex gap
   keeps the first-rendered category at the baseline with a 2px surface gap
   between segments (per the dataviz skill's stacked-fill spec), so only the
   bottom segment gets the baseline corner rounding and only the top segment
   gets the rounded data-end. */
.bar-stack {
  width: 100%;
  align-self: flex-end;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  cursor: pointer;
}

.bar-segment {
  width: 100%;
  min-height: 3px;
  opacity: 0.85;
  transition: opacity .15s ease;
}

.bar-segment:first-child { border-radius: 0 0 3px 3px; }
.bar-segment:last-child { border-radius: 6px 6px 0 0; }
.bar-segment:first-child:last-child { border-radius: 6px 6px 3px 3px; }

.chart .bar-col:hover .bar-segment,
.chart .bar-col:focus .bar-segment { opacity: 1; }

.tt-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bot-chart-legend {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.bar-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 5;
}

.bar-tooltip strong { display: block; font-size: 13px; font-weight: 700; }
.bar-tooltip .tt-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 1px; }

.bar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}

.chart .bar-col:hover .bar-tooltip,
.chart .bar-col:focus .bar-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.chart-labels {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-left: 46px;
}

/* ---------- Agency client request charts ---------- */

.client-requests-intro {
  margin-bottom: 0;
}

.client-requests-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.client-request-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.client-request-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.client-request-header .client-name-cell {
  min-width: 0;
}

.client-request-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-faint);
}

.client-request-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.client-request-card .panel-body {
  padding: 16px 20px 20px;
}

.client-request-card .chart-wrap {
  padding-top: 28px;
}

.client-request-card .chart-axis {
  width: 30px;
  font-size: 10px;
}

.client-request-card .chart {
  height: 120px;
}

.client-request-card .chart-labels {
  padding-left: 40px;
  margin-top: 8px;
}

.client-request-card .chart-labels-pending {
  visibility: hidden;
}

.client-request-card .chart-labels span {
  font-size: 10px;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
}

.client-request-card .chart-labels-rotated {
  height: 52px;
  margin-top: 4px;
  align-items: flex-start;
}

.client-request-card .chart-labels-rotated span {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 52px;
  overflow: visible;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  line-height: 1;
}

.client-request-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-faint);
}

@media (max-width: 1200px) {
  .client-requests-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .client-requests-grid {
    grid-template-columns: 1fr;
  }
}

.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---------- Comparison line chart ---------- */

.line-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-soft);
}

.line-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.line-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
}

.line-legend-dot.client { background: var(--accent-orange); }
.line-legend-dot.server { background: var(--accent); }

.line-legend-lift {
  margin-left: auto;
  font-weight: 700;
  color: var(--success);
}

.line-chart-wrap {
  display: flex;
  gap: 10px;
  min-height: 190px;
  padding-top: 48px;
}

.line-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-area {
  stroke: none;
}

.line-area.client { fill: rgba(255, 138, 0, 0.10); }
.line-area.server { fill: rgba(0, 113, 227, 0.10); }

.line-series {
  fill: none;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-series.client { stroke: var(--accent-orange); }
.line-series.server { stroke: var(--accent); }

.line-point-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.line-point-node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .15s ease;
}

.line-point-node.client {
  background: color-mix(in srgb, var(--accent-orange) 85%, #ffffff 15%);
}

.line-point-node.server {
  background: color-mix(in srgb, var(--accent) 86%, #ffffff 14%);
}

.line-chart-wrap:hover .line-point-node,
.line-chart-wrap:focus-within .line-point-node {
  opacity: 1;
}

.line-hover-layer {
  position: absolute;
  inset: 0;
}

.line-hover-col {
  position: absolute;
  top: 0;
  height: 100%;
  cursor: pointer;
}

.line-hover-col .bar-tooltip { text-align: left; }

.line-hover-col:hover .bar-tooltip,
.line-hover-col:focus .bar-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bar-tooltip.align-start {
  left: 0;
  transform: translateY(4px);
}

.bar-tooltip.align-start::after { left: 14px; transform: none; }

.bar-tooltip.align-end {
  left: auto;
  right: 0;
  transform: translateY(4px);
}

.bar-tooltip.align-end::after { left: auto; right: 14px; transform: none; }

.line-hover-col:hover .bar-tooltip.align-start,
.line-hover-col:focus .bar-tooltip.align-start,
.line-hover-col:hover .bar-tooltip.align-end,
.line-hover-col:focus .bar-tooltip.align-end {
  transform: translateY(0);
}

.line-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  white-space: nowrap;
}

.line-tooltip-row .line-legend-dot { flex-shrink: 0; }

/* ---------- Data table ---------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft-2);
}

.data-table td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}

.data-table tr:last-child td { border-bottom: none; }
/* Secondary figure next to a number (a share in brackets) on the domain
   page's insight tables -- dashboard.css had no standalone .muted rule. */
.data-table .muted { color: var(--text-soft); font-weight: 400; }

.data-table tr:hover td { background: var(--bg-soft-2); }

/* 2026-10-19: every plain table on the redesigned header + figure style the
   new tables (activity, tagging health, request log) were built on: lighter
   column labels, aligned figures, rows centred on their tallest cell. */
.data-table { font-variant-numeric: tabular-nums; }
.data-table th { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; padding: 11px 24px; background: var(--bg-soft, #f9f9f7); }
.data-table td { vertical-align: middle; }
.data-table td .badge, .data-table td [class^="badge-"] { white-space: nowrap; }

/* Every data table in the dashboard sits inside a .panel, and .panel clips
   with overflow:hidden -- so a table wider than its panel was cut off dead,
   with no way to reach the columns past the edge. Giving the body the
   overflow makes it scrollable instead of amputated.

   Scoped with :has() rather than applied to .panel-body outright: a scroll
   container is also a clipping context, and the many panel bodies holding
   non-table content have no overflow to manage and shouldn't gain one. No
   data table contains an absolutely-positioned menu, so nothing inside these
   loses the ability to escape. */
.panel-body:has(.data-table) {
  overflow-x: auto;
}


.table-status-link:hover {
  text-decoration: underline;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover { color: var(--text); }

.data-table th.sortable .sort-arrow {
  display: inline-block;
  width: 10px;
  margin-left: 2px;
}

.data-table th.sortable.sort-active .sort-arrow::after {
  content: '▲';
  font-size: 11px;
}

.data-table th.sortable.sort-active.sort-desc .sort-arrow::after {
  content: '▼';
}

/* ---------- Domain page: live requests panel ---------- */

.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success, #22a06b);
  margin-right: 2px;
  animation: mb-live-pulse 2s ease-in-out infinite;
}

@keyframes mb-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(34, 160, 107, 0); }
}

/* Thirty one-minute bars need a tighter rhythm than the daily chart's
   eight-pixel gap. */
.live-chart { gap: 3px; height: 120px; }

.live-chart-labels {
  justify-content: space-between;
  padding-left: 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* Three markers (start, middle, now) anchored to the chart's edges rather
   than inheriting the daily chart's one-label-per-bar thirds. */
.live-chart-labels span { flex: 1; text-align: center; }
.live-chart-labels span:first-child { text-align: left; }
.live-chart-labels span:last-child { text-align: right; }

/* ---------- Click ID Restorer: naming tips ---------- */

.click-id-tips {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--bg-soft-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.click-id-tips > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  list-style-position: inside;
}

.click-id-tips[open] > summary { margin-bottom: 8px; }

.click-id-tips ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-faint);
  display: grid;
  gap: 6px;
}

.click-id-tips li strong { color: var(--text); font-weight: 700; }

/* ---------- Request log: expandable GA4 event detail ---------- */

.log-row-expandable { cursor: pointer; }

/* Chevron + label share one flex line so the chevron stays vertically
   centred against the label -- including when a long "GA4 · event_name"
   wraps to two lines -- instead of floating at the top like a stray mark. */
.log-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.log-chevron {
  flex: none;
  color: var(--text-faint);
  transition: transform 0.18s ease, color 0.18s ease;
}

.log-row-expandable:hover .log-chevron,
.log-row-expandable:focus-visible .log-chevron { color: var(--accent); }

.log-row-expanded .log-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

/* Keep the focus ring on the row itself readable without the default
   thick outline offsetting the table layout. */
.log-row-expandable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.log-event-name { color: var(--text-faint); }

/* Type label + its info icon share one flex line so the icon rides just after
   the label without disturbing the chevron/label spacing. */
.log-tag-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.log-info {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.log-info:hover,
.log-info:focus-visible {
  color: var(--accent);
  background: var(--bg-soft-2);
  outline: none;
}

.log-help-popover {
  position: absolute;
  z-index: 60;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  /* --bg is this page set's elevated-surface token (style.css); --surface is
     not defined here, so it must not be used or the popover renders invisible. */
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Google Ads relay detail: the destination endpoint and, for the optional
   ad-script rows, why they 404 / cancel. */
.log-detail-target {
  font-size: 13px;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.log-detail-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  background: var(--bg-soft-2);
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  padding: 9px 12px;
}

.log-detail-row > td {
  background: var(--bg-soft-2);
  padding-top: 0;
  padding-bottom: 0;
}

.log-detail {
  display: grid;
  gap: 14px;
  padding: 14px 0 18px;
}

.log-detail h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--text-faint);
}

.log-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.log-detail-params {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 18px;
  font-size: 13px;
}

.log-detail-params .log-detail-key { color: var(--text-faint); }

.log-detail-params span { overflow-wrap: anywhere; }

/* Deliberately NOT .data-table: that would inherit the 24px cell padding
   and hover striping of the host table it sits inside. */
.log-items-table {
  border-collapse: collapse;
  font-size: 13px;
}

.log-items-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--text-faint);
  padding: 4px 18px 4px 0;
}

.log-items-table td {
  padding: 4px 18px 4px 0;
  border-top: 1px solid var(--border-soft);
}

/* ---------- Inline "what does this mean" hint ---------- */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
}

.info-tip:hover, .info-tip:focus-visible { color: var(--text); border-color: var(--text-soft); }

.info-tip-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 210px;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  padding: 8px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 20;
}

.info-tip-popup::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--text);
}

.info-tip:hover .info-tip-popup,
.info-tip:focus-visible .info-tip-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.info-tip-popup.wide { width: 280px; }

/* A card-header info button (2026-10-19, the domain page's Requests card):
   a round tile at the top right, its popup anchored to the right edge so
   it opens into the card instead of past it. */
.info-tip.ph-info { flex: none; width: 30px; height: 30px; margin-left: 0; border-color: var(--border-soft); background: #fff; color: var(--text-faint); box-shadow: var(--shadow-sm); }
.info-tip.ph-info:hover, .info-tip.ph-info:focus-visible { color: var(--accent); border-color: var(--accent); }
.info-tip-popup.right-edge { left: auto; right: -4px; transform: translateY(-4px); }
.info-tip-popup.right-edge::after { left: auto; right: 13px; transform: none; }
.info-tip:hover .info-tip-popup.right-edge, .info-tip:focus-visible .info-tip-popup.right-edge { transform: translateY(0); }
.info-tip-popup strong { font-weight: 650; }
/* The same button in a summary card's top-right corner. */
.stat-card.has-info { position: relative; }
.stat-card.has-info .label { padding-right: 34px; }
.info-tip.ph-info.is-corner { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; }
/* A summary card's jump to its chart (Bot requests -> Bot traffic). */
.stat-card.has-jump { position: relative; }
.stat-card.has-jump .label { padding-right: 92px; min-height: 26px; }
.stat-card.has-jump .stat-jump { position: absolute; top: 14px; right: 14px; margin-top: 0; }
.stat-jump { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 4px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--text-soft); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.stat-jump:hover, .stat-jump:focus-visible { border-color: var(--accent); color: var(--accent); }
#bot-traffic { scroll-margin-top: 80px; }

/* Anchors the popup to the left edge of its trigger and extends rightward,
   instead of centering under it -- for a trigger that sits close to a
   container's left edge (e.g. clients.html's Discount % row, inside a
   narrow label column), a centered wide popup pushes past that edge and
   gets clipped by an ancestor's overflow: hidden (a modal, a panel). */
.info-tip-popup.left {
  left: 0;
  transform: translateY(-4px);
}

.info-tip-popup.left::after {
  left: 10px;
  transform: none;
}

.info-tip:hover .info-tip-popup.left,
.info-tip:focus-visible .info-tip-popup.left {
  transform: translateY(0);
}

/* Opens upward instead of downward -- this popup's trigger (clients.html's
   Discount % row) is the LAST field before its modal/panel's own bottom
   edge, right above the submit button, so the popup's usual below-the-
   trigger placement has no room to render and gets clipped by that same
   overflow: hidden ancestor the .left fix above already had to work around. */
.info-tip-popup.left.up {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
}

.info-tip-popup.left.up::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--text);
}

.info-tip:hover .info-tip-popup.left.up,
.info-tip:focus-visible .info-tip-popup.left.up {
  transform: translateY(0);
}

/* Below 720px the popup has nowhere left to float: it is 280px wide inside a
   form column barely wider than that, nested in a panel/modal that clips with
   overflow:hidden. The .left and .up variants above are two earlier attempts
   to dodge that clipping edge, and at narrow widths both still lose. So stop
   floating altogether -- render the tip inline in normal flow, where nothing
   can clip it and the (now scrollable) modal simply scrolls to reveal it.

   :focus sits alongside :focus-visible deliberately: :focus-visible does not
   match a touch tap, so on the very devices this fixes, the existing rules
   alone would leave the tip impossible to open at all. */
@media (max-width: 720px) {
  /* Anchor the popup to the field's label rather than to the little "?" chip.
     The chip is inline-flex and shrink-wraps to about 60px, so anything sized
     against it comes out as a thin thread of text. Pinned left:0/right:0 on
     the label, the popup takes the full field width and cannot be clipped
     horizontally at any viewport size -- which is the failure the .left and
     .up variants above were each trying, and failing, to dodge. Opening
     downward is safe now that .modal-body genuinely scrolls. */
  .form-row label { position: relative; }

  .form-row label .info-tip { position: static; }

  .form-row label .info-tip-popup,
  .form-row label .info-tip-popup.left,
  .form-row label .info-tip-popup.left.up {
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin-top: 6px;
  }

  /* The little arrow pointed at the chip; it means nothing now the popup is
     anchored to the whole label. */
  .form-row label .info-tip-popup::after { display: none; }

  /* A touch tap does not match :focus-visible, so on exactly the devices this
     block targets the existing rules would leave the tip impossible to open. */
  .info-tip:focus .info-tip-popup { opacity: 1; }

  .info-tip:focus .info-tip-popup.left,
  .info-tip:focus .info-tip-popup.left.up {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Stepped discount-share slider (invite-a-client form) ---------- */

.discount-slider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.discount-slider input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.discount-slider output {
  min-width: 42px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

/* ---------- Invoice submission modal (partner/kickback.html) ---------- */

.invoice-modal-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.invoice-amount-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-amount-prefix {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
}

.invoice-amount-input input {
  flex: 1;
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-soft);
}

.banner-success, .banner-critical, .banner-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-ctl);
  padding: 10px 14px;
  margin-bottom: 16px;
}

.banner-success {
  background: rgba(30,142,62,0.08);
  border: 1px solid rgba(30,142,62,0.25);
  color: var(--success);
}

.banner-critical {
  background: rgba(217,48,37,0.08);
  border: 1px solid rgba(217,48,37,0.25);
  color: var(--danger);
}

.banner-warning {
  background: rgba(255,138,0,0.08);
  border: 1px solid rgba(255,138,0,0.3);
  color: var(--warning-text);
}

.banner-success .banner-action, .banner-critical .banner-action, .banner-warning .banner-action {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Transient "saved" toast ---------- */

.save-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 16px 10px 13px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 9990;
}

/* Finished-audit notice (js/dashboard.js initGtmAuditNotices): above the saved toast */
.mb-audit-toast {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 9991;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 420px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.mb-audit-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mb-audit-toast .mb-audit-toast-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(30,142,62,0.12); color: var(--success, #1a7f37); }
.mb-audit-toast .mb-audit-toast-mark.is-failed { background: rgba(217,48,37,0.1); color: var(--danger); }
.mb-audit-toast a { font-weight: 700; white-space: nowrap; }
.mb-audit-toast .mb-audit-toast-x { flex: none; margin: -2px -4px 0 0; border: 0; background: none; font-size: 16px; line-height: 1; color: var(--text-faint); cursor: pointer; }

.save-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.save-toast .save-toast-tick {
  display: inline-flex;
  color: #34d17c;
  flex-shrink: 0;
}

.banner-pending {
  background: rgba(255,138,0,0.08);
  border: 1px solid rgba(255,138,0,0.25);
  color: var(--warning-text);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-ctl);
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Empty / loading / error rows and blocks share one voice (2026-10-17). The
   .data-table prefix outranks `.data-table td` padding without !important. */
.table-empty, .data-table .table-empty, .data-table td.table-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-soft);
  font-size: 14px;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.badge.active { background: rgba(30,142,62,0.1); color: var(--success); }
.badge.paused { background: var(--bg-soft); color: var(--text-faint); }
.badge.error { background: rgba(217,48,37,0.1); color: var(--danger); }
.badge.pending { background: rgba(255,138,0,0.12); color: var(--warning-text); }
.badge.inactive { background: var(--bg-soft); color: var(--text-faint); }
/* 2026-10-17: states that used to borrow pending/paused. warning = an open
   non-critical issue; neutral = a label with no state meaning (scope, billing
   channel); info = informational. */
.badge.warning { background: var(--warning-soft); color: var(--warning-text); }
.badge.neutral { background: var(--bg-soft); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border-soft); }
.badge.info { background: var(--info-soft); color: var(--accent-dark); }
.badge.badge-sm, .badge-tag.badge-sm { font-size: 10px; padding: 1px 6px; flex: none; white-space: nowrap; }
.badge.nowrap { flex: none; white-space: nowrap; }
.badge-group { display: inline-flex; gap: 6px; flex: none; align-items: center; }

.badge-priority-urgent { background: rgba(217,48,37,0.1); color: var(--danger); }
.badge-priority-high { background: rgba(255,138,0,0.12); color: var(--warning-text); }
.badge-priority-normal { background: rgba(0,113,227,0.1); color: var(--accent); }
.badge-priority-low { background: var(--bg-soft); color: var(--text-faint); }

.badge-status-open { background: rgba(0,113,227,0.1); color: var(--accent); }
.badge-status-closed { background: var(--bg-soft); color: var(--text-faint); }

.badge .dot-sm {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warning-text);
  background: rgba(255,138,0,0.12);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
}

.badge-tag.adblock { color: #8a4b00; background: #fff3e0; }
.badge-tag.muted {
  color: var(--text-faint);
  background: var(--bg-soft);
}

/* ---------- Partner banner ---------- */

[hidden] {
  display: none !important;
}

.partner-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(255,138,0,0.10));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 24px;
  font-size: 14px;
}

.partner-banner .msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
}

.partner-banner .msg strong { font-weight: 700; }

.partner-banner .msg .banner-ic {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

.partner-banner .msg .banner-ic svg { width: 18px; height: 18px; }

.partner-banner .msg .banner-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
}

.partner-banner .msg .banner-role {
  font-size: 13px;
  color: var(--text-soft);
}

.partner-banner.danger {
  background: linear-gradient(135deg, rgba(217,48,37,0.08), rgba(217,48,37,0.14));
  border-color: rgba(217,48,37,0.3);
}

.partner-banner.danger .msg .banner-ic {
  color: var(--danger);
}

/* ---------- Client cards / rows ---------- */

.client-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-ctl);
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.client-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-name-cell .meta {
  display: flex;
  flex-direction: column;
}

.client-name-cell .meta .sub {
  font-size: 12px;
  color: var(--text-faint);
}

.partner-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.partner-connection-row + .partner-connection-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.perm-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}

/* ---------- Forms ---------- */

.form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}

.form-row:last-child { border-bottom: none; }

.form-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding-top: 8px;
}

/* Required-field marker. Same red as .field-error so "this row needs you"
   reads as one visual language across the marker and the error it prevents.
   aria-hidden in the markup: screen readers get aria-required on the input
   instead, since a bare "*" is announced as "star" or dropped entirely. */
/* Not scoped to .form-row label: the panel-header legend explaining the
   marker uses the same class, and must render in the same red to read as
   the same thing. */
.req {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}

.form-row .hint {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 400;
  margin-top: 4px;
}

/* input[type="url"] and [type="search"] were missing here, so any form using
   them rendered one unstyled browser-default field among styled ones. */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.input-error { border-color: var(--danger); }

textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

/* Code goes monospace; prose textareas (tickets, replies, taglines) keep the
   form font. Was every textarea until 2026-10-17. */
#gtm-head-script, #gtm-body-script, textarea.code {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
}

/* One dropdown arrow for every select (owner, 2026-10-19): the browser's own
   arrow sat almost against the right edge whatever the padding. Same chevron
   as .domain-select, 14px in from the edge, with room kept for it.
   select:not([multiple]) outranks the single-class select rules (.role-select,
   .perm-select, .event-name-select, ...) whose background shorthand would
   otherwise wipe the image; their own background colour is kept. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%238a8d93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 38px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.host-input {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.host-input:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.host-input input {
  flex: 0 1 160px;
  min-width: 72px;
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.host-input input:focus {
  box-shadow: none;
}

.host-input-suffix {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-left: 1px solid var(--border-soft);
  white-space: nowrap;
}

.connection-setup-note {
  margin: 0;
  padding: 16px 24px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}

.panel-note {
  margin: 0;
  padding: 12px 24px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
}

.panel-note strong { color: var(--text); }

.donut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px;
}

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

.donut-with-table {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 24px;
}

.donut-with-table-chart { flex-shrink: 0; }

.donut-with-table-data {
  flex: 1;
  min-width: 0;
}

.donut-with-table-data .data-table th,
.donut-with-table-data .data-table td {
  padding: 10px 12px;
}

@media (max-width: 720px) {
  .donut-with-table { flex-direction: column; }
}

.donut-block h3 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.donut-block-body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.donut-block-body svg { flex-shrink: 0; }

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.donut-legend-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.donut-legend-value {
  color: var(--text-faint);
  white-space: nowrap;
}

.connection-health {
  margin: 0;
  padding: 14px 24px;
  font-size: 13px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border-soft);
}

.connection-health.is-ok {
  background: rgba(30, 142, 62, 0.06);
  color: var(--text);
}

.connection-health.is-error {
  background: rgba(217, 48, 37, 0.06);
  color: var(--text);
}

.dns-option-recommended { background: #fff; }

[data-dns-record-group] { margin: 16px 24px 14px; }

.dns-option-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 0;
}

.dns-option-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dns-option-hint {
  margin: 4px 24px 0;
  padding-bottom: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}


.dns-field-with-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dns-field-with-copy input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.actions-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border-soft);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-soft);
}

.icon-btn:hover { background: var(--bg-soft); }
.icon-btn.icon-btn-spacer { visibility: hidden; pointer-events: none; }
.icon-btn svg { width: 16px; height: 16px; }

.empty-hint {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-soft);
  font-size: 14px;
}

/* ---------- Modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 560px;
  max-width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal .panel-header,
.modal .form-row {
  padding-left: 24px;
  padding-right: 24px;
}

/* Most modals wrap their body and footer in a <form>, which makes the FORM
   the flex item of .modal -- not .modal-body. A block-level form grows to its
   content height unconstrained, so the body inside it never received a bounded
   box no matter what it asked for. Making the form a flex column that can
   shrink passes the modal's height constraint through to the body. */
.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* min-height:0 is load-bearing. As a flex item this box's default min-height
   is `auto`, which refuses to shrink below its content -- so it grew past the
   modal's max-height, .modal's overflow:hidden clipped the overspill, and
   overflow-y:auto never got a constrained box to scroll. A tall form (invite
   a client) had its lower half, submit button included, simply unreachable. */
.modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Header and footer must keep their size while the body absorbs the shortfall;
   without this they compress instead and the modal's actions get squashed. */
.modal .panel-header,
.modal-footer {
  flex-shrink: 0;
}

.modal-text {
  padding: 20px 24px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}

.modal-text strong { color: var(--text); font-weight: 700; }

.plan-change-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.plan-change-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--bg-soft);
}

.plan-change-card.next {
  border-color: rgba(0, 113, 227, 0.25);
  background: rgba(0, 113, 227, 0.04);
}

.plan-change-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.plan-change-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.plan-change-price {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.plan-change-meta {
  font-size: 13px;
  color: var(--text-soft);
}

.plan-change-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-faint);
  padding-top: 24px;
}

.plan-change-type {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.plan-change-type.upgrade {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
}

.plan-change-type.downgrade {
  background: rgba(255, 149, 0, 0.12);
  color: #c93400;
}

.plan-change-type.change {
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
}

.plan-change-effective-box {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg);
}

.plan-change-effective-label {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.plan-change-effective-date {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.plan-change-pending .plan-change-compare {
  max-width: 640px;
}

#plan-change-modal .modal {
  width: 600px;
}

#new-domain-modal .modal {
  width: 640px;
}

/* ---------- Google Tag Manager card (domain settings, js/domain-gtm.js) ----------
   Label/value rows like the sibling panels (no-pad body + .form-row). The
   value column of each row is a .gtm-val: text on the left, that row's
   actions on the right; the containers row swaps its linked view for the
   picker in place. Redesigned 2026-10-08 (owner: alignment + whitespace). */
#gtm-panel .gtm-val, #audit-panel .gtm-val, #ga4-panel .gtm-val, #gconv-panel .gtm-val, #mconn-panel .gtm-val { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
#gtm-panel .gtm-val-main, #audit-panel .gtm-val-main, #ga4-panel .gtm-val-main, #gconv-panel .gtm-val-main, #mconn-panel .gtm-val-main { font-size: 14px; line-height: 1.5; padding-top: 7px; min-width: 0; flex: 1 1 260px; }
#gtm-panel .gtm-meta, #audit-panel .gtm-meta, #ga4-panel .gtm-meta, #gconv-panel .gtm-meta, #mconn-panel .gtm-meta { display: block; font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.5; }
#gtm-panel .gtm-actions, #audit-panel .gtm-actions, #ga4-panel .gtm-actions, #gconv-panel .gtm-actions, #mconn-panel .gtm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none; }
#gtm-panel .gtm-actions-below { margin-top: 12px; }
#gtm-panel .gtm-clist { display: grid; gap: 8px; }
#gtm-panel .gtm-citem { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px 9px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); background: var(--bg-soft); font-size: 14px; min-width: 0; }
#gtm-panel .gtm-citem.is-empty { padding-top: 10px; padding-bottom: 10px; }
#gtm-panel .gtm-cmain { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
#gtm-panel .gtm-cline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#gtm-panel .gtm-cid { flex: none; font-size: 13px; color: var(--text-soft); }
#gtm-panel .gtm-csub { font-size: 12px; line-height: 1.45; color: var(--text-faint); overflow-wrap: anywhere; }
#gtm-panel .gtm-ckind { flex: none; width: 48px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
#gtm-panel .gtm-cname { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#gtm-panel .gtm-citem.is-empty .gtm-cname { font-weight: 400; color: var(--text-soft); }
#gtm-panel .gtm-cbadge { flex: none; align-self: center; font-size: 10px; padding: 1px 7px; }
#gtm-panel .gtm-note, #audit-panel .gtm-note, #ga4-panel .gtm-note, #gconv-panel .gtm-note, #mconn-panel .gtm-note { margin: 16px 24px 0; }
#gtm-panel .gtm-note-bottom, #audit-panel .gtm-note-bottom, #ga4-panel .gtm-note-bottom, #gconv-panel .gtm-note-bottom, #mconn-panel .gtm-note-bottom { margin: 0 24px 16px; }
/* Notes and errors that the dashboard scripts show and hide with the hidden
   attribute. .field-error (style.css) is display:none until it gets .show, so
   none of these ever appeared (found 2026-10-14). Listed by id: a global
   :not([hidden]) rule would also reveal the empty .show-pattern errors.
   Keep in step when a script adds a field-error toggled by hidden. */
#add-account-error:not([hidden]),
#add-agency-error:not([hidden]),
#advanced-tracking-error:not([hidden]),
#audit-card-error:not([hidden]),
#click-id-cookie-error:not([hidden]),
#click-id-error:not([hidden]),
#container-error:not([hidden]),
#cookie-keeper-error:not([hidden]),
#enrichment-error:not([hidden]),
#feedback-error:not([hidden]),
#ga4-error:not([hidden]),
#ga4-notice:not([hidden]),
#gconv-error:not([hidden]),
#gconv-notice:not([hidden]),
#general-error:not([hidden]),
#gtm-error:not([hidden]),
#gtm-notice:not([hidden]),
#ip-filter-error:not([hidden]),
#mconn-error:not([hidden]),
#mconn-notice:not([hidden]),
#monitoring-error:not([hidden]),
#ms-error:not([hidden]),
#ms-modal-error:not([hidden]),
#power-up-error:not([hidden]),
#sa-error:not([hidden]),
#shopify-link-create-error:not([hidden]),
#sw-key-error:not([hidden]),
#tagway-form-error:not([hidden]),
#tagway-prefix-error:not([hidden]),
#tagway-site-url-error:not([hidden]),
#tagway-verify-error:not([hidden]),
#test-save-error:not([hidden]),
#tm-audit-enable-error:not([hidden]),
#tm-audit-error:not([hidden]) { display: block; }
/* Connections inside the measurement setup modal (GA4, Google Ads, Meta;
   2026-10-14): the section the connection scripts mount above the id fields. */
#ms-modal .modal { width: 680px; }
/* "Add a destination" (2026-10-14): a dashed tile, and a drawer from the
   right, full height, with an overlay over the rest of the page. */
#measurement-setup-panel .ms-add-dest { font: inherit; text-align: left; width: 100%; cursor: pointer; border-style: dashed; background: transparent; }
#measurement-setup-panel .ms-add-dest .tw-card-ic { color: var(--text-soft); }
#measurement-setup-panel .ms-add-dest .tw-card-ic svg { width: 18px; height: 18px; }
/* "Found on your site" (2026-10-16): destinations the audit saw, above the
   destination cards, each with its ids and an Add button. */
/* "Found on your site" (redesign 2026-10-19): a white card like the page's other
   cards, the audit icon in a tile, ids as chips, an outlined + Add per row. */
#measurement-setup-panel .ms-suggest { margin: 0 0 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md, 16px); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
#measurement-setup-panel .ms-suggest-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
#measurement-setup-panel .ms-suggest-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
#measurement-setup-panel .ms-suggest-title { flex: 1; min-width: 0; }
#measurement-setup-panel .ms-suggest-head strong { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
#measurement-setup-panel .ms-suggest-head .ms-suggest-title span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); margin-top: 2px; }
#measurement-setup-panel .ms-suggest-head .btn { flex: none; }
#measurement-setup-panel .ms-suggest-list { background: #fff; }
#measurement-setup-panel .ms-suggest-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border-soft); transition: background .15s ease; }
#measurement-setup-panel .ms-suggest-item:first-child { border-top: 0; }
#measurement-setup-panel .ms-suggest-item:hover { background: var(--bg-soft, #f6f6f3); }
#measurement-setup-panel .ms-suggest-item .tw-card-ic { flex: none; margin: 0; width: 34px; height: 34px; background: #fff; border: 1px solid var(--border-soft); }
#measurement-setup-panel .ms-suggest-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
#measurement-setup-panel .ms-suggest-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
#measurement-setup-panel .ms-suggest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--text-faint); }
#measurement-setup-panel .ms-suggest-id { padding: 1px 7px; border-radius: 6px; background: var(--bg-soft, #f6f6f3); border: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-soft); overflow-wrap: anywhere; }
#measurement-setup-panel .ms-suggest-more { font-weight: 600; color: var(--text-soft); cursor: help; }
#measurement-setup-panel .ms-suggest-item .btn { flex: none; }
#measurement-setup-panel .ms-suggest-add { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); border-color: rgba(0,113,227,0.3); background: #fff; }
#measurement-setup-panel .ms-suggest-add:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) {
  #measurement-setup-panel .ms-suggest-head { flex-direction: column; align-items: flex-start; }
}
.mb-drawer-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.mb-drawer-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.mb-drawer { position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 100%; background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.mb-drawer-overlay.open .mb-drawer { transform: translateX(0); }
.mb-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border-soft); }
.mb-drawer-head h2 { margin: 0 0 4px; font-size: 17px; }
.mb-drawer-head p { margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.mb-drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; display: grid; gap: 10px; align-content: start; }
.mb-drawer-body .ms-drawer-item { font: inherit; text-align: left; width: 100%; cursor: pointer; }
body.mb-drawer-open { overflow: hidden; }
/* A stored token, masked, with an eye to show it (2026-10-14). */
#ms-modal .ms-secret { position: relative; }
#ms-modal .ms-secret input { padding-right: 72px; width: 100%; }
#ms-modal .ms-secret .ms-secret-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
#ms-modal .ms-secret .ms-secret-copy { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); }
/* Id fields: only the copy button, in the eye's place (2026-10-14). */
#ms-modal .ms-copyable input { padding-right: 40px; }
#ms-modal .ms-copyable .ms-secret-copy { right: 6px; }
#ms-modal-body { overflow-y: auto; }
#conn-modal .modal { width: 680px; }
#conn-modal-body { overflow-y: auto; }
/* Connection tiles are buttons in the measurement setup's card style. */
#connections-panel .conn-tile { position: relative; cursor: pointer; }
#connections-panel .conn-tile.is-unavailable { cursor: default; opacity: 0.6; }
#conn-modal-body .ms-conn { padding-bottom: 8px; }
#ms-modal-body .ms-conn { border-bottom: 1px solid var(--border-soft); padding-bottom: 4px; }
#ms-modal-body .ms-conn-head, #conn-modal-body .ms-conn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 24px 4px; }
#ms-modal-body .ms-conn-head strong, #conn-modal-body .ms-conn-head strong { font-size: 14px; color: var(--text); }
#ms-modal-body .ms-conn-head .hint, #conn-modal-body .ms-conn-head .hint { font-size: 12px; color: var(--text-faint); margin-top: 2px; line-height: 1.5; }
#ms-modal-body .ms-conn-head .badge, #ms-modal-body .ms-conn-head .btn, #conn-modal-body .ms-conn-head .badge, #conn-modal-body .ms-conn-head .btn { flex: none; }
#gtm-panel .panel-body > .form-row:last-of-type, #audit-panel .panel-body > .form-row:last-of-type { border-bottom: none; }
/* the picker, inside the containers row's value column */
#gtm-panel .gtm-pick-intro { margin: 7px 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
#gtm-panel .gtm-pick-kind { display: flex; gap: 10px; align-items: flex-start; }
#gtm-panel .gtm-pick-kind + .gtm-pick-kind { margin-top: 12px; }
#gtm-panel .gtm-pick-kind .gtm-ckind { padding-top: 12px; }
#gtm-panel .gtm-pick-selects { flex: 1; min-width: 0; display: grid; gap: 8px; }
#gtm-panel .gtm-pick-fixed { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 9px; font-size: 14px; }
#gtm-panel .gtm-pick-fixed .gtm-meta { flex-basis: 100%; margin-top: 0; }
#gtm-panel .gtm-pick-missing { margin: 12px 0 0; font-size: 13px; color: var(--text-soft); }
#gtm-panel .btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#gtm-panel #gtm-pick-create-row > div { margin-top: 12px; }
/* Additional web containers (2026-10-15): where each loads, its row
   actions, and the subdomain picker under the container list. */
/* Edit / unlink icons at the end of each container row (2026-10-16). In a
   wrapping row the sub line goes below, so the icons stay on the first. */
#gtm-panel .gtm-row-actions { flex: none; display: flex; gap: 2px; margin: -4px 0 -4px auto; }
#gtm-panel .gtm-row-btn { width: 28px; height: 28px; border-color: transparent; background: transparent; color: var(--text-faint); }
#gtm-panel .gtm-row-btn:hover { background: #fff; border-color: var(--border-soft); color: var(--text); }
#gtm-panel .gtm-row-btn svg { width: 15px; height: 15px; }
#gtm-panel .gtm-add-link { font-size: 13px; font-weight: 500; text-decoration: none; }
#gtm-panel .gtm-add-link:hover { text-decoration: underline; }
/* One editor style for the picker, the extra-container form and the server
   form: a white box in place of the row it edits (2026-10-16). */
#gtm-panel .gtm-editor { padding: 4px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: #fff; min-width: 0; }
#gtm-panel .gtm-editor .gtm-actions-below { margin-top: 14px; }
@media (max-width: 640px) {
  #gtm-panel .gtm-cline { flex-wrap: wrap; row-gap: 0; }
  #gtm-panel .gtm-cname { white-space: normal; overflow-wrap: anywhere; }
}
#gtm-panel .gtm-scope { border: 0; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
#gtm-panel .gtm-scope legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
#gtm-panel .gtm-scope-opt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 14px; cursor: pointer; }
#gtm-panel .gtm-scope-hosts { display: grid; gap: 6px; margin: 2px 0 0 22px; }
#gtm-panel .gtm-scope-hosts[hidden] { display: none; }
#gtm-panel .gtm-scope-host { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
#gtm-panel .gtm-scope-host.is-taken { cursor: default; opacity: 0.6; }
#gtm-panel .gtm-scope-hosts input[type="text"] { max-width: 360px; width: 100%; margin-top: 4px; }
#gtm-panel .gtm-meta-inline { font-size: 12px; color: var(--text-faint); }

/* Deep-link targets (settings.html#account-team-panel and the like) land
   just under the sticky 64px topbar instead of behind it. Only affects
   scrollIntoView / fragment scrolling. */
.content .panel[id],
.content section[id],
.content .card[id] {
  scroll-margin-top: 80px;
}

/* Create-domain dialog: the error used to be the last line inside the
   scrolling form body, 12px, below the region field, so a refused create
   ("tagging subdomain already in use on another account") sat out of view
   while the customer looked at the Create button. It now lives between the
   body and the footer, outside the scroll, as a full-width banner. */
#new-domain-modal .modal-error {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger-hover);
  background: #fdecea;
  border-top: 1px solid #f5c6c2;
}
#new-domain-modal .modal-error.show { display: block; }

#plan-change-modal .modal-body {
  padding: 4px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#plan-change-modal .plan-change-type {
  margin-bottom: 0;
}

#plan-change-modal .plan-change-compare {
  gap: 16px;
}

#plan-change-modal .plan-change-card {
  padding: 20px;
}

#plan-change-modal .plan-change-label {
  margin-bottom: 10px;
}

#plan-change-modal .plan-change-name {
  margin-bottom: 6px;
}

#plan-change-modal .plan-change-price {
  margin-bottom: 6px;
}

#plan-change-modal .plan-change-effective-box {
  margin-top: 0;
  padding: 18px 20px;
}

#plan-change-modal .plan-change-effective-label {
  margin-bottom: 6px;
}

#plan-change-modal .modal-text {
  padding: 0;
  margin: 0;
}

.billing-peak-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

#plan-change-modal .modal-footer {
  padding: 20px 28px 24px;
  gap: 12px;
}

.plan.scheduled {
  border-color: rgba(0, 113, 227, 0.35);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
}

/* ---------- Account overview ---------- */

.accounts-page {
  min-height: 100vh;
  background: var(--bg-soft-2);
  display: flex;
  flex-direction: column;
}

.accounts-nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
}

.accounts-body {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 64px 32px;
}

.accounts-wrap {
  width: 100%;
  max-width: 860px;
}

.accounts-hero {
  margin-bottom: 32px;
}

.accounts-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.accounts-hero p {
  font-size: 16px;
  color: var(--text-soft);
  margin: 0;
  max-width: 560px;
}

.entity-list {
  display: flex;
  flex-direction: column;
}

.entity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.entity-list .entity-row:last-child { border-bottom: none; }

.entity-row:hover { background: var(--bg-soft-2); }

.entity-row.is-active { background: rgba(0, 113, 227, 0.05); }

.entity-row.is-active .entity-chevron { color: var(--accent); }

.entity-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.entity-avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-ctl);
  font-size: 11px;
}

.cell-with-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--text);
}

.entity-info {
  flex: 1;
  min-width: 0;
}

.entity-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-chevron {
  color: var(--text-faint);
  display: inline-flex;
  flex-shrink: 0;
}

.entity-chevron svg { width: 17px; height: 17px; }

.entity-row.add {
  color: var(--text-soft);
  font-weight: 500;
}

.entity-add-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-faint);
}

.entity-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.entity-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
}

.entity-pager .pager-status {
  font-size: 13px;
  color: var(--text-soft);
}


.accounts-meta {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-soft);
}

.accounts-section {
  margin-bottom: 28px;
}

.accounts-section-lead {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.45;
  max-width: 640px;
}

.accounts-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  text-decoration: none;
}

.accounts-agency-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.entity-row.is-filtered-out,
.data-table tr.is-filtered-out {
  display: none;
}

.accounts-search {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.accounts-filter {
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 14px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.accounts-filter:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

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

.accounts-search-field {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.accounts-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  display: inline-flex;
  pointer-events: none;
}

.accounts-search-field input[type="search"] {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 14px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.accounts-search-field input[type="search"]:focus {
  outline: none;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.accounts-search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.accounts-search-empty {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--text-soft);
}

/* ---------- Partner manager card ---------- */

.pm-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(0,113,227,0.06), rgba(255,138,0,0.08));
}

.pm-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.pm-info { flex: 1; min-width: 0; }

.pm-role {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.pm-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2px 0 1px;
}

.pm-sub {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.pm-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.pm-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-soft);
}

.pm-link:hover { color: var(--accent); }

.pm-ic {
  display: inline-flex;
  color: var(--text-faint);
}

.pm-ic svg { width: 14px; height: 14px; }

.pm-action { flex-shrink: 0; }

/* ---------- Support page ---------- */

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.support-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border);
  transform: translateY(-2px);
}

.support-ic {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  flex-shrink: 0;
}

.support-ic svg { width: 20px; height: 20px; }

.support-card-body { flex: 1; min-width: 0; }

.support-card-title { font-size: 14px; font-weight: 700; color: var(--text); }

.support-card-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.support-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

.support-cols .panel { margin-bottom: 0; }

.support-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.faq-item {
  border-bottom: 1px solid var(--border-soft);
}

.faq-item:last-child { border-bottom: none; }

.faq-item summary {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  color: var(--text-faint);
  font-size: 18px;
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: "−"; }

.faq-item summary:hover { color: var(--accent); }

.faq-answer {
  padding: 0 24px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thread-msg {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fff;
}

.thread-msg.is-staff {
  border-color: rgba(0,113,227,0.18);
  background: rgba(0,113,227,0.03);
}

.thread-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.thread-msg-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.thread-msg-role {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 400;
}

.thread-msg-time {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.thread-msg-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.thread-msg-system {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  padding: 2px 0;
}

.reply-compose textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  resize: vertical;
}

.reply-compose textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.reply-compose-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.meta-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.meta-item label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.meta-item .meta-value {
  font-size: 14px;
  color: var(--text);
}

@media (max-width: 1000px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-cols { grid-template-columns: 1fr; }
}

/* ---------- Domain settings page ---------- */

.panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
}

.payment-method-display {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
}

.payment-method-icon {
  width: 44px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  flex-shrink: 0;
}

.payment-method-meta {
  flex: 1;
  min-width: 0;
}

.payment-method-meta .title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.payment-method-meta .sub {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 2px;
}

.payment-method-empty {
  padding: 20px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
}

.payment-method-empty p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-soft);
}

.payment-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.payment-secure-note {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}

.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* Advanced Tracking feature cards -- same 3/2/1 column responsive steps as
   .client-requests-grid, so the two grids line up on the same breakpoints. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.feature-card.is-on {
  border-color: rgba(26,157,92,0.35);
  background: rgba(26,157,92,0.04);
}

.feature-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.feature-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Power-up identity (2026-10-16): a tinted icon tile, the title and a
   one-line category, so each card reads as its own small product. */
.feature-card-head .pu-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}
.pu-ic.pu-blue { background: rgba(0,113,227,0.10); color: #0071e3; }
.pu-ic.pu-orange { background: rgba(255,138,0,0.13); color: #d66f00; }
.pu-ic.pu-green { background: rgba(30,142,62,0.11); color: #1e8e3e; }
.pu-ic.pu-purple { background: rgba(124,77,255,0.11); color: #6a3fe0; }
.pu-ic.pu-teal { background: rgba(0,150,160,0.11); color: #00838f; }
.pu-ic.pu-amber { background: rgba(232,170,0,0.15); color: #a86f00; }
.pu-ic.pu-slate { background: rgba(80,95,115,0.11); color: #4f5d70; }
.feature-card-head .pu-title {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.feature-card-head .pu-title h3 { line-height: 1.3; }
.feature-card-head .pu-title h3 a { color: inherit; text-decoration: none; }
.feature-card-head .pu-title h3 a:hover { color: var(--accent); }
.feature-card-head .pu-tagline {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
}
.feature-card-head:has(.pu-ic) { margin-bottom: 12px; }
#advanced-tracking-panel .feature-card {
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#advanced-tracking-panel .feature-card:hover {
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(16,24,40,0.06);
}
#advanced-tracking-panel .feature-card.is-on { border-color: rgba(26,157,92,0.35); background: #fff; }
.feature-card-head:has(.pu-ic) > .mb-toggle,
.feature-card-head:has(.pu-ic) > .badge { margin-top: 2px; }

/* Grows so the meta block below always sits on the card's bottom edge --
   keeps the divider lines aligned across cards despite differing body
   lengths (the grid already stretches all cards to equal height). */
.feature-card p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

.feature-card .feature-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
  word-break: break-word;
}

.feature-card .feature-meta code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

/* Links each overview card out to its own advanced-tracking-*.html
   subpage for anything beyond the bare on/off toggle above. */
.feature-card-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.feature-card-footer .btn {
  width: 100%;
}

/* Tagway power-up page (js/tagway.js). Status list, per-platform config
   blocks and the switch-over steps; everything else on the page reuses the
   shared panel/form-row/script-snippet/agg-toggle styles. A badge takes
   the toggle's place in the overview card's head, hence no extra rule
   there. */
.tagway-intro p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.tagway-intro p:last-child { margin-bottom: 0; }

.tagway-muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.tagway-checks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tagway-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}

.tagway-check:last-child { border-bottom: none; padding-bottom: 0; }

.tagway-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.tagway-check.is-pass .tagway-check-icon { background: rgba(30,142,62,0.12); color: var(--success); }
.tagway-check.is-fail .tagway-check-icon { background: rgba(217,48,37,0.1); color: var(--danger); }
.tagway-check.is-warn .tagway-check-icon { background: rgba(255,138,0,0.14); color: var(--warning-text); }
.tagway-check.is-skip .tagway-check-icon { background: var(--bg-soft); color: var(--text-faint); }

.tagway-check-label {
  font-weight: 500;
  color: var(--text);
  line-height: 20px;
}

.tagway-check-detail {
  margin-top: 2px;
  line-height: 1.5;
  color: var(--text-soft);
}

.tagway-check-state {
  font-size: 12px;
  line-height: 20px;
  color: var(--text-faint);
  white-space: nowrap;
}

.tagway-check.is-skip .tagway-check-label { color: var(--text-faint); }

.tagway-check-error {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-soft);
  word-break: break-word;
}

.tagway-panel-error.show { margin: 0 24px 16px; }

.tagway-field-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--warning-text);
}

.tagway-footer-hint {
  margin-right: auto;
  align-self: center;
  font-size: 12px;
  color: var(--text-faint);
}

/* Seven platforms don't fit one 36px pill row on a phone, so the tab bar
   wraps instead of pushing the page sideways. */
.tagway-tabs {
  flex-wrap: wrap;
  height: auto;
  max-width: 100%;
  margin-bottom: 18px;
}

.tagway-tabs .agg-toggle-btn { height: 30px; }

.tagway-code {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}

.tagway-notes {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.tagway-notes li { margin-bottom: 6px; }

.tagway-notes code,
.tagway-steps code,
.tagway-check-detail code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.tagway-steps {
  margin: 0 0 16px;
  padding-left: 20px;
}

.tagway-steps > li { margin-bottom: 20px; }

.tagway-steps > li > h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.tagway-steps > li > p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.tagway-steps .mono { word-break: break-all; }

/* Label/value rows on the status panel (2026-10-16 cleanup), same shape
   as the ad blocker protection page. */
.tagway-value { min-width: 0; padding-top: 2px; font-size: 14px; line-height: 1.55; color: var(--text); }
.tagway-value .mono { word-break: break-all; }
.tagway-value .tagway-checks { margin-top: 8px; }
.tagway-detected { margin: -6px 0 14px; font-size: 12px; color: var(--text-faint); }
.tagway-copy-row { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.tagway-copy-row .tagway-code { flex: 1; min-width: 0; padding: 8px 12px; }

/* Per-header/per-cookie toggle lists (Enrichment and Cookie Keeper
   subpages) -- same responsive column count as .feature-grid so the two
   page types feel consistent. */
.header-toggle-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.header-toggle-group {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
}

.header-toggle-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.header-toggle-group-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.header-toggle-group-clear {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.header-toggle-group-clear:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.header-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
}

.header-toggle-row code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-faint);
}

/* Bot Protection categories (2026-10-22): name over a one-line description. */
.header-toggle-row.bp-cat-row { align-items: flex-start; padding: 6px 0; }
.header-toggle-row.bp-cat-row input { margin-top: 2px; flex: none; }
.bp-cat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bp-cat-label { color: var(--text); font-weight: 500; }
.bp-cat-about { font-size: 12px; color: var(--text-faint); }
.bp-group-note { margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--text-faint); }

@media (max-width: 1200px) {
  .header-toggle-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .header-toggle-groups { grid-template-columns: 1fr; }
}

/* IP filter row editor. Replaced a single textarea: one row per entry so
   each can carry its own label and its own validation message, which a
   shared text blob structurally cannot. The note line sits UNDER the two
   inputs rather than beside them so it can be a full sentence without
   squeezing the fields, and so rows keep a stable width whether or not
   they have anything to say. */
.ip-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.ip-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  grid-template-areas: "ip label remove" "note note note";
  gap: 8px;
  align-items: center;
}

.ip-filter-row input[data-ip] { grid-area: ip; }
.ip-filter-row input[data-label] { grid-area: label; }

.ip-filter-row.has-error input[data-ip] {
  border-color: var(--danger);
}

.ip-filter-note {
  grid-area: note;
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
  min-height: 0;
}

/* Empty when an entry is a plain, valid address -- there is nothing useful
   to say about "203.0.113.45", and a note on every row would be noise. */
.ip-filter-note:empty { display: none; }
.ip-filter-note.is-bad { color: var(--danger); }

.ip-filter-remove {
  grid-area: remove;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-faint);
  cursor: pointer;
}

.ip-filter-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.ip-filter-empty {
  margin: 14px 0 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

.ip-filter-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ip-filter-toolbar .hint {
  font-size: 12px;
  color: var(--text-faint);
}

.ip-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ip-filter-footer .hint {
  font-size: 12px;
  color: var(--text-faint);
}

.ip-filter-footer .hint.is-warning { color: #c93400; }

/* Inherited entries: addresses an agency (or an account-wide list) applies to
   this domain. Visually separated from the editable rows and given a tinted
   ground, because the one thing a reader must not conclude is that these can
   be edited here -- they'd click Save, see no change, and have no idea why. */
.ip-filter-inherited {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.ip-filter-inherited h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.ip-filter-inherited .hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-faint);
}

.ip-filter-inherited-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ip-filter-inherited-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.ip-filter-inherited-label { color: var(--text-soft); }

.ip-filter-inherited-note {
  font-size: 12px;
  color: var(--text-faint);
}

/* Pushed to the far end so the eye can scan the source column on its own --
   with several agencies contributing, "who set this" is the question being
   asked, not "what is it". */
.ip-filter-inherited-source {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .ip-filter-inherited-source { margin-left: 0; }
}

/* Client side: accept or withdraw from each linked agency's shared list.
   Deliberately NOT tinted like .ip-filter-inherited -- that block is read-only
   by design, this one is the control, and giving them the same ground taught
   people the tinted area was untouchable. */
.ip-filter-agencies {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.ip-filter-agencies h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.ip-filter-agencies .hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-faint);
}

.ip-filter-agency-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ip-filter-agency-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ip-filter-agency-name { font-weight: 500; }

/* Pushed against the toggle so the eye pairs "what they'd apply" with the
   switch that decides it, rather than with the name on the far left. */
.ip-filter-agency-detail {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .ip-filter-agency-list li { flex-wrap: wrap; }
  .ip-filter-agency-name { flex-basis: 100%; }
  .ip-filter-agency-detail { margin-left: 0; }
}

/* Agency page only: what the fan-out actually touched, shown after a save.
   Persistent rather than a toast, because a list of client domains is
   something you read and check off, not something you glimpse. */
.ip-filter-result {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.ip-filter-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.ip-filter-result-head:not(:first-child) { margin-top: 16px; }
.ip-filter-result-head.is-ok { color: var(--success); }
.ip-filter-result-head.is-bad { color: var(--danger); }
/* Clients who haven't accepted: neither success nor failure -- nothing went
   wrong, there is simply no coverage there. Colouring it red would read as a
   fault the agency has to fix, which it isn't; it's the client's call. */
.ip-filter-result-head.is-muted { color: var(--text-soft); }
.ip-filter-result-error.is-muted { color: var(--text-faint); }

.ip-filter-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ip-filter-result-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

/* Fixed column so the domains line up under each other and the client names
   read as one column, rather than the eye having to re-find them per row. */
.ip-filter-result-client {
  flex: 0 0 auto;
  min-width: 160px;
  color: var(--text-soft);
}

.ip-filter-result-error {
  font-size: 12px;
  color: var(--danger);
}

@media (max-width: 640px) {
  .ip-filter-result-client { min-width: 0; flex-basis: 100%; }
}

/* Below this the three-column row stops fitting: the label field collapses
   to unusable width first, so give each input its own line and tuck the
   remove button up beside the address it removes. */
@media (max-width: 640px) {
  .ip-filter-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ip remove" "label label" "note note";
  }

  .ip-filter-toolbar .hint { width: 100%; }
}

@media (max-width: 1200px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Download gallery -- downloads.html's GTM template cards. Same card-grid
   idea as .feature-grid above, but with a colored icon tile up top (this
   page is a small, browsable "shelf" of files, not a settings form) and a
   footer that's always the Download button, never conditional content. */
.download-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.download-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft-2);
}

.download-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.download-card-icon.web { background: rgba(0,113,227,0.1); color: var(--accent); }
.download-card-icon.server { background: rgba(255,138,0,0.12); color: var(--warning-text); }

.download-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.download-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.download-card p {
  flex: 1;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

.download-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.download-card-footer code {
  font-size: 12px;
  color: var(--text-faint);
  background: var(--bg-soft);
  padding: 3px 6px;
  border-radius: 4px;
  word-break: break-all;
}

@media (max-width: 720px) {
  .download-gallery { grid-template-columns: 1fr; }
}

/* Toggle switch -- checkbox stays the real control (keyboard + form
   semantics intact), the visual track/knob is drawn on the adjacent span.
   Named .mb-toggle (not .switch) to avoid the pre-existing .switch pill
   component in style.css, whose width/height/background would otherwise
   bleed in and render a second, larger grey pill behind this one. */
.mb-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  line-height: 0;
  cursor: pointer;
}

.mb-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.mb-toggle-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--border);
  transition: background 0.18s ease;
}

.mb-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.18s ease;
}

.mb-toggle input:checked + .mb-toggle-track { background: var(--success); }
.mb-toggle input:checked + .mb-toggle-track::after { transform: translateX(18px); }

.mb-toggle input:focus-visible + .mb-toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mb-toggle input:disabled + .mb-toggle-track {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Power-up spark (owner, 2026-10-19). Switching a power-up ON (a user
   change, not a render) gives the track a light sweep and a small burst at
   the knob, and the card's icon tile glows once. js/domains.js adds
   .pu-spark to the card for ~0.9 s. A switched-on power-up
   keeps a faint ring on its icon so it reads as "lit". */
.pu-spark .mb-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-pill);
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 70%) no-repeat;
  background-size: 200% 100%;
  animation: puSweep 0.6s ease-out 0.08s both;
}
.pu-spark .mb-toggle::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 11px;
  width: 3px;
  height: 3px;
  margin: -1.5px -1.5px 0 0;
  border-radius: 50%;
  pointer-events: none;
  color: var(--success);
  box-shadow: 0 -16px 0 currentColor, 12px -11px 0 currentColor, 17px 0 0 currentColor, 12px 11px 0 currentColor,
              0 16px 0 currentColor, -12px 11px 0 currentColor, -12px -11px 0 currentColor;
  animation: puBurst 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s both;
}
.pu-spark .pu-ic { animation: puGlow 0.8s ease-out both; }
.feature-card.is-on .pu-ic { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
@keyframes puSweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes puBurst {
  0% { transform: scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes puGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
  35% { transform: scale(1.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pu-spark .mb-toggle::before, .pu-spark .mb-toggle::after { content: none; }
  .pu-spark .pu-ic { animation: none; }
}

.danger-zone { border-color: rgba(217,48,37,0.35); }

.danger-zone .panel-header h2 { color: var(--danger); }

.danger-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.danger-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.danger-action { align-self: center; }

input[readonly] {
  background: var(--bg-soft-2);
  color: var(--text-soft);
  cursor: default;
}

/* ---------- Domain statistics page ---------- */

.topbar-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--text-soft);
  flex-shrink: 0;
}

.back-link svg { width: 16px; height: 16px; }

.back-link:hover { background: var(--bg-soft); color: var(--text); }

.domain-select {
  width: auto;
  min-width: 220px;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-ctl);
  font-size: 13px;
  cursor: pointer;
  /* Replaces the native angle-bracket arrow with the same chevron polyline
     used by .date-range-trigger's own trailing svg, so the two dropdown-ish
     controls that always sit side by side in a topbar look consistent.
     currentColor doesn't apply inside a background-image data URI, so the
     stroke color is --text-faint's literal hex (#8a8d93) instead. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%238a8d93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}

.panel-header-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.panel-header-filter label {
  font-size: 13px;
  color: var(--text-faint);
  font-weight: 500;
}

.event-name-select {
  width: auto;
  min-width: 160px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.date-range-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.date-range-trigger:hover { background: var(--bg-soft); }
.date-range-trigger svg:first-child { color: var(--text-faint); flex-shrink: 0; }
.date-range-trigger svg:last-child { color: var(--text-faint); flex-shrink: 0; }

/* Shared focus ring for the topbar's button-shaped controls -- matches the
   glow inputs/selects already get from the generic input/select:focus rule,
   so keyboard focus looks the same everywhere in the chrome. */
.date-range-trigger:focus-visible,
.alert-bell-btn:focus-visible,
.setup-guide-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Keyboard focus for everything else that is clickable in the app chrome
   (2026-10-17): buttons, nav, icon buttons, menu items, rows and tiles had
   no visible focus at all. Same ring as above. */
.app .btn:focus-visible,
.side-link:focus-visible,
.icon-btn:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-door:focus-visible,
.back-link:focus-visible,
.entity-row:focus-visible,
.conn-tile:focus-visible,
.dr-preset-item:focus-visible,
.avatar-menu-item:focus-visible,
.avatar-menu-trigger:focus-visible,
.account-switcher-trigger:focus-visible,
.account-switcher-item:focus-visible,
th.sortable:focus-visible,
.fold-summary:focus-visible,
.log-info:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.setup-guide-item:focus-within .setup-guide-item-dismiss { opacity: 1; }

.agg-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  background: var(--bg-soft);
  border-radius: var(--radius-ctl);
  padding: 3px;
  gap: 2px;
}

.agg-toggle-btn {
  height: 100%;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}

.agg-toggle-btn:hover:not(:disabled):not(.active) { color: var(--text); }

.agg-toggle-btn.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.agg-toggle-btn:disabled {
  color: var(--text-faint);
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Date range modal ---------- */

.dr-layout {
  display: flex;
  align-items: stretch;
  min-height: 380px;
}

.dr-agg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
}

.dr-agg-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

.dr-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 168px;
  flex-shrink: 0;
  padding: 20px 12px;
  border-right: 1px solid var(--border-soft);
}

.dr-preset-item {
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-ctl);
  border: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-soft);
  cursor: pointer;
}

.dr-preset-item:hover { background: var(--bg-soft); color: var(--text); }

.dr-preset-item.active {
  background: rgba(0, 113, 227, 0.08);
  color: var(--accent);
  font-weight: 700;
}

.dr-main {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
}

.dr-inputs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.dr-inputs .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 0;
  border-bottom: none;
}

.dr-inputs .form-row label { padding-top: 0; font-size: 13px; }

.dr-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dr-cal-nav-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.dr-calendars {
  display: flex;
  gap: 28px;
}

.dr-cal { flex: 1; min-width: 0; }

.dr-cal-title {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.dr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dr-cal-dow { margin-bottom: 4px; }

.dr-cal-dow span {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

.dr-cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-ctl);
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.dr-cal-day.is-blank { visibility: hidden; cursor: default; }

.dr-cal-day.is-disabled {
  color: var(--text-faint);
  opacity: 0.4;
  cursor: default;
}

.dr-cal-day.is-in-range {
  background: rgba(0, 113, 227, 0.10);
  border-radius: 0;
}

.dr-cal-day.is-range-start,
.dr-cal-day.is-range-end {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.dr-cal-day.is-range-start { border-radius: 8px 0 0 8px; }
.dr-cal-day.is-range-end { border-radius: 0 8px 8px 0; }
.dr-cal-day.is-range-start.is-range-end { border-radius: var(--radius-ctl); }

.dr-cal-day:not(.is-disabled):not(.is-blank):not(.is-range-start):not(.is-range-end):hover {
  background: var(--bg-soft);
}

.domain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.domain-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dh-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dh-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.domain-head-main h2.dh-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.dh-line .badge { flex: none; }

/* One quiet line under the name, the parts split by a dot. */
.domain-head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 0;
  min-width: 0;
  font-size: 13px;
  color: var(--text-soft);
}
.domain-head-meta > * + *::before { content: '\00b7'; margin: 0 8px; color: var(--text-faint); }
.dh-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-soft); }

.domain-region { font-size: 13px; color: var(--text-soft); }

.container-id-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.container-id-field .copy-trigger.mono {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  margin: -1px -3px;
}

.container-id-field .copy-trigger.mono:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.container-id-field .icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
}

.container-id-field .icon-btn svg { width: 13px; height: 13px; }
.container-id-field .icon-btn .check-icon { color: var(--success); }

.test-result {
  font-size: 13px;
  margin-top: 10px;
  display: none;
}

.test-result[hidden] { display: none; }
.test-result:not([hidden]) { display: block; }
.test-result-ok { color: var(--success); }
.test-result-error { color: var(--danger); }

.domain-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.script-snippet-block {
  margin-bottom: 16px;
}

.script-snippet-block:last-child { margin-bottom: 0; }

.script-snippet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.script-snippet-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.script-snippet-header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

.script-snippet-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-soft-2);
  resize: vertical;
}

.script-snippet-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.script-output {
  padding: 18px 24px 4px;
}

/* .form-row's own padding/border-bottom is meant for a standalone panel-body/
   modal-body -- inside .script-output (which already has its own 18px/24px
   padding) it would otherwise double up. */
.script-output .form-row {
  padding: 0 0 18px;
}

/* A row that follows another starts below the divider with the same
   breathing room (2026-10-16: the email row sat right on the border). */
.script-output .form-row + .form-row { padding-top: 18px; }
.script-output .form-row:last-child { border-bottom: 0; padding-bottom: 20px; }

.script-output-note {
  margin: 16px 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

.script-output-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.modal.modal-wide { width: 680px; }

.chart .bar-empty {
  width: 100%;
  height: 2px;
  background: var(--border-soft);
  border-radius: 2px;
}



/* Clickable rows in the domains overview */
.data-table tr.row-link { cursor: pointer; }
.data-table tr.row-link:hover td { background: var(--bg-soft-2); }

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

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(280px, 86vw);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
    /* The desktop sidebar is deliberately transparent: it is a grid column
       sitting on the app's paper ground, and the content cards carry the
       white. Here it stops being a column and becomes a drawer floating OVER
       the page, so it has to bring that ground with it -- left transparent,
       the dashboard content reads straight through the open menu. */
    background: var(--bg-soft-2);
  }

  .app.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .app.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-toggle.icon-btn {
    display: inline-flex;
  }

  .topbar {
    padding: 0 16px;
  }

  .topbar-left h1,
  .topbar-left .topbar-heading {
    min-width: 0;
  }

  .stats-grid, .stats-grid.stats-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .accounts-body { padding: 32px 16px; }
  .entity-row { padding: 12px 16px; }
}

/* ---------- Ticket/feedback image attachments ---------- */

.attachment-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.attachment-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-ctl);
  padding: 6px 10px;
  cursor: pointer;
}

.attachment-add-btn:hover {
  color: var(--text);
  border-color: var(--border-soft);
  background: var(--bg-soft);
}

.attachment-add-btn svg { width: 14px; height: 14px; }

.attachment-hint {
  font-size: 12px;
  color: var(--text-faint);
}

.attachment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.attachment-preview {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-ctl);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
}

.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.attachment-preview-remove svg { width: 10px; height: 10px; }

.thread-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.thread-msg-attachment {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-ctl);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  cursor: pointer;
}

.thread-msg-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thread-msg-attachment.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---------- Support "view as" impersonation banner ---------- */

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  text-align: center;
}

.impersonation-banner strong { font-weight: 700; }

.impersonation-banner-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.impersonation-banner-exit:hover {
  background: rgba(255,255,255,0.28);
}

/* ---------- Narrow-viewport layout corrections ---------- */

@media (max-width: 720px) {
  /* A panel header is a two-up row (title block | filters) that has no room
     to be a row here: the selects got squeezed to a few characters each and
     the heading wrapped around them. Stack instead, and let each filter take
     the full width so its label is actually readable. */
  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .panel-header-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .panel-header-filter select,
  .panel-header-filter input {
    width: 100%;
  }

  /* Column headings set the table's natural width. Left wrapping, they
     collapsed to one word per line and the table crushed itself to fit the
     viewport rather than overflowing -- which is what actually made the
     columns unreadable. Holding them on one line gives the table a real
     width to scroll, which .panel-body:has(.data-table) now permits. Cells
     keep wrapping, so a long activity message doesn't drag the table out to
     an absurd width. */
  .data-table th {
    white-space: nowrap;
  }

  /* The manager card is avatar | text | button on one line, which at this
     width left the text column ~250px and wrapped the name, the strapline
     and both contact links into a jumble. Stack it, and give the contact
     links their own rows so long email addresses stop colliding. */
  .pm-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
  }

  .pm-contact {
    flex-direction: column;
    gap: 10px;
  }

  .pm-link {
    min-width: 0;
    word-break: break-word;
  }

  .pm-action {
    width: 100%;
  }

  .pm-action .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Alert detail page (dashboard/alert.html) ---------- */

.alert-message { font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
.alert-help { font-size: 14px; line-height: 1.55; margin: 0 0 20px; max-width: 68ch; }

/* One line of facts under the heading (domain · severity · opened · last
   checked) instead of a label/value row per fact. Separators are drawn, so
   wrapping never strands one at a line start. */
.alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-soft);
}
.alert-meta > span + span::before { content: '·'; margin: 0 8px; color: var(--text-faint, #8a8d93); }
.alert-meta a { color: var(--text); font-weight: 600; }

/* The findings behind an audit alert, one block each, new ones first. */
.alert-findings { list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--border-soft); }
.alert-finding { padding: 14px 0 14px 14px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; }
.alert-finding.is-new { border-left-color: var(--warning-text); }
.af-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.af-head strong { font-size: 14px; font-weight: 700; }
.af-where { font-size: 12px; color: var(--text-faint, #8a8d93); }
.af-msg { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); max-width: 76ch; }
.af-msg a { white-space: nowrap; color: var(--accent); font-weight: 600; }
.af-msg a:hover { text-decoration: underline; }

/* The type-level explanation, folded away: it is the same text for every
   alert of the type, so a reader who has seen it once does not need it in
   the way. */
.alert-about { margin-top: 18px; font-size: 13px; }
.alert-about summary { cursor: pointer; color: var(--text-soft); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.alert-about summary::-webkit-details-marker { display: none; }
.alert-about summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.alert-about[open] summary::before { transform: rotate(45deg); }
.alert-about p { margin: 8px 0 0; line-height: 1.55; color: var(--text-soft); max-width: 68ch; }

/* Label/value pairs for the alert's own fields plus its per-type metadata.
   Two columns on desktop, stacked on narrow screens -- some values (resolved
   IP lists, referer breakdowns) are long enough to need the full width. */
.kv { border-top: 1px solid var(--border-soft); }
.kv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.kv-key { color: var(--text-soft); }
.kv-val { color: var(--text); overflow-wrap: anywhere; }
.kv-val code {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  padding: 1px 5px;
  border-radius: 4px;
}

.panel-actions { margin-top: 20px; }

/* Timeline. The connecting rule is drawn on the <li> rather than as a single
   full-height element so it stops cleanly at the last item instead of
   trailing past it. */
.alert-timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; padding: 0 0 20px 26px; }
.tl-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: var(--border-soft);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  outline: 3px solid var(--surface);
}
.tl-opened .tl-dot { background: var(--danger); }
.tl-resolved .tl-dot { background: var(--success, #1e8e3e); }
.tl-muted .tl-dot,
.tl-acknowledged .tl-dot { background: var(--accent); }

.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tl-head strong { font-size: 14px; font-weight: 700; }
.tl-when { font-size: 12px; color: var(--text-soft); }
.tl-detail { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); max-width: 70ch; }
.tl-actor { margin: 3px 0 0; font-size: 12px; color: var(--text-faint, #8a8d93); }
.tl-by { font-size: 12px; color: var(--text-soft); }
.tl-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-soft);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
/* What an audit added or cleared between two runs. */
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tl-chip {
  font-size: 12px;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-soft);
  color: var(--text-soft);
}
.tl-chip-add { background: var(--warning-soft); color: var(--warning-text); }
.tl-chip-gone { background: var(--success-soft); color: var(--success, #1e8e3e); }
.tl-item.tl-opened .tl-chip-add { background: var(--bg-soft); color: var(--text-soft); }

@media (max-width: 720px) {
  .kv-row { grid-template-columns: 1fr; gap: 3px; }
}

/* Timeline dots for the two event types alert_events added in phase 2.
   'changed' is amber: the alert is still open, something moved. 'unmuted' is
   a hollow ring of the same accent 'muted' uses solid -- the two are a pair,
   and negative space reads as the undo of the filled one without inventing a
   sixth colour. */
.tl-changed .tl-dot { background: var(--accent-orange, #ff8a00); }
.tl-rechecked .tl-dot { background: var(--accent); }
.tl-notified .tl-dot, .tl-notified_resolved .tl-dot, .tl-last_checked .tl-dot { background: var(--border); }
.tl-unmuted .tl-dot {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Alert rows link to their own detail page. The whole row is the target
   (see alerts.html), so it needs to look like one. */
.data-table tr[data-alert-href] { cursor: pointer; }
.data-table tr[data-alert-href]:hover { background: var(--surface-2, rgba(0, 0, 0, 0.025)); }

/* A ticket the customer has hidden from the support chat widget. Still listed
   here -- this page is where it gets put back -- just visibly set apart so the
   state is legible rather than only implied by the restore button. */
.data-table tr.ticket-chat-hidden td:not(.cell-actions) { opacity: 0.62; }

/* ---------- GTM template generator (gtm-templates.html) ---------- */

/* Stepper */
.tw-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.tw-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
}
.tw-step-pill .n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--text-soft);
  border: 1.5px solid var(--border);
}
.tw-step-pill.is-active { color: var(--text); }
.tw-step-pill.is-active .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.tw-step-pill.is-done .n { background: rgba(0, 113, 227, 0.1); border-color: var(--accent); color: var(--accent); }
.tw-step-line { flex: 0 0 26px; height: 1.5px; background: var(--border); border-radius: 1px; }

/* Selection cards: the input is real but invisible; the card mirrors it */
.tw-cards { display: grid; gap: 10px; }
.tw-cards-2 { grid-template-columns: 1fr 1fr; }
.tw-cards-3 { grid-template-columns: 1fr 1fr 1fr; }
.tw-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tw-card:hover { border-color: #c3c7cf; }
.tw-card input { position: absolute; opacity: 0; pointer-events: none; }
.tw-card-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-soft);
  transition: background 0.12s, color 0.12s;
}
.tw-card-ic svg { width: 18px; height: 18px; }
.tw-card-text { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; }
.tw-card-text strong { font-size: 14px; color: var(--text); }
.tw-card-text span { color: var(--text-soft); line-height: 1.45; font-size: 13px; }
.tw-card-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s, transform 0.12s;
}
.tw-card-tick svg { width: 11px; height: 11px; }
.tw-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); }
.tw-card.is-on .tw-card-ic { background: rgba(0, 113, 227, 0.1); color: var(--accent); }
.tw-card.is-on .tw-card-tick { opacity: 1; transform: scale(1); }

/* Platform cards carry real brand logos (same symbols as the marketing
   homepage): a white chip so the colours read as themselves, and no accent
   recolour on selection -- the tick and border already say "on". */
.tw-card-ic.brand { background: #fff; border: 1px solid var(--border); }
.tw-card-ic.brand svg { width: 20px; height: 20px; }
.tw-card.is-on .tw-card-ic.brand { background: #fff; }
.tw-card-ic.brand-snap { background: #FFFC00; border-color: #e8e400; }
.tw-card.is-on .tw-card-ic.brand-snap { background: #FFFC00; }


/* Group headings inside the building-blocks step */
.tw-group-label { display: flex; flex-direction: column; gap: 1px; margin: 0 0 10px; }
.tw-group-label strong { font-size: 13px; color: var(--text); }
.tw-group-label span { font-size: 12px; color: var(--text-soft); }
.tw-group-gap { margin-top: 22px; }

.tw-suboption { margin: 12px 0 0 4px; }
.tw-suboption span { color: var(--text-soft); }

/* Paired inputs (pixel id + token) on the Variables step */
.tw-pair { display: flex; gap: 8px; }
.tw-linked-badge { margin-top: 8px; background: rgba(0,113,227,0.1); color: var(--accent); }
.tw-linked-badge[hidden] { display: none; }
.tw-pair input { flex: 1; min-width: 0; }
.tw-pair-gap { margin-top: 8px; }

/* Step navigation */
.tw-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.tw-nav #tw-next { margin-left: auto; }

/* Download step */
.tw-downloads-head { font-size: 14px; font-weight: 700; margin: 20px 0 6px; }
.tw-downloads-head .sub { display: block; font-size: 13px; font-weight: 400; color: var(--text-soft); margin-top: 2px; }
.tw-file {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tw-file-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
}
.tw-file-ic.srv { background: rgba(30, 142, 62, 0.1); color: #1e8e3e; }
.tw-file-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-file-meta strong { font-size: 14px; }
.tw-file-desc { font-size: 13px; color: var(--text-soft); }
.tw-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 14px 0 0;
}

@media (max-width: 900px) {
  .tw-cards-2, .tw-cards-3 { grid-template-columns: 1fr; }
  .tw-step-line { display: none; }
}

/* ---------- Partner badge page (dashboard/partner/badge.html) ---------- */

.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}
.pb-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pb-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  min-height: 150px;
}
.pb-preview img { max-width: 100%; height: auto; }
.pb-light { background: #ffffff; }
.pb-dark { background: #0b0d12; }
.pb-meta { padding: 16px 18px 18px; border-top: 1px solid var(--border-soft); }
.pb-meta strong { display: block; font-size: 14px; text-transform: capitalize; }
.pb-meta p { font-size: 13px; color: var(--text-soft); margin: 5px 0 12px; line-height: 1.5; }

.pb-embed {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 22px;
}
.pb-embed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pb-embed-head h3 { font-size: 15px; margin: 0 0 4px; }
.pb-embed-head p { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.5; }
.pb-code {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-ctl);
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.pb-hint { font-size: 13px; color: var(--text-faint); margin: 10px 0 0; }
.pb-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bg-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

.pb-rules h3 { font-size: 15px; margin: 0 0 10px; }
.pb-rules ul { margin: 0; padding-left: 20px; }
.pb-rules li { font-size: 14px; color: var(--text-soft); line-height: 1.65; margin-bottom: 6px; }

.pb-listing-state { margin-bottom: 16px; }
.pb-listing-state p { font-size: 14px; color: var(--text-soft); margin: 10px 0 0; line-height: 1.6; max-width: 62ch; }

@media (max-width: 640px) {
  .pb-embed-head { flex-direction: column; }
}

/* Partner directory listing form, on the partner badge page. */
.pb-review-note {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  /* Same red as .btn-danger above; the codebase has no --danger token. */
  border-left: 3px solid var(--danger);
}
.pb-review-note strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.pb-review-note p { font-size: 14px; color: var(--text-soft); margin: 5px 0 0; line-height: 1.55; }

.pb-form { margin-top: 18px; }
/* textarea already picks up width/padding/border from the shared form rule
   above; only the resize behaviour is specific to this form. */
.pb-form textarea { resize: vertical; }
.pb-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pb-form-msg { font-size: 13px; color: var(--text-soft); }

/* Upgrade CTA on the overview quota card (js/overview.js), shown from 80% of
   quota. Same billing-capability gate as the billing nav link above: roles
   the API would 403 never see the button. */
.stat-card .quota-upgrade-btn { display: inline-block; margin-top: 12px; }
html[data-mb-can-billing="0"] .quota-upgrade-btn { display: none; }

/* Per-invoice kickback breakdown (kickback current-quarter table). */
.kb-has-breakdown { cursor: pointer; }
.kb-breakdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 4px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  vertical-align: -4px;
}
.kb-breakdown-toggle svg { transition: transform 0.15s ease; }
.kb-breakdown-toggle.is-open svg { transform: rotate(90deg); }
.kb-breakdown-row > td { background: var(--bg-soft); padding: 10px 14px 14px; }
.kb-breakdown-table { width: 100%; border-collapse: collapse; }
.kb-breakdown-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  text-align: left;
  padding: 4px 10px;
}
.kb-breakdown-table td {
  font-size: 13px;
  color: var(--text-soft);
  padding: 5px 10px;
  border-top: 1px solid var(--border-soft);
}

/* Partner status pill, topbar top-right on direct-agency pages. Colors are
   the partner-badge family's own caps palette (build-partner-badge.py). */
.partner-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: 12px;
}
.partner-status-certified { background: #e8f2fd; color: #0058b0; }
.partner-status-bronze    { background: #f5e9de; color: #7d4c22; }
.partner-status-silver    { background: #ededee; color: #54585d; }
.partner-status-gold      { background: #f8efd2; color: #775b06; }
.partner-status-platinum  { background: #e9f0f7; color: #3d4c5c; }

/* Foldable sub-section inside a panel (consent donuts, 2026-09-16): a
   native <details> styled like a panel row, closed by default. */
.fold-section { border-top: 0.5px solid var(--border); }
.fold-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 14px; font-weight: 500; color: var(--text); user-select: none; }
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--text-soft); border-bottom: 1.5px solid var(--text-soft); transform: rotate(-45deg); margin-left: 2px; transition: transform .15s ease; }
.fold-section[open] > .fold-summary::before { transform: rotate(45deg); }
.fold-summary:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }
.fold-hint { font-weight: 400; font-size: 13px; color: var(--text-soft); }
.fold-section > .panel-body { border-top: 0.5px solid var(--border); }

/* Sites on this domain (js/domain-sites.js, 2026-10-14) */
.sites-table td { vertical-align: top; }
.sites-table .mono { white-space: nowrap; }
.sites-nowrap { white-space: nowrap; }
.sites-faint { color: var(--text-faint); }
.sites-note { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.sites-table select { min-width: 0; width: auto; }
/* Sites card refresh (2026-10-16): summary line, tags, share bar, footnote,
   stacked rows at phone width instead of a sideways-scrolling table. */
.sites-table th { white-space: nowrap; }
.sites-table th, .sites-table td { padding-left: 14px; padding-right: 14px; }
/* Edge to edge in a no-pad panel body (2026-10-16): the outer cells line up
   with the panel header's 24px, and the table loses its own frame. */
#sites-panel .sites-table th:first-child, #sites-panel .sites-table td:first-child { padding-left: 24px; }
#sites-panel .sites-table th:last-child, #sites-panel .sites-table td:last-child { padding-right: 24px; }
#sites-panel .sites-table { border: 0; border-radius: 0; margin: 0; }
#sites-panel .sites-scroll { border-bottom: 1px solid var(--border-soft); }
#sites-panel .sites-table tbody tr:last-child td { border-bottom: 0; }
.sites-pad { padding: 0 24px 20px; }
/* Header info icons (2026-10-16): the table scrolls sideways, so the popups
   must stay inside it; the last column's opens leftwards. */
#sites-panel .sites-table th .info-tip { margin-left: 5px; }
#sites-panel .sites-scroll.sites-fits { overflow: visible; }
#sites-panel .sites-tip { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 12px; }
#sites-panel .sites-tip strong { color: #fff; font-weight: 700; }
#sites-panel .info-tip-popup.sites-tip-end { left: auto; right: -6px; transform: translateY(-4px); }
#sites-panel .info-tip-popup.sites-tip-end::after { left: auto; right: 8px; transform: none; }
#sites-panel .info-tip:hover .info-tip-popup.sites-tip-end,
#sites-panel .info-tip:focus-visible .info-tip-popup.sites-tip-end { transform: translateY(0); }
#sites-panel .sites-foot p { margin: 0 0 6px; }
#sites-panel .sites-foot strong { color: var(--text-soft); font-weight: 700; }
.sites-table th.sites-th-wrap { white-space: normal; width: 1%; min-width: 116px; line-height: 1.3; }
.sites-scroll { overflow-x: auto; }
.sites-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sites-tag { font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--text-soft); white-space: nowrap; }
.sites-tag-mono { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; }
.sites-tag-warn { color: var(--warning-text); border-color: currentColor; background: transparent; }
.sites-tag-muted { border-style: dashed; color: var(--text-faint); background: transparent; }
.sites-bar { width: 88px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--border-soft); overflow: hidden; }
.sites-bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.sites-row-ignored td { opacity: 0.6; }
.sites-foot { font-size: 12px; color: var(--text-faint); line-height: 1.55; }
@media (max-width: 640px) {
  .sites-table thead { display: none; }
  #sites-panel .sites-scroll { border: 0; padding: 0 16px; }
  #sites-panel .sites-table td { padding: 4px 0; }
  #sites-panel .sites-table td:first-child { padding: 0 0 6px; }
  #sites-panel .sites-table tbody tr:last-child td { border-bottom: 0; }
  .sites-table, .sites-table tbody, .sites-table tr, .sites-table td { display: block; width: 100%; }
  .sites-table tr { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; }
  .sites-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .sites-table td::before { content: attr(data-label); font-size: 12px; color: var(--text-faint); }
  .sites-table td.sites-host, .sites-table td:first-child { display: block; padding: 0 0 6px; }
  .sites-table .mono { white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
  .sites-table td.sites-host::before { content: none; }
  .sites-table td .sites-bar { display: none; }
}
.sites-toggle { cursor: pointer; vertical-align: top; }
.sites-add { margin-top: 16px; }
.sites-add label { display: block; margin-bottom: 6px; }
.sites-guide { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--bg-soft); }
.sites-guide summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; user-select: none; }
.sites-guide summary::-webkit-details-marker { display: none; }
.sites-guide ol { margin: 12px 0 2px; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.sites-guide li { margin-bottom: 8px; }
.sites-guide li strong { color: var(--text); font-weight: 700; }
.sites-caret { width: 6px; height: 6px; border-right: 1.5px solid var(--text-soft); border-bottom: 1.5px solid var(--text-soft); transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.sites-guide[open] .sites-caret { transform: rotate(45deg); }
.sites-spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: sites-spin .8s linear infinite; }
@keyframes sites-spin { to { transform: rotate(360deg); } }

/* Tagway: other subdomain addresses (2026-10-14) */
.tagway-intro { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 0; }
.tagway-sites { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.tagway-site { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.tagway-site:first-child { border-top: 0; }
.tagway-site-main { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; }
.tagway-site-main .mono { word-break: break-all; margin-right: 6px; }
.tagway-site-actions { display: flex; gap: 8px; flex: none; }
.tagway-site-checks { flex-basis: 100%; }
.tagway-site-add { margin-top: 16px; }
.tagway-site-add label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.tagway-site-add-row { display: flex; gap: 8px; max-width: 460px; }
.tagway-site-add-row input { flex: 1; min-width: 0; }
.tagway-site-lookup { margin-top: 18px; }
.tagway-site-lookup summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent); }
.tagway-site-lookup[open] summary { margin-bottom: 8px; }
.tagway-site-lookup p { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 0 0 10px; }
.tagway-site-lookup .data-table { border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); overflow: auto; margin-bottom: 8px; }

/* Profit tracking (POAS) power-up (js/poas.js, 2026-10-14) */
#poas-root input[type="number"] { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: #fff; }
#poas-root .host-input input[type="number"] { border: 0; border-radius: 0; background: transparent; }
#poas-settings-panel .form-row > .host-input { max-width: 200px; }
.poas-source-status a { color: var(--accent); text-decoration: none; font-weight: 500; }
.poas-source-status a:hover { text-decoration: underline; }
.poas-lead { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 0; }
.poas-note { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 10px 0 0; }
.poas-hint { font-size: 12px; color: var(--text-faint); margin: 6px 0 0; line-height: 1.5; }
.poas-error-line { font-size: 13px; color: var(--danger); margin: 8px 0 0; line-height: 1.5; }
.poas-ok-line { font-size: 13px; color: var(--success, #1a7f37); margin: 12px 0 8px; }
.poas-source-status { font-size: 13px; line-height: 1.6; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(30,142,62,.06); border: 1px solid rgba(30,142,62,.2); margin-bottom: 16px; }
.poas-source-status.is-warn { background: rgba(255,138,0,.07); border-color: rgba(255,138,0,.3); }
.poas-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.poas-tab { border: 0; background: none; padding: 8px 12px; font-size: 13px; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.poas-tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.poas-tab-body > label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.poas-shop-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.poas-shop-row:first-child { padding-top: 0; }
.poas-shop-row .btn { flex-shrink: 0; }
.poas-row { display: flex; gap: 8px; max-width: 640px; }
.poas-row input[type=text] { flex: 1; min-width: 0; }
.poas-mapping { margin-top: 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 4px 0 14px; }
.poas-mapping h3 { font-size: 14px; margin: 12px 20px 4px; }
.poas-mapping > p, .poas-mapping > .poas-actions, .poas-mapping > table { margin-left: 20px; margin-right: 20px; }
.poas-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.poas-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.poas-sample { font-size: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); overflow: auto; width: auto !important; }
.poas-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.poas-cat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.poas-cat-row input[type=text] { width: 200px; }
.poas-cat-row .host-input { width: 140px; max-width: 140px; }
.poas-test-head, .poas-test-row { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) 80px auto; gap: 8px; align-items: center; }
.poas-test-head { font-size: 12px; color: var(--text-faint); margin-bottom: 6px; }
.poas-test-row { margin-bottom: 8px; }
.poas-test-row input { min-width: 0; }
.poas-test-ship { font-size: 13px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.poas-test-ship input { width: 90px; }
.poas-test-result { margin-top: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.poas-test-result .data-table { border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); overflow: auto; }
.poas-test-result > .poas-note { grid-column: 1 / -1; margin: 0; }
.poas-big { font-size: 28px; font-weight: 700; line-height: 1.1; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.poas-big span { display: block; font-size: 12px; font-weight: 400; color: var(--text-faint); margin-top: 4px; font-family: var(--mono); }
.poas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.poas-stats > div { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
.poas-stats .n { font-size: 20px; font-weight: 700; }
.poas-stats .l { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.poas-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-soft); }
.poas-bar span { display: block; height: 100%; }
.poas-bar .m, .poas-legend .m { background: var(--success, #1a7f37); }
.poas-bar .f, .poas-legend .f { background: var(--accent-orange); }
.poas-bar .u, .poas-legend .u { background: var(--danger); }
.poas-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; color: var(--text-soft); margin: 8px 0 16px; }
.poas-legend span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: -8px; }
.poas-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.65; color: var(--text-soft); }
.poas-steps li { margin-bottom: 10px; }
.poas-steps strong { color: var(--text); }
#poas-coverage-panel h3 { font-size: 14px; margin: 0 0 8px; }
#poas-coverage-panel .data-table + h3 { margin-top: 20px; }
#poas-coverage-panel .data-table { border: 1px solid var(--border-soft); border-radius: var(--radius-ctl); overflow: auto; }
@media (max-width: 640px) { .poas-test-result { grid-template-columns: 1fr; } .poas-test-head { display: none; } }

/* Collapsible panel (domain settings Connection / DNS card, 2026-10-16):
   the header toggles the body; same caret as the Tag Manager page's
   container cards. */
.panel-collapsible > .panel-header { cursor: pointer; user-select: none; }
.panel-collapsible.is-collapsed > .panel-header { border-bottom: 0; }
.panel-collapsible.is-collapsed > .panel-body,
.panel-collapsible.is-collapsed > .panel-footer { display: none; }
.panel-header-end { display: flex; align-items: center; gap: 12px; flex: none; }
.panel-toggle { flex: none; width: 30px; height: 30px; border-radius: var(--radius-ctl); border: 1px solid var(--border-soft); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.panel-toggle:hover { background: var(--bg-soft); }
.panel-caret { width: 7px; height: 7px; border-right: 1.5px solid var(--text-soft); border-bottom: 1.5px solid var(--text-soft); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.panel-toggle[aria-expanded="false"] .panel-caret { transform: translateX(-1px) rotate(-45deg); }

/* Server container in the Tag Manager connection (2026-10-16): the paste
   fallback without a Google connection, and the paste box in the
   Change server container form. */
#gtm-panel .gtm-paste { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--bg-soft); }
#gtm-panel .gtm-paste summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
#gtm-panel .gtm-paste .gtm-meta { margin: 8px 0; }
#gtm-panel .gtm-paste textarea, #gtm-panel .gtm-paste-box textarea { width: 100%; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; }
#gtm-panel .gtm-paste-box { margin-top: 12px; display: grid; gap: 6px; }
#gtm-panel .gtm-paste-box label { font-size: 13px; font-weight: 700; color: var(--text); }
#gtm-panel .gtm-paste-link { margin-top: 10px; }

#gtm-paste-error:not(.show) { display: none; }

/* Audit card on/off switch in the header (2026-10-16). */
#audit-panel .audit-switch { flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-soft); }
#audit-panel .audit-switch .mb-toggle { cursor: pointer; }

/* Generate GTM script: container suggestions from the Tag Manager
   connection under the container field (2026-10-16). */
.gtm-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.gtm-suggest-label { font-size: 12px; color: var(--text-faint); margin-right: 2px; }
.gtm-suggest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--bg-soft); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.gtm-suggest-chip:hover, .gtm-suggest-chip:focus-visible { border-color: var(--accent); }
.gtm-suggest-chip .mono { font-size: 12px; }
.gtm-suggest-note { color: var(--text-faint); }
.gtm-suggest-chip.is-match { border-color: var(--accent); background: transparent; }
.gtm-suggest-chip.is-match .gtm-suggest-note { color: var(--accent); }

/* Generate GTM script: the per-platform paste guide under the platform
   select (2026-10-16). */
.install-guide { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.install-guide-title { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.install-guide ol { margin: 0; padding-left: 20px; }
.install-guide li + li { margin-top: 4px; }
.install-guide-link { margin: 10px 0 0; }

/* Enhanced ad blocker protection page (2026-10-16): label/value rows. */
#ad-block-panel .abp-value { min-width: 0; padding-top: 2px; }
#ad-block-panel .abp-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
#ad-block-panel .abp-meta { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
#ad-block-panel .abp-stat { display: flex; align-items: baseline; gap: 10px; }
#ad-block-panel .abp-stat strong { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
#ad-block-panel .abp-stat span { font-size: 13px; line-height: 1.5; color: var(--text-soft); }
#ad-block-panel .abp-guard summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent); }
#ad-block-panel .abp-guard[open] summary { margin-bottom: 4px; }
#ad-block-panel .abp-snippet { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
#ad-block-panel .abp-snippet textarea { flex: 1; min-width: 0; margin: 0; }
#ad-block-panel .panel-body > .form-row:last-of-type { border-bottom: 0; }
@media (max-width: 640px) { #ad-block-panel .abp-snippet { flex-direction: column; align-items: stretch; } }

/* Click ID restorer page (2026-10-16): intro padded, rows edge to edge. */
.cid-intro { padding: 20px 24px 18px; border-bottom: 1px solid var(--border-soft); }
.cid-intro > p:first-child { margin-top: 0; }
.cid-intro .click-id-tips { margin-bottom: 0; }

/* Generate GTM script, result screen: the first screen's choices (2026-10-16). */
.gtm-choices { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft); }
.gtm-choices dl { flex: 1; min-width: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.gtm-choices dt { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); }
.gtm-choices dd { margin: 2px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.gtm-choices .gtm-choices-edit { flex: none; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gtm-site-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-soft); }
.gtm-site-tip .mono { font-size: 12px; }

/* ---------- Phone width (dashboard audit 2026-10-17) ---------- */
@media (max-width: 480px) {
  .topbar-right { gap: 8px; }
  /* Date range becomes icon-only so "Overview" keeps its room. */
  #date-range-trigger-label { display: none; }
  .date-range-trigger { padding: 0 8px; }
  /* A topbar primary ("+ New domain") goes compact, and on those pages the
     setup checklist icon yields; it stays on Overview, where there is room. */
  .topbar-right .btn-primary { padding: 0 12px; height: 36px; font-size: 13px; }
  .topbar-right:has(.btn-primary) .setup-guide-wrap { display: none; }
}

/* ---------- Reduced motion (one block, replaces three one-liners) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mb-drawer, .mb-drawer-overlay, .panel-caret, .sidebar, .sidebar-backdrop,
  .save-toast, .mb-audit-toast, .avatar-menu-dropdown, .account-switcher-dropdown { transition: none !important; }
  .sites-spin, .tm-spin { animation-duration: 2s; }
  .stat-card.is-loading .value, .stat-card.is-loading .delta,
  .panel-body.is-loading::after, .data-loading-surface.is-loading::after, .live-dot { animation: none !important; }
}

/* ---------- Shared utilities (dashboard audit 2026-10-17, medium items) ---------- */

/* Form action row: replaces `style="display:flex; justify-content:flex-end;"`. */
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Soft intro paragraph under a panel header: replaces the inline 14px/soft/16px trio. */
.panel-intro { font-size: 14px; color: var(--text-soft); margin: 0 0 16px; line-height: 1.5; }
.note-soft { margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; }

/* Flat stat card inside a panel (billing, client access): no lift, soft line. */
.stat-card.flat { box-shadow: none; border-color: var(--border-soft); }

/* Mini tables (log items, kickback breakdown, sites) share the data-table
   header typography; only their padding differs. */
.log-items-table th, .kb-breakdown-table th, .sites-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

/* Confirm dialog (js/mb-modal.js). */
.mb-confirm .modal { max-width: 480px; }
.mb-confirm .panel-header { padding-bottom: 12px; }
.mb-confirm .modal-text + .modal-text { padding-top: 0; }
.mb-confirm-type { padding: 0 24px 20px; }
.mb-confirm-type label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 8px; }
.mb-confirm-type strong { color: var(--text); font-family: var(--mono); font-weight: 700; }

/* Domain header: the two actions (Generate script, Test) sit right of the
   domain info, centred on it, at every width above a phone (owner
   2026-10-25; they went under the info below 1240px while there were five).
   On a phone they are one full-width row, see the phone polish block. */

/* Phone width: room for content, single-column stats, wrapping heads. */
@media (max-width: 720px) {
  .content { padding: 16px; }
  .domain-head, .domain-head-actions, .modal-footer { flex-wrap: wrap; }
  .domain-head-actions { flex-shrink: 1; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ---------- Alerts list (compact, 2026-10-17) ---------- */
.alert-list { display: flex; flex-direction: column; }
.alert-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: var(--bg-soft-2); }
.alert-row:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.alert-row-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--border); }
.alert-row.sev-critical .alert-row-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.alert-row.sev-warning .alert-row-dot { background: var(--accent-orange); box-shadow: 0 0 0 3px var(--warning-soft); }
.alert-row.is-resolved .alert-row-dot { background: var(--success); }
.alert-row.is-resolved .alert-row-main, .alert-row.is-resolved .alert-row-meta { opacity: .7; }
.alert-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alert-row-title { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.alert-row-title .type { color: var(--text-soft); }
.alert-row-msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-row-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; padding-top: 3px; }
@media (max-width: 640px) {
  .alert-row { grid-template-columns: 10px minmax(0, 1fr); padding: 12px 16px; }
  .alert-row-meta { grid-column: 2; padding-top: 0; }
}

/* ---------- DNS provider steps (js/dns-providers.js) ---------- */
/* Used on the add-a-domain page's Go live step and the domain page's setup
   checklist: who hosts the DNS, three steps, a button to their panel. */
.dnsp { margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border-soft); }
/* Inside another card (the Go live DNS line, the checklist item): no second
   box, a hairline and a little air instead. */
.dnsp.compact { margin: 16px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; background: transparent; }
.dnsp-h { font-size: 13.5px; margin: 0 0 8px; }
.dnsp-h.muted { color: var(--text-soft); margin: 0; }
.dnsp-h code, .dnsp-steps code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; }
.dnsp-steps { margin: 0; padding: 0 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.dnsp-steps li { margin: 0 0 5px; padding-left: 2px; }
.dnsp-steps li code { margin: 0 2px; }
.dnsp-steps li::marker { color: var(--text-faint); font-weight: 600; }
.dnsp-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--warning-text); }
.dnsp-open { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ---------- Setup checklist on the domain page (js/domain-checklist.js) ---------- */
.onb-panel .panel-header { align-items: flex-start; }
.onb-hide { font: inherit; font-size: 12.5px; color: var(--text-faint); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.onb-hide:hover { color: var(--text); text-decoration: underline; }
.onb { list-style: none; margin: 0; padding: 0; }
.onb-item { border-top: 1px solid var(--border-soft); }
.onb-item:first-child { border-top: 0; }
.onb-row {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 24px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.onb-row:hover { background: var(--bg-soft-2); }
.onb-n {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 12.5px; font-weight: 700; color: var(--text-soft);
}
.onb-n svg { width: 13px; height: 13px; }
.onb-item.is-done .onb-n { background: var(--success); border-color: var(--success); color: #fff; }
.onb-item.is-open:not(.is-done) .onb-n { background: var(--accent-grad); background-origin: border-box; border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12); }
.onb-t strong { display: block; font-size: 14px; }
.onb-t span { display: block; font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.onb-item.is-done .onb-t strong { color: var(--text-soft); font-weight: 500; }
.onb-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint); transform: rotate(-45deg); transition: transform .15s; justify-self: center; }
.onb-item.is-open .onb-chev { transform: rotate(45deg); }
.onb-body { padding: 0 24px 18px 66px; }
.onb-text { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); max-width: 70ch; }
.onb-rec { display: grid; gap: 8px; margin: 0 0 4px; }
.onb-rec-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.onb-rec-row .k { font-size: 11.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.onb-rec-row .v { font-family: var(--mono); font-size: 13px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--bg); overflow-wrap: anywhere; }
.onb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.onb-foot .onb-status { flex: 1 1 200px; font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }
.onb-foot > span:empty { flex: 1 1 auto; }
@media (max-width: 640px) {
  .onb-row { padding: 12px 16px; gap: 10px; }
  .onb-body { padding: 0 16px 16px 16px; }
  .onb-rec-row { grid-template-columns: 48px 1fr auto; }
}

/* ---- "Check the install" (js/install-check.js, 2026-10-18) -------------------- */
.icheck { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.icheck-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.icheck-note { font-size: 12px; color: var(--text-soft); line-height: 1.45; }
.icheck-error { margin: 10px 0 0; font-size: 13px; color: var(--danger); }
.icheck-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.icheck-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; }
.icheck-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--text-faint); }
.icheck-ok .icheck-dot { background: var(--success); }
.icheck-warn .icheck-dot { background: var(--accent-orange, #ff8a00); }
.icheck-fail .icheck-dot { background: var(--danger); }
.icheck-skip { opacity: 0.6; }
.icheck-text strong { display: block; font-weight: 600; color: var(--text); }
.icheck-text > span { display: block; color: var(--text-soft); margin-top: 1px; }
.onb-ic .icheck { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 12px; }

.onb-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.onb-continue { text-decoration: none; }

.onb-row-link { margin-left: 8px; text-decoration: none; font-weight: 600; }
.onb-row-link:hover { text-decoration: underline; }

/* ---------- Notifications panel (settings.html): one toggle per alert type (2026-10-18) ---------- */
.notif-summary { margin: 0 0 12px; font-size: 12px; color: var(--text-faint); }
.notif-type-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.notif-type-list .check-row.notif-row { margin-bottom: 0; align-items: center; gap: 10px; }
.notif-text { display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-width: 0; }
.notif-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-text span { font-size: 12px; color: var(--text-soft); }
.notif-row input:disabled ~ .mb-toggle-track { opacity: 0.6; }
@media (max-width: 720px) { .notif-type-list { grid-template-columns: 1fr; } }

/* Plan-change dialog: the auto-upgrade choice and the VAT note match the
   summary line (.modal-text, 14px) instead of the 16px page default (2026-10-18). */
#plan-change-modal .hint { font-size: 14px; line-height: 1.55; color: var(--text-soft); }
#plan-change-auto-upgrade-row label { font-size: 14px; line-height: 1.55; }

/* ---------- Payment method page (payment-method.html), redesigned 2026-10-18 ----------
   A focused hand-off card: what happens on Stripe's page, one status box with
   a busy / ready / warn / error / done look, and a button that always works. */
.pmx-card { max-width: 640px; padding: 24px 24px 20px; }
.pmx-head { display: flex; align-items: flex-start; gap: 14px; }
.pmx-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); color: var(--accent); }
.pmx-head-text h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text); }
.pmx-head-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.pmx-plan { display: inline-flex; margin: 14px 0 0 58px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--bg-soft); border: 1px solid var(--border-soft); }
.pmx-plan[hidden] { display: none; }

.pmx-status { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-soft); }
.pmx-status-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--accent); }
.pmx-status.is-busy .pmx-status-ic::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-soft); border-top-color: var(--accent); animation: sites-spin 0.8s linear infinite; }
.pmx-status.is-done .pmx-status-ic { color: var(--success); background: var(--success-soft); }
.pmx-status.is-warn { background: var(--warning-soft); border-color: transparent; }
.pmx-status.is-warn .pmx-status-ic { color: var(--warning-text); }
.pmx-status.is-error { background: var(--danger-soft); border-color: transparent; }
.pmx-status.is-error .pmx-status-ic { color: var(--danger); }
.pmx-status-text { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.pmx-status-text p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.pmx-status-error[hidden], #checkout-status-text[hidden] { display: none; }
.pmx-status-error a { color: var(--accent); font-weight: 600; }

.pmx-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.pmx-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.pmx-steps li strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.pmx-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--bg-soft); border: 1px solid var(--border-soft); }

.pmx-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.pmx-card #payment-method-form { margin-top: 18px; }
.pmx-trust { display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 14px 0 0; padding: 0 4px; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.pmx-trust svg { flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .pmx-card { padding: 18px 16px 16px; }
  .pmx-plan { margin-left: 0; }
  .pmx-foot { flex-direction: column-reverse; }
  .pmx-foot .btn { width: 100%; justify-content: center; }
}

/* Generate-script dialog: a lasting confirmation after the instruction email
   is sent (2026-10-18; the button used to flip to "Sent" for 1.5 s). */
.gtm-mail-sent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--success-soft); font-size: 13px; line-height: 1.5; color: var(--text); }
.gtm-mail-sent[hidden] { display: none; }
.gtm-mail-sent svg { flex: none; margin-top: 2px; color: var(--success); }
.gtm-mail-sent strong { font-weight: 600; }
/* Scrolled into view after a send: leave some room under it. */
.gtm-mail-sent, #gtm-instructions-error { scroll-margin-bottom: 20px; }

/* Generate-script dialog: instruction links with Revoke (2026-10-18). */
.gtm-links { grid-column: 1 / -1; margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-soft); }
.gtm-links[hidden] { display: none; }
.gtm-links-head strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.gtm-links-head span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--text-soft); }
.gtm-links-list { list-style: none; margin: 10px 0 0; padding: 0; }
.gtm-links-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.gtm-links-who { flex: 1 1 180px; min-width: 0; }
.gtm-links-who strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.gtm-links-who span { display: block; font-size: 12px; color: var(--text-faint); }
.gtm-links-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gtm-chip { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border-soft); }
.gtm-chip.on { color: var(--success); background: var(--success-soft); border-color: transparent; }
.gtm-chip.off { color: var(--text-faint); }
.gtm-revoke-armed { color: var(--danger); border-color: var(--danger); }

/* Click ID Restorer subpage: one switch per ad platform (2026-10-18). */
.cidp-list { border-top: 1px solid var(--border-soft); }
.cidp-row { padding: 14px 24px; border-bottom: 1px solid var(--border-soft); }
.cidp-row:last-child { border-bottom: 0; }
.cidp-head { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.cidp-text { min-width: 0; }
.cidp-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.cidp-text > span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.cidp-detail { margin: 12px 0 2px 54px; }
.cidp-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; }
.cidp-params label { display: block; min-width: 0; }
.cidp-params label > span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-soft); }
.cidp-params input { width: 100%; }
.cidp-suffix { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-soft); }
.cidp-suffix .k { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.cidp-suffix code { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.cidp-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-soft); }
.cidp-unsaved { align-self: center; margin-right: auto; font-size: 12px; font-weight: 600; color: var(--warning-text); }
.cidp-unsaved[hidden] { display: none; }
@media (max-width: 640px) {
  .cidp-row { padding: 14px 16px; }
  .cidp-detail { margin-left: 0; }
  .cidp-suffix { flex-wrap: wrap; }
}

/* Settings: Slack alerts panel (redesigned 2026-10-18). */
.slk-head { align-items: center; }
.slk-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.slk-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); }
.slk-add { display: inline-flex; align-items: center; gap: 8px; }
.slk-add svg { flex: none; }
.slk-list:empty { display: none; }
.slk-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); }
.slk-row:last-child { border-bottom: 0; }
.slk-ch { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; font-weight: 700; color: var(--text-soft); background: var(--bg-soft); }
.slk-main { min-width: 0; }
.slk-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.slk-name strong { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.slk-name span { font-size: 12px; color: var(--text-faint); }
.slk-scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.slk-chip { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); background: var(--bg-soft); border: 1px solid var(--border-soft); }
.slk-chip.all { color: var(--accent); background: var(--accent-wash); border-color: transparent; }
.slk-chip.none { color: var(--warning-text); background: var(--warning-soft); border-color: transparent; }
.slk-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Row actions as small bordered buttons with an icon (2026-10-19). */
.slk-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); background: var(--bg); color: var(--text-soft); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.slk-act svg { flex: none; opacity: 0.85; }
.slk-act:hover { border-color: var(--border); background: var(--bg-soft); color: var(--text); text-decoration: none; }
.slk-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slk-act.is-on { border-color: transparent; background: var(--accent-wash); color: var(--accent); }
.slk-act.danger:hover { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 7%, var(--bg)); color: var(--danger); }
.slk-act.is-busy { opacity: 0.6; pointer-events: none; }
.slk-act.is-busy svg { animation: slkSend 0.9s ease-in-out infinite; }
@keyframes slkSend { 50% { transform: translate(2px, -2px); } }
@media (prefers-reduced-motion: reduce) { .slk-act.is-busy svg { animation: none; } }
@media (max-width: 520px) { .slk-act span { display: none; } .slk-act { padding: 0 9px; } }
.slk-edit { grid-column: 2 / -1; display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-soft); }
.slk-edit-modes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.slk-edit label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.slk-edit-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; padding-left: 2px; }
.slk-edit-actions { display: flex; gap: 8px; }
.slk-empty { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.slk-empty[hidden] { display: none; }
.slk-empty strong { font-size: 14px; font-weight: 600; color: var(--text); }
.slk-empty span { font-size: 13px; line-height: 1.5; color: var(--text-soft); }
@media (max-width: 720px) {
  .slk-row { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .slk-actions { grid-column: 2; }
  .slk-edit { grid-column: 1 / -1; }
  .slk-head { flex-wrap: wrap; gap: 12px; }
}

/* Settings card icons (2026-10-19): every card header gets a tile like the Slack card's
   logo (.slk-logo). Prefixed set-ph-* on purpose: dashboard.css is one global sheet. */
.set-ph-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.set-ph-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); color: var(--accent); }
.set-ph-ic svg { width: 20px; height: 20px; }
.set-ph-ic.brand svg { width: 26px; height: 26px; }
.set-ph-ic.danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; box-shadow: none; }
@media (max-width: 560px) { .set-ph-ic { width: 38px; height: 38px; border-radius: 10px; } .set-ph-main { gap: 12px; } }

/* Partner IP Filter page (redesign 2026-10-19): header tile in the IP Filter power-up's
   slate tone, column heads over the row editor, and the explanation as four short points
   in their own panel under the list. Prefixed ipf-* (dashboard.css is one global sheet). */
.ipf-head { gap: 16px; }
.ipf-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(80,95,115,0.11); color: #4f5d70; }
.ipf-state { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border-soft); }
.ipf-state.is-on { color: var(--success); background: rgba(30,142,62,0.10); border-color: transparent; }
.ipf-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 34px; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.ipf-cols + .ip-filter-list { margin-top: 6px; }
.ipf-how .panel-body { padding-top: 18px; }
.ipf-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ipf-point { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); }
.ipf-pi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.ipf-point h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.ipf-point p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.ipf-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--text-faint); }
@media (max-width: 720px) { .ipf-points { grid-template-columns: minmax(0, 1fr); } .ipf-cols { display: none; } }

/* Partner badge page (redesign 2026-10-19): header tiles, selectable variants that drive
   the embed snippet, a tier pill, and the usage rules as Do / Don't. pbx-* is new; the
   pb-* classes stay as they were (the directory listing page shares some of them). */
/* one look for all three tiles (owner, 2026-10-19): blue icon on white */
.pbx-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); color: var(--accent); }
.pbx-tier { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border-soft); }
.pbx-tier.is-bronze { color: #8a5a2b; background: rgba(176,112,58,0.14); border-color: transparent; }
.pbx-tier.is-silver { color: #55606e; background: rgba(120,132,148,0.16); border-color: transparent; }
.pbx-tier.is-gold { color: #9a6b00; background: rgba(232,170,0,0.17); border-color: transparent; }
.pbx-tier.is-platinum { color: #3d5470; background: rgba(90,130,180,0.15); border-color: transparent; }
.pbx-grid { margin-bottom: 0; }
.pbx-item { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.pbx-item:hover { border-color: var(--border); }
.pbx-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pbx-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); }
.pbx-meta-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbx-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; }
.pbx-item.is-selected .pbx-radio { border: 5px solid var(--accent); }
.pbx-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pbx-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pbx-size { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pbx-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pbx-rule-col { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg); }
.pbx-rule-col h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.pbx-rule-col.is-do h3 { color: var(--success); }
.pbx-rule-col.is-dont h3 { color: var(--danger); }
.pbx-rule-col ul { margin: 0; padding-left: 18px; }
.pbx-rule-col li { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; margin-bottom: 6px; }
.pbx-rule-col li:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .pbx-rules { grid-template-columns: minmax(0, 1fr); } }

/* Partner directory listing (redesign 2026-10-19): status badge in the header, grouped
   fields beside a live preview of the public card (mirrors home.css .pdir-card), actions
   under both. Prefixed pdl-*; the shared pb-* rules stay as they were. */
.pdl-status { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border-soft); }
.pdl-status p { margin: 0; max-width: none; }
.pdl-form { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 28px; align-items: start; margin-top: 0; }
.pdl-fields .form-row { display: block; padding: 0; border: 0; margin: 0 0 14px; }
.pdl-fields .form-row label { display: block; margin-bottom: 6px; }
.pdl-fields .form-row input, .pdl-fields .form-row textarea { width: 100%; }
.pdl-group { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.pdl-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pdl-preview { position: sticky; top: 84px; }
.pdl-preview-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.pdl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-soft); border-radius: 16px; padding: 22px 22px 18px; box-shadow: var(--shadow-sm); }
.pdl-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pdl-mark { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.pdl-id { min-width: 0; }
.pdl-id h4 { margin: 0; font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.pdl-id p { margin: 2px 0 0; font-size: 13px; color: var(--text-faint); }
.pdl-tagline { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-soft); overflow-wrap: anywhere; }
.pdl-card .is-empty { color: var(--text-faint); font-style: italic; }
.pdl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; padding: 0; }
.pdl-tags li { font-size: 12px; font-weight: 500; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px; }
.pdl-card-foot { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pdl-link { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.pdl-link.is-plain { color: var(--text-faint); font-weight: 500; }
.pdl-preview-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.pdl-actions { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.pdl-actions .pb-hint { margin-top: 8px; }
.pdl-help { margin-top: 18px; }
@media (max-width: 900px) { .pdl-form { grid-template-columns: minmax(0, 1fr); } .pdl-preview { position: static; order: -1; } }
.pdl-panel .panel-header > .badge { flex: none; white-space: nowrap; }
.pdl-fields .form-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

/* Support page (redesign 2026-10-19): three equal contact cards (chat opens the widget,
   email, live status), tiles in the panel headers, stacked ticket form. Prefixed sup-*;
   the old support-* rules stay for anything else that uses them. */
.sup-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.sup-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md, 16px); box-shadow: var(--shadow-sm); text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sup-card:hover { border-color: var(--border); box-shadow: var(--shadow-md, 0 6px 18px rgba(23,24,26,.08)); transform: translateY(-1px); }
.sup-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sup-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sup-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.sup-card-title .badge { font-size: 11px; }
.sup-card-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.sup-card-go { flex: none; color: var(--text-faint); display: inline-flex; transition: color .15s ease, transform .15s ease; }
.sup-card:hover .sup-card-go { color: var(--accent); transform: translateX(2px); }
.sup-form .form-row { display: block; padding: 14px 24px; }
.sup-form .form-row > label { display: block; margin-bottom: 6px; }
.sup-form .form-row input, .sup-form .form-row select, .sup-form .form-row textarea { width: 100%; }
.sup-form textarea { min-height: 140px; }
.sup-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
.sup-row2 .form-row { border-bottom: 0; }
.sup-row2 .form-row + .form-row { padding-left: 0; }
@media (max-width: 1100px) { .sup-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sup-row2 { grid-template-columns: minmax(0, 1fr); } .sup-row2 .form-row + .form-row { padding-left: 24px; } }

/* Overview quota card (2026-10-19): used count big, limit small on the same baseline, a
   thin bar in the threshold colour, and the cycle dates as a quiet sub-label. */
#overview-quota-card .label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oq-dates { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
#overview-quota-card .value, #overview-domains-card .value, #billing-quota-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.oq-used { font-variant-numeric: tabular-nums; }
.oq-limit { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oq-bar { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--bg-soft, #f1f1ee); overflow: hidden; }
.oq-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width .4s ease; }
.oq-bar.is-warn > span { background: var(--warning, #ff8a00); }
.oq-bar.is-down > span { background: var(--danger); }
.oq-bar.is-accent > span { background: var(--accent); }   /* domains card: a full plan is normal */
#overview-quota-card .delta { margin-top: 8px; }

/* Domain page alert cards (redesign 2026-10-19): replace the flat banner strips. White
   card, severity edge + icon tile, type label, severity pill, age, message in body ink,
   link to the alert itself. Prefixed dab-*; .banner-* stays for the pages that use it. */
.dab-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.dab { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 14px 14px; background: #fff; border: 1px solid var(--border-soft); border-left: 3px solid var(--warning, #ff8a00); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.dab.is-critical { border-left-color: var(--danger); }
.dab-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,138,0,0.12); color: var(--warning-text); }
.dab.is-critical .dab-ic { background: var(--danger-soft); color: var(--danger); }
.dab-body { flex: 1; min-width: 0; }
.dab-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.dab-head strong { font-size: 14px; font-weight: 650; color: var(--text); }
.dab-sev { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 1px 8px; border-radius: 999px; color: var(--warning-text); background: rgba(255,138,0,0.12); }
.dab.is-critical .dab-sev { color: var(--danger); background: var(--danger-soft); }
.dab-when { font-size: 12px; color: var(--text-faint); }
.dab-msg { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); overflow-wrap: anywhere; }
.dab-action { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.dab-action:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .dab { flex-wrap: wrap; } .dab-action { margin-left: 48px; } }
/* 2026-10-19: the same card for account notices (billing, payment, trial,
   pause banners), standalone rather than in a .dab-list, plus a neutral
   "info" tone and a button version of the pill action. */
.dab.dab-solo { margin-bottom: 16px; }
.dab.is-info { border-left-color: var(--accent); }
.dab.is-info .dab-ic, .dab.is-info .dab-sev { background: var(--accent-soft, rgba(37,99,235,0.1)); color: var(--accent); }
button.dab-action { font-family: inherit; cursor: pointer; }
.dab-msg strong { color: var(--text); font-weight: 600; }

/* Alert timeline (redesign 2026-10-19): per-day groups, time column, dot coloured by tone
   (bad = new findings, good = cleared, mixed, person, quiet = routine), count after each
   audit, chips capped at three. Prefixed atl-*; the tl-chip styles are reused as they are. */
.atl-day + .atl-day, .atl-older { margin-top: 18px; }
.atl-date { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.atl-list { list-style: none; margin: 0; padding: 0; }
.atl-row { position: relative; display: grid; grid-template-columns: 46px 14px minmax(0, 1fr); column-gap: 10px; padding: 0 0 14px; }
.atl-row:last-child { padding-bottom: 0; }
.atl-row::before { content: ''; position: absolute; left: 62px; top: 16px; bottom: -2px; width: 2px; background: var(--border-soft); }
.atl-row:last-child::before { display: none; }
.atl-time { padding-top: 1px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-faint); text-align: right; }
.atl-dot { position: relative; z-index: 1; width: 10px; height: 10px; margin: 4px 0 0 2px; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 3px #fff; }
.tone-bad .atl-dot { background: var(--warning, #ff8a00); }
.tl-opened.tone-bad .atl-dot, .tone-bad.tl-changed.is-critical .atl-dot { background: var(--danger); }
.tone-good .atl-dot { background: var(--success); }
.tone-mixed .atl-dot { background: var(--accent); }
.tone-person .atl-dot { background: #fff; border: 2px solid var(--accent); width: 10px; height: 10px; box-sizing: border-box; }
.atl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.atl-head strong { font-size: 13.5px; font-weight: 650; color: var(--text); }
.tone-quiet .atl-head strong { font-weight: 500; color: var(--text-soft); }
.atl-by { font-size: 12px; color: var(--text-soft); }
.atl-mail { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-faint); }
.atl-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-faint); white-space: nowrap; }
.atl .tl-chips { margin-top: 6px; }
.atl-moreChips { display: contents; }
.atl-moreChips > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); padding: 3px 4px; }
.atl-moreChips > summary::-webkit-details-marker { display: none; }
.atl-moreChips[open] > summary { display: none; }
.atl-moreChips > .tl-chips { display: contents; }
/* "Show earlier activity" as a full-width expand row (2026-10-19): history icon, label,
   count, chevron that turns when open; the label flips to "Hide". */
.atl-older > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm, 10px); background: var(--bg-soft, #f6f6f3); font-size: 13px; font-weight: 600; color: var(--text); transition: border-color .15s ease, background .15s ease; }
.atl-older > summary::-webkit-details-marker { display: none; }
.atl-older > summary:hover { border-color: var(--accent); background: #fff; }
.atl-older > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atl-older-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.atl-older-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.atl-older-chev { flex: none; display: inline-flex; color: var(--text-faint); transition: transform .2s ease, color .15s ease; }
.atl-older > summary:hover .atl-older-chev { color: var(--accent); }
.atl-older[open] > .atl-older-chev, .atl-older[open] > summary .atl-older-chev { transform: rotate(180deg); }
.atl-older-hide, .atl-older[open] .atl-older-show { display: none; }
.atl-older[open] .atl-older-hide { display: inline; }
.atl-older[open] > summary { margin-bottom: 16px; }
@media (max-width: 560px) { .atl-row { grid-template-columns: 40px 14px minmax(0, 1fr); } .atl-row::before { left: 56px; } .atl-count { margin-left: 0; } }

/* Alerts page (redesign 2026-10-19): filter chips with counts, alerts grouped per domain,
   card rows in the domain page's alert language, an all-clear empty state. alp-*. */
.alp-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); }
.alp-filter { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-soft); cursor: pointer; }
.alp-filter:hover { border-color: var(--border); color: var(--text); }
.alp-filter.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.alp-n { min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-align: center; background: var(--bg-soft, #f1f1ee); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.alp-filter.is-on .alp-n { background: rgba(255,255,255,.18); color: #fff; }
.alp-group { padding: 16px 24px 4px; }
.alp-group + .alp-group { border-top: 1px solid var(--border-soft); }
.alp-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.alp-group-host { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.alp-group-n { margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-align: center; background: var(--bg-soft, #f1f1ee); color: var(--text-soft); }
.alp-rows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.alp-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 12px; background: #fff; border: 1px solid var(--border-soft); border-left: 3px solid var(--warning, #ff8a00); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.alp-row:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.alp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alp-row.is-critical { border-left-color: var(--danger); }
.alp-row.is-resolved { border-left-color: var(--success); background: var(--bg-soft-2, #fbfbf9); }
.alp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,138,0,0.12); color: var(--warning-text); }
.alp-row.is-critical .alp-ic { background: var(--danger-soft); color: var(--danger); }
.alp-row.is-resolved .alp-ic { background: rgba(30,142,62,0.10); color: var(--success); }
.alp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.alp-head strong { font-size: 14px; font-weight: 650; color: var(--text); }
.alp-sev { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--warning-text); background: rgba(255,138,0,0.12); }
.alp-row.is-critical .alp-sev { color: var(--danger); background: var(--danger-soft); }
.alp-row.is-resolved .alp-sev { color: var(--success); background: rgba(30,142,62,0.10); }
.alp-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--text-soft); background: var(--bg-soft, #f1f1ee); }
.alp-when { margin-left: auto; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.alp-msg { font-size: 13px; line-height: 1.5; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.alp-row.is-resolved .alp-head strong, .alp-row.is-resolved .alp-msg { color: var(--text-faint); }
.alp-go { flex: none; align-self: center; color: var(--text-faint); }
.alp-row:hover .alp-go { color: var(--accent); }
.alp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center; }
.alp-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(30,142,62,0.10); color: var(--success); }
.alp-empty strong { font-size: 15px; }
.alp-empty p { margin: 0; font-size: 13px; color: var(--text-faint); }
@media (max-width: 640px) { .alp-group, .alp-filters { padding-left: 16px; padding-right: 16px; } .alp-when { margin-left: 0; } }

/* Alert detail page (redesign 2026-10-19): header tile + status, facts as blocks, lead and
   actions together at the top, findings in their own panel capped at six. adp-*. */
/* blue icon on a white tile, like the other card icons (owner, 2026-10-19); the inner
   finding-icons tile (.mb-flogo, injected by js/finding-icons.js) is flattened into it */
.adp-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); color: var(--accent); }
.adp-tile .mb-flogo, .adp-tile .mb-flogo-topic { width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.adp-tile svg, .adp-tile .mb-flogo svg, .adp-tile .mb-flogo img { width: 22px; height: 22px; }
.adp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.adp-fact { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: var(--radius-sm, 10px); background: var(--bg-soft, #f6f6f3); border: 1px solid var(--border-soft); min-width: 0; }
.adp-fact-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.adp-fact-value { font-size: 14px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.adp-fact-value a { color: var(--text); }
.adp-fact-value a:hover { color: var(--accent); }
.adp-fact-sub { font-size: 12px; color: var(--text-faint); }
.adp-sev { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: var(--warning-text); background: rgba(255,138,0,0.12); }
.adp-sev-critical { color: var(--danger); background: var(--danger-soft); }
.adp-sev-info { color: var(--accent); background: var(--accent-wash, rgba(0,113,227,.08)); }
.adp-summary .alert-message { font-size: 15px; margin: 0 0 14px; }
.adp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.adp-count { display: inline-block; vertical-align: 2px; margin-left: 6px; min-width: 22px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; background: var(--bg-soft, #f1f1ee); color: var(--text-soft); }
.adp-findings-panel .alert-findings { border-top: 0; }
.alert-findings.is-capped .alert-finding.is-extra { display: none; }
.adp-showall { margin-top: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.adp-showall:hover { border-color: var(--accent); color: var(--accent); }
.adp-summary .kv + .adp-actions { margin-top: 16px; }
.adp-summary .kv { margin-bottom: 0; }

/* Alert page finding rows (redesign 2026-10-19): bordered rows with the finding's icon in
   a white tile (blue for topic icons, brand colours for logos), title + New pill, message,
   a where/entity tag line and a "How to fix" button. New ones get the orange edge. afx-*. */
.adp-findings-panel .alert-findings { display: flex; flex-direction: column; gap: 10px; border: 0; }
.alert-finding.afx-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-soft); border-left: 3px solid var(--border-soft); border-radius: var(--radius-sm, 10px); background: #fff; }
.alert-finding.afx-row.is-new { border-left-color: var(--warning, #ff8a00); background: linear-gradient(90deg, rgba(255,138,0,0.05), #fff 40%); }
.afx-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.afx-ic .mb-flogo, .afx-ic .mb-flogo-topic { width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.afx-ic svg, .afx-ic .mb-flogo svg, .afx-ic .mb-flogo img { width: 18px; height: 18px; }
.afx-body { flex: 1; min-width: 0; }
.afx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.afx-head strong { font-size: 14px; font-weight: 650; color: var(--text); }
.afx-new { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--warning-text); background: rgba(255,138,0,0.12); }
.afx-new.is-error { color: var(--danger); background: var(--danger-soft); }
.afx-msg { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); max-width: 78ch; }
.afx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.afx-where, .afx-entity { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft, #f1f1ee); color: var(--text-soft); }
.afx-entity { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; overflow-wrap: anywhere; }
.afx-fix { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.afx-fix:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .alert-finding.afx-row { flex-wrap: wrap; } .afx-fix { margin-left: 50px; } }

/* Bell dropdown (redesign 2026-10-19): header with open/critical counts and View all,
   rows with the alert icon (blue on white), type + severity dot + age, domain with a
   "New" marker until acknowledged, message on two lines; all-clear empty state. abd-*. */
.alert-bell-dropdown { width: 380px; border-radius: var(--radius-md, 16px); background: #fff; }
.alert-bell-dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.alert-bell-dropdown-header strong { font-size: 14px; }
.abd-sum { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-faint); }
.abd-all { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.abd-all:hover { text-decoration: underline; }
.alert-bell-dropdown-list { max-height: 380px; padding: 6px; }
.abd-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.abd-item + .abd-item { margin-top: 2px; }
.abd-item:hover, .abd-item:focus-visible { background: var(--bg-soft, #f6f6f3); outline: none; }
.abd-item.is-new { background: rgba(0,113,227,0.04); }
.abd-item.is-new:hover { background: rgba(0,113,227,0.08); }
.abd-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.abd-ic .mb-flogo, .abd-ic .mb-flogo-topic { width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; }
.abd-ic svg, .abd-ic .mb-flogo svg, .abd-ic .mb-flogo img { width: 17px; height: 17px; }
.abd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.abd-head { display: flex; align-items: center; gap: 7px; }
.abd-head strong { font-size: 13px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abd-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warning, #ff8a00); }
.abd-item.sev-critical .abd-dot { background: var(--danger); }
.abd-when { margin-left: auto; flex: none; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.abd-where { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.abd-new { font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; color: var(--accent); background: rgba(0,113,227,0.10); }
.abd-msg { font-size: 12px; line-height: 1.45; color: var(--text-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.abd-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--text-faint); }
.abd-empty strong { font-size: 13.5px; color: var(--text); }
.abd-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; background: rgba(30,142,62,0.10); color: var(--success); }
.alert-bell-dropdown-footer { padding: 0; border-top: 1px solid var(--border-soft); }
.alert-bell-dropdown-footer a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; font-size: 12.5px; font-weight: 600; }

/* Setup guide badge in the same outlined style as the alert bell's seen badge
   (owner, 2026-10-19): white, a 1.5px border and the number in the accent blue. */
.setup-guide-badge { box-sizing: border-box; background: #fff; border: 1.5px solid var(--accent); color: var(--accent); line-height: 13px; box-shadow: 0 0 0 2px #fff; }

/* Danger zone rows (profile, 2026-10-19): what the action does on the left, its
   button on the right, a hairline between actions. Prefixed dz-. */
.dz-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dz-row + .dz-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.dz-text { min-width: 0; }
.dz-text strong { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
.dz-text p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-faint); max-width: 560px; }
.dz-row > .btn { flex: none; }
@media (max-width: 640px) { .dz-row { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* Partner clients + kickback pages (2026-10-19): status chips beside the clients
   title, usage bars under "used / limit", an empty state with the invite button,
   icons on the kickback stat cards. Prefixes pcl-, kbs-. */
.pcl-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* Table search in a panel header (js/table-search.js, 2026-10-19). */
.panel-header.has-tsearch { gap: 16px; }
.panel-header.has-tsearch > :first-child { flex: 1; min-width: 0; }
.tsearch { flex: none; position: relative; display: inline-flex; align-items: center; width: 230px; max-width: 100%; margin: 0; }
.tsearch-ic { position: absolute; left: 11px; display: inline-flex; color: var(--text-faint); pointer-events: none; }
.tsearch input[type="search"] { width: 100%; height: 34px; padding: 0 12px 0 33px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--bg-soft, #f9f9f7); font: inherit; font-size: 13px; color: var(--text); outline: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.tsearch input[type="search"]::placeholder { color: var(--text-faint); }
.tsearch input[type="search"]:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }
@media (max-width: 640px) { .panel-header.has-tsearch { flex-wrap: wrap; } .tsearch { order: 9; width: 100%; } }
.pcl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft, #f6f6f3); border: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.pcl-chip strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.pcl-chip.is-active { background: rgba(30,142,62,0.08); border-color: rgba(30,142,62,0.18); }
.pcl-chip.is-waiting { background: rgba(255,138,0,0.10); border-color: rgba(255,138,0,0.22); }
.pcl-use { display: flex; flex-direction: column; gap: 5px; min-width: 96px; }
.pcl-use-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcl-bar { display: block; height: 4px; border-radius: 2px; background: var(--border-soft); overflow: hidden; max-width: 120px; }
.pcl-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pcl-bar.is-high > span { background: var(--warning, #ff8a00); }
.pcl-bar.is-full > span { background: var(--danger); }
td.pcl-empty-cell { padding: 0; }
.pcl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.pcl-empty .set-ph-ic { margin-bottom: 6px; }
.pcl-empty strong { font-size: 15px; color: var(--text); }
.pcl-empty .btn { margin-top: 8px; }
.kbs-label { display: flex; align-items: center; gap: 8px; }
.kbs-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.kbs-ic svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .pcl-summary { justify-content: flex-start; } }

/* Danger zones (2026-10-19): one look on every page (account settings, profile,
   billing, domain settings, partner client access): red title, red icon tile and
   a red-to-orange gradient border. The white padding-box layer over a
   border-box gradient draws the border; background-origin: border-box keeps the
   gradient from repeating into the ring at the rounded corners. */
.panel.danger-zone {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(120deg, #d93025 0%, #f0533a 35%, #ff8a00 70%, #e8336d 100%) border-box;
  background-origin: border-box;
  box-shadow: 0 12px 30px -16px rgba(217, 48, 37, 0.35);
}
.panel.danger-zone .panel-header h2 { color: var(--danger); }

/* Measurement setup: API token reminder (2026-10-19), under the destination cards
   when a destination has its pixel id but not its Conversions API token. */
#measurement-setup-panel .ms-token-warn { display: flex; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid rgba(255,138,0,0.35); border-radius: var(--radius-sm, 10px); background: #fffaf0; }
#measurement-setup-panel .ms-token-warn-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid rgba(255,138,0,0.35); color: #b45309; }
#measurement-setup-panel .ms-token-warn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#measurement-setup-panel .ms-token-warn-body > strong { font-size: 14px; color: var(--text); }
#measurement-setup-panel .ms-token-warn-body > span { font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
#measurement-setup-panel .ms-token-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
#measurement-setup-panel .ms-token-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--border-soft); }
#measurement-setup-panel .ms-token-list li > span { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
#measurement-setup-panel .ms-token-list .tw-card-ic { width: 28px; height: 28px; margin: 0; }
#measurement-setup-panel .ms-token-list .tw-card-ic svg { width: 16px; height: 16px; }
#measurement-setup-panel .ms-token-list strong { font-size: 13px; }
#measurement-setup-panel .ms-token-what { font-size: 12px; color: var(--text-faint); }

/* Billing (2026-10-19): the automatic upgrades setting as its own small card with
   an icon, the quota figure in the overview card's big-count/small-limit/bar style. */
.form-row.bil-auto { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md, 16px); padding: 16px 20px; background: #fff; }
.bil-auto-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.bil-auto-ic svg { width: 18px; height: 18px; }
.bil-auto-text { flex: 1; min-width: 0; }
.bil-auto-text label { font-weight: 650; }

/* Activity log (redesign 2026-10-19): day rows, category icon per action, who as a
   chip, time in its own narrow column; a private-log state for agencies. act-*. */
.act-table .act-day td { padding: 14px 24px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-soft, #f9f9f7); border-bottom: 1px solid var(--border-soft); }
.act-table .act-row td { vertical-align: middle; }
.act-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.act-ic svg { width: 15px; height: 15px; }
.act-desc { min-width: 0; overflow-wrap: anywhere; }
.act-actor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.act-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-wash, #eef5fe); color: var(--accent); font-size: 10.5px; font-weight: 700; }
.act-av.is-mb { background: linear-gradient(135deg, #0071e3, #ff8a00); color: #fff; border-radius: 7px; }
.act-av.is-auto { background: var(--bg-soft, #f1f1ee); color: var(--text-soft); }
.act-av.is-auto svg { width: 12px; height: 12px; }
.act-th-time, .act-time { width: 90px; text-align: right; white-space: nowrap; }
.act-time { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 13px; }
td.act-empty-cell { padding: 0; }
.act-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.act-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); margin-bottom: 6px; }
.act-empty-ic svg { width: 18px; height: 18px; }
.act-empty strong { font-size: 14.5px; color: var(--text); }
@media (max-width: 640px) { .act-actor > span:last-child { display: none; } .act-th-time, .act-time { width: 60px; } }

/* Domains list (redesign 2026-10-19): globe tile, requests bold with the
   limit faint. dl-*. */
.dl-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.dl-req { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-req strong { font-weight: 650; color: var(--text); }
.dl-req span { font-size: 12px; color: var(--text-faint); }
/* Totals row (2026-10-21): the account's quota, once, under the domains. */
.dl-total-label { font-weight: 650; color: var(--text); margin-right: 8px; }
.dl-total-sub { font-size: 12px; color: var(--text-faint); }
.dl-quota { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dl-qbar { position: relative; display: block; width: 120px; height: 4px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.dl-qbar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.dl-quota.warn .dl-qbar i { background: #ff8a00; }
.dl-quota.bad .dl-qbar i { background: var(--danger); }
.dl-qpct { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.dl-quota.bad .dl-qpct { color: var(--danger); }
/* Phones */
@media (max-width: 640px) {
  .dl-quota { flex-wrap: wrap; row-gap: 4px; }
  .dl-qbar { width: 88px; }
}
.dl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.dl-empty .set-ph-ic { margin-bottom: 6px; }
.dl-empty strong { font-size: 15px; color: var(--text); }
.dl-empty-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Domains page as cards (owner 2026-10-25, desktop and phones; was a table
   in a panel): a bar with the account's usage, then the cards straight on the
   page. The name link stretches over the card; shortcuts sit above it. dc-*. */
.dc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dc-stats { display: none; }
.dc-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.dc-sort { width: auto; height: 32px; padding: 0 30px 0 10px; font-size: 13px; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dc-grid > .dl-empty { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.dc-grid > .dl-empty, .dc-loading { grid-column: 1 / -1; }
.dc-loading { padding: 28px 0; text-align: center; font-size: 13px; color: var(--text-faint); }
.dc-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.dc-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.dc-card:has(.dc-name:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.dc-name:hover { text-decoration: none; }
.dc-name:focus-visible { outline: none; }
.dc-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.dc-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; }
.dc-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-faint); }
.dc-sub { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: var(--bg-soft, #f6f6f3); font-size: 12px; color: var(--text-soft); }
.dc-onb { position: relative; z-index: 1; }
.dc-onb .onb-row-link { margin-left: 0; }
.dc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.dc-req { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-req span { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.dc-req strong { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dc-bottom .actions-row { position: relative; z-index: 1; gap: 4px; }
.dc-card .dl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 3px rgba(23, 24, 26, .07); }
.dc-card .dl-dot.active { background: var(--success); box-shadow: 0 0 0 3px rgba(30, 142, 62, .16); }
.dc-card .dl-dot.pending { background: #ff8a00; box-shadow: 0 0 0 3px rgba(255, 138, 0, .18); }
.dc-card .dl-dot.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(217, 48, 37, .16); }
.dc-total { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-width: 0; font-size: 13px; }
.dc-total-count { font-weight: 650; color: var(--text); }
.dc-total-use { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.dc-total-use .dl-quota { margin-top: 0; }
@media (max-width: 640px) {
  .dc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dc-card { padding: 14px; }
  .dc-bar { margin-bottom: 12px; }
  /* The totals and the analytics link move into the two cards, and there is
     no sort on a phone (owner 2026-10-25), so the bar goes once they show. */
  .dc-stats:not([hidden]) { display: grid; margin-bottom: 12px; }
  .dc-sort { display: none; }
  .dc-stats:not([hidden]) ~ .dc-bar { display: none; }
  .dc-stats .oq-bar { margin-top: 10px; }
  /* Domain analytics as a small icon button in the requests card's corner. */
  .dc-stats .stat-jump { gap: 0; padding: 5px; }
  .dc-stats .stat-card.has-jump .label { padding-right: 34px; }
}

/* Bot traffic chart (redesign 2026-10-19): summary figures above the stacked bars, a
   ranked legend with share bars, an empty state. bt-*. */
.bt-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.bt-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-soft, #f9f9f7); }
.bt-kpi span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.bt-kpi strong { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-kpi em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.bt-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--bt-rows, 5), auto); grid-auto-flow: column; gap: 4px 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.bt-row { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) 70px auto 38px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.bt-dot { width: 10px; height: 10px; border-radius: 3px; }
.bt-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-bar { height: 5px; border-radius: 3px; background: var(--bg-soft, #f1f1ee); overflow: hidden; }
.bt-bar > span { display: block; height: 100%; border-radius: inherit; opacity: .85; }
.bt-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.bt-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12px; }
.bt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.bt-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); margin-bottom: 6px; }
.bt-empty-ic svg { width: 18px; height: 18px; }
.bt-empty strong { font-size: 14.5px; color: var(--text); }
@media (max-width: 760px) { .bt-legend { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } .bt-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bt-kpi:last-child { grid-column: 1 / -1; } }

/* Bot chart highlight (2026-10-19): one bot lit, the rest dimmed. */
.bt-row { cursor: pointer; border-radius: 6px; padding-left: 4px; padding-right: 4px; transition: background .15s ease, opacity .15s ease; }
.bt-row:hover, .bt-row.is-on { background: var(--bg-soft, #f6f6f3); }
.bt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bt-row.is-on .bt-name { font-weight: 650; }
.bt-wrap .bar-segment { transition: opacity .15s ease; }
.bt-wrap.bt-focus .bar-segment { opacity: .15; }
.bt-wrap.bt-focus .bar-segment.is-on { opacity: 1; }
.bt-wrap.bt-focus .bt-row:not(.is-on) { opacity: .55; }

/* Request log (redesign 2026-10-19): live window figures, toned response times,
   quieter IPs, an empty state. lg-*, lv-*. */
.lv-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lv-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft, #f6f6f3); border: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.lv-chip strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.lg-ms { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-ms.is-fast { background: rgba(30,142,62,0.10); color: var(--success); }
.lg-ms.is-ok { background: var(--bg-soft, #f6f6f3); color: var(--text-soft); }
.lg-ms.is-slow { background: rgba(255,138,0,0.12); color: var(--warning-text, #a35c00); }
td.lg-ip { color: var(--text-faint); font-size: 12.5px; }
#logs-table.lg-no-region > thead > tr > th:nth-child(5), #logs-table.lg-no-region > tbody > tr:not([data-log-detail]) > td:nth-child(5) { display: none; }
td.lg-empty-cell { padding: 0; }
.lg-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.lg-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); margin-bottom: 6px; }
.lg-empty-ic svg { width: 18px; height: 18px; }
.lg-empty strong { font-size: 14.5px; color: var(--text); }
@media (max-width: 640px) { .lv-chips { justify-content: flex-start; } }

/* Requests by hostname (2026-10-19): other sites folded into one row that opens. */
tr.hn-other { cursor: pointer; }
tr.hn-other:hover td { background: var(--bg-soft, #f6f6f3); }
tr.hn-other:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hn-other-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.hn-caret { width: 7px; height: 7px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
tr.hn-other[aria-expanded="true"] .hn-caret { transform: rotate(45deg); }
.hn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-soft, #f1f1ee); font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.hn-other-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--text-faint); font-weight: 400; }
tr.hn-sub td { background: var(--bg-soft, #fafaf8); font-size: 13px; color: var(--text-soft); }
tr.hn-sub td:first-child { padding-left: 42px; }
.hn-kind { margin-left: 10px; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--border-soft); font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Bot chart: exact proportions (owner, 2026-10-19). The shared stacked bars keep a
   2px gap between segments and a 3px minimum per segment; with ten bots and one
   outlier day that added ~20px per bar, so bars stood taller than their total and
   tiny bots looked big. Here segments are exactly their share: no gap, no minimum,
   a 1px white inset line (no layout) separates them, and the stack itself clips to
   the rounded top. */
.bt-wrap .bar-stack, .cm-wrap .bar-stack { gap: 0; overflow: hidden; border-radius: 5px 5px 2px 2px; }
.bt-wrap .bar-segment, .cm-wrap .bar-segment { flex: none; min-height: 0; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.bt-wrap .bar-segment:last-child, .cm-wrap .bar-segment:last-child { box-shadow: none; }

/* Bot chart: hide / show a bot (2026-10-19). */
/* The view-only and hide buttons float over the end of the row on hover (or keyboard
   focus), so the names keep the full width. */
.bt-acts { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 8px; background: linear-gradient(90deg, transparent, var(--bg-soft, #f6f6f3) 10px); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.bt-row:hover .bt-acts, .bt-acts:focus-within, .bt-acts.is-on { opacity: 1; pointer-events: auto; }
.bt-acts.is-on { background: none; }
.bt-eye { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-faint); cursor: pointer; transition: background .15s ease, color .15s ease; }
.bt-eye { position: relative; }
/* Three different looks (owner, 2026-10-20): View only = blue crosshair,
   Hide = crossed-out eye in plain ink, Show again = green eye. */
.bt-eye[data-bt-only]:hover, .bt-eye[data-bt-only].is-active { background: var(--accent-wash); color: var(--accent); }
.bt-eye[data-bt-hide]:hover { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.bt-eye[data-bt-show] { color: var(--text-soft); }
.bt-eye[data-bt-show]:hover { background: var(--success-soft); color: var(--success); }
.bt-acts:has(.is-active) { opacity: 1; pointer-events: auto; }
/* Instant label: the native title tooltip waits about a second. */
.bt-eye[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; padding: 4px 8px; border-radius: 6px; background: #17181a; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity .08s ease, transform .08s ease; }
.bt-eye[data-tip]:hover::after, .bt-eye[data-tip]:focus-visible::after { opacity: 1; transform: none; }
.bt-row.is-hidden .bt-eye[data-tip]::after { opacity: 0; }
.bt-row.is-hidden .bt-eye[data-tip]:hover::after { opacity: 1; }
.bt-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .bt-acts { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; padding: 0; } .bt-row { grid-template-columns: 10px minmax(0, 1fr) 50px auto 36px auto; } }
.bt-row.is-hidden { cursor: default; opacity: .55; padding-right: 32px; }
.bt-row.is-hidden .bt-name { text-decoration: line-through; }
.bt-row.is-hidden .bt-pct { font-size: 11px; }
.bt-hidden-note { margin-top: 16px; font-size: 12.5px; color: var(--text-faint); }
.bt-showall { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.bt-showall:hover { text-decoration: underline; }
.bt-hidden-note + .bt-legend { margin-top: 10px; }

/* Browser & device (2026-10-19): donut with the total inside + one ranked list. bd-*. */
.bd-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: start; }
.bd-donut { position: relative; width: 150px; height: 150px; margin: 4px auto 0; }
.bd-donut svg { display: block; }
.bd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.bd-center strong { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bd-center span { font-size: 11px; color: var(--text-faint); }
.bd-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 90px 64px 40px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft); }
.bd-row:last-of-type { border-bottom: 0; }
.bd-dot { width: 10px; height: 10px; border-radius: 3px; }
.bd-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-bar { height: 5px; border-radius: 3px; background: var(--bg-soft, #f1f1ee); overflow: hidden; }
.bd-bar > span { display: block; height: 100%; border-radius: inherit; opacity: .85; }
.bd-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.bd-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12px; }
.bd-toggle { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.bd-toggle:hover { text-decoration: underline; }
.panel-note .pn-ic { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.panel-note.cm-warn { background: #fffaf0; }
.panel-note.cm-warn .pn-ic { color: #b45309; }
/* The "no consent state" callout as an alert card (2026-10-19). */
.cm-ns-wrap { border-top: 1px solid var(--border-soft); padding-bottom: 0; }
.cm-ns { box-shadow: none; }
.cm-ns-fix { margin-top: 6px; }
.cm-ns-fix strong { color: var(--text); font-weight: 650; }
@media (max-width: 760px) { .bd-wrap { grid-template-columns: minmax(0, 1fr); } .bd-row { grid-template-columns: 10px minmax(0, 1fr) 60px 56px 36px; } }

/* Consent Mode (2026-10-19): the three states as figures, exact bars, one 100% bar per
   signal in the fold. cm-*. */
.cm-sub { margin: 0 0 14px; }
.cm-sub h3 { margin: 0; font-size: 15px; font-weight: 600; }
.cm-sub p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-faint); }
.cm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.cm-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-soft, #f9f9f7); }
.cm-kpi-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.cm-dot { width: 9px; height: 9px; border-radius: 3px; }
.cm-kpi strong { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cm-kpi em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.cm-sigs { display: flex; flex-direction: column; gap: 10px; }
.cm-sig { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 14px; font-size: 13px; }
.cm-sig-name { color: var(--text); font-weight: 500; }
.cm-sig-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--bg-soft, #f1f1ee); }
.cm-seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.cm-seg + .cm-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.cm-sig-total { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12px; }
.cm-sig-empty { grid-column: 2 / -1; font-size: 12.5px; color: var(--text-faint); }
@media (max-width: 760px) { .cm-kpis { grid-template-columns: minmax(0, 1fr); } .cm-sig { grid-template-columns: minmax(0, 1fr) 60px; } .cm-sig-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Tagging health (redesign 2026-10-19): status line, light figure tiles, table with
   share bars, failed pills and toned response times (the request log's lg-ms). th-*. */
.th-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; font-size: 13px; color: var(--text-soft); }
.th-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 650; }
.th-status.is-good .th-pill { background: rgba(30,142,62,0.10); color: var(--success); }
.th-status.is-warn .th-pill { background: rgba(255,138,0,0.12); color: var(--warning-text, #a35c00); }
.th-status.is-bad .th-pill { background: var(--danger-soft, rgba(217,48,37,.1)); color: var(--danger); }
.th-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.th-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm, 10px); background: var(--bg-soft, #f9f9f7); }
.th-kpi span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.th-kpi strong { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-kpi em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.th-kpi.is-warn strong { color: var(--warning-text, #a35c00); }
.th-kpi.is-bad strong { color: var(--danger); }
.th-kpi.is-good strong { color: var(--success); }
.th-kpi.is-click { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.th-kpi.is-click:hover { border-color: var(--accent); background: #fff; }
.th-kpi.is-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-table td { vertical-align: middle; }
.rt-table td:first-child { width: 60%; }
.rt-table .th-share { width: 220px; }
/* Extra domain statistics (2026-10-19, ex-*). */
.ex-url { word-break: break-all; }
.stats-grid.stats-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-grid.stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-grid.stats-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats-grid.stats-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .stats-grid.stats-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .stats-grid.stats-grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats-grid.stats-grid-5 { grid-template-columns: 1fr; } }
.ex-subhead { border-top: 1px solid var(--border-soft); padding-bottom: 0; }
.ex-chips { justify-content: flex-start; margin-bottom: 16px; }
.ex-pii { cursor: default; }
/* Shop funnel in DataFast's style (2026-10-20): a flowing band per step,
   pale to deep blue, frosted drop-off pills on the dividers, counts along the
   bottom. The SVG is stretched to the card (preserveAspectRatio none). */
.exf { position: relative; height: 320px; margin: 6px 0 4px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
/* In its own card the funnel fills the card body edge to edge. */
.exf-body .exf { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--border-soft); }
.exf-svg { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: 222px; }
.exf-cols { position: absolute; inset: 0; display: grid; }
.exf-col { position: relative; min-width: 0; border-right: 1px solid rgba(0, 0, 0, .05); }
.exf-col:last-child { border-right: 0; }
.exf-drop { position: absolute; right: 0; top: 145px; z-index: 2; transform: translate(50%, -50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .62); outline: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 500; color: #595451; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exf-label { position: absolute; left: 14px; right: 10px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exf-label strong { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.exf-label span { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exf-rate { position: absolute; top: 12px; right: 14px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.exf-rate strong { font-size: 14px; font-weight: 600; color: var(--text); }
.exf-rate span { font-size: 12px; color: var(--text-soft); }
@media (max-width: 600px) {
  .exf { height: 280px; }
  .exf-svg { height: 180px; }
  .exf-drop { top: 124px; font-size: 11px; padding: 1px 5px; }
  .exf-label { left: 8px; right: 4px; }
  .exf-label strong { font-size: 12.5px; }
  .exf-label span { font-size: 11px; }
}
.ex-days-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .ex-days-grid { grid-template-columns: 1fr; } }
/* Healthy Tagging health folds to its header (2026-10-19). */
.th-fold-head { cursor: pointer; user-select: none; }
.th-fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.th-fold-side { flex: none; display: inline-flex; align-items: center; gap: 14px; padding-right: 4px; }
.th-fold-side .th-status { margin: 0; }
.th-caret { width: 9px; height: 9px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.th-panel:not(.is-folded) .th-caret { transform: rotate(-135deg) translate(-2px, -2px); }
.th-panel.is-folded > :not(.panel-header) { display: none; }
.th-panel.is-folded > .panel-header { border-bottom: 0; }
@media (max-width: 640px) { .th-fold-side .th-status { display: none; } }
.th-type { display: block; color: var(--text); }
.th-share { display: block; width: 120px; max-width: 100%; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--bg-soft, #f1f1ee); overflow: hidden; }
.th-share > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: .7; }
.th-num { font-variant-numeric: tabular-nums; }
.th-muted { color: var(--text-faint); }
.th-fail { display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 9px; border-radius: 999px; background: var(--danger-soft, rgba(217,48,37,.1)); color: var(--danger); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.th-fail em { font-style: normal; font-weight: 500; opacity: .8; }
.th-fail:hover { background: rgba(217,48,37,.18); }
.th-fail:focus-visible { outline: 2px solid var(--danger); outline-offset: 1px; }
@media (max-width: 900px) { .th-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Waiting lines (2026-10-19): calm text under a wait past two seconds,
   filled and rotated by js/wait-lines.js. */
.mb-wait { color: inherit; }
.mb-wait-block { display: block; margin-top: 3px; color: var(--text-soft); }
.mb-wait.is-empty { display: none; }
.mb-wait.is-swap { animation: mbWaitIn 0.45s ease both; }
@keyframes mbWaitIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mb-wait.is-swap { animation: none; } }

/* Resolved audit findings (2026-10-19): a check draws in, the row holds,
   then folds away; what comes after (the empty text, "All clear") fades
   in once it has gone. Timing lives in js/domain-tag-manager.js. */
.tm-resolved { display: grid; grid-template-rows: 1fr; animation: tmFoldAway 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.tm-resolved + .tm-resolved .tm-resolved-row, .tm-resolved ~ div:not(.tm-resolved) { border-top: 1px solid var(--border-soft); }
.tm-resolved-clip { min-height: 0; overflow: hidden; }
.tm-resolved-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.tm-resolved-ic { flex: none; color: var(--success); }
.tm-resolved-ic circle { stroke-dasharray: 57; stroke-dashoffset: 57; animation: tmDraw 0.45s ease-out 0.05s forwards; }
.tm-resolved-ic path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: tmDraw 0.3s ease-out 0.4s forwards; }
.tm-resolved-msg { flex: 1; min-width: 0; color: var(--text-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-faint) 60%, transparent); }
.tm-after-resolved { animation: tmArrive 0.45s ease-out both; }
@keyframes tmFoldAway { to { grid-template-rows: 0fr; opacity: 0; } }
@keyframes tmDraw { to { stroke-dashoffset: 0; } }
@keyframes tmArrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tm-resolved-ic circle, .tm-resolved-ic path { animation: none; stroke-dashoffset: 0; }
  .tm-after-resolved, .tm-resolved { animation-duration: 0.01s; }
}

/* Client favicons (2026-10-19): the icon lies over the slot's fallback
   (globe, initial) and takes over once loaded (js/auth.js MBFavicon). */
.mb-fav-slot { position: relative; overflow: hidden; }
.mb-fav-img { position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; object-fit: contain; opacity: 0; transition: opacity 0.2s ease; }
.mb-fav-slot.has-fav > .mb-fav-img { opacity: 1; }
.mb-fav-slot.has-fav > :not(.mb-fav-img) { visibility: hidden; }
.dl-ic.has-fav { background: #fff; }
.client-avatar.has-fav { background: #fff; border: 1px solid var(--border-soft); }
.client-avatar .mb-fav-img { width: 64%; height: 64%; }
.cl-name { display: inline-flex; align-items: center; gap: 10px; }
.cl-fav, .alp-fav {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; background: var(--bg-soft, #f4f4f2); border: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 700; color: var(--text-soft);
}
.cl-fav.has-fav, .alp-fav.has-fav { background: #fff; }
.cl-fav .mb-fav-img, .alp-fav .mb-fav-img { width: 70%; height: 70%; }
.alp-group-head .alp-fav { align-self: center; width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.acct-avatar.has-fav, .entity-avatar.has-fav { background: #fff; border: 1px solid var(--border-soft); color: transparent; }
.acct-avatar .mb-fav-img, .entity-avatar .mb-fav-img { width: 64%; height: 64%; }
.cell-name-stack { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cell-name-stack .cell-meta { font-size: 12px; }
.set-ph-ic.has-fav { background: #fff; }
.set-ph-ic .mb-fav-img { width: 58%; height: 58%; }

/* Ad-block card info: the totals behind the percentage (2026-10-19). */
.ab-tip { display: grid; gap: 4px; }
.ab-tip-row { display: flex; justify-content: space-between; gap: 18px; }
.ab-tip-row strong { font-variant-numeric: tabular-nums; }
.ab-tip-note { margin-top: 6px; opacity: 0.8; font-size: 12px; line-height: 1.45; }

/* Partner Clients: Current cycle info (2026-10-19). The popup is fixed-
   positioned by js/partner.js (the panel clips overflow). */
.pcl-cycle { display: flex; align-items: flex-start; gap: 6px; }
.pcl-cycle .pcl-use { flex: 1; }
.pcl-cycle-tip { margin-left: 0; margin-top: 2px; width: 18px; height: 18px; border-color: var(--border); }
.pcl-cycle-tip svg { width: 12px; height: 12px; }
.info-tip-popup.pcl-tip { position: fixed; top: 0; left: 0; transform: translateY(-4px); display: grid; gap: 4px; width: 280px; padding: 10px 12px; }
.info-tip:hover .info-tip-popup.pcl-tip, .info-tip:focus-visible .info-tip-popup.pcl-tip { transform: translateY(0); }
.info-tip-popup.pcl-tip::after { display: none; }
.pcl-tip-row { display: flex; justify-content: space-between; gap: 14px; }
.pcl-tip-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.pcl-tip-row.is-high strong { color: #ffb366; }
.pcl-tip-row.is-over strong, .pcl-tip-note.is-over { color: #ff8a80; }
.pcl-tip-note { margin-top: 4px; font-size: 12px; line-height: 1.4; }

/* ---- Domain tab bar + Overview / Health / Traffic (2026-10-20) ----
   One bar under the domain header on every domain page (js/domains.js
   renderDomainTabs); on domain.html it switches sections by hash. */
.domain-tabs { display: flex; align-items: stretch; gap: 2px; margin: -14px 0 24px; box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.domain-tabs::-webkit-scrollbar { display: none; }
.domain-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; font-size: 13.5px; font-weight: 500; color: var(--text-soft); white-space: nowrap; text-decoration: none; }
.domain-tab:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.domain-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.domain-tab.is-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.domain-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.domain-tab-dot.is-ok { background: var(--success); }
.domain-tab-dot.is-warn { background: var(--warning-text); }
.domain-tabs-gap { display: none; }   /* even spacing between every tab (owner, 2026-10-20) */

.dtab-off { display: none !important; }


.dtab-intro { margin: -4px 0 18px; }
.dtab-intro h2 { margin: 0; font-size: 18px; font-weight: 650; }
.dtab-intro p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }
.dtab-intro a { color: var(--accent); font-weight: 600; }

.dtab-overview { margin-bottom: 8px; }
.dtab-status { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.dtab-status-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--text-faint); }
.dtab-status.is-ok .dtab-status-dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.dtab-status.is-warn .dtab-status-dot { background: var(--warning-text); box-shadow: 0 0 0 4px var(--warning-soft); }
.dtab-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dtab-status-text strong { font-size: 14.5px; }
.dtab-status-text span { font-size: 13px; color: var(--text-soft); }
.dtab-status-link, .dtab-tile-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.dtab-status-link { margin-left: auto; }

.dtab-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dtab-tiles + .dtab-tiles { margin-top: 14px; }
.dtab-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dtab-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dtab-tiles-1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.dtab-tile { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.dtab-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; }
.dtab-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dtab-tile-label { font-size: 13px; color: var(--text-faint); }
.dtab-tile-value { margin: 6px 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dtab-tile-sub { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.dtab-tile-go { margin-top: auto; padding-top: 12px; }
/* Loading (2026-10-21): placeholder tiles on the first load, and the real
   tiles + status line shimmer while a new date range loads. */
.dtab-status.is-checking .dtab-status-dot { animation: dtab-pulse 1.4s ease-in-out infinite; }
@keyframes dtab-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.dtab-tile.is-skel { pointer-events: none; }
.dtab-tile.is-skel:hover { border-color: var(--border-soft); box-shadow: var(--shadow-sm); }
.dtab-tile.is-skel > span,
.dtab-tile.is-loading:not(.is-skel) .dtab-tile-value, .dtab-tile.is-loading:not(.is-skel) .dtab-tile-sub,
.dtab-status.is-loading:not(.is-checking) .dtab-status-text > * {
  color: transparent;
  border-radius: 6px;
  background: var(--skeleton-grad);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.dtab-tile.is-skel .dtab-tile-label { width: 45%; }
.dtab-tile.is-skel .dtab-tile-value { width: 55%; }
.dtab-tile.is-skel .dtab-tile-sub { width: 85%; margin-top: 6px; }
.dtab-tile.is-skel .dtab-tile-sub + .dtab-tile-sub { width: 60%; }
.dtab-tile.is-loading:not(.is-skel) .dtab-tile-value { width: fit-content; }
.dtab-status.is-loading:not(.is-checking) .dtab-status-text > * { width: fit-content; }
@media (max-width: 1100px) { .dtab-tile.is-skel:nth-child(n+3) { display: none; } }
@media (max-width: 600px) { .dtab-tile.is-skel:nth-child(n+2) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dtab-status.is-checking .dtab-status-dot, .dtab-tile.is-skel > span, .dtab-tile.is-loading .dtab-tile-value, .dtab-tile.is-loading .dtab-tile-sub, .dtab-status.is-loading .dtab-status-text > * { animation: none; }
}

/* No orphan tiles (owner 2026-10-23): a row of three stays three across until
   it stacks; a row of four goes two by two. Was 2+1 per row of three. */
@media (max-width: 1100px) {
  .dtab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtab-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 720px) {
  .dtab-tiles-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dtab-tiles, .dtab-tiles-3, .dtab-tiles-2 { grid-template-columns: minmax(0, 1fr); }
  .dtab-status { flex-wrap: wrap; }
  .dtab-status-link { margin-left: 24px; }
}

/* Request log view toggle: Events and errors (default) / Everything (2026-10-20). */
.lg-view-toggle { flex: none; }
.lg-empty-link { border: 0; padding: 0; background: none; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; }
.lg-empty-link:hover { text-decoration: underline; }
/* With the view toggle the log's filters no longer fit beside the title on a
   laptop: the header wraps and the filters drop under it instead of squeezing it. */
#logs-content .panel-header { flex-wrap: wrap; gap: 12px 16px; }
#logs-content .panel-header > .set-ph-main { flex: 1 1 280px; min-width: 0; }
#logs-content .panel-header-filter { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 721px) { #logs-content .panel-header-filter select { width: auto; } }

/* Request log row icons (2026-10-20): a tinted icon per request type, a guard
   badge on relayed types, an icon for "visitor had an ad blocker". Labels show
   at once on hover (to the right, the panel clips anything above it). */
.lg-type { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: #f1f1ee; color: #6b6b66; }
.lg-type.is-analytics { background: #fff1e0; color: #c25e00; }
.lg-type.is-ads { background: #e8f0fe; color: #1a5fd0; }
.lg-type.is-script { background: #f0f1f3; color: #5f6368; }
.lg-type.is-guard { background: #e6f4ea; color: #137333; }
.lg-type.is-preview { background: #f3e8fd; color: #8430ce; }
.lg-type-guard { position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #137333; color: #fff; box-shadow: 0 0 0 2px #fff; }
.lg-ab-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; border-radius: 50%; background: #fff3e0; color: #b45309; }
.lg-type[data-tip]::after, .lg-ab-ic[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; z-index: 6; padding: 4px 8px; border-radius: 6px; background: #17181a; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-2px, -50%); transition: opacity .08s ease, transform .08s ease; }
.lg-type[data-tip]:hover::after, .lg-ab-ic[data-tip]:hover::after { opacity: 1; transform: translate(0, -50%); }
.lg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#logs-table .log-tag-cell { gap: 8px; }

/* AI crawlers card (2026-10-20), after DataFast's: category tabs with counts,
   smooth provider lines, a ranked provider list with share bars. */
.aic-body { padding-top: 14px; }
.aic-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 10px; background: var(--bg-soft); }
.aic-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-soft); cursor: pointer; }
.aic-tab span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aic-tab:hover { color: var(--text); }
.aic-tab.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.aic-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; }
.aic-chart { min-width: 0; padding-left: 34px; }
.aic-plot { position: relative; height: 220px; }
.aic-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aic-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s ease; }
.aic-line.is-dim { opacity: .15; }
.aic-grid-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-soft); }
.aic-grid-line span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aic-x { position: relative; height: 22px; margin-top: 6px; }
.aic-x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.aic-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); pointer-events: none; }
.aic-list { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.aic-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; }
.aic-row-bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .1; border-radius: 8px; pointer-events: none; }
.aic-row:hover, .aic-row.is-on { background: var(--bg-soft); }
.aic-mono { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; }
.aic-name { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-count { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .aic-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Countries card (2026-10-20): a globe with a top-countries list, or a table. */
.cty-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: stretch; }
.cty-globe { position: relative; height: 380px; border-radius: var(--radius-md); background: radial-gradient(ellipse 75% 70% at 52% 50%, #1f3b78 0%, #142a5c 32%, #0c1a3d 62%, #070f26 100%); overflow: hidden; }
/* The globe from the realtime test (2026-10-20): space, drifting stars, a
   periwinkle halo sized to the globe, markers per country. */
.cty-globe > .cty-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
/* Map buttons in the dashboard's own style (2026-10-20): small dark glass
   squares with a 14px line icon, the zoom pair included. */
.cty-live { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(20,22,30,.55); color: rgba(255,255,255,.88); cursor: pointer; backdrop-filter: blur(8px); transition: background .15s ease, color .15s ease; }
.cty-live:hover { background: rgba(20,22,30,.78); color: #fff; }
.cty-live:focus-visible { outline: 2px solid #8ab8ff; outline-offset: 2px; }
.cty-map .maplibregl-ctrl-group { background: rgba(20,22,30,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; box-shadow: none; backdrop-filter: blur(8px); overflow: hidden; }
.cty-map .maplibregl-ctrl-group button { width: 28px; height: 28px; }
.cty-map .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,.14); }
.cty-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); opacity: .85; transform: scale(.8); }
.cty-map .maplibregl-ctrl-group button:hover { background: rgba(255,255,255,.08); }
/* The live globe overlay: the full realtime globe page, full screen. */
.cty-live-overlay { position: fixed; inset: 0; z-index: 10000; background: #070f26; }
.cty-live-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
html.cty-live-open, html.cty-live-open body { overflow: hidden; }
.cty-stars { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; pointer-events: none; will-change: transform; }
.cty-halo { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(108,120,186,0) 80%, rgba(108,120,186,.72) 83.5%, rgba(96,108,172,.5) 86.5%, rgba(80,92,152,.3) 90%, rgba(62,74,132,.13) 95%, rgba(48,60,118,0) 100%); }
.cty-map > .cty-gl { position: absolute; inset: 0; }
.cty-map .maplibregl-canvas { outline: none; }
.cty-map .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; background: rgba(20,22,30,.55); color: rgba(255,255,255,.75); box-shadow: none; font-size: 11px; }
.cty-map .maplibregl-ctrl-attrib.maplibregl-compact a { color: rgba(255,255,255,.85); }
.cty-map .maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .45; }
.cty-mk { position: relative; width: var(--sz, 24px); height: var(--sz, 24px); pointer-events: none; }
.cty-mk.maplibregl-marker { position: absolute; top: 0; left: 0; }
.cty-mk::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(77,163,255,.55) 0%, rgba(77,163,255,.22) 38%, rgba(77,163,255,0) 70%); }
.cty-mk-dot { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #2f8cff; border: 2.5px solid #fff; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,25,80,.45); pointer-events: auto; transition: transform .2s ease; }
.cty-mk.is-on .cty-mk-dot { transform: scale(1.4); }
.cty-mk-lbl { position: absolute; left: calc(50% + 10px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: 600 11px/1 var(--font); color: #17181a; background: rgba(255,255,255,.96); padding: 3px 7px 3px 5px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,20,60,.28); pointer-events: auto; }
.cty-mk.no-lbl .cty-mk-lbl { display: none; }
/* Unlabelled markers step back a little: a smaller dot, a softer glow. */
.cty-mk.no-lbl .cty-mk-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 2px; }
.cty-mk.no-lbl::before { opacity: .6; }
.cty-mk.no-lbl.is-on .cty-mk-lbl, .cty-mk.no-lbl.is-pinned .cty-mk-lbl { display: inline-flex; }
.cty-map.has-pin .cty-mk:not(.is-pinned):not(.is-on) .cty-mk-lbl { display: none; }
.cty-mk.is-pinned { z-index: 4; }
.cty-mk.is-pinned .cty-mk-dot { transform: scale(1.3); }
.cty-mk-dot { cursor: pointer; }
.cty-mk.is-on { z-index: 5; }
.cty-tip { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 170px; padding: 8px 10px; border-radius: 8px; background: rgba(23, 24, 26, .92); color: #fff; font-size: 12px; pointer-events: none; }
.cty-tip strong { font-weight: 600; margin-bottom: 2px; }
.cty-tip span { display: flex; gap: 12px; }
.cty-tip b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.cty-side { display: flex; flex-direction: column; gap: 8px; }
.cty-list { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.cty-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; overflow: hidden; }
.cty-row { cursor: pointer; }
.cty-row:hover { background: var(--bg-soft); }
.cty-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cty-row-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #2563eb; opacity: .09; border-radius: 8px; pointer-events: none; }
.cty-flag { position: relative; font-size: 15px; line-height: 1; }
.cty-row-name { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cty-row-val { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; }
.cty-link { align-self: flex-start; border: 0; padding: 0 4px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.cty-name { display: inline-flex; align-items: center; gap: 8px; }
.cty-table .th-num, .cty-table th.th-num { text-align: right; font-variant-numeric: tabular-nums; }
.cty-more { padding: 12px 16px; border-top: 1px solid var(--border-soft); }
@media (max-width: 900px) { .cty-body { grid-template-columns: minmax(0, 1fr); } .cty-globe { height: 300px; } }

/* Favicons on the API tokens and notification settings pages (2026-10-20). */
.api-token-avatar { flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.api-token-access { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--text-soft); }
.api-token-acc { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.api-token-acc-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--bg-soft); color: var(--text-soft); font-size: 9px; font-weight: 700; }
.api-token-acc-ic.has-fav { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.api-token-acc-ic > .mb-fav-img { width: 80%; height: 80%; }

/* Open alerts sit at the bottom of the domain sections since 2026-10-20. */
.domain-alert-bottom:not(:empty) { margin-top: 24px; }

/* Request log: who sent it, and its Consent Mode state (2026-10-20). */
.lg-visitor { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-flag { font-size: 15px; line-height: 1; }
.lg-dev { color: var(--text-faint); flex: none; }
.lg-browser { font-size: 12.5px; color: var(--text-soft); }
.lg-muted { color: var(--text-faint); }
.lg-consent { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; vertical-align: middle; border-radius: 50%; }
.lg-consent.is-granted { background: var(--success-soft); color: var(--success); }
.lg-consent.is-denied { background: var(--danger-soft); color: var(--danger); }
.lg-consent.is-none { background: var(--bg-soft); color: var(--text-faint); }
.lg-visitor[data-tip]::after, .lg-consent[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; z-index: 6; padding: 4px 8px; border-radius: 6px; background: #17181a; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-2px, -50%); transition: opacity .08s ease, transform .08s ease; }
.lg-visitor[data-tip]:hover::after, .lg-consent[data-tip]:hover::after { opacity: 1; transform: translate(0, -50%); }

/* Crawlers card logos + side panels (owner, 2026-10-20) */
.aic-logo { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--aic-logo, 20px); height: var(--aic-logo, 20px); border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); color: #17181a; }
.aic-logo svg { width: 68%; height: 68%; display: block; }
.aic-mono { width: var(--aic-logo, 20px); height: var(--aic-logo, 20px); }
.cty-row.is-open, .aic-row.is-on { background: var(--bg-soft); }
.cty-table tr[data-cty-row] { cursor: pointer; }
.cty-table tr[data-cty-row]:hover td { background: var(--bg-soft); }
.sd-drawer { --sd-accent: #2563eb; width: 540px; background: #fff; }
.sd-drawer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 132px; background: linear-gradient(180deg, color-mix(in srgb, var(--sd-accent) 9%, #fff) 0%, #fff 100%); pointer-events: none; }
.sd-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 20px; }
.sd-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sd-tile-icon { flex: none; display: inline-flex; }
.sd-tile-icon .aic-logo, .sd-tile-icon .aic-mono { border-radius: 12px; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.22); font-size: 17px; }
.sd-flag { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; font-size: 24px; line-height: 1; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.22); }
.sd-id-text { min-width: 0; }
.sd-id-text h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.sd-id-text p { margin: 3px 0 0; font-size: 13px; color: var(--text-soft); }
.sd-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -6px 0 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); cursor: pointer; transition: background .15s ease, color .15s ease; }
.sd-close:hover { background: rgba(15,23,42,.06); color: var(--text); }
.sd-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sd-body { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 28px 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; }
.sd-two > * { min-width: 0; }
.sd-foot { display: flex; align-items: flex-start; gap: 8px; padding: 14px 28px 16px; border-top: 1px solid var(--border-soft); background: #fafafa; font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.sd-foot svg { flex: none; margin-top: 2px; }
/* headline numbers */
.sd-stats { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border: 1px solid var(--border-soft); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sd-stat { padding: 14px 16px; min-width: 0; }
.sd-stat + .sd-stat { border-left: 1px solid var(--border-soft); }
.sd-stat span { display: block; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.sd-stat strong { display: block; margin-top: 4px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-stat small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--text-faint); overflow-wrap: anywhere; }
/* sections */
.sd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sd-sec h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sd-count { font-size: 12px; color: var(--text-faint); }
.sd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
/* ranked lists */
.sd-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.sd-row { padding: 7px 0 6px; }
.sd-row-line { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.sd-row-label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; }
.sd-row-extra { flex: none; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.sd-row-val { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-meter { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: #f1f2f4; overflow: hidden; }
.sd-meter i { display: block; height: 100%; border-radius: 3px; background: var(--sd-accent); opacity: .7; }
.sd-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-host { flex: none; font-size: 12px; color: var(--text-faint); }
.sd-ev { font: 500 12.5px/1.4 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--text); }
.is-cut > [data-sd-extra] { display: none; }
.is-cut.is-all > [data-sd-extra] { display: block; }
.sd-plist.is-cut.is-all > [data-sd-extra] { display: grid; }
.sd-more { margin-top: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--accent); cursor: pointer; }
.sd-more:hover { text-decoration: underline; }
/* crawler split */
.sd-split { display: flex; gap: 3px; height: 10px; margin-bottom: 12px; }
.sd-split i { min-width: 4px; border-radius: 3px; background: var(--sd-accent); }
.sd-legend { display: grid; grid-template-columns: minmax(0, 1fr); }
.sd-legend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.sd-legend-row + .sd-legend-row { border-top: 1px solid #f1f2f4; }
.sd-key { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 2.5px; background: var(--sd-accent); }
.sd-legend-name { font-weight: 550; }
.sd-legend-cat { flex: 1; font-size: 12.5px; color: var(--text-faint); }
.sd-legend-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-legend-val small, .sd-p-val small { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--text-faint); }
/* pages read */
.sd-plist { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 -10px; }
.sd-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 10px 8px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .12s ease; }
a.sd-p:hover { background: #f7f7f8; }
.sd-p-main { min-width: 0; display: grid; gap: 3px; }
.sd-p-path { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 550; }
.sd-p-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-p-out { flex: none; display: inline-flex; color: var(--text-faint); opacity: 0; transition: opacity .12s ease; }
a.sd-p:hover .sd-p-out, a.sd-p:focus-visible .sd-p-out { opacity: 1; }
.sd-p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-faint); }
.sd-who { display: inline-flex; align-items: center; gap: 5px; }
.sd-p-val { align-self: start; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-p .sd-meter { grid-column: 1 / -1; height: 2px; margin-top: 8px; }
.sd-p .sd-meter i { opacity: .45; }
/* tagging-address callout */
.sd-callout { padding: 14px 16px; border-radius: 12px; background: #f7f7f8; }
.sd-callout-head { display: flex; gap: 10px; margin-bottom: 8px; color: var(--text-soft); }
.sd-callout-head svg { flex: none; margin-top: 2px; }
.sd-callout-head strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.sd-callout-head span { display: block; font-size: 12px; color: var(--text-faint); }
.sd-callout-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 0 25px; font-size: 13px; }
.sd-callout-row .sd-path { flex: 1; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; }
/* empty + loading */
.sd-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--border-soft); border-radius: 12px; text-align: center; color: var(--text-faint); }
.sd-empty svg { margin-bottom: 4px; }
.sd-empty strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sd-empty span { font-size: 12.5px; max-width: 320px; }
.sd-skel-head { width: 110px; height: 12px; margin-bottom: 14px; border-radius: 6px; background: #f1f2f4; }
.sd-skel-row { display: flex; justify-content: space-between; padding: 9px 0; }
.sd-skel-row span { height: 11px; border-radius: 6px; background: linear-gradient(90deg, #f1f2f4 0%, #f7f8f9 50%, #f1f2f4 100%); background-size: 200% 100%; animation: sd-shimmer 1.2s ease-in-out infinite; }
.sd-skel-row span + span { width: 36px; }
@keyframes sd-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* country daily bars */
.sd-bars { display: flex; align-items: flex-end; gap: 3px; height: 76px; }
.sd-bars span { position: relative; flex: 1; min-width: 2px; border-radius: 3px 3px 1px 1px; background: var(--sd-accent); opacity: .55; transition: opacity .12s ease; }
.sd-bars span:hover { opacity: 1; }
.sd-bars span[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: #17181a; color: #fff; font-size: 11.5px; white-space: nowrap; pointer-events: none; z-index: 2; }
.sd-bars-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-faint); }
/* latest events */
.sd-feed { display: grid; grid-template-columns: minmax(0, 1fr); }
.sd-feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.sd-feed-row + .sd-feed-row { border-top: 1px solid #f1f2f4; }
.sd-feed-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-accent) 15%, transparent); }
.sd-feed-page { flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; color: var(--text-soft); }
.sd-feed-time { flex: none; font-size: 12px; color: var(--text-faint); }
@media (max-width: 560px) {
  .sd-head { padding: 20px 16px 16px; } .sd-body { padding: 4px 16px 20px; } .sd-foot { padding: 12px 16px; }
  .sd-two { grid-template-columns: 1fr; gap: 24px; }
  .sd-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .sd-stat:nth-child(odd) { border-left: 0; } .sd-stat:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
}

/* Request log brand + client logos, live globe button (2026-10-20) */
.lg-type.is-brand { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.lg-visitor .mb-cl-logo { flex: none; display: block; }
.lg-globe-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Traffic stat cards (2026-10-20) */
.stats-grid.stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card .value .stat-country { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 22px; line-height: 1.25; }
.stat-card .value .stat-country > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card .stat-flag { flex: none; font-size: 20px; }
/* Narrow stat cards: the corner link shrinks to its arrow so it never sits
   on the label (2026-10-20, Health and Traffic rows). */
.stats-grid .stat-card { container-type: inline-size; }
@container (max-width: 230px) {
  .stat-card .stat-jump { font-size: 0; gap: 0; padding: 5px; }
}

/* Favicon in the domain header (2026-10-20) */
.dh-fav { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.dh-fav .mb-fav-img { width: 60%; height: 60%; }
.dh-fav > svg { width: 20px; height: 20px; }
.domain-tab-badge { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; line-height: 1; }

/* Browser & device card logos (2026-10-20) */
.bd-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-soft); }
.bd-logo .mb-cl-logo { display: block; }

/* Request log: one-type filter chip, globe button on the Live card (2026-10-20) */
.lv-chips { align-items: center; }

/* Globe preview: a labelled country (the top one by default) sits above the
   plain dots, a pinned or hovered one above that (owner, 2026-10-20). */
.cty-mk.maplibregl-marker { z-index: 1; }
.cty-mk.maplibregl-marker:not(.no-lbl) { z-index: 3; }
.cty-map.has-pin .cty-mk.maplibregl-marker:not(.is-pinned) { z-index: 1; }
.cty-mk.maplibregl-marker.is-pinned { z-index: 4; }
.cty-mk.maplibregl-marker.is-on { z-index: 5; }

/* Requests by type, merged with Tagging health (2026-10-20) */
.rt-body { padding-top: 10px; }
.rt-head, .rt-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 96px 64px 80px 40px; align-items: center; column-gap: 12px; }
.rt-head { padding: 0 10px 6px; font-size: 11.5px; color: var(--text-faint); }
.rt-head span:first-child { grid-column: 1 / 3; }
.rt-head span:nth-child(n+2) { text-align: right; }
.rt-list { display: grid; gap: 2px; }
.rt-row { position: relative; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; transition: background .12s ease; }
.rt-row:hover, .rt-row.is-open { background: var(--bg-soft); }
.rt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rt-row > * { position: relative; }
.rt-row > .rt-row-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #2563eb; opacity: .08; border-radius: 9px; pointer-events: none; }
.rt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rt-fail, .rt-ms, .rt-count, .rt-pct { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt-fail-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.rt-fail-pill.is-good { background: #f1f2f4; color: var(--text-soft); }
.rt-fail-pill.is-warn { background: #fff4e5; color: #b45309; }
.rt-fail-pill.is-bad { background: var(--danger-soft, #fde8e8); color: var(--danger, #c0262d); }
.rt-ms { font-size: 12.5px; color: var(--text-soft); }
.rt-count { font-weight: 600; }
.rt-pct { font-size: 12px; color: var(--text-faint); }
.rt-verdict { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.rt-verdict strong { font-weight: 650; }
.rt-verdict span:last-child { color: var(--text-soft); }
.rt-verdict-dot { width: 8px; height: 8px; border-radius: 50%; }
.rt-verdict.is-good { background: #e9f6ee; } .rt-verdict.is-good strong { color: #137333; } .rt-verdict.is-good .rt-verdict-dot { background: #1e8e3e; box-shadow: 0 0 0 3px rgba(30,142,62,.18); }
.rt-verdict.is-warn { background: #fff4e5; } .rt-verdict.is-warn strong { color: #b45309; } .rt-verdict.is-warn .rt-verdict-dot { background: #e8890c; box-shadow: 0 0 0 3px rgba(232,137,12,.2); }
.rt-verdict.is-bad { background: #fde8e8; } .rt-verdict.is-bad strong { color: #c0262d; } .rt-verdict.is-bad .rt-verdict-dot { background: #d93025; box-shadow: 0 0 0 3px rgba(217,48,37,.18); }
@media (max-width: 760px) {
  .rt-head, .rt-row { grid-template-columns: 24px minmax(0, 1fr) auto 64px; }
  .rt-head span:nth-child(3), .rt-ms, .rt-head span:nth-child(5), .rt-pct { display: none; }
  .panel-header .rt-verdict { margin-top: 8px; }
}
/* Request type side panel */
.sd-type-tile { display: inline-flex; }
.sd-type-tile .lg-type { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.22); }
.sd-lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
.sd-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; }
.sd-quiet { margin: 0; font-size: 13px; color: var(--text-faint); }
.sd-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--accent); }
.sd-foot a { color: var(--accent); }
.sd-status { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 20px; padding: 0 6px; border-radius: 6px; font: 600 11.5px/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.sd-status.is-ok { background: #e9f6ee; color: #137333; }
.sd-status.is-4xx { background: #fff4e5; color: #b45309; }
.sd-status.is-5xx { background: #fde8e8; color: #c0262d; }
.sd-status.is-0 { background: #f1f2f4; color: var(--text-soft); }
.sd-fails { display: grid; gap: 8px; }
.sd-fail { padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; }
.sd-fail-top { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sd-fail-top .sd-path { flex: 1; }
.sd-fail-why { margin: 8px 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
.sd-fail-meta { font-size: 12px; color: var(--text-faint); }
.sd-feed-ms { flex: none; font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* New-style lists for Requests by hostname, Click ID survival, the bot /
   GA4 chart legends and Browser & device (owner, 2026-10-20): the share bar
   sits behind the row, and the row opens a side panel. */
.xl-body { padding-top: 10px; }
.xl-list { display: grid; gap: 2px; }
.xl-row, .xl-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) 80px 44px; align-items: center; column-gap: 12px; }
.xl-row { position: relative; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; transition: background .12s ease; }
.xl-row:hover, .xl-row.is-open { background: var(--bg-soft); }
.xl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.xl-row > * { position: relative; }
.xl-row > .xl-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #2563eb; opacity: .08; border-radius: 9px; pointer-events: none; }
.xl-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text-soft); }
.xl-ic.mb-fav-slot .mb-fav-img { width: 62%; height: 62%; }
.xl-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.xl-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.xl-name em { flex: none; font-style: normal; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.xl-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xl-count small { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--text-faint); }
.xl-pct { text-align: right; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.xl-head { padding: 0 10px 6px; font-size: 11.5px; color: var(--text-faint); }
.xl-head span:nth-child(n+3) { text-align: right; }
.xl-group .hn-caret { margin: 0 0 2px; }
.xl-group[aria-expanded="true"] .hn-caret { transform: rotate(45deg); }
.xl-sub-list { display: grid; gap: 2px; margin-left: 18px; padding-left: 10px; border-left: 1px solid var(--border-soft); }
.ck-row { grid-template-columns: 24px minmax(0, 1fr) 150px; }
.ck-row.has-pu { grid-template-columns: 24px minmax(0, 1fr) 150px 150px; }
@media (max-width: 640px) {
  .xl-row, .xl-head { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .xl-pct, .xl-name em { display: none; }
  .ck-row, .ck-row.has-pu { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
}
/* Chart legends (bots, GA4 events): bar behind the row, logo before the name */
.bt-row { grid-template-columns: 10px minmax(0, 1fr) auto 38px; overflow: hidden; }
.bt-row > * { position: relative; }
.bt-row > .bt-bar { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto; border-radius: 6px; background: transparent; pointer-events: none; }
.bt-row > .bt-bar > span { opacity: .1; border-radius: 6px; }
.bt-row > .bt-acts { position: absolute; }
.bt-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bt-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-name .aic-logo { flex: none; border-radius: 5px; }
@media (hover: none) { .bt-row { grid-template-columns: 10px minmax(0, 1fr) auto 36px auto; } .bt-row > .bt-acts { position: static; } }
/* Browser & device rows */
.bd-row { grid-template-columns: 10px minmax(0, 1fr) 64px 40px; position: relative; padding: 7px 8px; border-radius: 8px; cursor: pointer; overflow: hidden; transition: background .12s ease; }
.bd-row > * { position: relative; }
.bd-row > .bd-bar { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto; border-radius: 8px; background: transparent; pointer-events: none; }
.bd-row > .bd-bar > span { opacity: .1; border-radius: 8px; }
.bd-row:hover, .bd-row.is-open { background: var(--bg-soft); }
.bd-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 760px) { .bd-row { grid-template-columns: 10px minmax(0, 1fr) 56px 36px; } }
/* Side-panel extras */
.sd-icon-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--text-soft); box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.22); overflow: hidden; }
.sd-icon-tile.mb-fav-slot .mb-fav-img { width: 58%; height: 58%; }
.sd-flag-sm { flex: none; font-size: 15px; line-height: 1; }
.sd-cl { display: inline-flex; width: 16px; flex: none; }
.sd-feed-row .mb-cl-logo { flex: none; }
.sd-pws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-pw { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 13px; }
.sd-pw strong { flex: 1; font-weight: 600; }
.sd-pw span:last-child { font-size: 12px; color: var(--text-faint); }
.sd-pw-dot { width: 8px; height: 8px; border-radius: 50%; background: #c4c7cc; }
.sd-pw-dot.is-on { background: #1e8e3e; box-shadow: 0 0 0 3px rgba(30,142,62,.16); }

/* Measurebase audit crawler: the brand mark fills its tile (2026-10-20) */
.aic-logo.is-mb { background: none; box-shadow: none; overflow: hidden; }
.aic-logo.is-mb img { display: block; width: 100%; height: 100%; }
.sd-tile-icon .aic-logo.is-mb { box-shadow: 0 6px 16px -6px rgba(15,23,42,.3); }

/* Consent Mode v2, new style (owner, 2026-10-20) */
.cm2-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cm2-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.cm2-pill-dot { width: 8px; height: 8px; border-radius: 50%; }
.cm2-pill.is-good { background: #e9f6ee; color: #137333; } .cm2-pill.is-good .cm2-pill-dot { background: #1e8e3e; box-shadow: 0 0 0 3px rgba(30,142,62,.18); }
.cm2-pill.is-mid { background: #f1f2f4; color: var(--text-soft); } .cm2-pill.is-mid .cm2-pill-dot { background: #898781; }
.cm2-pill.is-warn { background: #fff4e5; color: #b45309; } .cm2-pill.is-warn .cm2-pill-dot { background: #e8890c; box-shadow: 0 0 0 3px rgba(232,137,12,.2); }
.cm2-body { display: grid; gap: 26px; }
.cm2-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: #f1f2f4; }
.cm2-bar.is-big { height: 12px; }
.cm2-bar i { display: block; height: 100%; min-width: 3px; }
.cm2-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cm2-leg { display: grid; gap: 2px; }
.cm2-leg-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); }
.cm2-leg strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cm2-leg em { font-style: normal; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cm2-sec h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; font-size: 13.5px; font-weight: 600; }
.cm2-sec h3 span { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.cm2-rows { display: grid; gap: 2px; margin: 0 -10px; }
.cm2-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 48px; align-items: center; gap: 14px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; transition: background .12s ease; }
.cm2-row:hover, .cm2-row.is-open { background: var(--bg-soft); }
.cm2-row:disabled { cursor: default; opacity: .6; }
.cm2-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm2-row-name { font-weight: 500; }
.cm2-row-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cm2-tile { color: #137333; }
.cm2-drawer-chart .chart-wrap { height: 150px; }
@media (max-width: 640px) {
  .cm2-row { grid-template-columns: minmax(0, 1fr) 90px 44px; }
  .cm2-legend strong { font-size: 18px; }
}

/* Live card placeholder while the first data loads (2026-10-20) */
.lv-skel .lv-skel-bar { background: linear-gradient(180deg, #eef0f3, #e4e7eb); animation: lv-skel-pulse 1.4s ease-in-out infinite; }
.lv-skel .bar-col:nth-child(3n) .lv-skel-bar { animation-delay: .2s; }
.lv-skel .bar-col:nth-child(3n+1) .lv-skel-bar { animation-delay: .4s; }
@keyframes lv-skel-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.live-dot.is-waiting { background: #c4c7cc; box-shadow: none; animation: none; }

/* Menu button (Countries metric, 2026-10-20) */
.mm { position: relative; }
.mm-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 550; color: var(--text); cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .15s ease, box-shadow .15s ease; }
.mm-btn:hover { border-color: #c9ccd2; }
.mm-btn[aria-expanded="true"], .mm-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.mm-btn .mm-ic { color: var(--accent); }
.mm-ic { display: inline-flex; flex: none; }
.mm-chev { color: var(--text-faint); transition: transform .15s ease; }
.mm-btn[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }
.mm-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 270px; padding: 6px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px -12px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06); display: grid; gap: 2px; }
.mm-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.mm-opt:hover, .mm-opt:focus-visible { outline: none; background: var(--bg-soft); }
.mm-opt .mm-ic { width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: #f3f4f6; color: var(--text-soft); }
.mm-opt.is-on .mm-ic { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.mm-opt-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mm-opt-text strong { font-size: 13px; font-weight: 600; }
.mm-opt-text span { font-size: 12px; color: var(--text-faint); }
.mm-check { flex: none; color: var(--accent); opacity: 0; }
.mm-opt.is-on .mm-check { opacity: 1; }

/* Info tip with a list (GA4 Events, 2026-10-20) */
.info-tip-popup.info-tip-list { width: 340px; }
.info-tip-list ul { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 6px; }
.info-tip-list li { line-height: 1.45; }
/* Browser & device rows match the Countries / Crawlers lists: no row borders (2026-10-20) */
.bd-row, .bd-row:last-of-type { border-bottom: 0; }
/* Hovered tab: a grey underline, so the hover background has a base (2026-10-20) */
.domain-tab:hover:not(.is-active) { border-bottom-color: #d3d6db; }
/* Live GA4 events card (2026-10-20) */
button.stat-jump { font-family: inherit; cursor: pointer; }
.stat-live-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: #1e8e3e; box-shadow: 0 0 0 3px rgba(30,142,62,.16); vertical-align: middle; animation: stat-live-pulse 2s ease-in-out infinite; }
@keyframes stat-live-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(30,142,62,.16); } 50% { box-shadow: 0 0 0 6px rgba(30,142,62,.06); } }
@media (prefers-reduced-motion: reduce) { .stat-live-dot { animation: none; } }

/* Requests chart context: markers per day (owner, 2026-10-20) */
.ctx-row { position: absolute; left: 0; right: 0; top: -42px; height: 30px; display: flex; gap: 8px; z-index: 3; pointer-events: none; }
.ctx-cell { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.ctx-k { --tl: #5f6368; color: var(--tl); }
.ctx-k-alert { --tl: #e8890c; } .ctx-k-alert.is-critical { --tl: #d93025; }
.ctx-k-warning { --tl: #e8890c; }
.ctx-k-gtm { --tl: #1a73e8; }
.ctx-k-script { --tl: #8430ce; }
.ctx-k-resolved { --tl: #1e8e3e; }
.ctx-k-change { --tl: #5f6368; }
.ctx-mk { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid var(--tl); border-radius: 50%; background: #fff; color: var(--tl); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(15,23,42,.12); transition: transform .12s ease; }
.ctx-mk:hover, .ctx-mk:focus-visible { transform: translateY(-2px); outline: none; z-index: 5; }
.ctx-mk:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl) 30%, transparent); }
.ctx-n { position: absolute; top: -7px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--tl); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.ctx-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: none; width: max-content; max-width: 300px; padding: 8px 10px; border-radius: 9px; background: #17181a; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); pointer-events: none; }
.ctx-mk:hover .ctx-tip, .ctx-mk:focus-visible .ctx-tip { display: grid; gap: 4px; }
.ctx-tip-row { display: flex; align-items: baseline; gap: 6px; }
.ctx-tip-row .ctx-k { flex: none; filter: brightness(1.6); }
.ctx-tip-row b { flex: none; font-weight: 600; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.ctx-tip-more { color: rgba(255,255,255,.6); }
.ctx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ctx-legend:empty { display: none; }
.ctx-legend-label { margin-right: 4px; font-size: 12px; color: var(--text-faint); }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 550; color: var(--text); cursor: pointer; transition: opacity .12s ease, background .12s ease; }
.ctx-chip:hover { background: var(--bg-soft); }
.ctx-chip em { font-style: normal; font-weight: 500; color: var(--text-faint); }
.ctx-chip.is-off { opacity: .45; }
.ctx-chip.is-off .ctx-k { color: var(--text-faint); }
/* the day's events in the side panel */
.ctx-list { display: grid; gap: 4px; }
.ctx-ev { display: flex; gap: 12px; padding: 12px 0; }
.ctx-ev + .ctx-ev { border-top: 1px solid #f1f2f4; }
.ctx-ev-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--tl) 10%, #fff); }
.ctx-ev-body { flex: 1; min-width: 0; }
.ctx-ev-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctx-ev-top strong { font-size: 13.5px; font-weight: 600; }
.ctx-ev-top span { flex: none; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ctx-ev-kind { display: block; margin-top: 1px; font-size: 12px; color: var(--text-faint); }
.ctx-ev-body p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); overflow-wrap: anywhere; }
.ctx-ev-body .sd-link { margin-top: 6px; }

/* Context badges, one per kind per day (2026-10-20) */
.ctx-row { top: auto; bottom: calc(100% + 8px); height: auto; align-items: flex-end; }
.ctx-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.ctx-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 20px; min-width: 20px; padding: 0 5px; border: 1.5px solid var(--tl); border-radius: 999px; background: #fff; color: var(--tl); font: 700 10.5px/1 var(--font); cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(15,23,42,.1); transition: transform .12s ease, background .12s ease; }
.ctx-badge b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx-badge:hover, .ctx-badge:focus-visible { outline: none; transform: translateY(-1px); background: color-mix(in srgb, var(--tl) 10%, #fff); z-index: 6; }
.ctx-badge.ctx-more { --tl: #898781; color: var(--text-soft); }
.ctx-badge:hover .ctx-tip, .ctx-badge:focus-visible .ctx-tip, .ctx-dots:hover .ctx-tip, .ctx-dots:focus-visible .ctx-tip { display: grid; gap: 4px; }
.ctx-tip-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.ctx-tip-row, .ctx-tip-more { font-weight: 500; text-transform: none; letter-spacing: 0; }
.ctx-dots { position: relative; display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 3px; padding: 3px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; pointer-events: auto; }
.ctx-dots:hover, .ctx-dots:focus-visible { outline: none; background: var(--bg-soft); }
.ctx-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--tl); }

/* Consent Mode v2: "Per signal" folds (owner, 2026-10-20) */
.cm2-fold > summary { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 8px 10px; border-radius: 9px; list-style: none; cursor: pointer; transition: background .12s ease; }
.cm2-fold > summary::-webkit-details-marker { display: none; }
.cm2-fold > summary:hover { background: var(--bg-soft); }
.cm2-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm2-fold-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cm2-fold-note { margin-left: auto; font-size: 12px; color: var(--text-faint); }
.cm2-fold-chev { flex: none; color: var(--text-faint); transition: transform .18s ease; }
.cm2-fold[open] > summary .cm2-fold-chev { transform: rotate(180deg); }
.cm2-fold[open] > .cm2-rows { margin-top: 8px; }
/* Consent Mode v2 card folds to its header (owner, 2026-10-20; th-panel fold) */
.cm2-card-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.cm2-card-toggle:hover { background: var(--bg-soft); }
.cm2-card-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#consent-panel.is-folded #consent-event-filter { display: none; }
/* Alerts bell per domain row (owner, 2026-10-20) */
.icon-btn.dra-btn { position: relative; }
.icon-btn.dra-btn:not(.has-alerts) { color: var(--text-faint); }
.dra-n { position: absolute; top: -6px; right: -7px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--warning, #ff8a00); box-shadow: 0 0 0 2px #fff; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.dra-n.is-critical { background: var(--danger); }
.alp-domain { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--bg-soft); font-size: 13px; color: var(--text-soft); }
.alp-domain b { font-weight: 600; color: var(--text); }
.alp-domain button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-faint); cursor: pointer; }
.alp-domain button:hover { background: #fff; color: var(--text); }
/* Channel accuracy card (owner, 2026-10-20): conversions per channel vs the tagging server */
.cha-row { grid-template-columns: 24px minmax(0, 1fr) 84px 84px 168px; }
.xl-head.cha-row span:nth-child(n+3) { text-align: right; }
.cha-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cha-name strong { font-weight: 600; }
.cha-name em { font-style: normal; font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cha-exp { font-weight: 400; color: var(--text-soft); }
.cha-verdict { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--bg-soft); color: var(--text-soft); }
.cha-verdict b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cha-verdict.is-good { background: #e9f7ef; color: #15803d; }
.cha-verdict.is-warn { background: #fff4e5; color: #b45309; }
.cha-verdict.is-bad { background: #fdecec; color: #b91c1c; }
.cha-verdict.is-info { background: #eef4ff; color: #1d4ed8; }
.cha-verdict.is-ref { background: transparent; color: var(--text-faint); }
.cha-verdict.is-ask { background: #eef4ff; color: #1d4ed8; }
.cha-row.is-off { cursor: default; }
.cha-row.is-off:hover { background: transparent; }
.cha-row.is-off .xl-ic { opacity: .55; }
.cha-connect { justify-self: end; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cha-connect:hover { text-decoration: underline; }
.cha-head-side { display: flex; align-items: center; }
.cha-head-side select { max-width: 260px; }
.cha-empty { display: grid; gap: 4px; padding: 18px 4px; text-align: center; }
.cha-empty span { font-size: 13px; color: var(--text-soft); }
.cha-days { display: grid; gap: 1px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cha-day { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 76px; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.cha-day span:nth-child(n+2) { text-align: right; }
.cha-day.is-head { padding-top: 0; font-size: 11.5px; color: var(--text-faint); }
.cha-day-pct { color: var(--text-faint); }
.cha-check { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.cha-check li + li { margin-top: 4px; }
.cha-map { width: 100%; }
.cha-actions { display: grid; gap: 2px; margin-bottom: 8px; }
.cha-action { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.cha-action:hover { background: var(--bg-soft); }
.cha-action span { display: flex; flex-direction: column; min-width: 0; }
.cha-action strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cha-action em { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.cha-action b { font-size: 13px; font-variant-numeric: tabular-nums; }
.cha-save { display: flex; justify-content: flex-end; padding-top: 4px; }
@media (max-width: 640px) {
  .cha-row { grid-template-columns: 24px minmax(0, 1fr) 64px 0 auto; column-gap: 8px; }
  .cha-row .cha-exp, .xl-head.cha-row span:nth-child(4) { visibility: hidden; }
}
.cha-action b.is-zero { color: var(--text-faint); font-weight: 500; }
.cha-map-note { margin-top: 8px; }
.cha-mb { display: block; border-radius: 4px; }
.cha-row[data-cha="server"] .cha-name em { white-space: normal; }
/* Row colours (owner, 2026-10-20, like datafa.st): a ranked row's share bar
   and hover tint follow its own colour (--rc, set per row in domain.html). */
.xl-row, .rt-row, .cty-row, .aic-row, .bt-row, .bd-row { --rc: #2563eb; }
.xl-row > .xl-bar, .rt-row > .rt-row-bar, .cty-row > .cty-row-bar { background: var(--rc); transition: opacity .12s ease; }
.aic-row > .aic-row-bar { transition: opacity .12s ease; }
.xl-row:hover, .xl-row.is-open, .rt-row:hover, .rt-row.is-open, .cty-row:hover, .aic-row:hover, .aic-row.is-on,
.bt-row:hover, .bt-row.is-on, .bd-row:hover, .bd-row.is-open { background: color-mix(in srgb, var(--rc) 10%, transparent); }
.xl-row:hover > .xl-bar, .xl-row.is-open > .xl-bar, .rt-row:hover > .rt-row-bar, .rt-row.is-open > .rt-row-bar,
.cty-row:hover > .cty-row-bar, .aic-row:hover > .aic-row-bar, .aic-row.is-on > .aic-row-bar { opacity: .16; }
.bt-row:hover > .bt-bar > span, .bt-row.is-on > .bt-bar > span, .bd-row:hover > .bd-bar > span, .bd-row.is-open > .bd-bar > span { opacity: .18; }
.cha-row.is-off:hover { background: transparent; }
/* Key events in domain settings (owner, 2026-10-20) */
.ke-body { display: grid; gap: 8px; }
.ke-row { border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
.ke-row:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.ke-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ke-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ke-name strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ke-name em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.ke-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ke-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--bg-soft); color: var(--text-soft); }
.ke-chip-ic { display: inline-flex; align-items: center; }
.ke-chip.is-good { background: #e9f7ef; color: #15803d; }
.ke-chip.is-warn { background: #fff4e5; color: #b45309; }
.ke-chip.is-bad { background: #fdecec; color: #b91c1c; }
.ke-chip.is-info { background: #eef4ff; color: #1d4ed8; }
.ke-chip.is-off { background: transparent; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border-soft); }
.ke-go { color: var(--text-faint); display: inline-flex; }
.ke-empty { display: grid; gap: 6px; justify-items: center; padding: 14px 4px; text-align: center; }
.ke-empty span { font-size: 13px; color: var(--text-soft); max-width: 460px; }
.ke-sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.ke-sugg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.ke-sugg-btn:hover { border-color: var(--accent); color: var(--accent); }
.ke-sugg-btn em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.ke-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.ke-sec { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.ke-sec:first-child { padding-top: 0; }
.ke-quiet { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.ke-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.ke-line .ke-quiet { margin: 0; }
.ke-picks { display: grid; gap: 2px; margin-bottom: 14px; }
.ke-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ke-pick:hover { background: var(--bg-soft); color: var(--accent); }
.ke-pick span { display: flex; flex-direction: column; min-width: 0; }
.ke-pick strong { font-size: 13.5px; font-weight: 500; }
.ke-pick em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.ke-acts { display: grid; gap: 4px; max-height: 360px; overflow-y: auto; margin: 10px 0 0; }
.ke-act { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.ke-act:hover { background: var(--bg-soft); }
.ke-act.is-on { background: #f5f8ff; box-shadow: inset 0 0 0 1px #dbe6ff; }
.ke-act input { margin-top: 2px; }
.ke-act-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ke-act-main strong { font-size: 13px; font-weight: 500; }
.ke-act b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ke-act b.is-zero { color: var(--text-faint); font-weight: 500; }
.ke-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.ke-pill { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; background: #eef4ff; color: #1d4ed8; }
.ke-pill.is-quiet { background: var(--bg-soft); color: var(--text-soft); }
.ke-pill.is-warn { background: #fff4e5; color: #b45309; }
.ke-findings { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ke-findings li { padding: 7px 9px; border-radius: 7px; background: #fffaf2; font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.ke-findings li.is-info { background: var(--bg-soft); }
.ke-findings li strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.ke-select { width: 100%; }
.ke-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; }
.ke-remove { color: #b91c1c; }
@media (max-width: 720px) { .ke-main { grid-template-columns: minmax(0, 1fr) 16px; } .ke-chips { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } }
/* Bot traffic / GA4 events: the hover buttons sit on the row's own tint
   (owner, 2026-10-20). The strip behind them is the opaque version of the
   row's 10% hover tint, so it blends into the row instead of showing grey. */
.bt-row:hover .bt-acts, .bt-row.is-on .bt-acts { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 10%, #fff) 10px); }
.bt-row .bt-acts.is-on { background: none; }
.bt-row .bt-eye[data-bt-only]:hover, .bt-row .bt-eye[data-bt-only].is-active,
.bt-row .bt-eye[data-bt-hide]:hover { background: color-mix(in srgb, var(--rc) 22%, #fff); color: color-mix(in srgb, var(--rc) 80%, #000); box-shadow: none; }
/* Requests by type: the icon tile takes the row's colour (owner, 2026-10-20);
   brand logos (GA4, Google Ads) keep their own colours on that tint. */
.rt-row .lg-type, .rt-row .lg-type.is-brand { background: color-mix(in srgb, var(--rc) 15%, #fff); color: color-mix(in srgb, var(--rc) 85%, #000); box-shadow: none; }
/* Side panels and dialogs above the Support / Feedback buttons (z-index 9998,
   css/style.css; owner, 2026-10-20: a side panel's Save sat behind them).
   Dialogs stay one level above side panels, so a confirm opened from a
   side panel (Mark in GA4) shows on top of it. */
.mb-drawer-overlay { z-index: 10000; }
.modal-overlay { z-index: 10001; }
/* Toasts stay on top of an open side panel or dialog. */
.save-toast, .mb-audit-toast { z-index: 10002; }
.ke-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 0 10px; height: 34px; border: 1px solid var(--border-soft); border-radius: 9px; background: #fff; color: var(--text-faint); }
.ke-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.ke-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); }
.ke-act[hidden], .ke-pick[hidden], .ke-h3[hidden] { display: none; }
[data-ke-list="add"] .ke-picks { margin-bottom: 10px; }
.ke-byname { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.ke-byname-field { flex: 1; margin: 0; }
#ke-add-error { margin: 4px 0 6px; }
/* Key events: Google Ads per source (owner, 2026-10-20) */
.ke-slot-lead { margin: 0 0 10px; }
.ke-checks { margin: 0 0 12px; }
.ke-slot { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: 10px; }
.ke-slot.is-counting { border-color: color-mix(in srgb, var(--accent) 40%, #fff); background: color-mix(in srgb, var(--accent) 4%, #fff); }
.ke-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.ke-counts { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.ke-counts input:disabled + * , .ke-counts:has(input:disabled) { opacity: .5; cursor: default; }
.ke-slot-current .ke-quiet { margin: 0; }
.ke-act.is-static { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 0; cursor: default; }
.ke-act.is-static:hover { background: transparent; }
.ke-slot-pick { margin-top: 6px; }
.ke-slot-pick summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); list-style: none; }
.ke-slot-pick summary::-webkit-details-marker { display: none; }
.ke-slot-pick .ke-acts { max-height: 260px; }
.cha-action.is-static { cursor: default; grid-template-columns: minmax(0, 1fr) auto; }
.cha-action.is-static:hover { background: transparent; }
.ke-counts.is-fixed { color: var(--accent); font-weight: 600; cursor: default; }
.ke-counts.is-fixed input { accent-color: var(--accent); opacity: 1; }
.ke-counts.is-backup { padding: 1px 8px; border-radius: 999px; background: var(--bg-soft); font-size: 11.5px; color: var(--text-faint); cursor: default; }
/* Key events phase 3: create the server action, add its tag (2026-10-20) */
.ke-setup { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.ke-setup summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); list-style: none; }
.ke-setup summary::-webkit-details-marker { display: none; }
.ke-setup-form { display: grid; gap: 8px; margin-top: 8px; }
.ke-setup-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-soft); }
.ke-setup-form input[type=text] { height: 34px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); }
.ke-setup-form input[type=text]:focus { outline: 0; border-color: var(--accent); }
.ke-setup-form .btn { justify-self: start; }
.ke-setup.is-tag { display: grid; gap: 6px; justify-items: start; }
.ke-setup.is-tag .ke-quiet { margin: 0; }
.ke-setup-status { color: var(--text-soft); }
.ke-h3-sub { margin: 10px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: none; }
.ke-meta-custom { margin-top: 8px; }
/* Key events v2 (owner, 2026-10-20: clearer): a summary, a table with one
   column per platform, and a side panel with a tab per platform. */
.ke-body { display: block; padding-top: 14px; }
.ke-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; font-size: 13px; color: var(--text-soft); }
.ke-summary b { color: var(--text); font-weight: 600; }
.ke-sum { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; }
.ke-sum.is-good { background: #e9f7ef; color: #15803d; }
.ke-sum.is-warn { background: #fff4e5; color: #b45309; }
.ke-sum b { color: inherit; }
.ke-table { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: #fff; }
.ke-thead, .ke-tr { display: grid; align-items: center; column-gap: 14px; padding: 0 14px; }
.ke-cols-1 .ke-thead, .ke-cols-1 .ke-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 16px; }
.ke-cols-2 .ke-thead, .ke-cols-2 .ke-tr { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) 16px; }
.ke-cols-3 .ke-thead, .ke-cols-3 .ke-tr { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 16px; }
.ke-thead { height: 36px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.ke-th { display: inline-flex; align-items: center; gap: 6px; }
.ke-tr { width: 100%; min-height: 62px; padding-top: 10px; padding-bottom: 10px; border: 0; border-bottom: 1px solid var(--border-soft); background: #fff; font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: background .12s ease; }
.ke-tr:last-child { border-bottom: 0; }
.ke-tr:hover { background: color-mix(in srgb, var(--accent) 4%, #fff); }
.ke-tr:hover .ke-go { color: var(--accent); transform: translateX(2px); }
.ke-tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ke-ev { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ke-state { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.ke-state.is-good { background: #e9f7ef; color: #15803d; }
.ke-state.is-warn, .ke-state.is-info, .ke-state.is-idle { background: #fff4e5; color: #b45309; }
.ke-state.is-bad { background: #fdecec; color: #b91c1c; }
.ke-cell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ke-cell-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #c4c4bf; }
.ke-cell.is-good .ke-cell-dot, .ke-status.is-good .ke-cell-dot { background: #16a34a; }
.ke-cell.is-warn .ke-cell-dot, .ke-status.is-warn .ke-cell-dot { background: #f59e0b; }
.ke-cell.is-bad .ke-cell-dot, .ke-status.is-bad .ke-cell-dot { background: #dc2626; }
.ke-cell.is-info .ke-cell-dot, .ke-status.is-info .ke-cell-dot { background: #3b82f6; }
.ke-cell.is-off .ke-cell-dot, .ke-status.is-off .ke-cell-dot { background: transparent; box-shadow: inset 0 0 0 1.5px #c4c4bf; }
.ke-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ke-cell-text b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ke-cell.is-off .ke-cell-text b { font-weight: 500; color: var(--text-faint); }
.ke-cell-text em { font-style: normal; font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ke-go { color: var(--text-faint); display: inline-flex; transition: transform .12s ease, color .12s ease; }
@media (max-width: 760px) {
  .ke-thead { display: none; }
  .ke-cols-1 .ke-tr, .ke-cols-2 .ke-tr, .ke-cols-3 .ke-tr { grid-template-columns: 1fr 1fr 16px; row-gap: 10px; }
  .ke-tr .ke-ev { grid-column: 1 / -1; }
}
/* the side panel */
.ke-drawer .mb-drawer-body { padding-top: 0; }
.ke-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; margin: 0 -24px 16px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--border-soft); }
.ke-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-soft); cursor: pointer; }
.ke-tab:hover { background: var(--bg-soft); color: var(--text); }
.ke-tab.is-on { background: var(--bg-soft); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-soft); }
.ke-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: #c4c4bf; }
.ke-tab-dot.is-good { background: #16a34a; } .ke-tab-dot.is-warn { background: #f59e0b; } .ke-tab-dot.is-bad { background: #dc2626; } .ke-tab-dot.is-info { background: #3b82f6; }
.ke-tab-dot.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px #c4c4bf; }
.ke-tabpanel { padding-bottom: 8px; }
.ke-status { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg-soft); }
.ke-status.is-good { background: #f0faf4; } .ke-status.is-warn { background: #fffaf2; } .ke-status.is-bad { background: #fef5f5; } .ke-status.is-info { background: #f3f7ff; }
.ke-status div { display: flex; flex-direction: column; gap: 2px; }
.ke-status b { font-size: 14px; font-weight: 600; }
.ke-status span { font-size: 12.5px; color: var(--text-soft); }
.ke-lead { margin-top: 0; }
.ke-drawer-foot { flex: none; padding: 12px 24px; border-top: 1px solid var(--border-soft); background: #fff; }
.ke-drawer-foot .ke-actions { padding-top: 0; }
.ke-drawer-foot #ke-error { margin: 0 0 8px; }
.ke-drawer { display: flex; flex-direction: column; }
.ke-drawer .mb-drawer-body { flex: 1; min-height: 0; overflow-y: auto; }
.mb-drawer.ke-drawer { width: 540px; }
.ke-drawer .mb-drawer-body { gap: 0; }
/* Side panels for Connections and Measurement setup (owner, 2026-10-20: were
   centred modals; premium and clean, like the domain page's side panels) */
.mb-drawer.spd { width: 520px; display: flex; flex-direction: column; border-radius: 16px 0 0 16px; overflow: hidden; }
.spd-head { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, #fff), #fff); }
.spd-ic { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-soft), 0 1px 2px rgba(16, 24, 40, .06); color: var(--accent); }
.spd-ic svg { width: 24px; height: 24px; }
.spd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spd-kicker { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.spd-titles h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.spd-titles p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.spd-close { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-faint); cursor: pointer; }
.spd-close:hover { background: var(--bg-soft); color: var(--text); }
.spd-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.spd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 18px; }
.spd-body .form-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 24px; border-bottom: 1px solid var(--border-soft); }
.spd-body .form-row:last-child { border-bottom: 0; }
.spd-body .form-row > label { font-size: 13px; font-weight: 600; }
.spd-body .form-row .hint { font-weight: 400; }
.spd-body .ms-conn { padding: 4px 0; }
.spd-list { display: grid; gap: 8px; align-content: start; padding: 18px 24px 24px; }
.spd-list .tw-card { border-radius: 12px; }
.spd-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border-soft); background: #fff; }
.spd-foot .field-error { flex: 1; margin: 0; }
.spd-grow { flex: 1; }
.spd-note { flex: 1; font-size: 12px; color: var(--text-faint); }
@media (max-width: 560px) { .mb-drawer.spd { width: 100%; border-radius: 0; } }
.spd-list .ms-drawer-item { font: inherit; text-align: left; width: 100%; cursor: pointer; }
.spd-list .ms-drawer-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, #fff); box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
/* Requests chart hover scrub (owner, 2026-10-20, like datafa.st): a dotted
   cursor, colour up to the hovered bar and grey after it, one data panel. */
.chart[data-scrub] .bar-tooltip { display: none; }
.chart[data-scrub] .bar-col { cursor: pointer; }
.chart[data-scrub] .bar { transition: background .15s ease, opacity .15s ease; }
.chart.is-scrub .bar-col.is-after .bar { background: #dcdcd8; opacity: .9; }
.chart.is-scrub .bar-col.is-at .bar { opacity: 1; }
.ctx-row .ctx-cell { transition: opacity .15s ease, filter .15s ease; }
.ctx-row .ctx-cell.is-after { opacity: .35; filter: grayscale(1); }
.chart-cursor { position: absolute; top: 0; width: 1px; transform: translateX(-.5px); pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text) 30%, transparent) 0 4px, transparent 4px 9px); }
.chart-scrub-tip { position: fixed; top: 0; left: 0; z-index: 9999; min-width: 190px; max-width: 280px; padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06); pointer-events: none; font-size: 12.5px; color: var(--text); }
.cst-label { margin-bottom: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); letter-spacing: .01em; }
.cst-main { display: flex; align-items: center; gap: 8px; }
.cst-dot { flex: none; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, var(--accent-orange), var(--accent)); }
.cst-name { flex: 1; color: var(--text-soft); }
.cst-main b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cst-change { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-left: 17px; font-size: 11.5px; }
.cst-delta { font-weight: 600; color: var(--text-soft); }
.cst-delta.is-up { color: #15803d; }
.cst-delta.is-down { color: #b91c1c; }
.cst-vs { color: var(--text-faint); }
.cst-ctx { display: grid; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft); }
/* overflow-wrap: anywhere lets a long URL in an event title break instead of
   running out of the panel (owner, 2026-10-23). */
.cst-ev { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
.cst-ev b { flex: none; }
.cst-ev b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cst-ev em { font-style: normal; color: var(--text-faint); }
.cst-ev .ctx-k { flex: none; }
.cst-more { font-size: 11.5px; color: var(--text-faint); }
/* Key event side panel in the spd frame (owner, 2026-10-20) */
.mb-drawer.spd.ke-drawer { width: 560px; }
.ke-head { border-bottom: 0; padding-bottom: 10px; }
.ke-head .spd-titles h2 { word-break: break-word; }
.ke-head-tabs { flex: none; padding: 0 24px; border-bottom: 1px solid var(--border-soft); background: #fff; }
.ke-head-tabs .ke-tabs { position: static; display: flex; gap: 22px; margin: 0; padding: 0; border: 0; background: transparent; }
.ke-head-tabs .ke-tab { height: 42px; padding: 0 2px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-soft); font-weight: 500; }
.ke-head-tabs .ke-tab:hover { background: transparent; color: var(--text); }
.ke-head-tabs .ke-tab.is-on { background: transparent; box-shadow: none; border-bottom-color: var(--text); color: var(--text); font-weight: 600; }
.ke-drawer-body.spd-body { padding: 20px 24px 28px; }
.ke-drawer-body .ke-status { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; }
.ke-drawer-body .ke-status b { font-size: 15px; }
.ke-drawer-body .ke-slot { border-radius: 12px; padding: 12px 14px; }
.ke-drawer-body .ke-acts { gap: 2px; }
.ke-drawer-foot.spd-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.ke-drawer-foot .ke-actions { display: flex; justify-content: space-between; align-items: center; padding: 0; }
.ke-drawer-foot #ke-error { margin: 0; }
.ke-drawer-body .ke-byname { margin-bottom: 10px; }
.ke-drawer-body .ke-checks { gap: 4px; margin: 0 0 14px; }
.ke-drawer-body .ke-checks li { display: block; padding: 7px 10px 7px 12px; border-radius: 0 8px 8px 0; border-left: 3px solid #f59e0b; background: #fffaf2; font-size: 12.5px; }
.ke-drawer-body .ke-checks li.is-info { border-left-color: #93c5fd; background: #f5f8ff; }
.ke-drawer-body .ke-checks li.is-error { border-left-color: #dc2626; background: #fef5f5; }
.ke-drawer-body .ke-checks li strong { display: none; }
.ke-slot-lead { margin: 0 0 12px; }
/* Hover scrub on stacked charts (Bot traffic, GA4 Events): parts after the
   hovered bar go grey too; the panel lists the hovered bar's parts. */
.chart.is-scrub .bar-col.is-after .bar-segment { background: #dcdcd8 !important; opacity: .9; }
.chart.is-scrub .bar-col.is-at .bar-segment { opacity: 1; }
.cst-parts { display: grid; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft); }
.cst-part { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); }
.cst-pdot { flex: none; width: 8px; height: 8px; border-radius: 3px; }
.cst-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-part b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Key event side panel: the Accuracy tab (owner, 2026-10-20) */
.ke-acc { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; margin: 4px 0 10px; }
.ke-acc-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 64px 64px 128px; align-items: center; column-gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.ke-acc-row:last-child { border-bottom: 0; }
.ke-acc-row.is-head { padding-top: 8px; padding-bottom: 8px; background: var(--bg-soft); font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.ke-acc-row.is-head span:nth-child(n+3) { text-align: right; }
.ke-acc-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.ke-acc-ic img { border-radius: 3px; }
.ke-acc-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ke-acc-name b { font-weight: 600; }
.ke-acc-name em { font-style: normal; font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ke-acc-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ke-acc-num.is-exp { font-weight: 400; color: var(--text-soft); }
.ke-acc-pill { justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--bg-soft); color: var(--text-soft); }
.ke-acc-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ke-acc-pill.is-good { background: #e9f7ef; color: #15803d; } .ke-acc-pill.is-warn { background: #fff4e5; color: #b45309; }
.ke-acc-pill.is-bad { background: #fdecec; color: #b91c1c; } .ke-acc-pill.is-info { background: #eef4ff; color: #1d4ed8; }
.ke-acc-pill.is-ref { background: transparent; color: var(--text-faint); }
.ke-acc-row.is-off .ke-acc-name b { color: var(--text-soft); font-weight: 500; }
.ke-acc-row.is-off .ke-acc-ic { opacity: .55; }
/* Connection side panel: status in the header, no explanations once
   connected (owner, 2026-10-20) */
.spd-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.spd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-soft); color: var(--text-soft); }
.spd-chip em { font-style: normal; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; opacity: .8; }
.spd-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spd-chip.is-active { background: #e9f7ef; color: #15803d; }
.spd-chip.is-pending { background: #fff4e5; color: #b45309; }
.spd-chip.is-error { background: #fdecec; color: #b91c1c; }
#conn-modal.is-connected #conn-modal-body .ms-conn-head { display: none; }
/* Alerts inside the side panels (owner, 2026-10-20): a coloured left edge
   on a light tint, orange for warnings, red for errors, green for done. */
#conn-modal-body .gtm-note:not([hidden]), #ms-modal-body .gtm-note:not([hidden]) {
  display: block; margin: 14px 24px 0; padding: 10px 12px 10px 14px; border-left: 3px solid #f59e0b; border-radius: 0 10px 10px 0;
  background: #fffaf2; color: #92400e; font-size: 12.5px; line-height: 1.5; }
#conn-modal-body .gtm-note.gtm-note-bottom:not([hidden]) { margin: 0 24px 16px; }
#conn-modal-body .gtm-note[id$="-error"]:not([hidden]) { border-left-color: #dc2626; background: #fef5f5; color: #991b1b; }
#conn-modal-body .gtm-note[id$="-notice"][style*="success"]:not([hidden]) { border-left-color: #16a34a; background: #f0faf4; color: #15803d !important; }
#conn-modal-body .banner-warning, #ms-modal-body .banner-warning {
  margin: 14px 24px 0 !important; padding: 10px 12px 10px 14px; border: 0; border-left: 3px solid #f59e0b; border-radius: 0 10px 10px 0;
  background: #fffaf2; color: #92400e; font-size: 12.5px; line-height: 1.5; }
#conn-modal-body .banner-warning strong { color: #78350f; }
#conn-modal-body .banner-critical, #conn-modal-body .banner-error {
  margin: 14px 24px 0; padding: 10px 12px 10px 14px; border: 0; border-left: 3px solid #dc2626; border-radius: 0 10px 10px 0;
  background: #fef5f5; color: #991b1b; font-size: 12.5px; line-height: 1.5; }
/* Connection side panels: concise and premium (owner, 2026-10-20) */
#conn-modal-body .ms-conn { padding: 4px 0 8px; }
#conn-modal-body .form-row { padding: 16px 24px 4px; gap: 8px; border-bottom: 0; }
#conn-modal-body .form-row > label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
#conn-modal-body .form-row > label .hint { margin-top: 3px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
#conn-modal.is-connected #conn-modal-body .form-row > label .hint { display: none; }
#conn-modal-body .gtm-val:not(:has(.gtm-citem)):not(:has(.gtm-picker)):not(:has(select)) {
  align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
#conn-modal-body .gtm-val-main { padding-top: 0; font-size: 13.5px; flex-basis: 200px; }
#conn-modal-body .gtm-val-main .mono { font-size: 13px; }
#conn-modal-body .gtm-meta { font-size: 12px; margin-top: 2px; }
#conn-modal-body .gtm-actions .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
#conn-modal-body .gtm-citem { background: #fff; border-radius: 12px; padding: 11px 10px 11px 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
#conn-modal-body .gtm-citem + .gtm-citem { margin-top: 8px; }

/* Consent Mode card · Per event (2026-10-20) */
.cm2-pe-head, .cm2-pe-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 64px 48px 64px; align-items: center; gap: 14px; }
.cm2-pe-head { padding: 0 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.cm2-pe-head span:nth-child(n+3) { text-align: right; }
.cm2-pe-head .chm-sort { margin: -4px -6px; }
.cm2-pe-row { width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; transition: background .12s ease; }
.cm2-pe-row:hover, .cm2-pe-row.is-open { background: var(--bg-soft); }
.cm2-pe-row.is-open .cm2-pe-name { color: var(--accent); }
.cm2-pe-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm2-pe-name { overflow: hidden; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.cm2-pe-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cm2-pe-n { text-align: right; font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cm2-pe-more { justify-self: start; margin: 4px 10px 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--accent); cursor: pointer; }
.cm2-pe-more:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .cm2-pe-head, .cm2-pe-row { grid-template-columns: minmax(0, 1fr) 64px 44px; gap: 10px; }
  .cm2-pe-head span:nth-child(2), .cm2-pe-head span:nth-child(5), .cm2-pe-row .cm2-bar, .cm2-pe-n { display: none; }
}

/* Channel accuracy · events x platforms (2026-10-20, one line per row in
   its own colour since the owner's redesign) */
/* Header row edge to edge under the card header, same space above and
   below it (owner, 2026-10-20); rows keep their 14px inset. */
.chm-body { padding-top: 0; }
.chm-scroll { margin: 0 -24px; overflow-x: auto; }
.chm { display: grid; gap: 3px; min-width: calc(230px + var(--chm-cols) * 96px); padding: 0 14px 2px; }
.chm-row { --rc: #2563eb; position: relative; display: grid; grid-template-columns: minmax(170px, 2.2fr) repeat(var(--chm-cols), minmax(86px, 1fr)); align-items: center; column-gap: 4px; min-height: 42px; border-radius: 10px; transition: background .14s ease; }
.chm-row > * { position: relative; }
.chm-row > .chm-rbar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: var(--rc); opacity: .07; pointer-events: none; transition: opacity .14s ease; }
.chm-row:not(.chm-head):hover { background: color-mix(in srgb, var(--rc) 5%, transparent); }
.chm-row:not(.chm-head):hover > .chm-rbar { opacity: .13; }
.chm-head { min-height: 0; margin: 0 -14px 6px; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); border-radius: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--text-faint); }
.chm-head > span:first-child { padding-left: 12px; }
.chm-col { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 12px; white-space: nowrap; }
.chm-col-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); }
.chm-col-ic { display: inline-flex; }
.chm-col-ic img, .chm-col-ic svg { display: block; }
.chm-col .cha-connect { font-size: 11.5px; }
.chm-ev { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 12px; white-space: nowrap; }
.chm-dot { flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--rc); }
.chm-ev b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 12.5px/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--text); }
.chm-ev em { flex: none; padding: 2px 6px; border-radius: 5px; background: var(--bg-soft); font-size: 10.5px; font-style: normal; font-weight: 500; color: var(--text-faint); }
.chm-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--text); white-space: nowrap; cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
button.chm-cell:hover, .chm-cell.is-open { background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 22%, var(--border-soft)), 0 1px 3px rgba(15,23,42,.06); }
.chm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chm-cell[aria-busy] { opacity: .6; cursor: progress; }
.chm-cell strong { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chm-cell.is-ref strong { font-weight: 650; }
.chm-cell.is-off { color: var(--text-faint); cursor: default; }
.chm-pct { min-width: 40px; padding: 2px 0; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--bg-soft); color: var(--text-soft); }
.chm-pct.is-good { background: #e9f7ef; color: #15803d; }
.chm-pct.is-warn { background: #fff4e5; color: #b45309; }
.chm-pct.is-bad { background: #fdecec; color: #b91c1c; }
.chm-pct.is-info, .chm-pct.is-ask { background: #eef4ff; color: #1d4ed8; }
.chm-cell.is-ask .chm-pct { padding: 2px 8px; }

/* Analytics · Page views & key events chart (2026-10-20) */
.bt-dot.pk-dot-line { height: 3px; border-radius: 2px; }
.pk-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.pk-hint a { color: var(--accent); font-weight: 500; text-decoration: none; }
.pk-hint a:hover { text-decoration: underline; }
.bt-wrap.bt-focus .pk-line:not(.is-on) { opacity: .25; }
.pk-wrap { padding-top: 8px; }
.pk-axis-r { text-align: left; }
.pk-labels { gap: 0; padding-right: 46px; }
.pk-labels span { flex: 1; min-width: 0; white-space: nowrap; text-align: center; }
@media (max-width: 1280px) { .pk-labels.is-dense span:nth-child(even) { visibility: hidden; } }
.pk-chart { gap: 0; height: 200px; }
.pk-chart .bar-col { padding: 0 3px; }
@media (min-width: 900px) { .pk-chart .bar-col { padding: 0 5px; } }
.pk-chart .bar-segment { opacity: .5; }
.pk-chart .bar-col:hover .bar-segment, .pk-chart .bar-col:focus .bar-segment, .pk-chart.is-scrub .bar-col.is-at .bar-segment { opacity: .85; }
/* Layers (owner, 2026-10-20): fill, then the line, then the bars on top. */
.pk-line { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pk-line.pk-area { z-index: 0; }
.pk-chart { z-index: 2; }
.pk-line path[fill="none"] { stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pk-line-on path[fill="none"] { stroke: #2563eb; }
.pk-line-off { display: none; }
.pk-line-off path { stroke: #c9c9c4; }
.pk-plot.is-scrub .pk-line-off { display: block; }
.pk-plot.is-scrub .pk-line-on, .pk-plot.is-scrub .pk-area { clip-path: inset(-4px calc(100% - var(--scrub-x)) -4px -4px); }
.chart-point { position: absolute; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 3px rgba(15,23,42,.25); pointer-events: none; }

/* Page views chart · mini cards on top (2026-10-20, like datafa.st) */
.pk-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin: -4px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.pk-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 18px; border: 0; border-left: 1px solid var(--border-soft); background: none; font: inherit; color: var(--text); text-align: left; }
.pk-mini:first-child { padding-left: 0; border-left: 0; }
.pk-mini-l { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--text-soft); white-space: nowrap; }
.pk-mini-v { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-mini-s { font-size: 11.5px; line-height: 1.35; color: var(--text-faint); }
.pk-mini-s a { color: var(--accent); text-decoration: none; }
.pk-mini-s a:hover { text-decoration: underline; }
.pk-mini-line { display: inline-block; width: 12px; height: 3px; margin-right: 7px; border-radius: 2px; background: #2563eb; }
.pk-mini-stack { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; background: linear-gradient(180deg, #7c3aed 0 33%, #16a34a 33% 66%, #f59e0b 66%); }
button.pk-mini.is-live { cursor: pointer; border-radius: 0; transition: background .12s ease; }
button.pk-mini.is-live:hover .pk-mini-v { color: var(--accent); }
button.pk-mini.is-live:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .pk-minis { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .pk-mini { padding: 0 12px; }
  .pk-mini:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Channel accuracy · sortable headers (2026-10-20) */
.chm-head > span.chm-head-ev { padding-left: 8px; }
.chm-head .chm-col { padding-right: 6px; }
.chm-sort { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--text-faint); white-space: nowrap; cursor: pointer; transition: background .12s ease, color .12s ease; }
.chm-sort:hover { background: var(--bg-soft); color: var(--text-soft); }
.chm-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chm-sort .chm-col-name { color: inherit; }
.chm-sort-ic { flex: none; opacity: 0; transition: opacity .12s ease, transform .15s ease; }
.chm-sort:hover .chm-sort-ic { opacity: .45; }
.chm-sort.is-on { color: var(--text); }
.chm-sort.is-on .chm-sort-ic { opacity: 1; }
.chm-sort.is-on.is-asc .chm-sort-ic { transform: rotate(180deg); }

/* Channel accuracy · colour legend under the table (2026-10-20) */
.chm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); }
.chm-lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.chm-lg .chm-pct { min-width: 0; padding: 2px 7px; font-size: 11px; }

/* Account danger zone (owner, 2026-10-20): conditions as a checklist, a
   notice for non-owners, a quiet disabled button. Prefixed dz-. */
.dz-reqs { margin-top: 12px; }
.dz-reqs-label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); }
.dz-reqs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dz-reqs li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--text-soft); }
.dz-reqs li svg { flex: none; color: var(--text-faint); }
.dz-owner-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--border-soft); border-left: 3px solid #f59e0b; border-radius: 10px; background: #fffbf3; }
.dz-owner-note[hidden] { display: none; }
.dz-owner-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(245,158,11,.35); color: #b45309; }
.dz-owner-note strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dz-owner-note > div > span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.dz-role { display: inline-block; padding: 0 7px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); font-weight: 600; text-transform: capitalize; color: var(--text); }
.dz-row > .btn-danger:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.dz-row > .btn-danger:disabled:hover { background: var(--danger); border-color: var(--danger); }

/* Browser & device ring (owner, 2026-10-21): thin segmented ring, segments
   and rows highlight each other, share in the middle on hover. */
.bd-wrap { grid-template-columns: 184px minmax(0, 1fr); align-items: center; }
.bd-donut { width: 164px; height: 164px; margin: 0 auto; }
.bd-seg { transition: opacity .15s ease, stroke-width .15s ease; cursor: pointer; }
.bd-wrap.is-hl .bd-seg { opacity: .22; }
.bd-wrap.is-hl .bd-seg.is-on { opacity: 1; stroke-width: 11; }
.bd-center strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.bd-center span { max-width: 92px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 760px) { .bd-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Crawler chart hover (owner, 2026-10-21, like the other charts): dotted
   guide above the lines, coloured up to the day, grey after, dots, and the
   shared white panel with provider logos. */
.aic-guide { width: 1px; bottom: auto; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text) 30%, transparent) 0 4px, transparent 4px 9px); transform: translateX(-.5px); z-index: 3; }
.aic-svg-off { display: none; }
.aic-line-off { stroke: #d6d6d1; }
.aic-plot.is-scrub .aic-svg-off { display: block; }
.aic-plot.is-scrub .aic-svg-on { clip-path: inset(-6px calc(100% - var(--scrub-x)) -6px -6px); }
.aic-dots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.aic-dots i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
.aic-tip-logo { flex: none; display: inline-flex; align-items: center; }

/* Hover panel logos (bot chart, 2026-10-21) */
.cst-plogo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; }

.bim-chip-dot { width: 8px; height: 8px; margin: 0 4px; border-radius: 3px; background: #9ca3af; }

/* Crawlers card: View only / Hide per provider (2026-10-21), the bot
   legend's buttons on the provider rows. */
.aic-row:hover .bt-acts, .aic-row:focus-within .bt-acts { opacity: 1; pointer-events: auto; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc, #2563eb) 10%, #fff) 10px); }
.aic-row .bt-acts.is-on { opacity: 1; pointer-events: auto; background: none; }
.aic-row .bt-eye[data-aic-only]:hover, .aic-row .bt-eye[data-aic-only].is-active,
.aic-row .bt-eye[data-aic-hide]:hover { background: color-mix(in srgb, var(--rc, #2563eb) 22%, #fff); color: color-mix(in srgb, var(--rc, #2563eb) 80%, #000); }
.aic-row .bt-acts:has(.is-active) { opacity: 1; pointer-events: auto; }
.aic-row .bt-eye[data-aic-show]:hover { background: var(--success-soft); color: var(--success); }
.aic-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.aic-row.is-hidden { cursor: default; opacity: .55; padding-right: 40px; }
.aic-row.is-hidden:hover { background: transparent; }
.aic-row.is-hidden .aic-name { text-decoration: line-through; }
.aic-row.is-hidden .aic-count { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.aic-hidden-note { padding: 4px 8px 6px; font-size: 12px; color: var(--text-faint); }
@media (hover: none) { .aic-row .bt-acts { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; padding: 0; } }
.aic-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-faint); pointer-events: none; }

/* Bot traffic card · does GA4 record bots (owner, 2026-10-21) */
.bis { display: flex; align-items: center; gap: 12px; margin: -4px 0 6px; padding: 12px 14px; border: 1px solid var(--border-soft); border-left: 3px solid var(--text-faint); border-radius: 10px; background: #fff; }
.bis.is-yes { border-left-color: #f59e0b; background: #fffbf3; }
.bis.is-no { border-left-color: #16a34a; background: #f6fbf7; }
.bis.is-wait { border-left-color: #94a3b8; }
.bis-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text-soft); }
.bis.is-yes .bis-ic { color: #b45309; }
.bis.is-no .bis-ic { color: #15803d; }
.bis-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bis-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.bis-text span { font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.bis-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 5px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.bis-more:hover { color: var(--text); border-color: var(--border); }
.bim-list { display: grid; gap: 2px; }
.bim-li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.bim-li:last-child { border-bottom: 0; }
.bim-li-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bim-li-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bim-li-name.is-mono span { font: 500 12.5px/1.3 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.bim-li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bim-li-share { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.bd-seg[data-bd-seg="__other"] { cursor: default; }
.bd-row.is-hl { background: color-mix(in srgb, var(--rc) 10%, transparent); }

/* Product Hunt launch banner on the accounts hub (owner, 2026-10-23): the
   Product Hunt red as an atmosphere field (scripts/make-atmos.py
   brand-producthunt), white text, dismissible. */
.ph-banner {
  position: relative; display: flex; align-items: center; gap: 16px;
  margin: 0 0 28px; padding: 18px 20px 18px 22px; border-radius: 16px;
  color: #fff; overflow: hidden; isolation: isolate;
  background: #e0503f url('/assets/atmos/brand-producthunt.jpg') center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(180, 50, 35, 0.22);
}
.ph-banner[hidden] { display: none; }
.ph-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(120, 24, 16, 0.32), rgba(120, 24, 16, 0.05) 70%); }
.ph-banner-logo { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(100, 20, 10, 0.25)); }
.ph-banner-text { flex: 1; min-width: 0; }
.ph-banner-text strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ph-banner-text span { display: block; margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.ph-banner-cta {
  flex: none; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 650;
  color: #c8382a; background: #fff; text-decoration: none;
  box-shadow: 0 2px 8px rgba(100, 20, 10, 0.18); transition: transform .15s ease, box-shadow .15s ease;
}
.ph-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(100, 20, 10, 0.24); color: #c8382a; }
.ph-banner-close {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
}
.ph-banner-close:hover { background: rgba(255, 255, 255, 0.26); }
.ph-banner-close:focus-visible, .ph-banner-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .ph-banner { flex-wrap: wrap; align-items: flex-start; padding: 16px 52px 16px 16px; }
  .ph-banner-cta { margin-left: 56px; }
  .ph-banner-close { position: absolute; top: 12px; right: 12px; }
}

/* Chart context (owner, 2026-10-23): a marker shows its bar's white hover
   panel (js/chart-context.js), so the dark per-marker tooltip stays hidden;
   bars with data-ctx-bucket open the side panel. */
.ctx-row .ctx-badge .ctx-tip, .ctx-row .ctx-dots .ctx-tip { display: none !important; }
.chart > .bar-col[data-ctx-bucket] { cursor: pointer; }
.ctx-empty { margin: 4px 0 0; font-size: 14px; color: var(--text-soft, #55585e); }

/* ---------- Phone polish (owner 2026-10-25) ----------
   One block for the phone layout: no sideways scroll, tighter cards, two
   stats per row, and the explanations that wrapped to four lines either cut
   to two (card intros) or left to the desktop (card footnotes). */
/* A narrow stat card's corner link is only its arrow, so the label no longer
   needs the room the full "View card" pill took. */
@container (max-width: 230px) {
  .stat-card.has-jump .label { padding-right: 34px; }
}
/* A stacked panel header (720px and down) made the "flex: 1 1 280px" title
   block (logs page) 280px tall: a blank band above Live and Most recent
   requests. */
@media (max-width: 720px) {
  #logs-content .panel-header > .set-ph-main { flex: 0 0 auto; }
}
/* Consent Mode card: its one grid track grew to its widest row and ran
   past the card on a phone. */
.cm2-body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  /* Topbar: the domain picker (220px+) pushed the menu button and avatar off
     screen on every domain page. The domain header names the domain and the
     Domains page switches; the picker stays a desktop control. */
  .topbar { height: 56px; }
  .topbar h1 { font-size: 17px; }
  .topbar .domain-select, #export-log-btn, .topbar-right .partner-status-badge { display: none; }

  /* Cards: less padding and spacing, so the content gets the width. */
  .panel { margin-bottom: 16px; }
  .panel-header { padding: 16px; }
  .panel-body { padding: 16px; }
  .panel-footer { padding: 12px 16px; }
  /* The header icon tile took 60px of a 340px card; the title carries it. */
  .panel-header :is(.set-ph-ic, .pbx-ic) { display: none; }
  .panel-header h2 { font-size: 15.5px; }
  /* Card intros: two lines at most (one with a link stays whole). */
  .panel-header p:not(:has(a)) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Footnotes that only explain ("Click a hostname for ...") stay on desktop. */
  .panel-footer:has(> .note-soft:only-child) { display: none; }

  /* Stats: two per row; an odd count puts the first one full width. */
  .stats-grid, .stats-grid.stats-grid-2, .stats-grid.stats-grid-3, .stats-grid.stats-grid-5,
  .dtab-tiles, .dtab-tiles-2, .dtab-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .stats-grid > :first-child:nth-last-child(2n+1),
  .dtab-tiles > :first-child:nth-last-child(2n+1) { grid-column: 1 / -1; }
  .stat-card { padding: 14px; }
  .stat-card .label { font-size: 12px; margin-bottom: 4px; }
  .stat-card .value { font-size: 21px; }
  .stat-card .delta { font-size: 11.5px; line-height: 1.35; }
  .stat-card.has-jump .stat-jump, .info-tip.ph-info.is-corner { top: 10px; right: 10px; }
  .dtab-tile { padding: 14px; }
  .dtab-tile-label { font-size: 12px; }
  .dtab-tile-value { font-size: 21px; margin: 4px 0 2px; }
  .dtab-tile-sub { font-size: 11.5px; }
  .dtab-tile-go { display: none; }

  /* Domain header + tabs: tighter, and the tab row fades at the edge so it
     reads as scrollable. */
  .domain-head-main { gap: 12px; }
  .domain-head-main h2.dh-title { font-size: 19px; }
  .dh-fav { width: 40px; height: 40px; border-radius: 11px; }
  .domain-head-meta { flex-wrap: nowrap; font-size: 12.5px; }
  .domain-head-meta > .domain-region { flex: none; }
  .domain-head-meta > .container-id-field { display: none; }
  .domain-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .domain-head-actions { display: flex; gap: 8px; }
  .domain-head-actions .btn { flex: 1 1 0; justify-content: center; }
  .domain-tabs { margin-bottom: 16px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .domain-tab { padding: 10px 11px; }

  /* Charts: with more than seven dates, every other one is labelled, on one
     line instead of "12 / Oct" stacked. */
  .chart-labels { gap: 4px; }
  .chart-labels span { min-width: 0; display: flex; justify-content: center; white-space: nowrap; font-size: 10.5px; }
  .chart-labels:has(> span:nth-child(8)) > span:nth-child(even) { visibility: hidden; }

  /* Overview: the manager card is one compact row, the domain list shows
     name, status and requests (the row opens the domain), the setup list
     shows its titles. */
  .pm-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px; }
  .pm-avatar { width: 44px; height: 44px; font-size: 15px; }
  .pm-info { flex: 1 1 0; }
  .pm-name { font-size: 16px; }
  .pm-sub { display: none; }
  .pm-contact { gap: 6px; margin-top: 2px; }
  .pm-action { flex: 1 1 100%; }
  #overview-domains-panel-body .data-table :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(6)) { display: none; }
  #overview-domains-panel-body .data-table :is(th, td) { padding-left: 12px; padding-right: 12px; }
  /* The agency's version of that list (client accounts, js/domains.js
     adaptOverviewDomainsForAgency) as cards: the client, then domains and
     this cycle with their bars; the row opens the client. */
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) thead { display: none; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody tr:last-child { border-bottom: 0; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td { display: block; min-width: 0; padding: 0; border: 0; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(1) { grid-area: 1 / 1; align-self: center; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(6) { grid-area: 1 / 2; justify-self: end; align-self: center; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(3) { grid-area: 2 / 1; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(4) { grid-area: 2 / 2; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:is(:nth-child(2), :nth-child(5)) { display: none; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:is(:nth-child(3), :nth-child(4))::before { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(3)::before { content: 'Domains'; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td:nth-child(4)::before { content: 'This cycle'; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) tbody td[colspan] { grid-column: 1 / -1; }
  #overview-domains-panel-body .data-table:has(th[data-sort-key="grant"]) .pcl-use { min-width: 0; }
  #overview-domains-panel-body .data-table th { white-space: nowrap; font-size: 11px; }
  .overview-setup-item-desc { display: none; }

  /* Logs: "10s ago" on one line keeps every row one line high. */
  #logs-table td:first-child { white-space: nowrap; }

  /* Overview: requests and domains side by side, the cycle (used / limit
     and its end date) on its own full row. */
  #overview-stats-grid > :first-child { grid-column: auto; }
  #overview-quota-card { order: 1; grid-column: 1 / -1; }

  /* The back arrow and the setup checklist yield in a crowded topbar; the
     domain tabs and the menu cover both. */
  .topbar .back-link { display: none; }
  .topbar-right:has(#refresh-logs-btn) .setup-guide-wrap { display: none; }

  /* A header info button sits in the corner instead of on its own row. */
  .panel-header:has(> .ph-info:last-child) { position: relative; padding-right: 50px; }
  .panel-header > .ph-info:last-child { position: absolute; top: 14px; right: 14px; }

  /* Chart legends (bots, GA4 events): the "only this / hide" buttons were
     always shown on touch and sat on the percentages. A tap on the row
     opens the details; a hidden row keeps its button to bring it back. */
  .bt-row { grid-template-columns: 10px minmax(0, 1fr) auto 38px; }
  .bt-row:not(.is-hidden) > .bt-acts { display: none; }
  .bt-row.is-hidden > .bt-acts { position: absolute; opacity: 1; pointer-events: auto; }

  /* Two black round buttons sat on top of form fields and rows on every
     page. Support stays, in the corner (a ticket covers feedback too), and
     the page ends with room to scroll past it. */
  .feedback-widget { display: none; }
  .support-widget { right: 12px; }
  .content { padding-bottom: 76px; }

  /* Date range picker as a bottom sheet: presets as chips, the two dates
     side by side, one month (js/date-range.js), buttons always in reach. */
  #date-range-modal { align-items: flex-end; padding: 0; }
  #date-range-modal .modal { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  #date-range-modal .panel-header { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
  #date-range-modal .panel-header p { display: none; }
  .dr-layout { flex-direction: column; min-height: 0; }
  .dr-presets { flex-direction: row; flex-wrap: wrap; gap: 6px; width: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .dr-preset-item { padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: 999px; }
  .dr-preset-item.active { border-color: transparent; }
  .dr-main { padding: 14px 16px 6px; }
  .dr-inputs { gap: 10px; margin-bottom: 10px; }
  #date-range-modal .dr-inputs .form-row { min-width: 0; padding: 0; }
  .dr-inputs input { width: 100%; min-width: 0; }
  .dr-cal-nav { margin-bottom: 6px; }
  .dr-cal-nav-label { font-size: 14px; }
  .dr-cal-title { display: none; }
  .dr-cal-day { aspect-ratio: auto; height: 40px; font-size: 14px; }
  .dr-agg-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  #date-range-modal .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  #date-range-modal .modal-footer .btn { flex: 1 1 0; justify-content: center; }

  /* Billing: each invoice is one compact row (number + date | amount +
     status) instead of a five-column table that ran off the screen. */
  .panel:has(#invoices-tbody) table thead { display: none; }
  #invoices-tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  #invoices-tbody tr:last-child { border-bottom: 0; }
  #invoices-tbody td { padding: 0; border: 0; }
  #invoices-tbody td:nth-child(1) { grid-area: 1 / 1; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); }
  #invoices-tbody td:nth-child(2) { grid-area: 2 / 1; font-size: 12.5px; color: var(--text-faint); }
  #invoices-tbody td:nth-child(3) { grid-area: 1 / 2; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
  #invoices-tbody td:nth-child(4) { grid-area: 2 / 2; justify-self: end; }
  #invoices-tbody td:nth-child(5) { grid-column: 1 / -1; }
  #invoices-tbody td:nth-child(5):empty { display: none; }
  #invoices-tbody td.table-empty { grid-column: 1 / -1; text-align: center; }

  /* Billing: the auto-upgrade card keeps its text wide (no icon tile), the
     switch on the right. */
  .form-row.bil-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; }
  .bil-auto-ic { display: none; }
  /* Settings, Recent activity: what happened on top, who and when under it. */
  #activity-log-panel table thead { display: none; }
  #activity-log-tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  #activity-log-tbody tr:last-child { border-bottom: 0; }
  #activity-log-tbody td { padding: 0; border: 0; }
  #activity-log-tbody td:nth-child(1) { grid-column: 1 / -1; font-size: 13.5px; color: var(--text); }
  #activity-log-tbody td:nth-child(2), #activity-log-tbody td:nth-child(3) { font-size: 12px; color: var(--text-faint); }
  #activity-log-tbody td:nth-child(3) { text-align: right; white-space: nowrap; }
  #activity-log-tbody td.table-empty { grid-column: 1 / -1; text-align: center; }

  /* Agency Clients list as cards (owner 2026-10-25; the table stays on
     desktop): name and status on top, then plan and access, then domains and
     this cycle with their bars, then the actions. */
  .panel:has(#partner-clients-tbody) table thead { display: none; }
  #partner-clients-tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  #partner-clients-tbody tr:last-child { border-bottom: 0; }
  #partner-clients-tbody td { display: block !important; min-width: 0; padding: 0; border: 0; font-size: 13px; }
  #partner-clients-tbody td:nth-child(1) { grid-area: 1 / 1; }
  #partner-clients-tbody td:nth-child(6) { grid-area: 1 / 2; justify-self: end; align-self: center; }
  #partner-clients-tbody td:nth-child(2) { grid-area: 2 / 1; }
  #partner-clients-tbody td:nth-child(5) { grid-area: 2 / 2; }
  #partner-clients-tbody td:nth-child(3) { grid-area: 3 / 1; }
  #partner-clients-tbody td:nth-child(4) { grid-area: 3 / 2; }
  #partner-clients-tbody td:nth-child(7) { grid-column: 1 / -1; }
  #partner-clients-tbody td:nth-child(7):empty { display: none !important; }
  #partner-clients-tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5))::before { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
  #partner-clients-tbody td:nth-child(2)::before { content: 'Plan'; }
  #partner-clients-tbody td:nth-child(3)::before { content: 'Domains'; }
  #partner-clients-tbody td:nth-child(4)::before { content: 'This cycle'; }
  #partner-clients-tbody td:nth-child(5)::before { content: 'Access'; }
  #partner-clients-tbody td[colspan] { grid-column: 1 / -1; }
  #partner-clients-tbody td[colspan]::before { content: none; }
  #partner-clients-tbody .pcl-use { min-width: 0; }

  /* Slack card: no logo tile (like every other card on a phone), and its
     button full width under the text like the other header buttons, not
     centred on its own (.slk-head centres its items). */
  .slk-head { align-items: stretch; }
  .slk-head .slk-logo { display: none; }
  .slk-head-main { gap: 0; }
  .slk-head .slk-add { justify-content: center; }

  /* Crawler reasons: three equal tabs, label over count, no icon. */
  .aic-tabs { display: flex; }
  .aic-tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 1px; padding: 6px 4px; line-height: 1.25; }
  .aic-tab svg { display: none; }

  /* Tracking audit: the version picker + Run audit get their own full row. */
  #tm-tabs-area .tm-audit-controls { justify-content: stretch; }
  #tm-tabs-area .tm-audit-controls select { flex: 1 1 auto; min-width: 0; width: auto; }
}

/* Flag before a region name ("🇳🇱 Amsterdam"), js/domains.js regionHtml(). */
.region-flag { margin-right: 6px; }

/* The alerts bell only shows while an alert is open, at every width (owner
   2026-10-25); js/dashboard.js updateBadge() sets .has-open on the button.
   Resolved alerts stay on the Alerts page. */
.alert-bell-wrap:not(:has(.alert-bell-btn.has-open)) { display: none; }

/* Countries card on narrow screens (owner 2026-10-25): the metric menu stays
   in the card's top-right corner beside the title; Globe / Table goes under
   them. (A stacked header put the menu under the description.) */
@media (max-width: 720px) {
  #countries-panel > .panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  #countries-panel > .panel-header > .panel-header-filter { display: contents; }
  #countries-panel > .panel-header .mm { grid-column: 2; grid-row: 1; }
  #countries-panel > .panel-header .agg-toggle { grid-column: 1 / -1; }
  #countries-panel .mm-menu { width: min(270px, calc(100vw - 48px)); }
}

/* Kickback by client (owner 2026-10-25): the plan under the client's name,
   then Kickback, Share with client and You keep, the last with a bar for how
   much of the kickback stays with the agency. kbc-*. */
.kbc-plan { display: block; margin-top: 2px; font-size: 12px; color: var(--text-faint); }
.kbc-keep { display: flex; flex-direction: column; gap: 6px; min-width: 90px; }
.kbc-keep strong { font-size: 14px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.kbc-bar { display: block; width: 100%; max-width: 120px; height: 5px; border-radius: 999px; background: var(--bg-soft, #f1f1ee); overflow: hidden; }
.kbc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width .25s ease; }
#kickback-clients-tbody td:last-child { text-align: right; }
.kb-intro-short { display: none; }

@media (max-width: 640px) {
  .kb-intro-long { display: none; }
  .kb-intro-short { display: inline; }
  /* Kickback by client as cards: client, then kickback and you keep, then the
     share picker and Save. */
  .panel:has(#kickback-clients-tbody) table thead { display: none; }
  #kickback-clients-tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  #kickback-clients-tbody tr:last-child { border-bottom: 0; }
  #kickback-clients-tbody td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  #kickback-clients-tbody td:nth-child(1) { grid-column: 1 / -1; }
  #kickback-clients-tbody td:nth-child(2) { grid-area: 2 / 1; }
  #kickback-clients-tbody td:nth-child(4) { grid-area: 2 / 2; }
  #kickback-clients-tbody td:nth-child(3) { grid-area: 3 / 1; }
  #kickback-clients-tbody td:nth-child(5) { grid-area: 3 / 2; align-self: end; text-align: right; }
  #kickback-clients-tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4))::before { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
  #kickback-clients-tbody td:nth-child(2)::before { content: 'Kickback'; }
  #kickback-clients-tbody td:nth-child(3)::before { content: 'Share with client'; }
  #kickback-clients-tbody td:nth-child(4)::before { content: 'You keep'; }
  #kickback-clients-tbody .kickback-discount-input { width: 100%; }
  #kickback-clients-tbody td[colspan] { grid-column: 1 / -1; text-align: center; }
  #kickback-clients-tbody td[colspan]::before { content: none; }
  /* This quarter so far: client and earned on top, revenue and rate under. */
  .panel:has(#kickback-current-quarter-tbody) > .panel-body > table > thead { display: none; }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td { padding: 0; border: 0; }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; color: var(--text); }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td:nth-child(4) { grid-area: 1 / 2; text-align: right; font-weight: 650; }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td:nth-child(2) { grid-area: 2 / 1; font-size: 12.5px; color: var(--text-faint); }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td:nth-child(3) { grid-area: 2 / 2; text-align: right; font-size: 12.5px; color: var(--text-faint); }
  #kickback-current-quarter-tbody > tr:not(.kb-breakdown-row) > td:nth-child(2)::before { content: 'Revenue '; }
  #kickback-current-quarter-tbody > tr > td[colspan] { grid-column: 1 / -1; }
  #kickback-current-quarter-tbody .kb-breakdown-row td { display: block; overflow-x: auto; }
}

/* Partner badge variant toggles (js/partner-badge-page.js buildFilters):
   phones only; there the picked variant is the one card shown. */
.pbx-filter { display: none; }
@media (max-width: 640px) {
  .pbx-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  .pbx-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-soft, #f1f1ee); }
  .pbx-seg button { padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 550; color: var(--text-soft); cursor: pointer; }
  .pbx-seg button.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
  .pbx-grid .pbx-item:not(.is-selected) { display: none; }
}

/* Touch screens (owner 2026-10-25): a tap leaves the row in :hover, so the
   grey hover box stayed behind after every tap. On devices without a real
   hover, rows only shade while they are open or picked. */
@media (hover: none) {
  .data-table tr:hover td, .data-table tr.row-link:hover td, .entity-row:hover, .alert-row:hover, .onb-row:hover,
  .overview-setup-item:hover, .overview-alert-item:hover, .setup-guide-item:hover, .alert-bell-item:hover,
  .account-switcher-item:hover, .avatar-menu-item:hover, a.sd-p:hover, .ke-tr:hover, .abd-item:hover,
  #measurement-setup-panel .ms-suggest-item:hover, .dr-preset-item:not(.active):hover,
  .cty-row:not(.is-open):hover, .bt-row:not(.is-on):hover, .aic-row:not(.is-on):hover, .rt-row:not(.is-open):hover,
  .xl-row:not(.is-open):hover, .bd-row:not(.is-open):hover, .cm2-row:not(.is-open):hover, .cm2-pe-row:not(.is-open):hover {
    background: transparent;
  }
  .bt-row:not(.is-on):hover .bt-acts { background: none; }
}

/* Downloads, plugin cards (owner 2026-10-25): logo + name + version, file
   meta, one line on what it does, requirement chips, the install steps
   folded away, then the article link and Download. dl2-*. */
.download-card.dl2 { gap: 14px; padding: 20px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.dl2-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dl2-head .download-card-icon { flex: none; margin: 0; width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--border-soft); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.dl2-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl2-title h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.dl2-ver { padding: 2px 8px; border-radius: 999px; background: rgba(30,142,62,.1); color: var(--success); font-size: 11.5px; font-weight: 650; }
.dl2-meta { font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }
.download-card.dl2 p.dl2-sum { flex: none; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.dl2-req { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dl2-req li { padding: 3px 10px; border-radius: 999px; background: var(--bg-soft, #f6f6f3); border: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); }
.dl2-how { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-soft-2, #fafaf8); }
.dl2-how summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.dl2-how summary::-webkit-details-marker { display: none; }
.dl2-how summary::after { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -3px; color: var(--text-faint); transition: transform .15s ease; }
.dl2-how[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.dl2-how ol { margin: 0; padding: 0 14px 12px 32px; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.dl2 .download-card-footer { margin-top: auto; }
.dl2-more { font-size: 13px; font-weight: 600; color: var(--accent); }
.dl2 .download-card-footer .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .download-card.dl2 { padding: 16px; }
  .dl2 .download-card-footer { flex-wrap: wrap; }
  .dl2 .download-card-footer .btn { flex: 1 1 100%; justify-content: center; order: -1; }
}

/* Small hint under a form field (was only styled on the directory listing;
   the template builder's showed at body size). */
.form-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

/* GTM template builder (owner 2026-10-25): the stepper's lines stretch
   between the steps; the domain picker uses the field's width. */
.tw-stepper { flex-wrap: nowrap; }
.tw-step-line { flex: 1 1 26px; min-width: 12px; }
#tw-domain { width: 100%; }
@media (max-width: 900px) {
  .tw-step-line { display: block; }
}
@media (max-width: 640px) {
  /* one row of numbers, only the current step named */
  .tw-stepper { gap: 4px; margin-bottom: 16px; }
  .tw-step-pill { padding: 4px; gap: 0; font-size: 0; }
  .tw-step-pill.is-active { gap: 8px; padding-right: 8px; font-size: 13px; }
  .tw-step-pill .n { font-size: 12px; }
  .tw-step .form-row { padding-left: 0; padding-right: 0; }
  .tw-pair { flex-direction: column; }
  .tw-card { padding: 12px 14px; }
  .tw-nav .btn { flex: 1 1 0; justify-content: center; }
  .tw-nav #tw-next { margin-left: 0; }
}

.tw-step-pill { white-space: nowrap; }

/* Client accounts header on narrow screens (owner 2026-10-25): the "5 active"
   chip sat alone on a row between the text and the search; it goes in the
   top-right corner beside the title, the search full width under them. */
@media (max-width: 720px) {
  .panel-header.has-tsearch:has(.pcl-summary) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
  .panel-header.has-tsearch:has(.pcl-summary) > .set-ph-main { grid-area: 1 / 1; }
  .panel-header.has-tsearch:has(.pcl-summary) > .pcl-summary { grid-area: 1 / 2; justify-content: flex-end; }
  .panel-header.has-tsearch:has(.pcl-summary) > .tsearch { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

/* Agency overview client tiles: the gradient two-initial tile of the Clients
   page (was a grey one-letter square). */
.cl-name .cl-fav { width: 30px; height: 30px; border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); color: #fff; font-size: 11.5px; }
.cl-name .cl-fav.has-fav { background: #fff; border: 1px solid var(--border-soft); }

/* Domain settings section chips (js/domain-settings-nav.js, owner
   2026-10-25): one scrollable row under the domain tabs, kept under the
   topbar while scrolling; the card in view is marked. */
.dsn { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; margin: -8px 0 18px; padding: 8px 0; overflow-x: auto; scrollbar-width: none; background: rgba(249,249,247,0.92); backdrop-filter: blur(16px); }
.dsn::-webkit-scrollbar { display: none; }
.dsn-chip { flex: none; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 550; color: var(--text-soft); text-decoration: none; white-space: nowrap; }
.dsn-chip:hover { color: var(--text); text-decoration: none; }
.dsn-chip.is-on { background: var(--text); border-color: var(--text); color: #fff; }
@media (max-width: 640px) {
  .dsn { top: 56px; margin: -6px -16px 14px; padding: 8px 16px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  /* Tagging subdomain: the prefix keeps to its text so the domain after it
     shows whole instead of cut off. */
  .host-input input { flex: 0 0 8ch; min-width: 0; padding-right: 6px; }
  .host-input-suffix { white-space: normal; overflow-wrap: anywhere; padding: 9px 10px; font-size: 13px; }
}

/* A card's collapse arrow stays top-right on the title's line on narrow
   screens (owner 2026-10-25); a status badge sits just left of it, a button
   (Add subdomain) goes under the text. */
@media (max-width: 720px) {
  .panel-header:has(> .panel-header-end > .panel-toggle) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 10px 8px; }
  .panel-header:has(> .panel-header-end > .panel-toggle) > :first-child { grid-area: 1 / 1; }
  .panel-header:has(> .panel-header-end > .panel-toggle) > .panel-header-end { display: contents; }
  .panel-header-end > .panel-toggle { grid-area: 1 / 3; align-self: start; }
  /* level with the arrow button (owner 2026-10-25: it sat lower) */
  .panel-header-end > .badge { grid-area: 1 / 2; align-self: start; margin-top: 4px; }
  .panel-header-end > :not(.panel-toggle):not(.badge) { grid-column: 1 / -1; justify-self: stretch; }
}

/* Request log on phones (owner 2026-10-25): each request one compact item,
   the event and its status on top, when, how fast and who under it; a tap
   opens its details as before. The per-row info icons go (the row itself
   explains the request type once opened). */
@media (max-width: 640px) {
  #logs-table thead { display: none; }
  #logs-table, #logs-table > tbody { display: block; width: 100%; }
  #logs-table tr.log-row-expandable { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
  #logs-table tr.log-row-expandable > td { padding: 0; border: 0; min-width: 0; }
  #logs-table tr.log-row-expandable > td:nth-child(2) { grid-area: 1 / 1 / 2 / 4; }
  #logs-table tr.log-row-expandable > td:nth-child(3) { grid-area: 1 / 4; justify-self: end; white-space: nowrap; }
  #logs-table tr.log-row-expandable > td:nth-child(1) { grid-area: 2 / 1; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
  #logs-table tr.log-row-expandable > td:nth-child(4) { grid-area: 2 / 2; font-size: 12px; }
  #logs-table tr.log-row-expandable > td:nth-child(5) { grid-area: 2 / 3; font-size: 12px; }
  #logs-table tr.log-row-expandable > td:nth-child(6) { display: none; }
  #logs-table .log-info { display: none; }
  #logs-table .log-tag-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #logs-table .log-tag-cell { min-width: 0; }
  #logs-table tr.log-detail-row:not([hidden]) { display: block; border-bottom: 1px solid var(--border-soft); }
  #logs-table tr.log-detail-row > td { display: block; padding: 0 16px 12px; border: 0; }
  #logs-table tbody tr > td[colspan]:only-child { display: block; }
}

@media (max-width: 640px) { #logs-table .log-detail-params, #logs-table .log-detail { overflow-wrap: anywhere; } }

/* Live chart bars open their minute (domain-logs.html openLiveMinute). */
#live-panel .live-chart .bar-col[data-live-minute] { cursor: pointer; }
.lv-feed .sd-feed-row { gap: 9px; }
.lv-feed-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lv-feed-main .sd-ev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-feed-page { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-feed .badge { flex: none; }
.lv-feed .sd-ev { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
@media (max-width: 640px) { #ctx-panel .sd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Chart tooltips at the ends of a chart (owner 2026-10-25): centred over the
   first or last bars they ran past the card and the screen edge; there they
   open towards the chart instead. */
.chart > .bar-col:nth-child(-n+2) > .bar-tooltip { left: 0; transform: translateY(4px); }
.chart > .bar-col:nth-last-child(-n+2) > .bar-tooltip { left: auto; right: 0; transform: translateY(4px); }
.chart > .bar-col:is(:nth-child(-n+2), :nth-last-child(-n+2)):is(:hover, :focus) > .bar-tooltip { transform: translateY(0); }
.chart > .bar-col:nth-child(-n+2) > .bar-tooltip::after { left: 14px; transform: none; }
.chart > .bar-col:nth-last-child(-n+2) > .bar-tooltip::after { left: auto; right: 14px; transform: none; }

/* Long forms on phones (owner 2026-10-25): a card's Save row sticks to the
   bottom of the screen while that card is on screen, so it is always one tap
   away. overflow: clip instead of hidden keeps the card from becoming its
   own scroll box, which would stop the row from sticking. */
/* At every width since 2026-10-25 (owner: the domain settings Save was not
   sticky on a wide screen); the full-width button stays a phone thing. */
.panel:has(> .panel-footer .btn-primary), .panel:has(> .panel-body > .form-actions:only-child .btn-primary) { overflow: clip; }
.panel > .panel-footer:has(.btn-primary), .panel > .panel-body:has(> .form-actions:only-child .btn-primary) {
  position: sticky; bottom: var(--save-bar-bottom, 0px); z-index: 4;
  border-top: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  box-shadow: 0 -8px 18px -12px rgba(15, 23, 42, .25);
}
@media (max-width: 640px) {
  .panel > .panel-footer:has(.btn-primary), .panel > .panel-body:has(> .form-actions:only-child .btn-primary) { padding: 10px 16px; }
  .panel > .panel-footer:has(.btn-primary) .btn-primary, .panel > .panel-body > .form-actions:only-child .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* Request log filter bar (owner 2026-10-25): what to show, status, request
   type and bots filter the Live chart and the list together, so they sit in
   their own row above both; the list keeps its date range. lg-filterbar. */
.lg-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.lg-filterbar-selects { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.lg-filterbar-selects select { width: auto; min-width: 150px; }
@media (max-width: 640px) {
  .lg-filterbar { padding: 10px; gap: 8px; margin-bottom: 12px; }
  .lg-filterbar .lg-view-toggle { display: flex; width: 100%; }
  .lg-filterbar .lg-view-toggle .agg-toggle-btn { flex: 1 1 0; }
  .lg-filterbar-selects { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; }
  .lg-filterbar-selects select { min-width: 0; width: 100%; }
  .lg-filterbar-selects select:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tracking audit, Sources (owner 2026-10-25). The fold and its pill are a
   phone thing; the cards get a tighter phone layout: the logo beside the
   title, larger corner buttons, less padding. */
#tm-containers-panel .tm-src-toggle, #tm-containers-panel .tm-src-sum { display: none; }
@media (max-width: 640px) {
  #tm-containers-panel .tm-src-toggle { display: inline-flex; }
  #tm-containers-panel .tm-src-sum { display: inline-flex; }
  #tm-containers-panel.tm-src-closed > .panel-body { display: none; }
  #tm-containers-panel .tm-container-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #tm-containers-panel .tm-container-card { padding: 12px 14px; border-radius: 12px; background: #fff; }
  #tm-containers-panel .tm-container-head { margin-bottom: 8px; padding-right: 72px; }
  #tm-containers-panel .tm-src-head { flex-direction: row; align-items: center; gap: 12px; }
  #tm-containers-panel .tm-container-title { font-size: 14px; font-weight: 650; }
  #tm-containers-panel .tm-card-icons-corner { top: 12px; right: 12px; gap: 6px; }
  #tm-containers-panel .tm-icon-btn { width: 32px; height: 32px; border-radius: 9px; }
  #tm-containers-panel .tm-container-id { font-size: 13.5px; }
  #tm-containers-panel .tm-pills { margin-top: 8px; padding-top: 8px; }
}
@media (max-width: 640px) { #tm-containers-panel > .panel-header > .panel-header-end > .badge { grid-area: 2 / 1; justify-self: start; } }

/* Tracking audit, Scripts on your pages (owner 2026-10-25): script URLs one
   line each (full address on hover), the type as a chip, pages with a
   coverage bar. On phones each script is a card. tm-scr-*. */
.tm-scr-wrap { border: 1px solid var(--border-soft); border-radius: 12px; overflow: auto; background: #fff; }
.tm-scr-table { font-size: 13px; min-width: 820px; table-layout: fixed; }
.tm-scr-table td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.tm-scr-urls { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--text-faint); min-width: 0; }
.tm-scr-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-scr-type { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft, #f4f4f2); border: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.tm-scr-pages { white-space: nowrap; }
.tm-scr-n { font-variant-numeric: tabular-nums; }
.tm-scr-cov { display: block; width: 56px; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.tm-scr-cov i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.tm-scr-hits { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .tm-scr-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .tm-scr-table { display: block; min-width: 0; }
  .tm-scr-table thead { display: none; }
  .tm-scr-table tbody { display: grid; gap: 10px; }
  .tm-scr-table tr.tm-scr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; }
  .tm-scr-table tr.tm-scr-row > td { display: block; padding: 0; border: 0; min-width: 0; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(1) { grid-column: 1 / -1; }
  /* type, pages and requests as three labelled figures (owner 2026-10-25) */
  .tm-scr-table tr.tm-scr-row > td:is(:nth-child(2), :nth-child(4), :nth-child(5))::before { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
  .tm-scr-table tr.tm-scr-row > td:nth-child(2) { grid-area: 2 / 1; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(2)::before { content: 'Type'; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(4) { grid-area: 2 / 2; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(4)::before { content: 'Pages'; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(4) .tm-scr-cov { width: 100%; max-width: 110px; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(5) { grid-area: 2 / 3; text-align: right; font-size: 13px; color: var(--text); }
  .tm-scr-table tr.tm-scr-row > td:nth-child(5)::before { content: 'Requests'; }
  .tm-scr-table tr.tm-scr-row { align-items: start; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(3) { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-soft); }
  .tm-scr-table tr.tm-scr-row > td:nth-child(3)::before { content: 'Loaded by '; color: var(--text-faint); }
  .tm-scr-table tr.tm-scr-row > td:nth-child(6) { grid-column: 1 / -1; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(6):has(> div > span:only-child:not([class])) { display: none; }
}

/* Pop-up windows on phones (owner 2026-10-25): the close button stays on the
   title's line (a stacked header put it under the text). */
@media (max-width: 720px) {
  .modal > .panel-header, .modal > form > .panel-header { flex-direction: row; align-items: flex-start; gap: 12px; }
  .modal > .panel-header > .icon-btn, .modal > form > .panel-header > .icon-btn { flex: none; }
}
/* The invoice window's history: what happened and the amount on one line,
   the date under it. */
@media (max-width: 640px) {
  #invoice-history-modal table thead { display: none; }
  #invoice-history-tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  #invoice-history-tbody td { padding: 0; border: 0; }
  #invoice-history-tbody td:nth-child(2) { grid-area: 1 / 2; text-align: right; font-weight: 650; }
  #invoice-history-tbody td:nth-child(3) { grid-area: 2 / 1; font-size: 12px; color: var(--text-faint); }
  #invoice-history-tbody td.table-empty { grid-column: 1 / -1; }
}
/* Scripts panel notes: a long "via …" chip wraps as a rounded box. */
.tm-scr-table .tm-chip { white-space: normal; border-radius: 10px; text-align: left; }

/* Tracking audit, Scripts: the folds under the table (owner 2026-10-25) as
   rows with a title, a quiet line, a count and a turning chevron; the pages
   as a list with a loaded / not loaded dot. tm-fold, tm-page. */
.tm-fold { margin-top: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; overflow: hidden; }
.tm-fold-sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tm-fold-sum::-webkit-details-marker { display: none; }
.tm-fold-sum:hover { background: var(--bg-soft-2, #fafaf8); }
.tm-fold-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tm-fold-text strong { font-size: 13.5px; font-weight: 650; color: var(--text); }
.tm-fold-text span { font-size: 12.5px; color: var(--text-faint); }
.tm-fold-n { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft, #f4f4f2); font-size: 12px; font-weight: 600; color: var(--text-soft); text-align: center; font-variant-numeric: tabular-nums; }
.tm-fold-chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-soft); color: var(--text-soft); transition: transform .18s ease; }
.tm-fold[open] .tm-fold-chev { transform: rotate(180deg); }
.tm-fold-body { padding: 0 14px 14px; }
.tm-fold-body > .tm-scr-wrap { margin-top: 2px; }
.tm-pages { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); }
.tm-page { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
.tm-page:last-child { border-bottom: 0; padding-bottom: 0; }
.tm-page-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.tm-page-dot.is-ok { background: var(--success); box-shadow: 0 0 0 3px rgba(30, 142, 62, .14); }
.tm-page-dot.is-bad { background: var(--danger); box-shadow: 0 0 0 3px rgba(217, 48, 37, .14); }
.tm-page-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.tm-page-main a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.tm-page-meta { font-size: 12px; color: var(--text-faint); }
@media (hover: none) { .tm-fold-sum:hover { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tm-fold-chev { transition: none; } }

/* Script cards on phones, reordered (owner 2026-10-25): type and loaded by
   side by side, then pages and requests, then the notes. */
@media (max-width: 640px) {
  .tm-scr-table tr.tm-scr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(2) { grid-area: 2 / 1; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(3) { grid-area: 2 / 2; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(4) { grid-area: 3 / 1; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(5) { grid-area: 3 / 2; text-align: left; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(6) { grid-area: 4 / 1 / 5 / 3; }
  .tm-scr-table tr.tm-scr-row > td:nth-child(3)::before { content: 'Loaded by'; display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
}

/* Script notes, structured (owner 2026-10-25; js/domain-tag-manager.js
   notesHtml): issue and ok pills, then labelled details, then quiet facts. */
.tm-notes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-notes-none { color: var(--text-faint); }
.tm-notes-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-note { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.tm-note i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tm-note.is-issue { background: rgba(255, 138, 0, .12); color: #b45309; }
.tm-note.is-ok { background: rgba(30, 142, 62, .1); color: var(--success, #1a7f37); }
.tm-notes-kv { display: grid; gap: 3px; margin: 0; }
.tm-notes-kv > div { display: flex; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.4; }
.tm-notes-kv dt { flex: none; color: var(--text-faint); }
.tm-notes-kv dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.tm-notes-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--text-faint); }

/* Tracking audit, "Check a specific page" (owner 2026-10-25): a small card
   with the explanation, the audits left today, then the address and its
   button. tm-pcheck-*. */
.tm-pcheck { margin: 0 0 16px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-soft-2, #fafaf8); }
.tm-pcheck-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tm-pcheck-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); color: var(--accent); }
.tm-pcheck-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tm-pcheck-text strong { font-size: 13.5px; font-weight: 650; color: var(--text); }
.tm-pcheck-text > span { font-size: 12.5px; color: var(--text-soft); }
.tm-pcheck-left { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(0, 113, 227, .08); color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tm-pcheck-left.is-out { background: var(--bg-soft, #f4f4f2); color: var(--text-faint); }
.tm-pcheck-form { display: flex; gap: 8px; align-items: stretch; }
.tm-pcheck-field { position: relative; flex: 1; min-width: 0; margin: 0; }
.tm-pcheck-lead { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-faint); pointer-events: none; }
.tm-pcheck-field input { width: 100%; height: 38px; padding-left: 36px; background: #fff; }
.tm-pcheck-form .btn { flex: none; height: 38px; padding: 0 16px; }
@media (max-width: 640px) {
  .tm-pcheck { padding: 12px; }
  .tm-pcheck-form { flex-direction: column; }
  .tm-pcheck-form .btn { width: 100%; justify-content: center; }
}
/* the audits-left chip sits beside the title (owner 2026-10-25) */
.tm-pcheck-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tm-pcheck-title .tm-pcheck-left { padding: 1px 8px; font-size: 11.5px; }

/* The page check's send button sits inside the field, on the right
   (owner 2026-10-25). */
.tm-pcheck-field input { padding-right: 48px; }
.tm-pcheck-send { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.tm-pcheck-send:hover { background: var(--accent-dark, #005bb5); }
.tm-pcheck-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-pcheck-send:disabled { opacity: .4; cursor: default; }

/* A read-only value shown as a field (the region on domain settings): the
   look of input[readonly], but able to hold a spaced flag. */
.input-static { display: flex; align-items: center; min-height: 38px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft-2); color: var(--text-soft); font-size: 14px; line-height: 1.3; box-sizing: border-box; }

/* Subdomains card on phones (owner 2026-10-25): room above the first
   subdomain, and the Alert if silent switch flush right like the values
   above it (a desktop last-cell padding pushed it in). */
@media (max-width: 640px) {
  #sites-panel .sites-scroll { padding-top: 14px; }
  #sites-panel .sites-table td:last-child { padding-right: 0; }
}

/* Measurement setup footer: "Changes save automatically" as a small quiet line (owner 2026-10-25). */
#ms-status { font-size: 12px; line-height: 1.4; color: var(--text-faint); }
#measurement-setup-panel > .panel-footer:has(#ms-status) { padding-top: 10px; padding-bottom: 10px; }

/* Add a key event drawer (owner 2026-10-25): the name field with a search
   icon and Add beside it, then groups with a count, each event a bordered
   row with a round add button. */
.ke-drawer-body .ke-byname { gap: 8px; margin-bottom: 18px; }
.ke-drawer-body .ke-byname-field { height: 40px; margin: 0; padding: 0 12px; gap: 9px; border-radius: 10px; }
.ke-drawer-body .ke-byname .btn { height: 40px; padding: 0 16px; }
.ke-drawer-body .ke-h3 { margin: 4px 0 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.ke-h3-n { padding: 1px 7px; border-radius: 999px; background: var(--bg-soft, #f4f4f2); font-size: 11px; letter-spacing: 0; color: var(--text-soft); }
.ke-drawer-body .ke-picks { gap: 6px; margin-bottom: 18px; }
.ke-drawer-body .ke-pick { padding: 10px 10px 10px 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.ke-drawer-body .ke-pick:hover { background: #fff; color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, .08); }
.ke-drawer-body .ke-pick strong { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; font-weight: 600; }
.ke-drawer-body .ke-pick em { margin-top: 2px; }
.ke-pick-add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 113, 227, .08); color: var(--accent); }
.ke-drawer-body .ke-pick:hover .ke-pick-add { background: var(--accent); color: #fff; }
@media (hover: none) {
  .ke-drawer-body .ke-pick:hover { border-color: var(--border-soft); box-shadow: none; }
  .ke-drawer-body .ke-pick:hover .ke-pick-add { background: rgba(0, 113, 227, .08); color: var(--accent); }
}

/* Domain settings, Audit card (owner 2026-10-25): a result tile (headline,
   last run, Open the audit, then errors / warnings / tips counts), then the
   site crawl as a row with its switch. aud-*. */
.aud-body { display: flex; flex-direction: column; gap: 14px; }
.aud-result { padding: 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-soft-2, #fafaf8); }
.aud-result-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aud-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-result-text strong { font-size: 15px; font-weight: 650; color: var(--text); }
.aud-result-text span { font-size: 12.5px; color: var(--text-soft); }
.aud-result-top .btn { flex: none; }
.aud-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.aud-count { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--border-soft); }
.aud-count strong { font-size: 20px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.aud-count span { font-size: 12px; color: var(--text-soft); }
.aud-count.is-error:not(.is-zero) strong { color: var(--danger); }
.aud-count.is-warning:not(.is-zero) strong { color: #b45309; }
.aud-count.is-info:not(.is-zero) strong { color: var(--accent); }
.aud-count.is-zero strong { color: var(--text-faint); }
.aud-note { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }
.aud-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 4px 2px 0; }
.aud-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aud-row-text strong { font-size: 14px; font-weight: 600; color: var(--text); }
.aud-row-text span { font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.aud-row-toggle { flex: none; margin-top: 2px; }
/* the On switch stays top-right on a phone too */
@media (max-width: 720px) {
  #audit-panel > .panel-header { flex-direction: row; align-items: flex-start; gap: 12px; }
  #audit-panel > .panel-header > .audit-switch { flex: none; }
}
@media (max-width: 640px) {
  .aud-result { padding: 14px; }
  /* the button at the bottom of the tile, under the counts */
  .aud-result { display: flex; flex-direction: column; }
  .aud-result-top { display: contents; }
  .aud-result-text { order: 1; }
  .aud-counts { order: 2; margin-top: 12px; }
  .aud-note { order: 3; }
  .aud-result-top .btn { order: 4; width: 100%; justify-content: center; margin-top: 12px; }
}

/* The domain tab bar sticks under the topbar once scrolled past (owner,
   2026-10-25). Its paper backdrop runs into the content gutter so scrolled
   cards pass cleanly underneath; the settings section chips stack below it. */
.domain-tabs { position: sticky; top: 64px; z-index: 6; margin-left: -32px; margin-right: -32px; padding: 0 32px; background: rgba(249,249,247,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dsn { top: 106px; }
@media (max-width: 720px) {
  .domain-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
}
@media (max-width: 640px) {
  .domain-tabs { top: 56px; }
  .dsn { top: 98px; }
}

/* Tracking audit: the version picker + Run audit sit in their own row ABOVE
   the Audit / Containers / Proposed fixes tabs at every width (owner,
   2026-10-25), right-aligned on wide screens, full width on phones. */
#tm-tabs-area .tm-page-tabs-row { row-gap: 0; }
#tm-tabs-area .tm-audit-controls { order: -1; flex: 1 1 100%; justify-content: flex-end; margin-left: 0; min-width: 0; padding: 0 0 12px; }