/* Learning screens use the available height; longer copy continues on the next page. */
.journey{height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom);gap:0}
.journey-header{min-height:56px;padding:6px 0;gap:8px;flex-wrap:nowrap;flex-shrink:0}.journey-header>div{order:0;flex:1;min-width:0}.journey-header small{margin-top:0;line-height:1.3}.journey-header .appearance-toggle{margin-left:0}.journey-header .icon-btn{min-width:44px;min-height:44px}.journey-header>div>span{display:none}
.journey-progress{height:4px;min-height:4px}.journey-heading{padding:10px 0;align-items:center;flex-shrink:0}.journey-heading h1{font-size:26px;line-height:1.2}.journey-heading>span{font-size:14px;flex-shrink:0}
.journey-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:18px;min-height:0;flex:1;padding:0;overflow:hidden}
.journey-image{height:100%;min-height:0;display:flex;flex-direction:column}.journey-image>div{display:flex;flex-direction:column;min-height:0;height:100%}.journey .viewer{display:flex;flex-direction:column;min-height:0;flex:1;box-shadow:none}.journey .viewer-image,.journey.has-narration .viewer-image{flex:1;min-height:0;height:auto;width:100%;overflow:hidden;padding:3px}.journey .viewer-image img,.journey .viewer-image svg{min-height:0;max-height:100%;object-fit:contain}.journey .viewer-toolbar{display:flex;flex-shrink:0;min-height:44px;padding:0 6px;gap:6px}.viewer-annotation-controls{display:flex;gap:6px;margin-left:auto}.journey .viewer-toolbar .annotation-toggle{width:auto;min-height:44px;padding:6px 8px;font-size:14px}.journey .viewer-toolbar .annotation-toggle svg{display:block}.journey .viewer-toolbar .icon-btn{width:44px;min-height:44px}.journey .viewer-thumbs{flex-wrap:wrap;flex-shrink:0;overflow-x:hidden;justify-content:flex-start;padding:4px 8px;gap:7px;min-height:52px}.journey .viewer-thumbs button{position:relative;display:block;min-height:44px;height:44px;width:44px;padding:2px;flex-shrink:0}.journey .viewer-thumbs img,.journey .viewer-thumbs .diagram-visual{width:100%;height:100%;object-fit:contain}.annotation-dot{position:absolute;right:1px;top:1px;width:9px;height:9px;border:2px solid #fff;background:#d53236;border-radius:50%;pointer-events:none}.journey .visual-caption,.journey .image-adjust-launch{display:none}
.journey-copy{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:18px;gap:8px}.journey-copy .step-label,.journey-copy .reflection,.journey-copy .audio-availability{display:none}.reading-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-shrink:0}.journey-copy h2{font-size:22px;line-height:1.25;letter-spacing:-.3px;margin:0}.reading-count{font-size:14px;color:var(--muted);white-space:nowrap;line-height:1.6}.step-text,.text-lesson .step-text{font-size:18px;line-height:1.5;min-height:0;flex:1;margin:0;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere}.step-text.reading-overflow{overflow:auto}.journey-copy .note-launch{display:none}
.journey .narration{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:8px;margin:0;border-radius:12px}.journey .narration>span{display:none}.journey .audio-controls{flex:1;gap:6px}.journey .audio-controls>.btn{font-size:15px;min-width:0;padding:8px}.journey .audio-timeline input{height:24px}.journey .audio-timeline small{font-size:14px;line-height:1.3}.journey .narration label{font-size:0;gap:0}.journey .narration select{font-size:16px;width:60px;min-height:44px;padding:4px}
.journey-actions{position:static;transform:none;width:100%;max-width:none;flex-shrink:0;min-height:64px;padding:8px 0;gap:8px}.journey-actions .btn{min-height:48px;font-size:16px}.journey-actions [hidden]{display:none!important}
.text-lesson .journey-stage{display:flex;max-width:760px;padding:0;min-height:0;justify-content:stretch}.text-lesson .journey-image{display:none}.text-lesson .journey-copy{height:100%;padding:24px}.text-lesson .journey-copy h2{font-size:24px}
@media(max-width:700px) and (min-height:501px){.journey{padding-left:14px;padding-right:14px}.journey-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,44fr) minmax(0,56fr);gap:10px}.journey[data-step="0"] .journey-stage{grid-template-rows:minmax(0,60fr) minmax(0,40fr)}.journey-heading h1{font-size:24px}.journey-copy{padding:12px;gap:6px}.journey-copy h2{font-size:20px}.journey .narration{padding:6px}.journey-header small{font-size:14px}.journey-header{gap:5px}.journey-actions>.primary{max-width:none}.text-lesson .journey-stage{display:flex}}
@media(max-height:650px){.journey-header{min-height:48px;padding:2px 0}.journey-heading{padding:6px 0}.journey-heading h1{font-size:22px}.journey-copy{padding:10px;gap:6px}.journey-copy h2{font-size:19px}.journey-actions{min-height:58px;padding:5px 0}.journey-stage{gap:8px}}
@media(max-height:500px){.journey{padding-left:12px;padding-right:12px}.journey-header{min-height:44px}.journey-heading{padding:4px 0}.journey-heading h1{font-size:20px}.journey-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr)}.journey-copy h2{font-size:18px}.journey .viewer-thumbs{min-height:44px;padding:0 4px}.journey-actions{min-height:54px;padding:3px 0}}
/* The image gets the remaining space, rather than a fixed fraction of the screen. */
.image-modal[open]{display:flex;flex-direction:column;width:calc(100% - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:10px;overflow:hidden;gap:6px}.image-modal .dialog-header{position:static;min-height:44px;margin:0;padding:0;flex-shrink:0}.image-modal .image-annotation-toolbar{padding:0;min-height:44px;flex-shrink:0}.image-modal .zoom-stage{min-height:0;height:auto;flex:1;width:100%}.image-modal .image-navigation{margin:0;min-height:44px;flex-shrink:0}.image-modal .image-touch-hint{margin:0;flex-shrink:0}.image-modal .zoom-controls{margin:0;flex-shrink:0}.image-modal .zoom-controls small{display:none}.viewer-settings{flex-shrink:0}.viewer-settings>summary{display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:44px;font-size:15px;color:var(--accent);border:1px solid var(--line);border-radius:12px}.viewer-settings>summary::after{content:'＋';margin-left:10px}.viewer-settings[open]>summary::after{content:'−'}.image-modal .image-adjustments{margin:0;padding:6px 0;gap:8px}.image-modal .image-adjustments label{min-width:35%}.image-modal .image-adjustments input{min-height:32px}.image-modal .image-annotation-toolbar .annotation-toggle{width:auto;min-height:44px}
@media(max-height:500px) and (min-width:600px){.image-modal[open]{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:6px 12px}.image-modal .dialog-header{grid-column:1/-1;grid-row:1}.image-modal .zoom-stage{grid-column:1;grid-row:2/6;height:100%}.image-modal .image-annotation-toolbar{grid-column:2;grid-row:2}.image-modal .image-navigation{grid-column:2;grid-row:3}.image-modal .viewer-settings{grid-column:2;grid-row:4}.image-modal .zoom-controls{grid-column:2;grid-row:5;align-self:end}.image-modal .image-touch-hint{display:none}}
.reference-modal{max-width:1040px}.reference-sheet h1{font-size:28px;line-height:1.2;margin:12px 0 24px}.reference-sheet h2{font-size:20px;margin:22px 0 12px}.reference-sheet section p,.reference-sheet figcaption p{font-size:18px;line-height:1.6;white-space:pre-line;margin:0 0 14px}.reference-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}.reference-images figure{margin:0;min-width:0;background:var(--panel2);border-radius:16px;padding:12px}.reference-images figure>img,.reference-images figure>svg{display:block;width:100%;height:300px;object-fit:contain;background:#000}.reference-images figcaption{font-size:14px;line-height:1.5;padding-top:10px}.reference-source{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.reference-source summary{cursor:pointer;min-height:44px}.reference-source p{line-height:1.6;margin:12px 0}
.reading-count{flex:0 0 46px;min-width:46px;text-align:right}
@media(max-height:500px) and (min-width:600px){.image-modal .image-adjustments{flex-wrap:nowrap;gap:6px}.image-modal .image-adjustments label{min-width:0}.image-modal .image-adjustments .btn{width:44px;min-width:44px;padding:10px}.image-modal .image-adjustments .btn span{display:none}}
@media(max-width:360px) and (min-height:501px){.journey:not([data-step="0"]):has(.viewer-thumbs>button:nth-child(6)) .journey-stage{grid-template-rows:minmax(0,54fr) minmax(0,46fr)}}
@media(max-width:310px) and (min-height:501px){.journey:not([data-step="0"]):has(.viewer-thumbs>button:nth-child(5)) .journey-stage{grid-template-rows:minmax(0,54fr) minmax(0,46fr)}}