/* Markets page (index.html). Shared look is in site.css. */

.mk-tabs { margin-bottom: 24px; }
.mk-question { margin: 0; font-size: 22px; }
.mk-house-note { margin: 0; line-height: 1.5; }

/* Outcome list */
.mk-list ul { margin: 0; padding: 0; list-style: none; }
.mk-list-head {
  display: flex; gap: 16px; padding: 10px 16px; background: var(--tan-2);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #444444;
}
.mk-col-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
.mk-col-forecast { flex: 0 0 220px; display: flex; align-items: center; gap: 10px; }
.mk-col-seed { flex: 0 0 72px; text-align: right; font-size: 15px; color: #444444; }
.mk-house-hidden .house { display: none; }

.mk-row {
  font: inherit; color: inherit; width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; min-height: 64px; border: 0; border-top: 1px solid var(--line-soft);
  background: var(--white); cursor: pointer; text-align: left; box-shadow: inset 6px 0 0 transparent;
}
.mk-row:hover { background: #F5F9FC; }
.mk-row[aria-pressed="true"] { background: #E5F1FA; box-shadow: inset 6px 0 0 var(--link); }
.mk-row:focus-visible { outline-offset: -3px; }
.mk-row .bullet { width: 40px; height: 40px; }
.mk-row-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-row-name { font-size: 17px; font-weight: 700; }
.mk-row-sub { font-size: 13px; color: var(--muted); }
.mk-bar { flex: 1 1 auto; height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.mk-bar-fill { display: block; height: 100%; background: var(--link); }
.mk-pct { flex: 0 0 48px; text-align: right; font-size: 16px; font-weight: 700; }

.mk-list-note { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); background: var(--tan-3); }
.mk-list-foot { border-top: 1px solid var(--line-soft); }
.mk-more-button {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--link); background: var(--white);
  width: 100%; min-height: 48px; padding: 0 16px; border: 0; text-align: left; cursor: pointer;
}
.mk-more-button:hover { color: var(--link-hover); text-decoration: underline; }

/* Selected outcome */
.mk-selected-head { border-bottom: 6px solid var(--brown); }
.mk-selected-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-selected-kind { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.mk-selected-name { font-size: 22px; font-weight: 700; }
.mk-figures { margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-figures > div { display: flex; flex-direction: column; gap: 4px; }
.mk-figures dt { font-size: 13px; color: var(--muted); }
.mk-figures dd { margin: 0; font-size: 20px; font-weight: 700; }
.mk-figures dd.mk-big { font-size: 28px; }
.mk-selected-link { padding: 0 16px 16px; font-size: 15px; font-weight: 700; }

/* Bet slip */
.mk-slip { border: 2px solid var(--brown); gap: 12px; }
.mk-slip h3 { margin: 0; font-size: 18px; }
.mk-slip-label { color: #6B6B6B; }
.mk-slip-label .input { font-size: 18px; }
.mk-slip-button { font-size: 17px; min-height: 48px; }
.mk-slip-note { display: flex; flex-direction: column; gap: 10px; }
.mk-slip-note strong { font-size: 16px; }
.mk-slip-note span { font-size: 14px; line-height: 1.5; color: #333333; }
.mk-slip-note .btn { align-self: flex-start; }

/* Recent results */
.mk-recent h3 { margin: 0; font-size: 16px; }
.mk-recent ul { margin: 0; padding: 0; list-style: none; }
.mk-recent li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.mk-recent-day { flex: 0 0 72px; color: var(--muted); }
.mk-recent-who { flex: 1 1 auto; font-weight: 700; min-width: 0; }
.mk-recent-who.mk-called-off { font-weight: 400; color: var(--muted); }
.mk-recent-val { text-align: right; }
.mk-not-final { display: block; font-size: 12px; color: var(--muted); }
.mk-recent a { font-size: 15px; font-weight: 700; }

@media (max-width: 640px) {
  .mk-tabs { gap: 4px; }
  .mk-tabs .tab { padding: 0 12px; font-size: 15px; }
  .mk-list-head, .mk-row { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .mk-list-head { font-size: 11px; }
  .mk-col-forecast { flex-basis: 96px; }
  .mk-col-seed { flex-basis: 44px; }
  .mk-bar { display: none; }
  .mk-row-name { font-size: 16px; }
  .mk-row .bullet { width: 34px; height: 34px; font-size: 11px; }
}