:root {
  --bg: #11131a;
  --panel: #191c26;
  --panel-2: #1f2430;
  --border: #2a2f3d;
  --text: #d7dae3;
  --muted: #8b93a7;
  --accent: #7aa2f7;
  --ok: #9ece6a;
  --warn: #e0af68;
  --error: #f7768e;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #171a24, #11131a);
}

header h1 {
  margin: 0 0 4px;
  font-size: 19px;
  letter-spacing: 0.2px;
}

header .sub {
  color: var(--muted);
  font-size: 12.5px;
}

#run-info {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

#run-info b {
  color: var(--accent);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field .label-spacer {
  height: 17px;
}

.field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

select,
button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}

select:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

.status {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}

.status.ok {
  color: var(--ok);
}
.status.warn {
  color: var(--warn);
}
.status.error {
  color: var(--error);
}

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 16px;
  padding: 18px 24px 40px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  min-width: 0;
}

.panel.wide {
  grid-column: 1 / -1;
}

.panel h2 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.panel .hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.chart-canvas-host {
  width: 100%;
  height: 280px;
  position: relative;
}

/* The cross-city bar chart grows with the number of cities and sources; the
   wrapper scrolls so a 50-row chart stays readable without a 2000px panel. */
.chart-scroll {
  max-height: 78svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chart-scroll .chart-canvas-host {
  height: 640px;
}

.panel.hero {
  padding-top: 18px;
}

.panel.hero .chart-canvas-host {
  height: 70svh;
  min-height: 320px;
}

.hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-head h2 {
  font-size: 17px;
}

.chart-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-item i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.legend-item i.dashed {
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}

.provider-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  user-select: none;
}

.chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.chip:not(.on) {
  opacity: 0.45;
}

.chip:not(.on) i {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--muted);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

tr:last-child td {
  border-bottom: none;
}

tr.target-day td {
  background: rgba(224, 175, 104, 0.09);
}

tr.target-day td:first-child {
  box-shadow: inset 2px 0 0 var(--warn);
}

.table-scroll {
  overflow-x: auto;
}

footer {
  padding: 0 24px 28px;
  color: var(--muted);
  font-size: 12px;
}

footer a {
  color: var(--accent);
}

@media (max-width: 720px) {
  main {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .controls {
    padding: 12px 14px;
  }
  header {
    padding: 16px 14px 12px;
  }
}

/* Polymarket overlay toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.switch:hover {
  border-color: var(--accent);
}

.switch input {
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
}

.switch:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Reset-zoom sits next to Reload */
.button-row {
  display: flex;
  gap: 8px;
}

/* Server headroom: two big numbers with a bar under each. The number is what
   is *left*, not what is used -- that is the question being asked. */
.resources {
  color: var(--muted);
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.res-figure {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.res-value {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}

.res-value.warn {
  color: var(--warn);
}

.res-value.crit {
  color: var(--error);
}

.res-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.res-bar {
  margin-top: 12px;
  height: 8px;
  border-radius: 4px;
  background: rgba(139, 147, 167, 0.18);
  overflow: hidden;
}

.res-bar span {
  display: block;
  height: 100%;
  background: var(--ok);
}

.res-bar span.warn {
  background: var(--warn);
}

.res-bar span.crit {
  background: var(--error);
}

.res-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.res-error {
  color: var(--warn);
}

/* Strategy configurator: an editor column beside the list it filters. */
.strategy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  padding: 16px 24px 40px;
}

body.editing .strategy-layout {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

.strategy-main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 900px) {
  .strategy-layout {
    grid-template-columns: 1fr;
  }
}

.strategy-editor fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin: 0 0 14px;
}

.strategy-editor legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--muted);
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}

.field input,
.field select {
  width: 110px;
  padding: 5px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}

.field select,
.strategy-editor > .field input {
  width: 170px;
}

.field-row {
  display: flex;
  gap: 12px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  font-size: 12px;
  cursor: pointer;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editor-actions button,
.results-actions button {
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.editor-actions button:hover,
.results-actions button:hover {
  border-color: var(--accent);
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #10131a;
  font-weight: 600;
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.results-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
}

.summary-cards .card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
}

.card-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.ok {
  color: var(--ok);
}

.bad {
  color: var(--error);
}

.table-scroll {
  overflow-x: auto;
  margin-top: 10px;
}

table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  white-space: nowrap;
}

table.grid th,
table.grid td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

table.grid th {
  color: var(--muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--panel);
}

table.grid tr.reject td {
  opacity: 0.45;
}

table.grid td.empty {
  text-align: center;
  color: var(--muted);
  padding: 22px;
}

table.grid a {
  color: var(--accent);
  text-decoration: none;
}

table.grid a:hover {
  text-decoration: underline;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 11px;
  color: var(--muted);
}

.badge.ok {
  border-color: var(--ok);
  color: var(--ok);
}

.muted {
  color: var(--muted);
}

button.mark {
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

button.mark:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* The live table and the record of placed bets point at each other: hovering
   a row in one lights up the same event in the other. */
table.grid tr.linked td {
  background: rgba(122, 162, 247, 0.16);
}

table.grid tr.is-placed td {
  opacity: 0.72;
}

.tick {
  color: var(--ok);
  font-weight: 700;
}

.strategy-placed table.grid th {
  background: var(--panel);
}

/* A frozen row is a record, not an offer: it reads calmly and does not carry
   the live tick. */
.strategy-placed table.grid tr.frozen td {
  opacity: 1;
}

/* A market you have already bet on carries its own ground, so it is findable
   at a glance in a list of forty. */
table.grid tr.is-placed td {
  background: rgba(158, 206, 106, 0.10);
}

table.grid tr.is-placed.linked td,
table.grid tr.frozen.linked td {
  background: rgba(158, 206, 106, 0.24);
}

/* The strategy's own result sits above the live list: smaller than the market
   table, because it is context for it rather than a second subject. */
#backtest { margin: 0.5rem 0 0.75rem; }
table.grid.compact th,
table.grid.compact td { padding: 0.25rem 0.5rem; font-size: 0.9em; }
table.grid.compact tr.total td { font-weight: 600; }

/* A range inside a group of single fields: quieter than the outer fieldset,
   so the pair reads as one control rather than a new section. */
fieldset.inner {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0.5rem 0;
  padding: 0.25rem 0.6rem 0.5rem;
}

fieldset.inner legend {
  font-size: 0.85em;
  color: var(--muted);
  padding: 0 0.3rem;
}

/* What the board offers tonight. Given its own block rather than another card
   because it is the number the operator acts on, and because it needs the
   strategy's measured return beside it to be read honestly. */
.potential {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 0.75rem;
  background: rgba(122, 162, 247, 0.05);
}

.potential-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.potential-roi {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

.potential-caption {
  color: var(--muted);
}

.potential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
}

.potential-grid dt {
  color: var(--muted);
  font-size: 0.85em;
}

.potential-grid dd {
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
}

.potential-note {
  margin: 0.6rem 0 0;
}

.potential-empty {
  padding: 0.5rem 0;
}

/* ------------------------------------------------------- strategy page shell */

/* Everything that must stay true while a long list scrolls: which strategy is
   in force, how old the prices are, and the button that refreshes them. */
.strategy-page .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #171a24, #14171f);
}

.strategy-page .topbar h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title .strategy-line {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-title .strategy-line b {
  color: var(--text);
  font-weight: 600;
}

.back {
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}

.back:hover {
  color: var(--text);
  background: var(--panel-2);
}

.dirty {
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 17px;
}

.chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.chip-flat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.freshness {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  min-width: 11rem;
}

.freshness .warn {
  color: var(--warn);
}

/* A minute between refreshes is long enough to wonder whether the page is
   still alive; the bar answers that without another number to read. */
.refresh-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.refresh-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  opacity: 0.5;
  transition: width 1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .refresh-progress span {
    transition: none;
  }
}

/* ------------------------------------------------------------------ editor */

.strategy-page .strategy-editor {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
}

.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

button.icon {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

button.icon:hover {
  color: var(--text);
  background: var(--panel-2);
}

button.link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 11.5px;
  padding: 2px 4px;
}

.field-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

/* --------------------------------------------------------------- the table */

.strategy-page .results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.segmented button {
  background: var(--panel);
  border: none;
  color: var(--muted);
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12.5px;
  border-right: 1px solid var(--border);
}

.segmented button:last-child {
  border-right: none;
}

.segmented button::after {
  content: " " attr(data-count);
  opacity: 0.65;
}

.segmented button.on {
  background: var(--panel-2);
  color: var(--text);
}

.strategy-page table.grid {
  font-variant-numeric: tabular-nums;
}

.strategy-page table.grid th {
  white-space: nowrap;
  vertical-align: bottom;
}

.strategy-page th.sortable-col .th-label {
  cursor: pointer;
}

.strategy-page th.sortable-col:hover .th-label {
  color: var(--text);
}

.strategy-page th .arrow {
  color: var(--accent);
  font-size: 9px;
}

/* The identity of the row survives a sideways scroll. Every cell carries
   its column's name, so this holds whatever order a table puts them in. */
.strategy-page table.grid tr > .col-city {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 2;
}

.strategy-page table.grid tr.linked > .col-city {
  background: #23293a;
}

.strategy-page td .rel {
  font-size: 11px;
  color: var(--muted);
}

.strategy-page td .rel.open {
  color: var(--ok);
}

.strategy-page td .rel.gone {
  color: var(--error);
}

/* A market you can act on this minute is worth finding without reading dates. */
.strategy-page tr.w-open > *:first-child {
  box-shadow: inset 3px 0 0 var(--ok);
}

.strategy-page tr.reject {
  opacity: 0.55;
}

.strategy-page td.empty {
  padding: 18px 10px;
  color: var(--muted);
  white-space: normal;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- tooltips */

/* Sixteen columns of jargon are unusable without a way to ask what each one
   is. The mark stays quiet until you go looking for it. */
button.info {
  appearance: none;
  margin-left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 9.5px;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 12px;
  padding: 0;
  cursor: help;
  vertical-align: 1px;
}

button.info:hover,
button.info:focus-visible {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.tip {
  position: fixed;
  z-index: 100;
  max-width: 22rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1b1f2b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: normal;
  pointer-events: none;
}

.tip b {
  color: var(--accent);
}

.tip p {
  margin: 4px 0 0;
  color: var(--text);
}

.tip .tip-how {
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 7px;
}

.tip .tip-how span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.8;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------- evidence */

.strategy-page details.evidence summary {
  cursor: pointer;
  list-style: none;
}

.strategy-page details.evidence summary::-webkit-details-marker {
  display: none;
}

.strategy-page details.evidence summary h2 {
  display: inline;
}

.strategy-page details.evidence summary::before {
  content: "\25b8  ";
  color: var(--muted);
}

.strategy-page details.evidence[open] summary::before {
  content: "\25be  ";
}

.strategy-page details.evidence[open] summary {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- a11y etc */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.strategy-page :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Narrow screens drop the columns you can live without rather than forcing a
   sideways scroll through all sixteen. */
@media (max-width: 1100px) {
  body.editing .strategy-layout {
    grid-template-columns: 1fr;
  }

  .strategy-page .strategy-editor {
    position: static;
    max-height: none;
  }
}

@media (max-width: 820px) {
  .strategy-page .topbar {
    gap: 10px;
  }

  .topbar-right {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .freshness {
    text-align: left;
    flex: 1 1 100%;
    min-width: 0;
  }

  .topbar-right button {
    flex: 1 1 auto;
  }

  .strategy-page table.grid tr > .col-closes,
  .strategy-page table.grid tr > .col-region,
  .strategy-page table.grid tr > .col-book,
  .strategy-page table.grid tr > .col-volume,
  .strategy-page table.grid tr > .col-momentum {
    display: none;
  }

  .strategy-page .strategy-layout {
    padding: 12px;
  }
}

/* The shape of the answer, while the answer is on its way. */
.strategy-page tr.skeleton td span {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: var(--panel-2);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .strategy-page tr.skeleton td span { animation: none; }
}

/* A measured number that does not apply to the row it sits in. Shown rather
   than hidden -- you still want to see what the strategy's own markets are
   worth -- but never in the colours that invite acting on it. */
.strategy-page td.n-a {
  color: var(--muted);
  font-style: italic;
}

/* The event count a recent-window ROI rests on, beside the figure: small,
   because it qualifies the number rather than competes with it, and red once
   it is too few to be a measurement. */
.strategy-page td .n {
  font-size: 10px;
  color: var(--muted);
  font-style: normal;
}

.strategy-page td .n.thin {
  color: var(--error);
}

/* The same reading on the row's own region, under the figure: smaller and
   starred, so the two are never read as one number. */
.strategy-page td .roi-region {
  font-size: 11px;
  line-height: 1.2;
  margin-top: 1px;
  opacity: 0.85;
}

.strategy-page td.n-a .roi-region {
  color: var(--muted);
}

/* ---------------------------------------------------------- sound controls */

.sound {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}

button.sound-icon {
  font-size: 13px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.sound-icon.off {
  color: var(--muted);
  position: relative;
}

/* Muted is the note with a line through it -- a cross would read as "close". */
button.sound-icon.off::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1px;
  background: var(--muted);
  transform: rotate(-45deg);
}

button.sound-icon:hover {
  background: var(--panel-2);
}

/* Short on purpose: it is a level, not a value anyone reads. */
#sound-volume {
  width: 68px;
  accent-color: var(--accent);
  cursor: pointer;
}

#sound-volume:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The chime's visible twin, for a muted tab or a browser that has not been
   clicked yet. */
.new-flash {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 600;
  animation: flash-in 0.35s ease-out;
}

@keyframes flash-in {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .new-flash { animation: none; }
}

/* ------------------------------------------------- forecast-move strategy */

/* The editor shows only what the chosen kind reads. */
.strategy-page .strategy-editor .move-only {
  display: none;
}

.strategy-page .strategy-editor.editor-kind-move .move-only {
  display: block;
}

.strategy-page .strategy-editor.editor-kind-move .fav-only {
  display: none;
}

/* Which way the forecasts sent the bet. */
.strategy-page td .dir {
  color: var(--accent);
  font-size: 10px;
  vertical-align: 1px;
}

.strategy-page td .cold {
  color: #7fb2ff;
}

.strategy-page .by-day-head {
  margin: 14px 0 6px;
  font-size: 13px;
}

.strategy-page table.by-day td,
.strategy-page table.by-day th {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* ---------------------------------------------------------------- chart */

.strategy-page .chart {
  width: 100%;
  min-height: 120px;
}

.strategy-page .chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.strategy-page .chart .grid {
  stroke: var(--border);
  stroke-width: 1;
}

.strategy-page .chart .grid.zero {
  stroke: var(--muted);
  stroke-dasharray: 4 3;
}

.strategy-page .chart .tick {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.strategy-page .chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.strategy-page .chart .pt {
  stroke-width: 1.5;
  cursor: help;
}

.strategy-page .chart .pt.thin {
  stroke-width: 2;
}

.strategy-page .chart .pt:hover,
.strategy-page .chart .pt:focus-visible {
  r: 6;
  outline: none;
}

.strategy-page .chart-empty {
  padding: 28px 0;
  text-align: center;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 6px 0 10px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px 3px 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 12.5px;
}

.legend-item:hover {
  border-color: var(--border);
}

.legend-item.off {
  opacity: 0.45;
}

.legend-item.off .legend-name {
  text-decoration: line-through;
}

.legend-item .swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------- accounts, bets */

.account-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.account-nav a {
  color: var(--muted);
  text-decoration: none;
}

.account-nav a:hover {
  color: var(--text);
}

.inline-form {
  display: inline;
}

.inline-form button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}

.inline-form button:hover {
  color: var(--text);
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
}

/* <main> is a 440px-column grid on the dashboard; this card is a block, or
   its form would be laid out in a track wider than the card. */
.auth-card {
  display: block;
  width: min(380px, 92vw);
  padding: 28px 28px 24px;
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 18px;
}

/* minmax(0, 1fr): an auto track takes the input's intrinsic width (440px)
   and the form walks out of the card. */
.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.auth-form .field,
.settings-form .field {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.auth-form .field input,
.settings-form .field input,
.settings-form .field select {
  width: 100%;
  box-sizing: border-box;
}

.auth-error {
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.auth-ok {
  color: var(--ok);
  font-size: 13px;
}

.settings-page .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #171a24, #14171f);
}

.settings-page .topbar h1 {
  margin: 0;
  font-size: 15px;
}

.settings-page .topbar-right a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 8px;
}

.settings-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.settings-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.wallet-status {
  margin: 8px 0 4px;
  line-height: 1.7;
}

.wallet-status code {
  font-size: 12px;
}

.bet-status {
  margin-left: 10px;
  font-size: 12.5px;
  color: var(--accent);
}

/* A refusal reads as one: red where it happened, on the button that was
   pressed and in the status line, until the next attempt. */
.bet-status.error {
  color: var(--error);
}

.strategy-page button.error,
.strategy-page button.primary.error {
  border-color: var(--error);
  color: var(--error);
  background: transparent;
  box-shadow: 0 0 0 2px rgba(247, 118, 142, 0.25);
}

.strategy-page .sell-err {
  font-size: 11px;
  margin-left: 4px;
}

/* The record's filters, one group per way of slicing it, then the totals of
   what they leave. */
.bet-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.placed-cards {
  margin: 12px 0 4px;
}

/* What is still held, against what it fetches this minute. */
.exit-board {
  margin: 8px 0 14px;
}

.exit-board .exit-head {
  margin: 4px 0 8px;
  font-size: 13px;
}

.exit-board .exit-head b {
  font-size: 16px;
}

.exit-table td.col-city {
  position: static;
}

.placed-cards .card-value {
  font-size: 20px;
}

.strategy-page td.placed-cell {
  white-space: nowrap;
}

.strategy-page td.placed-cell button {
  margin-right: 3px;
}

.strategy-page .placed-note {
  color: var(--ok);
  font-weight: 600;
  margin-right: 6px;
}

/* Another account's bet on this market: worth knowing, not this wallet's. */
.strategy-page .placed-else {
  color: var(--muted);
  font-size: 11px;
  margin-right: 6px;
}

.bet-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bet-form label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.bet-form input {
  width: 58px;
  padding: 3px 5px;
}

.bet-form select {
  padding: 3px 5px;
  font-size: 12px;
}

/* What the book does with the order, under the fields that describe it. */
.bet-form .book-line {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
  max-width: 420px;
}

/* Wide enough for the fields to sit on one line; the book line wraps below. */
.bet-form {
  flex-wrap: wrap;
  min-width: 400px;
}

.strategy-page td.order-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

.wallet-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
}

.wallet-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.7;
}

.wallet-card .editor-actions {
  margin-top: 6px;
}

.wallet-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.wallet-pick select {
  padding: 3px 6px;
}

.bet-form select {
  padding: 3px 4px;
  max-width: 110px;
}

/* ------------------------------------------------------------- versions */

.version-pill {
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 17px;
}

.version-pill:empty {
  display: none;
}

.strategy-editor details.versions {
  margin-top: 10px;
  font-size: 12.5px;
}

.strategy-editor details.versions summary {
  cursor: pointer;
  color: var(--muted);
}

.strategy-editor .version {
  padding: 5px 0 5px 8px;
  border-left: 2px solid var(--border);
  margin: 4px 0;
}

.strategy-editor .version.current {
  border-left-color: var(--accent);
}

.strategy-editor .version-changes {
  font-size: 11.5px;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.5;
}

/* ----------------------------------------------------------- bets placed */

/* A fixed window onto the record: the table scrolls both ways inside it and
   the header row stays put, so forty bets take the room of eight. */
.strategy-page .placed-scroll {
  max-height: 340px;
  overflow: auto;
}

.strategy-page .placed-scroll table.grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
}

/* The city column is already sticky to the left; where it meets the sticky
   header it must sit above both. */
.strategy-page .placed-scroll table.grid thead th.col-city {
  z-index: 4;
}

.strategy-page .strategy-placed.folded #placed-body {
  display: none;
}

/* ------------------------------------------------------------ colours */

.strategy-line .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 2px;
  vertical-align: -1px;
}

.strategy-editor .name-row .field.grow {
  flex: 1;
}

.strategy-editor .name-row .field.grow input {
  width: 100%;
  box-sizing: border-box;
}

.strategy-editor input[type="color"] {
  width: 44px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  cursor: pointer;
}

/* ------------------------------------------------- compact strategy editor */

/* The editor is a 330px column. Everything in it is sized to that column --
   labels above inputs, two fields to a row, fieldsets that cannot grow past
   their box -- so nothing ever asks for a horizontal scrollbar. */
.strategy-page .strategy-editor {
  overflow-x: hidden;
  padding: 12px 14px 14px;
  font-size: 12.5px;
}

.strategy-page .strategy-editor > *,
.strategy-page .strategy-editor fieldset {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.strategy-page .strategy-editor .editor-head {
  margin-bottom: 4px;
}

.strategy-page .strategy-editor .editor-head h2 {
  font-size: 14px;
  margin: 0;
}

.strategy-page .strategy-editor fieldset {
  padding: 6px 10px 8px;
  margin: 0 0 8px;
}

.strategy-page .strategy-editor legend {
  font-size: 11px;
  padding: 0 4px;
}

.strategy-page .strategy-editor fieldset.inner {
  margin: 4px 0 6px;
  padding: 2px 8px 6px;
}

.strategy-page .strategy-editor .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 6px;
  font-size: 11px;
  min-width: 0;
}

.strategy-page .strategy-editor .field > span {
  color: var(--muted);
  line-height: 1.3;
}

.strategy-page .strategy-editor .field input,
.strategy-page .strategy-editor .field select,
.strategy-page .strategy-editor > .field input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 7px;
  font-size: 12.5px;
  min-width: 0;
}

.strategy-page .strategy-editor .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.strategy-page .strategy-editor .field-row .field {
  margin-bottom: 6px;
}

.strategy-page .strategy-editor .name-row {
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: end;
}

.strategy-page .strategy-editor .check {
  margin: 0 0 4px;
  font-size: 11.5px;
}

.strategy-page .strategy-editor .hint {
  margin: 2px 0 4px;
  font-size: 11px;
  line-height: 1.4;
}

.strategy-page .strategy-editor .chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 6px;
}

.strategy-page .strategy-editor .chip {
  padding: 3px 7px;
  font-size: 11.5px;
  border-radius: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.strategy-page .strategy-editor .field-actions {
  margin-top: 2px;
}

.strategy-page .strategy-editor .editor-actions {
  gap: 6px;
  margin-top: 4px;
}

.strategy-page .strategy-editor .editor-actions button {
  padding: 5px 10px;
  font-size: 12px;
}

.strategy-page .strategy-editor #s-status {
  margin: 6px 0 0;
}

.strategy-page .strategy-editor details.versions {
  margin-top: 6px;
}