/* ===========================================================================
   TRADING SIM — a three-column desk that folds into tabs on a phone
   =========================================================================== */

#view-trading .arena {
  height: clamp(560px, calc(100dvh - 190px), 820px);
}

.tr-desk {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 290px;
  gap: 10px;
  padding: 6px 12px 12px;
  font-size: 0.86rem;
  color: var(--arena-ink);
}

.up { color: var(--arena-good) !important; }
.down { color: var(--arena-bad) !important; }

/* --- Shared panel surface --- */
.tr-panel,
.tr-watch,
.tr-chartwrap,
.tr-ticker {
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--arena-line);
}

.tr-panel h4 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
}

.tr-panel h4 span {
  color: var(--arena-ink-3);
  opacity: 0.7;
}

.tr-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--arena-line);
}

.tr-kv:last-child { border-bottom: none; }

.tr-kv span {
  color: var(--arena-ink-3);
  font-size: 0.8rem;
}

.tr-kv b {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Watchlist --- */
.tr-watch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  min-height: 0;
}

.tr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name fig" "spark spark" "pos pos";
  align-items: center;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.tr-row:hover { background: rgba(255, 255, 255, 0.04); }

.tr-row.active {
  background: var(--game-faint);
  border-color: color-mix(in srgb, var(--game-accent) 45%, transparent);
  box-shadow: inset 3px 0 0 var(--game-accent);
}

.tr-row__name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.tr-row__name strong { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row__name small { font-size: 0.66rem; color: var(--arena-ink-3); }

.tr-row__fig { grid-area: fig; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); }
.tr-row__fig b { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-row__fig small { font-size: 0.68rem; }

.tr-spark {
  grid-area: spark;
  width: 100%;
  height: 22px;
}

.tr-row__pos {
  grid-area: pos;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  min-height: 0;
}

.tr-row__pos:empty { display: none; }
.tr-row__pos--note { color: var(--arena-warn); }

.tr-row.held .tr-row__name strong::after {
  content: ' ●';
  color: var(--game-accent);
  font-size: 0.6rem;
}

/* --- Main column --- */
.tr-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(120px, 30%);
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.tr-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.tr-ticker__id { min-width: 0; flex: 1; }

.tr-ticker__name {
  font-size: 1.15rem;
  font-weight: 700;
}

.tr-ticker__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.tr-ticker__tags span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--arena-chip);
  color: var(--arena-ink-2);
}

.tr-ticker__tags span.hot {
  background: rgba(255, 201, 77, 0.18);
  color: var(--arena-warn);
}

.tr-ticker__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-mono);
}

.tr-ticker__price {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tr-ticker__chg { font-size: 0.8rem; font-weight: 600; }

.tr-ticker__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tr-iconbtn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--arena-ink-2);
  background: var(--arena-chip);
  border: 1px solid var(--arena-line);
}

.tr-iconbtn:hover { color: var(--arena-ink); }

.tr-speed button,
.tr-mini button,
.tr-feedtabs button,
.tr-mtabs button {
  min-height: 30px;
  padding: 5px 11px;
  font-size: 0.78rem;
}

.tr-speed button svg {
  width: 13px;
  height: 13px;
  display: block;
}

.tr-desk.paused .tr-speed button[data-value="0"] {
  animation: tr-blink 1s steps(2) infinite;
}

@keyframes tr-blink {
  50% { opacity: 0.55; }
}

/* --- Chart --- */
.tr-chartwrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.tr-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.tr-desk.paused .tr-chartwrap::after {
  content: 'MARKET PAUSED';
  position: absolute;
  right: 74px;
  bottom: 22px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--arena-warn);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 201, 77, 0.1);
  border: 1px solid rgba(255, 201, 77, 0.4);
  pointer-events: none;
}

.tr-flash {
  position: absolute;
  left: 12px;
  right: 76px;
  top: 34px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
  background: rgba(8, 10, 22, 0.92);
  border: 1px solid var(--arena-line-strong);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.tr-flash.show { opacity: 1; transform: none; }
.tr-flash.positive { border-color: rgba(59, 240, 160, 0.5); box-shadow: 0 0 30px -10px rgba(59, 240, 160, 0.5); }
.tr-flash.negative { border-color: rgba(255, 84, 104, 0.5); box-shadow: 0 0 30px -10px rgba(255, 84, 104, 0.5); }
.tr-flash.rumour { border-color: rgba(255, 201, 77, 0.5); }

/* --- Feeds --- */
.tr-feeds {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.tr-feedtabs {
  align-self: flex-start;
}

.tr-feeds .tr-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px;
}

.tr-desk[data-feed="tape"] .tr-feeds .tr-blotter,
.tr-desk[data-feed="blotter"] .tr-feeds .tr-tape {
  display: none;
}

.tr-feed {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.tr-feed:empty::before {
  content: 'Nothing yet.';
  display: block;
  padding: 10px 0;
  color: var(--arena-ink-3);
  font-size: 0.8rem;
}

.tr-news,
.tr-fill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--arena-line);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--arena-ink-2);
  animation: fade-up 0.35s var(--ease);
}

.tr-news time,
.tr-fill time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--arena-ink-3);
  flex-shrink: 0;
  width: 2.4em;
}

.tr-news--positive span:last-child { color: #B8FFDD; }
.tr-news--negative span:last-child { color: #FFB3BC; }
.tr-news--rumour span:last-child { color: #FFE3A3; font-style: italic; }

.tr-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--arena-chip-strong);
  color: var(--arena-ink);
  flex-shrink: 0;
}

.tr-fill b { font-family: var(--font-mono); font-size: 0.72rem; flex-shrink: 0; }
.tr-fill span { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.76rem; }
.tr-fill em { font-style: normal; font-size: 0.7rem; color: var(--arena-ink-3); flex-shrink: 0; }

/* --- Right column --- */
.tr-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.tr-ticket,
.tr-position {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

.tr-position { flex: 1; min-height: 210px; }

.tr-panel .seg { width: 100%; flex-wrap: nowrap; }
.tr-panel .seg button { flex: 1; }

.tr-sidepick button[data-value="buy"][aria-pressed="true"] { background: var(--arena-good); box-shadow: 0 4px 16px -4px rgba(59, 240, 160, 0.6); }
.tr-sidepick button[data-value="sell"][aria-pressed="true"] { background: var(--arena-bad); box-shadow: 0 4px 16px -4px rgba(255, 84, 104, 0.6); }

.tr-qtyrow {
  display: flex;
  gap: 6px;
}

.tr-qty {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--arena-ink);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--arena-line-strong);
  border-radius: 12px;
  outline: none;
  -moz-appearance: textfield;
}

.tr-qty::-webkit-outer-spin-button,
.tr-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tr-qty:focus { border-color: var(--game-accent); }

.tr-step {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  background: var(--arena-chip);
  border: 1px solid var(--arena-line);
}

.tr-step:hover { border-color: var(--game-accent); }

.tr-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.tr-sizes button {
  height: 30px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--arena-ink-2);
  background: var(--arena-chip);
  border: 1px solid var(--arena-line);
}

.tr-sizes button:hover { color: var(--arena-ink); border-color: var(--game-accent); }

.tr-bracket {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-bracket label {
  width: 62px;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--arena-ink-3);
}

.tr-bracket .seg { padding: 3px; }
.tr-bracket .seg button { padding: 4px 6px; min-height: 26px; font-size: 0.72rem; }

.tr-estimate {
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}

.tr-place {
  --btn-bg: var(--arena-good);
  --game-glow: rgba(59, 240, 160, 0.5);
  min-height: 46px;
  font-size: 0.92rem;
}

.tr-desk[data-side="sell"] .tr-place {
  --btn-bg: var(--arena-bad);
  --game-glow: rgba(255, 84, 104, 0.5);
}

.tr-place.flash-buy,
.tr-place.flash-sell {
  animation: tr-place 0.4s var(--ease);
}

@keyframes tr-place {
  0% { transform: scale(0.96); filter: brightness(1.6); }
  100% { transform: none; }
}

.tr-curve__title {
  margin-top: 4px;
}

.tr-curvewrap {
  position: relative;
  flex: 1;
  min-height: 80px;
}

.tr-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tr-mtabs { display: none; }

.tr-result-curve {
  width: 100%;
  height: 150px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--arena-line);
}

/* ===========================
   Medium: watchlist becomes a strip across the top
   =========================== */
@media (max-width: 1100px) {
  .tr-desk {
    grid-template-columns: minmax(0, 1fr) 270px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .tr-watch {
    grid-column: 1 / -1;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
    scrollbar-width: none;
  }

  .tr-watch::-webkit-scrollbar { display: none; }

  .tr-row {
    flex: 0 0 auto;
    grid-template-areas: "name fig";
    padding: 6px 10px;
  }

  .tr-spark,
  .tr-row__pos { display: none; }
}

/* ===========================
   Phone: one column, the panels behind tabs
   =========================== */
@media (max-width: 760px) {
  #view-trading .arena { height: auto; }

  .tr-desk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(140px, 1fr) auto minmax(0, 1.2fr);
    grid-template-areas: "watch" "ticker" "chart" "tabs" "panel";
    gap: 6px;
    padding: 4px 8px calc(8px + var(--safe-bottom));
  }

  .tr-main,
  .tr-side,
  .tr-feeds { display: contents; }

  .tr-watch { grid-area: watch; grid-column: auto; }
  .tr-ticker { grid-area: ticker; padding: 8px 10px; gap: 8px; }
  .tr-chartwrap { grid-area: chart; }
  .tr-feedtabs { display: none; }

  .tr-ticker__tools { width: 100%; justify-content: space-between; }
  .tr-ticker__name { font-size: 1rem; }
  .tr-ticker__price { font-size: 1.1rem; }
  .tr-ticker__tags span:nth-child(n+3) { display: none; }

  .tr-mtabs {
    grid-area: tabs;
    display: flex;
    flex-wrap: nowrap;
  }

  .tr-mtabs button { flex: 1; }

  .tr-desk .tr-panel {
    grid-area: panel;
    display: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tr-desk[data-tab="trade"] .tr-ticket,
  .tr-desk[data-tab="position"] .tr-position { display: flex; }
  .tr-desk[data-tab="tape"] .tr-tape,
  .tr-desk[data-tab="blotter"] .tr-blotter { display: block; padding: 4px 10px; }

  .tr-ticket { gap: 7px; padding: 10px; }
  .tr-position { min-height: 0; }
  .tr-flash { right: 12px; top: 8px; font-size: 0.78rem; }
  .tr-desk.paused .tr-chartwrap::after { right: 70px; bottom: 20px; }
}