/* site/app/clubs.css — the club mark, and nothing else.
 *
 * ⚠⚠ THIS FILE IS GLOBAL BECAUSE THE MARK IS. clubMark() is appended inside a queue row, a court
 *   corner, a leaderboard row, a finish-match line and a profile header — five stylesheets, none
 *   of which owns the others. Defining `.clb-mark` in any one of them would mean the mark drew
 *   correctly on one screen and as bare text on the other four, silently, depending on which
 *   sheet the browser had reached. It loads beside ui.css for the same reason .avatar does.
 *
 * ⚠ THE CLUB SECTIONS OF THE PLAYERS TAB ARE NOT HERE — they are in screens/players.css, where
 *   the tab they live on keeps its rules. What is global is the mark; a club board row is a row
 *   on one screen.
 *
 * ⚠ EVERY VALUE IS A TOKEN. A raw hex here does not follow the palette into dark mode, and this
 *   mark is drawn on four different grounds: the white of a .list row, the sunken cream of a
 *   card, the navy of the takeover layer, and the tinted ground of the viewer's own row.
 *
 * ⚠ EVERY NAME IS PREFIXED `clb-`. Two stylesheets on this project have already both invented
 *   `.pcard`, and whichever loaded second broke the other in silence.
 */

/* ═══ THE MARK ══════════════════════════════════════════════════════════════ */

/* ⚠ flex: none, AND IT IS LOAD-BEARING. The mark sits at the head of a name line whose name is
   `overflow: hidden; text-overflow: ellipsis`. Without it, a flex parent under pressure shrinks
   the 18px logo before it shortens a 22-character name — the club disappears and the name that
   was supposed to lose a letter stays whole. The mark is the fixed thing; the name is elastic. */
.clb-mark {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  vertical-align: middle;
}

/* The logo. A squircle rather than a circle: it is a club's badge, not a face, and next to the
   round .avatar in the same row the difference is what says they are different kinds of thing. */
.clb-logo {
  width: 18px; height: 18px; flex: none;
  border-radius: 5px; overflow: hidden;
  display: grid; place-items: center;
  /* The avatar's ground, deliberately — see clubs.js's note on why clubs get no colour of their
     own. Identity is the four characters, not a hue this palette does not have. */
  background: var(--navy-70); color: var(--cream);
  font: 700 8px/1 var(--font-ui); letter-spacing: .02em;
}
/* ⚠ object-fit: cover, so a logo that is not square is cropped rather than squashed. A club
   uploads whatever it has; a stretched badge looks like a rendering bug and a letterboxed one
   wastes half of an 18px tile. */
.clb-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ⚠ THE TAG IS THE READABLE HALF OF THE MARK (DESIGN.md §2) and it is never dropped to save
   space. Tertiary ink and wide tracking keep it quiet next to the name it precedes — it is an
   affiliation, not the subject of the row. */
.clb-tag {
  flex: none;
  font: 600 10.5px/1 var(--font-ui); letter-spacing: .085em;
  color: var(--ink-tertiary); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Small: a court corner, a queue row, a result line ────────────────────── */
/* ⚠ SMALLER, NOT SHORTER. Four characters at 9px still read at arm's length; three characters
   and an ellipsis would be a different tag. The tile shrinks and the tracking tightens, and
   nothing is cut. */
.clb-logo.is-sm { width: 14px; height: 14px; border-radius: 4px; font-size: 6.5px; }
.clb-logo.is-lg { width: 40px; height: 40px; border-radius: 11px; font-size: 15px; letter-spacing: -.01em; }
.clb-logo.is-xl { width: 64px; height: 64px; border-radius: 18px; font-size: 24px; letter-spacing: -.02em; }

/* ⚠ THE RADIUS IS NOT ONE VALUE AT EVERY SIZE. 5px on an 18px tile and 5px on a 64px tile are
   two different shapes; each step keeps roughly the same corner-to-side ratio, which is what
   makes the big badge on the club sheet read as the same mark as the small one in the queue
   rather than as a different, squarer logo. */
.clb-mark.is-sm { gap: 4px; }
.clb-mark.is-sm .clb-tag { font-size: 9.5px; letter-spacing: .07em; }

/* ── On a dark or tinted ground ───────────────────────────────────────────── */
/* ⚠ --ink-tertiary IS A PAGE INK AND IT DISAPPEARS INTO THE TINTED ROW. The viewer's own row,
   the takeover's navy card and the selected states all repaint their own ink; the tag has to
   follow them or it is the one thing on the row that stays the page's colour. `currentColor` at
   reduced opacity follows whatever the row set, which is one rule instead of five. */
.is-me > .clb-mark > .clb-tag,
.is-me .clb-mark > .clb-tag,
.ev-res .clb-tag,
.tko .clb-tag { color: currentColor; opacity: .72; }

/* On navy the avatar's own ground has too little contrast against the card behind it, which is
   the same mix takeover.css makes for .ev-av. */
.ev-res .clb-logo,
.tko .clb-logo { background: color-mix(in srgb, var(--cream) 22%, transparent); color: var(--cream); }

/* ── Bare: the logo without its four characters ────────────────────── */
/* ⚠ ONE CALLER, AND IT HAS TO JUSTIFY ITSELF EVERY TIME: the CLOSED court card, where a corner
   is 84px wide and the full mark is 44px of it. event.js carries the measurement and the reason
   the tag can be dropped there — the drawing's aria-label names the club in words, and opening
   the card brings the four characters back along with the rank and the rating.
   ⚠ DO NOT REACH FOR THIS TO SAVE SPACE ANYWHERE ELSE. A logo with no word beside it is the
   code-to-learn DESIGN.md §2 refuses; it is allowed on that one card because the same tap that
   widens the corner is the tap that decodes it. */
.clb-mark.is-bare { gap: 0; }
.clb-mark.is-bare .clb-tag { display: none; }

/* ═══ ACCESSIBILITY ═════════════════════════════════════════════════════════ */

/* ⚠ prefers-contrast, NOT a permanent border. The tile is a filled shape at rest; an outline on
   every mark in a sixty-row queue is sixty extra edges. Turned on, the badge gains the edge that
   separates it from a card of a similar value, and the tag stops being tertiary ink. */
@media (prefers-contrast: more) {
  .clb-logo { box-shadow: inset 0 0 0 1px var(--ink); }
  .clb-tag { color: var(--ink); }
}