/* Perception experiments. The stimuli keep their geometry; their neutrals sit on the gray wedge. */
.pc-experiment {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-width: 0; min-height: 420px; color: var(--k9); font-family: var(--f-ko, sans-serif);
}
.pc-canvas { display: block; width: 100%; max-width: 900px; height: auto; min-width: 0; overflow: visible; }
.pc-caption { max-width: 640px; margin: 6px 24px 24px; color: var(--k6); font-size: 16px; line-height: 1.65; text-align: center; text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
/* Letters in the scene never shrink below 13px on screen (see canvas() in uiux-perception.mjs). */
.pc-endpoints { font: 500 max(19px, var(--pc-min-type, 19px))/1 var(--f-lat, sans-serif); }
.pc-check { display: flex; align-items: center; gap: 10px; color: var(--k9); font-size: 16px; line-height: 1.5; cursor: pointer; }
.pc-check input { width: 18px; height: 18px; accent-color: var(--k10); }
.experiment-controls .pc-motion-actions .lab-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.pc-motion-actions svg { display: block; flex-shrink: 0; width: 18px; height: 18px; }

/* Visual hierarchy: a booking card whose size, contrast and spacing are the variables. */
.pc-booking {
  --pc-title-size: 33.6px;
  --pc-title-weight: 640;
  --pc-section-gap: 23px;
  --pc-action-bg: #bfbfbf;
  --pc-action-color: #000;
  --pc-support: #bfbfbf;
  display: flex; flex-direction: column; gap: var(--pc-section-gap);
  box-sizing: border-box; width: min(100% - 48px, 530px); margin: 24px 0 18px; padding: 28px;
  border: 0; border-radius: var(--lk-radius); background: var(--k1); font-size: 16px; line-height: 1.5;
}
.pc-booking p { margin: 0; }
.pc-booking-kicker { color: var(--pc-support); font-size: 16px; letter-spacing: .06em; line-height: 1.5; }
.pc-booking .pc-booking-title { color: var(--k10); font-size: var(--pc-title-size); font-weight: var(--pc-title-weight); line-height: 1.25; letter-spacing: -.025em; }
.pc-booking-description { margin-top: 4px !important; color: var(--pc-support); }
.pc-booking-details { display: flex; flex-direction: column; gap: 10px; }
.pc-booking-details > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.pc-booking-details span { color: var(--pc-support); }
.pc-booking-details strong { font-weight: 500; overflow-wrap: anywhere; word-break: keep-all; }
.pc-booking-bottom { display: flex; flex-direction: column; gap: 14px; }
.pc-booking-bottom p { color: var(--pc-support); font-size: 16px; word-break: keep-all; text-wrap: pretty; }
.pc-booking-action { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--pc-action-bg); color: var(--pc-action-color); font: inherit; font-weight: 600; cursor: pointer; }
.pc-booking-action:hover { outline: 1px solid var(--k8); outline-offset: 2px; }
.pc-booking-action:focus-visible { outline: 2px solid var(--k10); outline-offset: 4px; }
.pc-unaligned .pc-booking-heading { margin-left: 24px; }
.pc-unaligned .pc-booking-details { margin-left: 8px; }
.pc-unaligned .pc-booking-details > div:nth-child(2) { margin-left: 14px; }
.pc-unaligned .pc-booking-bottom > p { align-self: flex-end; max-width: 92%; }
.pc-unaligned .pc-booking-action { width: calc(100% - 32px); margin-left: 32px; }
@media (max-width: 600px) {
  .pc-experiment { min-height: 320px; }
  .pc-canvas { min-height: 230px; }
  .pc-caption { margin: 8px 14px 20px; }
  .pc-booking { width: calc(100% - 16px); margin-top: 12px; padding: 22px 18px; border-radius: 18px; }
  .pc-booking-details > div { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
  .pc-unaligned .pc-booking-heading { margin-left: 16px; }
  .pc-unaligned .pc-booking-details > div:nth-child(2) { margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-experiment *, .pc-check { transition: none !important; animation: none !important; }
}