/* ===========================================================================
 * F01 Card · F05 IconTile · F06 Divider · F07 Chip · F08 Thumbnail.
 *
 * The wash stack is the whole depth model (§2.2, §6). A card is --surface-1;
 * a card inside a card is --surface-2; a chip inside that is --surface-3, and
 * because each is translucent white the third one lands near 21% effective
 * white without any of them naming a colour. Nothing here is a flat fill and
 * nothing here has a shadow.
 *
 * `.surface` in shells.css is the minimum the token page needed to prove the
 * gradient composites. `.ui-card` is the component: same wash, plus the
 * padding, the header slot and the platform radius split (D16).
 * ======================================================================== */

.ui-card {
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* D16 — 12px on the player surface. Committed to, not an oversight. */
.shell--player .ui-card,
.ui-card--mobile { border-radius: var(--radius-md); }

/* A panel is a card with more room — the wizard's 622px content column. */
.ui-card--panel { padding: var(--space-6); }
.ui-card--flush { padding: 0; overflow: hidden; }

/* A titled flush card keeps its title inset: it sat on the card's corner,
   against the radius, with no padding at all (D177). */
.ui-card--flush > .ui-card__header {
  margin-bottom: 0;
  padding: var(--space-4) var(--space-5);
}

/* Nested: one wash level up, and always the smaller radius regardless of
   shell — a 16px radius inside a 16px radius reads as a mistake. */
.ui-card--nested {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ui-card--interactive { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.ui-card--interactive:hover { background: var(--surface-2); }
.ui-card--interactive:focus-visible { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); }

/* Selected: the gold border at 100%, one wash level up. This pair — border
   plus a lift — is the ONLY selection language in the system (§2.3). */
.ui-card--selected {
  border-color: var(--gold-100);
  background: var(--surface-2);
}

.ui-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ui-card__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.ui-card__action { margin-left: auto; }

.ui-card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--divider);
}

/* --- F05 Icon tile ------------------------------------------------------
 * Two sizes and two treatments. The 40px gold-gradient tile was §7's brand
 * mark; the shells now carry troph-e.app's logo instead (layouts/_brand_lockup).
 * The 45px surface tile is card-header decoration and carries a gold OUTLINE
 * glyph, not a filled one.
 * --------------------------------------------------------------------- */
.ui-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex: none;
}

.ui-icon-tile--brand {
  width: var(--icon-tile-size);
  height: var(--icon-tile-size);
  background: var(--gradient-gold);
  color: var(--text-on-gold);
}

.ui-icon-tile--section {
  width: var(--icon-decorative-size);
  height: var(--icon-decorative-size);
  background: var(--surface-2);
  color: var(--text-gold);
}

/* --- F06 Divider -------------------------------------------------------- */
.ui-divider {
  border: 0;
  border-top: var(--border-width) solid var(--divider);
  margin: 0;
}

.ui-divider--spaced { margin: var(--space-4) 0; }

/* --- F07 Chip — a stat pill. --surface-2, pill, 13px.
       13px is not on the type scale: it is the one size the mocks use for
       chips and nothing else, and it is here rather than in tokens.css as a
       named type role because it is a component detail, not a role. ------- */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
}

.ui-chip__value { font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* A chip that is a LINK — the Player Profile's year filter (D111). The
   transparent border is load-bearing: `--current` below adds a gold one, and
   without a border in the resting state the whole row would shift by 2px the
   moment a year is chosen. */
.ui-chip--link {
  border: var(--border-width) solid transparent;
  text-decoration: none;
}

/* D28: hover and active change the FILL, never the opacity. */
.ui-chip--link:hover,
.ui-chip--link.is-hover {
  background: var(--gold-wash-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.ui-chip--link:active,
.ui-chip--link.is-active {
  background: var(--gold-wash-active);
  color: var(--text-primary);
}

/* D30: the ring is GOLD here, because the chip is a neutral --surface-2 tile
   and not a gold fill. `outline-color` is a separate declaration and is the
   whole point of this block — without it the shorthand resolves to the white
   ring, which is base.css's global fallback and is what every other neutral
   component in this library overrides. */
.ui-chip--link:focus-visible,
.ui-chip--link.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

/* The filter in force. Gold wash and a gold border rather than a heavier fill:
   this is a selected tile, and --gold-wash-selected is the token the rest of
   the system already uses for one. */
.ui-chip--current {
  background: var(--gold-wash-selected);
  border-color: var(--gold-rest);
  color: var(--text-primary);
}

/* AND THE SELECTED CHIP MUST NOT DIM UNDER THE CURSOR. `--gold-wash-hover` is
   8% and `--gold-wash-selected` is 13%, so without this rule the plain
   `.ui-chip--link:hover` above out-specifies `--current` and the filter in
   force visually de-selects itself when you point at it. Active goes one
   further, so the order stays rest < hover < selected < selected-hover. */
.ui-chip--current:hover,
.ui-chip--current.is-hover {
  background: var(--gold-wash-active);
}

/* --- F08 Thumbnail ------------------------------------------------------
 * Trophy renders sit on a near-black plate; club crests sit on a cream one —
 * the single light surface in the whole system, and the only place a light
 * background is correct. Both are CONTENT plates, not chrome.
 * --------------------------------------------------------------------- */
.ui-thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: none;
  display: block;
  object-fit: cover;
  background: var(--surface-2);
}

.ui-thumb--sm { width: var(--thumb-sm); height: var(--thumb-sm); }
.ui-thumb--md { width: var(--thumb-md); height: var(--thumb-md); }
.ui-thumb--crest {
  border-radius: var(--radius-pill);
  background: var(--plate-crest);
}
.ui-thumb--render { background: var(--plate-render); }