[x-cloak] {
  display: none !important;
}

body {
  font-family: var(--font-sans);
}

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

.cs-chart {
  width: 100%;
  min-height: 320px;
  height: 420px;
}

.cs-chart--map {
  height: 480px;
}

.chart-panel .section-heading,
.panel-card .section-heading {
  margin-bottom: 1rem;
}

.feed-content strong a,
.cc-mini-stat strong,
.confidence-pill,
.sidebar-account strong {
  letter-spacing: 0.01em;
}

.route-surface-table td:first-child,
.route-surface-table th:first-child,
.analysis-chart-label {
  font-family: var(--font-mono);
}

.theme-toggle,
.sidebar-toggle,
.app-overlay,
.panel-card,
.control-card,
.compact-card,
.cc-card {
  transition:
    transform var(--motion-standard),
    background-color var(--motion-standard),
    border-color var(--motion-standard),
    box-shadow var(--motion-emphasized),
    opacity var(--motion-standard);
}

.panel-card:hover,
.control-card:hover,
.compact-card:hover,
.cc-card:hover {
  box-shadow: var(--shadow-medium);
}

.htmx-indicator {
  opacity: 0;
  transition: opacity var(--motion-standard);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

html.is-loading {
  cursor: progress;
}

@media (max-width: 768px) {
  .cs-chart {
    height: 360px;
  }

  .cs-chart--map {
    height: 420px;
  }
}