/* Dashboard v0.15 — final-candidate polish on top of v0.14. */

/* Shared final surfaces: stronger corners, still theme-aware and calm. */
.start-page .ravoa-surface-final{
  border-color:color-mix(in srgb,var(--line) 72%,var(--ravoa-accent) 28%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),var(--shadow-soft)!important;
}
:root[data-theme="dark"] .start-page .ravoa-surface-final{
  border-color:color-mix(in srgb,var(--line) 68%,var(--ravoa-accent) 32%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),var(--shadow-soft)!important;
}
.start-page .ravoa-metric-final{
  border-color:color-mix(in srgb,var(--line) 76%,var(--ravoa-accent) 24%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent),0 4px 12px rgba(27,67,55,.035)!important;
}
:root[data-theme="dark"] .start-page .ravoa-metric-final{
  border-color:color-mix(in srgb,var(--line) 70%,var(--ravoa-accent) 30%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.13)!important;
}

/* Net phases join the same surface family as the five live metrics. */
.start-page .phase-panel.ravoa-phase-final{--ravoa-accent:var(--green)}
.start-page .phase-strip-rich .phase-cell.ravoa-metric-final{overflow:hidden;position:relative}
.start-page .phase-strip-rich .phase-cell.l1{--ravoa-accent:var(--green)}
.start-page .phase-strip-rich .phase-cell.l2{--ravoa-accent:var(--purple)}
.start-page .phase-strip-rich .phase-cell.l3{--ravoa-accent:var(--blue)}
.start-page .phase-strip-rich .phase-cell.phase-balance{--ravoa-accent:var(--orange)}

/* Planning and EMS history are the same rail component in two sizes. */
.start-page #timelineTrack.ravoa-mode-strip.ravoa-mode-strip--planning{
  height:38px!important;
  border-radius:11px!important;
  overflow:hidden!important;
  padding:0!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment{
  top:3px!important;
  bottom:3px!important;
  height:auto!important;
  border:0!important;
  border-radius:7px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  line-height:1.02;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(0,0,0,.11)!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment + .timeline-segment.ravoa-mode-segment{
  box-shadow:inset 1px 0 rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(0,0,0,.11)!important;
}
.start-page .energy-history-track-v12.ravoa-mode-strip.ravoa-mode-strip--compact{
  height:22px!important;
  border-radius:11px!important;
  overflow:hidden!important;
}
.start-page .energy-history-track-v12 .energy-history-segment-v12.ravoa-mode-segment{
  top:3px!important;
  bottom:3px!important;
  border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(0,0,0,.11)!important;
}

/* Give charts enough real CSS height for crisp axes without sacrificing one-screen desktop fit. */
.start-page #energyChart,.start-page #priceChart{
  display:block;
  width:100%!important;
  image-rendering:auto;
}
@media(min-width:1280px){
  .start-page #energyChart,.start-page #priceChart{height:174px!important}
}

/* Hero: subtle living energy wave; accessibility disables motion when requested. */
.start-page .status-hero::before{
  inset:-12% -18%!important;
  background:
    radial-gradient(ellipse 42% 76% at 18% 46%,rgba(255,255,255,.075),transparent 72%),
    radial-gradient(ellipse 38% 92% at 72% 55%,color-mix(in srgb,var(--hero-mode-color,var(--green)) 18%,transparent),transparent 72%),
    linear-gradient(108deg,transparent 12%,rgba(255,255,255,.018) 31%,rgba(255,255,255,.075) 47%,rgba(255,255,255,.022) 62%,transparent 82%)!important;
  background-size:125% 100%,145% 110%,185% 100%!important;
  animation:ravoaHeroWave 22s ease-in-out infinite alternate;
  will-change:background-position,transform;
}
@keyframes ravoaHeroWave{
  0%{background-position:-10% 0,115% 0,-45% 0;transform:translate3d(-1.4%,0,0) scale(1.015)}
  50%{background-position:15% 0,70% 0,30% 0;transform:translate3d(.4%,0,0) scale(1.025)}
  100%{background-position:35% 0,15% 0,105% 0;transform:translate3d(1.6%,0,0) scale(1.015)}
}
@media(prefers-reduced-motion:reduce){
  .start-page .status-hero::before{animation:none!important;transform:none!important}
}

/* Mobile Netfasen is one horizontal instrument row: label + L1 + L2 + L3. */
@media(max-width:680px){
  .start-page .phase-panel.ravoa-phase-final{
    display:grid!important;
    grid-template-columns:minmax(82px,.95fr) repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    align-items:stretch!important;
    padding:8px!important;
  }
  .start-page .phase-panel.ravoa-phase-final>.panel-head{
    grid-column:1!important;
    margin:0!important;
    padding:6px 6px 5px!important;
    min-width:0;
    border:1px solid color-mix(in srgb,var(--line) 72%,var(--green) 28%)!important;
    border-left:3px solid color-mix(in srgb,var(--green) 78%,var(--line) 22%)!important;
    border-radius:9px!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 94%,var(--green) 6%),var(--panel-2))!important;
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }
  .start-page .phase-panel.ravoa-phase-final>.panel-head h2{font-size:11px!important;line-height:1.05;white-space:normal!important}
  .start-page .phase-panel.ravoa-phase-final>.panel-head small{font-size:7px!important;line-height:1.12!important;text-align:left!important;margin:0!important}
  .start-page .phase-panel.ravoa-phase-final .phase-strip.phase-strip-rich{display:contents!important}
  .start-page .phase-panel.ravoa-phase-final .phase-cell{
    min-width:0!important;
    min-height:54px!important;
    padding:5px 5px!important;
    gap:3px!important;
    border-radius:9px!important;
    display:grid!important;
    grid-template-columns:7px minmax(0,1fr)!important;
    align-content:center!important;
  }
  .start-page .phase-panel.ravoa-phase-final .phase-cell>div{min-width:0}
  .start-page .phase-panel.ravoa-phase-final .phase-cell span{font-size:8px!important}
  .start-page .phase-panel.ravoa-phase-final .phase-cell strong{font-size:12px!important;white-space:nowrap!important}
  .start-page .phase-panel.ravoa-phase-final .phase-cell>small{display:none!important}
  .start-page .phase-panel.ravoa-phase-final .phase-balance{display:none!important}
  .start-page #timelineTrack.ravoa-mode-strip.ravoa-mode-strip--planning{height:34px!important}
  .start-page #timelineTrack .timeline-segment.ravoa-mode-segment{top:3px!important;bottom:3px!important;font-size:9px!important;padding:0 5px!important}
  .start-page .energy-history-track-v12.ravoa-mode-strip.ravoa-mode-strip--compact{height:20px!important}
  .start-page #energyChart,.start-page #priceChart{height:235px!important}
}