/* CSS domain: shared dashboard cards, insight cards and weather chart primitives */
    .placeholder-page {
      width: 100%;
      height: 100vh;
      display: grid;
      grid-template-rows: 1fr;
      gap: var(--gap);
      background: var(--bg);
      color: var(--text);
      padding: var(--dashboard-page-padding);
      overflow: hidden;
    }

    .insights-layout {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: var(--gap);
      min-height: 0;
    }

    .insights-row {
      display: grid;
      gap: var(--dashboard-insight-row-gap);
    }

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

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

    .insight-card {
      justify-content: flex-start;
      gap: var(--dashboard-insight-card-gap);
      min-height: var(--dashboard-insight-card-min-height);
    }

    .insight-card.is-weather {
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .insight-label {
      font-size: var(--dashboard-insight-label-size);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: var(--dashboard-insight-label-letter-spacing);
    }

    .insight-value {
      font-size: var(--dashboard-insight-value-size);
      font-weight: var(--dashboard-value-weight);
      line-height: var(--dashboard-insight-value-line-height);
      letter-spacing: var(--dashboard-insight-value-letter-spacing);
    }

    .insight-subvalue {
      font-size: var(--dashboard-insight-subvalue-size);
      color: var(--muted);
      line-height: 1.35;
    }

    .phase-list,
    .weather-stats,
    .weather-report {
      display: grid;
      gap: var(--dashboard-insight-card-gap);
    }

    .phase-item,
    .weather-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--dashboard-insight-row-gap);
    }

    .phase-name,
    .weather-stat-label,
    .weather-report-label {
      font-size: var(--dashboard-insight-subvalue-size);
      color: var(--muted);
    }

    .phase-value,
    .weather-stat-value {
      font-size: var(--dashboard-insight-phase-value-size);
      font-weight: var(--dashboard-value-weight);
    }

    .weather-top {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--dashboard-insight-weather-top-gap);
      align-items: start;
    }

    .weather-now {
      display: flex;
      flex-direction: column;
      gap: var(--dashboard-insight-weather-now-gap);
    }

    .weather-condition {
      font-size: var(--dashboard-weather-condition-size);
      color: rgba(255,255,255,0.92);
    }

    .weather-report {
      margin-top: var(--dashboard-insight-report-top-margin);
      border-radius: var(--dashboard-insight-report-radius);
      background: rgba(255,255,255,0.04);
      padding: var(--dashboard-insight-report-padding);
    }

    .weather-report-title {
      font-size: var(--dashboard-insight-report-title-size);
      font-weight: var(--dashboard-value-weight);
      color: rgba(255,255,255,0.92);
    }

    .weather-report-text {
      font-size: var(--dashboard-insight-report-text-size);
      line-height: var(--dashboard-insight-report-text-line-height);
      color: rgba(255,255,255,0.78);
    }

    .weather-report-text + .weather-report-text {
      margin-top: var(--dashboard-insight-report-text-gap);
    }

    .weather-chart-panel {
      margin-top: var(--dashboard-insight-chart-top-margin);
      border-radius: var(--dashboard-insight-report-radius);
      background: rgba(255,255,255,0.04);
      padding: var(--dashboard-insight-report-padding);
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-height: 0;
    }

    .weather-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--dashboard-insight-chart-header-gap);
      margin-bottom: var(--dashboard-insight-chart-header-margin);
    }

    .weather-chart-title {
      font-size: var(--dashboard-weather-chart-title-size);
      font-weight: var(--dashboard-value-weight);
      line-height: var(--dashboard-insight-value-line-height);
    }

    .weather-chart-subtitle {
      font-size: var(--dashboard-weather-chart-subtitle-size);
      color: rgba(255,255,255,0.8);
      line-height: 1.3;
    }

    .weather-chart-svg {
      width: 100%;
      height: 100%;
      min-height: var(--dashboard-weather-chart-base-min-height);
      display: block;
    }

    .weather-chart-grid {
      stroke: rgba(255,255,255,0.08);
      stroke-width: var(--dashboard-weather-chart-grid-line-width);
    }

    .weather-chart-axis {
      stroke: rgba(255,255,255,0.18);
      stroke-width: var(--dashboard-weather-chart-axis-line-width);
    }

    .weather-chart-tick {
      stroke: rgba(255,255,255,0.14);
      stroke-width: var(--dashboard-weather-chart-tick-line-width);
    }

    .weather-chart-line {
      fill: none;
      stroke: #69a8ff;
      stroke-width: var(--dashboard-weather-chart-line-width);
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .weather-chart-area {
      fill: rgba(47,124,246,0.16);
    }

    .weather-chart-point {
      fill: #ffffff;
    }

    .weather-chart-label {
      fill: rgba(255,255,255,0.86);
      font-size: var(--dashboard-weather-chart-label-size);
      font-family: var(--dashboard-font);
      text-anchor: middle;
    }

    .weather-chart-value {
      fill: rgba(255,255,255,0.75);
      font-size: var(--dashboard-weather-chart-value-size);
      font-family: var(--dashboard-font);
      text-anchor: middle;
    }

    .weather-chart-timeline {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      align-items: center;
      padding: var(--dashboard-weather-chart-timeline-padding);
      color: rgba(255,255,255,0.72);
      font-size: var(--dashboard-weather-chart-timeline-size);
      line-height: 1;
      font-family: var(--dashboard-font);
    }

    .weather-chart-timeline-label {
      text-align: center;
      white-space: nowrap;
    }

    .weather-chart-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--dashboard-weather-chart-dots-gap);
      margin-top: var(--dashboard-weather-chart-dots-margin);
    }

    .weather-chart-dot {
      width: var(--dashboard-weather-chart-dot-size);
      height: var(--dashboard-weather-chart-dot-size);
      border-radius: 50%;
      background: rgba(255,255,255,0.16);
      transition: transform 0.15s ease, background 0.15s ease;
    }

    .weather-chart-dot.is-active {
      background: var(--blue);
      transform: scale(var(--dashboard-weather-chart-dot-active-scale));
    }