/* Saltstraumen lesson. All rules scoped under .sst-* */
.sst-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sst-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* 0 and 8. the race out of the gap */
.sst-full { position: relative; flex: 1; width: 100%; min-height: 240px; padding: 8px 16px 16px; display: flex; }
.sst-race { display: block; width: 100%; flex: 1; min-height: 220px; border-radius: 22px; }
.sst-race-sm { flex: none; height: 250px; max-width: 360px; }

/* 1. from above */
.sst-map { position: relative; width: 100%; max-width: 360px; margin: 0; }
.sst-map img { display: block; width: 100%; border-radius: 16px; }
.sst-tag { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 999px; background: rgba(10,14,26,.82); color: var(--text); font: 700 12.5px var(--sans); white-space: nowrap; pointer-events: none; }
.sst-t-bodo { left: 30%; top: 24%; }
.sst-t-fjord { left: auto; right: 1%; top: 40%; transform: translateY(-50%); color: var(--gold); }
.sst-gap { position: absolute; left: 63%; top: 55%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 14px rgba(252,192,80,.7); animation: sstPing 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes sstPing { 50% { scale: 1.25; opacity: .6; } }

/* 2. the squeeze */
.sst-sim { display: block; width: 100%; max-width: 360px; height: 230px; border-radius: 20px; touch-action: none; cursor: grab; }
.sst-read { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); }
.sst-read b { font: 800 20px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.sst-read span { font: 600 13px var(--sans); color: var(--dim); }
.sst-read.lit { border-color: var(--gold); }
.sst-read.lit b { color: var(--gold); }

/* 4. the hose */
.sst-hose { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.sst-h-pipe { fill: none; stroke: #3c9a52; stroke-width: 14; stroke-linecap: round; }
.sst-h-nozzle { fill: #2f7d42; }
.sst-h-thumb { fill: #e8b48f; opacity: 0; transition: opacity .3s; }
.sst-h-jet { fill: none; stroke: #8fd3ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 6 7; animation: sstRun .5s linear infinite; }
.sst-h-hard { opacity: 0; stroke-width: 3; }
.sst-squeezed .sst-h-thumb { opacity: 1; }
.sst-squeezed .sst-h-soft { opacity: 0; }
.sst-squeezed .sst-h-hard { opacity: 1; animation-duration: .2s; }
@keyframes sstRun { to { stroke-dashoffset: -13; } }

/* 5 and 6. the side view */
.sst-side { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.sst-s-water { fill: #1d6f86; }
.sst-s-bed { fill: #5b4a3a; }
.sst-s-flow { fill: none; stroke: #fcc050; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 10 8; opacity: 0; }
.sst-flowing .sst-s-flow { opacity: 1; animation: sstRun2 .6s linear infinite; }
@keyframes sstRun2 { to { stroke-dashoffset: -18; } }
.sst-s-tick { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sst-s-step { transition: opacity .3s; }
.sst-s-lb { font: 800 14px var(--sans); fill: var(--text); text-anchor: middle; }
.sst-s-dt { fill: var(--gold); font-size: 13px; }
.sst-s-cap { font: 700 13px var(--sans); fill: #e2d6c8; text-anchor: middle; }
.sst-dirs { width: 100%; max-width: 340px; }
.sst-dirs .choices.sst-arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 7. three moments of one tide */
.sst-snaps { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.sst-when { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px; min-height: 64px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--raised); color: var(--text); font: 700 13px var(--sans); }
.sst-when b { flex: none; width: 62px; text-align: left; }
.sst-snap { flex: 1; min-width: 0; height: auto; border-radius: 8px; background: #0d1a2c; }
.sst-boat { fill: #f2e6d0; }
.sst-mast { stroke: #f2e6d0; stroke-width: 1.5; }
.sst-sail { fill: var(--gold); }
.sst-snap-key { display: flex; justify-content: space-between; padding: 0 10px 0 80px; font: 800 13px var(--sans); color: #cfe3ea; margin-bottom: -4px; }
.sst-when.right { border-color: var(--mint); color: var(--mint); }
.sst-when.wrong { border-color: var(--red); color: #FF8A8A; }
.sst-when.dim:not(.wrong):not(.right) { opacity: .55; }
.sst-s-capl { stroke: #e2d6c8; stroke-width: 1.5; }
.sst-t-gap { left: 46%; top: 72%; }

@media (max-height: 700px) {
  .sst-sim { height: 200px; }
  .sst-race-sm { height: 210px; }
  .sst-map { max-width: 320px; }
  .sst-when { min-height: 54px; }
}