/* Clans core: root, .cl-card, the clan header, emblem, overview tiles, winrate and contributors. */
/* Clans — search box / segments / empty state reuse .bf-* from battlefield.css. */

.clans-screen { display: block; width: 100%; }

/* .cl-tabs / .cl-tab (+ .cl-tab-count): THE shared page-tab component (layout.css). */

.cl-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 20px;
  margin-bottom: 14px;
}
.cl-card-title {
  margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bronze-2);
  display: flex; align-items: center; gap: 8px;
}
/* Transparent so the pill takes whichever card it sits on. The RING carries the attention, the
   --ink numeral the reading, so nothing depends on hue. */
.cl-count {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
  padding: 2px 8px; border-radius: 100px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--bronze-2);
}
.cl-note { margin-top: 8px; }

/* A section of .cl-headcard, not a card of its own — shares its border. */
.cl-head {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px;
  border-bottom: 1px solid var(--divider);
}
.cl-head-meta { flex: 1; min-width: 220px; }
.cl-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-2);
}
.cl-name { font-size: 1.9rem; margin: 2px 0 4px; }
.cl-motto { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 10px; }
/* Inline pencil beside the motto; leader/co-leader only. */
.cl-motto-edit {
  all: unset; cursor: pointer; margin-left: 6px;
  font-size: 0.82em; line-height: 1; color: var(--ink-4);
  padding: 2px 4px; border-radius: var(--radius-s);
}
.cl-motto-edit:hover { color: var(--bronze-2); }
.cl-motto-edit:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 1px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip {
  font-size: 0.7rem; padding: 3px 10px; border-radius: 100px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-2);
  white-space: nowrap;
}
.cl-chip-rank {
  background: color-mix(in srgb, var(--bronze) 12%, transparent);
  color: var(--bronze-2); border-color: color-mix(in srgb, var(--bronze) 30%, transparent);
}
.cl-head-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.cl-head-actions .btn { min-width: 11em; justify-content: center; }
.cl-head-actions > .btn,
.cl-head-actions > .cl-menu-wrap { width: 100%; }
.cl-head-actions .cl-menu-wrap > .btn { width: 100%; }
.cl-head-actions > .cl-vis-switch { align-self: start; margin-bottom: 2px; }

.cl-emblem {
  display: inline-grid; place-items: center; flex: none;
  width: var(--cl-size, 40px); height: var(--cl-size, 40px);
  font-size: calc(var(--cl-size, 40px) * 0.5);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--cl-em, var(--bronze-deep)) 30%, var(--bg-2));
  border: 1px solid var(--border-strong);
}
.cl-emblem-img {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: transparent;
}
.cl-emblem-upload { position: relative; overflow: hidden; cursor: pointer; }
.cl-emblem-upload input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Sub-tabs: THE shared page-tab component (layout.css). */

.cl-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
/* auto-fit drops to one track below ~376px; a phone has room for a pair. */
@media (max-width: 640px) {
  .cl-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cl-tile { padding: 14px 8px; }
}
.cl-tile {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 18px 16px; text-align: center;
}
.cl-tile-v { font-family: var(--font-display); font-size: 1.8rem; color: var(--bronze-2); line-height: 1.1; }
.cl-tile-l { font-size: 0.78rem; color: var(--ink-3); margin-top: 4px; }

.cl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; padding-bottom: 0.875rem; }
.cl-grid-2 > .cl-card { margin-bottom: 0; }

.cl-winrate { display: flex; align-items: baseline; gap: 6px; }
.cl-winrate b { font-family: var(--font-display); font-size: 2.2rem; color: var(--laurel-2); }
.cl-winrate span { color: var(--ink-3); font-size: 0.82rem; }
.cl-bar {
  display: flex; height: 8px; border-radius: 100px; overflow: hidden;
  background: var(--bg-3); margin: 10px 0 8px;
}
.cl-bar-won  { background: var(--laurel); }
.cl-bar-lost { background: var(--porphyry); }
.cl-legend { display: flex; gap: 14px; font-size: 0.78rem; }
.cl-won  { color: var(--laurel-2); }
.cl-lost { color: var(--porphyry-2); }

.cl-pending { border-style: dashed; }
.cl-pending-body { display: flex; flex-direction: column; gap: 6px; }
.cl-soon {
  align-self: flex-start;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
  background: color-mix(in srgb, var(--amethyst) 18%, transparent);
  color: var(--amethyst-2); border: 1px solid color-mix(in srgb, var(--amethyst) 40%, transparent);
}

.cl-contrib { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: c; }
/* Each row carries a two-line name block, so it needs its own padding and a rule between
   rows — an 8px gap alone left five rows reading as one mass. */
.cl-contrib li { display: flex; align-items: center; gap: 12px; counter-increment: c;
  padding: 8px 4px; border-bottom: 1px solid var(--divider); }
.cl-contrib li:last-child { border-bottom: none; }
.cl-contrib li::before { content: counter(c); width: 14px; font-size: 0.72rem; color: var(--ink-4); font-family: var(--font-mono); }
.cl-contrib-name { flex: 1; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-contrib-elo { font-size: 0.74rem; font-weight: 400; color: var(--ink-3); }
.cl-contrib-pts { color: var(--bronze-2); font-size: 0.82rem; }

@media (max-width: 640px) {
  /* Four actions (visibility switch + two menus + Leave) can't share one row —
     wrap two-up and keep the labels on one line each. */
  .cl-head-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .cl-head-actions .btn { flex: 1 1 42%; min-width: 0; white-space: nowrap; }
  .cl-head-actions > .cl-menu-wrap { width: auto; flex: 1 1 42%; }
  .cl-head-actions > .cl-vis-switch { flex: 1 1 100%; }
  .cl-name { font-size: 1.5rem; }
}