/* Slate page. Rules: DESIGN.md. No shadow, blur or gradient. Everything here uses tokens. */

.slate-main { min-width: 0; }
.slate-main > * + * { margin-top: var(--space-4); }

/* ---------- banner (halftone veil allowed here only: DESIGN.md section 7) ---------- */
.slate-banner {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
}
.slate-veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slate-banner-body {
  position: relative; padding: var(--space-3) var(--space-4) var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-3);
  grid-template-areas: "tabs league" "heading toggle";
  align-items: end;
}
.slate-banner .tabs { grid-area: tabs; align-self: start; border-bottom: 0; margin-inline: calc(var(--space-3) * -1); min-width: 0; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.slate-banner .tab { scroll-snap-align: start; }
.slate-heading { grid-area: heading; min-width: 0; padding-top: var(--space-2); }
.slate-heading > * + * { margin-top: var(--space-2); }
.slate-heading .meta { font-size: var(--fs-body); color: var(--ink-2); max-width: 60ch; }
.slate-controls { display: contents; }
.slate-league { grid-area: league; align-self: start; width: 190px; }
.slate-toggle { grid-area: toggle; }
.seg > button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- rows ---------- */
.row-act[aria-pressed="true"] { font-size: 22px; }
.row-act[disabled] { opacity: 0.4; cursor: not-allowed; }
.rows .row { padding-block: 0; }
.row-time { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.row-league { color: var(--ink-3); font-size: var(--fs-meta-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-play-name { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
/* The play name may take two lines. The play column is clipped to two lines, so the line under it (reason on desktop,
   match on phone) shows only when the name fits on one: every row stays 56px and nothing is cut mid-line. */
.row-play { max-height: calc(var(--fs-table) * 1.3 * 2); overflow: hidden; }
.row-play-label {
  min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.row-play-p { flex: none; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.row-why {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
  text-overflow: ellipsis; overflow-wrap: anywhere;
}
.row-toggle[type="button"] { cursor: pointer; font: inherit; }
.row-detail-grid { align-items: flex-start; gap: var(--space-3) var(--space-5); }
.detail-block { min-width: 0; }
.detail-value { font-size: var(--fs-table); line-height: 1.4; white-space: pre-wrap; }
.detail-block .bar-1x2 { margin-top: var(--space-1); }
.row-detail .bar-1x2.is-compact { width: 240px; }
.row-detail .bar-1x2.is-compact .bar-label { display: block; font-size: var(--fs-meta-sm); }
.row-detail .bar-1x2.is-compact .bar-cell { min-width: 3.4em; }
.detail-link { align-self: flex-end; margin-left: auto; font-weight: 600; min-height: var(--touch); display: inline-flex; align-items: center; }
.rows > li > .row-more { border-top: 1px solid var(--rule); }
.rows > li:first-child > .row-more { border-top: 0; }
.slate-msg { padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); color: var(--ink-2); font-size: var(--fs-table); }
.combo-msg { padding: var(--space-2) var(--space-4) 0; }
@media (min-width: 720px) {
  .rows .row-toggle { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.5fr) 100px 16px; }
  .rows .row-detail { padding-left: calc(var(--space-4) + 96px + var(--space-3)); }
}

/* ---------- rail ---------- */
.slate-rail > * + * { margin-top: var(--space-4); }
.slate-rail .stat-label { font-size: var(--fs-meta); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.4; }
#record-body > * + * { margin-top: var(--space-2); }
#record-panel .meta-sm { margin-top: var(--space-3); }
.combo-legs { border-top: 1px solid var(--rule); margin-top: var(--space-3); }
.combo-leg {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule);
}
.combo-leg-text { min-width: 0; }
#combo-title:focus { outline: none; }
.combo-leg-text > * { overflow-wrap: anywhere; }
.combo-leg-text .nowrap { overflow-wrap: normal; }
.btn-remove { flex: none; font-size: 22px; color: var(--ink-2); }
.btn-remove:hover { color: var(--ink); background: var(--paper); }
.combo-total > * + * { margin-top: var(--space-1); }
.combo-total .meta-sm { margin-top: var(--space-2); }
.combo-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.combo-actions .btn-link { align-self: center; }

/* ---------- phone ---------- */
@media (max-width: 719.98px) {
  .slate-banner-body {
    padding-inline: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tabs tabs" "heading heading" "league toggle";
  }
  .slate-banner .tabs { margin-inline: calc(var(--space-2) * -1); }
  .slate-banner .tab { padding-inline: var(--space-2); }
  .slate-heading .meta { font-size: var(--fs-table); }
  .row-why, .row-league { display: none; }
  .slate-league { width: auto; align-self: end; }
  .row-detail-grid { gap: var(--space-3) var(--space-5); }
}

@media (max-width: 380px) {
  .slate-banner-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "heading" "league" "toggle"; }
  .slate-league { width: 100%; }
  .slate-toggle { display: flex; width: 100%; }
  .slate-toggle > button { flex: 1 1 0; padding-inline: var(--space-2); }
  .rows .row { padding-inline: var(--space-3); gap: var(--space-1); }
  .rows .row-toggle { grid-template-columns: 40px auto minmax(0, 1fr); }
}

/* Phone row: the play label gets the whole width beside the time, so team names are never squeezed by the count or the tag.
   Three stacked blocks in a fixed-height row: label (two lines at most) / tag + "N of 100" / "Home v Away" (two lines at most,
   so both names stay readable even when the label names no team, e.g. "Over 2.5 goals"). The play and name wrappers dissolve
   (display: contents) so their children sit directly on the toggle's grid. Phone rows are 104px, not the desktop 56px. */
@media (max-width: 719.98px) {
  .rows .row-toggle {
    grid-template-columns: 44px auto minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center;
    column-gap: 0; row-gap: 2px; padding-block: var(--space-1); min-height: 104px;
  }
  .rows .row { min-height: 104px; }
  .rows .row-toggle > .row-time { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .rows .row-play, .rows .row-play-name { display: contents; }
  .rows .row-play-label { grid-column: 2 / -1; grid-row: 1; }
  .rows .row-toggle > .tag { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; }
  .rows .row-toggle > .tag-muted { padding-left: 0; }
  .rows .row-play-p { grid-column: 3; grid-row: 2; align-self: center; margin-left: var(--space-2); font-size: var(--fs-meta); }
  .rows .row-match {
    grid-column: 2 / -1; grid-row: 3; font-size: var(--fs-meta-sm); line-height: 1.25; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal;
  }
}

.slate-lock { margin-bottom: var(--space-3); }