/*
 * Trading desk of the pro terminal: the order ticket (size modes with Risk highlighted as the prop firm edge, quick
 * prices, TP/SL and reduce-only, the preview with its amber / red tones, the inline confirmation, the side prepared
 * from the keyboard) and the toasts. Tokens: style.css.
 */

/* ---------- ticket: denser on the desk ---------- */
body[data-mode="live"] .p-ticket { padding: 12px; }
body[data-mode="live"] .p-ticket .eyebrow { margin-bottom: 8px; }
body[data-mode="live"] .p-ticket .field { margin-top: 10px; gap: 5px; }
body[data-mode="live"] .p-ticket .seg + .seg { margin-top: 6px; }
body[data-mode="live"] .p-ticket .text-input { min-height: 36px; font-size: 13.5px; }
body[data-mode="live"] .p-ticket .order { margin-top: 12px; }
body[data-mode="live"] .p-ticket .btn.buy, body[data-mode="live"] .p-ticket .btn.sell { min-height: 52px; }

/* size modes: Risk is our edge, in the amber of the prop firm limits */
.seg-modes .chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mode-risk svg { color: var(--warn); }
.mode-risk[aria-pressed="true"] { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
#riskRow { margin-top: 10px; padding: 0 10px 10px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 5%, transparent); }

.field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick { display: inline-flex; gap: 4px; }
.quick-btn {
  appearance: none; min-height: 22px; padding: 0 8px; cursor: pointer;
  font: 600 11px var(--font-sans); color: var(--mute); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 6px; transition: color var(--t-fast), border-color var(--t-fast);
}
.tk-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; color: var(--mute); cursor: pointer; }
.check input { width: 15px; height: 15px; margin: 0; accent-color: var(--acc); cursor: pointer; }
.check:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.check:has(input:checked) { color: var(--text); }
.tpsl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tpsl-row .field { margin-top: 6px; }
#tpslUnitSeg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.tpsl-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
.tpsl-alt-box { position: relative; display: block; min-width: 0; }
.tpsl-alt { width: 100%; padding-right: 46px; color: var(--mute); }
.tpsl-alt[data-bad="1"] { border-color: var(--down); }
.tpsl-unit { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 11px; color: var(--dim); pointer-events: none; }
.tpsl-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--dim); }
.seg-units .chip { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
#pvRewardRow dd { color: var(--up); }
@media (hover: hover) {
  .quick-btn:hover { color: var(--text); border-color: var(--line-strong); }
}

/* ---------- preview before sending ---------- */
.preview {
  display: grid; gap: 4px; margin: 12px 0 0; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.pv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.pv-row dt { color: var(--mute); white-space: nowrap; }
.pv-row dd { margin: 0; text-align: right; color: var(--text); }
.preview[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); }
.preview[data-tone="warn"] #pvStop { color: var(--warn); }
.preview[data-tone="danger"] { border-color: color-mix(in srgb, var(--down) 55%, transparent); background: var(--down-soft); }
.preview[data-tone="danger"] #pvStop { color: var(--down); }
.field .note-value { margin-top: -2px; color: var(--text); font-weight: 550; } /* order value under the minimum step */
.pv-note { margin-top: 6px; font-size: 11.5px; color: var(--mute); }
.pv-note[data-tone="warn"] { color: var(--warn); }
.pv-note[data-tone="danger"] { color: var(--down); font-weight: 600; }

/* ---------- inline confirmation, side prepared with B / S ---------- */
.tk-confirm {
  display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--text);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); border-radius: var(--r-sm);
}
.tk-confirm p { margin: 0; }
.tk-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.p-ticket[data-side="buy"] .order .btn.buy:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 2px var(--up); }
.p-ticket[data-side="sell"] .order .btn.sell:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 2px var(--down); }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; right: 16px; bottom: 42px; z-index: 180; display: grid; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast-item {
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--line-2); border-left: 3px solid var(--acc);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  animation: toast-in 200ms var(--ease); transition: opacity 200ms, transform 200ms;
}
.toast-item[data-tone="up"] { border-left-color: var(--up); }
.toast-item[data-tone="down"] { border-left-color: var(--down); }
.toast-item[data-tone="warn"] { border-left-color: var(--warn); }
.toast-item.out { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 759px) {
  .toasts { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); width: auto; }
}