/* ======================================================================
   Sekond — component recipes
   These are the canonical CSS classes for every reusable surface in the
   Atlas designs. Names are sk- prefixed to avoid collisions.
   Pair with tokens.css. See BRAND.md §9 for surface principles.
====================================================================== */

/* ── Topbar ─────────────────────────────────────────── */
.sk-topbar {
  background: var(--bg-elevated);
  border-bottom: var(--bd-hairline);
  /* Top padding adds the iOS safe-area inset so the topbar sits
     flush below the notch with no dead gap. The shorthand below
     remains for left/right/bottom; padding-top overrides on top. */
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
  display: flex; justify-content: space-between; align-items: center;
}
@media (min-width: 640px)  {
  .sk-topbar {
    padding: var(--sp-3) var(--sp-6);
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
  }
}
@media (min-width: 1024px) {
  .sk-topbar {
    padding: var(--sp-3) var(--sp-8);
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
  }
}

.sk-topbar__nav { display: none; gap: 18px; }
@media (min-width: 640px) { .sk-topbar__nav { display: flex; } }

.sk-topbar__nav-item {
  font-size: 13px; color: var(--text-secondary); padding-bottom: var(--sp-1);
  border-bottom: 1.5px solid transparent;
}
.sk-topbar__nav-item--active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
/* Live indicator (#330): 4 px accent dot pinned to the top-right of
   the PRÉP nav item when sk_tournament.dossier_ready is true. */
.sk-topbar__nav-item { position: relative; }
.sk-topbar__nav-item[data-dot="true"]::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -7px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.sk-topbar__context {
  padding: 6px var(--sp-4) var(--sp-2);
  border-top: var(--bd-hairline);
  display: flex; gap: var(--sp-3); align-items: center;
}

/* ── Avatar ─────────────────────────────────────────── */
.sk-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

/* ── Bubbles (chat) ─────────────────────────────────── */
.sk-bubble {
  max-width: 78%; width: fit-content;
  font-size: var(--fs-body); line-height: 1.5;
  margin-bottom: 10px;
}
.sk-bubble--coach {
  color: var(--text-primary);
  border-left: var(--bd-accent);
  padding: 4px 0 4px 14px;
  margin-right: auto;
}
.sk-bubble--kid {
  color: var(--accent-ink);
  background: var(--accent);
  padding: 11px var(--sp-4);
  border-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xs);
  margin-left: auto;
}

/* ── Chip (multiple-choice reply) ───────────────────── */
.sk-chip {
  padding: 6px var(--sp-3);
  border-radius: var(--radius-pill);
  border: var(--bd-hairline);
  font-size: 12.5px;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-quick) var(--ease-out);
}
.sk-chip--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ── Buttons ────────────────────────────────────────── */
.sk-btn {
  height: 50px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: none; cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.sk-btn:active { transform: translateY(1px); }
.sk-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.sk-btn--primary:hover { background: var(--accent-hover); }
.sk-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: var(--bd-hairline);
}
.sk-btn--block {
  width: 100%;
  justify-content: space-between;
}
.sk-btn__arrow {
  font-family: var(--font-mono);
  font-size: 18px;
}

/* ── Send button (chat composer) ────────────────────── */
.sk-send {
  width: 46px; height: 46px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius-lg);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── Inputs ─────────────────────────────────────────── */
.sk-input {
  width: 100%;
  background: var(--surface);
  border: var(--bd-hairline);
  border-radius: var(--radius-lg);
  padding: 0 var(--sp-4);
  height: 46px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-out);
}
.sk-input:focus { border-color: var(--accent); }
.sk-input::placeholder { color: var(--text-placeholder); }

/* Editorial input — underlined, no box (used in login) */
.sk-input-line {
  display: block;
  padding: 10px 0;
  border-bottom: var(--bd-hairline);
  font-size: var(--fs-body-l);
  color: var(--text-primary);
}
.sk-input-line:focus-within { border-bottom: 1px solid var(--accent); }
.sk-input-line__label { /* overlay the .tag class on this */ }

/* ── Cards ──────────────────────────────────────────── */
.sk-card {
  background: var(--bg-elevated);
  border: var(--bd-hairline);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.sk-card--shadow { box-shadow: var(--shadow-card); }

/* Insight row (dossier) */
.sk-insight {
  padding: 14px 0;
  border-bottom: var(--bd-hairline);
  display: flex; gap: var(--sp-4);
}
.sk-insight:last-child { border-bottom: none; }
.sk-insight__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  padding-top: 2px;
}
.sk-insight__title {
  font-size: var(--fs-body-l);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.sk-insight__note {
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Stats grid (dossier) */
.sk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-elevated);
  border: var(--bd-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sk-stats__cell {
  padding: 14px var(--sp-4);
  border-right: var(--bd-hairline);
}
.sk-stats__cell:last-child { border-right: none; }
.sk-stats__value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}
.sk-stats__label {
  /* overlay .tag class on this */
  margin-top: 2px;
}

/* ── Display headings ─────────────────────────────────
   Display copy uses the SERIF wordmark face. Single weight (400).
   Body copy stays in Inter. */
.sk-display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sk-display-l {
  font-family: var(--font-serif);
  font-size: var(--fs-display-l);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.sk-display-m {
  font-family: var(--font-serif);
  font-size: var(--fs-display-m);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ── Display accents — no italics, ever ───────────────
   Three approved emphasis treatments inside a display heading.
   Pick exactly one per heading; never combine. */

/* α — accent via teal colour. The most common pattern. */
.sk-display__accent {
  color: var(--accent);
}

/* β — accent via Inter weight 600. Reads as "now I'm telling you what to do." */
.sk-display__accent-weight {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* γ — accent via tracked mono caps. Reads as data / category. */
.sk-display__accent-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: 0.18em;
}

/* Responsive display sizing */
@media (max-width: 1023px) {
  .sk-display-xl { font-size: 76px; }
  .sk-display-l  { font-size: 56px; }
  .sk-display-m  { font-size: 28px; }
}
@media (max-width: 639px) {
  .sk-display-xl { font-size: 56px; }
  .sk-display-l  { font-size: 36px; }
  .sk-display-m  { font-size: 22px; }
}

/* ── Hero divider rule (mono accent line) ───────────── */
.sk-rule {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.sk-rule::before {
  content: '';
  width: 24px; height: 1px; background: currentColor; opacity: 0.5;
}

/* ── Status dot ─────────────────────────────────────── */
.sk-status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}

/* ── Move ribbon (puzzle bottom) ────────────────────── */
.sk-moveribbon {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-elevated);
  border-top: var(--bd-hairline);
  border-bottom: var(--bd-hairline);
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

/* ── Chat composer ──────────────────────────────────── */
.sk-composer {
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border-top: var(--bd-hairline);
  display: flex; gap: var(--sp-2); align-items: center;
}

/* ── Page chrome — viewport split layouts ───────────── */
@media (min-width: 1024px) {
  .sk-split-2col {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    height: 100%;
  }
  .sk-split-2col__hero  { padding: var(--sp-16); }
  .sk-split-2col__form  { background: var(--bg-elevated); border-left: var(--bd-hairline); padding: var(--sp-12); display: flex; align-items: center; justify-content: center; }
}

/* ── Wordmark + tagline lockup (D.04 canonical) ───────
   Per BRAND.md §4. Pawn + Young Serif "Sekond" + 1.5px accent
   rule + "ton second" mono caption. The rule and caption are
   indented to align with the "S" of Sekond — left margin = pawn
   width + pawn-to-wordmark gap.

   The bare .sk-wordmark (without .sk-lockup wrapping) is what
   topbar / app icon / footer should use; D.04 with the rule +
   caption is for the Arrival hero only.
*/
.sk-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--text-primary);
}
.sk-wordmark__pawn {
  flex-shrink: 0;
  /* viewBox 0 0 92 210 — height = pawn-w × 210/92 ≈ 1.55em */
  height: calc(0.68em * 210 / 92);
  width: 0.68em;
  transform: translateY(0.04em);
}

.sk-lockup {
  display: inline-block;
  --fs: 64px;             /* override per surface */
  --pawn-w: calc(var(--fs) * 0.68);
  --gap:    calc(var(--fs) * 0.16);
  --ind:    calc(var(--pawn-w) + var(--gap));
}
.sk-lockup .sk-wordmark { font-size: var(--fs); }
.sk-lockup__rule {
  margin-top: 0.18em;
  margin-left: var(--ind);
  height: 1.5px;
  width: calc(var(--fs) * 2.85);
  background: var(--accent);
}
.sk-lockup__caption {
  margin-top: 6px;
  margin-left: var(--ind);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Nav drawer (#49 PR 4) — phone hamburger overlay ───────────── */
.sk-drawer {
  position: fixed; inset: 0;
  z-index: 250;
}
.sk-drawer[hidden] { display: none; }
.sk-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.sk-drawer__panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 80%;
  max-width: 320px;
  background: var(--bg-elevated);
  border-right: var(--bd-hairline);
  padding: max(50px, env(safe-area-inset-top)) var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
.sk-drawer__section-label { display: block; padding: 0 var(--sp-3) var(--sp-2); }
.sk-drawer__item {
  display: block; width: 100%;
  padding: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-left: 1.5px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
}
.sk-drawer__item:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}
.sk-drawer__item--active {
  color: var(--accent);
  border-left-color: var(--accent);
  cursor: default;
}
.sk-drawer__divider {
  height: 0.5px;
  background: var(--hairline);
  margin: var(--sp-2) var(--sp-3);
}

/* Topbar icon buttons (gear, hamburger). Shared so every page in the
   PWA gets the same brand-correct rendering — used to be inlined per
   page which left tournois/parties/profil falling back to default
   browser styling, and Safari renders the ⚙ glyph as a colored
   emoji (off-brand blue) in that mode (#223). The class also
   carries a `font-variant-emoji: text` hint that Safari 16.4+
   honours, paired with a U+FE0E variant selector on the glyph
   itself for older engines. */
.sk-iconbtn {
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: none;
  /* Force monochrome ("text") presentation of dual-purpose glyphs
     like ⚙ on engines that support font-variant-emoji. */
  font-variant-emoji: text;
  transition: color var(--dur-quick) var(--ease-out);
}
.sk-iconbtn:hover { color: var(--accent); }

/* Hamburger button — visible on phone, hidden tablet+. */
@media (min-width: 640px) {
  .sk-hamburger { display: none; }
}

/* Topbar nav as <a> — uses existing .sk-topbar__nav-item visual but
   needs text-decoration cleanup since anchors get the underline. */
a.sk-topbar__nav-item { text-decoration: none; }


/* ── Pull-to-refresh indicator (#258) ───────────────────────────
   Sits at the very top of the scroll content area on index.html
   and tournois.html. Hidden at rest; mono caps "ACTUALISATION…"
   fades in as the player pulls down. Brand-quiet — no spinner,
   no icon, no bounce physics. JS controls opacity + transform
   inline via `skInitPullToRefresh` in nav.js.

   Absolutely positioned so the rest state (opacity 0) reserves
   no layout space — otherwise it would push the topbar ~37 px
   below the iOS notch (#357, residual after the sf#11 fix in
   #352). z-index keeps the pulled state visible above the
   topbar's elevated bg. Parents establish the positioning
   context: #main-screen on index.html, body on tournois.html. */
.ptr-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-3) 0;
  opacity: 0;
  transform: translateY(0);
  transition: none;
  pointer-events: none;
  user-select: none;
}


/* ── Login "Rester connecté" checkbox (#240) ──────────────────────
   Sits between the password field and the submit button on the
   arrival/login surface. Checked by default; uncheck for shared-
   device scenarios. Tick uses the brand teal via accent-color. */
.login-remember {
  display: flex;
  align-items: center;
  margin: var(--sp-3) 0;
}
.login-remember__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
}
.login-remember__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.login-remember__text {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}


/* ── Glossary linkify (#114) — clickable terms in coach bubbles ── */
.sk-glossary-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  transition: color var(--dur-quick) var(--ease-out, ease-out);
}
.sk-glossary-link:hover {
  color: var(--accent-hover, var(--accent));
}
.sk-glossary-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Prep page (#330) ─────────────────────────────────
   Dedicated tournament-prep surface. Five states share
   one set of styles; per-state markup lives in prep.html.
   Built only on existing tokens — no new colors or scales. */

.prep-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-5);
}
.prep-header__name {
  color: var(--text-primary);
}
.prep-header__meta { /* inherits .tag muted */ }

.prep-empty__title {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-3) 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.prep-empty__body {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--sp-6);
  max-width: 36ch;
}
.prep-empty__cta {
  display: inline-flex;
  text-decoration: none;
}

/* Self-prep + opponents block spacing */
.prep-pre__selfprep,
.prep-pre__opponents,
.prep-history,
.prep-post__bilan {
  margin-bottom: var(--sp-6);
}
.prep-pre__placeholder { margin-bottom: var(--sp-6); }

/* Opponent cards (state 2) — compact list of top-5 by Elo */
.opponent-cards {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.opponent-card {
  background: var(--bg-elevated);
  border: var(--bd-hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opponent-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.opponent-card__name {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
}
.opponent-card__rating {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--accent);
  margin-left: auto;
}
.opponent-card__club {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.opponent-card__openings {
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}
/* Round-ready (state 4) — dossier briefing */
.prep-ready__opp-name {
  font-family: var(--font-sans);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: var(--sp-2) 0 4px;
}
.prep-ready__opp-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-5);
}
.prep-ready__rep {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}
.prep-ready__rep li { line-height: 1.5; }
.prep-ready__form {
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  margin: var(--sp-2) 0 var(--sp-5);
  line-height: 1.55;
}
.prep-flags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.prep-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border: var(--bd-hairline);
  border-radius: var(--radius-pill);
  padding: 4px var(--sp-3);
}
.prep-dim {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
}

/* T-1 brief — top 3-4 R1 candidate list (issue #362) */
.prep-t1-candidates {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.prep-t1-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-body-s);
}
.prep-t1-prob {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  min-width: 7rem;
}
.prep-t1-prob--high   { color: var(--accent); }
.prep-t1-prob--medium { color: var(--text-primary); }
.prep-t1-prob--low    { color: var(--text-muted); }
.prep-t1-name {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}
.prep-t1-key-prep {
  flex-basis: 100%;
  padding-left: 7.5rem;
  line-height: 1.45;
}

/* Opponent gallery — full tournament roster (issue #362) */
.prep-gallery {
  margin: var(--sp-6) 0;
  border-top: var(--bd-hairline);
  padding-top: var(--sp-4);
}
.prep-gallery__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
}
.prep-gallery__summary::-webkit-details-marker,
.gallery-opp__summary::-webkit-details-marker {
  display: none;
}
.prep-gallery__count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  margin-left: var(--sp-2);
  text-transform: none;
  letter-spacing: 0;
}
.prep-gallery__search { margin: var(--sp-3) 0; }
.prep-gallery__input {
  width: 100%;
  background: var(--bg-input);
  border: var(--bd-hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-body-s);
  color: var(--text-primary);
}
.prep-gallery__list {
  display: flex;
  flex-direction: column;
}
.gallery-opp { border-bottom: var(--bd-hairline); }
.gallery-opp:last-child { border-bottom: 0; }
.gallery-opp__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body-s);
}
.gallery-opp__rank {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  min-width: 2.5rem;
}
.gallery-opp__title {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  text-transform: uppercase;
  min-width: 1.25rem;
}
.gallery-opp__name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.gallery-opp__elo {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--accent);
}
.gallery-opp__flag { font-size: 1rem; }
.gallery-opp__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--hairline);
}
.gallery-opp__dot[data-conf="high"]   { background: var(--accent); }
.gallery-opp__dot[data-conf="medium"] { background: var(--text-muted); }
.gallery-opp__profile {
  padding: var(--sp-2) 0 var(--sp-3) 3rem;
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prep-ready__actions,
.prep-post__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Compact round history (states 3 + 5) */
.prep-round-history {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.prep-round-row {
  display: grid;
  grid-template-columns: 32px 16px 1fr auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--bd-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--text-secondary);
}
.prep-round-row:last-child { border-bottom: 0; }
.prep-round-row__num   { color: var(--text-muted); }
.prep-round-row__color { color: var(--text-muted); text-align: center; }
.prep-round-row__opponent {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prep-round-row__result {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.prep-round-row__result--win  { color: var(--success); }
.prep-round-row__result--draw { color: var(--text-secondary); }
.prep-round-row__result--loss { color: var(--error); }
.prep-round-row__elo-delta {
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.prep-round-row__elo-delta--positive { color: var(--accent); }
.prep-round-row__elo-delta--negative { color: var(--error); }
.prep-round-row__elo-delta--neutral  { color: var(--text-muted); }

/* Post-tournament bilan (state 5) */
.prep-bilan-standings {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-3);
}
.prep-bilan__rank {
  font-family: var(--font-sans);
  font-size: var(--fs-display-m);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.prep-bilan__points {
  font-family: var(--font-mono);
  font-size: var(--fs-body-l);
  color: var(--accent);
}
.prep-bilan__perf,
.prep-bilan__elo {
  display: block;
  margin-bottom: 4px;
}

.prep-post__rounds {
  margin: var(--sp-5) 0;
  border-top: var(--bd-hairline);
  border-bottom: var(--bd-hairline);
  padding: var(--sp-3) 0;
}
.prep-post__rounds > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.prep-post__rounds > summary::-webkit-details-marker { display: none; }
.prep-post__rounds > summary::after {
  content: " ▸";
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
}
.prep-post__rounds[open] > summary::after { content: " ▾"; }
.prep-post__summary { margin: var(--sp-3) 0 var(--sp-5); }

/* #420 — structured opponent fact card on prep.html dossier */
.dossier-fact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: var(--bd-hairline);
}
.fact-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.fact-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  min-width: 68px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.fact-value {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-line;
}
.confidence-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  vertical-align: middle;
  margin-right: 4px;
}
.confidence-badge.high   { background: rgba(0,194,168,0.12); color: var(--accent); }
.confidence-badge.medium { background: rgba(160,160,160,0.12); color: var(--text-muted); }
.confidence-badge.low    { background: rgba(232,162,59,0.12); color: var(--warning); }
.confidence-badge.none   { background: rgba(216,90,90,0.12); color: var(--error); }