/* Handels-Ebene — right-hand order ticket in the Chart-Studio (KONZEPT-Chart-Studio-Handelsebene,
   VORSCHAU-Handels-Sidebar-Ebenen). Token-only (§21a): no hex/rgb — tints via color-mix + transparent.
   Global (not scoped) so the shared CounterPositionBlock child inherits the same visual language. */

.tp {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 322px;
    min-width: 0;
    border-left: 1px solid var(--fn-border);
    background: var(--fn-bg-muted);
    overflow: hidden;
    z-index: 4;
}

/* Crossfade: only the panel switches (compact ↔ mask ↔ preview); the overall view stays calm. */
.tp-view { transition: opacity .3s ease; }
.tp-mask, .tp-preview {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    background: var(--fn-bg-muted);
}
.tp-compact { overflow-y: auto; }
.tp.show-mask .tp-compact { opacity: 0; pointer-events: none; }
.tp.show-mask .tp-mask { opacity: 1; pointer-events: auto; }
.tp.show-preview .tp-compact,
.tp.show-preview .tp-mask { opacity: 0; pointer-events: none; }
.tp.show-preview .tp-preview { opacity: 1; pointer-events: auto; }

/* ---- header (compact) ---- */
.tp-head { padding: 12px 14px; border-bottom: 1px solid var(--fn-border); }
.tp-px { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.tp-px-val { font: 700 18px var(--fn-font-mono); color: var(--fn-text); }
.tp-px-val.tp-miss { font-size: 13px; color: var(--fn-warning); }
.tp-chg { font-size: 12px; }
.tp-chg.up { color: var(--fn-success); }
.tp-chg.down { color: var(--fn-danger); }
.tp-bidask { display: flex; gap: 16px; margin-top: 9px; font: 11.5px var(--fn-font-mono); color: var(--fn-text-secondary); }
.tp-bidask .ask { color: var(--fn-danger); font-weight: 700; }
.tp-bidask .bid { color: var(--fn-cat-blue); font-weight: 700; }

.tp-mode { display: flex; margin-top: 10px; border: 1px solid var(--fn-border-strong); border-radius: 8px; overflow: hidden; }
.tp-mode button {
    flex: 1; border: 0; background: var(--fn-input-bg); color: var(--fn-text-secondary);
    padding: 6px; font: 700 12px var(--fn-font); cursor: pointer;
}
.tp-mode button.on { background: var(--fn-primary); color: var(--fn-on-primary); }
.tp-mode button.live.on { background: var(--fn-warning); color: var(--fn-on-primary); }
.tp-note { margin-top: 8px; font-size: 11px; color: var(--fn-warning); }

/* ---- sections ---- */
.tp-sect { padding: 12px 14px; border-bottom: 1px solid var(--fn-border); }
.tp-cap { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--fn-text-tertiary); font-weight: 700; margin-bottom: 9px; }
.tp-cap-sp { margin: 12px 0 6px; }

.tp-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.tp-bs button {
    border: 1px solid var(--fn-border-strong); border-radius: 9px; padding: 9px;
    font: 700 13px var(--fn-font); cursor: pointer; background: var(--fn-input-bg); color: var(--fn-text);
}
.tp-bs .buy.on { background: color-mix(in srgb, var(--fn-success) 18%, transparent); border-color: color-mix(in srgb, var(--fn-success) 60%, transparent); color: var(--fn-success); }
.tp-bs .sell.on { background: color-mix(in srgb, var(--fn-danger) 16%, transparent); border-color: color-mix(in srgb, var(--fn-danger) 55%, transparent); color: var(--fn-danger); }

.tp-detrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 2px; font-size: 11.5px; color: var(--fn-text-secondary); cursor: pointer; }
.tp-detrow b { color: var(--fn-text); }
.tp-detrow small { color: var(--fn-text-tertiary); }

/* toggle switch */
.tp-sw { width: 38px; height: 20px; border-radius: var(--fn-radius-pill); background: var(--fn-border-strong); position: relative; flex: 0 0 auto; transition: background .15s; }
.tp-sw:after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fn-text-secondary); transition: left .15s; }
.tp-sw.on { background: var(--fn-primary); }
.tp-sw.on:after { left: 20px; background: var(--fn-on-primary); }

/* position + orders */
.tp-pos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.tp-pos dt { color: var(--fn-text-secondary); font-size: 12px; }
.tp-pos dd { margin: 0; text-align: right; font: 12.5px var(--fn-font-mono); color: var(--fn-text); }
.tp-pos dd.up { color: var(--fn-success); }
.tp-pos dd.down { color: var(--fn-danger); }
.tp-empty { font-size: 11.5px; color: var(--fn-text-tertiary); }
.tp-orders { font: 11.5px var(--fn-font-mono); color: var(--fn-text-secondary); }
.tp-ord { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--fn-border); }
.tp-x { color: var(--fn-danger); cursor: pointer; font-weight: 700; }
.tp-hintbox { margin: 12px 14px; border: 1px dashed var(--fn-border-strong); border-radius: 8px; color: var(--fn-text-tertiary); font-size: 11px; padding: 9px 11px; line-height: 1.5; }

/* ---- order mask ---- */
.tp-mask-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fn-border); background: var(--fn-bg-alt); position: sticky; top: 0; z-index: 2; }
.tp-back { border: 1px solid var(--fn-border-strong); border-radius: 8px; background: var(--fn-input-bg); color: var(--fn-text-secondary); font: 600 12px var(--fn-font); padding: 5px 10px; cursor: pointer; }
.tp-mask-title { font-weight: 700; font-size: 13px; color: var(--fn-text); }
.tp-mask-title .oside-buy { color: var(--fn-primary); }
.tp-mask-title .oside-sell { color: var(--fn-danger); }

.tp-msect { padding: 12px 14px; border-bottom: 1px solid var(--fn-border); }
.tp-est { font: 11px var(--fn-font-mono); color: var(--fn-text-tertiary); margin: 6px 0 0; }

.tp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tp-row label { flex: 0 0 60px; font-size: 11.5px; color: var(--fn-text-secondary); }
.tp-stepper { display: flex; align-items: center; border: 1px solid var(--fn-border-strong); border-radius: 8px; overflow: hidden; flex: 1; }
.tp-stepper button { width: 30px; height: 30px; border: 0; background: var(--fn-input-bg); color: var(--fn-text); font-weight: 700; cursor: pointer; }
.tp-val { flex: 1; text-align: center; font: 700 13px var(--fn-font-mono); color: var(--fn-text); }
.tp-unit { display: inline-flex; border: 1px solid var(--fn-border); border-radius: 7px; overflow: hidden; }
.tp-unit button { border: 0; background: var(--fn-input-bg); color: var(--fn-text-tertiary); font: 600 11px var(--fn-font-mono); padding: 5px 8px; cursor: pointer; }
.tp-unit button.on { background: var(--fn-border-strong); color: var(--fn-text); }

.tp-otype { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-otype button { border: 1px solid var(--fn-border); border-radius: var(--fn-radius-pill); background: var(--fn-input-bg); color: var(--fn-text-secondary); font: 600 11.5px var(--fn-font); padding: 4px 11px; cursor: pointer; }
.tp-otype button.on { border-color: var(--fn-primary); color: var(--fn-primary); background: color-mix(in srgb, var(--fn-primary) 10%, transparent); }
.tp-otype button.o-sar.on { border-color: var(--fn-cat-purple); color: var(--fn-cat-purple); background: color-mix(in srgb, var(--fn-cat-purple) 12%, transparent); }

.tp-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.tp-field span { font-size: 11.5px; color: var(--fn-text-secondary); }
.tp-input { width: 120px; background: var(--fn-input-bg); border: 1px solid var(--fn-border-strong); border-radius: 7px; color: var(--fn-text); font: 700 12.5px var(--fn-font-mono); padding: 6px 9px; text-align: right; }
.tp-miniseg { display: inline-flex; border: 1px solid var(--fn-border-strong); border-radius: 7px; overflow: hidden; }
.tp-miniseg button { border: 0; background: var(--fn-input-bg); color: var(--fn-text-tertiary); font: 600 11px var(--fn-font); padding: 5px 10px; cursor: pointer; }
.tp-miniseg button + button { border-left: 1px solid var(--fn-border); }
.tp-miniseg button.on { background: var(--fn-border-strong); color: var(--fn-text); }

.tp-revnote { font-size: 11px; color: var(--fn-text-tertiary); line-height: 1.5; margin: 3px 0 0; }
.tp-revnote b { color: var(--fn-warning); }
.tp-revnote-show { display: block; }
.tp-gdays { margin: 8px 0 0; }

/* SAR block */
.tp-sar { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--fn-border-strong); }
.tp-cap-sar { color: var(--fn-cat-purple); }
.tp-cap-sp2 { margin-top: 9px; }
.tp-sar-modes { display: flex; border: 1px solid var(--fn-border-strong); border-radius: 8px; overflow: hidden; margin-bottom: 2px; }
.tp-sar-modes button { flex: 1; border: 0; background: var(--fn-input-bg); color: var(--fn-text-secondary); padding: 7px 3px; font: 700 11.5px var(--fn-font); cursor: pointer; }
.tp-sar-modes button.on { background: var(--fn-cat-purple); color: var(--fn-on-primary); }

/* counter-position block (shared) */
.tp-gblock { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--fn-border-strong); }
.tp-gcap { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--fn-text-tertiary); font-weight: 700; margin: 0 0 6px; }
.tp-attach { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.tp-attach span:first-child { font-size: 11.5px; color: var(--fn-text-secondary); }
.tp-provline { font-size: 10.5px; color: var(--fn-text-tertiary); line-height: 1.45; margin-top: 7px; border: 1px dashed var(--fn-border-strong); border-radius: 8px; padding: 7px 9px; }
.tp-provline b { color: var(--fn-text-secondary); }

/* target calculator */
.tp-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-box { border: 1px solid var(--fn-border); border-radius: 9px; padding: 9px 10px; background: var(--fn-input-bg); }
.tp-box .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--fn-text-tertiary); font-weight: 700; }
.tp-box .v { font: 700 14px var(--fn-font-mono); margin-top: 3px; color: var(--fn-text); }
.tp-box.tp .v { color: var(--fn-success); }
.tp-box.sl .v { color: var(--fn-danger); }
.tp-crv { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--fn-accent-line); border-radius: 9px; padding: 8px 11px; background: var(--fn-accent-soft); }
.tp-crv b { font: 700 15px var(--fn-font-mono); color: var(--fn-primary); }

/* CTA */
.tp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.tp-cta button { border-radius: 10px; padding: 11px; font: 700 13px var(--fn-font); cursor: pointer; border: 1px solid var(--fn-border-strong); background: var(--fn-input-bg); color: var(--fn-text); }
.tp-preview-btn:disabled, .tp-go:disabled { opacity: .5; cursor: not-allowed; }
.tp-go { border-color: color-mix(in srgb, var(--fn-success) 60%, transparent); background: color-mix(in srgb, var(--fn-success) 16%, transparent); color: var(--fn-success); }
.tp-go.sell { border-color: color-mix(in srgb, var(--fn-danger) 60%, transparent); background: color-mix(in srgb, var(--fn-danger) 16%, transparent); color: var(--fn-danger); }

.tp-pvnote { margin: 12px 14px; font-size: 11px; color: var(--fn-text-tertiary); line-height: 1.5; border: 1px dashed var(--fn-border-strong); border-radius: 8px; padding: 9px 11px; }

/* toast */
.tp-toast {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    background: var(--fn-bg-alt); border: 1px solid var(--fn-primary); color: var(--fn-text);
    padding: 10px 16px; border-radius: 10px; font-size: 12px; box-shadow: var(--fn-elevation-3);
    z-index: 60; max-width: 90%; text-align: center; cursor: pointer;
}