/* The board's stylesheet (P48): every rule under .bd, with its own tokens, so nothing here touches the
   page around it (site.css) and nothing there reaches in, apart from the site's own fonts (site.css's
   @font-face) and its reduced-motion rule. The look is the demo-factory artboards'
   (site/design/presets/: DESIGN-V2.md, boards/EA-Exec and EA-Op), ported to classes: the site's
   content-security rule blocks style attributes. Two layouts:
   - phone (data-layout="phone"): fluid from 320 to 430px, at natural height in the page; the tour card
     sticks to the bottom of the screen while the board is on it; the Context sheet is a page-level
     bottom sheet (88% of the screen);
   - box (data-layout="box"): the desktop's 390 by 844 box, which scrolls itself and holds its sheet;
     its tour card is the last piece of its scroll and sticks to the box's bottom (SP).
   - wide (data-layout="wide", SF): the desktop window, full width, as the live site's window is: the
     board's head across it, then two panes (the live .wbody's 5fr and 7fr), each scrolling on its
     own: the lane's items as rows on the left (the live .row), the tour's card docked under them,
     and the selected item's card on the right, where the Context sheet opens as a dialog. The box
     stays, as the desktop's Phone view.
   Widths are the board's own (a container query on .bd-scroll), so a narrow board reads "SAMPLE" below
   360px wherever it sits. No breakpoint falls between 761 and 899px. */

@property --bd-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes bd-spin { to { --bd-ang: 360deg; } }
@keyframes bd-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bd-sheet { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }

.bd {

  --bd-onink: #FFFFFF;
  --bd-onaccent: #FFFFFF;
  --bd-saidmeta: #C9C6D3;
  --bd-acc-text: #2B59C3;
  --bd-onmark: #141826;
  --bd-onbad: #FFFFFF;
  --bd-say-arc: rgba(79,70,165,.6);
  --bd-sel: #F5F1FF;
  --bd-sel-edge: #9C86F5;
  --bd-ok-tint: #EAF5EF;
  --bd-ok-ink: #1F6B47;
  --bd-follow-tint: #F8F3DC;
  --bd-follow-ink: #6B5300;
  --bd-held-tint: #FBEFE9;
  --bd-held-ink: #8A3D1C;
  --bd-held-edge: #D9B8A8;
  --bd-urgent-tint: #FCECE9;
  --bd-urgent-ink: #B3261E;
  --bd-raise: #FCFCFD;
  --bd-reply: #F4F4F7;
  --bd-say: #D9D3F2;
  --bd-chip-on: #D6D3EF;
  --bd-chip-hover: #C9C6D3;
  --bd-dot: #A9A6B3;
  --bd-grab: #D9D7E0;
  --bd-segs: rgba(250,250,251,.94);
  --bd-tourbg: rgba(255,255,255,.97);
  --bd-scrim: rgba(22,20,28,.38);
  --bd-scrim-drawer: rgba(20,24,38,.16);
  --bd-wash: rgba(226, 216, 255, .3);
  --bd-wash-office: rgba(207, 226, 255, .32);
  --bd-shadow-1: rgba(22, 20, 28, .04);
  --bd-shadow-2: rgba(22, 20, 28, .2);
  --bd-shadow-3: rgba(22, 20, 28, .4);
  --bd-shadow-4: rgba(22, 20, 28, .25);
  --bd-shadow-5: rgba(20, 24, 38, .5);
  --bd-bg: #FAFAFB;
  --bd-card: #FFFFFF;
  --bd-line: #ECEBF0;
  --bd-line2: #F1F0F4;
  --bd-line3: #E4E2EA;
  --bd-fill: #F7F7F9;
  --bd-quiet: #F2F1F4;
  --bd-ink: #16141C;
  --bd-ink2: #423F4C;
  --bd-mute: #6E6A7A;
  --bd-tagink: #55525E;
  --bd-accent: #4F46A5;
  --bd-tint: #F1F0FA;
  --bd-ring: 0 0 0 1px #4F46A5, 0 0 0 5px rgba(79, 70, 165, .12);
  --bd-lift: 0 1px 2px rgba(22, 20, 28, .04), 0 10px 28px -18px rgba(22, 20, 28, .22);
  --bd-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bd-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bd-display: "Funnel Display", system-ui, sans-serif;
  /* WP1b: the app's chrome and home page, design's light product values (handover-loop tokens.css,
     .app), so dark mode later swaps these once. */
  --bd-nav: #172B4D;
  --bd-nav2: #22396A;
  --bd-navink: #FFFFFF;
  --bd-navmute: #C9D1DD;
  --bd-acc: #2B59C3;
  --bd-accsoft: #EAF0FC;
  --bd-onacc: #FFFFFF;
  --bd-page: #F2F3F6;
  --bd-edge: #D9DCE1;
  --bd-edge2: #EBEDF0;
  --bd-pink: #141826;
  --bd-pink2: #3D4454;
  --bd-pmute: #626B7C;
  --bd-bad: #B42318;
  --bd-badsoft: #FDECEA;
  --bd-grid: #EDEFF2;
  --bd-zero: #9AA1AE;
  --bd-total: #22396A;
  --bd-pos: #0E9F6E;
  --bd-neg: #B42318;
  --bd-tip: #141826;
  --bd-tipink: #FFFFFF;
  --bd-tipmute: #C9D1DD;
  --bd-tool-gates: #5B45C9;
  --bd-tool-inquiries: #C79A1E;
  --bd-tool-assistant: #C2552B;
  --bd-tool-money: #0E7C4E;
  --bd-tool-router: #2F5BFF;
  --bd-tool-chaser: #B4236E;
  --bd-tool-intake: #8A5A1C;
  --bd-tool-filing: #47586E;
  --bd-tool-other: #A3A9B5;
  --bd-mark: #F6C445;
  --bd-control: #8A8F98;
  --bd-possoft: #E3F6EE;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: radial-gradient(70% 12% at 100% 0%, var(--bd-wash), transparent 70%), var(--bd-bg);
  color: var(--bd-ink);
  font-family: var(--bd-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.bd[data-kind="office"] { background: radial-gradient(70% 12% at 100% 0%, var(--bd-wash-office), transparent 70%), var(--bd-bg); }
.bd *, .bd *::before, .bd *::after { box-sizing: border-box; }
:where(.bd) :where(p, h2, h3) { margin: 0; }
:where(.bd) :where(button) { font: inherit; color: inherit; margin: 0; }
.bd [hidden] { display: none !important; }
.bd-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bd button:focus-visible, .bd [tabindex]:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 2px; }
/* Inside a box that clips its corners, the ring sits inside the control, so it's never cut off. */
.bd .bd-rowbox button:focus-visible, .bd .bd-sent > button:focus-visible, .bd .bd-sheetfoot button:focus-visible { outline-offset: -3px; }

.bd-scroll { container-type: inline-size; padding-bottom: 24px; }
.bd[data-layout="box"] { width: 390px; max-width: none; height: 844px; overflow: hidden; }
.bd[data-layout="box"] .bd-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 40px; }
/* The box's floating tour card (SP) is the last piece of its scroll: it sticks 12px above the box's
   bottom (the scroll's padding would hold it higher), and the space after the day is its margin. */
.bd[data-layout="box"] .bd-scroll:has(> .bd-tour, > .bd-tourpill, > .bd-tournote) { padding-bottom: 0; }
.bd[data-layout="box"] .bd-scroll > :is(.bd-tour, .bd-tourpill, .bd-tournote) { margin-bottom: 12px; }

/* ---- wide (SF): the desktop window */
.bd[data-layout="wide"] { max-width: none; }
.bd[data-layout="wide"] .bd-scroll { padding-bottom: 0; }
.bd[data-layout="wide"] .bd-brand { display: none; }
.bd[data-layout="wide"] .bd-head { justify-content: flex-end; padding: 0 12px; }
.bd[data-layout="wide"] .bd-head:empty { display: none; }
.bd[data-layout="wide"] .bd-real { max-width: 640px; margin-left: auto; }
.bd[data-layout="wide"] .bd-intro { margin: 14px 24px 0; }
.bd[data-layout="wide"] .bd-variant { max-width: 520px; margin: 8px 24px 0; }
.bd[data-layout="wide"] .bd-top { margin: 0; padding: 18px 24px 16px; border-radius: 0; }
.bd[data-layout="wide"] .bd-top.is-focus { box-shadow: inset var(--bd-ring); }
.bd[data-layout="wide"] .bd-headwrap { max-width: 720px; }
.bd[data-layout="wide"] .bd-top > .bd-sub, .bd[data-layout="wide"] .bd-top > .bd-subfold, .bd[data-layout="wide"] .bd-without, .bd[data-layout="wide"] .bd-from { max-width: 720px; }
.bd[data-layout="wide"] .bd-queue { margin: 16px 24px 0; }
.bd-panes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: clamp(520px, calc(100vh - 200px), 760px); border-top: 1px solid var(--bd-line); }
.bd-panes[data-empty] { grid-template-columns: minmax(0, 1fr); }
.bd-panes[data-empty] > .bd-right { display: none; }
.bd-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bd-line); background: var(--bd-card); }
.bd-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 16px; }
.bd-right { position: relative; min-height: 0; }
.bd-pane { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 8px 24px; }
.bd-pane > .bd-card { margin: 16px 16px 0; }
.bd-pane > .bd-dark { width: calc(100% - 32px); margin: 16px 16px 0; }
/* A row, as the live window's: initials, who and what, its state; the selected one marked. */
.bd-wrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--bd-line2); background: var(--bd-card); color: var(--bd-ink); text-align: left; cursor: pointer; }
.bd-wrow:hover { background: var(--bd-fill); }
.bd-wrow.is-sel { background: var(--bd-sel); box-shadow: inset 3px 0 0 var(--bd-sel-edge); }
.bd .bd-wrow:focus-visible { outline-offset: -3px; }
.bd-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bd-line); background: var(--bd-fill); font-family: var(--bd-mono); font-size: 12px; }
.bd-wrow.is-sel .bd-av { border-color: var(--bd-ink); background: var(--bd-ink); color: var(--bd-onink); }
.bd-wrowmid { min-width: 0; }
.bd-wrowwho { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bd-wrowwhat { display: block; font-size: 13px; color: var(--bd-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-wrow .bd-st { max-width: 140px; }
.bd[data-layout="wide"] .bd-list > .bd-sec:first-child > .bd-h, .bd[data-layout="wide"] .bd-list > .bd-group:first-child > .bd-grouphead { margin-top: 16px; }
.bd[data-layout="wide"] .bd-list .bd-h { margin: 20px 16px 6px; }
.bd[data-layout="wide"] .bd-list .bd-grouphead { margin: 20px 16px 6px; }
.bd[data-layout="wide"] .bd-list .bd-sec, .bd[data-layout="wide"] .bd-list .bd-group { margin-top: 0; }
/* The tour's card, docked under the left pane: it covers nothing, so it doesn't float. */
.bd[data-layout="wide"] .bd-left > :is(.bd-tour, .bd-tourpill, .bd-tournote) { position: static; flex: none; margin: 12px; }
.bd[data-layout="wide"] .bd-left > .bd-tourpill { margin-left: auto; }
/* The Context sheet: a dialog over the right pane, its height, locking nothing. */
.bd[data-layout="wide"] .bd-sheetwrap { position: absolute; z-index: 8; }
.bd[data-layout="wide"] .bd-sheet { top: 12px; right: 12px; bottom: 12px; left: 12px; height: auto; max-width: none; border-radius: 16px; animation: bd-rise .2s ease; }
.bd[data-layout="wide"] .bd-grab { display: none; }

/* ---- shared pieces */
.bd-label { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); letter-spacing: .03em; }
.bd-dark-label { color: var(--bd-ink2); }
.bd-h { margin: 24px 16px 8px; font-family: var(--bd-mono); font-size: 11px; font-weight: 400; color: var(--bd-mute); letter-spacing: .04em; text-transform: uppercase; }
.bd-h2 { font-size: 15px; font-weight: 600; }
.bd-tag { display: inline-flex; align-items: center; flex: none; padding: 2px 6px; border-radius: 6px; background: var(--bd-quiet); color: var(--bd-tagink); font-family: var(--bd-mono); font-size: 11px; line-height: 16px; white-space: nowrap; }
.bd-nb { display: inline-flex; align-items: center; flex: none; padding: 2px 6px; border-radius: 6px; border: 1px dashed var(--bd-held-edge); color: var(--bd-held-ink); font-family: var(--bd-mono); font-size: 11px; line-height: 14px; white-space: nowrap; }
.bd-st { display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 52%; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--bd-quiet); color: var(--bd-tagink); }
.bd-st[data-tone="done"] { background: var(--bd-ok-tint); color: var(--bd-ok-ink); }
.bd-st[data-tone="follow"] { background: var(--bd-follow-tint); color: var(--bd-follow-ink); }
.bd-st[data-tone="held"] { background: var(--bd-held-tint); color: var(--bd-held-ink); }
.bd-st[data-tone="urgent"] { background: var(--bd-urgent-tint); color: var(--bd-urgent-ink); }
.bd-st[data-tone="you"] { background: var(--bd-tint); color: var(--bd-accent); }
.bd-ico { flex: none; }
.bd-chev { transition: transform .15s; }
.bd [aria-expanded="true"] > .bd-chev, .bd [aria-expanded="true"] > * > .bd-chev { transform: rotate(180deg); }

.bd-btn, .bd-pri, .bd-dark, .bd-quiet, .bd-ctx, .bd-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--bd-line3); border-radius: 12px; background: var(--bd-card); color: var(--bd-ink);
  font-size: 15px; font-weight: 500; cursor: pointer; text-align: center;
}
.bd-btn:hover, .bd-ctx:hover, .bd-link:hover, .bd-quiet:hover { background: var(--bd-fill); }
.bd-btn-you, .bd-ctx, .bd-link { color: var(--bd-accent); }
.bd-pri { width: 100%; min-height: 48px; border: 0; background: var(--bd-accent); color: var(--bd-onaccent); font-weight: 600; }
.bd-dark { display: flex; width: 100%; min-height: 48px; border: 0; background: var(--bd-ink); color: var(--bd-onink); }
.bd-pri:hover, .bd-dark:hover { filter: brightness(1.15); }
.bd-quiet { width: 100%; border: 0; background: transparent; color: var(--bd-ink2); }
.bd-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--bd-ink2); cursor: pointer; }
.bd-icon[aria-disabled="true"] { opacity: .35; cursor: default; }
/* A tap waiting for the other answers: the board's note says so; the control keeps its colours. */
.bd [aria-busy="true"] { cursor: progress; }

/* ---- the head: the business, SAMPLE and "What's real?" */
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 0 16px; }
.bd-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-mark { flex: none; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, #FFEBA8, #FFD8C6 50%, #DCD2FF); }
.bd[data-kind="office"] .bd-mark { background: linear-gradient(135deg, #CFEFDD, #D3E4FF 50%, #DCD2FF); }
.bd-name { font-family: var(--bd-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sample { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--bd-mute); cursor: pointer; }
.bd-sample-long, .bd-sample-short { font-family: var(--bd-mono); font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.bd-sample-short { display: none; }
@container (max-width: 359px) {
  .bd-sample-long { display: none; }
  .bd-sample-short { display: inline; }
}
.bd-real { margin: 0 16px 8px; padding: 12px 14px; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-card); font-size: 13px; line-height: 1.45; color: var(--bd-ink2); animation: bd-rise .2s ease; }
.bd-real > p + p { margin-top: 8px; }
.bd-realclose { margin-top: 10px; }

/* ---- the top: the clock, the status line and the sources (no switch since WA) */
.bd-intro { margin: 0 16px; font-size: 13px; color: var(--bd-mute); }
.bd-top { margin: 4px 8px 0; padding: 8px; border-radius: 14px; }
.bd-top.is-focus { box-shadow: var(--bd-ring); background: var(--bd-card); }
.bd-clockrow { display: flex; align-items: center; gap: 16px; }
.bd-clock { flex: none; font-family: var(--bd-display); font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.bd-headwrap { flex: 1; min-width: 0; }
.bd-stamp { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); letter-spacing: .04em; }
.bd-headline { margin-top: 4px; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.bd-sub { display: block; margin: 8px 0 0; font-size: 13px; color: var(--bd-mute); }
.bd-subfold { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.bd-without { margin-top: 4px; padding: 0 12px 4px; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-card); }
.bd-from { margin-top: 10px; font-size: 12px; color: var(--bd-mute); }
.bd[data-layout="wide"] .bd-from { margin-top: 4px; }
.bd-note { margin: 8px 16px 0; padding: 8px 12px; border-radius: 10px; background: var(--bd-fill); color: var(--bd-ink2); font-size: 13px; }
.bd-needs { display: inline-block; margin: 8px 16px 0; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--bd-follow-tint); color: var(--bd-follow-ink); }
.bd-needs[data-tone="done"] { background: var(--bd-ok-tint); color: var(--bd-ok-ink); }

/* ---- the owner's stack: one decision at a time */
.bd-segs { position: sticky; top: 0; z-index: 3; display: flex; gap: 8px; margin-top: 16px; padding: 0 16px; background: var(--bd-segs); }
.bd-seg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 10px 0 6px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.bd-segbar { display: block; height: 3px; border-radius: 99px; background: var(--bd-line3); }
.bd-seg[data-state="current"] .bd-segbar { background: var(--bd-ink); }
.bd-seg[data-state="answered"] .bd-segbar { background: var(--bd-accent); }
.bd-seglabel { font-family: var(--bd-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bd-mute); }
.bd-seg[aria-current="step"] .bd-seglabel { color: var(--bd-ink); font-weight: 500; }
.bd-stack { margin: 8px 16px 0; scroll-margin-top: 60px; }
.bd-stack > .bd-card { margin: 0; }
.bd-ghost { height: 6px; margin: 0 12px; border: 1px solid var(--bd-line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--bd-card); }
.bd-ghost[data-depth="1"] { margin: 0 22px; background: var(--bd-raise); }
.bd-ghost[data-depth="2"] { margin: 0 32px; background: var(--bd-raise); }
.bd-stack + .bd-dark { width: calc(100% - 32px); margin: 16px 16px 0; }

/* ---- a card */
.bd-card { position: relative; margin: 8px 16px 0; border: 1px solid var(--bd-line); border-radius: 14px; background: var(--bd-card); box-shadow: var(--bd-lift); scroll-margin-top: 64px; scroll-margin-bottom: 180px; }
.bd-card.is-focus { box-shadow: var(--bd-ring); }
.bd-cardtop { display: flex; align-items: stretch; }
.bd-who { flex: none; max-width: 48%; min-height: 56px; padding: 8px 6px 8px 16px; border: 0; border-radius: 14px 0 0 0; background: transparent; color: var(--bd-ink); font-size: 15px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--bd-chip-hover); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; overflow-wrap: anywhere; }
.bd-who:hover { background: var(--bd-fill); }
.bd-who.is-plain { display: flex; align-items: center; text-decoration: none; cursor: default; }
.bd-who.is-plain:hover { background: transparent; }
.bd-linktext { display: block; margin: 6px 0 0 52px; font-size: 13px; color: var(--bd-mute); }
.bd-fold { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px 8px 4px; border: 0; background: transparent; color: var(--bd-ink); text-align: left; cursor: pointer; }
.bd-what { flex: 1; min-width: 0; font-size: 13px; color: var(--bd-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-body { padding: 0 16px 16px; animation: bd-rise .2s ease; }
.bd-trigrow { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--bd-line2); }
.bd-trig { flex: 1; min-width: 0; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); letter-spacing: .02em; overflow-wrap: anywhere; }
.bd-more { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--bd-accent); font-size: 13px; font-weight: 500; cursor: pointer; }
.bd-quote { font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* An open card with no trigger line (DS15 #2): "More" sits on the content's first line, at its right,
   so the content starts right under the header instead of under a band holding only "More". */
.bd-body:has(> .bd-trigrow.is-bare) { padding-top: 6px; border-top: 1px solid var(--bd-line2); }
.bd-trigrow.is-bare { float: right; margin: -6px -4px 0 12px; border-top: 0; }
/* Phone widths (DS15 #3): the row drops its inline summary (the open row shows it in full), and its
   pill is whole: beside the name where it fits, else on its own line under it. */
@container (max-width: 480px) {
  .bd-cardtop { flex-wrap: wrap; }
  .bd-cardtop .bd-who { max-width: 100%; }
  .bd-cardtop .bd-fold { flex: 1 0 auto; max-width: 100%; min-height: 44px; justify-content: space-between; padding-left: 16px; }
  .bd-cardtop .bd-what { display: none; }
  .bd-cardtop .bd-st { max-width: none; white-space: normal; overflow: visible; }
}
.bd-fell { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bd-held-tint); color: var(--bd-held-ink); font-size: 13px; }
.bd-inmode { margin-top: 8px; font-size: 13px; color: var(--bd-accent); }
.bd-next { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--bd-ink2); }
.bd-ctxrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bd-ctx { padding: 0 14px 0 12px; }
.bd-count { font-family: var(--bd-mono); font-size: 12px; font-weight: 400; color: var(--bd-mute); }
.bd-prop { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bd-fill); }
.bd-prop p { margin-top: 4px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.bd-hint { margin-top: 8px; font-size: 12px; color: var(--bd-mute); }
.bd-blocked { margin-top: 12px; font-size: 13px; color: var(--bd-held-ink); }
.bd-blocked .bd-label { color: var(--bd-held-ink); }
.bd-undo { margin-top: 8px; font-size: 12px; color: var(--bd-mute); }
.bd-chip { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.bd-chipv { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--bd-line3); border-radius: 10px; background: var(--bd-card); font-size: 13px; font-weight: 500; }
.bd-chip.is-on .bd-chipv { background: var(--bd-tint); border-color: var(--bd-chip-on); color: var(--bd-accent); }
.bd-chip:hover .bd-chipv { border-color: var(--bd-chip-hover); }
.bd-pri, .bd-tapacts { margin-top: 16px; }
.bd-tapacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-tapacts .bd-pri { grid-column: 1 / -1; margin-top: 0; }
.bd-saylabel { margin-top: 24px; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); letter-spacing: .04em; }
.bd-says { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* Send on a line (WP1b, WINDOW-SPEC §5): the line's text, then its Send, the control. */
.bd-say {
  display: block; width: 100%; padding: 1px; border: 0; border-radius: 12px; text-align: left;
  background: conic-gradient(from var(--bd-ang), var(--bd-line3) 0deg, var(--bd-line3) 240deg, var(--bd-say-arc) 300deg, var(--bd-line3) 350deg);
  animation: bd-spin 5s linear infinite;
}
.bd-sayin { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px 8px 14px; border-radius: 11px; background: var(--bd-card); }
.bd-sayt { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--bd-ink); opacity: .65; transition: opacity .15s; overflow-wrap: anywhere; }
.bd-say:hover .bd-sayt, .bd-say:focus-within .bd-sayt { opacity: 1; }
.bd-send { flex: none; position: relative; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--bd-acc); color: var(--bd-onacc); font-size: 14px; font-weight: 600; cursor: pointer; }
.bd-send:hover { background: var(--bd-nav); color: var(--bd-onacc); }
.bd-send[aria-busy="true"] { opacity: .7; }
.bd-saytag { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--bd-urgent-tint); color: var(--bd-urgent-ink); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.bd-saytext { margin-top: 8px; padding: 8px 14px; border: 1px solid var(--bd-line); border-radius: 12px; font-size: 13px; color: var(--bd-ink2); overflow-wrap: anywhere; }
.bd-answer { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bd-said { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--bd-ink); color: var(--bd-onink); font-size: 15px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.bd-saidmeta { display: block; margin-top: 4px; font-family: var(--bd-mono); font-size: 11px; font-weight: 400; color: var(--bd-saidmeta); }
.bd-reply { align-self: flex-start; max-width: 92%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--bd-reply); font-size: 13px; line-height: 1.45; color: var(--bd-ink2); overflow-wrap: anywhere; }
.bd-effects, .bd-calls { margin-top: 16px; }
.bd-send { padding: 10px 0; border-top: 1px solid var(--bd-line2); }
.bd-sendtop { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.bd-sendtime { flex: none; min-width: 40px; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-mute); }
.bd-sendwhat { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bd-sendmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; padding-left: 52px; }
.bd-sentby { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-ok-ink); }
.bd-checks { margin-top: 2px; padding-left: 52px; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-ok-ink); overflow-wrap: anywhere; }
.bd-send .bd-link { margin: 6px 0 0 52px; min-height: 44px; }
.bd-call { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--bd-line2); font-size: 13px; }
.bd-call > span:nth-child(2) { flex: 1; min-width: 0; }
.bd-callst { flex: none; font-size: 12px; font-weight: 500; color: var(--bd-accent); white-space: nowrap; }
.bd-todos { margin-top: 12px; padding: 2px 14px 12px; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-raise); }
.bd-todo { padding-top: 10px; }
.bd-todo + .bd-todo { margin-top: 6px; border-top: 1px solid var(--bd-line2); }
.bd-todohead { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); letter-spacing: .02em; overflow-wrap: anywhere; }
.bd-todotext { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--bd-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bd-later { flex-basis: 100%; font-size: 12px; color: var(--bd-mute); }
.bd-done { margin-top: 6px; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-ok-ink); }
.bd-moreinfo { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bd-line2); font-size: 13px; color: var(--bd-ink2); animation: bd-rise .2s ease; }
.bd-moreinfo > * + * { margin-top: 8px; }
.bd-owner { font-family: var(--bd-mono); font-size: 12px; }
.bd-moreinfo .bd-prop p { font-size: 13px; color: var(--bd-ink2); }
.bd-q { overflow-wrap: anywhere; }

/* ---- sections, rows, the day */
.bd-sec { margin-top: 8px; }
.bd-rowbox { margin: 0 16px; border: 1px solid var(--bd-line); border-radius: 14px; background: var(--bd-card); overflow: hidden; }
.bd-row + .bd-row { border-top: 1px solid var(--bd-line2); }
.bd-row.is-open { background: var(--bd-raise); }
.bd-rowbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 4px 16px; border: 0; background: transparent; color: var(--bd-ink); text-align: left; cursor: pointer; }
.bd-rowwho { flex: none; max-width: 55%; font-weight: 600; font-size: 15px; }
.bd-rowwhat { flex: 1; min-width: 0; font-size: 13px; color: var(--bd-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-rowbody { padding: 0 16px 12px; font-size: 13px; color: var(--bd-ink2); animation: bd-rise .2s ease; }
.bd-wait { margin: 8px 16px 0; padding: 16px; border: 1px solid var(--bd-line); border-radius: 14px; background: var(--bd-card); box-shadow: var(--bd-lift); scroll-margin-top: 64px; scroll-margin-bottom: 180px; }
.bd-wait.is-focus { box-shadow: var(--bd-ring); }
.bd-waittop { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.bd-waitwho { flex: 1; min-width: 0; font-weight: 600; }
.bd-day, .bd-box { margin: 16px 16px 0; padding: 16px 16px 4px; border: 1px solid var(--bd-line); border-radius: 14px; background: var(--bd-card); box-shadow: 0 1px 2px var(--bd-shadow-1); scroll-margin-top: 16px; scroll-margin-bottom: 180px; }
.bd-day.is-focus, .bd-box.is-focus { box-shadow: var(--bd-ring); }
.bd-box.bd-sent { padding: 0; overflow: hidden; }
/* The variant switch (M1, Drippington's "If you have someone"): a switch, the data's words beside it. */
.bd-variant { margin: 8px 16px 0; }
.bd-varswitch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 0; border: 0; background: transparent; color: var(--bd-ink); text-align: left; font: inherit; cursor: pointer; }
.bd-varwords { flex: 1; min-width: 0; }
.bd-varlabel { display: block; font-size: 15px; font-weight: 500; }
.bd-varsub { display: block; font-size: 13px; color: var(--bd-mute); }
.bd-vartrack { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--bd-line3); transition: background .15s; }
.bd-varknob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bd-card); box-shadow: 0 1px 2px var(--bd-shadow-2); transition: transform .15s; }
.bd-varswitch[aria-checked="true"] .bd-vartrack { background: var(--bd-accent); }
.bd-varswitch[aria-checked="true"] .bd-varknob { transform: translateX(18px); }
/* A queue nobody works: what the day says of it, then what waits on it. */
.bd-queuerole { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
/* What came in overnight, by channel (M1): the manifest's chips as text, not controls. */
.bd-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.bd-stripchip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--bd-line3); border-radius: 10px; background: var(--bd-fill); color: var(--bd-ink2); font-size: 13px; }
.bd-box.bd-sent .bd-rowbody { padding: 0 16px 8px; }
.bd-dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
.bd-dayrow { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--bd-line2); }
.bd-dayrow.is-past { color: var(--bd-mute); }
.bd-daytime { flex: none; min-width: 52px; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-mute); }
.bd-daywhat { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.bd-daytag { flex: none; font-size: 12px; font-weight: 500; color: var(--bd-accent); white-space: nowrap; }
.bd-daytag[data-tone="done"] { color: var(--bd-ok-ink); }
.bd-daytag[data-tone="wait"] { color: var(--bd-mute); }
.bd-now { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bd-now span { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--bd-accent); color: var(--bd-onaccent); font-family: var(--bd-mono); font-size: 11px; }
.bd-now::after { content: ""; flex: 1; height: 1px; background: var(--bd-accent); }
.bd-group { margin-top: 8px; }
.bd-grouphead { display: flex; align-items: center; gap: 8px; margin: 24px 20px 8px; font-size: 15px; font-weight: 600; }
.bd-dot { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--bd-dot); }
.bd-grouphead[data-group="blocks"] .bd-dot { background: var(--bd-urgent-ink); }
.bd-click { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bd-line2); font-size: 13px; color: var(--bd-ink); }
.bd-click[data-done="true"] { color: var(--bd-mute); text-decoration: line-through; }
.bd-reporttop { font-size: 15px; font-weight: 500; line-height: 1.45; }
.bd-time { display: flex; flex-direction: column; gap: 8px; margin: 16px 16px 0; }

/* ---- the Context sheet */
.bd-sheetwrap { position: fixed; inset: 0; z-index: 40; }
.bd[data-layout="box"] .bd-sheetwrap { position: absolute; z-index: 8; }
.bd-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--bd-scrim); cursor: pointer; }
.bd-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 88%; max-width: 430px; margin: 0 auto; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; background: var(--bd-card); box-shadow: 0 -16px 40px -20px var(--bd-shadow-3); overflow: hidden; animation: bd-sheet .24s cubic-bezier(.2, .8, .2, 1); outline: none; }
.bd[data-layout="box"] .bd-sheet { max-width: none; }
.bd-sheethead { flex: none; padding: 8px 12px 12px 20px; border-bottom: 1px solid var(--bd-line2); }
.bd-grab { display: block; width: 36px; height: 4px; margin: 0 auto 4px; border-radius: 99px; background: var(--bd-grab); }
.bd-sheettop { display: flex; align-items: flex-start; gap: 8px; }
.bd-sheetname { flex: 1; min-width: 0; padding-top: 8px; }
.bd-sheettitle { margin-top: 4px; font-family: var(--bd-display); font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bd-sheetwhat { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; font-size: 13px; color: var(--bd-mute); }
.bd-sheetwhat > span:first-child { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sheettags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bd-close { flex: none; margin-top: 4px; padding: 0 14px 0 12px; }
.bd-sheetbody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px 20px 24px; }
.bd-short { padding: 14px 16px 16px; border-radius: 14px; background: var(--bd-fill); }
.bd-shortrow { margin-top: 8px; }
.bd-shortrow p { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--bd-ink); }
.bd-sheetsec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 28px 0 4px; }
.bd-entry { display: flex; gap: 12px; padding: 14px 0 12px; border-top: 1px solid var(--bd-line2); }
.bd-entryico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bd-quiet); color: var(--bd-ink2); }
.bd-entryico.is-ours { background: var(--bd-tint); color: var(--bd-accent); }
.bd-entrybody { flex: 1; min-width: 0; }
.bd-entrybody > .bd-label { margin-top: 2px; }
.bd-entrybody > .bd-tag { margin-top: 6px; }
.bd-entrytop { display: flex; align-items: baseline; gap: 8px; }
.bd-entrywho { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.bd-entryat { flex: none; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-mute); white-space: nowrap; }
.bd-addr { margin-top: 2px; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-mute); overflow-wrap: anywhere; }
.bd-entrysub { margin-top: 6px; font-size: 15px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.bd-entrytext { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--bd-ink2); white-space: pre-line; overflow-wrap: anywhere; }
.bd-entrytext.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.bd-entrybody .bd-more { margin: 0 0 -8px -8px; padding: 0 8px; }
.bd-money { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--bd-line2); }
.bd-money > div { flex: 1; min-width: 0; }
.bd-money p { font-size: 15px; line-height: 1.35; }
.bd-money .bd-st { margin-top: 4px; max-width: 100%; }
.bd-amt { flex: none; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.bd-sched, .bd-doc { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bd-line2); }
.bd-sched > div, .bd-doc > div { flex: 1; min-width: 0; }
.bd-sched p, .bd-doc p { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.bd-when { flex: none; width: 88px; padding-top: 2px; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-ink2); }
.bd-doctype { flex: none; width: 88px; }
.bd-doctype .bd-st { max-width: 100%; }
.bd-none { padding: 10px 0; border-top: 1px solid var(--bd-line2); font-size: 15px; color: var(--bd-mute); }
.bd-rel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin-top: 8px; padding: 8px 12px 8px 14px; border: 1px solid var(--bd-line3); border-radius: 12px; background: var(--bd-card); color: var(--bd-ink); text-align: left; cursor: pointer; }
.bd-rel > span:first-child { flex: 1; min-width: 0; }
.bd-rel b { display: block; font-size: 15px; font-weight: 600; }
.bd-rel b + span { display: block; margin-top: 2px; font-size: 13px; color: var(--bd-mute); }
.bd-unk { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bd-line2); color: var(--bd-mute); }
.bd-unk .bd-ico { margin-top: 3px; }
.bd-unk p { font-size: 15px; line-height: 1.5; color: var(--bd-ink2); }

/* ---- the tour */
.bd-tour { position: sticky; bottom: 12px; z-index: 30; margin: 16px 12px 0; padding: 2px 2px 12px 14px; border: 1px solid var(--bd-line); border-radius: 14px; background: var(--bd-tourbg); box-shadow: 0 1px 2px var(--bd-shadow-1), 0 12px 32px -12px var(--bd-shadow-2); }
.bd-tourtop { display: flex; align-items: center; gap: 2px; }
.bd-tourtop .bd-label { flex: 1; min-width: 0; }
.bd-tournext { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--bd-tint); color: var(--bd-accent); font-size: 15px; font-weight: 600; cursor: pointer; }
.bd-tourbar { display: block; width: calc(100% - 12px); height: 2px; margin: 0 12px 8px 0; border: 0; border-radius: 2px; background: var(--bd-line2); color: var(--bd-accent); -webkit-appearance: none; appearance: none; }
.bd-tourbar::-webkit-progress-bar { background: var(--bd-line2); border-radius: 2px; }
.bd-tourbar::-webkit-progress-value { background: var(--bd-accent); border-radius: 2px; }
.bd-tourbar::-moz-progress-bar { background: var(--bd-accent); border-radius: 2px; }
.bd-toursays { margin-right: 12px; font-size: 13px; line-height: 1.45; color: var(--bd-ink2); }
.bd-toursays b { font-weight: 600; color: var(--bd-ink); }
/* The last step's way forward (MK): a plain link to the free demo on its own line under the
   step's words, 44px tall to tap. */
.bd-toursays .bd-tourdemo { display: flex; align-items: center; width: fit-content; min-height: 44px; color: var(--bd-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* With a Context sheet open, the tour's Back and Next sit at the foot of the sheet, inside the dialog
   (so they're in its Tab ring), and the floating card steps aside: on the phone, and in the box
   (SP), where the card and its note float inside the box under the sheet. Behaviour only. */
.bd.has-sheet .bd-tour, .bd.has-sheet .bd-tourpill, .bd.has-sheet[data-layout="box"] .bd-tournote { display: none; }
/* The phone's first screen (DS16 #1, board.js headClear): until the board's head has scrolled clear of
   where the card floats, the card keeps its own place at the board's end, so it never covers the clock. */
.bd[data-layout="phone"].is-headlow :is(.bd-tour, .bd-tourpill) { position: relative; bottom: auto; }
.bd-sheetfoot { flex: none; padding: 2px 8px 2px 20px; border-top: 1px solid var(--bd-line); background: var(--bd-card); }
.bd-tournote { position: sticky; bottom: 12px; z-index: 30; margin: 16px 16px 0; padding: 10px 14px; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-card); color: var(--bd-ink2); font-size: 13px; box-shadow: 0 8px 24px -12px var(--bd-shadow-4); }
.bd-tourpill { position: sticky; bottom: 12px; z-index: 30; display: block; min-height: 44px; margin: 16px 16px 0 auto; padding: 0 16px; border: 1px solid var(--bd-line); border-radius: 12px; background: var(--bd-card); color: var(--bd-ink); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 8px 24px -12px var(--bd-shadow-4); }

/* ---- the app around the board (WP1b; demos' WINDOW-SPEC §3–§4, design's handover-loop NOTES §3,
   §4.3, §7 and its step-2 home screens): the navy bar, the left menu (wide) or the tab strip (the
   phone and the box), and the home page, on design's light product values (the tokens above).
   Anything drawn under 44px grows its hit area to 44px with a centred pseudo-element (NOTES §7);
   12px is the smallest type. */
.bd-app { position: relative; background: var(--bd-page); color: var(--bd-pink); }
/* In the box (the Phone view) the box itself holds the scroll and the sheets: the app adds no box of its own. */
.bd[data-layout="box"] .bd-app { position: static; }
.bd[data-view] { background: var(--bd-page); }
.bd-nav { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px 0 16px; background: var(--bd-nav); color: var(--bd-navink); }
.bd-navbiz { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; font-size: 15px; font-weight: 600; }
.bd-navmark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--bd-mark); color: var(--bd-onmark); font-size: 13px; font-weight: 700; }
.bd-navname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-navclock { flex: none; font-family: var(--bd-mono); font-size: 13px; background: var(--bd-nav); color: var(--bd-navmute); white-space: nowrap; }
.bd-bell { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: var(--bd-nav); color: var(--bd-navink); cursor: pointer; }
.bd-bell:hover { background: var(--bd-nav2); color: var(--bd-navink); }
.bd-bell::after, .bd-tab::after, .bd-obtn::after, .bd-viewas::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.bd-belln { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bd-bad); color: var(--bd-onbad); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.bd .bd-nav .bd-av, .bd .bd-menu .bd-av { width: 24px; height: 24px; border: 0; background: var(--bd-accsoft); color: var(--bd-acc-text); font-family: var(--bd-sans); font-size: 12px; font-weight: 700; }
.bd-viewing { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--bd-nav2); }
.bd-viewas { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border: 0; border-radius: 8px; background: var(--bd-nav2); color: var(--bd-navink); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.bd-viewas[aria-checked="true"] { background: var(--bd-card); color: var(--bd-pink); }
.bd-viewrole { font-size: 12px; font-weight: 400; background: var(--bd-nav2); color: var(--bd-navmute); }
.bd-viewas[aria-checked="true"] .bd-viewrole { background: var(--bd-card); color: var(--bd-pmute); }
.bd-nav button:focus-visible { outline: 2px solid var(--bd-navink); outline-offset: 1px; }

/* Wide: the menu at the left, the view on its right. */
.bd-appbody { display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.bd-menu { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 16px; border-right: 1px solid var(--bd-edge); background: var(--bd-card); color: var(--bd-pink); }
.bd-mi { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: var(--bd-card); color: var(--bd-pink2); font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; }
.bd-mi:hover { background: var(--bd-page); color: var(--bd-pink); }
.bd-mi[aria-current="page"] { background: var(--bd-accsoft); color: var(--bd-acc-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--bd-acc); }
.bd-mi.is-plain { cursor: default; }
.bd-mi.is-plain:hover { background: var(--bd-card); color: var(--bd-pink2); }
.bd-ml { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bd-mrole { background: var(--bd-card); color: var(--bd-pmute); }
.bd-mn { flex: none; min-width: 22px; padding: 0 6px; border-radius: 7px; background: var(--bd-page); color: var(--bd-pink2); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.bd-mh { margin: 16px 10px 4px; font-family: var(--bd-mono); font-size: 12px; letter-spacing: .06em; background: var(--bd-card); color: var(--bd-pmute); }
.bd-mdot { flex: none; width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; background: var(--td, var(--bd-pmute)); }
.bd-mconn { margin: 0 10px; font-size: 13px; line-height: 1.45; background: var(--bd-card); color: var(--bd-pink2); }
.bd-main { position: relative; min-width: 0; background: var(--bd-page); }

/* The phone and the box: the tab strip under the navy bar, sliding sideways, no scrollbar, a fade at the right. */
.bd-tabs { position: relative; border-bottom: 1px solid var(--bd-edge); background: var(--bd-card); }
.bd-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, transparent, var(--bd-card)); pointer-events: none; }
.bd-tabrow { display: flex; gap: 8px; padding: 8px 28px 8px 12px; overflow-x: auto; scrollbar-width: none; }
.bd-tabrow::-webkit-scrollbar { display: none; }
.bd-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--tg, var(--bd-page)); color: var(--bd-pink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.bd-tab.is-home { background: var(--bd-page); }
.bd-tab[aria-current="page"] { background: var(--bd-pink); color: var(--bd-onink); }
.bd-tab .bd-mn { background: var(--bd-card); color: var(--bd-pink2); }
.bd-navav { margin-left: 2px; }

/* The home page: on wide it takes the window's height and scrolls inside itself, so switching views
   never moves the page; two columns (the main 1fr, the side 300px). On the phone one column. */
.bd-home { position: relative; }
.bd-home[data-scroll="home"] { height: clamp(560px, calc(100vh - 150px), 860px); padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.bd-app:not(.is-wide) .bd-home { padding: 16px 12px 8px; }
.bd-hcols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.bd-hgreet { margin-bottom: 16px; }
.bd-hstamp { font-size: 13px; color: var(--bd-pmute); }
.bd-hh { margin-top: 2px; font-family: var(--bd-display); font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--bd-pink); outline: none; }
.bd-app:not(.is-wide) .bd-hh { font-size: 22px; }
.bd-hline { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--bd-pink2); }
.bd-hline b { color: var(--bd-pink); }
.bd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bd-app:not(.is-wide) .bd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-kpi { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--bd-edge); border-radius: 12px; background: var(--bd-card); }
.bd-kpigo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 12px 14px; border: 0; background: var(--bd-card); color: var(--bd-pink); text-align: left; cursor: pointer; }
.bd-kpigo:hover { background: var(--bd-fill); color: var(--bd-pink); }
.bd-kpil { font-size: 13px; color: var(--bd-pink2); }
.bd-kpiv { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bd-kpi[data-kpi="needs"] .bd-kpiv { color: var(--bd-bad); }
.bd-kpisub { font-size: 12px; line-height: 1.35; color: var(--bd-pmute); overflow-wrap: anywhere; }
.bd-mbars { display: block; width: calc(100% - 28px); max-width: none; height: 28px; margin: -4px 14px 12px; overflow: visible; }
.bd-mbar { fill: var(--bd-acc); opacity: .35; }
.bd-mbar.is-max { opacity: 1; }
/* DS39: static charts, shared light/dark tokens; no inline style or animation. */
.bd-mini { display: block; width: calc(100% - 28px); max-width: none; height: 28px; margin: -4px 14px 12px; }
.bd-mini-urgent { fill: var(--bd-bad); }
.bd-mini-rest { fill: var(--bd-acc); }
.bd-mini-team-0 { fill: var(--bd-tool-money); }
.bd-mini-team-1 { fill: var(--bd-acc); }
.bd-mini-team-2 { fill: var(--bd-tool-gates); }
.bd-mini-cash polyline { fill: none; stroke: var(--bd-pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bd-mini-zero { stroke: var(--bd-zero); stroke-width: 1; stroke-dasharray: 2 2; }
.bd [data-mark] { outline: none; }
.bd [data-mark]:focus-visible { stroke: var(--bd-pink); stroke-width: 2px; }
.bd-hcard { margin-bottom: 16px; border: 1px solid var(--bd-edge); border-radius: 12px; background: var(--bd-card); overflow: hidden; }
.bd-hpad { padding: 14px 16px 16px; }
.bd-hhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; }
.bd-hh3 { font-size: 16px; font-weight: 650; color: var(--bd-pink); outline: none; }
.bd-hbadge { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--bd-page); color: var(--bd-pink2); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.bd-hbadge.is-bad { background: var(--bd-badsoft); color: var(--bd-bad); }
.bd-hmeta { margin-left: auto; font-size: 13px; color: var(--bd-pmute); }
.bd-hrow { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 12px 12px 16px; border: 0; border-top: 1px solid var(--bd-edge2); background: var(--bd-card); color: var(--bd-pink); text-align: left; cursor: pointer; }
.bd-hrow:hover { background: var(--bd-fill); color: var(--bd-pink); }
.bd-hrow.is-sel { background: var(--bd-accsoft); color: var(--bd-pink); box-shadow: inset 3px 0 0 var(--bd-acc); }
.bd-hico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--tg, var(--bd-page)); }
.bd-hico::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--td, var(--bd-pmute)); }
.bd-hmid { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.bd-htop { font-size: 14px; line-height: 1.35; color: var(--bd-pink); overflow-wrap: anywhere; }
.bd-hsub { font-size: 12px; line-height: 1.4; color: var(--bd-pmute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-hif { font-weight: 600; color: var(--bd-pink2); }
.bd-lt { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 6px; border-radius: 999px; background: var(--tg, var(--bd-page)); color: var(--bd-pink); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: 1px; }
.bd-lt::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--td, var(--bd-pmute)); }
.bd-htime { flex: none; padding: 3px 8px; border-radius: 7px; background: var(--bd-page); color: var(--bd-pink2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bd-htime.is-now { background: var(--bd-badsoft); color: var(--bd-bad); }
.bd-hstate { flex: none; max-width: 42%; font-size: 12px; line-height: 1.35; color: var(--bd-pmute); text-align: right; }
.bd-hchev { flex: none; color: var(--bd-pmute); }
.bd-hrow.is-done .bd-htop { color: var(--bd-pink2); }
.bd-halso { border-top: 1px solid var(--bd-edge2); background: var(--bd-fill); }
.bd-hlabel { padding: 10px 16px 0; font-size: 12px; font-weight: 700; background: var(--bd-fill); color: var(--bd-pink2); }
.bd-hrow.is-also { border-top: 0; background: var(--bd-fill); }
.bd-hrow.is-also:hover { background: var(--bd-page); }
.bd-hkick { font-family: var(--bd-mono); font-size: 12px; letter-spacing: .06em; color: var(--bd-pmute); }
.bd-htitle { margin-top: 4px; font-size: 16px; line-height: 1.35; font-weight: 650; color: var(--bd-pink); outline: none; text-wrap: balance; }
.bd-hnone { padding: 4px 16px 14px; font-size: 13px; color: var(--bd-pmute); }
.bd-hday .bd-day { margin: 0; padding: 0 16px 4px; border: 0; border-radius: 0; box-shadow: none; background: var(--bd-card); }

/* Cash this week: a bridge, columns on wide, rows on the phone (label 92px · track · value 66px).
   Money out and money that may come are hatched; maybe-money is outlined dashed (NOTES §7). */
.bd-bridge.is-cols { margin-top: 14px; }
.bd-bsvg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-bzero { stroke: var(--bd-zero); stroke-width: 1; }
.bd .is-total .bd-bbar { fill: var(--bd-total); }
.bd .is-in .bd-bbar { fill: var(--bd-pos); }
.bd .is-low .bd-bbar { fill: var(--bd-neg); }
.bd .is-maybe .bd-bbar, .bd .is-maybetotal .bd-bbar { stroke: var(--bd-pos); stroke-width: 1px; stroke-dasharray: 3 2; }
.bd .is-maybetotal .bd-bbar { stroke: var(--bd-total); }
.bd .bd-hatch.is-out .bd-hatchbg { fill: var(--bd-badsoft); }
.bd .bd-hatch.is-out .bd-hatchline { stroke: var(--bd-neg); stroke-width: 2.5; }
.bd .bd-hatch.is-maybe .bd-hatchbg { fill: var(--bd-possoft); }
.bd .bd-hatch.is-maybe .bd-hatchline { stroke: var(--bd-pos); stroke-width: 2.5; }
.bd .bd-hatch.is-maybetotal .bd-hatchbg { fill: var(--bd-accsoft); }
.bd .bd-hatch.is-maybetotal .bd-hatchline { stroke: var(--bd-total); stroke-width: 2.5; }
.bd-bval { font-family: var(--bd-sans); font-size: 12px; font-weight: 600; fill: var(--bd-pink); }
.bd-bxl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 6px; }
.bd-bxl span { padding: 0 3px; font-size: 12px; line-height: 1.3; text-align: center; color: var(--bd-pmute); overflow-wrap: anywhere; }
.bd-bridge.is-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.bd-bdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bd-brow2 { display: grid; grid-template-columns: 92px minmax(0, 1fr) 66px; align-items: center; gap: 8px; min-height: 22px; }
.bd-blabel { font-size: 12px; line-height: 1.25; color: var(--bd-pink2); overflow-wrap: anywhere; }
.bd-btrack { display: block; width: 100%; height: 14px; overflow: visible; }
.bd-bvalue { font-size: 12px; font-weight: 600; text-align: right; color: var(--bd-pink); white-space: nowrap; }
.bd-brow2.is-out .bd-bvalue, .bd-brow2.is-low .bd-bvalue { color: var(--bd-neg); }
.bd-blegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--bd-pink2); }
.bd-bkey { display: inline-flex; align-items: center; gap: 6px; }
.bd-bsw { width: 10px; height: 10px; border-radius: 2px; background: var(--bd-total); }
.bd-bkey.is-out .bd-bsw { background: repeating-linear-gradient(45deg, var(--bd-neg) 0 2px, var(--bd-badsoft) 2px 4px); }
.bd-bkey.is-in .bd-bsw { background: var(--bd-pos); }
.bd-bkey.is-maybe .bd-bsw { background: repeating-linear-gradient(45deg, var(--bd-pos) 0 2px, var(--bd-possoft) 2px 4px); }

/* Going on their own, with Hold and Undo. */
.bd-orow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--bd-edge2); }
.bd-otime { flex: none; width: 40px; padding-top: 1px; font-family: var(--bd-mono); font-size: 13px; color: var(--bd-pmute); }
.bd-omid { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--bd-pink2); }
.bd-omid b { font-size: 14px; color: var(--bd-pink); }
.bd-osent { font-size: 12px; color: var(--bd-pmute); }
.bd-orow.is-held .bd-osent { font-weight: 700; color: var(--bd-bad); }
.bd-obtn { position: relative; flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--bd-control); border-radius: 8px; background: var(--bd-card); color: var(--bd-pink); font-size: 13px; font-weight: 600; cursor: pointer; }
.bd-obtn:hover { background: var(--bd-page); color: var(--bd-pink); }

/* Today, by tool: the donut and its legend side by side. */
.bd-donutrow { display: flex; align-items: center; gap: 24px; margin-top: 12px; }
.bd-donut { position: relative; flex: none; width: 150px; }
.bd-app:not(.is-wide) .bd-donut { width: 120px; }
.bd-app:not(.is-wide) .bd-donutrow { gap: 16px; }
.bd-donut svg { display: block; width: 100%; height: auto; }
.bd-slice { fill: none; stroke-width: 18; }
.bd-slice:hover, .bd .bd-slice:focus-visible { stroke-width: 24; }
.bd .bd-slice[data-tool="gates"], .bd .bd-ldot[data-tool="gates"] { stroke: var(--bd-tool-gates); background: var(--bd-tool-gates); }
.bd .bd-slice[data-tool="inquiries"], .bd .bd-ldot[data-tool="inquiries"] { stroke: var(--bd-tool-inquiries); background: var(--bd-tool-inquiries); }
.bd .bd-slice[data-tool="assistant"], .bd .bd-ldot[data-tool="assistant"] { stroke: var(--bd-tool-assistant); background: var(--bd-tool-assistant); }
.bd .bd-slice[data-tool="money"], .bd .bd-ldot[data-tool="money"] { stroke: var(--bd-tool-money); background: var(--bd-tool-money); }
.bd .bd-slice[data-tool="router"], .bd .bd-ldot[data-tool="router"] { stroke: var(--bd-tool-router); background: var(--bd-tool-router); }
.bd .bd-slice[data-tool="chaser"], .bd .bd-ldot[data-tool="chaser"] { stroke: var(--bd-tool-chaser); background: var(--bd-tool-chaser); }
.bd .bd-slice[data-tool="intake"], .bd .bd-ldot[data-tool="intake"] { stroke: var(--bd-tool-intake); background: var(--bd-tool-intake); }
.bd .bd-slice[data-tool="filing"], .bd .bd-ldot[data-tool="filing"] { stroke: var(--bd-tool-filing); background: var(--bd-tool-filing); }
.bd .bd-slice[data-tool="other"], .bd .bd-ldot[data-tool="other"] { stroke: var(--bd-tool-other); background: var(--bd-tool-other); }
.bd-donutn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: var(--bd-pmute); pointer-events: none; }
.bd-donutn b { font-size: 24px; line-height: 1.1; color: var(--bd-pink); }
.bd-legend { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.bd-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bd-pink2); }
.bd-ldot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.bd-lname { flex: 1; min-width: 0; }
.bd-lnum { font-weight: 600; color: var(--bd-pink); }

/* The morning briefing, grouped by where each message went, with See all. */
.bd-bgroup { padding: 10px 16px 6px; border-top: 1px solid var(--bd-edge2); font-family: var(--bd-mono); font-size: 12px; letter-spacing: .06em; background: var(--bd-fill); color: var(--bd-pmute); }
.bd-brief { display: flex; gap: 12px; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--bd-edge2); background: var(--bd-card); color: var(--bd-pink2); font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
.bd-brief:hover { background: var(--bd-fill); color: var(--bd-pink2); }
.bd-brief.is-plain { cursor: default; }
.bd-brief.is-plain:hover { background: var(--bd-card); }
.bd-bvia { flex: none; width: 52px; padding-top: 2px; font-family: var(--bd-mono); font-size: 12px; color: var(--bd-pmute); overflow-wrap: anywhere; }
.bd-bmid { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bd-bmid b { font-size: 14px; color: var(--bd-pink); }
.bd-ball { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--bd-edge2); background: var(--bd-card); color: var(--bd-acc-text); font-size: 14px; font-weight: 600; cursor: pointer; }

/* The charts' tooltip: over the mark, the board's ink inverted. */
.bd-tip { position: absolute; z-index: 20; max-width: 260px; padding: 6px 9px; border-radius: 7px; background: var(--bd-tip); color: var(--bd-tipink); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 20px -10px var(--bd-shadow-5); }

/* A row's card: on wide in a drawer at the right of the window (the right pane's card, restyled),
   on the phone and in the box the bottom sheet (86% at most, a grab handle, a rounded top). */
.bd-app.is-wide .bd-sheetwrap.is-drawer { position: absolute; inset: 0; z-index: 12; }
.bd-app.is-wide .is-drawer .bd-scrim { background: var(--bd-scrim-drawer); }
.bd-app.is-wide .is-drawer .bd-sheet { top: 0; right: 0; bottom: 0; left: auto; width: min(460px, 56%); height: auto; max-width: none; margin: 0; border-left: 1px solid var(--bd-edge); border-radius: 0; animation: bd-rise .2s ease; }
.bd-app:not(.is-wide) .is-drawer .bd-sheet { height: auto; max-height: 86%; }
.bd-drawer .bd-sheetbody > .bd-card { margin: 0; border: 0; box-shadow: none; }
.bd-home .bd-now > span { font-size: 12px; }
.bd-home .bd-tourpill { margin-top: 0; }
.bd-home > .bd-tourpill { position: static; margin: 0 0 0 auto; }

/* With reduced motion nothing moves: not the glint, the sheet, the folds or a scroll. */
@media (prefers-reduced-motion: reduce) {
  .bd *, .bd *::before, .bd *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bd-say { background: var(--bd-say); }
}

/* WP1c: light tour tokens from handover-loop/tokens.css and its guide screens.
   The dim is local to the board; the strip has its own dim because the Phone
   frame and its scroll container make a stacking context. */
.bd {
  --ring-a: #7C5CFF;
  --ring-b: #E0D7FF;
  --guide-bg: #16141C;
  --guide-ink: #FFFFFF;
  --guide-mute: #A8A3B8;
  --guide-copy: #DCD8E8;
  --guide-shadow: rgba(8, 6, 30, .7);
}
@keyframes bd-tutorial-fade { from { opacity: 0; } to { opacity: 1; } }
.bd-tutorial-dim { position: absolute; inset: 0; z-index: 40; background: var(--site-scrim); animation: bd-tutorial-fade 180ms ease; }
.bd.has-tutorial .bd-homescroll { container-type: normal; }
.bd .is-tutorial-lit { position: relative; z-index: 41; box-shadow: inset 0 0 0 2px var(--ring-a); }
.bd .is-tutorial-lit :is(.bd-htime, .bd-hchev) { opacity: .7; }
.bd-tutorial-guide { position: sticky; bottom: 12px; z-index: 60; width: calc(100% - 24px); margin: 12px; padding: 14px 16px; border-radius: 16px; background: var(--guide-bg); color: var(--guide-ink); box-shadow: 0 24px 48px -16px var(--guide-shadow); }
.bd-guide-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--guide-mute); font-family: var(--bd-mono); font-size: 12px; }
.bd-guide-dashes { display: flex; gap: 4px; }
.bd-guide-dashes i { width: 13px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--guide-ink) 30%, var(--guide-bg)); }
.bd-guide-dashes i.is-on { background: var(--ring-b); }
.bd .bd-tutorial-guide h3 { margin: 8px 0 4px; font-family: var(--bd-display); font-size: 20px; line-height: 1.2; font-weight: 650; }
.bd .bd-tutorial-guide p { margin: 0; color: var(--guide-copy); font-size: 14px; line-height: 1.45; }
.bd-guide-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.bd-guide-skip { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--guide-mute); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bd-guide-next { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--guide-ink); color: var(--guide-bg); font-weight: 650; font-size: 14px; cursor: pointer; }
.bd-next-ring { position: relative; border: 2px solid var(--ring-a); }
.bd-next-ring::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--bd-ang), var(--ring-a), var(--ring-b) 70deg, color-mix(in srgb, var(--ring-a) 12%, transparent) 150deg 250deg, var(--ring-a)); mask: linear-gradient(var(--ring-a) 0 0) content-box, linear-gradient(var(--ring-a) 0 0); mask-composite: exclude; pointer-events: none; animation: bd-spin 1.8s linear 2.75; animation-delay: var(--tutorial-delay, 0s); }
.bd.is-tutorial-still .bd-next-ring::before { display: none; }
.bd[data-layout="wide"] .bd-tutorial-guide { position: absolute; top: 240px; right: 24px; bottom: auto; width: 300px; margin: 0; padding: 16px; border-radius: 14px; }
.bd[data-layout="wide"][data-tutorial-card="1"] .bd-tutorial-guide { top: 50%; right: auto; left: 50%; width: 380px; max-width: calc(100% - 24px); padding: 22px; transform: translate(-50%, -50%); }
.bd[data-layout="wide"][data-tutorial-card="1"] .bd-tutorial-guide h3 { font-size: 26px; }
.bd .bd-guide-art { display: none; }
.bd[data-layout="wide"] .bd-guide-art { display: flex; align-items: flex-end; height: 96px; margin: -8px -8px 12px; padding: 10px 12px; border-radius: 10px; background: radial-gradient(70% 90% at 15% 15%, var(--peach), transparent 70%), radial-gradient(70% 90% at 85% 20%, var(--lilac), transparent 70%), radial-gradient(70% 90% at 55% 100%, var(--sky), transparent 70%), var(--lemon); }
.bd .bd-guide-art span { padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--guide-bg) 75%, transparent); color: var(--guide-ink); font-family: var(--bd-mono); font-size: 11px; text-transform: uppercase; }
.bd[data-layout="box"] .bd-tutorial-guide { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; width: auto; }
.bd[data-layout="phone"][data-tutorial-card="1"] .bd-tutorial-guide { bottom: calc((100dvh - var(--tutorial-guide-h, 220px)) / 2); }
.bd[data-layout="box"][data-tutorial-card="1"] .bd-tutorial-guide { bottom: calc((100% - var(--tutorial-guide-h, 220px)) / 2); }
@media (prefers-reduced-motion: reduce) {
  .bd-next-ring::before { display: none; }
  .bd-tutorial-dim { animation: none; }
}

/* The kept reply: Undo is a separate button, never nested in an opening row. */
.bd-hrow.is-done { cursor: default; background: var(--bd-accsoft); }
.bd-done-day { font-size: 12px; line-height: 1.4; color: var(--bd-pink2); }
.bd-done-undo { flex: none; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--bd-acc-text); font-size: 13px; text-decoration: underline; cursor: pointer; }
.bd-guide-demo { display: inline-flex; align-items: center; min-height: 44px; color: var(--guide-ink); font-size: 13px; text-decoration: underline; }
.bd[data-tutorial-card="7"] .bd-guide-actions { flex-wrap: wrap; }
.bd[data-tutorial-card="7"] .bd-guide-demo { margin-left: auto; }
/* A control the tour switched off takes no hover either: the pointer left over from the last
   card's button would otherwise fill the tile under it (card 7's Need you). */
.bd.has-tutorial button:disabled:not(.is-tutorial-lit) { pointer-events: none; }
.bd.has-tutorial .bd-sheetwrap.is-drawer { z-index: 45; pointer-events: none; }
.bd.has-tutorial .is-drawer .bd-scrim { background: transparent; }
.bd.has-tutorial .bd-drawer { pointer-events: auto; }
.bd.has-tutorial .bd-drawer .bd-sheethead { opacity: .7; }
.bd.has-tutorial .bd-drawer .bd-card > :not(.bd-body, .bd-cardtop),
.bd.has-tutorial .bd-drawer .bd-cardtop > *,
.bd.has-tutorial .bd-drawer .bd-body > :not(.bd-says) { opacity: .7; }
/* Who and what stay pinned above the line the card points at (the head's parts fade, not its fill). */
.bd.has-tutorial .bd-drawer .bd-cardtop { position: sticky; top: 0; z-index: 2; background: var(--bd-card); box-shadow: 0 -16px 0 var(--bd-card); }
.bd.has-tutorial .bd-say { animation: none; background: var(--bd-line3); }
.bd.has-tutorial .bd-says > :not(.bd-next-ring) { opacity: .7; }
.bd.has-tutorial .bd-say.bd-next-ring { padding: 0; border: 2px solid var(--ring-a); background: var(--bd-card); }
.bd.has-tutorial .bd-next-ring .bd-sayt { opacity: 1; }
.bd[data-layout="wide"][data-tutorial-card="4"] .bd-tutorial-guide,
.bd[data-layout="wide"][data-tutorial-card="6"] .bd-tutorial-guide { right: calc(min(460px, (100% - 224px) * .56) + 12px); top: var(--tutorial-guide-top, 280px); }
.bd:not([data-layout="wide"]) .bd-drawer .bd-tutorial-guide { position: static; flex: none; width: auto; margin: 0; padding: 14px 16px; border-radius: 0; }
.bd[data-layout="phone"].has-tutorial .bd-drawer { max-height: 86dvh; }
.bd-tutorial-toast { display: none; }
.bd[data-layout="wide"] .bd-tutorial-toast { position: absolute; z-index: 60; left: 240px; bottom: 12px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 264px); padding: 4px 12px; border-radius: 10px; background: var(--guide-bg); color: var(--guide-copy); box-shadow: 0 12px 32px -12px var(--guide-shadow); font-size: 13px; line-height: 1.4; animation: bd-rise 180ms ease; }
.bd-tutorial-toast .bd-done-undo { color: var(--guide-ink); }

.bd .is-done .bd-hico::after { display: none; }

.bd[data-layout="wide"][data-tutorial-card="5"] .bd-tutorial-guide { top: var(--tutorial-done-top, 240px); }

/* DM: all product states inherit the site theme. No dark state overrides. */
:where(:root[data-theme="dark"]) .bd {
  --bd-bg: #14181F;
  --bd-card: #1C2129;
  --bd-line: #2B3039;
  --bd-line2: #242A33;
  --bd-line3: #333944;
  --bd-fill: #191E26;
  --bd-quiet: #222833;
  --bd-ink: #E6E8EC;
  --bd-ink2: #B4BCC9;
  --bd-mute: #8C99AD;
  --bd-tagink: #A9B2C0;
  --bd-accent: #A995FF;
  --bd-tint: #252238;
  --bd-nav: #15213A;
  --bd-nav2: #1B2B4C;
  --bd-navink: #F2F4F7;
  --bd-navmute: #A9B4C6;
  --bd-acc: #3D6FD9;
  --bd-accsoft: #1E2A44;
  --bd-onacc: #FFFFFF;
  --bd-page: #14181F;
  --bd-edge: #2B3039;
  --bd-edge2: #242A33;
  --bd-pink: #E6E8EC;
  --bd-pink2: #B4BCC9;
  --bd-pmute: #8C99AD;
  --bd-bad: #FF7B72;
  --bd-badsoft: #3A1F1F;
  --bd-grid: #2A303A;
  --bd-zero: #6B7689;
  --bd-total: #7F9FE6;
  --bd-pos: #3FB98A;
  --bd-neg: #FF7B72;
  --bd-tip: #E6E8EC;
  --bd-tipink: #14181F;
  --bd-tipmute: #3D4454;
  --bd-tool-gates: #9F8CF2;
  --bd-tool-inquiries: #E0B43C;
  --bd-tool-assistant: #F08A5D;
  --bd-tool-money: #3FB98A;
  --bd-tool-router: #6E95FF;
  --bd-tool-chaser: #EC6FAE;
  --bd-tool-intake: #D3A15A;
  --bd-tool-filing: #8FA0B8;
  --bd-tool-other: #6B7383;
  --bd-mark: #E8B93A;
  --bd-control: #6B7689;
  --bd-possoft: #17322A;
  --bd-onink: #14181F;
  --bd-onaccent: #14181F;
  --bd-saidmeta: #3D4454;
  --bd-acc-text: #8FB1FF;
  --bd-onmark: #14181F;
  --bd-onbad: #14181F;
  --bd-say-arc: rgba(169,149,255,.6);
  --bd-sel: #252238;
  --bd-sel-edge: #7C66E0;
  --bd-ok-tint: #17322A;
  --bd-ok-ink: #93E3C6;
  --bd-follow-tint: #3A3420;
  --bd-follow-ink: #F2D57A;
  --bd-held-tint: #3D2A22;
  --bd-held-ink: #FFBE9C;
  --bd-held-edge: #6A4A3B;
  --bd-urgent-tint: #3D1F1E;
  --bd-urgent-ink: #FF9B93;
  --bd-raise: #1A1F27;
  --bd-reply: #222833;
  --bd-say: #4C4270;
  --bd-chip-on: #4C4270;
  --bd-chip-hover: #4A5363;
  --bd-dot: #6B7689;
  --bd-grab: #3A4150;
  --bd-segs: rgba(20,24,31,.94);
  --bd-tourbg: rgba(28,33,41,.97);
  --bd-scrim: rgba(4,6,14,.6);
  --bd-scrim-drawer: rgba(4,6,14,.45);
  --bd-wash: rgba(169,149,255,.07);
  --bd-wash-office: rgba(110,149,255,.07);
  --bd-ring: 0 0 0 1px #A995FF,0 0 0 5px rgba(169,149,255,.18);
  --bd-lift: 0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.6);
  --bd-shadow-1: rgba(0,0,0,0.08);
  --bd-shadow-2: rgba(0,0,0,0.4);
  --bd-shadow-3: rgba(0,0,0,0.7);
  --bd-shadow-4: rgba(0,0,0,0.5);
  --bd-shadow-5: rgba(0,0,0,0.7);
  --ring-a: #7C5CFF;
  --ring-b: #E0D7FF;
  --guide-bg: #EEEDF3;
  --guide-ink: #16141C;
  --guide-mute: #6E6A7A;
  --guide-copy: #423F4C;
  --guide-shadow: rgba(0,0,0,.8);
}

/* SF4: countable needs, independent of the charts' stretched viewBox. */
.bd-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: -4px 14px 12px; }
.bd-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.bd-dot.bd-mini-urgent { background: var(--bd-bad); }
.bd-dot.bd-mini-rest { background: var(--bd-acc); }
.bd-mini-cash polyline, .bd-mini-zero { vector-effect: non-scaling-stroke; }