/* App chrome. Deliberately quiet: the data is the interface. */ html,body{height:100%} /* The header's height is a variable because the layout below it is sized by subtraction. Hard-coding 48px in two places is how the map ends up one control-height taller than the screen. */ :root{--bar:48px;--bar-safe:calc(48px + env(safe-area-inset-top))} @media(pointer:coarse){:root{--bar:60px;--bar-safe:calc(60px + env(safe-area-inset-top))}} body{overflow:hidden} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:9px 14px;font-size:12px} .skip:focus{left:8px;top:8px} .bar{display:flex;align-items:center;gap:10px;padding:8px 10px; background:var(--pnl2);border-bottom:1px solid var(--rule2);height:var(--bar)} .brand{display:flex;align-items:center;gap:8px;flex:0 0 auto} .wm{font-size:14px;font-weight:600;letter-spacing:-.01em} .wm b{color:var(--ok);font-weight:600} /* The search field must yield: it was flexing to its max-width and pushing the units toggle and locate button off the right edge on a phone. min-width:0 is the part people forget — a flex item will not shrink below its content without it, so the row overflows instead of the field getting narrower. */ .find{position:relative;flex:1 1 auto;min-width:0;max-width:420px;display:flex;align-items:center;gap:7px; padding:6px 10px;border:1px solid var(--rule2);border-radius:var(--r-sm);background:var(--bg);color:var(--dim)} .find input{min-width:0} .find:focus-within{border-color:var(--info)} .find input{flex:1;background:0;border:0;outline:0;color:var(--ink);font:inherit;font-size:12.5px} .hits{position:absolute;top:calc(100% + 4px);left:-1px;right:-1px;z-index:30;list-style:none; max-height:280px;overflow:auto;background:var(--pnl);border:1px solid var(--rule2);border-radius:var(--r-sm)} .hits li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;cursor:pointer;font-size:12.5px} .hits li[aria-selected=true],.hits li:hover{background:var(--pnl2)} .hits .r{font-family:var(--mono);font-size:10.5px;color:var(--dim)} .acts{display:flex;align-items:center;gap:6px;flex:0 0 auto} .seg{display:flex;border:1px solid var(--rule2);border-radius:var(--r-sm);overflow:hidden; background:rgba(8,13,22,.6)} .seg button{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em; padding:5px 9px;background:transparent;border:0;color:var(--dim);cursor:pointer} .seg button{position:relative;transition:color .12s ease} .seg button:hover{color:var(--ink)} .seg button.on{background:rgba(56,189,248,.10);color:var(--info)} .seg button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--info)} /* Conditions first, map second — the panel is what people came for; the map is how they change which mountain they are looking at. */ .app{display:grid;height:calc(100dvh - var(--bar-safe));grid-template-rows:1fr minmax(30svh,36svh)} /* Width alone is not enough: a handset in desktop-site mode reports >=900px and got the two-column layout crushed onto a 6-inch screen. Requiring a fine pointer keeps phones and tablets on the stacked layout. */ @media(min-width:1024px) and (pointer:fine){ .app{grid-template-rows:1fr;grid-template-columns:minmax(460px,40%) 1fr} } .mapwrap{position:relative;min-height:0;background:#050a12;border-top:1px solid var(--rule2)} @media(min-width:1024px) and (pointer:fine){.mapwrap{border-bottom:0;border-left:1px solid var(--rule2)}} #map{position:absolute;inset:0} .layers{position:absolute;top:9px;right:9px;z-index:5;display:flex; background:rgba(6,11,20,.88);backdrop-filter:blur(10px); border:1px solid var(--rule2);border-radius:var(--r-sm);overflow:hidden} .layers button{position:relative;font-family:var(--mono);font-size:9.5px;font-weight:700; letter-spacing:.11em;padding:8px 12px;background:transparent;border:0; color:var(--faint);cursor:pointer;transition:color .12s ease} .layers button + button{box-shadow:inset 1px 0 0 var(--rule)} .layers button:hover{color:var(--ink)} .layers button.on{color:var(--info);background:rgba(56,189,248,.09)} .layers button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--info)} .mstat{position:absolute;left:9px;bottom:9px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:5;font-family:var(--mono);font-size:9.5px; color:var(--dim);background:rgba(8,13,22,.86);border:1px solid var(--rule2);padding:4px 8px;border-radius:var(--r-sm)} /* Keep clear of the zoom control bottom-right and the status chip bottom-left, or the scrubber ends up underneath both and cannot be grabbed. */ [hidden]{display:none !important} /* author display rules must not beat the attribute */ .rctl{position:absolute;left:9px;right:52px;bottom:38px;z-index:6;display:flex;align-items:center;gap:9px; background:rgba(6,11,20,.88);backdrop-filter:blur(10px); border:1px solid var(--rule2);border-radius:var(--r-sm);padding:6px 9px} @media(max-width:560px){.rctl{right:9px;bottom:44px}} .rctl button{background:0;border:0;color:var(--info);cursor:pointer;font-size:12px} .rctl input{flex:1;accent-color:var(--info)} .rtime{font-family:var(--mono);font-size:10px;color:var(--dim);min-width:52px;text-align:right} .panel{min-height:0;overflow:auto;padding:12px;background:var(--bg)} .boot{font-family:var(--mono);font-size:11px;color:var(--dim);padding:16px} /* Below 420px the wordmark is the first thing to go — the mark alone still identifies the app, and the controls are functional rather than decorative. */ @media(max-width:420px){ .wm{display:none} .find{max-width:none} .seg button{padding:5px 7px} } /* ---- One-handed layout ---- On touch devices every control that is used on the hill moves into the lower thumb arc and grows to a gloved target. The header keeps only identity and search; the things you press while moving live at the bottom. */ @media (pointer:coarse){ .ib, .seg button{ min-width:44px; min-height:44px } .find{ padding:8px 12px; min-height:44px } .ib[data-hill]{ min-width:56px; min-height:56px } /* Locate is an on-hill control, so it cannot live in the header where a thumb cannot reach it. It moves to the bottom-right corner — the easiest spot on the screen for a right thumb, and the mirror of the layer row. */ #loc{ position:fixed; right:12px; bottom:12px; z-index:20; background:rgba(6,11,20,.88); backdrop-filter:blur(10px); border:1px solid var(--rule2); color:var(--dim); box-shadow:0 6px 20px rgba(0,0,0,.5) } #loc:active{ color:var(--info); border-color:var(--info) } /* Range input needs a tall track: a 34px rail is unusable in a glove. */ .rctl input{ height:56px; background:transparent } .rctl input::-webkit-slider-runnable-track{ height:10px; border-radius:var(--r); background:rgba(255,255,255,.16) } .rctl input::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--info); margin-top:-10px; border:2px solid #04070d } .seg button{ padding:0 14px; font-size:12px } /* Layer buttons move from top-right to bottom-left: top-right is the single hardest place to reach with a right thumb on a large phone. */ .layers{ top:auto; bottom:12px; left:12px; right:80px; width:max-content; max-width:calc(100% - 92px) } .layers button{ min-height:56px; padding:0 14px; font-size:11px; display:flex; align-items:center } /* Status chip out of the way of the new control row. */ .mstat{ bottom:auto; top:10px; left:10px; max-width:56% } /* Radar scrubber sits above the layer row, full width, with a fat thumb rail. */ .rctl{ left:10px; right:10px; bottom:80px; padding:10px 12px } .rctl input{ height:34px } .rctl input::-webkit-slider-thumb{ width:26px; height:26px } .rctl button{ min-width:56px; min-height:56px; font-size:18px } } /* A pointer-coarse device in landscape has almost no vertical room; give the map back its height and let the panel scroll. */ @media (pointer:coarse) and (orientation:landscape){ .app{ grid-template-rows:1fr; grid-template-columns:minmax(300px,44%) 1fr } .mapwrap{ border-top:0; border-left:1px solid var(--rule2) } } /* ---- Mobile: conditions as a bottom sheet over a full-height map ---- Two panes stacked meant neither was usable — the map got 304px and the panel scrolled in a slot. As a sheet, the map keeps the whole screen and the reader pulls conditions up to whatever depth they want. The grab handle stays in the thumb arc at every snap, which a top-anchored drawer cannot manage. */ .grip{display:none} @media (pointer:coarse) and (orientation:portrait){ .app{grid-template-rows:1fr} .mapwrap{grid-row:1;grid-column:1;border-top:0} /* No dead space above the first reading. The grab handle is the top of the sheet, and the numbers start immediately under it — a buffer there pushes the one thing the reader came for further down the screen. */ .panel{padding-top:0} .panel .glance{padding-top:2px} .panel > .pnl{margin-top:0;border:0;border-radius:0} .panel .pnl > *:first-child{margin-top:0} .grip{height:22px} .grip span{margin-top:0;height:4px;width:38px} .panel{ position:fixed; left:0; right:0; bottom:0; z-index:25; background:var(--pnl); border-top:1px solid var(--rule2); border-radius:14px 14px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.5); overflow:auto; -webkit-overflow-scrolling:touch; padding:0 0 20px; height:62svh; /* replaced by the sheet controller */ } .panel .pnl{border:0;border-radius:0;background:transparent} /* Hit area is 56px for a gloved thumb; the visible bar stays thin. Padding is the right lever here — growing the bar itself would eat the panel. */ .grip{ display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:2; width:100%; height:56px; border:0; background:var(--pnl); cursor:grab; touch-action:none; } .grip span{display:block;width:44px;height:5px;border-radius:var(--r);background:var(--rule2)} .grip:active span{background:var(--info)} /* The map's own controls must clear the sheet at its smallest snap. */ /* Map controls live just above the sheet — but only while the sheet is at its peek snap. Once it is raised the user is reading conditions, the map is mostly covered, and the controls would be pushed above the thumb arc where they cannot be reached anyway. Hiding beats floating out of reach. */ .layers{bottom:calc(var(--sheet, 28svh) + 12px)} #loc{bottom:calc(var(--sheet, 28svh) + 12px)} .rctl{bottom:calc(var(--sheet, 28svh) + 80px)} body[data-sheet="mid"] .layers, body[data-sheet="full"] .layers, body[data-sheet="mid"] #loc, body[data-sheet="full"] #loc, body[data-sheet="mid"] .rctl, body[data-sheet="full"] .rctl{ opacity:0; pointer-events:none; transition:opacity .18s ease; } .mstat{top:10px;bottom:auto} } /* ═══════════════════════════════════════════════════════════ iOS / Safari * * Everything below exists because of one line in the head: * * * * That tells iOS to lay the page out edge to edge, THROUGH the rounded * corners, the Dynamic Island and the home indicator. It is the right choice * — a mountain that stops short of the corners looks like a web page, not an * instrument — but it is only half a bargain, and the other half was never * paid. Content underneath those regions is not merely decorative: the top of * the header sits behind the Island, and the bottom row of controls sits * under the home indicator, where the system swallows the touch. * * ANDROID IS FINE BECAUSE ANDROID HAS NO SUCH INSETS. Its gesture bar does * not overlay the page the way iOS's does, so identical CSS produces a * correct layout there and a pinched one on an iPhone. That asymmetry is the * whole reason this section is Apple-specific rather than a general fix. * * env(safe-area-inset-*) is what iOS gives back in exchange. It reports zero * on every device without a notch, which is why these can be unconditional: * on a desktop or an Android phone they add nothing at all. */ /* The bar grows by whatever the status bar steals, and its CONTENT is pushed below the island rather than the box simply getting taller. */ .bar{ padding-top:calc(8px + env(safe-area-inset-top)); padding-left:calc(10px + env(safe-area-inset-left)); padding-right:calc(10px + env(safe-area-inset-right)); height:calc(var(--bar) + env(safe-area-inset-top)); } /* Anything measured by subtraction from the header must use the same number, or the map ends up an inset taller than the screen — the exact bug the --bar variable was introduced to prevent, reappearing on one platform. */ /* The floating locate button clears the home indicator instead of sitting under it, where a tap becomes a swipe-up-to-close. */ @media(pointer:coarse){ #loc{ right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); } /* The bottom sheet is the worst offender: its handle is the control a reader reaches for most, and it was the closest thing to the indicator. Padding rather than margin, so the sheet still reaches the screen edge and only its CONTENT is inset — a sheet floating above the bottom of the display looks broken. */ #panel{ padding-bottom:env(safe-area-inset-bottom); } } /* ── the grey box iOS paints on every tap ─────────────────────────────── * Safari flashes a translucent rectangle over any element it considers * tappable. On a design with no boxes in it, a box appearing under the * reader's thumb on every single press is precisely the thing we have taken * out everywhere else. Removed globally; the controls all have their own * pressed states, so nothing is lost but the rectangle. */ *{-webkit-tap-highlight-color:transparent} /* ── the long-press selection callout ────────────────────────────────── * Holding a finger on a control in Safari selects its label and raises the * Copy/Look Up bubble, which on a map is indistinguishable from a bug: the * user meant to drag. Text in the readouts stays selectable deliberately — * a coordinate or a station name is worth copying. */ button, .seg, .views, .grip, .brand, .hud-stack, .legend2-mark{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } /* ── the brand, now that it is a button ───────────────────────────────── */ /* A