/* =========================================================
   UI-Element-Container-Picker-Screen — card-media composition.
   WordPress variant of assets/Startpage Card Screens/
   UI-Element-Container-Picker-Screen.html (published by
   startpage-card-scenes/register.php as snippet 162, linked by the
   shortcode snippet 161).

   Replaces `edge-compute-app-picker.webm` in the start-page
   "03 Orchestrieren / Edge computing" card. Same slot rules as the
   Device-Status (158) and Modem-Monitoring (160) screens: fluid width ×
   165px, 272px min, no scale wrapper.

   Story: the Unwired Edge Cloud "Add Container" dialog. A cursor opens
   the "Container image" select, browses the catalogue (Automatic
   Passenger Counting, On-board Screens, YOUR APPLICATION), picks YOUR
   APPLICATION, clicks APPLY — and the dialog confirms the rollout
   ("Deployed to 42 devices"), which the video left implicit. One 8s
   loop; the cursor never jumps (it rests on APPLY at both ends of the
   loop), only the form state resets.

   Differences from the standalone export: see 158 (no palette block,
   Core scene-contract overrides, sequenced mode); the cursor arrow's
   colours moved from SVG attributes into the two path classes below so
   the markup carries no raw hex either.
   ========================================================= */

.c-ui-scene--container-picker-screen {
  /* Permitted derived neutral tints (docs/ui-mockup-core.md). */
  --c-ui-tint-surface:       #f6f6f6;
  --c-ui-tint-border:        #ececec;
  --c-ui-tint-border-strong: #d6d6d6;

  /* One loop for cursor + every form state; the sequencer (163) reads
     `--c-ui-scene-loop`. Entry delay (-86%) lands on the "applied"
     hold frame: value picked, menu closed, rollout line shown, cursor
     resting on APPLY. That frame is also the base-style /
     reduced-motion frame. */
  --c-ui-scene-loop: 8s;
  --c-ui-cps-loop: var(--c-ui-scene-loop);
  --c-ui-cps-entry: calc(var(--c-ui-cps-loop) * -0.86);

  /* Overrides of the Core scene contract (see 158). */
  width: 100%;
  min-width: 272px;
  height: 165px;
  aspect-ratio: auto;
  margin: 0;
  /* Vertical budget (165): 12 pad + 143 dialog + 10 free for the
     dialog shadow. Inside the dialog: 24 header, 14 pad (legend room),
     34 field, open menu 3×22 directly under the field (bottom 153 =
     inside the dialog), APPLY 24 tall at bottom 10. */
  padding: 12px 8px 0;
  background: var(--c-ui-color-g50);
  font-size: 11px;
  overflow: hidden;
}

.c-ui-scene--container-picker-screen,
.c-ui-scene--container-picker-screen *,
.c-ui-scene--container-picker-screen *::before,
.c-ui-scene--container-picker-screen *::after { box-sizing: border-box; }

/* Card slot: corner treatment + sizing at (0,2,0), see 158. */
.c-card__media .c-ui-scene--container-picker-screen {
  width: 100%;
  height: 165px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--c-ui-radius-12) 0 var(--c-ui-radius-12) 0;
}

/* -------------------------
   Dialog
------------------------- */
.c-ui-cps__dialog {
  position: relative;
  height: 143px;
  border: 1px solid var(--c-ui-tint-border-strong);
  border-radius: 8px;
  background: var(--c-ui-color-g50);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-ui-color-g800) 8%, transparent);
  overflow: hidden;
}
.c-ui-cps__title {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: var(--c-ui-color-p700);
  color: var(--c-ui-color-g800);
  font-weight: 600;
  white-space: nowrap;
}
.c-ui-cps__body {
  position: relative;
  height: calc(100% - 24px);
  padding: 14px 10px 10px;
}

/* -------------------------
   Outlined select ("Container image")
   Legend sits on the border like the console's Material-style outlined
   fields; the two value spans are stacked so the placeholder → value
   swap is a pure opacity cross-fade.
------------------------- */
.c-ui-cps__field {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1.5px solid var(--c-ui-color-p700);
  border-radius: 6px;
  white-space: nowrap;
}
.c-ui-cps__legend {
  position: absolute;
  top: -6px;
  left: 7px;
  padding: 0 4px;
  background: var(--c-ui-color-g50);
  font-size: 9px;
  font-weight: 600;
  color: var(--c-ui-color-p800);
}
.c-ui-cps__placeholder,
.c-ui-cps__value {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.c-ui-cps__placeholder {
  color: var(--c-ui-color-g300);
  opacity: 0;
  animation: c-ui-cps-placeholder var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
.c-ui-cps__value {
  color: var(--c-ui-color-p800);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 1;
  animation: c-ui-cps-value var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
/* Value is picked at 53%; at 97–100% the form resets for the next
   loop (short cross-fade instead of a hard cut). */
@keyframes c-ui-cps-placeholder {
  0%, 52%   { opacity: 1; }
  53%, 97%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes c-ui-cps-value {
  0%, 52%   { opacity: 0; }
  53%, 97%  { opacity: 1; }
  100%      { opacity: 0; }
}

.c-ui-cps__chevron {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  fill: none;
  stroke: var(--c-ui-color-g400);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(0deg);
  animation: c-ui-cps-chevron var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
/* Points up while the menu is open (20% → 53%). */
@keyframes c-ui-cps-chevron {
  0%, 19%   { transform: rotate(0deg); }
  21%, 52%  { transform: rotate(180deg); }
  54%, 100% { transform: rotate(0deg); }
}

/* -------------------------
   Dropdown menu
   Sits directly under the field, over the APPLY button, like the
   console's select popover. Hidden by default (= hold frame).
------------------------- */
.c-ui-cps__menu {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 48px;
  /* Above the APPLY button it overlaps (both are positioned). */
  z-index: 2;
  border: 1px solid var(--c-ui-tint-border);
  border-radius: 6px;
  background: var(--c-ui-color-g50);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c-ui-color-g800) 14%, transparent);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  animation: c-ui-cps-menu var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
@keyframes c-ui-cps-menu {
  0%, 19%   { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  21%, 52%  { opacity: 1; visibility: visible; transform: translateY(0); }
  54%, 100% { opacity: 0; visibility: hidden; transform: translateY(-4px); }
}
.c-ui-cps__option {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  white-space: nowrap;
  background: transparent;
}
.c-ui-cps__option--own {
  color: var(--c-ui-color-p800);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Hover highlight walks down the list in lock-step with the cursor
   dwell keyframes (27–32 / 36–41 / 45–53). Adjacent keyframes = hard
   switch, as a real hover would be. */
.c-ui-cps__option--1 { animation: c-ui-cps-hover-1 var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite; }
.c-ui-cps__option--2 { animation: c-ui-cps-hover-2 var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite; }
.c-ui-cps__option--3 { animation: c-ui-cps-hover-3 var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite; }
@keyframes c-ui-cps-hover-1 {
  0%, 26%        { background: transparent; }
  26.01%, 34%    { background: var(--c-ui-tint-surface); }
  34.01%, 100%   { background: transparent; }
}
@keyframes c-ui-cps-hover-2 {
  0%, 34%        { background: transparent; }
  34.01%, 43%    { background: var(--c-ui-tint-surface); }
  43.01%, 100%   { background: transparent; }
}
@keyframes c-ui-cps-hover-3 {
  0%, 43%        { background: transparent; }
  43.01%, 53%    { background: var(--c-ui-color-p100); }
  53.01%, 100%   { background: transparent; }
}

/* -------------------------
   APPLY button + rollout line
------------------------- */
.c-ui-cps__apply {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--c-ui-color-p700);
  color: var(--c-ui-color-g800);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: scale(1);
  animation: c-ui-cps-apply var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
/* Pressed state while the cursor click-pulses on it (65–68%). */
@keyframes c-ui-cps-apply {
  0%, 65%       { background: var(--c-ui-color-p700); transform: scale(1); }
  65.01%, 68%   { background: var(--c-ui-color-p800); transform: scale(0.96); }
  68.01%, 100%  { background: var(--c-ui-color-p700); transform: scale(1); }
}

.c-ui-cps__result {
  position: absolute;
  left: 10px;
  bottom: 17px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-ui-color-p800);
  white-space: nowrap;
  opacity: 1;
  animation: c-ui-cps-result var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
.c-ui-cps__result svg {
  width: 11px;
  height: 11px;
  fill: var(--c-ui-color-p700);
}
/* Appears right after the APPLY press, fades with the reset. */
@keyframes c-ui-cps-result {
  0%, 70%   { opacity: 0; transform: translateY(2px); }
  73%, 97%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(2px); }
}

/* -------------------------
   Cursor
   Same green-fill / white-stroke arrow as the hero scenes. The cursor
   is a full-size layer (inset: 0) with the arrow in its top-left
   corner, so a transform of `translate(calc(100% - 42px), 129px)`
   resolves against the SCENE width — right-anchored targets (chevron,
   APPLY) stay hit at any card width while left-anchored ones (menu
   rows) use plain px. Transform only → no layout work per frame.
------------------------- */
.c-ui-cps__cursor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate(calc(100% - 48px), 129px);
  animation: c-ui-cps-cursor var(--c-ui-cps-loop) ease-in-out var(--c-ui-cps-entry) infinite;
}
.c-ui-cps__cursor svg {
  display: block;
  width: 16px;
  height: 17px;
  /* Pivot near the arrow tip so the click pulse doesn't drift. */
  transform-origin: 3px 3px;
  animation: c-ui-cps-click var(--c-ui-cps-loop) linear var(--c-ui-cps-entry) infinite;
}
.c-ui-cps__cursor-fill   { fill: var(--c-ui-color-p700); }
.c-ui-cps__cursor-stroke { fill: none; stroke: var(--c-ui-color-g50); stroke-linecap: round; stroke-width: 2.91; }
/* Path: rest on APPLY → chevron (click 18%) → row 1 → row 2 → row 3
   (click 52%) → APPLY (click 66%) → rest. Targets: chevron centre ≈
   (W − 29, 68), rows centred at y 98 / 120 / 142 (menu top 87 + 22px
   rows), APPLY centre ≈ (W − 50, 132). The arrow tip is ~2px in from
   the layer's top-left. */
@keyframes c-ui-cps-cursor {
  0%, 8%    { transform: translate(calc(100% - 48px), 129px); }
  16%, 20%  { transform: translate(calc(100% - 34px),  65px); }
  27%, 32%  { transform: translate(84px,  95px); }
  36%, 41%  { transform: translate(84px, 117px); }
  45%, 53%  { transform: translate(84px, 139px); }
  62%, 100% { transform: translate(calc(100% - 48px), 129px); }
}
@keyframes c-ui-cps-click {
  0%, 17.5%     { transform: scale(1); }
  18%           { transform: scale(0.8); }
  18.5%, 51.5%  { transform: scale(1); }
  52%           { transform: scale(0.8); }
  52.5%, 65.5%  { transform: scale(1); }
  66%           { transform: scale(0.8); }
  66.5%, 100%   { transform: scale(1); }
}

/* -------------------------
   Sequenced mode (snippet 163) — idle scenes freeze on the applied
   hold frame (= base styles); the playing scene runs one
   `--c-ui-scene-loop` and ends on it. In this mode the story should
   open with the form reset instead of a 1.1s hold of the finished
   state, so the entry offset moves to the start of the reset
   cross-fade (97%): the loop then ends on the applied frame at 97%,
   which is visually the base frame. See 158 for the mechanism.
------------------------- */
.c-ui-scene--container-picker-screen.is-uw-seq {
  --c-ui-cps-entry: calc(var(--c-ui-cps-loop) * -0.97);
}
.c-ui-scene--container-picker-screen.is-uw-seq:not(.is-uw-playing) * {
  animation: none;
}

/* Reduced motion: freeze on the applied hold frame. */
@media (prefers-reduced-motion: reduce) {
  .c-ui-cps__placeholder,
  .c-ui-cps__value,
  .c-ui-cps__chevron,
  .c-ui-cps__menu,
  .c-ui-cps__option,
  .c-ui-cps__apply,
  .c-ui-cps__result,
  .c-ui-cps__cursor,
  .c-ui-cps__cursor svg { animation: none; }
}