/* ==========================================================================
   Responsive Styles — Mobile-First Breakpoints
   ========================================================================== */

/* ==========================================================================
   Base / Mobile (< 640px)
   ========================================================================== */

/* Performance: disable expensive effects on mobile */
.card,
.chart-container,
.lang-toggle {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.section-title {
  text-shadow: none;
}

/* Sections */
.section {
  padding: 2rem 1rem;
}

.section-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.section-subtitle {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Card Grids */
.card-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card-grid--2 {
  grid-template-columns: 1fr;
}

.card-grid--3 {
  grid-template-columns: 1fr;
}

/* Cards */
.card {
  padding: 1.25rem;
}

/* Charts */
.chart-container {
  padding: 1.25rem;
}

.tears-stat-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.tears-stat-card {
  padding: 1.25rem 0.75rem;
}

.tears-stat-card__value {
  font-size: 1.5rem;
}

.tears-stat-card__icon {
  font-size: 1.25rem;
}

.tears-leaderboard__name {
  min-width: 100px;
  font-size: 0.75rem;
}

.tears-highlight {
  padding: 0.75rem 1rem;
  gap: 0.35rem;
}

/* Dialogue section mobile */
.chart-container--speakers {
  height: 320px;
}

.pov-strip__cell {
  width: 7px;
  height: 12px;
}

.dialogue-summary {
  flex-direction: column;
  align-items: center;
}

/* Geography mobile */
.geo-group {
  padding: 1rem 1rem;
}

.geo-row__name {
  width: 110px;
  min-width: 90px;
  font-size: 0.78rem;
}

.geo-row__count {
  font-size: 0.8rem;
  min-width: 28px;
}

.geo-row__bar-bg {
  height: 16px;
}

.geography-summary {
  flex-direction: column;
  align-items: center;
}

.chart-wrapper canvas {
  min-height: 250px;
}

.chart-bar-wrapper,
.chart-line-wrapper,
.chart-area-wrapper,
.chart-scatter-wrapper {
  min-height: 250px;
}

.chart-bar-wrapper canvas,
.chart-line-wrapper canvas {
  min-height: 230px;
}

.chart-hbar-wrapper {
  min-height: 300px;
}

.chart-bubble-wrapper {
  min-height: 300px;
}

/* Hero mobile tweaks */
.hero-badge {
  font-size: 0.62rem;
  padding: 0.25rem 0.9rem;
  margin-bottom: 1rem;
}

.hero-divider {
  width: 60px;
  margin: 1rem 0;
}

/* Stat row */
.stat-row {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stat-pill {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 0;
  padding: 0.9rem 0.75rem;
}

.stat-pill__number {
  font-size: 1.5rem;
}

.stat-pill__label {
  font-size: 0.7rem;
}

/* Nav dots hidden on mobile */
.nav-dots {
  display: none;
}

/* Language toggle smaller */
.lang-toggle {
  top: 0.75rem;
  right: 0.75rem;
}

.lang-toggle__btn {
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
}

/* Heatmap scroll */
.heatmap-scroll {
  overflow-x: auto;
  padding: 0.75rem;
}

.heatmap-container::after {
  opacity: 1;
}

/* Network graph: show fallback list, hide SVG */
.network-container {
  min-height: auto;
}

.network-container svg {
  display: none;
}

.network-fallback-list {
  display: block;
}

/* Quote block */
.quote-block {
  padding: 1.25rem 1.25rem 1.25rem 1.75rem;
}

.quote-block__text {
  font-size: 1rem;
}

/* Chart controls */
.chart-controls {
  gap: 0.5rem;
}

.chart-controls .btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
}

.chart-select {
  padding: 0.35rem 1.75rem 0.35rem 0.75rem;
  font-size: 0.72rem;
}

/* Chart legend */
.chart-legend {
  gap: 0.4rem 0.75rem;
}

.chart-legend-item {
  font-size: 0.72rem;
}

.emotion-legend {
  gap: 0.5rem 1rem;
}

/* Radar */
.radar-container {
  max-width: 300px;
}

/* Doughnut */
.chart-doughnut-wrapper {
  max-width: 260px;
}

.chart-doughnut-center__value {
  font-size: 1.4rem;
}

/* Badges */
.badge {
  font-size: 0.68rem;
  padding: 0.2rem 0.6rem;
}

/* Tags */
.tag-chip {
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
}

/* Buttons */
.btn {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* Inline legend */
.chart-inline-legend {
  gap: 8px;
}

.chart-inline-legend__item {
  font-size: 10px;
  padding: 3px 6px;
}

.chart-inline-legend__swatch {
  width: 10px;
  height: 10px;
}

/* Character chips */
.character-chip {
  font-size: 11px;
  padding: 3px 10px;
}

/* Card content */
.card__title {
  font-size: 1rem;
}

.card__body {
  font-size: 0.85rem;
}

/* Section blocks */
.section-block {
  margin-bottom: 2rem;
}

/* Tooltip */
.tooltip-custom {
  font-size: 0.72rem;
  max-width: 220px;
}

/* Section divider */
.section-divider {
  margin: 2rem auto;
}

/* Hero */
.hero-title {
  font-size: clamp(2rem, 8vw, 3rem);
}

.hero-meter {
  margin-bottom: 2rem;
}

.scroll-indicator {
  margin-top: 1.5rem;
}

/* Loading screen adjustments */
.loading-title {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

.loading-subtitle {
  font-size: 0.85rem;
  padding: 0 1rem;
}

/* iOS safe area padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Gold line */
.gold-line {
  margin: 1.5rem 0;
}


/* ==========================================================================
   Small Tablets (>= 640px)
   ========================================================================== */

@media (min-width: 640px) {
  .section {
    padding: 3rem 1.5rem;
  }

  .section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .section-subtitle {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  /* Two-column card grids */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card {
    padding: 1.5rem;
  }

  /* Charts: larger heights */
  .chart-wrapper canvas {
    min-height: 300px;
  }

  .chart-bar-wrapper,
  .chart-line-wrapper,
  .chart-area-wrapper {
    min-height: 300px;
  }

  .chart-bar-wrapper canvas,
  .chart-line-wrapper canvas {
    min-height: 280px;
  }

  .chart-hbar-wrapper {
    min-height: 350px;
  }

  .chart-scatter-wrapper {
    min-height: 320px;
  }

  .chart-bubble-wrapper {
    min-height: 350px;
  }

  /* Dialogue section: restore sizes at tablet+ */
  .chart-container--speakers {
    height: 380px;
  }

  .pov-strip__cell {
    width: 10px;
    height: 14px;
  }

  .dialogue-summary {
    flex-direction: row;
  }

  /* Geography: restore at tablet+ */
  .geo-group {
    padding: 1.25rem 1.5rem;
  }

  .geo-row__name {
    width: 160px;
    min-width: 120px;
    font-size: 0.85rem;
  }

  .geo-row__bar-bg {
    height: 20px;
  }

  .geography-summary {
    flex-direction: row;
  }

  /* Stats: 3 per row */
  .stat-pill {
    flex: 1 1 calc(33.333% - 0.5rem);
    padding: 1.1rem 1.25rem;
  }

  .stat-pill__number {
    font-size: 1.8rem;
  }

  /* Chart container */
  .chart-container {
    padding: 1.5rem;
  }

  /* Quote block */
  .quote-block {
    padding: 1.5rem 2rem 1.5rem 2.25rem;
  }

  /* Radar */
  .radar-container {
    max-width: 400px;
  }

  /* Doughnut */
  .chart-doughnut-wrapper {
    max-width: 300px;
  }

  .chart-doughnut-center__value {
    font-size: 1.6rem;
  }

  /* Chart legend */
  .chart-legend {
    gap: 0.5rem 1rem;
  }

  .chart-legend-item {
    font-size: 0.75rem;
  }

  /* Tags */
  .tag-chip {
    font-size: 0.78rem;
  }

  /* Lang toggle */
  .lang-toggle {
    top: 1rem;
    right: 1rem;
  }

  .lang-toggle__btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
  }

  /* Loading */
  .loading-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}


/* ==========================================================================
   Desktop (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
  .section {
    padding: 6rem 2rem;
  }

  .section-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
  }

  .section-subtitle {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  /* Full layout: 3-column grids */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
  }

  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    padding: 2rem;
  }

  /* Nav dots visible */
  .nav-dots {
    display: flex;
  }

  /* Network graphs full size */
  .network-container {
    min-height: 550px;
  }

  .network-container svg {
    display: block;
  }

  .network-fallback-list {
    display: none;
  }

  /* Stats */
  .stat-pill {
    flex: 0 1 auto;
    padding: 1.25rem 1.5rem;
  }

  .stat-pill__number {
    font-size: 2rem;
  }

  .stat-pill__label {
    font-size: 0.8rem;
  }

  /* Charts full size */
  .chart-container {
    padding: 2rem;
  }

  .chart-wrapper canvas {
    min-height: 320px;
  }

  .chart-bar-wrapper {
    min-height: 300px;
  }

  .chart-line-wrapper {
    min-height: 280px;
  }

  .chart-hbar-wrapper {
    min-height: 350px;
  }

  .chart-area-wrapper {
    min-height: 300px;
  }

  .chart-scatter-wrapper {
    min-height: 320px;
  }

  .chart-bubble-wrapper {
    min-height: 380px;
  }

  /* Radar full */
  .radar-container {
    max-width: 500px;
  }

  /* Doughnut full */
  .chart-doughnut-wrapper {
    max-width: 350px;
  }

  .chart-doughnut-center__value {
    font-size: 1.8rem;
  }

  /* Heatmap: no forced scroll */
  .heatmap-scroll {
    padding: 1rem;
  }

  /* Quote block */
  .quote-block {
    padding: 1.75rem 2rem 1.75rem 2.5rem;
  }

  .quote-block__text {
    font-size: 1.1rem;
  }

  /* Chart controls */
  .chart-controls {
    gap: 0.75rem;
  }

  .chart-controls .btn {
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
  }

  .chart-select {
    padding: 0.4rem 2rem 0.4rem 1rem;
    font-size: 0.78rem;
  }

  /* Emotion legend */
  .emotion-legend {
    gap: 0.75rem 1.5rem;
  }

  .emotion-legend .chart-legend-item,
  .emotion-legend .chart-inline-legend__item {
    font-size: 0.82rem;
  }

  /* Lang toggle */
  .lang-toggle {
    top: 1.5rem;
    right: 1.5rem;
  }

  .lang-toggle__btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
  }

  /* Section divider */
  .section-divider {
    margin: 3rem auto;
  }

  /* Gold line */
  .gold-line {
    margin: 2rem 0;
  }

  /* Tooltip */
  .tooltip-custom {
    font-size: 0.78rem;
    max-width: 280px;
  }

  /* Badges */
  .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }

  /* Buttons */
  .btn {
    padding: 0.6rem 1.4rem;
    font-size: 0.85rem;
  }
}


/* ==========================================================================
   Large Desktop (>= 1440px)
   ========================================================================== */

@media (min-width: 1440px) {
  /* Slightly larger fonts */
  .section-title {
    font-size: 3rem;
  }

  .section-subtitle {
    font-size: 1.05rem;
    max-width: 700px;
  }

  /* More generous spacing */
  .section {
    padding: 7rem 2rem;
  }

  .section-divider {
    margin: 4rem auto;
  }

  /* Cards */
  .card {
    padding: 2.25rem;
  }

  .card-grid {
    gap: 1.75rem;
  }

  /* Stats */
  .stat-pill__number {
    font-size: 2.2rem;
  }

  .stat-pill__label {
    font-size: 0.85rem;
  }

  .stat-pill {
    padding: 1.5rem 1.75rem;
  }

  /* Charts */
  .chart-container {
    padding: 2.25rem;
  }

  .chart-container__title {
    font-size: 1.25rem;
  }

  /* Quote */
  .quote-block__text {
    font-size: 1.15rem;
    line-height: 2;
  }

  /* Legend */
  .chart-legend-item {
    font-size: 0.82rem;
  }

  .emotion-legend .chart-legend-item,
  .emotion-legend .chart-inline-legend__item {
    font-size: 0.88rem;
  }

  /* Network */
  .network-container {
    min-height: 600px;
  }

  /* Gold line */
  .gold-line {
    margin: 2.5rem 0;
  }
}


/* ==========================================================================
   Ultra-wide (>= 1920px)
   ========================================================================== */

@media (min-width: 1920px) {
  :root {
    --content-max-width: 1400px;
  }

  .section-title {
    font-size: 3.2rem;
  }

  .stat-pill__number {
    font-size: 2.4rem;
  }
}


/* ==========================================================================
   Height-based adjustments (short viewports)
   ========================================================================== */

@media (max-height: 700px) and (min-width: 1024px) {
  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .nav-dots {
    gap: 0.6rem;
  }

  .nav-dot {
    width: 6px;
    height: 6px;
  }
}


/* ==========================================================================
   Touch device adjustments
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .tag-chip {
    padding: 0.4rem 1rem;
    min-height: 36px;
  }

  .btn {
    min-height: 42px;
    padding: 0.6rem 1.25rem;
  }

  .chart-legend-item {
    padding: 0.35rem 0;
    min-height: 32px;
  }

  .chart-controls .btn {
    min-height: 36px;
  }

  .chart-select {
    min-height: 36px;
  }

  .lang-toggle__btn {
    min-height: 32px;
    padding: 0.35rem 0.85rem;
  }

  /* Remove hover effects that don't apply */
  .card:hover {
    border-color: var(--border-subtle);
    box-shadow: none;
  }

  .nav-dot::after {
    display: none;
  }
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  body {
    background: white;
    color: #1a1a1a;
  }

  .loading-screen,
  .nav-dots,
  .lang-toggle,
  .chart-controls {
    display: none !important;
  }

  .card {
    background: white;
    border: 1px solid #ddd;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    break-inside: avoid;
  }

  .section {
    padding: 2rem 0;
  }

  .section-title {
    color: #1a1a1a;
    text-shadow: none;
  }

  .gold-line,
  .section-divider {
    background: #ccc;
  }

  .chart-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #ddd;
  }
}