/* info-boxes.css -- extracted verbatim from the page's inline <style> block
   (v3.0.0 frontend extraction). Palette tokens (__CHART_SURFACE__ etc.)
   became var(--...) refs; nothing else changed. */

/* Info strip: the 1yr range, correlation and up/down-volume boxes collapse
   to labelled chips (v3.0.0). Tapping one expands that box over the top of
   the chart -- the chart's own height must never change when a reading is
   opened. One expanded at a time. */
#infoStrip {
  flex: 0 0 var(--h-strip); display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4); box-sizing: border-box;
  background: var(--chrome); border-bottom: 1px solid var(--border);
}
#infoStrip.hidden { display: none; }
.strip-chip {
  min-height: 28px; padding: 0 var(--sp-3);
  /* 28px: the strip is 36px tall, so the standard 44px target cannot fit;
     the chips sit inside a 36px band that is itself entirely tappable. */
  font: inherit; font-size: var(--fs-sm); color: var(--muted);
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
}
.strip-chip[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
/* No data for this stock -- see syncStripChips() in js/info-strip.js. */
.strip-chip:disabled { opacity: 0.4; }
#infoExpanded {
  position: absolute; left: var(--w-rail); right: 0;
  top: calc(var(--h-topbar) + var(--h-tabs) + var(--h-strip));
  z-index: 25; padding: var(--sp-3) var(--sp-4);
  background: var(--panel); border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
#infoExpanded[hidden] { display: none; }
#infoExpanded > div { display: none; }
#infoExpanded > div.open { display: flex; }
/* `.hidden` means "this box has no data for the current stock" and must beat
   `.open`, or tapping the chip expands an empty bordered panel over the chart.
   All three boxes are matched at the same specificity here -- #rangeBar had a
   #infoExpanded-prefixed rule further down that happened to win while
   #volumeBox's bare `.hidden` lost to `#infoExpanded > div.open`. The chip
   itself is disabled from JS (see info-strip.js), so this is the backstop. */
#infoExpanded > div.hidden,
#infoExpanded > div.hidden.open { display: none; }
/* Each box filled a fraction of the old shared row; in the expanded panel it
   gets the whole width. */
#infoExpanded #rangeBar,
#infoExpanded #correlationBox,
#infoExpanded #volumeBox { width: 100%; min-width: 0; flex: 1 1 auto; }
#infoExpanded #rangeBar.hidden { display: none; }

/* 52-week (1yr, as-of-cutoff) range bar: a neutral track flanked by the
   window's low/high Close, with an arrow marking where the cutoff Close
   sits between them, and %-change-from-low labels (green/red) under the
   arrow and under the high value. */
#rangeBar {
  position: relative;
  /* 1/6 of the row, flush left -- not a full-width row -- but with a real
     floor, the same wrap-instead-of-squash treatment #correlationBox and
     #volumeBox got in Issue #16. A bare percentage has no lower bound: on
     a narrow window this collapsed to 40px (measured at a 620px effective
     page width) and 20px (at 480px), crushing the track and all four
     numbers into an unreadable sliver instead of wrapping. Below the
     floor the row wraps, exactly as it already does for the other two. */
  width: 16.6667%; min-width: 200px;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  box-sizing: border-box;
  padding: 26px 10px 8px;
}
#rangeBar.hidden { display: none; }
#rangeBar .rb-caption {
  position: absolute; top: 6px; left: 10px; font-size: var(--fs-micro); color: var(--muted);
}
#rangeBar .rb-end { display: flex; flex-direction: column; min-width: 40px; }
#rangeBar .rb-end-low { align-items: flex-end; }
#rangeBar .rb-end-high { align-items: flex-start; }
#rangeBar .rb-end-value { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
#rangeBar .rb-end-pct { font-size: var(--fs-micro); font-weight: 600; margin-top: 3px; white-space: nowrap; }
/* min-width so the track stays a readable bar rather than a dot once the
   two end blocks have taken their share of a narrow #rangeBar. */
#rangeBar .rb-track { position: relative; flex: 1 1 auto; min-width: 70px; height: 6px; border-radius: 3px; background: var(--grid); }
#rangeBar .rb-marker {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
/* The marker's two text labels slide horizontally, independently of the
   arrow, via --rb-label-dx (set by updateRangeBar). The arrow has to stay
   centred on the real price position, but the labels around it are ~44px
   wide and would otherwise collide with the low/high end values whenever
   the marker sits near either end of the track -- which is the *normal*
   case here, not an edge one: trend-template condition 4 only passes
   stocks within 25% of their 52-week high, so the marker is above 85% of
   the track for most of what this page ever shows. */
#rangeBar .rb-marker-value, #rangeBar .rb-marker-pct {
  transform: translateX(var(--rb-label-dx, 0px));
}
#rangeBar .rb-marker-value { font-size: var(--fs-micro); font-weight: 700; color: var(--text); white-space: nowrap; margin-bottom: 2px; }
#rangeBar .rb-marker-arrow {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--text);
}
#rangeBar .rb-marker-pct { font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; margin-top: 3px; }

/* Correlation box: Pearson correlation of daily % price change between
   the current ticker and whichever market index is checked (see
   CandlestickChartViewer.correlations()), over 2y/1y/6m/3m/1m trailing
   windows. Fills whatever width #rangeBar leaves in the shared row.
   Cells shade blue for positive / orange for negative correlation, with
   saturation set by magnitude (see correlationStyle() below) -- color and
   text both come from JS since the shade depends on the value, not just
   whether it's positive or negative. Empty (no background, no text) means
   "no index selected" or "not enough history for this window", per spec
   -- never a computed placeholder like 0. */
#correlationBox {
  position: relative;
  flex: 1 1 auto; min-width: 280px;
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box;
  padding: 26px 14px 8px;
}
#correlationBox .corr-caption {
  position: absolute; top: 6px; left: 14px; font-size: var(--fs-micro); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px);
}
#correlationBox .corr-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 44px; padding: 4px 8px; border-radius: 4px;
  box-sizing: border-box; transition: background-color 0.15s ease;
}
#correlationBox .corr-period {
  font-size: var(--fs-micro); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
}
#correlationBox .corr-value { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Up/down-day volume box: sits to the right of the correlation box,
   inside the shared #topInfoBar row, showing for the trailing 5/10/20
   trading days (see CandlestickChartViewer.updown_volume()) how much
   volume traded on up-days (Close > prior Close -- the standard Up/Down
   Volume Ratio definition, deliberately NOT the chart's own Close >= Open
   candle coloring; see Issue #18) vs down-days -- a quick "excess supply
   or excess demand" read. A day closing exactly flat is neither, and is
   excluded from both sides. Each period renders two split bars: total volume (top) and
   average volume per day (bottom), each divided into a green (up-day)
   portion and a red (down-day) portion sized by that pair's share of the
   total (not by whichever side is bigger) -- e.g. 12 up / 4 down splits
   75%/25%. The raw values flank each bar (up-day value on the left,
   down-day value on the right); no % figure is shown. A period renders
   as "Not enough history" (no bars) rather than a zero-filled one when
   the cutoff is too close to the stock's listing date.

   flex-grow is higher than #correlationBox's (this box has 3 columns x 2
   bars to fit vs. 5 simple cells) and min-width is a real floor, not 0 --
   paired with #topInfoBar's `flex-wrap`, that means a narrow window wraps
   this box onto its own full-width line below rangeBar+correlationBox
   instead of flex-shrinking its bars down past the point they're still
   visible (which is what a `min-width: 0` box does). */
#volumeBox {
  position: relative;
  flex: 2 1 360px; min-width: 360px;
  display: flex; align-items: center;
  box-sizing: border-box;
  padding: 24px 16px 10px;
}
#volumeBox.hidden { display: none; }
#volumeBox .vol-caption {
  position: absolute; top: 6px; left: 16px; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px);
}
#volPeriods { display: flex; flex-wrap: wrap; gap: 10px 22px; width: 100%; }
.vol-period { flex: 1 1 130px; min-width: 130px; display: flex; flex-direction: column; gap: 4px; }
.vol-period-label {
  font-size: 11px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.vol-period-empty { font-size: 11px; color: var(--muted); }
.vol-bar-row { display: flex; align-items: center; gap: 6px; }
.vol-bar-value { font-size: 11px; font-weight: 700; white-space: nowrap; }
.vol-bar-value.vol-left { color: var(--up); }
.vol-bar-value.vol-right { color: var(--down); }
.vol-split-track {
  position: relative; display: flex; flex: 1 1 auto; min-width: 40px; height: 10px;
  border-radius: 2px; background: var(--grid); overflow: hidden;
}
.vol-split-up { height: 100%; background: var(--up); }
.vol-split-down { height: 100%; background: var(--down); }

/* Backtest outcome box -- lives in the dock now, beside the step controls
   that change it (v3.0.0). Return / vs-index / excess / elapsed inline; max
   drawdown + drawdown-vs-entry behind #btOutMore, expanding upward. */
#backtestOutcomeBox { display: flex; align-items: center; gap: var(--sp-3); }
#backtestOutcomeBox[hidden] { display: none; }
.bt-out-caption { display: none; }  /* redundant beside the step controls */
.bt-out-cell { display: flex; flex-direction: column; line-height: 1.2; }
.bt-out-k { font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bt-out-v { font-size: var(--fs-base); font-weight: 700; color: var(--text); white-space: nowrap; }
.bt-out-v.bt-pos { color: var(--up); }
.bt-out-v.bt-neg { color: var(--down); }
#btOutOverflow {
  position: absolute; bottom: var(--h-dock); right: var(--sp-4);
  display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
#btOutOverflow[hidden] { display: none; }
#measureReadout { color: var(--text); font-weight: 600; }