/* Markets: one list of fixtures and matches in Spark, and the baselines drawer (ADR-094). */
:root {
  --spark-blue: #2563eb;
  --spark-blue-soft: #eef4ff;
  --spark-amber: #b25c0d;
  --spark-amber-dot: #f59e0b;
  --spark-amber-soft: #fff6e8;
  --spark-red: #b42318;
  --spark-red-soft: #fdecea;
  --spark-green: #087f5b;
  --spark-hover: #f5f7fa;
  --spark-inset: #f1f3f6;
}

html[data-theme='dark'] {
  --spark-blue: #60a5fa;
  --spark-blue-soft: rgba(96, 165, 250, 0.1);
  --spark-amber: #fbbf24;
  --spark-amber-dot: #fbbf24;
  --spark-amber-soft: rgba(251, 191, 36, 0.1);
  --spark-red: #f87171;
  --spark-red-soft: rgba(248, 113, 113, 0.12);
  --spark-green: #34d399;
  --spark-hover: #1c2026;
  --spark-inset: #101214;
}

.content.is-fill {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content.is-fill > .topbar,
.content.is-fill > .notice,
.content.is-fill > .panel + .panel {
  margin: 0;
}

/* The page stays put and only the list scrolls, at every width. On a screen
   too short for the list, the content scrolls as a whole instead. */
.content.is-fill {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

.content.is-fill > * {
  flex: none;
}

.content.is-fill > .spark-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 260px;
  overflow: hidden;
}

.spark-panel > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

/* The header actions stay on one line beside the title. When the title
   leaves too little room, the whole group moves under it. */
.content.is-fill .topbar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 12px;
}

.content.is-fill .topbar > :not(.actions) {
  flex: 1 1 360px;
  min-width: 0;
}

.content.is-fill .topbar .actions {
  flex: none;
  flex-wrap: nowrap;
  align-items: stretch;
  width: auto;
}

@media (max-width: 1100px) {
  /* The mobile header sits above the content, so the shell sets the height. */
  .shell:has(> .content.is-fill) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  .content.is-fill {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* On a phone the actions fill the width and wrap when they must. */
/* Header actions and filters keep their natural size while they fit on one
   line. Only when they do not fit do they wrap and fill each row, and they
   never shrink below their natural size. The widths are measured natural
   widths, so the switch follows the content, not the screen: 582px for the
   header actions, 577px for the filters with the longest competition name. */
.content.is-fill .topbar,
.spark-toolbar {
  container-type: inline-size;
}

.content.is-fill .topbar .actions > * {
  flex: none;
}

@container (max-width: 581.98px) {
  .content.is-fill .topbar .actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .content.is-fill .topbar .actions > * {
    flex: 1 0 auto;
  }
}

@container (max-width: 576.98px) {
  .spark-toolbar > *,
  .spark-segment button {
    flex: 1 0 auto;
  }

  .spark-show-toggle {
    width: 100%;
  }

  .spark-competition-menu {
    right: 0;
    min-width: 0;
  }

  .spark-competition-current {
    max-width: none;
  }
}

/* The page margin narrows smoothly, from 26px at 680px wide to 16px. */
@media (max-width: 680px) {
  .content.is-fill {
    padding: clamp(16px, 3.2vw, 22px);
    padding-right: max(clamp(16px, 3.82vw, 26px), env(safe-area-inset-right));
    padding-left: max(clamp(16px, 3.82vw, 26px), env(safe-area-inset-left));
  }
}

/* Touch targets on a phone. */
@media (max-width: 680px) and (pointer: coarse) {
  .spark-competition-menu button {
    min-height: 44px;
    font-size: 14px;
  }
}

.spark-clock {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
}

.spark-clock small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.spark-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.spark-show {
  position: relative;
}

.spark-show-toggle {
  min-height: 36px;
  border-radius: 9px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.spark-show-toggle b {
  color: var(--text);
  font-weight: 600;
}

.spark-show-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 240px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 4px;
}

.spark-competition-current {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.spark-competition-menu {
  min-width: 260px;
  overflow-y: auto;
}

.spark-competition-menu.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.spark-competition-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.spark-competition-menu button:hover,
.spark-competition-menu button:focus-visible {
  background: var(--spark-hover);
}

.spark-competition-menu button[aria-selected='true'] {
  font-weight: 600;
}

.spark-competition-check {
  color: var(--spark-green);
}

.spark-show-menu label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.spark-show-menu label:hover {
  background: var(--spark-hover);
}

.spark-show-menu input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.spark-show-menu small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.spark-search {
  flex: 1 1 220px;
  min-width: 0;
}

.spark-segment {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  padding: 2px;
}

.spark-segment button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0 10px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.spark-segment button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--panel);
}

.spark-table {
  min-width: 900px;
}

.spark-table td {
  vertical-align: middle;
}

/* Team logos with a filter paint on their own layer, so the header sits above. */
.spark-table thead th {
  z-index: 3;
}

.spark-table tbody:not(:last-child) tr:last-child td {
  border-bottom: 1px solid var(--line-soft);
}

.spark-day-row th {
  background: var(--panel-soft);
  padding: 7px 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.spark-table tr.is-due td:first-child {
  box-shadow: inset 3px 0 0 var(--spark-amber-dot);
}

.spark-table tr.is-risk td:first-child {
  box-shadow: inset 3px 0 0 var(--spark-red);
}

.spark-table tr.is-open td,
.row-clickable .spark-table tr.is-open:hover td {
  background: var(--spark-blue-soft);
}

.spark-matchup {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.spark-matchup-team {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.spark-matchup-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spark-kickoff {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spark-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.spark-pill .dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.spark-pill-opta,
.spark-pill-scheduled {
  color: var(--muted);
}

.spark-pill-opta .dot,
.spark-pill-scheduled .dot {
  background: var(--muted-soft);
}

.spark-pill-draft {
  color: var(--spark-amber);
}

.spark-pill-draft .dot {
  background: var(--spark-amber-dot);
}

.spark-pill-published {
  color: var(--spark-green);
}

.spark-pill-published .dot {
  background: var(--spark-green);
}

.spark-tag {
  border-radius: 6px;
  background: var(--spark-amber-soft);
  padding: 2px 6px;
  color: var(--spark-amber);
  font-size: 11px;
  font-weight: 600;
}

.spark-tag-sim {
  background: var(--spark-blue-soft);
  color: var(--spark-blue);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: none;
}

.spark-match-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.spark-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.spark-sub-warn {
  color: var(--spark-amber);
  font-weight: 500;
}

.spark-sub-lock {
  color: var(--spark-red);
  font-weight: 500;
}

.spark-table .spark-action-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.spark-list-note {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12.5px;
}

.spark-list-note.is-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  background: var(--spark-red-soft);
  color: var(--spark-red);
}

.spark-list-note.is-error button {
  min-height: 30px;
  font-size: 12.5px;
}

.spark-menu-wrap {
  position: relative;
  display: inline-block;
}

.spark-menu-toggle {
  min-height: 32px;
  padding: 0 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.spark-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 4px;
}

.spark-menu.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.spark-menu button {
  justify-content: flex-start;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-weight: 500;
  text-align: left;
}

.spark-menu button:hover {
  background: var(--spark-hover);
}

.spark-menu button.danger {
  color: var(--spark-red);
}

.spark-menu button.success {
  color: var(--spark-green);
}

.spark-menu button:disabled {
  opacity: 0.55;
  cursor: default;
}

.spark-empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.spark-nav-badge {
  background: var(--lime);
  color: #0b0d10;
}

.spark-nav-badge[hidden] {
  display: none;
}

.spark-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--backdrop);
}

.spark-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: min(580px, 100%);
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.spark-drawer-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.spark-drawer-body {
  display: grid;
  align-content: start;
  gap: 14px;
  flex: 1;
  overflow: auto;
  padding: 18px 20px;
}

.spark-drawer-head {
  display: grid;
  gap: 10px;
}

.spark-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 36px;
  color: var(--muted);
  font-size: 12px;
}

.spark-link,
.content .spark-link:hover {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--spark-blue);
  font-size: 12px;
  font-weight: 600;
}

.spark-link:hover {
  text-decoration: underline;
}

.spark-drawer-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
}

.spark-drawer-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.spark-drawer-team span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.spark-drawer-team.is-away {
  justify-content: flex-end;
  text-align: right;
}

.spark-drawer-team .team-logo {
  width: 40px;
  height: 40px;
}

.spark-drawer-vs {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.spark-drawer-when {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.spark-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spark-steps li {
  border-top: 3px solid var(--line);
  padding-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.spark-steps li.is-done {
  border-color: var(--spark-green);
  color: var(--text);
}

.spark-steps li.is-now {
  border-color: var(--spark-blue);
  color: var(--text);
}

.spark-callout {
  border-radius: 10px;
  background: var(--spark-blue-soft);
  padding: 10px 12px;
  font-size: 13px;
}

.spark-callout b {
  color: var(--spark-blue);
  font-weight: 600;
}

.spark-callout-warn {
  background: var(--spark-amber-soft);
}

.spark-callout-warn b {
  color: var(--spark-amber);
}

.spark-callout-lock {
  background: var(--spark-red-soft);
}

.spark-callout-lock b {
  color: var(--spark-red);
}

/* Fixed column shares, so long team names wrap instead of pushing the grid
   wider than the panel on a phone. */
.spark-grid table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.spark-grid th:nth-child(2),
.spark-grid th:nth-child(3) {
  width: 26%;
}

.spark-grid th:nth-child(4) {
  width: 16%;
}

.spark-grid th,
.spark-grid td {
  padding: 6px 10px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.spark-baseline {
  width: 100%;
  min-width: 0;
  padding-right: 8px;
  padding-left: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.spark-baseline.is-bad {
  border-color: var(--spark-red);
  background: var(--spark-red-soft);
}

.spark-baseline:disabled {
  background: var(--spark-inset);
  color: var(--muted);
}

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

.spark-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  container-type: inline-size;
}

/* One rule at every width. The state text and the buttons share a line when
   both fit; the text then takes the free space. Otherwise the text moves
   above, and the buttons fill their own line: each button gets the same extra
   width on top of its label and padding, so it never gets narrower. */
.spark-drawer-state {
  flex: 1000 1 auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.spark-drawer-actions {
  display: flex;
  flex: 1 0 auto;
  gap: 8px;
}

.spark-drawer-actions button {
  flex: 1 0 auto;
  padding: 0 16px;
  white-space: nowrap;
}

/* Labels get shorter only when the footer is too narrow for them. The widths
   are the measured natural widths of the longest labels (a revision):
   435px in full, 362px with "Next ->". */
@container (max-width: 435px) {
  .spark-next-long {
    display: none;
  }
}

@container (max-width: 362px) {
  .spark-btn-long {
    display: none;
  }
}

@media (max-width: 760px) {
  /* The panel scrolls sideways so team names stay readable. */
  .spark-table {
    min-width: 640px;
  }

  .spark-table .hide-sm {
    display: none;
  }

  .spark-drawer-foot {
    padding: 12px 16px;
  }
}