/* ============================================================
   WEATHER DUCK — Kp 3-Day Forecast (3 stacked day rows)
   Replaces the old single-row 24-bar chart.
   Each day = a row with meta (peak, badge, hint) + 8-bar chart.
   Uses --sky-* tokens from stargazing-table.css and --wd-* from
   design-tokens.css.
============================================================ */

.sg-kpf-section {
  /* Section-local Kp activity palette — matches the bar bucket coloring */
  --kpf-quiet:     #74c69d;     /* Kp 0–2 */
  --kpf-unsettled: #ffd166;     /* Kp 3–4 */
  --kpf-active:    #f4a261;     /* Kp 5–6 */
  --kpf-storm:     #e63946;     /* Kp 7+ */
  --kpf-bright:    #e8eef5;     /* sky text bright */

  font-family: var(--wd-font);
}
/* Restore card padding — .sg-card sets padding:0 expecting a separate
   .sg-card-body wrapper, which this layout doesn't use. Two-class
   selector beats .sg-card single-class specificity. */
.wd-card.sg-kpf-section {
  padding: var(--wd-card-padding, 22px);
}
@media (max-width: 768px) {
  .wd-card.sg-kpf-section {
    padding: var(--wd-card-padding-mobile, 16px);
  }
}

/* ── Header ── */
.sg-kpf-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wd-space-md);
  margin-bottom: 2px;
}
/* Title now uses .wd-section-title for site-wide consistency.
   We only override the colour for the dark card background and kill the
   default bottom margin (the parent flex header handles spacing). */
.sg-kpf-title.wd-section-title {
  color: rgba(180, 200, 230, 0.6);
  margin-bottom: 0;
}
.sg-kpf-source {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
}
.sg-kpf-sub {
  font-size: 10.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  line-height: 1.4;
  margin-bottom: 10px;
}
.sg-kpf-sub b {
  color: var(--sky-text, #c8d6e5);
  font-weight: 600;
}

/* ── Day card ── */
.sg-kpf-day {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--wd-radius-sm);
  padding: 16px 20px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;        /* 50/50 split: info | chart */
  gap: 20px;
  align-items: stretch;
}
.sg-kpf-day:last-child { margin-bottom: 0; }

/* Featured: an active or storm day gets warm tint to draw the eye */
.sg-kpf-day--featured {
  background: rgba(244, 162, 97, 0.06);
  border-color: rgba(244, 162, 97, 0.22);
}

/* ── Meta column ── */
.sg-kpf-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}
.sg-kpf-meta__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sg-kpf-meta__head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sg-kpf-meta__day {
  font-size: 14px;
  font-weight: 700;
  color: var(--sky-text-bright, var(--kpf-bright));
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.sg-kpf-meta__date {
  font-size: 10.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
}
.sg-kpf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--wd-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.sg-kpf-badge--quiet     { background: rgba(116, 198, 157, 0.15); color: var(--kpf-quiet); }
.sg-kpf-badge--unsettled { background: rgba(255, 209, 102, 0.18); color: var(--kpf-unsettled); }
.sg-kpf-badge--active    { background: rgba(244, 162, 97, 0.18);  color: var(--kpf-active); }
.sg-kpf-badge--storm     { background: rgba(230, 57, 70, 0.18);   color: var(--kpf-storm); }

.sg-kpf-meta__peak {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sg-kpf-meta__peak-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
}
.sg-kpf-meta__peak-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sky-text-bright, var(--kpf-bright));
}
.sg-kpf-meta__peak-time {
  font-size: 10px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.sg-kpf-meta__hint {
  font-size: 10.5px;
  color: var(--sky-text, #c8d6e5);
  line-height: 1.35;
  border-left: 2px solid var(--kpf-quiet);
  padding-left: 7px;
}
.sg-kpf-day--featured .sg-kpf-meta__hint { border-left-color: var(--kpf-active); }

/* ── Chart column ── */
.sg-kpf-chart {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 5px;
}
.sg-kpf-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 3px 14px 0;
  font-size: 9px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sg-kpf-canvas {
  position: relative;
  height: 88px;
}
.sg-kpf-svg { display: block; width: 100%; height: 100%; }

.sg-kpf-xaxis {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 0;
  font-size: 8.5px;
  color: var(--sky-muted, rgba(200, 214, 229, 0.5));
  font-variant-numeric: tabular-nums;
}
.sg-kpf-xaxis span { flex: 1; text-align: center; }
.sg-kpf-xaxis span:first-child { text-align: left; }
.sg-kpf-xaxis span:last-child  { text-align: right; }

/* Peak marker label inside the chart */
.sg-kpf-peak-label {
  position: absolute;
  font: 700 9.5px/1 var(--wd-font);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.7);
  color: var(--sky-text-bright, var(--kpf-bright));
  border: 1px solid var(--kpf-quiet);
  padding: 1px 5px;
  border-radius: 3px;
  transform: translate(-50%, -135%);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.sg-kpf-day--featured .sg-kpf-peak-label { border-color: var(--kpf-active); }

/* No-data fallback */
.sg-kpf-empty {
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
  color: var(--sky-muted, #888);
}

/* ── Mobile ── */
@media (max-width: 720px) {
  .sg-kpf-day {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sg-kpf-meta {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-right: 0;
    padding-bottom: 10px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .sg-kpf-meta__day,
  .sg-kpf-meta__date { display: inline-block; margin-right: 8px; }
  .sg-kpf-meta__peak { flex-direction: row; align-items: baseline; gap: 6px; margin-left: auto; }
  .sg-kpf-meta__peak-val { font-size: 22px; }
  .sg-kpf-meta__hint { width: 100%; margin-top: 6px; }
}