/* R1 mockup: bottom menu for the team view. Everything is scoped to body.bn, so the default view is untouched. */
.bnav,.bn-mapbtn,.bn-mapx,.bn-more{display:none}
body.bn{--bnh:64px;--red:#B5523B}
body.bn .bnav{display:grid;grid-template-columns:repeat(var(--n,5),1fr);position:fixed;z-index:40;left:0;right:0;bottom:0;
  height:calc(var(--bnh) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);
  background:rgba(21,32,25,.97);border-top:1px solid rgba(200,165,102,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.bn .bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;color:rgba(243,239,230,.72);
  font:500 11.5px/1 var(--sans);letter-spacing:.04em;position:relative}
body.bn .bnav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.bn .bnav button[hidden]{display:none}
body.bn .bnav .bt-n{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--brassL);color:var(--holly);font:600 10.5px/17px var(--sans);text-align:center}
body.bn .bnav .bt-n.urgent{background:var(--red);color:#fff}
body.bn .bnav .bt-more svg{fill:currentColor;stroke:none}
body.bn .bnav button.on{color:var(--parch)}
body.bn .bnav button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:2px;background:var(--brassL);border-radius:0 0 2px 2px}
body.bn .bnav .bt-emergency{color:#E9A08E}
body.bn .bnav .bt-emergency.on{color:#fff}
body.bn .bnav .bt-emergency.on::before{background:var(--red)}

/* the icon row and the chapter names move into More and the tabs */
body.bn .topbar #opsBtn,body.bn .topbar #rbBtn,body.bn .topbar #driveBtn,body.bn .topbar #msgBtn,body.bn .topbar #pdfTop,body.bn .topbar #discBtn,
body.bn .topbar #bellBtn,body.bn .topbar #helpBtn,body.bn .topbar #signout,body.bn .topbar #emBtn,body.bn .chapnav{display:none!important}
body.bn .cover-h ~ .hint,body.bn #cover .hint{display:none}
body.bn #story > .chapter[hidden]{display:none!important}
body.bn .clock{display:none}
body.bn[data-bn="day"] .clock{display:grid}

/* Now: one button to the full brief, nothing removed */
body.bn .bn-full{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:22px 0 0;padding:16px 18px;min-height:56px;
  background:var(--alab);border:1px solid var(--line);border-radius:4px;text-align:left}
body.bn .bn-full b{display:block;font:500 15px/1.2 var(--sans);color:var(--ink)}
body.bn .bn-full small{display:block;margin-top:4px;font-size:13px;color:var(--sage)}
body.bn .bn-full svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.8}
body.bn[data-bn="brief"] .bn-full{display:none}

/* Drive: the three drive tools as large buttons at the top of Routes */
body.bn .bn-drive{display:none}
body.bn[data-bn="drive"] .bn-drive{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 22px}
body.bn .bn-drive button{min-height:56px;padding:0 14px;background:var(--holly);color:var(--parch);border-radius:4px;font:500 14.5px/1.2 var(--sans)}
body.bn .bn-drive button:first-child{background:var(--brass)}

/* More as a sheet */
body.bn .bn-more{display:block;position:fixed;inset:0;z-index:60}
body.bn .bn-more[hidden]{display:none}
body.bn .bn-scrim{position:absolute;inset:0;background:rgba(14,22,17,.45);opacity:0;transition:opacity .18s}
body.bn .bn-sh{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--parch);border-radius:14px 14px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .2s var(--ease)}
body.bn .bn-more.in .bn-scrim{opacity:1}
body.bn .bn-more.in .bn-sh{transform:none}
body.bn .bn-sh ul{list-style:none;margin:0;padding:0}
body.bn .bn-sh li+li{border-top:1px solid var(--line)}
body.bn .bn-sh li button{display:block;width:100%;text-align:left;padding:14px 4px;min-height:56px}
body.bn .bn-sh li b{display:block;font:500 16px/1.25 var(--sans);color:var(--ink)}
body.bn .bn-sh li small{display:block;margin-top:3px;font-size:13px;color:var(--sage)}
body.bn .bn-shx{display:block;width:100%;margin-top:10px;min-height:52px;border:1px solid var(--line);border-radius:4px;font-weight:500}

@media (max-width:860px){
  body.bn{--mapH:120px}
  body.bn .bnav button{font-size:11px;letter-spacing:.01em}
  body.bn #story{bottom:calc(var(--bnh) + env(safe-area-inset-bottom));padding-bottom:28px}
  body.bn[data-bn="day"] #story{top:calc(var(--top) + var(--mapH) + var(--clockh))}
  body.bn[data-bn="day"] .clock{top:calc(var(--top) + var(--mapH));bottom:auto;z-index:15}
  body.bn[data-bn="drive"]{--mapH:46vh}
  body.bn .satbtn{display:none}
  body.bn:not([data-bn="drive"]):not(.bn-mapfull) #gpsChip{display:none}
  body.bn .bn-mapbtn{display:block;position:fixed;z-index:12;left:0;right:0;top:var(--top);height:var(--mapH);background:transparent}
  body.bn .bn-mapbtn span{position:absolute;right:12px;bottom:10px;padding:8px 12px;background:rgba(250,247,241,.94);border:1px solid var(--line);border-radius:999px;
    font:500 12px/1 var(--sans);letter-spacing:.06em;color:var(--ink)}
  body.bn[data-bn="drive"] .bn-mapbtn{display:none}
  body.bn.bn-mapfull{--mapH:calc(100vh - var(--top) - var(--bnh))}
  body.bn.bn-mapfull #story,body.bn.bn-mapfull .bn-mapbtn,body.bn.bn-mapfull .clock{display:none}
  body.bn.bn-mapfull .satbtn{display:inline-flex;top:auto;bottom:calc(var(--bnh) + 16px)}
  body.bn.bn-mapfull .bn-mapx{display:block;position:fixed;z-index:30;top:calc(var(--top) + 12px);right:12px;padding:11px 16px;min-height:44px;
    background:var(--holly);color:var(--parch);border-radius:999px;font:500 13px/1 var(--sans)}
  body.bn #pvBar{top:calc(var(--top) + 6px)}
}
@media (min-width:861px){
  /* the same five places as labelled tabs in the top bar, where the chapter names were */
  body.bn .bnav{left:auto;right:150px;bottom:auto;top:0;height:var(--top);width:auto;grid-template-columns:repeat(var(--n,5),auto);gap:4px;padding:0;
    background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  body.bn .bnav button{flex-direction:row;gap:8px;min-height:44px;padding:0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
  body.bn .bnav svg{width:18px;height:18px}
  body.bn .bnav .bt-n{position:static;margin-left:2px}
  body.bn .bnav button.on::before{top:auto;bottom:-10px;left:14px;right:14px}
  body.bn .bn-sh{left:auto;right:24px;top:calc(var(--top) + 8px);bottom:auto;width:380px;border-radius:8px;transform:translateY(-8px);opacity:0;transition:opacity .18s,transform .18s}
  body.bn .bn-more.in .bn-sh{opacity:1;transform:none}
  body.bn #story{padding-bottom:40vh}
  body.bn[data-bn="day"] #story{padding-bottom:calc(var(--clockh) + 40vh)}
}

/* R1 A.2: the next drive at the top of Now */
.bn-nx{display:none}
body.bn .bn-nx{display:grid;gap:6px;width:100%;text-align:left;margin:0 0 14px;padding:16px 16px 14px;background:var(--holly);color:var(--parch);border-radius:3px;border:0;cursor:pointer}
body.bn .bn-nx:hover{background:var(--holly2)}
body.bn .bn-nx-k{font:600 11.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brassL)}
body.bn .bn-nx-h{font:500 20px/1.25 var(--serif,var(--sans));color:var(--parch)}
body.bn .bn-nx-m{font:400 14px/1.4 var(--sans);color:rgba(243,239,230,.78)}
body.bn .bn-nx-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:4px;padding-top:10px;border-top:1px solid rgba(200,165,102,.22);font:500 14px/1.35 var(--sans)}
body.bn .bn-nx-v i{width:8px;height:8px;border-radius:50%;background:#7FB08A;flex:none;align-self:center}
body.bn .bn-nx-v.v-note i{background:var(--brassL)}
body.bn .bn-nx-v.v-warn i{background:#E9A08E}
body.bn .bn-nx-v small{flex-basis:100%;padding-left:16px;font:400 13px/1.4 var(--sans);color:rgba(243,239,230,.72)}
body.bn .bn-nx-go{display:flex;align-items:center;gap:6px;margin-top:4px;font:500 13.5px/1 var(--sans);color:var(--brassL)}
body.bn .bn-nx-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
body.bn .nextup.bn-dup{display:none}
body.bn.discreet .bn-nx .pii{filter:blur(5px)}

/* A-008: Night. The light surfaces are turned dark with one filter; what is already dark, photos and the map are turned back. */
.bn-nt{display:none}
body.bn .bn-nt{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:6px;border-radius:50%;color:var(--brassL)}
body.bn .bn-nt svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.bn .bn-nt[data-p="on"] svg{fill:currentColor;stroke:none}
body.bn.night{background:#0E1511}
body.bn.night #story,body.bn.night #drawer,body.bn.night .bn-more .bn-sh{filter:invert(.9) hue-rotate(180deg) brightness(.92)}
body.bn.night #story :is(img,video,canvas,picture,.bn-nx,.nextup,.bn-drive button,[style*="background-image"]),
body.bn.night #drawer :is(img,video,canvas,picture,.maplibregl-map){filter:invert(1) hue-rotate(180deg)}
body.bn.nt-map #map .maplibregl-canvas{filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(1.08) saturate(.55)}
body.bn.night .maplibregl-popup-content,body.bn.night .maplibregl-ctrl-attrib{background:#1B241F;color:#C9C3B5}
body.bn.night #map .maplibregl-marker,body.bn.night #map .maplibregl-ctrl,body.bn.night #gpsChip,body.bn.night .satbtn,body.bn.night .mvmenu,body.bn.night .bn-mapbtn span{filter:invert(.9) hue-rotate(180deg) brightness(.92)}