: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;
  --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);
  --p-google_ads: #4c8df6;
  --p-ga4: #bb8500;
  --p-meta: #a463f2;
  --p-tiktok: #14a19a;
  --p-chatgpt_ads: #e8615a;
  --p-other: #8a8a8a;
}
: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;
    --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);
    --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;
  --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);
  --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; }

label { display: block; margin: 12px 0 4px; font-size: 14px; }
input, select { width: 100%; padding: 8px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
input[type="checkbox"] { width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
button { padding: 8px 14px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; 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; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.row > input, .row > select { width: auto; flex: 1 1 160px; }
.row.tight { margin-top: 0; }

.notice { min-height: 1.5em; margin: 12px 0; font-size: 15px; }
.notice.error { color: var(--danger); }
.notice.ok { color: var(--ok); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
th { font-weight: 500; color: var(--muted); background: var(--surface); white-space: nowrap; }
td select, td input[type="text"] { min-width: 120px; }
td .row { margin-top: 0; }
.row.fields { align-items: flex-start; }
.row.fields > .field { flex: 1 1 160px; }
.field > label { margin-top: 0; }
label.inline { display: inline; margin: 0; }
form.schedule { padding: 4px 0; }
form.schedule .row { margin-top: 12px; }
.status-ok { color: var(--ok); }
.status-reconnect { color: var(--warn); }
.status-down { color: var(--danger); }
ul.plain { list-style: none; margin: 8px 0; padding: 0; }
ul.plain li { padding: 4px 0; }
ul.plain label { display: inline; margin: 0 0 0 6px; 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); }
th.num, td.num { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; background: var(--surface); }
tr.total:hover td { background: var(--surface); }
.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; }
.chip { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; background: var(--chip-bg); color: var(--chip-text); }

/* 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; }
a.button, a.button:visited { display: inline-block; padding: 8px 14px; color: var(--text); text-decoration: none; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; }
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; }
.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; }

.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: 999px; }
.icon-btn:hover:not(:disabled) { background: var(--hover); }
.icon { display: block; flex: none; }

.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 .brand-mark { display: none; }
.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; }
.sidebar-foot select { padding: 6px 8px; font-size: 15px; background: var(--surface); }
@media (min-width: 700px) {
  :root[data-sidebar="collapsed"] .sidebar .brand-wordmark,
  :root[data-sidebar="collapsed"] .sidebar .label,
  :root[data-sidebar="collapsed"] .sidebar-foot { display: none; }
  :root[data-sidebar="collapsed"] .sidebar-head { flex-direction: column; justify-content: center; gap: 4px; padding-left: 0; }
  :root[data-sidebar="collapsed"] .sidebar .brand-mark { display: inline-block; }
  :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; }

.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: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.popover-head button { padding: 4px 10px; font-size: 14px; }
.bell, .profile, .search { position: relative; }
.bell-panel li.unread a { font-weight: 600; }
.count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 11px; font-weight: 500; line-height: 16px; text-align: center; color: var(--primary-text); background: var(--primary-bg); border-radius: 999px; }

.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 { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-input { flex: 1 1 auto; min-width: 0; padding: 0; font-size: 15px; background: transparent; border: 0; border-radius: 0; }
.search-input:focus-visible { outline: none; }
.search-input::placeholder { color: var(--muted); }
.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; overflow-wrap: anywhere; }
.profile-email { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.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; padding: 4px 8px; }
.profile-signout { display: block; width: 100%; margin-top: 4px; padding: 8px; text-align: left; background: transparent; border: 0; border-radius: 8px; }

/* 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: nowrap; 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; max-width: 240px; }
#graph-period { 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; }
.chip-toggle { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; font-size: 15px; white-space: nowrap; border-radius: 8px; 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: 999px; }
#overview > .notice:empty { display: none; }
#overview > .notice, .graph-empty { 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; display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.graph-zoom button { min-width: 36px; height: 32px; padding: 0 10px; background: transparent; border: 0; }
.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); }
.panel-head button { padding: 4px 12px; font-size: 14px; }
.graph-panel h2 { margin: 4px 0 0; overflow-wrap: anywhere; }
.panel-parents { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.panel-count { margin: 8px 0 0; font-size: 14px; }
.panel-table { margin-top: 16px; font-size: 14px; }
.panel-table caption { padding: 0 0 4px; font-size: 13px; font-weight: 500; text-align: left; }
.panel-table th { padding: 6px 0; font-weight: 400; background: transparent; }
.panel-table td { padding: 6px 0; }
.panel-table tbody tr:hover td { background: transparent; }
.panel-table tr:last-child th { border-bottom: 0; }

/* 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; }
  .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 calc(50% - 4px); max-width: none; }
  #graph-period { flex: 1 1 calc(50% - 4px); }
  .chip-toggle { min-height: 40px; }
  #overview > .notice, .graph-empty { 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; }
}