/* Dashboard v0.11 — layout repair after the v0.10 visual review.
 * This layer deliberately neutralises the parts of v0.10 that looked like
 * stacked polish instead of one composed dashboard. No EMS behaviour changes.
 */

/* Panel family: one quiet accent cue, no coloured title boxes. */
.start-page .panel>.panel-head.v09-panel-head{
  margin:0 0 6px!important;
  padding:1px 0 5px 8px!important;
  border-radius:0!important;
  border-left:3px solid color-mix(in srgb,var(--panel-accent) 72%,var(--line) 28%);
  background:transparent!important;
  box-shadow:none!important;
}
:root[data-theme="dark"] .start-page .panel>.panel-head.v09-panel-head{background:transparent!important;box-shadow:none!important}

/* Give the weather card room instead of giving most of the first row to the hero. */
@media(min-width:1280px){
  .start-page .dashboard-intro{grid-template-columns:minmax(0,1.45fr) minmax(520px,.90fr)}
}

/* Light weather should stay a clean instrument, not become a mustard panel. */
:root:not([data-theme="dark"]) .start-page .weather-card{
  background:
    radial-gradient(circle at 8% 18%,color-mix(in srgb,var(--weather-accent) 12%,transparent),transparent 31%),
    linear-gradient(145deg,color-mix(in srgb,var(--panel) 97%,var(--weather-accent) 3%),var(--panel))!important;
  border-color:color-mix(in srgb,var(--weather-accent) 24%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),var(--shadow-soft)!important;
}
:root:not([data-theme="dark"]) .start-page .weather-days-v09 .weather-day{
  background:linear-gradient(180deg,color-mix(in srgb,#fff 96%,var(--forecast-accent) 4%),color-mix(in srgb,var(--panel-2) 96%,var(--forecast-accent) 4%))!important;
  border-color:color-mix(in srgb,var(--forecast-accent) 30%,var(--line))!important;
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--forecast-accent) 42%,transparent),0 2px 7px rgba(39,75,64,.035)!important;
}
.start-page .weather-days-v09 .weather-day small{display:block}
.start-page .weather-days-v09 .weather-day .temps{margin-top:1px}
.start-page .weather-days-v09 .weather-day .rain{margin-top:2px}

/* Planning is one rail. The old label column and nested/inset frame disappear. */
.start-page .planning-panel .timeline-shell.timeline-24h{padding:0!important;margin-top:4px!important;display:block!important}
.start-page .planning-panel .timeline-axis-v07,
.start-page .planning-panel .timeline-row-v07.future-row{display:block!important}
.start-page .planning-panel .timeline-axis-v07>span:first-child,
.start-page .planning-panel .timeline-row-v07.future-row .timeline-row-label{display:none!important}
.start-page .planning-panel .timeline-axis-scale{position:relative;height:18px;width:100%}
.start-page .planning-panel .timeline-row-v07.future-row .timeline-track{
  position:relative;height:38px!important;width:100%;overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--line) 78%,var(--blue) 22%)!important;
  outline:0!important;border-radius:10px!important;background:var(--panel-2)!important;
  box-shadow:none!important;
}
.start-page .planning-panel .timeline-row-v07.future-row .timeline-segment{
  top:0!important;bottom:0!important;height:auto!important;border:0!important;border-radius:0!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.28)!important;padding:0 8px;
}
.start-page .planning-panel .planning-pill{padding:1px 4px;border:0;background:transparent;box-shadow:none}
.start-page .planning-panel .timeline-legend{margin-top:5px}

/* Economics must not visually call a loss a benefit. */
.start-page .economic-highlight[data-economic-tone="negative"]{
  background:color-mix(in srgb,var(--red) 10%,var(--panel-2))!important;
  border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));
}
.start-page .economic-highlight[data-economic-tone="positive"]{
  background:color-mix(in srgb,var(--green) 10%,var(--panel-2))!important;
  border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));
}
.start-page .economic-highlight[data-economic-tone="neutral"]{
  background:var(--panel-2)!important;border:1px solid var(--line);
}
.start-page .dashboard-grid>.panel[data-economic-tone="negative"]{--panel-accent:var(--red)}
.start-page .dashboard-grid>.panel[data-economic-tone="positive"]{--panel-accent:var(--green)}
.start-page .dashboard-grid>.panel[data-economic-tone="neutral"]{--panel-accent:var(--muted)}

/* EMS history is an actual decision strip inside the canvas; legend stays explicit. */
.start-page .energy-legend [data-series="ems"]{font-weight:800}
.start-page .energy-legend [data-series="ems"] i{
  width:18px;height:8px;border-radius:3px;
  background:linear-gradient(90deg,var(--green) 0 42%,var(--cyan) 42% 58%,var(--blue) 58% 76%,var(--orange) 76% 100%);
}

/* Mobile is a separate composition, not a squeezed desktop. */
@media(max-width:680px){
  .start-page .page{padding:10px 10px 52px}
  .start-page .topbar{display:grid;grid-template-columns:1fr auto;gap:7px 8px;padding-bottom:7px}
  .start-page .brand-mark{width:36px;height:36px;border-radius:9px}
  .start-page .brand-copy h1{font-size:23px}
  .start-page .brand-copy p{font-size:10px}
  .start-page .top-actions{grid-column:1/-1;width:100%;display:grid;gap:3px}
  .start-page .nav-with-theme{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:5px;width:100%}
  .start-page .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
  .start-page .nav a{padding:8px 3px;font-size:10.5px;text-align:center;border-radius:8px}
  .start-page .theme-toggle{width:38px;padding:8px 0;font-size:13px}
  .start-page .status{text-align:right;font-size:8.5px}

  .start-page .status-hero{min-height:142px;padding:17px 14px 14px 62px}
  .start-page .hero-orb{left:14px;width:38px;height:38px;font-size:18px}
  .start-page .status-hero h2{font-size:25px;margin-top:4px}
  .start-page .status-hero p{font-size:11px;line-height:1.28}
  .start-page .status-hero small{font-size:8px}

  .start-page .weather-card.weather-rich{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;
    gap:8px!important;padding:12px!important;
  }
  .start-page .weather-card .eyebrow{grid-column:1!important}
  .start-page .weather-card .weather-top{
    grid-column:1!important;display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;
    gap:8px!important;padding:0 0 8px!important;border-right:0!important;
    border-bottom:1px solid color-mix(in srgb,var(--weather-accent) 22%,var(--line));
  }
  .start-page .weather-card .weather-top>div:first-child{min-width:0!important}
  .start-page .weather-now .weather-icon{font-size:27px}.start-page .weather-now strong{font-size:27px}
  .start-page .weather-condition{font-size:9.5px}
  .start-page .v10-weather-today{grid-template-columns:1fr 1fr!important;gap:2px 6px!important}
  .start-page .v10-weather-today strong{grid-column:1/-1;font-size:8px!important}
  .start-page .v10-weather-today span{font-size:8px!important;white-space:normal!important}
  .start-page .weather-hours.weather-days-v09{
    grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;
  }
  .start-page .weather-days-v09 .weather-day{min-height:68px!important;padding:6px 7px!important;align-items:flex-start!important}
  .start-page .weather-days-v09 .weather-day time{font-size:9px!important}
  .start-page .weather-days-v09 .weather-day b{font-size:14px!important}
  .start-page .weather-days-v09 .weather-day small,.start-page .weather-days-v09 .weather-day em{font-size:8.5px!important}

  .start-page .panel>.panel-head.v09-panel-head{margin:0 0 6px!important;padding:1px 0 5px 7px!important}
  .start-page .planning-panel{padding:12px 10px}
  .start-page .planning-panel>.planning-summary{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px;margin:3px 0 5px}
  .start-page .planning-panel .timeline-axis-scale{height:17px}
  .start-page .planning-panel .timeline-row-v07.future-row .timeline-track{height:34px!important}
  .start-page .planning-panel .timeline-row-v07.future-row .timeline-segment{padding:0 5px;font-size:9px}
  .start-page .planning-panel .v07-axis-tick{font-size:8.5px}
  .start-page .timeline-legend{font-size:8.5px;gap:6px}

  .start-page .chart-panel canvas,.start-page #energyChart,.start-page #priceChart{height:235px}
}