/* The price list. A table rather than cards, because the question it answers
   is comparative — what does the top of the league cost against the middle —
   and nothing compares like a column of right-aligned numbers. */

.market__header {
  margin-bottom: var(--space-xl);
}

.market__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.market__lede {
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.market__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* Nine columns do not fit a phone and nothing sensible can be dropped — a
   price list with the record taken out is a price list you cannot argue with.
   So it scrolls sideways, with the name held still to keep a row readable. */
.market__table-wrap {
  overflow-x: auto;
}

.market__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.market__table th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: var(--border-width) solid var(--border-default);
  white-space: nowrap;
}

.market__table td {
  padding: var(--space-sm);
  border-bottom: var(--border-width) solid var(--border-subtle, var(--line));
  white-space: nowrap;
}

.market__row:hover {
  background: var(--surface-sunk);
}

/* Too few games for the record to have moved the price, so the row is making
   a weaker claim than the ones around it and says so quietly. */
.market__row--unclaimed {
  color: var(--text-tertiary);
}

.market__place {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.market__name {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.market__name:hover {
  text-decoration: underline;
}

/* **The heading goes over its own column**, which for a column of figures
   means right with them. `.market__table th` sets the default and is the more
   specific selector, so the class on its own lost to it and every numeric
   heading sat a column-width to the left of the numbers it named. */
.market__table th.market__num,
.market__table td.market__num {
  text-align: right;
}

.market__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* The column the page exists for. */
.market__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

.market__notes {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 68ch;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.market__notes p {
  margin: 0;
}

.market__thin {
  color: var(--text-tertiary);
}

.market__empty {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ a night

   What a market night adds to the boards: a price per row, and a budget strip
   above the board it belongs to. Both are figures, so both are mono — and
   both live here rather than in `mix.css`, so a night with no money on it
   loads nothing it will not draw. */

.money__figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* More than the reader has left. Overspending is allowed, so this is an alert
   rather than a refusal — the row keeps its pick button. */
.money__figure--over {
  color: var(--text-loss);
}

.money {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
}

.money--over {
  border-color: var(--coral-100);
  background: var(--surface-loss);
}

.money__label {
  color: var(--text-tertiary);
}

/* The number somebody is doing sums against, so it leads. */
.money__left {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.money--over .money__left {
  color: var(--text-loss);
}

.money__detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* On a team card, where the strip would be too loud: one line under the
   roster saying what the team has left. */
.mix-team__money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mix-team__money-left {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.mix-team__money--over .mix-team__money-left {
  color: var(--text-loss);
}

/* ------------------------------------------------- a heading with an (i) on it

   The column the price's win-rate half is in. The heading names what the
   figure does to a price; the (i) under it names the statistic, for whoever
   wants to check the arithmetic. `inline-flex` because the cell is
   right-aligned, so the glyph has to travel with the words rather than sit at
   the end of the column. */
.market__heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The panel carries sentences, and the heading it hangs from is uppercase mono
   with its letters spaced out and held on one line — all of which a nested
   span inherits. The last of those is the one that matters: `nowrap` keeps
   the headings from breaking mid-column, and inside the panel it ran every
   sentence straight out through the side of it. */
.market__info .info-pop__panel {
  width: 22rem;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* Why the pick beside it is grey: over budget is not a refusal to spend, it is
   a place at the back of the round's queue, and a disabled button with no
   sentence under it reads as something broken. */
.mix-team__blocked {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}