/* Strategies on this game (templates/markets/_hero_strategies.html): a
   quiet row of chips under the Markets hero's chart, no card around it.
   A chip is a strategy's name, its pick and price, and a dot for its state:
   hollow when it only qualifies, filled when it holds a position, green or
   red once graded. */
.mkh > .mkh-st { grid-column: 1 / -1; }
.mkh-st { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: -4px; }
/* The toolbar over the chart: find a game left, its strategies right. */
.mk-mkt.mkh > .mkh-bar { grid-column: 1 / -1; }
.mkh-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; min-width: 0; }
/* The strategies keep the right side and scroll sideways when they don't fit. */
.mkh-bar > .mkh-st { margin: 0; flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.mkh-bar > .mkh-st .mkh-st-list { flex: 0 1 auto; }
.mkh-find { position: relative; flex: none; flex-wrap: nowrap; }
.mkh-find .mk-filt-search { flex: 0 0 260px; }
/* Search results: the Strategies tab's menu (markets.css .mk-pop), wider. */
.mk-pop.is-down.mkh-find-list { width: 520px; max-width: calc(100vw - 32px); max-height: 380px; overflow-y: auto; }
.mkh-find-list .mk-filt-opt .nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.mkh-find-list .side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mkh-find-list .side .tx { overflow: hidden; text-overflow: ellipsis; }
.mkh-find-list .side .mk-crest-img, .mkh-find-list .side .mk-crest { flex: none; width: 18px; height: 18px; }
.mkh-find-list .at { flex: none; font-size: 11.5px; color: var(--tl-ink-45); }
.mkh-find-list .mk-filt-opt .r { flex: none; margin-left: 12px; }
.mkh-find-list .mk-filt-opt[aria-selected="true"] { background: var(--tl-fill-05); color: var(--tl-ink); }
.mkh-find-list .is-none { padding: 8px 10px; font-size: 12.5px; color: var(--tl-ink-50); }
.mkh-tile[data-filtered] { display: none; }
.mkh-st-label {
  flex: none; font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--tl-ink-50);
}
.mkh-st-list {
  display: flex; gap: 8px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none;
  padding: 2px; margin: -2px;
}
.mkh-st-list::-webkit-scrollbar { display: none; }
.mkh-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px;
  border-radius: var(--tl-r-pill); background: var(--tl-card-bg); box-shadow: inset 0 0 0 1px var(--tl-line-07);
  font-size: 12.5px; color: var(--tl-ink); text-decoration: none; white-space: nowrap;
  transition: box-shadow 0.2s var(--tl-ease);
}
a.mkh-chip:hover { box-shadow: inset 0 0 0 1px var(--tl-line-18); color: var(--tl-ink); }
.mkh-chip.is-skel { padding: 0; background: var(--tl-fill-06); box-shadow: none; }
.mkh-chip-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tl-ink-50); }
.mkh-chip-dot.is-open { background: var(--tl-ink); box-shadow: none; }
.mkh-chip-dot.is-won { background: var(--tl-up); box-shadow: none; }
.mkh-chip-dot.is-lost { background: var(--tl-down); box-shadow: none; }
.mkh-chip-name { font-weight: 600; }
.mkh-chip-pick { color: var(--tl-ink-60); }
.mkh-chip-px { font-family: var(--tl-mono); font-size: 11.5px; color: var(--tl-ink-50); }
.mkh-chip .tl-pro-tag { margin-left: -1px; }
.mkh-chip-lock { display: inline-flex; color: var(--tl-pro); }
.mkh-st-empty { font-size: 12.5px; color: var(--tl-ink-50); white-space: nowrap; }
@media (max-width: 900px) { .mkh-bar { flex-wrap: wrap; } .mkh-bar > .mkh-st { justify-content: flex-start; } }
@media (max-width: 640px) {
  .mkh-st { flex-direction: column; align-items: stretch; gap: 6px; }
  .mkh-find { flex-wrap: wrap; width: 100%; }
  .mkh-find .mk-filt-search { flex: 1 1 100%; }
  .mk-pop.is-down.mkh-find-list { width: 100%; }
}

/* Market: a narrow card beside the chart, a quarter of the row (full
   width under 900px, below the chart). Its facts are short labeled lists:
   the favorite's price on each exchange, then Price, Activity, Lines and
   Listed, each row a label on the left and its value on the right. */
.mk-mkt.mkh > .mkh-chart { grid-column: span 9; }
.mk-mkt.mkh > .mkh-info { grid-column: span 3; }
@media (max-width: 900px) {
  .mk-mkt.mkh > .mkh-chart, .mk-mkt.mkh > .mkh-info { grid-column: 1 / -1; }
}
.mkh-info { display: flex; flex-direction: column; min-width: 0; }
.mkh-info-xs { display: inline-flex; gap: 4px; }
.mkh-info-xs img { border-radius: 4px; }
.mkh-info-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 14px; flex: 1; min-height: 0; }
.mkh-skel { display: block; height: 14px; border-radius: 6px; background: var(--tl-fill-06); }
.mkh-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkh-group-t {
  margin: 0; font-family: var(--tl-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--tl-ink-50);
}
.mkh-rows { margin: 0; }
.mkh-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 5px 0; border-bottom: 1px solid var(--tl-line-07);
}
.mkh-row:last-child { border-bottom: 0; }
.mkh-row-k { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--tl-ink-60); white-space: nowrap; }
.mkh-row-k img { border-radius: 3px; align-self: center; }
.mkh-row-v { margin: 0; min-width: 0; font-family: var(--tl-mono); font-size: 12.5px; font-weight: 600; color: var(--tl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkh-row-v.is-big { font-size: 15px; }
.mkh-row-v.is-up { color: var(--tl-up); }
.mkh-row-v.is-down { color: var(--tl-down); }
.mkh-info-note { margin: auto 0 0; font-size: 11px; line-height: 1.4; color: var(--tl-ink-50); }
/* Activity: the card's own rows, four to a line, the label then Novig,
   Kalshi and the total. Per-exchange figures are a step quieter than the
   total, a missing one is a faint dash. */
/* Columns fit a six-character figure ("191.7K") in the mono face, with a gap
   between them, so neighbors never run together. */
.mkh-act-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(7ch, max-content)); align-items: baseline; gap: 0 12px; }
.mkh-act-row > .mkh-row-k { overflow: hidden; text-overflow: ellipsis; }
.mkh-act-row.is-head { padding-top: 0; align-items: center; }
.mkh-act-c { text-align: right; font-family: var(--tl-mono); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--tl-ink-60); white-space: nowrap; }
.mkh-act-c.is-total { font-weight: 600; color: var(--tl-ink); }
.mkh-act-c.is-none { color: var(--tl-ink-30, var(--tl-ink-50)); font-weight: 400; }
.is-head .mkh-act-c img { display: inline-block; vertical-align: middle; border-radius: 3px; }
.is-head .mkh-act-c.is-total { font-size: 10px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--tl-ink-50); }
/* The hero's season strip draws every exchange's line, the one with the
   longer history full strength, the other a step quieter. */
.mkh .mk-perf-nav .nl.is-alt { stroke: var(--tl-ink-30, var(--tl-ink-45)); opacity: 0.8; }
/* A label with a definition (markets-hero-strategies.js define): a dotted
   underline and the help cursor say hover me, the popup is markets.css's
   .mk-def-pop. */
.mkh-row-k.has-def { cursor: help; text-decoration: underline dotted var(--tl-ink-30, var(--tl-ink-45)); text-underline-offset: 3px; border-radius: 3px; }
.mkh-row-k.has-def:hover { color: var(--tl-ink); }
.mkh-row-k.has-def:focus-visible { outline: 2px solid var(--tl-ink); outline-offset: 2px; }
/* The hero chart grabs and moves like a strategy's (markets-hero.js). */
.mkh-plot.is-panning, .mkh-plot.is-panning * { cursor: grabbing; }
.mkh-row-none { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--tl-ink-50); }
/* Exchange options lead with the exchange's logo. */
.mkh-opt { display: inline-flex; align-items: center; gap: 8px; }
.mkh-opt img { display: block; flex: none; border-radius: 4px; }