/* ==========================================================================
 * VENDORED from projects.gelliottmorris.com - read-only copy, do not edit.
 * Source : ~/github/projects-hub/shared/base.css
 * Commit : 96e12889cf460dd839fd453111d968d0b5d0a14b (file identical to that commit)
 * Synced : 2026-10-16 by scripts/sync_projects_theme.py (DECISIONS_v0.3 D11)
 * Everything below the END-VENDOR-HEADER line is byte-identical to the source.
 * Change it upstream in projects-hub, then re-run the sync script.
 * ======================================================= END-VENDOR-HEADER */
/**
 * Shared Base Styles
 * Import this in each project's main.js
 */

/* Font loading moved to each project's index.html for better performance
 * (CSS @import blocks rendering and can cause duplicate requests) */
@import './design-tokens.css';
@import './utilities.css';

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}

#app {
  width: 100%;
}

/* Full-height app layout - use .app class on root container */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ===== Animations & Transitions ===== */

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Focus Styles ===== */

/* Focus glow effect for interactive elements */
:focus-visible {
  outline: 2px solid var(--color-dem);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* Remove default focus outline since we use focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* Button pressed state - subtle */
button:active:not(:disabled) {
  opacity: 0.9;
}

/* ===== Chart Defaults ===== */

.chart-section {
  margin-bottom: var(--space-3);
  position: relative;
}

.chart {
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
  display: block;
  background: var(--color-bg-card);
}

.chart .axis-label {
  font-size: 9px;
  fill: var(--color-text-muted);
}

.chart .axis-title {
  font-size: 10px;
  fill: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.chart .data-point {
  cursor: pointer;
  transition: r var(--transition-normal);
}

.chart .data-point:hover {
  r: 4.5;
}

.chart .regression-line,
.chart .confidence-line {
  transition: y1 0.3s ease-out, y2 0.3s ease-out;
}