/* Site pieces the design prototype doesn't define, in its language. The design itself is piste.css (lifted
   verbatim from design/prototype/piste.html: tokens, top bar, cards, bands, strip, legs, stops, …) and
   art.js draws its mountains; this file only adds what real pages need on top. */
a{color:var(--glacier)}
a.btn{text-decoration:none;display:inline-block}
.btn.big{font-size:.95rem;padding:.5rem 1rem}
main.wrap>h2{font-size:1.6rem;margin:.6rem 0 -.4rem}
.brand a{color:inherit;text-decoration:none}
.label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.label a{color:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1rem}
.card{display:flex;flex-direction:column;gap:.6rem}
.card h3{font-size:1.3rem;display:flex;align-items:center;gap:.4rem}
.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{text-decoration:underline}
.stats{display:flex;gap:1.1rem;font-family:var(--dh);font-weight:600;font-size:1.15rem;font-variant-numeric:tabular-nums}
.stats small{display:block;font:600 .68rem/1.4 var(--bd);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.muted{margin:0}
.camp{border-top:1px dashed var(--line);padding-top:.6rem}
.camp strong{display:block}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip.good{background:var(--pine-soft);border-color:transparent;color:var(--pine)}
.chip.bad{background:var(--piste-soft);border-color:transparent;color:var(--piste)}
.chip.warn{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.prov{font-size:.76rem;margin:auto 0 0}
.prov.from{color:var(--glacier)}
.prov.example{color:var(--amber);background:var(--amber-soft);padding:.25rem .5rem;border-radius:4px}
.banner{background:var(--amber-soft);color:var(--amber);border-radius:6px;padding:.55rem .9rem;margin:0;font-size:.88rem}
/* a fact sheet: label, value with its source */
dl.sheet{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.3rem 1rem;margin:0;font-size:.9rem}
dl.sheet dt{color:var(--ink2)}
dl.sheet dd{margin:0;overflow-wrap:anywhere}
footer.foot{border-top:1px solid var(--line);padding:1.2rem 1rem 2.5rem;color:var(--ink2);font-size:.8rem}
footer.foot div{max-width:1180px;margin:0 auto}
/* forms (claim, partners portal, requests, account) */
.form dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:.6rem 1rem;margin:0}
.form dt{color:var(--ink2);padding-top:.4rem}
.form input,.form textarea,.form select{width:100%;padding:.45rem .6rem;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.form textarea{min-height:90px}
.notice{background:var(--glacier-soft);border-radius:6px;padding:.55rem .9rem}
table.list{width:100%;border-collapse:collapse;font-size:.9rem}
table.list th,table.list td{text-align:left;padding:.5rem;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:600px){.form dl{grid-template-columns:1fr}.form dt{padding-top:0}}
/* top bar: the van chip and account next to the steps */
.top .van{text-decoration:none}
.top .profbtn{text-decoration:none;color:var(--ink)}
.steps a.off{opacity:.45;pointer-events:none}
/* your van: fit lines, van bar, van list */
.fit{font-size:.84rem;margin:0}.fit.no{color:var(--piste)}.fit.check{color:var(--amber)}.fit.fits{color:var(--pine)}.fit.unknown{color:var(--ink2)}
.vanbar{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem;margin:0;font-size:.9rem;box-shadow:var(--shadow)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--glacier);text-decoration:underline;cursor:pointer}
form.inline{display:inline}
ul.vans{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
/* resort cards on the live Choose (home) */
.dest h2 a{color:inherit;text-decoration:none}
.dest .band svg{display:block}
.ev a{color:inherit}
.band.big .cap .label{margin:0 0 .2rem}
/* the brief: radio groups drawn as the design's segmented buttons */
.seg .segopt{position:relative;margin:0}
.seg .segopt input{position:absolute;opacity:0;pointer-events:none}
.seg .segopt span{display:block;padding:.4rem .8rem;font-family:var(--dh);font-size:1.02rem;font-weight:600;color:var(--ink2);cursor:pointer}
.seg .segopt input:checked+span{background:var(--ink);color:var(--snow)}
.seg .segopt input:focus-visible+span{outline:2px solid var(--glacier);outline-offset:-2px}
.dark{color:var(--piste);font-weight:600}
.seg a.segopt{text-decoration:none}.seg .segopt span.on{background:var(--ink);color:var(--snow)}
/* the map step: along-the-way list, layer chips */
ol.along{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.86rem}
ol.along li{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem;align-items:center}
ol.along .t{font-family:var(--dh);font-weight:600;color:var(--ink2)}
.pl .chip[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
.pl button.chip{cursor:pointer}
/* profile: travellers list, level picker */
.trav{display:flex;flex-direction:column;gap:.5rem}
.trav .tr{display:grid;grid-template-columns:auto auto 1fr auto;gap:.5rem;align-items:center;padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--snow)}
.trav .tick{padding:0}
.levels{display:flex;flex-direction:column;gap:.3rem}
.lvl{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.9rem}
.lvl small{color:var(--ink2)}
.lvl input{accent-color:var(--glacier)}
label.chip{cursor:pointer}
label.chip input{accent-color:var(--glacier);margin:0 .2rem 0 0}
.fitrow a{color:var(--glacier)}
/* around the resort */
.aroundnav{display:flex;flex-wrap:wrap;gap:.4rem}
.aroundnav .chip{text-decoration:none;color:var(--ink)}
.aroundnav .chip b{margin-left:.2rem;color:var(--ink2)}
ul.venues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ul.venues li{display:grid;grid-template-columns:1fr auto;gap:0 .6rem;padding:.3rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
ul.venues li:last-child{border-bottom:0}
ul.venues .vk{grid-column:1;font-size:.76rem;color:var(--ink2)}
ul.venues .vd{grid-row:1/3;grid-column:2;align-self:center;font-size:.95rem;color:var(--ink2)}
.card details summary{cursor:pointer;color:var(--glacier);font-size:.85rem;margin-top:.3rem}
/* where do you want to ski? */
.find .row{display:flex;gap:.5rem;align-items:center}
.find input{flex:1;padding:.55rem .75rem;font:inherit;font-size:1rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);min-width:0}
/* around the resort: one list, filter chips, distance bands, numbers that match the map pins */
.around .vfil .vchip b{font-weight:600;opacity:.7;margin-left:.15rem}
.around .utils{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:0 0 .5rem;padding:.45rem .6rem;background:var(--sky1);border-radius:6px;font-size:.82rem;color:var(--ink2)}
.around .utils b{color:var(--ink);font-weight:600}
.around .aband{margin-top:.7rem}
.around .aband h4{font-family:var(--dh);font-size:.9rem;margin:0 0 .4rem;display:flex;gap:.4rem;align-items:baseline}
.around .vlist{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.45rem}
.around .vi{padding:.45rem .55rem;align-items:start}
.around .vi[hidden],.around .aband[hidden],.around .utils[hidden]{display:none}
.around .vt b{font-size:.9rem;line-height:1.25}
.around .vt a{color:inherit}
.around .amore{margin-top:.45rem;font-size:.8rem}
.pill{display:inline-block;font-size:.7rem;padding:.05rem .4rem;border-radius:999px;color:var(--ink2);white-space:nowrap}
.around .aband[data-band="deals"] h4{color:var(--piste)}
.around .vi.deal{border-color:var(--piste);box-shadow:inset 3px 0 0 var(--piste)}
.find .countries{margin:.55rem 0 .6rem}
.find .countries .vchip{text-decoration:none;color:inherit}
.find .countries .vchip[aria-pressed="true"]{color:var(--snow)}
.find .countries b{font-weight:600;opacity:.7;margin-left:.15rem}
/* resort conditions: base, mid-mountain and top now, the freezing level, 7 days, usual conditions */
.cond .lvls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.cond .lvl{border:1px solid var(--line);border-radius:6px;padding:.6rem .7rem;background:var(--snow)}
.cond .lh2{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--dh)}
.cond .lh2 span{font-size:.8rem;color:var(--ink2)}
.cond .big{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .1rem}
.cond .big .num{font-family:var(--dh);font-size:2rem;font-weight:700;line-height:1}
.cond .ci{width:34px;height:34px}
.cond .cw{font-size:.84rem;color:var(--ink2);min-height:1.2em}
.cond dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;margin:.45rem 0 0;font-size:.8rem}
.cond dt{color:var(--ink2)}.cond dd{margin:0;text-align:right}
.cond .frz{margin:.6rem 0 0;font-size:.85rem;padding:.4rem .6rem;background:var(--sky1);border-radius:6px}
.cond .wk-wrap{overflow-x:auto;margin-top:.7rem}
.cond .wk{border-collapse:collapse;width:100%;min-width:560px;font-size:.8rem}
.cond .wk th,.cond .wk td{padding:.3rem .35rem;text-align:center;border-bottom:1px solid var(--line)}
.cond .wk thead th{font-family:var(--dh);font-weight:600}
.cond .wk th span,.cond .wk td span{display:block;font-size:.7rem;color:var(--ink2);font-weight:400}
.cond .wk tbody th{text-align:left;white-space:nowrap;font-weight:600}
.cond .wk .icons .ci{width:24px;height:24px}
.cond .wk .hi{color:var(--piste)}.cond .wk .lo{color:var(--glacier)}
.cond .wk .sn td{color:var(--glacier);font-weight:600}
.cond .wk .windy{color:var(--amber, #b26b00);font-weight:600}
.cond .typ{margin-top:.9rem}
.cond .typ h4{font-family:var(--dh);margin:0}
.cond .typ .vfil{margin:.4rem 0}
/* places to stay: price headline and facility chips (cards on the resort page, the stay page, Arrive) */
.stayhead{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-start;margin:.2rem 0 .5rem}
.sprice{display:flex;flex-direction:column;min-width:11rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:6px;background:var(--snow)}
.sprice .lbl{font-size:.72rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.sprice b{font-family:var(--dh);font-size:1.05rem;line-height:1.3}
.sprice b.muted{color:var(--ink2);font-weight:500}
.sprice .inc{font-size:.76rem;color:var(--ink2);margin-top:.15rem;max-width:22rem}
.fchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;flex:1;min-width:12rem}
.fchips li{font-size:.76rem;padding:.12rem .5rem;border:1px solid var(--line);border-radius:999px;background:var(--sky1)}
.fchips li.more{background:none;color:var(--ink2)}
.staygrid .staycard h3 a{color:inherit;text-decoration:none}
.staygrid .staycard h3 a:hover{text-decoration:underline}
/* the resorts overview (/resorts/) */
.rbar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;margin:.9rem 0 .6rem}
.rbar .vfil{margin:0}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.rcard h3 a{color:inherit;text-decoration:none}.rcard h3 a:hover{text-decoration:underline}
.rfacts{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.1rem 0 .45rem}
.rfacts div{display:flex;flex-direction:column}.rfacts span{font-size:.72rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.rfacts b{font-family:var(--dh);font-size:1.05rem}
.rnow{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.84rem;color:var(--ink2)}
.rnow .ci{width:26px;height:26px}.rnow b{color:var(--ink)}
/* the research ride: a van to the slopes and the running commentary (/request/<id>/) */
.ride .scene{width:100%;height:auto;display:block;border-radius:6px;background:#eef5fb}
.ride-bar{height:6px;background:var(--line);border-radius:3px;margin:.6rem 0 .5rem;overflow:hidden}
.ride-bar span{display:block;height:100%;width:0;background:var(--piste);transition:width .4s}
.commentary{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;font-size:.88rem;border-top:1px solid var(--line)}
.commentary li{display:grid;grid-template-columns:4.6rem 1fr;gap:.5rem;padding:.35rem .1rem;border-bottom:1px solid var(--line);animation:line-in .35s ease-out}
.commentary time{font-family:var(--dh);color:var(--ink2);font-size:.8rem}
.commentary .k-search span{color:var(--glacier)}.commentary .k-found span{color:var(--pine);font-weight:600}
.commentary .k-check span{color:var(--ink)}.commentary .k-done span{color:var(--piste);font-weight:700}
.commentary .k-failed span{color:var(--piste)}
.ride-end{margin:.8rem 0 .2rem}
@keyframes line-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.commentary li{animation:none}}
/* avalanche danger on the conditions card (Météo-France via isobar) */
.cond .aval{margin-top:.7rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--snow)}
.cond .avt{font-size:.88rem;margin-bottom:.35rem}
.cond .avrow{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.cond .avmain{display:flex;align-items:center;gap:.5rem}.cond .avmain span{display:block;font-size:.8rem;color:var(--ink2)}
.cond .avb{display:inline-flex;width:1.9rem;height:1.9rem;align-items:center;justify-content:center;font-family:var(--dh);font-weight:700;border-radius:4px;color:#14212B;border:1px solid rgba(0,0,0,.15)}
.cond .avalt{list-style:none;margin:0;padding:0;font-size:.82rem}.cond .avalt .avb{width:1.3rem;height:1.3rem;font-size:.8rem}
.cond .rose{width:54px;height:54px}
.cond .avs{font-size:.84rem;margin:.45rem 0 0}
.cond .avh{display:flex;align-items:center;gap:.5rem;margin-top:.45rem;font-size:.76rem;color:var(--ink2)}.cond .avh svg{flex:1;height:20px}
.cond .avc{font-size:.72rem;color:var(--ink2);margin:.4rem 0 0}
.cond .avp{list-style:none;margin:.45rem 0 0;padding:0;font-size:.82rem}.cond .avp li{padding:.1rem 0}
.cond .avm{margin-top:.55rem;font-size:.8rem}
.cond .avmh{color:var(--ink2);margin-bottom:.25rem}
.cond .avmr{display:grid;grid-template-columns:2.4rem 1fr 7.5rem;gap:.5rem;align-items:center;padding:.12rem 0}
.cond .avmr .mn{font-family:var(--dh);font-weight:600}
.cond .avmr .bar{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--line)}
.cond .avmr .bar i{display:block;height:100%}
.cond .avmr .hi{color:var(--ink2);text-align:right}.cond .avmr .hi b{color:var(--piste)}
.minimap{width:100%;height:220px;border-radius:6px;background:var(--sky1);overflow:hidden}
/* a point of interest's card (poi.js) */
dialog.poi{border:0;border-radius:10px;padding:0;width:min(440px,94vw);box-shadow:0 20px 50px rgba(20,33,43,.35);background:var(--panel,#fff);color:var(--ink)}
dialog.poi::backdrop{background:rgba(20,33,43,.45)}
dialog.poi article{padding:.9rem 1rem 1rem}
dialog.poi header{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;margin-bottom:.6rem}
dialog.poi h3{margin:0;font-family:var(--dh)}
dialog.poi .minimap{height:200px}
dialog.poi dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;font-size:.86rem;margin:.7rem 0}
dialog.poi dt{color:var(--ink2)}dialog.poi dd{margin:0}
.around .vi{cursor:pointer}.around .vi:hover{border-color:var(--glacier)}
/* the van that fills a wait (vanloader.js): start, warm up, drive, arrive */
.vanloader{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(#eef5fbee,#f7fafdee);transition:opacity .45s;pointer-events:none}
.vanloader.vl-out{opacity:0}
.vanloader svg{width:min(260px,70%);height:auto;overflow:visible}
.vanloader .vl-text{margin:.4rem 0 0;font-family:var(--dh);font-size:.95rem;color:var(--ink2)}
.vanloader .vl-van{transform:translate(20px,46px)}
.vanloader .vl-puffs{opacity:0}
.vanloader[data-phase="start"] .vl-puffs{animation:vl-puff 1s ease-out infinite}
.vanloader[data-phase="warm"] .vl-body{animation:vl-idle .12s linear infinite alternate}
.vanloader[data-phase="warm"] .vl-puffs{animation:vl-puff .8s ease-out infinite}
.vanloader[data-phase="drive"] .vl-dash{animation:vl-road .5s linear infinite}
.vanloader[data-phase="drive"] .vl-hills{animation:vl-hills 6s linear infinite}
.vanloader[data-phase="drive"] .vl-wheel>g{animation:vl-spin .35s linear infinite}
.vanloader[data-phase="drive"] .vl-body{animation:vl-bump .4s ease-in-out infinite alternate}
.vanloader .vl-flag{opacity:0}
.vanloader[data-phase="arrive"] .vl-flag{opacity:1;transition:opacity .3s}
.vanloader[data-phase="arrive"] .vl-van{transform:translate(118px,46px);transition:transform .8s cubic-bezier(.2,.8,.3,1)}
@keyframes vl-puff{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-14px,-8px) scale(1.3)}}
@keyframes vl-idle{from{transform:translateY(0)}to{transform:translateY(-.8px)}}
@keyframes vl-bump{from{transform:translateY(0)}to{transform:translateY(-1.4px)}}
@keyframes vl-road{from{transform:translateX(0)}to{transform:translateX(-19px)}}
@keyframes vl-hills{from{transform:translateX(0)}to{transform:translateX(-30px)}}
@keyframes vl-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion: reduce){.vanloader *{animation:none!important;transition:none!important}}
.cond .cond-body{position:relative;min-height:150px}
.fchips li{display:inline-flex;align-items:center;gap:.3rem}
.fchips .fi{width:15px;height:15px;color:var(--glacier);flex:none}
.stayhead .fchips li{padding:.18rem .55rem .18rem .4rem}
/* the weather, reworked: a card per height with its weather drawn large behind it, then the week as day cards */
.cond .wxls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}
.cond .wxl{position:relative;overflow:hidden;border-radius:10px;padding:.8rem .9rem .75rem;color:#14212B;min-height:190px;
  background:linear-gradient(160deg,#dbe9f6,#f4f8fc)}
.cond .sky-sun{background:linear-gradient(160deg,#9fd0f5,#e8f4fd)}
.cond .sky-partly{background:linear-gradient(160deg,#bcd9ef,#eef4f9)}
.cond .sky-cloud,.cond .sky-fog{background:linear-gradient(160deg,#c9d3dc,#eef1f4)}
.cond .sky-rain,.cond .sky-thunder{background:linear-gradient(160deg,#9fb0c1,#dfe6ec)}
.cond .sky-snow{background:linear-gradient(160deg,#d6e6f7,#ffffff)}
.cond .wxbg{position:absolute;right:-18px;top:-10px;width:150px;height:150px;opacity:.85;pointer-events:none}
.cond .wxh{position:relative;display:flex;gap:.5rem;align-items:baseline;font-family:var(--dh)}
.cond .wxh span{font-size:.8rem;color:#3d4b57}
.cond .wxt{position:relative;font-family:var(--dh);font-weight:700;font-size:3rem;line-height:1;margin:.35rem 0 .1rem}
.cond .wxc{position:relative;font-size:.84rem;color:#3d4b57;min-height:1.2em}
.cond .wxs{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.35rem;margin-top:.6rem}
.cond .st{background:rgba(255,255,255,.72);border-radius:6px;padding:.25rem .4rem}
.cond .st span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#5b6974}
.cond .st b{font-family:var(--dh);font-size:1rem}.cond .st small{font-size:.7rem;font-weight:400}
.cond .wxhd{font-family:var(--dh);margin:1rem 0 .45rem}
.cond .wxw{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:.5rem;overflow-x:auto;padding-bottom:.3rem}
.cond .wxd{border-radius:9px;padding:.55rem .6rem;text-align:center;font-size:.8rem}
.cond .wxd .dn{font-family:var(--dh);font-weight:600;font-size:.95rem}.cond .wxd .dn span{display:block;font-weight:400;font-size:.72rem;color:#5b6974}
.cond .wxd .di{width:48px;height:48px;margin:.25rem 0}
.cond .wxd .dt{display:flex;justify-content:center;gap:.35rem;align-items:baseline}
.cond .wxd .dt .lbl{font-size:.66rem;color:#5b6974;width:2.2rem;text-align:left}
.cond .wxd .hi{color:#b3261e}.cond .wxd .lo{color:#1f5fbf}
.cond .wxd .dsn{margin-top:.25rem;color:#5b6974}.cond .wxd .dsn.on{color:#1f5fbf;font-weight:700}
.cond .wxd .dw{color:#5b6974}.cond .wxd .dw.windy{color:#b26b00;font-weight:600}
.cond .wxd .dsun{font-size:.68rem;color:#5b6974;margin-top:.2rem}
/* the avalanche map */
.avmap-card .avm-bar{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.2rem 0 .6rem;font-size:.85rem}
.avmap-card .avm-bar input{font:inherit;padding:.25rem .4rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.avmap-card .avm-legend{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-left:auto;font-size:.76rem;color:var(--ink2)}
.avmap-card .avm-legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.25rem;vertical-align:-1px;border:1px solid rgba(0,0,0,.2)}
.avmap-card #avmap{border-radius:6px;overflow:hidden;background:var(--sky1)}
.avmap-card .avc{font-size:.74rem;color:var(--ink2);margin:.45rem 0 0}
/* the resort map: one map, a panel of layers */
.rmap .rmap-grid{display:grid;grid-template-columns:1fr 240px}
.rmap .rmap-panel{border-left:1px solid var(--line);padding:.5rem .7rem;max-height:min(70vh,620px);overflow-y:auto;font-size:.84rem;background:var(--panel,#fff)}
.rmap .rmap-panel summary{font-family:var(--dh);font-weight:600;cursor:pointer;margin-bottom:.3rem}
.rmap .ml-sec h5{margin:.55rem 0 .2rem;font-family:var(--dh);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.rmap .ml-sw{display:flex;gap:.45rem;align-items:center;padding:.18rem 0;cursor:pointer}
.rmap .ml-date{margin:.2rem 0 .35rem 1.4rem}.rmap .ml-date input{font:inherit;padding:.15rem .3rem;border:1px solid var(--line);border-radius:5px}
.rmap .ml-date small{display:block;color:var(--ink2);font-size:.7rem}
.rmap .pl{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;padding:.5rem .8rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink2)}
.rmap .pl .src{margin-left:auto}
@media (max-width:760px){.rmap .rmap-grid{grid-template-columns:1fr}.rmap .rmap-panel{border-left:0;border-top:1px solid var(--line);max-height:none}
  .rmap .rmap-panel:not([open]){padding-bottom:.4rem}}
/* resort map: 2D / 3D view switch at the top of the layer panel */
.ml-view{display:flex;gap:0;margin:0 0 10px;border:1px solid var(--line);border-radius:999px;overflow:hidden;width:max-content}
.ml-view label{cursor:pointer}
.ml-view input{position:absolute;opacity:0;pointer-events:none}
.ml-view span{display:block;padding:4px 14px;font-weight:600;font-size:.85rem}
.ml-view input:checked+span{background:var(--ink);color:var(--panel)}
.ml-view input:focus-visible+span{outline:2px solid var(--piste);outline-offset:-2px}
.maplibregl-popup-content .muted.small{display:inline-block;margin-top:2px}
/* snow depth chart (snowdepth.js) */
.sd{margin-top:18px}
.sd-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;margin:4px 0 6px}
.sd-key i,.sd-tip i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px;background:currentColor}
.sd-wrap{position:relative}
.sd-wrap svg{width:100%;height:auto;display:block;touch-action:pan-y}
.sd-grid{stroke:var(--line);stroke-width:1}
.sd-ax{fill:var(--ink2);font-size:11px}
.sd-fc{fill:var(--sky1);opacity:.6}
.sd-fck i{height:10px!important;background:var(--sky1)!important;border:1px solid var(--line)}
.sd-today{stroke:var(--ink2);stroke-dasharray:3 3}
.sd-cur{stroke:var(--ink);stroke-width:1}
.sd-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.sd-line.sd-top{stroke:var(--glacier)}.sd-top{color:var(--glacier)}
.sd-line.sd-mid{stroke:var(--piste)}.sd-mid{color:var(--piste)}
.sd-line.sd-base{stroke:var(--pine)}.sd-base{color:var(--pine)}
.sd-tip{position:absolute;top:4px;width:150px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);font-size:.8rem;pointer-events:none;display:grid;gap:2px}
/* look back (history.js) */
.lookback{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.hform{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;margin:8px 0}
.hform label{display:grid;gap:2px;font-size:.85rem}
.hwait{position:relative;min-height:140px}
.hsum{margin:10px 0;padding-left:1.1rem;font-size:.9rem}
.htab td,.htab th{white-space:nowrap}
.htab .ci{width:20px;height:20px}
.htab .big{font-weight:700;color:var(--glacier)}
.htab .windy{font-weight:700;color:var(--amber)}
.avb.sm{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;font-weight:700;font-size:.8rem;color:#111}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* resort videos (_videos.html) */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vid{display:grid;gap:4px;padding:0 0 10px;overflow:hidden;text-decoration:none;color:inherit}
.vid:hover .vtitle{text-decoration:underline}
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--sky1)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb .play{position:absolute;inset:auto auto 8px 8px;background:rgba(0,0,0,.72);color:#fff;border-radius:6px;padding:2px 10px;font-size:.9rem}
.vtitle{padding:0 10px;font-weight:600;line-height:1.3}
.vmeta{padding:0 10px;font-size:.8rem;color:var(--ink2)}
.vwhy{padding:0 10px;font-size:.85rem}
/* winter / summer switch on the resort page */
.seasonsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.seasonsw a{padding:6px 14px;font-weight:600;text-decoration:none;color:var(--ink)}
.seasonsw a[aria-current]{background:var(--ink);color:var(--panel)}
.seasonsw a:focus-visible{outline:2px solid var(--piste);outline-offset:-2px}
/* profile: tastes as tick chips (accounts/welcome.html) */
.profile .card{margin-bottom:14px}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{cursor:pointer}
.tchip input{position:absolute;opacity:0;pointer-events:none}
.tchip span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.9rem}
.tchip input:checked+span{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.tchip input:checked+span::before{content:"✓ "}
.tchip input:focus-visible+span{outline:2px solid var(--piste);outline-offset:2px}
.consents{display:grid;gap:8px}
.consents label{display:flex;gap:8px;align-items:flex-start}
.foryou{display:inline-block;margin:2px 4px 0 0;padding:1px 8px;border-radius:999px;background:var(--pine-soft);color:var(--pine);font-size:.78rem;font-weight:600}
/* resort cards: snow and rain, last and next 24 h */
.wet{display:grid;gap:2px;margin:4px 0 0}
.wet b{font-weight:600}
.wet b.snow{color:var(--glacier)}
.wet b.rain{color:var(--ink2)}
.plansat{display:block;margin-top:.35rem;font-size:.85rem;opacity:.85}
/* Choose card: the trip cost summary */
.dest .facts small{display:block;font-size:.75rem;font-weight:400;margin-top:1px}
.dest .facts.costs b{color:var(--ink)}
.staysum{margin:.5rem 0 0;font-size:.9rem}
/* the profile (accounts/profile.html) */
.profsign{margin:14px 0}
.ptrav{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.ptrav .pt{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--snow)}
.ptrav .pt.off{opacity:.6}
.plist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.ptastes{display:grid;gap:10px;margin-top:8px}
.ptastes .tchip span{cursor:default}
.pdel{margin-top:12px}
.pdel summary{cursor:pointer;color:var(--ink2);font-size:.9rem}
/* the ski area: aspect rose and figures (resort page) */
.areafig{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:14px;align-items:center;margin:10px 0 4px}
@media (max-width:560px){.areafig{grid-template-columns:1fr}.rosefig{max-width:240px;margin:0 auto}}
.rosefig{margin:0}
.rose{width:100%;height:auto;display:block}
.rose-ring{fill:none;stroke:var(--line);stroke-dasharray:2 3}
.rose-l{font-size:11px;font-weight:600;fill:var(--ink2)}
.rosefig figcaption{font-size:.75rem;color:var(--ink2);text-align:center}
/* resort map: the map type and view, on the map (top left) */
.mtype{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mtype>div{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden;box-shadow:var(--shadow)}
.mtype label{cursor:pointer;position:relative}
.mtype input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.mtype span{display:block;padding:5px 12px;font-weight:600;font-size:.8rem;white-space:nowrap}
.mtype input:checked+span{background:var(--ink);color:var(--panel)}
.mtype input:focus-visible+span{outline:2px solid var(--piste);outline-offset:-2px}
@media (max-width:480px){.mtype span{padding:4px 9px;font-size:.74rem}}
/* the layers panel fits its box: the map column may shrink, labels wrap, the panel scrolls within the map height */
.rmap .rmap-grid{grid-template-columns:minmax(0,1fr) 250px}
.rmap .rmap-panel{box-sizing:border-box;min-width:0;overflow-x:hidden}
.rmap .ml-sw{align-items:flex-start}
.rmap .ml-sw span{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.rmap .ml-sw input{flex:none;margin-top:2px}
.rmap .ml-date input{max-width:100%;box-sizing:border-box}
/* the card for anything on an overlay layer (maplayers.js infoCard) */
.ovcard{display:grid;gap:3px;font-size:.85rem}
.ovcard dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0}
.ovcard dt{color:var(--ink2)}
.ovcard dd{margin:0}
/* photos (from cairn: Wikimedia Commons and others, each with its credit) */
.poiph{margin:0 0 8px;position:relative}
.poiph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block;background:var(--sky1)}
.poiph figcaption,.phcredit{font-size:.7rem;color:var(--ink2);margin-top:2px}
.rgal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:6px;margin:12px 0}
.rgal a{position:relative;display:block;overflow:hidden;border-radius:8px;background:var(--sky1)}
.rgal a:first-child{grid-row:span 2}
.rgal img{width:100%;height:100%;object-fit:cover;display:block}
.rgal .phcredit{position:absolute;left:0;right:0;bottom:0;padding:2px 6px;background:rgba(0,0,0,.45);color:#fff;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.rgal{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.rgal a:first-child{grid-column:span 2;grid-row:span 2}}
.stayph{margin:-2px 0 8px}
.stayph img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
/* the traveller form: radios and ticks keep their own size (not the full-width text-input rule), levels as rows */
.form .lvl input,.form label.chip input,.form .segopt input,.form .tchip input,.form .consents input{width:auto;flex:none;margin:0}
.levels{display:grid;gap:6px;max-width:520px}
.lvl{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;padding:.45rem .7rem;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);text-align:left}
.lvl>span{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem;min-width:0}
.lvl>span .sign{flex:none}
.lvl small{flex-basis:100%;padding-left:1.35rem;line-height:1.25}
.lvl:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.form label.chip{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;cursor:pointer}
.form label.chip:has(input:checked){border-color:var(--ink);background:var(--snow)}
/* header: language, account */
.langsw select{font:inherit;font-size:.8rem;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);max-width:9.5rem}
.logoutf{display:inline}
.top-in{flex-wrap:wrap;gap:8px}
/* the sign-up window (core/_join.html) */
.joindlg{padding:0;border:0;border-radius:16px;max-width:min(520px,calc(100vw - 32px));width:100%;box-shadow:0 30px 80px rgba(10,20,35,.45);overflow:hidden;background:var(--panel);color:var(--ink)}
.joindlg::backdrop{background:rgba(10,20,35,.55);backdrop-filter:blur(3px)}
.joindlg[open]{animation:joinin .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes joinin{from{transform:translateY(24px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.join-x{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.85);border-radius:999px;padding:4px 10px}
.joindlg{position:fixed}
.join-art svg{display:block;width:100%;height:150px}
.join-van{animation:joindrive 7s linear infinite}
@keyframes joindrive{0%{transform:translate(-60px,118px)}100%{transform:translate(440px,112px)}}
.join.driving .join-van{animation:joingo 1.1s ease-in forwards}
@keyframes joingo{to{transform:translate(460px,100px)}}
.join-body{padding:18px 22px 22px}
.join-body h2{font:700 1.8rem/1.1 var(--dh);margin:0 0 4px}
.join-sub{margin:0 0 12px;color:var(--ink2)}
.join-perks{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:7px}
.join-perks li{padding-left:26px;position:relative;line-height:1.35}
.join-perks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--pine);
  -webkit-mask:radial-gradient(circle,#000 99%,transparent) ;box-shadow:inset 0 0 0 3px var(--pine-soft)}
.join-perks li::after{content:"✓";position:absolute;left:3px;top:0;font-size:.75rem;color:#fff;font-weight:700}
.join-form{display:flex;gap:8px;flex-wrap:wrap}
.join-form input[type=email]{flex:1 1 220px;font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.join-sent{display:grid;gap:4px;padding:12px 14px;border-radius:10px;background:var(--pine-soft);color:var(--ink)}
.join-sent[hidden]{display:none}
.join-fine{margin:12px 0 0;font-size:.8rem;color:var(--ink2)}
.joinpage{padding:32px 16px 48px}
.joincard{max-width:560px;margin:0 auto;padding:0;overflow:hidden;border-radius:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.join-van,.joindlg[open]{animation:none}}
.heldsum{margin:8px 0 12px;padding-left:1.1rem;display:grid;gap:4px}
/* the van form: winter kit */
.kith{margin:20px 0 2px;font:700 1.2rem var(--dh)}
.kitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:10px}
.kitsec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0;background:var(--snow)}
.kitsec legend{font-weight:700;padding:0 6px}
.kitrow{display:grid;gap:3px;margin:8px 0}
.kitrow label{font-size:.85rem;font-weight:600}
.kitrow select,.kitrow input{width:100%;box-sizing:border-box}
.kitnum{display:flex;align-items:center;gap:6px}.kitnum input{max-width:8rem}
.kitrow small{font-size:.75rem;line-height:1.25}
/* the Brief's suggestions */
.sugrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 6px}
.suglist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:6px 0 10px}
.sugwait{position:relative;min-height:120px;grid-column:1/-1}
.sug{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);display:grid;gap:6px}
.sug.top{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine)}
.sug.picked{background:var(--pine-soft)}
.sugh{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sugscore{margin-left:auto;font-weight:700;font-size:.85rem;padding:1px 8px;border-radius:999px;background:var(--ink);color:var(--panel)}
.sug ul{margin:0;padding-left:1.05rem;font-size:.88rem;display:grid;gap:2px}
.sugf{display:flex;justify-content:space-between;align-items:center;gap:8px}
.liked{margin:4px 0 0;padding-left:1.1rem;display:grid;gap:4px}
/* summer: the site turns from glacier blue to meadow green (resort pages in summer mode, ?season=summer) */
body.season-summer{
  --glacier:#2F7A43;--glacier-soft:#DDEFD9;--travel:#2F7A43;--pitch:#8CC08F;--food:#CFE5C9;
  --snow:#EEF5EC;--sky1:#E1F0DA;--sky2:#F5FAF2;--rock:#A9BFA0;--snowfill:#CFE6C2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.season-summer{
  --glacier:#8CCB94;--glacier-soft:#1E3A26;--travel:#8CCB94;--pitch:#3F7A4A;--food:#23402B;
  --snow:#0F1A12;--sky1:#17301E;--sky2:#0F1A12;--rock:#4E6B50;--snowfill:#2E4A33}}
:root[data-theme="dark"] body.season-summer{
  --glacier:#8CCB94;--glacier-soft:#1E3A26;--travel:#8CCB94;--pitch:#3F7A4A;--food:#23402B;
  --snow:#0F1A12;--sky1:#17301E;--sky2:#0F1A12;--rock:#4E6B50;--snowfill:#2E4A33}
body.season-summer .top{border-bottom-color:#2F7A43}
/* the van form, take two: sections in columns (no holes), each question a row, choices as buttons */
.kitgrid{display:block;columns:2 380px;column-gap:14px;margin-top:10px}
.kitsec{break-inside:avoid;display:block;width:auto;margin:0 0 14px;padding:6px 14px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.kitsec legend{font:700 1.05rem var(--dh);padding:0 6px}
.kitrow{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:4px 12px;align-items:start;margin:0;padding:8px 0;border-top:1px solid var(--line)}
.kitrow:first-of-type{border-top:0}
.kitl{font-size:.88rem;font-weight:600;padding-top:6px}
.kitc{display:grid;gap:4px;min-width:0}
.form .kitc input[type=radio],.form .kitc input[type=checkbox]{width:auto}
.seg.segwrap{display:flex;flex-wrap:wrap;border:0;gap:4px;background:none;overflow:visible}
.seg.segwrap .segopt span,.kitc .seg .segopt span{border:1px solid var(--line);border-radius:6px;font-family:var(--bd);font-size:.85rem;padding:.3rem .6rem}
.kitc .seg{border:0;gap:4px;background:none;overflow:visible;display:flex}
.kitnum{display:flex;align-items:center;gap:6px}
.form .kitnum input{width:7rem;max-width:7rem}
.kitnum small{color:var(--ink2)}
.kith2{font-size:.75rem;color:var(--ink2);line-height:1.3}
@media (max-width:520px){.kitrow{grid-template-columns:1fr}.kitl{padding-top:0}}
.kitc .tchips{gap:4px}
.kitc .tchip span{border-radius:6px;font-size:.85rem;padding:.3rem .6rem;font-weight:600;color:var(--ink2)}
.kitc .tchip input:checked+span{color:var(--snow)}
/* your van: the card (photo, size, every detail) */
.vancard{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:18px;margin-bottom:16px;align-items:start}
@media (max-width:720px){.vancard{grid-template-columns:1fr}}
.vanph{margin:0}
.vanph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:var(--sky1)}
.vanph-none{aspect-ratio:4/3;border-radius:10px;background:var(--sky1);display:grid;place-items:center;font-size:4rem}
.vanph figcaption{font-size:.72rem;color:var(--ink2);margin-top:4px}
.vaninfo h2{margin:0 0 4px;font:700 1.6rem/1.1 var(--dh)}
.vansize{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.vandet{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;margin-top:10px}
.vandet h4{margin:0 0 4px;font:700 .95rem var(--dh);text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.vandet dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:.88rem}
.vandet dt{color:var(--ink2)}
.vandet dd{margin:0;font-weight:600}
.poiart{aspect-ratio:3/1.4;border-radius:6px;display:grid;place-items:center;background:linear-gradient(160deg,var(--sky1),var(--glacier-soft))}
.poiart span{font-size:3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.poiart.k-restaurant,.poiart.k-hut,.poiart.k-apres,.poiart.k-bar,.poiart.k-cafe,.poiart.k-pub{background:linear-gradient(160deg,#f7e1e2,#f3c9cb)}
.poiart.k-campsite,.poiart.k-aire,.poiart.k-car_park,.poiart.k-farm{background:linear-gradient(160deg,var(--pine-soft),#c9e0cf)}
/* signed out: the sign-up window blocks the page (it stays visible, blurred, behind) */
.joindlg.blocker::backdrop{background:rgba(10,20,35,.6);backdrop-filter:blur(6px)}
.joindlg.blocker .join-fine::after{content:"";display:block}
/* reviews (piste/reviews.html) */
.revpage{padding:18px 16px 48px}
.revpage h1{margin:4px 0 4px;font:700 2.2rem/1.1 var(--dh)}
.revsum{display:flex;gap:10px;align-items:baseline;margin:0 0 14px}
.stars{color:#E3A008;letter-spacing:1px}
.stars.big{font:700 1.6rem var(--dh);color:var(--ink)}
.revgrid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:16px;align-items:start}
@media (max-width:820px){.revgrid{grid-template-columns:1fr}}
.revrow{display:grid;gap:4px;margin:0 0 12px}
.revl{font-weight:600;font-size:.9rem}
.revwhen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form .revwhen input[type=month]{width:auto}
.starpick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.starpick input{position:absolute;opacity:0;width:1px;height:1px}
.starpick label{font-size:2rem;line-height:1;color:var(--line);cursor:pointer;padding:0 2px}
.starpick input:checked~label,.starpick label:hover,.starpick label:hover~label{color:#E3A008}
.starpick input:focus-visible+label{outline:2px solid var(--piste);border-radius:4px}
.revlist{display:grid;gap:10px}
.rev{display:grid;gap:6px}
.revhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.revbody{margin:0;line-height:1.5}
.revph{display:flex;gap:6px;flex-wrap:wrap}
.revph img{width:110px;height:80px;object-fit:cover;border-radius:6px;display:block}
.ratechip{display:inline-flex;gap:4px;align-items:baseline;font-size:.85rem}
.ratechip b{color:#B7791F}
/* Google's photos of a place: a strip of their own, as returned (never cropped or filtered: object-fit contain) */
.gstrip{margin:0 0 8px}
.gph{display:flex;gap:6px;overflow-x:auto}
.gph img{height:110px;width:auto;border-radius:4px;flex:none;background:var(--sky1)}
.gattr{font-size:.7rem;color:var(--ink2);margin:2px 0 0}
.gdet{margin:0 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--snow)}
.gdet .gsum{margin:0 0 4px;line-height:1.4}
.gdet details{margin-top:4px}
/* the lightbox (lightbox.js) */
.rgal img,.poiph img,.gph img,.revph img,.stayph img,.vanph img{cursor:zoom-in}
.lbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;display:none}
.lbox[open]{display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
.lbox::backdrop{background:rgba(5,10,18,.92)}
.lbox figure{margin:0;display:grid;justify-items:center;gap:8px;max-height:100vh;padding:24px 0}
.lbox img{max-width:min(92vw,1600px);max-height:82vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbox figcaption{color:#dfe6ee;font-size:.85rem;text-align:center;max-width:90vw}
.lbox button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;width:44px;height:44px;font-size:1.6rem;cursor:pointer;justify-self:center}
.lbox button:hover{background:rgba(255,255,255,.25)}
.lbox .lb-x{position:fixed;top:14px;right:14px;font-size:1.1rem}
.lbox button[hidden]{visibility:hidden}
@media (max-width:600px){.lbox[open]{grid-template-columns:36px 1fr 36px}.lbox button{width:34px;height:34px}}
/* how busy (busy.js): live spaces, travellers' reports, and three buttons */
.busyrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 8px;font-size:.85rem}
.busylive b{font-size:1rem}
.busylive.stale{opacity:.6}
.busylvl{font-weight:700;padding:1px 8px;border-radius:999px;background:var(--pine-soft);color:var(--pine)}
.busylvl.filling{background:var(--amber-soft);color:var(--amber)}
.busylvl.full{background:var(--piste-soft);color:var(--piste)}
.busybtns{display:inline-flex;gap:4px;margin-left:auto}
.busybtns button{font:inherit;font-size:.75rem;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink2);cursor:pointer}
.busybtns button:hover{border-color:var(--ink);color:var(--ink)}
.cplive{margin:0 0 14px}
.cplive ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.cplive li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0}
.cplive b{color:var(--pine)}.cplive b.low{color:var(--amber)}.cplive b.full{color:var(--piste)}
.gfuel,.gev{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:6px 0;font-size:.85rem}
.gfuel .dsl b{color:var(--pine);font-size:1rem}
.grevsum{margin:6px 0;font-size:.85rem}.grevsum p{margin:2px 0}
.grevs .grev{margin:6px 0;border-top:1px solid var(--line);padding-top:4px}.grevs .grev p{margin:2px 0}
.fuellive{margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--snow)}
.fuellive h4{margin:0 0 4px;font:700 1rem var(--dh)}
.fuellive ol{margin:0;padding-left:1.2rem;display:grid;gap:2px;font-size:.88rem}
/* the place card's tabs: our details (with our map) and Google's (no map beside it, as Google's terms ask) */
.poitabs{display:flex;gap:4px;margin:0 0 8px}
.poitabs button{font:inherit;font-size:.85rem;font-weight:600;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink2);cursor:pointer}
.poitabs button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.ownph{margin:0 0 8px}
.sunrow{margin:0 0 6px;font-size:.85rem}.sunrow.good b{color:#B7791F}.sunrow.shade b{color:var(--ink2)}
.airline{margin:6px 0 0;font-size:.85rem}
/* a place's own page: its photo and Google's details, side by side */
.stayhero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin:14px 0}
@media (max-width:760px){.stayhero{grid-template-columns:1fr}}
.stayph.big img{aspect-ratio:3/2;border-radius:10px}
.stayhero .gdet{margin:0}
.ghours[open] summary{margin-bottom:4px}
.opennow{color:var(--pine)}
/* every photo box is there before its photo: a shimmer while it loads (as cairn's portal) */
.phbox{width:100%;aspect-ratio:16/9;border-radius:6px}
.poiph .phbox{aspect-ratio:3/2}
.stayph.big .phbox{aspect-ratio:3/2;border-radius:10px}
img.ph,.phbox.ph{background:rgba(127,127,127,.22);animation:ph 1.2s ease-in-out 10 alternate;color:transparent}
@keyframes ph{from{opacity:.45}to{opacity:1}}   /* opacity only: the compositor does it (a moving gradient on 150 boxes froze the page) */
@media (prefers-reduced-motion:reduce){img.ph,.phbox.ph{animation:none}}
.phbox.none{display:grid;place-items:center;background:linear-gradient(160deg,var(--sky1),var(--glacier-soft));font-size:2.4rem}
.around .vi .viph{grid-column:1/-1;margin:0}
.viph img,.viph .phbox{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;display:block}
.viph .phbox.none{font-size:1.6rem}
.viph .phcredit:empty,.stayph .phcredit:empty{display:none}
/* cards off screen aren't rendered (so their shimmer doesn't animate: 150 at once froze the page) */
.around .vi{content-visibility:auto;contain-intrinsic-size:auto 250px 230px}
.staycard{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* a place's own buttons (Call, Email, Book, Website, Menu, Directions): wrap, thumb-sized on phones */
.gacts{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.gacts .btn{min-height:44px;display:inline-flex;align-items:center}
.gmenu ul{list-style:none;margin:.2rem 0 .5rem;padding:0}
.gmenu li{display:flex;justify-content:space-between;gap:.8rem;padding:.25rem 0;border-bottom:1px dotted var(--line)}
.gmenu li>b{white-space:nowrap}
.gmenu h5{margin:.5rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.skipass{margin-top:.8rem}
.skipass h4 .meta{font-weight:400}
.skp{width:100%;border-collapse:collapse;font-size:.85rem}
.skp th,.skp td{padding:.3rem .4rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.skp .num{text-align:right;white-space:nowrap}
.skp td small{display:block}
/* phones (leeq, 2026-10-02): nothing wider than the screen; weather days as rows, not a sideways strip; the header
   scrolls away and its steps swipe in one row; maps full width under their layers (closed), with thumb-sized controls */
@media (max-width:600px){
  .bgrid{grid-template-columns:minmax(0,1fr)}
  .bgrid>*{min-width:0}
  dd{min-width:0}
  .ev,.ev a,.src a,dd a{overflow-wrap:anywhere}
  .cond .wxw{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow-x:visible;gap:.35rem}
  .cond .wxd{display:grid;grid-template-columns:4.4rem 34px minmax(0,1fr) minmax(0,1fr);column-gap:.5rem;row-gap:.1rem;align-items:center;text-align:left;padding:.45rem .6rem}
  .cond .wxd .dn{grid-row:1/3;grid-column:1}
  .cond .wxd .di{grid-row:1/3;grid-column:2;width:34px;height:34px;margin:0}
  .cond .wxd .dt{justify-content:flex-start}
  .cond .wxd .dsn{margin-top:0}
  .cond .wxd .dsun{grid-column:3/5;margin-top:0}
  header.top{position:static}
  .top nav.steps{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .top nav.steps::-webkit-scrollbar{display:none}
  .top nav.steps>*{flex:none}
  .top nav.steps a{padding-top:.6rem;padding-bottom:.6rem}
}
@media (max-width:760px){
  .rmap .rmap-grid{grid-template-columns:minmax(0,1fr)}
  .rmap .rmap-grid>div:first-child{height:min(62vh,480px)!important}
}
@media (pointer:coarse){
  .maplibregl-ctrl-group button{width:44px;height:44px}
  .mtype span{padding:11px 12px}
  .vfil .chip,.seasonsw a{min-height:40px;display:inline-flex;align-items:center}
}
/* phones held sideways: the header scrolls away and the weather is rows too */
@media (max-height:500px) and (pointer:coarse){
  header.top{position:static}
  .cond .wxw{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible;gap:.35rem}
  .cond .wxd{display:grid;grid-template-columns:4.4rem 34px minmax(0,1fr) minmax(0,1fr);column-gap:.5rem;row-gap:.1rem;align-items:center;text-align:left;padding:.45rem .6rem}
  .cond .wxd .dn{grid-row:1/3;grid-column:1}
  .cond .wxd .di{grid-row:1/3;grid-column:2;width:34px;height:34px;margin:0}
  .cond .wxd .dt{justify-content:flex-start}
  .cond .wxd .dsn{margin-top:0}
  .cond .wxd .dsun{grid-column:3/5;margin-top:0}
}
/* the journey's map: controls under it, and what's on the road now */
.tripmap-ctl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem .8rem;border-top:1px solid var(--line);font-size:.8rem}
.trafficlist{padding:.4rem .9rem .8rem;border-top:1px solid var(--line);font-size:.85rem}
.trafficlist ol{list-style:none;margin:.2rem 0;padding:0}
.trafficlist li{padding:.35rem 0;border-bottom:1px dotted var(--line)}
.trafficlist .km{display:inline-block;min-width:4rem;color:var(--ink2)}
/* a resort card's two buttons, straight under its name */
.dest .dacts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 .6rem}
.dest .dacts .btn{flex:1 1 auto;justify-content:center;text-align:center;min-height:40px}
/* Verified: a card whose key facts are each confirmed by two independent sources (or the owner) */
.isverified{position:relative}
.vribbon{position:absolute;top:10px;right:-6px;z-index:2;background:var(--pine,#3E6B48);color:#fff;font:600 .72rem/1 var(--db,inherit);
  padding:.32rem .6rem .32rem .55rem;border-radius:3px 0 0 3px;box-shadow:0 1px 3px rgba(0,0,0,.25);letter-spacing:.02em}
.vribbon::after{content:"";position:absolute;right:0;bottom:-6px;border-top:6px solid #24432c;border-right:6px solid transparent}
.vribbon.sm{top:6px;font-size:.66rem;padding:.25rem .45rem}
.dest.isverified .vribbon{top:14px}
/* a card's buttons, straight under its name */
.staycard .cardacts{margin:.1rem 0 .5rem}
/* a traveller's word on a fact still being checked */
.fcheck{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.15rem 0 0 .3rem;font-size:.75rem}
.fcheck .btn.sm{padding:.15rem .5rem;font-size:.72rem;min-height:30px}
.fcheck details{display:inline}
.fcheck details[open]{display:flex;gap:.3rem;flex-wrap:wrap;width:100%}
.fcheck summary{list-style:none;cursor:pointer;display:inline-flex}
.fcheck summary::-webkit-details-marker{display:none}
.fcheck input[name=note]{flex:1 1 10rem;min-width:0;font-size:.8rem;padding:.2rem .4rem}
@media (pointer:coarse){.fcheck .btn.sm{min-height:40px}}
/* the resort map full width on any phone or tablet (held either way), its layers underneath (leeq) */
@media (max-width:900px),(pointer:coarse){
  .rmap .rmap-grid{grid-template-columns:minmax(0,1fr)}
  .rmap .rmap-panel{border-left:0;border-top:1px solid var(--line);max-height:none}
  .rmap .rmap-grid>div:first-child{height:min(62vh,480px)!important}
}
/* the research box on a resort page */
.notesbox textarea{width:100%;box-sizing:border-box;font:inherit;padding:.6rem;border:1px solid var(--line);border-radius:6px;resize:vertical;min-height:7rem}
.notesbox .cardacts{display:flex;gap:.6rem;align-items:center;margin-top:.5rem}
.notelist{list-style:none;margin:.3rem 0 0;padding:0}
.notelist li{display:grid;gap:.15rem;padding:.5rem 0;border-bottom:1px dotted var(--line)}
.nstat{justify-self:start;font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:3px;background:var(--sky1)}
.nstat.done{background:var(--pine-soft,#d7e8da)}.nstat.failed{background:#f3dccc}
/* every card's buttons sit straight under its title (leeq) */
.book.cardacts{margin:.15rem 0 .65rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
/* going together: counts, convoys */
.goingline{margin:.5rem 0 0;font-size:.9rem;color:var(--ink2)}
.goingline a{white-space:nowrap}
.going .cardacts form{display:inline}
.convoys,.crew{list-style:none;margin:.3rem 0;padding:0}
.convoys li,.crew li{padding:.4rem 0;border-bottom:1px dotted var(--line)}
.board{list-style:none;margin:0 0 .6rem;padding:0;max-height:28rem;overflow-y:auto}
.board li{padding:.5rem .6rem;margin:.3rem 0;border-radius:8px;background:var(--sky1)}
.board li.mine{background:var(--pine-soft,#e3efe5);margin-left:1.5rem}
.board p{margin:.2rem 0 0}
.convoy textarea,.convoy input:not([type=checkbox]),.convoy select{width:100%;box-sizing:border-box;font:inherit;padding:.45rem;border:1px solid var(--line);border-radius:6px}
.convoy .form label{display:block;margin:.4rem 0}
.convoy .form label.chk{display:flex;gap:.5rem;align-items:flex-start}
.convoy .form label.chk input{width:auto}
/* the Journey's nights: other places to stop nearby (cairn) */
.cairnstays{margin:.6rem 0}
.cairnstays h4{margin:0 0 .3rem;font-size:.85rem}
.nslist{list-style:none;margin:0;padding:0}
.nslist button{all:unset;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline;width:100%;padding:.45rem .2rem;border-bottom:1px dotted var(--line);cursor:pointer;min-height:44px}
.nslist button:hover b{text-decoration:underline}
.nslist .nsr{margin-left:auto;white-space:nowrap}
/* a convoy's share bar, at the top */
.sharebar{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 1rem}
.sharebar .btn{min-height:44px;display:inline-flex;align-items:center}
.sharebar .fb{background:#1877F2;color:#fff;border-color:#1877F2}
.sharebar .wa{background:#25D366;color:#073b1f;border-color:#25D366}
.hdl{display:inline-flex;align-items:center;gap:.15rem;font-weight:600}
.hdl input{font-weight:400}
small.err{display:block;color:var(--piste,#C4262E)}
.dest .badgerow{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .2rem}
.dest .badgerow:empty{display:none}
.cstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem;margin:.3rem 0 .8rem}
.cstats div{background:var(--sky1);border-radius:8px;padding:.5rem .6rem}
.cstats b{display:block;font-size:1.3rem}
.cstats small{color:var(--ink2);font-size:.75rem}
.cvads li{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between}
.startcv{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.startcv label{display:inline-flex;gap:.3rem;align-items:center;font-size:.85rem}
/* the header on phones and small tablets (leeq): the logo with you on the right, your van and language
   under it, and the steps as one full-width bar below */
@media (max-width:820px){
  .top{padding:.5rem .75rem .4rem}
  .top-in{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand prof out" "van van lang" "nav nav nav";
    align-items:center;gap:.45rem .5rem}
  .top-in>.brand{grid-area:brand;font-size:1.35rem;white-space:nowrap}
  .top-in>.profbtn,.top-in>a[data-join]:not(.pri){grid-area:prof}
  .top-in>.logoutf,.top-in>a.pri[data-join]{grid-area:out}
  .top-in>.veh-chip{grid-area:van;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;padding:.3rem .65rem}
  .top-in>.langsw{grid-area:lang;justify-self:end}
  .top-in>.langsw select{max-width:6.2rem;font-size:.78rem;padding:.3rem .35rem}
  .top-in>nav.steps{grid-area:nav;margin:0 -.75rem;padding:.35rem .75rem .1rem;border-top:1px solid var(--line);display:flex;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;gap:.2rem;justify-content:space-between}
  .top-in>nav.steps::-webkit-scrollbar{display:none}
  .top-in>nav.steps a{flex:1 0 auto;text-align:center;padding:.5rem .55rem;font-size:.98rem}
  .top .profbtn{padding:.15rem .55rem .15rem .2rem;font-size:.85rem}
  .top .logoutf .btn,.top-in>a[data-join]{padding:.3rem .6rem;font-size:.8rem}
}
@media (max-width:820px){
  .top-in>.veh-chip::after{content:"✎";text-decoration:none;font-size:.8rem}   /* the whole chip opens Your van */
  .top-in>.langsw select{max-width:none;width:7.2rem}
  .top-in>nav.steps{width:calc(100% + 1.5rem);box-sizing:border-box}
}
.fbhow{margin:0 0 1rem;padding:.7rem 1rem}
.fbhow summary{cursor:pointer}
.fbhow ol{margin:.5rem 0;padding-left:1.2rem}
.fbhow li{margin:.25rem 0}
/* the header on wider screens (leeq): never a stray second line. Very wide: one row (logo, steps, van, language,
   you); otherwise two tidy rows, the logo with your things on the right, the steps under it */
@media (min-width:821px){
  .top-in{display:grid;align-items:center;gap:.5rem .6rem;
    grid-template-columns:auto minmax(0,1fr) auto auto auto auto;grid-template-areas:"brand van van lang prof out" "nav nav nav nav nav nav"}
  .top-in>.brand{grid-area:brand;white-space:nowrap;margin-right:.6rem}
  .top-in>nav.steps{grid-area:nav;margin:0;flex-wrap:nowrap;justify-content:flex-start}
  .top-in>.veh-chip{grid-area:van;justify-self:end;max-width:24rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-in>.langsw{grid-area:lang}
  .top-in>.langsw select{width:8.2rem;max-width:none}
  .top-in>.profbtn,.top-in>a[data-join]:not(.pri){grid-area:prof}
  .top-in>.logoutf,.top-in>a.pri[data-join]{grid-area:out}
}
@media (min-width:1500px){
  .top-in{grid-template-columns:auto 1fr auto auto auto auto;grid-template-areas:"brand nav van lang prof out"}
  .top-in>nav.steps{justify-content:center}
}
/* going together: the start / count panels, convoy cards, the Convoys page */
.going-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:.8rem;margin:.6rem 0 1rem}
@media (max-width:760px){.going-grid{grid-template-columns:minmax(0,1fr)}}
.gpanel{border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;background:var(--sky1)}
.gpanel h4{margin:0 0 .5rem}
.gpanel .fl{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;font-weight:600;color:var(--ink2);margin:0 0 .55rem}
.gpanel .fl input,.gpanel .fl select{font:inherit;font-weight:400;font-size:.95rem;color:var(--ink);padding:.45rem .55rem;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.gpanel .fl-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.gpanel .fl-row .fl{flex:0 0 7rem}
.gpanel .chk{display:flex;gap:.4rem;align-items:center;font-size:.85rem;margin-bottom:.6rem}
.gpanel .btn.on{border-color:var(--pine);color:var(--pine)}
.startcv{display:block}
.cvcards{list-style:none;margin:.3rem 0 .8rem;padding:0;display:grid;gap:.5rem}
.cvcards.big{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.7rem}
.cvcard{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;background:var(--panel)}
.cvcard.full{opacity:.8}
.cvcard .cvmain{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;text-decoration:none;color:inherit}
.cvcard .cvdate{flex:none;width:3.2rem;text-align:center;border-radius:8px;background:var(--ink);color:var(--snow);padding:.25rem 0;font-size:.72rem;text-transform:uppercase;line-height:1.1}
.cvcard .cvdate b{display:block;font-family:var(--dh);font-size:1.35rem}
.cvcard .cvtext{display:flex;flex-direction:column;min-width:0}
.cvcard .cvtext b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvfilter{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;padding:.8rem 1rem;margin:0 0 1rem}
.cvfilter .fl{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;font-weight:600;color:var(--ink2)}
.cvfilter select{font:inherit;font-weight:400;font-size:.95rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);min-width:9rem}
.cvfilter .btn.pri{margin-left:auto}
/* the roadworks scene while a list builds (core/worksloader.js) */
.worksld{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem 0;color:var(--ink2);font-size:.85rem}
.worksld .wk{width:min(100%,340px);height:auto;border-radius:8px;background:linear-gradient(#eaf2f8,#f6f9fb 70%)}
.wk-lines{animation:wk-road 1s linear infinite}
.wk-shovel{transform-origin:12px 13px;animation:wk-dig .9s ease-in-out infinite}
.wk-dirt circle{animation:wk-fling .9s ease-out infinite;opacity:0}
.wk-dirt circle:nth-child(2){animation-delay:.1s}.wk-dirt circle:nth-child(3){animation-delay:.2s}
.wk-doze{animation:wk-push 3.2s ease-in-out infinite}
.wk-smoke circle{animation:wk-puff 1.1s ease-out infinite}
.wk-van{animation:wk-bump 3s ease-in-out infinite}
.wk-oops{opacity:0;animation:wk-oops 3s ease-in-out infinite}
@keyframes wk-road{to{transform:translateX(-26px)}}
@keyframes wk-dig{0%,100%{transform:rotate(0)}50%{transform:rotate(28deg)}}
@keyframes wk-fling{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-14px)}}
@keyframes wk-push{0%,100%{transform:translateX(0)}50%{transform:translateX(-26px)}}
@keyframes wk-puff{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(4px,-10px) scale(1.4)}}
@keyframes wk-bump{0%,20%{transform:translateX(30px)}45%{transform:translateX(-6px)}50%{transform:translateX(-3px) rotate(-1.5deg)}55%{transform:translateX(-6px)}80%,100%{transform:translateX(30px)}}
@keyframes wk-oops{0%,44%{opacity:0}48%,62%{opacity:1}70%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.worksld *{animation:none!important}}
.grevbtns{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.grevbtns .btn{min-height:36px}
/* the header's trip row: resort, staying at, convoy, weather (leeq) */
.tripbar{display:flex;flex-wrap:wrap;gap:.25rem .9rem;align-items:baseline;font-size:.82rem;min-width:0}
.tripbar a{color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tripbar a:hover{text-decoration:underline}
.tripbar .tbk{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-right:.15rem}
.tripbar .tblive{color:var(--pine);font-weight:600}
.tripbar .tbpos{font-family:var(--mono,ui-monospace),monospace;font-size:.78rem;color:var(--ink2)}
@media (max-width:820px){
  .top-in{grid-template-areas:"brand prof out" "van van lang" "trip trip trip" "nav nav nav"}
  .top-in>.tripbar{grid-area:trip;gap:.15rem .7rem;font-size:.78rem}
}
@media (min-width:821px){
  .top-in{grid-template-areas:"brand van van lang prof out" "trip trip trip trip trip trip" "nav nav nav nav nav nav"}
  .top-in>.tripbar{grid-area:trip}
}
@media (min-width:1500px){
  .top-in{grid-template-areas:"brand nav van lang prof out" "trip trip trip trip trip trip"}
}
/* a convoy on the road: where everyone is */
.cvmap{height:min(55vh,420px);border-radius:8px;overflow:hidden;background:var(--sky1);margin:.4rem 0}
.cvpos{list-style:none;margin:.3rem 0;padding:0}
.cvpos li{padding:.35rem 0;border-bottom:1px dotted var(--line)}
.cvpos .km{font-family:var(--mono,ui-monospace),monospace;font-size:.82rem}
.cvwhere .btn.on{border-color:var(--pine);color:var(--pine)}
/* the header, every size (leeq, 2026-10-03): logo, language and you on top; one row of your van and trip
   (labelled like the rest: VAN, RESORT, STAYING AT, CONVOY, WEATHER); then the steps */
.tripbar .tbvan .tbdim{color:var(--ink2)}
.tripbar .tbedit{color:var(--glacier);font-size:.8rem;margin-left:.1rem}
.tripbar>a+a{position:relative;padding-left:.9rem}
.tripbar>a+a::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:var(--line)}
.top-in>.tripbar{grid-area:trip}
.top-in>.langsw{grid-area:lang}
@media (max-width:820px){
  .top-in{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"brand lang prof out" "trip trip trip trip" "nav nav nav nav"}
  .top-in>.langsw select{width:4.4rem}
  .tripbar{font-size:.78rem;gap:.2rem .7rem}
  .tripbar>a+a{padding-left:.7rem}
}
@media (max-width:420px){
  .top-in{grid-template-areas:"brand prof out out" "trip trip trip lang" "nav nav nav nav"}
  .top-in>.langsw{align-self:start}
  .tripbar>a+a{padding-left:0}.tripbar>a+a::before{display:none}
}
@media (min-width:821px){
  .top-in{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"brand . lang prof out" "trip trip trip trip trip" "nav nav nav nav nav"}
}
@media (min-width:1500px){
  .top-in{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"brand nav lang prof out" "trip trip trip trip trip"}
}
/* the sign-up window says what the site is for (leeq) */
.join-eyebrow{margin:0 0 .25rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--glacier)}
.join-perks li b{display:block;color:var(--ink)}
.join-perks li{color:var(--ink2);font-size:.9rem}
.join-free{margin:0 0 .6rem;font-size:.9rem}
@media (max-width:820px){.top-in>.langsw select{width:7.4rem}}
/* Going together on the Journey, tidied (leeq): labels left over their fields, the name full width, the size and
   the listing option on one line, the button at the foot of each panel */
.going .gpanel{display:flex;flex-direction:column;gap:.55rem}
.going .gpanel h4{margin:0;font-size:1rem}
.going .gpanel .fl{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;width:100%;margin:0;text-align:left}
.going .gpanel .fl input{width:100%;box-sizing:border-box}
.going .gpanel .fl-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem 1.2rem}
.going .gpanel .fl-row .fl{width:auto;flex:0 0 auto}
.going .gpanel .fl-row select{width:5.5rem}
.going .gpanel .chk{margin:0 0 .45rem;font-weight:500;color:var(--ink)}
.going .gpanel p{margin:0}
.going .gpanel .btn{align-self:flex-start}
.going .gpanel form{margin:0}
.going > h4{margin:1.1rem 0 .4rem}
.going .cvcards{margin-top:0}
.going .gpanel,.going .gpanel.startcv{align-items:stretch;text-align:left}
.going .gpanel .fl-row .fl{align-items:flex-start}
/* a convoy's trip: the vans in the banner, the organiser's start / finish, the CB */
.cvvans{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;justify-content:flex-end;max-width:16rem}
.cvvans small{flex-basis:100%;text-align:right;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.cvv{width:2.6rem;height:1.5rem}
.cvv rect:first-child{fill:none;stroke:var(--ink2);stroke-width:2;stroke-dasharray:3 2}
.cvv .w{fill:none;stroke:var(--ink2);stroke-width:1.2}.cvv .t{fill:none;stroke:var(--ink2);stroke-width:1.5}
.cvv.in rect:first-child{fill:var(--amber,#E3B341);stroke:var(--ink);stroke-dasharray:none}
.cvv.in .w{fill:var(--glacier);stroke:none}.cvv.in .t{fill:var(--ink);stroke:none}
@media (max-width:600px){.cvvans{justify-content:flex-start;max-width:none}.cvvans small{text-align:left}}
.cvtrip form{margin:.4rem 0 0}
.cb .cbfeed{list-style:none;margin:0 0 .6rem;padding:.4rem;height:min(52vh,420px);overflow-y:auto;background:var(--sky1);border-radius:8px;display:flex;flex-direction:column;gap:.35rem}
.cb .cbfeed li{max-width:85%;background:var(--panel);border-radius:10px;padding:.4rem .6rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cb .cbfeed li.mine{align-self:flex-end;background:var(--pine-soft,#dcebdf)}
.cb .cbfeed li.cbst{align-self:center;background:none;box-shadow:none;color:var(--ink2);font-size:.82rem;text-align:center;max-width:100%}
.cb .cbh small,.cb .cbst small{color:var(--ink2);font-size:.72rem}
.cb .cbfeed p{margin:.15rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cb .cbph{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.cb .cbph img{width:9rem;max-width:100%;border-radius:6px;display:block}
.cb .cbform{display:flex;gap:.4rem;align-items:stretch}
.cb .cbform input[name=text]{flex:1;min-width:0;font:inherit;padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px}
.cb .cbform .btn{min-height:44px;display:inline-flex;align-items:center}
.cb .cbphoto{cursor:pointer;font-size:1.1rem}
.cvk{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);vertical-align:-1px}
.cvk.road{background:#C4262E}.cvk.planned{background:#275D8C}
/* the status line (leeq: its name): your van, resort, staying at, convoy, weather; centred under the header */
.top-in>.statusline{justify-content:center;justify-self:stretch;text-align:center}
@media (max-width:420px){.top-in>.statusline{justify-content:flex-start;text-align:left}}
/* share buttons (tracked: core/share.py) */
.sharesm{margin:.5rem 0 0;gap:.35rem;align-items:center}
.sharesm .btn.sm{min-height:34px;padding:.25rem .65rem}
.sharesm .tbk{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-right:.2rem}
/* the convoy banner's vans: small, in the site's blue (leeq: too big, no brown) */
.cvvans{gap:.15rem}
.cvv{width:1.6rem;height:.95rem}
.cvv.in rect:first-child{fill:var(--glacier);stroke:var(--glacier)}
.cvv.in .w{fill:#fff}.cvv.in .t{fill:var(--ink)}
.cvvans small{font-size:.68rem}
/* every part of the status line can be changed (✎) */
.statusline .tbedit{margin-left:.25rem;color:var(--glacier);text-decoration:none;font-size:.8rem}
.statusline .tbitem{display:inline-flex;align-items:baseline;gap:.1rem;white-space:nowrap;max-width:100%}
.statusline .tbitem>a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.statusline .tbitem>a:hover{text-decoration:underline}
.statusline .tbitem+.tbitem{position:relative;padding-left:.9rem}
.statusline .tbitem+.tbitem::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1px;background:var(--line)}
@media (max-width:420px){.statusline .tbitem+.tbitem{padding-left:0}.statusline .tbitem+.tbitem::before{display:none}}
.going-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.going-grid>.startcv{grid-column:span 2}
@media (max-width:760px){.going-grid>.startcv{grid-column:auto}}

/* welcome back (welcome.js) and your trips */
dialog.welcomeback{border:0;border-radius:14px;padding:22px 20px 18px;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.welcomeback::backdrop{background:rgba(20,33,43,.55)}
.welcomeback h2{font:700 1.8rem/1.1 var(--dh);margin:0 0 6px}
.welcomeback h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);margin:16px 0 6px}
.welcomeback ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.welcomeback li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.welcomeback li div{display:flex;flex-direction:column;min-width:0}
.welcomeback li span{font-size:.85rem;color:var(--ink2)}
.welcomeback .wb-acts{display:flex;gap:6px;flex-wrap:wrap}
.welcomeback form{margin:0}
.welcomeback .btn.sm{min-height:44px}
.welcomeback .wb-x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink2);min-width:44px;min-height:44px}
.welcomeback .wb-foot{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.tripsave{display:flex;gap:8px;flex-wrap:wrap}.tripsave input{flex:1;min-width:200px}
.plist.trips li{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.plist.trips .dacts{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}.plist.trips form{margin:0}
.plist.trips details.ren[open] form{display:flex;gap:6px;margin-top:6px}
.mine .plist li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0}.mine .plist form{margin-left:auto}
.join-cvf{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:.82rem}

/* looking for a convoy (convoys/_looking.html) */
.looking .lk-head{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.looking .lk-art{width:120px;flex:0 0 auto}
.looking h2{font:700 1.7rem/1.1 var(--dh);margin:0 0 4px}
.looking .lk-post{margin:10px 0 14px}.looking .lk-post>summary{list-style:none;display:inline-flex;min-height:44px;align-items:center}
.looking .lk-post>summary::-webkit-details-marker{display:none}
.looking .lk-form{display:grid;gap:12px;margin-top:12px}
.looking fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0;min-width:0}
.looking legend{font-weight:700;padding:0 4px}
.looking .fl-row{display:flex;gap:10px;flex-wrap:wrap}.looking .fl-row .fl{flex:1 1 150px;min-width:0}
.looking .fl input,.looking .fl select,.looking .fl textarea{width:100%;box-sizing:border-box;min-height:44px}
.looking .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.looking .chipc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;min-height:44px;box-sizing:border-box;font-size:.88rem;cursor:pointer}
.looking .chipc:has(input:checked){background:var(--sky1,#e6eef6);border-color:#275D8C}
.looking .lk-close{margin-top:8px}
.looking .lk-matches{background:var(--sky1,#eef4fa);border-radius:10px;padding:10px 12px;margin:0 0 14px}
.looking .lk-matches h3{margin:0 0 6px;font-size:1rem}
.looking .lk-fits{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.looking .lk-fits li{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);border-radius:8px;padding:8px 10px}
.looking .lk-fits li div{display:flex;flex-direction:column}
.lkcards{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.lkcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;background:var(--panel);font-size:.92rem}
.lkcard.match{border-color:#C4262E;box-shadow:0 0 0 2px rgba(196,38,46,.15)}
.lkcard.me{background:var(--sky1,#f1f6fb)}
.lkcard .lk-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.lkcard .lk-h{font-size:1.05rem}
.lkcard .lk-tags{display:flex;flex-wrap:wrap;gap:4px}.lkcard .lk-tags span{background:var(--sky1,#e6eef6);border-radius:999px;padding:2px 9px;font-size:.78rem}
.lkcard .lk-about{margin:2px 0;font-style:italic;color:var(--ink2)}
.lkcard .lk-acts{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px}
.lkcard .lk-acts form{display:flex;gap:6px;margin:0;flex-wrap:wrap}.lkcard .lk-acts input,.lkcard .lk-acts select{flex:1;min-width:0;min-height:44px}
.lkcard .btn.sm{min-height:44px}
@media (max-width:560px){.looking .lk-head{flex-direction:column;align-items:flex-start}.looking .lk-art{width:96px}}

/* journey: heads up (travel/plan.py flags) */
.headsup{border-left:4px solid var(--piste)}
.headsup h2{margin:0 0 6px;font-size:1.1rem}
.headsup ul{margin:0;padding-left:1.1rem;display:grid;gap:4px}
.headsup a{color:inherit}