/* The three motion stories on a phone (≤600px). The earlier sheets shrink the desktop
   compositions until their words are 6–8px; here each story is recomposed for a narrow,
   tall screen instead: copy, the step buttons and the scene stack top to bottom in normal
   flow (nothing overlaps whatever the language), the scene's panels stack too, and type
   stays readable. The scroll-led timing is unchanged; the stacked bee field is placed by
   bee-story.js (--bee-layout), the stacked era flow by era-story.js (from the panels'
   positions). Loaded after every other story sheet. */
@media (max-width:600px){
 /* Shared step buttons: three across, each 44px tall, showing its number and keyword
    (01 / LISTEN); the title stays the button's name but is not drawn, since the heading
    above and the scene already say it. */
 .story-steps,.insight-chapters{gap:8px}
 .story-steps .story-step{position:relative;display:flex;align-items:center;min-height:44px;padding:0 0 0 9px}
 .story-steps .story-step small{font-size:10.5px;line-height:1.3;letter-spacing:.04em}
 .story-steps .story-step .story-step-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

 /* Nothing a scene moves may widen the page (clip, unlike hidden, keeps the stage sticky). */
 .insight-story,.era-story,.bee-story{overflow-x:clip}

 /* Insight: copy, steps and the art share the screen under the sticky header. */
 .insight-story .insight-stage{top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:540px;padding:18px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
 .insight-home .insight-copy h2{font-size:24px!important;line-height:1.35;margin:8px 0}
 .insight-copy>p{font-size:13px;line-height:1.6;margin:0 0 12px}
 .insight-story .insight-art{flex:1;min-height:260px;height:auto;width:100%;margin:0}
 .insight-story .insight-quote{font-size:10.5px;padding:6px 8px}
 .insight-story .insight-evidence{font-size:calc(10.5px + var(--finding,0)*1px);padding:6px 6px}
 .insight-story .insight-cluster{font-size:11px}
 .insight-story .insight-cluster.a{font-size:calc(11px + var(--finding,0)*2px)}

 /* Era: heading, steps, then the two windows one above the other, the stream between them. */
 .era-story .era-stage{top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:540px;max-height:none;padding:16px 16px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
 /* The three headings share one cell, so the tallest sets the height and the scene below
    never jumps when the phase changes. */
 .era-story .era-heading{position:relative;inset:auto;width:auto;display:grid}
 .era-story .era-heading>div{grid-area:1/1}
 .era-story .era-heading>[hidden]{display:block;visibility:hidden}
 .era-story .era-heading>div>span{font-size:10px;letter-spacing:.1em}
 .era-story .era-heading h2{font-size:21px!important;line-height:1.3!important;margin:4px 0 6px!important;max-width:none}
 .era-story .era-heading p{font-size:12.5px;line-height:1.55;max-width:none}
 /* The steps come before the scene, as in the other stories (the markup has them after it). */
 .era-story .era-heading{order:-2}
 .era-story .era-progress.story-steps{position:relative;inset:auto;transform:none;width:auto;gap:8px;order:-1}
 .era-story .era-progress button{white-space:normal}
 .era-story .era-scene{position:relative;inset:auto;flex:1;min-height:0}
 .era-story .era-scroll-cue,.era-story .era-replay{display:none!important}
 /* Understanding: its closing line sits at the foot of the tool, where the old tool's
    complaint was, so the phase still ends on "different words, the same reason". */
 .era-story .era-scene .era-takeaway{bottom:10px;left:12px;right:12px;text-align:left;font-size:11.5px;line-height:1.45;color:var(--plum-600)}
 .era-story .era-scene .era-takeaway span{display:none}
 .era-story .era-panel{left:0;right:0;width:auto;transform:none;border-radius:var(--r-lg)}
 .era-story .era-source{top:0;height:37%;display:flex;flex-direction:column}
 .era-story .era-destination{top:calc(37% + 22px);bottom:0;min-height:0}
 .era-story .era-user-window .era-user-chrome{display:none}
 .era-story .era-user-surfaces{flex:1;height:auto;min-height:0}
 /* Before: a feed of templates and a button to click. */
 .era-story .era-consumer-nav{height:38px;gap:14px;padding:0 12px;font-size:11px}
 .era-story .era-consumer-nav>span:not(.era-consumer-brand){display:inline}
 .era-story .era-consumer-brand svg{width:17px;height:17px}.era-story .era-consumer-brand>b{font-size:12px}
 .era-story .era-consumer-search{width:13px;height:13px}
 .era-story .era-consumer-topics{display:none}
 .era-story .era-consumer-feed{padding:8px 12px 0;gap:10px}
 .era-story .era-consumer-cover{height:46px}
 .era-story .era-consumer-cover>span{font-size:9px}
 .era-story .era-consumer-post>b,.era-story .era-consumer-social,.era-story .era-consumer-bottom{display:none}
 .era-story .era-consumer-actions{height:30px;margin:8px 12px 0;gap:10px}
 .era-story .era-consumer-actions>span{width:auto;font-size:11px}
 .era-story .era-consumer-actions>b{height:30px;font-size:12px}
 .era-story .era-consumer-cursor{width:18px;height:23px;top:14px}
 /* Now: the same person asking an assistant in their own words. */
 .era-story .era-ai-topbar{height:36px;padding:0 12px}.era-story .era-ai-topbar>b{font-size:12px}
 .era-story .era-ai-team>.era-bot{width:22px;height:22px}
 .era-story .era-ai-conversation{padding:10px 12px 0}
 .era-story .era-assistant-message{margin-bottom:4px;gap:8px}.era-story .era-assistant-message>div{font-size:11px}
 .era-story .era-assistant-message>.era-bot{width:24px;height:24px}
 .era-story .era-ai-conversation .era-user-bubble{font-size:12px;padding:5px 10px;margin-top:5px}
 .era-story .era-assistant-typing,.era-story .era-user-dialogue .era-compose,.era-story .era-ai-conversation .era-user-bubble:nth-of-type(4){display:none}
 /* The analysis tool. */
 .era-story .era-destination{display:flex;flex-direction:column}
 /* The tool: its name, the query and its answer; the connection row and the file name are
    left out to make room. */
 .era-story .era-console-chrome{height:40px;flex:none;padding:0 12px;gap:8px}
 .era-story .era-console-chrome>img{width:26px;height:26px}
 .era-story .era-console-brand>img{width:96px;height:auto}
 .era-story .era-console-chrome>div{flex-direction:row;align-items:baseline;gap:8px}
 .era-story .era-console-chrome b{font-size:14px}.era-story .era-console-chrome small{font-size:10.5px}
 .era-story .era-console-connection,.era-story .era-code-editor>small,.era-story .era-code-editor>span,.era-story .era-console-result-label{display:none}
 .era-story .era-console-body{flex:1;min-height:0;overflow:hidden}
 .era-story .era-code-editor{margin:8px 12px 6px;padding:6px 10px}
 .era-story .era-code-editor code{display:block;font-size:10.5px;line-height:1.55}
 .era-story .era-bar-row,.era-story .era-analysis-console .era-bar-row{grid-template-columns:118px 1fr 14px;margin:4px 12px;font-size:11px}
 .era-story .era-console-foot{margin-top:6px;padding:7px 12px;font-size:11px;line-height:1.45}
 .era-story .era-added-field{margin:8px 12px 0}.era-story .era-added-field>span{font-size:11px}.era-story .era-added-field>small{font-size:10px}
 .era-story .era-stalled-query{margin:6px 12px 0;padding:5px 10px 0}
 .era-story .era-stalled-file{display:none}
 /* Speaking: each message the person just typed reaches the tool and stays unclassified
    ("?"); the two shown are the two bubbles above (the third bubble is left out). */
 .era-story .era-stalled-row{height:20px;gap:8px}
 /* Its closing sentence gives way to them on a phone: the rows, "cannot classify" and the
    query error already say the tool cannot answer. */
 .era-story .era-stalled-tool .era-console-foot{display:none}
 .era-story .era-stalled-row>span{font-size:11px}
 .era-story .era-stalled-row>b{width:18px;height:15px;font-size:10px}
 .era-story .era-blocked-results>.era-stalled-row:nth-of-type(n+4){display:none}
 .era-story .era-stalled-query>code{font-size:10.5px;line-height:1.55}
 .era-story .era-query-error,.era-story .era-query-error code{font-size:10px}
 .era-story .era-stalled-file{flex-wrap:nowrap}
 .era-story .era-blocked-results{margin:4px 12px 0}
 .era-story .era-at-2 .era-console-foot{display:none}
 .era-story .era-blocked-results>div:first-child{flex-direction:row;align-items:center;margin-bottom:2px}
 .era-story .era-blocked-results>div:first-child>b{font-size:11px}
 .era-story .era-stalled-tool .era-console-gap{font-size:11px}

 /* Bee: copy and steps, then the field: the user's words scattered across the top, the
    organized lanes below them full width, your feedback over the top once it arrives. */
 .bee-story{--bee-layout:stacked}
 .bee-story .bee-stage{top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:540px;max-height:none;padding:16px 16px 12px;gap:12px}
 .bee-story .bee-copy h2{font-size:21px!important;line-height:1.3!important;margin:4px 0 6px!important}
 .bee-story .bee-eyebrow{font-size:9px}
 .bee-story .bee-copy>p{font-size:12.5px;line-height:1.55;margin:0 0 10px}
 .bee-story .bee-workspace{flex:1;min-height:0;max-height:none}
 .bee-story .bee-field{inset:0 0 44px}
 .bee-story .bee-source-label,.bee-story .bee-output-label{top:0;font-size:11px}
 .bee-story .bee-source-label{left:0}
 .bee-story .bee-output-label{left:auto;right:0;text-align:right}
 .bee-story .bee-output-label small{display:inline;margin:0 0 0 8px;font-size:10px}
 .bee-story .bee-lane{left:0;width:100%;border-radius:0 0 var(--r-md) var(--r-md)}
 /* Header and card heights come from bee-story.js, which fits two rows of cards in a lane. */
 .bee-story .bee-lane header{height:var(--bee-head,30px);box-sizing:border-box;padding:0 8px;font-size:11px;gap:6px}
 .bee-story .bee-lane header>small{font-size:10px}
 .bee-story .bee-datum{height:var(--bee-cell,24px);font-size:11px;padding:0 7px;gap:5px}
 /* One line each, also in English (locale.css clamps English to two lines in the narrow
    desktop cells); the full-width cells have room. */
 html[lang] .bee-story .bee-datum>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:none;line-height:1.3}
 .bee-story .bee-guide{width:38px;height:38px}
 /* Who said it and the rule it makes share the first line; the lanes make room below. */
 .bee-story .bee-feedback{left:0;right:0;width:auto;max-width:none;padding:8px 12px 0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
 .bee-story .bee-feedback-from,.bee-story .bee-feedback-rule{font-size:10.5px}
 .bee-story .bee-feedback-rule{margin-left:auto}
 .bee-story .bee-feedback p{order:1;width:100%;font-size:13px;line-height:1.4;margin:3px 0 0}
 .bee-story .bee-feedback button{order:2}
 /* A 44px target drawn as a line of text. */
 .bee-story .bee-feedback button{font-size:12px;margin:-6px 0 -2px;padding:12px 0;line-height:20px}
 .bee-story .bee-status{left:0;font-size:11.5px;padding-top:6px;line-height:1.45}
 .bee-story .bee-status small{font-size:9.5px}

 /* The footer's links: a 44px row each. */
 footer nav a{display:flex;align-items:center;min-height:44px}
 footer nav>div{gap:0!important}
}
/* A short phone (an iPhone SE's Safari shows about 550px): a story's stage is the screen
   below the header and no taller, so its steps stay on screen; the line under each heading
   gives way (the heading and the scene say it) and the era's chat window takes less height. */
@media (max-width:600px) and (max-height:620px){
 .insight-story .insight-stage,.era-story .era-stage,.bee-story .bee-stage{min-height:0;padding-top:10px;padding-bottom:8px;gap:8px}
 .era-story .era-heading p,.bee-story .bee-copy>p{display:none}
 .era-story .era-heading h2,.bee-story .bee-copy h2{font-size:19px!important;margin:3px 0 0!important}
 .era-story .era-source{height:30%}
 .era-story .era-destination{top:calc(30% + 16px)}
 /* Both messages the person typed stay in view; the window's title already says who they
    are talking to. */
 .era-story .era-assistant-message{display:none}
 .era-story .era-ai-topbar{height:30px}
 .era-story .era-ai-conversation{padding-top:2px}
 .era-story .era-ai-conversation .era-user-bubble{margin-top:4px}
}
/* Reduced motion: the stories are not sticky (their own sheets), so they sit in the flow at
   their place, not offset under the header. */
@media (max-width:600px) and (prefers-reduced-motion:reduce){
 .insight-story .insight-stage,.era-story .era-stage,.bee-story .bee-stage{top:0}
}