@layer reset, tokens, base, layout, components, forms, responsive, motion;

/* Design tokens: brand palette, semantic aliases, and form-control aliases. */
@layer tokens {
  :root {
    --topbar-h: 64px;
    --sidebar-w: 280px;
    --bg: #F9FCF5;
    --panel: #FDFEF9;
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --pad: var(--space-3);
    --stack-gap: var(--space-4);
    --font-sans: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    --gl-ink: #1D252A;
    --gl-ink-2: #20282C;
    --gl-surface: #F7F8F5;
    --gl-surface-2: #F9FAF5;
    --gl-muted: #718B75;
    --gl-green-800: #1A3A2E;
    --gl-green-500: #83A280;
    --gl-green-300: #C5E5A3;
    --gl-green-200: #D2EBB0;
    --gl-green-100: #F2FFC7;
    --panel-2: var(--gl-surface-2);
    --panel-raised: #FFFFFF;
    --text-1: #1D252A;
    --text-2: #52615A;
    --text-3: #6D7A74;
    --text: var(--text-1);
    --text-muted: var(--text-2);
    --border: #D7DED6;
    --border-strong: #BDC8C0;

    --site-favicon-size: 22px;

    --primary: var(--gl-green-300);
    --primary-hover: var(--gl-green-200);
    --primary-ink: var(--gl-green-800);

    --link: var(--gl-green-800);
    --link-hover: #0F2A21;

    --focus-ring: var(--gl-green-100);
    --shadow: 0 10px 30px rgba(29, 37, 42, .10);
    --chart-axis-alpha: .76;
    --chart-grid-alpha: .18;
    --chart-series-primary-alpha: .88;
    --chart-series-secondary-alpha: .52;
    --chart-annotation-line-alpha: .42;
    --chart-annotation-marker-alpha: .9;
    --chart-annotation-marker-stroke-alpha: .98;
    --code-fg: var(--primary-ink);
    --code-bg: color-mix(in srgb, var(--primary) 22%, var(--panel-raised));
    --code-border: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
    --badge-meta-border: color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
    --badge-meta-bg: color-mix(in srgb, var(--primary) 26%, var(--panel) 74%);
    --badge-meta-fg: color-mix(in srgb, var(--primary-ink) 72%, var(--text) 28%);
    --fc-font: var(--font-sans);
    --fc-bg: var(--bg);
    --fc-fg: var(--text);
    --fc-muted: var(--text-muted);
    --fc-border: var(--border);
    --fc-border-hover: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
    --fc-radius: 12px;
    --fc-pad-y: var(--space-2);
    --fc-pad-x: var(--space-3);
    --fc-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    --fc-ring: color-mix(in srgb, var(--focus-ring) 72%, transparent);
    --fc-ring-border: var(--link);
    --fc-danger: #b91c1c;
    --fc-danger-bg: color-mix(in srgb, var(--fc-danger) 10%, var(--fc-bg));
    --fc-primary: var(--primary);
    --fc-primary-fg: var(--gl-ink);
    --fc-addon-bg: color-mix(in srgb, var(--fc-bg) 92%, var(--fc-fg) 8%);
    --fc-addon-fg: color-mix(in srgb, var(--fc-fg) 85%, var(--fc-muted) 15%);
    --fc-addon-pad-x: var(--space-3);
    --fc-addon-btn-bg: var(--fc-addon-bg);
    --fc-addon-btn-fg: var(--fc-addon-fg);
    --fc-addon-btn-hover-bg: color-mix(in srgb, var(--fc-addon-bg) 88%, var(--fc-fg) 12%);
    --fc-addon-btn-active-bg: color-mix(in srgb, var(--fc-addon-bg) 82%, var(--fc-fg) 18%);

    color-scheme: light;
  }

  /* Explicit dark theme override via data attribute. */
  [data-theme="dark"] {
    --bg: #0E1316;
    --panel: #141F24;
    --panel-2: #10191E;
    --panel-raised: #162227;
    --text-1: #EAF0EA;
    --text-2: #B6C2BA;
    --text-3: #8A9597;
    --text: var(--text-1);
    --text-muted: var(--text-2);
    --border: #2C3940;
    --border-strong: #445157;

    --primary: var(--gl-green-300);
    --primary-hover: var(--gl-green-200);
    --primary-ink: #08110D;

    --link: var(--gl-green-200);
    --link-hover: var(--gl-green-100);

    --focus-ring: rgba(242, 255, 199, .55);
    --shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --chart-axis-alpha: .76;
    --chart-grid-alpha: .18;
    --chart-series-primary-alpha: .88;
    --chart-series-secondary-alpha: .52;
    --chart-annotation-line-alpha: .58;
    --chart-annotation-marker-alpha: .96;
    --chart-annotation-marker-stroke-alpha: .98;
    --code-fg: color-mix(in srgb, var(--text) 90%, var(--primary) 10%);
    --code-bg: color-mix(in srgb, var(--primary) 10%, var(--panel-raised));
    --code-border: color-mix(in srgb, var(--border-strong) 75%, var(--primary) 25%);
    --badge-meta-border: color-mix(in srgb, var(--primary) 72%, var(--border-strong) 28%);
    --badge-meta-bg: color-mix(in srgb, var(--primary) 38%, var(--panel-raised) 62%);
    --badge-meta-fg: color-mix(in srgb, #ffffff 88%, var(--primary) 12%);

    --fc-bg: var(--bg);
    --fc-fg: var(--text);
    --fc-muted: var(--text-muted);
    --fc-border: var(--border);
    --fc-border-hover: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
    --fc-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    --fc-ring: color-mix(in srgb, var(--focus-ring) 72%, transparent);
    --fc-ring-border: var(--link);
    --fc-danger: #f87171;
    --fc-danger-bg: color-mix(in srgb, var(--fc-danger) 14%, var(--fc-bg));
    --fc-primary: var(--primary);
    --fc-primary-fg: var(--gl-ink);

    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0E1316;
      --panel: #141F24;
      --panel-2: #10191E;
      --panel-raised: #162227;
      --text-1: #EAF0EA;
      --text-2: #B6C2BA;
      --text-3: #8A9597;
      --text: var(--text-1);
      --text-muted: var(--text-2);
      --border: #2C3940;
      --border-strong: #445157;

      --primary: var(--gl-green-300);
      --primary-hover: var(--gl-green-200);
      --primary-ink: #08110D;

      --link: var(--gl-green-200);
      --link-hover: var(--gl-green-100);

      --focus-ring: rgba(242, 255, 199, .55);
      --shadow: 0 14px 40px rgba(0, 0, 0, .45);
      --chart-axis-alpha: .76;
      --chart-grid-alpha: .18;
      --chart-series-primary-alpha: .88;
      --chart-series-secondary-alpha: .52;
      --chart-annotation-line-alpha: .58;
      --chart-annotation-marker-alpha: .96;
      --chart-annotation-marker-stroke-alpha: .98;
      --code-fg: color-mix(in srgb, var(--text) 90%, var(--primary) 10%);
      --code-bg: color-mix(in srgb, var(--primary) 10%, var(--panel-raised));
      --code-border: color-mix(in srgb, var(--border-strong) 75%, var(--primary) 25%);
      --badge-meta-border: color-mix(in srgb, var(--primary) 72%, var(--border-strong) 28%);
      --badge-meta-bg: color-mix(in srgb, var(--primary) 38%, var(--panel-raised) 62%);
      --badge-meta-fg: color-mix(in srgb, #ffffff 88%, var(--primary) 12%);

      --fc-bg: var(--bg);
      --fc-fg: var(--text);
      --fc-muted: var(--text-muted);
      --fc-border: var(--border);
      --fc-border-hover: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
      --fc-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
      --fc-ring: color-mix(in srgb, var(--focus-ring) 72%, transparent);
      --fc-ring-border: var(--link);
      --fc-danger: #f87171;
      --fc-danger-bg: color-mix(in srgb, var(--fc-danger) 14%, var(--fc-bg));
      --fc-primary: var(--primary);
      --fc-primary-fg: var(--gl-ink);

      color-scheme: dark;
    }
  }
}

/* Base element defaults and global typography/colors. */
@layer base {
  * { box-sizing: border-box; }

  html,
  body {
    height: 100%;
    font-family: var(--font-sans);
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
  }

  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  a {
    color: var(--link);
    text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
    text-underline-offset: 2px;
  }

  a:hover { color: var(--link-hover); }
  a:visited { color: var(--link); }
  a:visited:hover { color: var(--link-hover); }

  small { color: var(--text-muted); }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
  }

  turbo-frame { display: block; }
  turbo-frame:empty:not(#modal) { min-height: 3rem; }
  turbo-frame#modal:empty { min-height: 0; }

  code {
    color: var(--code-fg);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 8px;
    padding: .1rem .35rem;
  }

  code,
  pre,
  kbd,
  samp {
    font-family: var(--font-mono);
  }
}

/* App shell layout and navigation state mechanics. */
@layer layout {
  .nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }

  .app {
    min-height: 100vh;
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .topbar {
    grid-area: topbar;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--pad);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 75%, var(--bg));
  }

  .topbar-spacer { display: none; }

  .sidebar {
    background: var(--panel-2);
    border-right: 1px solid var(--border);

    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);

    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
    z-index: 20;
    box-shadow: var(--shadow);
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 100%;
    margin-top: 0;
    padding: var(--pad);
  }

  .main {
    grid-area: main;
    padding: var(--space-4) var(--space-4) var(--space-4);
    color: var(--text);
  }

  .wrapper {
    width: 100%;
    margin-inline: auto;
  }

  .backdrop {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;

    background: color-mix(in srgb, var(--bg) 25%, #000 75%);
    z-index: 10;

    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
    cursor: pointer;
  }

  .nav-toggle:checked ~ .app .sidebar { transform: translateX(0); }

  .nav-toggle:checked ~ .app .backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Dashboard-specific UI building blocks. */
@layer components {
  .nav-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent);
    user-select: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 90ms ease;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    padding: var(--pad);
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 90ms ease;
  }

  .nav-item-button {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .nav-mobile-only {
    display: grid;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
  }

  .nav-signout-form { margin: 0; }

  .nav-btn:focus-visible,
  .nav-item:focus-visible,
  .toplink:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .nav-btn:hover,
  .nav-item:hover {
    background: color-mix(in srgb, var(--panel-raised) 82%, var(--panel-2) 18%);
  }

  .nav-item:hover {
    color: var(--link-hover);
    border-color: color-mix(in srgb, var(--border-strong) 76%, var(--primary) 24%);
  }

  .nav-item.active {
    color: var(--link);
    background: color-mix(in srgb, var(--panel-raised) 78%, var(--panel-2) 22%);
    border-color: color-mix(in srgb, var(--border-strong) 70%, var(--primary) 30%);
  }

  .nav-btn:active,
  .nav-item:active {
    transform: translateY(1px);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: var(--space-2);
    font-weight: 700;
    white-space: nowrap;
    font-size: 1.55rem;
    color: var(--link);
    letter-spacing: .01em;
    text-decoration: none;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
    display: block;
  }

  .top-actions {
    display: none;
    align-items: center;
    gap: var(--space-1);
  }

  .top-signout-form { margin: 0; }

  .toplink {
    display: none;
    align-items: center;
    gap: var(--space-1);
    color: var(--link);
    text-decoration: none;
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }

  .toplink-button {
    font: inherit;
    background: transparent;
    cursor: pointer;
  }

  .toplink:hover {
    color: var(--link-hover);
    background: color-mix(in srgb, var(--panel-raised) 82%, var(--panel-2) 18%);
    border-color: color-mix(in srgb, var(--border-strong) 74%, var(--primary) 26%);
  }

  .toplink.active {
    color: var(--link);
    background: color-mix(in srgb, var(--panel-raised) 80%, var(--panel-2) 20%);
    border-color: color-mix(in srgb, var(--border-strong) 68%, var(--primary) 32%);
  }

  .main h1,
  .main h2,
  .main h3 {
    color: var(--text);
  }

  .main h1 {
    margin: 0 0 var(--space-4);
    line-height: 1.15;
  }

  .main p { color: var(--text-muted); }

  .page-title { margin-bottom: var(--space-4); }

  .auth-page {
    background: color-mix(in srgb, var(--panel-2) 84%, var(--bg));
    min-height: 100vh;
  }

  .auth-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-4);
  }

  .auth-shell {
    width: min(420px, 100%);
  }

  .auth-flashes {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .auth-flash {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--fc-radius);
    background: color-mix(in srgb, var(--panel) 84%, var(--primary) 16%);
    color: var(--text);
    font-size: .92rem;
    line-height: 1.35;
  }

  .auth-card {
    width: 100%;
    display: grid;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 3vw, var(--space-6));
  }

  .auth-card-header {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
  }

  .auth-brand {
    justify-self: center;
    font-size: 1.5rem;
    text-decoration: none;
  }

  .auth-brand .brand-logo {
    width: 44px;
    height: 44px;
  }

  .auth-tagline {
    margin: calc(var(--space-1) / 2) 0 0;
    color: var(--text-muted);
    font-size: .9rem;
  }

  .auth-title {
    margin: var(--space-1) 0 0;
    font-size: clamp(1.35rem, 3.2vw, 1.65rem);
    font-weight: 650;
    line-height: 1.2;
  }

  .auth-label {
    color: var(--text-muted);
    font-size: .9rem;
  }

  .auth-form {
    margin: 0;
    max-width: 100%;
  }

  .auth-submit {
    width: 100%;
    font-weight: 700;
  }

  .auth-links,
  .goal-detail-summary {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-muted);
    font-size: .9rem;
  }

  .auth-links {
    justify-content: center;
    gap: var(--space-2);
  }

  .auth-links a {
    color: var(--text-muted);
    text-decoration: none;
  }

  .auth-links a:hover {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .auth-profile-value {
    margin: 0;
    color: var(--text);
    font-weight: 600;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .form-actions {
    align-items: center;
  }

  .auth-signout-form {
    margin: 0;
  }

  .sites-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .site-detail-page {
    display: grid;
    gap: var(--stack-gap);
  }

  .site-detail-top {
    display: grid;
    gap: var(--space-3);
  }

  .site-detail-head {
    margin-bottom: 0;
  }

  .site-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
  }

  .site-detail-toolbar-actions {
    display: flex;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .site-detail-range-summary {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: .43rem .65rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 70%, var(--text) 30%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-2) 92%, var(--bg) 8%);
    color: color-mix(in srgb, var(--text-muted) 78%, var(--text) 22%);
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .site-detail-range-summary__label {
    color: color-mix(in srgb, var(--text-muted) 90%, var(--text) 10%);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .site-detail-range-summary__value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .page-head--baseline {
    align-items: baseline;
    gap: var(--space-4) var(--space-4);
    margin-bottom: var(--space-2);
    align-items: center;
  }

  .page-head-title {
    min-width: 0;
    flex: 1 1 auto;
  }

  .inline-cluster {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .page-head-actions {
    margin-left: auto;
  }

  .site-actions-dropdown {
    position: relative;
    display: inline-flex;
    --site-actions-anim-duration: 250ms;
  }

  .site-actions-dropdown__button {
    min-block-size: 2.35rem;
  }

  .site-actions-dropdown__chevron {
    flex: 0 0 auto;
    transition: transform var(--site-actions-anim-duration) ease;
    transform-origin: center;
  }

  .site-actions-dropdown__button[aria-expanded="true"] .site-actions-dropdown__chevron {
    transform: rotate(180deg);
  }

  .site-actions-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-inline-size: min(19rem, 88vw);
    padding: var(--space-1);
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 20%, transparent);
    gap: 2px;
    z-index: 25;
  }

  .site-actions-dropdown__menu:not([hidden]) {
    display: grid;
    transform-origin: top right;
    animation: site-actions-dropdown-enter var(--site-actions-anim-duration) ease;
  }

  @keyframes site-actions-dropdown-enter {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .site-actions-dropdown__item {
    display: block;
    inline-size: 100%;
    padding: .48rem .6rem;
    border-radius: 8px;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted) 12%);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-actions-dropdown__item-group {
    position: relative;
  }

  .site-actions-dropdown__item--submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
  }

  .site-actions-dropdown__submenu-chevron {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted) 28%);
  }

  .site-actions-dropdown__submenu {
    position: absolute;
    top: 0;
    right: calc(100% + var(--space-1));
    left: auto;
    min-inline-size: min(19rem, 88vw);
    padding: var(--space-1);
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 20%, transparent);
    gap: 2px;
    z-index: 26;
  }

  .site-actions-dropdown__submenu:not([hidden]) {
    display: grid;
    transform-origin: top right;
    animation: site-actions-dropdown-enter var(--site-actions-anim-duration) ease;
  }

  .site-actions-dropdown__item:hover {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--text);
  }

  .site-actions-dropdown__item:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .site-actions-dropdown__item--danger {
    color: var(--danger-700, var(--fc-danger));
  }

  .site-actions-dropdown__item--danger:hover {
    background: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 14%, transparent);
    color: var(--danger-700, var(--fc-danger));
  }

  .site-actions-note {
    margin: 0;
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: .92rem;
    text-align: right;
  }

  .site-actions-note a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 48%, transparent);
    text-underline-offset: 2px;
  }

  .site-actions-note a:hover {
    color: var(--link);
    text-decoration-color: currentColor;
  }

  .link-danger {
    color: var(--danger-700, var(--fc-danger));
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 45%, transparent);
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .link-danger:hover {
    color: var(--danger-600, var(--fc-danger));
    text-decoration-color: currentColor;
  }

  .link-danger:focus-visible {
    outline: 3px solid var(--fc-ring);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .sites-page-head .page-title { margin: 0; }
  .sites-page-head .page-title {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 1.55rem;
  }

  #site-detail-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
    gap: 1rem;
  }

  #site-detail-title .page-title {
    font-size: 28px;
  }

  .site-detail-favicon {
    flex: 0 0 30px;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 6px;
    object-fit: cover;
    background: color-mix(in srgb, var(--panel) 72%, var(--bg) 28%);
  }

  .page-head-action {
    white-space: nowrap;
  }

  .link-muted {
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, var(--text-muted) 84%, var(--text) 16%);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    transition: color 120ms ease, background-color 120ms ease, text-decoration-color 120ms ease;
  }

  .link-muted:hover {
    color: var(--link);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
    text-underline-offset: 2px;
  }

  .link-muted:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .page-head-action--secondary {
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    background: color-mix(in srgb, var(--panel-2) 84%, var(--bg) 16%);
  }

  .page-head-action--secondary:hover {
    background: color-mix(in srgb, var(--panel-2) 72%, var(--primary) 28%);
  }

  .page-head-action svg,
  .site-detail-btn svg,
  .site-edit-btn svg,
  .site-delete-btn svg {
    width: 1em;
    height: 1em;
  }

  .sites-list-page,
  .workspaces-list-page {
    display: grid;
    gap: var(--space-3);
  }

  .workspace-detail-page {
    display: grid;
    gap: var(--space-3);
  }

  .workspace-invites-page {
    display: grid;
    gap: var(--space-3);
  }

  .help-page {
    display: grid;
    gap: var(--space-3);
  }

  .help-layout {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    align-items: start;
  }

  .help-nav-card {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
  }

  .help-nav-card .section-head {
    margin-bottom: 0;
  }

  .help-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-1);
  }

  .help-nav-link {
    display: block;
    padding: .5rem .65rem;
    border-radius: 9px;
    border: 1px solid transparent;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted) 12%);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }

  .help-nav-link:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--border) 70%, var(--text) 30%);
  }

  .help-nav-link.is-active {
    color: var(--text);
    background: color-mix(in srgb, var(--panel-2) 88%, var(--bg) 12%);
    border-color: color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 86%, var(--text) 14%);
  }

  .help-nav-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .help-content-card {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
  }

  .help-markdown {
    color: var(--text);
  }

  .help-markdown > :first-child {
    margin-top: 0;
  }

  .help-markdown > :last-child {
    margin-bottom: 0;
  }

  .help-markdown h1,
  .help-markdown h2,
  .help-markdown h3,
  .help-markdown h4 {
    margin: 1.2em 0 .55em;
    color: var(--text);
    line-height: 1.25;
  }

  .help-markdown h1 {
    font-size: 1.5rem;
  }

  .help-markdown h2 {
    font-size: 1.2rem;
  }

  .help-markdown h3 {
    font-size: 1.05rem;
  }

  .help-markdown p {
    margin: 0 0 var(--space-3);
    color: color-mix(in srgb, var(--text) 90%, var(--text-muted) 10%);
    line-height: 1.6;
  }

  .help-markdown ul,
  .help-markdown ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
    color: var(--text);
  }

  .help-markdown li + li {
    margin-top: var(--space-1);
  }

  .help-markdown a {
    font-weight: 600;
  }

  .help-markdown hr {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--border);
  }

  .help-markdown pre {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-2) 88%, var(--bg) 12%);
    overflow-x: auto;
  }

  .help-markdown pre code {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text);
  }

  .help-markdown blockquote {
    margin: 0 0 var(--space-3);
    padding: 0 0 0 var(--space-3);
    border-left: 3px solid color-mix(in srgb, var(--primary) 60%, var(--border));
    color: var(--text-muted);
  }

  .help-markdown table {
    width: 100%;
    margin: 0 0 var(--space-3);
    border-collapse: collapse;
  }

  .help-markdown th,
  .help-markdown td {
    border: 1px solid var(--border);
    padding: .45rem .55rem;
    text-align: left;
    vertical-align: top;
  }

  .help-markdown th {
    font-weight: 700;
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
  }

  .workspace-invites-head {
    align-items: start;
  }

  .workspace-invites-card {
    display: grid;
    gap: var(--space-2);
  }

  .workspace-invites-section-title {
    margin: 0;
  }

  .workspace-invites-list {
    display: grid;
    gap: var(--space-2);
  }

  .workspace-invites-table {
    table-layout: fixed;
  }

  .workspace-invites-table th:nth-child(1),
  .workspace-invites-table td:nth-child(1) {
    width: 36%;
  }

  .workspace-invites-table th:nth-child(2),
  .workspace-invites-table td:nth-child(2) {
    width: 16%;
  }

  .workspace-invites-table th:nth-child(3),
  .workspace-invites-table td:nth-child(3) {
    width: 24%;
  }

  .workspace-invites-table th:nth-child(4),
  .workspace-invites-table td:nth-child(4) {
    width: 24%;
  }

  .workspace-invites-col-email {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .workspace-invites-col-actions form {
    margin: 0;
    display: inline-flex;
  }

  .workspace-invites-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  .workspace-invite-resend-btn {
    color: color-mix(in srgb, var(--primary) 72%, var(--text) 28%);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--fc-border));
    background: color-mix(in srgb, var(--primary) 10%, var(--fc-bg));
  }

  .workspace-invite-resend-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--fc-border));
    background: color-mix(in srgb, var(--primary) 16%, var(--fc-bg));
  }

  .workspace-invite-revoke-btn {
    color: var(--danger-700, var(--fc-danger));
    border-color: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 40%, var(--fc-border));
    background: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 10%, var(--fc-bg));
  }

  .workspace-invite-revoke-btn:hover {
    border-color: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 60%, var(--fc-border));
    background: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 14%, var(--fc-bg));
  }

  .workspace-invites-action-placeholder {
    color: var(--text-muted);
  }

  .workspace-detail-head {
    align-items: start;
  }

  .workspace-detail-card {
    display: grid;
    gap: var(--space-2);
  }

  .workspace-detail-section-title {
    margin: 0;
    font-size: 1.05rem;
  }

  .workspace-site-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-1);
  }

  .workspace-site-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text) 24%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted) 12%);
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  }

  .workspace-site-row:hover {
    border-color: color-mix(in srgb, var(--border) 56%, var(--text) 44%);
    background: color-mix(in srgb, var(--primary) 16%, var(--panel));
    color: var(--text);
  }

  .workspace-site-row:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .workspace-site-row-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .workspace-site-row-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 120ms ease, color 120ms ease;
  }

  .workspace-site-row:hover .workspace-site-row-chevron,
  .workspace-site-row:focus-visible .workspace-site-row-chevron {
    transform: translateX(2px);
    color: var(--link);
  }

  .card.sites-card {
    display: grid;
    gap: var(--space-3);
    padding: 0;
  }

  .card.sites-list-card,
  .card.workspaces-list-card {
    padding: 0;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  .account-page {
    display: grid;
    gap: var(--space-3);
  }

  .account-page-head {
    align-items: start;
  }

  .page-subline {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    max-width: 60ch;
  }

  .workspace-detail-meta,
  .site-domain-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .workspace-detail-meta {
    align-items: center;
  }

  .account-layout {
    display: grid;
    gap: var(--space-3);
  }

  .account-column {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .account-card {
    display: grid;
    gap: var(--space-4);
  }

  .account-section-head {
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
  }

  .account-section-head h2 {
    font-size: clamp(1.08rem, 1.6vw, 1.18rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .account-subsection {
    display: grid;
    gap: var(--space-3);
  }

  .account-subsection + .account-subsection {
    border-top: 1px solid var(--border);
    margin-top: var(--space-1);
    padding-top: var(--space-4);
  }

  .account-subsection-title {
    margin: 0;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
  }

  .account-settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
  }

  .account-settings-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: .72rem .8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-2);
  }

  .account-settings-meta {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
  }

  .account-settings-meta .label {
    margin: 0;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--text) 70%, var(--text-muted) 30%);
  }

  .account-settings-meta .auth-profile-value {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text) 86%, var(--text-muted) 14%);
  }

  .account-settings-email {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 48%, transparent);
    text-underline-offset: 2px;
    white-space: normal;
  }

  .account-settings-email:hover {
    color: var(--link);
    text-decoration-color: currentColor;
  }

  .account-settings-email:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .account-settings-action,
  .account-security-action,
  .account-privacy-action {
    min-block-size: 2.35rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .account-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .account-security-row .help {
    margin: var(--space-1) 0 0;
  }

  .account-session-block {
    display: grid;
    gap: var(--space-2);
  }

  .account-session-block .help {
    margin: 0;
  }

  .account-session-list {
    margin: 0;
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-raised);
    overflow: hidden;
  }

  .account-session-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: .78rem .85rem;
    border-top: 1px solid var(--border);
    background: transparent;
  }

  .account-session-item:first-child {
    border-top: 0;
  }

  .account-session-item dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
  }

  .account-session-item dd {
    margin: 0;
    color: var(--text);
    text-align: right;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: .93rem;
  }

  .account-session-note {
    margin: 0;
    font-size: .86rem;
  }

  .account-signout-form {
    margin: 0;
  }

  .account-privacy-row {
    display: grid;
    gap: var(--space-3);
  }

  .account-privacy-row .help {
    margin: 0;
  }

  .account-card-danger {
    border-color: color-mix(in srgb, var(--border) 78%, var(--fc-danger) 22%);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--bg) 8%), var(--panel));
  }

  .account-card-danger h2 {
    color: var(--text);
  }

  .account-card-danger .help,
  .account-card-danger .destructive-confirmation-note {
    margin: 0;
    color: var(--text-muted);
  }

  .account-danger-actions {
    display: flex;
    justify-content: flex-start;
  }

  .account-email-form,
  .account-locale-form,
  .account-theme-form,
  .account-delete-form {
    max-width: 100%;
    margin-bottom: 0;
  }

  .account-password-page {
    display: grid;
    gap: var(--space-3);
  }

  .account-password-card {
    display: grid;
    gap: var(--space-4);
  }

  .account-password-card .section-head {
    align-items: center;
    flex-wrap: wrap;
  }

  .account-password-card .form {
    max-width: 100%;
    margin-bottom: 0;
  }

  .site-create-page {
    display: grid;
    gap: var(--space-3);
  }

  .site-delete-page {
    display: grid;
    gap: var(--space-3);
  }

  .modal-sheet-body {
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    background: var(--panel);
  }

  .modal-sheet-body .form {
    max-width: 100%;
    margin-bottom: 0;
  }

  .modal-sheet {
    width: min(680px, calc(100vw - 1.5rem));
    margin: auto;
    inset: 0;
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    background: var(--bg);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
    overflow: auto;
  }

  .modal-sheet:has(.share-links-modal-content) {
    width: min(1080px, calc(100vw - 1.5rem));
  }

  .modal-sheet::backdrop {
    background: rgba(10, 14, 18, 0.45);
  }

  .modal-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, var(--border-strong) 16%);
    background: color-mix(in srgb, var(--panel-raised) 82%, var(--bg) 18%);
  }

  .modal-sheet-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
  }

  .modal-sheet[data-modal-tone="danger"],
  .destructive-confirmation-form {
    --danger-700: #991b1b;
    --danger-600: #b91c1c;
    --danger-200: #fecaca;
    --danger-50: #fef2f2;

    --text: #111827;
    --text-muted: #4b5563;
    --border: #d1d5db;

    --fc-fg: #111827;
    --fc-muted: #6b7280;
    --fc-border: #d1d5db;
    --fc-border-hover: #9ca3af;
    --fc-ring-border: #6b7280;
    --fc-ring: rgba(107, 114, 128, 0.24);
    --fc-danger: var(--danger-700);
    --fc-danger-bg: var(--danger-50);
    --delete-chip-bg: #f3f4f6;
    --delete-chip-border: #d1d5db;
    --delete-chip-text: #111827;
  }

  .modal-sheet[data-modal-tone="danger"] .modal-sheet-title::before {
    content: "";
    inline-size: 1.1em;
    block-size: 1.1em;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--danger-600) 70%, var(--text) 30%);
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
      center / contain no-repeat;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-sheet[data-modal-tone="danger"],
    :root:not([data-theme="light"]) .destructive-confirmation-form {
      --danger-700: #fca5a5;
      --danger-600: #f87171;
      --danger-200: #7f1d1d;
      --danger-50: rgba(248, 113, 113, 0.12);

      --text: #e5e7eb;
      --text-muted: #9ca3af;
      --border: #4b5563;

      --fc-fg: #e5e7eb;
      --fc-muted: #9ca3af;
      --fc-border: #4b5563;
      --fc-border-hover: #6b7280;
      --fc-ring-border: #9ca3af;
      --fc-ring: rgba(156, 163, 175, 0.24);
      --fc-danger: var(--danger-700);
      --fc-danger-bg: var(--danger-50);
      --delete-chip-bg: #1f2937;
      --delete-chip-border: #4b5563;
      --delete-chip-text: #e5e7eb;
    }
  }

  [data-theme="dark"] .modal-sheet[data-modal-tone="danger"],
  [data-theme="dark"] .destructive-confirmation-form {
    --danger-700: #fca5a5;
    --danger-600: #f87171;
    --danger-200: #7f1d1d;
    --danger-50: rgba(248, 113, 113, 0.12);

    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --border: #4b5563;

    --fc-fg: #e5e7eb;
    --fc-muted: #9ca3af;
    --fc-border: #4b5563;
    --fc-border-hover: #6b7280;
    --fc-ring-border: #9ca3af;
    --fc-ring: rgba(156, 163, 175, 0.24);
    --fc-danger: var(--danger-700);
    --fc-danger-bg: var(--danger-50);
    --delete-chip-bg: #1f2937;
    --delete-chip-border: #4b5563;
    --delete-chip-text: #e5e7eb;
  }

  .sites-search-form { margin: 0; }

  .sites-list-search {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, var(--text) 38%);
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
  }

  .sites-search-group {
    min-block-size: 42px;
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--fc-border) 74%, var(--fc-fg) 26%);
    box-shadow: none;
  }

  .sites-search-group .addon {
    background: var(--fc-bg);
    color: color-mix(in srgb, var(--fc-muted) 86%, var(--fc-fg) 14%);
    padding-inline: var(--space-2);
  }

  .sites-search-group .addon-left {
    border-right-color: color-mix(in srgb, var(--fc-border) 76%, var(--fc-fg) 24%);
  }

  .sites-search-group .addon svg {
    width: 1rem;
    height: 1rem;
  }

  .sites-search-group > .control {
    padding-block: var(--space-2);
  }

  .sites-list-empty-state,
  .workspaces-list-empty-state {
    padding: var(--space-3);
  }

  .table-wrap {
    margin: 0;
  }

  .table-wrap,
  .data-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table {
    min-width: 40rem;
    table-layout: fixed;
  }

  .workspaces-list-table .workspaces-col-name {
    width: auto;
  }

  .workspaces-list-table .workspaces-col-kind {
    width: 170px;
    white-space: nowrap;
  }

  .workspaces-list-table .workspaces-col-role {
    width: 170px;
    white-space: nowrap;
  }

  .list-table .link-strong {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 600;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted) 12%);
    text-decoration: none;
    transition: color 110ms ease, font-weight 110ms ease;
  }

  .workspace-badge-list,
  .timeseries-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .workspace-badge-list {
    flex-wrap: wrap;
  }

  .workspace-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .08rem .46rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted) 28%);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
  }

  .workspace-badge--meta {
    border-color: var(--badge-meta-border);
    background: var(--badge-meta-bg);
    color: var(--badge-meta-fg);
  }

  .sites-list-table .sites-col-name {
    width: auto;
  }

  .sites-list-table .sites-col-domain {
    width: clamp(210px, 36%, 340px);
  }

  .sites-list-table th.sites-col-actions,
  .sites-list-table td.sites-col-actions {
    width: 148px;
    text-align: right;
    white-space: nowrap;
  }

  .workspaces-list-table th.workspaces-col-actions,
  .workspaces-list-table td.workspaces-col-actions {
    width: 108px;
    text-align: right;
    white-space: nowrap;
  }

  .site-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: var(--space-1);
    transition: opacity 100ms ease, transform 100ms ease;
  }

  .list-table .site-table-action-btn {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    min-inline-size: 1.9rem;
  }

  .site-domain-empty { color: var(--text-muted); }

  .site-name-cell {
    min-width: 0;
  }

  .site-name-favicon {
    flex: 0 0 var(--site-favicon-size, 20px);
    inline-size: var(--site-favicon-size, 20px);
    block-size: var(--site-favicon-size, 20px);
    border-radius: 4px;
    object-fit: cover;
    background: color-mix(in srgb, var(--panel) 72%, var(--bg) 28%);
  }

  .site-domain-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .sites-list-table .site-domain-pill {
    display: inline-block;
    inline-size: auto;
    max-width: 100%;
    padding: .08rem .32rem;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
    background: transparent;
    color: color-mix(in srgb, var(--text) 68%, var(--text-muted) 32%);
    font-size: .82rem;
    line-height: 1.3;
  }

  .site-hostnames-list {
    display: grid;
    gap: var(--space-2);
  }

  .site-hostname-add-btn {
    justify-self: start;
  }

  .form-actions .btn {
    text-decoration: none;
  }

  .event-props-page {
    display: grid;
    gap: var(--space-5);
  }

  .event-props-overview-card {
    display: grid;
    gap: var(--space-4);
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
      linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, var(--panel-2) 22%), var(--panel-raised));
  }

  .event-props-overview-card .section-head,
  .event-props-range-head {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .event-props-overview-copy,
  .event-props-section-copy {
    margin: 0;
    max-width: 58ch;
  }

  .event-props-badge-list {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .event-props-badge {
    min-width: 8.75rem;
    padding: .65rem .8rem;
    border: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--text) 28%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    display: grid;
    gap: .22rem;
  }

  .event-props-badge--meta {
    background: color-mix(in srgb, var(--panel-2) 82%, var(--bg) 18%);
  }

  .event-props-badge--strict {
    border-color: var(--fc-danger);
    background: var(--fc-danger-bg);
  }

  .event-props-badge__label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .event-props-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .event-props-card {
    display: grid;
    gap: var(--space-4);
  }

  .event-props-form,
  .event-props-policy-form {
    margin: 0;
    display: grid;
    gap: var(--space-4);
  }

  .event-props-policy-form .control {
    min-width: 180px;
  }

  .event-props-form-actions {
    margin-top: var(--space-1);
  }

  .event-props-mode-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .event-props-card > .data-table-wrap,
  .event-props-card > .empty-state,
  .event-props-card > .event-props-mode-list {
    margin-top: var(--space-1);
  }

  .event-props-mode-card {
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text) 24%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
    padding: var(--space-3);
    display: grid;
    gap: .35rem;
  }

  .event-props-mode-card h3 {
    margin: 0;
    font-size: .95rem;
  }

  .path-rules-notice-card {
    border-color: color-mix(in srgb, #d97706 44%, var(--border) 56%);
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, #f59e0b 18%, var(--panel) 82%),
        color-mix(in srgb, #facc15 10%, var(--panel-raised) 90%)
      );
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fef3c7 55%, transparent),
      0 1px 0 rgba(15, 23, 42, 0.04);
  }

  .path-rules-notice-card h3 {
    color: color-mix(in srgb, #a16207 58%, var(--text) 42%);
  }

  .path-rules-notice-card .section-meta {
    color: color-mix(in srgb, #92400e 22%, var(--text-muted) 78%);
  }

  .path-rules-option,
  .path-rules-custom-path__option {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
  }

  .path-rules-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
  }

  .path-rules-custom-path__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: var(--space-2);
    align-items: start;
  }

  .path-rules-option__checkbox {
    margin-top: .15rem;
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: color-mix(in srgb, #d97706 60%, var(--primary) 40%);
    flex: 0 0 auto;
  }

  .path-rules-custom-path__label {
    display: grid;
    gap: .15rem;
    cursor: pointer;
  }

  .path-rules-option strong,
  .path-rules-option small,
  .path-rules-custom-path__label strong,
  .path-rules-custom-path__label small {
    display: block;
  }

  .path-rules-custom-path__panel {
    grid-column: 2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    padding-top: 0;
    transition:
      max-height .2s cubic-bezier(.2, .8, .2, 1),
      opacity .16s ease,
      transform .2s cubic-bezier(.2, .8, .2, 1),
      padding-top .2s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .2s;
  }

  .path-rules-custom-path__toggle:checked ~ .path-rules-custom-path__panel {
    max-height: 14rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    padding-top: var(--space-2);
    transition:
      max-height .22s cubic-bezier(.2, .8, .2, 1),
      opacity .18s ease,
      transform .22s cubic-bezier(.2, .8, .2, 1),
      padding-top .22s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear 0s;
  }

  .path-rules-custom-path__panel .field {
    margin: 0;
  }

  .path-rule-form:has([data-path-rule-form-target="pattern"]:placeholder-shown) .btn-primary {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: saturate(.72);
  }

  .path-rule-preview-modal {
    display: grid;
    gap: var(--space-4);
  }

  .path-rule-preview {
    padding-top: var(--space-1);
  }

  .path-rule-preview__copy,
  .path-rule-preview__impact {
    margin: 0;
  }

  .path-rule-preview__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .path-rule-preview__summary-item,
  .path-rule-preview__guardrails {
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text) 24%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
    padding: var(--space-3);
  }

  .path-rule-preview__summary-item {
    display: grid;
    gap: .35rem;
  }

  .path-rule-preview__summary-item span:last-child,
  .path-rule-preview__summary-item code {
    overflow-wrap: anywhere;
  }

  .path-rule-preview__stats {
    justify-content: flex-start;
  }

  .path-rule-preview__notice {
    margin-top: var(--space-1);
  }

  .path-rule-preview__guardrails {
    display: grid;
    gap: .45rem;
  }

  .path-rule-preview__guardrails p {
    margin: 0;
  }

  .path-rule-preview__save-form {
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .path-rules-custom-path__panel,
    .path-rules-custom-path__toggle:checked ~ .path-rules-custom-path__panel {
      transition: none;
    }
  }

  .event-props-range-nav {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
  }

  .event-props-range-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 2rem;
    padding: .24rem .7rem;
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
    color: color-mix(in srgb, var(--text-muted) 78%, var(--text) 22%);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
  }

  .event-props-range-link:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border) 48%);
    background: color-mix(in srgb, var(--primary) 12%, var(--panel) 88%);
  }

  .event-props-range-link.is-active {
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border-strong) 42%);
    background: color-mix(in srgb, var(--primary) 16%, var(--panel) 84%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
  }

  .event-props-range-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .event-props-cell-end {
    text-align: right;
  }

  .ingest-doctor {
    margin-bottom: var(--space-4);
  }

  .ingest-doctor h3 {
    margin: 0 0 var(--space-2);
  }

  .ingest-doctor-list {
    display: grid;
    gap: var(--space-2);
  }

  .ingest-doctor-card {
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
    padding: var(--space-2) var(--space-3);
    display: grid;
    gap: var(--space-1);
  }

  .ingest-doctor-card--high {
    border-color: color-mix(in srgb, var(--fc-danger) 58%, var(--border) 42%);
  }

  .ingest-doctor-card--medium {
    border-color: color-mix(in srgb, #d97706 45%, var(--border) 55%);
  }

  .ingest-doctor-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .ingest-doctor-title {
    color: var(--text);
  }

  .ingest-doctor-body {
    margin: 0;
    color: var(--text-muted);
  }

  .ingest-doctor-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .08rem .46rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text) 24%);
    background: color-mix(in srgb, var(--panel-2) 84%, var(--panel) 16%);
    color: color-mix(in srgb, var(--text) 72%, var(--text-muted) 28%);
    font-size: .72rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ingest-doctor-severity--high {
    border-color: color-mix(in srgb, var(--fc-danger) 62%, var(--border) 38%);
    background: color-mix(in srgb, var(--fc-danger) 16%, var(--panel) 84%);
    color: color-mix(in srgb, var(--fc-danger) 80%, var(--text) 20%);
  }

  .ingest-doctor-severity--medium {
    border-color: color-mix(in srgb, #d97706 60%, var(--border) 40%);
    background: color-mix(in srgb, #f59e0b 16%, var(--panel) 84%);
    color: color-mix(in srgb, #92400e 74%, var(--text) 26%);
  }

  .ingest-doctor-severity--low {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--border) 44%);
    background: color-mix(in srgb, var(--primary) 14%, var(--panel) 86%);
    color: color-mix(in srgb, var(--primary-ink) 74%, var(--text) 26%);
  }

  .ingest-doctor-action {
    margin-top: var(--space-1);
  }

  .ingest-health-prop-allow-form {
    display: inline-flex;
  }

  .ingest-health-prop-allow-btn {
    padding: .22rem .6rem;
  }

  .verify-doctor-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0;
  }

  .verify-doctor-item {
    margin: 0;
  }

  .destructive-confirmation-form {
    gap: var(--space-3);
  }

  .destructive-confirmation-form--simple {
    gap: var(--space-2);
  }

  .modal-sheet:has(.destructive-confirmation-form--simple) .modal-sheet-body {
    padding: var(--space-3) var(--space-4);
  }

  .destructive-confirmation-copy {
    display: grid;
    gap: var(--space-2);
    max-width: 58ch;
  }

  .destructive-confirmation-body,
  .destructive-confirmation-note,
  .destructive-confirmation-helper,
  .destructive-confirmation-subject,
  .destructive-confirmation-section-label {
    margin: 0;
  }

  .destructive-confirmation-body {
    color: var(--text);
  }

  .destructive-confirmation-note {
    color: var(--text-muted);
  }

  .destructive-confirmation-helper {
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.45;
  }

  .destructive-confirmation-subject {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-muted);
  }

  .destructive-confirmation-subject code {
    font-size: .92rem;
  }

  .destructive-confirmation-section-label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .destructive-confirmation-detail-list {
    margin: 0;
    display: grid;
    gap: var(--space-2);
  }

  .destructive-confirmation-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
  }

  .destructive-confirmation-detail-row dt {
    color: var(--text-muted);
    font-weight: 600;
  }

  .destructive-confirmation-detail-row dd {
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .destructive-confirmation-form .input-error {
    font-weight: 600;
  }

  .delete-confirm-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .92em;
    line-height: 1.25;
    padding: .15rem .45rem;
    border-radius: 8px;
    color: var(--delete-chip-text, var(--text));
    background: var(--delete-chip-bg, var(--fc-bg));
    border: 1px solid var(--delete-chip-border, var(--fc-border));
  }

  .destructive-confirmation-actions {
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-2);
    margin-top: 0;
    border-top: 0;
  }

  .destructive-confirmation-form--simple .destructive-confirmation-actions {
    padding-top: var(--space-1);
  }

  .destructive-confirmation-actions .btn {
    text-decoration: none;
  }

  .frame-stack {
    display: grid;
    gap: var(--stack-gap);
  }

  .frame-stack > * {
    min-width: 0;
  }

  .site-detail-frames {
    gap: var(--stack-gap);
  }

  .frame-loading { color: var(--text-muted); }

  .grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  .card {
    border: 1px solid var(--border);
    background: var(--panel-raised);
    border-radius: 12px;
    padding: var(--space-4);
    min-height: 90px;
    box-shadow: var(--shadow);
  }

  .site-detail-page .card {
    min-height: 0;
    padding: var(--space-4);
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--border-strong) 72%, var(--text) 28%);
    box-shadow: 0 4px 12px rgba(17, 24, 28, 0.06);
  }

  .site-detail-tabs-shell {
    display: grid;
    min-width: 0;
    position: relative;
  }

  .site-detail-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--border-strong) 74%, var(--text) 26%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
  }

  .site-detail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2rem;
    padding: .22rem .75rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--text-muted) 80%, var(--text) 20%);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 140ms ease, background-color 140ms ease;
  }

  .site-detail-tab:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
  }

  .site-detail-tab.is-active {
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 78%, var(--text) 22%);
  }

  .site-detail-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .site-tracking-banner {
    padding: var(--space-2) var(--space-3);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-2) 28%);
  }

  .site-tracking-banner-content {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .site-tracking-banner-title {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .site-tracking-banner-subtitle {
    margin: 0;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--text-3);
  }

  .site-tracker-snippet-wrap {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    border: 1px solid color-mix(in srgb, var(--border-strong) 74%, var(--text) 26%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
    overflow: hidden;
  }

  .site-tracker-snippet-wrap .site-tracker-snippet {
    margin: 0;
    min-width: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-tracker-snippet-wrap .site-tracker-snippet code {
    display: block;
    white-space: nowrap;
  }

  .site-tracking-copy-btn {
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--border-strong) 74%, var(--text) 26%);
    background: var(--fc-addon-btn-bg);
    color: var(--fc-addon-btn-fg);
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }

  .site-tracking-copy-btn:hover {
    background: var(--fc-addon-btn-hover-bg);
  }

  .site-tracking-copy-btn:active {
    background: var(--fc-addon-btn-active-bg);
  }

  .site-tracking-copy-btn.is-copied,
  .site-tracking-copy-btn.is-copied:hover,
  .site-tracking-copy-btn.is-copied:active {
    background: var(--gl-green-800);
    color: #ffffff;
    border-left-color: var(--gl-green-800);
  }

  .site-tracker-card {
    padding: var(--space-3);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 70%, var(--panel-2) 30%);
    box-shadow: 0 1px 4px rgba(17, 24, 28, 0.05);
  }

  .site-tracker-head {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }

  .site-tracker-head h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
  }

  .site-tracker-subtitle {
    margin: 0;
    font-size: .82rem;
    line-height: 1.3;
    color: var(--text-3);
  }

  .site-tracker-card .site-tracker-snippet-wrap {
    margin-top: var(--space-1);
  }

  .site-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }

  .site-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
  }

  .site-key { font-family: var(--font-mono); }

  .section-label {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    color: var(--text);
  }

  .code-snippet {
    margin: 0;
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--text);
    min-width: 100%;
    width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-tracker-snippet {
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--border) 76%, var(--text) 24%);
    background: color-mix(in srgb, var(--panel-2) 92%, var(--bg) 8%);
    font-size: .82rem;
    line-height: 1.3;
  }

  .code-snippet code {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-range-dropdown {
    position: relative;
    display: inline-flex;
  }

  .site-range-dropdown__button {
    min-block-size: 2.35rem;
    min-inline-size: clamp(9.5rem, 26vw, 12.5rem);
    justify-content: space-between;
    gap: var(--space-2);
  }

  .site-range-dropdown__menu {
    right: 0;
    min-inline-size: min(14rem, 86vw);
  }

  .site-range-dropdown__item.is-active {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--text);
    font-weight: 600;
  }

  .site-range-dropdown__item-button {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
  }

  .site-range-dropdown__separator {
    margin: var(--space-1) .45rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
  }

  .site-range-custom-modal {
    inline-size: min(32rem, 96vw);
    padding: 0;
    border: 0;
  }

  .site-range-custom-form {
    margin: 0;
    display: grid;
    gap: var(--space-3);
  }

  .site-range-custom-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .site-range-custom-field {
    gap: var(--space-1);
  }

  .site-range-custom-label {
    font-size: .76rem;
    line-height: 1.2;
    letter-spacing: .03em;
    color: var(--text-muted);
  }

  .site-range-custom-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
  }

  .section-head > * {
    min-width: 0;
  }

  .section-head h2 { margin: 0; }

  .section-meta { color: var(--text-3); }

  .data-card {
    display: grid;
    gap: var(--space-3);
  }

  .timeseries-card {
    gap: var(--space-2);
  }

  .timeseries-head {
    align-items: center;
    margin-bottom: 0;
    gap: var(--space-2);
  }

  .timeseries-head-title {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .timeseries-head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .timeseries-change-radar,
  .timeseries-quick-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .timeseries-chart {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
  }

  .timeseries-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-3);
    font-size: .78rem;
    line-height: 1.25;
  }

  .timeseries-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .timeseries-legend-swatch--pv {
    opacity: .85;
  }

  .timeseries-legend-swatch--v {
    opacity: .4;
  }

  .timeseries-chart-mount {
    min-block-size: 220px;
  }

  .timeseries-chart-mount--empty {
    display: flex;
    align-items: center;
    color: var(--text-3);
    font-size: .9rem;
  }

  .timeseries-chart-mount .uplot {
    max-width: 100%;
    color: var(--text-3);
  }

  .timeseries-chart-mount .u-axis {
    font-family: var(--font-mono);
    font-size: .72rem;
  }

  .timeseries-chart-mount .u-cursor-y {
    display: none !important;
  }

  .timeseries-chart-tooltip {
    position: absolute;
    z-index: 10;
    display: none;
    pointer-events: none;
    gap: 2px;
    min-width: 140px;
    max-width: calc(100% - var(--space-2));
    padding: var(--space-2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(22, 28, 32, .9);
    color: #fff;
    font-size: .74rem;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .timeseries-chart-tooltip__time {
    opacity: .78;
    margin-bottom: 2px;
  }

  .timeseries-chart-tooltip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .timeseries-chart-tooltip__label {
    opacity: .9;
  }

  .timeseries-chart-tooltip__value {
    margin: 0;
    font-weight: 650;
  }

  .timeseries-chart-tooltip--annotation {
    min-width: 180px;
    max-width: min(280px, calc(100% - var(--space-2)));
    white-space: normal;
    gap: 4px;
  }

  .timeseries-chart-tooltip__annotation-label {
    font-weight: 650;
    line-height: 1.35;
    word-break: break-word;
  }

  .annotation-time-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .annotation-now-btn {
    min-height: 2rem;
    padding: .25rem .6rem;
    font-size: .8rem;
  }

  .worldmap {
    position: relative;
    inline-size: 100%;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-2) 88%, var(--bg) 12%);
    overflow: hidden;
  }

  .worldmap svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: min(46vh, 360px);
  }

  .worldmap svg path {
    fill: color-mix(in srgb, var(--primary) 54%, var(--text) 46%);
    stroke: color-mix(in srgb, var(--border) 68%, var(--text) 32%);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
    transition: opacity 120ms ease;
  }

  .worldmap__tip {
    position: absolute;
    z-index: 10;
    display: block;
    pointer-events: none;
    max-inline-size: calc(100% - var(--space-2));
    padding: var(--space-2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(22, 28, 32, .9);
    color: #fff;
    font-size: .74rem;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .worldmap__tip[hidden] {
    display: none;
  }

  .data-section-head {
    align-items: center;
    margin-bottom: 0;
    gap: var(--space-2);
  }

  .breakdown-head {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .breakdown-head-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
  }

  .landing-pages-table tbody tr[data-row-href] {
    cursor: pointer;
  }

  .landing-pages-table tbody tr.is-active td:first-child {
    border-left: 2px solid color-mix(in srgb, var(--primary-ink) 50%, transparent);
  }

  .landing-workspace-card {
    margin-top: var(--space-2);
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
  }

  .utm-explorer-entry-card,
  .utm-explorer-card {
    display: grid;
    gap: var(--space-4);
  }

  .utm-explorer-card {
    gap: var(--space-5);
  }

  .utm-explorer-entry-head,
  .utm-explorer-head {
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  }

  .utm-explorer-head {
    gap: var(--space-4);
    padding-bottom: var(--space-2);
  }

  .utm-explorer-entry-copy,
  .utm-explorer-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .utm-explorer-copy {
    gap: .42rem;
  }

  .utm-explorer-entry-copy h2,
  .utm-explorer-copy h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .utm-explorer-copy h2 {
    font-size: 1.16rem;
    font-weight: 720;
    line-height: 1.28;
    letter-spacing: -.015em;
  }

  .utm-explorer-entry-description,
  .utm-explorer-description {
    margin: 0;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.45;
    max-inline-size: 62ch;
  }

  .utm-explorer-description {
    color: color-mix(in srgb, var(--text-muted) 84%, var(--text) 16%);
    font-size: .88rem;
    line-height: 1.52;
    max-inline-size: 54ch;
  }

  .utm-explorer-entry-actions {
    margin-left: auto;
    flex-wrap: wrap;
  }

  .utm-explorer-scope-switch {
    margin-left: auto;
    flex-wrap: wrap;
  }

  .utm-explorer-scope-switch {
    align-self: center;
    border-color: color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--panel-2) 82%, var(--bg) 18%);
  }

  .utm-explorer-scope-switch .breakdown-sort-link {
    padding: .18rem .56rem;
    font-size: .68rem;
    letter-spacing: .05em;
  }

  .utm-explorer-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    padding: .72rem .9rem;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-2) 92%, var(--bg) 8%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  .utm-explorer-options-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .utm-explorer-options-group--toggle {
    min-width: 0;
    flex: 1 1 auto;
  }

  .utm-explorer-filter-form {
    margin-left: auto;
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
  }

  .utm-explorer-filter-field {
    display: grid;
    gap: .3rem;
    min-inline-size: clamp(13rem, 28vw, 17rem);
    max-inline-size: 100%;
  }

  .utm-explorer-filter-label {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .utm-explorer-filter-form .select {
    min-inline-size: 13rem;
    max-inline-size: 100%;
  }

  .utm-explorer-tree {
    display: grid;
    gap: var(--space-3);
  }

  .utm-explorer-none-toggle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .utm-explorer-none-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: .58rem;
    width: fit-content;
    padding: .26rem .5rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 98%, var(--bg) 2%);
    color: var(--text);
    font-size: .73rem;
    font-weight: 580;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  }

  .utm-explorer-none-toggle-label::before {
    content: "";
    inline-size: .84rem;
    block-size: .84rem;
    border-radius: .35rem;
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
    box-shadow: inset 0 0 0 2px transparent;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .utm-explorer-none-toggle:checked + .utm-explorer-none-toggle-label::before {
    border-color: color-mix(in srgb, var(--primary) 68%, var(--text) 32%);
    background: color-mix(in srgb, var(--primary) 82%, var(--panel) 18%);
    box-shadow: inset 0 0 0 2px var(--panel);
  }

  .utm-explorer-none-toggle:focus-visible + .utm-explorer-none-toggle-label {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: .5rem;
  }

  .utm-explorer-card:has(.utm-explorer-none-toggle:not(:checked)) .utm-explorer-tree .utm-explorer-node--none-root {
    display: none;
  }

  .utm-explorer-node,
  .utm-explorer-leaf {
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%);
    box-shadow: 0 1px 0 rgba(29, 37, 42, .035);
    overflow: hidden;
  }

  .utm-explorer-level-0 {
    border-color: color-mix(in srgb, var(--border) 66%, var(--primary) 34%);
    background: color-mix(in srgb, var(--panel) 90%, var(--primary) 10%);
    box-shadow: 0 1px 0 rgba(29, 37, 42, .04), 0 10px 22px rgba(29, 37, 42, .025);
  }

  .utm-explorer-level-1 {
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 97%, var(--panel-2) 3%);
  }

  .utm-explorer-level-2,
  .utm-explorer-level-3,
  .utm-explorer-level-4 {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .utm-explorer-node > summary {
    list-style: none;
  }

  .utm-explorer-node > summary::-webkit-details-marker {
    display: none;
  }

  .utm-explorer-row {
    display: grid;
    gap: .5rem;
    padding: .8rem 1rem;
  }

  .utm-explorer-row {
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
  }

  .utm-explorer-node > summary:hover,
  .utm-explorer-row--leaf:hover {
    background: color-mix(in srgb, var(--panel) 95%, var(--primary) 5%);
  }

  .utm-explorer-node > summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
  }

  .utm-explorer-node[open] > summary {
    background: color-mix(in srgb, var(--panel-raised) 92%, var(--primary) 8%);
  }

  .utm-explorer-level-0[open] > summary {
    background: color-mix(in srgb, var(--panel-raised) 84%, var(--primary) 16%);
  }

  .utm-explorer-level-1[open] > summary {
    background: color-mix(in srgb, var(--panel-raised) 96%, var(--primary) 4%);
  }

  .utm-explorer-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    min-width: 0;
  }

  .utm-explorer-row-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    min-width: 0;
  }

  .utm-explorer-chevron {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    display: inline-grid;
    place-items: center;
    color: var(--text-3);
    flex: none;
  }

  .utm-explorer-chevron-icon {
    inline-size: .92rem;
    block-size: .92rem;
    transition: transform 160ms ease, color 140ms ease;
  }

  .utm-explorer-node[open] > summary .utm-explorer-chevron-icon {
    transform: rotate(90deg);
  }

  .utm-explorer-node > summary:hover .utm-explorer-chevron,
  .utm-explorer-node[open] > summary .utm-explorer-chevron {
    color: var(--text);
  }

  .utm-explorer-chevron--placeholder {
    visibility: hidden;
  }

  .utm-explorer-node-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 640;
    letter-spacing: -.01em;
    line-height: 1.26;
  }

  .utm-explorer-node-value--path {
    font-family: var(--font-mono);
    font-size: .92em;
  }

  .utm-explorer-dimension {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .utm-explorer-level-0 .utm-explorer-dimension {
    color: color-mix(in srgb, var(--text-3) 86%, var(--text) 14%);
  }

  .utm-explorer-level-1 .utm-explorer-dimension {
    font-size: .66rem;
    color: color-mix(in srgb, var(--text-3) 90%, transparent);
  }

  .utm-explorer-level-2 .utm-explorer-dimension,
  .utm-explorer-level-3 .utm-explorer-dimension,
  .utm-explorer-level-4 .utm-explorer-dimension {
    font-size: .61rem;
    letter-spacing: .07em;
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
  }

  .utm-explorer-row-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem 1rem;
    flex-wrap: wrap;
    padding-inline-start: calc(1.15rem + var(--space-3));
    min-width: 0;
  }

  .utm-explorer-row-meta-main {
    display: flex;
    align-items: center;
    gap: .42rem .78rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  .utm-explorer-child-count {
    color: var(--text-3);
    font-size: .73rem;
    white-space: nowrap;
  }

  .utm-explorer-level-2 .utm-explorer-child-count,
  .utm-explorer-level-3 .utm-explorer-child-count {
    font-size: .68rem;
    color: color-mix(in srgb, var(--text-3) 88%, transparent);
  }

  .utm-explorer-metrics-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.2rem, auto);
    gap: .8rem;
    align-items: start;
    justify-content: end;
    min-width: 0;
  }

  .utm-explorer-row-metrics {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  .utm-explorer-row-metrics--mobile {
    display: none;
  }

  .utm-explorer-metric {
    display: grid;
    gap: .12rem;
    align-content: start;
    justify-items: center;
    min-inline-size: 0;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.12;
    white-space: nowrap;
  }

  .utm-explorer-metric-label {
    color: var(--text-3);
    font-size: .67rem;
    letter-spacing: .01em;
  }

  .utm-explorer-metric-value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    font-size: .99rem;
  }

  .utm-explorer-metric--primary .utm-explorer-metric-value {
    font-size: 1.03rem;
  }

  .utm-explorer-level-0 .utm-explorer-node-value {
    font-size: 1.07rem;
    font-weight: 700;
  }

  .utm-explorer-level-1 .utm-explorer-node-value {
    font-size: .97rem;
    font-weight: 650;
  }

  .utm-explorer-level-2 .utm-explorer-node-value {
    font-size: .91rem;
    font-weight: 600;
  }

  .utm-explorer-level-3 .utm-explorer-node-value,
  .utm-explorer-level-4 .utm-explorer-node-value {
    font-size: .87rem;
    font-weight: 560;
  }

  .utm-explorer-level-0 .utm-explorer-row {
    padding: .98rem 1.15rem;
    gap: .58rem;
  }

  .utm-explorer-level-1 .utm-explorer-row {
    padding: .78rem .98rem;
  }

  .utm-explorer-level-2 .utm-explorer-row,
  .utm-explorer-level-3 .utm-explorer-row,
  .utm-explorer-level-4 .utm-explorer-row {
    padding: .5rem .82rem;
    gap: .34rem;
  }

  .utm-explorer-level-0 .utm-explorer-metrics-rail {
    gap: 1rem;
  }

  .utm-explorer-level-0 .utm-explorer-metric--primary .utm-explorer-metric-value {
    font-size: 1.14rem;
  }

  .utm-explorer-level-1 .utm-explorer-metric--primary .utm-explorer-metric-value {
    font-size: 1.02rem;
  }

  .utm-explorer-children {
    display: grid;
    gap: var(--space-2);
    margin: 0 var(--space-1) var(--space-2) calc(var(--space-2) + .8rem);
    padding: var(--space-2) 0 0 var(--space-3);
    border-left: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
    min-width: 0;
  }

  .utm-explorer-children > .utm-explorer-node,
  .utm-explorer-children > .utm-explorer-leaf {
    box-shadow: none;
  }

  .utm-explorer-node--medium > .utm-explorer-children {
    gap: .35rem;
    margin-left: calc(var(--space-2) + .45rem);
    padding-top: .25rem;
    padding-left: var(--space-2);
    border-left-color: color-mix(in srgb, var(--border) 18%, transparent);
  }

  .utm-explorer-node--content > summary {
    border-radius: 12px;
  }

  .utm-explorer-node--content > summary:hover {
    background: color-mix(in srgb, var(--panel) 97%, var(--primary) 3%);
  }

  .utm-explorer-node--content[open] > summary {
    background: transparent;
  }

  .utm-explorer-node--content > .utm-explorer-children {
    gap: 0;
    margin: .08rem 0 0 calc(var(--space-2) + .2rem);
    padding: 0 0 0 calc(var(--space-2) + .15rem);
    border-left: 0;
  }

  .utm-explorer-leaf--landing_page {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .utm-explorer-node--content > .utm-explorer-children > .utm-explorer-leaf--landing_page + .utm-explorer-leaf--landing_page {
    border-top: 1px solid color-mix(in srgb, var(--border) 26%, transparent);
  }

  .utm-explorer-leaf--landing_page > .utm-explorer-row {
    padding: .5rem 0.82rem 0.5rem 0;
    gap: .3rem;
  }

  .utm-explorer-leaf--landing_page > .utm-explorer-row:hover {
    background: color-mix(in srgb, var(--panel) 98%, var(--primary) 2%);
  }

  .utm-explorer-leaf--landing_page .utm-explorer-row-top {
    gap: var(--space-2);
  }

  .utm-explorer-leaf--landing_page .utm-explorer-row-main {
    gap: .55rem;
  }

  .utm-explorer-leaf--landing_page .utm-explorer-row-meta {
    padding-inline-start: calc(1rem + .55rem);
    gap: .35rem;
  }

  .utm-explorer-leaf--landing_page .utm-explorer-node-value--path {
    font-size: .88rem;
    color: color-mix(in srgb, var(--text) 96%, var(--text-muted) 4%);
  }

  .utm-explorer-leaf--landing_page .utm-explorer-metrics-rail {
    gap: .5rem;
  }

  .utm-explorer-leaf--landing_page .utm-explorer-metric {
    font-size: .68rem;
  }

  .utm-explorer-leaf--landing_page .utm-explorer-metric-value {
    font-size: .95rem;
  }

  .utm-explorer-context-card {
    display: grid;
    gap: var(--space-3);
    padding: clamp(.95rem, 1.4vw, 1.15rem);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  .utm-explorer-context-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .utm-explorer-context-copy {
    display: grid;
    gap: .35rem;
    min-width: 0;
  }

  .utm-explorer-context-kicker {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .utm-explorer-context-path {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utm-explorer-context-metrics {
    margin-left: auto;
  }

  .utm-explorer-metric--context .utm-explorer-metric-value {
    font-size: 1.02rem;
  }

  .utm-explorer-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
  }

  .utm-explorer-context-item,
  .utm-explorer-context-note {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .utm-explorer-context-item strong {
    color: var(--text);
  }

  @media (max-width: 899px) {
    .utm-explorer-head {
      flex-direction: column;
      gap: var(--space-3);
    }

    .utm-explorer-scope-switch,
    .utm-explorer-filter-form {
      margin-left: 0;
    }

    .utm-explorer-options {
      align-items: stretch;
      padding-inline: .8rem;
    }

    .utm-explorer-filter-form {
      width: 100%;
      justify-content: stretch;
    }

    .utm-explorer-filter-field,
    .utm-explorer-filter-form .select {
      flex: 1 1 14rem;
    }

    .utm-explorer-context-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .utm-explorer-row {
      padding-inline: var(--space-2);
    }

    .utm-explorer-row-top {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: var(--space-2);
    }

    .utm-explorer-row-main {
      gap: var(--space-2);
    }

    .utm-explorer-metrics-rail {
      display: flex;
      gap: .5rem;
      align-items: flex-start;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .utm-explorer-metrics-rail .utm-explorer-metric--secondary {
      display: none;
    }

    .utm-explorer-row-meta {
      padding-inline-start: calc(.95rem + var(--space-2));
      flex-direction: column;
      align-items: stretch;
      gap: .45rem;
    }

    .utm-explorer-row-meta-main {
      justify-content: space-between;
    }

    .utm-explorer-row-metrics--mobile {
      display: flex;
      gap: .6rem;
    }

    .utm-explorer-row-metrics--mobile .utm-explorer-metric {
      justify-items: start;
    }

    .utm-explorer-children {
      margin-right: 0;
      margin-left: calc(var(--space-1) + .7rem);
      padding-left: var(--space-2);
      border-left-color: color-mix(in srgb, var(--border) 18%, transparent);
    }

    .utm-explorer-node--medium > .utm-explorer-children {
      margin-left: calc(var(--space-1) + .45rem);
      padding-left: .75rem;
    }

    .utm-explorer-node--content > .utm-explorer-children {
      margin-left: calc(var(--space-1) + .2rem);
      padding-left: .6rem;
    }

    .utm-explorer-leaf--landing_page > .utm-explorer-row {
      padding-block: .5rem;
    }

    .utm-explorer-context-head {
      flex-direction: column;
    }

    .utm-explorer-context-metrics {
      margin-left: 0;
      justify-content: flex-start;
    }
  }

  .landing-workspace-head {
    align-items: flex-start;
    gap: var(--space-3);
  }

  .landing-workspace-title {
    min-width: 0;
  }

  .landing-workspace-title h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
  }

  .landing-workspace-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .landing-workspace-tabs {
    flex-wrap: wrap;
  }

  .landing-workspace-actions {
    margin-left: auto;
  }

  .site-actions-dropdown__item-disabled {
    opacity: .7;
    cursor: default;
  }

  .landing-story-card {
    border: 1px solid color-mix(in srgb, var(--border) 72%, var(--text) 28%);
    border-radius: 10px;
    padding: var(--space-3);
    background: color-mix(in srgb, var(--panel-2) 88%, var(--bg) 12%);
    display: grid;
    gap: var(--space-2);
  }

  .landing-story-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .landing-story-grid {
    display: grid;
    gap: var(--space-1);
  }

  .landing-story-item,
  .landing-story-sentence,
  .landing-story-annotation {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.4;
  }

  .landing-story-item strong {
    color: var(--text);
  }

  .landing-story-sentence {
    color: color-mix(in srgb, var(--text) 86%, var(--text-muted) 14%);
  }

  .landing-workspace-goal-form {
    width: fit-content;
    max-width: 100%;
    align-items: center;
    flex-wrap: wrap;
  }

  .landing-utm-conversions-goal-form {
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .landing-workspace-goal-form .select,
  .landing-utm-conversions-goal-form .select {
    min-inline-size: 12rem;
    max-inline-size: 100%;
  }

  .landing-overview-panel {
    display: grid;
    gap: var(--space-3);
    border: 1px dashed color-mix(in srgb, var(--border) 72%, var(--text) 28%);
    border-radius: 10px;
    padding: var(--space-3);
    background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
  }

  .landing-overview-description {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.4;
  }

  .landing-overview-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-overview-item {
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    border-radius: 8px;
    padding: var(--space-2);
    background: var(--panel-raised);
  }

  .landing-overview-item h4 {
    margin: 0 0 var(--space-1);
    font-size: .76rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .landing-overview-item p {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .landing-overview-actions {
    flex-wrap: wrap;
  }

  .goal-detail-link {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--text-muted) 65%, transparent);
    text-underline-offset: 2px;
  }

  .goal-detail-link:hover {
    text-decoration-color: currentColor;
  }

  .goal-detail {
    border-top: 1px solid var(--border);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    display: grid;
    gap: var(--space-3);
  }

  .goal-detail-head {
    margin-bottom: 0;
  }

  .goal-detail-head h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
  }

  .goal-detail-summary {
    gap: .35rem;
  }

  .goal-detail-summary strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .goal-detail-breakdowns {
    display: grid;
    gap: var(--space-3);
  }

  .goal-detail-breakdown h4 {
    margin: 0 0 var(--space-2);
  }

  .breakdown-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-2) 86%, var(--bg) 14%);
  }

  .breakdown-sort-link {
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease;
  }

  .breakdown-sort-link:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 84%, var(--primary) 16%);
  }

  .breakdown-sort-link.is-active {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 23%, var(--panel));
  }

  .breakdown-summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .breakdown-list {
    margin-top: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
    overflow: hidden;
  }

  .breakdown-list__row {
    display: grid;
    gap: .55rem;
    padding: var(--space-3);
    transition: background 120ms ease;
  }

  .breakdown-list__row + .breakdown-list__row {
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }

  .breakdown-list__row:hover,
  .breakdown-list__row:focus-within {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  }

  .breakdown-list__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
  }

  .breakdown-list__key {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: .95rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text) 92%, var(--text-muted) 8%);
  }

  .breakdown-list__primary {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
    white-space: nowrap;
  }

  .breakdown-list__primary-value {
    display: block;
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .breakdown-list__primary-label {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .breakdown-list__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .32rem;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
    font-size: .88rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }

  .breakdown-list__meta-item--primary,
  .breakdown-list__meta-sep--after-primary {
    display: none;
  }

  .breakdown-list__meta-item--share {
    color: color-mix(in srgb, var(--text) 76%, var(--text-muted) 24%);
    font-weight: 600;
  }

  .breakdown-list__meta-sep {
    color: color-mix(in srgb, var(--text-muted) 65%, transparent);
  }

  .breakdown-list__bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 82%, transparent);
  }

  .breakdown-list__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 72%, var(--primary-ink) 28%), color-mix(in srgb, var(--text) 24%, var(--primary) 76%));
  }

  .data-section-meta {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .empty-state {
    margin: 0;
    color: var(--text-muted);
  }

  .empty-state-placeholder {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed color-mix(in srgb, var(--border) 70%, var(--text) 30%);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-2) 90%, var(--bg) 10%);
    font-size: .9rem;
  }

  .empty-state-icon {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid color-mix(in srgb, var(--border) 65%, var(--text) 35%);
    border-radius: 4px;
    display: inline-grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: .62rem;
    line-height: 1;
    color: color-mix(in srgb, var(--text-muted) 82%, var(--text) 18%);
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

  .data-table-fixed {
    table-layout: fixed;
  }

  .share-links-table {
    width: 100%;
    table-layout: fixed;
  }

  .share-links-table th:nth-child(1),
  .share-links-table td:nth-child(1) {
    width: 22%;
  }

  .share-links-table th:nth-child(2),
  .share-links-table td:nth-child(2) {
    width: 38%;
  }

  .share-links-table th:nth-child(3),
  .share-links-table td:nth-child(3) {
    width: 22%;
  }

  .share-links-table th:nth-child(4),
  .share-links-table td:nth-child(4) {
    width: 18%;
  }

  .link-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .link-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .link-cell .btn {
    flex: 0 0 auto;
  }

  .data-table thead th {
    text-align: left;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--panel-2) 80%, var(--primary) 20%);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .data-table tbody tr:last-child td { border-bottom: 0; }

  .data-table tbody tr:nth-child(2n) {
    background: color-mix(in srgb, var(--panel) 86%, var(--primary) 14%);
  }

  .data-table-no-stripes tbody tr:nth-child(2n) {
    background: transparent;
  }

  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 20%, var(--panel));
  }

  .data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .data-table .cell-content-end {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
  }

  .share-link-status-cell {
    display: grid;
    gap: 4px;
    align-content: start;
  }

  .share-link-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: .1rem .48rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
    color: color-mix(in srgb, var(--text) 80%, var(--text-muted) 20%);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .share-link-status-badge--active {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--border) 38%);
    background: color-mix(in srgb, var(--primary) 26%, var(--panel) 74%);
    color: color-mix(in srgb, var(--primary-ink) 76%, var(--text) 24%);
  }

  .share-link-status-badge--expired {
    border-color: color-mix(in srgb, #d97706 58%, var(--border) 42%);
    background: color-mix(in srgb, #f59e0b 18%, var(--panel) 82%);
    color: color-mix(in srgb, #92400e 72%, var(--text) 28%);
  }

  .share-link-status-badge--revoked {
    border-color: color-mix(in srgb, var(--fc-danger) 58%, var(--border) 42%);
    background: color-mix(in srgb, var(--fc-danger) 14%, var(--panel) 86%);
    color: color-mix(in srgb, var(--fc-danger) 78%, var(--text) 22%);
  }

  .share-link-status-meta {
    color: color-mix(in srgb, var(--text-muted) 92%, var(--text) 8%);
    font-size: .78rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .high-cardinality-indicator {
    flex: 0 0 auto;
    opacity: .85;
  }

  .event-prop-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .event-prop-warning-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .08rem .46rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
    background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
    color: color-mix(in srgb, var(--text) 70%, var(--text-muted) 30%);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }

  .event-prop-warning-badge--info {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border) 50%);
    background: color-mix(in srgb, var(--primary) 15%, var(--panel) 85%);
    color: color-mix(in srgb, var(--primary-ink) 70%, var(--text) 30%);
  }

  .event-prop-warning-badge--warning {
    border-color: color-mix(in srgb, #d97706 58%, var(--border) 42%);
    background: color-mix(in srgb, #f59e0b 16%, var(--panel) 84%);
    color: color-mix(in srgb, #92400e 74%, var(--text) 26%);
  }

  .event-prop-warning-badge--high {
    border-color: color-mix(in srgb, var(--fc-danger) 60%, var(--border) 40%);
    background: color-mix(in srgb, var(--fc-danger) 15%, var(--panel) 85%);
    color: color-mix(in srgb, var(--fc-danger) 76%, var(--text) 24%);
  }

  .event-prop-warning-none {
    color: var(--text-muted);
  }

  .event-props-warning-footnote {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
  }

  .share-col {
    min-width: 150px;
  }

  .share-col-heading {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
  }

  .share-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 132px;
  }

  .share-bar {
    width: 90px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 80%, transparent);
  }

  .share-bar-fill {
    display: block;
    height: 100%;
    background: color-mix(in srgb, var(--text) 28%, var(--primary) 72%);
  }

  .analysis-label {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 1ch;
    justify-items: center;
    align-items: center;
  }

  .analysis-label svg {
    width: 32px;
  }

  /* Font Awesome glyphs are inline SVGs without classes; force theme-aware fills. */
  .analysis-label svg:not([class]) {
    color: var(--text);
  }

  .analysis-label svg:not([class]) path,
  .analysis-label svg:not([class]) circle,
  .analysis-label svg:not([class]) rect,
  .analysis-label svg:not([class]) polygon,
  .analysis-label svg:not([class]) ellipse {
    fill: currentColor;
  }

  .analysis-label svg.browser-globe {
    width: 24px;
  }

  .data-footnote {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: .84rem;
  }

  .list-table {
    border: 0;
    border-radius: 0;
  }

  .list-table thead th {
    padding: var(--space-2) var(--space-3);
    font-size: .8rem;
    letter-spacing: .065em;
    color: color-mix(in srgb, var(--text-muted) 92%, var(--text) 8%);
    background: color-mix(in srgb, var(--bg) 92%, var(--panel) 8%);
  }

  .list-table thead th:first-child {
    padding-left: var(--space-5);
  }

  .list-table thead th:last-child {
    padding-right: var(--space-5);
  }

  .list-table tbody tr:nth-child(2n) {
    background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
  }

  .list-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom-color: color-mix(in srgb, var(--border) 74%, transparent);
  }

  .list-table tbody td:last-child {
    padding-right: var(--space-5);
  }

  .list-table tbody tr[data-row-href] {
    cursor: pointer;
  }

  .list-table tbody td[data-row-link-stop] {
    cursor: default;
  }

  .sites-list-table tbody td.sites-col-domain {
    color: color-mix(in srgb, var(--text-muted) 86%, var(--text) 14%);
  }

  .workspaces-list-table tbody td.workspaces-col-kind {
    color: color-mix(in srgb, var(--text-muted) 86%, var(--text) 14%);
  }

  .list-table tbody td:first-child {
    border-left: 2px solid transparent;
    padding-left: calc(var(--space-5) - 2px);
    transition: border-color 100ms ease, color 100ms ease, font-weight 100ms ease;
  }

  .list-table tbody tr:hover,
  .list-table tbody tr:focus-within {
    background: color-mix(in srgb, var(--primary) 18%, var(--panel));
  }

  .list-table tbody tr:hover td:first-child,
  .list-table tbody tr:focus-within td:first-child {
    border-left-color: color-mix(in srgb, var(--primary-ink) 50%, transparent);
  }

  .workspaces-list-table tbody tr:hover td.workspaces-col-name,
  .workspaces-list-table tbody tr:focus-within td.workspaces-col-name {
    color: var(--text);
    font-weight: 700;
  }

  .list-table tbody tr:hover .link-strong,
  .list-table tbody tr:focus-within .link-strong {
    color: var(--text);
    font-weight: 700;
  }

  .sites-list-table tbody tr:hover .site-domain-pill,
  .sites-list-table tbody tr:focus-within .site-domain-pill {
    border-color: color-mix(in srgb, var(--border) 58%, var(--text) 42%);
  }

  .path-code {
    inline-size: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  @media (max-width: 575px) {
    .path-rule-preview__summary {
      grid-template-columns: 1fr;
    }

    .path-rules-table {
      border: 0;
      border-radius: 0;
      padding: 0;
    }

    .path-rules-table thead {
      display: none;
    }

    .path-rules-table,
    .path-rules-table tbody,
    .path-rules-table tr,
    .path-rules-table td {
      display: block;
      width: 100%;
    }

    .path-rules-table {
      table-layout: auto;
    }

    .path-rules-table tbody {
      display: grid;
      gap: var(--space-3);
    }

    .path-rules-table tbody tr {
      padding: var(--space-3);
      border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 96%, var(--bg) 4%);
      box-shadow: 0 2px 8px rgba(17, 24, 28, 0.05);
    }

    .path-rules-table tbody td {
      display: grid;
      grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
      gap: var(--space-2);
      align-items: start;
      padding: 0;
      border: 0;
    }

    .path-rules-table tbody td + td {
      margin-top: var(--space-2);
    }

    .path-rules-table tbody td::before {
      content: attr(data-label);
      color: var(--text-muted);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .05em;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .path-rules-table .event-props-cell-end {
      text-align: left;
    }

    .path-rules-table .event-props-cell-end form {
      margin: 0;
    }

    .path-rules-table .path-code {
      overflow: visible;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  .metrics-grid {
    display: grid;
    gap: var(--space-3);
  }

  .metric-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  .metrics-card h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: var(--space-2);
  }

  .metric {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-3);
    background: var(--panel-2);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-1);
  }

  .metric strong:not(.metric-label-with-help),
  .metric-label {
    display: block;
    margin: 0;
    font-size: .74rem;
    letter-spacing: .03em;
    color: var(--text-muted);
  }

  .metric strong.metric-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.65ch;
    width: fit-content;
    margin: 0;
    font-size: .74rem;
    letter-spacing: .03em;
    color: var(--text-muted);
  }

  .metric-note-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    --metric-help-tooltip-x: -50%;
    --metric-help-tooltip-y-hidden: -4px;
    --metric-help-tooltip-scale-hidden: .94;
    --metric-help-tooltip-origin: top center;
  }

  .metric-note-help--edge-right {
    --metric-help-tooltip-x: -100%;
    --metric-help-tooltip-origin: top right;
  }

  .metric-note-help__trigger {
    font: inherit;
    border: 0;
    margin: 0;
    padding: 0;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
  }

  .metric-note-help__trigger:hover,
  .metric-note-help__trigger:focus {
    outline: none;
    color: color-mix(in srgb, var(--text-muted) 42%, var(--text) 58%);
  }

  .metric-note-help__trigger:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  .metric-note-help__tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(var(--metric-help-tooltip-x)) translateY(var(--metric-help-tooltip-y-hidden)) scale(var(--metric-help-tooltip-scale-hidden));
    transform-origin: var(--metric-help-tooltip-origin);
    min-width: 190px;
    max-width: min(280px, calc(100vw - 48px));
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 75%, var(--text) 25%);
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--text) 18%, transparent);
    color: color-mix(in srgb, var(--text) 82%, var(--text-muted) 18%);
    font-size: .78rem;
    line-height: 1.35;
    letter-spacing: normal;
    font-weight: 400;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 15;
    transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
  }

  .metric-note-help__tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, var(--text) 25%);
    border-left: 1px solid color-mix(in srgb, var(--border) 75%, var(--text) 25%);
  }

  .metric-note-help--edge-right .metric-note-help__tooltip {
    left: 100%;
  }

  .metric-note-help--edge-right .metric-note-help__tooltip::before {
    left: calc(100% - 12px);
    transform: translateX(-50%) rotate(45deg);
  }

  .metric-note-help:hover .metric-note-help__tooltip,
  .metric-note-help:focus-within .metric-note-help__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(var(--metric-help-tooltip-x)) translateY(0) scale(1);
  }

  @media (hover: none) and (pointer: coarse) {
    .metric-note-help {
      --metric-help-tooltip-x: 0;
      --metric-help-tooltip-y-hidden: -2px;
      --metric-help-tooltip-scale-hidden: .97;
      --metric-help-tooltip-origin: top left;
    }

    .metric-note-help__trigger {
      inline-size: 18px;
      block-size: 18px;
    }

    .metric-note-help__tooltip {
      left: 0;
      min-width: 170px;
      max-width: min(240px, calc(100vw - 32px));
    }

    .metric-note-help__tooltip::before {
      left: 12px;
      transform: rotate(45deg);
    }

    .metric-note-help--edge-right .metric-note-help__tooltip {
      left: auto;
      right: 0;
    }

    .metric-note-help--edge-right .metric-note-help__tooltip::before {
      left: auto;
      right: 8px;
    }

    .metric-note-help:not(:focus-within):hover .metric-note-help__tooltip {
      opacity: 0;
      visibility: hidden;
      transform: translateX(var(--metric-help-tooltip-x)) translateY(var(--metric-help-tooltip-y-hidden)) scale(var(--metric-help-tooltip-scale-hidden));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .metric-note-help__tooltip {
      transition: none;
    }
  }

  .metric-value {
    display: block;
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .metric-change {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--space-1) - 1px);
    width: fit-content;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text-muted) 90%, var(--text) 10%);
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
  }

  .metric-change--positive {
    color: color-mix(in srgb, #1f7a4d 62%, var(--text-muted) 38%);
  }

  .metric-change--negative {
    color: color-mix(in srgb, #a9343d 60%, var(--text-muted) 40%);
  }

  .metric-change--neutral {
    color: color-mix(in srgb, var(--text-muted) 94%, var(--text) 6%);
  }

  .metric-change--new {
    color: color-mix(in srgb, var(--primary-ink) 56%, var(--text-muted) 44%);
  }

}

/* Reusable form primitives and composable input groups. */
@layer forms {
  .form {
    font-family: var(--fc-font);
    display: grid;
    gap: var(--space-4);
    max-width: 640px;
    margin-bottom: var(--space-3);
  }

  .field {
    display: grid;
    gap: var(--space-1);
  }

  .share-link-validity-form .share-link-custom-date-field {
    display: none;
  }

  .share-link-validity-form:has(#share-link-validity option:checked[value="custom"]) .share-link-custom-date-field {
    display: grid;
  }

  .label {
    font-weight: 600;
    line-height: 1.2;
  }

  .help {
    color: var(--fc-muted);
    font-size: .9rem;
    line-height: 1.35;
  }

  .global-error,
  .input-error {
    margin: 0;
    color: var(--fc-danger);
    font-size: .9rem;
    line-height: 1.35;
  }

  .global-error {
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--fc-danger) 45%, transparent);
    border-radius: var(--fc-radius);
    background: var(--fc-danger-bg);
  }

  .control {
    width: 100%;
    font: inherit;
    color: var(--fc-fg);
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    padding: var(--fc-pad-y) var(--fc-pad-x);
    box-shadow: var(--fc-shadow);
    line-height: 1.25;
  }

  textarea.control {
    min-height: 120px;
    resize: vertical;
  }

  .control::placeholder {
    color: color-mix(in srgb, var(--fc-muted) 75%, transparent);
  }

  .control:not(:disabled):hover {
    border-color: var(--fc-border-hover);
  }

  .control:focus {
    outline: none;
    border-color: var(--fc-ring-border);
    box-shadow: 0 0 0 4px var(--fc-ring), var(--fc-shadow);
  }

  .control:focus:not(:focus-visible) {
    border-color: var(--fc-border);
    box-shadow: var(--fc-shadow);
  }

  .control:focus-visible {
    border-color: var(--fc-ring-border);
    box-shadow: 0 0 0 4px var(--fc-ring), var(--fc-shadow);
  }

  .control:disabled {
    opacity: .7;
    cursor: not-allowed;
  }

  form:not([novalidate]) .control:invalid,
  .control[aria-invalid="true"] {
    border-color: var(--fc-danger);
    background:
      linear-gradient(0deg, var(--fc-danger-bg), var(--fc-danger-bg)),
      var(--fc-bg);
  }

  .destructive-confirmation-form .control[aria-invalid="true"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc-danger) 24%, transparent), var(--fc-shadow);
  }

  .select {
    position: relative;
    display: grid;
  }

  .select > select.control {
    appearance: none;
    padding-right: calc(var(--fc-pad-x) + 28px);
  }

  .select::after {
    content: "";
    position: absolute;
    right: var(--fc-pad-x);
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    color: var(--fc-muted);
    pointer-events: none;
  }

  .check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.25;
  }

  .check input {
    inline-size: 1.15em;
    block-size: 1.15em;
  }

  .btn {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    padding: var(--space-2) var(--space-3);
    background: var(--panel);
    color: var(--fc-fg);
    text-decoration: none;
    box-shadow: var(--fc-shadow);
    cursor: pointer;
  }

  #modal form .btn.btn-primary {
    font-weight: 600;
  }

  .btn svg {
    inline-size: 1em;
    block-size: 1em;
    flex: 0 0 auto;
  }

  .btn.modal-sheet-close {
    inline-size: 36px;
    block-size: 36px;
    min-inline-size: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    line-height: 0;
    border-color: color-mix(in srgb, var(--fc-border) 90%, transparent);
    color: color-mix(in srgb, var(--fc-muted) 90%, var(--fc-fg) 10%);
    background: color-mix(in srgb, var(--panel-raised) 58%, transparent);
    box-shadow: none;
  }

  .btn.modal-sheet-close svg {
    display: block;
    inline-size: 16px;
    block-size: 16px;
  }

  .btn.site-hostname-add-btn {
    margin-top: var(--space-4);
  }

  .modal-sheet .btn.modal-sheet-close:hover {
    background: color-mix(in srgb, var(--fc-fg) 8%, var(--panel-raised) 92%);
    border-color: color-mix(in srgb, var(--fc-fg) 28%, var(--fc-border) 72%);
    color: var(--fc-fg);
  }

  .modal-sheet[data-modal-tone="danger"] .btn.modal-sheet-close:hover {
    background: color-mix(in srgb, var(--danger-600, var(--fc-danger)) 10%, var(--panel-raised) 90%);
    border-color: color-mix(in srgb, var(--danger-600, var(--fc-danger)) 42%, var(--fc-border) 58%);
    color: var(--danger-700, var(--fc-danger));
  }

  .btn:hover { border-color: var(--fc-border-hover); }

  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--fc-ring), var(--fc-shadow);
  }

  .btn:focus:not(:focus-visible) { box-shadow: var(--fc-shadow); }
  .btn:focus-visible { box-shadow: 0 0 0 4px var(--fc-ring), var(--fc-shadow); }

  .site-table-action-btn {
    inline-size: 2rem;
    block-size: 2rem;
    min-inline-size: 2rem;
    padding: 0;
    gap: 0;
  }

  .btn-primary {
    background: var(--fc-primary);
    color: var(--fc-primary-fg);
    border-color: color-mix(in srgb, var(--fc-primary) 70%, transparent);
  }

  .btn-primary:hover { filter: brightness(.98); }

  .btn-danger {
    background: var(--danger-600, var(--fc-danger));
    color: #fff;
    border-color: var(--danger-700, var(--fc-danger));
  }

  .btn-danger:hover { filter: brightness(.95); }

  .site-detail-btn {
    color: var(--link);
  }

  .site-edit-btn {
    color: var(--fc-fg);
  }

  .workspace-invites-btn {
    color: var(--fc-fg);
  }

  .site-delete-btn {
    color: var(--danger-700, var(--fc-danger));
    border-color: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 35%, var(--fc-border));
    background: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 10%, var(--fc-bg));
  }

  .site-delete-btn:hover {
    border-color: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 55%, var(--fc-border));
    background: color-mix(in srgb, var(--danger-700, var(--fc-danger)) 14%, var(--fc-bg));
  }

  .row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  .input-group {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: stretch;
    background: var(--fc-bg);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    box-shadow: var(--fc-shadow);
    overflow: hidden;
  }

  .input-group:focus-within {
    border-color: var(--fc-ring-border);
    box-shadow: 0 0 0 4px var(--fc-ring), var(--fc-shadow);
  }

  .input-group > .control {
    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }

  .input-group > .control:focus { box-shadow: none; }

  .addon {
    display: grid;
    place-items: center;
    padding-inline: var(--fc-addon-pad-x);
    color: var(--fc-addon-fg);
    background: var(--fc-addon-bg);
    user-select: none;
    white-space: nowrap;
  }

  .addon-left { border-right: 1px solid var(--fc-border); }
  .addon-right { border-left: 1px solid var(--fc-border); }

  button.addon {
    border: 0;
    cursor: pointer;
    font: inherit;
  }

  button.addon:disabled {
    cursor: not-allowed;
    opacity: .7;
  }

  .addon svg {
    width: 1.1em;
    height: 1.1em;
    display: block;
  }

  .addon i {
    font-size: 1.1em;
    line-height: 1;
  }

  .addon-btn {
    border: 0;
    background: var(--fc-addon-btn-bg);
    color: var(--fc-addon-btn-fg);
    font: inherit;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding-inline: var(--fc-addon-pad-x);
    min-inline-size: calc(var(--fc-addon-pad-x) * 2 + 1.6em);
  }

  .addon-btn:hover { background: var(--fc-addon-btn-hover-bg); }
  .addon-btn:active { background: var(--fc-addon-btn-active-bg); }
  .addon-btn:focus { outline: none; }

  .addon-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--fc-ring-border);
  }

  .addon-btn:disabled {
    cursor: not-allowed;
    opacity: .7;
  }

  .addon-left.addon-btn { border-right: 1px solid var(--fc-border); }
  .addon-right.addon-btn { border-left: 1px solid var(--fc-border); }

  .password-toggle-btn.addon-btn,
  .password-toggle-btn.addon-right,
  .password-toggle-btn.addon-right.addon-btn {
    background: transparent;
    border-left: 0;
    color: var(--fc-muted);
    transition: color 120ms ease;
  }

  .password-toggle-btn.addon-btn:hover,
  .password-toggle-btn.addon-btn:active {
    background: transparent;
  }

  .password-toggle-btn.addon-btn:hover {
    color: var(--fc-fg);
  }

  .password-toggle-btn.addon-btn:active {
    color: var(--link);
  }

  .password-toggle-btn [data-password-toggle-icon="hide"] { display: none; }
  .password-toggle-btn[aria-pressed="true"] [data-password-toggle-icon="show"] { display: none; }
  .password-toggle-btn[aria-pressed="true"] [data-password-toggle-icon="hide"] { display: block; }

  .addon-btn-primary {
    background: color-mix(in srgb, var(--fc-primary) 22%, var(--fc-addon-btn-bg));
    color: var(--fc-fg);
  }

  .addon-btn-primary:hover {
    background: color-mix(in srgb, var(--fc-primary) 30%, var(--fc-addon-btn-bg));
  }

  .addon-btn-primary:active {
    background: color-mix(in srgb, var(--fc-primary) 38%, var(--fc-addon-btn-bg));
  }

  .site-tracking-copy-btn.addon-btn {
    border-left: 1px solid color-mix(in srgb, var(--border-strong) 74%, var(--text) 26%);
    background: var(--fc-addon-btn-bg);
    color: var(--fc-addon-btn-fg);
    font-weight: 600;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }

  .site-tracking-copy-btn.addon-btn:hover {
    background: var(--fc-addon-btn-hover-bg);
  }

  .site-tracking-copy-btn.addon-btn:active {
    background: var(--fc-addon-btn-active-bg);
  }

  .site-tracking-copy-btn.addon-btn.is-copied,
  .site-tracking-copy-btn.addon-btn.is-copied:hover,
  .site-tracking-copy-btn.addon-btn.is-copied:active {
    background: var(--gl-green-800);
    color: #ffffff;
    border-left-color: var(--gl-green-800);
  }
}

/* Breakpoint-specific adjustments. */
@layer responsive {
  @media (min-width: 576px) {
    .wrapper { max-width: 540px; }
  }

  @media (max-width: 575px) {
    .account-settings-item {
      grid-template-columns: 1fr;
      align-items: flex-start;
      gap: var(--space-2);
    }

    .account-settings-action {
      width: 100%;
      justify-content: center;
    }

    .account-security-action,
    .account-privacy-action {
      width: 100%;
      justify-content: center;
    }

    .account-session-item {
      grid-template-columns: 1fr;
      align-items: flex-start;
      gap: var(--space-1);
    }

    .account-session-item dd {
      text-align: left;
    }

    .page-head-actions {
      width: 100%;
      margin-left: 0;
    }

    .site-detail-page .sites-page-head {
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
    }

    .site-detail-page #site-detail-title {
      inline-size: 100%;
      flex: 0 0 100%;
      justify-content: flex-start;
      gap: .65rem;
    }

    .site-detail-page #site-detail-title .page-title {
      text-align: left;
    }

    .site-detail-toolbar {
      align-items: stretch;
      justify-content: flex-start;
    }

    .site-detail-toolbar-actions {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .site-detail-toolbar-actions > * {
      flex: 1 1 100%;
    }

    .site-detail-toolbar-actions .site-actions-dropdown,
    .site-detail-toolbar-actions .site-range-dropdown {
      inline-size: 100%;
    }

    .site-detail-toolbar-actions .site-actions-dropdown__button,
    .site-detail-toolbar-actions .site-range-dropdown__button {
      width: 100%;
      justify-content: center;
    }

    .site-detail-range-summary {
      width: 100%;
      justify-content: center;
    }

    .site-detail-page .site-actions-note {
      text-align: left;
    }

    .site-detail-tabs-shell {
      width: 100%;
    }

    .site-detail-tabs-shell::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 1.5rem;
      border-radius: 0 12px 12px 0;
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--panel-2) 0%, transparent) 0%,
        color-mix(in srgb, var(--panel-2) 88%, var(--bg) 12%) 100%
      );
      pointer-events: none;
    }

    .site-detail-tabs {
      width: 100%;
      max-width: 100%;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scroll-padding-inline: 3px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      border-radius: 12px;
    }

    .site-detail-tab {
      flex: 0 0 auto;
      border-radius: 9px;
      scroll-snap-align: start;
    }

    .event-props-grid,
    .event-props-mode-list {
      grid-template-columns: 1fr;
    }

    .event-props-overview-card .section-head,
    .event-props-range-head {
      flex-direction: column;
      align-items: flex-start;
    }

    .event-props-badge-list {
      width: 100%;
      justify-content: flex-start;
    }

    .event-props-badge {
      min-width: 0;
      flex: 1 1 100%;
    }

    .event-props-range-nav {
      width: 100%;
    }

    .landing-workspace-head {
      align-items: stretch;
    }

    .landing-workspace-controls {
      margin-left: 0;
      width: 100%;
      justify-content: space-between;
    }

    .landing-workspace-tabs {
      width: 100%;
      justify-content: center;
    }

    .landing-workspace-actions {
      margin-left: 0;
      width: 100%;
    }

    .landing-workspace-actions .site-actions-dropdown__button {
      width: 100%;
      justify-content: center;
    }

    .landing-overview-grid {
      grid-template-columns: 1fr;
    }

    .site-tracking-banner {
      align-items: flex-start;
      flex-direction: column;
      padding: var(--space-3);
    }

    .site-tracker-snippet-wrap {
      width: 100%;
    }

    .site-range-dropdown__button {
      min-inline-size: 0;
    }

    .site-range-custom-fields {
      grid-template-columns: 1fr;
    }

    .timeseries-head-actions {
      width: 100%;
      margin-left: 0;
      justify-content: stretch;
    }

    .timeseries-head-actions > * {
      flex: 1 1 0;
    }

    .worldmap__tip {
      max-inline-size: calc(100% - var(--space-3));
      white-space: normal;
    }
  }

  @media (max-width: 899px), (hover: none), (pointer: coarse) {
    .site-actions-dropdown__submenu {
      position: static;
      margin-top: var(--space-1);
      margin-left: 0;
      min-inline-size: 0;
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  @media (max-width: 430px) {
    .auth-main {
      padding: var(--space-3);
    }

    .auth-links {
      flex-direction: column;
      gap: var(--space-1);
    }

    .auth-links-divider {
      display: none;
    }

    .auth-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .auth-actions .btn,
    .auth-signout-form {
      width: 100%;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .list-table .site-table-actions {
      opacity: 0;
      pointer-events: none;
      transform: translateY(2px);
    }

    .list-table tbody tr:hover .site-table-actions,
    .list-table tbody tr:focus-within .site-table-actions {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
  }

  @media (max-width: 640px) {
    .breakdown-list__row {
      padding: var(--space-2) var(--space-3);
    }

    .breakdown-list__top {
      grid-template-columns: 1fr;
      gap: .35rem;
    }

    .breakdown-list__key {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
    }

    .breakdown-list__primary {
      display: none;
    }

    .breakdown-list__meta {
      gap: .3rem;
      font-size: .84rem;
    }

    .breakdown-list__meta-item--primary,
    .breakdown-list__meta-sep--after-primary {
      display: inline-flex;
    }
  }

  @media (min-width: 640px) {
    .row { grid-template-columns: 1fr 1fr; }

    .metric-row-primary {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric-row-secondary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .wrapper { max-width: 720px; }
  }

  @media (max-width: 899px) {
    .brand {
      font-size: 1.3rem;
      gap: var(--space-1);
    }

    .brand-logo {
      width: 40px;
      height: 40px;
    }

    .topbar.shared {
      grid-template-columns: initial;
      padding: 0.5rem;
    }

    .topbar.shared .brand {
      justify-self: center;
    }
  }

  @media (min-width: 900px) {
    .app {
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: var(--topbar-h) 1fr;
      grid-template-areas:
        "topbar topbar"
        "sidebar main";
    }

    .topbar { grid-template-columns: auto 1fr auto; }
    .topbar.shared { padding: 0.5rem;}
    .topbar-spacer { display: block; }
    .nav-mobile-only { display: none; }

    .sidebar {
      grid-area: sidebar;
      position: static;
      transform: none;
      transition: none;
      z-index: auto;
      box-shadow: none;
    }

    .nav-btn { display: none; }
    .backdrop { display: none; }
    .top-actions { display: inline-flex; }
    .toplink { display: inline-flex; }

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

    .help-layout {
      grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .help-nav-card {
      position: sticky;
      top: var(--space-4);
    }

    .account-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  @media (min-width: 992px) {
    .wrapper { max-width: 980px; }
  }

  @media (min-width: 1200px) {
    .wrapper { max-width: 1120px; }
    .grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 1400px) {
    .wrapper { max-width: 1240px; }
  }
}

/* Accessibility: respect reduced-motion preference. */
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .sidebar,
    .backdrop {
      transition: none !important;
    }

    .site-actions-dropdown__chevron {
      transition: none !important;
    }

    .site-actions-dropdown__menu {
      animation: none !important;
    }

    .site-actions-dropdown__submenu {
      animation: none !important;
    }
  }
}

/*
 * GreenLight Dashboard — Visual Polish Layer
 * ============================================
 * Drop-in CSS file to load AFTER dashboard.css.
 * No HTML/template changes required.
 *
 * What this changes:
 *   1. Metric cards — two-tier layout with tighter spacing
 *   2. Section cards — bordered containers for each data section
 *   3. Breakdown bars — thinner, less visually dominant
 *   4. Two-column grid for small breakdowns (devices, browsers, OS)
 *   5. Section headers — refined typography
 *   6. Data table refinements — subtler stripes, tighter rows
 *   7. Overall spacing and rhythm
 */

@layer components {

  /* -------------------------------------------------------
   * 1. METRICS — Two-tier layout
   * ------------------------------------------------------- */

  /* Primary metric row: 4 across on desktop, tighter cards */
  .metric-row-primary .metric {
    min-height: 0;
    padding: var(--space-3);
    gap: 2px;
    border-color: color-mix(in srgb, var(--border) 74%, var(--primary) 26%);
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 8%, var(--panel-2)),
        var(--panel-2)
      );
  }

  /* Secondary metric row: compact, no min-height */
  .metric-row-secondary .metric {
    min-height: 0;
    padding: var(--space-2) var(--space-3);
    gap: 2px;
    background: var(--panel-2);
  }

  .metric-row-secondary .metric-value {
    font-size: 1.15rem;
    font-weight: 650;
  }

  /* Tighten change indicator */
  .metric-change {
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
  }

  .metric-change--positive {
    background: color-mix(in srgb, #1f7a4d 10%, transparent);
  }

  .metric-change--negative {
    background: color-mix(in srgb, #a9343d 8%, transparent);
  }


  /* -------------------------------------------------------
   * 2. SECTION CARDS — wrap each data section
   * ------------------------------------------------------- */

  /* Each turbo-frame in the frame-stack gets a card treatment */
  .site-detail-frames > turbo-frame:not(:empty) {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-raised);
    overflow: hidden;
  }

  /* The .card inside each frame no longer needs its own border */
  .site-detail-frames > turbo-frame > .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Section headers inside cards: refined spacing */
  .site-detail-frames .section-head {
    padding: var(--space-3) var(--space-4) 0;
  }

  .site-detail-frames .data-section-head {
    padding: var(--space-3) var(--space-4) 0;
  }

  /* Section title typography */
  .site-detail-frames .section-head h2,
  .site-detail-frames .data-section-head h2 {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .site-detail-frames .section-meta,
  .site-detail-frames .data-section-meta {
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .06em;
    color: var(--text-3);
  }

  /* Metrics frame doesn't need the card wrapper since metrics are cards themselves */
  .site-detail-frames > turbo-frame#metrics {
    border: 0;
    background: transparent;
  }

  /* Timeseries frame */
  .site-detail-frames > turbo-frame#timeseries {
    padding: var(--space-2);
  }


  /* -------------------------------------------------------
   * 3. BREAKDOWN BARS — thinner, subtler
   * ------------------------------------------------------- */

  .breakdown-list__bar {
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
  }

  .breakdown-list__bar-fill {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--primary) 82%, var(--primary-ink) 18%),
      color-mix(in srgb, var(--primary) 65%, var(--text) 35%)
    );
  }

  /* Data table share bars — also thinner */
  .share-bar {
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
  }

  .share-bar-fill {
    background: color-mix(in srgb, var(--primary) 78%, var(--text) 22%);
  }


  /* -------------------------------------------------------
   * 4. TWO-COLUMN GRID — small breakdowns side by side
   * ------------------------------------------------------- */

  /* Devices, Browsers, OS frames: grid them together */
  @media (min-width: 640px) {
    .site-detail-frames {
      display: grid;
      grid-template-columns: 1fr;
    }

    /* Create a sub-grid area for the three small breakdown frames */
    .site-detail-frames > turbo-frame#devices,
    .site-detail-frames > turbo-frame#browsers,
    .site-detail-frames > turbo-frame#oses {
      /* These will be placed by the 3-col sub-grid below */
    }
  }

  /*
   * Since CSS Grid can't reorder turbo-frame siblings into a sub-grid
   * without a wrapper, we use a different approach: make the whole
   * frame-stack a multi-column grid and span full-width sections.
   */
  @media (min-width: 768px) {
    .site-detail-frames {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Full-width sections span both columns */
    .site-detail-frames > turbo-frame#metrics,
    .site-detail-frames > turbo-frame#timeseries,
    .site-detail-frames > turbo-frame#landing_pages,
    .site-detail-frames > turbo-frame#top_pages,
    .site-detail-frames > turbo-frame#top_referrers,
    .site-detail-frames > turbo-frame#countries,
    .site-detail-frames > turbo-frame#goals,
    .site-detail-frames > turbo-frame#event_props_panel,
    .site-detail-frames > turbo-frame#site_annotations {
      grid-column: 1 / -1;
    }

    /* Small breakdowns stay single-column (auto-placed side by side) */
    .site-detail-frames > turbo-frame#devices,
    .site-detail-frames > turbo-frame#browsers {
      grid-column: auto;
    }

    /* OS gets full width if it's the odd one out, or auto if we have an even count */
    .site-detail-frames > turbo-frame#oses {
      grid-column: auto;
    }
  }

  @media (min-width: 1200px) {
    .site-detail-frames {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-detail-frames > turbo-frame#metrics,
    .site-detail-frames > turbo-frame#timeseries,
    .site-detail-frames > turbo-frame#landing_pages,
    .site-detail-frames > turbo-frame#top_pages,
    .site-detail-frames > turbo-frame#top_referrers,
    .site-detail-frames > turbo-frame#countries,
    .site-detail-frames > turbo-frame#goals,
    .site-detail-frames > turbo-frame#event_props_panel,
    .site-detail-frames > turbo-frame#site_annotations {
      grid-column: 1 / -1;
    }

    .site-detail-frames > turbo-frame#devices,
    .site-detail-frames > turbo-frame#browsers,
    .site-detail-frames > turbo-frame#oses {
      grid-column: auto;
    }
  }


  /* -------------------------------------------------------
   * 5. DATA TABLES — subtler stripes, tighter spacing
   * ------------------------------------------------------- */

  .data-table thead th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-3);
    background: color-mix(in srgb, var(--panel-2) 92%, var(--primary) 8%);
    border-bottom: 1px solid var(--border);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
  }

  /* Subtler alternating rows */
  .data-table tbody tr:nth-child(2n) {
    background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%);
  }

  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 14%, var(--panel));
  }


  /* -------------------------------------------------------
   * 6. BREAKDOWN LIST ROWS — tighter, more refined
   * ------------------------------------------------------- */

  .breakdown-list {
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--border) 72%, var(--text) 16%);
  }

  .breakdown-list__row {
    gap: .4rem;
    padding: var(--space-2) var(--space-3);
  }

  .breakdown-list__key {
    font-size: .9rem;
    line-height: 1.35;
  }

  .breakdown-list__primary-value {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  }

  .breakdown-list__meta {
    font-size: .82rem;
    gap: .28rem;
  }


  /* -------------------------------------------------------
   * 7. WORLDMAP — cleaner container
   * ------------------------------------------------------- */

  .worldmap {
    border-color: color-mix(in srgb, var(--border) 68%, transparent);
    background: color-mix(in srgb, var(--panel-2) 94%, var(--bg) 6%);
  }

  .worldmap svg path {
    fill: color-mix(in srgb, var(--primary) 48%, var(--text) 52%);
    stroke: color-mix(in srgb, var(--border) 78%, var(--text) 22%);
    stroke-width: 0.4;
  }


  /* -------------------------------------------------------
   * 8. TIMESERIES CHART — breathing room
   * ------------------------------------------------------- */

  .timeseries-card {
    gap: var(--space-3);
  }

  .timeseries-head {
    gap: var(--space-3);
  }

  .timeseries-chart-mount {
    min-block-size: 240px;
  }


  /* -------------------------------------------------------
   * 9. FRAME SPACING — tighter overall rhythm
   * ------------------------------------------------------- */

  .site-detail-frames {
    gap: var(--space-3);
  }


  /* -------------------------------------------------------
   * 10. TOOLBAR & TABS — polish
   * ------------------------------------------------------- */

  .site-detail-tabs {
    border-color: color-mix(in srgb, var(--border) 68%, var(--text) 18%);
    background: color-mix(in srgb, var(--panel-2) 94%, var(--bg) 6%);
  }

  .site-detail-tab {
    font-size: .82rem;
    font-weight: 650;
    transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  }

  .site-detail-tab.is-active {
    background: var(--panel-raised);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--border) 68%, var(--text) 18%),
      0 1px 3px rgba(0, 0, 0, .06);
  }

  .site-detail-range-summary {
    font-size: .74rem;
    border-radius: 8px;
  }


  /* -------------------------------------------------------
   * 11. ANNOTATION SECTION — compact
   * ------------------------------------------------------- */

  .site-detail-frames > turbo-frame#site_annotations {
    /* Lighter treatment since annotations is secondary */
    border-style: dashed;
    border-color: color-mix(in srgb, var(--border) 64%, transparent);
    background: color-mix(in srgb, var(--panel-raised) 92%, var(--panel-2) 8%);
  }


  /* -------------------------------------------------------
   * 12. GOALS SECTION — subtle distinction
   * ------------------------------------------------------- */

  .site-detail-frames > turbo-frame#goals .data-table thead th {
    background: color-mix(in srgb, var(--panel-2) 86%, var(--primary) 14%);
  }
}


/* -------------------------------------------------------
 * DARK MODE ADJUSTMENTS
 * ------------------------------------------------------- */
@layer components {
  [data-theme="dark"] .metric-row-primary .metric {
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 6%, var(--panel-2)),
        var(--panel-2)
      );
  }

  [data-theme="dark"] .metric-change--positive {
    background: color-mix(in srgb, #1f7a4d 14%, transparent);
  }

  [data-theme="dark"] .metric-change--negative {
    background: color-mix(in srgb, #a9343d 12%, transparent);
  }

  [data-theme="dark"] .site-detail-frames > turbo-frame:not(:empty) {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--panel);
  }

  [data-theme="dark"] .site-detail-tab.is-active {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent),
      0 1px 3px rgba(0, 0, 0, .2);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .metric-row-primary .metric {
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--primary) 6%, var(--panel-2)),
          var(--panel-2)
        );
    }

    :root:not([data-theme="light"]) .metric-change--positive {
      background: color-mix(in srgb, #1f7a4d 14%, transparent);
    }

    :root:not([data-theme="light"]) .metric-change--negative {
      background: color-mix(in srgb, #a9343d 12%, transparent);
    }

    :root:not([data-theme="light"]) .site-detail-frames > turbo-frame:not(:empty) {
      border-color: color-mix(in srgb, var(--border) 80%, transparent);
      background: var(--panel);
    }

    :root:not([data-theme="light"]) .site-detail-tab.is-active {
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent),
        0 1px 3px rgba(0, 0, 0, .2);
    }
  }
}