:root {
  color-scheme: light;
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-2: #f7fafb;
  --surface-3: #edf2f4;
  --text: #11181b;
  --muted: #607077;
  --muted-2: #839096;
  --border: #dce4e7;
  --border-strong: #c7d2d6;
  --sidebar: #0a1718;
  --sidebar-2: #102224;
  --accent: #ff9e1c;
  --accent-2: #f17b10;
  --accent-soft: #fff2df;
  --success: #087d72;
  --success-soft: #dff5ef;
  --amber: #a8640f;
  --purple: #6555bd;
  --danger: #b42318;
  --danger-soft: #f8e2df;
  --shadow: 0 12px 28px rgba(18, 35, 40, 0.07);
  --shadow-soft: 0 1px 2px rgba(18, 35, 40, 0.05);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
  width: 100%;
}

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.24);
  color: #e8f0f1;
  padding: 26px 16px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  width: fit-content;
  margin: 2px 10px 30px;
}

.brand-logo {
  display: block;
  width: 116px;
  height: 42px;
  object-fit: contain;
}

nav {
  display: grid;
  gap: 6px;
}

.nav-section-label {
  color: #78898e;
  font-size: 11px;
  font-weight: 800;
  margin: 18px 12px 4px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav-secondary {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-secondary .nav-section-label {
  margin-top: 0;
}

nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: #b8c8cb;
  text-decoration: none;
  padding: 10px 12px 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  transition: background 140ms ease, color 140ms ease;
}

.nav-icon {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: #81979c;
  place-items: center;
  transition: color 140ms ease;
}

.nav-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-external-mark {
  margin-left: 4px;
  font-size: 0.85em;
  opacity: 0.65;
}

nav a.active,
nav a:hover {
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
}

nav a.active .nav-icon,
nav a:hover .nav-icon {
  color: var(--accent);
}

nav a.active {
  background: rgba(255, 158, 28, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 158, 28, 0.14);
}

nav a.active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

nav a:focus-visible,
button:focus-visible,
a.action-link:focus-visible {
  outline: 3px solid rgba(255, 158, 28, 0.32);
  outline-offset: 2px;
}

body.is-readonly .write-only {
  display: none;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

/* Admin-only VIEWS need no special cases now: non-admins are covered by the
   body:not(.is-admin) hide above (which out-specifies .view.active), and for
   admins the ordinary .view / .view.active rules apply. The previous trio of
   counter-rules existed only to undo `body.is-admin .admin-only { revert }`,
   which would otherwise have shown every inactive admin view at once. */

.workspace {
  max-width: 100%;
  padding: 28px 32px 40px;
  min-width: 0;
}

.invite-shell {
  display: grid;
  min-height: 100vh;
  background: var(--bg);
  padding: 24px;
  place-items: center;
}

.invite-panel {
  max-width: 520px;
  width: 100%;
}

.invite-brand-logo {
  display: block;
  width: 112px;
  height: auto;
  margin: 16px 16px 4px;
}

.invite-panel h1 {
  padding: 16px 16px 0;
}

.login-panel {
  padding-bottom: 20px;
  text-align: left;
}

.login-panel > p {
  padding: 0 16px;
}

.login-actions {
  padding: 22px 16px 6px;
}

.login-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.login-google-btn:hover {
  border-color: rgba(255, 158, 28, 0.55);
  box-shadow: var(--shadow-soft);
}

.login-switch-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.login-switch-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.login-error {
  margin: 14px 16px 0;
  padding: 10px 12px;
  border: 1px solid rgba(180, 35, 24, 0.4);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 650;
}

/* Same shape as .login-error, muted: "password saved, now sign in" is progress,
   not a failure. */
.login-notice {
  margin: 14px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-muted, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 16px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-form {
  display: block;
  padding: 14px 16px 6px;
}

.login-field {
  display: block;
  margin-bottom: 12px;
}

.login-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.login-field > input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

.login-field > input:focus {
  outline: none;
  border-color: rgba(255, 158, 28, 0.65);
  box-shadow: var(--shadow-soft);
}

.login-password-btn {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #ff9e1c);
  color: #1a1206;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 140ms ease;
}

.login-password-btn:hover {
  filter: brightness(1.05);
}

.login-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Invite page.
   One 16px gutter down the whole card. The logo, heading and login/reset pages
   already sit on 16px; the generic .form-grid brings its own 18px and the
   intro/result had none at all, so the left edges stepped in and out. Scoped to
   this panel so the shared heading rule -- which the login and reset pages also
   use -- keeps its alignment. */
.invite-panel .form-grid {
  padding: 16px;
}

.invite-intro {
  margin: 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.invite-result {
  margin: 0 16px 16px;
}

.invite-result:empty {
  margin: 0;
}

/* The password inputs sit in a wrapper so the Google opt-out can hide them as
   one unit -- which takes them out of .form-grid's grid, so the wrapper has to
   carry that rhythm itself or the labels inside collapse together. */
.invite-password-fields {
  display: grid;
  gap: 14px;
}

/* Explains the chosen sign-in method and carries the link that switches to the
   other one. It belongs to the field above it, so it hugs that rather than
   sitting midway between the fields and the button. */
.invite-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.invite-hint a {
  color: var(--text);
  font-weight: 650;
}

.login-footnote {
  padding: 4px 16px 8px;
  color: var(--muted-2);
  font-size: 12px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

h1, h2, p { margin: 0; }
h1 {
  font-size: 28px;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: 0;
}
h2 {
  font-size: 16px;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: 0;
}
p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

.topbar-actions {
  display: flex;
  align-items: end;
  gap: 14px;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  border: 1px solid rgba(255, 158, 28, 0.42);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  padding: 5px 6px 5px 10px;
}

.impersonation-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-banner button {
  min-height: 30px;
  padding: 0 10px;
}

.adsense-delayed { color: var(--danger); }

.metric-scope {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}

.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.account-menu-trigger:hover {
  border-color: rgba(255, 158, 28, 0.55);
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  flex: none;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 18px;
  align-items: start;
}

.profile-layout .profile-card {
  padding: 20px;
}

.profile-card h2 {
  margin-bottom: 4px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.profile-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.profile-identity-copy {
  min-width: 0;
  flex: 1;
}

.profile-identity-copy h2 {
  margin: 0;
}

.profile-email {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-role {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.profile-form {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.profile-form-actions {
  display: flex;
  gap: 8px;
}

.account-signout {
  margin-top: 14px;
}

.account-signout a {
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.account-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-key-reveal {
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
}

#impersonationSearch {
  width: 100%;
  margin: 10px 0;
}

.impersonation-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.impersonation-candidate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: none;
  text-align: left;
  font-weight: 500;
}

.impersonation-candidate:hover {
  border-color: rgba(255, 158, 28, 0.55);
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}

.impersonation-candidate-copy {
  display: grid;
  min-width: 0;
}

.impersonation-candidate-copy strong {
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-candidate-copy small {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 6px 2px;
}

@media (max-width: 960px) {
  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.user-badge {
  align-self: center;
  max-width: 280px;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input, select, textarea, button {
  font: inherit;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  min-height: 40px;
  padding: 9px 11px;
  outline: none;
  box-shadow: var(--shadow-soft);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 158, 28, 0.18), var(--shadow-soft);
}

/* Flex centering, not UA magic: Safari does not vertically center a button
   label when the height comes from min-height alone (Chrome does), which left
   every label hugging the top edge there. Keep this selector a bare `button`
   at (0,0,1) -- class-level display overrides (.report-date-trigger's grid,
   .report-ad-results' block ellipsis) must keep winning -- and keep
   justify-content:center, which replaces the UA's centered text-align that a
   flex button no longer gets. Full-width flex buttons that pack left declare
   their own justify-content: flex-start (sort headers, impersonation rows). */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-2);
  border-radius: 8px;
  background: var(--accent);
  color: #241400;
  min-height: 40px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(138, 73, 6, 0.15);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease,
    transform 140ms ease;
}

button:hover {
  background: #ffac36;
  box-shadow: 0 8px 18px rgba(138, 73, 6, 0.12);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button.secondary {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

button.secondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}

button[hidden] {
  display: none;
}

a.action-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metrics div,
.main-panel,
.detail-panel,
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metrics div {
  position: relative;
  min-height: 86px;
  padding: 17px 18px;
  overflow: hidden;
}

.metrics div::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 10px;
}

.metrics strong {
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.pixels-split {
  grid-template-columns: minmax(0, 1fr) 420px;
}

.team-split {
  grid-template-columns: minmax(0, 1fr) 420px;
}

.user-detail-form .user-key-manage {
  display: grid;
  gap: 8px;
}

.pixels-split .main-panel table {
  min-width: 0;
}

.pixel-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-mappings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.event-mapping-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.event-mapping-row .em-event,
.event-mapping-row .em-meta {
  flex: 1 1 130px;
  min-width: 0;
}

.event-mapping-row .em-value {
  flex: 0 0 78px;
}

.event-mapping-row .em-currency {
  flex: 0 0 56px;
  text-transform: uppercase;
}

.event-mapping-row .em-capi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.meta-connection-status {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.92em;
  margin-bottom: 12px;
}

.meta-connection-status[data-state="connected"] {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.meta-connection-status[data-state="error"] {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.meta-connection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pixel-capi-health {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pixel-capi-health .meta-connection-status {
  flex: 1 1 220px;
  margin-bottom: 0;
}

/* The example request from a postback test fire. Long tracking URLs must wrap
   rather than stretch the detail panel. */
.postback-test-request {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.82em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The Meta connection card sits directly in the panel, whose header and forms
   carry their own 18px inset -- match it so the status bar, org picker, and
   default-pixel block line up with them instead of running edge to edge.

   Class-only selectors on purpose: both blocks below are .admin-only, and an
   id here would score (1,1,0) against the (0,2,1) of
   `body:not(.is-admin) .admin-only` -- which is precisely how admin chrome
   leaked into partner sessions before (see the role-gating block at the end of
   this file). Keep these at (0,1,0) so the hide rule always wins. */
.meta-connection-org,
.pixel-meta-admin {
  display: block;
  margin: 0 18px 12px;
}

.main-panel > .meta-connection-status {
  margin-left: 18px;
  margin-right: 18px;
}

.pixel-meta-admin .org-section-heading,
.pixel-meta-admin .field-hint {
  margin-left: 0;
  margin-right: 0;
}

.ads-inventory-split:not(.has-selected-ad) {
  grid-template-columns: minmax(0, 1fr);
}

.article-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
}

.article-tab {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.article-tab.active {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.article-tab:hover {
  transform: none;
}

.article-tab-panel {
  display: none;
}

.article-tab-panel.active {
  display: block;
}

.article-tab-panel.admin-only.active {
  display: none;
}

body.is-admin .article-tab-panel.admin-only {
  display: none;
}

body.is-admin .article-tab-panel.admin-only.active {
  display: block;
}

.full-panel {
  width: 100%;
}

.main-panel,
.detail-panel,
.panel {
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

.panel-header.compact {
  padding-bottom: 14px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.toolbar select {
  max-width: 220px;
}

.toolbar input[type="search"] {
  max-width: 320px;
}

.toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  min-width: 180px;
}

/* Checkbox filters have to opt out of two rules written for the toolbar's
   select controls: the label grid above (which stacks the box on top of its
   own text) and the global `input` sizing (which stretches the box to a
   full-width 40px panel). Keep them a plain inline row instead. */
.toolbar .ads-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.toolbar .ads-toggle input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

/* The `box-shadow: none` above outranks the `input:focus` ring that every other
   control focuses with, and the global `outline: none` already dropped the one
   the browser supplies -- so without this the box has no focus indicator at all.
   Give it the outline the nav and buttons use rather than the shadow ring,
   which reads poorly on a 13px box. */
.toolbar .ads-toggle input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(255, 158, 28, 0.32);
  outline-offset: 2px;
}

.toolbar .ads-toggle:hover {
  color: var(--accent-2);
}

.table-wrap {
  overflow: auto;
}

/* Same 18px inset as the panel header, toolbar, and first table column above
   it, so the count and Load more line up with the rest of the card instead of
   hugging its edge. */
.ads-load-more {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 14px;
}

.ads-count {
  font-size: 12px;
  color: var(--muted);
}

.ads-load-more #adsSentinel {
  flex: 1;
  height: 1px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}

th, td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

th {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 800;
}

tr:hover td {
  background: #fff8ef;
}

.table-select {
  min-width: 220px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
}

.table-input {
  min-width: 190px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.compact-status-select {
  min-width: 120px;
}

.compact-number-input {
  min-width: 130px;
}

.table-input-stack {
  display: grid;
  gap: 6px;
}

.article-title {
  font-weight: 700;
}

.article-url {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
}

.article-table {
  min-width: 1040px;
}

/* The Ads catalog is the widest table in the app -- eleven columns plus six
   row actions -- and the global 18px cell inset spent close to 400px of a
   laptop viewport on padding alone. It runs denser: 12px between columns,
   with the outer cells keeping the panel's 18px inset so the first column
   stays flush with the header and toolbar above it. Everything here is
   scoped to .article-table on purpose; .article-url and .row-actions are
   shared with the Users, Pixels, and Domains tables. */
.article-table th,
.article-table td {
  padding: 10px 12px;
}

.article-table th.article-sort-header {
  padding: 0;
}

.article-table .article-sort-button {
  min-height: 40px;
  padding: 10px 12px;
}

.article-table th:first-child .article-sort-button,
.article-table td:first-child {
  padding-left: 18px;
}

.article-table th:last-child,
.article-table td:last-child {
  padding-right: 18px;
}

/* The landing-page column is the one that should flex. Auto table layout
   hands every column its minimum first, and this one's minimum was being set
   by the longest unbreakable URL segment -- which squeezed the title and
   source lines into a 240px stack five or six lines tall. A 320px floor keeps
   the URL and source to two lines each; on wider screens the column takes
   the slack. `overflow-wrap: anywhere` is the safety net for a URL with no
   break opportunity at all. */
.article-table td:first-child {
  min-width: 320px;
}

.article-table .article-url {
  overflow-wrap: anywhere;
}

/* Six actions on one line forced a 433px column that sat off-screen at
   laptop width -- and, since the table was already at its minimum, the
   buttons themselves wrapped ("Copy" / "Link"). A fixed three-across grid
   stacks them in two tidy rows: it is 240px wide, and two 30px buttons fit
   inside the row height the landing-page stack already needs. */
.article-table .row-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 6px;
  justify-content: end;
}

.article-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.article-sort-label {
  display: block;
  min-width: 0;
}

.article-sort-button:hover {
  background: var(--accent-soft, #fff7ec);
  box-shadow: none;
  transform: none;
}

.article-sort-button:active {
  transform: none;
}

.article-sort-button.is-sorted {
  color: var(--text);
}

.article-sort-indicator {
  min-width: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.article-sort-button.is-sorted .article-sort-indicator {
  color: currentColor;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  /* Keep two-word labels like "no ads" on one line; the narrow Google column
     was breaking them at the space into a lopsided two-row pill. */
  white-space: nowrap;
}

.status.published { background: var(--success-soft); color: #09675f; }
/* The Ads catalog reports a landing page as live or archived and nothing else;
   `live` covers published and ready alike, since whether Google is filling the
   page is the Google column's business, not a stage of publishing. */
.status.live { background: var(--success-soft); color: #09675f; }
/* Google filling the page is good news; Google serving it nothing is a warning
   worth reading across a column, not an error -- a new ad starts here. */
.status.google-live { background: var(--success-soft); color: #09675f; }
/* Domains page: which platform the domain's live DNS actually serves through.
   nemo2 is the migration goal, so those rows carry a full-row highlight too. */
.status.serving-nemo2 { background: var(--success-soft); color: #09675f; }
.status.serving-nemo1 { background: #eef2f7; color: #52606d; }
.status.serving-other { background: #fff4d8; color: var(--amber); }
tr.serving-nemo2-row td { background: #f2faf6; }
tr.serving-nemo2-row.selected-row td { background: var(--surface-2); }
.status.google-no-ads { background: #fff4d8; color: var(--amber); }
.status.draft { background: #eef2f7; color: #52606d; }

.adsense-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 780;
}
.adsense-badge.adsense-ready { background: var(--success-soft); color: #09675f; }
.adsense-badge.adsense-attention { background: var(--danger-soft); color: var(--danger); }
.adsense-badge.adsense-review { background: #fff4d8; color: var(--amber); }
.adsense-badge.adsense-unknown { background: transparent; color: var(--muted-2); }
.status.pending { background: #fff4d8; color: var(--amber); }
.status.generating {
  background: #e6f0ff;
  color: #1d4ed8;
  animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.status.paused { background: #eeeafd; color: var(--purple); }
.status.archived { background: var(--danger-soft); color: var(--danger); }
/* A compliance failure reads as its own state rather than as "archived", so it
   needs its own badge: amber, because it is something to look at, not a neutral
   end state like an archived run. */
.status.failed { background: #fff4d8; color: var(--amber); }
.status.network,
.status.editorial,
.status.domain_library,
.status.template { background: #e7f0f4; color: #34535d; }
.status.active,
.status.accepted { background: var(--success-soft); color: #09675f; }
.status.revoked,
.status.expired { background: var(--danger-soft); color: var(--danger); }
.status.ready { background: var(--success-soft); color: #09675f; }
.status.warning { background: #fff4d8; color: var(--amber); }
.status.blocked,
.status.inactive { background: var(--danger-soft); color: var(--danger); }

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

.row-actions button {
  min-height: 30px;
  padding: 0 10px;
}

tr.selected-row td {
  background: var(--accent-soft);
}

.form-grid {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

/* A checkbox + its wording read as one line. Without this the grid label rule
   above stacks them, and the box gets the full-width input treatment -- which
   is how the Conversions API toggle had been rendering. */
.form-grid label.checkbox-inline,
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-inline input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: 0 0 auto;
}

.form-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.form-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.3;
}

.form-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-actions.single-action {
  grid-template-columns: 1fr;
}

.form-actions button {
  width: 100%;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.form-notice {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checkbox-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkbox-fieldset legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.form-grid label.check-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  box-shadow: var(--shadow-soft);
}

.form-grid label.check-card:has(input:checked) {
  border-color: rgba(255, 158, 28, 0.6);
  background: var(--accent-soft);
}

.check-card input {
  flex: 0 0 auto;
  width: auto;
  inline-size: 14px;
  block-size: 14px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent-2);
}

.check-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-panel,
.view-panel {
  margin-top: 16px;
}

.report-control-panel {
  position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

/* The reporting section is a .panel, and .panel clips (overflow: hidden) so
   table backgrounds honor its rounded corners. That same clip cut the date
   menu and the ad type-ahead off at the panel's bottom edge: both are
   absolutely positioned INSIDE the section, so with a short result (one
   grouped row is the everyday case under Today/Yesterday) the calendar's
   Cancel/Apply row sat below the panel and a custom range could never be
   applied. The reporting panel therefore does not clip; its first and last
   children round their own outer corners instead (the panel's 8px radius
   minus its 1px border). Doubled class beats .panel regardless of order. */
.panel.reporting-panel {
  overflow: visible;
}

.reporting-panel .report-control-panel {
  border-radius: 7px 7px 0 0;
}

.reporting-panel .report-table {
  border-radius: 0 0 7px 7px;
}

.report-group-head {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted, #64748b);
  padding: 8px 12px 2px;
  border-bottom: 1px solid var(--border);
}

.report-group-spacer {
  border-bottom: 1px solid var(--border);
}

.reporting-panel.is-report-loading .report-control-panel::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 158, 28, 0.35) 30%,
    var(--accent) 50%,
    var(--success) 70%,
    transparent 100%
  );
  background-size: 220% 100%;
  content: "";
  animation: report-loading-sweep 1.35s linear infinite;
}

.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: end;
  padding: 16px 18px 12px;
}

.report-filter-group {
  display: grid;
  gap: 7px;
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.report-filter-date {
  flex-basis: 680px;
  flex-grow: 1.6;
}

.report-filter-scope {
  flex-grow: 1.35;
  flex-basis: 420px;
}

.report-filter-group legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.report-field-grid {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.report-filter-date .report-field-grid {
  grid-template-columns: minmax(118px, 1fr) repeat(2, minmax(104px, 0.86fr));
}

.report-date-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 9px;
  align-items: start;
  min-width: 0;
}

.report-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.report-date-chip,
.report-date-trigger,
.report-date-menu button {
  box-shadow: none;
  transform: none;
}

.report-date-chip,
.report-date-menu-presets button {
  min-height: 34px;
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  font-weight: 700;
}

.report-date-chip:hover,
.report-date-menu-presets button:hover {
  border-color: #c9d7f8;
  background: #f7faff;
  box-shadow: none;
  transform: none;
}

.report-date-chip.active,
.report-date-menu-presets button.active {
  border-color: #c4d7ff;
  background: #e8f0fe;
  color: #0b57d0;
}

.report-date-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 0 12px;
  align-items: center;
  min-height: 38px;
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.report-date-trigger:hover {
  border-color: #b8c7ea;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transform: none;
}

.report-date-trigger span:first-child {
  display: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.report-date-trigger strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-date-trigger-caret {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.report-date-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 160px minmax(360px, 1fr);
  width: min(760px, calc(100vw - 72px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 54px rgba(13, 34, 45, 0.18);
}

.report-date-menu[hidden] {
  display: none;
}

.report-date-menu-presets {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 8px;
  border-right: 1px solid var(--border);
  background: #fbfdff;
}

.report-date-menu-presets button {
  justify-content: flex-start;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  text-align: left;
}

.report-date-menu-panel {
  display: grid;
  gap: 9px;
  padding: 12px 14px 10px;
}

.report-date-draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.report-date-draft-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.report-date-draft-row input {
  max-width: none;
  min-height: 38px;
}

.report-date-draft-separator {
  padding-bottom: 11px;
  color: var(--muted);
}

.report-date-calendar-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
}

.report-date-calendar-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  text-align: center;
}

.report-date-calendar-head button {
  min-height: 34px;
  padding: 0;
  border-color: transparent;
  background: #ffffff;
  color: #5f6d74;
  font-size: 22px;
  line-height: 1;
}

.report-date-calendar-head button:hover {
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: none;
  transform: none;
}

.report-date-weekdays,
.report-date-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: 3px;
}

.report-date-weekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-align: center;
}

.report-date-calendar-grid {
  min-height: 192px;
  align-content: start;
}

.report-date-day {
  min-height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.report-date-day:hover {
  border-color: #c4d7ff;
  background: #f3f7ff;
  box-shadow: none;
  transform: none;
}

.report-date-day.is-empty {
  min-height: 30px;
}

.report-date-day.is-in-range {
  border-radius: 6px;
  background: #eef4ff;
  color: #174ea6;
}

.report-date-day.is-today:not(.is-selected) {
  border-color: #1a73e8;
  color: #0b57d0;
}

.report-date-day.is-selected {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #ffffff;
}

.tz-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.report-date-menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.report-date-menu-actions .tz-note {
  margin-right: auto;
}

.report-date-menu-actions button {
  min-height: 34px;
}

.report-date-menu-actions button:first-child {
  border-color: transparent;
  background: #ffffff;
  color: #0b57d0;
}

.report-date-menu-actions button:first-child:hover {
  background: #f3f7ff;
}

.report-date-menu-actions button:last-child {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #ffffff;
}

.report-date-menu-actions button:last-child:hover {
  background: #1765c1;
}

.report-date-menu-actions button:hover {
  box-shadow: none;
  transform: none;
}

.report-date-native-state {
  display: none;
}

.report-filter-scope .report-field-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Partners see one fewer scope control (Publisher is admin-only). */
body.is-partner .report-filter-scope .report-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.report-filters input,
.report-filters select {
  max-width: none;
  min-width: 0;
}

.report-filters .admin-only {
  display: none;
}

body.is-admin .report-filters .admin-only {
  display: grid;
}

.report-filter-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  min-width: 78px;
}

.report-ad-filter {
  position: relative;
}

.report-ad-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow);
}

.report-ad-results button {
  /* Stays block: text-overflow ellipsis does not truncate a flex container's
     anonymous text item. line-height 20 + 7px padding = the 34px min-height,
     so Safari centers without the flex fix. */
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  line-height: 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-ad-results button:hover {
  background: var(--accent-soft);
  transform: none;
  box-shadow: none;
}

.report-ad-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
}

.report-dimension-row {
  display: flex;
  /* The right side holds two unshrinkable nowrap controls (Hide no revenue +
     Reset sort); without wrap they crush the group-by chips to slivers on
     narrow viewports instead of dropping to their own line. */
  flex-wrap: wrap;
  row-gap: 10px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.report-state-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.report-state-row .report-loading-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  white-space: nowrap;
}

/* Same "still working" chip as the Reporting page, but usable in any panel
   header -- the Dashboard and Ads pages run the same load cycle and were the
   only ones that showed nothing while it ran. */
.view-loading-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}

.view-loading-status[hidden] {
  display: none;
}

.report-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(8, 125, 114, 0.22);
  border-top-color: var(--success);
  border-radius: 999px;
  animation: report-loading-spin 760ms linear infinite;
}

.dimension-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.dimension-picker label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.dimension-picker label:has(input:checked) {
  border-color: rgba(255, 158, 28, 0.64);
  background: var(--accent-soft);
}

/* Hide-no-revenue + Reset sort travel as ONE right-aligned group: on a tight
   row flex would otherwise shrink the chip picker into extra lines and wedge
   these controls into the middle of the chip grid (reads as overlap) instead
   of wrapping them. The group wraps as a unit; under 900px it takes a full
   line of its own (see the media query). */
.report-display-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Display filter, deliberately NOT styled as a group-by chip: right-aligned
   past a divider so it reads as its own control. */
.report-hide-no-revenue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  min-height: 32px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.report-hide-no-revenue input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

body.is-admin .dimension-picker .admin-only {
  display: inline-flex;
}

.dimension-picker input {
  width: auto;
  min-height: 0;
  inline-size: 14px;
  block-size: 14px;
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent-2);
}

.report-state-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.report-result-status {
  color: var(--text);
}

#reportRefresh:disabled {
  border-color: rgba(241, 123, 16, 0.44);
  background: #ffd39a;
  cursor: progress;
  transform: none;
}

#reportRefresh:disabled:hover {
  box-shadow: 0 1px 2px rgba(138, 73, 6, 0.15);
}

.reporting-panel.is-report-loading .report-summary strong {
  animation: report-value-pulse 1.35s ease-in-out infinite;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border-bottom: 1px solid var(--border);
}

body.is-partner .report-summary {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.report-summary div {
  padding: 15px 18px;
  border-right: 1px solid var(--border);
}

.report-summary div:last-child {
  border-right: 0;
}

.report-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 7px;
}

.report-summary strong {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  border-bottom: 1px solid var(--border);
}

.report-block {
  padding: 18px;
}

.report-block:first-child {
  border-right: 1px solid var(--border);
}

.report-block h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 780;
  margin: 0 0 12px;
}

/* The window this chart covers, on the title's own line rather than orphaned
   between the title and the first bar (where it read as a data row). Left
   aligned right after the heading; the timezone is stated once in the panel
   header, so it is not repeated per block. */
.block-scope {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.report-bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 162px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

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

.bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-2);
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-2);
}

/* Revenue and visits get their own fixed sub-columns rather than sharing one
   right-aligned string: with a single cell only the trailing text lined up, so
   the dollar amounts read as ragged down the list. The widths are fixed (not
   auto) because each row is its own grid -- auto would size per row and the
   columns still would not agree. tabular-nums keeps digits the same width so
   the numbers align optically as well as by edge. */
.bar-value {
  display: grid;
  grid-template-columns: 66px 88px;
  gap: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-revenue {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-visits {
  white-space: nowrap;
}

.top-ads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.top-ads-table th {
  text-align: left;
  padding: 10px 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.top-ads-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--muted);
}

.top-ads-table tbody tr:last-child td {
  border-bottom: none;
}

.top-ads-table tbody tr:hover td {
  background: var(--surface-2);
}

.top-ads-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.top-ads-table .strong {
  color: var(--text);
  font-weight: 780;
}

.top-ads-table .rank-col {
  width: 40px;
  text-align: center;
  color: var(--muted);
  font-weight: 780;
}

.top-ad-title {
  display: block;
  color: var(--text);
  font-weight: 700;
}

.top-ad-domain {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}

.top-ad-bar {
  display: block;
  margin-top: 7px;
  max-width: 340px;
  height: 4px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.top-ad-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.report-table table {
  min-width: 1120px;
}

.report-table .report-dimension-date {
  min-width: 96px;
  white-space: nowrap;
}

.report-table th {
  padding: 0;
}

.report-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.report-sort-button:hover {
  background: var(--accent-soft, #fff7ec);
  box-shadow: none;
  transform: none;
}

.report-sort-button:active {
  transform: none;
}

.report-sort-button.is-sorted {
  color: var(--text);
}

/* Tiebreaker column: present but visually subordinate to the primary sort. */
.report-sort-button.is-sorted-secondary {
  color: var(--text);
}

.report-sort-button.is-sorted-secondary .report-sort-indicator {
  opacity: 0.55;
}

.report-sort-indicator {
  font-size: 9px;
  line-height: 1;
  min-width: 9px;
}

.report-sort-reset {
  min-height: 32px;
  padding: 4px 14px;
  font-size: 13px;
  white-space: nowrap;
}

@keyframes report-loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes report-loading-sweep {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@keyframes report-value-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.58; }
}

@media (prefers-reduced-motion: reduce) {
  .reporting-panel.is-report-loading .report-control-panel::after,
  .reporting-panel.is-report-loading .report-summary strong,
  .report-loading-spinner {
    animation: none;
  }
}

.panel > h2 {
  padding: 16px 16px 0;
}

.panel-copy {
  padding: 0 16px;
}

.team-section {
  padding: 0 16px 16px;
}

.team-page-header {
  align-items: flex-start;
}

.team-page-header .team-actions {
  margin-left: auto;
}

/* Admin-only org search bar. Not gated with .admin-only: the Users-tab hide
   below needs an id, and the specificity guard forbids id-scoped display
   rules on role-gated classes. The bespoke partner hide here has the exact
   gate specificity (0,2,1), so the (0,1,0) base display cannot defeat it --
   the same leak the old inner .team-search-fields gate protected against. */
.team-crud-bar {
  display: grid;
  align-items: end;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

body:not(.is-admin) .team-crud-bar {
  display: none;
}

.team-search-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px;
  gap: 12px;
  align-items: end;
}

.team-search-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.team-search-fields input,
.team-search-fields select {
  min-height: 38px;
}

/* The header's left title block: org context for admins, "Current
   organization" for partners. The actions keep margin-left:auto so they stay
   right-aligned when this block is hidden (admin Users tab). */
.team-context {
  min-width: 0;
}

.team-context strong {
  display: block;
  font-size: 13px;
  font-weight: 780;
}

.team-context span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.team-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.team-actions button.active {
  border-color: var(--accent-2);
  background: var(--accent);
  color: #241400;
}

.team-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.team-action-panel {
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

.team-action-form {
  padding: 16px;
}

/* The org editor spans the full content width; the org list sits above it and
   selecting a row reveals the tabbed editor below (list-above layout). */
.organization-crud-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

body.is-admin .organization-crud-layout.admin-only {
  display: grid;
}

.organization-detail-panel {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.organization-table {
  min-width: 720px;
}

.organization-summary .detail-actions {
  flex-wrap: wrap;
}

.editing-row td {
  background: #fffdf8;
}

.team-partner-grid {
  display: grid;
  gap: 16px;
  padding: 0 16px 16px;
}

body.is-admin .team-partner-grid {
  display: none;
}

.partner-team-only { display: inline-flex; }
body.is-admin .partner-team-only { display: none; }

.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--accent-soft, #fff7ec); }

.org-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 12px 0 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted, #fafafa);
}

.org-editor-form .wide { grid-column: 1 / -1; }

.org-editor-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.org-editor-form button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
}

.org-editor-actions {
  margin-top: 8px;
}

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

.org-detail-group {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 4px;
}

.org-detail-group > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}

.org-detail-group > summary::-webkit-details-marker {
  display: none;
}

.org-detail-group > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--muted, #64748b);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
  flex: none;
}

.org-detail-group[open] > summary::before {
  transform: rotate(90deg);
}

.org-detail-group > summary h4 {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
}

.org-detail-group > summary:hover h4 {
  color: var(--accent, #b45309);
}

.all-users-group {
  margin: 0 16px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px 8px;
}

.monetization-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.readiness-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.is-partner .readiness-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.organization-manager {
  padding: 0;
}

.organization-settings {
  padding-top: 16px;
}

.organization-domain-heading {
  margin-top: 4px;
}

.organization-revenue-heading {
  margin-top: 4px;
}

.org-domain-table,
.org-share-table,
.user-admin-table {
  min-width: 980px;
}

.user-manager {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.team-section h3 {
  font-size: 13px;
  font-weight: 780;
  margin: 0;
}

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

.payments-month-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.payments-month-picker select {
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 6px;
}

.muted-note {
  color: var(--muted);
  font-size: 12px;
}

/* Like .metric-scope but inline: the ad-credit rate sits beside the dollar
   amount in a table cell, where a block would push it onto its own line. */
.credit-rate {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.section-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.inline-form {
  padding: 0 0 14px;
}

.checkbox-field {
  align-content: start;
}

.checkbox-field input {
  min-height: 18px;
  width: 18px;
}

.compact-table table {
  min-width: 0;
}

/* Compact tables live in the narrow org editor panel; fixed input minimums
   would push the row action buttons past the scroll edge. */
.compact-table th,
.compact-table td {
  padding: 10px 10px;
}

.compact-table .table-input,
.compact-table .table-select,
.compact-table .compact-number-input {
  min-width: 0;
  width: 100%;
}

.compact-table .row-actions {
  flex-wrap: wrap;
}

.creative-table {
  min-width: 900px;
}

.creative-copy {
  max-width: 360px;
  white-space: normal;
}

.invite-link {
  color: var(--muted);
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.setup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-grid .wide {
  grid-column: 1 / -1;
}

.setup-grid button {
  grid-column: 1 / -1;
}

.setup-grid .form-actions button {
  grid-column: auto;
}

.selected-empty,
.selected-detail {
  padding: 18px;
  color: var(--muted);
  font-size: 13px;
}

.selected-detail {
  display: grid;
  gap: 10px;
  color: var(--text);
}

.selected-detail div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.selected-detail .detail-stack {
  align-items: start;
}

.selected-detail .detail-stack strong {
  max-width: 190px;
  overflow-wrap: anywhere;
  text-align: right;
}

.selected-detail .detail-actions {
  justify-content: flex-end;
}

.selected-detail span {
  color: var(--muted);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 18px;
}

.category-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.category-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 780;
}

.category-card p {
  margin-top: 4px;
}

.domains-view {
  position: relative;
}

.domain-page-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

#domainAddButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#domainAddButton svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.domain-manager {
  min-height: 520px;
}

.domain-inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 0.8fr) minmax(150px, 0.65fr) auto;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

.domain-search-control,
.domain-filter-control {
  position: relative;
  display: block;
}

.domain-search-control svg {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
}

.domain-search-control input {
  min-height: 44px;
  padding-left: 39px;
}

.domain-filter-control select {
  min-height: 44px;
}

.domain-result-count {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.domain-table {
  min-width: 760px;
}

.domain-table th,
.domain-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.domain-table th.domain-sort-header {
  padding: 0;
}

.domain-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.domain-sort-button:hover {
  background: var(--accent-soft, #fff7ec);
  box-shadow: none;
  transform: none;
}

.domain-sort-button:active {
  transform: none;
}

.domain-sort-button.is-sorted {
  color: var(--text);
}

.domain-sort-indicator {
  min-width: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.domain-sort-button.is-sorted .domain-sort-indicator {
  color: currentColor;
}

.domain-table th:last-child,
.domain-table td:last-child {
  width: 152px;
}

.domain-name-button {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  text-align: left;
}

.domain-name-button:hover {
  background: transparent;
  box-shadow: none;
  color: #8a4b07;
  transform: none;
}

.domain-name-button:focus-visible {
  outline: 3px solid rgba(255, 158, 28, 0.28);
  outline-offset: 3px;
}

.domain-row-actions {
  flex-wrap: nowrap;
}

.domain-serving-host {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

/* Class-only selector on purpose: the Domains section is admin-gated by
   `body:not(.is-admin) .admin-only`, and any higher-specificity rule here (an
   id, say) would out-rank that hide and leak admin chrome to partners. */
.domain-anura-mode {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.domain-empty-state {
  height: 180px;
  color: var(--muted);
  text-align: center;
}

body.domain-drawer-open {
  overflow: hidden;
}

.domain-drawer-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  background: rgba(10, 23, 24, 0.24);
}

.domain-drawer {
  position: fixed;
  z-index: 21;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(440px, 100vw);
  border-left: 1px solid var(--border-strong);
  background: #ffffff;
  box-shadow: -20px 0 48px rgba(18, 35, 40, 0.14);
  flex-direction: column;
}

.domain-drawer:focus {
  outline: none;
}

.domain-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 23px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.domain-drawer-header h2 {
  font-size: 20px;
  font-weight: 790;
}

.domain-drawer-header p {
  overflow-wrap: anywhere;
}

.icon-button {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  place-items: center;
}

.icon-button:hover {
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--text);
  transform: none;
}

.icon-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.domain-drawer-content,
.domain-drawer-form {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.domain-drawer-content {
  gap: 22px;
  padding: 24px;
  overflow-y: auto;
}

.domain-view-summary {
  display: flex;
  justify-content: flex-start;
}

.domain-detail-list,
.domain-settings-group dl {
  display: grid;
  margin: 0;
}

.domain-detail-list > div,
.domain-settings-group dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.domain-detail-list > div:first-child,
.domain-settings-group dl > div:first-child {
  border-top: 1px solid var(--border);
}

.domain-detail-list dt,
.domain-settings-group dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.domain-detail-list dd,
.domain-settings-group dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  text-align: right;
}

.domain-settings-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.domain-settings-group h3 {
  margin: 0;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  font-size: 13px;
  font-weight: 780;
}

.domain-settings-group dl > div {
  padding-right: 14px;
  padding-left: 14px;
}

.domain-settings-group dl > div:first-child {
  border-top: 0;
}

.domain-settings-group dl > div:last-child {
  border-bottom: 0;
}

.domain-form-fields {
  display: grid;
  flex: 1;
  gap: 18px;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
}

.domain-form-fields > label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.domain-form-fields input,
.domain-form-fields select {
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  font-weight: 560;
}

.domain-form-fields input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

.domain-drawer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.domain-drawer-form > .domain-drawer-actions {
  margin-top: 0;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background: #ffffff;
}

.domain-drawer-actions button {
  width: 100%;
}

#toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 158, 28, 0.26);
  color: #ffffff;
  background: var(--sidebar);
  box-shadow: var(--shadow);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

#toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1060px) {
  .app-shell {
    align-content: start;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .sidebar,
  .workspace {
    max-width: 100vw;
    width: 100%;
  }
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
    min-height: 56px;
    padding: 8px 14px;
  }
  .brand {
    flex: 0 0 auto;
    margin: 0;
  }
  .brand-logo {
    width: 86px;
    height: 31px;
  }
  nav {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
    overflow: auto;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar {
    display: none;
  }
  nav a {
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-secondary {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .nav-secondary .nav-section-label {
    display: none;
  }
  .nav-icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
  .nav-icon svg {
    width: 16px;
    height: 16px;
  }
  nav a.active::before {
    height: 18px;
  }
  .split,
  .report-grid {
    grid-template-columns: 1fr;
  }
  .report-filters {
    align-items: stretch;
  }
  .report-filter-group,
  .report-filter-actions {
    flex-basis: 100%;
  }
  .report-filter-date .report-field-grid,
  .report-filter-scope .report-field-grid,
  body.is-partner .report-filter-scope .report-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-date-menu {
    width: min(720px, calc(100vw - 48px));
  }
  .report-date-control {
    grid-template-columns: 1fr;
  }
  .report-filter-actions {
    justify-content: flex-start;
  }
  .report-dimension-row {
    grid-template-columns: 1fr;
  }
  .report-block:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .report-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .domain-inventory-toolbar {
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.7fr);
  }
  .domain-result-count {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .sidebar {
    padding: 7px 12px;
  }
  .workspace { padding: 18px 16px 28px; }
  h1 { font-size: 26px; }
  .topbar,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .article-tabs {
    width: 100%;
  }
  .article-tab {
    flex: 1 1 auto;
  }
  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .impersonation-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .impersonation-active {
    max-width: none;
  }
  .team-search-fields {
    grid-template-columns: 1fr;
  }
  .team-actions {
    justify-content: stretch;
  }
  .team-actions button {
    flex: 1 1 100%;
  }
  .domain-page-actions button {
    width: 100%;
    justify-content: center;
  }
  .domain-inventory-toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .domain-manager {
    min-height: 440px;
  }
  .domain-table {
    min-width: 700px;
  }
  .domain-drawer {
    width: 100vw;
    border-left: 0;
  }
  .domain-drawer-header {
    padding: 19px 16px 16px;
  }
  .domain-drawer-content,
  .domain-form-fields {
    padding: 20px 16px;
  }
  .domain-drawer-form > .domain-drawer-actions {
    padding: 14px 16px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bar-row {
    grid-template-columns: 1fr;
  }
  .report-filter-date .report-field-grid,
  .report-filter-scope .report-field-grid,
  body.is-partner .report-filter-scope .report-field-grid {
    grid-template-columns: 1fr;
  }
  .report-date-chips {
    flex-wrap: nowrap;
    margin-right: -4px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .report-date-chip {
    flex: 0 0 auto;
  }
  .report-date-menu {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 2px;
  }
  .report-date-menu-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .report-date-draft-row {
    grid-template-columns: 1fr;
  }
  .report-date-draft-separator {
    display: none;
  }
  .report-filter-actions button {
    width: 100%;
  }
  .dimension-picker label {
    flex: 1 1 calc(50% - 8px);
  }
  /* Stacked rows have no shared column to align to, so the pair just sits
     inline under the label instead of holding its desktop grid. */
  .bar-value {
    grid-template-columns: auto auto;
    justify-content: start;
    text-align: left;
  }
  .setup-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    grid-template-columns: 1fr;
  }
  .form-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Organization editor tabs (full content width) --- */
.org-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 16px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-3);
}

.org-tab {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.org-tab.active {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.org-tab:hover {
  transform: none;
}

.org-tab-panel {
  display: none;
}

.org-tab-panel.active {
  display: block;
}

.org-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}

.org-section-heading h4 {
  margin: 0;
  font-size: 0.98rem;
}

.org-subsection {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Tab tables use the full editor width instead of the old narrow compact-table. */
.org-table-wrap {
  width: 100%;
}

.org-full-table {
  width: 100%;
  min-width: 0;
}

.org-full-table th,
.org-full-table td {
  padding: 11px 12px;
}

.org-full-table .table-select {
  min-width: 0;
  width: 100%;
  max-width: 240px;
}

.org-full-table .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.org-members-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.org-members-toolbar input,
.org-members-toolbar select {
  width: 100%;
  min-height: 38px;
}

.org-members-count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.org-invite-result {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted, #fafafa);
}

.org-invite-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.org-invite-link-input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--mono, monospace);
  font-size: 12px;
}

.org-apikeys-hint {
  margin: 0 0 12px;
}

button.secondary.danger {
  color: #b42318;
  border-color: #f0c4bd;
}

button.secondary.danger:hover {
  background: #fdf0ee;
}

/* Top-level Users | Organizations tabs. Reuses the .org-tabs / .org-tab pill
   styling; .page-tabs only adjusts the outer margin so the bar is inset like the
   page header. Admin-only — partners never see the tab bar. */
.page-tabs {
  margin: 16px 16px 4px;
}

/* .org-tabs sets display:flex at equal specificity to .admin-only's
   display:none and wins on source order, so the tab bar leaked through to
   partner users. This compound selector outranks both. */
.page-tabs.admin-only {
  display: none;
}

body.is-admin .page-tabs.admin-only {
  display: flex;
}

.team-tab-panel {
  display: none;
}

.team-tab-panel.active {
  display: block;
}

.team-tab-panel.admin-only.active {
  display: none;
}

body.is-admin .team-tab-panel.admin-only {
  display: none;
}

body.is-admin .team-tab-panel.admin-only.active {
  display: block;
}

.global-users-panel {
  padding: 16px;
}

/* The org search bar and org context belong to the Organizations tab; hide
   both while the admin is on the Users tab. Neither class is role-gated, so
   the id's extra specificity cannot defeat a role gate (and both rules only
   ever hide). */
body.is-admin #team[data-team-tab="users"] .team-crud-bar,
body.is-admin #team[data-team-tab="users"] .team-context {
  display: none;
}

/* Global users toolbar: search + org/role/status filters. Builds on
   .org-members-toolbar (gap, input sizing, the full-width count row). */
.users-toolbar {
  grid-template-columns: minmax(220px, 1fr) 190px 170px 170px;
}

@media (max-width: 900px) {
  .users-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  /* Below the width where chips + controls share a line comfortably, the
     controls group takes a full line under the picker instead of letting
     flex interleave it into the middle of the wrapped chip grid. */
  .report-display-controls {
    width: 100%;
    justify-content: flex-end;
  }
  .report-display-controls .report-hide-no-revenue {
    /* The divider separated it from chips on the SAME line; on its own
       line it would float as a stray rule. */
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .org-tabs {
    width: 100%;
  }
  .org-tab {
    flex: 1 1 auto;
  }
  .org-members-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .users-toolbar {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Role gating -- LAST ON PURPOSE.

   These rules hide capability-gated chrome from users who lack the capability.
   They live at the end of the stylesheet because specificity alone is not
   enough: `.form-grid label.checkbox-inline` is also (0,2,1), so a tie is
   broken by source order and the hide must come last to win it.

   The inverted form (hide when the body LACKS the state, rather than
   `display: none` + `revert` for those who have it) is what makes the
   specificity high enough in the first place -- the old bare `.admin-only`
   (0,1,0) lost to `.form-grid label` (0,1,1), which is how the internal-only
   chatbot format selector, the Pixels org picker and the Reporting publisher
   filter all rendered in partner sessions.

   tests/test_role_gated_css_specificity.py pins both properties.
   --------------------------------------------------------------------------- */
body:not(.is-admin) .admin-only {
  display: none;
}

body:not(.can-manage-team) .team-manager-only {
  display: none;
}

/* A rate over 100% is structurally impossible (clicks outrunning visits) and
   marks uncorroborated -- likely bot -- clicks in the numerator. Class-only
   selector on purpose: this renders in partner sessions too, and any
   id-based display rule would leak through role gating (see above). */
.rate-impossible {
  color: var(--danger);
  font-weight: 600;
  cursor: help;
}