#tsunami-journey{scroll-margin-top:20px;margin:25px 0 32px;--j-teal:#126c67;--j-light:#e9f3f0}
.j-top{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:35px;align-items:center;border-top:3px solid var(--ink);padding:24px 0}.j-opening{font-size:1.05rem;max-width:68ch;margin-bottom:0}.j-case label{font-size:.9rem}.j-case select{width:100%}.j-case small{display:block;color:var(--muted);margin-top:5px;font-size:.8rem}.j-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}.j-stops button{background:#fff;text-align:left;padding:18px 16px;display:grid;grid-template-columns:25px 1fr;column-gap:10px;align-content:start;color:var(--ink);border:0;cursor:pointer;min-height:98px}.j-stops button>span{grid-row:1/3;font-size:1.15rem;color:var(--j-teal)}.j-stops button b{font-size:.92rem;line-height:1.35}.j-stops small{font-size:.76rem;margin-top:5px;color:var(--muted)}.j-stops [aria-current=step]{background:var(--ink);color:#fff}.j-stops [aria-current=step]>span{color:#f8d46a}.j-stops [aria-current=step] small{color:#d0deea}.j-status{display:flex;gap:20px;align-items:center;justify-content:space-between;margin:12px 0 22px;color:var(--muted);font-size:.85rem}.j-text-button{border:0;background:none;color:var(--blue);text-decoration:underline;text-underline-offset:4px;padding:10px 0;cursor:pointer;font-size:.9rem;font-weight:600;text-align:left}.j-stage{border:1px solid var(--line);border-radius:12px;background:#fff;padding:30px}.j-stage-heading{border-bottom:1px solid var(--line);margin-bottom:25px;padding-bottom:18px}.j-stage-heading h2{font:400 clamp(1.8rem,3vw,2.5rem)/1.12 Georgia,serif;letter-spacing:-.025em;margin:8px 0 10px}.j-stage-heading .eyebrow{color:var(--j-teal)}.j-case-reminder{font-size:.9rem;color:var(--muted);margin:0}.j-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}.j-columns>*{min-width:0}.j-lead{font-size:1.13rem;line-height:1.55;margin-bottom:23px}.j-source{margin:0;background:#f6f8fa;border-radius:8px;border:1px solid var(--line);overflow:hidden}.j-source img{display:block;width:100%;height:auto}.j-source figcaption{font-size:.8rem;line-height:1.5;padding:15px 18px;color:var(--muted)}.j-source a,.j-stage a{color:var(--blue);text-underline-offset:3px}.j-evidence{padding:22px 0}.j-evidence>b{display:block;font-size:1.75rem;letter-spacing:-.02em;margin-bottom:8px}.j-evidence p{font-size:.95rem}.j-evidence h3,.j-work h3,.j-media h3,.j-discuss h3,.j-later h3,.j-worked h3{font:400 1.5rem/1.2 Georgia,serif;margin:0 0 12px}.j-work label,.j-stage label{display:block;font-size:1rem;font-weight:650;line-height:1.45;margin:18px 0 9px}.j-stage textarea{width:100%;font:inherit;line-height:1.5;resize:vertical;min-height:112px;background:#fcfcfa}.j-stage select{width:100%;font-size:1rem;padding:12px}.j-hint{background:#f1f5fb;border-left:3px solid var(--blue);padding:14px 16px;font-size:.95rem}.j-feedback{padding:17px 20px;background:var(--j-light);border-left:3px solid var(--j-teal);border-radius:3px;margin-top:16px;line-height:1.55}.j-feedback p:last-child{margin:0}.j-reconsider{background:#fff5df;border-color:#ab7419}.j-media,.j-discuss,.j-later{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.j-small{font-size:.85rem;color:var(--muted);line-height:1.5}.j-check{border:0;border-bottom:1px solid var(--line);padding:0 0 22px;margin:0 0 24px;min-width:0}.j-check legend{font-size:1.03rem;font-weight:650;margin-bottom:14px;line-height:1.45}.j-options{display:grid;gap:9px}.j-options button{font:inherit;font-size:1rem;line-height:1.45;text-align:left;background:#fff;border:1px solid #b7c5d1;border-radius:7px;padding:12px 15px;display:flex;gap:12px;align-items:start;color:var(--ink);cursor:pointer}.j-options button[aria-pressed=true]{border:2px solid var(--j-teal);padding:11px 14px;background:#eef7f4}.j-option-dot{color:var(--j-teal)}.j-worked{border-radius:8px;background:var(--j-light);padding:23px;margin-bottom:26px}.j-worked .eyebrow{display:block;color:var(--j-teal);margin-bottom:12px}.j-worked p{margin:0}.j-system{padding:22px;background:#eef3f7;border:1px solid var(--line);border-radius:9px;text-align:center}.j-sensor-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.j-sensor-row>div,.j-center,.j-community{padding:18px 12px;background:white;border:1px solid #b5c6d4;border-radius:7px}.j-system span{display:block;font-size:.85rem;color:var(--j-teal);margin-bottom:6px}.j-system b{font-size:1rem;display:block;line-height:1.4}.j-system p{font-size:.9rem;margin:7px 0 0;line-height:1.4}.j-converge{font-size:1.8rem;line-height:1.3;color:var(--j-teal);padding:6px}.j-center{background:var(--ink);color:#fff}.j-center span{color:#ffdc77}.j-system .j-timing{padding:13px 4px;font-size:.88rem}.j-down{padding:16px 10px;font-size:.92rem;line-height:1.45}.j-muted-function{border:2px dashed #9a5b38!important;background:#f9ece4!important;color:#78482e!important}.j-muted-function span{color:#78482e}.j-function-picker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px}.j-function-picker [aria-pressed=true]{background:var(--ink);color:white}.j-function-picker .j-text-button{margin-left:auto}.j-details{border:1px solid var(--line);border-radius:8px;margin:25px 0;background:white}.j-details>summary{padding:17px 20px;cursor:pointer;font-weight:650}.j-details>.j-columns,.j-details>.j-system{margin:20px}.j-funding{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}.j-funding>div{background:#f4f5ef;border:1px solid #dadfc9;border-radius:8px;padding:25px}.j-funding span{display:block;font-size:.9rem;color:var(--muted)}.j-funding b{display:block;font-size:2rem;margin:12px 0;letter-spacing:-.025em}.j-funding a{font-size:.9rem}.j-transfer{background:var(--j-light);border-left:4px solid var(--j-teal);padding:24px;margin-bottom:28px}.j-transfer h3{font:400 1.6rem Georgia,serif;margin:10px 0}.j-safety{font-size:.95rem;border-left:3px solid var(--blue);padding-left:20px}.j-safety h3{font-size:1.08rem;margin-bottom:12px}.j-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:30px;padding-top:25px}.j-bottom>span{font-size:.8rem;color:var(--muted);max-width:180px}.j-bottom .button{white-space:normal;text-align:center}.j-later>a{display:block}.j-reference{margin:30px 0;border:1px solid var(--line);border-radius:10px;background:#fff}.j-reference>summary{padding:23px;cursor:pointer;font-weight:650;font-size:1rem}.j-reference-content{padding:0 25px 28px}.j-alert-link{font-size:.9rem;line-height:1.5;margin:12px 0 20px;color:var(--muted)}.j-alert-link a{color:var(--blue)}.j-live-export{margin:24px 0 0}#tsunami-journey button:focus-visible,#tsunami-journey a:focus-visible{outline:3px solid #b66c13;outline-offset:3px}#tsunami-journey [hidden]{display:none!important}
@media(max-width:900px){.j-stops button{padding:14px 10px;grid-template-columns:1fr;gap:5px}.j-stops button>span{grid-row:auto}.j-columns{gap:22px}.j-stage{padding:23px}.j-system{padding:15px}.j-top{grid-template-columns:1fr 230px;gap:20px}.j-bottom{flex-wrap:wrap}.j-bottom>span{order:3;max-width:none;flex-basis:100%}}
@media(max-width:700px){.j-top,.j-columns,.j-funding{grid-template-columns:1fr}.j-case{max-width:340px}.j-stops{grid-template-columns:1fr}.j-stops button{min-height:0;grid-template-columns:24px 1fr auto;align-items:center;padding:12px 15px}.j-stops small{margin:0}.j-stage{padding:20px}.j-status{align-items:flex-start;font-size:.8rem}.j-status .j-text-button{max-width:145px;padding:0;font-size:.8rem}.j-stage-heading h2{font-size:1.8rem}.j-bottom{align-items:stretch}.j-bottom .button{flex:1;min-width:130px}.j-function-picker .j-text-button{margin:0;width:100%}.j-reference-content{padding:0 14px 20px}.j-sensor-row{gap:8px}.j-sensor-row>div{padding:13px 9px}.j-system b{font-size:.9rem}.j-system span{font-size:.8rem}.j-funding{gap:14px}.j-source figcaption{font-size:.82rem}.j-reference .tsunami-intro{padding:22px}.j-options button{font-size:1rem}}

.j-work>.j-text-button+.button{margin-left:12px}.j-work>.button+.j-text-button{margin-left:12px}

/* Keep the first source image visible without losing the lesson overview. */
#quakes-view{padding-top:28px}#quakes-view>.page-heading{margin-bottom:20px}
#tsunami-journey{margin-top:20px}.j-top{padding:16px 0}.j-top .eyebrow{margin-bottom:9px}
.j-stops button{min-height:78px;padding-top:13px;padding-bottom:13px}
.j-status{margin:8px 0 16px}.j-status .j-text-button{padding-top:6px;padding-bottom:6px}
.j-stage{padding:24px}.j-stage-heading{padding-bottom:12px;margin-bottom:20px}
.j-stage-heading .eyebrow{margin-bottom:0}.j-stage-heading h2{margin:6px 0 8px}
@media(max-width:700px){.j-stops button{min-height:0;padding:12px 15px}.j-stage{padding:20px}}

.j-how{margin:22px 0 28px;border:1px solid #c7d9d4;border-radius:12px;background:#edf5f2;color:var(--ink)}
.j-how>summary{padding:19px 24px;cursor:pointer;list-style-position:inside}
.j-how>summary>span{font-size:1.13rem;font-weight:700}.j-how>summary>small{display:inline-block;margin-left:14px;color:var(--muted);font-size:.88rem}
.j-how-content{padding:0 24px 23px}.j-how-intro{font-size:1.06rem;max-width:90ch;line-height:1.55;margin:0 0 22px}
.j-how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-left:23px;margin:0 0 22px}.j-how-steps li{padding-left:4px}.j-how-steps li::marker{font-weight:750;color:#126c67}.j-how-steps h2{font-size:1.05rem;font-weight:700;line-height:1.35;margin:0 0 9px}.j-how-steps p{font-size:.95rem;line-height:1.6;margin:0}
.j-how-boundary{padding:15px 18px;border-left:3px solid #126c67;background:#fff;line-height:1.55;font-size:.95rem;margin:0 0 20px}
.j-how-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.j-how-small{font-size:.88rem;line-height:1.55;color:#44576b;max-width:105ch;margin:12px 0 0}
.j-how :is(button,a,summary):focus-visible{outline:3px solid #b66c13;outline-offset:4px}
@media(max-width:800px){.j-how-steps{grid-template-columns:1fr;gap:19px}.j-how>summary{padding:18px}.j-how>summary>small{display:block;margin:6px 0 0 19px}.j-how-content{padding:0 18px 20px}.j-how-actions .button{white-space:normal;text-align:center}}

.j-survey{margin-top:30px;padding:26px;border:1px solid #bad6d1;border-radius:10px;background:#edf5f2}
.j-survey .eyebrow{margin:0 0 8px;color:#126c67}
.j-survey h3{font:400 clamp(1.45rem,2.5vw,1.9rem)/1.2 Georgia,serif;margin:0 0 10px}
.j-survey>p{max-width:78ch;line-height:1.55}
.j-height-context{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.j-height-context>div,.j-height-output,.j-height-controls>div,.j-survey-predict,.j-survey-result{background:#fff;border:1px solid #c6d8d5;border-radius:8px;padding:18px;min-width:0}
.j-height-context b{display:block;margin-bottom:8px}.j-height-context p{font-size:.92rem;line-height:1.5;margin:0}
.j-height-output{margin:20px 0 24px}.j-height-headline{font-size:1.15rem;margin:0 0 24px}.j-height-headline b{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:750;letter-spacing:-.025em;color:#123b50}
.j-height-ruler{height:32px;position:relative;background:repeating-linear-gradient(to right,#eef3f5,#eef3f5 calc(10% - 1px),#cbd8db calc(10% - 1px),#cbd8db 10%);border:1px solid #b7c9cf;border-radius:6px}
.j-height-band{position:absolute;top:6px;bottom:6px;background:#46a995;border-radius:4px;min-width:2px}.j-height-center{position:absolute;top:0;bottom:0;border-left:3px solid #0b394e}.j-height-line{position:absolute;top:-7px;bottom:-7px;border-left:2px dashed #a94725}
.j-height-ruler-labels{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:#4b6170;margin:8px 0 10px}.j-height-decision{font-weight:650;line-height:1.45;margin:16px 0 0;color:#123b50}
.j-height-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.j-height-controls h4{margin:0 0 10px;font-size:1rem;line-height:1.3}.j-height-control+ .j-height-control{border-top:1px solid #d7e4e0;margin-top:15px;padding-top:12px}.j-height-control label{display:block;font-size:.88rem!important;font-weight:650;margin:7px 0!important}.j-height-control output{display:block;color:#126c67;font-size:1.05rem;margin-top:2px}.j-height-control input[type=range]{display:block;width:100%;margin:10px 0;accent-color:#126c67;cursor:pointer}.j-height-control p{font-size:.78rem;color:#4b6170;line-height:1.4;margin:0}
.j-survey-predict{margin:18px 0}
.j-share-checkpoint{margin:18px 0;padding:18px 20px;border:2px solid #126c67;border-radius:8px;background:#f8fcfa}
.j-share-checkpoint p{margin:0 0 12px;line-height:1.5}
.j-share-checkpoint .j-small{margin:12px 0 0}
.j-survey-predict h4,.j-survey-result h4{margin:0 0 10px;font-size:1.1rem}
.j-survey-predict p{margin:0 0 14px}
.j-survey-predict>div{display:flex;flex-wrap:wrap;gap:8px}
.j-survey-predict>div button{font:inherit;text-align:left;padding:10px 12px;border:1px solid #8baaa6;border-radius:7px;background:#fff;color:var(--ink);cursor:pointer}
.j-survey-predict>div button[aria-pressed=true]{border:2px solid #126c67;padding:9px 11px;background:#e2f3ed;font-weight:700}
.j-survey-predict .button,.j-survey>.button{margin-top:16px}
.j-survey-result{margin:16px 0;border-left:5px solid #b45324}
.j-survey-result p:last-child{margin-bottom:0}
.j-survey :is(button,input):focus-visible{outline:3px solid #b66c13;outline-offset:3px}
@media(max-width:850px){.j-height-controls{grid-template-columns:1fr 1fr}.j-height-controls>div:last-child{grid-column:1/-1}}
@media(max-width:700px){.j-survey{padding:19px}.j-height-context,.j-height-controls{grid-template-columns:1fr}.j-height-controls>div:last-child{grid-column:auto}.j-height-context>div,.j-height-output,.j-height-controls>div,.j-survey-predict,.j-survey-result,.j-share-checkpoint{padding:14px}.j-height-headline b{display:block}}

/* Keep the start-over control available while the learner works farther down the page. */
#tsunami-journey .j-status{position:sticky;top:8px;z-index:20;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 14px #0d27321c;padding:9px 12px;margin:12px 0 20px;min-height:56px}
#tsunami-journey .j-status .button{flex:none;white-space:nowrap;padding:9px 14px}
#tsunami-journey .j-status-actions{display:flex;align-items:center;gap:8px}
#journey-reset-dialog .dialog-actions{align-items:center;flex-wrap:wrap}
@media(max-width:700px){#tsunami-journey .j-status{flex-wrap:wrap}#tsunami-journey .j-status-actions{width:100%}#tsunami-journey .j-status-actions .button{flex:1}}
@media(max-width:520px){#tsunami-journey .j-status{gap:8px;padding:7px 9px;font-size:.72rem}#tsunami-journey .j-status .button{padding:8px 10px;font-size:.78rem;white-space:normal;text-align:center}}
