/* tyles for the target chart (target-chart.js) */

.tc-host {
    /* Hidden via stylesheet, never inline: jQuery .show() restores the
       display recorded at .hide(), so an inline "none" start could never
       be shown again. */
    display: none;

    --tc-win: var(--primary-dark);
    --tc-line: var(--text-primary);
    --tc-stroke: rgba(255, 255, 255, 0.28);
    /* Lightweight Charts is a canvas; target-chart.js reads this exact token
       to keep the data surface with the rest of the advanced panel. */
    --tc-tv-canvas: #090b10;
    --tc-tv-panel: #111820;
    min-width: 0;
    width: 100%;
}

/* Advanced keeps one trading surface: a compact strike book and the chart
   share a border, so contracts do not have to fight for the chart's axis. */
.tc-tv-wrap {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    min-height: 340px;
    height: clamp(340px, 34vw, 500px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--tc-tv-canvas);
}

.tc-tv-stage {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.tc-tv-strikebook {
    display: flex;
    flex: 0 0 236px;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-color);
    background: var(--tc-tv-panel);
}

.tc-tv-book-head,
.tc-tv-book-cols,
.tc-tv-book-row {
    display: grid;
    grid-template-columns: 1.02fr .94fr .94fr;
    column-gap: 3px;
    align-items: center;
}

.tc-tv-book-head {
    min-height: 44px;
    padding: 0 12px;
    color: var(--text-primary);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.tc-tv-book-expiry {
    grid-column: 2 / 4;
    color: var(--text-muted);
    font-size: .58rem;
    font-weight: 600;
    text-align: right;
}

.tc-tv-book-cols {
    min-height: 28px;
    padding: 0 12px;
    border-top: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: var(--text-muted);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.tc-tv-book-cols span:not(:first-child) { text-align: right; }

.tc-tv-book-list {
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: thin;
}

.tc-tv-book-row {
    min-height: 36px;
    padding: 2px 8px 2px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.tc-tv-book-row:hover { background: rgba(255,255,255,.028); }

.tc-tv-book-strike {
    color: var(--text-primary);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.tc-tv-book-leg {
    min-height: 27px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tc-tv-book-leg:hover,
.tc-tv-book-leg:focus-visible {
    color: var(--text-primary);
    background: rgba(255,255,255,.08);
    outline: none;
}

.tc-tv-book-leg.is-call { color: #78d6ac; }
.tc-tv-book-leg.is-put { color: #ef929b; }
.tc-tv-book-leg.is-selected { background: rgba(66, 184, 237, .18); border-color: rgba(66, 184, 237, .58); color: #e6f7ff; }
.tc-tv-book-empty { color: rgba(156,169,193,.48); font-size: .7rem; text-align: right; }

.tc-tv-book-selection {
    margin: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 225, 76, .36);
    border-radius: 4px;
    background: rgba(255, 225, 76, .055);
    color: #e6de9b;
    font-size: .66rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.tc-tv-book-none { padding: 16px 12px; color: var(--text-muted); font-size: .7rem; }

.tc-tv-market {
    position: relative;
    min-height: 0;
    flex: 1;
    min-width: 0;
}

.tc-tv-frame,
.tc-tv-frame iframe {
    width: 100%;
    height: 100%;
}

.tc-tv-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.tc-tv-loading.is-error {
    z-index: 2;
    padding: 24px;
    background: var(--tc-tv-canvas);
    text-align: center;
}

.tc-tv-retry {
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    font: inherit;
}

.tc-tv-retry:hover,
.tc-tv-retry:focus-visible {
    border-color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.1);
    outline: none;
}

.tc-tv-loading[hidden] {
    display: none;
}

.tc-tv-frame {
    position: relative;
    z-index: 1;
}

.tc-tv-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.tc-tv-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tc-tv-divider {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--border-color);
}

.tc-tv-tool {
    min-width: 42px;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.tc-tv-tool:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.tc-tv-tool[aria-pressed="true"] {
    border-color: rgba(66, 184, 237, 0.45);
    background: rgba(66, 184, 237, 0.15);
    color: #dcefff;
}

.tc-tv-segment .tc-tv-tool {
    min-width: 62px;
}

.tc-tv-zoom { margin-left: auto; }

.tc-tv-zoom .tc-tv-tool {
    min-width: 30px;
    padding: 0 7px;
}

.tc-tv-zoom .tc-tv-fit {
    min-width: 34px;
    font-size: .62rem;
}

.tc-tv-zoom .tc-tv-tool:disabled {
    cursor: default;
    opacity: 0.38;
}

.tc-tv-tool:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

/* `top`/`left` are not decoration here. With neither set, the ring keeps its
   STATIC position — below the full-height chart frame it follows — and the
   transform then carried it off the panel, so the live head never wore it. */
.tc-tv-spot-glow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(244, 246, 251, .26);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 7px rgba(244, 246, 251, .08);
    pointer-events: none;
}

/* The ring is the halo; this is the price itself, and it stays solid so the
   head reads as a point on the line, not as a target reticle. */
.tc-tv-spot-glow::after {
    content: '';
    position: absolute;
    top: 5.5px;
    left: 5.5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f4f6fb;
}

/* A selection wash communicates the payout side only after the user picks a
   contract. It never appears as background decoration on an unselected chart. */
.tc-tv-selection-zone {
    position: absolute;
    z-index: 2;
    right: var(--tc-tv-axis-width, 72px);
    left: 0;
    pointer-events: none;
    border-bottom: 1px solid rgba(255,255,255,.26);
}

.tc-tv-selection-zone.is-call {
    background: rgba(94, 221, 156, .11);
    border-color: rgba(94, 221, 156, .45);
}

/* the strike ↔ breakeven band (round 11): the premium's width, amber */
.tc-tv-premium-zone {
    position: absolute;
    z-index: 2;
    right: var(--tc-tv-axis-width, 72px);
    left: 0;
    pointer-events: none;
    min-height: 3px;
    background: rgba(217, 168, 60, .10);
    border-top: 1px solid rgba(217, 168, 60, .35);
    border-bottom: 1px solid rgba(217, 168, 60, .35);
}
.tc-tv-premium-zone[hidden] { display: none; }

.tc-tv-selection-zone.is-put {
    background: rgba(239, 92, 104, .11);
    border-color: rgba(239, 92, 104, .48);
}

.tc-tv-selection-zone.is-range {
    background: rgba(159, 112, 244, .13);
    border-color: rgba(159, 112, 244, .52);
}

/* A pill, not a box. It is a label ATTACHED to a line, and the app's other
   attached label — the selected-target chip on the strike rail — is a pill;
   a square one read as a tooltip that had come loose. */
.tc-tv-hover-label {
    position: absolute;
    z-index: 4;
    left: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: calc(100% - 110px);
    padding: 5px 12px;
    border: 1px solid rgba(244,246,251,.28);
    border-radius: var(--r-pill);
    background: rgba(13,17,23,.94);
    color: var(--text-primary);
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Set by target-chart.js only when the hovered strike sits on the breakeven
   line; the two labels share the left rail otherwise. */
.tc-tv-hover-label.is-right {
    left: auto;
    right: calc(var(--tc-tv-axis-width, 72px) + 6px);
}

.tc-tv-hover-name { white-space: nowrap; }

/* Same pill as the hover label, in the breakeven's own yellow and anchored
   right: the two labels share the vertical band, so opposite ends keep them
   from covering each other. */
.tc-tv-be-label {
    position: absolute;
    z-index: 4;
    left: 12px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    max-width: calc(100% - 110px);
    /* Words, not a box. A filled pill on a level line covers the strikes
       either side of it, and those are the things the user is choosing
       between. A short text shadow keeps it legible over the plot instead. */
    padding: 0;
    border: 0;
    background: none;
    text-shadow: 0 0 6px rgba(13, 17, 23, .95), 0 0 3px rgba(13, 17, 23, .95);
    font-size: .68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.tc-tv-be-name {
    color: #ffe14c;
    font-size: .6rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tc-tv-be-value { color: #ffe14c; }

.tc-tv-be-from {
    color: rgba(255, 225, 76, .62);
    font-size: .6rem;
    font-weight: 500;
}

/* Quieter than the strike it follows: the strike is the answer, this is only
   what to do about it. */
.tc-tv-hover-hint {
    color: rgba(66, 184, 237, .92);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* The strikes are drawn INTO the canvas, so no element can carry a cursor.
   target-chart.js puts this class on the stage while a strike is within the
   click handler's reach, which is the only honest moment to promise one. */
.tc-tv-frame.is-strike-hover,
.tc-tv-frame.is-strike-hover canvas,
.tc-tv-frame.is-strike-hover td { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
    .tc-tv-spot-glow { animation: tc-spot-pulse 4.2s ease-in-out infinite; }
}

/* A breath, not a beacon. The ring holds its size and only the glow behind
   it rises and falls, over four seconds — the head is a place on the chart,
   not an alarm asking to be clicked. */
@keyframes tc-spot-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(244, 246, 251, .06); }
    50% { box-shadow: 0 0 11px rgba(244, 246, 251, .16); }
}

@media (max-width: 760px) {
    .tc-tv-wrap { flex-direction: column; height: auto; }
    .tc-tv-strikebook { flex: 0 0 auto; max-height: 190px; border-right: 0; border-bottom: 1px solid var(--border-color); }
    .tc-tv-stage { min-height: 300px; }
}

.tc-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* ---- header: the trade said in one sentence ------------------------------ */
.tc-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 2px 10px;
    font-size: var(--font-size-base);
    line-height: 1.35;
    color: var(--text-secondary);
}

.tc-head b {
    color: var(--text-primary);
    font-weight: 600;
}

.tc-head .tc-hl {
    color: var(--tc-win);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tc-head .tc-when {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- the control row -----------------------------------------------------
   Two groups only — what you're trading (left), how much history (right) —
   so the row wraps on narrow panes instead of crowding. HTML, not SVG:
   focus rings, hit areas and screen-reader roles come free. */
.tc-ctl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 0 2px 8px;
}

/* One object, not four loose buttons: a hairline frame reads "pick one". */
.tc-seg {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Quieter of the two: what-to-trade outranks how-far-back. */
.tc-seg--quiet {
    border-color: transparent;
    margin-left: auto;
}

.tc-segbtn {
    min-height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
    /* named properties, never `all` */
    transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
                color 140ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .tc-segbtn:hover {
        color: var(--text-primary);
    }
}

/* Press is answered on pointer-down, not on release. */
.tc-segbtn:active {
    transform: scale(0.97);
}

/* A pair of nudges, not a mode: no pressed state, and narrower than the
   labelled buttons beside it. */
.tc-zoombtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0 6px;
    /* 14px, not the 12px beside it: the plus and minus sit inside the lens
       and smudge at 12px. */
    font-size: 14px;
    line-height: 24px;
}

/* Bootstrap Icons ship line-height 1, which drops the glyph off the
   button's 24px baseline. */
.tc-zoombtn .bi {
    line-height: 1;
}

.tc-zoombtn:disabled {
    color: var(--text-muted);
    opacity: 0.35;
    cursor: default;
}

.tc-zoombtn:disabled:active {
    transform: none;
}

.tc-segbtn[aria-pressed="true"] {
    background: var(--secondary);
    color: var(--text-primary);
}

.tc-seg:not(.tc-seg--quiet) .tc-segbtn[aria-pressed="true"] {
    background: var(--tc-win);
    color: var(--background);
}

.tc-segbtn:focus-visible {
    outline: 2px solid var(--tc-win);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .tc-segbtn {
        transition-duration: 0ms;
    }
    .tc-segbtn:active {
        transform: none;
    }
}

/* ---- canvas -------------------------------------------------------------- */
.tc-canvas {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.tc-svg {
    display: block;
    width: 100%;
    /* the plot is readable at every y, so say so; chips set their own cursor */
    cursor: crosshair;
}

/* ---- svg text ------------------------------------------------------------ */
.tc-svg text {
    font-family: inherit;
    font-size: 11px;
    fill: var(--text-secondary);
}

.tc-n {
    font-variant-numeric: tabular-nums;
}

.tc-cap {
    font-size: 9px !important;
    letter-spacing: 0.09em;
    fill: var(--text-muted) !important;
}

.tc-note {
    font-size: 10px !important;
    fill: var(--text-muted) !important;
}

/* ---- frame: grid, the future, now, expiry -------------------------------- */
.tc-grid {
    stroke: var(--tc-stroke);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: 0.25;
}

/* Region right of NOW hasn't happened: tinted and empty. Only the contract's
   own facts (target level, its zone) continue across it — those hold true
   until expiry regardless of what the price line does. */
.tc-future {
    fill: var(--background);
    opacity: 0.45;
}

.tc-nowline {
    stroke: var(--tc-stroke);
    stroke-width: 1;
}

.tc-expiry {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.8;
}

/* ---- the price line ------------------------------------------------------ */
.tc-line {
    fill: none;
    stroke: var(--tc-line);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Whispered on purpose: the area under the line overlaps the winning zone's
   pixels, and the zone is what carries meaning here. */
.tc-area {
    fill: var(--tc-line);
    fill-opacity: 0.035;
    stroke: none;
}

.tc-dot {
    fill: var(--tc-line);
}

.tc-halo {
    fill: var(--tc-line);
    opacity: 0;
}

/* The only animation on this surface — the line itself never tweens; a new
   observation appears as a step, because that's what it is. */
@media (prefers-reduced-motion: no-preference) {
    .tc-halo--live {
        animation: tc-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes tc-pulse {
    0%   { opacity: 0.35; r: 4; }
    70%  { opacity: 0;    r: 11; }
    100% { opacity: 0;    r: 11; }
}

/* ---- the winning side ----------------------------------------------------
   Two flat bands, one boundary. Breakeven — not the strike — is where the
   buyer starts making money, so the step in opacity has to land there and
   nowhere else. The win band used to be a three-stop gradient; its wash
   carried across breakeven and blurred the very boundary the split exists
   to state. */
/* Above breakeven: real profit. */
.tc-zone-win {
    fill: var(--tc-win);
    fill-opacity: 0.18;
}

/* Strike-to-breakeven: the option pays out here, but by less than the premium
   paid, so the holder is still down. Muted on purpose — this band used to
   carry the win wash at full strength, with the accent stop sitting on the
   strike, i.e. on the price where the buyer loses the whole premium. Kept
   well clear of .tc-zone-win (0.05 vs 0.18) so the two never read as one. */
.tc-zone-premium {
    fill: var(--tc-win);
    fill-opacity: 0.05;
}

/* A range's zone can cover most of the plot, so it stays lighter than the
   directional wash. */
.tc-zone-fill {
    fill: var(--tc-win);
    fill-opacity: 0.10;
}

.tc-zone-cap {
    font-size: 10px !important;
    letter-spacing: 0.08em;
    fill: var(--tc-win) !important;
    opacity: 0.9;
}

.tc-target {
    stroke: var(--tc-win);
    stroke-width: 1.5;
}

.tc-be {
    stroke: var(--text-secondary);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.75;
}

.tc-be-box {
    fill: var(--card-bg);
    stroke: var(--tc-stroke);
    stroke-width: 1;
}

.tc-be-t {
    fill: var(--text-secondary) !important;
    font-size: 10px !important;
}

/* ---- spot: the one level that is not a choice ----------------------------
   Shares the chips' own column and size so the eye reads the ladder down one
   column. Solid fill + not-a-button is what tells it apart, never shape or x.
   Pointer-events off and painted last: it can never be covered, and that
   must not cost the chip underneath its click. */
.tc-spot {
    pointer-events: none;
}

.tc-spotline {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    opacity: 0.55;
}

.tc-spot-box {
    fill: var(--text-primary);
}

.tc-spot-v {
    fill: var(--card-bg) !important;
    font-size: 11px !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tc-spot-w {
    fill: var(--card-bg) !important;
    font-size: 9px !important;
    opacity: 0.65;
}

/* ---- the right gutter: the price axis IS the strike ladder ---------------
   Every listed strike is a chip at its own true y — never moved to make
   room, since a y here is a price claim. A chip that can't be drawn is
   counted instead, and the count is a button that reveals it. */
.tc-tick {
    stroke: var(--tc-stroke);
    stroke-width: 1;
    opacity: 0.5;
}

.tc-axis-v {
    fill: var(--text-muted) !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums;
}

.tc-chip {
    cursor: pointer;
}

.tc-chip-hit {
    fill: transparent;
}

.tc-chip-box {
    fill: var(--card-bg);
    stroke: var(--tc-stroke);
    stroke-width: 1;
}

.tc-chip-k {
    fill: var(--text-primary) !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.tc-chip-t {
    fill: var(--text-muted) !important;
    font-size: 9px !important;
    pointer-events: none;
}

/* dashed preview of a strike not yet chosen, plus what it costs */
.tc-prev {
    display: none;
    pointer-events: none;
}

.tc-prev-line {
    stroke: var(--tc-win);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.55;
}

.tc-chip:hover .tc-prev,
.tc-chip:focus-visible .tc-prev {
    display: block;
}

.tc-chip:hover .tc-chip-box,
.tc-chip:focus-visible .tc-chip-box {
    stroke: var(--tc-win);
}

.tc-chip:focus {
    outline: none;
}

.tc-chip:focus-visible .tc-chip-box {
    stroke-width: 2;
}

/* selected — the strike the ticket is pricing */
.tc-chip--on .tc-chip-box {
    fill: var(--tc-win);
    stroke: var(--tc-win);
}

.tc-chip--on .tc-chip-k {
    fill: var(--background) !important;
    font-weight: 600;
}

.tc-chip--on .tc-chip-t {
    fill: var(--background) !important;
    opacity: 0.7;
}

.tc-chip--on .tc-prev {
    display: none;
}

/* ---- ranges ---------------------------------------------------------------
   A range's gutter mark is a BAR spanning the zone, never a tick — an
   interval must not read as a level. */
.tc-span {
    fill: var(--tc-win);
    opacity: 0.45;
}

.tc-chip:hover .tc-span,
.tc-chip:focus-visible .tc-span {
    opacity: 0.85;
}

.tc-chip--on .tc-span {
    opacity: 1;
}

.tc-prev-zone {
    fill: var(--tc-win);
    fill-opacity: 0.1;
}

.tc-range-edge {
    stroke: var(--tc-win);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.45;
}

/* ---- hover readout ---------------------------------------------------------
   Price under the pointer, printed in the axis column with the axis anchor —
   it IS an axis value. Grey on purpose: white is spot, accent is the ticket's
   strike, so a readout borrowing either would claim a level the book never
   quoted. Reads only, never trades: pointer-events off for the whole group
   so every chip underneath keeps its click. */
.tc-hov {
    pointer-events: none;
}

.tc-hov-h,
.tc-hov-v {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.55;
}

.tc-hov-box,
.tc-hov-tbox {
    fill: var(--text-muted);
}

.tc-hov-t {
    fill: var(--background) !important;
    font-size: 11px !important;
    font-weight: 600;
}

.tc-hov-w {
    fill: var(--background) !important;
    font-size: 9px !important;
    opacity: 0.7;
}

.tc-hov-time {
    fill: var(--background) !important;
    font-size: 10px !important;
    font-weight: 500;
}

/* SNAPPED — the crosshair has landed on a level the book quotes, so it stops
   being a readout and becomes that instrument: accent, solid line, pill
   prints the chip's own text. The color change IS the signal. */
.tc-hov--on .tc-hov-h {
    stroke: var(--tc-win);
    stroke-dasharray: none;
    opacity: 0.9;
}

.tc-hov--on .tc-hov-box {
    fill: var(--tc-win);
}

/* the zone a listed range covers, lit while the pointer is inside it */
.tc-hov-zone {
    fill: var(--tc-win);
    fill-opacity: 0.10;
}

/* The invitation, and the only filled accent pill left on the plot. One
   filled accent pill means one thing: click it and the ticket targets it. */
.tc-hov-cta-box {
    fill: var(--tc-win);
    opacity: 0.95;
}

.tc-hov-cta-t {
    fill: var(--background) !important;
    font-size: 10px !important;
    font-weight: 600;
}

/* pointer only where a click actually does something */
.tc-svg--pick {
    cursor: pointer;
}

/* ---- states: never an empty box ------------------------------------------ */
.tc-msg {
    fill: var(--text-muted) !important;
    font-size: 11px !important;
}

.tc-retry {
    cursor: pointer;
}

.tc-retry text {
    fill: var(--tc-win) !important;
    font-size: 11px !important;
}

.tc-empty {
    margin: 0;
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 575.98px) {
    .tc-tv-wrap {
        min-height: 300px;
        height: 360px;
    }

    .tc-head {
        padding-bottom: 8px;
    }
    .tc-segbtn {
        padding: 0 8px;
        letter-spacing: 0.04em;
    }
}

/* ---- the way back from a zoom -------------------------------------------
   Sits in the plot's top-left corner, present only while zoomed. Pointer
   cursor because it is clickable, for the touch user who has no dblclick. */
.tc-zreset {
    cursor: pointer;
}

.tc-zreset text {
    fill: var(--text-muted) !important;
    opacity: 0.75;
}

.tc-zreset:hover text,
.tc-zreset:focus-visible text {
    fill: var(--tc-win) !important;
    opacity: 1;
}