/* Ladder (challenge stege) + onboarding. Reuses tokens.css / layout.css / table.css.
   No new colour tokens: me = --accent-soft, your-action/expiring/stale = warn,
   won/lost = up/down. State is always carried by a word + icon, never a bare edge. */

/* Nav: the current page's button reads active (same look as aria-pressed). */
.btn[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* Identity-aware masthead CTA, with an action count when something needs you. */
.masthead-cta { display: inline-flex; }
.cta-count {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 5px;
  margin-left: 2px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink);
  border: 1px solid var(--warn-line); font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.btn-primary .cta-count { background: var(--accent-ink); color: var(--accent); border-color: transparent; }

/* ---- Status badges: whole-element tint + icon + text (never a bare edge). ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.badge .icon { width: 14px; height: 14px; }
.badge-turn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.badge-won { background: var(--up-soft); color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.badge-lost { background: var(--down-soft); color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.badge-muted { background: transparent; color: var(--ink-3); border-color: var(--line); }

/* Compact button for in-row actions. */
.btn-sm { min-height: 28px; padding: 0 10px; font-size: 0.8125rem; }

/* ---- Rank table extras (Form / Status / Action columns) ---- */
.c-record { color: var(--ink-2); }
.c-record .sep { color: var(--line-strong); padding: 0 2px; }
.c-action { white-space: nowrap; }
.reason { color: var(--ink-3); font-size: 0.8125rem; }
tr.is-floor td { color: var(--ink-3); }
tr.is-floor .c-name .row-link { color: var(--ink-2); }

/* Form: last ~5 matches, newest first. Letter carries meaning, colour reinforces. */
.form-strip { display: inline-flex; gap: 3px; align-items: center; }
.form-pill {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  font: 700 0.75rem/1 var(--font-display);
}
.form-pill.w { background: var(--up-soft); color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.form-pill.l { background: var(--down-soft); color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.form-pill.t { background: var(--surface-2); color: var(--ink-3); }
.form-empty { color: var(--ink-3); font-size: 0.8125rem; }

/* ---- "My challenges": grouped match cards (same pattern as the bot dashboard) ---- */
#mychallenges { margin-top: var(--s6); }
.section { margin-top: var(--s5); }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.section-head h2 { font-size: 1.15rem; }
.section-head .section-icon { color: var(--ink-3); }
.section-count { font-size: 0.8125rem; color: var(--ink-3); }

.matches { display: grid; gap: var(--s3); }
.match {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
}
.match-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 60%; }
.match-opp { font: 650 1.05rem/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-meta { font-size: 0.8125rem; color: var(--ink-3); }
.match-right { display: flex; align-items: center; gap: var(--s2) var(--s4); margin-left: auto; flex-wrap: wrap; }
.match-actions { display: inline-flex; gap: var(--s2); }
.match-score { font: 700 1.35rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-score .sep { color: var(--ink-3); margin: 0 2px; font-weight: 600; }
.match-score.is-win { color: var(--up); }
.match-score.is-lose { color: var(--down); }

.empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); text-align: center; color: var(--ink-2); }
.empty h3 { margin-bottom: var(--s1); color: var(--ink); }

@media (max-width: 560px) {
  .match-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .match-main { flex-basis: 100%; }
}

/* ---- Side cards: you / my challenges summary / how ---- */
.chal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.chal-item { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; font-size: 0.875rem; }
.chal-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chal-empty { font-size: 0.875rem; color: var(--ink-2); }
.how-steps { list-style: none; counter-reset: step; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.how-steps li { position: relative; padding-left: 2rem; font-size: 0.875rem; color: var(--ink-2); counter-increment: step; }
.how-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font: 700 0.75rem/1 var(--font-display);
}

/* ---- Board modal (reused from the bot dashboard, class-namespaced as .wfb-* so it
   never collides with the leaderboard's .board / .board-head in table.css) ---- */
.wfb-dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow); padding: var(--s5);
  width: min(100% - 2 * var(--s4), 34rem); max-height: calc(100dvh - 2 * var(--s4)); overflow: auto;
}
.wfb-dialog::backdrop { background: rgb(13 20 27 / 0.55); }
.wfb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.wfb-title { font-size: 1.15rem; }
.wfb-sub { font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.wfb-close { flex: none; }

.wfb-grid {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px;
  width: 100%; aspect-ratio: 1; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.bc {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-3); line-height: 1;
}
.bc-m { font-size: 2.4cqi; font-weight: 700; letter-spacing: 0.02em; }
.bc-tw { background: color-mix(in srgb, var(--down) 24%, var(--surface)); color: var(--down); }
.bc-dw { background: color-mix(in srgb, var(--down) 12%, var(--surface)); color: var(--down); }
.bc-tl { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); color: var(--accent); }
.bc-dl { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.bc-center { background: var(--accent-soft); color: var(--accent); }
.bc-center .bc-m { font-size: 4cqi; }
.bc-tile { background: var(--tile); color: var(--tile-ink); }
.bc-l { font: 700 4.6cqi/1 var(--font-display); transform: translateY(-0.6cqi); }
.bc-s { position: absolute; right: 0.7cqi; bottom: 0.4cqi; font-size: 1.8cqi; font-weight: 600; line-height: 1; }
.bc-blank { background: color-mix(in srgb, var(--accent) 32%, var(--tile)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bc-last { box-shadow: inset 0 0 0 2px var(--warn-line); }
.bc-blank.bc-last { box-shadow: inset 0 0 0 2px var(--warn-line), inset 0 0 0 4px var(--accent); }
/* Botens egna brickor: blå bricka (helrute-ton). Ägarfärgat senaste drag. */
.bc-bot { background: color-mix(in srgb, var(--accent) 30%, var(--tile)); }
.bc-last-bot { box-shadow: inset 0 0 0 2px var(--accent); }
.bc-last-them { box-shadow: inset 0 0 0 2px var(--down); }

.wfb-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s4); font-size: 0.75rem; color: var(--ink-3); }
.wfb-rack:not(:empty) { margin-top: var(--s4); }
.rack-label { display: block; font-size: 0.75rem; color: var(--ink-3); margin-bottom: var(--s2); }
.rack { display: flex; gap: 4px; }
.rk { position: relative; width: 2.1rem; height: 2.1rem; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tile); color: var(--tile-ink); border-radius: var(--radius-sm); line-height: 1; }
.rk .bc-l { font: 700 1.05rem/1 var(--font-display); transform: translateY(-0.1rem); }
.rk .bc-s { position: absolute; right: 3px; bottom: 2px; font-size: 0.6rem; font-weight: 600; }
.rk.bc-blank { background: color-mix(in srgb, var(--accent) 32%, var(--tile)); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- Confirm dialog (compact centred sheet) ---- */
.confirm-dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow); padding: var(--s5);
  width: min(100% - 2 * var(--s4), 26rem);
}
.confirm-dialog::backdrop { background: rgb(13 20 27 / 0.45); }
.confirm-dialog h2 { font-size: 1.2rem; margin-bottom: var(--s2); }
.confirm-dialog .confirm-body { font-size: 0.9rem; color: var(--ink-2); margin-bottom: var(--s4); }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }

/* A dismissible info banner for browse-only visitors. */
.ladder-banner { max-width: 1320px; margin: 0 auto var(--s4); padding: 0 var(--gutter); }
.ladder-banner .notice { align-items: center; }
.ladder-banner .banner-dismiss { margin-left: auto; flex: none; }

/* =====================================================================
   Onboarding / join page — the front door, a touch more hero-like but
   strictly within the existing tokens.
   ===================================================================== */
.join-page { max-width: 960px; }
.join-hero { text-align: center; padding: var(--s6) 0 var(--s5); }
.join-hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.02em; }
.join-hero .lede { color: var(--ink-2); max-width: 54ch; margin: var(--s3) auto 0; font-size: 1.0625rem; }

.join-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .join-grid { grid-template-columns: minmax(0, 1fr); } }

.join-how h2, .join-card h2 { font-size: 1.15rem; margin-bottom: var(--s3); }
.steps { display: grid; gap: var(--s3); }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4);
}
.step-num {
  grid-row: 1 / 3; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font: 700 0.95rem/1 var(--font-display);
}
.step-title { display: flex; align-items: center; gap: var(--s2); font: 650 0.95rem/1.2 var(--font-display); }
.step-title .icon { color: var(--accent); }
.step p { font-size: 0.875rem; color: var(--ink-2); }

.join-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.field .input { width: 100%; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap .input { flex: 1; min-width: 0; padding-right: 42px; }
.pw-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); min-height: 30px; width: 34px; padding: 0; border: 0; background: none; color: var(--ink-3); }
.pw-toggle:hover { background: var(--surface-2); }
.join-submit { width: 100%; }
.join-result { margin-top: var(--s3); }
.join-result:empty { display: none; }
.join-trust { margin-top: var(--s4); }
.join-trust ul { margin: var(--s2) 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; }
.join-trust li { font-size: 0.8125rem; }
.join-foot-link { margin-top: var(--s4); text-align: center; font-size: 0.875rem; color: var(--ink-2); }

.badge-beta {
  display: inline-flex; align-items: center; vertical-align: 1px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font: 700 0.65rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}