/* Use the card's width, including sidebar and split-screen layouts. */
.mood-tracker-card {
  container-type: inline-size;
}

.mood-chart-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mood-chart-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  color: var(--ink-soft);
  font: 400 var(--text-xs) / 1.5 var(--font-sans);
}

.mood-chart-container {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
}

.mood-svg-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 248px;
  overflow: visible;
  touch-action: pan-y;
}

/* Clip the score wash below the recorded line, leaving the paper above clear.
   Insets match the axes; painting does not depend on an SVG fragment lookup. */
.chart-mood-surface {
  position: absolute;
  inset: 24px 16px 36px;
  border-radius: 8px;
  background-image: linear-gradient(to bottom,
    var(--mood-score-great) 0%,
    var(--mood-score-good) 22.2%,
    var(--mood-score-neutral) 55.6%,
    var(--mood-score-low) 77.8%,
    var(--mood-score-very-low) 100%);
  opacity: .32;
  pointer-events: none;
}

.mood-chart-scale {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
  color: var(--ink-soft);
  font: 400 var(--text-xs) / 1.5 var(--font-sans);
}
.mood-chart-scale__item { display: inline-flex; align-items: center; gap: var(--space-xs); }
.mood-chart-scale__swatch { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mood-chart-scale__swatch--low { background: var(--mood-score-very-low); }
.mood-chart-scale__swatch--neutral { background: var(--mood-score-neutral); }
.mood-chart-scale__swatch--great { background: var(--mood-score-great); }

.chart-grid-line {
  stroke: var(--sepia-line);
  stroke-opacity: .45;
  stroke-width: 1;
}

.chart-day-label {
  fill: var(--ink-soft);
  font: 400 var(--text-xs) var(--font-sans);
}

.chart-trend,
.chart-trend-outline {
  fill: none;
  stroke-dasharray: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-trend { stroke: var(--ink-soft, currentColor); stroke-width: 1.5; }
.chart-trend-outline { stroke: var(--paper-aged); stroke-width: 3; pointer-events: none; }

.chart-selection-guide {
  stroke: var(--ink-soft);
  stroke-opacity: .4;
  pointer-events: none;
}

.chart-hit-area { fill: transparent; pointer-events: all; }
.chart-column-group { cursor: pointer; outline: none; text-decoration: none; }
.home-dashboard--consolidated .chart-column-group:focus-visible { outline: none; }
.chart-point-dot {
  fill: var(--leather-brown);
  stroke: var(--paper-aged);
  stroke-width: 2;
}
.chart-point-emoji {
  fill: var(--ink-dark);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--paper-aged);
  stroke-width: 4px;
}
.chart-column-group.has-emoji .chart-point-emoji { opacity: 1; }
.chart-column-group.has-emoji .chart-point-dot { opacity: 0; }
.chart-column-group.is-selected:not(.has-emoji) .chart-point-dot { r: 5; }
.chart-column-group:focus-visible .chart-point-dot {
  opacity: 1;
  fill: var(--paper-aged);
  stroke: var(--leather-brown);
}
.chart-column-group:not(.has-emoji):focus-visible .chart-point-dot { r: 7; }
.chart-column-group.has-emoji:focus-visible .chart-point-dot { r: 13; }

.mood-chart-details {
  display: grid;
  padding: 12px var(--space-md);
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--sepia-line) 55%, transparent);
  border-radius: var(--radius-control);
}
.mood-chart-detail {
  grid-area: 1 / 1;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-sm);
}
.mood-chart-detail[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.mood-chart-detail__entries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--ink-soft);
  font: 400 var(--text-xs) / 1.5 var(--font-sans);
}
.mood-chart-detail__emoji {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: var(--radius-compact);
}
.mood-chart-detail__emoji:hover { background: var(--paper-warm); }
.mood-chart-detail__copy { flex: 1; min-width: 0; }
.mood-chart-detail .chart-tooltip-date {
  margin: 0;
  color: var(--ink-dark);
  font: 500 var(--text-sm) / 1.5 var(--font-sans);
  overflow-wrap: anywhere;
}
.mood-chart-detail .chart-tooltip-subtitle {
  margin: var(--space-xs) 0 0;
  color: var(--ink-soft);
  font: 400 var(--text-xs) / 1.5 var(--font-sans);
}
.mood-chart-detail__score {
  flex: 0 0 auto;
  color: var(--ink-dark);
  font: 500 var(--text-xl) / 1.2 var(--font-serif);
  font-variant-numeric: tabular-nums;
}
.mood-chart-detail__score small {
  margin-left: 2px;
  color: var(--ink-soft);
  font: 400 var(--text-xs) var(--font-sans);
}
@container (max-width: 520px) {
  /* Keep touch targets and Diary links while leaving the trend unobstructed. */
  .mood-svg-chart .chart-column-group .chart-point-dot,
  .mood-svg-chart .chart-column-group .chart-point-emoji { opacity: 0; }
  .mood-svg-chart:has(.chart-column-group:focus-visible) {
    outline: 2px solid var(--ink-soft);
    outline-offset: 4px;
    border-radius: var(--radius-compact);
  }
  .home-dashboard--consolidated .mood-tracker-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
  }
  .home-dashboard--consolidated .mood-tracker-header-left { grid-area: 1 / 1; }
  .home-dashboard--consolidated .mood-tracker-actions { display: contents; }
  .home-dashboard--consolidated .home-tools { grid-area: 1 / 2; }
  .home-dashboard--consolidated .mood-range-selector { grid-area: 2 / 1 / 3 / -1; width: 100%; }
  .mood-range-btn { flex: 1; }
  .mood-chart-context { flex-direction: column; }
  .mood-chart-details { padding-inline: var(--space-sm); }
}