/* Dashboard v0.6 time/context polish.
 * Additive on top of v0.4 + v0.5. Mobile (<=980px) is deliberately untouched.
 */

@media (min-width:981px){
  .start-page .page{max-width:1700px}

  .start-page .status-chip{
    --mode-color:var(--green);
    color:color-mix(in srgb,var(--mode-color) 82%,white 18%);
    background:color-mix(in srgb,var(--mode-color) 18%,rgba(4,27,21,.42));
    border-color:color-mix(in srgb,var(--mode-color) 55%,transparent);
    box-shadow:0 0 18px color-mix(in srgb,var(--mode-color) 15%,transparent);
  }
  .start-page .status-chip.mode-self-use{--mode-color:var(--green)}
  .start-page .status-chip.mode-charge{--mode-color:var(--cyan)}
  .start-page .status-chip.mode-discharge{--mode-color:var(--purple)}
  .start-page .status-chip.mode-hold{--mode-color:var(--blue)}
  .start-page .status-chip.mode-export{--mode-color:var(--orange)}
  .start-page .status-chip.mode-monitor{--mode-color:var(--muted)}

  .start-page .status-hero{--hero-mode-color:var(--green)}
  .start-page .status-hero.mode-self-use{--hero-mode-color:var(--green)}
  .start-page .status-hero.mode-charge{--hero-mode-color:var(--cyan)}
  .start-page .status-hero.mode-discharge{--hero-mode-color:var(--purple)}
  .start-page .status-hero.mode-hold{--hero-mode-color:var(--blue)}
  .start-page .status-hero.mode-export{--hero-mode-color:var(--orange)}
  .start-page .status-hero.mode-monitor{--hero-mode-color:var(--muted)}
  .start-page .status-hero{
    border-color:color-mix(in srgb,var(--hero-mode-color) 36%,rgba(255,255,255,.08));
  }
  .start-page .hero-orb{
    border-color:color-mix(in srgb,var(--hero-mode-color) 65%,rgba(255,255,255,.25));
    box-shadow:0 0 0 5px color-mix(in srgb,var(--hero-mode-color) 8%,transparent),0 0 24px color-mix(in srgb,var(--hero-mode-color) 28%,transparent),inset 0 0 14px color-mix(in srgb,var(--hero-mode-color) 14%,transparent);
  }

  .start-page .timeline-track{overflow:visible}
  .start-page .timeline-time-guide{
    position:absolute;top:0;bottom:0;width:1px;z-index:1;
    background:color-mix(in srgb,var(--text) 9%,transparent);pointer-events:none;
  }
  .start-page .timeline-time-guide span{
    position:absolute;top:-18px;left:50%;transform:translateX(-50%);
    color:var(--faint);font-size:8px;font-weight:700;white-space:nowrap;
  }
  .start-page .timeline-segment{z-index:2;flex-direction:column;line-height:1.05;gap:2px}
  .start-page .timeline-segment small{
    display:block;color:rgba(255,255,255,.82);font-size:8px;font-weight:650;letter-spacing:0;text-transform:none;margin:0;
  }
  .start-page .timeline-segment.curtail small{color:rgba(74,57,0,.72)}
  .start-page .now-marker{z-index:5}
  .start-page .timeline-axis{display:none}
  .start-page .timeline-shell{padding-top:22px}

  .start-page .chart-panel canvas{border-radius:8px}
}