/* ============================================================
   TEAM PICKER: component styles
   ============================================================ */

/* ---------------- HOME ---------------- */
.home-wrap {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 26px 80px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  min-height: calc(100vh - 62px);
}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; white-space: nowrap; }
.hero h1 { font-size: 56px; line-height: 1.02; letter-spacing: -0.035em; }
.hero h1 .accent { color: var(--accent); }
.hero p.lede { font-size: 17px; color: var(--text-2); margin-top: 20px; max-width: 30ch; line-height: 1.55; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 26px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.hero-meta .stat .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.hero-meta .stat .l { font-size: 12px; color: var(--text-3); margin-top: 2px; font-weight: 500; }

/* preview pitch card */
.hero-visual { position: relative; }
.pitch {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); padding: 22px; position: relative; overflow: hidden;
}
.pitch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pitch-head .ttl { font-size: 13px; font-weight: 700; }
.pitch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pitch-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.pitch-col h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; display: flex; justify-content: space-between; }
.pitch-col h5 .r { color: var(--accent); }
.mini-player { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.mini-player + .mini-player { border-top: 1px solid var(--border); }
.mini-player .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pitch-vs {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--text-3); box-shadow: var(--shadow-sm); z-index: 2;
}
.float-tag {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  z-index: 3;
}
.float-tag .ic { color: var(--accent); }
.float-tag.t1 { top: -16px; right: 26px; }
.float-tag.t2 { bottom: -16px; left: 30px; }

.home-secondary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.home-secondary .btn { color: var(--text-2); }

@media (max-width: 640px) {
  /* HOME: mobile-first hero. The pitch preview card is decorative
     marketing that eats scroll on a phone; drop it and let the headline
     + CTA breathe. Primary CTA is full-width; secondary actions become a
     2-col grid so they don't wrap unpredictably. */
  .home-wrap { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px 30px; min-height: auto; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 12px; }
  .hero h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
  .hero p.lede { font-size: 15px; margin-top: 14px; max-width: none; }
  .hero-cta { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .home-secondary { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-secondary .btn { justify-content: flex-start; }
  .hero-visual { display: none; }
  .float-tag.t1, .float-tag.t2 { display: none; }

  /* Pool cards: acts must be tappable on touch (no hover), so force
     them visible. Grip is drag-only, dead weight on touch — hide it.
     Kill the rating-pill bar to reclaim horizontal space. */
  .pool { gap: 6px; min-height: 120px; }
  .pcard { padding: 8px 10px; gap: 8px; }
  .pcard .grip { display: none; }
  .pcard .avatar { width: 30px; height: 30px; font-size: 12px; }
  .pcard .acts { opacity: 1; gap: 0; }
  .pcard .rating-pill .bar { display: none; }
  .pcard .rec { gap: 6px; }
  .pcard .iconbtn { width: 26px; height: 26px; }

  /* Toolbar compaction. The Location seg has an inline min-width:220px
     to keep it roomy on desktop; on mobile it forces overflow. Neutralise
     the inline style with !important. */
  .toolbar { padding: 12px; gap: 8px; }
  .toolbar .seg { gap: 6px; }
  .toolbar .seg[style] { min-width: 0 !important; }
  .panel { padding: 12px; }

  /* Pick Team: pool full-width on top, both teams side-by-side under it.
     Slots are ~150px wide, so drop the per-slot rating pill and record
     text (team-head already shows the avg) and tighten paddings.
     minmax(0, 1fr) instead of 1fr so grid tracks shrink below their
     content's intrinsic width (default input is ~200px, otherwise
     forces Team B off-screen). */
  .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .team { padding: 10px; min-width: 0; overflow: hidden; }
  .team-head { gap: 4px; padding-bottom: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .team-head .team-dot { width: 7px; height: 7px; }
  .team-name-input { font-size: 12.5px; padding: 2px 4px; min-width: 0; width: 0; flex: 1 1 0; }
  .team-head .meta { font-size: 10.5px; gap: 6px; width: 100%; justify-content: space-between; }
  .team-head .team-avg { font-size: 10.5px; }
  .team-head .cnt { font-size: 10.5px; }
  .slots { gap: 5px; }
  .slot { padding: 6px 8px; gap: 6px; min-height: 40px; }
  .slot.filled .avatar-sm { width: 22px; height: 22px; font-size: 10px; }
  .slot .body { min-width: 0; }
  .slot .nm { font-size: 12px; line-height: 1.2; }
  .slot .record { display: none; }
  .slot .rating-pill { display: none; }
  .slot .iconbtn.x { width: 22px; height: 22px; opacity: 1; }
  .slot .iconbtn.x .ic-sm { width: 12px; height: 12px; }
  .slot.empty { font-size: 11px; padding: 8px; }
  .slot.empty .num { width: 16px; height: 16px; font-size: 9px; margin-right: 5px; }
}

/* ---------------- PICK TEAM ---------------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
}
.toolbar .seg { display: flex; align-items: center; gap: 9px; }
.toolbar .seg label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
[data-theme="dark"] .stepper { background: var(--surface-2); }
.stepper button { width: 34px; height: 36px; border: none; background: transparent; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t); }
.stepper button:hover { background: var(--surface-2); color: var(--accent); }
.stepper input { width: 42px; text-align: center; border: none; border-radius: 0; padding: 8px 0; background: transparent; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper input:focus { box-shadow: none; }
.toolbar .divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

.pick-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .pick-grid { grid-template-columns: 1fr; } }

.panel { padding: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head .ttl { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.panel-head .count { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--surface-2); padding: 2px 9px; border-radius: 999px; min-width: 24px; text-align: center; }

.search { position: relative; margin-bottom: 12px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { padding-left: 36px; background: var(--surface-2); border-color: transparent; }
.search input:focus { background: var(--surface); }

.pool { display: flex; flex-direction: column; gap: 8px; min-height: 200px; border-radius: var(--radius); transition: background var(--t), box-shadow var(--t); }
.pool.drag-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-weak); }
.pool-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 40px 16px; border: 1.5px dashed var(--border-2); border-radius: var(--radius); }

.pcard {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; cursor: grab; transition: border-color var(--t), box-shadow var(--t), transform var(--t), opacity var(--t);
}
[data-theme="dark"] .pcard { background: var(--surface-2); }
.pcard:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.pcard:active { cursor: grabbing; }
.pcard.dragging { opacity: 0.35; }
.pcard .grip { color: var(--text-3); display: flex; }
.pcard .body { flex: 1; min-width: 0; }
.pcard .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .rec { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; row-gap: 2px; }
.rating-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.rating-pill .bar { width: 28px; height: 4px; border-radius: 999px; background: var(--accent-weak); overflow: hidden; }
.rating-pill .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.record { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.record b { font-weight: 700; }
.record .w { color: var(--pos); }
.record .d { color: var(--warn); }
.record .l { color: var(--neg); }
/* The two rates that sit beside the record on a pool card. Same size and
   figures as .record so the line reads as one thing, but in the faint ink
   because the W/D/L is the fact and these are the summary of it. */
.rates { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.pcard .acts { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t); }
.pcard:hover .acts { opacity: 1; }
.iconbtn { width: 28px; height: 28px; border-radius: var(--radius-xs); border: none; background: transparent; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t), color var(--t); }
.iconbtn:hover { background: var(--surface-3); color: var(--text); }
.iconbtn.danger:hover { background: var(--neg-weak); color: var(--neg); }

/* teams */
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team { padding: 16px; display: flex; flex-direction: column; }
.team-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--border); }
.team-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.team-a .team-dot { background: var(--accent); }
.team-b .team-dot { background: var(--text-2); }
.team-name-input { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs); padding: 4px 7px; width: auto; flex: 1; min-width: 0; }
.team-name-input:hover { border-color: var(--border); }
.team-name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.team-head .meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.team-head .cnt { font-size: 12px; font-weight: 700; color: var(--text-3); }
.team-avg { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; display: none; }
.team-avg.show { display: inline; }

.slots { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.slot {
  min-height: 50px; border: 1.5px dashed var(--border-2); border-radius: var(--radius);
  display: flex; align-items: center; gap: 11px; padding: 8px 11px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.slot.empty { justify-content: center; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.slot.empty .num { width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: 7px; }
.slot.drag-over { border-color: var(--accent); border-style: solid; background: var(--accent-weak); box-shadow: 0 0 0 1px var(--accent); }
.slot.filled { border-style: solid; border-color: var(--border); background: var(--surface); cursor: grab; }
[data-theme="dark"] .slot.filled { background: var(--surface-2); }
.slot.filled:active { cursor: grabbing; }
.slot .body { flex: 1; min-width: 0; }
.slot .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .x { opacity: 0; }
.slot.filled:hover .x { opacity: 1; }

/* ---------------- MATCHES ---------------- */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.filters .search { margin: 0; flex: 0 1 300px; }
.filters select { width: auto; min-width: 150px; background: var(--surface); }
.filters .count { margin-left: auto; font-size: 13px; color: var(--text-3); font-weight: 500; }

.mcard { padding: 18px 20px; margin-bottom: 12px; }
.mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mdate { display: inline-flex; align-items: center; gap: 8px; }
.mdate .ic { color: var(--text-3); }
.mdate input { width: auto; background: transparent; border-color: transparent; font-weight: 600; font-size: 13px; padding: 6px 8px; color: var(--text-2); }
.mdate input:hover { border-color: var(--border); }
.mcard-top .right { display: flex; align-items: center; gap: 9px; }
.outcome-select { width: auto; padding: 6px 30px 6px 12px; font-size: 12px; font-weight: 700; }
.outcome-select.win-a { color: var(--accent); }
/* Why the result dropdown beside it is greyed out. On the card rather
   than in a title attribute, because a disabled <select> fires no tooltip
   in Chrome or Firefox and a phone has no hover to fire one with. */
.outcome-hint { margin: -6px 0 14px; font-size: 12px; color: var(--text-3); }
.outcome-hint[hidden] { display: none; }
.idbadge { font-family: var(--mono); font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 4px 8px; border-radius: var(--radius-xs); }
/* Same chip as the id, but a squad name is prose, not an identifier, so it
   keeps the body face. Only rendered when the side came from a squad. */
.squadbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 4px 8px; border-radius: var(--radius-xs); }

.match-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
@media (max-width: 620px) { .match-body { grid-template-columns: 1fr; } .vs-wrap { display: none; } }
.tblock { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
[data-theme="dark"] .tblock { background: var(--surface-2); }
.tblock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tblock-head .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.tblock.a .dot { background: var(--accent); }
.tblock.b .dot { background: var(--text-2); }
.tname-input { font-size: 13px; font-weight: 700; background: transparent; border: none; border-bottom: 1px solid transparent; padding: 2px 0; width: 100%; }
.tname-input:hover { border-bottom-color: var(--border-2); }
.tname-input:focus { border-bottom-color: var(--accent); box-shadow: none; }
.tblock .pr { font-size: 11px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tplayers { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.tplayers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tplayers li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); font-size: 12px; color: var(--text);
}
.tplayers li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  /* Neutral for both teams on purpose. A coloured dot means the player
     has replied, and nothing else, so the team a name sits under is
     carried by the column it is in rather than by the dot. */
  background: var(--text-3); opacity: 0.55; flex-shrink: 0;
}
.tplayers .no-players { font-style: italic; color: var(--text-3); font-size: 12px; }

/* How even the sides are. Colour carries the severity, the dot repeats it
   in shape, and the words say it outright, so the verdict survives
   greyscale and does not rely on telling amber from red. */
/* The next fixture, at the top of Home. Full width above the hero: a
   returning organiser opens the site to answer one question. */
.next-fixture { display: none; }
.next-fixture.show { display: block; grid-column: 1 / -1; }
.nf-card {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 16px 18px; cursor: pointer; text-align: left; font: inherit;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  transition: border-color var(--t), transform var(--t);
}
.nf-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.nf-card .nf-icon { flex-shrink: 0; color: var(--accent); display: flex; }
.nf-card .nf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nf-card .nf-lbl {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.nf-card .nf-pill {
  letter-spacing: 0; text-transform: none; font-size: 11px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent);
}
.nf-card .nf-name { font-size: 17px; font-weight: 700; }
.nf-card .nf-when { font-size: 13px; color: var(--text-2); }
.nf-card .nf-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--accent);
}
@media (max-width: 620px) {
  .nf-card { flex-wrap: wrap; }
  .nf-card .nf-go { width: 100%; justify-content: flex-end; }
}

/* What the match is, as opposed to who is in it. Four boxes on one row
   on a desktop, two on a tablet, stacked on a phone. */
.details {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; padding: 12px 16px; margin-bottom: 18px;
}
.details .dfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.details .dlbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.details input { width: 100%; padding: 7px 10px; font-size: 13px; }
@media (max-width: 1080px) {
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details .wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .details { grid-template-columns: minmax(0, 1fr); }
  .details .wide { grid-column: auto; }
}

/* The squad picker above the pool. Mirrors the app's chip row: one for
   everyone, then one per squad, the active one filled. */
.squad-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.squad-row:empty { display: none; }
.squad-chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.squad-chip:hover { border-color: var(--accent); }
.squad-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.squad-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fixture-chip { display: none; }
.fixture-chip.show { display: block; margin-bottom: 10px; }
.fixture-chip .fx-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; cursor: pointer; text-align: left;
  background: var(--surface); color: var(--text);
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  font: inherit;
}
.fixture-chip .fx-btn:hover { border-style: solid; border-color: var(--accent); }
.fixture-chip .fx-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fixture-chip .fx-name { font-size: 13px; font-weight: 700; }
.fixture-chip .fx-when { font-size: 11.5px; color: var(--text-3); }
.fixture-chip .fx-go { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--accent); }

.balance { display: none; }
.balance.show {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
}
.balance .bal-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.balance.ok { background: var(--pos-weak, rgba(63,125,82,0.10)); color: var(--pos, #3F7D52); border-color: transparent; }
.balance.ok .bal-dot { background: var(--pos, #3F7D52); }
.balance.warn { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.balance.warn .bal-dot { background: var(--warn); }
.balance.bad { background: var(--neg-weak, rgba(179,74,63,0.10)); color: var(--neg, #B34A3F); border-color: transparent; }
.balance.bad .bal-dot { background: var(--neg, #B34A3F); }
.tplayers li .tp-x {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
  color: var(--text-3); opacity: 0; transition: opacity var(--t), color var(--t);
}
/* Hidden until the row is hovered or the button is focused, so the list
   still reads as a line-up rather than a row of delete buttons, but stays
   reachable from the keyboard. */
.tplayers li:hover .tp-x, .tplayers li .tp-x:focus-visible { opacity: 1; }
.tplayers li .tp-x:hover { color: var(--neg, #B34A3F); }
.tplayers .tp-addwrap { display: flex; gap: 4px; margin-top: 6px; }
.tplayers .tp-addin {
  flex: 1; min-width: 0; font: inherit; font-size: 11.5px; padding: 4px 8px;
  color: var(--text); background: var(--surface);
  border: 1px dashed var(--border-2); border-radius: var(--radius-xs);
}
.tplayers .tp-addin:focus {
  outline: none; border-style: solid; border-color: var(--accent);
}
.tplayers .tp-addbtn {
  flex-shrink: 0; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; cursor: pointer; color: var(--accent);
  background: none; border: 1px dashed var(--border-2);
  border-radius: var(--radius-xs);
}
.tplayers .tp-addbtn:hover { background: var(--accent-weak); border-style: solid; }
.vs-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.score-pair { display: flex; align-items: center; gap: 8px; }
.score-in { width: 52px; text-align: center; font-size: 20px; font-weight: 800; padding: 6px 4px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.score-in::-webkit-outer-spin-button, .score-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.score-in.a { color: var(--accent); }
.vs-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-3); }
.mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.mmeta { display: flex; gap: 16px; flex-wrap: wrap; }
.mmeta .item { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.mmeta .item b { color: var(--text-2); font-weight: 600; }
.save-feedback { font-size: 12.5px; font-weight: 600; color: var(--pos); }

.empty-state { text-align: center; padding: 72px 20px; }
.empty-state .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.empty-state .ico svg { width: 26px; height: 26px; }
.empty-state h3 { font-size: 17px; margin-bottom: 6px; }
.empty-state p { color: var(--text-2); font-size: 14px; }

/* ---------------- AUTH SCREENS ---------------- */
.auth-wrap { min-height: calc(100vh - 62px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 416px; padding: 36px 34px; text-align: center; }
.auth-card .mark-lg { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.auth-card .mark-lg svg { width: 26px; height: 26px; }
.auth-card.ok .mark-lg { background: var(--pos); }
.auth-card.bad .mark-lg { background: var(--neg); }
.auth-card h2 { font-size: 23px; margin-bottom: 8px; }
.auth-card p.sub { color: var(--text-2); font-size: 14px; margin-bottom: 26px; line-height: 1.55; }
.auth-form { text-align: left; display: flex; flex-direction: column; gap: 16px; }
.auth-foot { margin-top: 22px; font-size: 13px; color: var(--text-2); }
.auth-foot a, .link { color: var(--accent); font-weight: 600; cursor: pointer; }
.auth-foot a:hover, .link:hover { text-decoration: underline; }

/* ---------------- MODALS ---------------- */
.scrim { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center;
  background: color-mix(in srgb, var(--bg-2) 40%, rgba(0,0,0,0.5)); padding: 6vh 20px; overflow-y: auto; }
.scrim.open { display: flex; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.dialog { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); padding: 26px; }
.dialog.wide { max-width: 480px; }
@keyframes dialogIn { from { transform: translateY(12px) scale(.98); } to { transform: none; } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.dialog-head h3 { font-size: 19px; white-space: nowrap; }
.dialog-body { display: flex; flex-direction: column; gap: 14px; }
.dialog-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.dialog-foot.split { justify-content: space-between; align-items: center; }

/* tutorial */
.tut-item { display: flex; gap: 13px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.tut-item + .tut-item { margin-top: 10px; }
.tut-item .ti-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tut-item h4 { font-size: 14px; margin-bottom: 3px; }
.tut-item p { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ---------------- TOASTS ---------------- */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 280px; max-width: 380px; display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 13px 14px; position: relative; overflow: hidden; }
.toast.removing { animation: toastOut .26s var(--ease) forwards; }
.toast .ti { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.toast .ti svg { width: 14px; height: 14px; stroke-width: 2.4; }
.toast.success .ti { background: var(--pos-weak); color: var(--pos); }
.toast.error .ti { background: var(--neg-weak); color: var(--neg); }
.toast.warning .ti { background: var(--warn-weak); color: var(--warn); }
.toast.info .ti { background: var(--accent-weak); color: var(--accent); }
.toast .tb { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.45; }
.toast .tx { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 2px; display: flex; }
.toast .tx:hover { color: var(--text); }
.toast .tp { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); animation: toastProg var(--td, 4s) linear forwards; }
.toast.success .tp { background: var(--pos); } .toast.error .tp { background: var(--neg); } .toast.warning .tp { background: var(--warn); }
@keyframes toastIn { from { transform: translateX(24px) scale(.97); } to { transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px) scale(.94); } }
@keyframes toastProg { from { width: 100%; } to { width: 0; } }

/* ---------------- PROTOTYPE MAP ---------------- */
.protomap { position: fixed; bottom: 18px; left: 18px; z-index: 500; }
.protomap-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-pop); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2); transition: color var(--t), border-color var(--t); }
.protomap-btn:hover { color: var(--text); border-color: var(--border-2); }
.protomap-btn .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
/* Testing tool, gated behind ?debug=1. Deliberately styled so nobody can
   mistake it for product chrome: a warning-toned dashed outline and an
   explicit tag, rather than the quiet pill it used to be. */
.protomap-btn { border-style: dashed; }
.protomap-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  padding: 3px 5px; border-radius: 3px; background: var(--warn-weak); color: var(--warn); }
/* Wash background with matching text, not white on amber: --warn is a
   light amber in dark theme, where white on it is about 1.9:1. */
.protomap-foot { font-size: 11px; line-height: 1.45; color: var(--text-3);
  padding: 9px 10px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.protomap-foot code { font-size: 10.5px; padding: 1px 4px; border-radius: 3px; background: var(--surface-2); }
.protomap-menu { position: absolute; bottom: calc(100% + 10px); left: 0; width: 240px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 8px; display: none; }
.protomap-menu.open { display: block; }
.protomap-menu .grp { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding: 9px 10px 5px; }
.protomap-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: var(--font); transition: background var(--t), color var(--t); }
.protomap-menu button:hover { background: var(--surface-2); color: var(--text); }
.protomap-menu button .ic { color: var(--text-3); }
.protomap-menu button:hover .ic { color: var(--accent); }

@media (max-width: 940px) {
  .home-wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .hero h1 { font-size: 44px; }
  .hero-visual { order: -1; }
}

/* ---------------- LEGAL: footer, cookie notice, consent checkbox ---------------- */
.site-foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  text-align: center;
  font-size: 11.5px; color: var(--text-3);
  /* A bar, not floating text. Without a background the page scrolled
     under it and the words landed on top of whatever heading happened to
     be there. Same treatment as .tabbar so the two stack as one block. */
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--border);
}
.site-foot a, .site-foot span {
  margin: 0 4px; color: var(--text-2);
  text-decoration: none; transition: color var(--t);
}
/* Links, so they should look like links. On the old transparent overlay
   these were deliberately quiet; on a bar of their own they can carry
   normal link weight without shouting. */
.site-foot a { font-weight: 600; }
.site-foot a:hover, .site-foot a:focus-visible { color: var(--accent); }

.cookie-notice {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: 60; max-width: 560px; width: calc(100% - 24px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 14px 16px; font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice a:hover { color: var(--accent-press); }
.cookie-notice strong { color: var(--text); font-weight: 700; }
.cookie-notice-inner {
  display: flex; align-items: flex-start; gap: 14px;
}
.cookie-notice-inner > span { flex: 1; }
.cookie-notice-inner .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-notice-inner { flex-direction: column; align-items: stretch; }
  /* Both of these sit above the 56px tab bar rather than on top of it.
     These used to live in tp-styles.css, which loads first, so the base
     rules above silently won and the footer landed on the tab bar. A
     media query carries no extra specificity, so the override has to be
     in the same file, after the rule it overrides. */
  .site-foot {
    bottom: calc(56px + env(safe-area-inset-bottom));
    padding: 7px 12px;
  }
  /* Clear of the tab bar and the footer bar now stacked on top of it. */
  .cookie-notice { bottom: calc(56px + 32px + 12px + env(safe-area-inset-bottom)); }
}

.consent-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  margin-top: 4px;
}
.consent-check input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
  -webkit-appearance: auto; appearance: auto;
  padding: 0; border: none; background: transparent; border-radius: 0;
}
.consent-check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-check a:hover { color: var(--accent-press); }

/* ---------- Share menu (pick-team toolbar dropdown) ---------- */
.share-wrap { position: relative; display: inline-block; }
.share-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 220px; padding: 6px; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.share-menu.open { display: block; }
.share-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; border-radius: 6px;
}
.share-menu button:hover, .share-menu button:focus-visible {
  background: var(--surface-2); outline: none;
}
.share-menu .share-menu-group {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3);
}
.share-menu .share-menu-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }

/* ---------- Chip-style recipient input (email share modal) ---------- */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px; min-height: 40px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.chip-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chip-input-chips { display: contents; }
.chip-input input {
  flex: 1; min-width: 120px; border: none; outline: none; background: transparent;
  padding: 4px 6px; font: inherit; color: var(--text);
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; background: var(--accent-weak); color: var(--accent);
  border-radius: 999px; font-size: 13px; font-weight: 500;
}
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 999px;
  background: transparent; color: var(--accent); cursor: pointer;
}
.chip-x:hover { background: var(--accent-ring); }

/* ---------- Small hint text under form fields ---------- */
.field-hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Match card: sharing, availability, money
   Added when the website caught up with the mobile feature set.
   ------------------------------------------------------------------ */
.mcard-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Collapsed to nothing until sharing is on, so an unshared match keeps
   the card exactly as tall as it was before. */
.mcard-share { display: none; padding: 0 16px 14px; }
.mcard-share.open { display: block; }
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-url { flex: 1; min-width: 220px; padding: 7px 10px; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
.share-hint { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }

.avail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avail-list li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.avail-pill { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
/* Colour carries the answer, but the label repeats it in words so the
   list still reads correctly in greyscale or with colour blindness. */
.avail-in    { background: var(--pos-weak, rgba(63,125,82,0.12));  color: var(--pos, #3F7D52); }
.avail-out   { background: var(--neg-weak, rgba(179,74,63,0.12));  color: var(--neg, #B34A3F); }
.avail-maybe { background: var(--warn-weak); color: var(--warn); }
.avail-note { font-size: 12px; color: var(--text-3); }
/* The pill is a button now: the organiser taps it to correct an answer.
   Reset the browser's button chrome so it still reads as a pill. */
button.avail-pill { border: 0; cursor: pointer; font-family: inherit; }
button.avail-pill:hover { filter: brightness(0.95); }
button.avail-pill:disabled { opacity: 0.5; cursor: default; }
.avail-guest { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); }
/* Pushed to the end of the row, so every remove control lines up. */
.avail-del { margin-left: auto; }

/* Sheet against replies. Sits above the list because it is the answer the
   organiser came for; the individual replies are the detail underneath. */
.rec { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 14px; background: var(--surface-2); }
.rec-head { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.rec-head b { color: var(--text); font-weight: 700; }
.rec-short { margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--neg-weak, rgba(179,74,63,0.12)); color: var(--neg, #B34A3F); }
.rec-ok { margin-left: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--pos-weak, rgba(63,125,82,0.12)); color: var(--pos, #3F7D52); }
.rec-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-top: 5px; }
.rec-pill { flex-shrink: 0; min-width: 20px; text-align: center; font-size: 11.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; }
.rec-pill.bad { background: var(--neg-weak, rgba(179,74,63,0.12)); color: var(--neg, #B34A3F); }
.rec-pill.warn { background: var(--warn-weak); color: var(--warn); }
.rec-pill.good { background: var(--pos-weak, rgba(63,125,82,0.12)); color: var(--pos, #3F7D52); }
.rec-lbl { flex-shrink: 0; color: var(--text-3); }

/* The line-up, coloured by who has replied. A dot carries the same
   information as the colour, so the answer survives greyscale and the
   commonest colour blindness; the li also has a title. */
/* The dot stays a flex item. An earlier version absolutely positioned it
   at the li's left edge, which put answered rows' dots outside the 10px
   padding while unanswered rows kept theirs inside it, so the column of
   dots zig-zagged. Recolour it in place instead and drop the dimming the
   base rule applies, so every row lines up whatever the answer. */
.tplayers li.ans-in::before,
.tplayers li.ans-maybe::before,
.tplayers li.ans-out::before { opacity: 1; }
.tplayers li.ans-in { color: var(--pos, #3F7D52); }
.tplayers li.ans-in::before { background: var(--pos, #3F7D52); }
.tplayers li.ans-maybe { color: var(--warn); }
.tplayers li.ans-maybe::before { background: var(--warn); }
.tplayers li.ans-out { color: var(--neg, #B34A3F); text-decoration: line-through; }
.tplayers li.ans-out::before { background: var(--neg, #B34A3F); }
.rec-names { color: var(--text-2); }
.rec-add {
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 2px 6px; margin-left: 2px; cursor: pointer;
  border: 1px dashed var(--border-2); border-radius: 999px;
  background: none; color: var(--accent);
}
.rec-add:hover { background: var(--accent-weak); border-style: solid; }
.rec-add:disabled { opacity: 0.5; cursor: default; }

.grp-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-top: 4px; }
.pay-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.pay-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14px; cursor: pointer; }
.pay-row:hover { background: var(--surface-2); border-radius: 6px; }
.pay-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------------------------------------------------------------------
   My data: hub, list rows and stats
   ------------------------------------------------------------------ */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.page-head h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.page-head .sub { margin: 0; max-width: 60ch; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }

.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.data-card { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); width: 100%; }
.data-card:hover { border-color: var(--accent); }
.data-ico { color: var(--accent); flex-shrink: 0; }
.data-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.data-txt b { font-size: 15px; }
.data-txt span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }

.row-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px; flex-wrap: wrap; }
.row-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.row-main .sub { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* A paused fixture is still listed, just clearly not in play. */
.row-muted { opacity: 0.62; }

.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 130px; }

.stat-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; }
.stat-tile .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.stat-tile b { font-size: 20px; letter-spacing: -0.02em; }

.stat-card { padding: 16px; margin-bottom: 12px; }
.stat-card h3 { margin: 0 0 10px; font-size: 15px; }
/* Wide tables scroll inside their own box so the page never does. */
.table-scroll { overflow-x: auto; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 420px; }
.stat-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); padding: 0 8px 7px; border-bottom: 1px solid var(--border); }
.stat-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.stat-table .tnum { text-align: right; font-variant-numeric: tabular-nums; }

.form-cell { display: flex; gap: 3px; padding-top: 10px; }
/* The letter carries the result as well as the colour, so the run still
   reads without colour vision. */
.form-dot { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.form-win  { background: var(--pos-weak, rgba(63,125,82,0.14));  color: var(--pos, #3F7D52); }
.form-draw { background: var(--warn-weak); color: var(--warn); }
.form-loss { background: var(--neg-weak, rgba(179,74,63,0.14));  color: var(--neg, #B34A3F); }

.pair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pair-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pair-list li b { font-variant-numeric: tabular-nums; }

/* Tutorial group headings. The walkthrough grew from three steps to nine
   when it caught up with the product, which is long enough to need
   signposting and a scroll. */
.tut-grp { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 0 6px; }
.tut-grp:first-child { padding-top: 0; }
.dialog-tall .dialog-body { max-height: min(62vh, 560px); overflow-y: auto; }

/* ---------------------------------------------------------------------
   Plan ladder
   ------------------------------------------------------------------ */
.tier-list { display: flex; flex-direction: column; gap: 10px; }
.tier { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
/* The one you can actually buy carries the accent. Everything else stays
   quiet so the ladder reads at a glance. */
.tier.tier-buy { border-color: var(--accent); }
/* Not greyed into illegibility: a coming-soon tier still has to be
   readable, since its whole job is to tell you where this is going. */
.tier.tier-soon { opacity: 0.78; }

.tier-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tier-head b { font-size: 15px; }
.tier-price { margin-left: auto; font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-price small { font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }

.soon-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px; background: var(--warn-weak); color: var(--warn); }

.tier-blurb { margin: 6px 0 8px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.tier-features { margin: 0 0 12px; padding-left: 1.05rem; font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
.tier-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-save { font-size: 10px; font-weight: 700; opacity: 0.85; }
.tier-current { font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* No disabled styling existed, because nothing was disabled before. A
   disabled control has to look inert and refuse the pointer, or people
   click it repeatedly and conclude the page is broken. */
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* On the pricing page the ladder gets room to breathe and sits side by
   side on a wide screen, rather than the single column a dialog forces. */
.tier-list-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tier-list-page .tier { display: flex; flex-direction: column; }
.tier-list-page .tier-actions { margin-top: auto; padding-top: 8px; }