/* Dark mode (Settings → Language & display → Theme). The page keeps its own colours; a layer over the page turns what is
   behind it dark (inverted, hue turned back) through backdrop-filter. Photos, flags and the status markers are lifted
   above that layer (site.js gives them .bj-raise), so they look exactly as they are. Anything that sits above the layer
   on its own — the rail, menus, modals, the legend (z-index) — gets a layer of its own when it is opaque (.bj-pane, with
   its images lifted above it the same way) and is turned dark as a block when it is see-through (.bj-ctx, inverted);
   an image inside a block with its own stacking context is turned back as well as a block can be (.bj-lossy). */
html[data-theme="dark"]{scrollbar-color:#3a414b #0e1116}
html[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;-webkit-backdrop-filter:invert(1) hue-rotate(180deg);backdrop-filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .bj-raise{z-index:1}
html[data-theme="dark"] .bj-pane{isolation:isolate}
html[data-theme="dark"] .bj-pane::after{content:"";position:absolute;top:calc(-1 * var(--bj-bt,0px));left:calc(-1 * var(--bj-bl,0px));width:calc(100% + var(--bj-bl,0px) + var(--bj-br,0px));height:calc(var(--bj-h,100%) + var(--bj-bt,0px) + var(--bj-bb,0px));border-radius:inherit;z-index:0;pointer-events:none;-webkit-backdrop-filter:invert(1) hue-rotate(180deg);backdrop-filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .bj-pane.bj-clipb{border-color:var(--bj-bc)!important;background-clip:padding-box!important}
html[data-theme="dark"] .bj-pane.bj-clipb::after{top:0;left:0;width:100%;height:var(--bj-h,100%);border-radius:var(--bj-ir,0px)}
html[data-theme="dark"] .bj-pane.bj-sround{overflow-x:hidden!important}
html[data-theme="dark"] .bj-pane.bj-sround::after{width:calc(100% + 24px)}   /* under its scrollbar as well */   /* its border is painted dark instead, so the layer stays inside (no stray scroll) */
html[data-theme="dark"] body *{scrollbar-color:#bdb6aa transparent}
/* a pane's own scrollbar sits above its layer (dark colours); the scrollbars of boxes inside it sit under the layer, like the page's (light colours the layer turns dark) */
html[data-theme="dark"] .bj-pane{scrollbar-color:#4a525d transparent;scrollbar-width:thin}
html[data-theme="dark"] .bj-pane *{scrollbar-color:#a7afba transparent;scrollbar-width:thin}
@supports selector(::-webkit-scrollbar){
  html[data-theme="dark"] .bj-pane,html[data-theme="dark"] .bj-pane *{scrollbar-color:auto;scrollbar-width:auto}
  html[data-theme="dark"] .bj-pane::-webkit-scrollbar,html[data-theme="dark"] .bj-pane *::-webkit-scrollbar{width:8px;height:8px}
  html[data-theme="dark"] .bj-pane::-webkit-scrollbar{background:var(--bj-pbg,#000)}
  html[data-theme="dark"] .bj-pane::-webkit-scrollbar-thumb{background:#4a525d;border-radius:4px;border:2px solid var(--bj-pbg,#000)}
  html[data-theme="dark"] .bj-pane::-webkit-scrollbar-track,html[data-theme="dark"] .bj-pane::-webkit-scrollbar-corner{background:var(--bj-pbg,#000)}
  html[data-theme="dark"] .bj-pane *::-webkit-scrollbar,html[data-theme="dark"] .bj-pane *::-webkit-scrollbar-track,html[data-theme="dark"] .bj-pane *::-webkit-scrollbar-corner{background:transparent}
  html[data-theme="dark"] .bj-pane *::-webkit-scrollbar-thumb{background:#a7afba;border-radius:4px;border:2px solid transparent;background-clip:padding-box}
  html[data-theme="dark"] .bj-pane::-webkit-scrollbar-button,html[data-theme="dark"] .bj-pane *::-webkit-scrollbar-button{display:none}
}
html[data-theme="dark"] .bj-ctx{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .bj-lossy{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .bj-ctx .bj-lossy{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] *{box-shadow:none!important;text-shadow:none!important}          /* an inverted shadow is a glow; none in the dark */
html[data-theme="dark"] .bj-edge{box-shadow:inset 0 0 0 1.5px var(--bj-edge-fill,#000)!important}   /* the dark edge over a rounded pane (site.js, edgeOf) */
html[data-theme="dark"] :focus-visible{outline:2px solid #1F3A63;outline-offset:2px}
/* the browser's own pop-ups — a select's list, a date picker — aren't on the page, so the layer can't reach them: dark by themselves */
html[data-theme="dark"] :is(select,input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]){color-scheme:dark;background-color:#fff;color:#191919}   /* the box itself is on the page: light, so the layer makes it dark */
html[data-theme="dark"] option{background:#171a20;color:#e9ebee}
html[data-theme="dark"] option:checked{background:#2a3340}
/* browsers without backdrop-filter: each top-level block inverted, images turned back as well as they can be */
@supports not ((backdrop-filter:invert(1)) or (-webkit-backdrop-filter:invert(1))){
  html[data-theme="dark"]{background:#0e1116}
  html[data-theme="dark"] body{background:#0e1116}
  html[data-theme="dark"] body::after{content:none}
  html[data-theme="dark"] body > *{filter:invert(1) hue-rotate(180deg)}
  html[data-theme="dark"] body > script,html[data-theme="dark"] body > style,html[data-theme="dark"] body > link{filter:none}
  html[data-theme="dark"] #bj-root{filter:none}
  html[data-theme="dark"] #bj-root > *{filter:invert(1) hue-rotate(180deg)}
  html[data-theme="dark"] .bj-ctx{filter:none}
  html[data-theme="dark"] .bj-pane::after{content:none}
  html[data-theme="dark"] :is(img,video,canvas,iframe,[style*="url("],svg:has(use)){filter:invert(1) hue-rotate(180deg)}
  html[data-theme="dark"] [style*="url("] :is(img,[style*="url("]){filter:none}
  html[data-theme="dark"] #bj-ep,html[data-theme="dark"] #bj-vp{background:rgba(236,231,224,.55)}
}

/* Printing (or saving as a PDF) is always on the light page: the dark layers, the edges laid over panes and the inverted
   blocks are left out, and photos print even when the browser's "Background graphics" is off. */
@media print{
  html[data-theme="dark"]{background:#fff!important}
  html[data-theme="dark"] body{background:#fff!important}
  html[data-theme="dark"] body::after,html[data-theme="dark"] .bj-pane::after{content:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .bj-edge{display:none!important}
  html[data-theme="dark"] .bj-ctx,html[data-theme="dark"] .bj-lossy,html[data-theme="dark"] body > *,html[data-theme="dark"] #bj-root > *,html[data-theme="dark"] :is(img,video,canvas,iframe,[style*="url("],svg:has(use)){filter:none!important}
  [style*="url("],img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* The live site: an app page stays unseen until the account's data has been painted over the page's sample content.
   The page's head script raises this; bj-live.js lifts it once the page has painted (site.js lifts it at once when there
   is no account layer, and the head script lifts it after 4 s whatever happens). */
html.bj-wait body > *{visibility:hidden}

/* Nepal's flag isn't a rectangle: shown whole, at its own shape, rather than cropped to fill a rectangular frame */
img[src*="/np.png"]{object-fit:contain!important;border-color:transparent!important;background:transparent!important;border-radius:0!important}
[style*="/np.png"]{background-size:contain!important;background-repeat:no-repeat!important;background-color:transparent!important}

/* Dropdown menus that float over the page (.bj-menu: the account menu, "…" menus, the site's dropdowns, the location,
   organization and driver's-licence pickers) are left out of the layers above and are given dark colours of their own,
   so they look the same however they are opened, filled, scrolled or moved. */
html[data-theme="dark"] .bj-menu{background:#0c0e11!important;border-color:#2f343b!important;color:#e6e6e6!important;box-shadow:0 12px 34px rgba(0,0,0,.65)!important;color-scheme:dark}
html[data-theme="dark"] .bj-menu *{border-color:#2f343b!important}
html[data-theme="dark"] .bj-menu b,html[data-theme="dark"] .bj-menu strong,html[data-theme="dark"] .bj-menu .am-name,html[data-theme="dark"] .bj-menu .am-item,html[data-theme="dark"] .bj-menu .bj-sel-opt,html[data-theme="dark"] .bj-menu .bj-place-opt,html[data-theme="dark"] .bj-menu .bj-org-opt{color:#e6e6e6!important}
html[data-theme="dark"] .bj-menu small,html[data-theme="dark"] .bj-menu .sub,html[data-theme="dark"] .bj-menu .am-sub,html[data-theme="dark"] .bj-menu .bj-place-note,html[data-theme="dark"] .bj-menu .bj-org-opt small,html[data-theme="dark"] .bj-menu .bj-sel-opt.ph span,html[data-theme="dark"] .bj-menu .bj-sel-grp{color:#8e959e!important}
html[data-theme="dark"] .bj-menu .am-item i,html[data-theme="dark"] .bj-menu .bj-org-opt>i{color:#939dab!important}
html[data-theme="dark"] .bj-menu .am-item:hover,html[data-theme="dark"] .bj-menu .am-item:focus,html[data-theme="dark"] .bj-menu .bj-org-opt:hover,html[data-theme="dark"] .bj-menu .bj-org-opt.on,html[data-theme="dark"] .bj-menu .bj-place-opt:hover,html[data-theme="dark"] .bj-menu .bj-place-opt.on,html[data-theme="dark"] .bj-menu .bj-sel-opt.on{background:#1b2027!important}
html[data-theme="dark"] .bj-menu .bj-sel-opt.sel,html[data-theme="dark"] .bj-menu .bj-sel-opt i,html[data-theme="dark"] .bj-menu .bj-place-opt>i{color:#b0cbf4!important}
html[data-theme="dark"] .bj-menu .bj-sel-opt.off{color:#4b4b4b!important}
html[data-theme="dark"] .bj-menu .am-item.danger,html[data-theme="dark"] .bj-menu .am-item.danger i{color:#f28b82!important}
html[data-theme="dark"] .bj-menu .am-sep{background:#2f343b!important}
html[data-theme="dark"] .bj-menu .am-head{border-bottom-color:#2f343b!important}
html[data-theme="dark"] .bj-menu{scrollbar-color:#4a525d transparent}
html[data-theme="dark"] .bj-hcard .hc-go{background:transparent!important;color:#b0cbf4!important;border-color:#b0cbf4!important}html[data-theme="dark"] .bj-hcard .hc-go:hover{background:#1b2027!important}html[data-theme="dark"] .bj-hcard small{color:#a3abb5!important}