/* trade.css: the TRADE step, in the KGES site's own look (base.css: tokens, .card, .tbl, .seg, .btn),
 * light and compact.
 *
 *   Markets       a quiet list: the event's focus names first, every other name folded
 *   The chart     the quote (price in Archivo), the timeframe pills, the chart itself (its look is
 *                 the organisers' choice and is not changed here: only its card), positions under it
 *   Trade         the ticket: name and price, BUY / SELL, how many, leverage, why, the one button that
 *                 says what happens (kept in view); costs and the account folded. Bust: a short note.
 *   Phones        one column; a Buy / Sell bar above the foot; the ticket and the market list are
 *                 full-screen panels (Kit.Sheet)
 *
 * dashboard.js reads the --chart-* variables for lightweight-charts. */

.trade, .ticket-sheet, .market-sheet {
  --chart-bg: transparent;
  --chart-text: var(--ink-45);
  --chart-grid: var(--line-06);
  --chart-border: var(--line-08);
  --chart-up: var(--ok);
  --chart-down: var(--down-strong);
  --chart-line: var(--accent);
  --chart-cross: var(--accent-2);
  --chart-cross-label: var(--accent);
  --chart-vol-up: rgba(123, 216, 143, .3);
  --chart-vol-down: rgba(255, 107, 107, .3);
  --chart-avg: var(--accent-2);
  --tr-card: rgba(255, 255, 255, .025);
  --tr-gap: 10px;
}

.trade { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 304px; gap: var(--tr-gap); }

/* the three columns are quiet cards */
.wl, .chart-panel, .blotter, .rail { min-width: 0; min-height: 0; border-radius: 16px; border: 1px solid var(--line-10); background: var(--tr-card); }
.trade .strip { padding: 8px 12px 6px 14px; }
.trade .strip__meta { font-size: 11.5px; }

/* ------------------------------------------------------------------ markets */
.wl { display: flex; flex-direction: column; overflow: hidden; }
.wl__ttl { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: 0; text-transform: none; }
.wl__tools { flex: none; padding: 0 10px 8px; }
.wl__tools .input { height: 30px; border-radius: 10px; font-size: 12.5px; }
.wl__cols { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 70px 62px; gap: 6px; align-items: center; padding: 5px 12px; border-top: 1px solid var(--line-08); border-bottom: 1px solid var(--line-08); background: #061131; color: var(--ink-45); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wl__cols .num { font-family: var(--font-body); text-align: right; letter-spacing: .1em; }
.wl__list { flex: 1 1 auto; min-height: 0; }
.wl__head { padding: 8px 12px 3px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wl__row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 70px 62px; gap: 6px; align-items: center; min-height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-06); cursor: pointer; font-size: 12.5px; white-space: nowrap; transition: background .15s; }
.wl__row:hover { background: rgba(255, 255, 255, .035); }
.wl__row.is-selected { background: rgba(243, 140, 46, .1); box-shadow: inset 3px 0 0 var(--accent); }
.wl__tk { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--accent-2); overflow: hidden; }
.wl__halt { padding: 1px 5px; border-radius: 99px; background: rgba(245, 196, 81, .16); color: var(--gold); font-family: var(--font-body); font-size: 9.5px; font-weight: 800; }
.wl__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-55); font-size: 11.5px; }
.wl__last { display: block; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink); border-radius: 6px; }
.wl__lastv { position: relative; }
.wl__chg { text-align: right; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.wl__row.is-halted .wl__lastv { color: var(--gold); }
.wl__row.is-focus { min-height: 40px; padding-top: 4px; padding-bottom: 4px; row-gap: 0; }
.wl__row.is-focus .wl__tk { grid-column: 1 / 3; grid-row: 1; font-size: 12.5px; color: var(--ink); }
.wl__row.is-focus .wl__name { grid-column: 1 / 3; grid-row: 2; font-size: 11.5px; }
.wl__row.is-focus .wl__last { grid-column: 3; grid-row: 1 / 3; font-size: 12.5px; }
.wl__row.is-focus .wl__chg { grid-column: 4; grid-row: 1 / 3; }
.wl__fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; color: var(--ink-60); font-size: 12.5px; font-weight: 600; text-align: left; transition: color .15s; }
.wl__fold:hover { color: var(--ink); }
.wl__foldsign { color: var(--accent); font-weight: 800; width: 10px; }
.wl__gcount { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--ink-60); font-size: 10.5px; font-weight: 700; }
.wl__cl { padding: 9px 12px 3px; color: var(--ink-40); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Only this event's names trade (rules.focusOnly): the names alone, bigger, then how a trade works */
.wl.is-focusonly .wl__cols { border-top: 0; }
.wl.is-focusonly .wl__row.is-focus { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.wl.is-focusonly .wl__row.is-focus .wl__tk { font-size: 13.5px; }
.wl.is-focusonly .wl__row.is-focus .wl__last { font-size: 13.5px; }
.wl__wait { padding: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-55); }
.wl__explain { margin: 12px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-08); background: rgba(255, 255, 255, .025); }
.wl__explain-h { margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.wl__explain ul { display: flex; flex-direction: column; gap: 5px; }
.wl__explain li { font-size: 12px; line-height: 1.45; color: var(--ink-72); white-space: normal; }
.wl__explain b { color: var(--accent-2); font-weight: 800; }

/* ------------------------------------------------------------------ centre: the chart card over the positions card */
.centre { display: flex; flex-direction: column; gap: var(--tr-gap); min-width: 0; min-height: 0; }
.chart-panel { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(3, 13, 39, .55) 40%); }
.ch-strip { gap: 10px; padding-right: 10px; }
.ch-pick { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.ch-t { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent-2); }
.ch-pick:hover .ch-t { color: var(--accent); }
.ch-pick__more { display: none; font-size: 12px; font-weight: 700; color: var(--ink-60); }
.ch-name { color: var(--ink-75); font-weight: 700; font-size: 12.5px; }
.ch-ex { color: var(--ink-40); }
.ch-tf .seg__btn { padding: 4px 11px; font-size: 12px; }
.ch-strip .btn--sm { height: 28px; padding: 0 12px; font-size: 12px; }
.ch-toggle:not(.is-on) { color: var(--ink-45); }

.quote { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; padding: 0 14px 6px; white-space: nowrap; }
.quote__last { position: relative; display: inline-block; padding: 0 4px; margin-left: -4px; border-radius: 8px; }
.quote__v { position: relative; z-index: 1; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.quote__chg { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.quote__kv { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; }
.quote__kv .k, .ticket__quote .k, .ticket__hold .k { display: inline; padding: 0; background: none; color: var(--ink-45); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.quote__kv .v { font-family: var(--font-mono); color: var(--ink); }
.quote__kv .v.up { color: var(--ok); }
.quote__kv .v.down { color: var(--down); }
.quote__sep { align-self: center; width: 1px; height: 12px; background: var(--line-12); }
.quote__note { color: var(--ink-40); font-size: 11.5px; }
.ch-pos { font-size: 12.5px; }
.ch-pos b { font-weight: 800; }
.ch-pos.is-long b { color: var(--ok); }
.ch-pos.is-short b { color: var(--down); }
.ch-halt { padding: 3px 9px; border-radius: 99px; background: rgba(245, 196, 81, .14); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.ph-focus { display: none; }

.ch-body { position: relative; flex: 1 1 auto; min-height: 140px; margin: 0 6px; }
.ch-box { position: absolute; inset: 0; }
#chart { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.ch-marks { position: absolute; z-index: 2; left: 0; top: 0; bottom: 26px; pointer-events: none; overflow: hidden; }
.ch-mark { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ink-30); color: var(--ink-60); }
.ch-mark--bell { border-left-color: rgba(123, 216, 143, .7); color: var(--ok); }
.ch-mark--drop { border-left-color: rgba(243, 140, 46, .65); color: var(--accent-2); }
.ch-mark--lock { border-left: 1px solid var(--accent); color: var(--accent); }
.ch-mark--reveal { border-left: 2px solid var(--gold); color: var(--gold); }
.ch-mark--close { border-left-color: var(--ink-45); color: var(--ink-75); }
.ch-mark--future { opacity: .5; }
.ch-mark__label { position: absolute; left: 4px; bottom: 4px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: rgba(3, 13, 39, .92); border: 1px solid currentColor; color: inherit; font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 13px; text-transform: uppercase; }
.ch-mark__label--left { left: auto; right: 4px; }
.ch-empty { position: absolute; z-index: 3; left: 12px; top: 12px; max-width: 70%; padding: 8px 12px; border-radius: 12px; background: var(--well-50); border: 1px solid var(--line-10); color: var(--ink-55); font-size: 13px; pointer-events: none; }
.ch-foot { flex: none; display: flex; align-items: center; gap: 14px; padding: 4px 14px 7px; color: var(--ink-45); font-size: 11px; white-space: nowrap; overflow: hidden; }
.ch-legend { display: inline-flex; gap: 14px; }
.ch-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg { font-style: normal; }
.lg--avg { display: inline-block; width: 16px; border-top: 1px dashed var(--accent-2); }
.lg--buy { color: var(--ok); }
.lg--sell { color: var(--down-strong); }
.ch-credit { color: var(--ink-30); }

.trade-divider { flex: none; height: 6px; margin: -8px 0; cursor: row-resize; position: relative; z-index: 1; }
.trade-divider::after { content: ''; position: absolute; left: 50%; top: 2px; width: 44px; height: 3px; margin-left: -22px; border-radius: 3px; background: transparent; transition: background .15s; }
.trade-divider:hover::after, .trade-divider.is-dragging::after, .trade-divider:focus-visible::after { background: var(--accent); }
.trade-divider:focus-visible { outline: none; }
body.is-resizing { cursor: row-resize; user-select: none; }

/* ------------------------------------------------------------------ positions · fills · orders */
.blotter { flex: 0 0 30%; min-height: 104px; display: flex; flex-direction: column; overflow: hidden; }
.blotter__strip { padding: 6px 12px 6px 8px; border-bottom: 1px solid var(--line-08); }
.seg--strip .seg__btn { padding: 4px 12px; font-size: 12px; }
.seg--strip .badge { margin-left: 2px; height: 16px; min-width: 16px; font-size: 10px; }
.seg--strip .seg__btn.is-on .badge { background: rgba(3, 13, 39, .3); color: var(--navy); }
.blotter__body { position: relative; flex: 1 1 auto; min-height: 0; }
.blotter .tbl th { padding: 5px 12px; font-size: 9.5px; }
.blotter .tbl td { padding: 4px 12px; font-size: 12.5px; }
.blotter .tbl td.t { position: relative; font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); }
.blotter .tbl tr[data-t] { cursor: pointer; }
.pos__tk { position: relative; z-index: 1; letter-spacing: .03em; }
.pos__sub { display: none; }
.c-side .up, .c-side .down { font-weight: 800; }
.c-pl { font-weight: 700; white-space: nowrap; }
.pl__p { margin-left: 8px; font-weight: 500; font-size: 11.5px; opacity: .8; }
.tbl td.act { width: 1%; text-align: right; padding-top: 3px; padding-bottom: 3px; }
.pos__close { min-width: 64px; height: 26px; font-family: var(--font-body); }
.pos__close.is-armed { background: var(--down-strong); border-color: transparent; color: var(--navy); }
.tbl .c-note { max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-75); }
.tbl .c-note.dim { color: var(--ink-40); }
#blotter-empty { position: absolute; inset: 28px 0 auto 0; padding: 12px 14px; }
#blotter-empty .empty__title { font-size: 13px; }
#blotter-empty .empty__hint { font-size: 12px; }

/* ------------------------------------------------------------------ the ticket */
.rail { overflow-y: auto; overflow-x: hidden; }
.ticket { display: flex; flex-direction: column; min-width: 0; min-height: 100%; }
.ticket.is-prefilled { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 16px; }
.ticket__head { padding: 9px 14px 6px; }
.ticket__idl { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.ticket__k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink-45); }
.ticket__idl .strip__code { font-size: 13px; }
.ticket__nm { min-width: 0; color: var(--ink-55); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ticket__px { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.ticket__last { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.ticket__chg { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.ticket__quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; font-size: 12px; }
.ticket__quote .v { font-family: var(--font-mono); }
.ticket__quote .k + .v { margin-right: 8px; }
.ticket__noverdict { margin: 0 12px 6px; padding: 6px 10px; border-radius: 10px; background: rgba(243, 140, 46, .1); border: 1px solid rgba(243, 140, 46, .4); color: var(--accent-2); font-size: 12px; font-weight: 700; line-height: 1.35; }
.ticket__hold { margin: 0 12px; padding: 5px 10px; border-radius: 10px; background: var(--well-30); border: 1px solid var(--line-08); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.ticket__hold .k { margin-right: 4px; }
.ticket__hold b { font-weight: 800; }
.ticket__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.ticket__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 0; }
.side {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 42px; border-radius: 99px;
  border: 1.5px solid; background: transparent; text-align: center; transition: background .15s, color .15s, transform .1s ease-out, box-shadow .15s;
}
.side:active { transform: scale(.97); }
.side__w { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.side__x { font-size: 10.5px; font-weight: 600; opacity: .85; }
.side--buy { border-color: rgba(123, 216, 143, .55); color: var(--ok); }
.side--sell { border-color: rgba(255, 107, 107, .55); color: var(--down); }
.side--buy:hover { background: rgba(123, 216, 143, .08); }
.side--sell:hover { background: rgba(255, 107, 107, .08); }
.side--buy.is-on { background: var(--ok); border-color: transparent; color: var(--navy); box-shadow: 0 8px 24px -12px rgba(123, 216, 143, .6); }
.side--sell.is-on { background: var(--down-strong); border-color: transparent; color: var(--navy); box-shadow: 0 8px 24px -12px rgba(255, 107, 107, .6); }
.ticket__hint { padding: 5px 14px 0; color: var(--ink-55); font-size: 11.5px; line-height: 1.4; }
.blotter__body > .tbl { border-collapse: separate; }

.ticket__qty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 8px 12px 0 14px; }
.ticket__lbl { display: flex; align-items: center; margin: 0; }
.ticket__qty .stepper { grid-column: 1 / -1; margin-top: 0; }
.ticket__qtyh { grid-column: 1 / -1; margin: -2px 2px 0; font-size: 11px; color: var(--ink-60); font-variant-numeric: tabular-nums; min-height: 14px; }
.ticket__presets { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-08); }
/* Close all keeps its words on one line beside the four sizes */
.ticket__presets .preset--all { padding: 0 10px; white-space: nowrap; }
.ticket__presets:has(.preset--all:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.preset { height: 24px; border-radius: 99px; text-align: center; color: var(--ink-60); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color .15s, background .15s; }
.preset:hover { color: var(--ink); }
.preset.is-on { background: var(--accent); color: var(--navy); }
.preset--all { color: var(--accent-2); }
.preset[hidden] { display: none; }
.stepper { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
.stepper__btn { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 50%; border: 1px solid var(--line-20); color: var(--ink-75); font-size: 18px; font-weight: 700; line-height: 1; transition: color .15s, border-color .15s; }
.stepper__btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, .4); }
.stepper__in { height: 34px; border-radius: 10px; text-align: center; font-family: var(--font-mono); font-size: 15px; font-weight: 700; }

.ticket__lev { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px 0 14px; }
.ticket__lev .field__label { flex: 1 1 auto; }
.ticket__lev .seg { padding: 2px; }
.ticket__lev .seg__btn { padding: 3px 11px; font-size: 12px; }
#tk-lev.is-locked { opacity: .55; }
.ticket__levh { flex: 1 1 100%; color: var(--ink-40); font-size: 11px; text-align: right; }
.ticket__levh:empty { display: none; }

.ticket__note { padding: 8px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.ticket__note .field__label { margin: 0 2px; }
#tk-note { height: 34px; border-radius: 10px; font-size: 13px; }
.ticket__req { margin-left: 6px; color: var(--ink-40); font-weight: 600; }
.ticket__req.is-missing { color: var(--accent-2); }
#tk-note.is-missing { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 140, 46, .22); }
.ticket__notechips { display: flex; flex-direction: column; gap: 1px; margin: 0 2px; }
.ticket__notechips:empty { display: none; }
.ticket__notechip { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 2px 0; color: var(--ink-55); font-size: 11.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.ticket__notechip:hover { color: var(--ink); }
.ticket__notechip-k { flex: none; padding: 1px 7px; border-radius: 99px; background: rgba(243, 140, 46, .14); color: var(--accent-2); font-size: 10px; font-weight: 800; }

.ticket__more { margin: 6px 14px 0; }
.ticket__more > summary { padding: 3px 0; font-size: 12px; }
.more { padding: 4px 0 8px; }
.more__x { margin: 4px 0 8px; color: var(--ink-55); font-size: 12px; line-height: 1.45; }
.more__h { margin: 8px 0 2px; color: var(--ink-45); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.more__dl { margin: 0; }
.more__dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-06); }
.more__dl dt { color: var(--ink-75); font-size: 12.5px; font-weight: 600; }
.more__dl dd { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: 12px; text-align: right; }
.more__dl dd.is-warn { color: var(--accent-2); }
.more__dl p { grid-column: 1 / -1; margin-top: 1px; color: var(--ink-45); font-size: 11.5px; line-height: 1.4; }
.more__dl > div[hidden] { display: none; }
.more__rules { margin-top: 8px; color: var(--ink-55); font-size: 12px; line-height: 1.5; }
.cap { margin: 2px 0 0; }
.cap__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.cap__lbl { color: var(--ink-75); font-weight: 600; }
.cap__txt { color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.cap__bar { position: relative; height: 6px; margin-top: 5px; border-radius: 99px; background: var(--line-08); overflow: hidden; }
.cap__used, .cap__order { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); }
.cap__used { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cap__order { background: rgba(238, 241, 248, .55); }
.cap__order.is-less { background: var(--ink-30); }
.cap__bar.is-over { box-shadow: inset 0 0 0 1px var(--down-strong); }

/* The send area stays in view at the foot of the card while the rest scrolls. */
.ticket__send { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 6px 12px 10px; background: #061029; box-shadow: 0 -10px 14px -6px #061029; }
.ticket__reason { min-height: 16px; padding: 0 2px; color: var(--ink-50); font-size: 12px; line-height: 1.35; }
.ticket__reason.is-warn { color: var(--accent-2); }
.ticket__msg { min-height: 16px; margin-top: 2px; padding: 0 2px; color: var(--ink-75); font-size: 12px; line-height: 1.35; }
.ticket__msg:empty { min-height: 0; }
.ticket__msg.is-ok { color: var(--ok); }
.ticket__msg.is-error { color: var(--down); }
.ticket__msg.is-warn { color: var(--accent-2); }
.ticket__submit { width: 100%; height: 44px; margin-top: 5px; border-radius: 99px; font-size: 14px; font-weight: 800; }
.ticket__submit.is-soft { box-shadow: inset 0 0 0 2px var(--gold); }
.ticket__check { display: none; font-size: 16px; }
.ticket__submit.is-filled .ticket__check { display: inline; }
.ticket__foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 14px 10px; color: var(--ink-40); font-size: 11px; }
.ticket__foot .kbd { margin-right: 3px; }
.ticket.is-bust .ticket__foot { display: none; }

/* Bust: the ticket gives way to a short, calm explanation */
.ticket__bust { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 12px; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .07); }
.ticket__bustk { padding: 3px 10px; border-radius: 99px; background: var(--down-strong); color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ticket__bustt { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.ticket__bustx { font-size: 12.5px; line-height: 1.5; color: var(--ink-72); }
.ticket__bust .btn { margin-top: 4px; }

.ph-actions { display: none; }

/* ------------------------------------------------------------------ wide screens */
@media (min-width: 1600px) {
  .trade { grid-template-columns: 280px minmax(0, 1fr) 340px; --tr-gap: 12px; }
  .wl__row { grid-template-columns: 60px minmax(0, 1fr) 80px 66px; }
  .wl__cols { grid-template-columns: minmax(0, 1fr) 80px 66px; }
}
/* ------------------------------------------------------------------ narrower laptops */
@media (max-width: 1440px) and (min-width: 761px) {
  .quote__kv--x, .quote__note, .quote__sep { display: none; }
}
@media (max-width: 1200px) and (min-width: 761px) {
  .trade { grid-template-columns: 210px minmax(0, 1fr) 284px; }
  .wl__row { grid-template-columns: 48px minmax(0, 1fr) 62px 56px; padding: 0 10px; gap: 4px; }
  .wl__cols { grid-template-columns: minmax(0, 1fr) 62px 56px; padding: 5px 10px; gap: 4px; }
  .wl__head, .wl__fold, .wl__cl { padding-left: 10px; padding-right: 10px; }
  .ch-name, .ch-ex { display: none; }
  .tbl .c-side .dim { display: none; }
  .blotter .tbl th, .blotter .tbl td { padding-left: 9px; padding-right: 9px; }
}
/* Short laptop screens: the ticket tightens so the whole form and its button fit the card */
@media (max-height: 700px) and (min-width: 761px) {
  .ticket__hint { display: none; }
  .ticket__foot { display: none; }
  .ticket__head { padding-top: 7px; padding-bottom: 4px; }
  .ticket__last { font-size: 21px; }
  .side { height: 38px; }
  .ticket__qty, .ticket__lev, .ticket__note { padding-top: 6px; }
  .ticket__levh { display: none; }
  .ticket__submit { height: 40px; }
  .quote__v { font-size: 21px; }
  .ch-foot { padding-top: 2px; padding-bottom: 4px; }
}

/* ------------------------------------------------------------------ phones: one step at a time */
@media (max-width: 760px) {
  .trade { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 calc(72px + 12px); }
  .rail { display: none; }
  .chart-panel { display: block; }
  .ch-strip { padding: 12px 12px 10px; flex-wrap: wrap; row-gap: 8px; }
  .ch-strip .strip__t, .ch-name, .ch-ex, #ch-marks-btn, #ch-fit { display: none; }
  .ch-pick { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-20); }
  .ch-t { font-size: 15px; }
  .ch-pick__more { display: inline; }
  .ch-tf .seg__btn { padding: 9px 12px; font-size: 13px; }
  .quote { padding: 0 14px 10px; }
  .quote__v { font-size: 30px; }
  .quote__chg { font-size: 14px; }
  .quote__kv--x, .quote__sep, .quote__note { display: none; }
  .ch-pos { flex-basis: 100%; font-size: 14px; }
  .ph-focus { display: flex; gap: 8px; padding: 0 12px 12px; overflow-x: auto; scrollbar-width: none; }
  .ph-focus::-webkit-scrollbar { display: none; }
  .ph-focus[hidden] { display: none; }
  .phf { flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 92px; height: 52px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--line-12); background: rgba(255, 255, 255, .04); }
  .phf.is-on { border-color: rgba(243, 140, 46, .6); background: rgba(243, 140, 46, .12); }
  .phf__t { font-family: var(--font-mono); color: var(--accent-2); font-weight: 700; font-size: 14px; }
  .phf__c { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
  .ch-body { height: 280px; flex: none; margin: 0 4px; }
  .ch-foot .ch-credit { display: none; }
  .trade-divider { display: none; }
  .blotter { min-height: 0; }
  .blotter__strip { padding: 10px; }
  .seg--strip .seg__btn { padding: 9px 12px; font-size: 13px; }
  .blotter__body { overflow: visible; }
  #blotter-empty { position: static; }
  .blotter .tbl td { padding: 10px 12px; font-size: 14px; }
  .blotter .tbl th { padding: 8px 12px; }
  .tbl .c-side, .tbl .c-qty, .tbl .c-time, .tbl .c-px { display: none; }
  .pos__sub { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 12px; font-weight: 700; }
  .pos__close { height: 40px; min-width: 88px; font-size: 13px; }
  .tbl .c-note { max-width: 150px; }
  .ph-actions {
    position: fixed; left: 0; right: 0; bottom: var(--foot-h, calc(92px + var(--safe-b))); z-index: 44;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; background: rgba(0, 5, 16, .9); border-top: 1px solid var(--line-08);
  }
  .ph-actions .btn { height: 52px; font-size: 17px; }
  .ph-actions.is-bust { display: none; }
  html.has-sheet .ph-actions { display: none; }

  /* The ticket, full screen */
  .ticket-sheet .sheet__body { padding: 8px 0 16px; }
  .ticket-sheet .ticket { min-height: 0; }
  .ticket-sheet .ticket__last { font-size: 34px; }
  .ticket-sheet .side { height: 60px; }
  .ticket-sheet .side__w { font-size: 21px; }
  .ticket-sheet .preset { height: 40px; font-size: 15px; }
  .ticket-sheet .stepper__btn { height: 50px; }
  .ticket-sheet .stepper { grid-template-columns: 50px minmax(0, 1fr) 50px; }
  .ticket-sheet .stepper__in, .ticket-sheet #tk-note { height: 50px; font-size: 16px; }
  .ticket-sheet .stepper__in { font-size: 20px; }
  .ticket-sheet .ticket__notechip { font-size: 13.5px; padding: 7px 0; }
  .ticket-sheet .ticket__more > summary { min-height: 44px; }
  .ticket-sheet .ticket__send { padding-bottom: calc(14px + var(--safe-b)); }
  .ticket-sheet .ticket__submit { height: 56px; font-size: 16px; }
  .ticket-sheet .ticket__foot { display: none; }
  .ticket-sheet .seg--sm .seg__btn { padding: 10px 16px; font-size: 14px; }

  /* The market list, full screen */
  .market-sheet .sheet__body { padding: 8px 0 16px; }
  .market-sheet .wl { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .market-sheet .wl .strip { display: none; }
  .market-sheet .wl__tools { padding: 0 14px 12px; }
  .market-sheet #wl-filter { height: 46px; font-size: 16px; }
  .market-sheet .wl__list { overflow: visible; }
  .market-sheet .wl__cols { padding: 8px 14px; }
  .market-sheet .wl__row { min-height: 52px; padding: 0 14px; font-size: 14px; grid-template-columns: 66px minmax(0, 1fr) 84px 68px; }
  .market-sheet .wl__row.is-focus { min-height: 58px; }
  .market-sheet .wl__cols { grid-template-columns: minmax(0, 1fr) 84px 68px; }
  .market-sheet .wl__name { font-size: 13px; }
  .market-sheet .wl__fold { min-height: 52px; font-size: 14px; }
}