/* LAYOUT: the one place for sizes and positions. Colours come only from colours.css (var(--name)).
   Written for older Safari: no :has(), :focus-visible, inset, aspect-ratio, flex gap, container queries, dvh or text-wrap. Phone width 390 px, no sideways scrolling. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--backdrop);overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);font-size:15px;line-height:1.35;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:var(--green)}
h1{margin:6px 0 2px;font-size:26px;line-height:1.15;color:var(--text-title)}
h2{margin:14px 0 6px;font-size:17px;color:var(--text-title)}
.phone{width:100%;max-width:390px;margin:0 auto;min-height:100vh;background:var(--page-white);position:relative;padding-bottom:78px;overflow:hidden}
body[data-page="welcome"] .phone,body[data-page="login"] .phone{padding-bottom:0}
.page{padding:0 16px}
.muted{color:var(--subtext);font-size:13px}
.center{text-align:center}
.sub{margin:0 0 10px;color:var(--subtext-blue);font-size:15px}
.empty{padding:22px 8px;text-align:center;color:var(--subtext)}
/* header (header.js) */
.hdr{position:relative;background:var(--page-white) url(../assets/header-full-800.jpg) center top/100% 100% no-repeat}   /* COMMAND 710: the whole header picture (09 App Design\header.2.arch.jpg, 1682 x 624, with the woman's head), as wide as the screen, as tall as its own shape (624/1682) gives, not cropped */
.hdr:before{content:"";display:block;padding-top:37.0987%}
.hdr-left,.hdr-right{position:absolute;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.hdr-left{left:12px}.hdr-right{right:12px;-webkit-justify-content:flex-end;justify-content:flex-end}
.word{font-weight:800;font-size:19px;letter-spacing:-.02em;margin-left:3px}
.free{color:var(--logo-orange)}.camp{color:var(--logo-green)}
.hdr-back{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:40px;color:#fff;text-decoration:none;font-size:16px;font-weight:700;padding:0 6px 0 0;background:transparent;text-shadow:-1px 0 #0f1b3d,1px 0 #0f1b3d,0 -1px #0f1b3d,0 1px #0f1b3d}   /* COMMAND 722: Back sits like the heart and share, no box or shading, white with a thin dark outline so it shows on any part of the banner */
.hdr-right .ibtn.bare{width:32px;margin-left:0}   /* COMMAND 725: favourite and share side by side at the right */
.hdr-back svg{width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-right:2px}
.hdr-back svg .halo,.ibtn.bare svg .halo{stroke:#0f1b3d;stroke-width:4.600;fill:none}
.hdr-back svg .line{stroke:#fff;stroke-width:2.200}
.ibtn.bare svg .line{stroke:#fff;stroke-width:2.200}

.ibtn{width:40px;height:40px;margin-left:6px;border:1px solid var(--tile-border);border-radius:10px;background:var(--page-white);padding:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:var(--text)}
.ibtn.bare{border:0;background:transparent;box-shadow:none}   /* COMMAND 721: heart and share on the camp page banner, no box or shading round them */
.ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn svg.full{fill:var(--heart-red);stroke:var(--heart-red)}
/* search, tabs, bottom bar (nav.js) */
.searchbox{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:46px;margin:4px 0 10px;padding:0 12px;border:1px solid var(--tile-border);border-radius:12px;background:var(--page-white)}
.searchbox svg{width:20px;height:20px;margin-right:10px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;-webkit-flex:none;flex:none}
.searchbox input{-webkit-flex:1;flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--text)}
.tabs{display:-webkit-flex;display:flex;margin:0 0 10px}
.tab{-webkit-flex:1;flex:1;text-align:center;padding:10px 0;margin-right:8px;border-radius:12px;background:var(--backdrop-grey);color:var(--text-title);font-weight:700;text-decoration:none}
.tab:last-child{margin-right:0}
.tab.on{background:var(--green);color:var(--page-white)}
.bottom{position:fixed;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:100%;max-width:390px;display:-webkit-flex;display:flex;background:var(--page-white);border-top:1px solid var(--tile-border);padding-bottom:env(safe-area-inset-bottom);z-index:1100}
.bnav{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;padding:8px 0 6px;color:var(--subtext);text-decoration:none;font-size:12px}
.bnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.800;stroke-linecap:round;stroke-linejoin:round}
.bnav.on{color:var(--logo-orange);font-weight:700}
/* criteria row (criteria.js): five equal rounded boxes, a solid symbol strip on the left, pale background, thin border. Not buttons. */
.crit{display:-webkit-flex;display:flex;margin:8px 0}
/* COMMAND 696: each criterion is a rounded square (the :before block gives it the same height as its width): label at the top, symbol below it, small word last. Not checked = outline and label only. */
.cb{position:relative;-webkit-flex:1 1 0;flex:1 1 0;min-width:0;margin-right:4px;border:1.500px solid;border-radius:12px;overflow:hidden;background:transparent}
.cb:before{content:"";display:block;padding-top:80%}   /* COMMAND 711: 20% lower than the old square */
.cb:last-child{margin-right:0}
.cin{position:absolute;left:0;top:0;right:0;bottom:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;padding:4px 2px 2px;text-align:center}
.cl{display:block;font-size:10px;font-weight:700;line-height:1.15}
.cs{display:block;font-size:21px;font-weight:800;line-height:1.1;margin-top:1px}
.cw{display:block;margin-top:1px;font-size:9px;line-height:1.1;word-wrap:break-word;overflow-wrap:break-word}
.b-pass{border-color:var(--badge-green);background:var(--badge-green-light);color:var(--text-green-dark)}.b-pass .cs{color:var(--badge-green)}
.b-maybe{border-color:var(--badge-amber);background:var(--badge-amber-light);color:var(--badge-amber-text-dark)}.b-maybe .cs{color:var(--badge-amber)}
.b-fail{border-color:var(--badge-red);background:var(--badge-red-light);color:var(--badge-red-text-dark)}.b-fail .cs{color:var(--badge-red)}
.b-none{border-color:var(--badge-grey);background:transparent;color:var(--badge-grey-text)}
.crit-big .cl{font-size:12px}.crit-big .cs{font-size:27px}.crit-big .cw{font-size:10.500px}
.cnotes{margin:6px 0;padding:8px 12px 8px 26px;border-radius:12px;background:var(--tile);border:1px solid var(--tile-border);font-size:13px}
.cnotes li{margin:2px 0}
.stars{font-size:17px;letter-spacing:1px;white-space:nowrap}.stars .on{color:var(--star-gold)}.stars .off{color:var(--star-empty)}
.numc{-webkit-flex:none;flex:none;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:var(--green);color:var(--page-white);font-weight:800;font-size:13px;border:2px solid var(--page-white);box-shadow:0 1px 4px var(--shadow-strong)}
.pinwrap{background:transparent;border:0}
.numc.pin{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:14px;height:14px;min-width:0;padding:0;font-size:0;border-width:2px;box-sizing:border-box;white-space:nowrap}   /* COMMAND 720: a small dot; the number is hidden until the dot is tapped */
.numc.pin.sel{width:20px;height:20px;background:var(--logo-green)}
.numc.pin.sel.tapped{width:auto;min-width:34px;height:34px;padding:0 6px;font-size:12px}
.rate{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.cframe{position:absolute;left:0;right:0}
.ctext{box-sizing:border-box;padding:2px 3px;position:absolute;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:center;color:var(--text-title);font-weight:700;line-height:1.2}   /* COMMAND 718: the line inside the cream rectangle */
.cmore{display:block;box-sizing:border-box;width:100%;margin:8px 0 6px;padding:11px 12px;border-radius:12px;background:var(--green);color:var(--page-white);font-size:15px;font-weight:700;text-align:center;line-height:1.2}   /* COMMAND 726: More details button on every card */
.crev{margin:2px 0 0;font-size:13px;color:var(--subtext)}   /* COMMAND 718: camper reviews, their own line */
.rate b{margin:0 8px 0 6px;color:var(--text-rating)}
/* cards (list, map, saved) */
.card{display:block;position:relative;margin:20px 0;padding:10px 28px 10px 10px;border:1px solid var(--tile-border);border-radius:14px;background:var(--tile);color:inherit;text-decoration:none}
/* COMMAND 709: every card image (a photo or a scenery picture) is the same 3:2 size and is shown whole, not cropped: a picture of another shape sits inside the box with plain bars */
.cphoto{display:block;position:relative;height:0;padding-top:66.6667%;margin-bottom:8px;border-radius:10px;overflow:hidden;background:var(--placeholder-light)}
.cphoto img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:contain}
.ph{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background:linear-gradient(135deg,var(--placeholder-light),var(--placeholder-dark));color:var(--placeholder-text);font-size:13px;text-align:center}
.cbody{display:block}
.chead{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.cname{display:block;margin-left:10px;min-width:0}
.cname b{display:block;font-size:16px;color:var(--text-title)}
.cblurb{display:block;margin:2px 0 6px;font-size:13px;color:var(--subtext)}
.go{font-size:28px;line-height:1;color:var(--text)}
.cact{position:absolute;right:2px;top:50%;margin-top:-28px;width:26px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}
.cact button{width:26px;height:26px;margin:1px 0;padding:0;border:0;background:transparent;color:var(--text);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
.cact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cact svg.full{fill:var(--heart-red);stroke:var(--heart-red)}   /* COMMAND 720: heart and share where the arrow was */
.tag{margin:4px 0;display:inline-block;padding:2px 8px;border-radius:999px;background:var(--badge-amber-light);border:1px solid var(--badge-amber);color:var(--badge-amber-text-dark);font-size:12px;font-weight:600}
.selcard .card{margin-top:0}
.mapwrap{position:relative;margin-bottom:8px}
.map{height:300px;border:1px solid var(--tile-border);border-radius:12px;overflow:hidden;background:var(--map-land)}
.mapnote{margin:4px 0;font-size:12px;color:var(--subtext)}
/* buttons and fields */
.primary,.secondary{display:block;width:100%;margin:12px 0 6px;padding:14px 10px;border-radius:14px;border:2px solid var(--green);font:inherit;font-size:17px;font-weight:700;text-align:center;text-decoration:none}
.primary{background:var(--green);color:var(--page-white)}.secondary{background:var(--page-white);color:var(--green)}
.linkbtn{background:none;border:0;color:var(--green);font:inherit;text-decoration:underline;padding:8px}
.inp{display:block;width:100%;padding:12px;border:1px solid var(--tile-border);border-radius:12px;background:var(--page-white);font:inherit;font-size:16px;color:var(--text)}
.area{min-height:110px}
.lab{display:block;margin:12px 0 4px;font-weight:700}
/* 1 welcome (and the shared logo block) */
.welcome{min-height:844px;padding:0;background:var(--photo-fallback) url(../assets/background-sunset.jpg) 88% 50%/cover no-repeat}
.wlive{min-height:844px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;padding:14px 16px 16px;text-align:center}
.wbrand{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}
.wmark{display:block;width:85px;height:auto}
.wword{display:block;margin:-4px 0 0;font-size:46px;font-weight:800;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.wtag{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--logo-green);text-shadow:0 0 8px var(--page-white),0 0 4px var(--page-white)}
.wscript{margin:8px 0 0}
.sline{display:block;font-size:24px;font-style:italic;font-weight:600;line-height:1.2;color:var(--logo-green);text-shadow:0 0 8px var(--page-white),0 0 4px var(--page-white)}
.under{display:block;height:4px;width:62%;margin:5px auto 0;border-radius:999px;background:var(--script-orange);-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}
.wlive{position:relative}
/* COMMAND 695: bottom clearance so the last button and the Legal line can scroll fully above Safari's bottom toolbar: the iOS safe-area inset plus the part of the screen the toolbar covers (large height minus dynamic height). Each line is a fallback for the next; a browser that does not know env() or dvh keeps the line before. */
.wlive{padding-bottom:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));padding-bottom:calc(16px + env(safe-area-inset-bottom) + (100vh - 100dvh))}
.loginpage{padding-bottom:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));padding-bottom:calc(14px + env(safe-area-inset-bottom) + (100vh - 100dvh))}
.points{position:absolute;left:10px;right:10px;top:29.500%;list-style:none;margin:0;padding:0;display:-webkit-flex;display:flex}
.points li{-webkit-flex:1;flex:1;min-width:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;padding:0 3px;font-size:15px;font-weight:800;line-height:1.15;color:var(--page-white);text-shadow:0 1px 3px var(--text-on-photo-shadow),0 0 10px var(--text-on-photo-shadow)}
.points svg{width:34px;height:34px;margin-bottom:5px;stroke:var(--page-white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;-webkit-filter:drop-shadow(0 1px 3px var(--text-on-photo-shadow));filter:drop-shadow(0 1px 3px var(--text-on-photo-shadow))}
.wbtn{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;width:100%;min-height:64px;margin-top:12px;padding:8px 14px;border-radius:16px;border:2px solid var(--green);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.wbtn .tx{-webkit-flex:1;flex:1;min-width:0}.wbtn b{display:block;font-size:17px}.wbtn small{display:block;font-size:13px}.wbtn .ch{font-size:30px;line-height:1}
.trial{background:var(--green);color:var(--page-white)}.login{background:var(--page-white);color:var(--green)}.login small{color:var(--subtext-dark)}
/* COMMAND 705: first page, the trial and login boxes move up 1 cm (37.8 CSS px) so they clear the address line at the top of the phone screen. The login box's bottom margin lifts the whole bottom group; the Legal line is on the sign-in page and is not affected. */
.wbtn.login{margin-bottom:37.8px}
/* TEMPORARY - REMOVE BEFORE LIVE (COMMAND 705): page number in the top right corner of every page (added in js/pages.js render) */
.betatag{position:absolute;top:2px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:45;width:134px;box-sizing:border-box;text-align:center;height:20px;line-height:20px;padding:0;border-radius:8px;background:var(--script-orange);color:var(--page-white);font:800 13px/20px sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;pointer-events:none}   /* COMMAND 728 */
.tempno{position:absolute;top:3px;right:8px;z-index:50;font:700 12px/1 sans-serif;color:var(--text-dark,#000);background:rgba(255,255,255,.7);padding:2px 5px;border-radius:6px;pointer-events:none}
/* TEMPORARY - REMOVE BEFORE LIVE (COMMAND 706): the "<" and ">" strip at the top of every page. It is 40 px tall in the page flow, centred, with the page number (COMMAND 705, top right) clear of it. */
/* TEMPORARY - REMOVE BEFORE LIVE (COMMAND 706, moved onto the header by COMMAND 708): the "<" and ">" buttons. On the header they sit at its bottom corners; on pages 1 and 2 (no header) in the top corners, clear of the page number. */
.tempnav{position:absolute;top:2px;left:0;right:0;height:20px;z-index:40;pointer-events:none}   /* COMMAND 729: "<" and ">" sit right beside the BETA VERSION label, which is centred (134 px wide): 2 px gaps */   /* COMMAND 720: both buttons together at the top of the banner, right corner over the motorhome, left of the page number */

.tempnav button{position:absolute;top:0;pointer-events:auto;width:40px;height:20px;margin:0;border:0;border-radius:8px;background:var(--script-orange);color:var(--page-white);font:800 16px/1 sans-serif;cursor:pointer}
.tempnav button:first-child{right:calc(50% + 69px)}.tempnav button:nth-child(2){left:calc(50% + 69px)}
.tempnav button:disabled{background:var(--subtext-dark);opacity:.35;cursor:default}
/* 2 sign-in */
.loginpage{min-height:844px;padding:14px 16px;background:var(--login-cream) url(../assets/page2-photo.jpg) 88% 0/cover no-repeat;text-align:center}
.lbrand{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;margin-bottom:17px}
.lpanel{text-align:left;padding:10px 12px;border-radius:16px;background:var(--login-cream)}
.lpanel h1{text-align:center;color:var(--logo-green);font-size:26px}
.lsub{text-align:center;color:var(--subtext-warm);margin:4px 0 31px}
.forgot{text-align:right;margin:6px 0 0}
.or{text-align:center;margin:10px 0 0;color:var(--subtext-warm)}
.lbelow{margin-top:19px;height:calc(100vh - 655px);margin-bottom:-14px;height:calc(100dvh - 655px);margin-bottom:calc(-14px - env(safe-area-inset-bottom));min-height:60px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;text-align:center;color:var(--page-white);text-shadow:0 1px 3px var(--text-on-photo-shadow),0 0 10px var(--text-on-photo-shadow)}
.lsource{margin:0;font-weight:800;font-size:24px;line-height:1.2;white-space:pre-line}   /* COMMAND 731: two lines, same size, centred between the cream box (its bottom is 655 px down) and the bottom of the visible screen */
/* 5 camp details */
.bigphoto{display:block;height:200px;margin:4px 0 0;border-radius:14px;overflow:hidden;background:var(--placeholder-light)}
.bigphoto img{display:block;width:100%;height:200px;object-fit:cover}
.credit{margin:4px 2px;font-size:11px;color:var(--subtext)}
.ctitle{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:10px 0 4px}
.ctitle h1{margin:0 0 0 10px}.ctitle .muted{margin:0 0 0 10px}
.banner-tbc{margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--badge-amber-light);border:1px solid var(--badge-amber);color:var(--badge-amber-text-dark);font-size:13px}
.blurb{margin:8px 0}
.dtable,.sumcard,.norev,.fcard,.psec,.icard{background:var(--tile);border:1px solid var(--tile-border);border-radius:14px}
.dtable{padding:8px 12px;margin:10px 0}
.drow{display:-webkit-flex;display:flex;padding:5px 0;border-bottom:1px solid var(--tile-border)}
.dk{width:128px;-webkit-flex:none;flex:none;font-weight:700}.dv{-webkit-flex:1;flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word}
.dnote,.dsrc{margin:8px 0 2px;font-size:12px;color:var(--subtext);word-wrap:break-word;overflow-wrap:break-word}
.two{margin:6px 0}
/* 6 reviews, 7 review form */
.sumcard{padding:14px;margin:10px 0;text-align:center}.big{font-size:44px;font-weight:800;color:var(--text-title)}
.norev{padding:14px;margin:10px 0}
.rhead{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;padding:10px;border-radius:14px;background:var(--tile)}
.rthumb{display:block;width:64px;height:64px;margin-right:12px;border-radius:10px;overflow:hidden;-webkit-flex:none;flex:none}
.rthumb img{width:64px;height:64px;object-fit:cover}
.rhead h1{font-size:26px;margin:0}
.starin{display:-webkit-flex;display:flex}
.sb{background:none;border:0;padding:0 6px 0 0;font-size:42px;line-height:1;color:var(--star-input)}.sb.on{color:var(--star-gold)}
.phgrid{display:-webkit-flex;display:flex}
.addph,.phbox{-webkit-flex:1;flex:1;height:64px;margin-right:6px;border-radius:10px}
.addph{border:0;background:var(--tile);color:var(--green);font:inherit;font-size:12px}
.phbox{border:1px dashed var(--photo-add-border)}.phbox:last-child{margin-right:0}
/* 8 filters */
.fcard{padding:10px 12px;margin:10px 0}
.fcard h2{margin:0 0 6px}
.slider{width:100%;margin:8px 0 0}
.ticks{position:relative;height:18px;margin:0 12px}
.tk{position:absolute;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:11px;color:var(--subtext);white-space:nowrap}
.frow,.prow{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:6px 0}
.ft b,.prow b{display:block;font-size:16px}.ft small,.prow small{display:block;color:var(--subtext);font-size:13px}
.ft{padding-right:10px}
.sw{position:relative;width:46px;height:26px;-webkit-flex:none;flex:none;border:0;border-radius:13px;background:var(--switch-off);padding:0}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--page-white);box-shadow:0 1px 3px var(--shadow-medium)}
.sw.on{background:var(--green)}.sw.on i{left:23px}
.seg2 button,.vrow button,.pillb{border:1px solid var(--tile-border);background:var(--page-white);color:var(--text);font:inherit;font-size:14px;padding:8px 10px;border-radius:10px;text-decoration:none}
.seg2 button.on,.vrow button.on,.pillb.on{background:var(--green);color:var(--page-white);border-color:var(--green)}
.vrow{display:-webkit-flex;display:flex}.vrow button,.vrow .pillb{-webkit-flex:1;flex:1;margin-right:6px;padding:10px 2px}.vrow button:last-child,.vrow .pillb:last-child{margin-right:0}
/* 9 saved, 10 profile, 11 info */
.savedbar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;padding:10px 12px;border-radius:12px;background:var(--tile)}
.sortbtn{border:1px solid var(--tile-border);background:var(--page-white);border-radius:10px;padding:6px 12px;font:inherit}
.psec{padding:10px 12px;margin:10px 0}.psec h2{margin:2px 0 4px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--subtext-blue);margin-right:10px;-webkit-flex:none;flex:none}
.icard{margin:10px 0;overflow:hidden}
.ihead{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;width:100%;padding:12px;border:0;background:transparent;font:inherit;text-align:left;color:inherit}
.ihead b{display:block;font-size:17px;color:var(--text-title)}.ihead small{display:block;color:var(--subtext);font-size:13px}
.ihead .go{position:static;margin:0 0 0 8px;-webkit-flex:none;flex:none}
.ibody{padding:0 12px 12px;font-size:14px;white-space:pre-line}   /* COMMAND 725: the Terms and Code of Conduct keep their paragraph breaks */.ibody[hidden]{display:none}
/* "Coming soon" bubble (app.js) */
.toast{position:fixed;left:50%;bottom:92px;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:var(--green-toast);color:var(--page-white);font-size:14px;font-weight:600;white-space:nowrap;z-index:3000}
.toast[hidden]{display:none}

/* COMMAND 707 */
.lpanel{position:relative;top:19px}   /* page 2: the cream box moves down 19 px (0.5 cm) */
.cloc{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.cprice{margin-left:8px;color:var(--text);font-weight:700;white-space:nowrap}
.mapnote{margin:6px 0;font-size:13px;font-weight:700;color:var(--text)}
.fcard h2{min-height:22.9px;box-sizing:border-box}   /* page 8: every tile heading the same height */
.marks{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 8px -2px}
.marks i{display:block;width:2px;height:8px;border-radius:1px;background:var(--subtext)}
/* page 8: the permits tile (was 88 px) and the people tile (was 70.9 px) are half their old height */
.fcard.half{padding-top:0;padding-bottom:0;box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.fcard.half .frow{width:100%;padding:0}
#tile-permit{height:44px}#tile-people{height:35.5px}
#tile-people .seg2 button{padding:2px 10px;font-size:13px;line-height:1.2;width:64px;text-align:center}   /* COMMAND 755: 2 and Solo the same size */

/* COMMAND 732: every page with a banner gets 0.5 cm (19 px) more room under it than it had (headings and titles keep the doubled gap of COMMAND 730 and add the 19 px; the tile on the write-a-review page, which had no gap, gets 19 px); on the map and list pages the search bar also gets 19 px more room above the tabs line below it */
.page > h1:first-child{margin-top:31px}
[data-page="reviews"] > .ctitle:first-child{margin-top:39px}
.page > .searchbox:first-child{margin-top:23px;margin-bottom:29px}
[data-page="camp"] > .cphoto:first-child{margin-top:19px}
[data-page="camp"] > .cphoto.cph:first-child{margin-top:23px}   /* a camp with no photo keeps the 23 px it had (the placeholder picture now fills the place of the grey box) */
[data-page="review"] > .rhead:first-child{margin-top:19px}
.ilink{color:var(--green);font-weight:700;text-decoration:underline}

/* COMMAND 753: page 3 (map), locked design #4: From, To and GO on one row, then the instruction line */
.tripbar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.tfld{-webkit-flex:1;flex:1;min-width:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:46px;padding:0 10px;margin-right:8px;border:1px solid var(--tile-border);border-radius:12px;background:var(--page-white)}
.tfld input{-webkit-flex:1;flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--text)}
.tfld input::placeholder{color:var(--input-placeholder);opacity:1}.tfld input:focus::placeholder{color:transparent}   /* COMMAND 755: the From and To words show in light grey and clear as soon as the box is tapped */
.tripbar .go{-webkit-flex:none;flex:none;height:46px;min-width:56px;padding:0 14px;border:0;border-radius:12px;background:var(--green);color:var(--page-white);font:inherit;font-size:16px;font-weight:700}
.tripnote{margin:8px 0 10px;font-size:13px;color:var(--subtext)}
.page > .tripbar:first-child{margin-top:23px}

/* COMMAND 754: map page only: the Leaflet / OpenStreetMap credit (text and links unchanged, still shown) is centred along the bottom edge of the map and at 8 px (COMMAND 755; was 12 px, 6 px in COMMAND 754) */
[data-page="map"] .leaflet-bottom.leaflet-right{left:0;right:0;text-align:center}
[data-page="map"] .leaflet-bottom.leaflet-right .leaflet-control{float:none;display:inline-block;margin-right:0}
[data-page="map"] .leaflet-control-attribution{font-size:8px;line-height:1.5;padding:0 4px}

[data-page="profile"] .psec{margin:22px 0}   /* COMMAND 755: more space between the profile tiles (was 10 px) */
.isub{margin:14px 0 4px;font-size:15px;color:var(--text-title)}   /* COMMAND 755: sub-heading inside an Info topic */
.mapmsg{margin:6px 0;font-size:13px;color:var(--text)}.mapmsg:empty{display:none}   /* COMMAND 756: plain messages under the map */
.rescount{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--text-title)}.results .secondary{width:100%;margin:8px 0 14px}

/* COMMAND 758: the map toolbar is five touching 34 px squares in one column, hard against the left edge of the map (no gap, no green panel) and centred up and down on the map: zoom +, zoom -, Search, List, crosshair; icon above a 9 px label; a thin line between buttons */
.maptools{position:absolute;left:1px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:500;box-sizing:border-box;width:34px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;background:transparent;box-shadow:0 1px 5px var(--shadow-soft)}
.maptools .leaflet-control{float:none;clear:none;margin:0}
.maptools .leaflet-bar{border:0;border-radius:0;box-shadow:none;background:transparent}
.maptools .leaflet-bar a,.maptools .leaflet-bar a:hover,.maptools .leaflet-bar a:last-child{display:block;box-sizing:border-box;width:34px;height:34px;line-height:33px;margin:0;border:0;border-bottom:1px solid #ccc;border-radius:0;background:var(--page-white);color:var(--text);font-size:20px}
.maptools .mt{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:34px;height:34px;margin:0;padding:0;border:0;border-bottom:1px solid #ccc;border-radius:0;background:var(--page-white);font:inherit;font-size:9px;font-weight:700;line-height:1;color:var(--text);text-decoration:none;text-align:center}
.maptools .mt:last-child{border-bottom:0}
.maptools .mt svg{width:15px;height:15px;margin-bottom:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.maptools .mbtn svg{width:22px;height:22px;margin:0}
/* COMMAND 760: list page only: each camp card has a 3 px #2e7049 border (the colour the owner named; the app green --green is #067647) (padding cut by 2 px so the card keeps its size and 14 px corners); the gap under the search bar matches the gap from the Map/List/Saved buttons to the first photo (31 px) */
[data-page="list"] .card{border:3px solid #2e7049;padding:8px 26px 8px 8px}
[data-page="list"] > .searchbox:first-child{margin-bottom:31px}

/* COMMAND 761: profile buttons (Edit, Saved, Reviews, Status, Log out) are one size, right-aligned, text on one line; type sizes across the app: page title 26, section heading 17, item title 16, page sub-line 15, sub-text 13 */
[data-page="profile"] .prow .pillb{-webkit-flex:none;flex:none;box-sizing:border-box;width:108px;padding:8px 4px;text-align:center;white-space:nowrap}

/* COMMAND 762: the "Source not yet confirmed" line in the camp details table reads like the other rows */
.drow .dsrc{margin:0;font-size:inherit;color:inherit}