/* Gold Choice Booking — styles for the people screens: logins and permissions, house rules, reminder rules,
   manager unlock, search and the Ctrl/⌘+K box, the activity log, the help manual, and DARK MODE.
   Old-phone rules as app.css: no CSS grid, no flex gap, a literal colour before each var().

   Dark mode covers the business app only (body.app); booking pages and the front page stay light.
   It is on when (a) the phone or computer is set to dark and the person did not choose Light, or
   (b) the person chose Dark (Account → Light or dark: cookie bk_theme, turned into a class on <html>
   by public/app.js). The SAME rules appear twice below, once per case — change both together.
   Other screens' styles that use var(--card), var(--ink), var(--line), var(--muted) get dark mode
   for free; literal light colours (#fff …) need a line in the dark block. Print is always light. */

/* ---------- More page rows that are buttons (Log out, Lock again) ---------- */
.more-btn { width: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }

/* ---------- Settings: logins, permissions, house rules ---------- */
.settings-jump a { white-space: nowrap; }
.login-off { opacity: .6; }
.perm-line { margin: .15rem 0 .1rem; }
.perm-group { border: 1px solid #e7e0e4; border: 1px solid var(--line); border-radius: 12px; padding: .4rem .9rem .6rem; margin: 0 0 .9rem; }
.perm-group legend { font-weight: 700; padding: 0 .35rem; }
.perm-group .hint { margin-top: 0; }
.perm-page h1 { margin-bottom: .4rem; }

/* ---------- Messages: reminder rules ---------- */
.rule-row .rule-text { margin: .3rem 0 0; padding: .4rem .6rem; border-radius: 8px; background: #f7f4f5; background: var(--bg); white-space: pre-wrap; word-wrap: break-word; }
.rule-off { opacity: .65; }
.rule-when { display: -webkit-flex; display: flex; max-width: 22rem; }
.rule-when input { width: 6rem !important; -webkit-flex: none; flex: none; margin-right: .5rem; text-align: right; }
.rule-when select { -webkit-flex: 1; flex: 1; }
.rule-vars ul { margin: .4rem 0; padding-left: 1.2rem; font-size: .9rem; }
.std-off select { opacity: .7; }

/* ---------- Search page ---------- */
.search-form { display: -webkit-flex; display: flex; margin-bottom: .5rem; }
.search-form input { -webkit-flex: 1; flex: 1; min-width: 0; margin-right: .5rem; }
.search-form .btn { -webkit-flex: none; flex: none; }
.search-group h2 { margin-top: 0; }

/* ---------- The Ctrl/⌘+K search box (built by public/app.js) ---------- */
.pal-back { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(20, 14, 22, .45); padding: 10vh 1rem 1rem; }
.pal-box { max-width: 560px; margin: 0 auto; background: #fff; background: var(--card); color: #241c22; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden; }
.pal-form { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #e7e0e4; border-bottom: 1px solid var(--line); padding: .35rem .6rem; }
.pal-form .pal-input { border: 0 !important; outline: 0 !important; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 1.05rem; background: transparent !important; }
.pal-esc { font-size: .72rem; color: #6f6470; color: var(--muted); border: 1px solid #e7e0e4; border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; margin-left: .4rem; }
.pal-list { list-style: none; margin: 0; padding: .3rem 0; max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pal-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6f6470; color: var(--muted); padding: .55rem .9rem .2rem; font-weight: 600; }
.pal-item { padding: .45rem .9rem; 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: #f8edf1; background: var(--soft); border-left-color: #b04a6f; }
.pal-none { padding: .9rem; color: #6f6470; color: var(--muted); }
.pal-foot { font-size: .75rem; color: #6f6470; color: var(--muted); padding: .4rem .9rem; border-top: 1px solid #e7e0e4; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .pal-back { padding-top: 1rem; } .pal-foot { display: none; } }

/* ---------- Activity ---------- */
.act-filter { padding-bottom: .2rem; }
.act-go .btn { margin-right: .4rem; }
.act-row { display: -webkit-flex; display: flex; }
.act-when { width: 10.5rem; -webkit-flex: none; flex: none; padding-right: .6rem; }
.act-what { -webkit-flex: 1; flex: 1; min-width: 0; word-wrap: break-word; }
.act-unlock { border-left: 4px solid #e0b34a; padding-left: .6rem !important; }
.act-warn .act-what b { color: #a12c2c; color: var(--err); }
@media (max-width: 600px) { .act-row { display: block; } .act-when { width: auto; } }

/* ---------- Help (the manual) ---------- */
.help { max-width: 820px; margin: 0 auto; }
.help-toc { margin: 0; padding-left: 1.4rem; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; }
.help-toc li { margin: .15rem 0; -webkit-column-break-inside: avoid; break-inside: avoid; }
@media (max-width: 600px) { .help-toc { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } }
.help-sec h2 { margin-top: 0; }
.help-n { display: inline-block; min-width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center; border-radius: 999px; background: #b04a6f; color: #fff; font-size: .9rem; margin-right: .3rem; vertical-align: middle; }
.help-who { display: inline-block; font-size: .82rem; background: #e7f0f9; background: var(--info-bg); color: #23507a; color: var(--info); border-radius: 999px; padding: .1rem .6rem; margin: 0 0 .5rem; }
.help-steps li { margin: .25rem 0; }
.help-tip { background: #fff4d9; background: var(--warn-bg); color: #7a5410; color: var(--warn); border-radius: 10px; padding: .55rem .8rem; margin: .6rem 0; }
.help-top { text-align: right; font-size: .85rem; margin: .4rem 0 0; }
.help-keys td:first-child { white-space: nowrap; }
kbd { display: inline-block; font: 600 .82rem/1.3 ui-monospace, Menlo, Consolas, monospace; padding: .05rem .4rem; border: 1px solid #d9cfd5; border-bottom-width: 2px; border-radius: 6px; background: #faf8f9; color: #241c22; }

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

/* ========== DARK MODE (1 of 2): the phone or computer is set to dark, and Light was not chosen ========== */
@media screen and (prefers-color-scheme: dark) {
  html:not(.theme-light) body.app { --bg: #16121a; --card: #221c26; --ink: #ece6ea; --muted: #a99fac; --line: #3a3140; --head: #0f0b12; --accent: #e98fb2; --accent-ink: #ffffff; --soft: #3a2531; --ok: #8fd19e; --ok-bg: #1d3323; --err: #f3a1a1; --err-bg: #3d1f22; --info: #9cc4ea; --info-bg: #1b2a3a; --warn: #f0c674; --warn-bg: #3a2f17; background: #16121a; color: #ece6ea; color-scheme: dark; }
  html:not(.theme-light) body.app .top { background: #0f0b12; }
  html:not(.theme-light) body.app .top .btn-book,
  html:not(.theme-light) body.app .tabbar .tab-book .ic { background: #b04a6f; }
  html:not(.theme-light) body.app .tabbar { background: #1d1821; border-top-color: #3a3140; }
  html:not(.theme-light) body.app .tabbar a { color: #a99fac; }
  html:not(.theme-light) body.app .tabbar a.active { color: #e98fb2; }
  html:not(.theme-light) body.app .nav.desk { background: #1d1821; border-bottom-color: #3a3140; }
  html:not(.theme-light) body.app .nav.desk a { color: #ece6ea; }
  html:not(.theme-light) body.app .card,
  html:not(.theme-light) body.app .tile,
  html:not(.theme-light) body.app .agenda li,
  html:not(.theme-light) body.app .cal,
  html:not(.theme-light) body.app .cal-head,
  html:not(.theme-light) body.app .table,
  html:not(.theme-light) body.app .summary,
  html:not(.theme-light) body.app .svc,
  html:not(.theme-light) body.app .datestrip a,
  html:not(.theme-light) body.app .datestrip span,
  html:not(.theme-light) body.app .times a,
  html:not(.theme-light) body.app .times label,
  html:not(.theme-light) body.app .seg a,
  html:not(.theme-light) body.app .chip,
  html:not(.theme-light) body.app .bd-card { background: #221c26; border-color: #3a3140; color: #ece6ea; }
  html:not(.theme-light) body.app .agenda li { border-left-color: #b04a6f; }
  html:not(.theme-light) body.app .table th,
  html:not(.theme-light) body.app .table td,
  html:not(.theme-light) body.app .list > li { border-color: #3a3140; }
  html:not(.theme-light) body.app small,
  html:not(.theme-light) body.app .hint,
  html:not(.theme-light) body.app .muted,
  html:not(.theme-light) body.app .empty,
  html:not(.theme-light) body.app .table th,
  html:not(.theme-light) body.app .daynav h1 small,
  html:not(.theme-light) body.app .pal-group,
  html:not(.theme-light) body.app .cal-times .cal-hour,
  html:not(.theme-light) body.app .table tr.muted td { color: #a99fac; }
  html:not(.theme-light) body.app a { color: #e98fb2; }
  html:not(.theme-light) body.app a.btn,
  html:not(.theme-light) body.app a.tile,
  html:not(.theme-light) body.app a.svc,
  html:not(.theme-light) body.app .agenda a.item,
  html:not(.theme-light) body.app .rowlink { color: #ece6ea; }
  html:not(.theme-light) body.app .top a,
  html:not(.theme-light) body.app .top .brand,
  html:not(.theme-light) body.app .top .who,
  html:not(.theme-light) body.app .top .bell { color: #fff; }
  html:not(.theme-light) body.app input:not([type=checkbox]):not([type=radio]):not([type=color]),
  html:not(.theme-light) body.app select,
  html:not(.theme-light) body.app textarea { background-color: #1a151d; border-color: #4a3f50; color: #ece6ea; }
  html:not(.theme-light) body.app select { background-image: linear-gradient(45deg, transparent 50%, #a99fac 50%), linear-gradient(135deg, #a99fac 50%, transparent 50%); }
  html:not(.theme-light) body.app input::placeholder,
  html:not(.theme-light) body.app textarea::placeholder { color: #7d7280; }
  html:not(.theme-light) body.app input:focus,
  html:not(.theme-light) body.app select:focus,
  html:not(.theme-light) body.app textarea:focus { outline-color: #e98fb2; }
  html:not(.theme-light) body.app .perm-group,
  html:not(.theme-light) body.app .pal-esc,
  html:not(.theme-light) body.app kbd { border-color: #4a3f50; }
  html:not(.theme-light) body.app kbd { background: #2a2330; color: #ece6ea; }
  html:not(.theme-light) body.app .btn { background: #2a2330; border-color: #4a3f50; color: #ece6ea; }
  html:not(.theme-light) body.app .btn-primary { background: #b04a6f; border-color: transparent; color: #fff; }
  html:not(.theme-light) body.app .btn-dark,
  html:not(.theme-light) body.app .seg a.on,
  html:not(.theme-light) body.app .chip.on { background: #6a5573; border-color: transparent; color: #fff; }
  html:not(.theme-light) body.app .btn-danger { color: #f3a1a1; border-color: #6b3236; }
  html:not(.theme-light) body.app .flash-ok { background: #1d3323; color: #8fd19e; }
  html:not(.theme-light) body.app .flash-err { background: #3d1f22; color: #f3a1a1; }
  html:not(.theme-light) body.app .flash-info { background: #1b2a3a; color: #9cc4ea; }
  html:not(.theme-light) body.app .flash-warn,
  html:not(.theme-light) body.app .tile.warn,
  html:not(.theme-light) body.app .help-tip { background: #3a2f17; color: #f0c674; }
  html:not(.theme-light) body.app .tag { background: #3a3140; color: #ddd4da; }
  html:not(.theme-light) body.app .st-req,
  html:not(.theme-light) body.app .ctag-vip,
  html:not(.theme-light) body.app .bd-pill-req,
  html:not(.theme-light) body.app .bd-pill-warn { background: #3a2f17; color: #f0c674; border-color: #5c4a22; }
  html:not(.theme-light) body.app .st-ok { background: #1b2a3a; color: #9cc4ea; }
  html:not(.theme-light) body.app .st-here { background: #2e2340; color: #c9a8f0; }
  html:not(.theme-light) body.app .st-done { background: #1d3323; color: #8fd19e; }
  html:not(.theme-light) body.app .st-no,
  html:not(.theme-light) body.app .ctag-warn,
  html:not(.theme-light) body.app .bd-pill-no { background: #3d1f22; color: #f3a1a1; border-color: #6b3236; }
  html:not(.theme-light) body.app .st-cx { background: #2c262f; color: #a99fac; }
  html:not(.theme-light) body.app .ctag { background: #3a2531; color: #f0bcd0; border-color: #5a3646; }
  html:not(.theme-light) body.app .help-who { background: #1b2a3a; color: #9cc4ea; }
  html:not(.theme-light) body.app .cal-col,
  html:not(.theme-light) body.app .cal-times { border-right-color: #2e2733; }
  html:not(.theme-light) body.app .cal-hour { border-top-color: #2e2733; }
  html:not(.theme-light) body.app .cal-head { border-bottom-color: #3a3140; }
  html:not(.theme-light) body.app .cal-off { background: repeating-linear-gradient(135deg, #1b161e, #1b161e 6px, #221c26 6px, #221c26 12px); }
  html:not(.theme-light) body.app .cal-appt { background: #3a2531; color: #f3ecf0; box-shadow: none; }
  html:not(.theme-light) body.app .cal-appt.st-req { background: #3a2f17; }
  html:not(.theme-light) body.app .cal-appt.st-no { background: #3d1f22; }
  html:not(.theme-light) body.app .cal-slot:hover { background: rgba(233, 143, 178, .12); }
  html:not(.theme-light) body.app .pinned-note,
  html:not(.theme-light) body.app .bd-card.bd-warn { background: #3a2f17; border-color: #5c4a22; color: #f0c674; }
  html:not(.theme-light) body.app .bd-card.bd-alert { background: #3d1f22; border-color: #6b3236; }
  /* the board's waited-too-long cards and tiles, the pinned note label, month-view day counts: readable in the dark */
  html:not(.theme-light) body.app .bd-card.bd-warn .bd-meta,
  html:not(.theme-light) body.app .bd-card.bd-warn .bd-sub,
  html:not(.theme-light) body.app .bd-card.bd-alert .bd-meta,
  html:not(.theme-light) body.app .bd-card.bd-alert .bd-sub { color: #e6dbe2; }
  html:not(.theme-light) body.app .bd-tile-warn { background: #3a2f17 !important; }
  html:not(.theme-light) body.app .bd-tile-warn b { color: #f0c674; }
  html:not(.theme-light) body.app .bd-tile-alert { background: #3d1f22 !important; }
  html:not(.theme-light) body.app .bd-tile-alert b { color: #f3a1a1; }
  html:not(.theme-light) body.app .bd-tile-warn span,
  html:not(.theme-light) body.app .bd-tile-alert span { color: #e6dbe2; }
  html:not(.theme-light) body.app .pinned-note b { color: #f0c674; }
  html:not(.theme-light) body.app .mo-count { color: #1f1823; }
  html:not(.theme-light) body.app .pkg-note,
  html:not(.theme-light) body.app .pkg-adopt,
  html:not(.theme-light) body.app .rule-row .rule-text { background: #1a151d; }
  html:not(.theme-light) body.app .rp-bar { background: #2e2733; }
  html:not(.theme-light) body.app .rp-heat td { color: #ece6ea; }
  html:not(.theme-light) body.app .pal-item.on { background: #3a2531; }
}

/* ========== DARK MODE (2 of 2): Dark was chosen on the Account page (same rules as above) ========== */
@media screen {
  html.theme-dark body.app { --bg: #16121a; --card: #221c26; --ink: #ece6ea; --muted: #a99fac; --line: #3a3140; --head: #0f0b12; --accent: #e98fb2; --accent-ink: #ffffff; --soft: #3a2531; --ok: #8fd19e; --ok-bg: #1d3323; --err: #f3a1a1; --err-bg: #3d1f22; --info: #9cc4ea; --info-bg: #1b2a3a; --warn: #f0c674; --warn-bg: #3a2f17; background: #16121a; color: #ece6ea; color-scheme: dark; }
  html.theme-dark body.app .top { background: #0f0b12; }
  html.theme-dark body.app .top .btn-book,
  html.theme-dark body.app .tabbar .tab-book .ic { background: #b04a6f; }
  html.theme-dark body.app .tabbar { background: #1d1821; border-top-color: #3a3140; }
  html.theme-dark body.app .tabbar a { color: #a99fac; }
  html.theme-dark body.app .tabbar a.active { color: #e98fb2; }
  html.theme-dark body.app .nav.desk { background: #1d1821; border-bottom-color: #3a3140; }
  html.theme-dark body.app .nav.desk a { color: #ece6ea; }
  html.theme-dark body.app .card,
  html.theme-dark body.app .tile,
  html.theme-dark body.app .agenda li,
  html.theme-dark body.app .cal,
  html.theme-dark body.app .cal-head,
  html.theme-dark body.app .table,
  html.theme-dark body.app .summary,
  html.theme-dark body.app .svc,
  html.theme-dark body.app .datestrip a,
  html.theme-dark body.app .datestrip span,
  html.theme-dark body.app .times a,
  html.theme-dark body.app .times label,
  html.theme-dark body.app .seg a,
  html.theme-dark body.app .chip,
  html.theme-dark body.app .bd-card { background: #221c26; border-color: #3a3140; color: #ece6ea; }
  html.theme-dark body.app .agenda li { border-left-color: #b04a6f; }
  html.theme-dark body.app .table th,
  html.theme-dark body.app .table td,
  html.theme-dark body.app .list > li { border-color: #3a3140; }
  html.theme-dark body.app small,
  html.theme-dark body.app .hint,
  html.theme-dark body.app .muted,
  html.theme-dark body.app .empty,
  html.theme-dark body.app .table th,
  html.theme-dark body.app .daynav h1 small,
  html.theme-dark body.app .pal-group,
  html.theme-dark body.app .cal-times .cal-hour,
  html.theme-dark body.app .table tr.muted td { color: #a99fac; }
  html.theme-dark body.app a { color: #e98fb2; }
  html.theme-dark body.app a.btn,
  html.theme-dark body.app a.tile,
  html.theme-dark body.app a.svc,
  html.theme-dark body.app .agenda a.item,
  html.theme-dark body.app .rowlink { color: #ece6ea; }
  html.theme-dark body.app .top a,
  html.theme-dark body.app .top .brand,
  html.theme-dark body.app .top .who,
  html.theme-dark body.app .top .bell { color: #fff; }
  html.theme-dark body.app input:not([type=checkbox]):not([type=radio]):not([type=color]),
  html.theme-dark body.app select,
  html.theme-dark body.app textarea { background-color: #1a151d; border-color: #4a3f50; color: #ece6ea; }
  html.theme-dark body.app select { background-image: linear-gradient(45deg, transparent 50%, #a99fac 50%), linear-gradient(135deg, #a99fac 50%, transparent 50%); }
  html.theme-dark body.app input::placeholder,
  html.theme-dark body.app textarea::placeholder { color: #7d7280; }
  html.theme-dark body.app input:focus,
  html.theme-dark body.app select:focus,
  html.theme-dark body.app textarea:focus { outline-color: #e98fb2; }
  html.theme-dark body.app .perm-group,
  html.theme-dark body.app .pal-esc,
  html.theme-dark body.app kbd { border-color: #4a3f50; }
  html.theme-dark body.app kbd { background: #2a2330; color: #ece6ea; }
  html.theme-dark body.app .btn { background: #2a2330; border-color: #4a3f50; color: #ece6ea; }
  html.theme-dark body.app .btn-primary { background: #b04a6f; border-color: transparent; color: #fff; }
  html.theme-dark body.app .btn-dark,
  html.theme-dark body.app .seg a.on,
  html.theme-dark body.app .chip.on { background: #6a5573; border-color: transparent; color: #fff; }
  html.theme-dark body.app .btn-danger { color: #f3a1a1; border-color: #6b3236; }
  html.theme-dark body.app .flash-ok { background: #1d3323; color: #8fd19e; }
  html.theme-dark body.app .flash-err { background: #3d1f22; color: #f3a1a1; }
  html.theme-dark body.app .flash-info { background: #1b2a3a; color: #9cc4ea; }
  html.theme-dark body.app .flash-warn,
  html.theme-dark body.app .tile.warn,
  html.theme-dark body.app .help-tip { background: #3a2f17; color: #f0c674; }
  html.theme-dark body.app .tag { background: #3a3140; color: #ddd4da; }
  html.theme-dark body.app .st-req,
  html.theme-dark body.app .ctag-vip,
  html.theme-dark body.app .bd-pill-req,
  html.theme-dark body.app .bd-pill-warn { background: #3a2f17; color: #f0c674; border-color: #5c4a22; }
  html.theme-dark body.app .st-ok { background: #1b2a3a; color: #9cc4ea; }
  html.theme-dark body.app .st-here { background: #2e2340; color: #c9a8f0; }
  html.theme-dark body.app .st-done { background: #1d3323; color: #8fd19e; }
  html.theme-dark body.app .st-no,
  html.theme-dark body.app .ctag-warn,
  html.theme-dark body.app .bd-pill-no { background: #3d1f22; color: #f3a1a1; border-color: #6b3236; }
  html.theme-dark body.app .st-cx { background: #2c262f; color: #a99fac; }
  html.theme-dark body.app .ctag { background: #3a2531; color: #f0bcd0; border-color: #5a3646; }
  html.theme-dark body.app .help-who { background: #1b2a3a; color: #9cc4ea; }
  html.theme-dark body.app .cal-col,
  html.theme-dark body.app .cal-times { border-right-color: #2e2733; }
  html.theme-dark body.app .cal-hour { border-top-color: #2e2733; }
  html.theme-dark body.app .cal-head { border-bottom-color: #3a3140; }
  html.theme-dark body.app .cal-off { background: repeating-linear-gradient(135deg, #1b161e, #1b161e 6px, #221c26 6px, #221c26 12px); }
  html.theme-dark body.app .cal-appt { background: #3a2531; color: #f3ecf0; box-shadow: none; }
  html.theme-dark body.app .cal-appt.st-req { background: #3a2f17; }
  html.theme-dark body.app .cal-appt.st-no { background: #3d1f22; }
  html.theme-dark body.app .cal-slot:hover { background: rgba(233, 143, 178, .12); }
  html.theme-dark body.app .pinned-note,
  html.theme-dark body.app .bd-card.bd-warn { background: #3a2f17; border-color: #5c4a22; color: #f0c674; }
  html.theme-dark body.app .bd-card.bd-alert { background: #3d1f22; border-color: #6b3236; }
  /* the board's waited-too-long cards and tiles, the pinned note label, month-view day counts: readable in the dark */
  html.theme-dark body.app .bd-card.bd-warn .bd-meta,
  html.theme-dark body.app .bd-card.bd-warn .bd-sub,
  html.theme-dark body.app .bd-card.bd-alert .bd-meta,
  html.theme-dark body.app .bd-card.bd-alert .bd-sub { color: #e6dbe2; }
  html.theme-dark body.app .bd-tile-warn { background: #3a2f17 !important; }
  html.theme-dark body.app .bd-tile-warn b { color: #f0c674; }
  html.theme-dark body.app .bd-tile-alert { background: #3d1f22 !important; }
  html.theme-dark body.app .bd-tile-alert b { color: #f3a1a1; }
  html.theme-dark body.app .bd-tile-warn span,
  html.theme-dark body.app .bd-tile-alert span { color: #e6dbe2; }
  html.theme-dark body.app .pinned-note b { color: #f0c674; }
  html.theme-dark body.app .mo-count { color: #1f1823; }
  html.theme-dark body.app .pkg-note,
  html.theme-dark body.app .pkg-adopt,
  html.theme-dark body.app .rule-row .rule-text { background: #1a151d; }
  html.theme-dark body.app .rp-bar { background: #2e2733; }
  html.theme-dark body.app .rp-heat td { color: #ece6ea; }
  html.theme-dark body.app .pal-item.on { background: #3a2531; }
}

/* the demo's welcome tour (Today) */
.demo-tour { border: 2px solid #b04a6f; border-color: var(--accent, #b04a6f); }
.demo-tour ol { margin: .5rem 0 .8rem; padding-left: 1.3rem; }
.demo-tour li { margin: .45rem 0; line-height: 1.45; }

/* ---------- the home-screen app: the "Add to Home Screen" bar (built by public/app.js) ---------- */
/* Sits above the phone tab bar (54px + the iPhone's home-bar inset); at the very bottom 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: #2b2230; background: var(--head); color: #fff; padding: .6rem .75rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); font-size: .92rem; line-height: 1.4; }
.install-bar .install-text { -webkit-flex: 1; flex: 1; min-width: 0; }
.install-bar a { color: #f3c6d8; }
.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: .6rem; }
.install-bar .install-x { -webkit-flex: none; flex: none; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; padding: .2rem .5rem; margin-left: .3rem; cursor: pointer; min-width: 40px; min-height: 40px; }
@media (max-width: 819px) {
  .install-bar { bottom: 54px; bottom: calc(54px + env(safe-area-inset-bottom)); padding-bottom: .6rem; }
  body.app.has-install-bar .main { padding-bottom: 180px; }
}
@media (min-width: 820px) { body.app.has-install-bar .main { padding-bottom: 6rem; } }
@media print { .install-bar { display: none !important; } }
html.theme-dark body.app .install-bar { border-top: 1px solid #3a3140; }
@media screen and (prefers-color-scheme: dark) { html:not(.theme-light) body.app .install-bar { border-top: 1px solid #3a3140; } }

/* ---------- the Get-the-app page ---------- */
.getapp-what { font-size: 1.05rem; }
.getapp-steps li { margin: .35rem 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 h2 { margin-top: 0; }
[data-install-btn] { display: none; }   /* shown by public/app.js only when the browser can install */