/* Schibsted Grotesk (SIL Open Font Licence 1.1, see fonts/OFL.txt), served from this site: no request to Google */
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/SchibstedGrotesk-Variable.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
:root{
  --firn:#F4F6F7; --sheet:#FFFFFF; --rock:#1C2A33; --moraine:#66757E; --faint:#93A0A7; --ink:#0E1A22; --rule-2:#EDF0F2;
  --crevasse:#2D6E8E; --ice:#CFE3EA; --loss:#C8322A; --rule:#DDE3E6;
  --accent:#C8322A;
  --old:#F2A93B; --new:#E5443B; --measure:#FFD84D;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--firn);color:var(--rock);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--crevasse);outline-offset:2px}
.app{--lw:290px;--rw:320px;display:grid;grid-template-columns:var(--lw) minmax(0,1fr) var(--rw);height:100%}

/* ---------- left ---------- */
.scroll-cue{position:sticky;bottom:-28px;height:0;margin-top:-24px;z-index:5;pointer-events:none}
.scroll-cue[hidden]{display:none}
.scroll-cue::before{content:"";position:absolute;left:-20px;right:-20px;bottom:-28px;height:96px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--sheet) 80%)}
.scroll-cue button{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);pointer-events:auto;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 16px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:700 12.5px/1 var(--sans);box-shadow:0 3px 12px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
.scroll-cue svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:cueBob 1.6s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}
.controls{--pad:20px;background:var(--sheet);border-right:1px solid var(--rule);overflow-y:auto;padding:22px 20px 28px;display:flex;flex-direction:column;gap:24px}
.brand-top{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.brand .brand-top h1{margin:0;line-height:1.1}   /* two lines of 20 px x 1.1 = the height of the logo (46 x 44 px) */
.home-link{color:inherit;text-decoration:none;cursor:pointer}
.home-link:hover .t1,.home-link:hover{opacity:.85}
.brand h1 .t1{display:block;white-space:nowrap;color:#0A1B33}
.brand h1 .t2{display:block;color:var(--accent)}
.brand-logo{flex:none;width:46px;height:auto;margin-top:1px}
.brand h1{font-size:20px;line-height:1.15;margin:0 0 8px;font-weight:700;letter-spacing:-.018em;color:var(--accent)}
.brand p{margin:0;color:var(--moraine);font-size:12.5px;text-align:justify;text-align-last:left;hyphens:auto}      /* the blurb fills the width of the panel; the last line of each paragraph stays at the left */
.brand .what{margin-top:2px;line-height:1.4}
.step{display:flex;flex-direction:column;gap:10px}
.controls .step ~ .step{border-top:1px solid var(--rule);margin:0 calc(-1 * var(--pad));padding:22px var(--pad) 0}      /* the thin line runs the full width of the panel */
.step-h{display:flex;align-items:center;gap:10px;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moraine)}      /* grey label, the step number in red: 01 GLACIER */
.step-lock{display:none;white-space:nowrap;margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--moraine)}
.app.no-glacier .step-lock{display:inline}
.app.no-glacier #vizGroup > :not(.step-h),.app.no-glacier #shareGroup > :not(.step-h):not(.act-link):not(.fyi):not(.fyi-by){opacity:.4;filter:none}      /* a click on them says why (js/08-controls.js), so no pointer-events:none on the box; the sliders inside let the click through */
.app.no-glacier #vizGroup input,.app.no-glacier #shareGroup input,.app.sat-off .sat-need input{pointer-events:none}
.app.sat-off .sat-need{opacity:.4;filter:none}
.app.sat-off.no-glacier #vizGroup > * .sat-need{opacity:1}      /* inside a box that is already greyed */
.step.pop{animation:stepPop .9s ease-out}
@keyframes stepPop{0%{background:rgba(200,50,42,.16);transform:translateX(-6px)}40%{transform:none}100%{background:transparent}}
.step.pop{border-radius:10px;margin:-6px;padding:6px}
.down-hint{display:none;border:0;background:none;padding:2px 0;color:var(--crevasse);font:600 13px var(--sans);text-align:left;cursor:pointer}
@media (max-width:720px){.down-hint:not([hidden]){display:block}}
.step-h .num{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.m-select.placeholder{color:var(--moraine);font-style:italic}
.m-select{display:none;width:100%;min-height:42px;font-size:16px;border:1px solid var(--rule);border-radius:0;padding:8px 10px;background:var(--sheet)}
.note{font-size:11.5px;line-height:1.4;color:var(--moraine);margin:0}
.note:empty{display:none}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{border:1px solid var(--rule);background:var(--sheet);border-radius:0;padding:5px 5px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:12px;font-weight:600;color:var(--rock)}
.yr-range{padding:2px 4px 0}
.yr-vals{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--moraine)}
.yr-vals b{font-size:12px;font-weight:600;color:var(--rock);font-variant-numeric:tabular-nums}
.yr-track{position:relative;height:30px}
.yr-track::before{content:'';position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:var(--rule)}
.yr-fill{position:absolute;top:13px;height:4px;border-radius:2px;background:var(--accent)}
.yr-track input{position:absolute;left:-8px;width:calc(100% + 16px);top:0;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.yr-track input::-webkit-slider-runnable-track{background:none;height:30px}
.yr-track input::-moz-range-track{background:none}
.yr-track input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:7px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.yr-track input::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab}
.yr-ticks{display:flex;justify-content:space-between;margin:-2px 0 0;padding:0 2px}
.yr-ticks i{width:2px;height:5px;background:var(--moraine);opacity:.6}
.yr-ticks i.off{opacity:.2}
.sw i{display:block;height:44px;border-radius:0;overflow:hidden}
.sw i svg{display:block;width:100%;height:100%}
.sw[aria-pressed="true"]{background:#E9EFF2;border-color:var(--rule);box-shadow:inset 0 -2px 0 var(--accent)}      /* selected, as in the glacier list: pale, red line under it */
.sw:hover{border-color:var(--crevasse)}
.hint{font-size:11.5px;color:var(--moraine);margin:8px 0 0}
.glaciers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.glaciers button{width:100%;display:grid;grid-template-columns:24px 1fr auto;align-items:baseline;column-gap:6px;row-gap:0;text-align:left;padding:6px 10px 6px 13px;border:0;background:none;border-radius:0;cursor:pointer}
.glaciers button:hover{background:var(--firn)}
.glaciers button[aria-pressed="true"] .rank{color:var(--moraine);font-weight:400}
.glaciers button[aria-pressed="true"]{background:#E9EFF2;box-shadow:inset 3px 0 0 var(--accent)}      /* selected: pale row, red bar on the left */
.glaciers button[aria-pressed="true"] .name{color:var(--rock);font-weight:700}
.glaciers button[aria-pressed="true"] .area{color:var(--rock)}
.glaciers .rank{color:var(--moraine);font-variant-numeric:tabular-nums;font-size:11px}
.glaciers .name{font-weight:500;color:var(--moraine)}
.glaciers .area{color:var(--moraine);font-size:12.5px}

.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--firn);border-radius:0;padding:3px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border:1px solid var(--rule);border-radius:0;background:var(--sheet);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--moraine)}
.modes button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.modes.views{grid-template-columns:repeat(2,1fr)}
.modes.views button{flex-direction:row;justify-content:center;gap:8px;padding:8px 4px}
.modes.views button svg{width:20px;height:20px}
.is-3d .map-only{display:none!important}
.modes button:hover{border-color:var(--crevasse)}
.orient-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:-1.5px}
.orient-sub[hidden]{display:none}
.orient-pad{grid-column:2;display:flex;justify-content:center;gap:3px;padding:3px 4px 4px;border:1px solid var(--rule);border-top:0;border-radius:0;background:#E9EFF2}      /* hangs from the Compare button: same width, same red edge */
.orient-pad button{display:inline-flex;align-items:center;justify-content:center;width:27px;height:22px;padding:0;border:1px solid var(--rule);border-radius:0;background:var(--sheet);color:var(--moraine);cursor:pointer}
.orient-pad button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.orient-pad button:hover{border-color:var(--crevasse)}
.orient-pad button[aria-pressed="true"]{border-color:var(--rule);color:var(--rock);background:var(--sheet);box-shadow:inset 0 -2px 0 var(--accent)}
#modeGroup.has-sub #modeCompare{border-bottom-color:transparent}
.modes button[aria-pressed="true"]{background:#E9EFF2;border-color:var(--rule);box-shadow:inset 0 -2px 0 var(--accent);color:var(--rock);font-weight:700}
.segment button:disabled{color:#A9B1B5;cursor:not-allowed}
.segment button{border:0;background:none;padding:8px 0;white-space:nowrap;border-radius:0;cursor:pointer;font-weight:500}
.segment button[aria-pressed="true"]{background:#E9EFF2;box-shadow:inset 0 -2px 0 var(--accent);font-weight:700;color:var(--rock)}

.side-label{font-size:10px;font-weight:600;color:var(--moraine);text-transform:uppercase;letter-spacing:.1em;margin:0 0 4px}
.side-label span{font-size:11px;color:var(--moraine)}
.years{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.years button{padding:4px 0;border:1px solid var(--rule);background:var(--sheet);border-radius:0;cursor:pointer;font-variant-numeric:tabular-nums;font-size:12px;line-height:1.3}
.years button:hover:not(:disabled){border-color:var(--crevasse)}
.years button[aria-pressed="true"]{background:#E9EFF2;color:var(--rock);font-weight:700;border-color:var(--rule);box-shadow:inset 0 -2px 0 var(--accent)}
.years button.in-range{background:var(--firn);border-color:var(--rule)}
.years button:disabled{color:#B6BEC2;background:var(--firn);border-color:var(--firn);cursor:not-allowed;pointer-events:none}
.years button:disabled.missing{text-decoration:line-through}
.years .latest-chip{font-weight:700;color:var(--accent)}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;gap:8px;align-items:center}
.spin-s{display:inline-block;width:12px;height:12px;margin-right:6px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spinS .8s linear infinite}
@keyframes spinS{to{transform:rotate(360deg)}}
.play{background:var(--accent)!important;flex:0 0 auto;border:0;background:var(--rock);color:#fff;border-radius:0;padding:6px 12px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px}
.play svg{width:12px;height:12px;fill:currentColor;flex:none}
.play:disabled{opacity:.4;cursor:not-allowed}
select.small{-webkit-appearance:none;appearance:none;border:1px solid var(--rule);border-radius:0;padding:6px 30px 6px 8px;font-size:13px;cursor:pointer;
  background:var(--sheet) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236B7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center/15px}      /* a chevron as big as on the cards, instead of the small system arrow */
.speed{display:inline-flex;align-items:center;gap:6px;min-width:0}
.row .speed{flex:1 1 auto;margin-left:12px}
#playBtn{min-width:104px;padding:6px 20px}
.speed select{flex:1;min-width:0;width:100%;padding:6px 30px 6px 8px}
.loop{flex:none;white-space:nowrap}
.frame-row{display:flex;align-items:center;gap:12px}
.frame-row .frame{flex:1 1 auto;min-width:0}
.frame-row .toggle{margin:0;min-height:0}
.speed-range{flex:1;min-width:0;width:100%;margin:0;accent-color:var(--accent);cursor:pointer}
.speed-out{flex:none;min-width:42px;font-size:12px;color:var(--moraine);font-variant-numeric:tabular-nums;text-align:right}
.speed-ico{width:20px;height:20px;flex:none;fill:var(--accent);stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.speed-ico path:first-child{fill:none;stroke:var(--moraine)}
.frame{width:100%;accent-color:var(--rock)}
.slider-row{display:flex;justify-content:space-between;font-size:13.5px;margin:4px 0 2px}
/* brightness and the two opacities are secondary: label and slider share one line */
.tune{display:flex;flex-direction:column;gap:2px;margin-top:-2px}
.tune-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;column-gap:12px}
.tune .slider-row{margin:0;font-size:12.5px;gap:6px;color:var(--moraine)}
.tune .slider-row output{white-space:nowrap;flex:none}
.tune input[type=range]{width:100%;margin:0;height:20px}
.slider-row output{color:var(--moraine);font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;margin-bottom:6px}
.toggle input:disabled + span{color:#A9B1B5}
.gl-icon{display:inline-block;width:20px;height:14px;vertical-align:middle}
.swatch{display:inline-block;width:18px;height:0;border-top:3px solid;vertical-align:middle}
.status:empty{display:none}
.status{font-size:11.5px;line-height:1.4;color:var(--moraine);margin:0;padding:6px 8px;background:var(--firn);border-radius:0}
.status.busy{display:flex;align-items:center;gap:8px}
.status.busy::before{content:'';flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.byline{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--moraine);text-align:center}
.byline a{color:var(--crevasse);font-weight:600}
.step .fyi{margin-top:6px}
.fyi{display:block;text-align:center;text-decoration:none;color:var(--rock);background:#FFF6DA;border:1px solid #F3DE94;border-radius:0;padding:14px 14px 12px}
.fyi:hover{border-color:#E2B93B}
.fyi-img{display:block;width:96px;height:auto;margin:0 auto 10px;border-radius:2px;box-shadow:0 3px 10px rgba(34,49,58,.28)}
.fyi-ask{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.fyi-name{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em}
.fyi-text{display:block;font-size:12px;color:var(--moraine);margin-top:4px;line-height:1.4}
.fyi-slot{display:none}
.fyi-go{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:0;padding:5px 14px}
.fyi:hover .fyi-go{background:#a92720}

/* ---------- centre ---------- */
.stage{position:relative;min-height:0;background:#070b14;overflow:hidden}   /* nothing on the map may widen the page */
#map{position:absolute;inset:0;background:#070b14}
.leaflet-container{font-family:var(--sans)}
.year-tag{position:absolute;top:12px;z-index:650;color:#fff;font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 1px 14px rgba(0,0,0,.55);pointer-events:none}
.year-tag small{display:block;font-size:12px;font-weight:500;letter-spacing:0;margin-top:6px;opacity:.85}
.year-tag .nw{white-space:nowrap}
#tagA,#tagT{left:14px}
#tagB{right:14px;text-align:right}
.is-horiz .divider{top:0;bottom:auto;left:0;right:0;width:auto;height:2px;margin:-1px 0 0}
.is-horiz #tagB{right:auto;left:14px;text-align:left}
.is-horiz .handle{cursor:ns-resize}
.is-horiz .handle svg{transform:rotate(90deg)}
@media (max-width:720px){.is-horiz #tagB{left:12px}}
.divider{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;z-index:640;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.4)}
.handle{position:absolute;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;z-index:660;display:grid;place-items:center;cursor:ew-resize;touch-action:none;box-shadow:0 2px 10px rgba(0,0,0,.5);border:0;animation:v3dPulse 1.8s ease-in-out infinite}      /* the same handle as the line in the 3D view */
.handle svg{width:26px;height:26px;stroke:var(--rock);stroke-width:2.4}
.handle.used{animation:none}
.handle:focus-visible{animation:none;outline:3px solid var(--crevasse,#2D6E8E)}
.handle-hint{position:absolute;white-space:nowrap;background:rgba(0,0,0,.66);color:#fff;font:600 12px/1 var(--sans);padding:6px 11px;border-radius:14px;pointer-events:none;top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.is-horiz .handle-hint{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
.handle.used .handle-hint{display:none}
@media (prefers-reduced-motion:reduce){.handle,.v3d-handle{animation:none}}
/* satellite scene: rounded corners and a soft shadow; the red glacier box is the frame (not while framing a video) */
.scene-img{border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.is-framing .scene-img{border-radius:0;box-shadow:none}
.is-framing .frame-label{display:none}      /* the outline stays in the download panes; only its label goes */
.frame-label{pointer-events:none}
.frame-label span{display:block;font:600 9.5px/12px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 0 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6)}
/* static Sentinel-2 background for all of Switzerland, a little darker than the scene */
.leaflet-bgPane-pane{filter:brightness(1.12) saturate(1)}
.is-timelapse .layerbox{top:12px}
@media (min-width:721px){.is-horiz .layerbox{top:12px}}      /* stacked images, slider moving up and down: the year tags sit on the left, the top right corner is free */
.is-timelapse #tagA,.is-timelapse #tagB,.is-timelapse .divider,.is-timelapse .handle{display:none}
#tagT{display:none}
#tagT{max-width:calc(100% - 24px)}
.is-timelapse #tagT{display:block}
.tl-dots{display:none;align-self:center;padding:6px 8px 5px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:500}      /* the timelapse timeline and play button sit in the black dock, above its buttons */
.is-timelapse .tl-dots{display:block}
.tl-dots:empty{display:none!important}      /* One year has no timeline: no empty row with a line above the buttons */
.mapbar-row{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:2px}      /* the tools stay on one line; only phones let them wrap */
.tl2{width:min(300px,56vw)}
.tl2-ends{display:flex;justify-content:space-between;font-size:11px;font-weight:500;letter-spacing:0;opacity:.85;text-shadow:0 0 6px rgba(0,0,0,.6)}
.tl2-ends b{font-weight:500}
.tl2-track{position:relative;height:16px;margin-top:2px}
.tl2-track::before{content:'';position:absolute;left:0;right:0;top:6.5px;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
.tl2-fill{position:absolute;left:0;top:6.5px;height:3px;border-radius:2px;background:#fff}
.tl2-tick{position:absolute;top:2px;width:2px;height:12px;margin-left:-1px;background:rgba(255,255,255,.4)}
.tl2-tick.on{background:#fff}
.tl2-dot{position:absolute;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}
.stage.mini .tl2{width:110px}.stage.mini .tl2-ends{font-size:9px}

.mapbar{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:670;display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--sheet);border-radius:8px;padding:4px;box-shadow:0 2px 12px rgba(0,0,0,.25);max-width:calc(100% - 24px);overflow-x:auto}
.mapbar button{border:0;background:none;padding:6px 10px;border-radius:5px;cursor:pointer;font-size:14px;white-space:nowrap}
.mapbar button:hover{background:var(--firn)}
.mapbar button:disabled{opacity:.35;cursor:default;background:none}
.mapbar button[aria-pressed="true"]{background:var(--rock);color:#fff}
.mapbar .zoom{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--moraine)}
.mapbar .sep{width:1px;height:20px;background:var(--rule);margin:0 4px;flex:none}
.v3d{position:absolute;inset:0;z-index:700;background:#0b1220;color:#fff}
.v3d[hidden]{display:none}
.v3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.v3d-top{position:absolute;left:14px;right:14px;top:12px;pointer-events:none;z-index:2}
.v3d .v3d-layers{top:12px;right:12px;z-index:5;color:var(--rock);max-height:calc(100% - 90px);overflow-y:auto}
.v3d-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.layerbox .slider-row{margin:2px 0;font-size:12px}
.layerbox input[type=range]{width:100%;margin:0}
/* full screen from the 3D view (the map's toolbar is under it): the top row of the tools card; in full screen the exit button takes over */
.v3d-measure > #v3dFs{margin-bottom:4px;border-bottom:1px solid var(--rule);border-radius:6px 6px 0 0}
.v3d-measure > #v3dFs .fs-out{display:none}
.stage.is-full #v3dFs .fs-in,.app.visual-only #v3dFs .fs-in{display:none}
.stage.is-full #v3dFs svg.fs-out,.app.visual-only #v3dFs svg.fs-out{display:block}
.stage.is-full #v3dFs span.fs-out,.app.visual-only #v3dFs span.fs-out{display:inline}
/* in the 3D view the way out of full screen is that same row of the tools card, not a button in the corner */
.app.is-3d .full-exit{display:none!important}
.app.is-3d .stage.is-full .v3d-top,.app.is-3d.visual-only .v3d-top{right:250px}
@media (min-width:721px){.v3d-top{right:250px}}
@media (max-width:720px){.v3d .v3d-layers{top:64px;right:8px}}
.v3d-top .v3d-year{position:static;z-index:auto}      /* the same year tag as on the map: one big year, one small line under it */
.v3d-top > span{display:block;margin-top:5px;font-size:12px;font-weight:500;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.v3d-msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;color:#cfd9e3;pointer-events:none}
.v3d-bottom{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:6px;font-size:11px;line-height:1.4;color:#aebccb;pointer-events:none}
.v3d-bottom a{color:#cfe3f1;pointer-events:auto}
.n-short,.n-less,.v3d-top .h-short{display:none}
.n-full{display:none}.n-short{display:inline}      /* the note of the 3D view: one short line, "Details" opens the rest (phone and desktop) */
#v3dNote.open .n-full{display:inline}#v3dNote.open .n-short{display:none}#v3dNote.open .n-less{display:inline}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:640;pointer-events:none;background:linear-gradient(to bottom,rgba(8,14,18,.5),rgba(8,14,18,.22) 55%,rgba(8,14,18,0))}      /* one soft dark gradient along the top edge keeps white text readable over bright snow (no boxes) */
.is-framing .stage::before{display:none}
.v3d::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(8,14,18,.5),rgba(8,14,18,.22) 55%,rgba(8,14,18,0))}
.v3d-measure{position:absolute;left:12px;top:106px;z-index:6;display:flex;flex-direction:column;gap:2px;background:var(--sheet);border-radius:8px;padding:4px;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.v3d-measure > button,.v3d-photos .ph-toggle,.v3d-photos .ph-cams,.v3d-photos .ph-btns button{min-height:36px;border:0;background:none;border-radius:6px;color:var(--rock);cursor:pointer;display:flex;align-items:center;gap:9px;padding:0 12px 0 8px;font:600 12.5px/1.2 var(--sans);text-align:left;white-space:nowrap}
.v3d-measure > button:hover,.v3d-photos .ph-cams:hover,.v3d-photos .ph-toggle:hover,.v3d-photos .ph-btns button:hover,.v3d-photos .ph-toggle:focus-visible,.v3d-photos .ph-btns button:focus-visible{background:var(--firn)}
.v3d-measure > button svg,.v3d-photos .ph-cams > svg,.v3d-photos .ph-toggle > svg:first-child{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v3d-photos .ph-toggle > svg:first-child{stroke:var(--accent)}
.v3d-measure > button[aria-pressed="true"]{background:var(--rock);color:#fff}
.v3d-measure > button:disabled{color:#A9B1B5;cursor:not-allowed}
.v3d-mhint{top:14px;z-index:7}
.v3d.measuring #v3dCanvas{cursor:crosshair}
@media (max-width:720px){.v3d-mhint{top:86px;font-size:12.5px;max-width:calc(100% - 16px);flex-wrap:nowrap;padding:4px 5px 4px 10px;gap:6px}.v3d-mhint #v3dMText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v3d-mhint button{min-height:30px;flex:none}.v3d-measure{top:70px}}
.n-more{pointer-events:auto;border:0;background:none;color:#cfe3f1;font:inherit;padding:0 2px;cursor:pointer}
.is-3d .leaflet-control-scale{display:none}      /* a map scale means little in perspective */
@media (max-width:720px){
  .v3d-top .h-full{display:none}.v3d-top .h-short{display:block}
}
.v3d-bottom [hidden]{display:none}
.v3d-div{position:absolute;z-index:4;touch-action:none;display:flex;align-items:center;justify-content:center}
.v3d-div[hidden]{display:none}
.v3d-div:not(.hz){top:0;bottom:0;left:calc(var(--s, .5) * 100%);width:48px;margin-left:-24px;cursor:ew-resize}
.v3d-div.hz{left:0;right:0;top:calc(var(--s, .5) * 100%);height:48px;margin-top:-24px;cursor:ns-resize}
.v3d-handle{width:46px;height:46px;border-radius:50%;background:#fff;color:#1d2a30;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.5);animation:v3dPulse 1.8s ease-in-out infinite}
.v3d-handle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v3d-div.hz .v3d-handle svg{transform:rotate(90deg)}
.v3d-hint{position:absolute;white-space:nowrap;background:rgba(0,0,0,.66);color:#fff;font:600 12px/1 var(--sans);padding:6px 11px;border-radius:14px;pointer-events:none}
.v3d-div:not(.hz) .v3d-hint{top:calc(50% + 34px);left:50%;transform:translateX(-50%)}
.v3d-div.hz .v3d-hint{left:calc(50% + 36px);top:50%;transform:translateY(-50%)}
.v3d-div.used .v3d-hint{display:none}
.v3d-div.used .v3d-handle,.v3d-div:focus-visible .v3d-handle{animation:none}
.v3d-div:focus-visible .v3d-handle{outline:3px solid var(--crevasse,#2D6E8E)}
@keyframes v3dPulse{0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 0 rgba(255,255,255,.6)}50%{box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 12px rgba(255,255,255,0)}}
.v3d-lab{position:absolute;z-index:3;pointer-events:none;color:#fff;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;padding:0;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.55)}      /* the year tag again, a little smaller, no box */
.v3d.cmp-v .v3d-lab{top:64px}
.v3d.cmp-v #v3dLabA{right:calc((1 - var(--s, .5)) * 100% + 30px)}
.v3d.cmp-v #v3dLabB{left:calc(var(--s, .5) * 100% + 30px)}
.v3d.cmp-h .v3d-lab{right:14px}      /* the horizontal slider: the years sit on the right of the view, above and below the line (clear of the full screen button, and of the Layers menu while it is open) */
.v3d.cmp-h:has(.v3d-layers:not(.min)) .v3d-lab{right:190px}
.v3d.cmp-h #v3dLabA{top:max(58px, calc(var(--s, .5) * 100% - 40px))}
.v3d.cmp-h #v3dLabB{top:max(98px, calc(var(--s, .5) * 100% + 12px))}
/* Historic photographs (3D view): a rail of thumbnails, the chosen photo over the picture, the credit under it */
.v3d-photo{position:absolute;z-index:2;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 8px 30px rgba(0,0,0,.5);background:#000}
.v3d-photo[hidden]{display:none}
.v3d.photo-on .v3d-over{z-index:3}
.v3d.photo-on .v3d-layers{display:none}
.v3d.photo-on .v3d-top,.v3d.photo-on .v3d-bottom{display:none!important}      /* the hints (drag, pinch), the year line and the picture note belong to the 3D picture, not to the photograph; its own credit sits under it */
.v3d.photo-on #v3mDist,.v3d.photo-on #v3mArea,.v3d.photo-on #v3mClear,.v3d.photo-on .v3d-mhint{display:none}      /* the measuring tools need the 3D picture itself, not the photograph over it: the card then holds only the photo buttons */
.v3d-photos{display:flex;flex-direction:column;align-items:stretch;margin-top:3px;padding-top:3px;border-top:1px solid var(--rule)}
.v3d.photo-on .v3d-photos{margin-top:0;padding-top:0;border-top:0}
.v3d-photos[hidden]{display:none}
/* "Then and now": a small pill that opens the thumbnails of the old photographs */
.v3d-photos .ph-toggle{position:relative}
.v3d-photos .ph-cams{justify-content:flex-start;align-self:stretch}
.v3d-photos .ph-note{align-self:stretch;margin:2px 4px 4px;font-size:11px;line-height:1.35;color:var(--moraine);max-width:176px;text-align:center;align-self:center}
.v3d-photos:not(.open) .ph-cams,.v3d-photos:not(.open) .ph-note{display:none}
.v3d-photos .ph-cams .sw-track{margin-left:auto;width:28px;height:16px;border-radius:999px;background:#B9C2C6;position:relative;flex:none;transition:background .15s}
.v3d-photos .ph-cams .sw-track i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.v3d-photos .ph-cams[aria-pressed="true"] .sw-track{background:var(--accent)}
.v3d-photos .ph-cams[aria-pressed="true"] .sw-track i{transform:translateX(12px)}
.v3d.photo-on .v3d-photos .ph-cams{display:none}      /* the symbols rest while a photograph is open */
.v3d-photos .ph-toggle .ph-chev{width:14px;height:14px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.v3d-photos.open .ph-toggle .ph-chev{transform:rotate(180deg)}
.v3d-photos .ph-toggle.fresh{animation:phInvite 2.4s ease-in-out infinite}
@keyframes phInvite{0%,100%{box-shadow:0 0 0 0 rgba(200,50,42,.5)}50%{box-shadow:0 0 0 6px rgba(200,50,42,0)}}
@media (prefers-reduced-motion:reduce){.v3d-photos .ph-toggle.fresh{animation:none}}
.v3d-photos .ph-list{display:none;flex-direction:column;align-items:center;gap:6px;margin-top:4px;padding:2px;max-height:min(380px,calc(100vh - 420px));overflow-y:auto;scrollbar-width:thin}
.v3d-photos.open .ph-list{display:flex}
.v3d-photos .ph-btns{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.v3d-photos .ph-btns:empty{display:none}
.v3d-photos .ph{position:relative;width:96px;height:70px;flex:none;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#000;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.v3d-photos .ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.v3d-photos .ph span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.66);color:#fff;font:700 12px/1.4 var(--sans);text-align:center}
.v3d-photos .ph:hover img,.v3d-photos .ph:focus-visible img{opacity:1}
.v3d-photos .ph.on{border-color:#fff}
.v3d-photocap{position:absolute;z-index:5;left:96px;right:14px;bottom:50px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;background:rgba(8,14,18,.66);color:#fff;border-radius:8px;padding:6px 10px;font-size:11.5px;line-height:1.4}
.v3d-photocap[hidden]{display:none}
.v3d-photocap a{color:#cfe3f1}
.v3d-photocap .pc-full{display:none;flex:1 1 100%;margin-top:3px}.v3d-photocap.open .pc-full{display:block}.v3d-photocap.open .pc-short{display:none}
.v3d-photocap .n-more{background:none;margin:0;padding:0 2px;font:inherit;color:#cfe3f1}
.v3d-photocap button{border:0;border-radius:6px;background:rgba(255,255,255,.18);color:#fff;font:600 12px var(--sans);padding:5px 10px;cursor:pointer}
@media (max-width:720px){.v3d.photo-on .v3d-measure{top:84px;left:8px;right:8px;flex-direction:row;flex-wrap:wrap;align-items:center}.v3d.photo-on .v3d-measure > #v3dFs{margin-bottom:0;border-bottom:0;border-radius:6px}.v3d.photo-on .v3d-photos{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%}.v3d-photos .ph-btns{flex-direction:row;flex-wrap:wrap}.v3d-photos .ph-list{flex-direction:row;max-height:none;width:100%;overflow-x:auto;overflow-y:hidden}.v3d-photocap{left:8px;right:8px;bottom:100px;padding:5px 8px}      /* above the Height slider and the note */.v3d-photocap .pc-t{display:none}}
.v3d-tip{position:absolute;z-index:6;pointer-events:none;max-width:220px;background:rgba(255,255,255,.97);color:#1d2a30;border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.4;box-shadow:0 3px 14px rgba(0,0,0,.4)}
.v3d-tip[hidden]{display:none}
.v3d-camtip{width:176px;padding:6px 8px 7px;font-size:12px}
.v3d-camtip{cursor:pointer}
@media (pointer:coarse){.v3d-camtip{pointer-events:auto}}
.v3d-camtip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:5px;margin-bottom:5px;background:#000}
.v3d-camtip small{display:block;margin-top:3px;font-size:10.5px;color:var(--moraine);line-height:1.35}
.v3d-bottom label{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#fff;pointer-events:auto}
.v3d-bottom input{width:130px}
.measure-hint{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:670;background:var(--rock);color:#fff;border-radius:8px;padding:8px 8px 8px 14px;font-size:13.5px;display:none;align-items:center;gap:10px;box-shadow:0 2px 12px rgba(0,0,0,.3);max-width:calc(100% - 24px)}
.measure-hint.show{display:flex}
.measure-hint button{border:0;border-radius:5px;padding:5px 10px;cursor:pointer;background:#fff;color:var(--rock);font-weight:600}
.measure-hint button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.measuring #map{cursor:crosshair}
.measuring .leaflet-outlines-pane *{pointer-events:none!important}
.layerbox{position:absolute;right:12px;top:104px;z-index:665;background:rgba(255,255,255,.95);border-radius:8px;padding:8px 12px 6px;box-shadow:0 2px 12px rgba(0,0,0,.25);max-width:220px}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;padding:0 0 6px;margin:0;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);cursor:pointer}
.lb-head svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .2s}
.trail-legend{margin:0 0 6px 26px;font-size:11.5px;color:var(--moraine);display:flex;flex-direction:column;gap:1px}
.trail-legend[hidden]{display:none}
.radar-sw{border:0;background:linear-gradient(90deg,#bfe3f2,#3f9bc4 45%,#2a2a6b 80%,#5a1f63);height:8px}
.radar-legend{gap:3px}
.radar-legend .ramp{display:block;width:100%;max-width:180px;height:8px;border:0;border-radius:4px;background:linear-gradient(90deg,#bfe3f2,#3f9bc4 33%,#2a2a6b 66%,#5a1f63)}
.radar-legend .ticks{display:flex;justify-content:space-between;max-width:180px;font-size:10.5px}
.radar-legend .ticks b{font-weight:500}
.radar-legend small{font-size:11px;line-height:1.35}
.radar-tip{font-size:12px;line-height:1.4;padding:5px 8px}
.tongue-pin.max-pin{background:rgba(45,110,142,.25);box-shadow:0 0 0 2px var(--crevasse),0 2px 8px rgba(0,0,0,.5)}
.tongue-pin.max-pin span{background:var(--crevasse);text-transform:none;letter-spacing:0;font-size:12.5px}
.pin-sw.blue{background:rgba(45,110,142,.25);box-shadow:0 0 0 1.5px var(--crevasse)}
.tile-link{margin-top:5px;font:inherit;font-size:11.5px;color:var(--crevasse);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.thick-sw{background:linear-gradient(90deg,#c6e0ff,#4fa3d9 50%,#0b3d86)}
.radar-legend img{display:block;max-width:105px;height:auto}
.trail-legend span{display:flex;align-items:center;gap:7px}
.trail-legend i{display:inline-block;width:22px;height:0;border-top:2px dashed var(--c)}
.trail-legend i.sight-sw{border-top:6px solid #7B2CFF;border-radius:3px;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(0,0,0,.18)}
.lb-more{display:none}      /* only used on phones, where the box scrolls; without this rule its unsized chevron shows huge on desktop */
.lb-more svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lb-group{margin:8px 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--moraine)}
.lb-group:first-child{margin-top:0}
.layerbox.min .lb-body{display:none}
.layerbox.min .lb-head{padding:0}
.layerbox.min .lb-head svg{transform:rotate(180deg)}
.gbox-num{position:relative;width:10px;height:10px;border-radius:50%;background:var(--accent);border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:pointer}
.gbox-num .lab{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:6px;white-space:nowrap;font:600 12.5px/1 var(--sans);color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 7px rgba(0,0,0,.7)}
.gbox-num .lab i{font-style:normal;font-weight:400;font-size:13px;font-variant-numeric:tabular-nums;color:#e6ddd3;margin-right:5px}      /* the number as in the glacier list of the left panel: plain, tabular, light */
.gbox-num.sel{background:#fff;border-color:var(--accent)}
.app.overview #map{background:#e4e8ea}
.app.overview .leaflet-bgPane-pane{opacity:.5}      /* the background fades towards light grey so the glaciers stand out (no filters: Safari) */
.app.overview #tongueBtn,.app.overview #fitBtn{display:none}
.pick-hint{position:absolute;inset:0;z-index:664;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pick-hint.show{opacity:1;visibility:visible}
.pick-note{position:absolute;left:50%;top:60px;transform:translateX(-50%);max-width:calc(100% - 32px);box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:rgba(255,255,255,.96);color:#1f2a33;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.35);font:600 14px/1.3 var(--sans)}
.pick-note .pn-num{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--sans)}      /* the same red dot as the "1" of step 1 in the left panel */
.pick-note b{font-weight:800;color:var(--accent)}
.is-framing .pick-hint{display:none}
.gbox-tip{font-family:var(--sans);font-weight:600;font-size:12.5px}
.pin-sw{display:inline-block;width:14px;height:14px;margin:0 2px;border-radius:50%;border:2px solid #fff;background:rgba(200,50,42,.25);box-shadow:0 0 0 1.5px var(--accent);vertical-align:-3px}
.tongue-pin{position:relative;width:30px;height:30px;border-radius:50%;border:3px solid #fff;background:rgba(200,50,42,.25);box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(0,0,0,.5)}
.tongue-pin::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
.tongue-pin span{position:absolute;left:38px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--accent);color:#fff;font:700 11.5px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.is-framing .tongue-pin{visibility:hidden}
.layerbox .toggle{font-size:12.5px;margin-bottom:4px}
.layerbox .hint{font-size:11.5px;margin:2px 0 2px}
.layerbox .hint:empty{display:none}
@media (max-width:720px){.layerbox{top:88px;right:8px;padding:6px 10px 4px}}
.notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:680;background:var(--sheet);border-radius:8px;padding:16px 18px;width:min(360px,calc(100% - 32px));max-width:none;font-size:14px;display:none;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.notice.show{display:block}
.credits{position:absolute;left:0;right:0;bottom:0;z-index:665;background:rgba(255,255,255,.88);color:var(--rock);font-size:11px;line-height:20px;height:20px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:0;text-align:left;width:100%}
.credits.open{height:auto;white-space:normal;padding:4px 10px}
.credits a{color:var(--crevasse)}
.leaflet-control-scale{margin-bottom:84px!important;margin-right:12px!important}
/* the scale bar: a white bar with end ticks and its length above, no box; a soft shadow keeps it readable on snow and on dark rock */
.tfs-scale{pointer-events:none;color:#fff;font:600 11.5px/1 var(--sans);text-shadow:0 1px 5px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6);margin-right:14px!important}
.tfs-scale .ts-labels{position:relative;height:19px;margin-left:auto}
.tfs-scale .ts-labels span{position:absolute;bottom:6px;transform:translateX(-50%)}
.tfs-scale .ts-l1{left:50%}
.tfs-scale .ts-bar{position:relative;height:3px;margin-left:auto;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}      /* as mapKey on the downloads: bar with a tick at each end */
.tfs-scale .ts-bar::before,.tfs-scale .ts-bar::after{content:'';position:absolute;bottom:0;width:2px;height:7px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.tfs-scale .ts-bar::before{left:0}.tfs-scale .ts-bar::after{right:0}
.m-label{background:var(--rock);color:#fff;border:0;border-radius:5px;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:3px 7px;box-shadow:none}
.m-label::before{display:none}
.leaflet-popup-content{font-family:var(--sans);font-size:13.5px;margin:10px 14px}

/* ---------- right ---------- */
.story{--pad:22px;background:var(--sheet);border-left:1px solid var(--rule);overflow-y:auto;padding:0 22px 40px;display:flex;flex-direction:column}
.story-empty{display:none}
.story.empty .story-empty{display:block}
.story-empty h2{margin:0 0 6px}
.story-empty p{margin:0 0 16px;color:var(--moraine);font-size:14px;line-height:1.5}
.story.empty > :is(h2,.sub,.lede,.tabs,.tab-panel){display:none}
.story.empty > .story-empty h2{display:block}
.story::before{content:'';display:block;flex:none;height:20px}      /* the top space is inside the scroll, so a sticky card header sits flush with the top edge */
.story > *{flex:none}
.story h2{font-size:25px;line-height:1.12;margin:7px 0 4px;font-weight:700;letter-spacing:-.018em;color:#0E1A22}      /* sizes of the redesign: title 25, place 12.5, lede 13.5 */
.story .sub{color:var(--moraine);font-size:12.5px;margin:0}
.story .lede{font-family:var(--sans);font-size:13.5px;font-weight:400;line-height:1.55;color:#1C2A33;margin:12px 0 0}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--rule);margin:18px calc(-1 * var(--pad)) 0;padding:0 var(--pad)}      /* the line under the tabs runs the full width of the panel */
.tabs button{flex:none;border:0;background:none;padding:11px 0 10px;font-weight:600;font-size:13px;color:var(--moraine);border-radius:0;margin-bottom:-1px;cursor:pointer}
.tabs button:hover{color:var(--rock)}
.tabs button[aria-selected="true"]{color:#0E1A22;box-shadow:inset 0 -2px 0 var(--accent);cursor:default}      /* text tabs: the chosen one dark with a 2 px red line under its text */
.tab-panel{display:flex;flex-direction:column;gap:10px}
.tab-panel[hidden]{display:none}
.fact-k{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.fact.name .fact-k{color:var(--crevasse)}
.cb-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cb-links .fact-k{flex-basis:100%;color:var(--moraine)}
.cb-links .cb{flex:0 0 auto;padding:5px 10px;font-size:12.5px;border-radius:0}
.about-wrap{margin-top:auto;padding-top:0}      /* with white space left in the panel, the invitation and About stay at the bottom */
.story > .tab-panel{margin-bottom:22px}
.gh-invite{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--rock);background:var(--firn);border-radius:0;padding:10px 12px;margin:14px 0 0}
.gh-invite svg{width:22px;height:22px;flex:none;fill:var(--rock);margin-top:1px}
.gh-invite span{font-size:12px;line-height:1.45;color:var(--moraine)}
.gh-invite b{display:block;font-size:12.5px;color:var(--rock)}
.gh-invite em a{color:var(--crevasse);text-decoration:none}
.gh-invite span a{color:var(--crevasse);font-weight:600}
.gh-invite .gh-contact{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--rule)}
.gh-invite .gh-contact a{color:var(--crevasse);font-weight:600}
.gh-invite em{display:block;font-style:normal;color:var(--crevasse);margin-top:2px;font-weight:600}
details.about{margin-top:0}
details.about{margin:0 calc(-1 * var(--pad));padding:0 var(--pad);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}      /* full-width lines, one above and one below, nothing doubled */
.tab-panel > .dcard:last-child,.tab-panel > #gWater > .dcard{border-bottom:0}
details.about>summary{cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--moraine);display:flex;align-items:center;justify-content:center;gap:10px;list-style:none;padding:18px 0}      /* centred, with the round i and no chevron */
details.about>summary .info-btn{display:inline-flex;flex:none}
details.about>summary::after{content:'';flex:none;width:7px;height:7px;border:solid var(--moraine);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 4px 0 8px;transition:transform .15s}
details.about[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
details.about>summary::-webkit-details-marker{display:none}
details.about[open]>summary{margin-bottom:6px;padding-bottom:12px}
details.about .note,details.about .src{margin:0 0 8px}
.story .dcard{position:relative;padding:0;margin:0;box-shadow:none;border-bottom:1px solid #EDF0F2}      /* flat chapters with a thin divider under each, as in the redesign */
.story .dcard + .dcard,#gWater .dcard{margin-top:0}
.story .dcard > summary{padding:15px 0 14px}
.story .dcard[open] > summary{padding-bottom:8px;margin-bottom:0}
.story .dcard .dbody{padding:2px 0 18px}
.story .stats{gap:0}
.tab-panel[data-panel="figures"],.tab-panel[data-panel="look"],.tab-panel[data-panel="swiss"]{gap:0}      /* the stacked cards set their own overlap; a panel gap would add to it */
.story .dcard p{font-family:var(--sans);font-size:14px;line-height:1.55;margin:0}
.story .dcard p + p{margin-top:8px}
.story .dcard p + .cb-links{margin-top:10px}
.story .dcard small.src,.story .dcard .srcline{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:var(--moraine);font-family:var(--sans)}
.story .dcard .tr-row:first-of-type{margin-top:0}
.story .fact{font-size:14px;line-height:1.55;margin:0 0 10px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--firn);border-radius:0}
.story .fact.name{border-left-color:var(--crevasse)}
.story p.body small.srcline{display:block;color:var(--moraine);font-size:11.5px;margin-top:3px}
.story .fact small{display:block;color:var(--moraine);font-size:11.5px;margin-top:4px}
.story .fact.trail{border-left-color:var(--crevasse)} .fact.trail .fact-k{color:var(--crevasse)}
.tr-row{margin:8px 0 0;font-size:13.5px;line-height:1.5} .tr-row b{display:inline-block;min-width:34px;color:var(--rock)}
.tr-row a{color:var(--crevasse);font-weight:600} .tr-t{display:block}
.tr-maps{display:block;font-size:12px;margin-top:2px} .tr-maps a{font-weight:500}
.story h3{color:var(--accent);font-size:13px;font-weight:600;margin:28px 0 10px;padding-top:16px;border-top:1px solid var(--rule)}
.story p.body{font-family:var(--serif);font-size:14px;line-height:1.55;margin:0 0 10px}
.stats{display:flex;flex-direction:column;gap:16px}
.stat-group h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--moraine)}
.stat-group .ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:0;background:var(--ice);color:var(--crevasse)}
.stat-group .ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.info-btn{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent);background:none;color:var(--accent);font:700 12px/1 Georgia,serif;font-style:italic;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.info-btn[aria-expanded="true"]{background:var(--accent);color:#fff}
.about-sec{margin:0 0 12px}
details.about-ch{border-top:1px solid var(--rule)}
details.about-ch>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--rock);padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.about-ch>summary::-webkit-details-marker{display:none}
details.about-ch>summary::after{content:'';width:7px;height:7px;border:solid var(--moraine);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 3px 0 8px;transition:transform .15s}
details.about-ch[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
sup.fn{font-size:.75em;line-height:0;margin-left:2px;vertical-align:baseline;position:relative;top:-.5em;align-self:flex-start}      /* raised by position, so it also sits high inside the flex labels of the stat tiles */
sup.fn a{color:var(--crevasse);text-decoration:none;font-weight:700;padding:0 2px;font-size:1.1em}
sup.fn a:hover{opacity:.7}
/* tile labels are plain inline text (not a flex row), so the number follows the last word and is raised like a normal superscript */
.stat .k:not(.note){display:block}
.stat .k .mini{vertical-align:-1px;margin-right:5px}
.stat .k sup.fn,.stat .per sup.fn{position:static;align-self:auto;vertical-align:super;line-height:0;font-size:.75em;margin-left:2px}
.src-list{margin:0;padding-left:20px;font-size:11.5px;line-height:1.45;color:var(--moraine)}
.src-list li{margin:0 0 6px;scroll-margin:70px;cursor:default}
.src-list li.hit{background:#FFF3C4;outline:3px solid #FFF3C4;border-radius:3px}
.src-list li[data-back]{cursor:pointer}
.outside-note{margin:-6px 0 8px;padding-left:8px;border-left:2px solid var(--rule)}
.sym-txt small:only-child{font-size:14px;font-weight:700;color:var(--rock)}
.about-sec b{display:block;font-size:12.5px;color:var(--rock);margin:0 0 3px}
.about-sec p{font-size:12px;line-height:1.5;color:var(--moraine);margin:0 0 6px}
.src-list{margin:0;padding-left:16px;font-size:11.5px;line-height:1.5;color:var(--moraine)}
.src-list a{color:var(--crevasse)}
.stat{background:var(--firn);border-radius:0;padding:9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-size:17px;font-weight:600;white-space:nowrap}
.stat .v small{font-size:12px;font-weight:500}
.stat .k{font-size:11.5px;color:var(--moraine);line-height:1.3;display:flex;align-items:center;gap:4px}
.stat .k.note{font-style:italic;display:block}
.stat .per{display:block;font-size:10.5px;color:var(--moraine);opacity:.85;margin:1px 0 0 16px}
.stat .k{overflow-wrap:break-word}      /* long labels (the water figures) wrap instead of running off the screen */
.stat .mini{display:inline-flex;width:12px;height:12px;flex:none}
.stat .mini svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stat.loss .mini{color:var(--loss)}
.stat.loss .v{color:var(--loss)}
.stat-group .ico{flex:none}
.cum{margin:0 0 6px}
.cum2 .cum-head{display:flex;align-items:flex-end;gap:10px;margin:2px 0 8px}
.cum2 .cum-n b{display:block;font-size:22px;line-height:1;font-weight:800;color:var(--rock);font-variant-numeric:tabular-nums}
.cum2 .cum-n small,.cum2 .cum-loss small{display:block;font-size:11px;color:var(--moraine);margin-top:2px}
.cum2 .cum-arrow{color:var(--moraine);font-size:18px;line-height:1;padding-bottom:12px}
.cum2 .cum-loss{margin-left:auto;text-align:right}
.cum2 .cum-loss b{display:block;font-size:26px;line-height:1;font-weight:800;color:var(--accent)}
.cum2 .unit{font-size:10px}
.cum2 .cum-left-n{font-size:18px;font-weight:800;fill:var(--crevasse)}
.cum2 .cum-left-s{font-size:10.5px;font-weight:600;fill:var(--crevasse)}
.cum2 .dh-key{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.cum svg{width:100%;height:auto;display:block;font-family:var(--sans);font-size:10px;fill:var(--moraine)}
.cum .lbl{font-size:10.5px;font-weight:700;fill:var(--rock)}
.dh-chart .dh-title{font-size:12px;font-weight:700;color:var(--rock);margin:10px 0 4px}
.dh-chart .bar-lbl{fill:#fff;font-size:10px;pointer-events:none}
.dh-chart .dh-bar{cursor:pointer}
.dh-chart .dh-key{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px}
.dh-chart .dh-key-i{display:flex;align-items:flex-start;gap:0}
.dh-chart .dh-key-i .k{flex:none;margin-top:2px}
.dh-chart .dh-key .k-own,.dh-chart .dh-key .k-swiss,.dh-chart .dh-key .k-lost,.dh-chart .dh-key .k-sel{margin-left:0}
.cum .k-own{background:var(--crevasse);margin-left:14px;opacity:1}
.cum .k-swiss{background:#7C8A91;margin-left:14px;opacity:1}
.cum .lbl.red{fill:var(--accent);font-size:13px}
.cum .lbl.mid{font-size:28px;font-weight:800;fill:var(--crevasse)}
.cum figcaption{font-size:11px;line-height:1.45;color:var(--moraine);margin-top:4px}
.cum .k{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 4px 0 0}
.share-box{font-size:13px;line-height:1.45;margin:0;padding:9px 12px;border-left:3px solid var(--crevasse);background:var(--firn);border-radius:0}
.cum .k-ice{background:#CFE3EA}.cum .k-lost{background:var(--accent);opacity:.4;margin-left:8px}
.water{margin:14px 0 4px;padding:16px;border-radius:0;background:linear-gradient(160deg,#EAF3F7,#F7FAFB);border:1px solid var(--rule)}
.dcard .water{margin:0;padding:0;border:0;background:none}
.dcard .water .w-hero-tile + .w-box{margin-top:8px}
.sub-note{font-size:12px;line-height:1.4;color:var(--moraine);margin:0 0 8px}
.story .dcard p.sub-note{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--moraine);margin:10px 0 0}
.story .dcard .sub-note:first-child{margin:0 0 8px}
.dcard .stat.hero .v{color:var(--accent)}
.water .w-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.water .w-chips button{border:1px solid var(--rule);background:#fff;border-radius:0;padding:5px 10px;font-size:11.5px;cursor:pointer;color:var(--rock)}
.water .w-chips button[aria-pressed="true"]{background:var(--crevasse);border-color:var(--crevasse);color:#fff}
.water .w-hero-tile .v{color:var(--crevasse)}
.w-box{background:var(--firn);border-radius:0;padding:9px 10px}
.water .w-big{font-size:16px;font-weight:700;color:var(--rock);margin:0 0 4px;font-variant-numeric:tabular-nums}
.water .w-text{font-size:11.5px;line-height:1.45;color:var(--moraine);margin:0 0 6px}
.water .w-icons{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}
.water .w-icons svg{width:22px;height:22px}
.water .w-icons svg.lake{width:34px;height:22px}
.water .w-key{font-size:11px;color:var(--moraine)}
.water .w-live{margin-top:10px;padding:9px 10px;border-radius:0;background:var(--firn);font-size:11.5px;line-height:1.45;color:var(--moraine)}
.water .w-live b{color:var(--accent);font-variant-numeric:tabular-nums}
.span-note{font-size:13px;background:var(--firn);border-radius:0;padding:10px 12px;margin:0 0 6px}
.bars{display:flex;flex-direction:column;gap:5px;margin:6px 0 8px}
.bar{display:grid;grid-template-columns:42px 1fr 50px;align-items:center;gap:8px;font-size:13px;font-variant-numeric:tabular-nums}
.bar .track{height:12px;background:var(--firn);border-radius:0;overflow:hidden}
.bar .fill{display:block;height:100%;background:#9DB3BE;border-radius:0}
.bar.in-range .fill{background:var(--loss)}
.bar.in-range span:first-child{font-weight:600}
.bar .v{text-align:right}
.cb-links{display:flex;flex-direction:column;gap:6px}
.cb{border:1px solid var(--rule);background:var(--sheet);border-radius:0;padding:8px 12px;cursor:pointer;text-align:left;font-size:13.5px}
.cb:hover{background:var(--firn)}
.src{font-size:11.5px;color:var(--moraine);line-height:1.5}
.src a{color:var(--crevasse)}

@media (max-width:1100px){
  .app{--lw:270px;grid-template-columns:var(--lw) minmax(0,1fr);height:auto}
  .story{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule)}
  .stage,.controls{height:82vh}
}
/* ---------- shared: action buttons, video export, gesture hint ---------- */
.act-link{display:block;text-align:center;text-decoration:none;color:inherit;flex:none}
.act-link:hover{background:var(--firn)}
.act{flex:1;border:1px solid var(--rule);background:var(--sheet);border-radius:0;padding:8px 10px;cursor:pointer;font-size:13px;font-weight:500}
.act:hover{background:var(--firn)}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dl{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px 10px;border:1px solid var(--rule);border-radius:0;background:var(--sheet);cursor:pointer;text-align:center;color:var(--rock)}
.dl:hover{background:#E9EFF2;box-shadow:inset 0 -2px 0 var(--accent)}
.dl svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:3px}
.dl b{font-size:13px;font-weight:700;line-height:1.2}
.dl small{font-size:11px;color:var(--moraine)}
.mhead,.mobile-only{display:none}
.mapbar #fsBtn svg{display:block}
.mapbar button svg{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mapbar button[aria-pressed="true"] svg{stroke:#fff}
.gesture-hint{position:absolute;inset:0;z-index:690;display:flex;align-items:center;justify-content:center;background:rgba(20,30,36,.55);color:#fff;font-weight:600;font-size:16px;text-align:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.gesture-hint.show{opacity:1}
.video-frame{position:absolute;z-index:655;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 9999px rgba(10,18,22,.55);pointer-events:none}
.video-frame span{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;background:var(--rock);color:#fff;font-size:12px;padding:3px 8px;border-radius:4px}
.video-frame span:empty{display:none}
.vf-boxes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vf-boxes canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vs-opts .fk{display:flex;align-items:center;gap:8px}
.vs-guide{font-size:11px!important;line-height:1.35!important;color:var(--moraine)}
.is-framing:not(.is-cmp-image) .divider,.is-framing:not(.is-cmp-image) .handle,.is-framing .layerbox,.is-framing .year-tag,.is-framing .mapbar .mtool{visibility:hidden}
.video-sheet{position:fixed;left:16px;bottom:16px;z-index:2000;width:min(300px,calc(100% - 32px));max-height:calc(100% - 32px);overflow-y:auto;background:var(--sheet);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.35);padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.video-sheet .hint{margin:0;font-size:11.5px;line-height:1.4}
.video-sheet .segment button{padding:5px 2px;font-size:13px;line-height:1.2}
.video-sheet .segment button{white-space:normal}
.video-sheet .segment button small{display:block;font-size:10.5px;font-weight:400;color:var(--moraine)}
.video-sheet .segment button[aria-pressed="true"] small{color:var(--rock)}
.vs-note{margin:0}
.video-sheet.is-swipe .vo-tl{display:none}
.video-sheet.is-3d .vs-area{display:none}
.is-framing #map{background:radial-gradient(1.2px 1.2px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 47% 61%,#cfe3ff,transparent),radial-gradient(1.6px 1.6px at 78% 18%,#fff,transparent),radial-gradient(1px 1px at 31% 84%,#fff,transparent),radial-gradient(1.3px 1.3px at 90% 72%,#ffe9c4,transparent),radial-gradient(.9px .9px at 64% 40%,#fff,transparent),#070b14;background-size:230px 230px}
.video-sheet:not(.is-3d) .vo-3d{display:none}
.is-3d .video-frame{z-index:710}
.video-sheet.is-image .vo-video,.video-sheet:not(.is-image) .vo-image{display:none}
.vs-opts .toggle input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);flex:none}
.vs-opts .toggle span{line-height:1.3}
.vo-outside{margin:4px 0 2px;font-size:13px;grid-column:1 / -1}
.vo-outside input[type=range]{width:100%;margin:0}
.vs-note:empty{display:none}
.vs-head{display:flex;justify-content:space-between;align-items:center}
.vs-head strong{font-size:13.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.vs-share{border-top:1px solid var(--rule);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.vs-share>button{border:1px solid var(--rule);background:var(--sheet);border-radius:0;padding:7px 10px;cursor:pointer;font-weight:600;font-size:13px}
.vs-share>button:hover{background:var(--firn)}
.vs-share form{display:flex;flex-direction:column;gap:6px}
.vs-share input[type=text]{border:1px solid var(--rule);border-radius:0;padding:6px 8px;font-size:13px}
.vs-close{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;padding:0 4px;color:var(--moraine)}
.vs-opts{display:grid;grid-template-columns:1fr;gap:2px;margin:0}
.vs-opts .toggle{margin:0;font-size:13px}
.vs-opts .toggle.speed-row{justify-content:space-between}
.vs-progress{height:6px;background:var(--firn);border-radius:3px;overflow:hidden;margin:0}
.vs-progress div{height:100%;width:0;background:var(--crevasse);transition:width .2s}

/* ---------- touch devices ---------- */
/* one finger scrolls the page (browser), two fingers pan and zoom the map (Leaflet) */
.two-finger #map.leaflet-container{touch-action:pan-x pan-y!important}
@media (pointer:coarse){
  .handle{width:48px;height:48px;margin:-24px 0 0 -24px}
}

/* ---------- phones: map first, compact controls directly under it ---------- */
@media (max-width:720px){
  .app{display:flex;flex-direction:column;height:auto}
  .mhead{display:block;order:0;background:var(--sheet);padding:10px 14px 8px;border-bottom:1px solid var(--rule);text-align:center}
  .mhead-logo{display:inline-block;vertical-align:-6px;height:26px;width:auto;margin-right:8px}
  .mhead strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--accent)}
  .mhead{border-top:4px solid var(--accent)}
  .mhead span{display:block;font-size:12.5px;color:var(--moraine);margin-top:2px}
  .stage{order:1;height:60vh;height:60dvh;min-height:330px}
  .controls{--pad:16px;order:2;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:14px 16px 18px;gap:18px}
  .story{--pad:18px;order:3;padding:0 18px 32px}
  .story::before{height:20px}
  .controls .brand,#glacierList,#rankNote{display:none}
  .m-select{display:block!important}


  .year-tag{font-size:30px;top:10px;max-width:calc(50% - 16px)}
  .year-tag small{font-size:11px;line-height:1.25}
  #tagA{left:12px} #tagB{right:12px}
  .app.more-open .leaflet-control-scale{margin-bottom:138px!important}
  .mapbar{bottom:30px;padding:4px;gap:2px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 16px);overflow:visible}
  .mapbar .sep,.mapbar .lbl{display:none}
  .mapbar button{min-width:42px;min-height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
  .mapbar button svg{display:block}
  .mapbar .mtool{display:none}
  .mapbar.more-open .mtool{display:inline-flex}
  .mobile-only{display:inline-flex}
  .layerbox{display:none;top:58px;right:8px;padding:10px 12px 6px;max-width:240px;max-height:calc(100% - 58px - 96px);overflow-y:auto;overscroll-behavior:contain}
  .app.more-open .layerbox{max-height:calc(100% - 58px - 150px)}
  .layerbox.open{display:block}
  .layerbox .toggle{font-size:14.5px;min-height:32px;margin:0}
  .layerbox .lb-group{margin-top:6px}
  .layerbox .toggle input{width:20px;height:20px}
  .leaflet-control-scale{margin-bottom:84px!important}
  .credits{font-size:12px;line-height:22px;height:22px}
  .hint{font-size:13px}
  .years button{padding:8px 0;font-size:14px}
  .toggle{min-height:36px}
  .sym-pitch,.sym-bus{width:76px}.sym-pool{width:70px}.sym-tower{width:44px}
  .stat.hero .v{font-size:26px}
  .tune-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .tune input[type=range]{height:28px}
  .fyi{padding:14px 16px}
  .measure-hint{top:56px;font-size:12.5px;padding:4px 5px 4px 10px;gap:6px;flex-wrap:nowrap;max-width:calc(100% - 16px)}
  .measure-hint #measureText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .measure-hint button{min-height:30px;padding:3px 10px;font-size:12.5px;flex:none}
  .video-sheet{left:0;right:0;bottom:0;width:100%;max-height:44dvh;border-radius:14px 14px 0 0;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));gap:6px}
  .video-sheet .vs-help{display:none}
  .vs-opts{grid-template-columns:1fr 1fr;column-gap:10px}
  .vs-opts .toggle{min-height:30px;font-size:13px}
  .vs-opts .toggle.speed-row{grid-column:1 / -1}
  .video-sheet .segment button{min-height:36px;font-size:13px}
  #vsGo{min-height:42px;font-size:15px}
}

/* ---------- phones held sideways: map left, controls right ---------- */
@media (max-width:950px) and (orientation:landscape) and (max-height:520px){
  .app{display:flex;flex-direction:column;height:auto}
  .stage{position:fixed;left:0;top:0;bottom:0;width:58vw;height:auto;min-height:0;z-index:1}
  .mhead{order:0} .controls{order:2} .story{order:3}
  .mhead,.story,.controls,.fyi-slot{margin-left:58vw}
  .stage-slot{display:contents}
  .mhead{display:block;padding:8px 14px;text-align:center}
  .mhead-logo{height:20px;vertical-align:-4px;margin-right:6px}
  .mhead strong{display:block;font-size:15px;font-weight:800}
  .mhead span{display:block;font-size:11.5px;color:var(--moraine)}
  .controls .brand,#glacierList,#rankNote{display:none}
  .m-select{display:block!important}
  .story,.controls{height:auto;border:0;border-top:1px solid var(--rule)}
  .year-tag{font-size:28px}
  .mapbar{bottom:28px;padding:4px;gap:2px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 16px)}
  .mapbar .sep,.mapbar .lbl{display:none}
  .mapbar button{min-width:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
  .mapbar button svg{display:block}
  .measure-hint{top:48px;font-size:12px;padding:3px 5px 3px 10px;gap:6px;flex-wrap:nowrap;max-width:calc(100% - 16px)}
  .measure-hint #measureText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .measure-hint button{min-height:28px;padding:2px 9px;font-size:12px;flex:none}
  .mapbar .mtool{display:none}
  .mapbar.more-open .mtool{display:inline-flex}
  .mobile-only{display:inline-flex}
  .layerbox{display:none;top:54px;right:8px;max-height:calc(100% - 54px - 86px);overflow-y:auto}
  .layerbox.open{display:block}
  .leaflet-control-scale{margin-bottom:80px!important}
  .app.more-open .leaflet-control-scale{margin-bottom:130px!important}
  .year-tag{max-width:calc(50% - 16px)}
  .year-tag small{font-size:10.5px;line-height:1.25}
  .video-sheet{left:auto;right:0;bottom:0;width:42vw;border-radius:14px 0 0 0}
}

/* Phones: the layer box scrolls, so its title and chevron stay pinned at the top, and a soft fade with a chevron at the bottom shows that more items follow */
@media (max-width:720px), (max-width:950px) and (orientation:landscape) and (max-height:520px){
  .layerbox{padding-top:0}
  .layerbox .lb-head{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.98);padding:10px 0 6px;border-bottom:1px solid var(--rule)}
  .layerbox.min .lb-head{padding:10px 0;border-bottom:0}
  .lb-more{display:none;position:sticky;bottom:0;height:34px;margin-top:-34px;pointer-events:none;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96) 70%)}
  .lb-more svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1px}
  .layerbox.more .lb-more{display:flex}
  .fyi-slot{display:block;order:4;padding:0 18px 32px}
}

/* Phones in portrait: the layer menu opens as a panel directly under the visual (thumb reach, the visual stays where it is), in two columns */
.layers-bar{display:none}
@media (max-width:720px) and (orientation:portrait){
  .layers-bar{order:1;display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-bottom:1px solid var(--rule);background:var(--sheet);padding:10px 16px;font:700 14px var(--sans);color:var(--rock);cursor:pointer}
  .layers-bar svg{transition:transform .2s;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .layers-bar[aria-expanded="true"] svg{transform:rotate(180deg)}
  body.has-full .layers-bar[aria-expanded="true"]{display:none}
  .layerbox.in-flow{position:static;order:1;max-width:none;width:auto;margin:0;border-radius:0;box-shadow:none;background:var(--sheet);border-bottom:1px solid var(--rule);padding:0 16px 10px;max-height:none;overflow:visible;display:none}
  .layerbox.in-flow.open{display:block}
  .layerbox.in-flow .lb-head{display:none}      /* the bar above the panel closes it, its chevron turned up */
  body.has-full .layerbox.in-flow .lb-head{display:flex;position:static;background:transparent;padding:10px 0 8px;border-bottom:1px solid var(--rule);font-size:14px}
  .layerbox.in-flow.min .lb-body,.layerbox.in-flow .lb-body{display:block;column-count:2;column-gap:18px;padding-top:6px}
  .layerbox.in-flow .lb-body > *{break-inside:avoid}
  .layerbox.in-flow .lb-group{break-after:avoid;break-after:avoid-column;-webkit-column-break-after:avoid;margin-top:8px}
  .layerbox.in-flow .lb-group:first-child{margin-top:0}
  .layerbox.in-flow .toggle{font-size:14px}
  .layerbox.in-flow .lb-more{display:none!important}
  body.pane-open #layersBtn,body.pane-open .layers-bar{display:none!important}
  /* full screen: the layer menu rises from the bottom edge of the screen, with a clear way out at the top and bottom */
  body.has-full .layerbox.in-flow.open{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:2100;max-height:58dvh;overflow-y:auto;border-radius:14px 14px 0 0;border-bottom:0;box-shadow:0 -6px 24px rgba(0,0,0,.45);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  body.has-full .layerbox.in-flow .lb-head{position:sticky;top:0;z-index:3;background:var(--sheet)}
  body.has-full .layerbox.in-flow .lb-head span::after{content:' · tap to close';font-weight:500;color:var(--moraine);font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- one card style for all stats (Stats and Switzerland tabs) ---------- */
.tab-panel{gap:4px}
.stats{gap:12px}
.stat.hero{padding-top:12px;padding-bottom:12px}
.stat.hero .v{font-size:32px;line-height:1.05}
.stat.hero .v small{font-size:15px}
.sym-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.sym{flex:none;height:auto}
.sym-pitch,.sym-bus{width:96px}.sym-pool{width:90px}.sym-tower{width:72px}
.sym-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sym-txt b{font-size:24px;line-height:1.1;color:var(--rock);font-weight:800}
.sym-txt small{font-size:12px;line-height:1.3;color:var(--moraine)}
.gwater .stat.hero.wide .v{color:var(--accent)}
.wbox{display:flex;align-items:center;gap:10px;background:var(--firn);border-radius:0;padding:10px 12px;min-width:0}
.wbox .wi{flex:none;width:34px;display:grid;place-items:center}
.wbox .wi svg{width:34px;height:auto}
.wbox .v{display:block;white-space:nowrap;font-size:19px;font-weight:800;color:var(--crevasse);line-height:1.1}
.wbox .k{display:block;font-size:12px;color:var(--moraine);margin-top:2px}
details.coll > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center}
details.coll > summary::-webkit-details-marker{display:none}
details.coll > summary::after{content:'';order:2;flex:none;width:7px;height:7px;margin:-4px 3px 0 0;border-right:2px solid #93A0A7;border-bottom:2px solid #93A0A7;transform:rotate(45deg);transition:transform .15s}
details.coll[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
details.coll > summary h4,details.coll > summary .card-h{margin:0;flex:1 1 0;min-width:0;flex-wrap:nowrap}      /* the title may shrink and wrap inside its own box, so the chevron stays on the title row */
details.coll > summary .sum-v{order:1;flex:none;margin:0 10px 0 12px;font-size:19px;font-weight:600;letter-spacing:-.015em;color:#0E1A22;line-height:1;white-space:nowrap}
details.coll > summary .sum-v.loss{color:var(--accent)}
details.coll > summary .sum-v small{display:inline;margin-left:3px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--moraine)}
details.coll[open] > summary{margin-bottom:10px;position:sticky;top:0;z-index:6;background:#fff;border-radius:0}      /* the chevron stays in reach while a long card is read */
details.coll[open] > summary .sum-v{display:none}
details.coll > summary:focus-visible{outline:2px solid var(--crevasse);outline-offset:3px;border-radius:6px}
.card,.stat-group,.water{background:var(--sheet);border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:16px 0 16px;margin:0}      /* chapters of the right panel: grey title, chevron at the right, a thin divider under each, no box and no icon */
.card-h .ico,.stat-group .ico{display:none}
.card-h,.stat-group h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0;border:0;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moraine)}
.card-h small{flex-basis:100%;margin:-4px 0 0;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--moraine)}
.card-h .ico,.stat-group .ico{display:none}
.card-h .ico.red{background:#F6DCDA;color:var(--accent)}
.card-h .ico svg,.stat-group .ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stat{background:var(--firn);border-radius:0;padding:9px 10px}
.stat .v{font-size:14px;font-weight:600;color:var(--rock)}
.stat.loss .v{color:var(--accent)}
.stat .k{font-size:11px;color:var(--moraine)}
.span-note{margin:10px 0 0;padding:9px 10px;border-radius:0;font-size:11.5px;line-height:1.45;color:var(--moraine);background:var(--firn)}
.story .dcard .span-note{margin:18px 0 0;font-size:11px;line-height:1.45}
.span-note strong,.span-note b{color:var(--rock)}
.span-note strong{color:var(--loss)}
.bars{margin:0}
.bar{font-size:12px}
.cum{margin:0}
.cum figcaption{font-size:11.5px;color:var(--moraine);margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.cum .k{width:13px;height:13px;border-radius:3px;margin:0 6px 0 0}
.cum .k-lost{margin-left:14px;background:var(--accent);opacity:.28}
.cum .k-sel{background:rgba(200,50,42,.2);border-left:2px solid var(--accent);border-right:2px solid var(--accent);border-bottom:4px solid var(--accent);border-radius:0;margin-left:14px;width:14px;height:13px;opacity:1}
/* ---------- full screen (visual only) and the small floating window ---------- */
.stage-slot{display:contents}
.mini-ctl,.full-exit{display:none}
.full-exit svg,.mini-ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage.is-full{position:fixed;inset:0;z-index:2000;height:auto!important;width:auto!important}
.stage.is-full .full-exit{display:flex;position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:700;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;padding:0;background:var(--sheet);color:var(--rock);font-weight:700;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer}
body.has-full{overflow:hidden}
/* play / pause in the full screen, timelapse mode only: left of the exit button */
.full-play{display:none}
.full-play svg{width:18px;height:18px;fill:currentColor;stroke:none}
.full-play:disabled{opacity:.4;cursor:default}
.stage.is-full .v3d-top{right:60px}      /* the exit button of full screen sits top right: the hint text stops before it */
@media (min-width:721px){
  .app.visual-only .full-exit{display:flex;position:absolute;top:14px;right:14px;z-index:700;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;padding:0;background:var(--sheet);color:var(--rock);font-weight:700;font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer}
}
@media (max-width:720px) and (orientation:portrait){
  .stage-slot{display:block;order:1;height:60vh;height:60dvh;min-height:330px}
  .stage-slot .stage{height:100%}
  .stage.mini{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(72vw,320px);height:195px!important;min-height:0;z-index:900;border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.5);border:2px solid #fff}
  .stage.mini > *:not(#map):not(.mini-ctl):not(.year-tag):not(.divider):not(.handle):not(.leaflet-container):not(.v3d){display:none!important}
  .stage.mini .v3d-measure,.stage.mini .v3d-mhint,.stage.mini .v3d-top,.stage.mini .v3d-bottom,.stage.mini .v3d-layers,.stage.mini .v3d-tip,.stage.mini .v3d-msg,.stage.mini .v3d-lab,.stage.mini .v3d-div{display:none!important}      /* the 3D view in the small window: the picture only */
  .stage.mini .leaflet-control-scale{display:none}
  .stage.mini .v3d{pointer-events:none}      /* a touch on the small window scrolls the page, it does not turn the terrain */
  .stage.mini .year-tag{font-size:17px;top:6px;max-width:48%}.stage.mini .year-tag small,.stage.mini .handle-hint{display:none}
  .stage.mini .handle{width:30px;height:30px;margin:-15px 0 0 -15px}
  .stage.mini .mini-ctl{display:flex;position:absolute;right:4px;bottom:4px;z-index:700;gap:4px}
  .stage.mini .mini-ctl button{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--rock);display:grid;place-items:center;cursor:pointer}
}
/* ---------- collapsible side panels (desktop and tablet) ---------- */
.panel-toggle{display:none}
@media (min-width:721px) and (min-height:521px){
  .panel-toggle{position:absolute;top:40%;z-index:672;width:22px;height:56px;margin-top:-28px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--rule);background:var(--sheet);color:var(--moraine);cursor:pointer;box-shadow:none}
  .panel-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  #toggleLeft{left:0;border-left:0;border-radius:0}
  #toggleRight{right:0;border-right:0;border-radius:0}
  .app{transition:grid-template-columns .35s ease}
  .controls,.story{min-width:0}
  .app.no-left{--lw:0px}
  .app.no-left .controls{visibility:hidden;border:0;overflow:hidden;transition:visibility 0s .35s}
  .app.no-left #toggleLeft svg{transform:rotate(180deg)}
  .app.no-right{--rw:0px}
  .app.no-right .story{visibility:hidden;border:0;overflow:hidden;transition:visibility 0s .35s}
  .app.no-right #toggleRight svg{transform:rotate(180deg)}
}
@media (min-width:721px) and (max-width:1100px){#toggleRight{display:none}}

/* ---------- area card: two tiles and one wide change tile with a bar ---------- */
.stat.wide{grid-column:1 / -1}
.stat.wide .v{display:flex;align-items:baseline;gap:8px;font-size:22px;font-weight:800;letter-spacing:-.01em}
.stat.wide .v small{font-size:13px;font-weight:700}
.stat.wide.loss{background:#FBEDEC;padding:11px 12px}
.stat.wide.loss .k{color:#7a3a36}
.stat.wide:not(.loss) .v{font-size:20px}
.stat.wide.loss .v{color:var(--accent)}
.gwater .stat.wide .v{color:var(--crevasse)}
.abar{display:block;height:8px;border-radius:0;background:#F0C9C6;overflow:hidden;margin:6px 0 2px}
.abar i{display:block;height:100%;background:var(--crevasse);border-radius:0}
.abar-key{display:flex;justify-content:space-between;font-size:12px;color:#7a3a36}
.stat .k.note{font-size:10px;line-height:1.3}
.stat.wide.loss .k{font-size:12.5px}
.stat.wide.loss .k.note{font-size:10px}
/* the small title sits above the number */
.stat .k:not(.note){order:-2;margin-bottom:2px;font-weight:600}
.stat .per{order:-1;margin:-2px 0 3px 16px}

/* ---------- water chart readout and partly filled icons ---------- */
.cum-read{font-size:11.5px;line-height:1.45;color:var(--moraine);background:var(--firn);border-radius:0;padding:9px 10px;margin-top:8px;min-height:2.9em}
.cum svg{touch-action:pan-y;cursor:crosshair}
.w-part{position:relative;display:inline-block;line-height:0}
.w-part .ghost{opacity:.22;display:inline-block}
.w-part .fill{position:absolute;left:0;top:0;height:100%;overflow:hidden;display:block}
.w-part .fill svg{display:block}

/* while a download pane is open, the 3D view shows only what the download will contain */
body.pane-open .v3d-photos,body.pane-open .v3d-photo,body.pane-open .v3d-photocap,body.pane-open .v3d-measure,body.pane-open .v3d-mhint,body.pane-open .v3d-tip{display:none!important}
.social{display:flex;justify-content:center;gap:6px;margin-top:10px}
.social a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;color:var(--moraine);transition:color .15s,background .15s}
.social a:hover,.social a:focus-visible{color:#fff;background:var(--accent)}
.social svg{width:16px;height:16px;fill:currentColor}

/* Sentinel-2 pictures switched off in the layers menu */
#map.sat-off .leaflet-paneA-pane, #map.sat-off .leaflet-paneB-pane, #map.sat-off .leaflet-paneT-pane { display: none !important; }

/* the menu blocks on the pictures let the picture show through a little (clear enough to read, no filters: Safari on iPhone ignores them) */
:root{--glass:rgba(10,18,24,.55)}
.layerbox:not(.in-flow),.mapbar,.v3d-measure{background:var(--glass)}
.stage.is-full .full-exit,.app.visual-only .full-exit,.app .full-play{background:var(--glass)}

/* "Then and now" and its camera symbols belong to One year: not in Compare and Timelapse */
.app:not(.photos-ok) .v3d-photos{display:none!important}

/* pose tuning of a photograph (tune=1 in the address, see js/11-view3d.js) */
.v3d-tune{position:absolute;top:12px;right:12px;z-index:7;width:268px;background:var(--glass);border-radius:8px;padding:10px 12px 11px;font-size:12px;color:var(--rock);box-shadow:0 2px 12px rgba(0,0,0,.35)}
.v3d-tune[hidden]{display:none}
.v3d-tune b{display:block;font-size:12.5px;margin-bottom:4px}
.tn-row{display:grid;grid-template-columns:58px 1fr 62px;gap:6px;align-items:center;margin:2px 0}
.tn-row input{width:100%;margin:0}.tn-row output{text-align:right;font-variant-numeric:tabular-nums}
.tn-ov{display:block;margin:6px 0 4px;line-height:1.3}
.tn-final{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--moraine);margin:2px 0 6px;line-height:1.4}
.tn-bar{display:flex;gap:6px}.tn-bar button{flex:1;border:1px solid var(--rock);border-radius:6px;background:var(--sheet);padding:6px 8px;font:600 12px var(--sans);cursor:pointer}

/* the arrows that hide the side panels stay in front of the 3D view */
.is-3d .panel-toggle{z-index:710}

/* in full screen (visual only) the arrows of the side panels are not shown */
.app.visual-only .panel-toggle,.stage.is-full .panel-toggle,body.has-full .panel-toggle{display:none!important}

/* the map toolbar's full screen button turns into "leave full screen" while in full screen; the separate corner button is not shown */
.mapbar #fsBtn svg.fs-out{display:none}
.stage.is-full .mapbar #fsBtn svg.fs-in,.app.visual-only .mapbar #fsBtn svg.fs-in{display:none}
.stage.is-full .mapbar #fsBtn svg.fs-out,.app.visual-only .mapbar #fsBtn svg.fs-out{display:block}
.stage .full-exit,.app.visual-only .full-exit{display:none!important}

/* ---------- the 3D tools as a bar at the bottom, like the map toolbar (these rules replace the card at the top left above) ----------
   Full screen, Measure length, Measure area, Then and now. "Then and now" drops up: a strip of thumbnails above the bar, with the camera switch and the footnote. With a photograph open the measuring tools
   give way to "Hide ice level" and "Back to 3D". */
.v3d-measure{left:50%;right:auto;top:auto;bottom:62px;transform:translateX(-50%);flex-direction:row;align-items:center;gap:2px;max-width:calc(100% - 20px)}
.v3d-measure > button{padding:0 12px 0 8px}
.v3d-measure > #v3dFs{margin:0 4px 0 0;border-bottom:0;border-radius:6px;border-right:1px solid var(--rule);padding-right:14px}
.v3d-photos{position:relative;flex-direction:row;align-items:center;margin:0 0 0 4px;padding:0 0 0 6px;border-top:0;border-left:1px solid var(--rule)}
.v3d.photo-on .v3d-photos{margin:0;padding:0;border-left:0}
.v3d.photo-on .v3d-measure > #v3dFs{border-right:1px solid var(--rule)}
.v3d-photos .ph-toggle .ph-chev{margin-left:2px;transform:rotate(180deg)}      /* the arrow points up: it opens upwards */
.v3d-photos.open .ph-toggle .ph-chev{transform:none}
.v3d-photos .ph-btns{flex-direction:row;align-items:center;gap:2px}
.v3d-photos .ph-btns button{padding:0 12px}
.v3d-photos .ph-drop{display:none;position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);flex-direction:column;align-items:center;gap:4px;padding:8px 10px 6px;background:var(--glass);border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,.4);width:max-content;max-width:calc(100vw - 24px)}
.v3d-photos.open .ph-drop{display:flex}
.v3d-photos .ph-row{display:flex;flex-direction:row;align-items:center;gap:10px;max-width:100%}
.v3d-photos .ph-cams{flex:none;align-self:center;padding:0 10px 0 6px;border-right:1px solid var(--rule);border-radius:6px 0 0 6px;white-space:normal;max-width:132px;line-height:1.2}
.v3d-photos .ph-list{display:flex;flex:1 1 auto;min-width:0;flex-direction:row;align-items:center;gap:8px;margin:0;padding:2px;max-height:none;overflow-x:auto;overflow-y:hidden}
.v3d-photos .ph-note{margin:0;max-width:none;text-align:center;align-self:center;white-space:normal}
.v3d-photos:not(.open) .ph-drop{display:none}
.v3d-photocap{left:14px;right:14px;bottom:118px}
.v3d .v3d-layers{max-height:calc(100% - 200px)}
@media (max-width:720px){
  .v3d-measure{bottom:100px;flex-wrap:wrap;justify-content:center;width:max-content}
  .v3d.photo-on .v3d-measure{top:auto;left:50%;right:auto;bottom:100px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .v3d.photo-on .v3d-photos{width:auto;flex-wrap:wrap}
  .v3d-photos{border-left:0;margin:0;padding:0}
  .v3d-photos .ph-drop{left:50%;max-width:calc(100vw - 16px)}
  .v3d-photos .ph-row{flex-direction:column;gap:4px}
  .v3d-photos .ph-cams{border-right:0;border-radius:6px;max-width:none}
  .v3d-photos .ph-list{max-width:calc(100vw - 40px)}
  .v3d-photocap{left:8px;right:8px;bottom:206px}
}

/* order in the 3D bar, left to right: Then and now, Measure length, Measure area, Full screen */
.v3d-photos{margin:0 4px 0 0;padding:0 6px 0 0;border-left:0;border-right:1px solid var(--rule)}
.v3d.photo-on .v3d-photos{margin:0;padding:0;border-right:0}
.v3d-measure > #v3dFs{margin:0 0 0 4px;padding:0 12px 0 14px;border-right:0;border-left:1px solid var(--rule)}
.v3d.photo-on .v3d-measure > #v3dFs{border-left:1px solid var(--rule)}
.v3d-photos:empty,.v3d-photos[hidden]{display:none}
@media (max-width:720px){.v3d-photos{border-right:0;margin:0;padding:0}.v3d-measure > #v3dFs{margin:0;padding:0 12px 0 8px;border-left:0}}
.tfs-scale .ts-labels span{white-space:nowrap}

/* the play button beside the timeline, in the map and in the 3D view */
.tl-row{display:flex;align-items:center;gap:10px}
.tl-play{display:none;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--rock);cursor:pointer;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:auto}
.tl-play svg{width:16px;height:16px;fill:currentColor;stroke:none}
.tl-play{display:grid}      /* in the normal view too, not only in full screen */
.v3d-tl{flex:0 0 auto;width:0;min-width:100%;box-sizing:border-box;padding:6px 8px 5px;margin-bottom:4px;border-bottom:1px solid var(--rule);color:#fff;font-size:12px;font-weight:500}      /* the timeline is the first row of the black toolbar, above its buttons, as in the map dock; width 0 + min-width 100% so it fills the toolbar without making it wider */
.v3d-tl:empty{display:none}
.v3d-tl .tl-row{width:100%}
.v3d-tl .tl2{flex:1;width:auto;min-width:0}
.v3d-tl .tl-play{background:rgba(255,255,255,.18);color:#fff}
.v3d.photo-on .v3d-tl{display:none}
.v3d-top .tl2{width:min(300px,50vw)}

.gh-invite{overflow-wrap:break-word}      /* the long repository address wraps inside the narrower right panel */

.tfs-scale.at-layers{position:absolute;z-index:666;margin:0!important;float:none}      /* beside the LAYERS button */

/* ---------- the LAYERS button and menu in the style of the bottom bars: glass, an icon, a semibold label in dark text (desktop; phones keep their own layer sheet) ---------- */
.lb-head .lb-ico{display:none}
@media (min-width:721px) and (min-height:521px){
  .layerbox:not(.in-flow){padding:4px;box-shadow:0 2px 12px rgba(0,0,0,.35);max-width:232px}
  .layerbox:not(.in-flow) .lb-head{min-height:36px;padding:0 10px 0 8px;gap:9px;justify-content:flex-start;border-radius:6px;font:600 12.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--rock)}
  .layerbox:not(.in-flow) .lb-head:hover{background:var(--firn)}
  .layerbox:not(.in-flow) .lb-head .lb-ico{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:none;transform:none}
  .layerbox:not(.in-flow) .lb-head span{flex:1 1 auto;text-align:left}
  .layerbox:not(.in-flow) .lb-head svg:last-child{width:14px;height:14px;stroke-width:2;margin-left:4px}
  .layerbox:not(.in-flow) .lb-body{padding:2px 8px 4px;border-top:1px solid var(--rule);margin-top:2px}
  .layerbox.min:not(.in-flow) .lb-head{padding:0 10px 0 8px}
}

/* the play button sits level with the line of the timeline (not with the year labels above it), with some room before the line starts */
.tl-row{align-items:flex-start;gap:20px}
.tl2-ends{line-height:13px}      /* the same height in the map and in the 3D view, so the button can be placed against the line */
.tl-play{margin-top:6px}      /* labels 13 + gap 2 + half the track 8 = 23 down to the line, minus half the button (17) */

/* full screen: icon only in the bars (the words stay in the tooltip) */
#v3dFs span{display:none!important}
.v3d-measure > #v3dFs{padding:0 10px!important}
@media (max-width:720px){.v3d-measure > #v3dFs{padding:0 10px!important}}

/* the 3D view names its sources in the same bar as the map (js/11-view3d.js, updateCredits3D); the old note under the view is not shown */
.is-3d .credits{z-index:720}
#v3dNote{display:none!important}
.v3d-bottom{bottom:30px}
@media (max-width:720px){.v3d-bottom{bottom:32px}}

/* without the height slider and the old note, the bottom bar comes down to just above the sources line */
.v3d-measure{bottom:34px}
.v3d-photocap{bottom:92px}
@media (max-width:720px){.v3d-measure,.v3d.photo-on .v3d-measure{bottom:36px}.v3d-photocap{bottom:138px}}

/* the measuring tools show only their symbols, everywhere (the words are in the tooltips and the labels for screen readers) */
.mapbar .mtool .lbl,#v3dMeasure #v3mDist span,#v3dMeasure #v3mArea span,#v3dMeasure #v3mClear span{display:none!important}
.mapbar .mtool{padding-left:10px;padding-right:10px}
.v3d-measure > #v3mDist,.v3d-measure > #v3mArea,.v3d-measure > #v3mClear{padding:0 10px!important}
.mapbar .mtool svg{display:block}      /* on desktop the measuring buttons are now symbols only */

@media (max-width:720px){.tl-row{gap:12px}.tl-row .tl2,.v3d-top .tl2{width:min(300px,calc(100vw - 130px))}.tl-play{width:30px;height:30px;margin-top:8px}}

/* no separator line before the full screen button of the 3D bar */
.v3d-measure > #v3dFs,.v3d.photo-on .v3d-measure > #v3dFs{border-left:0!important;margin-left:0!important}

/* the 3D bar has the size and the place of the map toolbar: 40 px high, 32 px above the sources line */
.v3d-measure{bottom:32px}
.v3d-measure > button,.v3d-photos .ph-toggle,.v3d-photos .ph-btns button{min-height:32px}
@media (max-width:720px){.v3d-measure,.v3d.photo-on .v3d-measure{bottom:32px}}

body.pane-open .tfs-scale{display:none!important}      /* no scale bar while a download pane is open: it is not part of the picture */

body.pane-open .mapbar{display:none!important}      /* no toolbar under the picture while a download pane is open (zoom with the wheel or two fingers) */

/* the preview play button under the frame of the animation pane; while it plays the outside of the frame gets darker */
.vf-play{position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);width:40px;height:40px;border:0;border-radius:50%;padding:0;display:none;place-items:center;background:rgba(150,156,160,.92);color:#fff;cursor:pointer;pointer-events:auto;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.vf-play svg{width:18px;height:18px;fill:currentColor;stroke:none}
.vf-play:hover{background:rgba(120,126,130,.96)}
body.pane-open .video-frame .vf-play{display:grid}
.video-frame{transition:box-shadow .3s}
.video-frame.playing{box-shadow:0 0 0 9999px rgba(6,10,13,.88)}

/* 3D view with a download pane open: the titles, labels and menus on the picture go, only the picture and the frame stay (the frame draws its own labels) */
body.pane-open .v3d-top,body.pane-open .v3d-lab,body.pane-open .v3d-layers,body.pane-open .v3d-bottom,body.pane-open .v3d-tune,body.pane-open .v3d-camtip,body.pane-open .v3d-tl{display:none!important}
body.pane-open .v3d-year{display:none!important}
body.pane-open .app.is-3d .v3d-hint,body.pane-open .app.is-3d #videoFrameNote{display:none!important}      /* no 'zoom out' note or slider hint outside the frame in 3D */

/* the first and last year are centred over their ticks */
.tl2-ends{position:relative;display:block;height:13px}
.tl2-ends b{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.tl2-ends b:first-child{left:0}.tl2-ends b:last-child{left:100%}
.tl-row{padding-left:0}
.tl2{margin-right:16px}

/* before a glacier is chosen the layer menu shows only what applies to the overview */
.app.no-glacier .layerbox .gl-only{display:none!important}

/* the figure tiles of the stat cards: one short line for the label, the number, and the period (and the uncertainty) in a small chip that appears when the tile is hovered or focused (also its tooltip) */
.stat{position:relative}
.stat:not(.wide) .k:not(.note){display:block;white-space:normal;overflow:visible}      /* a long label wraps in its tile instead of being cut off */
.stat:not(.hero) .v{font-size:15px}
.stat.has-per .per,.wbox.has-per .per,.w-box.has-per .per{position:absolute;top:-9px;right:8px;z-index:3;margin:0;padding:2px 8px;border-radius:999px;background:var(--rock);color:#fff;font-size:10.5px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .15s,transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.stat.has-per:hover .per,.stat.has-per:focus-visible .per,.wbox.has-per:hover .per,.wbox.has-per:focus-visible .per,.w-box.has-per:hover .per,.w-box.has-per:focus-visible .per{opacity:1;transform:none;pointer-events:auto}      /* hover or keyboard focus only: a click does not leave the chip standing */
.stat.has-per{cursor:default;outline:none}
.stat.has-per::after{content:"";position:absolute;right:8px;bottom:8px;width:5px;height:5px;border-radius:50%;background:var(--moraine);opacity:.35}      /* a small dot: there is more to see on hover */

/* the water boxes fit their tile: a smaller icon, the unit small beside the number, a chip on hover with what it means */
.wbox{position:relative;gap:8px;padding:9px 10px}
.wbox .wi,.wbox .wi svg{width:28px}
.wbox > div{min-width:0}
.wbox .v{font-size:18px}
.wbox .v small{font-size:12px;font-weight:700}
.wbox .k{font-size:11.5px}
.wbox.has-per{outline:none;cursor:default}
.wbox.has-per .per{white-space:normal;width:max-content;max-width:210px;right:6px;top:-12px}

/* the chip is centred over its tile and wraps, so a long text never leaves the panel */
.stat.has-per .per,.wbox.has-per .per,.w-box.has-per .per{left:50%;right:auto;width:max-content;max-width:188px;white-space:normal;text-align:center;border-radius:10px;transform:translate(-50%,3px)}
.stat.has-per:hover .per,.stat.has-per:focus-visible .per,.wbox.has-per:hover .per,.wbox.has-per:focus-visible .per,.w-box.has-per:hover .per,.w-box.has-per:focus-visible .per{transform:translate(-50%,0);pointer-events:auto}

/* the little dot lights up (red, with a soft glow) while its tile is hovered or focused */
.stat.has-per::after{transition:opacity .15s,background .15s,box-shadow .15s,transform .15s}
.stat.has-per:hover::after,.stat.has-per:focus-visible::after{background:var(--accent);opacity:1;box-shadow:0 0 0 3px rgba(200,50,42,.22);transform:scale(1.25)}
.wbox.has-per::after{content:"";position:absolute;right:8px;bottom:8px;width:5px;height:5px;border-radius:50%;background:var(--moraine);opacity:.35;transition:opacity .15s,background .15s,box-shadow .15s,transform .15s}
.wbox.has-per:hover::after,.wbox.has-per:focus-visible::after{background:var(--accent);opacity:1;box-shadow:0 0 0 3px rgba(200,50,42,.22);transform:scale(1.25)}

/* smaller type in the stat cards of the narrower right panel, so numbers and labels fit their boxes */
.sym-row{gap:10px}
.sym-pitch,.sym-bus{width:76px}.sym-pool{width:72px}.sym-tower{width:56px}
.sym-txt b{font-size:19px}
.sym-txt small{font-size:11px}
.stat.hero .v{font-size:26px}
.stat.hero .k{font-size:11px}
.stat.hero .k.note{font-size:10px}
.wbox .v{font-size:16px}
.wbox .v small{font-size:11px}
.wbox .k{font-size:10.5px;line-height:1.25}
.wbox .wi,.wbox .wi svg{width:24px}
.wbox{gap:7px;padding:8px 9px}

.tile-link{text-decoration:none}

/* the right panel: sentences are justified; buttons centre their text */
.story p,.story .dbody p,.story .about-sec p,.story .gh-invite span,.story .tr-row,.story .tr-t,.story .tr-maps,.story .cum-read,.story .w-live,.story .w-text,.story .span-note,.story .sub-note,.story .note,.story .srcline,.story small.src{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.story .sub{text-align:left}
.story .lede{text-align:left}
.story .stat .k,.story .stat .v,.story .tr-row,.story .src-list li,.story small.src{text-align:left}
.story p.sub{text-align:left}
.cb{text-align:center;display:flex;align-items:center;justify-content:center}
.story .tile-link{text-align:left}

/* Switzerland tab: the same tiles as under Stats (same sizes and colours), the long texts in the hover chip, the dot that lights up */
.stat.hero.wide.has-per .per{max-width:230px}
.stat.has-per.hero::after,.w-box.has-per::after,.stat.wide.has-per::after{content:"";position:absolute;right:9px;bottom:9px;width:5px;height:5px;border-radius:50%;background:var(--moraine);opacity:.35;transition:opacity .15s,background .15s,box-shadow .15s,transform .15s}
.stat.has-per.hero:hover::after,.stat.has-per.hero:focus-visible::after,.w-box.has-per:hover::after,.w-box.has-per:focus-visible::after,.stat.wide.has-per:hover::after,.stat.wide.has-per:focus-visible::after{background:var(--accent);opacity:1;box-shadow:0 0 0 3px rgba(200,50,42,.22);transform:scale(1.25)}
.stat.wide.has-per{outline:none;cursor:default}
.w-box{position:relative;background:var(--firn);border-radius:0;padding:9px 10px;outline:none;cursor:default}
.water .w-big{font-size:15px;font-weight:600;color:var(--rock);line-height:1.25}
.water .w-key{font-size:10.5px;color:var(--moraine)}
.water .w-hero-tile .v{font-size:26px;font-weight:800;color:var(--crevasse)}
.water .w-hero-tile .k{font-size:11px;font-weight:600;color:var(--moraine)}
.water .w-icons svg{width:20px;height:20px}.water .w-icons svg.lake{width:30px;height:20px}

/* a chip never opens upwards where the tile is the first of its card (the card above would cut it off): it opens over the lower edge instead */
.stat-row > .stat:first-child.has-per .per{top:calc(100% - 6px);bottom:auto}
.water .stat.w-hero-tile.has-per .per{top:calc(100% - 6px)}
.stat.has-per .per,.wbox.has-per .per,.w-box.has-per .per{z-index:9}

.has-per .per sup.fn a,.has-per .per a{color:#9fd0f0}      /* source numbers in the dark chip stay readable */

/* the four comparison choices are centred */
.water .w-chips{justify-content:center}

/* ---------- teaser film (js/13-teaser.js) ---------- */
.teaser-btn{display:flex;width:fit-content;margin-left:auto;margin-right:auto;align-items:center;gap:6px;margin-top:8px;padding:5px 11px 5px 9px;border:1px solid var(--rule);border-radius:0;background:var(--sheet);color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer}
.teaser-btn svg{width:13px;height:13px;fill:currentColor}
.teaser-btn:hover{border-color:var(--accent)}
.teaser{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:#0A1322;opacity:0;transition:opacity .5s}
.teaser.on{opacity:1}
.teaser video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.teaser-skip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;padding:7px 16px;border:1px solid rgba(255,255,255,.4);border-radius:99px;background:rgba(10,19,34,.55);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.teaser-skip:hover{background:rgba(10,19,34,.8)}
.teaser-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.16)}
.teaser-bar i{display:block;height:100%;width:0;background:var(--accent)}
.teaser-end{position:absolute;left:0;right:0;bottom:calc(9% + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:0 16px}
.teaser-go,.teaser-again{padding:11px 24px;border-radius:99px;font-size:15px;font-weight:800;cursor:pointer}
.teaser-go{border:0;background:var(--accent);color:#fff;box-shadow:0 8px 28px rgba(200,50,42,.5)}
.teaser-again{border:1px solid rgba(255,255,255,.5);background:rgba(10,19,34,.55);color:#fff}
body.teaser-on{overflow:hidden}
@media (min-width:900px) and (hover:hover){
  .teaser{background:rgba(10,19,34,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .teaser video{width:min(960px,calc(100% - 160px),calc((100vh - 120px) * 16 / 9));height:auto;aspect-ratio:16/9;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.5)}      /* at most 960 px wide: the film is 1920 px, so it stays sharp on a 2x screen and is not blown up on a large one */
}
/* phone in portrait: the 16:9 film in the middle of the screen, just under full width (Skip sits above it, the progress bar under it) */
@media (orientation:portrait) and (max-width:720px){
  .teaser video{width:calc(100% - 16px);height:auto;max-height:100%;aspect-ratio:16/9;border-radius:8px}
  .teaser-bar{top:calc(50% + (100vw - 16px) * 9 / 32 + 10px);bottom:auto;left:8px;right:8px;border-radius:2px;overflow:hidden}
  .teaser-end{bottom:auto;top:calc(50% + (100vw - 16px) * 9 / 32 + 24px)}
}
/* phone in landscape: leave room above and below the film (browser bars, notch, Skip button) so its top is not cut off */
@media (orientation:landscape) and (max-height:520px){
  .teaser{height:100dvh;bottom:auto;padding:calc(44px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));box-sizing:border-box}
  .teaser video{width:100%;height:100%;border-radius:8px}
  .teaser-skip{top:calc(6px + env(safe-area-inset-top,0px));padding:5px 14px;font-size:12.5px}
  .teaser-bar{bottom:calc(8px + env(safe-area-inset-bottom,0px));left:16px;right:16px;border-radius:2px;overflow:hidden}
  .teaser-end{bottom:calc(14% + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.teaser{transition:none}}

/* no underlined links anywhere */
a,a:hover,a:focus,.tile-link,.tile-link *,.down-hint,.n-more{text-decoration:none}

/* ---------- viewer menus and boxes: slightly translucent black with white text ---------- */
.layerbox:not(.in-flow),.mapbar,.v3d-measure,.v3d-tune,.v3d-tip,.notice,.pick-note,.v3d-photos .ph-drop{--rock:#fff;--moraine:rgba(255,255,255,.74);--rule:rgba(255,255,255,.2);--firn:rgba(255,255,255,.12);--sheet:transparent;--crevasse:#8CC4E0;color:#fff}
.layerbox:not(.in-flow),.mapbar,.v3d-measure,.v3d-tune,.v3d-tip,.notice,.pick-note,.v3d-photos .ph-drop{background:var(--glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mapbar button[aria-pressed="true"],.v3d-measure > button[aria-pressed="true"]{background:rgba(255,255,255,.24);color:#fff}
.tl-play,.stage.is-full .full-exit,.app.visual-only .full-exit,.app .full-play{color:#fff}
.mapbar .tl-play{background:rgba(255,255,255,.18)}
.v3d-measure .v3d-zoom{width:36px;padding:0;justify-content:center;font-size:20px;font-weight:500}
.v3d-measure .sep{flex:none;width:1px;height:20px;background:var(--rule);margin:0 4px}
.v3d.photo-on .v3d-zoom,.v3d.photo-on .v3d-measure .sep:first-of-type{display:none}      /* in a historic photograph the camera is fixed */
.v3d-measure{flex-wrap:wrap;justify-content:center}
.mapbar .tl-play{display:grid;place-items:center;flex:none;width:34px;height:34px;min-width:0;min-height:0;padding:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff}      /* the play button of the dock: round, with its icon (the dock hides the icons of its other buttons on desktop) */
.mapbar .tl-play svg{display:block;width:16px;height:16px;fill:currentColor;stroke:none}
.mapbar .tl-play:hover{background:rgba(255,255,255,.3)}
.mapbar,.v3d-measure{width:max-content}      /* as wide as its content: a box placed at left:50% would otherwise be limited to half the stage and wrap its tools */
@media (max-width:720px){.mapbar-row{flex-wrap:wrap}}

/* ---------- right panel: figures, tiles and text as in the redesign (design/redesign-pro.html) ---------- */
.story .dcard p,.story .fact{font-size:13.5px;line-height:1.6;color:var(--rock)}
.story .dcard small.src,.story .dcard .srcline,.story small.src{font-size:11px;line-height:1.5;color:var(--faint)}
.story .dcard .srcline a,.story .src a{color:var(--moraine)}
.story .src-list{font-size:11px;line-height:1.5;color:var(--faint)}
.story .src-list a{color:var(--moraine)}
/* tiles: a thin grid, small caps label, then the figure */
.story .stat-row{gap:0;padding:1px 0 0 1px}
.story .stat{background:none;border-radius:0;padding:10px 12px 11px;gap:0}
.story .stat:not(.hero){border:1px solid var(--rule);margin:-1px 0 0 -1px}
.story .stat .mini{display:none}
.story .stat .k:not(.note){font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moraine);line-height:1.3;margin-bottom:0}
.story .stat .k.note{font-size:11px;font-style:normal;color:var(--moraine);line-height:1.35;margin-top:2px}
.story .stat:not(.hero) .v,.story .stat.wide:not(.hero) .v{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-top:4px;line-height:1.15}
.story .stat.loss:not(.hero) .v{color:var(--accent)}
.story .stat .v small,.story .stat.wide .v small{font-size:12px;font-weight:500;color:var(--moraine);letter-spacing:0;margin-left:3px}
.story .stat.wide.loss{background:none;padding:10px 12px 11px}
.story .stat.wide.loss .k,.story .stat.wide.loss .k:not(.note){color:var(--moraine);font-size:10px}
.story .stat.hero{padding:0 0 14px;border:0;margin:0}
.story .stat.hero .v{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.story .stat.hero .v small{font-size:14px}
.story .stat.hero .k:not(.note){order:1;margin-top:4px;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--moraine);line-height:1.45}
.story .stat.hero .k.note{font-size:11px}
.story .sym-row{margin-top:8px}
.story .sym-txt b{font-size:19px;font-weight:700;color:var(--ink)}
.story .sym-txt small,.story .sym-txt small:only-child{font-size:12px;font-weight:400;color:var(--moraine)}
/* water boxes */
.story .water{background:none;border:0;padding:0;margin:0}
.story .wbox,.story .w-box,.story .w-live,.story .cum-read{background:none;border:1px solid var(--rule);border-radius:0;padding:10px 12px}
.story .wbox .v{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.story .wbox .v small{font-size:12px;font-weight:500;color:var(--moraine)}
.story .wbox .k{font-size:11px;color:var(--moraine)}
.story .water .w-big{font-size:15px;font-weight:600;color:var(--ink)}
.story .water .w-text,.story .w-live,.story .cum-read{font-size:12px;line-height:1.5;color:var(--moraine)}
.story .water .w-chips button{font-size:12px;font-weight:600;color:var(--ink)}
.story .water .w-chips button[aria-pressed="true"]{color:#fff}
.story .water .w-hero-tile .v{color:var(--ink)}
/* loss per year */
.story .bars{gap:5px;margin:0}
.story .bar{grid-template-columns:34px 1fr 40px;gap:8px;font-size:12px;color:var(--moraine)}
.story .bar .track{height:7px;background:var(--rule-2)}
.story .bar .fill{background:#C9D2D7}
.story .bar.in-range .fill{background:var(--accent)}
.story .bar.in-range span:first-child,.story .bar.in-range .v{color:var(--ink);font-weight:600}
.story .span-note,.story .dcard .span-note{background:none;padding:0;margin:11px 0 0;font-size:12px;line-height:1.5;color:var(--moraine)}
/* ice left chart */
.story .cum2 .cum-n b{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.story .cum2 .cum-loss b{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.story .cum2 .cum-n small,.story .cum2 .cum-loss small,.story .cum figcaption{font-size:11px;color:var(--moraine)}
.story .cum svg{font-size:10.5px;fill:var(--faint)}
/* hike and bike, links */
.story .tr-row{margin:0;padding:10px 0;border-top:1px solid var(--rule-2);font-size:13.5px;line-height:1.5}
.story .tr-row:first-of-type{border-top:0;padding-top:0}
.story .tr-row b{min-width:42px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moraine)}
.story .tr-row a{color:var(--crevasse);font-weight:600}
.story .tr-maps{font-size:12.5px;color:var(--moraine)}
.story .cb{font-size:12.5px;font-weight:600;color:var(--ink);padding:7px 11px}

/* ---------- stat cards exactly as in the redesign: headline figure, text chip, tiles with a description, bars ---------- */
.story .stat .d{display:block;order:3;font-size:11px;line-height:1.35;color:var(--moraine);margin-top:2px;text-align:left}
.story .stat .d sup.fn{position:static;vertical-align:super}
.story .stat.hero .k:not(.note){order:1}
.story .stat.hero .d{order:2;font-size:12.5px;line-height:1.45;margin-top:4px}
.story .stat .tile-link{order:4}
.story .sym-chip{order:5;align-self:flex-start;display:inline-block;margin-top:8px;font-size:12px;line-height:1.4;color:var(--rock);background:var(--firn);border-radius:4px;padding:4px 9px}
.story .stat.hero{display:flex;flex-direction:column}
.story .stat .k:not(.note){text-transform:uppercase}
.story .area{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.story .area div{display:grid;grid-template-columns:54px 1fr 78px;align-items:center;gap:8px;font-size:12px;color:var(--moraine)}
.story .area i{display:block;height:9px;background:var(--crevasse);border-radius:1px}
.story .area i.a0{background:#B9CDD6}.story .area i.a1{background:#7DA6BA}
.story .area b{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.story .chart-t{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 8px}
.story .chart-t .ct{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--moraine)}
.story .chart-t em{font-style:normal;font-size:11.5px;color:var(--faint)}
.story svg.ch{display:block;width:100%;height:auto;max-height:170px}
.story svg.ch text{font:10.5px var(--sans);fill:var(--faint)}
.story .gwater .stat.hero .v,.story .gwater .stat.hero.wide .v{color:var(--ink)}      /* the water figure is not a loss: dark, as in its closed row */
.story .stat.hero{align-items:center;text-align:center}      /* the headline figure, its text and the comparison chip are centred in every card */
.story .stat.hero .v,.story .stat.hero .k,.story .stat.hero .d{text-align:center}
.story .stat.hero .sym-chip{align-self:center}
.story .rb{cursor:default}.story .rb-read{margin-top:6px;min-height:2.9em;font-size:12px;line-height:1.45;color:var(--moraine)}      /* the readout of the hovered bar has its own line under the chart: it is too long for the title row */
.story svg.ch:has(.rb.on) .rb:not(.on) .bar-r{opacity:.45}
.story .stat.hero .k:not(.note),.story .stat.hero.wide.loss .k:not(.note),.story .stat.hero.wide .k:not(.note){font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--moraine);line-height:1.45;margin:4px 0 0}
.story .stat.hero,.story .stat.hero.wide,.story .stat.hero.wide.loss{padding:6px 0 14px;gap:0;background:none}
.story .stat.hero .sym-chip{margin-top:8px}
.story .ch-mode{display:flex;gap:16px;margin:-2px 0 8px}
.story .ch-mode button{border:0;background:none;padding:0 0 3px;font:600 12px var(--sans);color:var(--moraine);cursor:pointer}
.story .ch-mode button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.story .dh-chart{margin:16px 0 0}
.story .dh-chart figcaption{font-size:11px;line-height:1.5;color:var(--faint);margin-top:8px;display:block}
.story .stat.hero:not(.loss) .v{color:var(--ink)}      /* only losses are red: shares and the water stored are dark */
.story svg.ch text.sel{fill:var(--ink);font-weight:600}
.story .water .w-live{margin-top:12px}
.story .stat.hero .v,.story .stat.hero.wide .v{display:block;white-space:normal;text-wrap:balance;text-align:center}      /* the headline is one line of text, not flex items that break between number and unit */
.story .stat.hero .v small{display:inline}
.story .water .stat.hero .v,.story .gwater .stat.hero .v{font-size:26px;white-space:nowrap}      /* "4.6 trillion litres" stays on one line in the narrow panel */
.story .ice-left{margin:0}
.story .ice-left figcaption{font-size:11px;line-height:1.5;color:var(--faint);margin-top:8px}
.story .ice-left svg.ch text{fill:var(--faint)}
.story .chart-note{margin:6px 0 0;font-size:11px;line-height:1.45;color:var(--faint)}
details.about>summary::after,details.about[open]>summary::after{display:none}
.story .gh-invite,.story .gh-invite span{text-align:center}
.story .dcard p.chart-note{margin:6px 0 0;font-size:11px;line-height:1.45;color:var(--faint);text-align:left}

/* the timeline can be dragged to scrub through the years */
.tl2{cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}

/* the timeline in the 3D dock is as long as in the map dock (300 px) and the dock is just wide enough for it: play button 34 + gap 20 + line 300 + margin 16 + paddings */
@media (min-width:721px){.v3d-measure:has(.v3d-tl:not(:empty)){min-width:min(400px,calc(100% - 20px))}.v3d-tl .tl2{flex:none;width:min(300px,56vw);margin-right:16px}}

/* the map dock's buttons are as high as the 3D dock's (32 px), so the dock keeps its height and place when the view switches */
@media (min-width:721px){.mapbar button{min-height:32px;box-sizing:border-box}.mapbar .tl-play{min-height:0}}
.v3d-measure{row-gap:0}      /* the 3D dock wraps its timeline row above the buttons; the 2 px gap between rows made it higher than the map dock */

/* the timeline sits in the middle of its row of the dock, horizontally and vertically, in the map and in the 3D view */
.tl-dots,.v3d-tl{padding-top:6px;padding-bottom:6px}
.tl-dots{align-self:stretch}
.tl-row{justify-content:center}
@media (min-width:721px){.mapbar:has(.tl-dots:not(:empty)){min-width:min(400px,calc(100% - 24px))}}

/* the pick-a-glacier message in the style of the left panel (small capitals, the step number in red) on the dark glass of the docks, at the top edge of the map */
.pick-note{top:12px;padding:11px 16px;gap:10px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.35);font:600 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.pick-note .pn-num{width:auto;height:auto;border-radius:0;background:none;color:#FF8A82;font:700 11px/1.3 var(--sans);letter-spacing:.09em;font-variant-numeric:tabular-nums}

.gframe.far{cursor:pointer}      /* zoomed out: the white square of the current selection can be clicked to fly back to the tongue */

/* on phones the dock is taller while it holds a timeline: the scale bar sits above it */
@media (max-width:720px){.is-timelapse .leaflet-control-scale{margin-bottom:140px!important}.app.more-open.is-timelapse .leaflet-control-scale{margin-bottom:190px!important}}

/* a tile's figure may wrap ("1.68 million litres" per resident) instead of running out of its box */
.water .stat:not(.hero) .v{white-space:normal}
.story .water .stat-row > .stat.hero.wide:last-child{margin-top:22px}      /* air between the tiles and the melted figure */
.story .water .stat-row > .stat.hero.wide:last-child{padding-bottom:0}      /* the counter box follows closely */
.story .water .w-live{margin-top:14px}