/* =====================================================================
   The back office (docs/back-office.md): the sidebar frame for every
   signed-in page with <html data-layout="bo">, and the UI kit's pieces
   (web/bo/ui.js). Uses web.css's colour tokens, so dark mode follows.
   ===================================================================== */

/* ---------- frame (the new look, site/public/mockups/app-look.html; tokens in web.css) ---------- */
html.bo-locked { overflow: hidden; }
html[data-layout="bo"]:not(.bo-ready) .topbar:not([data-task]) .nav { display: none; } /* no flash of the no-JS links */
.bo-shell { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.bo-body { min-width: 0; display: flex; flex-direction: column; }
/* A home-screen app (app.webmanifest, viewport-fit=cover): nothing under the notch, the home bar or a landscape edge. */
html[data-layout="bo"] main {
  max-width: none; margin: 0;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@media (min-width: 760px) { html[data-layout="bo"] main { padding: 28px clamp(24px, 2.6vw, 44px) calc(96px + env(safe-area-inset-bottom)); } }
/* Before the frame is mounted (the first paint, before web.js has run): the sidebar's place is already kept on a wide
   screen, so nothing jumps sideways when it arrives. Not on a page that is also open to visitors (download.html). */
@media (min-width: 900px) {
  html[data-layout="bo"]:not(.bo-ready):not([data-public]) body { padding-left: 264px; }
  html[data-layout="bo"]:not(.bo-ready):not([data-public]) body::before {
    content: ""; position: fixed; inset: 0 auto 0 0; width: 264px; border-right: 1px solid var(--line-2);
    background: var(--bg) url("../logo/klyvelo-wordmark-on-light.svg") no-repeat 24px calc(28px + env(safe-area-inset-top)) / auto 28px;
  }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  html[data-layout="bo"]:not(.bo-ready):not([data-public]):not(:where([data-theme="light"])) body::before { background-image: url("../logo/klyvelo-wordmark-on-dark.svg"); }
}
@media (min-width: 900px) {
  html[data-layout="bo"]:not(.bo-ready):not([data-public]):where([data-theme="dark"]) body::before { background-image: url("../logo/klyvelo-wordmark-on-dark.svg"); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  html[data-layout="bo"]:not(.bo-ready):not([data-public]) body { padding-left: 232px; }
  html[data-layout="bo"]:not(.bo-ready):not([data-public]) body::before { width: 232px; }
}
.logo-dark { display: none; }
/* Dark (Automatic unless Light was chosen, or Dark chosen: web/theme.js) */
@media (prefers-color-scheme: dark) { html[data-layout="bo"]:not(:where([data-theme="light"])) .logo-light { display: none; } html[data-layout="bo"]:not(:where([data-theme="light"])) .logo-dark { display: block; } }
html[data-layout="bo"]:where([data-theme="dark"]) .logo-light { display: none; } html[data-layout="bo"]:where([data-theme="dark"]) .logo-dark { display: block; }

/* ---------- sidebar ---------- */
.bo-side {
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px;
}
.bo-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; margin-bottom: 10px; }
.bo-brand { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }
.bo-brand img { height: 28px; width: auto; }
.bo-close { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.bo-close:hover { color: var(--ink); background: var(--surface-2); }

/* the business: a lifted card with its initials on seafoam */
.bo-biz { min-width: 0; margin-bottom: 8px; }
.bo-bizname { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--lift); min-width: 0; }
.bo-bizname b { font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bo-bizmark { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--sea); color: #141516; font-family: var(--display); font-weight: 600; font-size: 13px; }
.bo-biz:has(.biz:not([hidden])) .bo-bizname { display: none; }
.bo-side .biz { max-width: none; margin: 0; display: block; }
.bo-side .biz-btn { width: 100%; min-height: 54px; justify-content: space-between; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--lift); padding: 0 12px 0 14px; }
.bo-side .biz-btn:hover { background: var(--surface); box-shadow: var(--lift), inset 0 0 0 1px var(--line); }
.bo-side .biz-menu { width: 100%; min-width: 260px; color: var(--ink); }

.bo-store { padding: 0 2px 6px; }
.bo-store-l { display: grid; gap: 4px; }
.bo-store-l > span { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-left: 8px; }
.bo-store-s {
  font: inherit; font-size: 15px; width: 100%; min-height: 42px; padding: 0 12px; border-radius: 999px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
}
.bo-store-s option { color: var(--ink); background: var(--surface); }

.bo-nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px 4px; scrollbar-width: thin; }
.bo-nav ul { list-style: none; margin: 0; padding: 0; }
.bo-group { margin: 10px 10px 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.bo-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 10px; border-radius: 12px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px;
}
.bo-nav a:hover { background: var(--surface-2); color: var(--ink); }
.bo-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--lift); }
.bo-nav a.bo-sell { color: var(--ink); }
.bo-nav a.bo-sell span { white-space: nowrap; }
.bo-nav a.bo-sell svg { margin-left: auto; width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.bo-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 0 4px; }
.d-sea { background: var(--sea); } .d-loy { background: var(--loy); } .d-book { background: var(--book); } .d-stock { background: var(--stock); } .d-n { background: var(--line); }

.bo-side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.bo-me { font-size: 13px; color: var(--ink-3); padding: 2px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-out { font: inherit; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; }
.bo-out:hover { color: var(--ink); background: var(--surface-2); }

/* the floating bar: frosted glass, detached from the top edge (the same before and after the frame is mounted) */
html[data-layout="bo"] .topbar {
  position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 20; min-height: 56px; gap: 12px; padding: 8px 8px 8px 18px;
  margin: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  border-radius: 999px; background: var(--nav); border: 1px solid var(--nav-line); box-shadow: var(--nav-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
html[data-layout="bo"] .topbar .brand { margin-right: 0; min-height: 40px; }
html[data-layout="bo"] .topbar .brand img { height: 24px; width: auto; }
html[data-layout="bo"] .topbar .nav { flex: 1; min-width: 0; gap: 8px; }
.bo-side { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* A task page's bar (shell.js taskBarHtml): Back on the left, the task's name in the middle once the big heading has
   scrolled away, the step on the right. No wordmark and no Menu: the way out is Back, as on a pushed app screen. */
html[data-layout="bo"] .topbar[data-task] { padding-left: 6px; }
.topbar[data-task] .brand { display: none; }
.bo-back {
  display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 14px 0 6px; flex: none;
  border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.bo-back svg { width: 22px; height: 22px; stroke-width: 2.2; }
.bo-back:hover { background: var(--surface-2); }
.topbar[data-task] .bo-task-title { flex: 1; text-align: center; opacity: 0; transition: opacity .18s ease; font-size: 15px; }
.topbar[data-task] .bo-task-title.show { opacity: 1; }
.topbar[data-task] .bo-sp { display: none; }
.bo-step {
  flex: none; min-width: 42px; text-align: center; padding: 5px 11px; margin-right: 4px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* With no step, an empty space the size of Back keeps the name in the middle. */
.topbar[data-task] .nav:not(:has(.bo-step:not([hidden])))::after { content: ""; flex: none; width: 78px; }
.bo-sp { flex: 1; }
.bo-here { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav .bo-menu, .nav .bo-fb {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px;
}
.nav .bo-menu { padding-left: 12px; }
.nav .bo-menu:hover { background: var(--surface-2); }
.nav .bo-fb { background: var(--sea); border-color: transparent; color: #141516; }
.nav .bo-fb:hover { background: var(--amber-2); color: #141516; }
.bo-scrim { position: fixed; inset: 0; background: rgb(10 10 12 / .45); z-index: 39; }
@media (max-width: 899px) {
  .bo-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(300px, 86vw);
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
    box-shadow: var(--float); overflow-y: auto; border-radius: 0 var(--r-lg) var(--r-lg) 0;
  }
  .bo-side.open { transform: none; visibility: visible; }
  .bo-nav { overflow: visible; flex: none; }
  .bo-nav a, .bo-out { min-height: var(--touch); }
  .bo-here, .nav .bo-fb { display: none; }
  .topbar[data-task] .bo-here { display: block; }
}
@media (min-width: 900px) {
  .bo-shell { grid-template-columns: 264px minmax(0, 1fr); }
  .bo-side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line-2); }
  .bo-close, .bo-scrim, .bo-out-fb { display: none !important; }
  html[data-layout="bo"] .topbar { margin: 22px clamp(24px, 2.6vw, 44px) 0; top: 12px; }
  html[data-layout="bo"]:not([data-public]) .topbar .brand, .nav .bo-menu { display: none; }
  /* A wide bar has room: the name stays in its place on the left, after Back, and Send feedback sits on the right. */
  .topbar[data-task] .bo-task-title { flex: 0 1 auto; text-align: left; }
  .topbar[data-task] .bo-sp { display: block; }
  .topbar[data-task] .nav::after { display: none; }
}
@media (min-width: 900px) and (max-width: 1099px) { .bo-shell { grid-template-columns: 232px minmax(0, 1fr); } }

/* the page's own heading: Unbounded, as on the marketing site */
html[data-layout="bo"] main h1 { font-size: clamp(30px, 3.2vw, 46px); }

/* ---------- page header, grid, cards ---------- */
.bo-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 4px 0 20px; }
.bo-head-text { flex: 1 1 320px; min-width: 0; }
.bo-head h1 { overflow-wrap: anywhere; }
.bo-sub { color: var(--ink-2); max-width: 72ch; margin: 8px 0 0; }
.bo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bo-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* the page's own blocks, one under the other */
#bo-root > * { margin-top: 0; margin-bottom: 16px; }
#bo-root > .bo-head { margin-bottom: 20px; }
.bo-grid > .span-all { grid-column: 1 / -1; }
@media (min-width: 640px) { .bo-grid.c2, .bo-grid.c3, .bo-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .bo-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bo-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bo-card-sub { margin: 2px 0 0; }
.bo-card.flush { padding: 0; overflow: hidden; }
.bo-card.flush > .card-head { padding: 16px 16px 0; }
.bo-card.flush .bo-tbar { padding: 12px 16px 0; }
.bo-card.flush .bo-pager, .bo-card.flush .bo-table-empty { padding: 0 16px 12px; }
@media (min-width: 760px) { .bo-card.flush > .card-head { padding: 20px 20px 0; } .bo-card.flush .bo-tbar { padding: 12px 20px 0; } }
.bo-card.flush .bo-table th:first-child, .bo-card.flush .bo-table td:first-child { padding-left: 16px; }
.bo-card.flush .bo-table th:last-child, .bo-card.flush .bo-table td:last-child { padding-right: 16px; }
@media (min-width: 760px) {
  .bo-card.flush .bo-table th:first-child, .bo-card.flush .bo-table td:first-child { padding-left: 20px; }
  .bo-card.flush .bo-table th:last-child, .bo-card.flush .bo-table td:last-child { padding-right: 20px; }
  .bo-card.flush .bo-pager, .bo-card.flush .bo-table-empty { padding: 0 20px 16px; }
}
.bo-pill.t-good { background: var(--good-bg); color: var(--good); }
.bo-pill.t-warn { background: var(--warn-bg); color: var(--warn); }
.bo-pill.t-bad { background: var(--bad-bg); color: var(--bad); }
.bo-pill.t-info { background: var(--info-bg); color: var(--ink); }
.bo-spacer { flex: 1 1 auto; }

/* ---------- stat tiles ---------- */
.bo-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .bo-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } }
.bo-stat { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-stat-l { font-size: 13px; color: var(--ink-2); }
.bo-stat-v { font-family: var(--display, var(--font)); font-weight: 600; font-size: clamp(22px, 5vw, 28px); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bo-stat-h { font-size: 12px; color: var(--ink-3); }
.bo-stat.good .bo-stat-v { color: var(--good); }
.bo-stat.warn { background: var(--warn-bg); } .bo-stat.warn .bo-stat-v { color: var(--warn); }
.bo-stat.bad { background: var(--bad-bg); } .bo-stat.bad .bo-stat-v { color: var(--bad); }
.bo-delta { font-weight: 600; }
.bo-delta.good { color: var(--good); }
.bo-delta.bad { color: var(--bad); }

/* ---------- bar charts ---------- */
.bo-vbars { display: flex; align-items: stretch; gap: 6px; height: 220px; margin: 8px 0 0; }
.bo-vbars.dense { gap: 2px; }
.bo-vbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.bo-vbar-v { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; min-height: 16px; }
.bo-vbar-t { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.bo-vbar-t > span { display: block; width: 100%; min-height: 2px; background: var(--ink-3); border-radius: 4px 4px 0 0; }
.bo-vbar.on .bo-vbar-t > span { background: var(--amber); }
.bo-vbar:hover .bo-vbar-t > span { background: var(--ink-2); }
.bo-vbar.on:hover .bo-vbar-t > span { background: var(--amber-2); }
.bo-vbar-l { font-size: 11px; color: var(--ink-3); padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.bo-vbars.dense .bo-vbar-l { font-size: 10px; }
.bo-hbars { display: grid; grid-template-columns: minmax(0, max-content) minmax(60px, 1fr) max-content; gap: 8px 12px; align-items: center; margin: 8px 0 0; }
.bo-hbar { display: contents; }
.bo-hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.bo-hbar-t { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bo-hbar-t > span { display: block; height: 100%; background: var(--ink-3); border-radius: inherit; }
.bo-hbar.on .bo-hbar-t > span { background: var(--amber); }
.bo-hbar-v { font-variant-numeric: tabular-nums; text-align: right; font-size: 14px; }
@media (max-width: 480px) { .bo-hbar-l { max-width: 14ch; } }

/* ---------- states ---------- */
.bo-empty { text-align: center; padding: 32px 16px; color: var(--ink-2); }
.bo-empty p { margin: 0 auto 8px; max-width: 52ch; }
.bo-empty-t { font-weight: 600; font-size: 16px; color: var(--ink); }
.bo-empty .btn { margin-top: 8px; }
.bo-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bo-error p { margin: 0; flex: 1 1 240px; }
.bo-loading { padding: 12px 0; }

/* ---------- period picker ---------- */
.bo-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bo-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.bo-chip { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.bo-chip:hover { color: var(--ink); }
.bo-chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.bo-period-select { width: auto; min-width: 160px; flex: 1 1 160px; }
.bo-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bo-custom .input { width: auto; min-width: 0; flex: 1 1 140px; }
.bo-period-text { white-space: normal; overflow-wrap: anywhere; }
/* A plan's limit, said calmly with See plans (ui.js isPlanRefusal) */
.bo-plans-link { font-weight: 600; white-space: nowrap; color: var(--link, var(--ink)); }
.bo-plan-note { background: var(--info-bg); color: var(--ink); border-radius: var(--r-sm); padding: 12px 14px; }
.bo-toast .bo-plans-link { color: inherit; text-decoration: underline; }
@media (min-width: 640px) { .bo-period-select { display: none; } }
@media (max-width: 639px) { .bo-period .bo-chips { display: none; } .bo-custom { flex: 1 1 100%; } }

/* ---------- data table ---------- */
.bo-dt { min-width: 0; }
.bo-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.bo-search { flex: 1 1 220px; max-width: 360px; }
.bo-count { white-space: nowrap; }
.bo-table-wrap { overflow-x: auto; }
.bo-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bo-table th, .bo-table td { padding: 10px 12px; border-top: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.bo-table thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.bo-table .num { text-align: right; white-space: nowrap; }
.bo-table .center { text-align: center; }
.bo-sort { font: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.bo-sort:hover { color: var(--ink); }
th[aria-sort] .bo-sort { color: var(--ink); }
.bo-arrow { font-size: 9px; min-width: 9px; }
.bo-table.clickable tbody tr { cursor: pointer; }
.bo-table tbody tr:hover { background: var(--surface-2); }
.bo-table tbody tr:focus-visible { outline-offset: -3px; }
.bo-table td.primary { font-weight: 600; }
.bo-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
@media (max-width: 639px) {
  .bo-search { max-width: none; }
  .bo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bo-table, .bo-table tbody, .bo-table tr, .bo-table td { display: block; width: 100%; }
  .bo-table tr { border-top: 1px solid var(--line-2); padding: 10px 2px; }
  .bo-table tbody tr:first-child { border-top: 0; }
  .bo-table td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; overflow-wrap: anywhere; }
  .bo-table td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--ink-3); font-size: 13px; font-weight: 400; text-align: left; }
  .bo-table td.primary { font-size: 16px; text-align: left; padding-bottom: 4px; }
  .bo-table td.primary::before, .bo-table td[data-label=""]::before { content: none; }
  .bo-table td.no-phone { display: none; }
  .bo-card.flush .bo-table tr { padding-left: 16px; padding-right: 16px; }
  .bo-card.flush .bo-table td:first-child, .bo-card.flush .bo-table td:last-child { padding-left: 0; padding-right: 0; }
  .bo-table .num { white-space: normal; }
}

/* ---------- forms ---------- */
.bo-field .bo-opt { font-weight: 400; font-size: 13px; }
.bo-money { position: relative; display: flex; align-items: center; }
.bo-money > span { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.bo-money .input { padding-left: 30px; font-variant-numeric: tabular-nums; }
.bo-check { display: flex; gap: 10px; align-items: flex-start; min-height: var(--touch); padding-top: 10px; cursor: pointer; }
.bo-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ledger); flex: none; }
.bo-check span { display: flex; flex-direction: column; }
.bo-check small { font-size: 13px; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .bo-check input { accent-color: var(--amber); } }
:where(:root[data-theme="dark"]) .bo-check input { accent-color: var(--amber); }
.input:disabled, .input[readonly] { background: var(--surface-2); color: var(--ink-2); }

/* ---------- side sheet ---------- */
dialog.bo-sheet { padding: 0; overflow: hidden; }
dialog.bo-sheet[open] { display: flex; flex-direction: column; }
.bo-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line-2); }
.bo-sheet-head h2 { overflow-wrap: anywhere; }
.bo-sheet-head p { margin: 2px 0 0; }
.btn.bo-x { font-size: 24px; width: var(--touch); padding: 0; flex: none; }
.bo-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 24px; }
.bo-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-2); background: var(--surface); }
.bo-sheet-foot:empty { display: none; }
.bo-sheet .btn.danger.ghost { background: transparent; border-color: transparent; color: var(--bad); }
.bo-sheet .btn.danger.ghost:hover { background: var(--bad-bg); }

/* ---------- toasts ---------- */
.bo-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.bo-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  background: var(--ledger); color: var(--on-ledger); border-radius: var(--r-sm); box-shadow: var(--shadow-2); padding: 10px 8px 10px 14px; font-size: 14px;
  animation: bo-in .18s ease-out;
}
.bo-toast.good { border-left: 4px solid var(--good); }
.bo-toast.bad { background: var(--bad); color: #fff; }
.bo-toast-x { font: inherit; font-size: 18px; line-height: 1; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; flex: none; }
@media (max-width: 639px) { .bo-toasts { left: 16px; align-items: stretch; } .bo-toast { max-width: none; } }
@keyframes bo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bo-arrow:empty { display: none; }

/* Settings, Points: what members can do with their points (settings-logic.js pointsLines) */
.bo-points-use { margin: 0; padding: 0; list-style: none; }
.bo-points-use li { padding: 8px 0; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; }
.bo-points-use li:first-child { border-top: 0; padding-top: 0; }

/* ---------- task pages: "Finish setting up" (setup.html), Confirm your business (documents.html) ----------
   One designed page under the task bar, not a white form card on grey: the big heading, a line on what it is for, the
   choices as grouped rows (or tiles for the type of shop), and on a phone the main button pinned above the home bar,
   full width, as an app's screen has it. */
.task { max-width: 560px; margin: 4px auto 0; }
body[data-page="download"] main { width: 100%; max-width: 1120px; margin: 0 auto; }
html[data-layout="bo"] .task section > h1 { font-size: clamp(28px, 7.4vw, 40px); margin: 0 0 14px; overflow-wrap: anywhere; }
.task section > h1:focus { outline: none; }
.task section > p.muted { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; }
.task form > * + * { margin-top: 18px; }
.task .field > span:first-child { font-weight: 600; margin-bottom: 8px; }
.task .input { min-height: 52px; font-size: 16px; border-radius: var(--r-md); background: var(--surface); }
.task .choices legend { font-weight: 600; margin-bottom: 10px; }
.task .note { border-radius: var(--r-md); }
.task form > .btn.primary { min-height: 54px; font-size: 16px; justify-content: center; }
.task .row.small { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }

/* Choices as an app's grouped list: one rounded group, hairlines between, the round tick on the right. */
.task .choices:not(.grid-choices):not(.inline) { gap: 0; }
.task .choices:not(.grid-choices):not(.inline) .choice {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border: 0; border-radius: 0; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line-2);
}
.task .choices:not(.grid-choices):not(.inline) .choice:first-of-type { border-radius: 18px 18px 0 0; }
.task .choices:not(.grid-choices):not(.inline) .choice:last-of-type { border-radius: 0 0 18px 18px; box-shadow: none; }
.task .choices:not(.grid-choices):not(.inline) .choice:only-of-type { border-radius: 18px; }
/* Tiles: the type of shop, yes or no, how many stores. */
.task :is(.grid-choices, .inline) .choice {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 12px 14px;
  border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
}
.task .grid-choices.compact .choice { padding: 12px; font-size: 15px; line-height: 1.3; }
.task .choices .choice span { grid-column: 1; grid-row: 1; font-weight: 500; }
.task .choices .choice small { font-weight: 400; }
.task .choices .choice input {
  grid-column: 2; grid-row: 1; appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
}
.task .choices .choice input:checked { border-color: var(--sea-deep); background: var(--sea-deep); box-shadow: inset 0 0 0 5px var(--surface); }
.task .choices .choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.task .choices .choice:has(input:checked) { background: var(--sea-soft); }
.task :is(.grid-choices, .inline) .choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--sea-deep); }

/* The main button above the home bar on a phone (Save, Send me a code, Next, Send to Klyvelo), on a frosted strip. */
@media (max-width: 759px) {
  html:has(.topbar[data-task]) main:has(.task section:not([hidden]) form:not([hidden]) > button[type="submit"], .dc-page .btn.primary.dc-big) {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }
  .task section:not([hidden]) form:not([hidden]) > button[type="submit"], .dc-page .btn.primary.dc-big {
    position: fixed; z-index: 16; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; margin: 0;
  }
  html:has(.topbar[data-task]) main:has(.task section:not([hidden]) form:not([hidden]) > button[type="submit"], .dc-page .btn.primary.dc-big)::after {
    content: ""; position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; height: calc(78px + env(safe-area-inset-bottom));
    background: var(--nav); border-top: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  }
}