/* Behavior experiments. The measured target geometry stays independent of the shared UI styles;
   surfaces replace borders and every neutral sits on the gray wedge. */
.uiux-behavior-stage, .uiux-behavior-controls {
  --bh-bg: var(--k0); --bh-panel: var(--k1); --bh-raised: var(--k2); --bh-text: var(--k9); --bh-sub: var(--k6); --bh-accent: var(--k10);
  min-width: 0; color: var(--bh-text); font-family: var(--f-ko, sans-serif); font-size: 16px; font-style: normal; line-height: 1.55;
  overflow-wrap: break-word; word-break: keep-all;
}
.uiux-behavior-stage *, .uiux-behavior-controls * { box-sizing: border-box; font-style: normal; }
.uiux-behavior-stage .bh-experiment { display: flex; flex-direction: column; gap: 18px; width: 100%; min-width: 0; min-height: 420px; outline-offset: 5px; }
.uiux-behavior-stage p, .uiux-behavior-controls p { margin: 0; }
.uiux-behavior-stage .control-note, .uiux-behavior-controls .control-note, .uiux-behavior-stage .experiment-caption { color: var(--bh-sub); font-size: 14px; line-height: 1.65; }
.uiux-behavior-controls .control-group { display: grid; gap: 8px; margin-bottom: 20px; }
.uiux-behavior-stage .control-label, .uiux-behavior-controls .control-label { color: var(--bh-text); font-size: 14px; font-weight: 500; }
.uiux-behavior-stage .mini-label, .uiux-behavior-controls .mini-label { margin: 0; color: var(--bh-sub); font-size: 12px; font-weight: 500; letter-spacing: .025em; }
.uiux-behavior-controls .control-value { color: var(--bh-accent); font-size: 20px; font-variant-numeric: tabular-nums; }
.uiux-behavior-controls .control-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.uiux-behavior-stage button, .uiux-behavior-controls button, .uiux-behavior-stage input, .uiux-behavior-controls select { font: inherit; }
.uiux-behavior-stage .lab-button, .uiux-behavior-controls .lab-button {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--bh-raised); color: var(--bh-text);
  font-size: 14px; font-weight: 500; line-height: 1.4; white-space: normal; cursor: pointer; touch-action: manipulation;
}
.uiux-behavior-stage .lab-button.primary, .uiux-behavior-controls .lab-button.primary { background: var(--bh-accent); color: var(--k0); }
.uiux-behavior-stage .lab-button:hover:not(:disabled), .uiux-behavior-controls .lab-button:hover:not(:disabled) { background: var(--k3); color: var(--k10); }
.uiux-behavior-stage .lab-button.primary:hover:not(:disabled), .uiux-behavior-controls .lab-button.primary:hover:not(:disabled) { background: var(--k8); color: var(--k0); }
.uiux-behavior-stage :focus-visible, .uiux-behavior-controls :focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 4px; }
.uiux-behavior-stage button:disabled, .uiux-behavior-controls button:disabled { opacity: .55; cursor: default; }
.uiux-behavior-stage input { width: 100%; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--bh-panel); color: var(--bh-text); font-size: 16px; }
.uiux-behavior-controls select { width: 100%; }
.uiux-behavior-stage .readout { min-height: 2.6em; color: var(--bh-text); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
.uiux-behavior-stage .bh-results { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--k2); border-bottom: 1px solid var(--k2); }
.uiux-behavior-stage .bh-history-row { padding: 6px 0; color: var(--bh-text); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.6; }
.uiux-behavior-stage .bh-history-row + .bh-history-row { border-top: 1px solid var(--k2); }
.uiux-behavior-stage .demo-card { min-width: 0; padding: 20px; border: 0; border-radius: var(--lk-radius-m); background: var(--bh-panel); }

/* Hick: a symbol to match and a grid of choices. */
.uiux-behavior-stage .bh-stimulus { display: grid; place-items: center; align-self: center; width: 140px; min-height: 140px; border-radius: var(--lk-radius); background: var(--bh-panel); color: var(--bh-accent); font-size: 64px; line-height: 1.2; }
.uiux-behavior-stage .bh-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.uiux-behavior-stage .bh-choice { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; padding: 10px; border-radius: var(--lk-radius-m); background: var(--bh-panel); font-size: 30px; }
.uiux-behavior-stage .bh-choice[hidden] { display: none; }
.uiux-behavior-stage .bh-key { min-width: 28px; padding: 2px 8px; border-radius: 8px; background: var(--bh-raised); color: var(--bh-sub); font-size: 14px; }

/* Fitts: the field, the start button, the target. */
.uiux-behavior-stage .bh-fitts-field { position: relative; min-height: 230px; border-radius: var(--lk-radius-m); background: var(--bh-panel); touch-action: manipulation; }
.uiux-behavior-stage .bh-fitts-start { position: absolute; top: 50%; left: 36px; width: 56px; height: 56px; min-height: 0; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bh-raised); font-size: 14px; }
.uiux-behavior-stage .bh-fitts-target { position: absolute; top: 50%; height: 64px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 4px; background: var(--bh-accent); color: var(--k0); font-size: 20px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.uiux-behavior-stage .bh-fitts-target:disabled { opacity: .45; }
.uiux-behavior-stage .bh-distance-line { position: absolute; top: 50%; left: 36px; width: var(--bh-distance, 180px); height: 1px; background: var(--k4); pointer-events: none; }
.uiux-behavior-stage .bh-fitts-field.is-running { box-shadow: inset 0 0 0 1.5px var(--k8); }
.uiux-behavior-stage .bh-task { color: var(--bh-accent); font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.45; }

/* Jakob: a familiar shop layout. */
.uiux-behavior-stage .bh-shop { display: grid; gap: 24px; }
.uiux-behavior-stage .bh-shop-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-weight: 700; letter-spacing: .05em; }
.uiux-behavior-stage .bh-jakob-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.uiux-behavior-stage .bh-menu-item { display: grid; place-items: center; gap: 4px; min-height: 86px; padding: 12px 6px; border-radius: var(--lk-radius-m); background: var(--bh-panel); }
.uiux-behavior-stage .bh-menu-item span { color: var(--bh-accent); font-size: 28px; line-height: 1.1; }
.uiux-behavior-stage .bh-shop-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; color: var(--bh-sub); }
.uiux-behavior-stage .bh-shop-content span { display: grid; place-items: center; min-height: 90px; border-radius: var(--lk-radius-m); background: var(--bh-panel); font-size: 16px; letter-spacing: .06em; }

/* Miller: a number to hold and recall. */
.uiux-behavior-stage .bh-memory-window { display: grid; place-items: center; min-height: 150px; padding: 22px 12px; border-radius: var(--lk-radius); background: var(--bh-panel); }
.uiux-behavior-stage .bh-memory-placeholder { color: var(--bh-sub); font-size: 20px; text-align: center; }
.uiux-behavior-stage .bh-digits { color: var(--bh-text); font-size: clamp(24px, 4vw, 40px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .025em; white-space: nowrap; }
.uiux-behavior-stage .bh-digits.is-grouped { word-spacing: .25em; }
.uiux-behavior-stage .bh-recall { display: grid; gap: 10px; }
.uiux-behavior-stage .bh-recall-row { display: flex; gap: 12px; }
.uiux-behavior-stage .bh-recall-row input { flex: 1; width: 0; }
.uiux-behavior-stage .bh-recall-row button { flex: 0 0 auto; }
.uiux-behavior-stage .bh-memory-solution { font-size: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: center; word-break: normal; }
.uiux-behavior-stage .bh-stage-actions { display: none; }
@media (max-width: 700px) {
  .uiux-behavior-stage .bh-stage-actions:not([hidden]) { display: flex; justify-content: center; margin: 0 0 18px; }
}
@media (max-width: 620px) {
  .uiux-behavior-stage .bh-choice-grid { gap: 8px; }
  .uiux-behavior-stage .bh-choice { gap: 5px; padding: 8px 3px; font-size: 24px; }
  .uiux-behavior-stage .bh-jakob-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uiux-behavior-stage .bh-shop { gap: 16px; }
  .uiux-behavior-stage .bh-shop-content { gap: 8px; }
  .uiux-behavior-stage .bh-shop-content span { min-height: 62px; font-size: 16px; letter-spacing: 0; }
  .uiux-behavior-stage .bh-recall-row { flex-wrap: wrap; }
  .uiux-behavior-stage .bh-recall-row input { flex-basis: 100%; width: 100%; }
  .uiux-behavior-stage .bh-recall-row button { width: 100%; }
  .uiux-behavior-stage .bh-results { padding: 16px 0; }
  .uiux-behavior-stage .bh-digits { font-size: 24px; letter-spacing: 0; }
  .uiux-behavior-stage .bh-digits.is-grouped { word-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .uiux-behavior-stage *, .uiux-behavior-controls * { scroll-behavior: auto; animation: none !important; transition: none !important; }
}