/* A compact search-sidebar opening for the frozen, looping result funnel. */
.hero-story-stage { position:relative; width:100%; }
.hero-story-stage > .funnel { transition:opacity .3s; }
.hero-story-stage:not([data-phase="funnel"]) > .funnel { opacity:0; visibility:hidden; }
.hero-story-setup { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:var(--ground); opacity:0; visibility:hidden; transition:opacity .3s; }
.hero-story-stage[data-phase="setup"] .hero-story-setup { opacity:1; visibility:visible; }
.story-sidebar { width:min(calc(100% - 36px),475px); padding:22px 22px 20px; border:1px solid var(--line-2); border-radius:12px; background:var(--paper); box-shadow:0 8px 24px rgba(26,26,26,.045); }
.story-sidebar-step { position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; }
.story-brief { padding-bottom:15px; }
.story-brief::before { position:absolute; top:27px; bottom:3px; left:11px; width:2px; border-radius:2px; background:var(--line-2); content:''; }
.story-marker { position:relative; display:grid; width:24px; height:24px; place-items:center; border:1.5px solid var(--line-2); border-radius:50%; background:var(--paper); color:var(--muted); font:700 12px var(--mono); transition:background .2s,border-color .2s,color .2s,box-shadow .2s; }
.story-brief .story-marker,.hero-story-setup[data-step="search"] .story-run .story-marker { border-color:var(--ink); background:var(--ink); color:var(--paper); box-shadow:0 0 0 4px var(--butter); }
.hero-story-setup[data-step="search"] .story-brief .story-marker { border-color:var(--green); background:var(--green-soft); color:var(--green-dark); box-shadow:none; }
.story-step-content { min-width:0; }
.story-step-content h3 { margin:1px 0 12px; font-size:16px; line-height:1.35; font-weight:600; letter-spacing:-.01em; }
.story-field { display:block; margin-bottom:10px; }
.story-field > span { display:block; margin-bottom:5px; color:var(--ink-2); font-size:12.5px; font-weight:500; }
.story-field strong { display:block; min-height:40px; padding:9px 11px; overflow:hidden; border:1px solid var(--line-2); border-radius:6px; background:var(--paper); color:var(--ink); font-size:14px; line-height:20px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.story-field:has(#story-keyword:not(:empty)) strong,.story-field:has(#story-destination:not(:empty)) strong { border-color:var(--ink); box-shadow:0 0 0 3px rgba(26,26,26,.07); }
.story-search-button { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:48px; padding:8px 14px; border:1px solid var(--ink); border-radius:6px; background:var(--butter); color:var(--ink); font-size:14px; line-height:1.25; font-weight:600; opacity:.52; transition:opacity .2s,transform .16s,background .16s,box-shadow .16s; }
.story-search-button em { font-weight:700; font-style:italic; }
.story-search-button.is-ready { opacity:1; }
.story-search-button.is-pressed { transform:translateY(3px) scale(.985); background:var(--butter-hover); box-shadow:inset 0 3px 5px rgba(26,26,26,.16); }
.story-cursor { position:absolute; top:18px; right:19px; z-index:1; width:23px; height:29px; opacity:0; transform:translate(24px,19px); filter:drop-shadow(1px 2px 1px rgba(0,0,0,.25)); transition:opacity .15s,transform .36s ease-out; pointer-events:none; }
.hero-story-setup:is([data-step="aim"],[data-step="click"]) .story-cursor { opacity:1; transform:translate(0,0); }
.hero-story-setup[data-step="click"] .story-cursor { transform:translate(0,3px) scale(.9); }
.hero-story-setup[data-step="aim"] .story-run .story-marker,.hero-story-setup[data-step="click"] .story-run .story-marker { border-color:var(--ink); background:var(--ink); color:var(--paper); box-shadow:0 0 0 4px var(--butter); }
.hero-story-setup[data-step="aim"] .story-brief .story-marker,.hero-story-setup[data-step="click"] .story-brief .story-marker { border-color:var(--green); background:var(--green-soft); color:var(--green-dark); box-shadow:none; }
@media (max-width:600px) {
  .story-sidebar { width:calc(100% - 26px); padding:18px 15px 16px; }
  .story-sidebar-step { gap:7px; }
  .story-field strong { font-size:12.5px; white-space:normal; overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-story-stage *, .hero-story-setup { animation:none!important; transition:none!important; }
}
