/* =============================================================================
   THE TERMINAL

   A fixed screen, not a page: the window never scrolls, the panes do. Market
   rail on the left, the character and its tape in the middle, the ticket on the
   right, your book across the bottom. Hairlines are the grid background showing
   through one pixel gaps, which keeps the whole thing on one plane.
   ========================================================================== */

html, body.app { height: 100%; }
body.app {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* ============================================================== top bar == */
.app-nav {
  flex: none;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  z-index: 40;
}
.app-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.app-nav .brand img { height: 36px; width: auto; display: block; }
.term-tag {
  align-self: center; margin-left: 0;
  font-size: 9px; letter-spacing: 0.2em; color: var(--hot);
  border: 1px solid rgba(255, 46, 136, 0.4); border-radius: 4px;
  padding: 3px 6px; margin-left: 8px;
}
.app-nav-mid { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); letter-spacing: 0.04em; }
.feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.feed-dot.live { background: var(--up); box-shadow: 0 0 8px rgba(34, 208, 122, 0.8); }

.app-nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.nav-stat span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.nav-stat b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.btn-sm {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted); cursor: pointer;
}
.btn-sm:hover { color: var(--ink); border-color: var(--line-strong); background: var(--raised); }

/* ============================================================ body grid == */
.app-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 348px;
  gap: 1px;
  background: var(--line);
}
.rail, .market-panel, .ticket-panel {
  background: var(--bg);
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
}

/* ================================================================= rail == */
.rail-head {
  flex: none; display: flex; justify-content: space-between;
  padding: 12px 14px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--line);
}
.rail-search { flex: none; padding: 10px 12px 8px; display: grid; gap: 8px; }
.rail-search input { font-size: 12px; padding: 8px 10px; }
.rail-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-filters button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.rail-filters button:hover { color: var(--ink); }
.rail-filters button[aria-pressed="true"] { color: #08080a; font-weight: 700; }

.rail-sorts {
  flex: none; display: flex; gap: 12px; padding: 4px 14px 10px;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.rail-sorts button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--dim); font: inherit; }
.rail-sorts button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.rail-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 6px 8px; }
.rail-item {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 9px; align-items: center; text-align: left;
  padding: 7px 8px; border-radius: 7px; border: 0; background: none; cursor: pointer;
  font-family: var(--sans);
}
.rail-item:hover { background: rgba(255, 255, 255, 0.035); }
.rail-item.active { background: rgba(255, 46, 136, 0.12); box-shadow: inset 2px 0 0 var(--hot); }
.rail-item .plate { width: 26px; height: 26px; }
.portrait { object-fit: cover; border-radius: 6px; }
.ri-name { min-width: 0; }
.ri-name b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-name span { font-family: var(--mono); font-size: 9.5px; color: var(--dim); letter-spacing: 0.06em; }
.ri-px { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ri-px b { display: block; font-size: 12.5px; font-weight: 500; }
.ri-px span { font-size: 10.5px; }

.rail-foot {
  flex: none; display: flex; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--dim);
}
.rail-foot span { color: var(--ink); }

/* =============================================================== market == */
.mkt-header {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.mh-plate .plate { width: 44px; height: 44px; }
.mh-line { display: flex; align-items: baseline; gap: 10px; }
.mh-sym { font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em; color: var(--hot); }
.mh-name { font-size: 19px; font-weight: 600; }
.mh-tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.mh-right { display: flex; align-items: baseline; gap: 14px; }
.mh-spot { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mh-deltas { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mh-deltas .delta { font-size: 13px; }
.mh-sub { font-size: 10px; color: var(--dim); }

.mkt-strip {
  flex: none; display: flex; gap: 0; border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.mkt-strip div {
  flex: 1 0 auto; min-width: 118px; padding: 9px 14px;
  border-right: 1px solid var(--line);
}
.mkt-strip span { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.mkt-strip b { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }

.chart-wrap { flex: none; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.chart-ranges { display: flex; gap: 3px; }
.chart-ranges button {
  padding: 4px 10px; border-radius: 5px; font-family: var(--mono); font-size: 11px;
  color: var(--dim); border: 1px solid transparent; background: none; cursor: pointer;
}
.chart-ranges button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.chart-ranges button.active { background: rgba(255, 46, 136, 0.14); color: var(--hot); }
.chart-src { font-size: 10px; color: var(--dim); letter-spacing: 0.04em; }
/* The chart sizes itself from this box. The canvas must never drive the height
   of its own parent, or the two grow into each other on every redraw. */
.chart-body { height: clamp(180px, 30vh, 300px); }
.chart-body canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.panel-tabs { flex: none; display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.panel-tabs button {
  padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line);
  background: none; cursor: pointer;
}
.panel-tabs button:hover { color: var(--ink); border-color: var(--line-strong); }
.panel-tabs button.active { background: rgba(255, 46, 136, 0.14); border-color: rgba(255, 46, 136, 0.35); color: var(--hot); }

.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 10px; }

/* the tape */
.tape-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 6px 16px; font-family: var(--mono); font-size: 11.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.tape-row .who { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-row .sz, .tape-row .px { text-align: right; font-variant-numeric: tabular-nums; }
.tape-row.you { background: rgba(255, 176, 20, 0.07); }
.tape-row.you .who { color: var(--gold); }
.tape-row.liq .who::after { content: ' · liquidated'; color: var(--down); }

/* the rubric */
.rubric-pane { padding: 14px 16px; }
.rubric-line {
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.rubric-line span:first-child { color: var(--dim); }
.rubric-total { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; padding-top: 12px; }
.rubric-note { font-size: 12px; color: var(--muted); margin: 14px 0 0; max-width: 62ch; line-height: 1.6; }
.rubric-note b { color: var(--ink); }

/* funding and depth */
.kv-pane { padding: 10px 16px; }
.kv {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  font-family: var(--mono); font-size: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.kv span { color: var(--dim); }
.bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; display: flex; margin: 10px 0 4px; }
.bar i { display: block; height: 100%; }
.bar .l { background: var(--up); }
.bar .s { background: var(--down); }
.bar-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }

/* =============================================================== ticket == */
.ticket-panel { overflow-y: auto; }
.ticket { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.ticket-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket-sides button {
  padding: 11px 0; border-radius: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
}
.ticket-sides button:hover { color: var(--ink); }
.ticket-sides button.long.active { background: var(--up); border-color: var(--up); color: #04140b; font-weight: 700; }
.ticket-sides button.short.active { background: var(--down); border-color: var(--down); color: #180406; font-weight: 700; }

.ticket-row label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 6px;
}
.ticket-row label b { color: var(--ink); font-size: 12px; letter-spacing: 0; }

.budget-field { position: relative; }
.budget-field input { padding-right: 48px; }
.budget-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--dim); }

.size-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.size-presets button {
  padding: 6px 0; border-radius: 6px; cursor: pointer; font-family: var(--mono); font-size: 10.5px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.size-presets button:hover { color: var(--ink); border-color: var(--line-strong); }

input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--hot); }
.lev-scale { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--dim); margin-top: 4px; }

.ticket-metrics { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; font-size: 11.5px; }
.ticket-metrics div { display: flex; justify-content: space-between; gap: 10px; }
.ticket-metrics span:first-child { color: var(--dim); }
.ticket-metrics .warn { color: var(--gold); }

.payoff-wrap { border-top: 1px solid var(--line); padding-top: 10px; }
.payoff-head { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
#payoff { display: block; width: 100%; }

.btn-place {
  padding: 13px 0; border-radius: 8px; cursor: pointer; width: 100%;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  background: var(--hot); border: 1px solid var(--hot); color: #0a0a0b;
}
.btn-place:hover { background: #ff4f9c; }
.btn-place:disabled { opacity: 0.45; cursor: not-allowed; }
.ticket-note { font-size: 10px; letter-spacing: 0.06em; color: var(--dim); margin: 0; text-align: center; }
.ticket-note.error { color: var(--down); }

/* ============================================================ positions == */
.positions {
  flex: none; height: 216px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line); background: var(--panel);
}
.pos-summary { flex: none; display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ps { flex: 1 0 auto; min-width: 130px; padding: 9px 16px; border-right: 1px solid var(--line); }
.ps-l { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ps-v { font-size: 13px; font-variant-numeric: tabular-nums; }

.pos-scroll { flex: 1 1 auto; overflow: auto; }
.pos-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12px; }
.pos-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  text-align: right; padding: 9px 16px; font-weight: 500;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.pos-table thead th:first-child, .pos-table thead th:nth-child(2) { text-align: left; }
.pos-table td { padding: 9px 16px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-variant-numeric: tabular-nums; }
.pos-table td:first-child, .pos-table td:nth-child(2) { text-align: left; }
.pos-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.pos-empty td { text-align: center !important; color: var(--dim); padding: 40px; font-size: 12.5px; }
.side-chip { font-size: 10px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
.side-chip.l { background: rgba(34, 208, 122, 0.16); color: var(--up); }
.side-chip.s { background: rgba(255, 77, 94, 0.16); color: var(--down); }
.pos-actions { display: flex; gap: 5px; justify-content: flex-end; }
.pos-actions button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; padding: 4px 8px;
  border-radius: 5px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--muted); cursor: pointer;
}
.pos-actions button:hover { color: var(--ink); background: var(--raised); }

/* =============================================================== toasts == */
.toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  font-family: var(--mono); font-size: 11.5px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--line-strong); color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.toast.bad { border-color: rgba(255, 77, 94, 0.5); color: var(--down); }

/* ========================================================== responsive == */
@media (max-width: 1180px) {
  .app-body { grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ticket-panel { grid-column: 1 / -1; }
  .ticket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .ticket .payoff-wrap, .ticket .ticket-metrics { grid-column: span 1; }
}

@media (max-width: 860px) {
  html, body.app { height: auto; }
  body.app { overflow: auto; }
  .app-body { grid-template-columns: 1fr; }
  .rail { order: 2; }
  .market-panel { order: 1; }
  .ticket-panel { order: 3; }
  .ticket { grid-template-columns: 1fr; }
  .rail-list { max-height: 52vh; }
  .positions { height: auto; }
  .app-nav { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .app-nav-mid { display: none; }
}