/* ═══════════════════════════════════════════════════════════════════════
   RWF SQUADS — styles for the multi-squad dashboard (sqd-001/sqd-002),
   the home BATTLES|SQUADS segmented tabs, wagers, and the last-place
   notice. Tokens come from tokens.css/themes.css — no new colours.
   ═══════════════════════════════════════════════════════════════════════ */

/* header SFX tool muted state (sfx.js paints it) */
.fx-tool--off { opacity: 0.45; text-decoration: line-through; }

/* home segmented tabs — BATTLES | SQUADS */
.fx-sqd-hometabs { margin-top: 14px; }

/* squad tab chips (horizontal, scrollable on narrow phones) */
.fx-sqdtabs {
  display: flex; gap: 8px; overflow-x: auto; margin: 14px 0 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fx-sqdtabs::-webkit-scrollbar { display: none; }
.fx-sqdtab--new { font-weight: 800; min-width: 44px; }

/* squad header: name + code + status */
.fx-sqdhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.fx-sqdhead__name { display: block; font: 800 20px/1.15 var(--font-display, var(--font-body)); letter-spacing: 0.02em; }
.fx-sqdhead__code { display: block; margin-top: 3px; font: 500 12px/1.2 var(--font-body); color: var(--faint); }

/* streak / points / escrow chips row */
.fx-sqdmeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fx-escrow { color: var(--urgency); }

/* three-way standing cards */
.fx-stands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.fx-stand {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px; background: var(--card, var(--bg));
  min-width: 0;
}
.fx-stand__label { font: 700 9.5px/1.2 var(--font-body); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.fx-stand__v { font: 800 22px/1 var(--font-display, var(--font-body)); color: var(--ink, inherit); }
.fx-stand__v--up { color: var(--success); }
.fx-stand__v--down { color: var(--danger, var(--urgency)); }
.fx-stand__s { font: 500 10px/1.25 var(--font-body); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* squad leaderboard row */
.fx-sqdrow {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  background: var(--card, var(--bg));
}
.fx-sqdrow--you { border-color: var(--lime); }
.fx-sqdrow--lead { border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.fx-sqdrow__pos { min-width: 30px; font: 700 13px/1 var(--font-body); color: var(--faint); text-align: center; }
.fx-sqdrow__pos .fg-icon { width: 16px; height: 16px; color: var(--lime); }
.fx-sqdrow__info { flex: 1; min-width: 0; }
.fx-sqdrow__name {
  display: block; font: 600 14px/1.2 var(--font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-sqdrow__you { color: var(--lime); font-size: 11px; }
.fx-sqdrow__bar { display: block; height: 5px; border-radius: 999px; background: var(--line); margin-top: 6px; overflow: hidden; }
.fx-sqdrow__bar i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.fx-sqdrow__score { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.fx-sqdrow__score b { font: 800 16px/1 var(--font-display, var(--font-body)); }
.fx-sqdrow__score span { font: 600 9px/1.2 var(--font-body); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.fx-sqdrow__score em { font: 500 10px/1.2 var(--font-body); font-style: normal; color: var(--faint); }

/* last-place notice — cheeky, never mean */
.fx-lastnote {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--lime) 60%, transparent);
  background: color-mix(in srgb, var(--lime) 10%, transparent);
  border-radius: 14px; padding: 12px 14px; margin-top: 14px;
}
.fx-lastnote__ic { color: var(--lime); }
.fx-lastnote__ic .fg-icon { width: 22px; height: 22px; }
.fx-lastnote__t { font: 800 15px/1.2 var(--font-display, var(--font-body)); letter-spacing: 0.02em; }
.fx-lastnote__s { font: 500 12px/1.45 var(--font-body); color: var(--muted, var(--faint)); margin-top: 4px; }
.fx-lastnote__s--dim { opacity: 0.75; }
.fx-lastnote__w { font: 600 12px/1.4 var(--font-body); color: var(--urgency); margin-top: 6px; }

/* wagers */
.fx-wagers { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.fx-wager {
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  background: var(--card, var(--bg));
}
.fx-wager__desc { font: 600 14px/1.3 var(--font-body); }
.fx-wager__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.fx-wpts { font: 700 11px/1 var(--font-body); color: var(--lime); letter-spacing: 0.06em; }
.fx-wchip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 9.5px/1 var(--font-body); letter-spacing: 0.08em;
  border-radius: 999px; padding: 5px 8px; text-transform: uppercase;
}
.fx-wchip .fg-icon { width: 11px; height: 11px; }
.fx-wchip--proposed { color: var(--faint); border: 1px solid var(--line-bright, var(--line)); }
.fx-wchip--active { color: var(--lime); border: 1px solid var(--lime); }
.fx-wchip--settled { color: var(--success); border: 1px solid var(--success); }
.fx-wflags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fx-wflag {
  display: inline-flex; align-items: center; gap: 2px;
  font: 700 9px/1 var(--font-body); color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px;
}
.fx-wflag .fg-icon { width: 10px; height: 10px; }
.fx-wflag--on { color: var(--success); border-color: var(--success); }
.fx-wager__act { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-wsub { font: 500 11px/1.3 var(--font-body); color: var(--faint); }

/* propose form */
.fx-wform { display: flex; flex-direction: column; gap: 8px; }
.fx-wform__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-wform__row .fx-btn { margin-left: auto; }

/* empty state */
.fx-sqdempty {
  border: 1px dashed var(--line-bright, var(--line)); border-radius: 16px;
  padding: 28px 20px; text-align: center; margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.fx-sqdempty__ic .fg-icon { width: 30px; height: 30px; color: var(--lime); }
.fx-sqdempty__t { font: 800 16px/1.2 var(--font-display, var(--font-body)); }
.fx-sqdempty__s { font: 500 12px/1.5 var(--font-body); color: var(--faint); max-width: 260px; }