/* ============================================================
   CHOICE — checkbox and radio, Figma 68:5644
   ------------------------------------------------------------
       <label class="ice-choice">
         <input type="checkbox"><span class="ice-choice__box"></span>
         Checkbox
       </label>

   One indicator, two shapes, two sizes, two states. The shape is
   the only difference between a checkbox and a radio: square with
   a 6/9 radius, or a circle.

   The glyph is `check` in BOTH shapes — a circle-check inside a
   round radio would draw the circle twice.

   Four states, and hover is a real one — Figma 74:6361.

     unchecked          secondary-2   + inner-m
     unchecked hover    dark-low      + inner-m strong
     checked            dark-medium   + inner-m strong
     checked hover      highlight-ink + inner-m strong

   Hovering also turns the label AND the row's icon link blue,
   whether the box is checked or not. All inner shadows keep the
   lit lip they carry.
   ============================================================ */

.ice-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--_gap);
  cursor: pointer;

  font-size: var(--_fs);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-m-leading);
  letter-spacing: var(--type-body-m-track);
  color: var(--fg-medium);
  transition: color var(--dur-fast) var(--ease-out);

  /* default size = m */
  --_size: 24px; --_radius: var(--radius-6);
  --_gap: var(--space-12); --_fs: var(--type-body-m-size);
}

.ice-choice[data-size="m"] {
  --_size: 24px; --_radius: var(--radius-6);
  --_gap: var(--space-12); --_fs: var(--type-body-m-size);
}
.ice-choice[data-size="l"] {
  --_size: 28px; --_radius: var(--radius-9);
  --_gap: var(--space-16); --_fs: var(--type-body-l-size);
}

/* The native input drives the state and stays reachable. */
.ice-choice > input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}

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

  inline-size: var(--_size);
  block-size:  var(--_size);
  border-radius: var(--_radius);

  background-image: var(--elev-secondary-2-image);
  box-shadow: var(--shadow-inner-m);
  backdrop-filter: blur(var(--shadow-inner-m-blur));
  -webkit-backdrop-filter: blur(var(--shadow-inner-m-blur));

  color: transparent;
  transition: background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ice-choice__box > .ice-icon {
  inline-size: var(--icon-s);
  block-size:  var(--icon-s);
  /* The one place the icon stroke is set by hand: the check reads
     too thin at 16 inside a filled box. Judi's call, Figma 74:6361. */
  stroke-width: 2;
}

.ice-choice[data-shape="circle"] .ice-choice__box { border-radius: var(--radius-full); }

.ice-choice > input:checked ~ .ice-choice__box {
  background-image: var(--elev-dark-medium-image);
  box-shadow: var(--shadow-inner-m-strong);
  color: var(--white);
}

/* A checked radio cannot be unchecked, so it offers no hover and
   no pointer. A checkbox keeps both. */
.ice-choice:has(> input[type="radio"]:checked) { cursor: default; }

/* --- Hover — one step brighter, checked or not --------------- */
.ice-choice:hover:not(:has(> input[type="radio"]:checked)) > input:not(:disabled) ~ .ice-choice__box {
  background-image: var(--elev-dark-low-image);
  box-shadow: var(--shadow-inner-m-strong);
}
.ice-choice:hover > input[type="checkbox"]:checked:not(:disabled) ~ .ice-choice__box {
  background-image: var(--elev-highlight-ink-image);
}
.ice-choice:hover:not(:has(> input:disabled)):not(:has(> input[type="radio"]:checked)) { color: var(--fg-link); }
.ice-choice:hover:not(:has(> input:disabled)):not(:has(> input[type="radio"]:checked)) .ice-choice__icon {
  color: var(--fg-link);
  opacity: 1;
}

/* A checked row promotes its label. */
.ice-choice:has(> input:checked) {
  color: var(--fg-high);
  font-weight: var(--weight-medium);
}

.ice-choice > input:focus-visible ~ .ice-choice__box { box-shadow: var(--shadow-inner-m), var(--focus-ring); }
.ice-choice:has(> input:disabled) { opacity: .5; pointer-events: none; }

/* An icon between the indicator and the label. */
.ice-choice__icon {
  inline-size: var(--icon-m);
  block-size:  var(--icon-m);
  flex-shrink: 0;
  margin-inline-end: calc(var(--_gap) - var(--space-8));
  color: var(--accent-strong);
  opacity: .8;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* ------------------------------------------------------------
   The bare form
   ------------------------------------------------------------
   The screens use a single element carrying the state:

       <span class="ice-choice" data-checked><i data-icon="check"></i></span>

   No input, nothing to label — it is a state read from data, not a
   control. Same look, so the two forms are interchangeable and a
   screen can move to the labelled one without a visual change.
   ------------------------------------------------------------ */
.ice-choice:not(:has(.ice-choice__box)) {
  justify-content: center;
  inline-size: var(--_size);
  block-size:  var(--_size);
  border-radius: var(--_radius);

  background-image: var(--elev-secondary-2-image);
  box-shadow: var(--shadow-inner-m);
  backdrop-filter: blur(var(--shadow-inner-m-blur));
  -webkit-backdrop-filter: blur(var(--shadow-inner-m-blur));
  color: transparent;
  transition: background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ice-choice:not(:has(.ice-choice__box))[data-shape="circle"] { border-radius: var(--radius-full); }
.ice-choice:not(:has(.ice-choice__box)) > .ice-icon {
  inline-size: var(--icon-s);
  block-size:  var(--icon-s);
  stroke-width: 2;
}
.ice-choice:not(:has(.ice-choice__box))[data-checked] {
  background-image: var(--elev-dark-medium-image);
  box-shadow: var(--shadow-inner-m-strong);
  color: var(--white);
}
.ice-choice:not(:has(.ice-choice__box)):hover {
  background-image: var(--elev-dark-low-image);
  box-shadow: var(--shadow-inner-m-strong);
}
.ice-choice:not(:has(.ice-choice__box))[data-checked]:hover {
  background-image: var(--elev-highlight-ink-image);
}