/* Ravoa shared UI primitives.
 * New/current dashboard surfaces opt into these classes instead of reimplementing
 * the visual language per page. Light and dark deliberately get separate depth.
 */

.ravoa-surface{
  --ravoa-accent:var(--green);
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 560px 220px at -2% -7%,
      color-mix(in srgb,var(--ravoa-accent) 34%,transparent) 0,
      color-mix(in srgb,var(--ravoa-accent) 19%,transparent) 28%,
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent) 49%,
      transparent 73%),
    radial-gradient(ellipse 390px 158px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 10%,transparent),transparent 76%),
    radial-gradient(ellipse 300px 150px at 100% 100%,
      color-mix(in srgb,var(--ravoa-accent) 10%,transparent),transparent 68%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,var(--ravoa-accent) 3%),var(--panel))!important;
}
:root[data-theme="dark"] .ravoa-surface{
  background:
    radial-gradient(ellipse 590px 235px at -2% -7%,
      color-mix(in srgb,var(--ravoa-accent) 29%,transparent) 0,
      color-mix(in srgb,var(--ravoa-accent) 15%,transparent) 30%,
      color-mix(in srgb,var(--ravoa-accent) 6%,transparent) 51%,
      transparent 75%),
    radial-gradient(ellipse 410px 166px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent),transparent 78%),
    radial-gradient(ellipse 320px 160px at 100% 100%,
      color-mix(in srgb,var(--ravoa-accent) 11%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 95%,var(--ravoa-accent) 5%),var(--panel))!important;
}
.ravoa-surface[data-ravoa-accent="green"]{--ravoa-accent:var(--green)}
.ravoa-surface[data-ravoa-accent="cyan"]{--ravoa-accent:var(--cyan)}
.ravoa-surface[data-ravoa-accent="blue"]{--ravoa-accent:var(--blue)}
.ravoa-surface[data-ravoa-accent="yellow"]{--ravoa-accent:var(--yellow)}
.ravoa-surface[data-ravoa-accent="red"]{--ravoa-accent:var(--red)}
.ravoa-surface[data-ravoa-accent="purple"]{--ravoa-accent:var(--purple)}
.ravoa-surface[data-ravoa-accent="orange"]{--ravoa-accent:var(--orange)}

/* Compact cards use the same corner language but at a smaller scale. */
.ravoa-metric{
  --ravoa-accent:var(--green);
  background:
    radial-gradient(ellipse 230px 100px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 24%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 9%,transparent) 43%,
      transparent 75%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,var(--ravoa-accent) 2%),var(--panel))!important;
}
:root[data-theme="dark"] .ravoa-metric{
  background:
    radial-gradient(ellipse 240px 105px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 20%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent) 45%,
      transparent 77%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,var(--ravoa-accent) 4%),var(--panel))!important;
}
.ravoa-metric[data-ravoa-accent="green"]{--ravoa-accent:var(--green)}
.ravoa-metric[data-ravoa-accent="cyan"]{--ravoa-accent:var(--cyan)}
.ravoa-metric[data-ravoa-accent="yellow"]{--ravoa-accent:var(--yellow)}
.ravoa-metric[data-ravoa-accent="purple"]{--ravoa-accent:var(--purple)}
.ravoa-metric[data-ravoa-accent="blue"]{--ravoa-accent:var(--blue)}
.ravoa-metric[data-ravoa-accent="orange"]{--ravoa-accent:var(--orange)}

/* Reusable colour-only decision strip. */
.ravoa-mode-strip{
  --ravoa-strip-height:20px;
  --ravoa-strip-inset:2px;
  --ravoa-strip-radius:10px;
  position:relative;
  height:var(--ravoa-strip-height);
  border-radius:var(--ravoa-strip-radius);
  overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel-2) 88%,#fff 12%),
    color-mix(in srgb,var(--panel-2) 97%,#000 3%));
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--blue) 18%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent),inset 0 -1px 0 rgba(0,0,0,.06);
}
.ravoa-mode-strip--planning{
  --ravoa-strip-height:38px;
  --ravoa-strip-inset:3px;
  --ravoa-strip-radius:11px;
}
.ravoa-mode-strip--compact{
  --ravoa-strip-height:22px;
  --ravoa-strip-inset:2px;
  --ravoa-strip-radius:11px;
}
:root[data-theme="dark"] .ravoa-mode-strip{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel-2) 93%,#fff 7%),
    color-mix(in srgb,var(--panel-2) 94%,#000 6%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.18);
}
.ravoa-mode-segment{
  position:absolute;
  top:var(--ravoa-strip-inset);
  bottom:var(--ravoa-strip-inset);
  min-width:2px;
  border-radius:calc(var(--ravoa-strip-radius) - 3px);
  cursor:help;
  transition:filter .12s ease,box-shadow .12s ease;
  box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.10);
}
.ravoa-mode-segment:hover,.ravoa-mode-segment:focus-visible{
  filter:saturate(1.16) brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.18);
  outline:none;
  z-index:2;
}

/* Use on both compact history segments and the large planning blocks. */
.ravoa-mode-gradient.self-use,.ravoa-mode-segment.self-use{
  background:linear-gradient(180deg,color-mix(in srgb,var(--green) 78%,#fff 22%),var(--green) 54%,color-mix(in srgb,var(--green) 90%,#000 10%));
}
.ravoa-mode-gradient.charge,.ravoa-mode-segment.charge{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 78%,#fff 22%),var(--cyan) 54%,color-mix(in srgb,var(--cyan) 90%,#000 10%));
}
.ravoa-mode-gradient.hold,.ravoa-mode-segment.hold{
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 78%,#fff 22%),var(--blue) 54%,color-mix(in srgb,var(--blue) 90%,#000 10%));
}
.ravoa-mode-gradient.export,.ravoa-mode-segment.export{
  background:linear-gradient(180deg,color-mix(in srgb,var(--orange) 78%,#fff 22%),var(--orange) 54%,color-mix(in srgb,var(--orange) 90%,#000 10%));
}
.ravoa-mode-gradient.curtail,.ravoa-mode-segment.curtail{
  background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 76%,#fff 24%),var(--yellow) 54%,color-mix(in srgb,var(--yellow) 88%,#000 12%));
}

.ravoa-section-accent{
  border-left:3px solid color-mix(in srgb,var(--ravoa-accent,var(--green)) 78%,var(--line) 22%);
  padding-left:8px;
}

/* v0.15 shared finish primitives: stronger corner depth without replacing the
 * v0.13/v0.14 contract layers above. Future pages can opt in to these directly. */
.ravoa-surface.ravoa-surface-final{
  background:
    radial-gradient(ellipse 690px 270px at -5% -12%,
      color-mix(in srgb,var(--ravoa-accent) 41%,transparent) 0,
      color-mix(in srgb,var(--ravoa-accent) 22%,transparent) 29%,
      color-mix(in srgb,var(--ravoa-accent) 9%,transparent) 51%,
      transparent 75%),
    radial-gradient(ellipse 390px 158px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 10%,transparent),transparent 76%),
    radial-gradient(ellipse 420px 190px at 102% 108%,
      color-mix(in srgb,var(--ravoa-accent) 15%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,var(--ravoa-accent) 4%),var(--panel))!important;
}
:root[data-theme="dark"] .ravoa-surface.ravoa-surface-final{
  background:
    radial-gradient(ellipse 720px 285px at -5% -12%,
      color-mix(in srgb,var(--ravoa-accent) 34%,transparent) 0,
      color-mix(in srgb,var(--ravoa-accent) 18%,transparent) 31%,
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent) 53%,
      transparent 77%),
    radial-gradient(ellipse 410px 166px at 0 0,
      color-mix(in srgb,var(--ravoa-accent) 8%,transparent),transparent 78%),
    radial-gradient(ellipse 440px 200px at 102% 108%,
      color-mix(in srgb,var(--ravoa-accent) 14%,transparent),transparent 73%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,var(--ravoa-accent) 6%),var(--panel))!important;
}
.ravoa-metric.ravoa-metric-final{
  background:
    radial-gradient(ellipse 280px 120px at -3% -8%,
      color-mix(in srgb,var(--ravoa-accent) 31%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 12%,transparent) 46%,
      transparent 78%),
    radial-gradient(ellipse 145px 76px at 102% 110%,
      color-mix(in srgb,var(--ravoa-accent) 9%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,var(--ravoa-accent) 3%),var(--panel))!important;
}
:root[data-theme="dark"] .ravoa-metric.ravoa-metric-final{
  background:
    radial-gradient(ellipse 290px 124px at -3% -8%,
      color-mix(in srgb,var(--ravoa-accent) 25%,transparent),
      color-mix(in srgb,var(--ravoa-accent) 10%,transparent) 47%,
      transparent 79%),
    radial-gradient(ellipse 150px 80px at 102% 110%,
      color-mix(in srgb,var(--ravoa-accent) 9%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 95%,var(--ravoa-accent) 5%),var(--panel))!important;
}