/* Layout follows the Google Ads interface so it feels familiar:
   a top bar, a left menu, title + date range on one line,
   a toolbar above the data, Roboto. Plain pages: space and thin
   lines separate things, not boxes.
   Theme: Soft paper. A warm off-white page (gentler on the eyes than
   pure white), warm near-black text, deep green-teal for buttons and
   links. The logo's dots brighten in teal and land on a soft orange. Dark is the same warm palette
   dimmed, with no navy or blue. Each person picks Light, Dark or
   Follow computer in their menu (js/theme.js sets data-theme). */

:root {
  --bg: #f4f1ea;
  --surface: #faf8f3;
  --text: #2b2925;           /* warm near-black */
  --muted: #6b665c;
  --line: #e3ded2;
  --line-soft: #ebe7dd;
  --hover: #efebe2;
  --scroll: #cfc9bc;         /* scrollbar handle */
  --frozen-edge: rgba(43, 41, 37, 0.12);  /* the name column's shadow while a table is slid */
  --accent: #2f6b5e;         /* deep green-teal: buttons, active text */
  --accent-text: #2f6b5e;
  --accent-soft: #e1ebe4;    /* light sage: selected nav, chips, ranges */
  --accent-bright: #eb9a62;  /* soft orange: the logo's last dot, and the front page's .brand-stop; never in the app, so it never reads as a warning */
  --on-accent: #ffffff;      /* text on accent buttons */
  --midnight: #2b2925;
  --logo-1: #bcd8cd;         /* the logo's first two dots: light teal, then a step brighter */
  --logo-2: #6fae99;
  --error-bg: #fbe9e5;
  --error: #b42318;
  --shadow: 0 1px 2px rgba(43, 41, 37, 0.18), 0 1px 3px 1px rgba(43, 41, 37, 0.08);
  --shadow-high: 0 2px 8px 2px rgba(43, 41, 37, 0.12), 0 1px 3px rgba(43, 41, 37, 0.2);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1b1a17;
  --surface: #21201c;
  --text: #e4ded1;
  --muted: #9c9587;
  --line: #33312b;
  --line-soft: #2a2824;
  --hover: #2a2925;
  --scroll: #4a4740;
  --frozen-edge: rgba(0, 0, 0, 0.45);
  --accent: #7fb5a3;
  --accent-text: #93c4b3;
  --accent-soft: #2a3a33;
  --accent-bright: #eda274;
  --on-accent: #13221d;
  --midnight: #2e2c27;
  --logo-1: #3a5049;
  --logo-2: #5f9583;
  --error-bg: #3b1a16;
  --error: #f4a99a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-high: 0 4px 14px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}


* { box-sizing: border-box; }
/* Thin scrollbars in the site's own gray, no arrows */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
a { color: var(--accent-text); }
/* Tick boxes and round buttons in the site's green-teal, not the browser's blue */
input { accent-color: var(--accent); }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/20px Roboto, "Segoe UI", Arial, sans-serif;
  display: flex; flex-direction: column;
}
.msym {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; display: inline-block; vertical-align: middle;
  -webkit-font-smoothing: antialiased; user-select: none;
}

/* ---- Top bar ---- */
.topbar {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 20px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.product { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
/* Logo: BidCadence's three even beats (the last one cyan) and the wordmark in Manrope. */
.product-mark { width: 40px; height: 18px; flex: none; }
.product-name {
  font-family: Manrope, Roboto, Arial, sans-serif; font-size: 21px; font-weight: 700;
  color: var(--midnight); letter-spacing: -0.5px;
}
:root[data-theme="dark"] .product-name { color: var(--text); }
/* Account picker (like Google Ads): current account + a ▼ to switch */
.account-picker {
  position: relative; display: flex; align-items: stretch; min-width: 0; border-radius: 8px;
}
.picker-current {
  display: flex; align-items: center; gap: 12px; padding: 6px 14px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 8px 0 0 8px;
}
.picker-current:hover, .picker-toggle:hover { background: var(--hover); }
.picker-icon { color: var(--muted); font-size: 24px; }
.picker-text { display: flex; flex-direction: column; min-width: 0; }
.picker-parent { display: flex; align-items: center; font-size: 12px; line-height: 16px; color: var(--muted); }
.picker-parent .msym { font-size: 16px; }
.picker-name { font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.picker-up { color: var(--muted); text-decoration: none; align-self: flex-start; }
a.picker-up:hover { color: var(--accent-text); }
.picker-id { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.picker-toggle {
  display: grid; place-items: center; width: 36px; border: 0;
  border-radius: 0 8px 8px 0; background: none; color: var(--muted); cursor: pointer;
}
.picker-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
.picker-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high); overflow: hidden;
}
.picker-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.picker-search input { flex: 1; border: 0; outline: none; font: inherit; color: var(--text); background: none; }
.picker-list { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; }
.picker-list a {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 16px;
  color: var(--text); text-decoration: none; position: relative;
}
.picker-list a:hover, .picker-list a:focus { background: var(--hover); outline: none; }
.picker-list .msym { color: var(--muted); font-size: 20px; }
.picker-list li[aria-selected="true"] a { background: var(--accent-soft); }
.picker-list li[aria-selected="true"] .picker-option-name { color: var(--accent-text); font-weight: 500; }
.picker-list li:first-child { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-bottom: 6px; }
.picker-option-name { display: block; }
.picker-option-id { display: block; font-size: 12px; color: var(--muted); }
.picker-empty, .picker-error { margin: 0; padding: 12px 16px; color: var(--muted); }

/* ---- Menus: a <details> that opens a small panel (demo, your account, report options) ---- */
.menu { position: relative; }
.menu > summary {
  display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: var(--shadow-high);
}
.menu-right { left: auto; right: 0; }
/* Too tall for the room under its button (layout.js): opens upward, and scrolls inside itself */
.menu-panel.menu-up { top: auto; bottom: calc(100% + 6px); }
.menu-panel[style*="max-height"] { overflow-y: auto; }
/* Would open past an edge: opens the other way (layout.js) */
.menu-panel.menu-flip { left: auto; right: 0; }
.menu-panel.menu-right.menu-flip { left: 0; right: auto; }
/* Never wider than the screen */
.menu-panel, .cp-filter-menu { max-width: calc(100vw - 16px); }
.menu-note { margin: 0; padding: 8px 16px; color: var(--muted); font-size: 13px; }
.menu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; padding: 4px 12px 8px 16px; }
.menu-row .btn-text { padding: 4px 8px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; border: 0; background: none;
  font: inherit; color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item .msym { font-size: 20px; color: var(--muted); }
.menu-item.on { color: var(--accent-text); font-weight: 500; }
.menu-item-described { flex-direction: column; align-items: flex-start; gap: 2px; }
.menu-sub { color: var(--muted); font-size: 12px; font-weight: 400; }
.menu-count { margin-left: auto; padding-left: 16px; color: var(--muted); font-size: 13px; font-weight: 400; }
.menu-divider { margin: 6px 0; border-top: 1px solid var(--line-soft); }
.location-table .depth-1 { padding-left: 28px; }
.location-table .depth-2 { padding-left: 44px; }
.location-table .depth-3 { padding-left: 60px; }
.ring-offer { display: block; margin: 4px 0 12px; font-size: 14px; }
.ring-offer input { margin-right: 6px; }
.menu-panel form { margin: 0; }

.demo-menu > summary {
  height: 32px; padding: 0 6px 0 10px; border-radius: 16px; font-size: 13px; font-weight: 500; white-space: nowrap;
  background: #fef3c7; color: #78350f;
}
.demo-menu > summary .msym { font-size: 18px; }
.demo-menu .menu-panel { left: auto; right: 0; min-width: min(360px, calc(100vw - 16px)); }
:root[data-theme="dark"] .demo-menu > summary { background: #3d2e0a; color: #fcd34d; }
.avatar {
  width: 34px; height: 34px; justify-content: center; border-radius: 50%;
  background: var(--midnight); color: #fff; font: 600 14px/1 Manrope, Roboto, sans-serif;
}
:root[data-theme="dark"] .avatar { background: var(--accent); color: var(--on-accent); }
.topbar-icon { width: 34px; height: 34px; justify-content: center; border-radius: 50%; color: var(--muted); }
.topbar-icon:hover { background: var(--hover); }
.user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

/* ---- Shell: side menu + content ---- */
.shell { flex: 1; display: flex; min-height: 0; }
.sidenav {
  width: 76px; flex-shrink: 0; padding: 12px 4px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); overflow-y: auto;
}
/* Like Google Ads: an icon with a small word, and a pill around the icon of where you are */
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
  color: var(--text); text-decoration: none; font-size: 11px; font-weight: 500;
}
.nav-item .msym { padding: 2px 14px; border-radius: 14px; font-size: 20px; color: var(--muted); }
.nav-item:hover .msym { background: var(--hover); }
.nav-item.active { color: var(--accent-text); }
.nav-item.active .msym { background: var(--accent-soft); color: var(--accent-text); font-variation-settings: "FILL" 1; }
/* The second panel: what's inside the section you're in; the button at the bottom of the icons opens and closes it */
.subnav { width: 200px; flex-shrink: 0; box-sizing: border-box; padding: 16px 8px 16px 0; display: flex; flex-direction: column; gap: 2px; background: var(--surface); overflow-y: auto; }
.nav-sub { display: flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; color: var(--text); text-decoration: none; }
.nav-sub:hover { background: var(--hover); }
.nav-sub.active { background: var(--accent); color: var(--on-accent); font-weight: 500; }
/* Optimization lists every report, a little tighter than the section's own pages */
.nav-report { min-height: 32px; font-size: 13px; }
.nav-rule { margin: 8px 0; border: 0; border-top: 1px solid var(--line-soft); }
.nav-menu { display: flex; flex-shrink: 0; align-self: center; margin-top: auto; padding: 8px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.nav-menu:hover { background: var(--hover); }
.nav-folded .nav-menu .msym { transform: rotate(180deg); }
@media (min-width: 721px) { .nav-folded .subnav { display: none; } }
/* Narrower windows: the panel floats over the page, so the tables keep their room */
@media (min-width: 721px) and (max-width: 1400px) {
  .shell { position: relative; }
  .subnav { position: absolute; top: 0; bottom: 0; left: 76px; z-index: 40; padding-left: 8px; box-shadow: var(--shadow-high); }
}

main { flex: 1; min-width: 0; overflow: auto; padding: 28px 32px 48px; }
/* Jumps within a page glide, so the eye can follow; not for people whose computer asks for less motion */
@media (prefers-reduced-motion: no-preference) { main { scroll-behavior: smooth; } }
main > * { max-width: 1240px; }
/* A report with a side list (Time of day's inside its views), and the Accounts table, use the whole width, as in Google
   Ads: their tables need the room more than the line length. Their title and options do too, so the page ends evenly,
   with Columns over the table's right edge. The note under the Accounts table keeps lines short enough to read */
main:has(> :is(.ag-layout, .tod-views)) > *, main:has(> .views) > :not(.note) { max-width: none; }

/* ---- Page header: title left, date range right ---- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1 { margin: 0; font: 700 26px/32px Manrope, Roboto, Arial, sans-serif; letter-spacing: -0.2px; }

.date-picker { position: relative; margin-left: auto; }
.date-button {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; min-width: 240px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left;
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.date-button:hover { background: var(--hover); }
.date-button[aria-expanded="true"] { border-color: var(--accent); }
.date-text { flex: 1; display: flex; flex-direction: column; }
.date-label { font-size: 12px; line-height: 16px; color: var(--muted); }
.date-dates { font-weight: 500; }

.date-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex;
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high);
}
.dp-left { width: 280px; display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); }
.dp-custom, .preset-list a {
  display: block; width: 100%; padding: 10px 24px; text-align: left; white-space: nowrap;
  font: inherit; font-size: 15px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.dp-custom { padding: 16px 24px; border-bottom: 1px solid var(--line-soft); border-radius: 8px 0 0 0; }
.dp-custom:hover, .dp-custom:focus, .preset-list a:hover, .preset-list a:focus { background: var(--hover); outline: none; }
.dp-custom.selected, .preset-list a.selected { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.preset-list { list-style: none; margin: 0; padding: 8px 0; }
.has-sub { position: relative; }
.has-sub .sub-arrow { position: absolute; right: 12px; top: 10px; color: var(--muted); pointer-events: none; }
.submenu {
  display: none; position: absolute; left: calc(100% - 4px); top: 0; z-index: 2; list-style: none;
  margin: 0; padding: 8px 0; min-width: 180px; background: var(--surface); border-radius: 4px; box-shadow: var(--shadow-high);
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
.submenu a { padding: 12px 32px; }
.dp-rolling { border-top: 1px solid var(--line-soft); padding: 8px 0 12px; display: flex; flex-direction: column; }
.dp-rolling form { display: flex; align-items: center; gap: 12px; padding: 6px 24px; cursor: pointer; }
.dp-rolling form:hover { background: var(--hover); }
.dp-rolling form.selected { background: var(--accent-soft); }
.dp-rolling form.selected .dp-rolling-apply { color: var(--accent-text); font-weight: 500; }
.dp-rolling input {
  width: 56px; font: inherit; font-size: 15px; text-align: center; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 4px; cursor: text;
}
.dp-rolling-apply {
  flex: 1; text-align: left; padding: 8px 0; font: inherit; font-size: 15px;
  color: var(--text); background: none; border: 0; cursor: pointer;
}

.custom-range { width: 380px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dp-inputs { display: flex; align-items: center; gap: 10px; }
.dp-inputs label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.dp-dash { padding-top: 18px; color: var(--muted); }
.custom-range input {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0;
}
.custom-range input:focus, .dp-rolling input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-hint { flex: 1; font-size: 12px; color: var(--muted); }
.cal-step {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: none;
  color: var(--muted); cursor: pointer; font-size: 22px;
}
.cal-step:hover { background: var(--hover); color: var(--text); }
.calendar { position: relative; height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  font-size: 12px; color: var(--muted); text-align: center; padding: 4px 0; border-bottom: 1px solid var(--line-soft);
}
.cal-title { font-size: 13px; font-weight: 700; padding: 12px 8px 6px; }
.cal-grid button {
  height: 36px; font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; cursor: pointer; border-radius: 18px;
}
.cal-grid button:hover:not(:disabled) { background: var(--hover); }
.cal-grid button:disabled { color: var(--line); cursor: default; }
.cal-grid button.today { box-shadow: inset 0 0 0 1px var(--muted); }
.cal-grid button.in-range { background: var(--accent-soft); border-radius: 0; }
.cal-grid button.edge { background: var(--accent); color: var(--on-accent); font-weight: 500; }

.custom-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.btn-primary, .btn-text {
  font: inherit; font-weight: 500; border-radius: 4px; padding: 8px 16px; cursor: pointer; border: 0;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: var(--shadow); }
.btn-text { background: none; color: var(--accent-text); }
.btn-text:hover { background: var(--accent-soft); }


/* ---- Toolbar above the data ---- */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.toolbar-count { color: var(--muted); white-space: nowrap; }
.toolbar-left { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tiles-only { display: none !important; }
body[data-view="tiles"] .tiles-only { display: flex !important; }

.filter-anchor { position: relative; }
.btn-filter {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  font: inherit; font-weight: 500; color: var(--accent-text); background: none;
  border: 0; border-radius: 4px; cursor: pointer;
}
.btn-filter:hover, .btn-filter[aria-expanded="true"] { background: var(--accent-soft); }
.filter-panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: 280px;
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high);
}
.filter-fields { list-style: none; margin: 0; padding: 8px 0; }
.filter-fields button {
  display: block; width: 100%; text-align: left; padding: 8px 16px;
  font: inherit; color: var(--text); background: none; border: 0; cursor: pointer;
}
.filter-fields button:hover, .filter-fields button:focus { background: var(--hover); outline: none; }
.filter-editor { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.filter-editor-title { font-weight: 500; }
.filter-editor-body { display: flex; flex-direction: column; gap: 8px; }
.filter-editor-body label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.filter-editor-body input[type=text], .filter-editor-body input[type=number], .filter-editor-body select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0;
}
.op-row { display: flex; gap: 8px; }
.op-row select { width: 64px; }
.op-row input { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; }
.hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px;
  border: 1px solid var(--line); border-radius: 16px; font-size: 13px; background: var(--surface);
}
.filter-chip button {
  font-size: 18px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.filter-chip button:hover { background: var(--hover); color: var(--text); }
.filter-chips .btn-text { padding: 4px 8px; }

.sort-select { display: flex; align-items: center; white-space: nowrap; gap: 8px; color: var(--muted); font-size: 13px; }
.sort-select select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px;
}

.label-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.label-chip {
  font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px;
  background: var(--hover); color: var(--muted);
}
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.view-toggle button {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; font: inherit; font-weight: 500;
  background: var(--surface); color: var(--muted); border: 0; cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button:hover { background: var(--hover); }
.view-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.view-toggle .msym { font-size: 20px; }
.theme-toggle { margin: 0 16px 8px; }
.theme-toggle button { flex: 1; justify-content: center; padding: 5px 8px; font-size: 13px; white-space: nowrap; }

/* ---- Views ---- */
.views[data-view="table"] .tiles-view, .views[data-view="tiles"] .table-view { display: none; }
.card { background: var(--surface); border: 1px solid var(--line); }

.table-view { border-radius: 0 0 8px 8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); vertical-align: bottom; padding: 6px 8px; }
th:first-child { padding-left: 8px; }
/* Column names stay at the top while the page scrolls (-28px: the page's top padding, as with .action-bar's bottom);
   the line under them is a shadow, since a stuck cell's border scrolls away */
thead th { position: sticky; top: -28px; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line-soft); }
/* A faint line between column names shows where each column starts (not after the tick box, nor on the calendar, whose days have borders) */
thead th + th:where(:not(.pick-col + th, .cal-month th)) { box-shadow: inset 0 -1px 0 var(--line-soft), inset 1px 0 0 var(--line); }
/* A box that scrolls sideways would hold them back, so it only does that when its table is wider than the page (layout.js) */
@media (min-width: 721px) { :is(.table-scroll, .table-view):not(.too-wide) { overflow-x: visible; } }
.sort-button {
  display: inline-flex; align-items: flex-end; gap: 2px; padding: 4px 8px; border-radius: 4px;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit;
}
/* The whole heading sorts, not just its words (report.js, home.js) */
th:has(> .sort-button) { cursor: pointer; }
th:has(> .sort-button):hover { background: var(--hover); color: var(--text); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }
.sort-arrow { font-size: 16px; width: 16px; }
/* The arrow is drawn by CSS, so the heading's text (which column widths are saved by) stays the same */
th[aria-sort="ascending"] .sort-arrow::before { content: 'arrow_upward'; }
th[aria-sort="descending"] .sort-arrow::before { content: 'arrow_downward'; }
/* The Accounts page has many columns: tighter cells, and an arrow only on the column it's sorted by, so they fit */
.table-view td { padding-left: 8px; padding-right: 8px; }
.table-view th { padding-left: 2px; padding-right: 2px; }
.table-view .sort-button { padding-left: 4px; padding-right: 4px; }
/* Report tables too: a column's arrow shows once it's sorted by, so numbers don't keep room for it */
:is(.table-view, .age-table) th[aria-sort="none"] .sort-arrow { display: none; }
/* ...but each column keeps its room (layout.js measures with it), so sorting never squeezes or widens one */
.col-measure th[aria-sort="none"] .sort-arrow { display: inline-block; }
tr.no-match td { text-align: center; color: var(--muted); padding: 24px; }
.tiles-view .no-match { grid-column: 1 / -1; text-align: center; color: var(--muted); border: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-sub { font-weight: 400; }
.acct-name { font-weight: 500; color: var(--accent-text); }
a.acct-name { text-decoration: none; }
.acct-name a { color: inherit; text-decoration: none; }
a.acct-name:hover, .acct-name a:hover { text-decoration: underline; }
.conv-alert { margin-top: 2px; font-size: 12px; color: var(--error); cursor: help; }
.acct-id { color: var(--muted); font-size: 12px; }
.tag {
  font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
}

.tiles-view {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 8px 8px;
}
/* Tiles: every part in the same place on each one, the labels and conversion check last (home.html) */
.tile { border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tile:hover { box-shadow: var(--shadow); }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile-title { min-width: 0; }
.tile h2 { margin: 0; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-predicted { margin-top: -8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tile-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tile-foot .label-chips { margin-top: 6px; }
.tile-foot > :first-child { margin-top: 0; }
.badge {
  flex-shrink: 0; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-text);
}
.metric-label, .tile-metrics dt { font-size: 12px; color: var(--muted); }
.metric-big { font-size: 24px; line-height: 32px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-metrics { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.tile-metrics > div { display: flex; flex-direction: column; justify-content: flex-end; }  /* values level when a name wraps */
.tile-metrics dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Report type: show only the matching numbers */
.kind-ecommerce .lead-only, .kind-leadgen .ecom-only { display: none !important; }
.inactive { opacity: 0.55; }
.row-error { color: var(--error); white-space: normal; }

.error, .empty { padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.error { background: var(--error-bg); color: var(--error); border-color: transparent; }
.note { color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 12px; max-width: 760px; }

.not-set { color: var(--muted); font-size: 12px; font-style: italic; }
.tile-metrics .not-set { font-size: 13px; font-weight: 400; }

/* ---- Optimization: the reports in one table, a heading row per group; coming soon folded under it ---- */
.page-sub { margin: 4px 0 0; color: var(--muted); }
.report-table { max-width: 960px; }
.report-table th, .report-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.report-table thead th { padding: 0 12px 8px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); box-shadow: none; border-bottom: 1px solid var(--line); }
.report-table thead th + th, .report-table td + td { width: 150px; white-space: nowrap; }
.report-table .report-group-row th { padding: 28px 12px 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); background: none; border-bottom: 1px solid var(--line); }
.report-table tbody:first-of-type .report-group-row th { padding-top: 16px; }
.report-table tbody tr:not(.report-group-row):hover { background: var(--hover); }
.report-name { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.report-name:hover { text-decoration: underline; }
.report-summary { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.report-group-title { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.coming-soon { margin-top: 24px; }
.coming-soon > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); cursor: pointer; list-style: none; }
.coming-soon > summary::-webkit-details-marker { display: none; }
.coming-soon[open] > summary .msym { transform: rotate(180deg); }
.soon-group { margin-top: 16px; }
.soon-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.soon-tag {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--hover); color: var(--text); font-size: 13px; text-decoration: none;
}
.soon-tag:hover { background: var(--line); }
@media (max-width: 720px) { .report-table thead th + th, .report-table td + td { width: auto; white-space: normal; } }
.pick-account-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px;
  border-radius: 8px; background: var(--accent-soft); color: var(--text);
}
.pick-account-banner .msym { color: var(--accent-text); }
.report-run-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.report-run-note .msym { font-size: 18px; }

/* ---- Report page ---- */
.breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .msym { font-size: 18px; }
.report-heading { display: flex; align-items: center; gap: 12px; }
.report-plan { border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 760px; }
.report-plan-lead { margin: 0; font-size: 16px; line-height: 24px; }
.report-facts { margin: 0; display: grid; gap: 12px; width: 100%; }
.report-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.report-facts dt { color: var(--muted); }
.report-facts dd { margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 720px) {
  .report-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Segment reports (Age, ...) ---- */
.report-heading h1 { display: flex; align-items: center; gap: 10px; }
.run-summary { border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.run-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.run-facts > div { display: flex; flex-direction: column; }
.run-label { font-size: 12px; color: var(--muted); }

.ad-group-card { border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.ad-group-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line-soft);
}
.ad-group-campaign { font-size: 12px; color: var(--muted); }
.ad-group-name { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.ad-group-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.ad-group-meta strong { color: var(--text); }
.ad-group-skipped { margin: 0; padding: 16px 20px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.age-table th, .age-table td { padding: 8px; }
.age-table .seg-name { font-weight: 500; }
.age-table .muted, .muted { color: var(--muted); }
.age-table tr.row-action .new-setting strong { color: var(--accent-text); }
.age-table .totals-row td { font-weight: 500; border-top: 1px solid var(--line); background: var(--bg); }
.age-table .data-cell { font-size: 12px; white-space: nowrap; }
/* Zone colors: the Time of day week's bars */
.zone-ok { background: var(--accent-soft); color: var(--accent-text); }
.zone-under { background: #fef3c7; color: #92400e; }
.zone-bad { background: var(--error-bg); color: var(--error); }
.zone-low-data, .zone-excluded { background: var(--hover); color: var(--muted); }
.zone-retest { background: #ede9fe; color: #5b21b6; }
.zone-waiting { background: #e0f2fe; color: #075985; }
:root[data-theme="dark"] .zone-under { background: #3d2e0a; color: #fcd34d; }
:root[data-theme="dark"] .zone-retest { background: #2e1f5e; color: #c4b5fd; }
:root[data-theme="dark"] .zone-waiting { background: #0c2a3d; color: #7dd3fc; }

.apply-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.apply-form { display: flex; align-items: center; gap: 8px; }
.apply-form .btn-primary, .apply-form .btn-text, .log-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.apply-form .msym, .log-link .msym { font-size: 18px; }
.apply-confirm { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.apply-form button:disabled { opacity: 0.6; cursor: progress; }
.log-link { margin-left: auto; }
.age-table td.arrow { color: var(--muted); padding: 0 4px; }
.age-table td.arrow .msym { font-size: 16px; }
.age-table tr.undone td { opacity: 0.6; }
.age-table td.where-cell { white-space: normal; min-width: 160px; }
.age-table td.where-cell .muted { font-size: 12px; }
.age-table td.change-cell { white-space: nowrap; }
.age-table td.change-cell .msym { font-size: 16px; color: var(--muted); margin: 0 4px; }
/* Landing pages: layout.js lines the tables' columns up. Page addresses wrap anywhere, but the column keeps room
   to read, or a table with many number columns squeezes it to a letter a line. */
.lp-pages-table { width: 100%; }
.lp-pages-table td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 200px; }
.age-table td.change-cell .was { color: var(--muted); }
.why-headline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.why-detail { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: normal; }
.age-table td.result-cell { white-space: normal; min-width: 120px; }
.inline-icon { font-size: 14px; vertical-align: -2px; margin-right: 2px; }
/* One white sheet, like the frozen first columns, rather than white columns beside beige ones */
.log-table { background: var(--surface); }
.log-table td.when-cell { white-space: nowrap; font-size: 13px; }
.log-table td.source-cell { white-space: nowrap; }
.log-table td.source-cell .why-detail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* The apply or undo just made: a thin bar down its left edge, not a filled block */
.log-table tr.batch-highlight td:first-child { box-shadow: inset 3px 0 var(--accent); }
.src { display: inline-block; font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 8px; border-radius: 9px; }
.src-software { background: var(--accent-soft); color: var(--accent-text); }
.src-manual { background: var(--midnight); color: #f6f3ec; }
.src-automated { background: #ede9fe; color: #5b21b6; }
.src-other { background: var(--hover); color: var(--muted); }
:root[data-theme="dark"] .src-manual { background: #e4ded1; color: #2b2925; }
:root[data-theme="dark"] .src-automated { background: #2e1f5e; color: #c4b5fd; }

.source-filter button { padding: 5px 14px; }
.decision-card { border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; border-color: var(--accent); }
.decision-card .ad-group-name { display: flex; align-items: center; gap: 8px; }
.decision-card .ad-group-name .msym { color: var(--accent-text); }
.decision-list { list-style: none; margin: 12px 0 0; padding: 0; }
.decision-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.decision-actions { display: flex; align-items: center; gap: 8px; }
.decision-actions a.btn-primary { text-decoration: none; }
.seg-notes { margin: 0; padding: 12px 20px 16px 36px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; }
.seg-notes li + li { margin-top: 4px; }
.seg-notes strong { color: var(--text); font-weight: 500; }


/* ---- Narrow screens ---- */
/* A tablet or small laptop: the logo without its name, so the account and campaign pickers keep their room */
@media (max-width: 1100px) {
  .product-name, .picker-icon { display: none; }
  .picker-parent { white-space: nowrap; }
}
@media (max-width: 720px) {
  /* The top bar takes two rows: logo, account and your menus; then the campaign picker across the width */
  .topbar { gap: 8px 12px; height: auto; flex-wrap: wrap; padding: 8px 12px; }
  .demo-day { display: none; }
  .product-name { display: none; }
  .account-picker { flex: 1; }
  .picker-current { padding: 4px 10px; gap: 8px; }
  .picker-icon { display: none; }
  .picker-id { display: none; }
  .shell { flex-direction: column; }
  .sidenav { width: auto; flex-direction: row; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
  .nav-item { flex-direction: row; gap: 8px; padding: 6px 8px; font-size: 14px; }
  .subnav { width: auto; flex-direction: row; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
  .nav-sub { min-height: 34px; padding: 0 12px; }
  .nav-report, .nav-rule { display: none; }
  .nav-menu { display: none; }
  main { padding: 16px; }
  .date-picker { width: 100%; margin-left: 0; }
  .date-button { width: 100%; }
  .date-panel { left: 0; right: 0; flex-direction: column; max-height: 75vh; overflow-y: auto; }
  .dp-left, .custom-range { width: auto; }
  .dp-left { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .submenu { left: auto; right: 8px; top: 100%; }
  .calendar { height: 240px; }
  .toggle-label { display: none; }
  .tiles-view { padding: 12px; gap: 12px; }
}
}
}

/* Age report scheduler (MCC view) */
.schedule-card { padding: 20px; margin-bottom: 16px; border-radius: 8px; }
.schedule-title { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.schedule-accounts { border: 0; margin: 0; padding: 0; }
.schedule-accounts legend { font-weight: 500; margin-bottom: 8px; }
.schedule-accounts-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.schedule-accounts-tools input[type=search], .schedule-when select, .schedule-when input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.schedule-accounts-tools input[type=search] { flex: 1 1 220px; max-width: 360px; }
.schedule-account-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.schedule-account { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.schedule-account:last-child { border-bottom: 0; }
.schedule-account:hover { background: var(--hover); }
.schedule-account[hidden] { display: none; }
.schedule-account .muted { font-size: 12px; }
.schedule-when { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.schedule-when label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.schedule-table td, .schedule-table th { text-align: left; }
.schedule-empty { margin: 0; }
.error-text { color: var(--error); }

/* Campaigns & ad groups filter, campaign intent */
.scope-hint { margin-left: auto; color: var(--accent-text); font-weight: 500; }
.intent-label input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.intent-chip { background: var(--accent-soft); color: var(--accent-text); }
.intent-card { padding: 16px; border-radius: 8px; margin-bottom: 16px; }
.intent-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.intent-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.intent-table td, .intent-table th { text-align: left; }

/* A report's top: title, links and options; what it does; the result; where the numbers come from */
.report-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.report-head .title-row { align-items: center; }
.report-head .options-row { margin: 0 0 0 auto; gap: 4px; }
.report-head .option { background: none; }
.report-purpose { margin: 4px 0 0; color: var(--muted); }
/* On a phone the options get their own row under the title, lined up with it */
@media (max-width: 720px) { .report-head .options-row { flex: 1 0 100%; margin: 4px 0 0 -12px; } }
.vs-good { color: var(--accent-text); font-weight: 500; }
.vs-under, .vs-bad { color: #b45309; font-weight: 500; }
:root[data-theme="dark"] .vs-under, :root[data-theme="dark"] .vs-bad { color: #fbbf24; }
.title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.small-link { font-size: 13px; color: var(--accent-text); text-decoration: none; }
.small-link:hover { text-decoration: underline; }
.data-line { margin: 4px 0 0; font-size: 13px; }
.data-line a { color: inherit; }
.data-line .note-icon { font-size: 15px; color: var(--muted); }
.link-button { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* "How it works": a floating panel over the report, opened from the link next to the title */
.how-bubble { width: min(640px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.how-bubble::backdrop { background: rgba(0, 0, 0, .08); }
.how-bubble-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.how-bubble-title .btn-icon { margin-left: auto; background: none; border: 0; padding: 4px; cursor: pointer; color: inherit; }
.report-summary-line { margin: 16px 0 0; font-size: 16px; }
.report-summary-line a { color: var(--accent-text); }

.options-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.option {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 12px; border: 0; border-radius: 8px;
  background: var(--hover); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.option .muted { font-weight: 400; }
.option .msym { font-size: 20px; color: var(--muted); }
.option:hover, .menu[open] > .option, .option[aria-expanded=true] { background: var(--line); }
.icon-option { width: 36px; padding: 0; justify-content: center; }
.toolbar-spacer { flex: 1 1 auto; }

.run-button { padding: 6px 14px; }
.run-pending { color: var(--accent-text); font-size: 12px; font-weight: 500; }

.rules-menu .menu-panel { min-width: min(320px, calc(100vw - 16px)); }
.rules-menu .menu-note a { color: var(--accent-text); }
.rules-menu .menu-note + .menu-note { border-top: 1px solid var(--line-soft); }

.outline-chevron { color: var(--muted); transition: transform 0.15s; }
details[open] > summary > .outline-chevron { transform: rotate(90deg); }
.ad-group-note { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.ad-group-note .msym { color: #b45309; font-size: 18px; }
.age-table td { vertical-align: top; }
.age-table .pick-col { width: 28px; padding-right: 0; }
.age-table .totals-row td { font-weight: 500; border-top: 1px solid var(--line); background: none; }
.age-table tr.row-suggest td { background: none; }
/* Too narrow a window: the table slides under its name column (and tick box), which stay put, as in Google Ads.
   Its own scroll bar would be at the end of a long table, so a thin one stays in sight just above the Apply bar instead,
   over the part that slides (layout.js) */
.table-scroll, .table-view { scrollbar-width: none; }
:is(.table-scroll, .table-view)::-webkit-scrollbar { display: none; }
.slide-bar {
  position: sticky; bottom: var(--under-bar, 0px); z-index: 11; height: 12px;
  background: var(--surface); border-top: 1px solid var(--line-soft); cursor: pointer; touch-action: none;
}
/* The handle takes the bar's whole height, so a click a little above or below it still grabs it */
.slide-thumb { height: 100%; padding: 3px 0; background: var(--scroll); background-clip: content-box; border-radius: 6px; cursor: grab; }
.slide-bar:hover .slide-thumb, .slide-thumb.dragging { background: var(--muted); }
.slide-thumb.dragging { cursor: grabbing; }
/* While slid, the name column casts a soft shadow over the columns going under it */
.table-scroll.slid:not(.unpinned) tr > :is(:first-child:not(.pick-col), .pick-col + *):is(th, td)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 8px; pointer-events: none;
  background: linear-gradient(to right, var(--frozen-edge), transparent);
}

/* Columns menu: a basic column switched off (layout.js) */
:is(.hide-impr .c-impr, .hide-clicks .c-clicks, .hide-cpc .c-cpc, .hide-cost .c-cost, .hide-conv .c-conv,
    .hide-value .c-value, .hide-cpa .c-cpa, .hide-roas .c-roas, .hide-sis .c-sis):is(th, td, .chart-summary > a,
    .chart-compare tr) {
  display: none; }
.columns-menu .menu-panel { min-width: 240px; }
.menu-check { padding: 6px 16px; }
.menu-check:hover { background: var(--hover); }
.table-scroll tr > :is(:first-child, .pick-col + *):is(th, td) { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
.table-scroll .pick-col { box-sizing: border-box; width: 32px; min-width: 32px; max-width: 32px; padding-left: 8px; padding-right: 0; }
.table-scroll tr > .pick-col + :is(th, td) { left: 32px; }
/* Too wide a name column to keep on the left: everything slides (layout.js); the headings still stay at the top */
.table-scroll.unpinned tr > :is(:first-child, .pick-col + *):is(th, td) { left: auto; }
/* The headings' corner stays above the headings that scroll sideways under it (they're on top of the rows, z-index 2) */
.table-scroll thead tr > :is(:first-child, .pick-col + *) { z-index: 3; }
.table-scroll tbody tr:hover > :is(:first-child, .pick-col + *):is(th, td) { background-color: var(--hover); }
.based-on { font-size: 12px; color: var(--muted); white-space: normal; display: inline-block; min-width: 150px; }
/* In a fixed grid the column decides the width; the text wraps instead of running into the next column */
.cols-sized .based-on { min-width: 0; }
.zone-good { background: #dcfce7; color: #166534; }
.note-flag { color: var(--error); }
:root[data-theme="dark"] .zone-good { background: #0f3320; color: #86efac; }
.exclude-option { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--error); white-space: nowrap; cursor: pointer; }
.exclude-option input { vertical-align: middle; }
/* Age: a small icon, grey unless pointed at or suggested, solid red once ticked */
.exclude-inline { position: relative; display: inline-flex; margin: 0 0 0 6px; padding: 2px; border-radius: 50%; vertical-align: middle; color: var(--muted); }
.exclude-inline .msym { font-size: 18px; }
.exclude-inline:hover, .exclude-inline.is-suggested { color: var(--error); }
.exclude-inline:has(input:focus-visible) { outline: 2px solid var(--accent); }
.exclude-inline:has(input:checked) { background: var(--error); color: #fff; }
.exclude-inline:has(input:disabled) { color: var(--line); cursor: not-allowed; }
/* "Did the bid change work?": the same three words on the Age report and Results since applied */
.last-change { font-size: 12px; white-space: nowrap; color: var(--muted); }
/* Age: the new bid, typed in place */
.th-reset { font-size: 12px; font-weight: 400; color: var(--accent-text); text-decoration: underline; }
/* Every state keeps its space (box or "Excluded", reset or not), so nothing in the row moves */
/* Narrow windows: tighter columns so the table fits without scrolling sideways */
@media (max-width: 1400px) {
  .age-table th, .age-table td { padding: 8px 4px; }
  .age-table .sort-button { padding: 4px 0; }
}
/* The bid and its Exclude icon stay on one line, unless the window is too narrow for the table anyway */
@media (min-width: 1000px) { .age-table td.c-bid, .age-table.cols-sized td.c-bid { white-space: nowrap; } }
.bid-line { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.bid-before { min-width: 4.2em; text-align: right; }
.bid-slot { display: inline-grid; align-items: center; justify-items: center; }
.bid-slot > * { grid-area: 1 / 1; }
.bid-excluded, .age-table tr.row-action .new-setting .bid-excluded { color: var(--error); }
.bid-excluded { visibility: hidden; }
.is-excluding .bid-excluded { visibility: visible; }
.is-excluding .bid-edit { visibility: hidden; }
.bid-reset { display: inline-flex; color: var(--accent-text); visibility: hidden; }
.bid-reset .msym { font-size: 18px; }
.is-manual .bid-reset { visibility: visible; }
.bid-edit { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px 1px 2px; color: var(--muted); white-space: nowrap; }
.bid-edit:hover { border-color: var(--muted); }
.bid-edit:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bid-input { width: 3.5em; padding: 2px 1px; border: 0; background: transparent; font: inherit; color: var(--text);
  text-align: right; outline: none; }
.bid-change .bid-input { font-weight: 600; }
.bid-edit.is-down { background: var(--error-bg); }
.bid-edit.is-down .bid-input, .bid-edit.is-down .bid-unit { color: var(--error); }
.is-manual .bid-edit { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.is-manual .bid-input, .is-manual .bid-unit { color: var(--accent-text); }
.is-manual .bid-edit.is-down { background: var(--error-bg); }  /* a cut stays red; the blue outline says it's yours */
.bid-edit.is-off { background: transparent; }
.bid-edit.is-off .bid-input, .bid-edit.is-off .bid-unit { color: var(--muted); font-weight: 400; }
.last-working { color: #166534; }
.last-not-working { color: #b45309; font-weight: 500; }
:root[data-theme="dark"] .last-working { color: #86efac; } :root[data-theme="dark"] .last-not-working { color: #fbbf24; }

.run-details { margin-top: 20px; }
.run-details > summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; font-weight: 500; list-style: none; }
.run-details > summary::-webkit-details-marker { display: none; }
.run-details > summary .muted { font-weight: 400; font-size: 13px; }
.run-details > .run-facts, .run-details > .run-note { margin: 8px 0 8px 32px; }
.run-note { color: var(--muted); font-size: 13px; }

.action-bar {
  position: sticky; bottom: -48px; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin: 24px -32px -48px; padding: 14px 32px; max-width: none;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}
/* Rows fade out as they slide under the bar, rather than being cut in half */
.action-bar::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none;
  background: linear-gradient(transparent, var(--surface));
}
/* A phone's page has 16px around it, not 32px and 48px */
@media (max-width: 720px) { .action-bar { bottom: -16px; margin: 24px -16px -16px; padding: 12px 16px; } }
.action-bar .apply-form { display: flex; align-items: center; gap: 8px; }
.action-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.note-icon { font-size: 16px; vertical-align: middle; color: var(--accent-text); cursor: help; border-radius: 50%; }
.note-icon:focus { outline: 2px solid var(--accent); }
.note-tip {
  position: absolute; z-index: 50; max-width: 320px; padding: 8px 10px; border-radius: 6px; white-space: pre-line;
  background: var(--midnight); color: #fff; font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-high);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Time of day: the week at a glance (a row per day, one bar per block) above the blocks table */
.week { max-width: 900px; margin: 4px 0 18px; }
.week-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; margin-bottom: 4px; }
.week-day { font-size: 12px; color: var(--muted); }
.week-line { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); height: 26px; }
.week-scale .week-line { height: 16px; font-size: 11px; color: var(--muted); }
.week-seg {
  margin: 0 1px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-align: center;
  font-size: 11px; line-height: 26px; color: var(--muted); cursor: default;
}
.week-seg.changes { font-weight: 600; }
/* Two views, the same for every campaign and remembered in the browser (report.js). "Week": the week and a card with
   the clicked block's numbers. "Week and table": the week and every block, beside the table when the whole table and
   360px of week fit (layout.js adds .beside), above it otherwise, kept in view while the table scrolls. Shorter rows
   than other reports, so a campaign's week and blocks fit on a laptop screen together. */
.tod-view-toggle { margin-left: auto; }
.tod-view-toggle button { padding: 3px 10px; font-size: 13px; }
.tod-view-toggle .msym { font-size: 18px; }
.tod-views[data-tod-view="week"] .week-split { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.tod-views[data-tod-view="week"] .week-split > :not(.week, .block-card) { display: none; }
/* The week as tall as the card beside it, whatever the columns: its days share the height */
.tod-views[data-tod-view="week"] .week { display: flex; flex-direction: column; flex: 1 1 480px; max-width: 760px; margin: 0; }
.tod-views[data-tod-view="week"] .week-split .week-row:not(.week-scale) { flex: 1 0 22px; align-items: stretch; }
.tod-views[data-tod-view="week"] .week-split .week-row:not(.week-scale) .week-day { align-self: center; }
.tod-views[data-tod-view="week"] .week-split .week-row:not(.week-scale) .week-line { height: auto; }
.tod-views[data-tod-view="week"] .week-split .week-seg { display: flex; align-items: center; justify-content: center; }
.tod-views[data-tod-view="table"] .block-card { display: none; }
.block-card { flex: 1 1 260px; max-width: 340px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 13px; }
.block-card h3 { margin: 0; font-size: 15px; font-weight: 500; }
.block-card-hint { margin: 2px 0 6px; color: var(--muted); }
.block-card dl { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.block-card :is(dt, dd) { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.block-card dt { color: var(--muted); }
.block-card dd { padding-left: 12px; text-align: right; }
.block-card :is(dt, dd):nth-last-child(-n+2) { border-bottom: 0; }
.week-split.beside { display: flex; align-items: flex-start; gap: 28px; }
.week-split.beside > :not(.week) { flex: 1 0 var(--table-fits); min-width: 0; }  /* the table, in its slide frame */
.week-split.beside > .week { order: 2; flex: 1 1 360px; max-width: 560px; margin: 0; position: sticky; top: 8px; }
.week-split .week-row:not(.week-scale) .week-line { height: 22px; }
.week-split .week-seg { line-height: 22px; }
@media (min-width: 721px) {
  .tod-views[data-tod-view="table"] .week-split:not(.beside) > .week { position: sticky; top: 0; z-index: 4; max-width: none; margin: 0 0 4px;
    padding: 6px 0; background: var(--bg); }
  .tod-views[data-tod-view="table"] .week-split:not(.beside) .week-row { margin-bottom: 2px; }
  .tod-views[data-tod-view="table"] .week-split:not(.beside) .week-row:not(.week-scale) .week-line { height: 17px; }
  .tod-views[data-tod-view="table"] .week-split:not(.beside) .week-seg { line-height: 17px; }
}
.tod-views .ag-pane .time-table td { height: 32px; padding-top: 2px; padding-bottom: 2px; }
.tod-views .ag-pane .time-table th { height: 38px; }
.week-seg.zone-good { background: #c7ecd4; color: #14532d; }
.week-seg.zone-ok { background: #e8e4da; color: #45413a; }
.week-seg.zone-under { background: #fbe3b5; color: #7a3e00; }
.week-seg.zone-bad { background: #f8d0ca; color: #8a1c12; }
.week-seg.zone-low-data, .week-seg.seg-none { background: var(--hover); }
.week-seg.seg-off { background: repeating-linear-gradient(45deg, var(--hover), var(--hover) 3px, var(--surface) 3px, var(--surface) 6px); }
.week-seg:hover, .week-seg.highlight, .tod-views[data-tod-view="week"] .week-seg.picked { outline: 2px solid var(--accent); outline-offset: -2px; }
:root[data-theme="dark"] .week-seg.zone-good { background: #14532d; color: #dcfce7; }
:root[data-theme="dark"] .week-seg.zone-ok { background: #33312b; color: #e4ded1; }
:root[data-theme="dark"] .week-seg.zone-under { background: #5c3d0a; color: #fde68a; }
:root[data-theme="dark"] .week-seg.zone-bad { background: #5f1d16; color: #fecaca; }

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-13 { grid-column: span 13; }
.span-14 { grid-column: span 14; }
.span-15 { grid-column: span 15; }
.span-16 { grid-column: span 16; }
.span-17 { grid-column: span 17; }
.span-18 { grid-column: span 18; }
.span-19 { grid-column: span 19; }
.span-20 { grid-column: span 20; }
.span-21 { grid-column: span 21; }
.span-22 { grid-column: span 22; }
.span-23 { grid-column: span 23; }
.span-24 { grid-column: span 24; }
.time-table tr.highlight td { background: var(--accent-soft); }
.blocks-details > summary {
  display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; list-style: none;
  color: var(--accent-text); font-weight: 500;
}
.blocks-details > summary::-webkit-details-marker { display: none; }
/* Long tables show a page of rows at a time (table_pages.js) */
.off-page { display: none; }
.table-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 0; }
.table-pager[hidden] { display: none; }
.table-pager .pager-count { margin-right: auto; color: var(--muted); }
.table-pager button:disabled { opacity: .4; cursor: default; }
.table-scroll:has(+ .table-pager) { scroll-margin-top: 72px; }
.row-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; cursor: pointer; border: 0; background: none;
  color: inherit; font: inherit;
  vertical-align: bottom;  /* the taller chevron would otherwise push the text after the button below its line */
}
.row-toggle .outline-chevron { font-size: 18px; margin-left: -4px; }
.row-toggle[aria-expanded="true"] .outline-chevron { transform: rotate(90deg); }
.own-pages td.indent { padding-left: 28px; }
.week-seg[data-row] { cursor: pointer; }
.section-title { margin: 28px 0 4px; font-size: 16px; font-weight: 500; }
.section-sub { margin: 0 0 10px; font-size: 13px; max-width: 900px; }
.recommendations .table-scroll { margin-bottom: 8px; }
.campaign-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 500; cursor: pointer; }
.campaign-pick .muted { font-weight: 400; }
.time-table tr.day-start td { border-top: 1px solid var(--line); }
.time-table tbody tr:first-child td { border-top: 0; }
/* Time of day: a day's bar sets that day's bid; typed bids show in the typed-bid blue, as their boxes do */
.week-seg[data-bar-edit] { cursor: pointer; }
.week-seg.is-manual { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.week-seg.is-manual-down { color: var(--error); }
.bid-except { display: block; margin-top: 2px; font-size: 12px; }
.bar-editor { position: absolute; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.bar-editor-label { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* Account settings */
.settings-form { max-width: 760px; }
.settings-card { padding: 16px 20px; margin-bottom: 16px; border-radius: 8px; }
.text-box {
  font: inherit; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: inherit;
}
.text-box:hover { border-color: var(--muted); }
.text-box:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.text-box::placeholder { color: var(--muted); }
.industry-list { border-top: 1px solid var(--line-soft); }
.industry-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.industry-row:last-child { border-bottom: 0; padding-bottom: 0; }
.industry-account { display: flex; flex-direction: column; min-width: 0; }
.industry-account .muted { font-size: 12px; }
.industry-row .text-box, .industry-box { width: 240px; max-width: 50%; flex-shrink: 0; }
.industry-box { max-width: 100%; }
.settings-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.settings-card > p.muted { margin: 0 0 12px; font-size: 13px; }
.number-setting { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line, #e3e3e3); }
.number-setting:first-of-type { border-top: 0; }
.number-input { white-space: nowrap; font-size: 13px; color: var(--muted, #5f6368); }
.number-input input { width: 64px; text-align: right; padding: 4px 6px; }
.settings-option { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.settings-option input { margin-top: 3px; }
.settings-form:has(input[name=kind][value=ecommerce]:checked) .qualified-card { display: none; }
.action-head, .action-option { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.action-option { grid-template-columns: auto 1fr auto; gap: 10px; border-top: 1px solid var(--line); }
.action-head { font-size: 12px; color: var(--muted); padding: 0 0 6px 26px; }
.action-count { font-variant-numeric: tabular-nums; text-align: right; min-width: 48px; }
.action-more summary { cursor: pointer; padding: 8px 0; border-top: 1px solid var(--line); color: var(--accent-text); font-size: 13px; }
.settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.settings-row select, .settings-row .days-box {
  font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.settings-row .days-box { width: 48px; text-align: center; }
.settings-actions { margin-bottom: 24px; }

/* Tabs at the top of an area (Admin), rules */
.page-tabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--line); }
.page-tabs a { padding: 10px 16px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--text); background: var(--hover); }
.page-tabs a.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.new-rule { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; align-self: center; }
.rules-card { padding: 8px 0 0; border-radius: 8px; margin-bottom: 12px; }
.rules-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 4px 16px 10px; }
.rules-actions .btn-text { display: inline-flex; align-items: center; gap: 4px; }
.rules-table td, .rules-table th { text-align: left; }
.rules-table .rule-report { font-size: 12px; }
.rule-paused td { color: var(--muted); }
.rules-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; margin-bottom: 12px; border-radius: 8px; font-size: 13px; }
.rules-strip > .msym { color: var(--accent-text); }
.rules-strip-body { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.rules-strip .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.rule-form .text-box { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; min-width: 240px; }
.rule-form .inline-option { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.rule-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rule-buttons .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* Results since applied */
.results-pick { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.results-pick select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: inherit; }
.res-change { display: inline-block; min-width: 36px; font-size: 12px; text-align: right; }
.res-counts { font-size: 13px; color: var(--muted); }
.res-subhead { margin: 28px 0 4px; font-size: 15px; font-weight: 500; }
.age-table .res-group-start td { border-top: 1px solid var(--line); }
.res-flag { font-size: 16px; color: #b45309; }
:root[data-theme="dark"] .res-flag { color: #fbbf24; }
.up { color: var(--accent-text); }
.down { color: var(--error); }

/* ---- Sign in and Google Ads connection: one centered card, no account picker ---- */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 32px; border-radius: 12px; box-shadow: var(--shadow); }
.auth-logo { margin-bottom: 24px; }
.auth-title { font-size: 22px; line-height: 28px; font-weight: 500; margin: 0 0 8px; }
.auth-small { font-size: 12px; line-height: 16px; }
.auth-error {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
  border-radius: 8px; background: var(--error-bg); color: var(--error);
}
.auth-error .msym { font-size: 20px; }
.google-button {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 16px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text);
  font-weight: 500; text-decoration: none;
}
.google-button:hover { background: var(--hover); }
.google-button svg { width: 18px; height: 18px; }
.auth-list { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 10px; }
.auth-list li { display: flex; gap: 10px; align-items: flex-start; }
.auth-list .msym { color: var(--accent-text); font-size: 20px; }
.auth-cta { display: block; text-align: center; text-decoration: none; }
.auth-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 20px; }
.auth-facts dt { color: var(--muted); }
.auth-facts dd { margin: 0; overflow-wrap: anywhere; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-actions a { text-decoration: none; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; padding-left: 8px; margin-top: 8px; }
.auth-back .msym { font-size: 18px; }
.auth-disconnect { display: grid; gap: 4px; justify-items: start; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.btn-text.danger { color: var(--error); padding-left: 8px; }
.btn-text.danger:hover { background: var(--error-bg); }
.auth-accounts { display: grid; gap: 8px; margin: 16px 0; }
.auth-account {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left;
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.auth-account:hover:not(:disabled) { background: var(--hover); }
.auth-account[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.auth-account:disabled { opacity: 0.55; cursor: default; }
.auth-account .msym { color: var(--muted); }
.auth-account-text { display: flex; flex-direction: column; min-width: 0; }
.auth-account-name { font-weight: 500; }
.account-tools { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.account-search { flex: 1; min-width: 0; }
.people-search { width: 100%; max-width: 420px; margin: 8px 0 4px; }
.account-ticks { margin: 8px 0 16px; }
.account-ticks label { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.account-ticks label[hidden] { display: none; }
.auth-foot { display: flex; align-items: center; gap: 8px; }

/* ---- Admin > Access and security ---- */
.access-invite { padding: 16px 20px; margin-bottom: 16px; border-radius: 8px; }
.access-invite h2, .access-teams h2, .access-levels h2 { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.access-invite-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.access-invite-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.access-invite-row input, .access-invite-row select, .access-inline select {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
}
.access-invite-row input { width: 280px; max-width: 100%; }
/* The access level's long choices fit a phone: the box narrows and cuts the hint short */
.access-invite-row label { min-width: 0; max-width: 100%; }
.access-invite-row select { max-width: 100%; }
.access-invite .muted { margin: 12px 0 0; font-size: 12px; }
.new-team-link { display: flex; gap: 12px; }
.new-team-link input {
  flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
}
.access-inline-actions { display: inline-block; margin-left: 8px; }
.access-table { border-radius: 8px; margin-bottom: 24px; }
.access-inline { display: flex; align-items: center; gap: 4px; }
.access-inline select { padding: 4px 8px; }
.access-actions { text-align: right; }
.access-pending td { background: var(--hover); }
.access-levels dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 24px; }
.access-levels dt { font-weight: 500; }
.access-levels dd { margin: 0; color: var(--muted); }
.access-teams { padding: 16px 20px; border-radius: 8px; }
.access-team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.access-team-row:first-of-type { border-top: 0; }
.activity-what { white-space: normal; }

/* ---- Privacy policy and terms: plain public pages ---- */
.legal-page { display: block; }
.legal-head { padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.legal-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }
.legal-body h1 { font-size: 28px; line-height: 36px; margin: 0 0 4px; }
.legal-body h2 { font-size: 18px; font-weight: 500; margin: 28px 0 8px; }
.legal-body p, .legal-body li { font-size: 15px; line-height: 24px; }
.legal-body ul { padding-left: 20px; }
.legal-body a, .legal-foot a, .auth-legal a { color: var(--accent-text); }
.legal-date { color: var(--muted); margin: 0 0 24px; }
.legal-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.auth-legal { margin: 0; }

/* ---- Public front page (signed out) ---- */
.legal-head { display: flex; align-items: center; justify-content: space-between; }
.legal-signin { text-decoration: none; }
.landing-hero { padding: 24px 0 8px; }
.landing-hero h1 { font-size: 34px; line-height: 42px; margin: 0 0 12px; }
.landing-tagline { font-family: Manrope, Roboto, Arial, sans-serif; font-weight: 700; color: var(--accent-text); margin: 0 0 8px; }
/* The logo's orange dot as a headline's full stop: outside the app only, one per page (docs/brand/README.md) */
.brand-stop { display: inline-block; width: 0.24em; height: 0.24em; margin-left: 0.08em; border-radius: 50%;
  background: var(--accent-bright); }
.landing-lead { font-size: 18px; line-height: 28px; color: var(--muted); margin: 0 0 24px; }
.landing-cta { display: inline-block; text-decoration: none; padding: 12px 24px; border-radius: 24px; }
.landing-note { color: var(--muted); font-size: 13px; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 32px 0; }
.landing-features > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.landing-features h2 { margin-top: 0; }
.landing-data { background: var(--accent-soft); border-radius: 12px; padding: 4px 24px 12px; }
.legal-body a.landing-cta { color: var(--on-accent); }
.legal-head .product-name { display: inline; }  /* the public pages have room for the wordmark at any width */
.inline-select { font: inherit; font-size: 13px; margin-top: 2px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; max-width: 100%; }
.ag-pick-button { cursor: pointer; text-align: left; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pick-button::after { content: "▾"; color: var(--muted); margin-left: 4px; }
.ag-pick-panel { position: fixed; width: 320px; }  /* fixed: the table around it would cut it off */
.ag-pick-list li:first-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ag-pick-list a { padding: 6px 14px; }
.ag-pick-heading { padding: 8px 14px 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.ag-pick-text { flex: 1; min-width: 0; }
.ag-pick-panel .picker-empty { border-top: 1px solid var(--line-soft); padding: 8px 14px; font-size: 12px; }
.split-steps { margin: 0; padding-left: 18px; } .split-steps li { margin-bottom: 2px; }

/* Search terms: one list of changes */
.kind-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 4px; }
.kind-tabs button { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; cursor: pointer; }
.kind-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent-text); font-weight: 500; }
.changes-table td.change-cell { white-space: normal; min-width: 10rem; }  /* long searches wrap: no sideways scroll */
/* Search terms: one line a change, as on Age; why and what it does are on the icon, a long list of places is cut
   short (all of it on pointing) */
.terms-table.changes-table td.change-cell { white-space: nowrap; }
.terms-table td.where-cell { min-width: 0; }
.terms-table .where-text { display: block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pane .changes-table .ag-pick-button { max-width: 130px; }
.changes-table .change-cell strong { font-weight: 500; }
.row-details { margin-top: 6px; }
.row-details summary { cursor: pointer; color: var(--accent-text); font-size: 13px; list-style: none; }
.row-details summary::-webkit-details-marker { display: none; }

/* Campaign picker (every report) */
.campaign-menu-panel { min-width: 260px; max-height: 420px; overflow-y: auto; }
.menu-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 0; }
.option-picked { background: var(--accent-soft); }
.scope-note { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 13px;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
/* Location: the list of changes, with a bar for how each place does against its campaign */
.location-changes .verb { font-weight: 500; }
/* Eight columns on a laptop screen without a sideways scroll */
.location-changes th, .location-changes td { padding-left: 8px; padding-right: 8px; }
.location-changes td.change-cell { white-space: nowrap; }  /* one line a row, as on Age: the reason is on the icon */
.location-changes th .sort-button { padding-left: 4px; padding-right: 4px; }
.verb-down, .verb-exclude { color: #9a3412; }
.verb-up { color: var(--accent-text); }
.verb-keep, .verb-rings { color: var(--muted); }
/* Landing pages: a change's two pages, one a line, with each number on its page's line. A faint line runs between
   them across the row: the cells' padding is taken back so it doesn't break between columns. */
.lp-changes td.lp-pair > div { min-height: 22px; line-height: 22px; white-space: nowrap; }
.lp-changes td.lp-pair > div:first-child { margin: 0 -8px; padding: 0 8px 4px; border-bottom: 1px solid var(--line-soft); }
.lp-changes td.lp-pair > div + div { margin-top: 4px; }
@media (max-width: 1400px) { .lp-changes td.lp-pair > div:first-child { margin: 0 -4px; padding: 0 4px 4px; } }

/* Campaign picker in the top bar, like Google Ads' campaign and ad group selector */
.campaign-picker { display: flex; align-items: stretch; gap: 8px; margin-left: 12px; min-width: 0; }
.cp-box { position: relative; display: flex; align-items: stretch; min-width: 0; }
.cp-back, .cp-toggle { display: flex; align-items: center; gap: 10px; border: 0; font: inherit; cursor: pointer;
  background: var(--accent); color: var(--on-accent); text-decoration: none; }
.cp-back { padding: 0 10px; border-radius: 8px 0 0 8px; border-right: 1px solid rgba(255, 255, 255, 0.35); }
.cp-toggle { padding: 6px 12px; border-radius: 8px; min-width: 0; text-align: left; }
.cp-back + .cp-toggle { border-radius: 0 8px 8px 0; }
.cp-back:hover, .cp-toggle:hover { filter: brightness(1.1); }
.cp-toggle-plain { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.cp-toggle-plain:hover { filter: none; background: var(--hover); }
.cp-text { display: flex; flex-direction: column; min-width: 0; }
.cp-toggle .cp-name { font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.cp-toggle .cp-sub { font-size: 12px; line-height: 16px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-toggle { min-width: 96px; }
.cp-box + .cp-box .cp-name { max-width: 200px; }
.cp-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 520px; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 10px;
  box-shadow: var(--shadow-high); padding: 8px 0; }
.cp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 16px 8px; }
.cp-filters > .msym { color: var(--muted); }
.cp-chips { display: contents; }
.cp-filter { position: relative; }
.cp-filter > summary { list-style: none; cursor: pointer; }
.cp-filter > summary::-webkit-details-marker { display: none; }
.cp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 14px;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cp-chip .msym { font-size: 16px; color: var(--muted); }
.cp-add-filter { font-size: 13px; color: var(--accent-text); }
.cp-filter-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 31; min-width: 180px; padding: 6px 0;
  max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: var(--shadow-high); }
.cp-filter-title { margin: 2px 12px 4px; font-size: 12px; color: var(--muted); }
.cp-filter-menu a, .cp-filter-menu button { display: block; width: 100%; padding: 6px 12px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.cp-filter-menu button[hidden] { display: none; }
.cp-filter-menu a:hover, .cp-filter-menu button:hover { background: var(--hover); }
.cp-filter-menu a[aria-current="true"] { font-weight: 600; }
.cp-view-all { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); color: inherit; font-size: 14px; text-decoration: none; }
.cp-more { margin: 0; padding: 8px 16px; font-size: 12px; }
.cp-view-all:hover { background: var(--hover); }
.cp-view-all[aria-current="true"] { background: var(--accent-soft); }
.cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 4px; border-top: 1px solid var(--line-soft); }
.cp-list { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.cp-list a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: inherit; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.cp-list .cp-name { display: block; font-size: 14px; }
.cp-list .cp-sub { display: block; font-size: 12px; color: var(--muted); }
.cp-row { display: flex; align-items: center; }
.cp-row:hover { background: var(--hover); }
.cp-row:has(> a[aria-current="true"]) { background: var(--accent-soft); }
.cp-row input[type=checkbox] { flex: none; margin: 0 0 0 16px; }
.cp-icon { color: var(--muted); }
.cp-expand { display: flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--muted); padding: 8px 14px; cursor: pointer; }
.cp-expand[aria-expanded="true"] .msym { transform: rotate(180deg); }
.cp-ad-groups { list-style: none; margin: 0; padding: 0 0 4px; }  /* only hover and the picked one are shaded */
.cp-ad-groups .cp-row input[type=checkbox] { margin-left: 44px; }
.campaign-picker { flex-shrink: 0; }
@media (max-width: 720px) {
  .campaign-picker { order: 1; flex: 1 0 100%; margin-left: 0; gap: 4px; }
  .campaign-picker .cp-box:last-child, .campaign-picker .cp-box:last-child .cp-toggle { flex: 1; }
  .cp-toggle .cp-name { max-width: none; }
}

/* Every report: campaigns (and ad groups) in a list down the side, one table beside them (`_side_list.html`) */
.ag-layout { display: flex; align-items: flex-start; gap: 24px; }
.ag-list { position: sticky; top: 0; flex: none; width: 240px; max-height: calc(100vh - 120px); overflow-y: auto; box-sizing: border-box; padding-right: 12px; border-right: 1px solid var(--line); }
.ag-campaign > summary { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px 0 2px; border-radius: 4px; font-weight: 500; cursor: pointer; list-style: none; }
.ag-campaign > summary::-webkit-details-marker { display: none; }
.ag-campaign > summary:hover, .ag-item:hover { background: var(--hover); }
.ag-campaign[open] > summary .outline-chevron { transform: rotate(90deg); }
.ag-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 8px 0 28px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ag-campaign > summary.is-open, .ag-item.is-open { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.ag-top { padding-left: 8px; }
.ag-list:has(.ag-campaign) .ag-top { padding-left: 30px; font-weight: 500; }  /* Age's Whole account, lined up with the campaign names */
.ag-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ag-count { color: var(--accent-text); font-weight: 500; }
.ag-count[hidden] { display: none; }
.ag-menu { display: none; margin-bottom: 12px; }
.ag-menu label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.ag-menu select { width: 100%; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: inherit; font: inherit; }
.ag-main { flex: 1; min-width: 0; }
/* The list folds into a thin strip with one button to bring it back (`_side_list.html`) */
.ag-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-left: 8px; color: var(--muted); font-size: 12px; }
.ag-fold { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ag-fold:hover { background: var(--hover); color: var(--text); }
.ag-rail { display: none; position: sticky; top: 0; flex: none; width: 40px; min-height: 120px; justify-content: center; border-right: 1px solid var(--line); }
.side-list-folded .ag-list { display: none; }
.side-list-folded .ag-rail { display: flex; }
.ag-pane[hidden] { display: none; }
.ag-pane .age-table td.num { white-space: nowrap; }
.ag-pane .age-table .totals-row td { border-top: 2px solid var(--muted); background: var(--hover); white-space: nowrap; }
.ag-pane-title { margin: 0 0 2px; font-size: 17px; font-weight: 500; }
.ag-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 22px; margin: 0 0 8px; font-size: 13px; }
/* Every tab's rows are the same height, with or without a bid box */
.ag-pane .age-table td { height: 46px; vertical-align: middle; }
.ag-pane .age-table th { height: 56px; }
.ag-pane-note { margin: 0 0 8px; font-size: 13px; }
/* A pane with several tables (a campaign's ad groups): each under its own small heading */
.pane-part + .pane-part { margin-top: 24px; }
.pane-part-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 15px; font-weight: 500; }
.pane-part-title .muted { font-weight: 400; }
/* The side list takes room, so its tables tighten up in windows a little wider than the others do */
@media (max-width: 1500px) {
  .ag-pane .age-table :is(th, td) { padding: 8px 4px; }
}
/* No room for a side list beside the table, so it becomes a dropdown above it */
@media (max-width: 1200px) {
  .ag-layout { display: block; }
  .ag-list, .ag-rail, .side-list-folded .ag-rail { display: none; }
  .ag-menu { display: block; }
}
/* Age on a phone: what to do first; Cost and the other numbers are a swipe away */
@media (max-width: 720px) {
  .ag-pane .age-table:has(.c-bid) { display: block; width: max-content; }
  .ag-pane .age-table:has(.c-bid) :is(thead, tbody) { display: block; }
  .ag-pane .age-table:has(.c-bid) tr { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; grid-template-columns: 32px 62px 68px 188px; align-items: center; border-bottom: 1px solid var(--line-soft); }
  .ag-pane .age-table:has(.c-bid) :is(th, td) { border: 0; }
  .ag-pane .age-table:has(.c-bid) th { width: auto !important; height: auto; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .ag-pane .age-table:has(.c-bid) td { height: auto; min-height: 46px; }
  .ag-pane .age-table:has(.c-bid) :is(.c-impr, .c-clicks, .c-cpc, .c-cost, .c-sis, .c-conv, .c-value, .c-cpa, .c-roas, .c-offset) { order: 1; }
  /* Audience segments have names, not "25–34": a wider column, broken only between words */
  .ag-pane .age-table.segment-names:has(.c-bid) tr { grid-template-columns: 32px 120px 68px 188px; }
  .ag-pane .age-table:has(.c-bid) td.c-bid { white-space: nowrap; }
  /* "Not enough data yet" and "112% better" wrap in their narrow column instead of running into the bid */
  .ag-pane .age-table:has(.c-bid) :is(td.c-score, td.c-score *) { white-space: normal; }
  .ag-pane .age-table:has(.c-bid) .total-of { display: none; }  /* "Total", to fit the Age column */
  /* The frozen cells fill the row's height, so nothing slides past above or below them */
  .ag-pane .age-table:has(.c-bid) tr > :is(.pick-col, .pick-col + *) { align-self: stretch; display: flex; align-items: center; }
}

.applied-hint { font-size: 12px; font-weight: 400; }
/* Data menu: one option per row, a short hint under each, Run at the bottom */
.data-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.data-row input[type=date] { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
.data-label { min-width: 84px; }
.data-check { cursor: pointer; }
.waiting-text { color: #9a3412; font-weight: 500; }
.rules-grid td { vertical-align: top; white-space: nowrap; }
.rules-grid .add-rule { font-size: 13px; }
/* Calendar: a month of report activity, a list, and the 30-day waits. Entries are tinted like Google Calendar's. */
:root {
  --ev-apply: #e1ebe4; --ev-apply-text: #25564b;
  --ev-undo: #ebe7dd; --ev-undo-text: #6b665c;
  --ev-external: #ede9fe; --ev-external-text: #5b21b6;
  --ev-wait: #ffedd5; --ev-wait-text: #9a3412;
  --ev-excluded: #fff7ea;
}
:root[data-theme="dark"] {
  --ev-apply: #2a3a33; --ev-apply-text: #b5d6ca;
  --ev-undo: #2a2824; --ev-undo-text: #9c9587;
  --ev-external: #2e1f5e; --ev-external-text: #ddd6fe;
  --ev-wait: #43230c; --ev-wait-text: #fdba74;
  --ev-excluded: #2a2213;
}

.month-nav { display: flex; align-items: center; gap: 4px; }
/* The Month view's table only: the date picker's months share the name */
table.cal-month { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.cal-month th { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  text-align: center; padding: 8px 4px; border-bottom: 0; }
.cal-month td { vertical-align: top; height: 104px; padding: 4px 6px 8px; border: 1px solid var(--line-soft); font-size: 12px; }
.cal-month td.outside { background: var(--hover); }
.cal-month td.is-excluded { background: var(--ev-excluded); }
.day-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 4px;
  border-radius: 50%; font-size: 12px; font-weight: 500; }
.cal-month td.is-past .day-number { color: var(--muted); }
.cal-month td.is-today .day-number { background: var(--accent); color: var(--on-accent); }
.ev { display: block; margin: 0 0 3px; padding: 2px 8px; border-radius: 4px; line-height: 1.35; font-size: 12px;
  background: var(--ev-apply); color: var(--ev-apply-text); overflow: hidden; text-overflow: ellipsis; }
.ev a { color: inherit; text-decoration: none; }
.ev a:hover { text-decoration: underline; }
.ev-undo { background: var(--ev-undo); color: var(--ev-undo-text); }
.ev-external { background: var(--ev-external); color: var(--ev-external-text); }
.ev-rule { background: none; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.ev-wait { background: var(--ev-wait); color: var(--ev-wait-text); }
.day-more summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 500; padding: 0 8px; list-style: none; }
.day-more summary::-webkit-details-marker { display: none; }
.day-more summary:hover { color: var(--text); }
.day-more[open] summary { margin-bottom: 3px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 12px 0 0; padding: 0;
  font-size: 12px; color: var(--muted); }
.cal-legend li { display: flex; align-items: center; gap: 6px; cursor: help; }
.swatch { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.swatch.ev-apply { color: var(--accent); }
.swatch.ev-undo { color: var(--ev-undo-text); }
.swatch.ev-external { color: var(--ev-external-text); }
.swatch.ev-rule { color: var(--accent); background: none; box-shadow: inset 0 0 0 2px currentColor; }
.swatch.ev-wait { color: var(--ev-wait-text); }
.swatch.is-excluded { border-radius: 2px; background: var(--ev-excluded); box-shadow: inset 0 0 0 1px #f0c999; }
.cal-heading { font-size: 18px; font-weight: 500; margin: 32px 0 4px; }
.cal-sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; max-width: 760px; }
.cal-list { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.cal-list li { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cal-list .cal-when { flex: 0 0 96px; color: var(--muted); font-size: 13px; }
.cal-list .ev { display: inline-block; margin: 0; font-size: 13px; }
.cal-none { margin: 0; padding: 16px; }
.table-search { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 420px; color: var(--muted); }
.table-search input { flex: 1; min-width: 0; border: 0; outline: none; padding: 6px 0; font: inherit; color: var(--text);
  background: none; }
.table-search:focus-within { color: var(--accent-text); }
.wait-bar { display: inline-block; width: 80px; margin-right: 8px; height: 6px; border-radius: 3px; background: var(--hover); vertical-align: middle; }
.wait-done { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.wait-done.w0 { width: 0; } .wait-done.w1 { width: 10%; } .wait-done.w2 { width: 20%; } .wait-done.w3 { width: 30%; }
.wait-done.w4 { width: 40%; } .wait-done.w5 { width: 50%; } .wait-done.w6 { width: 60%; } .wait-done.w7 { width: 70%; }
.wait-done.w8 { width: 80%; } .wait-done.w9 { width: 90%; } .wait-done.w10 { width: 100%; }
.menu-form { margin: 0; }
.menu-form .menu-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
/* On / Paused switch (a rule's page) */
.status-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 10px; border: 0; padding: 0; cursor: pointer; background: #cfc9bc; }
.switch.on { background: var(--accent); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on .knob { left: 18px; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Admin > Switches: one row a feature, its switch on the right */
.switch-list { border-radius: 8px; }
.switch-row { display: flex; align-items: center; gap: 24px; margin: 0; padding: 16px 20px; }
.switch-row + .switch-row { border-top: 1px solid var(--line-soft); }
.switch-text { flex: 1; min-width: 0; }
.switch-text h2 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.switch-text p { margin: 2px 0 0; font-size: 14px; }
.switch-row .status-switch { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) { .switch-row { gap: 16px; padding: 14px 16px; } .switch-since { display: none; } }
/* Asset report */
.asset-text-cell { min-width: 260px; }
.asset-text-cell .asset-text { min-width: 260px; }  /* the box itself, so the column sizing (layout.js) keeps room to write */
/* Asset report: images and videos */
.media-cell { display: flex; align-items: center; gap: 10px; }
.media-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--line); flex: none; }
.media-thumb.wide { width: 84px; height: 44px; }
.media-thumb.tall { width: 42px; height: 56px; }
.media-pick { max-width: 260px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: var(--surface); color: inherit; }
.media-new { margin-top: 6px; }
.media-new input[type=file] { display: block; margin-top: 4px; font: inherit; font-size: 12px; }
.part-tabs { margin: 4px 0 16px; }
.part-tabs a { font-size: 14px; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid transparent; text-decoration: none; }
.part-tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent-text); font-weight: 500; }
.asset-text { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: var(--surface); color: inherit; }

/* Bid caps: the change and its reason need room to read */
/* One line a campaign, as on Age: the action, how and why on its icon, its ad groups' boxes behind "N ad groups" */
.age-table.cap-table td.change-cell { white-space: nowrap; }
.cap-table .change-what { font-weight: 500; }
.cap-table .bid-pick { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cap-table .more-picks { display: inline; }
.cap-table .more-picks summary { display: inline; margin-left: 4px; cursor: pointer; }
.cap-table .more-picks[open] > summary { display: block; margin: 4px 0 2px; }
.holiday-table .bid-pick { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 4px; }
.holiday-table .bid-pick:first-child { margin-top: 0; }
.holiday-table .change-what { font-weight: 500; color: var(--text); }
/* Last time's holiday, this year's weeks and what to expect, each a group of columns under its name, then the changes.
   No fills: each name is underlined across its columns, like tabs, green for Expected (Levi, Nov 4, 2026) */
.holiday-table td { vertical-align: top; }
.holiday-table .group-start { border-left: 1px solid var(--line); }
.holiday-table tr.group-row th[data-band] { border-bottom: 2px solid color-mix(in srgb, var(--muted) 35%, var(--line)); }
.holiday-table tr.group-row th[data-band="band-expected"] { border-bottom-color: var(--accent); }
.holiday-table td.band-expected { font-weight: 500; }
/* Only the headings' row sticks when scrolling; the group names above it scroll away */
.holiday-table tr.group-row th { position: static; box-shadow: none; text-align: left; vertical-align: top; font-weight: 500;
  color: var(--text); white-space: nowrap; }
.table-scroll .holiday-table tr.group-row > :is(:first-child, .pick-col + *) { position: sticky; top: auto; }  /* stays on the left */
.holiday-table tr.group-row th .muted { display: block; font-weight: 400; font-size: 12px; }
.holiday-table .move { font-size: 12px; color: var(--muted); }
.holiday-table .group-name { display: flex; align-items: center; gap: 8px; }
/* The fold button: a quiet round icon at the group name's end, clearer on hover or when folded */
.holiday-table .band-fold { order: 1; margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; opacity: .8;
  transition: opacity .15s, background-color .15s; }
.holiday-table .band-fold .msym { font-size: 18px; }
.holiday-table th[data-band]:hover .band-fold, .holiday-table .band-fold:focus-visible,
.holiday-table .band-fold[aria-expanded="false"] { opacity: 1; }
.holiday-table .band-fold:hover { background: var(--line-soft); color: var(--text); }
.holiday-table .band-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A folded group shows its Cost only, under its name (report.js) */
.holiday-table.folded-band-past .band-past:not(.c-cost, [data-band]),
.holiday-table.folded-band-lately .band-lately:not(.c-cost, [data-band]),
.holiday-table.folded-band-expected .band-expected:not(.c-cost, [data-band]) { display: none; }
.holiday-table.folded-band-past th.band-past .muted, .holiday-table.folded-band-lately th.band-lately .muted,
.holiday-table.folded-band-expected th.band-expected .muted { display: none; }
.holiday-table.folded-band-past .band-past.c-cost, .holiday-table.folded-band-lately .band-lately.c-cost,
.holiday-table.folded-band-expected .band-expected.c-cost { border-left: 1px solid var(--line); }
.holiday-table td.new-budget { white-space: nowrap; }
.holiday-table td.new-budget .bid-pick { justify-content: flex-end; }
.holiday-table td.seasonality-cell { white-space: nowrap; }
.holiday-table .bid-pick { gap: 4px; }
.holiday-table .bid-input { width: 4.5em; }
.holiday-table .bid-edit { padding-left: 6px; }
.holiday-steps { margin: 4px 0 12px; }
.holiday-form { display: flex; flex-direction: column; gap: 12px; width: 320px; max-width: calc(100vw - 32px);
  padding: 16px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.menu-panel > .holiday-form:first-child { border-top: 0; margin-top: 0; }
.holiday-form-title { margin: 0; font-weight: 500; }
.holiday-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.holiday-form input[type=text], .holiday-form input[type=date], .holiday-form input[type=number], .holiday-form select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface); min-width: 0;
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; }
.holiday-form input:focus-visible, .holiday-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.holiday-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The new holiday's calendar: days of a month, no weekdays or year (report.js) */
.day-picker { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px 8px; background: var(--surface); }
.day-picker-nav { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--text); }
.day-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; margin-top: 4px; }
.day-picker-grid button { font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; border-radius: 4px;
  padding: 6px 0; cursor: pointer; }
.day-picker-grid button:hover { background: var(--line-soft); }
.day-picker-grid button.in { background: var(--accent-soft); border-radius: 0; }
.day-picker-grid button.on { background: var(--accent); color: var(--surface); }
.day-picker-picked { margin: 8px 0 0; font-size: 12.5px; color: var(--text); }
.holiday-rule { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 6px; font-size: 14px; }
.holiday-rule select { padding-left: 6px; padding-right: 2px; }
.holiday-form .holiday-days { width: 88px; }
.holiday-form .hint { margin-top: -2px; }
.holiday-form-actions { display: flex; justify-content: flex-end; }
.holiday-form:has([value="weekday"]:checked) .by-dates,
.holiday-form:not(:has([value="weekday"]:checked)) .by-weekday { display: none; }
/* Two or three choices side by side, one picked (radio buttons that look like one control) */
.segmented { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.segmented label { flex: 1; display: flex; }
.segmented label + label { border-left: 1px solid var(--line); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { flex: 1; padding: 7px 8px; text-align: center; font-size: 14px; color: var(--text); cursor: pointer; }
.segmented span:hover { background: var(--hover); }
.segmented input:checked + span { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.own-day { display: flex; align-items: center; }
.own-day .btn-icon { margin-right: 8px; padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.own-day .btn-icon:hover { color: var(--text); }

/* Loading: a bar along the top and a short note while the next page loads (layout.js) */
.page-loading { position: fixed; inset: 0 0 auto 0; z-index: 1000; pointer-events: none; }
.page-loading-bar { position: absolute; top: 0; left: -40%; width: 40%; height: 3px; background: var(--accent);
  animation: page-loading 1.2s linear infinite; }
.page-loading-note { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); padding: 6px 14px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 500;
  white-space: nowrap; }
@keyframes page-loading { to { left: 100%; } }
.btn-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loading-bar { animation: none; left: 0; width: 100%; } .btn-spinner { animation: none; } }

/* Home: when the numbers were fetched, before the account count */
.toolbar-fresh { margin-left: auto; margin-right: 16px; font-size: 13px; }

/* Report tables: drag a heading to move its column, or the line between two headings to resize (layout.js) */
.col-grip { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; z-index: 1; cursor: col-resize; touch-action: none; }
.col-grip::after { content: ''; position: absolute; left: 4px; top: 20%; bottom: 20%; width: 2px; border-radius: 1px; }
.age-table thead .col-grip:hover::after, .col-grip.dragging::after { background: var(--accent); }
.col-resizing { cursor: col-resize; user-select: none; }
.age-table.cols-sized { table-layout: fixed; }
/* While layout.js measures, a cell's fixed minimum doesn't count: it gives columns of words their own (120px) */
.age-table.col-measure :is(th, td) { min-width: 0 !important; }
.age-table.cols-sized th, .age-table.cols-sized td { white-space: normal; overflow-wrap: anywhere; }
.age-table.segment-names .seg-name { overflow-wrap: normal; word-break: normal; }
.age-table td .inline-select { max-width: 100%; }
.age-table th:last-child .col-grip { display: none; }
.col-moving, .col-moving * { cursor: grabbing !important; user-select: none; }
.age-table .col-lifted { opacity: .35; }
.col-ghost {
  position: fixed; z-index: 41; pointer-events: none; padding: 6px 12px; box-sizing: border-box;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text); opacity: .85;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 4px; box-shadow: var(--shadow-high);
}
.col-drop-mark { position: fixed; z-index: 40; width: 2px; background: var(--accent); pointer-events: none; }

/* Report tables: every column and heading lines up on the left, numbers too */
.age-table th.num, .age-table td.num { text-align: left; }
/* ...except the Accounts page's tables, which line up numbers on the right like Google Ads */
:is(.accounts-table, .campaigns-table) :is(th, td).num { text-align: right; }
/* Its accounts table has many columns: tighter cells, and every number level with the account's name */
.accounts-table :is(th, td) { padding: 8px; }
.accounts-table th { padding-left: 2px; padding-right: 2px; }
.accounts-table th:not([data-sort]) { padding: 10px 6px; }  /* Labels: level with the sort buttons' words */
.accounts-table .acct-labels { font-size: 13px; }

/* Side panel (the Age report's Advanced settings), sliding in from the right like Google Ads' edit panels */
.side-panel { position: fixed; inset: 0 0 0 auto; margin: 0; height: auto; max-height: none; width: min(520px, 100vw);
  padding: 0; border: 0; overflow: hidden; background: var(--surface); color: inherit; box-shadow: -8px 0 24px rgb(0 0 0 / 0.12); }
.side-panel[open] { animation: side-panel-in 0.18s ease-out; }
@keyframes side-panel-in { from { transform: translateX(40px); } }
.side-panel::backdrop { background: rgb(0 0 0 / 0.25); }
.side-panel-form { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.side-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.side-panel-head h2 { margin: 0 0 2px; font-size: 20px; font-weight: 500; }
.side-panel-head p { margin: 0; font-size: 13px; }
.side-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 16px; }
.side-panel-foot { display: flex; gap: 8px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line-soft); }
/* More columns (_more_columns.html): the search box stays on top while the groups scroll */
.more-columns-search { position: sticky; top: 0; width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; font: inherit; z-index: 1; }
.more-columns .side-panel-body { padding-top: 12px; }
.more-columns-group { border: 0; margin: 12px 0 0; padding: 0; }
.more-columns-group legend { font-weight: 500; padding: 0 0 4px; }
.more-columns-group .menu-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.more-columns-group .menu-check input { flex: none; }
.icon-button { background: none; border: 0; cursor: pointer; padding: 6px; margin: -6px -6px 0 0; color: var(--muted); border-radius: 50%; }
.icon-button:hover { background: var(--line-soft); }
.advanced-group { border-bottom: 1px solid var(--line-soft); }
.advanced-group[open] { padding-bottom: 12px; }
.advanced-group > summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; cursor: pointer; list-style: none; }
.advanced-group > summary::-webkit-details-marker { display: none; }
.advanced-group > summary:hover h3 { color: var(--accent-text); }
.advanced-group .outline-chevron { flex: none; font-size: 20px; color: var(--muted); }
.advanced-group-title { flex: 1; min-width: 0; }
/* Open, each changed row says so itself */
.advanced-group[open] .advanced-group-changed { display: none; }
.advanced-group h3 { margin: 0; font-size: 14px; font-weight: 500; }
.advanced-group-line, .advanced-group-changed { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.advanced-group-changed { color: var(--accent-text); }
.advanced-group-changed[hidden] { display: none; }
.advanced-changed { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.advanced-changed[hidden] { display: none; }
.advanced-changed .link-button { font-size: inherit; color: var(--accent-text); }
.advanced-field.bad { border-color: var(--error); outline: 1px solid var(--error); }
.advanced-problem { margin: 0 0 6px; font-size: 12px; color: var(--error); }
.advanced-problem[hidden] { display: none; }
.advanced-rows { max-width: 480px; }
.advanced-row.dimmed { opacity: 0.45; }
.advanced-inputs { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
/* Words on the left, every box in one column on the right, so the numbers can be read straight down */
.advanced-on { flex: 1; min-width: 0; }
.advanced-on[hidden] { display: none; }
/* Every line the same height, with or without a small line under its words */
.advanced-line { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: center; min-height: 44px; }
.advanced-label { align-self: start; padding-top: 12px; line-height: 20px; }
.advanced-line.no-box { grid-template-columns: minmax(0, 1fr); }
.advanced-line.no-box .advanced-value { display: contents; }
/* A menu with one choice left reads as the end of its sentence (settings_rows.js) */
.advanced-line.one-choice { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 0.3em; }
.advanced-line.one-choice .advanced-value { display: contents; }
.advanced-line.one-choice [data-only-choice] { padding-top: 12px; line-height: 20px; }
.advanced-row-note { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.advanced-detail { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.advanced-value { display: flex; align-items: center; gap: 8px; }
.advanced-value .advanced-field { flex: none; width: 64px; height: 30px; margin: 0; justify-content: center; }
.advanced-value .advanced-field input { width: 100%; min-width: 0; }
.advanced-row { margin-bottom: 8px; }
.advanced-stepper { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.advanced-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.advanced-step:hover { background: var(--line-soft); color: inherit; }
.advanced-step .msym { font-size: 18px; }
.advanced-unit { line-height: 16px; }
/* On a phone the words go above their box, so neither gets squeezed */
@media (max-width: 560px) {
  .advanced-line { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-bottom: 8px; }
  .advanced-label { padding-top: 8px; }
  .advanced-step { width: 36px; height: 36px; }
  .advanced-value .advanced-field { height: 36px; }
}
.advanced-value select.advanced-field { width: 100%; }
.advanced-value select.advanced-field[hidden] { display: none; }
.advanced-off { display: flex; align-items: center; min-height: 44px; line-height: 20px; color: var(--muted); }
.advanced-tick { flex: none; width: 15px; height: 15px; margin: 15px 0 0; }
.advanced-row:not(.has-tick), .advanced-row[data-dimmed-when] { padding-left: 23px; }
.advanced-default .link-button { font-size: inherit; color: var(--accent-text); }
.side-panel-foot .btn-primary, .side-panel-foot .btn-text { white-space: nowrap; }
.side-panel-foot { flex-wrap: wrap; }
.saved-settings[hidden] { display: none; }
.saved-settings-panel { min-width: 320px; font-weight: 400; }
.saved-settings-panel .menu-row { padding: 8px 12px 8px 16px; }
.saved-settings-panel .menu-item { padding-block: 8px; }
.advanced-field { display: inline-flex; align-items: center; gap: 3px; height: 28px; margin: 0 2px; padding: 0 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: inherit; font: inherit; line-height: 26px; vertical-align: middle; }
.advanced-field:focus-within, select.advanced-field:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
.advanced-field input { width: 3.5ch; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: center; outline: none; }
.advanced-unit { color: var(--muted); font-size: 13px; }
select.advanced-field { padding-right: 4px; max-width: 100%; }
.advanced-default { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.advanced-default[hidden] { display: none; }
.advanced-button { cursor: pointer; }
.side-panel.compact { inset: 120px 24px auto auto; width: min(380px, calc(100vw - 32px)); border-radius: 8px; }
.side-panel.compact .side-panel-head { border-bottom: 0; padding-bottom: 8px; }
.advanced-switch { display: flex; align-items: center; gap: 10px; padding: 4px 24px 12px; font-size: 14px; font-weight: 500; }
.advanced-basic { margin: 0; padding: 0 24px 16px; font-size: 13px; }
.advanced-note { margin: 16px 0 0; padding: 8px 12px; background: var(--line-soft); border-radius: 4px; font-size: 13px; }
.advanced-field.wide-name input { width: 22ch; text-align: left; }
/* A thin, quiet scroll bar inside the panel, like Google Ads' side panels */
.side-panel-body { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.side-panel-body:hover, .side-panel-body:focus-within { scrollbar-color: var(--line) transparent; }
.run-settings { font-weight: normal; }
.rule-advanced .saved-settings { margin: 8px 0; width: fit-content; }
.rule-report-numbers { border: 0; margin: 0; padding: 0; min-width: 0; }

/* The Change log */
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-left: auto; }
.log-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.log-filter select { font: inherit; color: var(--text); background: var(--surface); padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; }
.log-open { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-align: left; }
.log-open .msym { font-size: 18px; transition: transform 0.1s; }
.log-open[aria-expanded="true"] .msym { transform: rotate(90deg); }
.log-child td:nth-child(3) { padding-left: 20px; }
.log-table details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.log-table td.why-cell { min-width: 240px; }
/* A change's numbers at the time: name left, number right, one a line */
.log-numbers { display: grid; grid-template-columns: max-content max-content; gap: 2px 16px; margin: 4px 0 0 14px; font-size: 13px; }
.log-numbers dt { color: var(--muted); }
.log-numbers dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Report a problem (web/pages/problems.py) */
.problem-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; padding: 16px 20px; border-radius: 8px; }
.problem-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.problem-form textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); resize: vertical; }
.problem-where { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; font-size: 13px; }
.problem-where div { display: flex; gap: 6px; min-width: 0; }
.problem-where dt { font-weight: 500; }
.problem-where dd { margin: 0; overflow-wrap: anywhere; }
.problem-actions { display: flex; align-items: center; gap: 12px; }
.problem-what { white-space: pre-wrap; max-width: 420px; }
.problem-actions a.btn-primary { text-decoration: none; }

/* Demographics report: "Check one type of person" above an ad group's tables, then one short table per kind */
.mix-finder { margin: 6px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.mix-title { margin: 0; font-size: 14px; font-weight: 500; }
.mix-hint { margin: 2px 0 12px; font-size: 13px; max-width: 640px; }
.mix-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Outlined fields with the label inside, like Google Ads' menus; a picked one turns sage */
.mix-pick {
  position: relative; display: block; width: 168px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); cursor: pointer;
}
.mix-pick:hover { border-color: var(--muted); }
.mix-pick:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); }
.mix-pick:has(option:checked:not([value=""])) { background: var(--accent-soft); border-color: var(--accent); }
.mix-pick-label { position: absolute; top: 5px; left: 10px; font-size: 11px; color: var(--muted); pointer-events: none; }
.mix-pick select {
  appearance: none; width: 100%; padding: 20px 28px 6px 10px; border: 0; outline: 0; background: none;
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.mix-pick .msym { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mix-clear { padding: 6px 10px; }
.mix-answer { margin-top: 14px; font-size: 13px; }
.mix-who { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.mix-result { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.mix-result dt { color: var(--muted); }
.mix-result dd { margin: 0; }
.mix-excluded { margin: 0; }
.demo-table { margin-bottom: 14px; }

/* Channels report: channels with Google Ads' icons, and the Segment menu's rows under each */
.ch-icon { font-size: 18px; vertical-align: -4px; margin-right: 10px; color: var(--muted); }
.ch-label { border-bottom: 1px dashed var(--muted); cursor: help; }
.ch-search, .ch-search_partners { color: #1a73e8; }
.ch-content, .ch-maps { color: #188038; }
.ch-youtube, .ch-gmail { color: #d93025; }
.ch-discover { color: #e37400; }
:root[data-theme="dark"] .ch-search, :root[data-theme="dark"] .ch-search_partners { color: #8ab4f8; }
:root[data-theme="dark"] .ch-content, :root[data-theme="dark"] .ch-maps { color: #81c995; }
:root[data-theme="dark"] .ch-youtube, :root[data-theme="dark"] .ch-gmail { color: #f28b82; }
:root[data-theme="dark"] .ch-discover { color: #fdd663; }
.channel-table .segment-row td { font-size: 13px; color: var(--muted); background: var(--bg); border-top: 0; }
.channel-table td.segment-name { padding-left: 38px; white-space: nowrap; }
.channel-table td.segment-name .msym { font-size: 16px; vertical-align: -3px; margin-right: 8px; }
.segment-menu .menu-panel { min-width: min(300px, calc(100vw - 16px)); }
.segment-menu .menu-item .msym { visibility: hidden; color: var(--accent-text); }
.segment-menu .menu-item.on .msym { visibility: visible; }
.segment-menu .menu-item:disabled { opacity: 0.55; cursor: default; }
.segment-menu .menu-item-described .menu-sub { padding-left: 32px; }
.segment-picked { font-weight: 500; }
.hint-title { margin: 20px 0 4px; font-size: 14px; font-weight: 500; }
.channel-hint .msym { color: #e37400; }
:root[data-theme="dark"] .channel-hint .msym { color: #fdd663; }

/* Placement exclusions: a search box over a long table */
.table-search { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.table-search input { flex: 0 1 320px; }
.placement-status { white-space: nowrap; }
.campaign-cell .why-detail { white-space: nowrap; }  /* Changes: where each change lands, on one line */

/* Conversion adjustments (conversion_adjustments.html) */
.crm-keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0 0 8px; }
.crm-keys dt { color: var(--muted); }
.crm-keys dd { margin: 0; overflow-wrap: anywhere; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-table td { vertical-align: top; }
.crm-fields { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.crm-step { margin: 12px 0 4px; font-weight: 500; }
.crm-steps { margin: 0 0 12px; padding-left: 20px; }
.crm-steps > li { margin-bottom: 10px; }
.crm-body { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-crm { margin: 4px 0; }
.crm-crm summary, .crm-how summary { cursor: pointer; color: var(--accent-text); }
.crm-crm ol { margin: 6px 0; padding-left: 20px; }
.crm-how { margin-top: 4px; font-size: 13px; }
.crm-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.crm-kind { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; }
.crm-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.crm-kind input { margin-top: 3px; }
.crm-kind span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.crm-picker { max-width: 560px; }
.crm-fill { border-collapse: collapse; margin: 6px 0 8px; }
.crm-fill th { text-align: left; font-weight: 500; padding: 4px 12px 4px 0; vertical-align: top; white-space: nowrap; }
.crm-fill td { padding: 4px 0; overflow-wrap: anywhere; }
.crm-copy { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-copy-btn { padding: 2px 8px; font-size: 12px; }
.crm-substeps { margin: 6px 0 0; padding-left: 20px; }
.crm-substeps > li { margin-bottom: 6px; }
.crm-how-row td { padding-top: 0; white-space: normal; }
.crm-how[open] { padding: 4px 0 12px; max-width: 760px; }
.crm-body mark { background: var(--accent-soft); color: inherit; border-radius: 3px; }
.crm-table thead th, .table-scroll .crm-how-row > td { position: static; }
.crm-preview { margin: 8px 0 4px; max-width: 420px; }
.crm-preview figcaption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.crm-preview .crm-body mark { display: block; margin: 0 -10px; padding: 0 10px; border-radius: 0;
  border-left: 3px solid var(--accent); }
/* The note is drawn by the page, not part of the text, so copying the body never picks it up */
.crm-preview .crm-body mark::after { content: "←  " attr(data-note); float: right; color: var(--accent-text);
  font-family: system-ui, sans-serif; font-size: 12px; user-select: none; }
.crm-which { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: var(--accent-soft); display: inline-block; }

/* Calendar > Chart: Compare and the dates at the top, the numbers on the chart's card, a card of details under it */
.chart-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.change-chart { padding: 12px 20px 10px; }
.chart-area { position: relative; }
.chart-svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart-svg .grid { stroke: var(--line-soft); }
.chart-svg .axis { fill: var(--muted); font-size: 11px; }
.chart-svg .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart-svg .line.then { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .55; }
.chart-svg .stem { stroke: var(--line); stroke-dasharray: 2 3; }
.chart-svg .window { fill: var(--accent-soft); }
.chart-svg .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.chart-svg .dot.by-hand { fill: var(--muted); }
.chart-svg .dot.on { stroke: var(--text); }
.chart-svg .dot:focus-visible { outline: none; stroke: var(--text); stroke-width: 3; }
.chart-svg .hover-line { stroke: var(--muted); }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface); box-shadow: var(--shadow-high);
  border-radius: 4px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.chart-tip .tip-line::before { content: ""; display: inline-block; width: 10px; height: 2px; margin: 0 6px 3px 0;
  background: var(--s); }

/* The numbers: chips, each drawn one in its line's color */
.chart-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 16px; color: var(--muted); text-decoration: none; }
.chip strong { color: var(--text); font-weight: 500; }
.chip:hover { background: var(--hover); color: var(--text); }
.chip.on { background: var(--surface); border-color: var(--muted); color: var(--text); }
.chip-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box; }
.chip.on .chip-dot { background: var(--s); border: 0; }
.chip-more { list-style: none; cursor: pointer; color: var(--accent-text); padding: 5px 6px; }
.chip-more::-webkit-details-marker { display: none; }

/* Under the chart: what the faded line and dots mean, and the menus that change them */
.chart-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.key-line { width: 16px; height: 2px; background: var(--accent); }
.key-line.then { height: 0; background: none; border-top: 2px dashed var(--muted); }
.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.key-dot.by-hand { background: var(--muted); }

/* The card of details: Selected change, What moved most, All changes */
.chart-details { margin-top: 16px; padding: 0 20px 14px; }
.chart-details-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line-soft); margin: 0 -20px 14px;
  padding: 0 20px; }
.chart-details-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 0 10px;
  font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.chart-details-tabs button:hover { color: var(--text); }
.chart-details-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.chart-change { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 8px 32px; align-items: start; }
.chart-change[hidden] { display: none; }
.chart-change-day { font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.chart-change .cal-list { max-width: none; }
.chart-change-what .muted { font-size: 13px; }
@media (max-width: 760px) {
  .chart-change { grid-template-columns: minmax(0, 1fr); }
  .chart-change .th-sub { white-space: normal; }
  .chart-compare :is(th, td) { padding: 6px 4px; }
  .chip { padding: 4px 9px; font-size: 12px; }
}
.th-sub { display: block; font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; }
.chart-compare, .chart-all { width: 100%; }
.chart-compare :is(th, td), .chart-all :is(th, td) { padding: 8px; }
.chart-compare th:first-child { width: 34%; }
.chart-compare th:not(:first-child), .chart-compare td:not(:first-child) { text-align: right; }
.chart-compare tr.is-shown td:first-child { font-weight: 500; }
.chart-all th:last-child, .chart-all td:last-child { text-align: right; white-space: nowrap; }
.chart-all td:first-child { white-space: nowrap; width: 1%; }
.chart-all .link-button, .moved-name .link-button { color: var(--accent-text); font-size: inherit; text-align: left; }
.chart-all .link-button:hover, .moved-name .link-button:hover { text-decoration: underline; }
.chart-moved { width: 100%; }
.chart-moved th:first-child { width: 36%; }
.chart-moved th:not(:first-child), .chart-moved td:not(:first-child) { text-align: right; }
.moved-name .link-button { display: inline-flex; align-items: center; gap: 6px; }
.moved-name .key-line { width: 0; transition: width .15s; }
.moved-name .key-line[class*=" c"] { width: 14px; background: var(--s); }
.moved-only { margin-left: 6px; vertical-align: middle; font-size: 16px; color: var(--muted); text-decoration: none; }
.moved-only:hover { color: var(--accent-text); }

/* One color per number drawn, in the order picked (the first is the accent), and one per campaign added from What
   moved most */
.change-chart, .chart-details { --s0: var(--accent); --s1: #c2410c; --s2: #2563eb; --s3: #9333ea; --s4: #a16207;
  --c0: #0e7490; --c1: #be185d; --c2: #4d7c0f; }
:root[data-theme="dark"] :is(.change-chart, .chart-details) { --s1: #fb923c; --s2: #60a5fa; --s3: #c084fc;
  --s4: #facc15; --c0: #22d3ee; --c1: #f472b6; --c2: #a3e635; }
:is(.change-chart, .chart-details) :is(.s0) { --s: var(--s0); }
:is(.change-chart, .chart-details) :is(.s1) { --s: var(--s1); }
:is(.change-chart, .chart-details) :is(.s2) { --s: var(--s2); }
:is(.change-chart, .chart-details) :is(.s3) { --s: var(--s3); }
:is(.change-chart, .chart-details) :is(.s4) { --s: var(--s4); }
:is(.change-chart, .chart-details) :is(.c0) { --s: var(--c0); }
:is(.change-chart, .chart-details) :is(.c1) { --s: var(--c1); }
:is(.change-chart, .chart-details) :is(.c2) { --s: var(--c2); }
.chart-svg .line[class*=" s"] { stroke: var(--s); }
.chart-svg .line.campaign { stroke: var(--s); stroke-width: 1.5; }
.chart-svg .axis[class*=" s"] { fill: var(--s); }