/*
 * meets.css
 * spikefan.com/meets (meets.html): the meet list. Built on the shared look (/css/tokens.css, components.css: .sf-seg,
 * .sf-status, .sf-empty, .sf-skel, .sf-modal, .sf-sheetrow); only the page's own parts are here.
 * Every colour and size is a token. Phone first; the title row is one line from 820; PC (1100) splits the Live card and goes 2-up.
 */

[hidden] { display: none !important; }

.wordmark { flex: none; margin: 0 0 0 var(--sf-2); font: var(--sf-w-bold) 26px/1 var(--sf-font-num); letter-spacing: 0.01em; color: var(--sf-ink); }
.wordmark span { color: var(--sf-accent); }
.sf-icon { inline-size: 24px; block-size: 24px; flex: none; stroke: currentColor; }

.mt {
  display: grid; gap: var(--sf-4); align-content: start; min-width: 0;
  padding: var(--sf-4) max(var(--sf-4), calc((100% - 720px) / 2)) calc(var(--sf-bar-h) + env(safe-area-inset-bottom, 0px) + var(--sf-6));
}
.mt > * { min-width: 0; }
.mt-group { display: grid; gap: var(--sf-2); }

/* Title, then the team chip (All teams adds the Sport row and the school search), then the summary line with the small Season chip */
.mt-title__text { margin: 0; font: var(--sf-w-bold) 26px/1.1 var(--sf-font-ui); }
.mt-who { display: grid; justify-items: start; gap: var(--sf-3); }
.mt-who > .sf-seg, .mt-who > .mt-school { justify-self: stretch; }
.mt-seg button { min-block-size: var(--sf-tap); cursor: pointer; }
.mt-seg button:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.mt-summary { display: grid; gap: var(--sf-1); }
.mt-summary__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); min-width: 0; }
.mt-summary__text { min-width: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); overflow-wrap: anywhere; }
.mt-summary__hidden { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.mt-season {
  position: relative; display: inline-flex; align-items: center; gap: var(--sf-1); block-size: var(--sf-10); padding: 0 var(--sf-3);
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-pill); background: var(--sf-paper); color: var(--sf-ink); cursor: pointer;
  font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui);
}
.mt-season::after { content: ""; position: absolute; inset: calc(var(--sf-1) * -1) 0; } /* 48px hit area */
.mt-season .sf-icon { inline-size: 16px; block-size: 16px; }
.mt-season:hover:not(:disabled) { background: var(--sf-sunk); }
.mt-season:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 1px; }
.mt-season:disabled { color: var(--sf-ink-3); cursor: not-allowed; }

.mt-label { margin: 0; font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink-3); }
.mt-label--live { display: flex; align-items: center; gap: var(--sf-2); color: var(--sf-stop-ink); }
.mt-dot { inline-size: var(--sf-dot-sm); block-size: var(--sf-dot-sm); border-radius: 50%; background: var(--sf-stop); }

.mt-name { display: block; font: var(--sf-w-bold) var(--sf-text-lg)/1.25 var(--sf-font-ui); color: var(--sf-ink); overflow-wrap: anywhere; }
.mt-where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.mt-team { display: block; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.mt-team--followed { color: var(--sf-accent-ink); }

/* Live now */
.mt-live { display: grid; gap: var(--sf-2); }
.mt-livecard { border: var(--sf-bw-live) solid var(--sf-stop); border-radius: var(--sf-r-md); background: var(--sf-paper); overflow: hidden; }
.mt-livecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4); }
.mt-livecard__text { min-width: 0; }
.mt-liverow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: var(--sf-3);
  min-block-size: calc(var(--sf-tap) + var(--sf-1)); padding: var(--sf-2) var(--sf-4); border-top: 1px solid var(--sf-line-soft);
  color: var(--sf-ink); text-decoration: none;
}
.mt-liverow:hover { background: var(--sf-page); }
.mt-liverow:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.mt-liverow__text { display: grid; min-width: 0; }
.mt-liverow__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--sf-w-semi) var(--sf-text-md)/1.25 var(--sf-font-ui); }
.mt-liverow__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-3); }
.mt-liverow__clock { font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-stop-ink); }
.mt-liverow .sf-icon { color: var(--sf-ink-3); }

/* Result rows: one card per month, 64px rows. Phone: thumb, name + "date · course · town", PR count. */
.mt-prs { display: grid; justify-items: center; min-inline-size: var(--sf-10); }
.mt-prs__n { font: var(--sf-w-bold) 20px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-go-ink); }
.mt-prs__word { font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-ink-3); }
.mt-prs--pending { max-inline-size: var(--sf-16); text-align: end; justify-items: end; }
/* Later rows (upcoming meets after Next up): the name is the row's link, stretched over the row; the 44 Directions icon button sits above it. */

/* Next up: one card per meet; the head is the card's link, stretched over the card (events included); the Directions link row sits above it. */
.mt-next {
  position: relative; display: grid; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4);
  border: 1px solid var(--sf-line); border-radius: var(--sf-r-md); background: var(--sf-paper); box-shadow: var(--sf-shadow-1); color: var(--sf-ink);
}
.mt-next:hover { background: var(--sf-page); }
.mt-next:active { background: var(--sf-sunk); }
.mt-next__open { display: grid; grid-template-columns: var(--sf-12) minmax(0, 1fr) var(--sf-6); gap: var(--sf-3); align-items: start; color: var(--sf-ink); text-decoration: none; }
.mt-next__open::after { content: ""; position: absolute; inset: 0; border-radius: var(--sf-r-md); }
.mt-next__open:focus-visible { outline: none; }
.mt-next__open:focus-visible::after { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.mt-next__open > .sf-icon { align-self: center; inline-size: var(--sf-6); block-size: var(--sf-6); color: var(--sf-ink-3); }
.mt-next__events { padding-block-start: var(--sf-2); border-top: 1px solid var(--sf-line-soft); }
.mt-next__dir {
  position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap-min);
  color: var(--sf-link); font: var(--sf-w-semi) var(--sf-text-md)/1 var(--sf-font-ui); text-decoration: none;
}
.mt-next__dir .sf-icon { inline-size: 20px; block-size: 20px; }
.mt-next__dir:hover { text-decoration: underline; }
.mt-next__dir:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; border-radius: var(--sf-r-sm); }
.mt-next__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-1); min-width: 0; }
.mt-next__note { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-accent-ink); }
.mt-next__when { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }
.mt-dateblock { display: grid; justify-items: center; align-content: center; inline-size: var(--sf-12); block-size: var(--sf-12); border-radius: var(--sf-r-sm); background: var(--sf-ink); color: var(--sf-paper); }
.mt-dateblock__dow, .mt-dateblock__mon { font: var(--sf-w-bold) 10px/1 var(--sf-font-ui); letter-spacing: 0.06em; }
.mt-dateblock__day { font: var(--sf-w-bold) 20px/1 var(--sf-font-num); }
.mt-chips { display: flex; flex-wrap: wrap; gap: var(--sf-1); }
.mt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-3); }

.mt-empty__sub { margin: 0; color: var(--sf-ink-2); max-inline-size: 36ch; }
.mt-skel { display: grid; gap: var(--sf-3); }
.mt-skel__card { block-size: calc(var(--sf-16) + var(--sf-12)); border-radius: var(--sf-r-md); }

/* Tablet: one column, max 720 (the .mt padding). From 820 the Sport row is no wider than its words. */
@media (min-width: 820px) {
  .mt-who > .sf-seg { justify-self: start; }
  .mt-seg button { min-block-size: var(--sf-10); padding-inline: var(--sf-4); }
}

/* PC: content max 1080; the Live card splits meet left, races right; cards 2-up with a 64 thumb */
@media (min-width: 1100px) {
  .mt { padding-block-start: var(--sf-8); padding-inline: max(var(--sf-8), calc((100% - 1080px) / 2)); }
  .mt-livecard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .mt-livecard__head { align-items: start; }
  .mt-livecard__rows .mt-liverow:first-child { border-top: 0; }
  .mt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}