/* Dashboard v0.7 — 24h context and mobile parity. Additive over v0.6. */

.start-page .status-hero{--hero-mode-color:var(--green);background:radial-gradient(circle at 10% 48%,color-mix(in srgb,var(--hero-mode-color) 30%,transparent),transparent 22%),radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--hero-mode-color) 14%,transparent),transparent 36%),linear-gradient(125deg,color-mix(in srgb,#06382a 76%,var(--hero-mode-color) 24%) 0%,color-mix(in srgb,#075442 72%,var(--hero-mode-color) 28%) 45%,color-mix(in srgb,#08312e 78%,var(--hero-mode-color) 22%) 100%);border-color:color-mix(in srgb,var(--hero-mode-color) 50%,rgba(255,255,255,.08));transition:background .35s ease,border-color .35s ease}
.start-page .status-hero.mode-self-use,.start-page .status-chip.mode-self-use{--hero-mode-color:var(--green);--mode-color:var(--green)}
.start-page .status-hero.mode-charge,.start-page .status-chip.mode-charge{--hero-mode-color:var(--cyan);--mode-color:var(--cyan)}
.start-page .status-hero.mode-discharge,.start-page .status-chip.mode-discharge{--hero-mode-color:var(--purple);--mode-color:var(--purple)}
.start-page .status-hero.mode-hold,.start-page .status-chip.mode-hold{--hero-mode-color:var(--blue);--mode-color:var(--blue)}
.start-page .status-hero.mode-export,.start-page .status-chip.mode-export{--hero-mode-color:var(--orange);--mode-color:var(--orange)}
.start-page .status-hero.mode-monitor,.start-page .status-chip.mode-monitor{--hero-mode-color:var(--muted);--mode-color:var(--muted)}
.start-page .status-hero.mode-curtail,.start-page .status-chip.mode-curtail{--hero-mode-color:var(--yellow);--mode-color:var(--yellow)}
.start-page .status-chip{--mode-color:var(--green);color:color-mix(in srgb,var(--mode-color) 80%,white 20%);background:color-mix(in srgb,var(--mode-color) 18%,rgba(4,27,21,.45));border-color:color-mix(in srgb,var(--mode-color) 55%,transparent)}
.start-page .hero-orb{border-color:color-mix(in srgb,var(--hero-mode-color) 68%,rgba(255,255,255,.25));box-shadow:0 0 0 5px color-mix(in srgb,var(--hero-mode-color) 8%,transparent),0 0 28px color-mix(in srgb,var(--hero-mode-color) 32%,transparent),inset 0 0 14px color-mix(in srgb,var(--hero-mode-color) 16%,transparent)}

/* Weather colour hierarchy */
.start-page .weather-card{--weather-accent:var(--cyan);background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--weather-accent) 13%,transparent),transparent 38%),linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,var(--weather-accent) 6%),var(--panel));border-color:color-mix(in srgb,var(--weather-accent) 26%,var(--line));transition:background .3s ease,border-color .3s ease}
.start-page .weather-card.tone-sun{--weather-accent:var(--yellow)}
.start-page .weather-card.tone-partly{--weather-accent:#7ec6dc}
.start-page .weather-card.tone-cloud{--weather-accent:#8fa8b2}
.start-page .weather-card.tone-rain{--weather-accent:var(--cyan)}
.start-page .weather-card.tone-storm{--weather-accent:var(--purple)}
.start-page .weather-card.tone-snow{--weather-accent:#b8dff0}
.start-page .weather-now .weather-icon{filter:saturate(1.2);text-shadow:0 5px 18px color-mix(in srgb,var(--weather-accent) 30%,transparent)}
.start-page .weather-hour{--forecast-accent:var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 91%,var(--forecast-accent) 9%),var(--panel-2));border-color:color-mix(in srgb,var(--forecast-accent) 25%,var(--line))}
.start-page .weather-hour.tone-sun{--forecast-accent:var(--yellow)}.start-page .weather-hour.tone-partly{--forecast-accent:#7ec6dc}.start-page .weather-hour.tone-cloud{--forecast-accent:#8fa8b2}.start-page .weather-hour.tone-rain{--forecast-accent:var(--cyan)}.start-page .weather-hour.tone-storm{--forecast-accent:var(--purple)}.start-page .weather-hour.tone-snow{--forecast-accent:#b8dff0}
.start-page .weather-day em{display:block;margin-top:2px;font-size:8px;font-style:normal;font-weight:750;color:var(--accent)}

/* Shared 24-hour planning axis */
.start-page .timeline-shell.timeline-24h{padding-top:4px;margin-top:4px;display:grid;gap:4px}
.start-page .timeline-axis-v07,.start-page .timeline-row-v07{display:grid;grid-template-columns:86px minmax(0,1fr);gap:7px;align-items:center}
.start-page .timeline-axis-v07{height:21px}
.start-page .timeline-axis-scale{position:relative;height:100%;min-width:0}
.start-page .v07-axis-tick{position:absolute;top:0;transform:translateX(-50%);white-space:pre;text-align:center;color:var(--faint);font-size:8px;font-weight:700;line-height:1.05}
.start-page .v07-axis-tick.is-now{color:var(--text);font-weight:900}
.start-page .timeline-row-label{min-width:0;padding-left:2px}.start-page .timeline-row-label strong{display:block;font-size:10px;color:var(--text);line-height:1.1}.start-page .timeline-row-label small{display:block;margin-top:2px;font-size:7px;color:var(--faint);line-height:1.15}
.start-page .timeline-row-v07 .timeline-track{height:39px;position:relative;overflow:hidden!important;background:linear-gradient(90deg,color-mix(in srgb,var(--panel-2) 94%,var(--text) 6%) 0 50%,color-mix(in srgb,var(--panel-2) 98%,transparent) 50% 100%)}
.start-page .timeline-row-v07.history-row .timeline-track{background:linear-gradient(90deg,var(--panel-2) 0 50%,color-mix(in srgb,var(--panel-2) 68%,var(--bg) 32%) 50% 100%)}
.start-page .timeline-row-v07.future-row .timeline-track{background:linear-gradient(90deg,color-mix(in srgb,var(--panel-2) 68%,var(--bg) 32%) 0 50%,var(--panel-2) 50% 100%)}
.start-page .timeline-row-v07 .timeline-segment{top:4px;bottom:4px;font-size:9px;border-radius:7px;z-index:3}
.start-page .timeline-row-v07 .timeline-segment small{font-size:7px}
.start-page .timeline-row-v07 .timeline-segment.is-history{opacity:.78;filter:saturate(.84)}
.start-page .v07-now-line{position:absolute;top:0;bottom:0;width:2px;background:var(--text);z-index:7;box-shadow:0 0 0 1px color-mix(in srgb,var(--panel) 40%,transparent);pointer-events:none}
.start-page .timeline-unplanned{position:absolute;top:4px;bottom:4px;border:1px dashed color-mix(in srgb,var(--muted) 42%,transparent);border-radius:7px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 5%,transparent) 0 5px,transparent 5px 10px);display:grid;place-items:center;color:var(--faint);font-size:8px;z-index:1;overflow:hidden;white-space:nowrap}
.start-page .v07-track-note{position:absolute;left:4%;top:50%;transform:translateY(-50%);color:var(--faint);font-size:8px;z-index:2}
.start-page .planning-panel>.timeline-shell{grid-column:1/-1!important}

@media(min-width:1280px){
  .start-page .planning-panel{padding-top:7px;padding-bottom:6px}
  .start-page .timeline-row-v07 .timeline-track{height:36px}
}

@media(max-width:980px){
  .start-page .timeline-axis-v07,.start-page .timeline-row-v07{grid-template-columns:74px minmax(0,1fr);gap:5px}
  .start-page .timeline-row-v07 .timeline-track{height:50px}
  .start-page .timeline-row-label strong{font-size:10px}.start-page .timeline-row-label small{font-size:7px}
  .start-page .timeline-row-v07 .timeline-segment{top:5px;bottom:5px;font-size:9px}
  .start-page .timeline-unplanned{top:5px;bottom:5px}
}

@media(max-width:680px){
  /* Current weather + four days share one horizontal weather row. */
  .start-page .weather-card.weather-rich{display:grid;grid-template-columns:minmax(105px,1.05fr) minmax(0,2.95fr);grid-template-rows:auto auto auto;gap:7px 8px;padding:13px}
  .start-page .weather-card .eyebrow{grid-column:1/-1;grid-row:1}
  .start-page .weather-top{grid-column:1;grid-row:2;display:block;align-self:stretch;padding-right:5px;border-right:1px solid color-mix(in srgb,var(--weather-accent) 24%,var(--line))}
  .start-page .weather-now{gap:5px;align-items:center}.start-page .weather-now .weather-icon{font-size:29px}.start-page .weather-now strong{font-size:30px}
  .start-page .weather-condition{font-size:9px;line-height:1.2}.start-page .weather-range{text-align:left;margin-top:5px;font-size:8px;line-height:1.25}
  .start-page .weather-hours.weather-days{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-self:stretch}
  .start-page .weather-day{padding:5px 2px;display:flex;flex-direction:column;justify-content:center;min-width:0}
  .start-page .weather-day time{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.start-page .weather-day b{font-size:11px;white-space:nowrap}.start-page .weather-day small{font-size:6px;line-height:1.2;white-space:normal}.start-page .weather-day em{font-size:6.5px;white-space:nowrap}
  .start-page .pv-forecast-line{grid-column:1/-1;grid-row:3;margin-top:0}

  /* Net phases become one single streamlined instrument band. */
  .start-page .phase-panel{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:6px;padding:8px 9px}
  .start-page .phase-panel .panel-head{display:block;margin:0;min-width:0}.start-page .phase-panel .panel-head h2{font-size:12px;line-height:1.05}.start-page .phase-panel .panel-head small{display:block!important;text-align:left;font-size:7px;line-height:1.15;margin-top:3px}.start-page #phaseUpdated{font-size:7px;margin-top:3px}
  .start-page .phase-strip.phase-strip-rich{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}.start-page .phase-strip-rich .phase-cell{min-height:52px;padding:6px 3px}.start-page .phase-strip-rich .phase-cell strong{font-size:13px}.start-page .phase-strip-rich .phase-cell span{font-size:8px}.start-page .phase-strip-rich .phase-cell small{font-size:7px}.start-page .phase-strip-rich .phase-balance{display:none}

  .start-page .planning-panel{padding:12px 9px}.start-page .planning-summary{margin-top:5px}.start-page .timeline-axis-v07,.start-page .timeline-row-v07{grid-template-columns:63px minmax(0,1fr);gap:4px}.start-page .timeline-axis-v07{height:22px}.start-page .v07-axis-tick{font-size:7px}.start-page .timeline-row-label strong{font-size:9px}.start-page .timeline-row-label small{font-size:6px}.start-page .timeline-row-v07 .timeline-track{height:44px}.start-page .timeline-row-v07 .timeline-segment{font-size:8px;padding:0 2px}.start-page .timeline-row-v07 .timeline-segment small{font-size:6px}.start-page .timeline-unplanned{font-size:6px}
}