/* ══════════════════════════════════════════════════════════════════════════
   chart.css — the shared chart's own styles, loaded beside chart.js.

   ⚠⚠ ITS OWN FILE BECAUSE THE CHART IS SHARED. app.css belongs to the reader's
   app and admin.css to the back office; a chart that lives in both cannot have
   its colours in either. Both hosts already define the TOKENS this uses
   (--up, --down-ink, --cd-*, --ink-*, --seam*, --mono) so this adds no palette
   of its own — it only spends theirs.

   ⚠⚠ WHAT WAS VALIDATED, AND THE ONE THING THAT CANNOT BE FIXED.
   Four things share one plot: green support bands, red resistance bands, a
   green/red EMA and the app's filmic candles. Run through the dataviz
   validator (dark, surface #08090d):

       zones + EMA         normal-vision separation  PASS  worst ΔE 31.7
                           contrast vs surface       PASS  all >= 3:1
       + the candles       normal-vision separation  PASS  worst ΔE 16.1
                           red/green under deutan/protan   FAIL, ΔE 2.8

   That last line is not fixable by picking better hues and it was tried — nine
   green/red pairs were swept, and every one that separated under CVD did it by
   making the green light and the red dark, which then collided with the candle
   of the same hue. Green/red IS the axis red-green colour blindness sits on. So
   identity is carried four more ways and never by colour alone:

     1. POSITION  support is below price, resistance above. That is the meaning.
     2. SHAPE     a zone is a full-width HORIZONTAL band; the EMA never is; a
                  candle is a narrow vertical mark. None is confusable.
     3. LETTER    every axis label is tagged S, R or E, in INK.
     4. WORDS     the stat strip says entry, stop, target and the verdict in
                  figures and English.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the strip above the plot ───────────────────────────────────────────── */
.tbc-stats{
  display:grid;gap:1px;background:var(--seam);
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border-block:1px solid var(--seam);
}
.tbc-stat{background:var(--ground);padding:12px 14px;min-width:0}
.tbc-stat__k{
  font:400 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tbc-stat__v{
  display:block;margin-top:7px;
  font:500 17px/1.1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;color:var(--ink);
}
.tbc-stat__a{
  display:block;margin-top:5px;font:400 11px/1.35 var(--sans);color:var(--ink-4);
}
/* ⚠ THE TONE IS ON THE VALUE, NOT THE WHOLE CELL. A tinted panel reads as an
   alert; a tinted number reads as a number with a direction. */
.tbc-stat--up   .tbc-stat__v{color:var(--up-ink)}
.tbc-stat--down .tbc-stat__v{color:var(--down-ink)}

/* ── the read-out ───────────────────────────────────────────────────────── */
.tbc-read{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:10px 0 12px;min-height:34px;
}
.tbc__when{font:400 12px/1.4 var(--mono);color:var(--ink-2)}
.tbc__ohlc{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font:400 12.5px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);
}
.tbc__ohlc b{font-weight:400;color:var(--ink-4);margin-left:7px}
.tbc__ohlc b:first-child{margin-left:0}
.tbc__ohlc[data-dir="up"] .tbc__c{color:var(--up-ink)}
.tbc__ohlc[data-dir="dn"] .tbc__c{color:var(--down-ink)}
/* ⚠ `.tbc__e` AND `.tbc__ek` ARE GONE — the read-out no longer prints the EMA's
   value. `data-ema` survives on the row and is what tints the CLOSE, so the strip
   still says which side of the line the bar closed on without spending a number
   to do it. */

/* ── the plot ───────────────────────────────────────────────────────────────
   ⚠⚠ THE AXIS LIVES INSIDE THE SAME BOX AS THE SVG, WHICH IS THE WHOLE TRICK.
   The viewBox is stretched, so a label positioned against any box OTHER than
   the one the SVG fills drifts away from the price it names — the app hit
   exactly that, with an axis inset differently from its plot, and a label near
   the floor sat ~27px below its own line. `left:100%` hangs the column in the
   reserved padding while it still measures against the plot. */
/* ⚠⚠ FULL BLEED AND FULL HEIGHT (Ateet, 2026-08-19: *"Make chart full width...
   should take full viewport"*). It was a clamped 320-600px box inside a gutter.
   The candles ARE the content, so a gutter on the left of a chart buys nothing,
   and a fixed height leaves a band of ground under it on a tall screen.

   ⚠ `height:100%` NEEDS A PARENT WITH ONE. Both hosts give it that — the app's
   `.ovbody` is a flex column in a full-screen overlay and passes it down through
   `.ovplot{flex:1 1 auto}`, and tb369 sets it on `.a-chart__plot`. Dropped into
   a container with `height:auto` this collapses to nothing, which is why the
   min-height is here: a chart that renders as a 1px line is worse than one that
   is the wrong size.

   ⚠ NO PADDING AT ALL NOW (2026-08-19). It reserved 128px on the right for the
   price column, and the column is deleted — see the note in chart.js. If the
   axis ever returns the reserve must return with it, or every label lands on
   top of the candles. */
.tbc__plot{
  position:relative;
  height:100%;min-height:280px;
}
.tbc__box{position:relative;height:100%;outline:0}
.tbc__box:focus-visible{box-shadow:inset 0 0 0 1px var(--seam-live)}
.tbc__box svg{display:block;width:100%;height:100%;overflow:visible}

/* ⚠ `.tbc__axis`, `.tbc__l*` AND `.tbc__sw*` ARE DELETED (2026-08-19) — the
   price column that hung off the right edge, its tagged labels and their
   swatches. The plot carries no text at all now; every word about the stock is
   above it in `.tbc-stats` or in the crosshair read-out. See chart.js. */

/* ⚠ `.tbc__t` (date ticks) AND `.tbc__key` ARE DELETED (2026-08-19). The ticks
   cost a strip of height on a chart asked to be full-bleed, and the crosshair
   read-out names the exact bar anyway. The key was the fourth telling of a fact
   already carried by position, by the axis letters and by the stat strip. */


/* ── the drawn objects ──────────────────────────────────────────────────────
   ⚠ FILL AT A TENTH, EDGES AT FULL. A zone is a REGION and its edges are the
   prices that get tested. A slab at readable opacity buries the candles inside
   it — which are the reason anyone opened the zone. */
.tbc-zn rect{fill:color-mix(in srgb,var(--up) 10%,transparent)}
.tbc-zn line{stroke:var(--up);stroke-opacity:.72}
.tbc-zn--res rect{fill:color-mix(in srgb,var(--down-ink) 10%,transparent)}
.tbc-zn--res line{stroke:var(--down-ink);stroke-opacity:.72}

/* ⚠ THE CANDLES KEEP THE APP'S FILMIC PAIR, graded down from --up-ink so 240 of
   them do not out-shout the zones. See --cd-* in app.css. */
.tbc-cd line{stroke:var(--cd-up-wick)}
.tbc-cd rect{fill:var(--cd-up)}
.tbc-cd--d line{stroke:var(--cd-dn-wick)}
.tbc-cd--d rect{fill:var(--cd-dn)}

/* ⚠ 2.75px, UP FROM 1.75 (Ateet, 2026-08-19). It was sized to sit quietly beside
   a price column and a legend; with those gone the plot IS the screen, and the
   one line that reads the trend has to hold its own against 120 candles across a
   full viewport. Round joins and caps because it changes colour mid-line — a
   mitred join at a crossing prints a visible notch where the two runs meet. */
.tbc-ema{fill:none;stroke-width:2.75;stroke-opacity:.95;
  stroke-linejoin:round;stroke-linecap:round}
.tbc-ema--up{stroke:var(--up)}
.tbc-ema--dn{stroke:var(--down-ink)}

.tbc-now{stroke:var(--ink);stroke-opacity:.85;stroke-dasharray:1 5}
.tbc-cross{stroke:var(--seam-live);stroke-width:1;stroke-dasharray:3 3}
/* ⚠ A CLASS, NOT THE `hidden` ATTRIBUTE. `el.hidden` is an HTMLElement property
   that does not exist on SVGElement, so the obvious way to toggle it back does
   nothing at all. */
.tbc-cross.is-off{display:none}

.tbc__none{padding:40px 0;color:var(--ink-3)}

/* ── a phone ────────────────────────────────────────────────────────────────
   ⚠ THE PRICE COLUMN SHRINKS WITH THE TYPE, IT IS NOT DROPPED. "S 1,307" is the
   longest label this axis draws and it fits in 84px at 10px — an axis-less
   chart is a picture of prices with no prices on it. */
@media (max-width:899px){
  .tbc__plot{min-height:240px}
  .tbc-stat{padding:10px 12px}
  .tbc-stat__v{font-size:15px}
}