/* Bluebird — the operator shell.
 *
 * One stylesheet for every operator screen. The palette lives here and nowhere
 * else: no rule below hard-codes a colour, so dark mode is a variable swap
 * rather than a second stylesheet that drifts out of sync with the first.
 *
 * Layout is Bokun-shaped: a persistent left rail with grouped destinations, a
 * thin top bar for identity and the setup counter, and a content column that
 * every screen fills. The rail is the map of the product -- it lists things
 * that are not built yet, because a navigation that only shows what exists
 * cannot tell you what is missing.
 */

:root {
  --ink:#11181c; --muted:#5c6b73; --line:#dfe5e8; --bg:#f7f9fa;
  --accent:#1f6f8b; --bad:#b3261e; --ok:#1b7f4f; --warn:#8a5a00;
  --surface:#fff; --surface-2:#eef2f4; --shadow:rgba(16,32,40,.08);
  /* The rail follows the theme (Mitch, 27 Sep): light in light mode. */
  --rail:#ffffff; --rail-ink:#2c3a41; --rail-ink-dim:#6b7c84;
  --rail-active:#1f6f8b; --rail-line:#e3e9ec;
  --rail-hover:rgba(16,32,40,.05); --rail-sel:rgba(31,111,139,.10); --rail-strong:#11181c;
  --rail-w:236px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#e6edf0; --muted:#93a4ab; --line:#27333b; --bg:#0f1417;
    --surface:#171f24; --surface-2:#1d272d; --shadow:rgba(0,0,0,.4);
    --accent:#5cb3d1; --bad:#ff7a6e; --ok:#54cf94; --warn:#e8bc4e;
    --rail:#0b1114; --rail-ink:#c8d6dc; --rail-ink-dim:#75878f;
    --rail-active:#2b6d85; --rail-line:#1b262c;
    --rail-hover:rgba(255,255,255,.05); --rail-sel:rgba(255,255,255,.07); --rail-strong:#fff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink:#e6edf0; --muted:#93a4ab; --line:#27333b; --bg:#0f1417;
  --surface:#171f24; --surface-2:#1d272d; --shadow:rgba(0,0,0,.4);
  --accent:#5cb3d1; --bad:#ff7a6e; --ok:#54cf94; --warn:#e8bc4e;
  --rail:#0b1114; --rail-ink:#c8d6dc; --rail-ink-dim:#75878f;
  --rail-active:#2b6d85; --rail-line:#1b262c;
  --rail-hover:rgba(255,255,255,.05); --rail-sel:rgba(255,255,255,.07); --rail-strong:#fff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
}
a { color:var(--accent); }

/* ------------------------------------------------------------------ rail -- */

.bb-shell { display:flex; min-height:100vh; }

.bb-rail {
  width:var(--rail-w); flex:0 0 var(--rail-w); background:var(--rail);
  color:var(--rail-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:1px solid var(--rail-line);
}
.bb-brand {
  display:flex; align-items:center; gap:9px; padding:16px 16px 14px;
  border-bottom:1px solid var(--rail-line);
}
.bb-brand .mark {
  width:22px; height:22px; border-radius:6px; flex:0 0 22px;
  background:url(/assets/sq-icon.svg) center/cover no-repeat;
}
.bb-brand .name { font-weight:700; letter-spacing:-0.01em; color:var(--rail-strong); font-size:15px; }
.bb-brand .who { font-size:11.5px; color:var(--rail-ink-dim); }
/* The business's own logo in place of the mark (chat B, 115). */
.bb-brand.has-logo { flex-direction:column; align-items:flex-start; gap:6px; }
.bb-brand.has-logo .mark, .bb-brand.has-logo .name { display:none; }
.bb-logo-box img { display:block; max-height:40px; max-width:176px; width:auto; height:auto; object-fit:contain; }
.bb-logo-box .on-dark { display:none; }
:root[data-theme="dark"] .bb-logo-box .on-light { display:none; }
:root[data-theme="dark"] .bb-logo-box .on-dark { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bb-logo-box .on-light { display:none; }
  :root:not([data-theme="light"]) .bb-logo-box .on-dark { display:block; }
}
#bbPrintHead { display:none; }
@media print {
  #bbPrintHead { display:flex !important; align-items:center; gap:12px; padding:0 0 10px; margin:0 0 12px; border-bottom:1px solid #ccc; color:#000; }
  #bbPrintHead img { max-height:40px; max-width:200px; }
  #bbPrintHead b { font-size:16px; }
  #bbPrintHead span { margin-left:auto; font-size:11px; color:#555; }
}

.bb-groups { padding:8px 0 20px; flex:1; }
.bb-group { margin-top:12px; }
.bb-group > h3 {
  /* Mitch, 14 Oct 2026: "our blue with bigger font. it being grey makes it blend in" */
  margin:0; padding:8px 16px 5px; font-size:13px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent);
}
/* #102: sub-headings inside a group, and a group folded until opened. */
.bb-sub > h4 {
  margin:6px 0 0; padding:4px 16px 2px 20px; font-size:11px; font-weight:600;
  color:var(--rail-ink-dim); letter-spacing:.02em;
}
.bb-group.bb-fold > h3 { cursor:pointer; display:flex; align-items:center; gap:6px; user-select:none; }
.bb-group.bb-fold > h3:hover { color:var(--accent); filter:brightness(1.15); }
.bb-group.bb-fold > h3 .bb-chev { font-size:13px; line-height:1; transition:transform .15s; margin-left:auto; padding-right:2px; }
.bb-group.bb-fold.open > h3 .bb-chev { transform:rotate(90deg); }
.bb-group.bb-fold:not(.open) > :not(h3) { display:none; }
.bb-nav-edit .bb-group.bb-fold:not(.open) > :not(h3) { display:block; }
/* A sub-heading whose screens are all hidden (Customize) goes too. */
.bb-sub:not(:has(.bb-link:not(.bb-off))) { display:none; }
.bb-nav-edit .bb-sub { display:block; }
.bb-link {
  display:flex; align-items:center; gap:9px; padding:7px 16px;
  color:var(--rail-ink); text-decoration:none; font-size:14px;
  border-left:3px solid transparent;
}
.bb-link:hover { background:var(--rail-hover); color:var(--rail-strong); }
.bb-link.active {
  background:var(--rail-sel); color:var(--rail-strong); font-weight:600;
  border-left-color:var(--rail-active);
}
.bb-link .ico { width:16px; text-align:center; opacity:.85; flex:0 0 16px; font-size:13px; }
.bb-link .txt { flex:1; }

/* An unbuilt destination is dimmed and carries a dot -- visible, reachable,
   and honestly labelled. Hiding it would make the product look finished. */
.bb-link.soon { color:var(--rail-ink-dim); }
.bb-link.soon:hover { color:var(--rail-ink); }
.bb-link .dot {
  width:5px; height:5px; border-radius:50%; background:var(--rail-ink-dim); opacity:.8;
}
.bb-link .count {
  font-size:11px; font-weight:700; padding:1px 6px; border-radius:99px;
  background:var(--rail-active); color:#fff;
}

.bb-railfoot { padding:12px 16px 18px; border-top:1px solid var(--rail-line); font-size:12.5px; }
.bb-railfoot a { color:var(--rail-ink-dim); text-decoration:none; display:block; padding:3px 0; }
.bb-railfoot a:hover { color:var(--rail-strong); }

/* --------------------------------------------------------------- content -- */

.bb-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.bb-top {
  display:flex; align-items:center; gap:12px; padding:12px 24px;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.bb-top .grow { flex:1; min-width:0; }
.bb-top h1 { font-size:17px; margin:0; letter-spacing:-0.01em; }
.bb-top .crumb { font-size:12.5px; color:var(--muted); }
/* a.bb-setup, not .bb-setup: a page's own .todo / .done (Payments, Home,
   Quick book) must not reach the header pill (click test 1 Oct: clipped). */
a.bb-setup, a.bb-setup.todo, a.bb-setup.done {
  font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:99px;
  text-decoration:none; white-space:nowrap; margin:0; display:inline-block;
  text-align:center; list-style:none; gap:0;
}
.bb-setup.todo { background:color-mix(in srgb, var(--warn) 18%, var(--surface)); color:var(--warn); }
.bb-setup.done { background:color-mix(in srgb, var(--ok) 15%, var(--surface)); color:var(--ok); }

/* Use the screen (Mitch, 26 Sep: "adjust to the screen size and use capable
   space"): pages grow with the window up to a wide limit; form fields stay a
   readable width so a settings box isn't a mile long. */
.bb-body { padding:22px clamp(14px, 2vw, 32px) 72px; max-width:1680px; width:100%; }
.bb-body .card :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { max-width:760px; }
@media (min-width: 1500px) { .bb-body { padding-top:26px; } }

.bb-burger { display:none; background:none; border:0; color:var(--ink); font-size:20px;
             cursor:pointer; padding:0 4px; margin:0; }

@media (max-width: 860px) {
  .bb-rail { position:fixed; z-index:30; transform:translateX(-100%); transition:transform .18s; }
  .bb-shell.open .bb-rail { transform:none; box-shadow:0 0 40px var(--shadow); }
  .bb-burger { display:block; }
  .bb-body { padding:16px 14px 64px; }
  .bb-top { padding:10px 14px; }
}

/* ---------------------------------------------------------- common bits -- */

.card { background:var(--surface); border:1px solid var(--line); border-radius:11px;
        padding:18px 20px; margin-bottom:16px; }
.card > h2 { font-size:15px; margin:0 0 2px; }
.card > .hint, .hint { color:var(--muted); font-size:13px; margin:0 0 12px; }
.muted { color:var(--muted); }
.small { font-size:13px; }

label { display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
input, select, textarea {
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font-size:15px; background:var(--surface); color:var(--ink); font-family:inherit;
}
button { padding:8px 15px; border:0; border-radius:7px; background:var(--accent);
         color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; }
button.secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
button.danger { background:var(--bad); }
button:disabled { opacity:.5; cursor:default; }

/* Every operator screen that has a list view and a detail view toggles between
   them with .hide. It lived in items.html's own <style> for a while, which
   meant bookings.html shipped with a detail view that opened correctly and was
   simply never displayed -- no error, no clue, just a page that ignored clicks.
   One definition, in the one stylesheet every screen loads. */
.hide { display:none !important; }

.badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px;
         font-weight:600; white-space:nowrap; }
.b-ok    { background:color-mix(in srgb, var(--ok) 15%, var(--surface));   color:var(--ok); }
.b-block { background:color-mix(in srgb, var(--warn) 18%, var(--surface)); color:var(--warn); }
.b-bad   { background:color-mix(in srgb, var(--bad) 13%, var(--surface));  color:var(--bad); }
.b-none  { background:var(--surface-2); color:var(--muted); }

.msg { padding:10px 12px; border-radius:7px; font-size:14px; margin-top:12px; display:none; }
.msg.bad { background:color-mix(in srgb, var(--bad) 13%, var(--surface)); color:var(--bad); display:block; }
.msg.ok  { background:color-mix(in srgb, var(--ok) 13%, var(--surface));  color:var(--ok);  display:block; }
.hidden { display:none !important; }
code { background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:13px; }

/* ------------------------------------------------------- support banner -- */
/* Above the rail and the content both, full width, and not dismissible. The
 * operator does not get to accidentally hide the fact that platform staff are
 * in their account -- they get to END it, which is a different button. */

.bb-support {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.4;
  background: var(--warn); color: #1a1205;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.bb-support strong { font-weight: 700; }
.bb-support a { color: inherit; text-decoration: underline; margin-left: auto; }

/* Moving between screens without a blink (Mitch 28 Sep: "make it so the left
   bar doesnt reload at all? I dont even like when it flashes" / "sometimes it
   glitches sometimes it just blinks"). A dashboard page arrives as a bare
   <main>; shell.js wraps it in the sidebar and header a moment later. Until
   then nothing is shown, so the browser keeps the page you came from on
   screen (it waits for the new one to have something to draw) and then
   swaps straight to the finished page, sidebar already in place and
   scrolled where it was. If the script ever failed, the page shows anyway
   after 1.5 seconds. Only dashboard pages start with a bare <main>. */
body > main { visibility: hidden; animation: bb-show 0s linear 1.5s forwards; }
@keyframes bb-show { to { visibility: visible; } }

/* The sidebar's page frame (shell.js: THE SIDEBAR NEVER RELOADS). */
.bb-frames { flex:1; min-width:0; position:relative; height:100vh; }
.bb-frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--bg); }
.bb-frame.loading { visibility:hidden; }
html.bb-embed .bb-rail, html.bb-embed #bbSupportBanner { display:none !important; }

/* Side Quest Booking logo (Mitch, 1 Oct 2026): SIDE QUEST, with a much smaller
   BOOKING under it. Text, so it follows the theme and the page's colour. */
.sq-logo { display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.sq-logo .sq-1 { font-weight:800; letter-spacing:-0.015em; }
.sq-logo .sq-2 { font-size:0.42em; font-weight:600; letter-spacing:0.34em; text-transform:uppercase; margin-top:0.3em; padding-left:0.34em; opacity:0.75; }
.bb-brand .sq-logo { align-items:flex-start; }
.bb-brand .sq-logo .sq-2 { padding-left:0; }
.si-foot .sq-logo { font-size:16px; }
.sq-foot { text-align:center; margin:22px 0 28px; color:var(--muted, #6b7280); font-size:16px; }

/* The logo at the top of the sign-in helper pages (forgot, reset, invite). */
.sq-head { margin-bottom:14px; font-size:20px; color:var(--ink, #111827); }
.sq-head .sq-logo { align-items:flex-start; }
.sq-head .sq-logo .sq-2 { padding-left:0; }

/* The logo's mark (1 Oct 2026, Mitch: the treasure map, pixelated): a folded
   pixel map left of SIDE QUEST / BOOKING. The sidebar already has its square
   icon (.mark), so it shows the words only. */
.sq-logo { display:inline-grid; grid-template-columns:auto auto; column-gap:0.34em; align-items:center; justify-items:start; }
.sq-logo::before { content:""; grid-row:1 / 3; width:1.75em; height:1.53em; background:url(/assets/sq-logo-mark.svg) center/contain no-repeat; image-rendering:pixelated; }
.sq-logo .sq-1, .sq-logo .sq-2 { grid-column:2; }
.sq-logo .sq-2 { padding-left:0; }
.bb-brand .sq-logo::before { display:none; }

/* Logo B (1 Oct 2026): pixel map D, "Side" in Inter 800, "Quest" slightly
   pixelated in the map teal (a mask, so the colour follows the theme; the
   word stays real text for copy and screen readers). */
@font-face { font-family:"SQ Logo"; font-weight:800; font-display:swap; src:url(/assets/sq-logo-800.woff2) format("woff2"); }
:root { --sq-quest:#16708c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sq-quest:#5cc0e0; } }
:root[data-theme="dark"] { --sq-quest:#5cc0e0; }
.sq-logo .sq-1 { font-family:"SQ Logo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:800; letter-spacing:-0.015em; white-space:nowrap; }
.sq-logo .sq-q { display:inline-block; width:2.9102em; height:0.864em; vertical-align:-0.0909em; overflow:hidden; color:transparent; text-indent:100%; white-space:nowrap; background:var(--sq-quest); -webkit-mask:url(/assets/sq-quest.svg) 0 0/100% 100% no-repeat; mask:url(/assets/sq-quest.svg) 0 0/100% 100% no-repeat; }
.sq-logo::before { width:1.6em; height:1.6em; }

/* Logo B final (1 Oct 2026): the light map on light screens, the dark map on
   dark ones; BOOKING spread across the full width under "Side Quest". */
:root { --sq-mark:url(/assets/sq-logo-mark.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sq-mark:url(/assets/sq-logo-mark-dark.svg); } }
:root[data-theme="dark"] { --sq-mark:url(/assets/sq-logo-mark-dark.svg); }
.sq-logo::before { background-image:var(--sq-mark); }
.bb-brand .mark { background-image:var(--sq-mark); }
.sq-logo .sq-2 { justify-self:stretch; display:flex; justify-content:space-between; letter-spacing:0; padding:0 0.05em; font-size:max(0.25em, 6px); font-weight:700; margin-top:0.4em; }
.sq-logo .sq-2 > span { display:block; }

/* Layout A (Mitch, 2 Oct 2026): Side Quest on top, the business in its own
   tile, line icons, Help and the account pinned at the bottom, collapsible. */
.bb-rail { overflow:hidden; }
.bb-groups { overflow-y:auto; min-height:0; }
.bb-brand { border-bottom:0; padding:16px 16px 8px; }
.bb-biz { position:relative; margin:2px 10px 6px; padding:8px 10px; border:1px solid var(--rail-line); border-radius:10px;
  display:flex; align-items:center; gap:9px; background:color-mix(in srgb, var(--rail-strong) 3%, var(--rail)); }
.bb-av { width:32px; height:32px; border-radius:8px; flex:0 0 32px; display:grid; place-items:center; overflow:hidden;
  background:#0f3f4f; color:#fff; font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.bb-av.has-logo { background:#fff; border:1px solid var(--rail-line); }
.bb-av img { max-width:100%; max-height:100%; object-fit:contain; }
.bb-av .on-dark { display:none; }
:root[data-theme="dark"] .bb-av .on-light { display:none; } :root[data-theme="dark"] .bb-av .on-dark { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-av .on-light { display:none; } :root:not([data-theme="light"]) .bb-av .on-dark { display:block; } }
/* The logo on the background it was made for (259, Mitch 13 Oct): one picture, either theme. */
.bb-av.has-logo.as-made.bg-light { background:#fff; border:1px solid var(--rail-line); }
.bb-av.has-logo.as-made.bg-dark { background:#111827; border:1px solid #111827; }
.bb-av.as-made img.as-made { display:block; }
.bb-logo-box.as-made { display:inline-block; padding:6px 10px; border-radius:10px; }
.bb-logo-box.as-made.bg-light { background:#fff; border:1px solid var(--rail-line); }
.bb-logo-box.as-made.bg-dark { background:#111827; }
.bb-logo-box.as-made img.as-made { display:block; }
.bb-av.s { width:28px; height:28px; flex-basis:28px; border-radius:50%; background:var(--rail-sel); color:var(--rail-active); }
.bb-bn { display:flex; flex-direction:column; min-width:0; flex:1; }
.bb-bn b { font-size:13px; line-height:1.25; color:var(--rail-strong); overflow-wrap:anywhere; }
.bb-bn small, .bb-mn small { font-size:11.5px; color:var(--rail-ink-dim); }
.bb-switch { border:0; background:none; color:var(--rail-ink-dim); cursor:pointer; font-size:15px; padding:2px 4px; margin:0; min-height:0; }
.bb-switch:hover { color:var(--rail-strong); }
.bb-switchpop { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.bb-switchpop b { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:2px 6px 4px; }
.bb-switchpop a { padding:6px; border-radius:6px; color:var(--ink); text-decoration:none; } .bb-switchpop a:hover { background:var(--rail-hover); }
.bb-link .ico { display:inline-grid; place-items:center; }
.bb-link .ico svg { display:block; }
.bb-railfoot { padding:6px 8px 10px; font-size:12.5px; }
.bb-railfoot .bb-help { margin:0; }
.bb-me { display:flex; align-items:center; gap:9px; padding:8px 8px 2px; }
.bb-mn { display:flex; flex-direction:column; min-width:0; flex:1; }
.bb-mn b { font-size:12.5px; color:var(--rail-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-railfoot .bb-mn a { display:inline; padding:0; color:var(--rail-ink-dim); text-decoration:none; }
.bb-railfoot .bb-mn a:hover { color:var(--rail-strong); text-decoration:underline; }
.bb-col { width:28px; height:28px; flex:0 0 28px; border:1px solid var(--rail-line); background:var(--rail); color:var(--rail-ink-dim);
  border-radius:7px; cursor:pointer; padding:0; margin:0; min-height:0; font-size:17px; line-height:1; display:grid; place-items:center; }
.bb-col:hover { color:var(--rail-strong); }
.bb-tz { display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 9px; margin-top:2px; }
/* Collapsed: icons only, names on hover (the link's title). Desktop only. */
@media (min-width: 861px) {
  html.bb-collapsed { --rail-w:64px; }
  html.bb-collapsed .bb-brand { justify-content:center; padding:16px 0 8px; }
  html.bb-collapsed .bb-brand .name { display:none; }
  html.bb-collapsed .bb-brand .mark { display:block; width:28px; height:28px; flex-basis:28px; background-image:var(--sq-mark); image-rendering:pixelated; border-radius:0; }
  html.bb-collapsed .bb-biz { border:0; background:none; justify-content:center; padding:4px 0; margin:0 0 4px; }
  html.bb-collapsed .bb-bn, html.bb-collapsed .bb-switch, html.bb-collapsed .bb-mn { display:none; }
  html.bb-collapsed .bb-group > h3, html.bb-collapsed .bb-sub > h4 { font-size:0; padding:6px 0 0; margin:0; border-top:1px solid var(--rail-line); }
  html.bb-collapsed .bb-group > h3 .bb-chev { display:none; }
  html.bb-collapsed .bb-group.bb-fold:not(.open) > :not(h3) { display:block; }
  html.bb-collapsed .bb-link { justify-content:center; padding-left:0; padding-right:0; }
  html.bb-collapsed .bb-link .txt, html.bb-collapsed .bb-link .count, html.bb-collapsed .bb-link .dot { display:none; }
  html.bb-collapsed .bb-me { flex-direction:column; padding:6px 0 0; }
  html.bb-collapsed .bb-col { transform:rotate(180deg); }
}
.bb-switchpop[hidden], .bb-switch[hidden] { display:none !important; }
.bb-railfoot a.bb-link { display:flex; padding:7px 8px; color:var(--rail-ink); font-size:13.5px; border-radius:8px; gap:10px; }
.bb-railfoot a.bb-link:hover { color:var(--rail-strong); }
.bb-railfoot #bbNavCustom { padding:2px 8px 4px; font-size:12px; }
@media (min-width: 861px) { html.bb-collapsed .bb-railfoot #bbNavCustom { display:none; } html.bb-collapsed .bb-railfoot a.bb-link { justify-content:center; } html.bb-collapsed .bb-railfoot a.bb-link .txt { display:none; } }
@media (max-width: 860px) { .bb-col { display:none; } }

/* Layout A, matched to Mitch's pick (2 Oct): timezone beside the title, Quick
   book in the header, the theme as a small button by the collapse button. */
.bb-top .grow { display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; }
.bb-top .crumb:empty { display:none; }
.bb-top .bb-tz { margin-top:0; }
a.bb-qb { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border-radius:9px; padding:7px 13px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
a.bb-qb:hover { filter:brightness(1.08); }
@media (max-width: 600px) { a.bb-qb span { display:none; } }
.bb-thm { font-size:14px; }
@media (min-width: 861px) { html.bb-collapsed .bb-thm { display:none; } }
.bb-me { gap:7px; }
.bb-mn small { white-space:nowrap; }
.bb-me .bb-col { width:24px; height:24px; flex-basis:24px; font-size:14px; border-radius:6px; }
/* A bigger Side Quest logo in the sidebar (Mitch, 2 Oct 2026). */
.bb-brand { gap:10px; padding:18px 16px 10px; }
.bb-brand .mark { width:30px; height:30px; flex:0 0 30px; image-rendering:pixelated; border-radius:0; }
.bb-brand .name { font-size:20px; }
@media (min-width: 861px) { html.bb-collapsed .bb-brand .mark { width:32px; height:32px; flex-basis:32px; } }
/* Centred and filling the top of the sidebar (Mitch, 2 Oct 2026). */
.bb-brand { justify-content:center; gap:8px; padding:18px 12px 12px; }
.bb-brand .mark { width:46px; height:46px; flex:0 0 46px; }
.bb-brand .name { font-size:27px; }

/* Phones (UI-05): the setup badge drops to its own row only when it can't fit
   beside the title; Menu and Quick book stay on the first row. */
@media (max-width:860px) {
  .bb-top { flex-wrap:wrap; row-gap:6px; }
  .bb-top .grow { flex:1 1 150px; }
  .bb-top .bb-burger { min-height:44px; min-width:32px; }
  .bb-top a.bb-setup { white-space:normal; max-width:100%; }
  .bb-top .bb-tz { white-space:nowrap; }
}
@media (max-width:600px) {
  .bb-top a.bb-qb { order:2; }
  .bb-top a.bb-setup { order:3; }
}

/* PHONE LAYOUT (D, 11 Oct 2026). Mitch's Side Quest Phone design for the menu
   and Home. Only on phones in phone view (html.bb-phone, set by shell.js);
   computers, tablets and "View in desktop" are untouched. */
html.bb-phone .bb-rail { width:min(86vw, 340px); flex-basis:auto; }
html.bb-phone .bb-shell.open::after { content:""; position:fixed; inset:0; background:rgba(10,20,26,.45); z-index:29; }
html.bb-phone .bb-groups .bb-link { min-height:44px; font-size:16px; padding:0 16px; gap:12px; }
html.bb-phone .bb-link .ico { width:20px; flex:0 0 20px; font-size:16px; }
html.bb-phone .bb-link .ico svg { width:20px; height:20px; }
html.bb-phone .bb-group { margin-top:8px; }
html.bb-phone .bb-group > h3 { font-size:14px; padding:14px 16px 5px; }
html.bb-phone .bb-group.bb-fold > h3 { min-height:44px; font-size:12.5px; padding-top:4px; padding-bottom:4px; }
html.bb-phone .bb-sub > h4 { font-size:12.5px; padding:10px 16px 2px 20px; }
html.bb-phone .bb-railfoot a.bb-link, html.bb-phone .bb-railfoot .bb-viewsw { min-height:44px; font-size:15.5px; }
html.bb-phone .bb-burger { min-width:44px; min-height:44px; font-size:22px; }
html.bb-phone .bb-top a.bb-qb { min-width:44px; min-height:44px; }
/* Home: the counts as a 2 x 2 grid, big buttons on each course of the day. */
html.bb-phone #homeBody #stats { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
html.bb-phone #homeBody #stats .stat { padding:12px 14px; }
html.bb-phone #homeBody #stats .stat a { text-decoration:none; }
html.bb-phone #homeBody .gdep { padding:14px; }
html.bb-phone #homeBody .gacts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:8px 0 10px; }
html.bb-phone #homeBody .gacts > a, html.bb-phone #homeBody .gacts > button { min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; padding:0 10px; margin:0; }
html.bb-phone #homeBody .gacts > a[href*="/checkin"] { background:var(--accent); border-color:var(--accent); color:var(--surface); }
html.bb-phone #homeBody .dayctl button, html.bb-phone #homeBody .dayctl input { min-height:44px; }
html.bb-phone #homeBody .dayctl .daystep { min-width:44px; }
/* APP FEEL on phones (D, 11 Oct 2026): the page never slides sideways, the top
   bar stays put while you scroll, typing never zooms the page, the menu is the
   height of the screen you can see, and the bottom clears the home bar. */
html.bb-phone { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.bb-phone body { overflow-x:clip; overscroll-behavior-x:none; -webkit-tap-highlight-color:transparent; }
html.bb-phone .bb-top { position:sticky; top:0; z-index:20; background:var(--surface); padding-top:max(10px, env(safe-area-inset-top)); }
html.bb-phone .bb-rail { height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
html.bb-phone .bb-body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
html.bb-phone input:not([type=checkbox]):not([type=radio]), html.bb-phone select, html.bb-phone textarea { font-size:16px; }
html.bb-phone .bb-nav, html.bb-phone .bb-rail { -webkit-user-select:none; user-select:none; }
/* Home on phones: short course card (index.html phoneSummary). */
.ph-sum { display:none; }
html.bb-phone #homeBody .ph-sum { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin:2px 0 4px; }
html.bb-phone #homeBody .ph-todo { color:var(--warn); font-weight:600; font-size:14.5px; }
html.bb-phone #homeBody .ph-ok { color:var(--ok); font-weight:600; font-size:14.5px; }
html.bb-phone #homeBody .ph-ppl { min-height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); font-size:15px; font-weight:600; }
html.bb-phone #homeBody .gdep:not(.ph-open) .gp, html.bb-phone #homeBody .gdep:not(.ph-open) .pack { display:none; }
html.bb-phone #homeBody .gdep h3 { font-size:18px; }
/* PHONE SPACING FIXES (D, 11 Oct 2026, Mitch: "buttons are overlapping").
   iPhone draws its own date and time boxes at a fixed width, so in a narrow row
   they ran under the buttons beside them (Home's ‹ date ›). On phones they fill
   their space like any other box. */
html.bb-phone input[type=date], html.bb-phone input[type=time], html.bb-phone input[type=datetime-local], html.bb-phone input[type=month] {
  -webkit-appearance:none; appearance:none; min-width:0; max-width:100%; box-sizing:border-box; min-height:44px; text-align:center; }
html.bb-phone input[type=date]::-webkit-date-and-time-value, html.bb-phone input[type=time]::-webkit-date-and-time-value,
html.bb-phone input[type=datetime-local]::-webkit-date-and-time-value { text-align:center; }
html.bb-phone #homeBody .dayctl { grid-template-columns:44px minmax(0, 1fr) 44px; }
html.bb-phone #homeBody .dayctl input[type=date] { width:100%; }
/* Bookings: the filter rows wrap onto a second line instead of sliding under a › button. */
html.bb-phone .bk-tabs, html.bb-phone .bk-sub { flex-wrap:wrap !important; overflow:visible !important; }
html.bb-phone .sw-more { display:none !important; }
/* Check-in: the day arrows are full-size buttons. */
html.bb-phone .ci-date button:not(.lab) { min-width:44px; min-height:44px; }
/* Reminders: the day boxes keep room for "10.5" at the phone's 16px text. */
html.bb-phone .rung input { min-width:4.6em; }
/* Phones: nothing shows until the shell has built the menu and top bar (D, 12 Oct 2026). */
html.bb-boot body { visibility:hidden; }