/* ladder.css: owned by the panel worker (065/004), design package §9 (You decide: the ladder). */

/*
  A panel (radius 22) split in two: the controls at the inline-start, the iPhone (devices.css)
  with the phone kit's screen (phone.css) at the inline-end, at up to 0.85 of the iPhone's size
  (a 393pt screen) on wide and medium screens and up to 0.72 on narrow ones, where the controls
  sit above it. The phone is capped so the panel fits in 100svh - 96px (on narrow screens, the
  phone's part of it), down to 0.6; ladder.js measures what the column holds besides the phone
  (--control-rest). It also drives the radio group: it sets aria-checked and the roving
  tabindex, shows the chosen level's screen (the others are [hidden]) and marks its caption
  .is-on.
  The captions share one grid cell, so the caption's height is the longest one's and nothing
  below moves when the level changes. Without JS the radio group is hidden and the HTML's
  state, "Prepare, I approve", shows.
*/

/* Round 2 (065/010): the panel is frost (.frost in layout.css: Surface 1 at 72%, blurred, a
   hairline), so the background arc glows softly through it; the phone side is brighter glass,
   Surface 2 at 55%, its outer corners following the panel's. */
.control__ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.control__controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-inline-end: 1px solid var(--hairline);
  container-type: inline-size;
}

/* ---------- The radio group: a segmented pill, the checked level filled Ivory ---------- */
.control__levels {
  display: flex;
  align-self: flex-start;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}
.control__level {
  min-height: 40px;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ash);
  font: 500 0.875rem / 1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
/* Hover brightens only the levels that are not chosen: on the chosen one it would turn the
   label Ivory on its Ivory pill. */
.control__level:not([aria-checked='true']):hover {
  color: var(--ivory);
}
.control__level[aria-checked='true'] {
  background: var(--ivory);
  color: var(--night);
}
/* Too narrow for one row: a 2 × 2 grid (Russian and Arabic labels run longer). */
@container (max-width: 34rem) {
  :root:lang(ru) .control__levels,
  :root:lang(ar) .control__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    border-radius: 18px;
  }
  :root:lang(ru) .control__level,
  :root:lang(ar) .control__level {
    padding: 6px 0.625rem;
    border-radius: 14px;
    white-space: normal;
    text-wrap: balance;
  }
}
@container (max-width: 31rem) {
  .control__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    border-radius: 18px;
  }
  .control__level {
    padding: 6px 0.625rem;
    border-radius: 14px;
    white-space: normal;
    text-wrap: balance;
  }
}
html:not(.js) .control__levels {
  display: none;
}
.control__note {
  max-width: 28em;
  margin-block-start: 1.5rem;
  color: color-mix(in srgb, var(--ivory) 78%, transparent);
  font-size: 0.9375rem;
}

/* ---------- The phone and its caption ---------- */
.control__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
  border-start-end-radius: calc(var(--radius-lg) - 1px);
  border-end-end-radius: calc(var(--radius-lg) - 1px);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
/* The iPhone's screen is 89.781% of the device's width (devices.css): at scale 1 the device is
   393px / 0.89781 wide, and 2228 / 1096 times as tall as it is wide. Its width is the largest
   that keeps the column (the phone, its caption, the gap, the padding and the panel's borders:
   --control-rest) within 100svh - 96px, between 0.6 and --control-max, and never wider than
   the column. */
.control__phone {
  --control-max: 0.85;
  --control-u: calc(393px / 0.89781);
  flex: none;
  max-width: 100%;
  width: max(
    0.6 * var(--control-u),
    min(
      var(--control-max) * var(--control-u),
      (100vh - 96px - var(--control-rest, 10rem)) * 1096 / 2228
    )
  );
  width: max(
    0.6 * var(--control-u),
    min(
      var(--control-max) * var(--control-u),
      (100svh - 96px - var(--control-rest, 10rem)) * 1096 / 2228
    )
  );
}
@media (prefers-reduced-motion: no-preference) {
  .control__state:not([hidden]) {
    animation: control-rise 0.4s var(--ease-out);
  }
}
@keyframes control-rise {
  from {
    opacity: 0;
    transform: translateY(calc(12 * var(--ph-u)));
  }
}
.control__caption {
  display: grid;
  max-width: 22rem;
  color: var(--ash);
  font-size: var(--fs-caption);
  text-align: center;
}
.control__cap {
  grid-area: 1 / 1;
}
.control__cap:not(.is-on) {
  visibility: hidden;
}

/* ---------- Narrow: the controls above the phone ---------- */
@media (max-width: 720px) {
  .control__ladder {
    grid-template-columns: minmax(0, 1fr);
  }
  .control__controls {
    border-inline-end: 0;
    border-block-end: 1px solid var(--hairline);
  }
  .control__demo {
    border-start-end-radius: 0;
    border-end-start-radius: calc(var(--radius-lg) - 1px);
  }
  .control__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    border-radius: 18px;
  }
  .control__level {
    min-height: 44px;
    padding: 6px 0.625rem;
    border-radius: 14px;
    white-space: normal;
    text-wrap: balance;
  }
  .control__phone {
    --control-max: 0.72;
  }
}