/* The approved three-moment storyboard: real anchors, illustrative details. */
.auth-intro { display:none; }
.login-demo { width:100%; max-width:30rem; margin:2.5rem auto; }
.login-demo-sheet { padding:clamp(1.25rem,3vw,2rem); background:var(--paper); color:var(--ink); }
.login-demo-sheet > h2 { margin:0 0 1.75rem; font-size:clamp(1.125rem,1.5vw,1.375rem); line-height:1.6; overflow-wrap:anywhere; }
.demo-scene-title { margin:0 0 1.25rem; font-size:clamp(1.5rem,2vw,1.875rem); line-height:1.4; }
.login-demo-scene + .login-demo-scene { margin-top:2rem; }
.login-demo.is-ready .login-demo-scenes { display:grid; overflow:hidden; }
.login-demo.is-ready .demo-scene-title { display:none; }
.login-demo.is-ready .login-demo-scene { grid-area:1 / 1; margin:0; min-width:0; display:block; }
.login-demo.is-ready .login-demo-scene[hidden] { visibility:hidden; pointer-events:none; }
.demo-lines { display:grid; gap:12px; }
.demo-lines span,.demo-date { display:block; height:6px; background:var(--line); }
.demo-description { margin:1.75rem 0 2.25rem; }
.demo-description span:nth-child(1) { width:94%; }
.demo-description span:nth-child(2) { width:82%; }
.demo-description span:nth-child(3) { width:58%; }
.demo-deadline { margin:0; padding:12px 0; font-size:var(--type-metadata-size); }
.demo-deadline div { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.demo-deadline dt { color:var(--ink-soft); }
.demo-deadline dd { margin:0; }
.demo-date { width:6rem; }
.demo-file { padding:1rem 0; border-block:1px solid var(--line); font-size:var(--type-label-size); }
.demo-file-lines { margin-top:12px; }
.demo-file-lines span { width:4.5rem; }
.demo-confirm { display:flex; align-items:center; gap:10px; margin:1.5rem 0 0; padding:12px; background:var(--sage-pale); font-size:var(--type-metadata-size); }
.demo-confirm svg { width:24px; height:24px; flex:none; }
.demo-publication { margin:0 0 12px; font-size:.8rem; color:var(--ink-soft); }
.demo-scores { margin:0 0 1.25rem; font-size:var(--type-metadata-size); }
.demo-scores div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; }
.demo-scores dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.demo-feedback { padding:12px 16px; background:var(--sage-pale); font-size:var(--type-metadata-size); }
.demo-feedback p { margin:0; line-height:1.7; }
.demo-feedback-lines { margin:12px 0 4px; }
.demo-feedback-lines span:first-child { width:88%; }
.demo-feedback-lines span:last-child { width:62%; }
.demo-scene-number { font-variant-numeric:tabular-nums; }
.login-demo-mobile { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line); }
.login-demo-mobile summary { min-height:44px; cursor:pointer; font-weight:600; line-height:1.7; }
.login-demo-mobile .login-demo { margin:1rem 0 0; }
.login-demo-mobile .login-demo-sheet { padding:0; background:transparent; }
.login-demo-mobile .login-demo-scene { padding:1rem; border:1px solid var(--line); background:var(--paper-bright); }
.login-demo-mobile .login-demo-scene + .login-demo-scene { margin-top:1rem; }
.login-demo-mobile .demo-scene-title { font-size:1.125rem; margin-bottom:1.25rem; }
@media(min-width:54rem) {
  .auth-intro { display:flex; gap:2rem; }
  .auth-intro .login-demo { margin-block:auto; }
  .login-demo-mobile { display:none; }
}
/* Timed once per scene; illustrative lines themselves never shimmer. */
@media(prefers-reduced-motion:no-preference) {
  .login-demo.is-ready .login-demo-scene.is-entering { animation:demo-scene-enter .6s cubic-bezier(.65,0,.35,1) both; }
  .login-demo.is-ready .login-demo-scene.is-leaving { animation:demo-scene-exit .6s cubic-bezier(.65,0,.35,1) both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-deadline { animation:demo-highlight 1.1s .35s both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-file { animation:demo-arrive .35s cubic-bezier(.16,1,.3,1) both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-confirm { animation:demo-arrive .3s .45s cubic-bezier(.16,1,.3,1) both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-confirm path { animation:demo-check .35s .65s both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-scores div { animation:demo-arrive .3s .3s cubic-bezier(.16,1,.3,1) both; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-scores div + div { animation-delay:.4s; }
  .login-demo.is-ready .login-demo-scene.is-current .demo-feedback { animation:demo-unfold .4s .65s cubic-bezier(.16,1,.3,1) both; }
  .login-demo.is-suspended * { animation-play-state:paused !important; }
}
@keyframes demo-highlight { 0%,100% { background:transparent; } 35%,65% { background:var(--sage-pale); } }
@keyframes demo-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes demo-check { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes demo-unfold { from { opacity:0; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0); } }
.login-demo.is-still * { animation:none !important; }

@keyframes demo-scene-enter { from { opacity:.15; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
@keyframes demo-scene-exit { from { opacity:1; transform:translateX(0); } to { opacity:.15; transform:translateX(-100%); } }

/* Familiar, stable step tabs: every destination keeps its full label. */
.demo-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; list-style:none; padding:0; margin:0 0 1.5rem; border-bottom:1px solid #43505a; }
.demo-overview li { min-width:0; color:var(--sage-pale); }
.demo-overview button { display:flex; justify-content:center; align-items:center; gap:.35em; width:100%; min-height:56px; padding:8px 2px; border:0; border-bottom:3px solid transparent; background:transparent; color:inherit; font:inherit; font-size:1rem; line-height:1.5; cursor:pointer; }
.demo-overview button:hover { color:var(--paper-bright); background:rgb(255 255 255 / 8%); border-bottom-color:var(--sage); }
.demo-overview button:focus-visible { outline-color:var(--paper-bright); outline-offset:3px; }
.demo-overview button:disabled { cursor:default; }
.demo-overview button[aria-current="step"] { color:var(--paper-bright); border-bottom-color:var(--accent); font-size:1.125rem; font-weight:700; }
.demo-step-name { white-space:nowrap; }
@media(prefers-reduced-motion:no-preference) {
  .demo-overview button { transition:color .2s ease, background-color .2s ease, border-color .2s ease; }
}

.login-demo-mobile .demo-overview,
.login-demo-mobile .login-demo-sheet > h2 { display:none; }