/* ============================================================
   DECK — the digest, one signal at a time. Figma 47:3207
   ------------------------------------------------------------
   The brief is no longer a feed. It is a small stack of cards you
   move through: the one in front is the whole signal, the rest are
   what is left. That is the UX change the redesign is built
   around, so the layout carries it rather than the card.

       <div class="ice-deck" data-deck>
         <article class="ice-deck__card ice-glass" data-active>…</article>
         <article class="ice-deck__card ice-glass">…</article>
         …
         <button class="ice-deck__arrow" data-dir="prev">…</button>
       </div>

   THERE ARE NO DECORATIVE GHOSTS. Every card in the stack is a real
   signal — the ones behind are the ones you have not read yet. What
   makes the pile work is a one-cell grid:

     · every card is placed in the same cell, so they overlap
     · the cell stretches them all to the tallest, and the only card
       with any content is the front one — so the pile is exactly as
       tall as what you are reading, and never a pixel more
     · the width is the column's, so it is the same for all of them

   js/deck.js writes data-depth (0 = in front) and the z-index. The
   look of each rung is here, because it is a look.
   ============================================================ */

.ice-deck {
  position: relative;
  display: grid;
  inline-size: 100%;
}

/* --- A card --------------------------------------------------- */
.ice-deck__card {
  grid-area: 1 / 1;              /* one cell, every card in it */
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  border-radius: var(--radius-20);
  /* Elevation 2's glass, but carrying shadow M — it has to lift off
     the cards behind it, not off the page. */
  box-shadow: var(--shadow-m);

  /* --ease-out is the expo curve: it leaves fast and settles slowly,
     which is what makes a pile of cards feel like weight rather than
     like a fade. */
  transition: opacity var(--dur-slow) var(--ease-out),
              rotate  var(--dur-slow) var(--ease-out);
}

/* --- The rungs of the pile -----------------------------------
   Distance from the front, not position in the list: card 4 is one
   step behind card 3 whether you got there forwards or backwards.
   Past the third rung there is nothing to show — a pile of forty
   would still read as three. */
.ice-deck__card[data-depth="0"] { opacity: 1;  rotate: 0deg;  }
.ice-deck__card[data-depth="1"] { opacity: .6; rotate: -2deg; }
.ice-deck__card[data-depth="2"] { opacity: .4; rotate: 2deg;  }
.ice-deck__card[data-depth="3"] { opacity: 0;  rotate: 0deg;  }

/* Only the front card is readable, clickable and reachable. The
   others keep their box and lose their contents — which is what
   lets the grid cell take its height from the front card alone. */
.ice-deck__card:not([data-depth="0"]) {
  pointer-events: none;
}
.ice-deck__card:not([data-depth="0"]) > * { display: none; }

/* --- A card being passed over --------------------------------
   Navigating turns the pile over: the card in front slides off the
   way you pressed, fades out, and settles back into the stack as an
   ordinary card behind. Nothing leaves the deck — leaving is a
   verdict, not a move.

   Declared AFTER the rungs so it outranks them at equal weight, and
   before the leaving rules so a verdict still wins.               */
.ice-deck__card[data-passing] {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in),
              translate var(--dur-base) var(--ease-in),
              rotate var(--dur-base) var(--ease-in);
}
.ice-deck__card[data-passing="right"] { translate:  45% 0; }
.ice-deck__card[data-passing="left"]  { translate: -45% 0; }

/* --- A card leaving ------------------------------------------
   A verdict throws the card off the table: left for a signal you
   are done with, right for one you are keeping. It keeps its
   contents on the way out — you have to see WHICH card left — so
   it is flagged rather than demoted, and js/deck.js removes it once
   it has gone.

   These are the only numbers on this page that are not measured
   from Figma: there is no motion spec, so the throw is mine. */
.ice-deck__card[data-leaving] {
  pointer-events: none;
  z-index: 10;                       /* over the pile on the way out */
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-in),
              translate var(--dur-slow) var(--ease-in),
              rotate var(--dur-slow) var(--ease-in);
}
.ice-deck__card[data-leaving] > * { display: revert; }
.ice-deck__card[data-leaving="left"]  { translate: -60% 25%; rotate: -14deg; }
.ice-deck__card[data-leaving="right"] { translate:  60% 25%; rotate:  14deg; }

/* Nothing left to judge. The arrows and the verdicts go with it —
   there is no card for them to act on. */
.ice-deck[data-empty] { min-block-size: var(--w-150); }
.ice-deck[data-empty] ~ .ice-deck__actions,
.ice-deck[data-empty] .ice-deck__arrow { display: none; }

/* --- The arrows ----------------------------------------------
   Held clear of the card in the gutter, centred on it. */
.ice-deck__arrow {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
}
.ice-deck__arrow[data-dir="prev"] { inset-inline-end: calc(100% + var(--space-40)); }
.ice-deck__arrow[data-dir="next"] { inset-inline-start: calc(100% + var(--space-40)); }

/* --- The row of verdicts ------------------------------------- */
.ice-deck__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.ice-deck__actions .ice-btn[data-primary-width] { inline-size: var(--w-180); }

/* --- The counter --------------------------------------------- */
.ice-deck__count {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-12);
  padding-block: var(--space-2);
  border-radius: var(--radius-full);
  background-image: var(--elev-secondary-0-image);

  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-leading);
  letter-spacing: var(--type-body-xs-track);
  color: var(--fg-medium);
}
.ice-deck__count b { font-weight: var(--weight-semibold); color: var(--fg-high); }
.ice-deck__count span { opacity: .7; }

/* --- The parts of a signal card ------------------------------ */
.ice-signal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.ice-signal__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.ice-signal__date {
  font-size: var(--type-body-s-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-medium);
  opacity: .8;
}

.ice-signal__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.ice-signal__title {
  font-size: var(--type-h4-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-track);
  color: var(--ice-grey-900);
}
.ice-signal__body {
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-leading);
  letter-spacing: var(--type-body-l-track);
  color: var(--ice-grey-700);
}

.ice-signal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.ice-signal__scores {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.ice-signal__scores .ice-gauge { inline-size: 60px; }

/* --- "Pourquoi ?" — the reason panel ------------------------- */
.ice-signal__why {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-inline: var(--space-16);
  padding-block: var(--space-12);
  /* Drawn 10 — not one of Judi's radius variables, so it is written
     out rather than snapped to 9. Figma 47:3424. */
  border-radius: 10px;
  background-image: var(--elev-secondary-0-image);
}
.ice-signal__why-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.ice-signal__why-head > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.ice-signal__why p {
  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);
}