/* Dashboard v0.16 — last corrective pass on top of v0.15. */

/* v0.15 pushed the coloured outlines too far. Keep the depth in the corners,
 * but let the border itself go back to being mostly structural. */
.start-page .ravoa-surface-final{
  border-color:color-mix(in srgb,var(--line) 92%,var(--ravoa-accent) 8%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),var(--shadow-soft)!important;
}
:root[data-theme="dark"] .start-page .ravoa-surface-final{
  border-color:color-mix(in srgb,var(--line) 94%,var(--ravoa-accent) 6%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--shadow-soft)!important;
}
.start-page .ravoa-metric-final{
  border-color:color-mix(in srgb,var(--line) 91%,var(--ravoa-accent) 9%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent),0 3px 9px rgba(27,67,55,.025)!important;
}
:root[data-theme="dark"] .start-page .ravoa-metric-final{
  border-color:color-mix(in srgb,var(--line) 93%,var(--ravoa-accent) 7%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 4px 10px rgba(0,0,0,.10)!important;
}

/* Phase colour is an identifier, not the surface. Keep the dots distinctive,
 * but make the phase tiles much calmer than v0.15. */
.start-page .phase-strip-rich .phase-cell.ravoa-metric-final{
  background:
    radial-gradient(ellipse 170px 74px at -4% -10%,
      color-mix(in srgb,var(--ravoa-accent) 10%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 4%,transparent) 48%,
      transparent 78%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 99%,var(--ravoa-accent) 1%),var(--panel-2))!important;
  border-color:color-mix(in srgb,var(--line) 94%,var(--ravoa-accent) 6%)!important;
}
:root[data-theme="dark"] .start-page .phase-strip-rich .phase-cell.ravoa-metric-final{
  background:
    radial-gradient(ellipse 175px 76px at -4% -10%,
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 3%,transparent) 50%,
      transparent 80%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 98%,var(--ravoa-accent) 2%),var(--panel-2))!important;
  border-color:color-mix(in srgb,var(--line) 95%,var(--ravoa-accent) 5%)!important;
}

/* Planning and EMS history now use literally the same rail geometry. The only
 * difference is available width/data, not height, inset or segment shape. */
.start-page #timelineTrack.ravoa-mode-strip,
.start-page .energy-history-track-v12.ravoa-mode-strip{
  --ravoa-strip-height:24px!important;
  --ravoa-strip-inset:2px!important;
  --ravoa-strip-radius:12px!important;
  height:24px!important;
  border-radius:12px!important;
  padding:0!important;
  overflow:hidden!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment,
.start-page .energy-history-track-v12 .energy-history-segment-v12.ravoa-mode-segment{
  position:absolute!important;
  top:2px!important;
  bottom:2px!important;
  height:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.10)!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment b{
  font:700 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  white-space:nowrap!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment small{display:none!important}
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment:hover,
.start-page #timelineTrack .timeline-segment.ravoa-mode-segment:focus-visible,
.start-page .energy-history-track-v12 .energy-history-segment-v12.ravoa-mode-segment:hover,
.start-page .energy-history-track-v12 .energy-history-segment-v12.ravoa-mode-segment:focus-visible{
  transform:none!important;
}

/* Make the hero motion perceptible. It remains deliberately slow and smooth. */
.start-page .status-hero::before{
  opacity:.82!important;
  animation:ravoaHeroWaveV16 14s ease-in-out infinite alternate!important;
  will-change:transform,background-position;
}
@keyframes ravoaHeroWaveV16{
  0%{
    background-position:-28% 0,128% 0,-62% 0;
    transform:translate3d(-8%,0,0) scale(1.03);
  }
  50%{
    background-position:12% 0,70% 0,22% 0;
    transform:translate3d(0,0,0) scale(1.045);
  }
  100%{
    background-position:44% 0,-6% 0,128% 0;
    transform:translate3d(8%,0,0) scale(1.03);
  }
}
@media(prefers-reduced-motion:reduce){
  .start-page .status-hero::before{animation:none!important;transform:none!important}
}

@media(max-width:680px){
  /* Keep the mobile phase instrument on one row and calm the header tile too. */
  .start-page .phase-panel.ravoa-phase-final{
    grid-template-columns:minmax(84px,.92fr) repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  .start-page .phase-panel.ravoa-phase-final>.panel-head{
    min-height:54px!important;
    align-self:stretch!important;
    border-color:color-mix(in srgb,var(--line) 92%,var(--green) 8%)!important;
    border-left-color:color-mix(in srgb,var(--line) 76%,var(--green) 24%)!important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 98%,var(--green) 2%),var(--panel-2))!important;
  }
  .start-page .phase-panel.ravoa-phase-final .phase-cell{min-height:54px!important;height:54px!important}
  .start-page #timelineTrack.ravoa-mode-strip,
  .start-page .energy-history-track-v12.ravoa-mode-strip{height:22px!important;--ravoa-strip-height:22px!important}
  .start-page #timelineTrack .timeline-segment.ravoa-mode-segment b{font-size:8px!important}
}