/* Light It Up — the people screens and a few pieces every app page carries: the sign-in card (log in,
   setup link, Log in as…, your password, manager unlock, the platform admin's log in), the Ctrl/⌘+K search
   box, the "put the app on your phone" bar, permissions, search results, the activity timeline and the help
   manual. Loaded by the office app, the driver app, the product's own pages and the admin area.
   Rentopian look in Light It Up's colours: white cards with a soft shadow, small capital labels, tinted
   round icons, green main buttons, corners of 4–6px. Old-phone rules as app.css: no CSS grid, no flex
   gap, no aspect-ratio/inset/clamp; a literal colour before each var(). Dark mode comes from the token swap
   in app.css (body.app); a literal colour that is not a fallback needs a line in BOTH dark blocks at the
   end of this file. */

/* ================================================================ the sign-in card ======================= */
.auth-card { max-width: 440px; margin: 0 auto 1.25rem; padding: 1.9rem 2rem 1.7rem; }
.auth-card.auth-wide { max-width: 680px; }
body.app .auth-card, body.admin .auth-card { margin-top: 1.5rem; }
.auth-head { text-align: center; margin: 0 0 1.4rem; }
.auth-head h1 { margin: 0; font-size: 1.6rem; }
.auth-head .sub { margin: .5rem 0 0; color: #7b8698; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.auth-head .sub b { color: #2b3445; color: var(--ink); }
.auth-ic { display: inline-block; width: 58px; height: 58px; line-height: 58px; border-radius: 50%; text-align: center; margin: 0 0 .9rem;
  background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); }
.auth-ic .ic { width: 28px; height: 28px; }
.auth-ic.auth-ic-warn { background: #fff4d6; background: var(--warn-bg); color: #9a6400; color: var(--warn); }
.auth-ic.auth-ic-ok { background: #e3f5ea; background: var(--ok-bg); color: #17803d; color: var(--ok); }
.auth-card .field { margin-bottom: 1.1rem; }
.auth-card .field > label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8698; color: var(--muted); margin-bottom: .4rem; }
.auth-card input:not([type=checkbox]):not([type=radio]) { min-height: 48px; }
.auth-card .btn-big { margin-top: .35rem; }
.auth-card .card-foot.auth-foot { margin: 1.6rem -2rem -1.7rem; padding: 1rem 2rem 1.05rem; font-size: .88rem; color: #7b8698; color: var(--muted); line-height: 1.5; }
.auth-foot p { margin: 0; }
.auth-back { text-align: center; font-size: .92rem; margin: .9rem 0 0; }
.auth-msg { text-align: center; }
.auth-q { text-align: center; color: #7b8698; color: var(--muted); margin: 1.3rem 0 .55rem; }
@media (max-width: 599px) {
  .auth-card { padding: 1.5rem 1.15rem 1.35rem; }
  .auth-card .card-foot.auth-foot { margin: 1.4rem -1.15rem -1.35rem; padding: .9rem 1.15rem; }
  .auth-head h1 { font-size: 1.4rem; }
}
/* a field with a small icon at its left edge (email, password) */
.in-ic { position: relative; display: block; }
.in-ic .ic { position: absolute; left: .8rem; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: #7b8698; color: var(--muted); pointer-events: none; }
.in-ic input:not([type=checkbox]):not([type=radio]) { padding-left: 2.6rem; }

/* the setup link: who this login is for */
.setup-who { background: #f5f8fc; background: var(--hover); border: 1px solid #e3e8ef; border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; margin: 0 0 1.3rem; }
.setup-who .cap { display: block; margin-bottom: .15rem; }
.setup-who b { display: block; font-size: 1.02rem; word-wrap: break-word; word-break: break-all; }
.setup-who small { display: block; margin-top: .25rem; line-height: 1.4; }

/* Log in as…: three big cards (rows on a phone, side by side on a computer) */
.pick { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; margin: 0 0 .75rem; padding: .95rem 1rem;
  background: #fff; background: var(--card); color: #2b3445; color: var(--ink); border: 1px solid #cfd6e0; border: 1px solid var(--line2); border-radius: 6px;
  text-align: left; cursor: pointer; font: inherit; -webkit-appearance: none; box-shadow: 0 1px 2px rgba(16, 32, 64, .04); }
.pick:hover, .pick:focus { border-color: #1f73d1; border-color: var(--accent); background: #f5f8fc; background: var(--hover); outline: 0; }
.pick.on { border-color: #1f73d1; border-color: var(--accent); box-shadow: inset 0 0 0 1px #1f73d1; box-shadow: inset 0 0 0 1px var(--accent); }
.pick-ic { display: inline-block; -webkit-flex: none; flex: none; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; margin-right: .95rem;
  background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); }
.pick-ic .ic { width: 25px; height: 25px; }
.pick-staff .pick-ic { background: #eeeefc; background: var(--out-bg); color: #4f53cf; color: var(--out); }
.pick-driver .pick-ic { background: #e0f4f1; background: var(--back-bg); color: #0d8a7f; color: var(--back); }
.pick-txt { -webkit-flex: 1; flex: 1; min-width: 0; }
.pick-txt b { display: block; font-size: 1.08rem; font-weight: 600; }
.pick-txt small { display: block; margin-top: .15rem; line-height: 1.4; }
.pick .chev { color: #7b8698; color: var(--muted); font-size: 1.4rem; line-height: 1; margin-left: .5rem; }
.pick-now { color: #1f73d1; color: var(--accent); margin-left: .4rem; }
.pick-now .ic { width: 20px; height: 20px; stroke-width: 2.4; }
@media (min-width: 640px) {
  .picks { display: -webkit-flex; display: flex; margin: 0 -.4rem; }
  .pick { display: block; -webkit-flex: 1 1 0; flex: 1 1 0; width: auto; margin: 0 .4rem; padding: 1.5rem 1rem 1.3rem; text-align: center;
    display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: stretch; align-items: stretch; }
  .pick-txt { -webkit-flex: none; flex: none; }
  .pick-ic { display: block; width: 64px; height: 64px; line-height: 64px; margin: 0 auto .9rem; }
  .pick-ic .ic { width: 30px; height: 30px; }
  .pick .chev { display: none; }
  .pick-now { position: absolute; top: .55rem; right: .6rem; margin: 0; }
}

/* ================================================================ permissions ============================ */
.perm-page .me-card .kv .tag { margin-left: .2rem; }
/* the checkboxes first on a phone; the person's card on the left on a computer */
@media (min-width: 900px) { .perm-split { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } }
.perm-group .card-head .tag { margin-left: .5rem; }
.perm-group > .hint { margin: -.35rem 0 .6rem; }
.perm-cols { margin: 0; }
.perm-cols .check { margin: 0; padding: .7rem .2rem; border-top: 1px solid #e3e8ef; border-top: 1px solid var(--line); min-height: 0; }
.perm-cols .check span { line-height: 1.4; }
.perm-off span { color: #7b8698; color: var(--muted); }
@media (min-width: 1100px) {
  .perm-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .perm-cols .check { width: 50%; padding-right: 1.25rem; }
}
.perm-save { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 1rem 1.35rem .5rem; }
.perm-save .btn { margin: 0 .6rem .5rem 0; }
@media (max-width: 599px) { .perm-save .btn { display: block; width: 100%; margin-right: 0; } }
.perm-other .card-head h1 { margin: 0 .5rem 0 0; font-size: 1.3rem; -webkit-flex: 1; flex: 1; min-width: 0; }
.perm-other .card-head .lg-av { margin-right: .75rem; }

/* ================================================================ search ================================= */
.search-form { display: -webkit-flex; display: flex; margin-bottom: .5rem; }   /* also the equipment list's search */
.search-form input { -webkit-flex: 1; flex: 1; min-width: 0; margin-right: .5rem; }
.search-form .btn { -webkit-flex: none; flex: none; }
.find-form { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: .85rem; margin-bottom: .6rem; }
.find-in { position: relative; display: block; -webkit-flex: 1; flex: 1; min-width: 0; margin-right: .6rem; }
.find-in .ic { position: absolute; left: .85rem; top: 50%; margin-top: -11px; color: #7b8698; color: var(--muted); pointer-events: none; }
.find-in input:not([type=checkbox]):not([type=radio]) { min-height: 50px; padding-left: 2.8rem; font-size: 1.02rem; }
.find-form .btn { -webkit-flex: none; flex: none; min-height: 50px; padding-left: 1.4rem; padding-right: 1.4rem; }
.find-hint { margin: 0 0 1.2rem; }
.search-group { padding-bottom: .5rem; }
.search-group .card-head { margin-bottom: .4rem; }
.search-group .card-head .tag { margin-left: .5rem; }
.search-group .rowlink b { display: block; font-weight: 600; }
.search-group .rowlink small { display: block; margin-top: .1rem; }
.find-none { padding: 2.2rem 1rem; }
.find-none-ic { display: inline-block; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: #eef1f6; background: var(--bg); color: #7b8698; color: var(--muted); }
.find-none p { margin: .7rem 0 1rem; font-size: 1.02rem; }
@media (max-width: 599px) {
  .find-form { display: block; }
  .find-in { margin: 0 0 .6rem; }
  .find-form .btn { display: block; width: 100%; }
}

/* ================================================================ the Ctrl/⌘+K search box (public/app.js) */
.pal-back { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(16, 32, 64, .48); padding: 10vh 1rem 1rem; }
.pal-box { max-width: 580px; margin: 0 auto; background: #fff; background: var(--card); color: #2b3445; color: var(--ink); border-radius: 6px; box-shadow: 0 20px 50px rgba(10, 25, 50, .32); overflow: hidden; }
.pal-form { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #e3e8ef; border-bottom: 1px solid var(--line); padding: .45rem .7rem; }
.pal-form .pal-input { border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 1.05rem; background: transparent !important; }
.pal-esc { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7b8698; color: var(--muted); border: 1px solid #cfd6e0; border: 1px solid var(--line2); border-radius: 4px; padding: .1rem .4rem; margin-left: .4rem; }
.pal-list { list-style: none; margin: 0; padding: .35rem 0; max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pal-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #7b8698; color: var(--muted); padding: .7rem 1rem .3rem; font-weight: 700; }
.pal-item { padding: .55rem 1rem; cursor: pointer; border-left: 3px solid transparent; }
.pal-item b { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-item.on { background: #e8f1fc; background: var(--soft); border-left-color: #1f73d1; border-left-color: var(--accent); }
.pal-item.on b { color: #1f73d1; color: var(--accent); }
.pal-none { padding: 1rem; color: #7b8698; color: var(--muted); }
.pal-foot { font-size: .75rem; color: #7b8698; color: var(--muted); padding: .5rem 1rem; border-top: 1px solid #e3e8ef; border-top: 1px solid var(--line); background: #f5f8fc; background: var(--hover); }
@media (max-width: 600px) { .pal-back { padding-top: 1rem; } .pal-foot { display: none; } }

/* ================================================================ activity (a timeline) ================== */
/* the long line under the title: the same quieter size as the Service and Diesel pages (review, Oct 14) */
.pagehead .act-lead { font-size: .94rem; max-width: 46rem; line-height: 1.45; margin-top: .2rem; }
.act-filter { padding: 1rem 1.35rem .35rem; }
.act-fields { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-end; align-items: flex-end; margin: 0 -.5rem; }
.act-fields > .field { -webkit-flex: 1 1 170px; flex: 1 1 170px; margin: 0 .5rem .75rem; min-width: 0; }
.act-fields > .act-go { -webkit-flex: 0 0 auto; flex: 0 0 auto; white-space: nowrap; }
.act-go .btn { margin-right: .4rem; }
.act-go .btn:last-child { margin-right: 0; }
.act-count { margin: .2rem 0 .3rem; }
.act-tiles .tile { text-decoration: none; color: inherit; }
.act-tiles .tile b { color: #2b3445; color: var(--ink); }
.act-tiles .act-t-out b { color: #4f53cf; color: var(--out); }
.act-tiles .act-t-back b { color: #0d8a7f; color: var(--back); }
.act-tiles .act-t-ok b { color: #17803d; color: var(--ok); }
.act-tiles a.tile.tile-on { box-shadow: inset 0 -3px 0 #1f73d1, 0 1px 3px rgba(16, 32, 64, .08); box-shadow: inset 0 -3px 0 var(--accent), var(--shadow); }
.act-tiles a.tile.tile-on span { color: #1f73d1; color: var(--accent); }
.act-card .card-head .tag { margin-left: .5rem; }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-day { padding: 1rem 0 .55rem; }
.act-day:first-child { padding-top: .2rem; }
.act-day .cap { display: inline-block; background: #eef1f6; background: var(--bg); border-radius: 4px; padding: .2rem .55rem; }
.act-row { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 0 0 1rem; }
.act-when { -webkit-flex: none; flex: none; width: 4.9rem; padding: .05rem .75rem 0 0; text-align: right; white-space: nowrap; }
.act-dot { position: relative; -webkit-flex: none; flex: none; width: 16px; height: 16px; margin: .15rem .9rem 0 0; border-radius: 50%; z-index: 1;
  background: #fff; background: var(--card); border: 4px solid #cfd6e0; border-color: var(--line2); }
.act-row::before { content: ""; position: absolute; left: 85px; left: calc(4.9rem + 7px); top: 1.1rem; bottom: 0; width: 2px; background: #e3e8ef; background: var(--line); }
.act-row:last-child::before { display: none; }
.act-what { -webkit-flex: 1; flex: 1; min-width: 0; word-wrap: break-word; line-height: 1.45; }
.act-kind { font-weight: 700; }
.act-by { color: #4a5568; color: var(--ink2); }
.act-detail { display: block; margin-top: .1rem; }
.act-links { display: block; margin-top: .2rem; }
.act-k-out .act-dot { border-color: #4f53cf; border-color: var(--out); } .act-k-out .act-kind { color: #4f53cf; color: var(--out); }
.act-k-back .act-dot { border-color: #0d8a7f; border-color: var(--back); } .act-k-back .act-kind { color: #0d8a7f; color: var(--back); }
.act-k-ok .act-dot { border-color: #17803d; border-color: var(--ok); } .act-k-ok .act-kind { color: #17803d; color: var(--ok); }
.act-k-err .act-dot { border-color: #c53030; border-color: var(--err); } .act-k-err .act-kind { color: #c53030; color: var(--err); }
.act-k-warn .act-dot { border-color: #f5b400; } .act-k-warn .act-kind { color: #9a6400; color: var(--warn); }
.act-k-blue .act-dot { border-color: #1f73d1; border-color: var(--accent); } .act-k-blue .act-kind { color: #1f73d1; color: var(--accent); }
.act-unlock .act-what { background: #fff4d6; background: var(--warn-bg); border-radius: 4px; padding: .3rem .55rem; margin-top: -.3rem; }
.act-warn .act-what { background: #fdecec; background: var(--err-bg); border-radius: 4px; padding: .3rem .55rem; margin-top: -.3rem; }
@media (max-width: 599px) {
  .act-filter { padding: .9rem 1rem .25rem; }
  .act-fields > .field { -webkit-flex: 1 1 140px; flex: 1 1 140px; }
  .act-fields > .act-go { -webkit-flex: 1 1 100%; flex: 1 1 100%; }
  .act-go > label { display: none; }   /* (review) the empty label only lines the button up beside the fields */
  .act-when { width: 4.1rem; padding-right: .55rem; font-size: .9rem; }
  .act-row::before { left: 72px; left: calc(4.1rem + 7px); }
  .act-dot { margin-right: .7rem; }
}

/* ================================================================ help (the manual) ===================== */
.help-split .split-main { max-width: 860px; }
.help-toc-card { padding-bottom: .4rem; }
.help-toc-card .card-head { padding: 1.1rem 1.2rem 0; margin-bottom: .6rem; }
.help-toc { list-style: none; margin: 0; padding: 0; }
.help-toc a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: .5rem 1.2rem; text-decoration: none; color: #2b3445; color: var(--ink); font-size: .94rem; border-top: 1px solid #e3e8ef; border-top: 1px solid var(--line); }
.help-toc a:hover { background: #f5f8fc; background: var(--hover); color: #1f73d1; color: var(--accent); }
.help-toc .help-n { width: 1.6rem; min-width: 1.6rem; height: 1.6rem; line-height: 1.6rem; font-size: .78rem; margin-right: .65rem; }
@media (min-width: 900px) { .help-split .split-side { position: -webkit-sticky; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; } }
@media (max-width: 899px) {
  .help-toc { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0; column-gap: 0; }
  .help-toc li { -webkit-column-break-inside: avoid; break-inside: avoid; }
}
@media (max-width: 599px) { .help-toc { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } }
.help-sec { padding: 1.5rem 1.6rem 1.1rem; line-height: 1.6; }
.help-sec h2 { margin: 0 0 .8rem; font-size: 1.25rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.help-sec ul, .help-sec ol { padding-left: 1.3rem; }
.help-sec li { margin: .3rem 0; }
.help-n { display: inline-block; min-width: 1.9rem; height: 1.9rem; line-height: 1.9rem; text-align: center; border-radius: 50%; font-weight: 700; font-size: .88rem; margin-right: .6rem; vertical-align: middle;
  background: #e8f1fc; background: var(--soft); color: #1f73d1; color: var(--accent); -webkit-flex: none; flex: none; }
.help-who { display: inline-block; font-size: .76rem; font-weight: 700; background: #e7f0fc; background: var(--info-bg); color: #1f62b5; color: var(--info); border-radius: 4px; padding: .2rem .55rem; margin: 0 0 .7rem; }
.help-steps { counter-reset: hs; list-style: none; padding-left: 0 !important; }
.help-steps li { position: relative; counter-increment: hs; padding-left: 2.3rem; margin: .55rem 0; }
.help-steps li::before { content: counter(hs); position: absolute; left: 0; top: .05rem; width: 1.55rem; height: 1.55rem; line-height: 1.55rem; text-align: center; border-radius: 50%;
  font-size: .78rem; font-weight: 700; background: #eeeefc; background: var(--out-bg); color: #4f53cf; color: var(--out); }
.help-tip { background: #fff4d6; background: var(--warn-bg); color: #9a6400; color: var(--warn); border-left: 4px solid #f5b400; border-radius: 4px; padding: .65rem .9rem; margin: .8rem 0; }
.help-top { text-align: right; font-size: .82rem; margin: .6rem 0 0; }
.help-top a { color: #7b8698; color: var(--muted); }
.help-keys td:first-child { white-space: nowrap; }
kbd { display: inline-block; font: 600 .8rem/1.3 ui-monospace, Menlo, Consolas, monospace; padding: .08rem .42rem; border: 1px solid #cfd6e0; border: 1px solid var(--line2); border-bottom-width: 2px;
  border-radius: 4px; background: #f5f8fc; background: var(--hover); color: #2b3445; color: var(--ink); }
@media (max-width: 599px) { .help-sec { padding: 1.2rem 1.1rem .9rem; } .help-sec h2 { font-size: 1.12rem; } }

@media print {
  body.app .top, body.app .side, body.app .nav, body.app .tabbar, body.app .flash, #help-print, .help-top, .pal-back, .help-split .split-side { display: none !important; }
  body.app { background: #fff !important; color: #000 !important; }
  body.app .main { padding: 0 !important; max-width: none; }
  .help-split { display: block !important; }
  .help-sec { border: 0 !important; padding: 0 !important; margin: 0 0 1.2rem !important; page-break-inside: avoid; break-inside: avoid; }
  .help a { color: #000; text-decoration: none; }
  .help-n, .help-steps li::before { border: 1px solid #000; background: #fff !important; color: #000 !important; }
}

/* ================================================================ the "put the app on your phone" bar ===== */
/* Built by public/app.js. Sits just above the tab bar (phones, tablets, and the driver app everywhere); at
   the very bottom beside the menu on a computer. */
.install-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  background: #16334d; color: #fff; padding: .6rem .9rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(10, 25, 50, .2); font-size: .92rem; line-height: 1.4; border-top: 2px solid #1b5680; }
.install-bar .install-text { -webkit-flex: 1; flex: 1; min-width: 0; }
.install-bar a { color: #ffd666; font-weight: 600; }
.install-bar .share-ic { width: 18px; height: 18px; margin: 0 .1rem; vertical-align: -3px; }
.install-bar .install-go { -webkit-flex: none; flex: none; margin-left: .7rem; }
.install-bar .install-x { -webkit-flex: none; flex: none; background: none; border: 0; border-radius: 4px; color: #fff; font-size: 1.6rem; line-height: 1; padding: .2rem .5rem; margin-left: .3rem; cursor: pointer; min-width: 40px; min-height: 40px; }
.install-bar .install-x:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 1023px) {
  .install-bar { bottom: 57px; bottom: calc(57px + env(safe-area-inset-bottom)); padding-bottom: .6rem; }
  body.app.has-install-bar .main { padding-bottom: 180px; }
}
@media (min-width: 1024px) {
  body.app.has-install-bar .main, body.app.has-install-bar .side + .frame .main { padding-bottom: 6rem; }
  .side ~ .install-bar { left: 236px; }
  body.drive .install-bar { bottom: 57px; bottom: calc(57px + env(safe-area-inset-bottom)); padding-bottom: .6rem; }
  body.app.drive.has-install-bar .main { padding-bottom: 180px; }
}
@media print { .install-bar { display: none !important; } }

/* ================================================================ the Get-the-app page =================== */
.getapp-what { font-size: 1.05rem; }
.getapp-steps { padding-left: 1.3rem; }
.getapp-steps li { margin: .45rem 0; line-height: 1.5; }
.getapp-steps .share-ic, .getapp-card .share-ic { width: 20px; height: 20px; vertical-align: -4px; margin: 0 .1rem; }
.getapp-card .card-head { margin-bottom: .7rem; }
.getapp-back { margin-top: 1rem; }
[data-install-btn] { display: none; }   /* shown by public/app.js only when the browser can install */

/* ================================================================ dark mode ============================== */
/* Only the literal colours above that are not fallbacks: the install bar and the search box's shadow. */
@media screen and (prefers-color-scheme: dark) {
  html:not(.theme-light) body.app .install-bar { background: #0b111a; border-top-color: #1b5680; box-shadow: 0 -1px 0 #2a3545; }
  html:not(.theme-light) body.app .pal-back { background: rgba(0, 0, 0, .6); }
  html:not(.theme-light) body.app .pal-box { box-shadow: 0 0 0 1px #2a3545, 0 20px 50px rgba(0, 0, 0, .5); }
  html:not(.theme-light) body.app .pick { box-shadow: none; }
  html:not(.theme-light) body.app .act-k-warn .act-dot { border-color: #f0c674; }
  html:not(.theme-light) body.app .help-tip { border-left-color: #f0c674; }
}
@media screen {
  html.theme-dark body.app .install-bar { background: #0b111a; border-top-color: #1b5680; box-shadow: 0 -1px 0 #2a3545; }
  html.theme-dark body.app .pal-back { background: rgba(0, 0, 0, .6); }
  html.theme-dark body.app .pal-box { box-shadow: 0 0 0 1px #2a3545, 0 20px 50px rgba(0, 0, 0, .5); }
  html.theme-dark body.app .pick { box-shadow: none; }
  html.theme-dark body.app .act-k-warn .act-dot { border-color: #f0c674; }
  html.theme-dark body.app .help-tip { border-left-color: #f0c674; }
}