/*
 * The app bar (AppBar.js) — the white card with the wordmark in it that every
 * screen carries at the top. The home header wears it with the filter button
 * and search; the player page with a back arrow, search and a follow star.
 *
 * These rules were header.css's until the bar became shared. What stays in
 * header.css is the filter button's own states, which are the home screen's
 * alone; what lives here is the card, the wordmark, and how a control sits
 * inside the card — the parts that must be identical on every screen for the
 * bar to read as the same bar.
 *
 * --radius-lg for the same reason it is the date strip's: a bar with a
 * left-aligned wordmark in it is a block, and a full stadium would taper into
 * the text at either end.
 */
.app-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline: var(--space-3);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
}

/* The two groups either side of the wordmark. The trailing one is pushed to
   the far edge as a unit, whatever the wordmark's width turns out to be. */
.app-bar__leading,
.app-bar__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-bar__leading:empty {
  display: none;
}

.app-bar__trailing {
  margin-inline-start: auto;
}

/*
 * .icon-btn is a white chip built to lift off the page. Inside the bar,
 * which is that same white, its fill has nothing to lift off of, and its
 * border would draw a box around every glyph — so both are stripped and the
 * bar is left as the only card. The press fill stays: it is the one part of
 * the chip still doing work here.
 */
.app-bar .icon-btn {
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  box-shadow: none;
}

.app-bar .icon-btn:active {
  background: var(--surface-sunken);
}

/* --- Wordmark --------------------------------------------------------------- */

.wordmark {
  /* One knob: the mark's height, which the wordmark's own size is tuned to. */
  --mark-height: 22px;

  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

/*
 * The mark is painted, not embedded. assets/logo.svg is a single path filled
 * with `currentColor`, and inside an <img> that resolves against the SVG's own
 * document — i.e. to black — with no way for this page to reach it. Used as a
 * mask the file stays the one source of truth for the shape while `background`
 * decides the colour, which is how it picks up the same brand blue as the
 * "Ai" beside it.
 *
 * `--color-primary` rather than `--accent`, and that is deliberate: the player
 * page re-points `--accent` to the club's colour, and the wordmark is the one
 * thing on that page that must stay the brand's. A logo that changed colour
 * with the club would be a different logo on every player.
 */
.wordmark__mark {
  flex: none;
  /* logo.svg's viewBox is 25 x 50 — half as wide as it is tall. */
  width: calc(var(--mark-height) / 2);
  height: var(--mark-height);
  background: var(--color-primary);
  -webkit-mask: url("../../assets/logo.svg") no-repeat center / contain;
  mask: url("../../assets/logo.svg") no-repeat center / contain;
}

.wordmark__text {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  /* Tightened so the two halves of the name read as one word, not as a
     product name with a suffix bolted on. */
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* The one place the primary is used as type rather than as a signal — it is
   part of the mark here, not a state. Same token as the mark, for the same
   reason. */
.wordmark__ai {
  color: var(--color-primary);
}