/* GTM dashboard components. Every colour, font, size, spacing, radius, border, shadow and duration comes from the
   tenant's tokens file (gtm/static/tenants/<tokens>/tokens.css, loaded first); this file holds no literal design values,
   only layout keywords, 0, percentages and the three breakpoints (custom properties cannot be used in @media).
   Where two tenants' designs differ in structure (button case and weight, square or rounded, underline or box inputs,
   rules or hairlines), the difference is a token too, so swapping the tokens file swaps the whole look. Two layout
   switches cannot be tokens inside @media: the server reads --layout-sidebar-from and --layout-split-from from the
   tokens file and sets them on <html> as data-sidebar-from and data-split-from, which the rules below match.
   Every variable read here is defined in every tokens file (tests/test_theme.py).
   Stable component classes (the design system styles these): shell, sidebar, brand, nav, page-head, card,
   kpi-tiles / kpi-tile, data-table, chart, feed / feed-item, filter-bar, field, badge, btn, callout,
   state-empty / state-loading / state-error, sign-in, brand-name. Additions: kpi-tile--headline, overview-grid, tabs / tab,
   chart-line, chart-grid, chart-legend, callout-title, callout--info, badge--danger, badge--conf-high / -medium / -low,
   badge--hot / --warm / --cold, title-line (a name with its badges on one line), title-line--wrap (a name that
   wraps in full, its badges beside it or below), page-ref (a page path link and its
   "all fixes" link), field--pair (a field that may share a row when narrow), facts--stacked, scroll-hint.
   Inside [data-surface="brand"] (the sidebar and the sign-in page) a tenant may remap its
   colour roles. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--lh-body);
  font-weight: var(--weight-regular); color: var(--color-text); background: var(--color-bg);
}
h1, h2 { margin: 0; line-height: var(--lh-tight); color: var(--color-heading); text-transform: var(--heading-text-transform); }
h1 {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-title-size);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
h2 {
  font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-heading-size);
  margin-bottom: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
h3 {
  margin: var(--space-4) 0 var(--space-2); font-family: var(--font-sans); font-size: var(--text-body-size);
  line-height: var(--lh-body); font-weight: var(--weight-semibold); color: var(--color-text);
}
strong, b { font-weight: var(--weight-semibold); }
a { color: var(--color-link); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); }
/* break-word, not anywhere: anywhere also shrinks a table column to one character and splits paths mid-word.
   Paths carry <wbr> after each "/" (the page_path macro), so they wrap between segments. */
code {
  font-family: var(--font-mono); font-size: var(--text-secondary-size); font-weight: var(--weight-mono);
  text-transform: none; overflow-wrap: break-word;
}
p { margin: 0 0 var(--space-2); }
::selection { background: var(--color-accent-soft); color: var(--color-text); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.muted { color: var(--color-text-muted); }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: -100vw; }
.skip-link:focus {
  left: var(--space-2); top: var(--space-2); z-index: var(--z-toast); background: var(--color-surface);
  color: var(--color-link); padding: var(--space-2);
}
/* Links that stand alone (a company name in a list) follow the tenant: underlined always, or only on hover. */
.ranked a, .data-table a, .feed a, .eyebrow a { text-decoration: var(--link-standalone-decoration); }
.ranked a:hover, .data-table a:hover, .feed a:hover, .eyebrow a:hover { text-decoration: underline; }
.feed a:focus-visible, .tab:focus-visible { outline-offset: var(--focus-offset-inset); }

/* ---- shell: a top bar with a Menu button until the tenant's sidebar breakpoint, then a fixed column ---- */
.shell { min-height: 100vh; }
.sidebar {
  position: var(--topbar-position); top: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--topbar-h); padding: var(--topbar-pad-y) var(--space-4);
  background: var(--color-sidebar); color: var(--color-sidebar-text);
  border: 0 solid var(--color-border); border-bottom-width: var(--sidebar-rule-width);
}
.sidebar a, .sidebar button { color: var(--color-sidebar-text); }
.sidebar :focus-visible { outline-color: var(--color-sidebar-text); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: var(--weight-semibold); }
.brand-logo { display: block; width: auto; max-width: var(--logo-max-w); }
.sidebar .brand-logo { height: var(--logo-h-compact); }
.brand-initials {
  display: inline-flex; align-items: center; justify-content: center; width: var(--brand-mark-size);
  height: var(--brand-mark-size); border-radius: var(--radius-control); border: var(--border-width-strong) solid currentColor;
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-mark);
}
/* The tenant's name beside the lettered mark (no logo file): a long name wraps instead of widening the sidebar. */
.brand-name { min-width: 0; overflow-wrap: anywhere; }
.menu-button {
  display: inline-flex; align-items: center; min-height: var(--control-h-touch); padding: 0 var(--space-4);
  background: var(--color-btn-bg); border: var(--btn-border-width) solid currentColor; border-radius: var(--radius-control);
  font: inherit; font-weight: var(--weight-medium); text-transform: var(--control-text-transform); letter-spacing: var(--ui-tracking);
  cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.menu-button:hover, .menu-button[aria-expanded="true"] {
  background: var(--color-menu-hover-bg); color: var(--color-menu-hover-text); text-decoration: var(--menu-hover-decoration);
}
.js .menu-button[aria-expanded="false"] + .nav-panel { display: none; }
.nav-panel { flex-basis: 100%; display: flex; flex-direction: column; padding-top: var(--space-3); }
.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav a {
  display: flex; align-items: center; min-height: var(--control-h-touch); padding: 0 var(--space-3);
  border-left: var(--nav-indicator-width) solid transparent; border-radius: var(--radius-control);
  font-weight: var(--weight-nav); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.nav a:hover {
  background: var(--color-nav-hover-bg); border-left-color: var(--color-nav-hover-indicator);
  text-decoration: var(--nav-hover-decoration);
}
.nav a:active { background: var(--color-nav-active-bg); color: var(--color-nav-active-text); }
.nav a.current {
  background: var(--color-nav-current-bg); color: var(--color-nav-current-text);
  border-left-color: var(--color-nav-current-indicator); font-weight: var(--weight-semibold);
}
.nav-group {
  margin-top: var(--space-4); padding: 0 var(--space-3); font-family: var(--font-label); font-size: var(--text-label-size);
  line-height: var(--lh-label); font-weight: var(--weight-medium); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-sidebar-muted);
}
.who {
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--sidebar-rule-width) solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.who-id { display: flex; flex-direction: column; }
.who-name { font-weight: var(--weight-semibold); }
.who-role {
  font-family: var(--font-label); font-size: var(--text-label-size); font-weight: var(--weight-medium);
  text-transform: capitalize; color: var(--color-sidebar-muted);
}
.main { padding: var(--space-4); max-width: var(--container-max); min-width: 0; }
.main > * + * { margin-top: var(--section-gap); }
.main > .page-head + * { margin-top: var(--space-6); }
.stack > * + * { margin-top: var(--section-gap); }

/* ---- page header, cards, KPI tiles, lists ---- */
.page-head { padding-bottom: var(--page-head-rule-gap); border-bottom: var(--page-head-rule-width) solid var(--color-border-strong); }
.page-head > :last-child { margin-bottom: 0; }
.eyebrow {
  font-family: var(--font-label); font-size: var(--text-label-size); line-height: var(--lh-label); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-muted); margin: 0 0 var(--space-1);
}
.page-desc { color: var(--color-text-muted); max-width: var(--measure); margin-top: var(--space-2); }
.card {
  background: var(--color-surface); border: var(--border-width) solid var(--color-border);
  border-top: var(--card-rule-width) solid var(--color-card-rule); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--space-4);
}
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min), 1fr)); gap: var(--space-3); }
.kpi-tile { display: flex; flex-direction: column; gap: var(--space-1); }
.card.kpi-tile { padding: var(--space-4); }
.kpi-tile-label {
  font-family: var(--font-label); font-size: var(--text-label-size); line-height: var(--lh-label); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-muted);
}
.kpi-tile strong {
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-figure-size);
  line-height: var(--lh-tight); color: var(--color-heading); font-variant-numeric: var(--figure-numeric);
}
.kpi-tile strong.kpi-tile-text { font-size: var(--text-heading-size); }
.kpi-tile small { color: var(--color-text-muted); font-size: var(--text-secondary-size); }
/* The page's one headline figure: a filled tile where the design has one, an ordinary tile where it does not. */
.kpi-tile--headline {
  background: var(--color-kpi-headline-bg); border-color: var(--color-kpi-headline-edge);
  border-top-color: var(--color-kpi-headline-rule);
}
.kpi-tile--headline .kpi-tile-label, .kpi-tile--headline small { color: var(--color-kpi-headline-text); }
.kpi-tile--headline strong { color: var(--color-kpi-headline-figure); }
.grid-2, .overview-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.overview-grid { grid-template-areas: "companies" "pages" "feed"; }
.overview-companies { grid-area: companies; }
.overview-pages { grid-area: pages; }
.overview-feed { grid-area: feed; }
/* A ranked row: rank, name (a page path is cut with an ellipsis, its full text in its title; a company name wraps
   with its badges in a title-line--wrap, at least --title-min-w wide), then the count at the right of line 1. The rank
   is a counter because a flex list item draws no list marker. Baseline alignment keeps rank and count on line 1. */
.ranked { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.ranked li {
  display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--color-border); counter-increment: rank;
}
.ranked li::before {
  content: counter(rank) "."; flex: none; min-width: var(--space-6); color: var(--color-text-muted);
  font-variant-numeric: var(--figure-numeric);
}
.ranked li:last-child { border-bottom: 0; }
.ranked li > a, .ranked li > code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked .title-line { flex: 1 1 auto; min-width: var(--title-min-w); }
.figure { color: var(--color-text-muted); font-variant-numeric: var(--figure-numeric); }
.ranked .figure { flex: none; margin-left: auto; white-space: nowrap; }
.table-caption .figure { color: var(--color-text); font-weight: var(--weight-semibold); }
.updated { font-size: var(--text-secondary-size); }
/* Facts stack (label above value) until 768px, and always where the list sits in a narrow column (facts--stacked). */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.facts dd + dt { margin-top: var(--space-2); }
.facts dt { color: var(--color-text-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---- feed (latest visits) ---- */
.feed { list-style: none; margin: 0; padding: 0; }
/* The left border is reserved transparent so a highlighted item never changes size. */
.feed-item {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--feed-item-pad-y) var(--feed-item-pad-x); border-bottom: var(--border-width) solid var(--color-border);
  border-left: var(--feed-indicator-width) solid transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.feed-item p { margin: 0; }
.feed-item:hover { background: var(--color-feed-hover-bg); }
.feed-item:last-child { border-bottom: 0; }
.feed-item-title { font-weight: var(--weight-semibold); }
.feed-item-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-text-muted);
  font-size: var(--text-secondary-size);
}
/* Line 1 of a feed item or a table cell: the name on one line (an ellipsis where the width is fixed, with the full
   name in its title) and its badges beside it, never wrapped under it. */
.title-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.title-line > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-line > .badge { flex: none; }
/* In a table cell the name may wrap, still beside its badges, so a long name never widens the (sticky) column. */
.data-table .title-line { align-items: flex-start; }
.data-table .title-line > :first-child, .title-line--wrap > :first-child {
  overflow: visible; white-space: normal; overflow-wrap: break-word;
}
/* title-line--wrap: the full name, wrapping; its badges stay beside it when they fit, else wrap below it (and a badge
   wider than the whole line wraps its own words), so a narrow column is never pushed wider or cut to an ellipsis. */
.title-line--wrap { flex-wrap: wrap; }
.title-line--wrap > .badge { flex: 0 1 auto; white-space: normal; }

/* ---- states ---- */
.state-title {
  font-family: var(--font-display); font-weight: var(--weight-state-title); font-size: var(--text-state-title-size);
  line-height: var(--lh-tight);
}
.state-empty {
  color: var(--color-text); background: var(--color-empty-bg); border-radius: var(--radius-card);
  padding: var(--empty-pad-y) var(--empty-pad-x);
}
.state-empty .muted { max-width: var(--measure); }
.state-error { color: var(--color-danger); }
.state-error[hidden] { display: none; }
.state-loading { display: none; }
.htmx-request .state-loading { display: inline; }

/* ---- badges and callouts: the word carries the meaning, colour only groups ---- */
.badge {
  display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border); font-family: var(--font-label); font-size: var(--text-label-size);
  font-weight: var(--weight-semibold); line-height: var(--lh-badge); white-space: nowrap;
  text-transform: var(--ui-text-transform); letter-spacing: var(--ui-tracking);
  background: var(--color-badge-bg); color: var(--color-text);
}
.badge--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.badge--icp { background: var(--color-icp-bg); color: var(--color-on-icp); border-color: var(--color-icp-bg); }
.badge--info { background: var(--color-info-bg); color: var(--color-text); border-color: var(--color-info-badge-edge); }
.badge--neutral { color: var(--color-text-muted); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.badge--sample { background: var(--color-sample-bg); color: var(--color-warning); border-color: var(--color-warning); }
.badge--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.badge--conf-high { background: var(--color-strong); color: var(--color-on-strong); border-color: var(--color-strong); }
.badge--conf-medium { background: var(--color-conf-medium-bg); color: var(--color-text); border-color: var(--color-conf-medium-edge); }
.badge--conf-low { color: var(--color-text-muted); border-color: var(--color-conf-low-edge); border-style: var(--border-style-disabled); }
.badge--hot { background: var(--color-hot); color: var(--color-on-hot); border-color: var(--color-hot-edge); }
.badge--warm { background: var(--color-warm); color: var(--color-on-warm); border-color: var(--color-warm-edge); }
.badge--cold { background: var(--color-cold); color: var(--color-on-cold); border-color: var(--color-cold-edge); }
.callout {
  border: var(--border-width) solid var(--color-border); border-left-width: var(--border-width-indicator);
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); max-width: var(--measure);
  background: var(--color-surface); color: var(--color-callout-text);
}
.callout--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.callout--negative { background: var(--color-danger-bg); border-color: var(--color-danger); }
.callout--positive { background: var(--color-success-bg); border-color: var(--color-success); }
.callout--info { background: var(--color-info-bg); border-color: var(--color-info-border); }
.callout-title {
  display: block; margin-bottom: var(--space-1); font-family: var(--font-label); font-size: var(--text-callout-title-size);
  font-weight: var(--weight-semibold); text-transform: var(--ui-text-transform); letter-spacing: var(--ui-tracking);
}
.callout--warning .callout-title { color: var(--color-warning); }
.callout--negative .callout-title { color: var(--color-danger); }
.callout--positive .callout-title { color: var(--color-success); }
.callout--info .callout-title { color: var(--color-info-title); }

/* ---- buttons: the default .btn is the secondary; at most one .btn--primary per view ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h-base); padding: 0 var(--btn-pad-x);
  border: var(--btn-border-width) solid var(--color-border-strong); border-radius: var(--radius-control);
  background: var(--color-btn-bg); color: var(--color-link); font: inherit;
  /* a button set inside a heading keeps the body face and size, not the heading's */
  font-family: var(--font-sans); font-size: var(--text-body-size); font-weight: var(--weight-medium);
  line-height: var(--lh-btn); text-transform: var(--control-text-transform); letter-spacing: var(--ui-tracking);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-standard) var(--ease-standard), color var(--motion-standard) var(--ease-standard),
    border-color var(--motion-standard) var(--ease-standard);
}
.btn:hover { background: var(--color-strong); color: var(--color-on-strong); border-color: var(--color-strong); }
.btn:active { background: var(--color-accent-pressed); color: var(--color-on-strong); border-color: var(--color-accent-pressed); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover {
  background: var(--color-primary-hover-bg); color: var(--color-primary-hover-text);
  border-color: var(--color-primary-hover-border);
}
.btn--primary:active { background: var(--color-accent-pressed); color: var(--color-on-strong); border-color: var(--color-accent-pressed); }
.btn--ghost {
  background: transparent; border-color: transparent; color: var(--color-link); text-decoration: var(--ghost-decoration);
  text-decoration-thickness: var(--underline-thickness-cta); text-underline-offset: var(--underline-offset-cta);
}
.btn--ghost:hover, .btn--ghost:active {
  background: var(--color-ghost-hover-bg); color: var(--color-link); border-color: transparent; text-decoration: underline;
}
.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover, .btn--danger:active {
  background: var(--color-danger-hover-bg); color: var(--color-danger-hover-text); border-color: var(--color-danger);
}
.btn--small {
  min-height: var(--control-h-sm-base); padding: 0 var(--space-3); font-size: var(--text-btn-small-size);
}
.btn--block { width: 100%; }
/* Disabled stays focusable (aria-disabled) so its reason is reachable; hover and press change nothing. */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:active,
.btn:disabled, .btn:disabled:hover {
  background: var(--color-disabled-bg); color: var(--color-text-muted); border-color: var(--color-disabled-border);
  border-style: var(--border-style-disabled); text-decoration: none; cursor: not-allowed;
}
.signout { border-color: var(--color-signout-border); }
.btn-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-form { display: inline; }
.filter-bar, .form-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.form-grid h2, .form-grid p { flex-basis: 100%; }
/* Narrow: one field per row (a field--pair, such as From and To, shares a row where the tenant pairs them) and the
   buttons on their own row. min-width 0 lets a field shrink below its control's natural width. */
.field {
  display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 100%; min-width: 0;
  font-family: var(--font-label); font-size: var(--text-field-label-size); font-weight: var(--weight-medium);
  text-transform: var(--ui-text-transform); letter-spacing: var(--ui-tracking); color: var(--color-field-label);
}
.field--pair { flex-basis: var(--field-pair-basis); }
.filter-bar .btn-row { flex: 1 1 100%; }
.filter-bar .btn-row .btn { flex-grow: var(--filter-btn-grow); }
.field input, .field select {
  width: 100%; max-width: 100%; min-width: 0;
  min-height: var(--control-h-base); padding: 0 var(--input-pad-x);
  border: var(--input-border-width) solid var(--color-border-control); border-bottom-width: var(--input-underline-width);
  border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-body-size); font-weight: var(--weight-regular);
  text-transform: none; letter-spacing: 0;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.field input:hover, .field select:hover { background: var(--color-input-hover-bg); border-color: var(--color-input-hover-border); }
.field input::placeholder { color: var(--color-text-muted); }
.field input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--color-strong); }

/* ---- tables ---- */
/* isolation keeps the sticky header and first column under the sticky top bar. */
.table-wrap { overflow-x: auto; isolation: isolate; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border);
  text-align: left; vertical-align: top;
}
.data-table th {
  font-family: var(--font-label); font-size: var(--text-label-size); line-height: var(--lh-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-th-text); font-weight: var(--weight-medium);
  background: var(--color-th-bg); border-bottom: var(--th-rule-width) solid var(--color-th-rule);
}
.data-table thead th { position: sticky; top: 0; z-index: var(--z-th); }
.data-table tbody tr { background: var(--color-surface); transition: background-color var(--motion-fast) var(--ease-standard); }
.data-table tbody tr:hover { background: var(--color-surface-hover); }
.data-table a:focus-visible { outline-offset: var(--focus-offset-inset); }
.data-table--wide { min-width: var(--table-min-w); }
/* Where the tenant keeps it (--first-col-left: 0), the first column stays in view while a wide table scrolls
   sideways; with auto it stays in place. Its cells take the row's (opaque) fill so scrolled cells pass under them,
   and their --shadow-first-col-cover paints the card's surface over the wrapper's left padding, where scrolled cells
   would otherwise show. Until 768px the column is --first-col-w-sm wide, its text wrapping inside it. */
.data-table--wide thead th:first-child {
  left: var(--first-col-left); z-index: var(--z-sticky); border-right: var(--first-col-rule-width) solid var(--color-border);
}
.data-table--wide tbody > tr > :first-child {
  position: sticky; left: var(--first-col-left); z-index: var(--z-raised); background: inherit;
  border-right: var(--first-col-rule-width) solid var(--color-border);
}
.data-table--wide > * > tr > :first-child {
  width: var(--first-col-w-sm); overflow-wrap: var(--first-col-wrap-sm); box-shadow: var(--shadow-first-col-cover);
}
.data-table--compact td, .data-table--compact th { padding: var(--space-1) var(--space-2); }
.scroll-hint { display: var(--scroll-hint-display); margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-secondary-size); }
.cell-sub, .cell-sub-inline { color: var(--color-text-muted); font-size: var(--text-secondary-size); }
.cell-sub span + span::before { content: ', '; }
.null { color: var(--color-text-muted); }
.visit-pages { margin: 0; padding: 0; list-style: none; }
/* A page path link and its "all fixes" link: each at least --target-min square, a gap apart (WCAG 2.5.8). */
.page-ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); max-width: 100%; }
.page-ref a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
.visit-warning { margin-top: var(--space-1); font-size: var(--text-secondary-size); }
.empty-cell { text-align: center; color: var(--color-text-muted); }

/* ---- tabs: links that switch a view (the current one carries aria-current="page") ---- */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-bottom: var(--tab-bar-rule-width) solid var(--color-border);
}
.tab {
  display: inline-flex; align-items: center; min-height: var(--control-h-base); padding: 0 var(--space-3);
  border: var(--border-width) solid transparent; border-bottom-width: var(--tab-rule-width);
  border-radius: var(--radius-control); color: var(--color-tab-text); font-weight: var(--weight-medium);
  text-transform: var(--control-text-transform); letter-spacing: var(--ui-tracking); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.tab:hover { background: var(--color-tab-hover-bg); text-decoration: var(--nav-hover-decoration); }
.tab[aria-current="page"] {
  background: var(--color-tab-current-bg); color: var(--color-tab-current-text);
  border-color: var(--color-tab-current-bg); border-bottom-color: var(--color-tab-current-rule);
}

/* ---- charts (SVG drawn on the server; colours from classes, never attributes) ---- */
.chart { margin: 0; }
.chart figcaption {
  font-family: var(--font-heading); font-size: var(--text-heading-size); font-weight: var(--weight-medium);
  line-height: var(--lh-tight); color: var(--color-heading); margin-bottom: var(--space-2);
}
.chart-svg { display: block; width: 100%; height: var(--chart-h); overflow: visible; }
.chart-bar { fill: var(--color-chart-bar); transition: fill var(--motion-fast) var(--ease-standard); }
.chart-bar:hover { fill: var(--color-chart-bar-hover); }
/* Axis and gridlines stay one hairline thick however far the plot is stretched (preserveAspectRatio="none"). */
.chart-axis { stroke: var(--color-chart-axis); stroke-width: var(--border-width); vector-effect: non-scaling-stroke; }
.chart-grid { stroke: var(--color-chart-grid); stroke-width: var(--border-width); vector-effect: non-scaling-stroke; }
.chart-line {
  fill: none; stroke: var(--color-chart-bar); stroke-width: var(--border-width-strong); vector-effect: non-scaling-stroke;
}
.chart-line--2 { stroke: var(--color-chart-2); stroke-dasharray: var(--chart-dash-2); }
.chart-line--3 { stroke: var(--color-chart-3); stroke-dasharray: var(--chart-dash-3); }
.chart-line--4 { stroke: var(--color-chart-4); stroke-dasharray: var(--chart-dash-4); }
.chart-line--5 { stroke: var(--color-chart-5); stroke-dasharray: var(--chart-dash-5); }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none;
  font-size: var(--text-secondary-size);
}
.chart-scale {
  display: flex; justify-content: space-between; font-size: var(--text-secondary-size); margin-top: var(--space-1);
  font-variant-numeric: var(--figure-numeric);
}
.chart-table summary { cursor: pointer; color: var(--color-link); margin-top: var(--space-2); }

/* ---- sign-in: a panel on the canvas, or (inside a brand surface) the brand block itself ---- */
.sign-in-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--space-4); }
.sign-in {
  width: 100%; max-width: var(--panel-signin); padding: var(--space-6); background: var(--color-surface);
  border: var(--signin-border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.sign-in > * + * { margin-top: var(--space-4); }
/* Sign-in buttons carry Google's wording and people's names, so they keep the case they are typed in. */
.sign-in .btn { text-transform: var(--ui-text-transform); }
.sign-in h1 { font-size: var(--text-signin-title-size); }
.sign-in-brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.sign-in-brand .brand-logo { width: var(--logo-signin-w); height: auto; max-width: 100%; }
.sign-in-brand .label {
  flex-basis: 100%; margin-top: var(--signin-rule-gap); padding-top: var(--signin-rule-gap);
  border-top: var(--signin-rule-width) solid var(--color-border-strong); font-family: var(--font-label);
  font-size: var(--text-label-size); line-height: var(--lh-label); font-weight: var(--weight-medium); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-text-muted);
}
.sign-in-section > * + * { margin-top: var(--space-2); }
.user-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- breakpoints: 768 (md), 1024 (lg), 1280 (xl) ---- */
@media (min-width: 768px) {
  .main { padding: var(--main-pad-md); }
  .card { padding: var(--card-pad-md); }
  .data-table--wide > * > tr > :first-child { width: auto; overflow-wrap: normal; }
  .btn, .tab, .field input, .field select { min-height: var(--control-h); }
  .btn--small { min-height: var(--control-h-sm); }
  .field { flex-basis: var(--field-min); }
  .filter-bar .btn-row { flex: 0 1 auto; }
  .filter-bar .btn-row .btn { flex-grow: 0; }
  .facts:not(.facts--stacked) {
    grid-template-columns: minmax(var(--facts-label-min), max-content) minmax(0, 1fr); row-gap: var(--space-2);
  }
  .facts:not(.facts--stacked) dd + dt { margin-top: 0; }
  .sign-in { padding: var(--signin-pad-md-y) var(--signin-pad-md-x); }
  [data-sidebar-from="768"] .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  [data-sidebar-from="768"] .sidebar {
    position: sticky; height: 100vh; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    justify-content: flex-start; padding: var(--space-6) var(--sidebar-pad-x); border-bottom-width: 0;
    border-right-width: var(--sidebar-rule-width);
  }
  [data-sidebar-from="768"] .sidebar .brand-logo { height: var(--logo-h); }
  [data-sidebar-from="768"] .menu-button { display: none; }
  [data-sidebar-from="768"] .nav-panel,
  .js[data-sidebar-from="768"] .menu-button[aria-expanded="false"] + .nav-panel { display: flex; flex: 1 1 auto; padding-top: var(--space-6); }
  [data-sidebar-from="768"] .nav a { min-height: var(--control-h); }
  [data-sidebar-from="768"] .who { margin-top: auto; }
}
@media (min-width: 1024px) {
  .main { padding: var(--main-pad-lg); }
  .data-table--wide thead th:first-child, .data-table--wide tbody > tr > :first-child { left: auto; border-right-width: 0; }
  .scroll-hint { display: none; }
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar {
    position: sticky; height: 100vh; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    justify-content: flex-start; padding: var(--space-6) var(--sidebar-pad-x); border-bottom-width: 0;
    border-right-width: var(--sidebar-rule-width);
  }
  .sidebar .brand-logo { height: var(--logo-h); }
  .menu-button { display: none; }
  .nav-panel, .js .menu-button[aria-expanded="false"] + .nav-panel { display: flex; flex: 1 1 auto; padding-top: var(--space-6); }
  .nav a { min-height: var(--control-h); }
  .who { margin-top: auto; }
  [data-split-from="1024"] .grid-2, [data-split-from="1024"] .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-split-from="1024"] .overview-grid { grid-template-areas: "companies pages" "feed feed"; }
}
@media (min-width: 1280px) {
  .main { padding: var(--main-pad-xl); }
  [data-split-from] .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-split-from] .overview-grid {
    grid-template-columns: var(--overview-columns-xl); grid-template-areas: var(--overview-areas-xl);
  }
}