/* ─────────────────────────────────────────────────────────────────────────
   Create Tournament wizard — the third light Keelo workspace, alongside My
   Chess Club (teams.css's `.tm-*`) and My Tournaments (app.css's `.myt-*`).
   Same family — white/light cards, rounded surfaces, Keelo green accents,
   no dark/black background anywhere — but deliberately more ENERGETIC than
   either of those: a stronger, more saturated green atmosphere behind the
   wizard, since this is the "let's build something" screen rather than a
   quiet dashboard. Still light, clean, and accessible — never neon.
   Replaces the old dark `.mgmt`/`--mgmt-*` theme this file used to sit on
   top of entirely; nothing here references `--mgmt-*` anymore, and nothing
   in manage.css/`.mgmt` is touched — Tournament Manager keeps its own dark
   theme exactly as it was.
   ───────────────────────────────────────────────────────────────────────── */

.ct-page {
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(1200px 620px at 12% -6%, rgba(20, 122, 61, 0.26), transparent 60%),
    radial-gradient(1000px 620px at 100% 15%, rgba(34, 168, 81, 0.20), transparent 58%),
    radial-gradient(900px 700px at 50% 100%, rgba(20, 122, 61, 0.14), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, #DFF3E6 140px, #DFF3E6 calc(100% - 160px), var(--bg) 100%);
}

.ct-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) 80px;
  color: var(--text);
}

.ct-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--muted);
  font-size: var(--text-sm); font-weight: 700; cursor: pointer; padding: 4px 0;
  margin-bottom: 16px;
}
.ct-back:hover { color: var(--green); }
.ct-back svg { width: 16px; height: 16px; stroke: currentColor; }

.ct-progress-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--green-dark); margin-bottom: 8px;
}
.ct-progress-track {
  height: 7px; border-radius: 999px; background: var(--border-soft);
  overflow: hidden; margin-bottom: 22px;
}
.ct-progress-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.25s ease; }

.ct-step-title { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.4px; margin: 0 0 4px; color: var(--text-strong); }
.ct-step-sub { font-size: var(--text-base); color: var(--muted); margin: 0 0 24px; }

.ct-field { margin-bottom: 20px; }
.ct-field label {
  display: block; font-size: 0.78rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 7px;
}
.ct-field .ct-hint { font-size: var(--text-sm); color: var(--muted); margin-top: 6px; line-height: 1.45; }
.ct-field input[type="text"],
.ct-field input[type="number"],
.ct-field input[type="date"],
.ct-field input[type="time"],
.ct-field input[type="url"],
.ct-field select,
.ct-field textarea {
  width: 100%; background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; color: var(--text);
  font-size: var(--text-base); font-family: inherit;
}
.ct-field textarea { resize: vertical; min-height: 80px; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--faint); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lite);
}
.ct-error { color: var(--red); font-size: var(--text-sm); margin-top: -12px; font-weight: 600; }

/* Date + calendar affordance as ONE control (Step "details"/merged final
   step) — previously a bare full-width input[type=date], which left the
   native calendar glyph pinned ~600px away from the date text on this
   step's wide .ct-shell. Border/padding move to this wrapper; the input
   itself goes borderless/transparent so it reads as one unit with the
   icon right next to it. The wrapper itself is clickable too (see the
   [data-ct-date-control] click handler), not just the icon. */
.ct-date-control {
  display: flex; align-items: center; gap: 10px; max-width: 280px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; cursor: pointer;
}
.ct-date-control:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lite); }
.ct-date-control input[type="date"] {
  width: auto; flex: 1; min-width: 0; border: none; padding: 0; background: transparent;
}
.ct-date-control input[type="date"]:focus { outline: none; box-shadow: none; }
.ct-date-control-icon { display: flex; align-items: center; color: var(--green); flex-shrink: 0; pointer-events: none; }
.ct-date-control-icon svg { width: 18px; height: 18px; stroke: currentColor; }
@media (max-width: 480px) { .ct-date-control { max-width: 100%; } }

.ct-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .ct-row2 { grid-template-columns: 1fr; } }

/* Selection cards — format, fee, prizes toggle, TRR/Swiss team pickers */
.ct-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ct-card-grid.ct-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .ct-card-grid.ct-2col { grid-template-columns: 1fr; } }
.ct-card {
  position: relative; text-align: start; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: 15px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ct-card:hover { border-color: var(--green-lite); transform: translateY(-1px); }
.ct-card.active { border-color: var(--green); background: var(--green-tint); }
.ct-card.disabled { opacity: 0.55; cursor: not-allowed; }
.ct-card.ct-card-invalid { border-color: var(--accent); }
.ct-card.ct-card-invalid .ct-card-desc { color: #92400E; }
.ct-card svg { width: 22px; height: 22px; stroke: currentColor; color: var(--muted); }
.ct-card.active svg { color: var(--green); }
.ct-card-label { font-weight: 800; font-size: var(--text-base); color: var(--text-strong); }
.ct-card.active .ct-card-label { color: var(--green-dark); }
.ct-card-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.4; }
.ct-card-example { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--muted); opacity: 0.7; }
.ct-card-check {
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.ct-card-check svg { width: 12px; height: 12px; stroke: #fff; color: #fff; }

.ct-note {
  background: var(--card-tint); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: var(--text-sm); color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.ct-note.ct-info { display: flex; align-items: center; gap: 10px; border-color: var(--green-lite); background: var(--green-tint); color: var(--green-dark); font-weight: 600; }
.ct-note.ct-info svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }

/* Compact, already-selected control — replaces the old oversized Buchholz
   note. A small pill, not a card: there is only one option, so it should
   never look like something still needs choosing. */
.ct-tiebreak-fixed {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--green-tint); border: 1.5px solid var(--green-lite);
  color: var(--green-dark); font-weight: 800; font-size: var(--text-sm);
  margin-bottom: 6px;
}
.ct-tiebreak-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff;
}
.ct-tiebreak-check svg { width: 11px; height: 11px; stroke: currentColor; }

/* 3-way / N-way toggle (BYE points, free/paid) */
.ct-toggle { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ct-toggle button {
  flex: 1; min-width: 64px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text); font-weight: 800; font-size: var(--text-sm); cursor: pointer;
}
.ct-toggle button.active { border-color: var(--green); color: var(--green-dark); background: var(--green-tint); }

/* Time-control preset grid */
.ct-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 420px) { .ct-preset-grid { grid-template-columns: repeat(2, 1fr); } }
.ct-preset-group-label { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; margin: 12px 0 6px; }
.ct-preset-btn {
  padding: 10px 6px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--card); color: var(--text); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.ct-preset-btn.active { border-color: var(--green); color: var(--green-dark); background: var(--green-tint); }
.ct-preset-selected { font-size: var(--text-sm); color: var(--muted); margin-bottom: 10px; }
.ct-preset-selected b { color: var(--text-strong); }

/* Search rows — Swiss player search */
.ct-search-results { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; }
.ct-search-results:empty { display: none; border: none; margin-top: 0; }
.ct-search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: var(--text-sm);
}
.ct-search-row:last-child { border-bottom: none; }
.ct-search-row:hover { background: var(--card-tint); }
.ct-search-row.selected { background: var(--green-tint); }
.ct-search-row-name { color: var(--text-strong); font-weight: 700; }
.ct-search-row-sub { color: var(--muted); font-size: var(--text-xs); }

/* Chips — small tags used on participant/team rows */
.ct-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 700; color: var(--muted);
  background: var(--border-soft); padding: 3px 9px; border-radius: var(--radius-pill);
}
.ct-chip-tag { color: var(--green-dark); background: var(--green-tint); }
.ct-chip-guest { color: #92400E; background: #FEF3C7; }
.ct-chip-warning { color: var(--red); background: rgba(220, 38, 38, 0.08); }

/* Participant / team rows — Step "participants" for both formats */
.ct-participant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); margin-bottom: 8px;
}
.ct-participant-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ct-participant-name { font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); }
.ct-participant-source { font-size: var(--text-xs); color: var(--faint); }
.ct-icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.ct-icon-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.ct-icon-btn:hover { border-color: var(--red); color: var(--red); background: rgba(220, 38, 38, 0.06); }

/* Checkbox rows — filtered club-player results */
.ct-check-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); cursor: pointer;
}
.ct-check-row:last-child { border-bottom: none; }
.ct-check-row input { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
.ct-check-row span:first-of-type { flex: 1; font-weight: 600; color: var(--text); }

/* Tabs — Team Round Robin's 3 team-building tools */
.ct-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ct-tab {
  padding: 8px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.ct-tab.active { border-color: var(--green); color: #fff; background: var(--green); }
.ct-tab.disabled, .ct-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* Prize slots */
.ct-prize-slot { margin-bottom: 14px; padding: 14px; background: var(--card-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ct-prize-slot-label { font-weight: 800; font-size: var(--text-sm); margin-bottom: 8px; color: var(--text-strong); }
.ct-prize-slot input { margin-bottom: 8px; }
.ct-prize-slot input:last-child { margin-bottom: 0; }

/* Flat summary/review cards (TRR settings summary) */
.ct-card-flat { background: var(--card-tint); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.ct-review-card { margin-bottom: 14px; }
.ct-review-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.ct-review-row:last-child { border-bottom: none; }
.ct-review-row-label { color: var(--muted); }
.ct-review-row-value { color: var(--text-strong); font-weight: 700; text-align: end; }
.ct-review-row select { width: auto; padding: 6px 8px; font-size: var(--text-xs); }

/* Footer nav */
.ct-nav { display: flex; gap: 10px; margin-top: 30px; }
.ct-nav .ct-btn-back { flex: 0 0 auto; }
.ct-nav .ct-btn-continue { flex: 1; }
.ct-btn {
  padding: 13px 18px; border-radius: var(--radius-sm); font-weight: 800; font-size: var(--text-base);
  border: 1.5px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
}
.ct-btn:hover:not(:disabled) { border-color: var(--green-lite); }
.ct-btn.ct-primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--shadow-cta); }
.ct-btn.ct-primary:hover:not(:disabled) { filter: brightness(1.06); }
.ct-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* icon()'s <svg> only carries a viewBox, no width/height, so it falls back
   to the replaced-element default of 300x150px. Every other icon-bearing
   component in this file sizes its own `svg` explicitly (.ct-card svg,
   .ct-icon-btn svg, etc.) but .ct-btn never did — the giant fallback size
   then stretched its .ct-row2 grid sibling (e.g. the "Add guest" name
   input, which has no height of its own) to match. This one rule fixes
   every icon-bearing .ct-btn in the wizard, not just the guest input. */
.ct-btn svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
.ct-spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor; animation: ct-spin 0.7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

.ct-empty-box { text-align: center; padding: 26px 14px; color: var(--muted); font-size: var(--text-sm); }
.ct-empty-box svg { width: 26px; height: 26px; stroke: currentColor; margin-bottom: 8px; color: var(--green); }

/* ── Light modal (error/confirm alerts from this wizard only) — mirrors
   teams.css's own `.tm-modal-*`, kept as an independent copy rather than a
   shared class since this module never imports from teams.js. ────────────── */
.ct-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.ct-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); max-width: 440px; width: 100%; color: var(--text);
  box-shadow: 0 24px 64px rgba(20, 20, 20, 0.22);
}
.ct-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 900; margin: 0 0 var(--space-4); color: var(--red);
}
.ct-modal-title svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }
.ct-modal-msg { font-size: var(--text-base); color: var(--text); margin: 0 0 var(--space-5); white-space: pre-line; line-height: 1.55; }
.ct-modal-actions { display: flex; }
.ct-modal-actions .ct-btn { flex: 1; }