:root{--warn:#b35c00;--bg:#eef2f3;--card:#fff;--ink:#14262e;--mute:#4f6168;--line:#cdd8db;--route:#c8202f;--cand:#e8a900;--btn:#14262e;--btnt:#fff;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1a1f;--card:#16262d;--ink:#e6eef0;--mute:#94a8ae;--line:#2a3f47;--route:#ff5a67;--cand:#f5c02e;--btn:#e6eef0;--btnt:#0e1a1f;--warn:#ffa94d;color-scheme:dark}}
:root[data-theme="dark"]{--warn:#ffa94d;--bg:#0e1a1f;--card:#16262d;--ink:#e6eef0;--mute:#94a8ae;--line:#2a3f47;--route:#ff5a67;--cand:#f5c02e;--btn:#e6eef0;--btnt:#0e1a1f;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 display:grid;grid-template-columns:minmax(0,1fr) auto var(--panelw,380px);grid-template-rows:auto minmax(0,1fr);height:100dvh;
 padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0)}
button,input{font:inherit;color:inherit}

#top{grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;gap:8px 10px;padding:10px 16px;container-type:inline-size;background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:1100}
h1{display:flex;align-items:center;gap:8px;font-weight:700;font-size:21px;line-height:1;letter-spacing:-.01em;margin:0}
.logo{width:28px;height:28px;border-radius:7px;display:block}
/* the bar: the name and the search (Layers and Settings are on the map); the results drop down under the whole bar */
#search{z-index:2;flex:1 1 auto;min-width:0}
#q{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
#results{position:absolute;top:100%;left:12px;right:12px;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px #0003}
#results button{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 10px;cursor:pointer;font-size:14px}
#results button:hover,#results button:focus-visible{background:var(--bg);outline:none}
#results .mute{white-space:nowrap}
#results .more{display:block;white-space:normal;font-size:12px}
#results .ask{font-weight:600}
#results .rh{padding:6px 10px 2px;font-size:12px;font-weight:600;color:var(--mute);border-top:1px solid var(--line);margin-top:4px}
#results{max-height:60dvh;overflow:auto}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 11px 5px 7px;cursor:pointer;font-size:14px;font-weight:600}
.chip .g{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;font-size:12px}
.chip[aria-pressed="false"]{color:var(--mute)}
.chip[aria-pressed="false"] .g{background:var(--line);color:var(--mute)}
.chip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.chip:focus-visible{outline:2px solid var(--route);outline-offset:2px}

#mapwrap{position:relative;min-height:0}
/* map only: the whole screen is map; the same map button (dark while it is on) brings the rest back */
body.maponly{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.maponly #top,body.maponly #panel{display:none}
.mapbtn{width:34px;height:34px;display:grid;place-items:center;padding:0;background:#fff;color:#14262e;font-size:18px;cursor:pointer}
.leaflet-bar[aria-pressed="true"]{background:#14262e!important;color:#fff!important}
/* undo and redo, top right under the map layers, one above the other */
.hist{display:flex;flex-direction:column}.hist[hidden]{display:none}.hist .mapbtn{border:0;border-radius:0;font-size:20px}.hist .mapbtn:first-child{border-radius:4px 4px 0 0}
.hist .mapbtn:last-child{border-radius:0 0 4px 4px;border-top:1px solid #ccc}.hist .mapbtn:disabled{color:#b8c4c8;cursor:default}
.clearroute[hidden]{display:none}.clearroute .mapbtn{border:0;border-radius:4px;color:#b02a37}.clearroute .ic{width:18px;height:18px}
.pop .btn.rm,.card .pop .btn.rm{background:transparent;color:var(--route);border:1px solid color-mix(in srgb,var(--route) 45%,transparent)}

#map{position:absolute;inset:0;background:#dfe8ea}
#status{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:900;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:15px;padding:5px 14px;font-size:13px;font-weight:600;box-shadow:0 2px 10px #0002;width:max-content;max-width:min(560px,calc(100% - 130px));text-align:center}   /* long messages wrap, between the map buttons */

.pin{background:none;border:0}
/* a bigger area to tap than the 26 px marker shows (44 px, as Apple and Google advise), without changing its look */
.pin::after{content:"";position:absolute;inset:-9px;border-radius:50%}
/* a tapped spot and own points in the route: a cross whose open middle is the exact place */
.pick-x{background:none;border:0;pointer-events:none}.pick-x .cross{width:30px;height:30px;display:block}
.pin.pt span{background:none;border:0;box-shadow:none;outline:none!important;transform:none!important}.pin.pt .cross{width:24px;height:24px;display:block}
.pin.pt.cur .cross,.pin.pt.cand .cross{transform:scale(1.25)}   /* the current stop: a bigger cross, not a ring around it */
.pin span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font:700 12px/1 system-ui,sans-serif;border:2px solid #fff;box-shadow:0 1px 3px #0006;transition:transform .1s}
.pin.cand span{outline:3px solid var(--cand);transform:scale(1.15)}
.pin.inroute span{outline:3px solid var(--route)}
.pin.cur span{outline:4px solid #14262e;transform:scale(1.3)}
/* stop number on route markers (top left, clear of the name label) and in the day list */
.nr{display:inline-block;min-width:17px;height:17px;padding:0 4px;border-radius:9px;box-sizing:border-box;text-align:center;font:700 10px/14px system-ui,sans-serif;
 background:#fff;color:#14262e;border:1.5px solid #14262e}
.nr.dark{background:#14262e;color:#fff;border-color:#fff}
.pin .nr{position:absolute;top:-9px;left:-9px;box-shadow:0 1px 2px #0006;z-index:1}
.day li .nr{margin-right:6px;background:var(--card);color:var(--ink);border-color:var(--ink)}
.day li .nr.dark{background:var(--ink);color:var(--card);border-color:var(--ink)}
.pin.tr span{width:20px;height:20px;border-radius:4px;font-size:10px;border-width:1.5px}
/* the white pictures in markers and buttons (ICONS in app.js) */
.ic{width:14px;height:14px;fill:currentColor;display:block}
.pin.tr .ic,.chip .ic{width:13px;height:13px}
/* hut names: plain text with a soft white halo, like the map's own labels, instead of a white box */
.leaflet-tooltip.lbl{background:none;border:0;box-shadow:none;padding:0 2px;color:#14262e;font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff}
.leaflet-tooltip.lbl::before{display:none}
/* placed by CSS, not measured one by one (Label in app.js): beside the marker, or centred on a route's name point */
.leaflet-tooltip.lbl.leaflet-tooltip-right{translate:0 -50%}.leaflet-tooltip.lbl.leaflet-tooltip-center{translate:-50% -50%}
/* a name that would cover a more important one waits until there is room (declutter in app.js) */
.leaflet-tooltip.lbl.crowded{visibility:hidden}
/* names of the well-known routes, in their violet */
.leaflet-tooltip.lbl.famous{color:#5a32a3;font-weight:700;font-size:12px;white-space:nowrap}
.fam-at{background:none;border:0}
/* via ferrata grade badge: the letter in a colour that rises with difficulty, edged in the cable's yellow */
.vf{background:none;border:0}
.vf span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--c);color:#fff;font:800 12px/1 system-ui,sans-serif;border:2px solid #ffd43b;box-shadow:0 1px 3px #0006}
/* cluster of huts when zoomed out: a soft circle in the category colour with the count */
.clu{background:none;border:0}
.clu span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--c);color:#fff;font:700 12px/1 system-ui,sans-serif;
 border:2px solid #fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent),0 1px 3px #0005}
@media (max-width:760px){.leaflet-tooltip.lbl{font-size:11px}}
/* the map's scale, easier to read over the map */
.leaflet-control-scale-line{font:600 12px/1.3 system-ui,sans-serif;color:#14262e;background:#ffffffe0;border:2px solid #14262e;border-top:0;padding:1px 6px 0}
/* on phones the credits take one line (tap to read them all), so they do not cover the scale */
@media (max-width:760px){
 .leaflet-control-attribution{max-width:calc(100vw - 135px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
 .leaflet-control-attribution.open{white-space:normal;max-width:none}
}

#panel{--padt:14px;overflow:auto;padding:var(--padt) 16px 20px;display:flex;flex-direction:column;gap:16px}
h2{font-weight:700;font-size:17px;line-height:1.25;margin:0 0 8px}
.mute{color:var(--mute)}
.cur{border-left:4px solid var(--route);padding:2px 0 2px 12px}
.cur b{font-size:18px}
.opt{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c,var(--cand));border-radius:8px;padding:10px 12px;cursor:pointer;margin-bottom:8px}
.opt:hover,.opt:focus-visible,.opt.hl{border-color:var(--ink);border-left-color:var(--c,var(--cand));outline:none}
.opt.sel{border-color:var(--ink);border-left-color:var(--c,var(--cand));margin-bottom:0;border-radius:8px 8px 0 0}
.confirm{display:flex;gap:8px;margin:0 0 8px;padding:8px 10px;background:var(--card);border:1px solid var(--ink);border-top:0;border-left:4px solid var(--c,var(--cand));border-radius:0 0 8px 8px}
.confirm .btn{flex:1}
.confirm{flex-wrap:wrap}.confirm .prof{flex-basis:100%;margin-top:0}
/* height profile: the walk's heights, with dashed lines where you pass a stop; the label shows where the pointer is */
.prof{position:relative;height:76px;margin:8px 0 2px;touch-action:pan-y;cursor:crosshair;-webkit-user-select:none;user-select:none}
.prof .plot{position:absolute;left:50px;right:0;top:0;height:60px}
.prof svg{display:block;width:100%;height:100%;overflow:visible}
.prof .area{fill:color-mix(in srgb,var(--ink) 13%,transparent)}
.prof .ln{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.prof .st{stroke:var(--mute);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.prof span{position:absolute;font-size:11px;line-height:1;color:var(--mute);pointer-events:none;white-space:nowrap}
.prof .hi,.prof .lo{left:0;width:44px;text-align:right}
.prof .hi{top:0}.prof .lo{top:50px}
.prof .k0{top:64px;left:50px}.prof .kmx{top:64px;right:0}
.prof .cur{top:0;height:60px;border-left:2px solid var(--route)}
.prof .dn{top:1px;transform:translateX(-50%);font-weight:600;color:var(--ink);background:var(--bg);border-radius:3px;padding:1px 4px}
.tripprof{margin-top:10px}.tripprof>span{font-size:13px}.tripprof .prof{margin-top:4px}
.prof .read{top:64px;left:calc(25px + 50%);transform:translateX(-50%);color:var(--ink);font-weight:600}
.hint{margin:-4px 0 8px;font-size:13px}
.opt .n{font-weight:600}
.opt .t{font-weight:700;font-size:17px;text-align:right}
.opt .t.est{color:var(--mute);font-weight:600}   /* estimated until the walk is routed */
.opt .m{grid-column:1/-1;color:var(--mute);font-size:13px}
.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:4px;color:var(--mute)}
.sum{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:600}
.trips summary{font-weight:600;cursor:pointer;padding:6px 0}
.mapsheet .sgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:8px 0 4px}
.setting{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}
.setting select{flex:1;min-width:0;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit}
.day{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 10px;margin-top:8px}
.dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font-family:inherit;cursor:pointer}
.dh span{color:var(--mute)}
.dh .dt{color:var(--ink)}   /* the day's totals stand out (the owner asked); the walks of its stops stay grey */
/* a small map picture, not the words (they took a line of their own on phones; the owner asked); the words for screen readers */
.dh .show{margin-left:auto;align-self:center;display:grid;place-items:center;width:30px;height:26px;border:1px solid var(--line);border-radius:6px;color:var(--mute)}
.dh .show .ic{width:17px;height:17px}
.dh .wx,.day.rest .wx{flex-basis:100%;display:block;font-size:13px;color:var(--ink)}
.dh .sun{flex-basis:100%;display:block;font-size:13px}
.dh:focus-visible{outline:2px solid var(--route);outline-offset:4px;border-radius:4px}
.day.sel{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--ink)}
.day.sel .dh .show{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.day ul{list-style:none;margin:4px 0 0;padding:0}
.day li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:4px 0;border-top:1px solid var(--line);font-size:14px}
.day li.from{color:var(--mute);border-top:0}
.day li:last-child{padding-bottom:0}
.stay{margin-left:auto;display:flex;gap:4px;align-items:center}
.nights{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;padding:5px 8px;min-height:32px}
.day.rest{padding:6px 10px;font-size:14px;border-style:dashed}
.setting input{flex:1;min-width:0;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit}
#panel section > .setting{margin:4px 0 8px}
.sleeps-h{font-size:15px;margin:16px 0 0}
.sleeps{list-style:none;margin:6px 0 0;padding:0;font-size:14px}
.sleeps li{display:flex;gap:10px;padding:4px 0;border-top:1px solid var(--line);align-items:baseline}
.sleeps li > span:last-child{flex:1;min-width:0;overflow-wrap:anywhere}
.sleeps .when{flex:0 0 6.5em;font-weight:600}
.night{border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:999px;padding:5px 12px;font-size:13px;min-height:32px;cursor:pointer}
.night[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.night:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.mix{display:flex;width:100%;height:6px;border-radius:3px;overflow:hidden;margin:6px 0 2px;background:#b8c4c8}
.mix i{display:block;height:100%}
.mixt{display:block;font-size:13px;line-height:1.4;color:var(--mute)}
/* the bar on a line of its own; the difficulty and the stop's links share the line under it where they fit */
.day li .mix{flex-basis:100%;order:9;margin-top:4px}
.day li .mixt{order:10;flex:1 1 auto;margin-right:8px}
.pop .mixt{color:#5d6f76}
.link{display:grid;gap:4px;font-size:13px;color:var(--mute)}
.link input,.link textarea{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:12px ui-monospace,Consolas,monospace;box-sizing:border-box}
/* small text buttons and links, but at least 32 px tall to tap on a phone (outdoors, with cold fingers) */
.lnk{background:none;border:0;padding:8px 2px;min-height:32px;color:var(--mute);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lnk:hover,.lnk:focus-visible{color:var(--ink)}
.edit{order:11;margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 12px}.edit[hidden]{display:none}
/* a stop's own buttons on the line of its stay: Other ways, the bin, Edit */
.acts{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 12px}.acts .stay{margin-left:0}
.lnk.bin{text-decoration:none;color:#b02a37;display:inline-grid;place-items:center}.lnk.bin .ic{width:17px;height:17px}
/* other ways on the map: a label on each line, tapped to take that way */
.waylbl span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;background:#fff;border:2px solid var(--c);border-radius:12px;padding:2px 9px;font:600 12px/1.4 system-ui,sans-serif;color:#14262e;box-shadow:0 1px 4px #0003;cursor:pointer}
.waylbl.use span{background:var(--c);color:#fff}
.day li .mixt+.edit,.day li .edit{flex:0 1 auto}
.further{width:100%;margin-top:4px}
.sleeps .ct{display:flex;flex-wrap:wrap;gap:0 14px;font-size:13px;color:var(--mute)}
.sleeps .ct:empty{display:none}
.sleeps .ct .book{font-weight:600;color:var(--ink)}
.sleeps .ct a{display:inline-block;padding:8px 0}
/* booked or not, and a note, per stay: small, on the line of the hut's links */
.sleeps .bkd{display:inline-flex;align-items:center;gap:4px;padding:8px 0;cursor:pointer}
.sleeps .bkd input{width:16px;height:16px;margin:0;accent-color:#2b8a3e}
.sleeps .bkd.on{color:#2b8a3e;font-weight:600}
.sleeps .addnote{font-size:13px;min-height:0;padding:8px 0}
.sleeps .notet{display:block;width:100%;text-align:left;background:none;border:0;padding:0 0 4px;color:var(--mute);font:inherit;font-size:13px;font-style:italic;cursor:pointer}
.sleeps .notet::after{content:" ✎";font-style:normal}
.sleeps .note{display:block;width:100%;margin:2px 0 6px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;font-size:13px}
/* move a stop one earlier or later */
.lnk.arrow{text-decoration:none;font-size:16px;min-width:32px;color:var(--ink)}
.trips{margin-top:16px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 10px}
.trips .setting{margin:8px 0}
.trip{display:flex;align-items:center;gap:6px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.trip > span{flex:1;min-width:0;overflow-wrap:anywhere}
.trip .btn{padding:5px 10px;font-size:13px}
.trips .delall{display:block;margin:8px 0 0 auto;padding:5px 10px;font-size:13px}
.btn.ghost.danger{color:var(--route);border-color:color-mix(in srgb,var(--route) 45%,transparent)}
.tag.warn{color:var(--warn);border-color:#e8a900}
ol{margin:6px 0 0;padding-left:22px}li{margin:4px 0}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row.minor{gap:0 18px;margin-top:-6px}
.btn{background:var(--btn);color:var(--btnt);border:0;border-radius:8px;padding:9px 13px;font-weight:600;font-size:14px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.note{font-size:13px;color:var(--mute);border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.sac{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
.legend{background:#fff;color:#14262e;padding:6px 10px;border-radius:6px;font:12px/1.6 system-ui,sans-serif;box-shadow:0 1px 5px #0004}
.legend i{display:inline-block;width:20px;height:4px;border-radius:2px;margin-right:7px;vertical-align:middle}
.legend .mute{color:#5d6f76;font-size:11px}
.legend .lg span{display:block}.legend em{font-style:normal}
.legend a{color:#1f5fbf}.legend.winter .mute{margin-top:2px}
.legend .kt{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-weight:700;color:inherit;cursor:pointer}
.legend .kt::after{content:" ▾";color:#5d6f76}.legend.folded .kt::after{content:" ▸"}
.legend.folded .lg,.legend.folded .mute,.legend.folded .ktick{display:none!important}
/* the hiking trails' key: its tick box for the difficulty colours, on a line of its own */
.legend .ktick{display:flex;align-items:center;gap:6px;margin:2px 0;cursor:pointer}
.legend .ktick input{margin:0;width:15px;height:15px}
@media (max-width:760px){.legend{padding:4px 8px;line-height:1.5}.legend .lg{display:grid;grid-template-columns:repeat(4,auto);gap:0 8px}.legend em,.legend .mute{display:none}.legend.winter .mute{display:block}.legend.winter .lg{grid-template-columns:repeat(2,auto)}.legend.winter .lg span{white-space:nowrap}.legend i{width:14px;margin-right:4px}}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.dot.line{width:14px;height:4px;border-radius:2px;vertical-align:2px}

.pop{min-width:190px;font:14px/1.4 system-ui,sans-serif}
.pop b{font-size:15px}
.pop .mute{color:#5d6f76}
.pop .btn{margin-top:8px;background:#14262e;color:#fff}
.pop a{color:#1f5fbf}
.pop .links{display:flex;flex-wrap:wrap;gap:0 12px;margin:2px 0 4px;font-size:13px}
.pop .links a{display:inline-block;padding:5px 0}
.pop .links+br{display:none}   /* no empty line between the links and the walk (the owner found the popup too airy) */
.pop .small{display:block;font-size:12px;margin-top:6px;line-height:1.35}
#panel p.small{font-size:13px;margin:6px 0}
.qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 8px;text-align:center}.qr svg{width:var(--qr,220px);height:auto;max-width:100%;border-radius:6px}
.qr button{background:none;border:0;padding:0;cursor:zoom-in;max-width:100%}
.qrbig{position:fixed;inset:0;z-index:3000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:zoom-out}
.qrbig svg{width:min(92vw,85vh);height:auto}.qrbig p{margin:0;color:#5d6f76;font:14px system-ui,sans-serif}

/* a place's details at the top of the panel on a phone, instead of a popup over the small map (showPop) */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 44px 12px 14px}
.card .x{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--mute);font-size:24px;line-height:1;cursor:pointer}
.card .x:focus-visible{outline:2px solid var(--route)}
.pop .more{padding:4px 0;min-height:0;text-align:left}
/* a line, not a flex row: Leaflet sizes a popup by its content without wrapping, and a flex row's items would wrap */
.pop .popact{margin-top:8px}
.pop .popact>*{display:inline-block;vertical-align:middle;margin:2px 12px 0 0}
.pop .popact>:last-child{margin-right:0}
/* on a phone the popup's edges a little narrower (Leaflet's are 13 px and 20–24 px); the right one keeps room for × */
@media (max-width:760px),(max-height:500px) and (orientation:landscape){.leaflet-popup-content{margin:10px 22px 11px 15px}}
.pop .mix{margin-bottom:0}
.card .pop{min-width:0;font-size:15px}.card .pop .mute,.card .pop .mixt{color:var(--mute)}.card .pop .btn{background:var(--btn);color:var(--btnt)}
/* the line between map and panel, to drag sideways for a wider or narrower panel (on a phone: up and down, below) */
#grab{display:grid;place-items:center;width:9px;padding:0;border:0;border-left:1px solid var(--line);background:var(--bg);cursor:col-resize;touch-action:none}
#grab::before{content:"";width:4px;height:36px;border-radius:2px;background:var(--mute);opacity:.35}
#grab:hover::before,#grab:active::before{opacity:.8}
#grab:focus-visible{outline:2px solid var(--route);outline-offset:-2px}
@media (max-width:760px){
 body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}
 #top{min-width:0;flex-wrap:nowrap;gap:8px 14px;padding:8px 12px}
 #grab{display:grid;place-items:center;width:100%;height:24px;padding:0;border:0;border-top:1px solid var(--line);background:var(--bg);cursor:ns-resize;touch-action:none}
 #grab::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--mute);opacity:.55}
 #grab:focus-visible{outline:2px solid var(--route);outline-offset:-3px}
 #panel{max-height:var(--sheet,44dvh);border-left:0;--padt:4px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0))}
 #search{flex:1 1 0;max-width:none}
 #results{left:8px;right:8px}
 h1{font-size:19px}
 h1 .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .logo{width:32px;height:32px}
}
/* a phone on its side: the panel beside the map, as on a laptop, and the top bar on one line, so the map is not a strip */
@media (max-height:500px) and (orientation:landscape){
 body{grid-template-columns:minmax(0,1fr) min(340px,45vw);grid-template-rows:auto minmax(0,1fr)}
 #top{flex-wrap:nowrap;padding:4px 8px;gap:8px;border-left:1px solid var(--line)}
 h1{display:none}
 #search{flex:1 1 0;max-width:none}
 #results{left:8px;right:8px}
 #grab{display:none}
 #panel{max-height:none;border-left:1px solid var(--line);--padt:10px}
 /* the credits on one line beside the scale, within the map (a tap shows them in full) */
 .leaflet-control-attribution{max-width:calc(100vw - min(340px,45vw) - 135px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
 .leaflet-control-attribution.open{white-space:normal;max-width:none}
}
body.maponly #grab{display:none}
/* A larger screen and a phone on its side: the map reaches the top of the window, and the bar (the name and the search)
   is the top of the plan's column (the owner's idea: the bar's row above the map was mostly empty) */
@media (min-width:761px),(max-height:500px) and (orientation:landscape){
 #top{grid-column:-2;grid-row:1}
 #mapwrap{grid-column:1;grid-row:1 / span 2}
 #grab{grid-column:2;grid-row:1 / span 2}
 #panel{grid-column:-2;grid-row:2}
 body.maponly #mapwrap{grid-column:1;grid-row:1}
}

/* for screen readers only: short messages about what changed (say in app.js) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#panel:focus{outline:none}
/* on touch screens, controls big enough to tap (Leaflet's map buttons are 30 px, dropdowns and small links less) */
@media (pointer:coarse){
 .leaflet-touch .leaflet-bar a,.leaflet-touch .mapbtn{width:40px;height:40px;line-height:40px}
 .setting select,.setting input:not([type=checkbox]),.nights,.night,.sleeps .note{min-height:40px}
 .sleeps .bkd input{width:20px;height:20px}
 .lnk{min-height:40px;padding:10px 6px}
 .dh{padding:6px 0}
 .chip{min-height:38px}
 .btn{min-height:40px}
 #results button{padding:10px 12px}
}

/* a touch phone zooms with two fingers: no + and − buttons covering the map */
@media (pointer:coarse) and (max-width:760px),(pointer:coarse) and (max-height:500px){.leaflet-control-zoom{display:none}}
/* dark mode: the map a little dimmer, so it does not glare in a hut at night (markers, lines and names stay bright) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leaflet-tile-pane{filter:brightness(.82) contrast(1.06)}}
:root[data-theme="dark"] .leaflet-tile-pane{filter:brightness(.82) contrast(1.06)}
.leaflet-control-layers{display:none}
.mapsheet .lstyle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.mapsheet .lstyle .mute{flex-basis:100%;font-size:13px}
.mapsheet .lstyle button{border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:8px;padding:7px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:38px}
.mapsheet .lstyle button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mapsheet .ltop{display:flex;justify-content:space-between;align-items:center}
.mapsheet .x{width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--mute);font-size:24px;line-height:1;cursor:pointer}
.mapsheet h4{margin:8px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mapsheet .lgrid{display:flex;flex-wrap:wrap;align-items:center;gap:6px}   /* a taller button does not stretch the others */
.mapsheet .chip{min-height:38px}
/* other ways between two stops: the list under the stop, each with the colour of its line on the map */
.ways{flex-basis:100%;order:12;margin:6px 0 2px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.way{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;width:100%;text-align:left;padding:7px 9px;margin:0 0 6px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.way .sw{width:16px;height:5px;border-radius:3px;background:var(--c);flex:none}
.way b{font-weight:600}
.way>span:last-child{color:var(--mute)}
.way.on{border-color:var(--c);box-shadow:inset 4px 0 0 var(--c)}
.ways .prof{margin-top:4px}
.ways .row{margin-top:6px}
/* the GPX track opened: a note at the top of the panel, with the dashes it has on the map */
.gpxnote{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--mute)}
.gpxnote .dash{flex:none;width:22px;height:0;border-top:3px dashed #5f3dc4}
.gpxnote span:nth-child(2){flex:1}
/* a message that stays: its text, an Undo when there is one, and × to close it */
#status.sticky{display:flex;align-items:center;gap:4px 10px;padding:3px 4px 3px 14px;text-align:left}
#status button{flex:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:4px 6px;border-radius:8px}
#status .act{color:var(--route);text-decoration:underline;text-underline-offset:2px}
#status .x{font-size:18px;line-height:1;color:var(--mute);min-width:28px}
@media (pointer:coarse){#status button{min-height:36px}#status .x{min-width:36px}}
/* what a grade means: a small card beside the badge that was tapped */
.sac[data-sac]{cursor:pointer}
#tip{position:fixed;z-index:1500;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px #0003;padding:10px 12px;font-size:14px;line-height:1.4}
#tip .sac{margin:0 4px 0 0}
#tip p{margin:6px 0 0}
#tip p.mute{font-size:12px}
/* the examples on the start text */
.examples{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.examples p{margin:0 0 8px}
.examples .row{display:flex;flex-wrap:wrap;gap:8px}
/* the trip's name with "My trips" (the switcher), and the two tabs, which stay at the top while the panel scrolls */
.tripsbox{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.tripsbox .row.minor{margin:2px 0 0}
.savetrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.savetrip .setting{flex:1 1 280px;min-width:0}   /* the field its full width on a narrow plan, Save under it */
.savetrip .btn{margin-left:auto}
.lnk.danger{color:var(--route)}
/* the next stop after the last day: a short line (the options are on the map), its list unfolds on request */
.nextbox{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:8px}
.nxhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.nxhead h2{margin:0;font-size:16px}
.nxhead .lnk{margin-left:auto}
.nextbox .nxhead+*{margin-top:8px}
.nextbox .row.minor{margin-top:0}
#panel .nextbox .row.minor .lnk,#panel .nxhead .lnk{min-height:0;padding:4px 0}
.nextbox{padding:6px 10px}
/* Layers and Settings: two buttons at the top right of the map, each opening its panel over the map, beside them (the
   map's own layers button is hidden: its choices are in Layers). The panels may reach below a phone's short map. */
.mapbtns{display:flex;flex-direction:column}
.mapbtns .mapbtn{position:relative;border:0;border-radius:0}
.mapbtns .mapbtn:first-child{border-radius:4px 4px 0 0}
.mapbtns .mapbtn:last-child{border-radius:0 0 4px 4px;border-top:1px solid #ccc}
.mapbtns .mapbtn:hover{background:#f4f4f4}
.mapbtns .mapbtn[aria-expanded="true"]{background:#14262e;color:#fff}
.mapbtns .mapbtn:focus-visible{outline:2px solid var(--route);outline-offset:-2px}
.lyr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.lyr .n{position:absolute;top:-6px;right:-7px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#14262e;color:#fff;font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 0 2px #fff}
.lyr .n:empty{display:none}
#gear svg{width:20px;height:20px}
#gear circle[fill]{fill:#fff}#gear:hover circle[fill]{fill:#f4f4f4}#gear[aria-expanded="true"] circle[fill]{fill:#14262e}
.mapsheet{position:absolute;top:10px;right:54px;z-index:1001;width:min(400px,calc(100% - 64px));max-height:calc(100dvh - 20px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #0004;padding:10px 14px 14px}
.mapsheet .now{margin:2px 0 0;font-size:13px}
@media (pointer:coarse){.mapsheet{right:60px;width:min(400px,calc(100% - 70px))}}
/* a layer button with examples beside it, on a row of its own */
.mapsheet .lhint{flex-wrap:nowrap;margin-top:6px}
.mapsheet .lhint .chip{flex:none}
.mapsheet .lhint .mute{font-size:13px;line-height:1.3}
/* an upright phone: the map starts under the bar, and its panels may reach down over the plan */
@media (max-width:760px){.mapsheet{max-height:calc(100dvh - 75px)}}
/* the bar keeps the name and the search; the name steps aside when the plan's column is narrow */
@container (max-width:319px){h1 .name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Frosted glass (the owner chose it over solid and over a see-through slider): the popup, the map's buttons, the scale,
   the credits, the status message and the panels over the map let the map show through a little; the soft blur keeps
   their text readable over the map's own lettering. Each group of buttons is one blurred area, not every button (each
   blurred area is redrawn while the map moves). Without color-mix the solid colour before it stays. */
:root{--glass:85%}
.leaflet-bar,.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-control-scale-line,.leaflet-container .leaflet-control-attribution{background:#fff;background:color-mix(in srgb,#fff var(--glass),transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.leaflet-bar a,.leaflet-bar .mapbtn{background-color:transparent}
#status,.mapsheet{background:var(--card);background:color-mix(in srgb,var(--card) var(--glass),transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* getting there and away (nearest station), on the way (water, shops, huts) and the GPX box */
/* one line each, not the height of a tap button (on phones every .lnk is 40 px tall: too much white, the owner found) */
.reach{display:flex;gap:6px;align-items:baseline;margin:0;font-size:14px;line-height:1.35}
.reach .ic{width:15px;height:15px;flex:none;color:#6b3fa0;transform:translateY(2px)}
#panel .reach .lnk{font-weight:600;min-height:0;padding:2px 0}
#panel .lnk.onway{display:block;text-align:left;font-size:13px;color:var(--mute);margin:0;padding:3px 0;min-height:0;text-decoration:none}
.lnk.onway::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#1587c9;margin-right:6px;vertical-align:1px}
.lnk.onway.dry{color:var(--warn)}
.lnk.onway.dry::before{background:var(--warn)}
/* possible water and unstaffed shelters: grey, after the day's line, with an ⓘ that explains */
#panel .onway.maybe{font-size:13px;color:var(--mute);margin:0;padding:0 0 3px 13px}
#panel .onway.maybe .info{min-height:0;padding:0 4px;text-decoration:none;font-size:13px}
/* the hut season: a line at the top of the plan */
#panel .season{font-size:13px;margin:6px 0;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--mute) 10%,transparent)}
#panel .season.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
/* a spring on the map: hollow, as it is less sure than a tap or fountain */
.pin.maybe span{background:#fff;color:var(--c);border-color:var(--c)}
.gpxbox{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.gpxbox p{margin:0 0 6px}
.gpxbox .row{margin-bottom:6px}
.howto{margin:4px 0 0;padding-left:18px}
.howto li{margin:2px 0}
/* the printed trip (printTrip): only #printout on paper, a page for each day */
#printout{display:none}
@media print{
 @page{margin:14mm 12mm}
 html,body{height:auto!important;overflow:visible!important;display:block!important;background:#fff!important;color:#000}
 body>*:not(#printout){display:none!important}
 #printout{display:block;font:10.5pt/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#000;--mute:#555;--line:#bbb;--route:#c8202f}
 #printout h1{font-size:20pt;margin:0 0 4px}
 #printout h2{font-size:14pt;margin:0 0 4px}
 #printout p{margin:2px 0}
 .phead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}
 .pqr{width:34mm;text-align:center;font-size:8pt;color:#555}
 .pqr svg{width:34mm;height:34mm;display:block}
 .pm{color:#555}
 #printout table{width:100%;border-collapse:collapse;margin:8px 0}
 #printout td,#printout th{border-bottom:1px solid #ccc;padding:4px 6px;text-align:left;vertical-align:top}
 #printout th{font-size:9pt;color:#555;font-weight:600}
 .pw td:not(:first-child),.pw th:not(:first-child){text-align:right;white-space:nowrap}
 .pov td:nth-child(n+3){text-align:right;white-space:nowrap}
 .pday{break-before:page}
 .psleep{border:1px solid #bbb;border-radius:6px;padding:6px 8px;margin-top:6px;break-inside:avoid}
 .pfoot{margin-top:14px!important;font-size:8.5pt;color:#555}
 #printout .prof{print-color-adjust:exact;-webkit-print-color-adjust:exact;margin:6px 0;break-inside:avoid}
 #printout .prof .cur,#printout .prof .read{display:none}
}