/* Polypeak additions on top of the shared base (styles.css). */

/* ------------------------------------------------------------------ spacing */

/* The base keeps cards 8px apart; this page has eight dense sections, so a
 * little more air between them makes each one read as its own block. */
:root { --gap: 12px; --gap-row: 12px; --gap-section: 14px; --pad-card: 20px; }
main { padding: 16px 20px 32px; }

h2 { font-size: 15px; }
.card-sub { font-size: 12px; max-width: none; }
/* The heading block takes the full card width (beside any range buttons), so
 * descriptions run on one line wherever the screen has room. */
.card-head > div:first-child { flex: 1 1 0; min-width: 0; }
.card-sub b { color: var(--ink-2); font-weight: 600; }
.card-head { margin-bottom: 16px; }
.empty-card h2 { margin-bottom: 6px; }
.empty-card code, .card-sub code, .verdict code {
  font-family: var(--mono); font-size: 11px; background: var(--plane);
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ KPI rows */

.hero-card { padding: 24px; background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%); }
.hero-figure { font-size: 48px; font-variant-numeric: tabular-nums; }
.tile-value { font-variant-numeric: tabular-nums; }
.tile-grid > .tile { padding: 16px 18px; }

/* Speed tiles sit inside a card, so they get the plane colour instead of a
 * second card surface — same shape as the KPI tiles above, one level down. */
.speed-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.speed-grid > .tile {
  min-width: 0; padding: 14px 16px; border-radius: 10px;
  background: var(--plane); border: 1px solid var(--border);
}
.speed-grid .tile-value { font-size: 22px; }

.hot-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.hot-list, .chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.hot-chip {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 11px; border-radius: 999px;
  background: var(--plane); border: 1px solid var(--border); font-family: var(--mono); font-size: 12px; white-space: nowrap;
}
.hot-chip span { color: var(--ink-muted); font-family: var(--sans); font-size: 11.5px; }
.hot-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- scoreboard */

.verdict {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--plane); border: 1px solid var(--border); border-left: 3px solid var(--warning);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.verdict b { color: var(--ink); }
.verdict:empty { display: none; }

/* The scoreboard bar: segments carry their own labels in the legend below, never colour alone. */
.race-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--plane); border: 1px solid var(--border); gap: 2px; }
.race-bar > i { display: block; height: 100%; min-width: 3px; }
.race-legend {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 20px;
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2);
}
.race-legend span { display: flex; align-items: center; gap: 8px; }
.race-legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.race-legend .muted { grid-column: 1 / -1; }

.winners { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.addr { font-family: var(--mono); font-size: 11.5px; }
.hot-chip > .addr { color: var(--ink); font-family: var(--mono); font-size: 12px; }

.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.c-bought { background: var(--good); }
.c-upstream { background: var(--critical); }
.c-detection { background: var(--warning); }
.c-order { background: var(--series-1); }
.c-unclear { background: #8a6d3b; }
.c-pulled { background: #6b6a64; }
.c-priced { background: var(--baseline); }
.c-other { background: #4a4945; }

.race-grid { grid-template-columns: 1.5fr 1fr; column-gap: 32px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.race-grid > * { min-width: 0; }
.sub-h { font-size: 12px; font-weight: 600; margin: 0 0 8px; color: var(--ink-2); }
.sub-h .muted { font-weight: 400; }
.source-race-h { margin-top: 22px; }
.short-pane { max-height: min(42vh, 380px); }
.grid-2 > .card > .table-pane.short-pane { flex: 0 1 auto; }

/* --------------------------------------------------------------------- tables */

tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
tbody tr:hover td { background: var(--surface-2); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--plane); border: 1px solid var(--border); font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}

/* Recent races: the bucket wraps rather than pushing Outcome and Taken by out of view. */
#trigTable td.bucket-cell { white-space: normal; min-width: 180px; }
#trigTable .side {
  margin-left: 2px; padding: 0 5px; border-radius: 4px; background: var(--plane);
  color: var(--ink-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
}
#trigTable td:first-child, #tradeTable td:first-child { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* Long bucket names wrap rather than push the Exit column out of view. */
#posTable td:first-child { white-space: normal; min-width: 160px; }

/* ----------------------------------------------------------- positions + curve */

.grid-pos { grid-template-columns: 1.3fr 1fr; }
.curve { flex: 1 1 auto; min-height: 200px; position: relative; }
.curve svg { width: 100%; height: 100%; display: block; }
.curve .empty {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  color: var(--ink-muted); font-size: 12px; border: 1px dashed var(--border); border-radius: 10px;
}

/* ------------------------------------------------------------------- settings */

.params { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.params > div { padding: 10px 12px; border-radius: 8px; background: var(--plane); border: 1px solid var(--border); min-width: 0; }
.params dt { text-transform: uppercase; letter-spacing: 0.03em; }
.params dd { overflow-wrap: anywhere; }

.stale { color: var(--warning); }

/* --------------------------------------------------------------------- narrow */

@media (max-width: 1280px) {
  .speed-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .hero-row, .grid-2, .race-grid, .grid-pos { grid-template-columns: 1fr; }
  .race-grid { row-gap: 22px; }
}
@media (max-width: 640px) {
  main { padding: 10px 12px 24px; }
  :root { --pad-card: 16px; }
  .tile-grid, .speed-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-figure { font-size: 36px; }
  .topbar { padding: 10px 16px; }
  .brand-sub { display: none; }
}

/* By city fills the height the By source column sets, instead of stopping at a
 * fixed cap and leaving a dead block under it. height:0 keeps the table's own
 * length out of the row height; flex-grow then stretches it to the row. */
.race-grid > :first-child { display: flex; flex-direction: column; }
.race-grid > :first-child > .table-pane { flex: 1 1 auto; height: 0; min-height: 280px; max-height: none; }
#cityTable th, #cityTable td { padding-left: 8px; padding-right: 8px; }
#cityTable th:first-child, #cityTable td:first-child { padding-left: 0; }
#cityTable th:last-child, #cityTable td:last-child { padding-right: 12px; }
td.zero { color: var(--ink-muted); opacity: 0.6; }
@media (max-width: 1100px) {
  .race-grid > :first-child > .table-pane { height: auto; max-height: min(50vh, 420px); }
}

/* ------------------------------------------------- market chart dialog (from polyweather) */

tr.row-open { cursor: pointer; }
tr.row-open:hover td { background: rgba(57, 135, 229, 0.08); }

.btn {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { color: var(--ink); border-color: var(--baseline); }
.btn-quiet { background: transparent; }
.btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }

.mc-dialog {
  width: min(1040px, 94vw); max-width: none; max-height: 94vh; overflow-y: auto; padding: 18px 20px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.mc-dialog:focus { outline: none; }
.mc-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mc-titles { min-width: 0; }
.mc-titles h2 { font-size: 15px; margin: 0 0 3px; }
.mc-actions { display: flex; gap: 6px; flex: none; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.mc-key { display: inline-flex; align-items: center; gap: 6px; }
.mc-key i, .mc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mc-dot { margin-right: 6px; }
.mc-key b { color: var(--ink); font-weight: 600; }
.mc-key.is-held { padding: 1px 7px; margin: -1px -7px; border: 1px solid var(--baseline); border-radius: 999px; }
.mc-wrap { position: relative; height: min(380px, 52vh); }
.mc-wrap svg { width: 100%; height: 100%; display: block; }
.mc-foot { margin: 8px 0 0; font-size: 11px; color: var(--ink-muted); }
.mc-h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.mc-trades-wrap { max-height: 240px; overflow-y: auto; }
#mcTrades { width: 100%; font-size: 12.5px; }
#mcTrades th, #mcTrades td { padding: 7px 8px; white-space: nowrap; }
#mcTrades td:last-child { white-space: normal; }
.mc-tip-trade { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); color: var(--ink); font-size: 11.5px; }

.side-tag {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; border: 1px solid;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}
.side-buy { color: #9ec5f4; background: rgba(57, 135, 229, 0.14); border-color: rgba(57, 135, 229, 0.42); }
.side-sell { color: #f0b74a; background: rgba(201, 133, 0, 0.16); border-color: rgba(201, 133, 0, 0.45); }
.side-settle { color: #8fbcf2; background: rgba(57, 135, 229, 0.1); border-color: rgba(57, 135, 229, 0.55); }
@media (max-width: 600px) { .mc-dialog { padding: 14px 12px 10px; } .mc-wrap { height: 44vh; } }

/* Trade history: count beside the title, and the load-more row at the end. */
h2 .count { font-weight: 400; font-size: 13px; }
.btn-sm { padding: 3px 9px; font-size: 11px; }
#tradeTable tr.more-row td, #trigTable tr.more-row td { padding: 12px 0; text-align: center; color: var(--ink-muted); font-size: 12px; background: none; }
#tradeTable tr.more-row .btn, #trigTable tr.more-row .btn { margin-left: 6px; }

/* ------------------------------------------------------------------ polypeak */

/* The trigger log has ten columns: tighter cells, the extreme column wraps. */
#trigTable th, #trigTable td { padding-left: 8px; padding-right: 8px; }
#trigTable th:first-child, #trigTable td:first-child { padding-left: 0; }
#trigTable td.bucket-cell b { font-weight: 600; }
#posTable td:first-child { white-space: normal; min-width: 160px; }
.exit-mix:empty { display: none; }