/* ═══════════════════════════════════════════════════════
   Carnival Bowler Tracker
   ANC themed: red and purple on near black, matching Mission Control and the
   Corner Pin Standings site. Compact by design - this sits above the streams
   and must not push them off the screen.
   ═══════════════════════════════════════════════════════ */

.tracker-panel {
  --trk-red: #dc2626;
  --trk-red-dark: #991b1b;
  --trk-purple: #6d28d9;
  --trk-purple-light: #7c3aed;
  --trk-surface: #111318;
  --trk-surface-2: #181c23;
  --trk-border: #252a35;
  --trk-text: #f1f5f9;
  --trk-muted: #b0bac8;
  --trk-faint: #6b7a90;

  margin: 0 0 22px;
  border: 1px solid var(--trk-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--trk-surface);
  animation: trackerRise 0.35s ease both;
}

@keyframes trackerRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Carnival masthead ──────────────────────────────────
   The carnival banner is a very wide, very short strip of sponsor and event
   logos. Cropping it to a fixed height sliced the tops and bottoms off those
   logos, so it is shown whole at its natural ratio and simply gets shorter as
   the page narrows. Nothing is cut. */
.tracker-masthead {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  background: #050505;
  border-bottom: 2px solid var(--trk-red);
}

/* Full width while the page is narrow, then held to a height that keeps the
   panel compact on a wide screen. The banner's own background is black, so the
   space either side of it reads as part of the artwork rather than a gap. */
.tracker-masthead-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84px;
  max-width: 100%;
}

@supports (object-fit: contain) {
  .tracker-masthead-img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

.tracker-inner {
  padding: 14px 16px 16px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(220, 38, 38, 0.09), transparent 60%),
    radial-gradient(90% 120% at 100% 0%, rgba(109, 40, 217, 0.11), transparent 60%);
}

/* ─── Heading ──────────────────────────────────────────
   The press release hero, brought onto the stream page as the catch. Anton set
   tight and heavy, the way the ANC26 artwork sets its own type, with the one
   word that says what the feature is for picked out in ANC red. */
.tracker-head {
  padding-bottom: 14px;
}

/* Everything the reader actually operates: the standfirst, the search, the
   pills and the email row. Kept as one block so it can sit beside the headline
   on a wide screen instead of below it. */
.tracker-form {
  min-width: 0;
}

.tracker-slug {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding-bottom: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--trk-faint);
}

.tracker-slug-live {
  color: var(--trk-red);
  font-weight: 700;
}

.tracker-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 6.4vw, 3.1rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--trk-text);
  margin: 0;
}

.tracker-title em {
  font-style: normal;
  color: var(--trk-red);
}

.tracker-lede {
  max-width: 62ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--trk-muted);
  margin: 12px 0 0;
}

/* ─── Steps ──────────────────────────────────────────── */
.tracker-step.hidden,
.tracker-results.hidden,
.tracker-feedback.hidden,
.tracker-spinner.hidden {
  display: none;
}

.tracker-hint {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--trk-faint);
  margin: 6px 0 0;
}

/* ─── Search field ───────────────────────────────────── */
.tracker-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.tracker-search-icon {
  position: absolute;
  left: 12px;
  font-size: 0.9rem;
  color: var(--trk-faint);
  pointer-events: none;
}

.tracker-search {
  width: 100%;
  padding: 11px 38px 11px 34px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--trk-text);
  background: #0b0d11;
  border: 1px solid var(--trk-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tracker-search::placeholder {
  color: #55627a;
}

.tracker-search:focus {
  border-color: var(--trk-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.tracker-spinner {
  position: absolute;
  right: 12px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(176, 186, 200, 0.22);
  border-top-color: var(--trk-red);
  border-radius: 50%;
  animation: trackerSpin 0.7s linear infinite;
}

@keyframes trackerSpin {
  to { transform: rotate(360deg); }
}

/* ─── Results list ───────────────────────────────────── */
/* The results list drops over what is below it rather than shoving the page
   down. A search that reflows the whole panel is the thing people notice. */
.tracker-search-block {
  position: relative;
}

.tracker-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 244px;
  overflow-y: auto;
  background: var(--trk-surface-2);
  border: 1px solid var(--trk-border);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}

.tracker-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease;
}

.tracker-result:hover,
.tracker-result.is-active {
  background: #232937;
}

.tracker-result[aria-selected="true"] {
  opacity: 0.4;
  cursor: default;
}

/* ─── Franchise logo ─────────────────────────────────── */
.tracker-logo {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px;
}

.tracker-logo-blank {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--trk-border);
}

.tracker-result-main {
  flex: 1;
  min-width: 0;
}

.tracker-result-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--trk-text);
  line-height: 1.25;
}

.tracker-result-name mark {
  background: transparent;
  color: #f87171;
  font-weight: 700;
}

.tracker-result-club {
  display: block;
  font-size: 0.72rem;
  color: var(--trk-faint);
  padding-top: 1px;
}

.tracker-result-events {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.tracker-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--trk-muted);
  background: rgba(109, 40, 217, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 16px;
  padding: 2px 7px;
  white-space: nowrap;
}

.tracker-empty {
  padding: 10px 8px;
  font-size: 0.82rem;
  color: var(--trk-faint);
}

/* ─── Pills ──────────────────────────────────────────── */
/* One row that scrolls sideways, never a stack that wraps. Wrapping pills grow
   the panel a row at a time no matter which column they sit in, and the panel
   growing is what pushes the streams off the screen. This holds any number of
   bowlers at exactly one row's height, reserved whether or not anyone has been
   chosen yet. */
.tracker-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.tracker-pills::-webkit-scrollbar {
  height: 4px;
}

.tracker-pills::-webkit-scrollbar-thumb {
  background: var(--trk-border);
  border-radius: 4px;
}

.tracker-pill {
  flex-shrink: 0;
  max-width: 100%;
}

.tracker-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--trk-text);
  background: var(--trk-surface-2);
  border: 1px solid var(--trk-border);
  border-left: 2px solid var(--trk-red);
  border-radius: 18px;
  animation: trackerPillIn 0.18s ease both;
}

@keyframes trackerPillIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.tracker-pill-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.tracker-pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--trk-faint);
  background: rgba(176, 186, 200, 0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.tracker-pill-remove:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* ─── Email row ──────────────────────────────────────── */
/* Always present, never revealed. Space that appears when a bowler is chosen
   is space the panel has to grow into, so it is reserved from the start and the
   button is simply inert until there is somebody to track. */
.tracker-step-email {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--trk-border);
}

/* Side by side at every width. Stacking the button under the field cost the
   panel another 47px on a phone for no gain. */
.tracker-email-row {
  display: flex;
  flex-direction: row;
  gap: 7px;
}

.tracker-email {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--trk-text);
  background: #0b0d11;
  border: 1px solid var(--trk-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tracker-email::placeholder {
  color: #55627a;
}

.tracker-email:focus {
  border-color: var(--trk-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.tracker-email {
  flex: 1;
  min-width: 0;
}

.tracker-submit {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--trk-red), var(--trk-purple));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 150ms ease, opacity 150ms ease;
}

.tracker-submit:hover:not(:disabled) {
  filter: brightness(1.12);
}

.tracker-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ─── Feedback ───────────────────────────────────────── */
.tracker-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid transparent;
}

.tracker-feedback.is-ok {
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.32);
}

.tracker-feedback.is-error {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.32);
}

/* ═══════════════════════════════════════════════════════
   Personal tracker page
   ═══════════════════════════════════════════════════════ */

.track-page {
  --trk-red: #dc2626;
  --trk-purple: #6d28d9;
  --trk-surface: #111318;
  --trk-surface-2: #181c23;
  --trk-border: #252a35;
  --trk-text: #f1f5f9;
  --trk-muted: #b0bac8;
  --trk-faint: #6b7a90;
}

.track-shell {
  max-width: 760px;
  margin: 0 auto;
}

.track-next {
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}

.track-next-inner,
.track-next-empty {
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(220, 38, 38, 0.11), transparent 60%),
    radial-gradient(90% 130% at 100% 0%, rgba(109, 40, 217, 0.13), transparent 60%),
    var(--trk-surface);
  padding: 12px 14px;
}

.track-next-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.track-next-empty {
  color: var(--trk-faint);
  font-size: 0.88rem;
}

.track-next-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f87171;
}

.track-next-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--trk-text);
  padding-top: 2px;
  line-height: 1.2;
}

.track-next-meta {
  font-size: 0.82rem;
  color: var(--trk-muted);
  padding-top: 3px;
  line-height: 1.5;
}

.track-countdown {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f87171;
  line-height: 1;
  white-space: nowrap;
}

.track-countdown.is-imminent {
  color: #fbbf24;
  animation: trackerPulse 1.4s ease-in-out infinite;
}

@keyframes trackerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.track-next-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 15px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--trk-red), var(--trk-purple));
  border-radius: 8px;
}

/* ─── Tracked people ─────────────────────────────────── */
.track-people {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 14px;
}

.track-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--trk-text);
  background: var(--trk-surface-2);
  border: 1px solid var(--trk-border);
  border-left: 2px solid var(--trk-red);
  border-radius: 18px;
}

.track-person-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.track-person-club {
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  color: var(--trk-faint);
}

/* ─── Bowler tabs ──────────────────────────────────────
   Ninety items across a fortnight is cut three ways rather than scrolled: a
   tab per bowler, a tab per event inside them, and one column per day. */
.track-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.track-tabs::-webkit-scrollbar,
.track-subtabs::-webkit-scrollbar,
.track-days::-webkit-scrollbar {
  height: 5px;
}

.track-tabs::-webkit-scrollbar-thumb,
.track-subtabs::-webkit-scrollbar-thumb,
.track-days::-webkit-scrollbar-thumb {
  background: var(--trk-border);
  border-radius: 4px;
}

.track-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 13px 7px 8px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--trk-muted);
  background: var(--trk-surface-2);
  border: 1px solid var(--trk-border);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.track-tab:hover {
  color: var(--trk-text);
}

.track-tab.is-on {
  color: #fff;
  background: linear-gradient(135deg, var(--trk-red), var(--trk-purple));
  border-color: transparent;
}

.track-tab-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

/* ─── Event tabs ─────────────────────────────────────── */
.track-subtabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--trk-border);
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.track-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 11px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--trk-faint);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}

.track-subtab:hover {
  color: var(--trk-muted);
}

.track-subtab.is-on {
  color: #f87171;
  border-bottom-color: var(--trk-red);
}

.track-subtab-count {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--trk-muted);
  background: rgba(176, 186, 200, 0.14);
  border-radius: 10px;
  padding: 1px 6px;
}

/* ─── Days as columns ──────────────────────────────────
   A fortnight reads as a short sideways scroll instead of a page that never
   ends. Columns snap so a swipe lands on a whole day. */
.track-days {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.track-daycol {
  flex: 0 0 auto;
  width: 235px;
  scroll-snap-align: start;
  background: var(--trk-surface-2);
  border: 1px solid var(--trk-border);
  border-radius: 10px;
  padding: 8px;
}

.track-daycol.is-next-day {
  border-color: rgba(220, 38, 38, 0.45);
}

.track-daycol.is-done {
  opacity: 0.45;
}

.track-daycol-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 6px;
  padding: 2px 3px 7px;
  border-bottom: 1px solid var(--trk-border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trk-text);
}

.track-daycol-count {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--trk-muted);
  background: rgba(176, 186, 200, 0.12);
  border-radius: 10px;
  padding: 2px 6px;
}

/* ─── Item ───────────────────────────────────────────── */
.track-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 3px;
  border-bottom: 1px solid rgba(37, 42, 53, 0.6);
}

.track-item:last-child {
  border-bottom: 0;
}

.track-item.is-next {
  background: rgba(220, 38, 38, 0.12);
  border-radius: 5px;
  padding-left: 5px;
}

.track-item.is-new {
  background: rgba(22, 163, 74, 0.1);
  border-radius: 5px;
}

.track-item.is-past {
  opacity: 0.45;
}

.track-lane {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--trk-red), var(--trk-purple));
  border-radius: 6px;
}

.track-item-main {
  flex: 1;
  min-width: 0;
}

.track-time {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--trk-text);
  line-height: 1.25;
}

.track-approx {
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}

.track-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--trk-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-flag-new {
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.22);
  border-radius: 10px;
  padding: 1px 5px;
}

.track-watch {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #f87171;
  text-decoration: none;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 5px;
}

.track-watch:hover {
  background: rgba(220, 38, 38, 0.12);
}

/* ─── Footer ─────────────────────────────────────────── */
.track-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 0 36px;
  border-top: 1px solid var(--trk-border);
}

.track-foot-link {
  font-size: 0.8rem;
  color: #f87171;
  text-decoration: none;
}

.track-foot-link:hover {
  text-decoration: underline;
}

.track-foot-quiet {
  color: var(--trk-faint);
}

/* ─── Message page ───────────────────────────────────── */
.tracker-message {
  max-width: 480px;
  margin: 16px auto 48px;
  padding: 26px 22px;
  text-align: center;
  background: #111318;
  border: 1px solid #252a35;
  border-radius: 12px;
}

.tracker-message-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 8px;
}

.tracker-message-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #b0bac8;
  margin: 0;
}

.tracker-message-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}

.tracker-message-btn {
  padding: 11px 22px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #dc2626, #6d28d9);
  border-radius: 8px;
}

.tracker-message-link {
  font-size: 0.82rem;
  color: #6b7a90;
  text-decoration: none;
}

.tracker-message-link:hover {
  color: #f87171;
}

/* ─── Lane highlight from an emailed deep link ───────── */
.stream-lane-card.is-lane-target {
  outline: 2px solid rgba(220, 38, 38, 0.85);
  outline-offset: 3px;
  border-radius: 10px;
  animation: trackerTarget 2.4s ease-out 3;
}

@keyframes trackerTarget {
  0%, 100% { outline-color: rgba(220, 38, 38, 0.85); }
  50% { outline-color: rgba(220, 38, 38, 0.15); }
}

/* ─── Embed mode ─────────────────────────────────────────
   The public page is iframed into cornerpins.com.au. The parent page is grown
   by embed-resize.js, but the iframe body carries overflow:hidden, so nothing
   in the panel may rely on overflowing it. The results list stays in normal
   flow and pushes the page down rather than floating over it, which is what
   lets it work inside the frame at all. */
.public-page.embed-mode .tracker-panel {
  margin: 0 0 22px;
}

.public-page.embed-mode .tracker-results {
  max-height: none;
  overflow-y: visible;
}

/* ─── Wider screens ──────────────────────────────────── */
@media (min-width: 620px) {
  .tracker-inner { padding: 16px 20px 18px; }
  .tracker-message-actions { flex-direction: row; justify-content: center; }
}

/* On a phone every line has to earn its place, and the confirmation wording is
   repeated on the screen the button leads to. */
@media (max-width: 619px) {
  .tracker-pills {
    min-height: 40px;
    margin-top: 6px;
  }

  .tracker-step-email .tracker-hint {
    display: none;
  }

  .tracker-lede {
    font-size: 0.8rem;
  }

  .tracker-submit {
    padding: 10px 14px;
    font-size: 0.82rem;
  }
}

/* Between a phone and two columns the headline runs at full size in a single
   column, which made this the tallest the panel ever gets. It sits a size down
   through that band. */
@media (min-width: 620px) and (max-width: 899px) {
  .tracker-title {
    font-size: clamp(1.9rem, 4.6vw, 2.4rem);
  }
}

/* ─── Two columns ────────────────────────────────────────
   Once there is room, the headline sits beside the search rather than above
   it. The panel reads the same but costs about a third less height, which
   matters because the streams are what people came for. */
@media (min-width: 900px) {
  .tracker-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
    gap: 30px;
    align-items: start;
  }

  /* The headline column is the short one, so the selected bowlers live in the
     space it already has rather than under the search. */
  .tracker-head {
    padding-bottom: 0;
  }

  .tracker-lede {
    margin-top: 0;
  }

  .tracker-step {
    padding-top: 14px;
  }
}