/* Line popup - with two similar input fields side by side. Was previously
   two duplicate, oversized rule blocks here (min-width up to 780px, 52px
   input font) - way too big on both phone and desktop; consolidated into
   one compact definition. */
.line-percentage-popup {
    position: absolute;
    z-index: 50;
    background: rgba(19, 23, 34, 0.95);
    backdrop-filter: blur(8px);
    border: 2px solid #555;
    padding: 0.6em 0.8em;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.6em; /* Gap between the input groups */
    pointer-events: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: min(94vw, 380px);
    flex-wrap: wrap;
    /* Not a descendant of #live-chart (a top-level sibling instead), so it
       has no touch-action restriction of its own even while lineDrag.js
       sets one on the chart container/canvases - a touch meant to drag the
       line via this popup (see lineHoverPopup.js's own pointerdown) falls
       back to the browser's native page-scroll/pan on real Android
       hardware before that JS ever gets a reliable chance to run, same
       reasoning as .drawing-panel's own touch-action above. */
    touch-action: none;
}

/* While its line is being dragged (lineHoverPopup.js): just % and price,
   slightly smaller, so it hides less of the chart the line moves over.
   Shrunk via font-size (not transform) so the JS positioning, which reads
   offsetWidth/offsetHeight, still sees the real size. */
.line-percentage-popup.is-dragging {
    font-size: 0.8em;
    padding: 0.35em 0.5em;
    gap: 0.4em;
}
.line-percentage-popup.is-dragging > :not(.input-group),
.line-percentage-popup.is-dragging > .input-group:has(.custom-select) {
    display: none !important;
}
.popup-track-btn.active {
    background: rgba(255, 193, 7, 0.45);
    color: #fff;
}

.line-percentage-popup.is-reference > :not(.popup-sk-entry-btn) {
    display: none !important;
}

/* Showing SK-Entry / Remove: over everything of the chart. */
.line-percentage-popup.has-sk-entry {
    z-index: 1240;
}

.line-percentage-popup.is-dragging input {
    width: 3.6em;
    font-size: 0.95em;
    padding: 0.2em;
}
.line-percentage-popup.is-dragging #popup-price-input {
    width: 6.8em;
    font-size: 0.95em;
    padding: 0.2em;
}

/* Fib-only sub-popup (Fib level format) - anchored to
   .line-percentage-popup itself, which position:absolute above already
   makes a containing block for this, rather than computed in JS like the
   parent's own top/left are. Floats below it, same "anchored under the
   trigger" pattern as .connect-method-popup below .top-bar-account.
   z-index above the parent's own 50 only in case the two ever visually
   overlap (they shouldn't, given they're on opposite edges). */
.fib-options-popup {
    position: absolute;
    top: 100%;
    /* left, not right:0 like .connect-method-popup's own version of this
       pattern - the parent .line-percentage-popup already sits pinned near
       the chart's own right edge (its own JS-computed left, see
       lineHoverPopup.js), so anchoring this child to ITS right edge too
       would push it even further right, off into/past the price scale.
       Anchoring left instead extends it back into the chart, where there's
       actually room. */
    left: 0;
    margin-top: 0.4em;
    z-index: 60;
    width: max-content;
}

/* Each input field (percent and dollar) in the flex container */
.line-percentage-popup .input-group {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.line-percentage-popup input {
    width: clamp(50px, 13vw, 62px);
    background: #1e222d;
    color: #fff;
    border: 1px solid #363a45;
    border-radius: 6px;
    text-align: center;
    font-size: clamp(13px, 3.2vw, 15px);
    font-weight: 700;
    padding: 0.3em;
    outline: none;
}

/* Wider than the percent field - a price like "50000.00" needs noticeably
   more room than a percentage does, or its decimals get clipped. */
.line-percentage-popup #popup-price-input {
    width: clamp(88px, 24vw, 112px);
}

.line-percentage-popup input:focus {
    border-color: #2962FF;
}

.line-percentage-popup select {
    width: clamp(40px, 10vw, 52px);
    background: #1e222d;
    color: #fff;
    border: 1px solid #363a45;
    border-radius: 6px;
    text-align: center;
    text-align-last: center;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
    padding: 0.3em 0.2em;
    outline: none;
}

/* See .params-popup select option above - same reasoning. */
.line-percentage-popup select option {
    background: #1e222d;
    color: #fff;
}

.line-percentage-popup select:focus {
    border-color: #2962FF;
}

/* The same look for the custom dropdown that stands in for these selects
   (customSelect.js) - the width picker's trigger stays as narrow as the
   select was. */
.line-percentage-popup .custom-select-trigger {
    min-width: clamp(40px, 10vw, 52px);
    justify-content: center;
    background: #1e222d;
    color: #fff;
    border: 1px solid #363a45;
    border-radius: 6px;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
    padding: 0.3em 0.35em;
    cursor: pointer;
}

/* #fib-options-popup's own select is a .line-percentage-popup DESCENDANT
   (nested for positioning, see .fib-options-popup above), so the narrow
   width:clamp(40-52px) rule right above - sized for the compact 1/2/3/4
   width-picker dropdown - would otherwise squash "Decimal"/"Percent" down
   to a couple of clipped letters. Same equal specificity as that rule, so
   this needs to come after it to actually win. */
.fib-options-popup select {
    width: auto;
}

/* Mini eye toggle in the line popup - fades the line to a faint gray dashed
   line instead of deleting it (see drawing.js's toggleLineMuted). Bare
   glyph like #toggle-candles-btn, just shrunk to fit this compact popup
   instead of the full .btn treatment. */
.popup-eye-btn {
    background: none;
    border: none;
    padding: 0.2em;
    margin: 0;
    font-size: clamp(14px, 3.4vw, 16px);
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}

.popup-eye-btn:hover {
    opacity: 1;
}

/* Active (line faded) - same struck-through eye as #toggle-candles-btn,
   dimmed further so the button itself hints at the faint line it made. */
.popup-eye-btn.active {
    text-decoration: line-through;
    opacity: 0.5;
}

/* "SL to BE" - only ever shown for a SL line (see lineHoverPopup.js), a
   small text pill rather than an emoji since there's no obvious single
   icon for "move to break-even". */
.popup-be-btn {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 0.4em;
    color: #ffd54f;
    padding: 0.2em 0.5em;
    margin: 0;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.popup-be-btn:hover {
    background: rgba(255, 193, 7, 0.3);
}

/* "Cancel all TPs" (see lineHoverPopup.js) - same chip in red: it takes
   orders back. Armed (first click done) it's filled, asking "Sure?". */
.popup-cancel-tps-btn {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.5);
    color: #ff8a80;
}

.popup-cancel-tps-btn:hover,
.popup-cancel-tps-btn.armed {
    background: rgba(239, 83, 80, 0.35);
}

/* "TP1 for lower SL" switch (see lineHoverPopup.js) - same chip as BE, in
   the TP's green: it's a mode that's ON until clicked. */
.popup-lowersl-mode-btn {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.6);
    color: #81c784;
}

.popup-lowersl-mode-btn:hover {
    background: rgba(76, 175, 80, 0.35);
}

/* "Sacrifice for lower SL" - only ever shown for a real, open TP line (see
   lineHoverPopup.js) - a plain draggable glyph like .popup-eye-btn, not a
   text pill like .popup-be-btn above, since it's dragged onto the chart
   the same way a tool chip is (see tp1ForLowerSl.js's sacrificeTpForLowerSl). */
.popup-sacrifice-btn {
    background: none;
    border: none;
    padding: 0.2em;
    margin: 0;
    font-size: clamp(14px, 3.4vw, 16px);
    line-height: 1;
    cursor: grab;
    opacity: 0.75;
}

.popup-sacrifice-btn:hover {
    opacity: 1;
}

/* Drawing tools panel (Entry/TP/SL chips, magnet, lock, delete) - a
   separate small panel fixed to the left screen edge, deliberately kept
   OUTSIDE .chart-controls' own drag/resize/mobile-tab system so it looks
   and behaves identically on desktop and mobile - the only thing that
   changes is the .collapsed class its own grip toggles (drawingPanel.js).
   Not wrapped in any @media block for that reason - a single definition
   for every screen size, unlike almost everything else in this file.
   position:fixed is safe here only because index.html places this as a
   top-level sibling, not nested inside .chart-area (overflow:hidden) or
   .chart-controls (has its own transform) - either would trap it instead
   of anchoring it to the real viewport. */
.drawing-panel {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* A real finger is far less precise than a mouse pointer - a touch
       meant for a small .tool-item chip can easily land a few pixels off,
       on this panel's own padding/gaps instead. Those ancestors had no
       touch-action of their own, so THAT touch fell back to the browser's
       default (page scroll) even though the chip itself is restricted -
       confirmed on real Android Chrome/Brave (dragging a tool chip
       scrolled the whole page), not reproducible with headless Chrome's
       pixel-perfect synthetic touch. Restricting the whole panel, sitting
       flush against the screen's own left edge, also helps against
       Android's system edge-swipe-back gesture competing for the same
       touch. */
    touch-action: none;
    /* Below .chart-controls (z-index:10, components/chart-controls.css) rather than
       above it - .chart-controls floats/sits wherever the user puts it
       (desktop drag, or the mobile bottom panel) and can end up
       overlapping this panel's left-edge position; any popup opened
       inside it (params, connect-method, trash-confirm) needs to stay
       visible above this panel, not get covered by it. */
    z-index: 5;
    display: flex;
    align-items: stretch;
    background: rgba(19, 23, 34, 0.92);
    border: 1px solid #555;
    border-left: none;
    border-radius: 0 0.6em 0.6em 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.drawing-panel-grip {
    flex: 0 0 auto;
    width: 1.4em;
    align-self: stretch;
    border: none;
    background: #333;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

.drawing-panel-grip:hover {
    background: #444;
}

.drawing-panel-content {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 7em;
    max-width: 7em;
    padding: 0.6em 0.5em;
    opacity: 1;
    overflow: hidden;
    box-sizing: border-box;
    transition: width 0.2s ease, max-width 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
}

/* Collapsed: shrink the content away to nothing, leaving just the grip
   (which stays full-height/visible since it's outside .drawing-panel-content) */
.drawing-panel.collapsed .drawing-panel-content {
    width: 0;
    max-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Override the .chart-controls-relative (cqw) sizing that .tool-item/
   #trash-bin normally pick up - this panel isn't a descendant of that
   container-query context, so those units would resolve unpredictably
   here. Higher specificity than the bare rules, so this wins regardless
   of source order. */
.drawing-panel .tool-item,
.drawing-panel #trash-bin {
    width: 100%;
    height: auto;
    font-size: 14px;
}

.drawing-panel .drag-menu {
    min-width: 0;
    width: 100%;
}

/* Eye/magnet/lock/trash row: identical sizing for all four instead of
   relying on the scattered .tool-row/.tool-item/#trash-bin rules
   elsewhere in this file, which differ between plain .btn buttons and the
   #trash-bin div (different padding/min-height/font-size there) and made
   the lock button render perceptibly larger than the trash bin next to
   it. Same specificity tier as those other rules, so placement at the end
   of the file (after all of them) is what makes this win, for both the
   .btn and the #trash-bin selector. */
.drawing-panel-row .btn,
.drawing-panel-row #trash-bin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0.5em 0.3em;
    min-height: 2.6em;
    max-height: 3.4em;
    font-size: 16px;
    white-space: nowrap;
}

.line-percentage-popup span {
    color: #d1d4dc;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 700;
    white-space: nowrap;
}

/* "SFP": its SL's controls - side flip button (long/short)
   and buffer dropdown - sitting on the SL line right after the current
   candle (see chart/tools/sfp.js). Positioned by transform above the
   chart canvas like .be-terminal-marker, but clickable. */
.sfp-sl-tools {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    align-items: center;
    gap: 4px;
    z-index: 4;
}

.sfp-side-flip-btn,
.sfp-sl-tools .custom-select-trigger {
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #ef5350;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #ef5350;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.sfp-side-flip-btn:hover,
.sfp-sl-tools .custom-select-trigger:hover {
    background: #ef5350;
    color: #fff;
}

/* Trigger armed - the side can't change until it's disarmed. */
.sfp-side-flip-btn:disabled,
.sfp-side-flip-btn:disabled:hover {
    background: rgba(19, 23, 34, 0.92);
    color: #ef5350;
    opacity: 0.7;
    cursor: not-allowed;
}

/* The same SL buffer controls in the tool settings' SFP page - settable
   without an SFP level on the chart. */
.sfp-buffer-standalone {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.sfp-buffer-standalone-label {
    color: #ef5350;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sfp-buffer-standalone .custom-select-trigger {
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #ef5350;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #ef5350;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.sfp-buffer-standalone .custom-select-trigger:hover {
    background: #ef5350;
    color: #fff;
}

/* The dollar buffer, next to the dropdown while "$ buffer" is picked. */
.sfp-sl-usd-input {
    width: 70px;
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #ef5350;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.sfp-sl-usd-input:focus {
    border-color: #2962FF;
}

/* "Failed Auction": side button, calculation timeframe and SL buffer
   dropdowns and "Print$✕" on the neckline, right
   after the current candle like .sfp-level-tools (see
   chart/tools/failedAuction.js) - the neckline's own orange. */
.failed-auction-tools {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    align-items: center;
    gap: 4px;
    z-index: 4;
}

.failed-auction-side-btn,
.failed-auction-tools .custom-select-trigger {
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #FF9800;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #FF9800;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.failed-auction-side-btn:hover,
.failed-auction-tools .custom-select-trigger:hover {
    background: #FF9800;
    color: #fff;
}

/* The SL buffer in dollars, next to its dropdown while "fixed $" is picked. */
.failed-auction-usd-input {
    width: 70px;
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #FF9800;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #d1d4dc;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.failed-auction-usd-input:focus {
    border-color: #2962FF;
}

/* "SFP": order type (Post-only/Limit/Market) and timing (now/on line
   cross/on candle close) dropdowns on the SFP level, right after the
   current candle like .sfp-sl-tools - above those while the level is
   hidden (Market + now, see chart/tools/sfp.js) - the level's own blue. */
.sfp-level-tools {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    align-items: center;
    gap: 4px;
    z-index: 4;
}

.sfp-level-tools .custom-select-trigger {
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #2962FF;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #5b8cff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.sfp-level-tools .custom-select-trigger:hover {
    background: #2962FF;
    color: #fff;
}

/* Ladder options (chart/tools/ladder.js's renderLadderOptions) - same
   floating sub-popup as #fib-options-popup, one field per row; a field
   that doesn't apply to the chosen mode is [hidden] (.params-popup
   label's display:flex would show it anyway). */
.ladder-options-popup {
    /* Wider than the fib options - opens to the left, into the chart,
       instead of past its right edge. */
    left: auto;
    right: 0;
}

.ladder-options-popup .ladder-field[hidden] {
    display: none;
}

.ladder-options-popup {
    max-width: min(92vw, 22em);
    /* Taller than the space under a line near the bottom - scrolls. */
    max-height: 60vh;
    overflow-y: auto;
}

.ladder-field {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.ladder-options-section {
    margin-top: 0.3em;
    font-weight: 600;
    color: #d1d4dc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 0.15em;
}

.ladder-sl-drag {
    align-self: flex-start;
    padding: 0.25em 0.6em;
    font-size: 0.9em;
    min-height: 0;
    cursor: grab;
    touch-action: none;
    white-space: nowrap;
}

.ladder-options-summary {
    margin-top: 0.3em;
    padding: 0.35em 0.5em;
    border-radius: 0.35em;
    background: rgba(58, 160, 255, 0.12);
    color: #d1d4dc;
    font-size: 0.9em;
}

.ladder-options-popup input.invalid {
    border-color: #ef5350;
}

/* Cross-Exchange: how a planned entry is split across the exchanges
   (lineHoverPopup.js's renderSplit) - its own row under the fields. */
.popup-exchange-split {
    flex-basis: 100%;
    display: grid;
    gap: 0.25em;
    padding-top: 0.35em;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.popup-split-title {
    font-size: 0.85em;
    opacity: 0.75;
}

.popup-split-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.popup-split-row > label {
    flex: 1;
    cursor: pointer;
}

.popup-split-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.popup-split-row input[hidden],
.popup-split-row span[hidden],
.popup-split-sum[hidden] {
    display: none;
}

.popup-split-sum {
    font-size: 0.85em;
    opacity: 0.75;
    text-align: right;
}

.popup-split-sum.invalid {
    color: #ffb74d;
    opacity: 1;
}

/* A target row: "[Hyperliquid ▾] [w2 ▾] [sub1 ▾]  [60] %  ✕" - the
   dropdowns look like the text of the line's own "→ ..." label. */
.popup-target-row {
    flex-wrap: wrap;
    gap: 0.4em;
}

.popup-target-chip {
    width: auto;
    max-width: 9em;
    padding: 1px 2px;
    background: transparent;
    color: inherit;
    border: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 0;
    font: inherit;
    cursor: pointer;
}

.popup-target-chip option {
    background: #1e222d;
    color: #d1d4dc;
}

.popup-target-row input[type="number"] {
    width: 3.6em;
    margin-left: auto;
}

.popup-target-remove,
.popup-target-add {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 0 0.4em;
    cursor: pointer;
    font: inherit;
}

.popup-target-add {
    justify-self: start;
    opacity: 0.85;
}

/* K1m6a Box: the 🔓/🔒 on its high/low line and the SL buffer on its SL
   line, right after the current candle like .failed-auction-tools (see
   chart/tools/k1m6aBox.js) - the fib lines' own gray. */
.k1m6a-tools {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    align-items: center;
    gap: 4px;
    z-index: 4;
}

.k1m6a-btn,
.k1m6a-tools .custom-select-trigger {
    height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid #C9CED4;
    border-radius: 11px;
    background: rgba(19, 23, 34, 0.92);
    color: #C9CED4;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.k1m6a-btn:hover,
.k1m6a-tools .custom-select-trigger:hover {
    background: #C9CED4;
    color: #131722;
}

/* "Candle Fib" (chart/tools/candleFib.js): the pointer dragged out of the
   wheel and the candle under it - glowing, with a short outline each time
   the pointer reaches a new one. Fixed to the viewport, never in the way
   of the pointer itself. */
.candle-fib-highlight {
    position: fixed;
    z-index: 1250;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 3px;
    background: rgba(255, 214, 0, 0.14);
    box-shadow: 0 0 10px 3px rgba(255, 214, 0, 0.55);
    pointer-events: none;
}

.candle-fib-highlight.flash {
    animation: candle-fib-outline 600ms ease-out;
}

@keyframes candle-fib-outline {
    from { border-color: #FFD600; }
    to { border-color: transparent; }
}

.candle-fib-pointer {
    position: fixed;
    z-index: 1251;
    width: 14px;
    height: 14px;
    margin: -9px 0 0 -9px;
    border: 2px solid #FFD600;
    border-radius: 50%;
    background: radial-gradient(circle, #FFD600 0 2px, transparent 3px);
    pointer-events: none;
}

.candle-fib-highlight[hidden],
.candle-fib-pointer[hidden] {
    display: none;
}

/* "SK-fib-ext" (chart/tools/skFibExt.js): over the chart while the second
   candle is picked - a tap / click picks it, the chart doesn't pan. */
.sk-fib-ext-layer {
    position: fixed;
    z-index: 1249;
    cursor: crosshair;
    touch-action: none;
}

/* "SK-Sequence" (chart/tools/skSequence.js): its drawings over the chart
   (they don't take clicks - the chart stays usable), and the popup a long
   press on one of its two candles opens. */
.sk-seq-layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

/* Lines and boxes are drawn behind the candles (skSequence.js's series
   primitive) - here they only stay for the long press to find. */
.sk-seq-layer line,
.sk-seq-layer polyline,
.sk-seq-layer rect {
    visibility: hidden;
}

.sk-seq-layer text {
    font: 600 11px/1 system-ui, sans-serif;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.75);
    stroke-width: 3px;
}

.sk-seq-layer .sk-seq-point {
    font-size: 13px;
    font-weight: 700;
}

/* SK-long / SK-short right of a hovered SK-Sequence box, at its levels. */
.sk-seq-entries {
    position: fixed;
    top: 0;
    z-index: 1240; /* over everything of the chart - only dialogs above */
    width: 0;
    height: 0;
}

.sk-seq-entry {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: rgba(19, 23, 34, 0.92);
    font: 600 10px/1.3 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.sk-seq-entry.long {
    color: #26a69a;
}

.sk-seq-entry.short {
    color: #ef5350;
}

.sk-seq-entry.placed {
    color: #d1d4dc;
}

.sk-seq-entry:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sk-seq-entry[hidden] {
    display: none;
}

.sk-seq-popup {
    position: fixed;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 8px;
    border: 1px solid #363a45;
    border-radius: 8px;
    background: rgba(19, 23, 34, 0.97);
    color: #d1d4dc;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.sk-seq-popup-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.sk-seq-popup button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sk-seq-popup button:hover,
.sk-seq-popup .sk-seq-color.active {
    border-color: #363a45;
    background: rgba(255, 255, 255, 0.06);
}

.sk-seq-popup-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.sk-seq-colors {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sk-seq-popup .sk-seq-settings-btn {
    padding: 4px 6px;
    font-size: 1.05em;
}

.sk-seq-setting {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 4px 2px;
    cursor: pointer;
}

.sk-seq-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .candle-fib-highlight.flash {
        animation: none;
        border-color: #FFD600;
    }
}