/* Candlestick chart card of the trading page (lt-order-chart.js). Light theme only; colours come from the tokens of lt-ui.css.
   Everything is prefixed lt-oc-. The SVG is drawn 1:1 in CSS pixels (viewBox = host width), so text stays readable on phones. */
.lt-oc {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color-scheme: light;
    font-family: var(--lt-f-num, ui-monospace, Consolas, monospace);
    -webkit-user-select: none;
    user-select: none;
}

.lt-oc-stage {
    position: relative;
    width: 100%;
    line-height: 0;
    cursor: crosshair;
    touch-action: pan-y;
}
.lt-oc-dragging .lt-oc-stage { cursor: ns-resize; }
.lt-oc-panning .lt-oc-stage { cursor: grabbing; }
.lt-oc-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    overflow: hidden;
}
/* touch-action is honoured on the outer <svg>, not on SVG child shapes: the overlay only receives touches on its handles, so "none" is safe here. */
.lt-oc-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    touch-action: none;
}

.lt-oc text {
    font-family: var(--lt-f-num, ui-monospace, Consolas, monospace);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.lt-oc-tick { fill: var(--lt-muted, #5b6778); }
.lt-oc-tag {
    font-size: 10px;
    font-weight: 600;
    /* a light halo keeps the tag readable where a line crosses it */
    paint-order: stroke;
    stroke: var(--lt-surface, #ffffff);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.lt-oc-pill-text {
    fill: #fff;
    font-weight: 600;
}
.lt-oc-zone-label { font-weight: 600; }
.lt-oc-extreme-text {
    fill: var(--lt-muted, #5b6778);
    font-size: 10.5px;
}
/* stitch point of the candle history (LT-P10): discreet, decoration only */
.lt-oc-stitch-text { fill: var(--lt-muted, #5b6778); font-size: 10px; pointer-events: none; }
.lt-oc-gap { pointer-events: none; }   /* a bucket without a delivered candle: grey empty column */
.lt-oc-note { margin: 6px 0 0; font-size: .75rem; }

/* decoration never steals the candle tooltips; only markers, order lines and handles take pointer events */
.lt-oc-grid, .lt-oc-zone, .lt-oc-zone-label, .lt-oc-extreme, .lt-oc-extreme-box, .lt-oc-level, .lt-oc-leader, .lt-oc-pill, .lt-oc-pill-text,
.lt-oc-diamond, .lt-oc-tag, .lt-oc-volume, .lt-oc-tick { pointer-events: none; }
.lt-oc-pill[data-cut] { pointer-events: all; }   /* a shortened pill carries its full text as tooltip */
.lt-oc-candle-hit { cursor: crosshair; }
.lt-oc-marker { cursor: help; }

.lt-oc-hit {
    fill: transparent;
    pointer-events: all;
    cursor: ns-resize;
    touch-action: none;
    outline: none;
}
.lt-oc-hit:focus-visible {
    outline: 2px solid var(--lt-accent, #2d5bd0);
    outline-offset: -1px;
    fill: rgba(45, 91, 208, .08);
}

.lt-oc-offrange {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 8px;
    line-height: 1.3;
}
.lt-oc-chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--lt-line, #dbe1ea);
    border-radius: 999px;
    background: var(--lt-surface-2, #edf0f5);
    color: var(--lt-muted, #5b6778);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    cursor: help;
}

.lt-oc-empty {
    display: grid;
    place-items: center;
    min-height: 200px;
    padding: 24px 16px;
    border: 1px dashed var(--lt-line, #dbe1ea);
    border-radius: 8px;
    color: var(--lt-muted, #5b6778);
    font-family: var(--lt-f-body, "Segoe UI", system-ui, sans-serif);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 599.98px) {
    .lt-oc text { font-size: 10.5px; }
    .lt-oc-empty { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    .lt-oc * {
        transition: none !important;
        animation: none !important;
    }
}