/* ============================================================
   CARD
   ------------------------------------------------------------
       <article class="ice-card ice-glass">…</article>
       <label   class="ice-card ice-glass" data-selectable data-selected>…</label>
       <article class="ice-card ice-glass" data-elevation="1" data-read>…</article>

   ONE card absorbs all of these from the designs:
     · onboarding option cards (Hebdomadaire / Quotidienne)
     · onboarding step-2 category cards
     · article cards in the digest, light and dark

   They differed only in radius and padding, which are now size
   variants, and in glass strength, which is data-elevation.

   The "read" article (the one carrying the VU badge) is not a
   variant — it is elevation 0 plus a dimmed title.
   ============================================================ */

.ice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-16);
  position: relative;
  color: var(--fg-medium);
}

/* The stacked option card is the roomier one. Figma 68:5644. */
.ice-card[data-size="lg"] { padding: var(--space-16); }

/* --- Selectable ---------------------------------------------
   Figma 68:5644.

     unselected          elevation secondary-0, no stroke, no shadow
     unselected hover    elevation 3 + Highlight shadow
     selected            elevation 3, ring accent
     selected hover      elevation 4 + Highlight, ring vivid-blue-400

   UNSELECTED IS THE BLUE WASH, not white glass. White reads as a
   card on the photographic veil and as nothing at all on a light
   panel; secondary-0 holds on both. That is the whole point of the
   change — one card, any backdrop.

   Hover also turns the title link blue and carries the indicator
   with it, at every combination.

   THE WHOLE CARD IS THE CONTROL: it is a <label> holding the input,
   so a click anywhere on it selects or deselects. No JavaScript.
   `data-selected` stays supported for a card rendered from data.  */
.ice-card[data-selectable] {
  cursor: pointer;
  transition: outline-color var(--dur-fast) var(--ease-out),
              background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  outline: var(--select-ring-width) solid transparent;
  outline-offset: 0;

  --_image:      var(--elev-secondary-0-image);
  --_border:     var(--elev-secondary-0-border);
  --_border-lit: var(--elev-secondary-0-border-lit);
  --_shadow:     var(--elev-secondary-0-shadow);
  --_blur:       var(--shadow-s-blur);

  /* The ring is RESERVED, not absent. secondary-0 draws no stroke,
     but hover and selection both add one — and with box-sizing:
     border-box a width going 0 → 1 pulls the content in by a pixel
     on every edge. Keeping the 1px here with the elevation's
     transparent colour costs nothing to look at and stops the jump.
     secondary-0 has no inset shadow to be held off the edge. */
  --_border-w:   var(--border-w);
}

/* The input is the state. Kept reachable by keyboard. */
.ice-card__input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}

/* --- Selected ----------------------------------------------- */
.ice-card[data-selectable][data-selected],
.ice-card[data-selectable]:has(> .ice-card__input:checked) {
  outline-color: var(--select-ring-color);
  --_image:      var(--elev-primary-3-image);
  --_border:     var(--elev-primary-3-border);
  --_border-lit: var(--elev-primary-3-border-lit);
  --_border-w:   var(--elev-primary-3-border-w);
  --_shadow:     var(--elev-primary-3-shadow);
  --_blur:       var(--elev-primary-3-blur);
}

/* A checked RADIO card has no move left: clicking it again cannot
   deselect it. So it drops the hover entirely and stops offering
   the pointer. Checkboxes keep both — they can be unticked. */
.ice-card[data-selectable]:has(> .ice-card__input[type="radio"]:checked) {
  cursor: default;
}

/* --- Hover, unselected -------------------------------------- */
.ice-card[data-selectable]:hover:not(:has(> .ice-card__input[type="radio"]:checked)) {
  --_image:      var(--elev-primary-3-image);
  --_border:     var(--elev-primary-1-border);
  --_border-lit: var(--elev-primary-1-border-lit);
  --_shadow:     var(--shadow-highlight);
  --_blur:       var(--shadow-highlight-blur);
}

/* --- Hover, selected ---------------------------------------- */
.ice-card[data-selectable][data-selected]:hover,
.ice-card[data-selectable]:has(> .ice-card__input[type="checkbox"]:checked):hover {
  outline-color: var(--select-ring-hover);
  --_image:      var(--elev-primary-4-image);
  --_border:     var(--elev-primary-4-border);
  --_border-lit: var(--elev-primary-4-border-lit);
  --_border-w:   var(--elev-primary-4-border-w);
  --_shadow:     var(--shadow-highlight);
  --_blur:       var(--shadow-highlight-blur);
}

.ice-card[data-selectable]:hover:not(:has(> .ice-card__input[type="radio"]:checked)) .ice-card__title {
  color: var(--fg-link);
}

/* The indicator follows the card, not just its own hover. */
.ice-card[data-selectable]:hover:not(:has(> .ice-card__input[type="radio"]:checked)) .ice-choice__box,
.ice-card[data-selectable]:hover:not(:has(> .ice-card__input[type="radio"]:checked)) > .ice-choice:not(:has(.ice-choice__box)) {
  background-image: var(--elev-dark-low-image);
  box-shadow: var(--shadow-inner-m-strong);
}
.ice-card[data-selectable][data-selected]:hover > .ice-choice:not(:has(.ice-choice__box)),
.ice-card[data-selectable]:has(> .ice-card__input[type="checkbox"]:checked):hover .ice-choice__box {
  background-image: var(--elev-highlight-ink-image);
}
/* A card whose input is checked drives its own indicator. */
.ice-card[data-selectable]:has(> .ice-card__input:checked) .ice-choice__box {
  background-image: var(--elev-dark-medium-image);
  box-shadow: var(--shadow-inner-m-strong);
  color: var(--white);
}

/* An unselected card drains its chip back to the default style —
   the hue is the reward for picking it. Written here rather than
   in the chip, because it is the CARD's state that decides. */
.ice-card[data-selectable]:not([data-selected]):not(:has(> .ice-card__input:checked)) .ice-chip[data-style="filled"] {
  background-image: linear-gradient(var(--glass-dir), var(--chip-fill-from), var(--chip-fill-to));
  border-color: var(--chip-border-lit) var(--chip-border-lit)
                var(--chip-border)     var(--chip-border);
  color: var(--chip-fg);
  opacity: .8;
  text-shadow: none;
}

/* The indicator floats in the top-right corner of a stacked card,
   and rides at the end of the row in a row card. */
.ice-card > .ice-choice {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-end: var(--space-20);
}
.ice-card[data-layout="row"] > .ice-choice { position: static; align-self: center; }

/* --- Read / seen ------------------------------------------- */
.ice-card[data-read] .ice-card__title { opacity: .8; }

/* --- Parts -------------------------------------------------- */
.ice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  inline-size: 100%;
}

/* Body-L Medium, not a title style: 16 at 1.5, the same leading as
   the description under it. No legibility shadow — the card is its
   own surface, the text is not sitting on the photograph.
   Figma 68:5644. */
.ice-card__title {
  font-size: var(--type-body-l-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-body-l-leading);
  letter-spacing: var(--type-body-l-track);
  color: var(--fg-high);
}

.ice-card__body {
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-medium);
}

.ice-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* ============================================================
   CARD RAIL — per-card quick actions
   ------------------------------------------------------------
       <article class="ice-card ice-glass">
         …
         <div class="ice-rail">
           <button class="ice-icon-btn ice-tooltip"
                   data-tooltip="Ignorer" data-tooltip-at="left"
                   aria-label="Ignorer">…</button>
         </div>
       </article>

   Sits just outside the card's right edge, vertically centred, and
   only appears while the card is hovered or holds keyboard focus.

   `visibility` is animated alongside `opacity` so the buttons are
   genuinely non-interactive when hidden — opacity alone would leave
   them clickable and in the tab order.
   ============================================================ */
.ice-rail {
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;

  /* The offset from the card is PADDING, not margin, so the rail's
     hit area starts flush against the card edge. With a margin there
     is a dead gap: the pointer leaves the card, the card loses
     :hover, and the rail disappears before you can reach it. */
  padding-inline-start: var(--space-12);

  display: flex;
  flex-direction: column;
  gap: var(--space-8);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity    var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-fast);
}

.ice-card:hover > .ice-rail,
.ice-card:focus-within > .ice-rail {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

/* Below this width there is no gutter to put it in. */
@media (max-width: 1279px) {
  .ice-rail { display: none; }
}

/* A row layout for cards with a leading tile (onboarding step 2). */
.ice-card[data-layout="row"] {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-12);
}
.ice-card[data-layout="row"] .ice-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 0 0;
  min-inline-size: 0;
}

/* The stacked option card sets its pair tighter. */
.ice-card[data-size="lg"] { gap: var(--space-2); }