/* ============================================================
   TILE — category icon tile
   ------------------------------------------------------------
       <span class="ice-tile" data-category="concurrence">
         <svg …>                       <!-- lucide, 20px -->
       </span>

   The 44px rounded square holding a category's icon in onboarding
   step 2. Two states:

     selected    the category's own gradient (yellow→coral etc.)
     unselected  plain white glass, no category colour

   Same duotone logic as the chip: a base gradient plus two radial
   glows, one from each corner.
   ============================================================ */

.ice-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  inline-size: var(--tile-size);
  block-size:  var(--tile-size);
  border-radius: var(--radius-9);
  border: 1px solid rgb(255 255 255 / .5);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  color: var(--fg-high);

  /* At rest the tile is plain glass at level 3 — measured identical
     to the sidebar fill in 51:5295. */
  background-image: var(--elev-primary-3-image-inv);
}

.ice-tile > svg,
.ice-tile > img {
  inline-size: var(--icon-m);
  block-size:  var(--icon-m);
}

/* --- Selected: the category gradient -----------------------
   Either written on the tile, or inherited from a selected card —
   the card is a <label> holding the input, so the state is read
   with :has() and nothing has to be mirrored onto the tile. */
.ice-tile[data-selected],
.ice-card[data-selectable]:has(> .ice-card__input:checked) .ice-tile {
  background-image:
    radial-gradient(100% 100% at 0% 100%,
      color-mix(in srgb, var(--tile-glow-a) 50%, transparent) 0%, transparent 100%),
    radial-gradient(100% 100% at 100% 0%,
      color-mix(in srgb, var(--tile-glow-b) 50%, transparent) 0%, transparent 100%),
    linear-gradient(var(--glass-dir-inv), var(--tile-from), var(--tile-to));
}

.ice-tile[data-category="concurrence"] {
  --tile-from:   var(--cat-concurrence-tile-from);
  --tile-to:     var(--cat-concurrence-tile-to);
  --tile-glow-a: var(--cat-concurrence-tile-glow-a);
  --tile-glow-b: var(--cat-concurrence-tile-glow-b);
}
.ice-tile[data-category="techno"] {
  --tile-from:   var(--cat-techno-tile-from);
  --tile-to:     var(--cat-techno-tile-to);
  --tile-glow-a: var(--cat-techno-tile-glow-a);
  --tile-glow-b: var(--cat-techno-tile-glow-b);
}
.ice-tile[data-category="ecosysteme"] {
  --tile-from:   var(--cat-ecosysteme-tile-from);
  --tile-to:     var(--cat-ecosysteme-tile-to);
  --tile-glow-a: var(--cat-ecosysteme-tile-glow-a);
  --tile-glow-b: var(--cat-ecosysteme-tile-glow-b);
}
.ice-tile[data-category="marche"] {
  --tile-from:   var(--cat-marche-tile-from);
  --tile-to:     var(--cat-marche-tile-to);
  --tile-glow-a: var(--cat-marche-tile-glow-a);
  --tile-glow-b: var(--cat-marche-tile-glow-b);
}
.ice-tile[data-category="signal"] {
  --tile-from:   var(--cat-signal-tile-from);
  --tile-to:     var(--cat-signal-tile-to);
  --tile-glow-a: var(--cat-signal-tile-glow-a);
  --tile-glow-b: var(--cat-signal-tile-glow-b);
}