/* Shared chart presentation. Geometry, data, and timing remain in app.js. */
.lens-canvas,
#demo-terminal .chart-wrap {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 8px;
  background: #091117;
  box-shadow: inset 0 0 0 1px #c1e2e80a;
}

.lens-canvas { height: 270px; }
#demo-terminal .chart-wrap { height: 310px; }
.demo-focus #demo-terminal .chart-wrap { height: 240px; min-height: 0; }

.lens-canvas::before,
#demo-terminal .chart-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: url("assets/oracle-chart-glass.webp") center / cover no-repeat;
  opacity: .28;
  pointer-events: none;
}

.lens-canvas .forecast-svg,
#demo-terminal .chart-wrap .forecast-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.forecast-svg text {
  font: 10px "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  fill: #a6b7c0;
}

.forecast-svg text.chart-caption {
  font-size: 9px;
  letter-spacing: .45px;
  fill: #b4c3c9;
}

.forecast-svg text.chart-axis { fill: #a6b7c0; }
.forecast-svg text.chart-value { font-size: 11px; fill: var(--ivory); }
.forecast-svg text.chart-strong { fill: var(--ice); }
.forecast-svg text.chart-bound { fill: var(--muted); }

.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 24px;
  padding: 5px 0;
  margin: 4px 0 10px;
  list-style: none;
  color: #b0bec5;
  font: 10px/1.5 "Courier New", monospace;
  letter-spacing: 0;
}

.forecast-legend li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.legend-swatch {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 0;
  border-top: 2px solid #c9d3d8;
}

.legend-median { border-top: 2px dashed var(--ice); }
.legend-replay { border-color: var(--champagne); }
.legend-range {
  flex-basis: 10px;
  width: 10px;
  height: 9px;
  margin-inline: 3px;
  border: 1px solid #bcecf16b;
  background: #bcecf12e;
}
.legend-short { display: none; }

@media (max-width: 760px) {
  .lens-canvas { height: 220px; }
  #demo-terminal .chart-wrap { height: 260px; }
  .demo-focus #demo-terminal .chart-wrap { height: 240px; }
  .lens-legend { order: 6; }

  .forecast-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: 24px;
    margin-top: 4px;
    padding-block: 4px;
    font-size: 10px;
  }
  .forecast-legend li { gap: 4px; }
  .legend-swatch { flex-basis: 13px; width: 13px; }
  .legend-range { flex-basis: 9px; width: 9px; margin-inline: 2px; }
  .legend-short { display: inline; }
  .legend-full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 360px) {
  .lens-canvas { height: 210px; }
  .forecast-legend { font-size: 9px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .lens-canvas { height: 210px; }
}

@media (max-height: 700px) {
  .demo-focus #demo-terminal .chart-wrap { height: 220px; }
}

@media (forced-colors: active) {
  .lens-canvas,
  #demo-terminal .chart-wrap {
    background: Canvas;
    box-shadow: none;
  }
  .lens-canvas::before,
  #demo-terminal .chart-wrap::before { display: none; }

  .forecast-svg text,
  .forecast-svg text.chart-caption,
  .forecast-svg text.chart-axis,
  .forecast-svg text.chart-strong,
  .forecast-svg text.chart-value,
  .forecast-svg text.chart-bound { fill: CanvasText; opacity: 1; }
  .forecast-svg .chart-grid { stroke: GrayText; }
  .forecast-svg .chart-history-line,
  .forecast-svg .chart-range-edge,
  .forecast-svg .chart-seam { stroke: CanvasText; }
  .forecast-svg .chart-forecast-line { stroke: Highlight; }
  .forecast-svg .chart-replay-line { stroke: LinkText; }
  .forecast-svg .chart-wash { fill: transparent; opacity: 0; }
  .forecast-svg .chart-endpoint,
  .forecast-svg .chart-now-pill,
  .forecast-svg .chart-close-pill { fill: Canvas; stroke: CanvasText; }
  .forecast-svg [filter] { filter: none; }

  .forecast-legend { color: CanvasText; }
  .legend-swatch { border-color: CanvasText; }
  .legend-median { border-color: Highlight; }
  .legend-replay { border-color: LinkText; }
  .legend-range { background: Canvas; border-color: CanvasText; }
}