/* Motion has its own semantic layers and never gates the default content visibility. */
:root {
  --lexue-motion-ease: cubic-bezier(.22,1,.36,1);
  --lexue-motion-layer-content: var(--story-layer-menu,20);
  --lexue-motion-layer-dialog: calc(var(--story-layer-modal,40) + 1);
}
.lexue-motion-layer {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0; padding: 0;
  border: 0; background: transparent; overflow: visible; pointer-events: none !important;
  contain: layout style; z-index: var(--lexue-motion-layer-content);
}
.lexue-motion-layer[data-lexue-motion-layer="dialog"] { z-index: var(--lexue-motion-layer-dialog); }
.lexue-motion-layer::backdrop { background: transparent; pointer-events: none; }
.lexue-motion-layer *, .lexue-motion-piece, .lexue-motion-ghost { pointer-events: none !important; user-select: none !important; }
.lexue-motion-piece { position: absolute; transform-origin: 0 0; overflow: hidden; }
.lexue-motion-surface, .lexue-motion-backdrop { pointer-events: none; }
button,a,summary,.button,.icon-button,.color-choice,.section-switch button,.voice-input-tools .voice-input-button {
  transition: scale 120ms var(--lexue-motion-ease), transform 120ms var(--lexue-motion-ease), background-color 150ms var(--lexue-motion-ease), color 150ms var(--lexue-motion-ease), opacity 150ms var(--lexue-motion-ease);
}
:where(input,textarea,select) { transition: background-color 150ms var(--lexue-motion-ease), color 150ms var(--lexue-motion-ease); }
:where(button,a,summary) :where(svg,.ui-icon) { transition: transform 130ms var(--lexue-motion-ease); }
@media (hover:hover) and (pointer:fine) {
  :where(button,a,summary):hover:not(:disabled):not([aria-disabled="true"]) { scale: 1.035; }
  :where(button,a,summary):hover:not(:disabled) > :where(svg,.ui-icon) { transform: translateY(-1px) rotate(-2deg); }
}
:where(button,a,summary):active:not(:disabled):not([aria-disabled="true"]) { scale: .975; }
:where(button,a,summary):active > :where(svg,.ui-icon) { transform: translateY(0) rotate(0deg) scale(.96); }
:where(button,a,summary):disabled, :where(button,a,summary)[aria-disabled="true"] { scale: 1; }
/* A selected expectation is one surface, including its separate speaker/edit row. */
.expectation-item.is-current{scale:1;transition:scale 120ms var(--lexue-motion-ease)}
.expectation-item.is-current>.expectation-choice{scale:1;transform:none}
@media(hover:hover) and (pointer:fine){
  .expectation-item.is-current:hover{scale:1.035}
}
.expectation-item.is-current:has(>.expectation-choice:active){scale:.975}
/* The real dialog and its canvas never scale; only an independent blank surface morphs. */
dialog[data-lexue-motion-opening]::backdrop { animation: lexue-backdrop-in 180ms var(--lexue-motion-ease); }
@keyframes lexue-backdrop-in { from { opacity: .2; } to { opacity: 1; } }
details[data-lexue-motion-details][open] > :not(summary) { animation: none; }
.toast { transition: opacity 160ms var(--lexue-motion-ease), transform 160ms var(--lexue-motion-ease); }
@media (prefers-reduced-motion:reduce) {
  :where(button,a,summary,input,textarea,select), :where(button,a,summary) :where(svg,.ui-icon), .toast { transition: none !important; }
  :where(button,a,summary):hover, :where(button,a,summary):active { scale: 1 !important; }
  .expectation-item.is-current,.expectation-item.is-current:hover,.expectation-item.is-current:has(>.expectation-choice:active){scale:1!important;transition:none!important}
  :where(button,a,summary) :where(svg,.ui-icon) { transform: none !important; }
  dialog[data-lexue-motion-opening]::backdrop, details[data-lexue-motion-details][open] > :not(summary) { animation: none !important; }
}

/* Formal assessment keeps identical geometry before and after choosing either picture. */
.assessment-choice,
.assessment-choice * {
  scale: 1 !important; transform: none !important; animation: none !important;
  transition-property: background-color, color, opacity !important;
}

/* Fast requests never paint their temporary loader; reserve a stable working canvas. */
[hidden] { display: none !important; }
body[data-page] > .workspace,
body.portfolio-page > .app-shell { min-height: min(640px, calc(100svh - 150px)); }
@media (max-width: 900px) {
  body[data-page] > .workspace,
  body.portfolio-page > .app-shell { min-height: min(640px, calc(100svh - 110px)); align-content: start; }
}