/* ==========================================================================
   Solheure — app / section-specific layout
   Everything here is specific to one part of the page (the hero result,
   the chart, the hour-by-hour timeline, the calendar strip) rather than a
   reusable component.
   ========================================================================== */

.result-sections{display:none;}
.result-sections.show{display:block;}

/* --- Hero: "Demain chez toi" --- */
.hero-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:6px;
}
.hero-label{
  font-size:var(--text-sm);color:var(--text-dim);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em;
}
.hero-value{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-hero);line-height:1;color:var(--gold);
}
.hero-sub{font-size:var(--text-sm);color:var(--text-dim);margin-top:6px;line-height:1.6;}
.hero-sub b{color:var(--text);font-weight:600;}
.hero-date{font-family:var(--font-mono);font-size:0.82rem;color:var(--text-dim);text-align:right;}
.sky-badge{margin-top:6px;font-size:0.8rem;text-align:right;color:var(--text);font-weight:600;}
.sky-badge .pct{color:var(--text-dim);font-weight:400;font-family:var(--font-mono);}

@media (max-width:520px){
  .hero-value{font-size:2.5rem;}
}

/* --- Day chart --- */
.arc-wrap{margin-top:22px;position:relative;}
svg{width:100%;height:auto;display:block;overflow:visible;}
.chart-legend{
  display:flex;gap:16px;font-family:var(--font-mono);
  font-size:0.7rem;margin-bottom:8px;flex-wrap:wrap;
}
.chart-tooltip{
  position:absolute;top:8px;pointer-events:none;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;
  font-size:0.74rem;font-family:var(--font-mono);line-height:1.6;
  white-space:nowrap;opacity:0;transition:opacity .1s ease;z-index:5;
}
.chart-tooltip.show{opacity:1;}
.chart-tooltip .tt-hour{color:var(--gold);font-weight:600;}

/* --- Hour-by-hour timeline --- */
.timeline-legend{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;
  font-size:0.74rem;font-family:var(--font-mono);
}
.legend-item.tl-solar{color:var(--gold);}
.legend-item.tl-battery{color:var(--teal);}
.legend-item.tl-grid{color:var(--red);}
.timeline{max-height:460px;overflow-y:auto;display:flex;flex-direction:column;}
.tl-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--line);font-size:0.8rem;}
.tl-row:first-child{border-top:none;}
.tl-hour{font-family:var(--font-mono);color:var(--text-dim);width:34px;flex-shrink:0;}
.tl-bar{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;}
.tl-bar-fill{height:100%;border-radius:4px;background:var(--gold);}
.tl-cons{font-family:var(--font-mono);width:62px;text-align:right;color:var(--text-dim);flex-shrink:0;}
.tl-badge{font-size:0.72rem;width:80px;flex-shrink:0;color:var(--text-dim);}
.tl-row.tl-solar .tl-badge{color:var(--gold);}
.tl-row.tl-battery .tl-badge{color:var(--teal);}
.tl-row.tl-grid .tl-badge{color:var(--red);}
.tl-tags{width:32px;flex-shrink:0;text-align:right;}

.caveat{font-size:0.76rem;color:var(--text-dim);margin-top:16px;line-height:1.5;}

/* --- Calendar & history section --- */
.calendar-title{font-family:var(--font-display);font-weight:600;font-size:0.9rem;margin-bottom:8px;}