/*
 * Shared web theme
 *
 * These values mirror the neutral React Navigation theme in ghd-expo:
 * white / near-black canvases, quiet grouped surfaces, system typography,
 * restrained separators, and grayscale interaction states.
 */
html:root {
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-bg-grouped: #f5f5f6;
  --theme-surface: #ffffff;
  --theme-surface-2: #f4f4f5;
  --theme-surface-3: #e9e9eb;
  --theme-text: #1c1c1e;
  --theme-muted: #55555a;
  --theme-quiet: #6e6e73;
  --theme-border: #d1d1d6;
  --theme-border-strong: #b8b8bd;
  --theme-accent: #5c5c61;
  --theme-accent-strong: #2c2c2e;
  --theme-accent-soft: rgb(60 60 64 / 8%);
  --theme-accent-softer: rgb(60 60 64 / 4%);
  --theme-link: #555559;
  --theme-primary-bg: #2c2c2e;
  --theme-primary-fg: #ffffff;
  --theme-danger: #ff3b30;
  --theme-danger-soft: rgb(255 59 48 / 10%);
  --theme-warning: #c76a00;
  --theme-warning-soft: rgb(255 149 0 / 11%);
  --theme-violet: #77777c;
  --theme-success: #248a3d;
  --theme-success-soft: rgb(52 199 89 / 11%);
  --theme-shadow: 0 18px 55px rgb(28 28 30 / 10%);
  --theme-header: rgb(255 255 255 / 88%);
  --chart-1: #555559;
  --chart-2: #737378;
  --chart-3: #919196;
  --chart-4: #adadb1;
  --chart-5: #c2c2c5;
  --chart-6: #d3d3d6;
  --chart-grid: #d9d9dc;
  --chart-tick: #747479;
  --chart-cursor: #a0a0a4;
  --chart-dot-border: #ffffff;

  /* Aliases used by the home, share, and admin surfaces. */
  --bg: var(--theme-bg);
  --bg-deep: var(--theme-bg-grouped);
  --canvas: var(--theme-bg);
  --canvas-deep: var(--theme-bg-grouped);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface-2);
  --surface-3: var(--theme-surface-3);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-2);
  --panel-raised: var(--theme-surface-2);
  --ink: var(--theme-text);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --muted-2: var(--theme-quiet);
  --quiet: var(--theme-quiet);
  --line: var(--theme-border);
  --line-soft: rgb(60 60 67 / 18%);
  --line-bright: var(--theme-border-strong);
  --line-strong: var(--theme-border-strong);
  --mint: var(--theme-accent);
  --mint-bright: var(--theme-accent);
  --mint-strong: var(--theme-accent);
  --mint-dark: var(--theme-accent-soft);
  --mint-soft: var(--theme-accent-soft);
  --acid: var(--theme-accent);
  --acid-soft: var(--theme-accent-soft);
  --accent: var(--theme-accent);
  --accent-ink: #ffffff;
  --cyan: var(--theme-accent);
  --amber: var(--theme-warning);
  --orange: var(--theme-warning);
  --violet: var(--theme-violet);
  --red: var(--theme-danger);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0b0b0c;
  --theme-bg-grouped: #111113;
  --theme-surface: #18181a;
  --theme-surface-2: #212124;
  --theme-surface-3: #2b2b2e;
  --theme-text: #f2f2f4;
  --theme-muted: #b0b0b5;
  --theme-quiet: #929297;
  --theme-border: #343437;
  --theme-border-strong: #505054;
  --theme-accent: #c2c2c6;
  --theme-accent-strong: #dedee1;
  --theme-accent-soft: rgb(220 220 224 / 11%);
  --theme-accent-softer: rgb(220 220 224 / 6%);
  --theme-link: #c1c1c5;
  --theme-primary-bg: #f2f2f4;
  --theme-primary-fg: #1c1c1e;
  --theme-danger: #ff453a;
  --theme-danger-soft: rgb(255 69 58 / 13%);
  --theme-warning: #ff9f0a;
  --theme-warning-soft: rgb(255 159 10 / 14%);
  --theme-violet: #9b9ba0;
  --theme-success: #30d158;
  --theme-success-soft: rgb(48 209 88 / 14%);
  --theme-shadow: 0 24px 70px rgb(0 0 0 / 32%);
  --theme-header: rgb(11 11 12 / 90%);
  --chart-1: #dedee2;
  --chart-2: #bebec3;
  --chart-3: #9d9da2;
  --chart-4: #7f7f84;
  --chart-5: #68686d;
  --chart-6: #55555a;
  --chart-grid: #353539;
  --chart-tick: #94949a;
  --chart-cursor: #66666b;
  --chart-dot-border: #18181a;
  --line-soft: rgb(255 255 255 / 12%);
}

html,
body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

body {
  background: var(--theme-bg);
}

::selection {
  background: var(--theme-accent-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border-strong);
  background-clip: padding-box;
}

:focus-visible {
  outline-color: var(--theme-link);
}

/* Shared light/dark switch. */
.theme-toggle {
  display: inline-flex;
  min-width: 78px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: var(--theme-surface-2);
  color: var(--theme-muted);
  font: 650 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  box-shadow: none;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.theme-toggle:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.theme-toggle-track {
  position: relative;
  width: 28px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--theme-border-strong);
  transition: background 160ms ease;
}

.theme-toggle-track::after {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
  content: "";
  transition: transform 160ms ease;
}

html[data-theme="dark"] .theme-toggle-track {
  background: var(--theme-quiet);
}

html[data-theme="dark"] .theme-toggle-track::after {
  transform: translateX(10px);
}

.theme-toggle--floating {
  position: fixed;
  z-index: 210;
  top: 18px;
  right: 18px;
}

/* Public home. */
.site-header.is-scrolled,
.workspace-header {
  border-color: var(--theme-border);
  background: var(--theme-header);
  box-shadow: 0 12px 36px rgb(28 28 30 / 10%);
}

.site-nav a,
.hero-lede,
.hero-trust p,
.compatibility-strip > p,
.compatibility-strip span,
.stage-copy > p,
.mini-feature p,
.data-copy > p,
.data-stats span,
.atlas-bottom,
.diagnostic-demo > header small,
.health-rows span,
.diagnostic-trace header,
.diagnostic-trace > div,
.diagnostic-points p,
.controller-card > div > span,
.controller-card p,
.compatibility-note,
.safety-copy,
.footer-top > p,
.footer-top > div a,
.footer-bottom {
  color: var(--theme-muted);
}

.site-nav a:hover,
.hero h1::first-line,
.hero-trust strong,
.stage-copy li,
.data-stats strong,
.atlas-bottom strong,
.health-rows strong,
.controller-monogram,
.store-button:not(.store-button-primary, .store-button-light) {
  color: var(--theme-text);
}

.eyebrow,
.eyebrow-label,
.feature-kicker,
.diagnostic-points article > span {
  color: var(--theme-accent-strong);
}

.feature-number,
.tune-ui > header > div span,
.tune-row em,
.profile-row span,
.trip-chip span,
.diagnostic-trace time,
.scroll-cue {
  color: var(--theme-quiet);
}

.compatibility-strip > p,
.controller-card > div > span,
.safety-copy,
.footer-bottom {
  font-size: 10px;
}

.safety-copy {
  font-size: 12px;
}

.data-stats span,
.footer-top > p {
  font-weight: 500;
}

.site-nav .nav-cta,
.saved-state,
.profile-row span.is-active,
.healthy {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.menu-button,
.store-button:not(.store-button-primary, .store-button-light),
.store-button-light,
.stage-card,
.mini-feature,
.controller-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.compatibility-strip i,
.route-art i,
.route-art i:nth-child(2),
.health-rows span i,
.diagnostic-trace > div i {
  background: var(--theme-accent);
  box-shadow: none;
}

.store-button-light {
  color: var(--theme-text);
}

.feature-number,
.mini-gauges span,
.health-rows > div,
.diagnostic-trace,
.controller-monogram {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.diagnostic-bolt,
.healthy {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.data-panel,
.diagnostic-demo,
.controllers-section,
.download-section {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.store-button-primary,
.primary-action,
.button-primary {
  border-color: var(--theme-primary-bg);
  background: var(--theme-primary-bg);
  color: var(--theme-primary-fg);
  box-shadow: 0 10px 28px rgb(28 28 30 / 10%);
}

.store-button-primary:hover,
.primary-action:hover,
.button-primary:hover {
  filter: brightness(1.06);
}

html[data-theme="light"] .hero-grid,
html[data-theme="light"] .download-grid {
  opacity: 0.32;
}

html[data-theme="light"] .hero-glow-one,
html[data-theme="light"] .download-glow {
  background: radial-gradient(circle, rgb(28 28 30 / 6%), transparent 68%);
}

html[data-theme="light"] .hero-glow-two {
  background: radial-gradient(circle, rgb(99 99 102 / 5%), transparent 68%);
}

html[data-theme="light"] .tune-ui,
html[data-theme="light"] .atlas-visual {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] .tune-group,
html[data-theme="light"] .mini-gauges span,
html[data-theme="light"] .health-rows > div,
html[data-theme="light"] .diagnostic-trace {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

html[data-theme="light"] .stage-card,
html[data-theme="light"] .mini-feature,
html[data-theme="light"] .controller-card {
  border-color: var(--theme-border-strong);
  box-shadow: 0 18px 48px rgb(28 28 30 / 9%);
}

html[data-theme="light"] .route-map,
html[data-theme="light"] .atlas-map {
  filter: grayscale(1) contrast(0.9) brightness(1.08);
}

html[data-theme="light"] .download-section {
  background: var(--theme-bg);
}

/* Keep the homepage product mockups in the same neutral theme. */
.hero-product::before {
  background: radial-gradient(
    circle at 45% 40%,
    var(--theme-surface-3),
    var(--theme-surface-2) 62%,
    transparent 63%
  );
  filter: drop-shadow(0 24px 55px rgb(0 0 0 / 14%));
}

.product-orbit,
.brand img,
.download-content > img,
.floating-card,
.live-pill,
.connection-row,
.telemetry-grid > div,
.energy-card,
.tune-ui,
.tune-ui > header button,
.tune-group,
.profile-row span,
.mini-gauges span,
.atlas-visual,
.atlas-distance,
.diagnostic-demo,
.diagnostic-bolt,
.health-rows > div,
.diagnostic-trace,
.controller-card.featured,
.controller-card.featured .controller-monogram,
.controller-card > i {
  border-color: var(--theme-border);
}

.avatar-stack i,
.avatar-stack i:first-child,
.avatar-stack i:nth-child(2) {
  border-color: var(--theme-bg);
  background: var(--theme-surface-3);
  color: var(--theme-muted);
}

.phone {
  border-color: var(--theme-border-strong);
  background: linear-gradient(
    150deg,
    var(--theme-surface-3),
    var(--theme-surface-2) 28%,
    var(--theme-bg-grouped) 78%,
    var(--theme-surface-3)
  );
  box-shadow:
    0 30px 70px rgb(0 0 0 / 18%),
    0 0 0 3px var(--theme-border-strong),
    inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.phone-screen {
  background:
    radial-gradient(
      circle at 50% 15%,
      var(--theme-accent-softer),
      transparent 14rem
    ),
    var(--theme-surface);
  color: var(--theme-text);
}

.phone-top,
.connection-row small,
.battery-pill,
.speed-block > span,
.speed-block > strong span,
.telemetry-grid span,
.telemetry-grid strong small,
.energy-card header span,
.energy-card header strong,
.phone-nav span,
.floating-card small,
.floating-card div > span,
.tune-ui > header > div span,
.tune-row em,
.profile-row span,
.mini-feature p,
.trip-chip span,
.atlas-bottom {
  color: var(--theme-muted);
}

.atlas-distance {
  color: var(--theme-accent);
}

.connection-row,
.telemetry-grid > div,
.energy-card,
.floating-card,
.tune-ui > header button,
.tune-group,
.mini-gauges span,
.trip-chip,
.health-rows > div,
.diagnostic-trace {
  background: var(--theme-surface-2);
}

.battery-pill,
.float-icon,
.live-pill,
.saved-state,
.tune-row i,
.profile-row span.is-active,
.controller-card.featured .controller-monogram {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.energy-chart i,
.slider i {
  background: var(--theme-accent);
}

.floating-card {
  box-shadow: var(--theme-shadow);
}

.route-art {
  background: var(--theme-surface-3);
}

.route-map {
  background:
    linear-gradient(
      24deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    linear-gradient(
      -18deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    linear-gradient(
      70deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    var(--theme-surface-2);
}

.atlas-map {
  background:
    linear-gradient(
      27deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    linear-gradient(
      -37deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    linear-gradient(
      72deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    var(--theme-surface-2);
}

.road,
.street {
  background: var(--theme-border-strong);
}

.controller-card:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
}

html[data-theme="light"] .phone::before {
  background: #3a3a3d;
}

html[data-theme="light"] .phone-home {
  background: var(--theme-accent-strong);
}

html[data-theme="dark"] .phone::before {
  background: #050506;
}

html[data-theme="dark"] .phone-home {
  background: var(--theme-muted);
}

/* Parameter sharing. */
.site-header {
  border-color: var(--theme-border);
  background: var(--theme-header);
}

.account-button,
.secondary-action,
.share-summary-meta > div,
.trust-strip,
.area-tabs button,
.number-control button,
.comment-bubble {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.account-button:hover,
.area-tabs button:hover,
.secondary-action:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.share-summary,
.parameter-browser,
.community-revisions {
  color: var(--theme-text);
}

.trust-strip > div,
.area-intro h2,
.revision-note-copy,
.comment p {
  color: var(--theme-muted);
}

.parameter-section,
.download-card,
.revision-card,
.comment,
.success-toast,
.state-icon {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: none;
}

.parameter-section > header,
.parameter-row.is-changed,
.comment-thread,
.revision-dock {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.option-grid button,
.number-control,
.comment-form textarea,
.revision-note textarea {
  border-color: var(--theme-border-strong);
  background: var(--theme-bg-grouped);
  color: var(--theme-text);
}

.area-tabs button.is-selected,
.option-grid button.is-selected,
.comment-bubble:hover,
.revision-card.is-expanded .comment-bubble {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

footer {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

/* Standalone legal and utility pages. */
.simple-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--theme-bg);
}

.simple-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(20px, calc((100vw - 1040px) / 2));
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-header);
  backdrop-filter: blur(20px);
}

.simple-brand,
.simple-header-actions {
  display: flex;
  align-items: center;
}

.simple-brand {
  gap: 10px;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.simple-brand img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
}

.simple-header-actions {
  gap: 10px;
}

.simple-back {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-link);
  font-size: 12px;
  font-weight: 700;
  line-height: 36px;
  text-decoration: none;
}

.simple-back:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
}

.simple-main {
  width: min(800px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(62px, 9vw, 104px) 0 80px;
  flex: 1;
}

.simple-article {
  padding: clamp(25px, 5vw, 52px);
  border: 1px solid var(--theme-border);
  border-radius: 26px;
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.simple-kicker {
  margin: 0 0 13px;
  color: var(--theme-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.simple-article h1 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 1;
}

.simple-intro,
.simple-article p {
  color: var(--theme-muted);
  font-size: 15px;
  line-height: 1.75;
}

.simple-intro {
  margin: 22px 0 0;
}

.simple-article section {
  padding-top: 29px;
  margin-top: 29px;
  border-top: 1px solid var(--theme-border);
}

.simple-article h2 {
  margin: 0 0 12px;
  color: var(--theme-text);
  font-size: 20px;
  letter-spacing: -0.025em;
}

.simple-article p {
  margin: 0;
}

.simple-article p + p {
  margin-top: 13px;
}

.simple-article a {
  color: var(--theme-link);
}

.simple-callout {
  margin-top: 28px;
  padding: 17px 18px;
  border: 1px solid var(--theme-accent-soft);
  border-radius: 16px;
  background: var(--theme-accent-soft);
}

.simple-callout > strong {
  display: block;
  margin-bottom: 5px;
  color: var(--theme-text);
}

.simple-footer {
  padding: 26px 20px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-bg-grouped);
  color: var(--theme-muted);
  font-size: 12px;
  text-align: center;
}

.not-found-main {
  display: grid;
  width: min(560px, calc(100% - 40px));
  margin: auto;
  padding: 70px 0;
  place-items: center;
}

.not-found-code {
  color: var(--theme-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.not-found-main .simple-article {
  text-align: center;
}

.not-found-main .simple-article p {
  margin: 18px 0 0;
}

.not-found-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--theme-primary-bg);
  color: var(--theme-primary-fg) !important;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

/* Admin. */
.boot-screen,
.auth-action,
.workspace,
.workspace-scroll,
.support-view {
  background: var(--theme-bg);
}

.boot-orbit {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

.boot-progress {
  background: var(--theme-surface-3);
}

.auth-story,
.sidebar {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.auth-story::after {
  border-color: var(--theme-accent-soft);
  box-shadow:
    0 0 0 50px var(--theme-accent-softer),
    0 0 0 110px var(--theme-accent-softer);
}

.auth-bars {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 29px,
    var(--theme-accent-softer) 30px
  );
}

.auth-bars span {
  background: var(--theme-accent);
}

.auth-visual,
.auth-stat-grid div,
.system-state,
.account-menu,
.panel,
.metric-card,
.chart-tooltip,
.activation-stage,
.thread-panel,
.thread-context,
.message > div,
.diagnostic-card,
.reply-form,
.rider-profile,
.controller-card,
.rider-context-card,
.subscription-card,
.support-safety-card,
.ride-timeline-main,
.modal-card,
.toast {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: none;
}

.button-secondary,
.icon-button,
.range-switcher,
.segment-control,
.input-shell,
.conversation-row:hover,
.conversation-row.is-active,
.thread-header,
.thread-context dl > div,
.diagnostic-summary > div,
.diagnostic-json,
.reply-form textarea,
.rider-profile > dl > div,
.permission-note,
.controller-card,
.context-facts > div,
.subscription-state-list > div,
.support-history-preview,
.safety-summary > div,
.report-list > div,
.ride-timeline-main,
.modal-card {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-text);
}

.conversation-row {
  border-color: var(--theme-border);
}

.button-secondary:hover,
.icon-button:hover,
.support-history-preview:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.button-primary:not(:disabled):hover {
  background: var(--theme-primary-bg);
  filter: brightness(1.06);
}

.button-secondary:not(:disabled):hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.nav-item {
  color: var(--theme-muted);
}

.nav-item:hover {
  background: var(--theme-surface-2);
  color: var(--theme-text);
}

.nav-item.is-active,
.range-switcher button.is-active,
.segment-control button.is-active {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: none;
}

.platform-breakdown-button {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.platform-breakdown-button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.platform-breakdown-button.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

.range-switcher button,
.segment-control button {
  color: var(--theme-muted);
}

.range-switcher button:hover,
.segment-control button:hover {
  background: var(--theme-accent-softer);
  color: var(--theme-text);
}

.segment-control button b {
  background: var(--theme-surface-3);
  color: var(--theme-quiet);
}

.segment-control button.is-active {
  color: var(--theme-accent-strong);
}

.segment-control button.is-active b {
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.support-view .section-heading {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.inbox-panel,
.thread-panel {
  background: var(--theme-surface);
}

.input-shell:focus-within,
.reply-form textarea:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-softer);
}

.input-shell input,
.reply-form textarea {
  color: var(--theme-text);
}

.input-shell input::placeholder,
.reply-form textarea::placeholder {
  color: var(--theme-quiet);
}

.conversation-row {
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.conversation-row:hover {
  background: var(--theme-surface-2);
}

.conversation-row.is-active {
  background: var(--theme-accent-soft);
}

.conversation-rider > strong,
.conversation-issue {
  color: var(--theme-text);
}

.conversation-action,
.conversation-copy time,
.conversation-footer {
  color: var(--theme-muted);
}

.conversation-footer > i,
.conversation-row.state-resolved .conversation-action {
  color: var(--theme-quiet);
}

.conversation-row.needs-reply .conversation-action {
  color: var(--theme-accent-strong);
}

.conversation-row.state-waiting_on_user .conversation-action {
  color: var(--theme-warning);
}

.thread-header .button.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.thread-shares {
  border-color: var(--theme-border);
  background:
    linear-gradient(135deg, var(--theme-warning-soft), transparent 55%),
    var(--theme-surface);
}

.thread-shares > header strong,
.thread-share strong {
  color: var(--theme-text);
}

.thread-shares > header p,
.thread-share,
.thread-share small {
  color: var(--theme-muted);
}

.thread-shares > header > span,
.thread-share-icon {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.thread-share {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.thread-share:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.message > div {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.message-support > div {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
}

.support-media {
  border-color: var(--theme-border);
  background: var(--theme-surface-3);
}

.support-media-link:hover {
  box-shadow: 0 0 0 2px var(--theme-accent-soft);
}

.support-media-state {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.diagnostic-json {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
  color: var(--theme-text);
}

.reply-form {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.empty-state > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.pro-badge,
.subtle-count,
.controller-main > header small,
.signal-pill,
.ride-timeline-main > header > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.rider-hero-stats,
.rider-hero-stats > div,
.subscription-history {
  border-color: var(--theme-border);
}

.support-history-preview > svg,
.report-list i {
  color: var(--theme-muted);
}

.upload-visibility-note {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.upload-visibility-note strong {
  color: var(--theme-text);
}

.upload-visibility-note p {
  color: var(--theme-muted);
}

.ride-timeline-row:not(:last-child)::before,
.queue-meter,
.protocol-list > div > div {
  background: var(--theme-border);
}

.rider-ride-controller-tabs > button,
.rider-ride-controller-summary > span,
.rider-ride-card-badges > span,
.rider-ride-card,
.rider-ride-card-metrics,
.rider-ride-detail-card,
.rider-ride-hero-metrics > div,
.rider-ride-route,
.rider-ride-metric-sections > section,
.rider-ride-fault-history {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-text);
  box-shadow: none;
}

.rider-ride-controller-tabs > button:hover,
.rider-ride-card:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.rider-ride-controller-tabs > button.is-selected {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.rider-ride-controller-tabs strong,
.rider-ride-card-topline strong,
.rider-ride-distance strong,
.rider-ride-card-metrics strong,
.rider-ride-state strong,
.rider-ride-detail-header h2,
.rider-ride-hero-metrics strong,
.rider-ride-route > header strong,
.rider-ride-metric-sections dd,
.rider-ride-fault-history > div strong {
  color: var(--theme-text);
}

.rider-ride-controller-tabs small,
.rider-ride-controller-summary > span,
.rider-ride-card-badges > span,
.rider-ride-card-topline small,
.rider-ride-card-metrics span,
.rider-ride-state,
.rider-ride-detail-header p,
.rider-ride-hero-metrics span,
.rider-ride-route > header span,
.rider-ride-route-empty,
.rider-ride-metric-sections dt,
.rider-ride-fault-history > p {
  color: var(--theme-muted);
}

.rider-ride-card {
  background:
    radial-gradient(circle at 100% 0, var(--theme-accent-softer), transparent 45%),
    var(--theme-surface);
}

.rider-ride-accent {
  background: var(--theme-accent);
}

.rider-ride-card-topline span,
.rider-ride-distance span,
.rider-ride-end {
  color: var(--theme-quiet);
}

.rider-ride-card-metrics {
  background: var(--theme-bg-grouped);
}

.rider-ride-card-badges > span.has-fault,
.rider-ride-error {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.rider-ride-card-badges > span.has-fault svg,
.rider-ride-fault-history > div > svg {
  color: var(--theme-warning);
}

.rider-ride-error,
.rider-ride-inline-error,
.rider-ride-fault-history > header strong {
  color: var(--theme-warning);
}

.rider-ride-detail-card {
  background: var(--theme-surface);
}

.rider-ride-detail-header {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 80% -40%, var(--theme-accent-soft), transparent 44%),
    var(--theme-surface-2);
}

.rider-ride-detail-header > div > span,
.rider-ride-route > header > svg {
  color: var(--theme-accent-strong);
}

.rider-ride-read-only {
  border-color: var(--theme-border);
  background: var(--theme-surface-3);
  color: var(--theme-muted);
}

.rider-ride-gps-note {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.rider-ride-gps-note strong {
  color: var(--theme-text);
}

.rider-ride-gps-note p {
  color: var(--theme-muted);
}

.rider-ride-route {
  background:
    linear-gradient(var(--theme-accent-softer) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-accent-softer) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, var(--theme-accent-soft), transparent 38%),
    var(--theme-bg-grouped);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.rider-ride-route > header,
.rider-ride-metric-sections > section > header,
.rider-ride-fault-history > header,
.rider-ride-metric-sections dl > div,
.rider-ride-fault-history > div {
  border-color: var(--theme-border);
}

.rider-ride-route > header {
  background: var(--theme-surface-2);
}

.rider-ride-route-start,
.rider-ride-route-end {
  stroke: var(--theme-surface);
}

.rider-ride-route-empty strong {
  color: var(--theme-text);
}

.rider-ride-route-empty p,
.rider-ride-fault-history > div small {
  color: var(--theme-quiet);
}

.rider-ride-metric-sections > section,
.rider-ride-fault-history {
  background: var(--theme-surface-2);
}

.rider-ride-fault-history > div {
  color: var(--theme-warning);
}

/* Rider ride archive residuals. */
.rider-ride-controller-summary svg,
.rider-ride-card-badges svg {
  color: var(--theme-quiet);
}

.rider-ride-card-topline > svg {
  color: var(--theme-quiet);
}

.rider-ride-state p {
  color: var(--theme-muted);
}

.rider-ride-route-glow {
  stroke: var(--theme-accent-soft);
}

.rider-ride-metric-sections > section > header,
.rider-ride-fault-history > header {
  color: var(--theme-muted);
}

.queue-resolved {
  background: var(--theme-muted);
}

.dashboard-shell .status {
  display: inline-flex;
  min-height: 25px;
  flex: 0 0 auto;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-2);
  color: var(--theme-muted);
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-shell .status-open {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.dashboard-shell .status-waiting_on_user {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.dashboard-shell .status-resolved {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-quiet);
}

.button-danger {
  background: var(--theme-danger);
  color: #ffffff;
}

.auth-error {
  color: var(--theme-danger) !important;
}

.account-button:hover,
.account-menu button:hover {
  background: var(--theme-surface-2);
}

.account-menu button,
.live-badge,
.sidebar footer > p,
.toast > button {
  color: var(--theme-muted);
}

.account-menu button:hover {
  color: var(--theme-text);
}

.account-button > img {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
}

.cohort-chart-block,
.cohort-definition {
  border-color: var(--theme-border);
}

.activation-arrow,
.data-note {
  color: var(--theme-quiet);
}

.modal-card > span {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.dot-teal {
  background: var(--chart-1);
}

.dot-violet {
  background: var(--chart-3);
}

.dot-amber {
  background: var(--chart-5);
}

.brand-mark,
.brand-admin,
.metric-label > span,
.metric-accent .metric-label > span,
.account-avatar,
.avatar,
.profile-avatar,
.controller-icon,
.context-card-icon,
.ride-state,
.toast > span {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: none;
}

.live-badge span,
.system-state > span {
  background: var(--theme-success);
  box-shadow: 0 0 0 3px var(--theme-success-soft);
}

.auth-story-copy p,
.auth-private,
.auth-stat-grid small,
.security-note p,
.system-state small,
.header-title span,
.account-copy small,
.metric-label,
.metric-card > p,
.chart-legend,
.cohort-header p,
.activation-stage small,
.activation-stage p,
.cohort-definition,
.chart-tooltip > span,
.legend-list span,
.queue-rows span,
.protocol-list header,
.data-note,
.input-shell,
.conversation-copy time,
.conversation-issue,
.conversation-footer,
.thread-header > div small,
.thread-context > header p,
.thread-context dt,
.message-sender,
.message footer,
.diagnostic-header p,
.diagnostic-summary dt,
.diagnostic-actions > span,
.empty-state p,
.loading-state p,
.inline-empty,
.rider-profile header p,
.rider-profile dt,
.controller-main > header span,
.controller-main dt,
.controller-updated,
.rider-hero-identity p,
.rider-hero-stats span,
.context-facts dt,
.subscription-current small,
.context-footnote,
.empty-context-copy,
.subscription-state-list small,
.subscription-history,
.support-history-preview small,
.support-history-preview p,
.safety-summary span,
.report-list small,
.ride-timeline-main > header small,
.ride-metrics span,
.modal-card p,
.toast p {
  color: var(--theme-muted);
}

.auth-visual header,
.auth-stat-grid strong,
.auth-card > p strong,
.system-state strong,
.account-copy strong,
.activation-stage strong,
.activation-stage > b,
.cohort-chart-heading strong,
.chart-tooltip p,
.chart-tooltip p strong,
.legend-list strong,
.protocol-list header strong,
.conversation-copy strong,
.thread-context > header strong,
.thread-context dd,
.message p,
.diagnostic-header strong,
.diagnostic-summary dd,
.empty-state strong,
.loading-state strong,
.inline-empty strong,
.rider-profile dd,
.controller-main > header strong,
.controller-main dd,
.rider-hero-stats strong,
.context-facts dd,
.subscription-current strong,
.subscription-state-list strong,
.support-history-preview strong,
.safety-summary strong,
.report-list strong,
.ride-timeline-main > header strong,
.ride-metrics b,
.toast strong {
  color: var(--theme-text);
}

.google-button {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.metric-accent,
.status-open,
.pro-badge.is-pro,
.signal-pill.is-good {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.button-danger-soft,
.toast-error > span {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.access-icon,
.diagnostic-icon,
.diagnostic-source,
.signal-pill.is-gold,
.ride-state.has-fault,
.ride-faults span {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

/* Subscription analytics. Keep this admin-only surface on the shared theme. */
.subscription-inline-notice {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.subscription-inline-error {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.subscription-inline-error svg {
  color: var(--theme-danger);
}

.subscription-loading-state {
  color: var(--theme-accent);
}

.subscription-loading-state > div {
  color: var(--theme-muted);
}

.subscription-loading-state strong {
  color: var(--theme-text);
}

.subscription-summary-card {
  border-color: var(--theme-border);
  background:
    linear-gradient(145deg, var(--theme-accent-softer), transparent 48%),
    var(--theme-surface);
}

.subscription-summary-card::after {
  background: var(--theme-accent-softer);
}

.subscription-summary-active {
  border-color: var(--theme-accent-soft);
}

.subscription-summary-cancellation {
  border-color: var(--theme-danger-soft);
}

.subscription-summary-cancellation::after {
  background: var(--theme-danger-soft);
}

.subscription-summary-ended {
  border-color: var(--theme-warning-soft);
}

.subscription-summary-ended::after {
  background: var(--theme-warning-soft);
}

.subscription-summary-retention {
  border-color: var(--theme-accent-soft);
}

.subscription-summary-retention::after {
  background: var(--theme-accent-softer);
}

.subscription-summary-label {
  color: var(--theme-muted);
}

.subscription-summary-label > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-quiet);
}

.subscription-summary-active .subscription-summary-label > span {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.subscription-summary-cancellation .subscription-summary-label > span {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.subscription-summary-ended .subscription-summary-label > span {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.subscription-summary-retention .subscription-summary-label > span {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-violet);
}

.subscription-summary-card > strong {
  color: var(--theme-text);
}

.subscription-summary-card > p {
  color: var(--theme-muted);
}

.subscription-cancellation-panel,
.subscription-tenure-panel {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

.data-status {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.data-status-observed {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.data-status-modeled {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-softer);
  color: var(--theme-violet);
}

.subscription-chart-summary > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-quiet);
}

.subscription-chart-summary b {
  color: var(--theme-text);
}

.dot-red {
  background: var(--theme-danger);
}

.subscription-chart-empty,
.subscription-tenure-empty {
  color: var(--theme-muted);
}

.subscription-chart-empty svg,
.subscription-tenure-empty svg {
  color: var(--theme-quiet);
}

.subscription-chart-empty strong,
.subscription-tenure-empty strong {
  color: var(--theme-text);
}

.subscription-chart-empty p,
.subscription-tenure-empty p {
  color: var(--theme-muted);
}

.subscription-tenure-legend .dot-amber {
  background: var(--theme-warning);
}

.subscription-data-definition {
  color: var(--theme-quiet);
}

.subscription-projection-panel {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 0% 0%, var(--theme-accent-softer), transparent 27%),
    radial-gradient(circle at 100% 100%, var(--theme-accent-softer), transparent 26%),
    var(--theme-surface);
}

.subscription-projection-header > div:first-child > p {
  color: var(--theme-muted);
}

.subscription-observed-revenue {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.subscription-observed-revenue small {
  color: var(--theme-quiet);
}

.subscription-observed-revenue strong {
  color: var(--theme-text);
}

.subscription-observed-revenue span {
  color: var(--theme-muted);
}

.subscription-funnel-strip {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.subscription-funnel-strip > div {
  border-left-color: var(--theme-border);
}

.subscription-funnel-strip svg {
  color: var(--theme-muted);
}

.subscription-funnel-strip > div:nth-child(2) svg {
  color: var(--theme-accent);
}

.subscription-funnel-strip > div:nth-child(3) svg {
  color: var(--theme-violet);
}

.subscription-funnel-strip > div:nth-child(4) svg {
  color: var(--theme-warning);
}

.subscription-funnel-strip small {
  color: var(--theme-quiet);
}

.subscription-funnel-strip strong {
  color: var(--theme-text);
}

.subscription-funnel-strip em {
  color: var(--theme-muted);
}

.projection-adjustment {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.projection-adjustment > span {
  color: var(--theme-muted);
}

.projection-adjustment button {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-muted);
}

.projection-adjustment button:not(:disabled):hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.projection-adjustment strong {
  color: var(--theme-text);
}

.projection-milestone {
  border-color: var(--theme-accent-soft);
  background:
    linear-gradient(145deg, var(--theme-accent-softer), transparent 63%),
    var(--theme-surface-2);
}

.projection-milestone small {
  color: var(--theme-violet);
}

.projection-milestone strong {
  color: var(--theme-text);
}

.projection-milestone span {
  color: var(--theme-muted);
}

.projection-milestone em {
  color: var(--theme-quiet);
}

.subscription-projection-footnote {
  color: var(--theme-muted);
}

.subscription-projection-footnote svg {
  color: var(--theme-warning);
}

.subscription-projection-footnote strong {
  color: var(--theme-text);
}

.subscription-data-note {
  color: var(--theme-muted);
}

/* The streamlined revenue charts use the same neutral system surfaces as the
   rest of the admin. Keep these overrides here because this shared theme loads
   after the dashboard's component CSS. */
.subscription-graph-panel {
  border-color: var(--theme-border);
  background:
    linear-gradient(145deg, var(--theme-accent-softer), transparent 48%),
    var(--theme-surface);
  color: var(--theme-text);
}

.subscription-graph-tabs {
  border-bottom-color: var(--theme-border);
}

.subscription-graph-tabs button {
  color: var(--theme-muted);
}

.subscription-graph-tabs button:hover {
  color: var(--theme-text);
}

.subscription-graph-tabs button.is-active {
  border-color: var(--theme-accent);
  color: var(--theme-accent-strong);
}

.subscription-graph-header h3 {
  color: var(--theme-text);
}

.subscription-graph-status,
.subscription-graph-controls > div > span,
.subscription-graph-copy {
  color: var(--theme-quiet);
}

.subscription-segmented-control {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.subscription-segmented-control button {
  color: var(--theme-muted);
}

.subscription-segmented-control button:hover:not(:disabled) {
  color: var(--theme-text);
}

.subscription-segmented-control button.is-active {
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: inset 0 0 0 1px var(--theme-accent-soft);
}

@media (max-width: 1160px) {
  .subscription-funnel-strip > div:nth-child(3),
  .subscription-funnel-strip > div:nth-child(4) {
    border-top-color: var(--theme-border);
  }
}

@media (max-width: 680px) {
  .subscription-funnel-strip > div,
  .subscription-funnel-strip > div:nth-child(n) {
    border-top-color: var(--theme-border);
  }
}

/* Rides / GHD Globe. Keep the canvas palette and surrounding dashboard in sync. */
.ride-universe {
  --ride-globe-canvas-background: var(--theme-bg);
  --ride-globe-canvas-ambient: var(--theme-accent);
  --ride-globe-canvas-sphere-highlight: var(--theme-surface-3);
  --ride-globe-canvas-sphere: var(--theme-surface-2);
  --ride-globe-canvas-sphere-edge: var(--theme-bg-grouped);
  --ride-globe-canvas-grid: var(--theme-border);
  --ride-globe-canvas-land: var(--theme-muted);
  --ride-globe-canvas-coast: var(--theme-text);
  --ride-globe-canvas-dot: #0a84ff;
  --ride-globe-canvas-route: var(--theme-accent);
  --ride-globe-canvas-route-active: var(--theme-accent-strong);
  --ride-globe-canvas-route-new: var(--theme-danger);
  --ride-globe-canvas-live: var(--theme-accent);
  --ride-globe-energy-low: var(--theme-violet);
  --ride-globe-energy-mid: var(--theme-violet);
  --ride-globe-energy-high: var(--theme-danger);
  --ride-globe-energy-peak: var(--theme-warning);
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 70% 44%, var(--theme-accent-softer), transparent 35%),
    radial-gradient(circle at 8% 3%, var(--theme-accent-soft), transparent 31%),
    linear-gradient(
      145deg,
      var(--theme-bg-grouped) 0%,
      var(--theme-bg) 46%,
      var(--theme-surface-2) 100%
    );
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.ride-universe::before {
  background: var(--theme-accent-softer);
}

@keyframes ride-arrival-flash {
  0% {
    border-color: var(--theme-danger);
    box-shadow:
      0 0 0 1px var(--theme-danger-soft),
      0 0 90px var(--theme-danger-soft);
  }
}

.ride-universe-grid {
  background-image:
    linear-gradient(var(--theme-accent-softer) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-accent-softer) 1px, transparent 1px);
}

.ride-universe-header {
  color: var(--theme-muted);
}

.ride-live-orb {
  background: var(--theme-accent);
  box-shadow:
    0 0 0 4px var(--theme-accent-soft),
    0 0 16px var(--theme-accent-soft);
}

.ride-stream-live i {
  background: var(--theme-success);
  animation: none;
  box-shadow: none;
}

@keyframes ride-live-pulse {
  50% {
    opacity: 0.55;
    box-shadow:
      0 0 0 7px var(--theme-accent-soft),
      0 0 22px var(--theme-accent-soft);
  }
}

.ride-private-status {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.ride-fullscreen-button {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.ride-fullscreen-button:hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.ride-hero-kicker {
  color: var(--theme-accent-strong);
}

.ride-today-count {
  color: var(--theme-text);
  text-shadow: none;
}

.ride-hero-briefing > div {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.ride-hero-briefing small {
  color: var(--theme-quiet);
}

.ride-hero-briefing strong {
  color: var(--theme-text);
}

.ride-hero-latest {
  color: var(--theme-muted);
}

.ride-globe-feed > header {
  color: var(--theme-muted);
}

.ride-globe-feed > header i {
  background: var(--theme-accent);
  box-shadow: 0 0 12px var(--theme-accent-soft);
}

.ride-globe-feed > header small {
  color: var(--theme-quiet);
}

.ride-globe-feed-list {
  border-color: var(--theme-border);
  background:
    linear-gradient(115deg, var(--theme-accent-softer), transparent 72%),
    var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.ride-globe-feed-row {
  border-bottom-color: var(--theme-border);
  color: var(--theme-text);
}

.ride-globe-feed-row:hover,
.ride-globe-feed-row:focus-visible,
.ride-globe-feed-row.is-active {
  background:
    linear-gradient(90deg, var(--theme-accent-softer), transparent 78%);
  box-shadow:
    inset 2px 0 var(--theme-accent),
    inset 0 1px var(--theme-border);
}

.ride-globe-feed-marker {
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.ride-globe-feed-row.is-active .ride-globe-feed-marker {
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

.ride-globe-feed-row.is-newest {
  background:
    linear-gradient(90deg, var(--theme-danger-soft), transparent 78%);
  box-shadow:
    inset 2px 0 var(--theme-danger),
    inset 0 1px var(--theme-danger-soft);
}

.ride-globe-feed-row.is-newest .ride-globe-feed-marker {
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.ride-globe-feed-copy em {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.ride-globe-feed-row.is-newest .ride-globe-feed-copy em {
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.ride-globe-feed-copy small,
.ride-globe-feed-metrics small {
  color: var(--theme-quiet);
}

.ride-globe-feed-metrics strong {
  color: var(--theme-text);
}

.ride-globe-hint {
  color: var(--theme-quiet);
}

.ride-energy-legend {
  border-color: var(--theme-warning-soft);
  background:
    linear-gradient(125deg, var(--theme-accent-softer), transparent 62%),
    var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.ride-energy-label > span {
  border-color: var(--theme-warning-soft);
  background:
    radial-gradient(circle at 50% 40%, var(--theme-warning-soft), transparent 64%),
    var(--theme-accent-softer);
  color: var(--theme-warning);
  box-shadow: none;
}

.ride-energy-label strong {
  color: var(--theme-text);
}

.ride-energy-label small,
.ride-energy-total small,
.ride-energy-scale small {
  color: var(--theme-quiet);
}

.ride-energy-total strong {
  color: var(--theme-warning);
  text-shadow: none;
}

.ride-energy-scale span {
  background: linear-gradient(
    90deg,
    var(--ride-globe-energy-low),
    var(--ride-globe-energy-mid) 52%,
    var(--ride-globe-energy-high) 78%,
    var(--ride-globe-energy-peak)
  );
  box-shadow: none;
}

.ride-arrival {
  border-color: var(--theme-danger-soft);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.ride-arrival > span {
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.ride-arrival strong {
  color: var(--theme-text);
}

.ride-arrival small {
  color: var(--theme-muted);
}

.ride-hero-stats {
  border-top-color: var(--theme-border);
  background: var(--theme-surface);
}

.ride-hero-stats > div {
  border-left-color: var(--theme-border);
  color: var(--theme-accent);
}

.ride-hero-stats small {
  color: var(--theme-quiet);
}

.ride-hero-stats strong {
  color: var(--theme-text);
}

.ride-protocol-panel {
  --ride-protocol-fardriver: var(--chart-1);
  --ride-protocol-stark: var(--theme-violet);
  --ride-protocol-torp: var(--theme-warning);
  --ride-protocol-trumoto: var(--theme-danger);
  --ride-protocol-ebmx: var(--chart-2);
  --ride-protocol-gps: var(--theme-success);
  --ride-protocol-other: var(--theme-quiet);
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.ride-protocol-share {
  background: var(--theme-surface-3);
}

.ride-protocol-card {
  border-color: var(--theme-border);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--protocol-color) 7%, transparent),
      transparent 54%
    ),
    var(--theme-surface-2);
}

.ride-rhythm-panel,
.ride-stream-panel {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.ride-rhythm-chart {
  border-bottom-color: var(--theme-border);
  background:
    repeating-linear-gradient(
      to bottom,
      var(--theme-accent-softer) 0 1px,
      transparent 1px 33.333%
    );
}

.ride-rhythm-chart i {
  background:
    linear-gradient(
      180deg,
      var(--theme-accent),
      var(--theme-success) 55%,
      var(--theme-violet)
    );
  box-shadow: none;
}

.ride-rhythm-footer i {
  background: var(--theme-success);
}

.ride-stream-row.is-new {
  background:
    linear-gradient(90deg, var(--theme-danger-soft), transparent 70%),
    var(--theme-danger-soft);
}

.ride-stream-row.is-active .ride-stream-marker {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.ride-stream-copy em {
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.ride-week-brief {
  border-color: var(--theme-border);
  background:
    linear-gradient(105deg, var(--theme-accent-softer), transparent 48%),
    var(--theme-surface);
}

.modal-scrim,
.sidebar-scrim {
  background: rgb(0 0 0 / 48%);
}

@media (max-width: 900px) {
  .site-header,
  .site-header.is-scrolled {
    background: var(--theme-surface);
  }

  .site-nav {
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
  }
}

@media (max-width: 680px) {
  .theme-toggle {
    min-width: 62px;
  }

  .theme-toggle--floating {
    top: 12px;
    right: 12px;
  }

  .simple-header {
    padding-inline: 14px;
  }

  .simple-back {
    width: 38px;
    overflow: hidden;
    padding: 0;
    font-size: 0;
    text-align: center;
  }

  .simple-back::after {
    font-size: 18px;
    content: "←";
  }

  .simple-main {
    width: min(100% - 24px, 800px);
    padding-top: 36px;
  }

  .simple-article {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-track,
  .theme-toggle-track::after {
    transition: none;
  }
}