:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f9f9f9;
  --hover: #efefef;
  --border: #e2e2e2;
  --divider: #dfdfdf;
  --border-strong: #e7e7e7;
  --text: #181818;
  --muted: #7e7e7e;
  --primary-bg: #181818;
  --primary-text: #ffffff;
  --accent: #181818;
  --focus: #6b6b6b;
  --popover-bg: #ffffff;
  --chip-bg: #deefff;
  --chip-text: #004f99;
  --link: #004f99;
  --danger: #b00020;
  --ok: #1d6b34;
  --warn: #8a5300;
  --scrim: rgba(0, 0, 0, 0.32);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --notice-info-bg: #f1f1f1;
  --notice-info-text: #181818;
  --notice-warn-bg: #fdf1dc;
  --notice-warn-text: #7a4500;
  --notice-error-bg: #fcebee;
  --notice-error-text: #a0001c;
  --notice-ok-bg: #e7f4ea;
  --notice-ok-text: #1a6130;
  --p-google_ads: #4c8df6;
  --p-ga4: #bb8500;
  --p-meta: #a463f2;
  --p-tiktok: #14a19a;
  --p-chatgpt_ads: #e8615a;
  --p-other: #8a8a8a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --radius-lg: 12px;
  --round: 999px;
  --control-x: 14px;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #212121;
    --surface: #181818;
    --hover: #262626;
    --border: #343434;
    --divider: #1c1c1c;
    --border-strong: #4d4d4d;
    --text: #f3f3f3;
    --muted: #929292;
    --primary-bg: #f3f3f3;
    --primary-text: #181818;
    --accent: #0285ff;
    --focus: #a8a8a8;
    --popover-bg: #181818;
    --chip-bg: #1d2e3e;
    --chip-text: #4ea1ff;
    --link: #8ab4f8;
    --danger: #ff8a9b;
    --ok: #6fd18a;
    --warn: #f0b45a;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --notice-info-bg: #2c2c2c;
    --notice-info-text: #f3f3f3;
    --notice-warn-bg: #3a2d13;
    --notice-warn-text: #f0b45a;
    --notice-error-bg: #3d1d23;
    --notice-error-text: #ff8a9b;
    --notice-ok-bg: #1a3322;
    --notice-ok-text: #6fd18a;
    --p-google_ads: #4c8df6;
    --p-ga4: #f2a900;
    --p-meta: #a463f2;
    --p-tiktok: #19b8b0;
    --p-chatgpt_ads: #e8615a;
    --p-other: #8a8a8a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #212121;
  --surface: #181818;
  --hover: #262626;
  --border: #343434;
  --divider: #1c1c1c;
  --border-strong: #4d4d4d;
  --text: #f3f3f3;
  --muted: #929292;
  --primary-bg: #f3f3f3;
  --primary-text: #181818;
  --accent: #0285ff;
  --focus: #a8a8a8;
  --popover-bg: #181818;
  --chip-bg: #1d2e3e;
  --chip-text: #4ea1ff;
  --link: #8ab4f8;
  --danger: #ff8a9b;
  --ok: #6fd18a;
  --warn: #f0b45a;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --notice-info-bg: #2c2c2c;
  --notice-info-text: #f3f3f3;
  --notice-warn-bg: #3a2d13;
  --notice-warn-text: #f0b45a;
  --notice-error-bg: #3d1d23;
  --notice-error-text: #ff8a9b;
  --notice-ok-bg: #1a3322;
  --notice-ok-text: #6fd18a;
  --p-google_ads: #4c8df6;
  --p-ga4: #f2a900;
  --p-meta: #a463f2;
  --p-tiktok: #19b8b0;
  --p-chatgpt_ads: #e8615a;
  --p-other: #8a8a8a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--text); }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
main.narrow { max-width: 380px; padding-top: 48px; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 32px 0 8px; }
p { margin: 8px 0; }
a, a:visited { color: var(--link); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.row > input, .row > select, .row > .select { width: auto; flex: 1 1 160px; }
.row.tight { margin-top: 0; }

/* ===== KIT ===== */
/* Every component's look lives here, once (rule 18); each is shown on /kit. Page sections after the
   END KIT marker only lay components out. kit.test.js enforces the boundary. */

/* ---- focus (rule 19): a click or tap never shows a ring; the keyboard gets a neutral --focus ring ---- */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- names on one row (rule 17): cut with an ellipsis; a cell holding one gives up its width so it can ---- */
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
td:has(> .one-line), th:has(> .one-line) { max-width: 0; }

/* ---- buttons: secondary (plain), primary, danger, small, text, icon; a link styled as one ---- */
button { padding: var(--space-2) var(--control-x); font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--round); cursor: pointer; }
button:hover:not(:disabled) { background: var(--hover); }
button.primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
button.primary:hover:not(:disabled) { background: var(--primary-bg); opacity: 0.88; }
button.danger { color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.5; cursor: default; }
button[aria-busy="true"] { cursor: progress; }
button.small { padding: var(--space-1) 10px; font-size: 14px; }
button.text-btn { padding: var(--space-1) var(--space-2); color: var(--muted); background: transparent; border-color: transparent; }
.icon-btn { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--text); background: transparent; border: 0; border-radius: var(--round); }
.icon-btn:hover:not(:disabled) { background: var(--hover); }
.icon { display: block; flex: none; }
button:not(.icon-btn):has(> .icon) { display: inline-flex; align-items: center; gap: var(--space-2); }
a.button, a.button:visited { display: inline-block; padding: var(--space-2) var(--control-x); color: var(--text); text-decoration: none; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--round); }
a.button:hover { background: var(--hover); }
a.button.primary, a.button.primary:visited { color: var(--primary-text); background: var(--primary-bg); border-color: var(--primary-bg); }
a.button.primary:hover { opacity: 0.88; }
/* a few buttons that sit together on one pill (the graph's zoom) */
.btn-group { display: flex; gap: var(--space-1); }
.btn-group button { min-width: 40px; padding-right: var(--space-3); padding-left: var(--space-3); }
/* a small count on an icon button (the bell) */
.count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 12px; font-weight: 500; line-height: 16px; text-align: center; color: var(--primary-text); background: var(--primary-bg); border-radius: var(--round); }

/* ---- inputs: one box for text, email, password, search, number, textarea and native selects ---- */
label { display: block; margin: var(--space-3) 0 var(--space-1); font-size: 14px; }
label.inline { display: inline; margin: 0; }
input, select, textarea { width: 100%; padding: var(--space-2); font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
/* ticks in the primary colour: black in light, near-white in dark; never blue */
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary-bg); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--focus); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: default; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.field > label { margin-top: 0; }
.field-hint { margin: var(--space-1) 0 0; font-size: 14px; color: var(--muted); }
.field-error { margin: var(--space-1) 0 0; font-size: 14px; color: var(--danger); }
.field-error:empty { display: none; }

/* ---- dropdown (select): the hidden native select stays the source of truth; the button opens a listbox ---- */
.select { position: relative; display: flex; width: 100%; min-width: 0; }
.select-native { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.select-btn { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) 10px var(--space-2) var(--space-3); text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.select-value { flex: 1 1 auto; }
.select-btn .icon { color: var(--muted); }
.select-group { padding: 6px 10px 2px; font-size: 13px; color: var(--muted); }

/* ---- the one popover panel: no border, the soft shadow on its own surface (--popover-bg: the page in light,
   --surface in dark); menus, dropdown lists, the date picker and the tooltip are this panel ---- */
.popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: var(--space-3); background: var(--popover-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* menus and dropdown lists hang fixed under their button, so a table's scrolling box never clips them */
.popover.menu, .popover.select-panel { position: fixed; z-index: 70; width: auto; max-width: calc(100vw - 16px); padding: var(--space-1); }
.popover.select-panel { max-width: min(480px, calc(100vw - 16px)); max-height: min(320px, 60vh); }
.menu-item, .select-opt { display: block; width: 100%; margin: 0; padding: var(--space-2) 10px; font-size: 15px; text-align: left; color: var(--text); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; }
.menu-item:hover, .select-opt:hover, .menu-item:focus-visible, .select-opt:focus-visible { background: var(--hover); }
.menu-item:focus-visible, .select-opt:focus-visible { outline-offset: -2px; }
.menu-item.danger { color: var(--danger); }
.select-opt[aria-selected="true"] { font-weight: 600; background: var(--hover); }
.select-opt[aria-disabled="true"] { color: var(--muted); cursor: default; background: transparent; }
/* the tooltip bubble (collapsed sidebar labels): fixed to the viewport, the popover's surface and shadow */
.tooltip { position: fixed; z-index: 60; transform: translateY(-50%); padding: var(--space-1) var(--space-2); font-size: 13px; line-height: 1.4; color: var(--text); white-space: nowrap; background: var(--popover-bg); border-radius: var(--radius); box-shadow: var(--shadow); pointer-events: none; }
.tooltip.below { transform: translateX(-50%); }

/* ---- the one pop-up (dialog()): a native <dialog> over the --scrim backdrop ---- */
.dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: var(--space-4) var(--space-5) var(--space-5); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.dialog::backdrop { background: var(--scrim); }
.dialog h2 { margin: 0; }

/* ---- the one notice style: a tinted box, small radius, no border; info grey, warn amber, error red, done green ---- */
.notice { margin: 12px 0; padding: 8px 12px; font-size: 15px; color: var(--notice-info-text); background: var(--notice-info-bg); border: 0; border-radius: 8px; }
.notice:empty { display: none; }
.notice.warn { color: var(--notice-warn-text); background: var(--notice-warn-bg); }
.notice.error { color: var(--notice-error-text); background: var(--notice-error-bg); }
.notice.ok { color: var(--notice-ok-text); background: var(--notice-ok-bg); }

/* ---- table: the wrapper is the one frame; rows split by a hairline; numbers right in tabular figures ---- */
.table-wrap { overflow-x: auto; margin-top: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table { table-layout: fixed; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--divider); vertical-align: middle; }
tr:last-child td, tbody tr:not([hidden]):not(:has(~ tr:not([hidden]))) td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
th { font-weight: 500; color: var(--muted); background: var(--surface); white-space: nowrap; }
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; background: var(--surface); }
tr.total:hover td { background: var(--surface); }
/* totals live in the tfoot: the last body row drops its border, so the tfoot draws the one hairline */
tfoot tr:first-child td { border-top: 1px solid var(--divider); }
tr.clickable { cursor: pointer; }
tr.clickable:focus-visible { outline-offset: -2px; }
tr.empty-row td { color: var(--muted); }
tr.empty-row:hover td { background: transparent; }
td .select { min-width: 120px; }
td input[type="text"] { min-width: 120px; }
td .row { margin-top: 0; }
/* sortable headers (sort.js): the mark hangs in the cell's left padding, so labels line up with the cells */
.sort-btn { display: inline-flex; align-items: center; gap: 2px; vertical-align: top; margin-left: calc(-1 * var(--space-3)); padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 4px; }
.sort-btn:hover:not(:disabled) { color: var(--text); background: none; }
.sort-mark { display: inline-block; width: 10px; font-size: 12px; }
/* a plain table with no frame or header band (the graph panel's figures) */
.table.plain { margin-top: var(--space-4); font-size: 14px; table-layout: auto; }
.table.plain caption { padding: 0 0 var(--space-1); font-size: 13px; font-weight: 500; text-align: left; }
.table.plain th { padding: 6px 0; font-weight: 400; background: transparent; }
.table.plain td { padding: 6px 0; }
.table.plain tbody tr:hover td { background: transparent; }
.table.plain tr:last-child th { border-bottom: 0; }
/* stickyFirst: the name column stays put while the table scrolls sideways, on its own row's background */
.sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.sticky-first th:first-child { background: var(--surface); }
.sticky-first tbody tr:hover td:first-child { background: var(--hover); }
.sticky-first tr.total td:first-child, .sticky-first tr.total:hover td:first-child { background: var(--surface); }
.sticky-first tr.empty-row td:first-child, .sticky-first tr.empty-row:hover td:first-child { position: static; background: transparent; }
/* once scrolled sideways, one hairline on the pinned column's right edge */
.table-wrap.scrolled .sticky-first th:first-child::after, .table-wrap.scrolled .sticky-first td:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--border); }

/* ---- chips and pills: the filter chip (checkbox style) and the status pill (a dot and a word) ---- */
.chip-toggle { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; margin: 0; padding: 6px 10px; font-size: 15px; white-space: nowrap; border-radius: var(--radius); cursor: pointer; }
.chip-toggle:hover { background: var(--hover); }
.chip-toggle input { margin: 0; }
.chip-toggle:has(input:not(:checked)) { color: var(--muted); }
.chip-toggle:has(input:not(:checked)) .swatch { opacity: 0.3; }
.swatch { flex: none; width: 10px; height: 10px; border-radius: var(--round); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 14px; line-height: 1.5; white-space: nowrap; color: var(--notice-info-text); background: var(--notice-info-bg); border-radius: var(--round); }
.pill-dot { flex: none; width: 6px; height: 6px; background: currentColor; border-radius: var(--round); }
.pill.ok { color: var(--notice-ok-text); background: var(--notice-ok-bg); }
.pill.warn { color: var(--notice-warn-text); background: var(--notice-warn-bg); }
.pill.error { color: var(--notice-error-text); background: var(--notice-error-bg); }
/* a status said in words inside a line (a schedule that failed) */
.status-ok { color: var(--ok); }
.status-reconnect { color: var(--warn); }
.status-down { color: var(--danger); }
.status-ok, .status-reconnect, .status-down { white-space: nowrap; }

/* ---- tabs: an underlined row; the chosen tab is bold with a 2px rule; one hairline under the row ---- */
.tabs { display: flex; flex-wrap: wrap; column-gap: var(--space-5); border-bottom: 1px solid var(--border); }
.tab, .tab:visited { flex: none; margin-bottom: -1px; padding: 10px 0; font: inherit; font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; }
.tab:hover:not(:disabled) { background: none; border-bottom-color: var(--border-strong); }
.tab[aria-selected="true"] { font-weight: 600; border-bottom-color: var(--text); }
.tab:focus-visible { outline-offset: 0; }
/* a tab row with a control on its right (a date range): one hairline under both */
.tabs-row { display: flex; align-items: flex-end; gap: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.tabs-row > .tabs { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.tabs-end { flex: none; margin-left: auto; padding-bottom: var(--space-1); }
/* phones (the same 700px edge as the page phone block): the control drops under the tabs, full width */
@media (width < 700px) {
  .tabs-row { flex-wrap: wrap; border-bottom: 0; }
  .tabs-row > .tabs { flex: 1 1 100%; border-bottom: 1px solid var(--border); }
  .tabs-end { flex: 1 1 100%; margin-left: 0; padding-bottom: 0; }
  .tabs-end > .drp, .tabs-end .drp-trigger { width: 100%; }
  /* a sticky name column leaves room for the figures beside it (table.js reads --sticky-max) */
  .sticky-first { --sticky-max: 10rem; }
}

/* ---- date range: the trigger, then quick picks beside a two-month calendar in the popover ---- */
.drp { position: relative; display: inline-block; }
.drp-trigger { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.drp-panel { position: fixed; z-index: 70; width: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 16px); padding: 0; overflow-y: auto; }
.drp-body { display: flex; }
.drp-presets { display: flex; flex: none; flex-direction: column; gap: 2px; min-width: 148px; padding: var(--space-2); border-right: 1px solid var(--divider); }
.drp-preset { padding: 6px 10px; font-size: 15px; text-align: left; white-space: nowrap; background: transparent; border: 0; border-radius: var(--radius); }
.drp-preset[aria-pressed="true"] { font-weight: 600; background: var(--hover); }
.drp-cal { position: relative; padding: var(--space-2) var(--space-4) var(--space-3); }
.drp-nav { position: absolute; top: var(--space-2); right: var(--space-2); left: var(--space-2); display: flex; justify-content: space-between; pointer-events: none; }
.drp-nav button { width: 36px; height: 36px; pointer-events: auto; }
.drp-months { display: flex; gap: var(--space-5); }
.drp-month-title { height: 36px; font-size: 15px; font-weight: 500; line-height: 36px; text-align: center; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.drp-weekday { height: 28px; font-size: 13px; line-height: 28px; text-align: center; text-decoration: none; }
.drp-day { width: 36px; height: 36px; padding: 0; font-size: 14px; font-variant-numeric: tabular-nums; background: transparent; border: 0; border-radius: var(--round); }
.drp-day.today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.drp-day.in-range, .drp-day.in-range:hover:not(:disabled) { background: var(--hover); border-radius: 0; }
.drp-day.start, .drp-day.end, .drp-day.start:hover:not(:disabled), .drp-day.end:hover:not(:disabled) { color: var(--primary-text); background: var(--primary-bg); }
.drp-day:focus-visible { outline-offset: 0; }
.drp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--divider); }
.drp-preview { font-size: 15px; }
.drp-actions { display: flex; gap: var(--space-2); }

/* ---- empty state and page header ---- */
.empty-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.empty-state p { margin: 0; color: var(--muted); }
.page-head { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* narrow room (daterange.js pickerLayout): the picker spans the window, quick picks above one month */
.drp-panel.stacked { max-width: none; }
.drp-panel.stacked .drp-body { flex-direction: column; }
.drp-panel.stacked .drp-presets { flex-direction: row; flex-wrap: wrap; min-width: 0; border-right: 0; border-bottom: 1px solid var(--divider); }
.drp-panel.stacked .drp-months { display: block; }
.drp-panel.stacked .drp-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.drp-panel.stacked .drp-day { width: 100%; }

/* ---- the top-bar search: a kit input with a leading icon ---- */
.search-field { display: flex; align-items: center; gap: 8px; width: 300px; height: 40px; padding: 0 14px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; }
.search-field:focus-within { border-color: var(--focus); }
.search-input { flex: 1 1 auto; min-width: 0; padding: 0; font-size: 15px; background: transparent; border: 0; border-radius: 0; }
/* ===== END KIT ===== */

/* ---- layout helpers ---- */
.row.fields { align-items: flex-start; }
.row.fields > .field { flex: 1 1 160px; }
form.schedule { padding: 4px 0; }
form.schedule .row { margin-top: 12px; }
ul.plain { list-style: none; margin: 8px 0; padding: 0; }
/* rule 17: each choice is the box and one label on one row; a hint under a choice takes the next line */
ul.plain li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; padding: 4px 0; }
ul.plain li > input { flex: none; margin: 0; }
ul.plain label { flex: 1 1 0; margin: 0; font-size: 15px; }
ul.plain.cols { columns: 200px; column-gap: 24px; }
ul.plain.cols li { break-inside: avoid; }
ul.plain li[title] label { color: var(--muted); }
.invite-url { word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
/* one line under a choice that cannot be picked yet */
.field-hint.under-choice { flex: 1 1 100%; margin: 0 0 4px 20px; }

/* public pages (home, privacy, terms): no shell, one readable column */
main.doc { max-width: 720px; padding-top: 48px; }
main.doc h2 { scroll-margin-top: 16px; }
main.doc ul { margin: 8px 0; padding-left: 20px; }
main.doc li { margin: 4px 0; }
.site-home, .site-home:visited { display: inline-block; margin-bottom: 24px; font-weight: 500; color: var(--text); text-decoration: none; }
.site-foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 14px; color: var(--muted); }
.site-foot a, .site-foot a:visited { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

/* app shell: the sidebar sits on --surface; the top bar and the content on --bg */
body.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 56px auto; min-height: 100vh; }
:root[data-sidebar="collapsed"] body.shell { grid-template-columns: 64px minmax(0, 1fr); }
main.content { grid-column: 2; grid-row: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 32px 48px; }

.sidebar { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; height: 100vh; padding: 8px; overflow-x: hidden; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding-left: 12px; }
.sidebar .brand, .sidebar .brand:visited { overflow: hidden; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
/* The logos are black shapes on transparent PNGs; the mask lets the text token colour them in every theme. */
.brand-mark, .brand-wordmark { display: inline-block; flex: none; height: var(--logo-h, 24px); background-color: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: contain; mask-size: contain; }
.brand-mark { -webkit-mask-position: center; mask-position: center; width: calc(var(--logo-h, 24px) * 384 / 414); -webkit-mask-image: url(/img/mark.png); mask-image: url(/img/mark.png); }
.brand-wordmark { width: calc(var(--logo-h, 24px) * 418 / 112); -webkit-mask-image: url(/img/wordmark.png); mask-image: url(/img/wordmark.png); }
.brand-lg { --logo-h: 32px; }
.sidebar .brand { display: flex; align-items: center; }
.sidebar nav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.side-link, .side-link:visited { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.side-link:hover { background: var(--hover); }
.side-link[aria-current="page"] { font-weight: 500; background: var(--hover); }
.sidebar-foot { padding: 12px 12px 4px; border-top: 1px solid var(--border); }
.workspace-label { display: block; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.workspace-name { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
/* collapsed, the top slot is one button: the mark at rest, the panel icon on hover or keyboard focus */
.open-btn { display: none; }
.open-btn .icon { display: none; }
.open-btn:hover .brand-mark, .open-btn:focus-visible .brand-mark { display: none; }
.open-btn:hover .icon, .open-btn:focus-visible .icon { display: block; }
@media (min-width: 700px) {
  :root[data-sidebar="collapsed"] .sidebar .brand,
  :root[data-sidebar="collapsed"] .collapse-btn,
  :root[data-sidebar="collapsed"] .sidebar .label,
  :root[data-sidebar="collapsed"] .sidebar-foot { display: none; }
  :root[data-sidebar="collapsed"] .sidebar-head { justify-content: center; padding-left: 0; }
  :root[data-sidebar="collapsed"] .open-btn { display: inline-flex; }
  :root[data-sidebar="collapsed"] .side-link { justify-content: center; padding: 10px; }
}

.topbar { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px 0 32px; background: var(--bg); border-bottom: 1px solid var(--border); }
.topbar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 18px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.menu-btn { display: none; }
.backdrop { display: none; }

.bell, .profile, .search { position: relative; }
.bell-panel li.unread a { font-weight: 600; }

.search-toggle, .search-cancel { display: none; }
.search-results { padding: 6px; }
.search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--divider); }
.search-group-label { padding: 6px 10px 2px; font-size: 12px; color: var(--muted); }
.search-item, .search-item:visited { display: block; padding: 6px 10px; color: var(--text); text-decoration: none; border-radius: 8px; }
.search-item.active { background: var(--hover); }
.search-label, .search-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-label { font-size: 15px; }
.search-sub { font-size: 13px; color: var(--muted); }
.search-empty { margin: 0; padding: 8px 10px; font-size: 15px; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--hover); border-radius: 999px; }
.profile-btn:hover:not(:disabled) .avatar { background: var(--border); }
.profile-menu { width: min(280px, calc(100vw - 32px)); padding: 8px; }
.profile-who { margin-bottom: 4px; padding: 8px; border-bottom: 1px solid var(--divider); }
.profile-name { font-weight: 500; }
.profile-email { font-size: 14px; color: var(--muted); }
.profile-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.profile-theme { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.profile-row .select { width: auto; flex: 0 1 auto; max-width: 60%; }
.profile-menu .menu-item { margin-top: 4px; }
a.menu-item, a.menu-item:visited { color: var(--text); text-decoration: none; }

/* Clients: one plain section per client, its name and ⋯ menu on one line above its accounts table */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }
.section-head h2 { margin: 0; }
.client-section { scroll-margin-top: 72px; }
/* every client's table has the same set columns, so they line up from section to section */
.accounts-table { table-layout: fixed; }
.accounts-table .col-status { width: 10rem; }
.accounts-table .col-actions { width: 5rem; }
.accounts-table td:last-child .row { justify-content: flex-end; }
.accounts-table th:last-child { text-align: right; }
.accounts-table td .muted { font-size: 14px; }
.client-section.open { margin: 16px -12px 0; padding: 0 12px 12px; background: var(--surface); border-radius: 12px; }
.client-section.open .section-head { margin-top: 8px; }

/* the sample banner: one tinted line; its two links read as text inside it */
/* one line at every width: the Back to name gives way (ellipsis), Delete sample always shows */
.sample-banner { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; }
.sample-banner .sample-links { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.sample-links > .one-line { flex: 0 1 auto; min-width: 0; }
.sample-banner > button { flex: none; }
.sample-error:empty { display: none; }
.sample-banner:has(.sample-error:not(:empty)) { flex-wrap: wrap; }

/* Get started: a plain list; a done step shows a check and its button goes */
.get-started { flex: none; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
/* beside a graph it keeps to the top part and scrolls; with no graph yet it shows every step */
#overview:has(> #graph-stage:not([hidden])) > .get-started { max-height: 45%; overflow-y: auto; }
.get-started-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.get-started-head h2 { margin: 0; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; }
.step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; }
.step-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 999px; }
.step.done .step-mark { color: var(--ok); border-color: var(--ok); }
.step.done .step-text { color: var(--muted); }
.step-text { flex: 1 1 200px; }

/* Overview graph: one toolbar row, then the canvas fills the rest of the page edge to edge; the panel sits on its right */
#overview { display: flex; flex-direction: column; max-width: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); min-height: 0; overflow: hidden; padding: 0; }
.graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.graph-toolbar > input, .graph-toolbar > .select { width: auto; min-width: 0; }
.graph-search { flex: 1 1 160px; min-width: 120px; max-width: 280px; }
.graph-toolbar > .select { flex: 0 1 auto; min-width: 9rem; max-width: 240px; }
.graph-toolbar > .drp { flex: none; }
.platforms-wrap { position: relative; flex: none; }
.platforms-popover { right: 0; left: auto; display: flex; flex-direction: column; gap: 4px; width: auto; min-width: 220px; padding: 8px; }
#overview > .notice, #overview > .get-started { margin: 12px 24px; }
#overview > #graph-empty > .empty-state { margin: 12px 24px; }
.graph-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
#graph { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.graph-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.graph-stage:has(> .graph-panel:not([hidden])) .graph-zoom { right: 356px; }
.graph-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 340px; max-width: 100%; overflow-y: auto; padding: 16px; background: var(--bg); border-left: 1px solid var(--border); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-type { font-size: 13px; color: var(--muted); }
.graph-panel h2 { margin: 4px 0 0; overflow-wrap: anywhere; }
.panel-parents { margin: 2px 0 0; font-size: 14px; }
.panel-count { margin: 8px 0 0; font-size: 14px; }

/* the UI kit page: sections in one column, each component's states side by side */
.kit-section { margin-top: var(--space-6); }
.kit-section > h2 { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 500; }
.kit-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-3); }
.kit-row > .field, .kit-row > .select { flex: 0 1 240px; width: 240px; }
.kit-col { display: flex; flex-direction: column; gap: var(--space-2); }

/* phones: the sidebar is a drawer behind Menu, the search opens full width, and every button and nav item is at least 40px tall */
@media (max-width: 699px) {
  body.shell, :root[data-sidebar="collapsed"] body.shell { grid-template-columns: minmax(0, 1fr); }
  .topbar, main.content { grid-column: 1; }
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar-title { font-size: 17px; }
  main.content { padding: 16px 16px 48px; }
  .menu-btn { display: inline-flex; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(280px, 85vw); height: 100%; align-self: stretch; visibility: hidden; transform: translateX(-100%); transition: transform 0.2s ease, visibility 0.2s; }
  .drawer-open .sidebar { visibility: visible; transform: none; }
  .drawer-open .backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .collapse-btn { display: none; }
  .search { position: static; }
  .search-field { display: none; }
  .search-toggle { display: inline-flex; }
  .topbar.search-open .search { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; background: var(--bg); }
  .topbar.search-open .search-field { display: flex; flex: 1 1 auto; width: auto; }
  .topbar.search-open .search-cancel { display: inline-block; }
  .search-results { left: 8px; right: 8px; width: auto; }
  button, .sidebar a, select { min-height: 40px; }
  /* the accounts table fits the phone: a narrower status column, tighter cells, a long status may wrap */
  .accounts-table .col-status { width: 7rem; }
  .accounts-table .col-actions { width: 4.5rem; }
  .accounts-table th, .accounts-table td { padding: 8px; }
  .accounts-table .pill { white-space: normal; }
  .graph-toolbar { flex-wrap: wrap; padding: 8px 16px; }
  .graph-search { flex: 1 1 60%; max-width: none; }
  .platforms-wrap { order: 1; }
  .graph-toolbar > .select { order: 2; flex: 1 1 0; min-width: 7.5rem; max-width: none; }
  /* the dates keep their full width; the client dropdown beside them gives way */
  .graph-toolbar > .drp { order: 2; flex: none; }
  .chip-toggle { min-height: 40px; }
  #overview > .notice, #overview > .get-started, #overview > #graph-empty > .empty-state { margin: 12px 16px; }
  .graph-stage:has(> .graph-panel:not([hidden])) .graph-zoom { right: 16px; }
  .graph-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 35; width: auto; max-height: 60vh; border-top: 1px solid var(--border); border-left: 0; border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
}

/* after the phone block, so it wins over the drawer transition */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}